.breeding-shell { display: grid; gap: 18px; }
.breeding-tabs { display: flex; border-bottom: 1px solid var(--cds-border-subtle-01); }
.breeding-tab { min-height: 48px; padding: 0 18px; color: var(--cds-text-secondary); font: inherit; font-size: .84rem; font-weight: 600; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; }
.breeding-tab span { color: var(--cds-text-helper); }
.breeding-tab:hover { color: var(--cds-text-primary); background: var(--cds-background-hover); }
.breeding-tab:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.breeding-tab.is-active { color: var(--cds-text-primary); border-bottom-color: var(--cds-interactive); }
.breeding-panel { padding: 20px; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); }
.breeding-panel[hidden] { display: none; }
.breeding-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.breeding-panel-head h2, .pair-results-head h3, .route-panel h3 { margin: 2px 0 0; color: var(--cds-text-primary); font-size: 1.12rem; font-weight: 500; }
.breeding-kicker, .slot-label { display: block; margin: 0; color: var(--cds-interactive); font-size: .67rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.breeding-primary, .breeding-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; color: var(--cds-text-primary); font: inherit; font-size: .75rem; font-weight: 600; border: 1px solid var(--cds-border-subtle-02); background: var(--cds-layer-02); cursor: pointer; }
.breeding-primary { color: var(--cds-text-on-color); border-color: var(--cds-button-primary); background: var(--cds-button-primary); }
.breeding-primary:hover { background: var(--cds-button-primary-hover); }
.breeding-secondary:hover:not(:disabled) { border-color: var(--cds-interactive); }
.breeding-secondary:disabled { opacity: .45; cursor: not-allowed; }
.breeding-primary:focus-visible, .breeding-secondary:focus-visible, .pal-select:focus-visible, .swap-parents:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.breeding-primary input, .palbox-import input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.parent-equation { display: grid; grid-template-columns: minmax(210px, 1fr) 44px minmax(210px, 1fr) 36px minmax(230px, 1.1fr); gap: 12px; align-items: center; }
.parent-slot { display: grid; gap: 8px; min-width: 0; }
.pal-select { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 76px; padding: 8px 10px; color: var(--cds-text-primary); text-align: left; font: inherit; border: 1px solid var(--cds-border-subtle-02); background: var(--cds-field-01); cursor: pointer; }
.pal-select:hover { border-color: var(--cds-interactive); }
.pal-select img, .result-pal img { width: 58px; height: 58px; object-fit: contain; }
.pal-select-copy { min-width: 0; }
.pal-select-copy strong { display: block; overflow: hidden; color: var(--cds-text-primary); font-size: .88rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pal-select-copy small { display: block; margin-top: 3px; color: var(--cds-text-helper); font-size: .68rem; }
.pal-select-action { color: var(--cds-link-primary); font-size: .68rem; font-weight: 600; }
.pal-select-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--cds-text-secondary); }
.pal-select-empty::before { content: "+"; display: grid; place-items: center; width: 34px; height: 34px; color: var(--cds-interactive); font-size: 1.4rem; border: 1px solid var(--cds-interactive); }
.pal-select-empty span { margin-left: auto; color: var(--cds-link-primary); font-size: .7rem; font-weight: 600; }
.equation-mark { color: var(--cds-text-helper); text-align: center; font-size: 1.3rem; }
.swap-parents { width: 40px; height: 40px; padding: 0; color: var(--cds-interactive); font: inherit; font-size: 1.2rem; border: 1px solid var(--cds-border-subtle-02); background: var(--cds-layer-02); cursor: pointer; }
.swap-parents:hover { border-color: var(--cds-interactive); background: var(--cds-background-hover); }
.gender-switch { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--cds-border-subtle-01); }
.gender-switch button { min-height: 34px; padding: 0 8px; color: var(--cds-text-secondary); font: inherit; font-size: .68rem; border: 0; background: transparent; cursor: pointer; }
.gender-switch button + button { border-left: 1px solid var(--cds-border-subtle-01); }
.gender-switch button[aria-pressed="true"] { color: var(--cds-text-primary); background: var(--cds-layer-02); box-shadow: inset 0 -2px var(--cds-interactive); }
.gender-readout { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; color: var(--cds-text-primary); font-size: .7rem; border: 1px solid var(--cds-border-subtle-01); }
.gender-readout small { justify-self: end; color: var(--cds-text-helper); }
.child-result { min-height: 119px; border: 1px solid var(--cds-border-subtle-02); background: var(--cds-layer-02); }
.child-result.is-ready { border-left: 3px solid var(--cds-interactive); }
.result-placeholder { display: grid; place-items: center; min-height: 117px; padding: 16px; color: var(--cds-text-helper); font-size: .74rem; text-align: center; }
.result-pal { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px; }
.result-pal-copy { min-width: 0; }
.result-pal-copy small { display: block; color: var(--cds-interactive); font-size: .65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.result-pal-copy strong { display: block; margin-top: 4px; color: var(--cds-text-primary); font-size: 1rem; font-weight: 600; }
.result-pal-copy span { display: block; margin-top: 3px; color: var(--cds-text-helper); font-size: .67rem; }
.result-actions { display: flex; border-top: 1px solid var(--cds-border-subtle-01); }
.result-actions a, .result-actions button { flex: 1 1 0; min-height: 34px; padding: 0 8px; color: var(--cds-link-primary); text-align: center; text-decoration: none; font: inherit; font-size: .65rem; border: 0; background: transparent; cursor: pointer; }
.result-actions > * + * { border-left: 1px solid var(--cds-border-subtle-01); }
.result-actions a:hover, .result-actions button:hover { background: var(--cds-background-hover); }
.gender-note { margin: 14px 0 0; padding: 10px 12px; color: #f1c21b; font-size: .72rem; line-height: 1.45; border-left: 3px solid #f1c21b; background: rgba(241,194,27,.08); }

.target-head { align-items: end; }
.target-select { width: min(420px, 100%); }
.palbox-toolbar { display: grid; grid-template-columns: minmax(270px, 1.3fr) minmax(180px, .6fr) minmax(180px, .7fr); gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-02); }
.palbox-import { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.palbox-source { color: var(--cds-text-helper); font-size: .68rem; line-height: 1.35; }
.breeding-field { display: grid; gap: 5px; }
.breeding-field > span { color: var(--cds-text-secondary); font-size: .66rem; font-weight: 600; }
.breeding-field select, .breeding-field input { min-height: 40px; width: 100%; padding: 0 11px; color: var(--cds-text-primary); font: inherit; font-size: .74rem; border: 0; border-bottom: 1px solid var(--cds-border-strong-01); border-radius: 0; background: var(--cds-field-01); }
.breeding-field select:focus, .breeding-field input:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.breeding-message { margin: 8px 0 0; color: #f1c21b; font-size: .7rem; }
.route-panel { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 14px; padding: 15px; border: 1px solid var(--cds-border-subtle-01); border-left: 3px solid #42be65; background: var(--cds-layer-02); }
.route-panel h3 { font-size: .95rem; }
.route-panel p:not(.breeding-kicker) { margin: 5px 0 0; color: var(--cds-text-secondary); font-size: .7rem; }
.route-steps { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--cds-border-subtle-01); }
.route-steps ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: route; }
.route-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; color: var(--cds-text-secondary); font-size: .72rem; }
.route-steps li::before { counter-increment: route; content: counter(route); display: grid; place-items: center; width: 24px; height: 24px; color: #06180d; font-size: .65rem; font-weight: 700; background: #42be65; }
.route-steps strong { color: var(--cds-text-primary); font-weight: 600; }
.gender-tag { color: #f1c21b; font-weight: 600; }

.pair-results-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 22px; padding-bottom: 10px; border-bottom: 1px solid var(--cds-border-subtle-01); }
.pair-results-head h3 { font-size: .96rem; }
.pair-results-head > span { color: var(--cds-text-helper); font-size: .68rem; }
.pair-results { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin-top: 1px; background: var(--cds-border-subtle-01); }
.pair-row { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: center; gap: 7px; min-height: 64px; padding: 8px 10px; background: var(--cds-layer-01); }
.pair-parent { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 8px; align-items: center; min-width: 0; color: var(--cds-text-primary); text-decoration: none; }
.pair-parent:hover strong { color: var(--cds-link-primary); }
.pair-parent img { width: 42px; height: 42px; object-fit: contain; }
.pair-parent-copy { min-width: 0; }
.pair-parent strong { display: block; overflow: hidden; font-size: .72rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pair-parent small { display: block; margin-top: 2px; color: var(--cds-text-helper); font-size: .61rem; }
.pair-plus { color: var(--cds-text-helper); text-align: center; }
.owned-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: #42be65; vertical-align: 1px; }
.breeding-empty { grid-column: 1 / -1; padding: 32px 16px; color: var(--cds-text-helper); font-size: .74rem; text-align: center; background: var(--cds-layer-01); }

@media (max-width: 1080px) {
  .parent-equation { grid-template-columns: minmax(190px,1fr) 40px minmax(190px,1fr); }
  .parent-equation > .equation-mark:nth-of-type(2) { display: none; }
  .child-result { grid-column: 1 / -1; }
  .palbox-toolbar { grid-template-columns: 1fr 1fr; }
  .palbox-import { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .breeding-panel { padding: 14px; }
  .parent-equation { grid-template-columns: 1fr; }
  .swap-parents { justify-self: center; transform: rotate(90deg); }
  .parent-equation > .equation-mark:not(.swap-parents) { display: none; }
  .palbox-toolbar, .pair-results { grid-template-columns: 1fr; }
  .palbox-import { grid-column: auto; }
  .target-head { align-items: stretch; flex-direction: column; }
  .target-select { width: 100%; }
}
@media (max-width: 520px) {
  .breeding-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .breeding-tab { padding: 0 8px; }
  .breeding-panel-head { align-items: flex-start; }
  .route-panel { grid-template-columns: 1fr; }
  .route-steps { grid-column: auto; }
  .pair-row { grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); padding: 7px; }
  .pair-parent { grid-template-columns: 34px minmax(0,1fr); gap: 5px; }
  .pair-parent img { width: 34px; height: 34px; }
}