:root {
  color-scheme: light;
  --ink: #14231f;
  --muted: #64736e;
  --paper: #f4f7f5;
  --panel: #ffffff;
  --forest: #173d32;
  --pink: #b64b72;
  --gold: #bc8129;
  --line: #d9e2de;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); min-height: 100vh; }
button, input { font: inherit; }
button { color: inherit; }
.topbar { min-height: 230px; padding: 48px max(5vw, 24px) 40px; display: flex; align-items: end; justify-content: space-between; gap: 24px; color: white; background: radial-gradient(circle at 80% 10%, #4c6e5d 0, transparent 34%), linear-gradient(120deg, #112c25, #234c3e); }
.eyebrow { color: #c7d8d0; letter-spacing: .16em; font-size: .78rem; margin: 0 0 12px; }
h1 { font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1; margin: 0; font-weight: 500; }
.summary { margin: 0; color: #d9e7e0; white-space: nowrap; }
main { width: min(1500px, 92vw); margin: -22px auto 64px; }
.controls { position: sticky; top: 12px; z-index: 5; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid rgba(217,226,222,.9); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 12px 40px rgba(17,44,37,.09); backdrop-filter: blur(18px); }
.search-row { display: flex; gap: 16px; justify-content: space-between; }
.search { flex: 1; }
.search input { width: 100%; min-height: 46px; border: 0; outline: 0; background: #edf2ef; border-radius: 12px; padding: 0 16px; font-size: 1rem; }
.filters { display: flex; gap: 6px; }
.filter { border: 0; background: transparent; min-height: 46px; border-radius: 12px; padding: 0 16px; cursor: pointer; }
.filter.active { background: var(--forest); color: white; }
.view-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 8px 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.view-switch { display: flex; padding: 3px; gap: 3px; border-radius: 10px; background: #e8eeeb; }
.view-option { min-height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.view-option.active { color: white; background: var(--forest); box-shadow: 0 3px 10px rgba(20,35,31,.16); }
.status { color: var(--muted); margin: 26px 2px 16px; }
.catalog-list { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); }
.catalog-branch + .catalog-branch { border-top: 1px solid var(--line); }
.species-line { min-height: 66px; display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; gap: 18px; padding: 10px 14px 10px 22px; }
.name-link { border: 0; background: transparent; text-align: left; cursor: pointer; }
.species-name { width: max-content; max-width: 100%; padding: 6px 0; color: var(--ink); font-family: Georgia, "Noto Serif SC", serif; font-size: 1.08rem; font-weight: 700; }
.species-name:hover, .hybrid-name:hover, .parent-name:hover { color: var(--pink); text-decoration: underline; text-underline-offset: 4px; }
.species-meta { color: var(--muted); font-size: .82rem; }
.expand-button { min-width: 126px; min-height: 42px; display: flex; align-items: center; justify-content: end; gap: 14px; border: 0; border-radius: 10px; padding: 0 10px; color: var(--muted); background: transparent; cursor: pointer; }
.expand-button:hover { background: #edf2ef; color: var(--ink); }
.expand-button b { display: inline-block; color: var(--pink); font-size: 1.8rem; font-weight: 400; line-height: 1; transition: transform .18s ease; }
.expand-button[aria-expanded="true"] b { transform: rotate(90deg); }
.children-list { padding: 4px 22px 16px 42px; background: #f7f9f8; border-top: 1px solid #edf1ef; }
.hybrid-name { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 12px; border-bottom: 1px solid #e5ebe8; color: #294d42; }
.hybrid-name:last-child { border-bottom: 0; }
.hybrid-name small { flex: 0 0 auto; color: var(--muted); }
.hybrid-entry { border-bottom: 1px solid #e5ebe8; }
.hybrid-entry:last-child { border-bottom: 0; }
.hybrid-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hybrid-line .hybrid-name { border-bottom: 0; }
.offspring-expand { min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.offspring-expand:hover { color: var(--ink); background: #e8eeeb; }
.offspring-expand b { color: var(--gold); font-size: 1.5rem; font-weight: 400; transition: transform .18s ease; }
.offspring-expand[aria-expanded="true"] b { transform: rotate(90deg); }
.offspring-list { padding: 0 10px 10px 26px; }
.offspring-name { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 12px; border: 0; border-left: 2px solid #d7b16d; color: #76511b; background: #fffcf6; text-align: left; cursor: pointer; }
.offspring-name:hover { color: #9b3760; background: #fff7e9; }
.offspring-name small { color: var(--muted); }
.children-list p { margin: 14px 12px 4px; color: var(--muted); font-size: .9rem; }
.unmatched { background: #fffaf1; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { text-align: left; border: 1px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; background: var(--panel); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20,35,31,.12); }
.card:focus-visible, .filter:focus-visible, .close:focus-visible, .parent-link:focus-visible { outline: 3px solid #e6a1bc; outline-offset: 3px; }
.image-wrap { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e4ebe7; }
.image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover img { transform: scale(1.035); }
.badge, .count { position: absolute; top: 12px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: .78rem; background: rgba(255,255,255,.92); }
.badge { left: 12px; color: var(--forest); }
.badge.hybrid { color: #8d2f51; }
.count { right: 12px; color: var(--muted); }
.card-copy { display: grid; gap: 7px; padding: 16px 17px 18px; }
.card-copy strong { font-family: Georgia, "Noto Serif SC", serif; font-size: 1.08rem; line-height: 1.35; }
.card-copy small { color: var(--muted); line-height: 1.5; }
.card-copy small span { color: var(--pink); }
.no-image, .empty { display: grid; place-items: center; color: var(--muted); height: 100%; }
.empty { min-height: 240px; border: 1px dashed #b9c8c1; border-radius: 18px; }
dialog { width: min(1100px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 22px; background: var(--paper); box-shadow: 0 30px 90px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(7,20,16,.7); backdrop-filter: blur(5px); }
.close { position: sticky; float: right; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); font-size: 1.7rem; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.15); }
.detail-page { margin-top: 44px; }
.back-button { min-height: 44px; margin-bottom: 18px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--forest); background: white; cursor: pointer; }
.back-button:hover { background: #e9f0ed; }
#detail { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 18px 48px rgba(20,35,31,.08); }
.detail-heading { padding: 40px 44px 30px; color: white; background: radial-gradient(circle at 85% 0, #547b68 0, transparent 35%), linear-gradient(120deg, #122f27, #285343); }
.detail-type { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #e6f0eb; font-size: .78rem; }
.detail-heading .badge { position: static; border: 1px solid var(--line); }
.detail-heading h2 { font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(1.7rem, 4vw, 3.2rem); font-weight: 500; margin: 18px 0; line-height: 1.12; }
.detail-heading p { margin: 0; color: #c8d9d1; }
.parents-showcase { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); align-items: center; gap: 18px; padding: 34px 44px; border-bottom: 1px solid var(--line); background: #f7faf8; }
.parent-card { min-width: 0; }
.parent-photos { min-height: 260px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; overflow: hidden; border-radius: 16px; background: #e3eae6; }
.parent-photos img { width: 100%; height: 260px; object-fit: contain; background: #e3eae6; }
.unknown-parent { min-height: 260px; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
.parent-card > small { display: block; margin: 13px 0 4px; color: var(--muted); }
.parent-card > strong, .parent-name { display: block; padding: 0; border: 0; color: var(--ink); background: transparent; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.08rem; font-weight: 700; text-align: left; cursor: pointer; }
.cross-mark { color: var(--pink); font-family: Georgia, serif; font-size: 2.7rem; text-align: center; }
.detail-subnav { position: sticky; top: 12px; z-index: 4; display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); scrollbar-width: thin; }
.detail-subnav button { flex: 0 0 auto; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--forest); background: white; cursor: pointer; }
.detail-subnav button:hover { color: white; border-color: var(--forest); background: var(--forest); }
.photo-section { scroll-margin-top: 76px; padding: 34px 16px 18px; }
.section-toggle { width: calc(100% - 56px); min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 28px 22px; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.section-toggle > span { font-family: Georgia, "Noto Serif SC", serif; font-size: 1.5rem; font-weight: 700; }
.section-toggle small { margin-left: 12px; color: var(--muted); font-family: Inter, "Microsoft YaHei", sans-serif; font-size: .82rem; font-weight: 400; }
.section-toggle b { color: var(--pink); font-size: 1.5rem; font-weight: 400; transition: transform .18s ease; }
.section-toggle[aria-expanded="false"] b { transform: rotate(-90deg); }
.section-toggle:hover > span { color: var(--pink); }
.variety-directory { margin-top: 20px; padding: 38px 0 12px; border-top: 8px solid var(--paper); }
.section-title { padding: 0 44px 8px; }
.section-title p { margin: 0 0 6px; color: var(--pink); font-size: .78rem; letter-spacing: .12em; }
.section-title h3 { margin: 0; font-family: Georgia, "Noto Serif SC", serif; font-size: 2rem; }
.variety-group { margin: 24px 16px 0; padding-top: 26px; border: 1px solid var(--line); border-radius: 18px; background: #f8faf9; }
.offspring-directory { margin-top: 20px; padding: 38px 0 28px; border-top: 8px solid var(--paper); }
.offspring-group { margin: 24px 16px 0; padding-top: 26px; border: 1px solid #e6d7bb; border-radius: 18px; background: #fffcf6; }
.parents { display: flex; align-items: center; gap: 20px; padding-top: 10px; }
.parents div { display: grid; gap: 5px; }
.parents small { color: var(--muted); }
.parents b { color: var(--pink); font-size: 1.5rem; }
.parent-link { border: 0; padding: 0; background: transparent; color: #216d57; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.detail-images { columns: 2 340px; column-gap: 16px; padding: 0 16px 16px; }
figure { break-inside: avoid; margin: 0 0 16px; border-radius: 14px; overflow: hidden; background: white; }
figure img { display: block; width: 100%; height: auto; }
figcaption { padding: 9px 12px; color: var(--muted); font-size: .78rem; }
.no-detail-image { padding: 40px; color: var(--muted); }
.empty-section { margin: 0; padding: 12px 16px 30px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (max-width: 680px) {
  .topbar { min-height: 200px; padding-top: 36px; align-items: start; flex-direction: column; justify-content: end; }
  .summary { white-space: normal; }
  main { width: min(94vw, 560px); }
  .controls { position: static; }
  .search-row { flex-direction: column; }
  .filters { display: grid; grid-template-columns: repeat(3, 1fr); }
  .filter { padding: 0 8px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-copy { padding: 12px; }
  .card-copy strong { font-size: .95rem; }
  .species-line { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px 10px 16px; }
  .species-meta { grid-column: 1; }
  .expand-button { grid-column: 2; grid-row: 1 / span 2; min-width: 54px; }
  .expand-button span { display: none; }
  .children-list { padding: 4px 10px 12px 22px; }
  .offspring-expand span { display: none; }
  .offspring-list { padding-left: 14px; }
  .detail-heading { padding: 34px 22px 22px; }
  .parents-showcase { grid-template-columns: 1fr; padding: 22px; }
  .cross-mark { transform: rotate(90deg); }
  .parent-photos, .unknown-parent { min-height: 210px; }
  .parent-photos img { height: 210px; }
  .section-toggle { width: calc(100% - 16px); margin-inline: 8px; }
  .section-title { padding-inline: 22px; }
  .variety-group { margin-inline: 8px; }
  .parents { align-items: start; gap: 10px; flex-direction: column; }
  .parents b { transform: rotate(90deg); margin-left: 12px; }
}