:root {
      --panel: rgba(10, 28, 20, 0.94);
      --panel2: rgba(16, 38, 28, 0.94);
      --text: #e9f7ef;
      --muted: #a5c0b1;
      --line: #3e6a56;
      --accent: #6fe2a1;
      --leaf: #9ce7b5;
      --hit: #fbbf24;
      --border: #2e5b45;
      --danger: #fca5a5;
      --body-radial: radial-gradient(circle at top, rgba(111, 226, 161, 0.14), transparent 30%);
      --body-linear: linear-gradient(180deg, #07140f 0%, #081a13 100%);
      --topbar-bg: rgba(8, 24, 18, 0.86);
      --floating-bg: rgba(8, 24, 18, 0.85);
      --details-overlay: linear-gradient(90deg, rgba(8,24,18,0.92) 0%, rgba(8,24,18,0.82) 50%, rgba(8,24,18,0.92) 100%);
      --chip-bg: rgba(8, 24, 18, 0.78);
      --card-base: rgba(16, 38, 28, 0.96);
      --card-base-stroke: rgba(156, 231, 181, 0.45);
      --card-overlay: rgba(8, 24, 18, 0.30);
      --card-overflow: rgba(30, 66, 50, 0.96);
      --card-overflow-stroke: rgba(111, 226, 161, 0.7);
      --link-color: #9ce7b5;
      --node-circle-fill: #d8efe1;
      --node-circle-stroke: #081a13;
      --node-clade-fill: #b9dfcb;
      --node-order-fill: #f6d18b;
    }
    :root[data-theme='light'] {
      --panel: rgba(234, 248, 239, 0.97);
      --panel2: rgba(221, 243, 229, 0.96);
      --text: #103324;
      --muted: #446b57;
      --line: #7fa892;
      --accent: #1f8b58;
      --leaf: #2ea96c;
      --hit: #cb8b00;
      --border: #9ec8af;
      --danger: #c24d4d;
      --body-radial: radial-gradient(circle at top, rgba(111, 226, 161, 0.18), transparent 34%);
      --body-linear: linear-gradient(180deg, #f2fbf5 0%, #e5f5ea 100%);
      --topbar-bg: rgba(233, 247, 239, 0.9);
      --floating-bg: rgba(229, 245, 234, 0.9);
      --details-overlay: linear-gradient(90deg, rgba(237,250,242,0.94) 0%, rgba(227,246,235,0.88) 50%, rgba(237,250,242,0.94) 100%);
      --chip-bg: rgba(225, 243, 232, 0.82);
      --card-base: rgba(219, 242, 227, 0.98);
      --card-base-stroke: rgba(33, 127, 80, 0.42);
      --card-overlay: rgba(231, 247, 238, 0.36);
      --card-overflow: rgba(203, 234, 216, 0.98);
      --card-overflow-stroke: rgba(34, 136, 84, 0.7);
      --link-color: #2f8f60;
      --node-circle-fill: #eaf7ef;
      --node-circle-stroke: #e5f5ea;
      --node-clade-fill: #d7efdf;
      --node-order-fill: #f7dca4;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--body-radial), var(--body-linear);
      color: var(--text);
    }
    .app {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      height: 100vh;
      max-height: 100vh;
      overflow: hidden;
    }
    .main {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      height: 100vh;
      overflow: hidden;
      position: relative;
      grid-column: 1;
      isolation: isolate;
    }
    .view-region {
      position: relative;
      min-width: 0;
      min-height: 0;
      height: 100%;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      overflow: hidden;
    }
    .gallery-panel {
      grid-column: 2;
      border-left: 1px solid var(--border);
      background: var(--panel);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-height: 0;
      overflow: hidden;
      position: relative;
      z-index: 2;
    }
    .gallery-header {
      padding: 14px 14px 10px;
      border-bottom: 1px solid var(--border);
    }
    .gallery-grid {
      padding: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      overflow-y: auto;
      align-content: start;
    }
    .gallery-item {
      display: block;
      position: relative;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: var(--panel2);
      color: inherit;
      cursor: pointer;
      width: 100%;
      padding: 0;
      text-align: left;
    }
    .gallery-item img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
    }
    .lightbox {
      position: absolute;
      inset: 0;
      z-index: 10;
      background: rgba(3, 10, 8, 0.94);
      overflow: hidden;
      pointer-events: auto;
    }
    .lightbox[hidden] {
      display: none !important;
    }
    .lightbox-close {
      position: absolute;
      top: 14px;
      left: 14px;
      width: auto;
      min-width: 92px;
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 0.86rem;
      background: rgba(16, 38, 28, 0.88);
      backdrop-filter: blur(6px);
      z-index: 3;
    }
    .lightbox-source-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      min-width: 92px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-size: 0.86rem;
      text-align: center;
      text-decoration: none;
      color: #eefbf2;
      background: rgba(16, 38, 28, 0.88);
      backdrop-filter: blur(6px);
      z-index: 3;
    }
    .lightbox-zoom-controls {
      position: absolute;
      top: 62px;
      left: 14px;
      display: grid;
      gap: 8px;
      z-index: 3;
    }
    .lightbox-zoom-controls button {
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 10px;
      font-size: 1.1rem;
      line-height: 1;
      background: rgba(16, 38, 28, 0.88);
      backdrop-filter: blur(6px);
    }
    .lightbox-stage {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
      touch-action: none;
    }
    .lightbox-stage img {
      width: 100% !important;
      height: 100% !important;
      min-width: 0;
      min-height: 0;
      object-fit: contain;
      object-position: center;
      display: block;
      transform-origin: center center;
      cursor: grab;
      user-select: none;
      -webkit-user-drag: none;
    }
    .lightbox-stage.dragging img {
      cursor: grabbing;
    }
    .gallery-item .caption {
      font-size: 0.75rem;
      color: var(--muted);
      padding: 6px 8px;
      line-height: 1.25;
      min-height: 2.4em;
    }
    .gallery-empty {
      grid-column: 1 / -1;
      border: 1px dashed var(--border);
      border-radius: 12px;
      padding: 12px;
      color: var(--muted);
      font-size: 0.86rem;
      background: var(--panel2);
    }
    h1 {
      margin: 0 0 8px;
      font-size: 1.28rem;
    }
    p {
      margin: 0 0 12px;
      color: var(--muted);
      line-height: 1.45;
      font-size: 0.95rem;
    }
    .controls {
      display: grid;
      gap: 10px;
      margin: 16px 0;
    }
    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    input, button {
      width: 100%;
      border: 1px solid var(--border);
      background: var(--panel2);
      color: var(--text);
      border-radius: 12px;
      padding: 11px 12px;
      font-size: 0.94rem;
    }
    button { cursor: pointer; }
    button:hover { border-color: #4d6488; }
    button:hover { border-color: var(--accent); }
    button:disabled { opacity: 0.55; cursor: not-allowed; }
    .box {
      margin-top: 14px;
      padding: 13px 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(18, 29, 51, 0.7);
    }
    .legend-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 6px 0;
      color: var(--muted);
      font-size: 0.9rem;
    }
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #cbd5e1;
      flex: 0 0 auto;
    }
    .dot.leaf { background: var(--leaf); }
    .dot.hit { background: var(--hit); }
    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--topbar-bg);
      flex-wrap: wrap;
    }
    .topbar #searchInput {
      max-width: 360px;
      margin-bottom: 10px;
    }
    .topbar-logo {
      width: 110px;
      height: 56px;
      object-fit: contain;
      object-position: left center;
      flex: 0 0 auto;
      margin-right: 12px;
      border-radius: 8px;
    }
    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .theme-toggle {
      width: auto;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 0.82rem;
      line-height: 1;
      background: var(--panel2);
      border: 1px solid var(--border);
      color: var(--text);
      min-width: 110px;
    }
    .meta {
      color: var(--muted);
      font-size: 0.9rem;
    }
    .canvas-wrap {
      position: relative;
      overflow: hidden;
      min-height: 0;
      height: 100%;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    svg {
      display: block;
      width: 100%;
      height: 100%;
      background: transparent;
      user-select: none;
      -webkit-user-drag: none;
    }
    .controls-floating {
      position: absolute;
      top: 14px;
      right: 14px;
      display: grid;
      gap: 8px;
      z-index: 5;
    }
    .controls-floating button {
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 12px;
      font-size: 1.05rem;
      backdrop-filter: blur(10px);
      background: var(--floating-bg);
    }
    .details {
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--border);
      background: var(--panel);
      height: 220px;
      min-height: 220px;
      max-height: 220px;
    }
    .details-content {
      display: grid;
      grid-template-columns: 220px 1fr;
      height: 100%;
    }
    .details-media {
      width: 220px;
      height: 220px;
      border-right: 1px solid var(--border);
      background: var(--panel2);
      overflow: hidden;
    }
    .details-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      opacity: 0;
      transition: opacity 160ms ease;
    }
    .details-media img.show {
      opacity: 1;
    }
    .details-body {
      padding: 16px 18px;
      overflow: auto;
    }
    .rank {
      color: var(--accent);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }
    h2 {
      margin: 0 0 8px;
      font-size: 1.06rem;
    }
    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    #detailsChips {
      display: none;
    }
    .chip {
      border: 1px solid var(--border);
      background: var(--chip-bg);
      color: var(--muted);
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 0.82rem;
    }
    .small { font-size: 0.84rem; color: var(--muted); }
    .details-footer {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 14px;
      margin-top: 12px;
    }
    #detailsSource {
      margin: 0;
      max-width: 100%;
    }
    .wiki-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 190px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #062114;
      font-weight: 700;
      text-decoration: none;
      font-size: 0.94rem;
      line-height: 1;
      box-shadow: 0 8px 24px rgba(12, 58, 38, 0.24);
      transition: transform 140ms ease, filter 140ms ease;
    }
    .wiki-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.03);
    }
    :root[data-theme='light'] .wiki-btn {
      color: #f7fff9;
      box-shadow: 0 8px 22px rgba(31, 139, 88, 0.26);
    }
    .node-label {
      fill: var(--text);
      dominant-baseline: middle;
      pointer-events: none;
      user-select: none;
    }
    .link {
      fill: none;
      stroke: var(--line);
      stroke-width: 2;
      stroke-linecap: round;
    }
    .link.path-hit {
      stroke: var(--accent);
      stroke-width: 3;
      opacity: 0.95;
    }
    .path-link-overlay {
      fill: none;
      stroke: var(--accent);
      stroke-width: 4.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.92;
      pointer-events: none;
    }
    .family-card {
      cursor: pointer;
    }
    .family-card rect.base {
      fill: var(--card-base);
      stroke: var(--card-base-stroke);
      stroke-width: 1.2;
      rx: 10;
      ry: 10;
    }
    .family-card rect.overlay {
      fill: var(--card-overlay);
      rx: 10;
      ry: 10;
      pointer-events: none;
    }
    .family-card rect.highlight {
      fill: rgba(251, 191, 36, 0.16);
      stroke: rgba(251, 191, 36, 0.85);
      stroke-width: 1.3;
      rx: 10;
      ry: 10;
      opacity: 0;
      pointer-events: none;
    }
.family-card.overflow rect.base {
      fill: var(--card-overflow);
      stroke: var(--card-overflow-stroke);
      stroke-dasharray: 5 4;
    }
    .family-card.hit rect.highlight {
      opacity: 1;
    }
    .family-card.path-hit rect.base {
      stroke: var(--accent);
      stroke-width: 2;
    }
    .family-card .thumb {
      opacity: 0.52;
      pointer-events: none;
    }
    .family-card text {
      fill: var(--text);
      dominant-baseline: middle;
      pointer-events: none;
    }
    .family-card text.sub {
      fill: var(--muted);
    }
    .internal-node {
      cursor: pointer;
    }
    .internal-node .label-outline {
      fill: rgba(20, 38, 28, 0.34);
      stroke: var(--node-circle-stroke);
      stroke-width: 1.4;
    }
    :root[data-theme='light'] .internal-node .label-outline {
      fill: rgba(255, 255, 255, 0.88);
    }
    .internal-node.root .label-outline {
      stroke: #6ee7b7;
    }
    .internal-node.clade .label-outline {
      stroke: var(--node-clade-fill);
    }
    .internal-node.order .label-outline {
      stroke: var(--node-order-fill);
    }
    .internal-node.hit .label-outline {
      stroke: rgba(251, 191, 36, 0.95);
      stroke-width: 2.2;
    }
    .internal-node.path-hit .label-outline {
      stroke: var(--accent);
      stroke-width: 2.2;
    }
    .image-note {
      color: var(--muted);
      font-size: 0.84rem;
      margin-top: 10px;
    }
    a { color: var(--link-color); }
    @media (max-width: 960px) {
      .app {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        height: auto;
        max-height: none;
        overflow: visible;
      }
      .main {
        height: auto;
        overflow: visible;
      }
      .view-region {
        height: auto;
      }
      .canvas-wrap { min-height: 55vh; height: 55vh; }
      .details { height: 220px; min-height: 220px; max-height: 220px; }
      .gallery-panel {
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 40vh;
      }
    }
    @media (max-width: 620px) {
      .row { grid-template-columns: 1fr; }
      .topbar, .details-body { padding-left: 15px; padding-right: 15px; }
      .topbar-logo {
        width: 92px;
        height: 48px;
        margin-right: 8px;
      }
      .controls-floating { right: 10px; top: 10px; }
      .details {
        height: 210px;
        min-height: 210px;
        max-height: 210px;
      }
      .details-content {
        grid-template-columns: 110px 1fr;
      }
      .details-media {
        width: 110px;
        height: 210px;
      }
      .details-footer {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .wiki-btn {
        width: 100%;
        min-width: 0;
      }
    }