/* Fonts are preloaded in the head (see views/partials/header.ejs).
   `font-display: optional` prevents the swap-in reflow that produced a 0.92 CLS:
   if the face is not ready within ~100ms the fallback is kept for the page lifetime.
   The metric overrides below normalise the line box so the fallback occupies the
   same vertical space as the webfont, making the difference visually undetectable. */
@font-face {
  font-family: "Atlas Inter";
  src: url("/assets/catalog-atlas/fonts/inter-atlas.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: optional;
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atlas Mono";
  src: url("/assets/catalog-atlas/fonts/jetbrains-mono-atlas.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: optional;
  size-adjust: 96%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atlas Serif";
  src: url("/assets/catalog-atlas/fonts/noto-serif-sc-atlas.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atlas Display";
  src: url("/assets/catalog-atlas/fonts/playfair-display-atlas.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 700;
  font-display: optional;
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  --ink: #e9fbf7;
  --muted: #8cb4b8;
  --line: rgba(181, 236, 229, .17);
  --panel: rgba(7, 36, 46, .76);
  --accent: #7ce5d5;
  --accent-strong: #e7cb78;
  --danger: #ff8d7d;
  --max: 1180px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #031923; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #061f2a; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, .button { cursor: pointer; }
img { max-width: 100%; }
/* AdSense auto-ads inject an <ins> after first paint and were pushing the whole
   document down. Reserve a slot and isolate its layout so the injection can no
   longer resize anything outside the ad container. To remove the shift entirely,
   disable auto-ads in the AdSense dashboard and place explicit
   <ins class="adsbygoogle"> units with fixed dimensions instead. */
ins.adsbygoogle,
ins.adsbygoogle[data-ad-format="auto"] {
  display: block;
  min-height: 100px;
  contain: layout style;
}
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: #fff; color: #000; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.site-header {
  position: relative; z-index: 20; height: 72px; display: flex; align-items: center; justify-content: space-between;
  width: min(calc(100% - 48px), var(--max)); margin: 0 auto; border-bottom: 1px solid var(--line);
}
.explorer-page .site-header { position: fixed; left: 50%; transform: translateX(-50%); }
.brand { display: flex; gap: .75rem; align-items: center; text-decoration: none; font-weight: 700; letter-spacing: .2em; }
.brand small { display: block; margin-top: .16rem; color: var(--muted); font-size: .55rem; letter-spacing: .32em; font-weight: 500; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 38px; flex: 0 0 42px; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-header-tools { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; min-width: 0; }
.site-search {
  display: grid; grid-template-columns: 16px minmax(6rem, 1fr); gap: .5rem; align-items: center;
  width: clamp(180px, 20vw, 300px); padding: .3rem .7rem;
  background: rgba(5, 47, 67, .26); border: 1px solid rgba(211, 248, 250, .16); border-radius: 999px;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.site-search:hover { border-color: rgba(211, 248, 250, .3); }
.site-search:focus-within { background: rgba(7, 58, 80, .5); border-color: rgba(186, 241, 241, .55); box-shadow: 0 0 0 3px rgba(186, 241, 241, .08); }
.site-search img { width: 15px; height: 15px; opacity: .6; }
.site-search input { min-width: 0; padding: .2rem 0; color: #f4fcff; background: transparent; border: 0; outline: 0; font: inherit; font-size: .8rem; }
.site-search input::placeholder { color: rgba(215, 239, 244, .62); }
.site-header nav { display: flex; gap: 2rem; }
.site-header nav a { color: #b9d7d7; text-decoration: none; font-size: .88rem; }
.site-header nav a:hover { color: #fff; }
.site-header .account-link { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-switch { display: flex; gap: .25rem; }
.language-switch a { padding: .15rem .35rem; border: 1px solid transparent; }
.language-switch a[aria-current] { color: #fff; border-color: var(--line); }

.ocean-explorer {
  position: relative; height: 100svh; min-height: 680px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 18%, rgba(2,24,34,.12) 58%, rgba(1,13,20,.58) 100%),
    linear-gradient(to bottom, rgba(4,45,57,.05) 40%, rgba(1,16,24,.44) 100%),
    url("/assets/ocean-reef.webp") center / cover no-repeat,
    #07394a;
}
#ocean-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.ocean-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(108deg, transparent 12%, rgba(194,247,241,.13) 24%, transparent 38%),
    linear-gradient(102deg, transparent 28%, rgba(140,229,229,.07) 36%, transparent 48%),
    radial-gradient(ellipse at 36% 0, rgba(196,249,240,.13), transparent 42%),
    linear-gradient(to bottom, transparent 54%, rgba(0,10,18,.34));
  mix-blend-mode: screen;
}
.eyebrow { margin: 0 0 .65rem; color: var(--accent-strong); font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.focus-caption {
  position: fixed; z-index: 6; left: 50%; top: 50%; display: grid; justify-items: center; gap: .2rem;
  min-width: 150px; padding: .5rem .8rem; color: #edfdfb; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(2,24,32,.54) 20%, rgba(2,24,32,.54) 80%, transparent);
  transform: translate(-50%, 0); text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.92);
  transition: opacity .25s;
}
.focus-caption::before { content: ""; width: 34px; height: 1px; margin-bottom: .15rem; background: rgba(213,244,238,.64); }
.focus-caption strong { font: 600 1rem Georgia, "Noto Serif SC", serif; letter-spacing: .08em; }
.focus-caption i { color: rgba(215,240,237,.72); font: italic .66rem Georgia, serif; letter-spacing: .07em; }
.focus-caption[hidden] { opacity: 0; }
.explorer-page:not(.explorer-ready) .focus-caption,
.explorer-page:not(.explorer-ready) .relation-buttons,
.explorer-page:not(.explorer-ready) .explorer-hint { visibility: hidden; }
.focus-action {
  position: fixed; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
  clip-path: inset(50%); color: #d9f2ef; pointer-events: auto; background: transparent;
  border: 0; white-space: nowrap; font-size: .7rem; letter-spacing: .08em;
}
.focus-action:focus-visible {
  z-index: 30; top: 90px; left: 50%; width: auto; height: auto; padding: .55rem .8rem;
  clip-path: none; color: #fff; background: #082b38; border: 1px solid var(--line);
  transform: translateX(-50%);
}
.depth-scale { position: absolute; z-index: 4; left: 2rem; top: 50%; display: grid; justify-items: center; gap: .6rem; color: rgba(204,239,236,.46); font-size: .64rem; letter-spacing: .2em; writing-mode: vertical-rl; transform: translateY(-45%); }
.depth-scale i { display: block; width: 1px; height: 130px; background: linear-gradient(var(--accent), transparent); }
.explorer-hint {
  position: absolute; z-index: 5; right: 0; bottom: 1.35rem; left: 0; margin: 0;
  color: rgba(220,242,239,.56); text-align: center; pointer-events: none;
  font-size: .66rem; letter-spacing: .18em; text-shadow: 0 2px 12px rgba(0,0,0,.9);
}

.relation-buttons {
  position: absolute; z-index: 9; inset: 0; pointer-events: none;
}
.relation-buttons button {
  --connector-width: 34px;
  --relation-color: #8edfe0;
  position: absolute; left: var(--label-x, 50%); top: var(--label-y, 50%);
  display: flex; align-items: center; gap: .45rem; width: max-content; padding: .42rem .72rem .42rem .58rem;
  color: rgba(239, 253, 250, .92); pointer-events: auto;
  background: rgba(5, 42, 55, .62); border: 1px solid rgba(190, 239, 235, .28); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 18px rgba(0,18,28,.2);
  backdrop-filter: blur(7px); text-shadow: 0 2px 10px rgba(0,0,0,.82);
  transition: opacity .16s, background-color .2s, border-color .2s, box-shadow .2s;
}
.relation-buttons button[data-side="left"] { transform: translate(-100%, -50%); }
.relation-buttons button[data-side="right"] { transform: translate(0, -50%); }
.relation-buttons button::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; background: var(--relation-color);
  border-radius: 50%; box-shadow: 0 0 9px var(--relation-color);
}
.relation-buttons button::after {
  content: ""; position: absolute; top: 50%; width: var(--connector-width); height: 7px;
  pointer-events: none; transform: translateY(-50%);
}
.relation-buttons button[data-side="left"]::after {
  right: calc(var(--connector-width) * -1);
  background:
    radial-gradient(circle at right center, rgba(218,248,244,.92) 0 2px, transparent 3px),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(199,237,234,.54) 50%, transparent calc(50% + .5px));
}
.relation-buttons button[data-side="right"]::after {
  left: calc(var(--connector-width) * -1);
  background:
    radial-gradient(circle at left center, rgba(218,248,244,.92) 0 2px, transparent 3px),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(199,237,234,.54) 50%, transparent calc(50% + .5px));
}
.relation-buttons button:hover, .relation-buttons button:focus-visible {
  background: rgba(6, 50, 64, .82); border-color: rgba(203, 245, 240, .52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 22px rgba(0,18,28,.32);
}
.relation-buttons [data-relation-type="family"] { --relation-color: #ff917e; }
.relation-buttons [data-relation-type="size"] { --relation-color: #71dfe8; }
.relation-buttons [data-relation-type="color"] { --relation-color: #e7bd3c; }
.relation-buttons [data-relation-type="habitat"] { --relation-color: #55d6af; }
.relation-buttons [data-relation-type="shape"] { --relation-color: #64bff1; }
.relation-buttons [data-relation-type="discovery"] { --relation-color: #b78cf5; }
.relation-buttons span, .relation-buttons strong {
  display: block; font-size: .69rem; letter-spacing: .04em; white-space: nowrap;
}
.relation-buttons span {
  order: 1; padding-left: .45rem; border-left: 1px solid rgba(190, 239, 235, .24);
}
.relation-buttons strong { font-weight: 600; }
.relation-buttons small { display: none; }
@media (hover: hover) and (pointer: fine) {
  .relation-buttons button { opacity: 0; pointer-events: none; }
  .relation-buttons button[data-hovered="true"], .relation-buttons button:focus {
    opacity: 1; pointer-events: auto;
  }
  .relation-buttons button[data-hovered="true"]::after { pointer-events: auto; }
}
.static-fallback { display: none; position: relative; z-index: 3; width: min(92%, 900px); margin: 130px auto 0; }
.no-webgl .static-fallback { display: block; }
.no-webgl #ocean-canvas, .no-webgl .relation-buttons, .no-webgl .focus-caption, .no-webgl .explorer-hint { display: none; }
.fish-grid, .catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fish-grid a { padding: 1rem; text-decoration: none; background: var(--panel); border: 1px solid var(--line); }
.fish-grid span, .fish-grid i { display: block; color: var(--muted); font-size: .76rem; }

.fish-dialog {
  width: min(820px, calc(100% - 32px)); padding: 0; color: var(--ink); background: #082b38;
  border: 1px solid rgba(154,232,222,.28); border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.fish-dialog::backdrop { background: rgba(0,12,18,.76); backdrop-filter: blur(8px); }
.fish-dialog[open] { display: grid; grid-template-columns: 42% 1fr; }
.fish-dialog > div { padding: clamp(1.6rem, 5vw, 3rem); }
.dialog-visual { position: relative; display: grid; place-items: center; min-height: 420px; overflow: hidden; background: radial-gradient(circle, #19748a, #06232e 70%); }
.dialog-visual > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.dialog-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; color: white; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 50%; }
.fish-dialog h2 { margin: 0; font: 400 clamp(2rem, 5vw, 3.5rem) Georgia, serif; }
.fish-dialog p { color: #b9d4d3; line-height: 1.7; }
.fact-list, .profile-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 1.5rem 0; background: var(--line); }
.fact-list div, .profile-facts div { padding: .8rem 1rem; background: #082b38; }
dt { color: var(--muted); font-size: .7rem; }
dd { margin: .25rem 0 0; }

.mini-fish { position: relative; display: inline-block; width: 92px; height: 42px; border-radius: 55% 48% 48% 55%; background: linear-gradient(135deg, var(--accent), #347f96); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.mini-fish[hidden] { display: none; }
.mini-fish::before { content: ""; position: absolute; left: -27px; top: 6px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 31px solid #3c8a95; }
.mini-fish::after { content: ""; position: absolute; right: 14px; top: 10px; width: 6px; height: 6px; background: #03171e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }

.content-page {
  background:
    radial-gradient(circle at 82% 6%, rgba(33, 132, 145, .18), transparent 34%),
    radial-gradient(circle at 8% 94%, rgba(212, 183, 88, .06), transparent 30%),
    #041b25;
}
.page-shell { width: min(calc(100% - 40px), var(--max)); min-height: calc(100vh - 155px); margin: 0 auto; padding: 5rem 0 7rem; }
.page-intro { max-width: 680px; }
.page-intro h1, .admin-heading h1, .empty-state h1 { margin: 0; font: 400 clamp(2.8rem, 7vw, 5.8rem) Georgia, "Noto Serif SC", serif; }
.page-intro > p:last-child { max-width: 620px; color: var(--muted); line-height: 1.8; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .72rem 1.15rem;
  color: #05232b; font-weight: 700; text-decoration: none; background: var(--accent); border: 0; border-radius: 4px;
}
.button:hover { background: #a1f1e5; }
.button-ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.button-secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.button-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.34);
}
.button-quiet {
  color: #cce6e5;
  background: rgba(13, 78, 79, 0.72);
  border: 1px solid rgba(147, 224, 214, 0.32);
}
.button-quiet:hover {
  color: #f2fffd;
  background: rgba(26, 111, 110, 0.9);
  border-color: rgba(147, 224, 214, 0.6);
}
.back-link { display: inline-block; margin-bottom: 2rem; color: var(--muted); text-decoration: none; }

.catalog-page {
  position: relative; color: #edfaff;
  background: #063959 url("/assets/ocean-reef.webp") center / cover fixed no-repeat;
  font: 400 16px/1.5 "Atlas Inter", Inter, system-ui, sans-serif;
}
.catalog-page::before {
  content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: rgba(0, 40, 77, .34);
}
.catalog-page .site-header, .explorer-page .site-header {
  height: 90px; width: min(calc(100% - 56px), 1384px); border-color: rgba(213, 247, 250, .2);
  font: 400 16px/1.5 "Atlas Inter", Inter, system-ui, sans-serif;
}
.catalog-page .brand, .explorer-page .brand { color: #f2fbff; }
.catalog-page .brand small, .catalog-page .site-header nav a,
.explorer-page .brand small, .explorer-page .site-header nav a { color: rgba(232, 250, 255, .82); }
.catalog-page .brand-mark, .explorer-page .brand-mark { border-color: rgba(190, 241, 246, .34); color: #a9f0ef; }
.catalog-page .language-switch a[aria-current], .explorer-page .language-switch a[aria-current] {
  background: rgba(215, 249, 253, .08); border-color: rgba(215, 249, 253, .32); border-radius: 4px;
}
.catalog-page main, .catalog-page .atlas-home-stats { position: relative; z-index: 1; }
.catalog-page::-webkit-scrollbar { width: 4px; }
.catalog-page::-webkit-scrollbar-track { background: #063959; }
.catalog-page::-webkit-scrollbar-thumb { background: rgba(183, 241, 244, .38); border-radius: 2px; }
.catalog-home { position: relative; overflow: hidden; }
.catalog-ambient-fish { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.catalog-ambient-fish img { position: absolute; width: 72px; opacity: .55; filter: drop-shadow(0 10px 18px rgba(0, 24, 48, .28)); }
.catalog-home .ambient-fish-one { top: 52px; right: 12%; width: 84px; }
.catalog-home .ambient-fish-two { top: 260px; right: 4.3%; width: 58px; }
.catalog-home .ambient-fish-three { right: 68%; bottom: 150px; width: 72px; }
.atlas-home-hero { position: relative; min-height: 640px; }
.atlas-home-meta, .atlas-home-silhouette, .atlas-home-scroll { display: none; }
.atlas-home-hero-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: 583px minmax(0, 1fr); gap: 60px; align-items: start;
  width: min(calc(100% - 56px), 1338px); min-height: 640px; margin: 0 auto; padding: 108px 0 70px;
}
/* `svh` recalculates whenever mobile browser chrome collapses and re-triggers
   layout, so the hero reserves a fixed height that only grows on tall viewports. */
@media (min-height: 900px) {
  .atlas-home-hero, .atlas-home-hero-inner { min-height: 820px; }
}
.atlas-home-copy { max-width: 583px; padding-left: 12px; }
.atlas-home-hero .atlas-home-kicker {
  margin: 0 0 20px; color: rgba(183, 240, 244, .74);
  font: 400 14px/20px "Atlas Mono", "JetBrains Mono", monospace; letter-spacing: 3px;
}
.atlas-home-copy h1 {
  margin: 0; color: #f7fdff; font: 400 82px/1.24 "Atlas Serif", "Noto Serif SC", "Songti SC", serif;
  letter-spacing: .04em; text-shadow: 0 5px 28px rgba(0, 57, 91, .2);
}
.atlas-home-copy h1 span, .atlas-home-copy h1 strong { display: block; }
.atlas-home-copy h1 strong { color: #aef2f0; font-weight: 400; }
.atlas-home-specimen {
  display: inline-flex; gap: 16px; align-items: center; min-width: 350px; margin: 16px 0 34px; padding: 11px 18px;
  color: rgba(225, 250, 253, .86); background: rgba(89, 196, 212, .12); border: 1px solid rgba(199, 245, 248, .42);
  border-radius: 12px; font: 400 14px/20px "Atlas Mono", "JetBrains Mono", monospace; letter-spacing: .2px;
}
.atlas-home-specimen::before { content: ""; width: 28px; height: 14px; background: url("/assets/catalog-atlas/fish-silhouette.webp") center / contain no-repeat; }
.atlas-home-specimen span { padding-right: 16px; color: #a9ecec; border-right: 1px solid rgba(218, 250, 252, .28); letter-spacing: 1.2px; }
.atlas-home-lead {
  max-width: 530px; margin: 0 0 36px; color: rgba(235, 250, 255, .88);
  font: 400 18px/1.85 "Atlas Serif", "Noto Serif SC", "Songti SC", serif; text-shadow: 0 2px 18px rgba(0, 44, 75, .4);
}
.atlas-home-cta {
  display: inline-flex; justify-content: space-between; align-items: center; width: 262px; min-height: 68px; padding: 18px 34px;
  margin-top: 10px;
  color: #f3fdff; text-decoration: none; background: rgba(88, 194, 209, .14); border: 1px solid rgba(205, 247, 249, .68);
  border-radius: 12px; font: 400 19px/28px "Atlas Serif", "Noto Serif SC", "Songti SC", serif;
  transition: background-color .2s, box-shadow .2s, transform .2s;
}
.atlas-home-cta img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.atlas-home-cta:hover { background: rgba(119, 220, 229, .25); box-shadow: 0 10px 30px rgba(0, 47, 75, .18); transform: translateY(-2px); }
.atlas-home-cta:active { transform: translateY(0); }
.atlas-home-plate {
  aspect-ratio: 1.41; margin: 0; overflow: hidden; background: rgba(80, 173, 202, .38);
  border: 1px solid rgba(211, 248, 250, .48); border-radius: 24px; box-shadow: 0 26px 60px rgba(0, 41, 70, .16);
  backdrop-filter: blur(3px);
}
.atlas-home-plate img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; mix-blend-mode: screen; }
.atlas-home-stats {
  min-height: 100svh; background: rgba(0, 53, 88, .16); border-top: 1px solid rgba(211, 248, 250, .22);
}
.atlas-home-stats-inner { width: min(calc(100% - 56px), 1338px); margin: 0 auto; padding: 100px 12px 120px; }
.atlas-home-stats .atlas-home-kicker {
  margin: 0 0 16px; color: rgba(183, 240, 244, .74);
  font: 400 14px/20px "Atlas Mono", "JetBrains Mono", monospace; letter-spacing: 3px;
}
.atlas-home-stats h2 {
  margin: 0 0 44px; color: #f7fdff;
  font: 400 60px/1.2 "Atlas Serif", "Noto Serif SC", "Songti SC", serif; letter-spacing: .04em;
  text-shadow: 0 5px 28px rgba(0, 57, 91, .2);
}
.atlas-home-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 22px; overflow: hidden;
  background: rgba(52, 146, 175, .14); border: 1px solid rgba(211, 248, 250, .38); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 38, 68, .14); backdrop-filter: blur(9px);
}
.atlas-home-stat-grid article, .atlas-home-group-grid article {
  background: transparent; border: 0; border-radius: 0; transition: background-color .2s;
}
.atlas-home-stat-grid article {
  display: flex; flex-direction: column; gap: 9px; min-height: 168px; padding: 30px 32px;
  border-right: 1px solid rgba(211, 248, 250, .18);
}
.atlas-home-stat-grid article:last-child { border-right: 0; }
.atlas-home-stat-grid article:hover, .atlas-home-group-grid article:hover { background: rgba(151, 226, 235, .08); }
.atlas-home-stat-grid strong {
  color: var(--stat-color); font: 400 46px/1 "Atlas Serif", "Noto Serif SC", "Songti SC", serif;
  letter-spacing: .02em; text-shadow: 0 0 24px var(--stat-glow);
}
.atlas-home-stat-grid span { color: rgba(242, 252, 255, .92); font: 400 16px/24px "Atlas Serif", "Noto Serif SC", "Songti SC", serif; }
.atlas-home-stat-grid small { color: rgba(205, 235, 243, .62); font: 400 12px/18px "Atlas Inter", Inter, sans-serif; }
.atlas-home-stat-grid [data-stat="species"] { --stat-color: #4ecdc4; --stat-glow: rgba(78,205,196,.4); border-color: rgba(78,205,196,.133); }
.atlas-home-stat-grid [data-stat="orders"] { --stat-color: #c9a84c; --stat-glow: rgba(201,168,76,.4); border-color: rgba(201,168,76,.133); }
.atlas-home-stat-grid [data-stat="families"] { --stat-color: #6b9fd4; --stat-glow: rgba(107,159,212,.4); border-color: rgba(107,159,212,.133); }
.atlas-home-stat-grid [data-stat="classes"] { --stat-color: #a78bfa; --stat-glow: rgba(167,139,250,.4); border-color: rgba(167,139,250,.133); }
.atlas-home-group-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; overflow: hidden;
  background: rgba(37, 117, 154, .14); border: 1px solid rgba(211, 248, 250, .32); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 38, 68, .12); backdrop-filter: blur(9px);
}
.atlas-home-group-grid article { min-height: 158px; padding: 28px 32px; }
.atlas-home-group-grid article:nth-child(odd) { border-right: 1px solid rgba(211, 248, 250, .16); }
.atlas-home-group-grid article:nth-child(-n + 2) { border-bottom: 1px solid rgba(211, 248, 250, .16); }
.atlas-home-group-grid header { display: grid; grid-template-columns: 12px 1fr auto; gap: 20px; align-items: baseline; }
.atlas-home-group-grid header > span {
  align-self: start; width: 12px; height: 12px; margin-top: 6px;
  background: radial-gradient(circle at 35% 35%, var(--group-color), var(--group-soft));
  border-radius: 50%; box-shadow: 0 0 12px var(--group-glow);
}
.atlas-home-group-grid h3 { margin: 0; color: var(--group-color); font: 500 17.6px/26.4px "Atlas Serif", "Noto Serif SC", "Songti SC", serif; }
.atlas-home-group-grid header strong { color: var(--group-color); font: 400 13.6px/20.4px "Atlas Mono", "JetBrains Mono", monospace; }
.atlas-home-group-grid p { margin: 8px 0 8px 32px; color: rgba(232,244,248,.55); font: 400 13.6px/21.76px "Atlas Inter", Inter, sans-serif; }
.atlas-home-group-bar { height: 4px; margin-left: 32px; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 999px; }
.atlas-home-group-bar span {
  display: block; width: var(--group-percent); max-width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--group-soft), var(--group-color)); border-radius: inherit;
  box-shadow: 0 0 8px var(--group-glow);
}
.atlas-home-group-grid small { display: block; margin: 4px 0 0 32px; color: rgba(122,155,181,.5); font: 400 11.2px/16.8px "Atlas Mono", "JetBrains Mono", monospace; }
.atlas-home-group-grid [data-evolution-group="jawless"] { --group-color: #c9a84c; --group-soft: rgba(201,168,76,.53); --group-glow: rgba(201,168,76,.4); --group-border: rgba(201,168,76,.133); }
.atlas-home-group-grid [data-evolution-group="cartilaginous"] { --group-color: #6b9fd4; --group-soft: rgba(107,159,212,.53); --group-glow: rgba(107,159,212,.4); --group-border: rgba(107,159,212,.133); }
.atlas-home-group-grid [data-evolution-group="ray-finned"] { --group-color: #4ecdc4; --group-soft: rgba(78,205,196,.53); --group-glow: rgba(78,205,196,.4); --group-border: rgba(78,205,196,.133); }
.atlas-home-group-grid [data-evolution-group="lobe-finned"] { --group-color: #a78bfa; --group-soft: rgba(167,139,250,.53); --group-glow: rgba(167,139,250,.4); --group-border: rgba(167,139,250,.133); }

/* Deep-sea homepage treatment selected from the approved ImageGen concept. */
.catalog-home-page::before {
  background: rgba(1, 19, 33, .62);
  box-shadow: inset 0 -180px 220px rgba(0, 8, 18, .38), inset 0 0 180px rgba(0, 8, 18, .32);
}
.catalog-home-page .site-search {
  background: rgba(2, 25, 42, .4); border-color: rgba(157, 218, 225, .22);
}
.catalog-home-page .site-search:focus-within {
  background: rgba(3, 34, 53, .6); border-color: rgba(181, 237, 238, .55);
  box-shadow: 0 0 0 3px rgba(117, 214, 219, .08);
}
.catalog-home-page .catalog-ambient-fish img {
  opacity: .42; filter: saturate(.84) brightness(.84) drop-shadow(0 12px 24px rgba(0, 10, 24, .58));
}
.catalog-home-page .atlas-home-copy h1 {
  color: #eef8f8; text-shadow: 0 6px 32px rgba(0, 5, 16, .58);
}
.catalog-home-page .atlas-home-copy h1 strong { color: #abe7e8; }
.catalog-home-page .atlas-home-specimen {
  color: rgba(225, 244, 246, .88); background: rgba(2, 32, 48, .66); border-color: rgba(152, 221, 225, .54);
  box-shadow: inset 0 1px 0 rgba(220, 248, 249, .05), 0 16px 36px rgba(0, 10, 24, .18);
  backdrop-filter: blur(10px);
}
.catalog-home-page .atlas-home-lead {
  color: rgba(220, 236, 240, .9); text-shadow: 0 3px 20px rgba(0, 5, 16, .68);
}
.catalog-home-page .atlas-home-cta {
  color: #06333a; font-weight: 700;
  background: linear-gradient(135deg, #8fe9da, #62cfc2); border-color: transparent;
  box-shadow: 0 8px 24px rgba(38, 197, 182, .18), inset 0 1px 0 rgba(255, 255, 255, .28);
  backdrop-filter: blur(12px);
  transition: box-shadow .2s, transform .2s, filter .2s;
}
.catalog-home-page .atlas-home-cta img { filter: none; }
.catalog-home-page .atlas-home-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 30px rgba(38, 197, 182, .3); transform: translateY(-2px);
}
.catalog-home-page .atlas-home-plate {
  background: rgba(1, 22, 35, .9); border-color: rgba(172, 226, 230, .58);
  box-shadow: inset 0 1px 0 rgba(220, 248, 249, .05), 0 32px 80px rgba(0, 5, 16, .5), 0 0 40px rgba(73, 181, 192, .08);
  backdrop-filter: blur(8px);
}
.catalog-home-page .atlas-home-plate img { opacity: .96; mix-blend-mode: normal; }
.catalog-home-page .atlas-home-stats {
  background: rgba(1, 24, 40, .62); border-color: rgba(164, 224, 229, .2);
  box-shadow: inset 0 80px 120px rgba(0, 8, 18, .18);
}
.catalog-home-page .atlas-home-stat-grid {
  background: rgba(2, 29, 45, .74); border-color: rgba(164, 222, 227, .32);
  box-shadow: 0 28px 68px rgba(0, 6, 18, .34); backdrop-filter: blur(12px);
}
.catalog-home-page .atlas-home-group-grid {
  background: rgba(2, 27, 43, .72); border-color: rgba(164, 222, 227, .28);
  box-shadow: 0 28px 68px rgba(0, 6, 18, .3); backdrop-filter: blur(12px);
}
/* Entrance animations now fade only. The previous translateY/X keyframes, combined
   with `backwards` fill, held elements off their final position through the first
   paint and were being attributed as layout shift on the hero grid. */
@keyframes atlas-home-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlas-home-slide { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlas-home-fade { from { opacity: 0; } to { opacity: .5; } }
.atlas-home-hero .atlas-home-kicker, .atlas-home-copy h1, .atlas-home-specimen { animation: atlas-home-rise .8s cubic-bezier(.23,1,.32,1) backwards; }
.atlas-home-lead { animation: atlas-home-rise .8s .15s cubic-bezier(.23,1,.32,1) backwards; }
.atlas-home-cta { animation: atlas-home-rise .8s .3s cubic-bezier(.23,1,.32,1) backwards; }
.atlas-home-plate { animation: atlas-home-slide 1s .2s cubic-bezier(.23,1,.32,1) backwards; }
.atlas-home-scroll { animation: atlas-home-fade 1s 1s both; }
.atlas-home-stat-grid article, .atlas-home-group-grid article { animation: atlas-home-rise .6s cubic-bezier(.23,1,.32,1) backwards; }
.atlas-home-stat-grid article:nth-child(2), .atlas-home-group-grid article:nth-child(2) { animation-delay: .08s; }
.atlas-home-stat-grid article:nth-child(3), .atlas-home-group-grid article:nth-child(3) { animation-delay: .16s; }
.atlas-home-stat-grid article:nth-child(4), .atlas-home-group-grid article:nth-child(4) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .atlas-home-hero .atlas-home-kicker, .atlas-home-copy h1, .atlas-home-specimen, .atlas-home-lead,
  .atlas-home-cta, .atlas-home-plate, .atlas-home-scroll, .atlas-home-stat-grid article, .atlas-home-group-grid article {
    animation: none;
  }
  .atlas-home-scroll { opacity: .5; }
  .atlas-home-stat-grid article, .atlas-home-group-grid article, .atlas-home-cta { transition: none; }
}

.catalog-filters {
  display: grid; grid-template-columns: 2fr repeat(5, 1fr) auto; gap: .8rem; align-items: end;
  margin: 3rem 0 1.5rem; padding: 1.4rem;
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .18); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 8, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}
label { display: grid; gap: .4rem; color: var(--muted); font-size: .72rem; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: .68rem .75rem; color: var(--ink); background: #082a35;
  border: 1px solid rgba(177,228,222,.2); border-radius: 3px;
}
textarea { resize: vertical; }
option { background: #082a35; }
.result-count { color: rgba(205, 228, 231, .55); font: 500 .72rem/1.6 "Atlas Mono", monospace; letter-spacing: .14em; }
.catalog-grid { margin-top: 1.4rem; }
.catalog-card {
  min-width: 0; color: inherit; text-decoration: none; overflow: hidden;
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .16); border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0, 8, 14, .3);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.catalog-card:hover {
  border-color: rgba(124, 229, 213, .45); transform: translateY(-3px);
  box-shadow: 0 30px 70px rgba(0, 8, 14, .45);
}
.card-water {
  position: relative; display: grid; place-items: center; height: 200px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(9, 52, 66, .9), rgba(2, 17, 25, .96));
  border-bottom: 1px solid rgba(181, 236, 229, .12);
}
.card-water img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card > div:last-child { padding: 1.15rem; }
.catalog-card p, .catalog-card i { color: rgba(205, 228, 231, .55); font-size: .72rem; }
.catalog-card h2 { margin: .25rem 0; color: #f4fbfa; font: 400 1.35rem/1.35 "Atlas Serif", Georgia, "Noto Serif SC", serif; }
.catalog-card ul { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; list-style: none; }
.catalog-card li {
  padding: .3rem .6rem; color: #d8f2ee;
  background: rgba(226, 248, 247, .06); border: 1px solid rgba(208, 241, 239, .16);
  border-radius: 999px; font-size: .68rem;
}
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 3rem; }
.pagination a {
  padding: .6rem 1rem; text-decoration: none;
  color: #eaf9f7; background: rgba(226, 248, 247, .05);
  border: 1px solid rgba(208, 241, 239, .16); border-radius: 10px;
  transition: background-color .18s, border-color .18s, transform .18s;
}
.pagination a:hover { background: rgba(226, 248, 247, .1); border-color: rgba(208, 241, 239, .4); transform: translateY(-1px); }
.pagination .pagination-current {
  padding: .6rem 1rem; color: #06232b; font-weight: 600;
  background: #7fd8d0; border: 1px solid #7fd8d0; border-radius: 10px;
}
.pagination .pagination-gap { color: var(--muted); }
.empty-state { display: grid; place-content: center; justify-items: start; min-height: 55vh; }
.empty-state p { color: var(--muted); }

/* Error page: split stage matching the auth/login design language. */
.error-shell { display: grid; place-items: center; padding-top: clamp(2rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 6vw, 4.5rem); }
.error-stage {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  width: min(100%, 980px);
  min-height: 480px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .18);
  border-radius: 22px;
  box-shadow: 0 40px 110px rgba(0, 8, 14, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.error-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    linear-gradient(to top, rgba(2, 16, 24, .88) 8%, rgba(2, 16, 24, .3) 55%, rgba(4, 38, 50, .14)),
    url("/assets/ocean-reef.webp") center 60% / cover no-repeat,
    #06303f;
  border-right: 1px solid rgba(181, 236, 229, .14);
}
.error-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 16%, rgba(194, 247, 241, .13) 30%, transparent 44%),
    linear-gradient(104deg, transparent 42%, rgba(140, 229, 229, .07) 52%, transparent 62%);
  mix-blend-mode: screen;
  animation: auth-rays 11s ease-in-out infinite alternate;
}
.error-visual strong {
  position: relative;
  color: rgba(244, 251, 250, .92);
  font: 400 clamp(4.5rem, 10vw, 7.5rem)/1 "Atlas Serif", Georgia, "Noto Serif SC", serif;
  letter-spacing: .04em;
  text-shadow: 0 4px 30px rgba(0, 8, 14, .7);
}
.error-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(1.8rem, 4.5vw, 3.2rem);
}
.error-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -12%, rgba(124, 229, 213, .09), transparent 46%);
}
.error-body > * { position: relative; }
.error-body h1 {
  margin: 0;
  color: #f7fbf9;
  font: 400 clamp(1.9rem, 4.5vw, 2.7rem)/1.12 "Atlas Serif", Georgia, "Noto Serif SC", serif;
}
.error-body > p { margin: 0; max-width: 42ch; color: rgba(211, 233, 234, .72); line-height: 1.8; }
.error-body .error-code {
  color: rgba(205, 228, 231, .45);
  font: 500 .72rem/1.5 "Atlas Mono", monospace;
  letter-spacing: .1em;
  overflow-wrap: anywhere;
}
.error-back {
  min-height: 50px;
  padding: 0 1.6rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #8fe9da, #62cfc2);
  box-shadow: 0 8px 24px rgba(38, 197, 182, .18);
  font-weight: 700;
  transition: box-shadow .18s, transform .18s, filter .18s;
}
.error-back:hover {
  background: linear-gradient(135deg, #aef4e9, #7ce5d5);
  box-shadow: 0 10px 28px rgba(38, 197, 182, .26);
  transform: translateY(-1px);
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.error-actions .button { margin-top: 0; }
@media (max-width: 900px) {
  .error-stage { grid-template-columns: 1fr; min-height: 0; }
  .error-visual { min-height: 200px; border-right: 0; border-bottom: 1px solid rgba(181, 236, 229, .14); }
}
@media (max-width: 560px) {
  .error-stage { border-radius: 16px; }
  .error-body { padding: 1.4rem; }
  .error-actions { flex-direction: column; width: 100%; }
  .error-actions .button { width: 100%; }
}

.catalog-shell { width: min(calc(100% - 48px), 1380px); }
.catalog-shell[data-catalog-level="classes"] {
  position: relative; width: min(calc(100% - 56px), 1244px); min-height: calc(100svh - 80px); padding: 42px 0 34px;
}
.catalog-shell[data-catalog-level="classes"] .catalog-ambient-fish { inset: -90px -150px 0; }
.catalog-shell[data-catalog-level="classes"] .ambient-fish-one { top: 160px; right: 9%; width: 78px; }
.catalog-shell[data-catalog-level="classes"] .ambient-fish-two { top: 380px; right: -1%; width: 68px; }
.catalog-shell[data-catalog-level="classes"] .ambient-fish-three { top: 300px; left: -2%; width: 58px; }
.catalog-heading { display: flex; justify-content: space-between; gap: 3rem; align-items: flex-end; width: calc(100% - 32px); margin: 0 16px 34px; }
.catalog-heading > div { max-width: 800px; }
.catalog-heading h1, .catalog-taxon-hero h1 {
  margin: .15rem 0 .6rem; font: 400 clamp(3.2rem, 7vw, 6.7rem)/.95 Georgia, "Noto Serif SC", serif;
}
.catalog-heading h1 { color: #f3fcff; font-family: "Atlas Serif", "Noto Serif SC", "Songti SC", serif; font-size: 96px; font-weight: 400; letter-spacing: .04em; }
.catalog-heading p:last-child { max-width: 680px; color: rgba(225, 247, 252, .75); line-height: 1.8; }
.catalog-heading .eyebrow { color: #f4d782; font-size: 11px; letter-spacing: .28em; }
.atlas-quick-search {
  display: grid; grid-template-columns: 16px minmax(130px, 1fr) auto; gap: .6rem; align-items: center; flex: 0 0 260px;
  min-height: 44px; padding: 0 .45rem 0 .9rem; background: rgba(40, 123, 157, .2); border: 1px solid rgba(208, 246, 249, .4);
  border-radius: 999px;
}
.atlas-quick-search img { width: 14px; height: 14px; opacity: .9; }
.atlas-quick-search input {
  min-width: 0; padding: .55rem 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: .72rem;
}
.atlas-quick-search input::placeholder { color: var(--muted); }
.atlas-quick-search button {
  padding: .46rem .72rem; color: #12465c; background: #c9f2f2; border: 0; border-radius: 999px; font-size: .62rem;
}
.catalog-insight {
  display: flex; align-items: center; gap: 1.1rem; width: calc(100% - 32px); min-height: 64px; margin: 0 16px 22px; padding: 10px 20px;
  background: rgba(62, 150, 177, .12); border: 1px solid rgba(210, 246, 249, .24); border-left: 3px solid rgba(191, 245, 246, .76); border-radius: 0 12px 12px 0;
}
.catalog-insight span { color: #baf1f1; font: 400 34px/1 "Atlas Serif", "Noto Serif SC", serif; }
.catalog-insight p { max-width: 820px; margin: 0; color: rgba(236, 251, 255, .84); line-height: 1.55; }
.atlas-dashboard {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 416px;
  overflow: hidden; background: rgba(15, 81, 116, .36); border: 1px solid rgba(211, 248, 250, .54); border-radius: 22px;
  box-shadow: 0 28px 70px rgba(0, 35, 65, .18); backdrop-filter: blur(14px);
}
.atlas-distribution {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 14px;
  background: rgba(26, 112, 143, .12); border-right: 1px solid rgba(214, 249, 251, .22);
}
.atlas-distribution header p { margin: 0 0 .38rem; color: rgba(214, 248, 250, .75); font-size: .6rem; font-weight: 400; letter-spacing: .18em; }
.atlas-distribution header span { color: rgba(215, 245, 248, .48); font-size: .55rem; }
.atlas-distribution footer { color: var(--muted); font-size: .62rem; }
.atlas-bubble-chart { flex: 1; width: 100%; min-height: 280px; margin: auto; overflow: visible; }
.atlas-bubble { outline: 0; }
.atlas-bubble circle { transform-box: fill-box; transform-origin: center; }
.atlas-bubble-core { stroke: rgba(233, 251, 247, .18); stroke-width: .25; transition: opacity .25s, filter .25s; }
.atlas-bubble-halo { stroke: var(--atlas-color, var(--group-color)); opacity: 0; transition: opacity .2s; }
.atlas-bubble text {
  fill: rgba(247, 253, 255, .94); stroke: rgba(0, 38, 62, .3); stroke-width: .22px; paint-order: stroke fill;
  pointer-events: none; font-family: "Atlas Serif", "Noto Serif SC", "Songti SC", serif; font-weight: 500;
  transition: fill .2s, font-weight .2s, opacity .25s;
}
.atlas-bubble.is-active .atlas-bubble-core { filter: url(#atlas-bubble-glow); }
.atlas-bubble.is-active .atlas-bubble-halo { opacity: .6; }
.atlas-bubble.is-active text { fill: #fff; font-weight: 600; }
.atlas-bubble.is-muted .atlas-bubble-core, .atlas-bubble.is-muted text { opacity: .35; }
.atlas-bubble:first-of-type text { opacity: 0; }
.atlas-bubble-detail {
  position: absolute; z-index: 2; top: 54%; left: 50%; width: 142px; min-height: 66px; padding: .5rem;
  pointer-events: none; text-align: center; transform: translate(-50%, -50%);
}
.atlas-bubble-detail p { margin: 0; color: rgba(247, 253, 255, .96); font-size: .72rem; line-height: 1.5; }
.atlas-bubble-detail [data-atlas-detail-default] { display: block; }
.atlas-bubble-detail [data-atlas-detail-default][hidden] { display: none; }
.atlas-bubble-detail p strong { font-size: 1.2rem; }
.atlas-bubble-detail p i { color: rgba(235, 249, 252, .84); }
.atlas-bubble-detail section { color: var(--atlas-color, var(--group-color)); }
.atlas-bubble-detail section[hidden] { display: none; }
.atlas-bubble-detail strong, .atlas-bubble-detail i { display: block; }
.atlas-bubble-detail strong {
  color: #f8fdff; font: 600 1.2rem/1.35 "Atlas Serif", "Noto Serif SC", "Songti SC", serif;
  letter-spacing: .025em; text-shadow: 0 1px 10px rgba(0, 28, 48, .72);
}
.atlas-bubble-detail i {
  margin: .12rem 0 .5rem; color: rgba(235, 249, 252, .84); font-size: .68rem; font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 28, 48, .65);
}
.atlas-bubble-detail dl { display: flex; justify-content: center; gap: .7rem; margin: 0; }
.atlas-bubble-detail dl div { display: flex; flex-direction: column-reverse; }
.atlas-bubble-detail dt { color: rgba(226, 244, 249, .8); font-size: .56rem; font-weight: 500; }
.atlas-bubble-detail dd { margin: 0; color: #f8fdff; font-size: .95rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 28, 48, .6); }
.atlas-distribution footer { display: none; }
.atlas-distribution footer span:first-child { color: #c4dedd; }
.atlas-class-panel { min-width: 0; }
.atlas-table-heading, .atlas-class-table a {
  display: grid; grid-template-columns: 48px 40px minmax(0, 1fr) 80px 80px 100px; gap: 0; align-items: center;
}
.atlas-table-heading {
  position: sticky; z-index: 2; top: 0; padding: 12px 32px; color: rgba(224, 247, 251, .72); background: rgba(22, 91, 124, .28); border-bottom: 1px solid rgba(214, 249, 251, .2);
  font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.atlas-table-heading > span:nth-child(n+4) { display: flex; justify-content: flex-end; gap: .28rem; }
.atlas-table-heading img { width: 10px; height: 10px; opacity: .42; }
.atlas-class-table { margin: 0; padding: 0; list-style: none; }
.atlas-class-table li { position: relative; border-bottom: 1px solid rgba(223, 250, 252, .12); }
.atlas-class-table li:last-child { border-bottom: 0; }
.atlas-class-table li::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--atlas-color, var(--group-color)); opacity: 0; transition: opacity .18s;
}
.atlas-class-table li:hover::before, .atlas-class-table li:focus-within::before, .atlas-class-table li.is-active::before { opacity: 1; }
.atlas-class-table a {
  min-height: 84px; padding: 20px 32px; color: rgba(237, 250, 253, .84); text-decoration: none; transition: color .18s, background-color .18s;
}
.atlas-class-table a:hover, .atlas-class-table a:focus-visible, .atlas-class-table li.is-active a { color: var(--ink); background: color-mix(in srgb, var(--atlas-color, var(--group-color)) 4%, transparent); }
.atlas-class-table a:focus-visible { outline: 1px solid color-mix(in srgb, var(--atlas-color, var(--group-color)) 55%, transparent); outline-offset: -1px; }
.atlas-class-name { display: grid; gap: .12rem; min-width: 0; }
.atlas-class-dot {
  width: 12px; height: 12px; background: radial-gradient(circle at 35% 30%, var(--atlas-color, var(--group-color)), color-mix(in srgb, var(--atlas-color, var(--group-color)) 33%, transparent));
  border-radius: 50%; box-shadow: 0 0 4px color-mix(in srgb, var(--atlas-color, var(--group-color)) 27%, transparent); transition: box-shadow .2s;
}
.atlas-class-table li.is-active .atlas-class-dot { box-shadow: 0 0 10px color-mix(in srgb, var(--atlas-color, var(--group-color)) 53%, transparent); }
.atlas-class-table li.is-active .atlas-class-name strong {
  color: var(--atlas-color, var(--group-color)); text-shadow: 0 0 12px color-mix(in srgb, var(--atlas-color, var(--group-color)) 45%, transparent), 0 1px 8px rgba(0, 28, 48, .62);
}
.atlas-class-table li.is-active .atlas-class-stat:last-child { color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--atlas-color, var(--group-color)) 50%, transparent); }
.atlas-class-index { color: rgba(209, 235, 242, .58); font: 500 .75rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.atlas-class-name strong {
  overflow: hidden; color: rgba(248, 253, 255, .96);
  font: 600 1.1rem/1.4 "Atlas Serif", "Noto Serif SC", "Songti SC", serif; letter-spacing: .02em;
  text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 28, 48, .58); white-space: nowrap;
}
.atlas-class-name i { overflow: hidden; color: rgba(218, 239, 245, .7); font-size: .72rem; font-weight: 500; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.atlas-class-stat { display: grid; justify-items: end; text-align: right; }
.atlas-class-stat strong { color: rgba(248, 253, 255, .92); font-size: 1rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 28, 48, .5); }
.atlas-class-stat small { color: rgba(214, 239, 244, .72); font-size: .65rem; font-weight: 500; }

/* Level 01 keeps the homepage water and lifts dense data on translucent glass. */
.catalog-classes-page {
  --classes-ivory: #f7fdff;
  --classes-copy: rgba(242, 252, 255, .94);
  --classes-muted: rgba(218, 241, 246, .78);
  --classes-gold: #f4d782;
  --classes-line: rgba(211, 248, 250, .5);
}
.catalog-classes-page .catalog-heading h1 {
  color: var(--classes-ivory);
  text-shadow: 0 3px 22px rgba(0, 32, 58, .52);
}
.catalog-classes-page .catalog-heading .eyebrow { color: var(--classes-gold); }
.catalog-classes-page .catalog-heading p:last-child {
  color: var(--classes-copy);
  text-shadow: 0 2px 12px rgba(0, 31, 55, .62);
}
.catalog-classes-page .atlas-quick-search {
  background: rgba(15, 81, 116, .54);
  border-color: rgba(211, 248, 250, .68);
  box-shadow: 0 12px 28px rgba(0, 35, 65, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  transition: border-color .18s, box-shadow .18s;
}
.catalog-classes-page .atlas-quick-search:focus-within {
  border-color: #baf1f1;
  box-shadow: 0 0 0 3px rgba(186, 241, 241, .18), 0 12px 28px rgba(0, 35, 65, .24);
}
.catalog-classes-page .atlas-quick-search img { filter: brightness(1.4); }
.catalog-classes-page .atlas-quick-search input { color: #f7fdff; }
.catalog-classes-page .atlas-quick-search input::placeholder { color: rgba(226, 246, 249, .76); }
.catalog-classes-page .atlas-quick-search button {
  color: #12465c;
  background: #c9f2f2;
  font-weight: 700;
  transition: background-color .18s, transform .18s;
}
.catalog-classes-page .atlas-quick-search button:hover { background: #e2fbfa; }
.catalog-classes-page .atlas-quick-search button:active { transform: translateY(1px); }
.catalog-classes-page .catalog-insight {
  background: rgba(15, 81, 116, .46);
  border-color: rgba(211, 248, 250, .48);
  border-left-color: var(--classes-gold);
  box-shadow: 0 14px 34px rgba(0, 35, 65, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
}
.catalog-classes-page .catalog-insight span { color: var(--classes-gold); text-shadow: 0 2px 14px rgba(0, 35, 65, .52); }
.catalog-classes-page .catalog-insight p { color: var(--classes-copy); text-shadow: 0 2px 10px rgba(0, 35, 65, .42); }
.catalog-classes-page .atlas-dashboard {
  background: rgba(15, 81, 116, .5);
  border-color: rgba(211, 248, 250, .66);
  box-shadow: 0 28px 70px rgba(0, 35, 65, .2), inset 0 1px 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(14px);
}
.catalog-classes-page .atlas-distribution {
  background: rgba(26, 112, 143, .2);
  border-color: var(--classes-line);
}
.catalog-classes-page .atlas-distribution header p { color: rgba(238, 251, 253, .92); font-weight: 600; }
.catalog-classes-page .atlas-distribution header span { color: rgba(218, 241, 246, .72); }
.catalog-classes-page .atlas-table-heading {
  color: rgba(228, 247, 250, .86);
  background: rgba(5, 56, 83, .62);
  border-color: var(--classes-line);
}
.catalog-classes-page .atlas-table-heading img { opacity: .62; filter: brightness(1.25); }
.catalog-classes-page .atlas-class-table li { border-color: rgba(211, 248, 250, .24); }
.catalog-classes-page .atlas-class-table a {
  color: rgba(244, 252, 254, .94);
  background: rgba(5, 55, 78, .26);
}
.catalog-classes-page .atlas-class-table li:nth-child(even) a { background: rgba(5, 55, 78, .38); }
.catalog-classes-page .atlas-class-table a:hover,
.catalog-classes-page .atlas-class-table a:focus-visible,
.catalog-classes-page .atlas-class-table li.is-active a {
  color: #fff;
  background: color-mix(in srgb, var(--atlas-color, var(--group-color)) 10%, rgba(20, 100, 125, .56));
}
.catalog-classes-page .atlas-class-index { color: rgba(218, 241, 246, .7); }
.catalog-classes-page .atlas-class-name strong,
.catalog-classes-page .atlas-class-stat strong { color: var(--classes-ivory); }
.catalog-classes-page .atlas-class-name i,
.catalog-classes-page .atlas-class-stat small { color: var(--classes-muted); }
.catalog-classes-page .atlas-bubble-detail p,
.catalog-classes-page .atlas-bubble-detail strong,
.catalog-classes-page .atlas-bubble-detail dd { color: var(--classes-ivory); }
.catalog-classes-page .atlas-bubble-detail p i,
.catalog-classes-page .atlas-bubble-detail i,
.catalog-classes-page .atlas-bubble-detail dt { color: rgba(228, 247, 250, .82); }
.catalog-classes-page .catalog-explore-hint { color: rgba(218, 241, 246, .72); }
.evolution-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .9rem; }
.catalog-shell[data-catalog-level="classes"] .evolution-legend { display: none; }
.catalog-explore-hint { margin: 38px 0 0; color: rgba(208, 239, 244, .42); text-align: center; font-size: 12px; letter-spacing: .08em; }

@media (min-width: 1500px) {
  .atlas-class-table a { min-height: 74px; padding-top: 15px; padding-bottom: 15px; }
}
.evolution-legend span { position: relative; padding-left: 1rem; color: var(--muted); font-size: .58rem; }
.evolution-legend span::before {
  content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--group-color); box-shadow: 0 0 9px var(--group-color); transform: translateY(-50%);
}
[data-evolution-group="jawless"] { --group-color: #d8b66f; }
[data-evolution-group="cartilaginous"] { --group-color: #84b6d9; }
[data-evolution-group="ray-finned"] { --group-color: #70e0c3; }
[data-evolution-group="lobe-finned"] { --group-color: #d98b76; }
[data-evolution-group="other"] { --group-color: #7ce5d5; }
.class-stats-inline {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.catalog-shell:is([data-catalog-level="orders"], [data-catalog-level="families"], [data-catalog-level="species"]) {
  position: relative; width: min(calc(100% - 56px), 1244px); padding: 38px 0 80px;
}
.catalog-shell:is([data-catalog-level="orders"], [data-catalog-level="families"], [data-catalog-level="species"]) .catalog-ambient-fish { inset: -90px -150px 0; }
.catalog-shell:is([data-catalog-level="orders"], [data-catalog-level="families"], [data-catalog-level="species"]) .ambient-fish-one { top: 52px; right: 3%; width: 74px; }
.catalog-shell:is([data-catalog-level="orders"], [data-catalog-level="families"], [data-catalog-level="species"]) .ambient-fish-two { top: 430px; right: -2%; width: 62px; }
.catalog-shell:is([data-catalog-level="orders"], [data-catalog-level="families"], [data-catalog-level="species"]) .ambient-fish-three { top: 330px; left: -2%; width: 58px; }
.catalog-breadcrumbs {
  position: relative; z-index: 1; display: flex; gap: .65rem; align-items: center; margin: 0 16px 26px;
  color: rgba(220, 244, 249, .58); font-size: .7rem; text-shadow: 0 1px 8px rgba(0, 28, 48, .65);
}
.catalog-breadcrumbs a { color: rgba(225, 247, 251, .68); text-decoration: none; }
.catalog-breadcrumbs a:hover { color: var(--group-color, var(--accent)); }
.catalog-breadcrumbs strong { color: rgba(248, 253, 255, .96); font-weight: 600; }
.catalog-taxon-hero {
  position: relative; display: flex; justify-content: space-between; gap: 3rem; align-items: flex-end; overflow: hidden;
  min-height: 226px; padding: 2rem 2.5rem; background: rgba(15, 81, 116, .36); border: 1px solid rgba(211, 248, 250, .54); border-radius: 22px;
  box-shadow: 0 28px 70px rgba(0, 35, 65, .18); backdrop-filter: blur(14px);
}
.catalog-taxon-hero::before {
  content: ""; position: absolute; top: -190px; right: 4%; width: 480px; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--group-color, var(--accent)) 28%, transparent), transparent 67%);
}
.catalog-taxon-hero > * { position: relative; z-index: 1; }
.catalog-taxon-hero h1 {
  color: rgba(248, 253, 255, .98); font-family: "Atlas Serif", "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(3.2rem, 6vw, 5.4rem); letter-spacing: .035em; text-shadow: 0 2px 18px rgba(0, 35, 65, .35);
}
.catalog-taxon-hero i { color: color-mix(in srgb, var(--group-color, var(--accent)) 72%, white); font-weight: 500; letter-spacing: .08em; }
.catalog-taxon-stats { display: flex; gap: 2.8rem; margin: 0; }
.catalog-taxon-stats div { display: grid; gap: .25rem; text-align: right; }
.catalog-taxon-stats dt { color: rgba(218, 241, 246, .68); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.catalog-taxon-stats dd { margin: 0; color: #f8fdff; font: 400 2.4rem/1.1 "Atlas Serif", Georgia, serif; text-shadow: 0 1px 10px rgba(0, 28, 48, .5); }
.catalog-group-note { display: flex; gap: .65rem; align-items: center; margin: 1.2rem 16px 2rem; color: rgba(222, 244, 248, .65); font-size: .72rem; }
.catalog-group-note span { display: grid; place-items: center; width: 20px; height: 20px; color: var(--group-color, var(--accent)); border: 1px solid rgba(211, 248, 250, .34); border-radius: 50%; }
.catalog-order-groups { display: grid; gap: 1.25rem; }
.catalog-order-group {
  display: grid; grid-template-columns: minmax(180px, .28fr) 1fr; gap: 1.5rem; padding: 1.35rem;
  background: rgba(15, 81, 116, .32); border: 1px solid rgba(211, 248, 250, .38); border-radius: 18px;
  box-shadow: 0 22px 54px rgba(0, 35, 65, .14); backdrop-filter: blur(12px);
}
.catalog-order-group > header { position: relative; padding: .6rem 1rem; border-right: 1px solid rgba(211, 248, 250, .22); }
.catalog-order-group > header span { color: var(--group-color, var(--accent)); font-size: .62rem; }
.catalog-order-group > header h2 { margin: .5rem 0; color: #f8fdff; font: 600 1.8rem/1.35 "Atlas Serif", "Noto Serif SC", serif; text-shadow: 0 1px 10px rgba(0, 28, 48, .5); }
.catalog-order-group > header small { color: rgba(218, 241, 246, .68); }
.catalog-order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.catalog-order-card {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 20px; gap: .8rem; align-items: center;
  min-width: 0; padding: .85rem; color: inherit; text-decoration: none; background: rgba(8, 53, 83, .42);
  border: 1px solid rgba(218, 248, 251, .18); border-radius: 10px; transition: border-color .15s, background-color .15s, transform .15s;
}
.catalog-order-card:hover { background: rgba(31, 105, 139, .46); border-color: var(--group-color, var(--accent)); transform: translateX(3px); }
.order-marker { width: 5px; height: 28px; background: var(--group-color, var(--accent)); border-radius: 999px; opacity: .8; }
.catalog-order-card > span:nth-child(2) { display: grid; min-width: 0; }
.catalog-order-card strong, .catalog-order-card i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-order-card strong { color: rgba(248, 253, 255, .96); font: 600 1rem/1.4 "Atlas Serif", "Noto Serif SC", serif; text-shadow: 0 1px 8px rgba(0, 28, 48, .5); }
.catalog-order-card:hover strong { color: var(--group-color, var(--accent)); }
.catalog-order-card i, .catalog-order-card small { color: rgba(218, 239, 245, .68); font-size: .62rem; }
.catalog-order-card b { color: var(--group-color, var(--accent)); font-weight: 400; }
.catalog-order-hero { margin-bottom: 2rem; }
.family-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.family-card {
  display: grid; grid-template-columns: minmax(150px, .42fr) 1fr; min-height: 270px; overflow: hidden;
  color: inherit; text-decoration: none; background: rgba(15, 81, 116, .36); border: 1px solid rgba(211, 248, 250, .4); border-radius: 18px;
  box-shadow: 0 22px 54px rgba(0, 35, 65, .14); backdrop-filter: blur(12px); transition: border-color .2s, background-color .2s, transform .2s;
}
.family-card:hover { background: rgba(31, 105, 139, .44); border-color: var(--group-color, var(--accent)); transform: translateY(-3px); }
.family-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.family-card-visual {
  position: relative; display: grid; place-items: center; min-height: 230px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #1a6d7c, #06252f 70%);
}
.family-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.family-card-visual > span:last-child {
  position: absolute; top: .85rem; left: .85rem; padding: .25rem .4rem; color: #e8fffb;
  background: rgba(0,20,27,.65); border-radius: 4px; font-size: .6rem;
}
.family-card-copy { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; }
.family-card-copy > p { margin: 0; color: var(--group-color, var(--accent)); font-size: .57rem; letter-spacing: .2em; }
.family-card-copy h2 { margin: .4rem 0 .12rem; color: rgba(248, 253, 255, .96); font: 600 1.55rem/1.4 "Atlas Serif", "Noto Serif SC", serif; text-shadow: 0 1px 8px rgba(0, 28, 48, .5); }
.family-card:hover h2 { color: var(--group-color, var(--accent)); }
.family-card-copy > i { color: rgba(218, 239, 245, .68); font-size: .72rem; }
.family-card-copy dl { display: flex; gap: 2rem; margin: 1.35rem 0; padding: 1rem 0; border-block: 1px solid rgba(177,228,222,.1); }
.family-card-copy dl div { display: flex; gap: .55rem; align-items: baseline; }
.family-card-copy dt { color: rgba(218, 239, 245, .68); font-size: .64rem; }
.family-card-copy dd { margin: 0; color: #f8fdff; font: 400 1.3rem "Atlas Serif", Georgia, serif; }
.family-representatives { margin-top: auto; color: rgba(218, 239, 245, .68); font-size: .7rem; line-height: 1.7; }
.family-representatives b { color: rgba(248, 253, 255, .9); font-weight: 500; }
.catalog-family-list-heading {
  display: flex; justify-content: space-between; gap: 2rem; align-items: flex-end;
  margin-top: 3rem; padding: 0 16px 1rem; border-bottom: 1px solid rgba(211, 248, 250, .28);
}
.catalog-family-list-heading h2 { margin: .35rem 0 0; color: #f8fdff; font: 400 clamp(2rem, 4vw, 3.3rem) "Atlas Serif", "Noto Serif SC", serif; text-shadow: 0 1px 12px rgba(0, 28, 48, .5); }
.catalog-family-list-heading > p { max-width: 420px; margin: 0; color: rgba(218, 239, 245, .7); line-height: 1.7; text-align: right; }
.catalog-shell[data-catalog-level="species"] .result-count { margin-left: 16px; color: rgba(218, 239, 245, .68); }
.catalog-shell[data-catalog-level="species"] .catalog-card {
  border-radius: 18px;
}
.catalog-shell[data-catalog-level="species"] .catalog-card:hover { border-color: var(--group-color, var(--accent)); }
.catalog-shell[data-catalog-level="species"] .catalog-card h2 { color: rgba(248, 253, 255, .96); font-family: "Atlas Serif", "Noto Serif SC", serif; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 28, 48, .5); }
.catalog-shell[data-catalog-level="species"] .catalog-card:hover h2 { color: var(--group-color, var(--accent)); }

.taxonomy-tree-page {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(44, 127, 134, .18), transparent 42%),
    linear-gradient(#061d27, #020f17);
}
.taxonomy-shell { width: min(calc(100% - 48px), 1500px); min-height: calc(100vh - 72px); margin: 0 auto; padding: .75rem 0 2rem; }
.taxonomy-heading { width: min(100%, 920px); margin: 0 auto .8rem; padding: .8rem 1.25rem 0; text-align: center; }
.taxonomy-kicker {
  margin: 0 0 .35rem; color: var(--accent-strong); font: 700 .68rem/1 "Atlas Mono", monospace;
  letter-spacing: .24em; text-transform: uppercase;
}
.taxonomy-heading h1 {
  margin: 0; color: #f5fff9; font: 400 clamp(2.4rem, 6vw, 4.8rem)/1.04 "Atlas Display", "Atlas Serif", Georgia, serif;
  letter-spacing: .05em; text-shadow: 0 5px 24px rgba(0, 20, 27, .5);
}
.taxonomy-heading-lead {
  margin: .7rem auto 0; color: rgba(220, 242, 239, .78); font: 400 clamp(.75rem, 1.4vw, .9rem)/1.5 "Atlas Mono", monospace;
  letter-spacing: .04em;
}
.taxonomy-stage {
  position: relative; isolation: isolate; height: min(760px, calc(100svh - 208px)); min-height: 540px; overflow: hidden;
  border: 1px solid rgba(163, 225, 219, .2); border-radius: 28px;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(21, 118, 116, .12), transparent 48%),
    linear-gradient(to bottom, rgba(2, 24, 33, .14), rgba(1, 11, 18, .66)),
    url("/assets/generated/taxonomy-ocean-bg-v1.png") center / cover no-repeat,
    #062732;
  box-shadow: inset 0 1px rgba(226, 255, 248, .08), inset 0 -90px 120px rgba(0, 8, 13, .3), 0 28px 80px rgba(0, 8, 14, .35);
}
.taxonomy-stage::before, .taxonomy-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.taxonomy-stage::before {
  background:
    linear-gradient(106deg, transparent 23%, rgba(165, 242, 231, .08) 34%, transparent 46%),
    linear-gradient(98deg, transparent 45%, rgba(119, 226, 218, .06) 53%, transparent 64%),
    radial-gradient(ellipse at 50% 48%, rgba(61, 206, 184, .12), transparent 35%);
  mix-blend-mode: screen;
}
.taxonomy-stage::after { box-shadow: inset 0 0 150px 45px rgba(0, 9, 16, .62); }
#taxonomy-canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#taxonomy-canvas:active { cursor: grabbing; }
.taxonomy-fruit-controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.taxonomy-fruit-control {
  position: absolute; top: var(--fruit-y); left: var(--fruit-x); width: 68px; height: 68px; padding: 0;
  color: transparent; background: transparent; border: 0; border-radius: 50%; pointer-events: auto;
  transform: translate(-50%, -50%);
}
.taxonomy-fruit-control:focus-visible { outline: 3px solid #d7fff8; outline-offset: 4px; box-shadow: 0 0 28px #65e6d1; }
.taxonomy-status {
  position: absolute; z-index: 3; bottom: 18px; left: 50%; max-width: calc(100% - 32px); margin: 0; padding: .55rem 1rem;
  color: rgba(221, 244, 240, .7); background: rgba(2, 22, 29, .5); border: 1px solid rgba(182, 231, 226, .12);
  border-radius: 999px; backdrop-filter: blur(12px); text-align: center; font-size: .72rem; letter-spacing: .04em;
  pointer-events: none; transform: translateX(-50%);
}
.taxonomy-branch {
  position: absolute; z-index: 4; top: var(--branch-y); left: var(--branch-x); width: 0; height: 0;
  color: #effffb; pointer-events: none;
}
.taxonomy-branch[hidden] { display: none; }
.taxonomy-branch-title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.taxonomy-branch-fruits {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
}
.taxonomy-child-fruit {
  position: absolute; top: -12px; left: -12px; width: 24px; height: 24px;
  transform: rotate(var(--angle)) translateX(var(--radius)) rotate(var(--reverse-angle));
  animation: taxonomy-arrow-flight .55s cubic-bezier(.2, .85, .2, 1) both;
  animation-delay: var(--delay);
}
.taxonomy-child-fruit.taxonomy-order-item {
  transform: translate(var(--branch-dx), var(--branch-dy));
  animation-name: taxonomy-order-flight;
  animation-duration: .72s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
.taxonomy-child-arrow {
  position: relative; display: block; width: 24px; height: 24px; color: #efffff;
  padding: 0; border: 0; background: none; font-size: 0; pointer-events: auto;
  filter: drop-shadow(0 0 7px rgba(202, 255, 247, .65));
}
.taxonomy-child-arrow::before {
  content: ""; position: absolute; inset: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l18 9-8 2-4 7z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(calc(var(--angle) + 180deg));
}
.taxonomy-child-arrow::after {
  content: attr(data-name); position: absolute; bottom: calc(100% + 7px); left: 50%; z-index: 2;
  width: max-content; max-width: 210px; padding: .38rem .58rem;
  color: #effffb; background: rgba(7, 34, 42, .82); border: 1px solid rgba(220, 255, 249, .36);
  border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 12, 18, .32); backdrop-filter: blur(12px);
  font: 500 .7rem/1.2 sans-serif; opacity: 0; pointer-events: none;
  transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease;
}
.taxonomy-child-arrow:hover::after, .taxonomy-child-arrow:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.taxonomy-child-arrow:focus-visible { outline: 2px solid #d7fff8; outline-offset: 3px; border-radius: 50%; }
.taxonomy-order-fruit {
  position: relative; display: block; width: var(--branch-size, 48px); height: var(--branch-size, 48px); padding: 0; border: 0; background: none;
  color: transparent; font-size: 0; pointer-events: auto; transform: translate(var(--branch-offset, -12px), var(--branch-offset, -12px));
  filter: drop-shadow(0 0 10px rgba(255, 129, 157, .55));
}
.taxonomy-order-fruit img { display: block; width: 100%; height: 100%; object-fit: contain; }
.taxonomy-order-fruit::after {
  content: attr(data-name); position: absolute; bottom: calc(100% + 5px); left: 50%; z-index: 2;
  width: max-content; max-width: 210px; padding: .38rem .58rem;
  color: #effffb; background: rgba(7, 34, 42, .82); border: 1px solid rgba(255, 195, 214, .42);
  border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 12, 18, .32); backdrop-filter: blur(12px);
  font: 500 .7rem/1.2 sans-serif; opacity: 0; pointer-events: none;
  transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease;
}
.taxonomy-order-fruit:hover::after, .taxonomy-order-fruit:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.taxonomy-order-fruit:focus-visible { outline: 2px solid #ffd4e0; outline-offset: 2px; border-radius: 42% 42% 50% 50%; }
.taxonomy-arrow-picker {
  position: absolute; z-index: 5; top: 14px; left: 50%; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.taxonomy-arrow-picker[hidden] { display: none; }
.taxonomy-arrow-picker:focus-within {
  display: grid; gap: .35rem; width: min(360px, calc(100% - 28px)); height: auto; padding: .7rem;
  clip-path: none; color: #fff; background: #082b38; border: 1px solid var(--line); border-radius: 12px;
  transform: translateX(-50%);
}
.taxonomy-arrow-picker label, .taxonomy-arrow-picker p { color: var(--muted); font-size: .68rem; }
.taxonomy-arrow-picker p { margin: 0; white-space: normal; }
.taxonomy-arrow-picker input { min-height: 38px; }
.taxonomy-arrow-picker ul { margin: 0; padding: 0; list-style: none; white-space: normal; }
.taxonomy-arrow-picker [role="option"] { color: #fff; font-size: .75rem; }
.taxonomy-arrow-target { color: var(--accent); font-size: .72rem; white-space: normal; }
.taxonomy-arrow-canvas {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%;
  pointer-events: none;
}
.taxonomy-arrow-canvas[hidden] { display: none; }
@keyframes taxonomy-arrow-flight {
  from { opacity: 0; transform: rotate(var(--angle)) translateX(18px) rotate(var(--reverse-angle)) scale(.35); }
  to { opacity: 1; transform: rotate(var(--angle)) translateX(var(--radius)) rotate(var(--reverse-angle)) scale(1); }
}
@keyframes taxonomy-order-flight {
  0% { opacity: 0; transform: translate(0, 0) scale(.2); }
  72% { opacity: 1; transform: translate(var(--branch-dx), var(--branch-dy)) scale(1.12); }
  100% { opacity: 1; transform: translate(var(--branch-dx), var(--branch-dy)) scale(1); }
}

.fish-detail-page {
  position: relative; color: #eefbff;
  background: #063959 url("/assets/ocean-reef.webp") center / cover fixed no-repeat;
  font: 400 16px/1.5 "Atlas Inter", Inter, system-ui, sans-serif;
}
.fish-detail-page::before {
  content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 48, 78, .24), rgba(0, 35, 67, .52));
}
.fish-detail-page .site-header {
  height: 90px; width: min(calc(100% - 56px), 1440px); border-color: rgba(213, 247, 250, .2);
}
.fish-detail-page .brand { color: #f2fbff; }
.fish-detail-page .brand small, .fish-detail-page .site-header nav a { color: rgba(232, 250, 255, .82); }
.fish-detail-page .brand-mark { border-color: rgba(190, 241, 246, .34); color: #a9f0ef; }
.fish-detail-page .language-switch a[aria-current] { background: rgba(215, 249, 253, .08); border-color: rgba(215, 249, 253, .32); border-radius: 4px; }
.fish-profile { position: relative; z-index: 1; width: min(calc(100% - 56px), 1440px); padding: 48px 0 60px; }
.fish-breadcrumbs { margin: 0 0 24px; }
.fish-profile article { display: grid; grid-template-columns: minmax(420px, 590px) minmax(0, 1fr); gap: clamp(40px, 4vw, 68px); align-items: start; }
.profile-visual { display: grid; gap: 20px; min-width: 0; }
.profile-photo-visual, .profile-ai-visual {
  position: relative; margin: 0; overflow: hidden; padding: 12px;
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .2); border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 8, 14, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.profile-photo-image, .profile-placeholder { display: block; width: 100%; height: 340px; object-fit: cover; border-radius: 12px; }
.profile-placeholder { display: grid; place-content: center; justify-items: center; gap: 2rem; background: radial-gradient(ellipse at 50% 42%, rgba(9, 52, 66, .9), rgba(2, 17, 25, .96)); }
.profile-placeholder p { color: var(--muted); }
.profile-ai-visual img { display: block; width: 100%; height: 310px; padding: 40px 24px 24px; object-fit: contain; border-radius: 12px; background: radial-gradient(ellipse at 50% 46%, rgba(9, 52, 66, .9), rgba(2, 17, 25, .96)); }
.profile-media-label {
  position: absolute; z-index: 2; top: 24px; left: 24px; display: flex; align-items: center; gap: 9px; min-width: 120px;
  margin: 0; padding: 9px 12px; color: #effdff; background: rgba(1, 22, 32, .72);
  border: 1px solid rgba(205, 237, 240, .2); border-radius: 10px; backdrop-filter: blur(8px);
}
.profile-media-label > img { width: 22px; height: 22px; object-fit: contain; }
.profile-media-label > span { display: grid; gap: 1px; }
.profile-media-label strong { font: 500 12px/16px "Atlas Inter", Inter, sans-serif; }
.profile-media-label small { color: rgba(190, 239, 242, .8); font: 400 8px/12px "Atlas Mono", monospace; letter-spacing: .1em; }
.profile-copy { min-width: 0; padding-top: 2px; }
.profile-toolbar { display: flex; align-items: center; gap: clamp(24px, 6vw, 80px); width: min(100%, 520px); margin-bottom: 18px; }
.profile-copy .back-link { margin: 0; color: #a7e8ea; font-size: 14px; }
.profile-copy .back-link:hover { color: #fff; }
.fish-card-trigger {
  position: relative; isolation: isolate; gap: 11px; min-width: 188px; min-height: 60px; overflow: hidden;
  padding: 9px 14px 9px 11px; color: #f8ffff;
  background: linear-gradient(112deg, rgba(10, 88, 108, .96), rgba(3, 39, 60, .95) 64%, rgba(2, 31, 50, .96));
  border: 1px solid rgba(159, 241, 239, .86); border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(232, 255, 255, .22), inset 0 0 0 1px rgba(72, 210, 221, .13), 0 0 0 3px rgba(80, 218, 224, .08), 0 17px 38px rgba(0, 24, 44, .34);
  backdrop-filter: blur(12px); transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.fish-card-trigger::before {
  content: ""; position: absolute; z-index: -1; top: 0; right: 8%; left: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, #8ff4f1 36%, #f5d270 52%, #8ff4f1 68%, transparent);
  opacity: .9; transition: right .25s, left .25s, opacity .25s;
}
.fish-card-trigger::after {
  content: ""; position: absolute; z-index: -1; top: -26px; left: -22px; width: 112px; height: 112px;
  background: radial-gradient(circle, rgba(86, 221, 222, .28), transparent 68%); pointer-events: none;
}
.fish-card-trigger:hover {
  color: #fff; background: linear-gradient(112deg, rgba(12, 108, 123, .98), rgba(4, 53, 75, .97) 64%, rgba(2, 36, 56, .98));
  border-color: rgba(188, 255, 249, .98);
  box-shadow: inset 0 1px 0 rgba(239, 255, 255, .28), inset 0 0 0 1px rgba(91, 234, 233, .18), 0 0 0 4px rgba(80, 226, 228, .12), 0 20px 44px rgba(0, 20, 40, .42); transform: translateY(-2px) scale(1.015);
}
.fish-card-trigger:hover::before { right: 5%; left: 5%; opacity: 1; }
.fish-card-trigger:focus-visible { outline: 2px solid #a9f0ef; outline-offset: 3px; }
.fish-card-trigger:disabled { cursor: wait; opacity: .68; transform: none; }
.fish-card-trigger-icon {
  display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; color: #b8f6f2;
}
.fish-card-trigger-icon svg { width: 39px; height: 39px; overflow: visible; filter: drop-shadow(0 3px 8px rgba(0, 19, 35, .32)); }
.fish-card-trigger-icon rect { fill: rgba(2, 36, 56, .58); stroke: currentColor; stroke-width: 1.7; }
.fish-card-trigger-sheet-back { opacity: .62; transform: rotate(-6deg); transform-origin: 14.5px 17px; }
.fish-card-trigger-sheet-front { opacity: .98; }
.fish-card-trigger-icon circle { fill: #ffd96f; stroke: rgba(3, 36, 56, .9); stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(255, 217, 111, .9)); }
.fish-card-trigger-label { flex: 1 1 auto; font: 700 14px/19px "Atlas Inter", Inter, sans-serif; letter-spacing: .045em; text-align: left; text-shadow: 0 1px 8px rgba(0, 22, 38, .65); white-space: nowrap; }
.fish-card-trigger-arrow { display: grid; flex: 0 0 10px; place-items: center; color: rgba(184, 241, 241, .78); transition: color .2s, transform .2s; }
.fish-card-trigger-arrow svg { width: 8px; height: 14px; overflow: visible; }
.fish-card-trigger-arrow path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.fish-card-trigger:hover .fish-card-trigger-arrow { color: #b7f2f2; transform: translateX(2px); }
.profile-copy .eyebrow { margin-bottom: 10px; color: #f4d782; font: 500 12px/18px "Atlas Mono", monospace; letter-spacing: .28em; }
.profile-copy h1 { margin: 0; color: #f8fdff; font: 400 clamp(3.25rem, 4vw, 4.5rem)/1.1 "Atlas Serif", "Noto Serif SC", "Songti SC", serif; letter-spacing: .04em; text-shadow: 0 5px 28px rgba(0, 45, 72, .28); }
.scientific { margin: 6px 0 12px; color: #a9eeeb; font: italic 19px/28px "Atlas Inter", Inter, sans-serif; letter-spacing: .05em; }
.profile-tagline { margin: 0 0 14px; color: #f4d782; font: 500 18px/28px "Atlas Serif", "Noto Serif SC", serif; letter-spacing: .08em; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; padding: 0; list-style: none; }
.profile-tags li { display: flex; align-items: center; gap: 5px; padding: 4px 11px; color: #c7eff0; background: rgba(80, 183, 200, .1); border: 1px solid rgba(178, 235, 239, .3); border-radius: 999px; font-size: 12px; line-height: 18px; }
.profile-tags img { width: 13px; height: 13px; object-fit: contain; }
.profile-copy .lead { max-width: 790px; margin: 0 0 22px; color: rgba(237, 250, 255, .86); font-size: 15px; line-height: 1.75; }
.profile-information { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 18px; align-items: start; }
.profile-information-wide { grid-template-columns: 1fr; }
.profile-facts {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin: 0;
  background: transparent; border: 0;
}
.profile-facts div {
  grid-column: span 3; min-height: 66px; padding: 12px 16px;
  background: rgba(1, 19, 27, .5); border: 1px solid rgba(205, 237, 240, .12); border-radius: 12px;
}
.profile-facts > div:nth-child(odd):has(+ .profile-fact-distribution) { grid-column: 1 / -1; }
.profile-facts .profile-fact-distribution { grid-column: span 4; min-height: 126px; }
.profile-facts .profile-fact-conservation { grid-column: span 2; min-height: 126px; }
.profile-facts dt {
  display: flex; align-items: center; gap: 8px;
  color: rgba(230, 245, 245, .55); font: 600 .62rem/1.4 "Atlas Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase;
}
.profile-facts dt img { width: 14px; height: 14px; object-fit: contain; opacity: .75; }
.profile-facts dd { margin-top: .4rem; color: #eaf9f7; font-size: 14px; font-weight: 600; line-height: 1.5; }
.profile-facts dd a { color: #a9eeeb; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.profile-facts dd a:hover { color: #fff; }
.profile-fact-conservation dd { display: grid; place-items: center; gap: 9px; margin-top: 8px; }
.profile-fact-conservation dd strong { display: grid; place-items: center; width: 62px; aspect-ratio: 1; color: #8fe9da; border: 1px solid rgba(124, 229, 213, .55); border-radius: 50%; box-shadow: 0 0 0 5px rgba(124, 229, 213, .08), 0 0 0 6px rgba(124, 229, 213, .28); font: 500 20px/1 "Atlas Mono", monospace; }
.profile-fact-conservation dd span { color: #8fe9da; font-size: 11px; }
.profile-side-panels { display: grid; gap: 16px; min-width: 0; }
.profile-distribution, .profile-conservation {
  overflow: hidden;
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .18);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 8, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.profile-distribution header, .profile-conservation header { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 12px 14px; border-bottom: 1px solid rgba(194, 240, 243, .14); }
.profile-distribution header img, .profile-conservation header img { width: 19px; height: 19px; object-fit: contain; }
.profile-distribution h2, .profile-conservation h2 { margin: 0; color: #eafcff; font-size: 13px; font-weight: 500; }
.profile-distribution-visual { position: relative; height: 142px; overflow: hidden; background: #061e30; }
.profile-distribution-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-distribution-image--base,
.profile-distribution-image--overlay {
  position: absolute;
  left: var(--distribution-map-left, 0);
  top: var(--distribution-map-top, 0);
  width: var(--distribution-map-width, 100%);
  max-width: none;
  height: var(--distribution-map-height, 100%);
  object-fit: fill;
}
.profile-distribution-image--base { filter: saturate(.88) contrast(1.06) brightness(.93); }
.profile-distribution-image--overlay {
  pointer-events: none;
}
.profile-distribution-missing {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 6px 14px; color: #effdff; background: rgba(3, 42, 63, .78);
  border: 1px solid rgba(196, 243, 245, .42); border-radius: 999px; backdrop-filter: blur(8px);
  font: 500 12px/18px "Atlas Inter", Inter, sans-serif; letter-spacing: .08em; white-space: nowrap;
}
.conservation-scale { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; padding: 18px 14px 16px; }
.conservation-scale span {
  display: grid; place-items: center; min-height: 30px;
  color: rgba(205, 228, 231, .55); border: 1px solid rgba(205, 237, 240, .14); border-radius: 8px;
  font: 600 .66rem/1 "Atlas Mono", monospace; letter-spacing: .06em;
}
.conservation-scale .is-current {
  color: #06333a; background: linear-gradient(135deg, #8fe9da, #62cfc2);
  border-color: transparent; box-shadow: 0 4px 14px rgba(38, 197, 182, .25);
}
.conservation-current { padding: 0 14px 18px; }
.conservation-current p { margin: 0; }
.conservation-status-name { color: #bcd3d8; font-size: 12px; line-height: 1.45; }
.conservation-status-name strong { color: #f4fbff; font-size: 13px; font-weight: 600; }
.conservation-status-description { margin-top: 7px !important; color: #d7e6e9; font-size: 11px; line-height: 1.65; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.profile-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.profile-actions .button img { width: 18px; height: 18px; object-fit: contain; }
.related-species { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(205, 237, 240, .16); }
.related-species > header { margin-bottom: 18px; }
.related-species > header .eyebrow { margin: 0 0 5px; color: #f4d782; font: 500 11px/18px "Atlas Mono", monospace; letter-spacing: .2em; }
.related-species > header h2 { margin: 0; color: #f8fdff; font: 400 2rem/1.2 "Atlas Serif", "Noto Serif SC", serif; }
.related-species-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.related-species-card {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 94px;
  overflow: hidden; padding: 8px; color: #eefbff; text-decoration: none;
  background: rgba(1, 19, 27, .54); border: 1px solid rgba(205, 237, 240, .14); border-radius: 13px;
}
.related-species-card:hover { border-color: rgba(169, 238, 235, .55); transform: translateY(-1px); }
.related-species-card > img { width: 92px; height: 72px; object-fit: cover; border-radius: 9px; }
.related-species-card > .mini-fish { width: 72px; margin: auto; }
.related-species-card > span:last-child { display: grid; min-width: 0; gap: 3px; }
.related-species-card strong, .related-species-card i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-species-card strong { font-size: 13px; }
.related-species-card i { color: #a9eeeb; font-size: 11px; font-weight: 400; }
.fish-card-dialog {
  width: min(610px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; color: #eefbff;
  background: rgba(3, 35, 54, .98); border: 1px solid rgba(192, 242, 245, .4); border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 15, 28, .62);
}
.fish-card-dialog.has-multiple { width: min(1180px, calc(100% - 24px)); }
.fish-card-dialog::backdrop { background: rgba(0, 18, 31, .8); backdrop-filter: blur(6px); }
.fish-card-dialog-inner { position: relative; display: grid; gap: 12px; padding: 12px 12px 16px; }
.fish-card-results { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.fish-card-dialog.has-multiple .fish-card-results { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.fish-card-result { display: grid; gap: 10px; margin: 0; }
.fish-card-dialog.has-multiple .fish-card-result { grid-template-rows: minmax(0, 1fr) auto; }
.fish-card-result figcaption { display: flex; align-items: center; justify-content: center; }
.fish-card-dialog .button { min-height: 40px; padding: .55rem .9rem; }
.fish-card-status { margin: 0; padding: 72px 20px; color: #b7dfe4; font-size: 13px; text-align: center; }
.fish-card-dialog.has-multiple .fish-card-status { padding: 12px 20px; }
.fish-card-preview { display: block; width: min(100%, 560px); height: auto; max-height: calc(100dvh - 118px); margin: 0 auto; object-fit: contain; border-radius: 10px; box-shadow: 0 14px 44px rgba(0, 12, 24, .45); }
.fish-card-dialog.has-multiple .fish-card-preview { width: 100%; height: min(68dvh, 700px); max-height: none; }
.fish-card-preview[hidden] { display: none; }
.fish-card-dialog .fish-card-download { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.fish-card-download svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fish-card-download[aria-disabled="true"], .fish-card-download:disabled { opacity: .45; pointer-events: none; }
.fish-card-quota {
  margin: 0 8px; padding: 12px 16px; border: 1px solid rgba(213, 147, 62, .75);
  border-radius: 10px; background: rgba(1, 24, 42, .92);
}
.fish-card-quota[hidden] { display: none; }
.fish-card-quota-message { margin: 0 0 10px; color: #f2f7f5; font-size: 14px; line-height: 1.6; }
.fish-card-quota-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.fish-card-quota-actions .button { min-height: 38px; padding: .45rem .85rem; font-size: 13px; }
.fact-help { display: inline-grid; place-items: center; width: 1rem; height: 1rem; padding: 0; color: var(--accent); background: transparent; border: 1px solid currentColor; border-radius: 50%; font: 700 .65rem/1 Georgia, serif; }
.fact-help-popover { width: min(22rem, calc(100vw - 2rem)); padding: 1rem 2.5rem 1rem 1rem; color: var(--ink); background: #082a35; border: 1px solid var(--accent); border-radius: 4px; box-shadow: 0 18px 48px rgba(0,0,0,.45); line-height: 1.6; }
.fact-help-popover strong, .fact-help-popover > span { display: block; }
.fact-help-popover strong { margin-bottom: .35rem; color: var(--accent-strong); }
.fact-help-close { position: absolute; top: .35rem; right: .45rem; padding: .2rem .45rem; color: var(--muted); background: transparent; border: 0; font-size: 1.2rem; }
.preview-banner, .notice { margin-bottom: 1.5rem; padding: .8rem 1rem; color: #171307; background: var(--accent-strong); border-radius: 4px; }

.admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.admin-heading h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.admin-heading-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.admin-stat-grid article { display: grid; gap: .25rem; padding: 1.1rem 1.25rem; background: rgba(4,24,32,.7); border: 1px solid var(--line); }
.admin-stat-grid strong { color: var(--accent); font: 400 clamp(1.8rem, 4vw, 3rem)/1 Georgia, serif; }
.admin-stat-grid span { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-search { display: flex; gap: .5rem; max-width: 760px; margin-bottom: 1rem; }
.admin-search input { flex: 1; }
.admin-search select { width: auto; }
.admin-search button, .publish-actions button:not(.button) { padding: .6rem 1rem; color: var(--ink); background: transparent; border: 1px solid var(--line); }
.taxonomy-tree, .taxonomy-orders { display: grid; gap: .75rem; }
.taxonomy-class-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.taxonomy-class, .taxonomy-order { border: 1px solid var(--line); }
.taxonomy-class-link { display: block; padding: .8rem 1rem; color: inherit; text-decoration: none; border: 1px solid var(--line); }
.taxonomy-class-link[aria-current="page"] { border-color: rgba(124, 229, 213, .65); background: rgba(124, 229, 213, .08); }
.taxonomy-class > summary, .taxonomy-order > summary { padding: .8rem 1rem; cursor: pointer; }
.taxonomy-summary { display: flex; align-items: baseline; gap: .75rem; }
.taxonomy-rank, .taxonomy-count { color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.taxonomy-count { margin-left: auto; }
.taxonomy-orders { padding: 0 .75rem .75rem 1.5rem; }
.taxonomy-order .admin-table-wrap { border-width: 1px 0 0; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.admin-table th { color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.admin-table td strong, .admin-table td i, .admin-table td small { display: block; }
.admin-table td i, .admin-table td small { margin-top: .25rem; color: var(--muted); font-size: .7rem; }
.admin-user-table time { white-space: nowrap; }
.admin-empty { color: var(--muted); text-align: center !important; }
.admin-pagination { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }
.admin-pagination a { color: var(--accent); }
.status { display: inline-block; padding: .28rem .5rem; border-radius: 2rem; background: rgba(124,229,213,.12); font-size: .7rem; }
.status-archived { color: #a3aeb0; background: rgba(255,255,255,.07); }
.status-draft, .status-unpublished { color: var(--accent-strong); background: rgba(231,203,120,.1); }
.status-ai-ready { color: var(--accent); }
.status-ai-missing { color: var(--accent-strong); background: rgba(231,203,120,.1); }
.status-pending { color: var(--accent-strong); background: rgba(231,203,120,.1); }
.fish-form fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.4rem; padding: 1.4rem; border: 1px solid var(--line); }
.fish-form legend { padding: 0 .5rem; font: 400 1.15rem Georgia, serif; }
.fish-form label span { color: var(--accent-strong); }
.fish-form .form-field { display: grid; gap: .4rem; color: var(--muted); font-size: .72rem; }
.fish-form .field-label { display: flex; align-items: center; gap: .35rem; color: var(--muted); }
.fish-form .field-label label { display: block; }
.fish-form .fact-help { color: var(--accent); }
.fish-form .wide { grid-column: 1 / -1; }
.fish-form .checkbox { display: flex; flex-direction: row; align-items: center; align-self: end; min-height: 44px; }
.fish-form .checkbox input[type="checkbox"] { width: 18px; min-height: 18px; }
.field-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .76rem; }
.upload-dropzone { place-items: center; padding: 1.2rem; border: 1px dashed rgba(124,229,213,.45); cursor: pointer; transition: background .15s, border-color .15s; }
.upload-dropzone:hover, .upload-dropzone.is-dragging { background: rgba(124,229,213,.08); border-color: var(--accent); }
.upload-dropzone strong { color: var(--ink); font-size: .9rem; }
.upload-dropzone input { max-width: 360px; }
.upload-dropzone small { color: var(--muted); }
.media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.media-list article { overflow: hidden; background: rgba(4,24,32,.7); border: 1px solid var(--line); }
.media-list img { width: 100%; height: 120px; object-fit: cover; }
.media-list p { margin: 0; padding: .65rem; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.media-delete { margin: 0 .65rem .65rem; padding: .45rem .65rem; color: var(--danger); background: transparent; border: 1px solid rgba(255,141,125,.35); }
.form-actions { display: flex; justify-content: flex-end; }
.publish-actions { display: flex; gap: .7rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.publish-actions h2 { margin-right: auto; font: 400 1.5rem Georgia, serif; }
.publish-actions .danger { color: var(--danger); border-color: rgba(255,141,125,.35); }

@media (max-width: 1200px) {
  .profile-information { grid-template-columns: 1fr; }
  .profile-side-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 740px; }
}

@media (max-width: 980px) {
  .atlas-home-hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; }
  .atlas-home-copy h1 { font-size: clamp(3.5rem, 8vw, 4.5rem); }
  .atlas-home-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .atlas-home-stat-grid article:nth-child(2) { border-right: 0; }
  .atlas-home-stat-grid article:nth-child(-n + 2) { border-bottom: 1px solid rgba(211, 248, 250, .18); }
  .atlas-dashboard { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .atlas-distribution { min-height: 500px; border-right: 0; border-bottom: 1px solid var(--line); }
  .catalog-filters { grid-template-columns: repeat(3, 1fr); }
  .search-field { grid-column: span 2; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-order-group { grid-template-columns: 150px 1fr; }
  .catalog-order-list, .family-card-grid { grid-template-columns: 1fr; }
  .fish-form fieldset { grid-template-columns: repeat(2, 1fr); }
  .related-species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .fish-profile article { grid-template-columns: 1fr; }
  .profile-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .profile-photo-image, .profile-placeholder, .profile-ai-visual img { height: 320px; }
  .profile-copy { padding-top: 12px; }
  .profile-information { grid-template-columns: minmax(0, 1fr) 236px; }
  .profile-side-panels { grid-template-columns: 1fr; max-width: none; }
}

@media (max-width: 700px) {
  .fish-card-dialog.has-multiple .fish-card-results { grid-template-columns: 1fr; }
  .fish-card-dialog.has-multiple .fish-card-result { grid-template-rows: auto auto; }
  .fish-card-dialog.has-multiple .fish-card-preview { width: min(100%, 560px); height: auto; max-height: calc(100dvh - 118px); }
  .atlas-home-hero { min-height: auto; }
  .atlas-home-hero::before { right: 14px; left: 14px; }
  .atlas-home-meta { top: 18px; right: 14px; left: 14px; width: auto; font-size: .45rem; letter-spacing: .12em; }
  .atlas-home-hero-inner {
    grid-template-columns: 1fr; gap: 2.5rem; width: calc(100% - 28px); min-height: 0; padding: 5.8rem 0 5rem; transform: none;
  }
  .atlas-home-copy { max-width: none; }
  .atlas-home-kicker { margin-bottom: 1rem; font-size: .56rem; letter-spacing: .2em; }
  .atlas-home-copy h1 { font-size: clamp(3rem, 15vw, 4rem); }
  .atlas-home-specimen { min-width: 0; margin-bottom: 1.35rem; }
  .atlas-home-lead { font-size: .94rem; line-height: 1.75; }
  .atlas-home-cta { min-height: 54px; padding: .9rem 1.35rem; }
  .atlas-home-silhouette { right: -6rem; bottom: 1rem; width: 380px; opacity: .025; }
  .atlas-home-scroll { display: none; }
  .atlas-home-stats-inner { width: calc(100% - 28px); padding: 4rem 0 4.5rem; }
  .atlas-home-stats h2 { margin-bottom: 1.8rem; }
  .atlas-home-stat-grid { gap: 0; border-radius: 14px; }
  .atlas-home-stat-grid article { min-height: 130px; padding: 1rem; }
  .atlas-home-stat-grid strong { font-size: 1.8rem; }
  .atlas-home-stat-grid span { font-size: .82rem; }
  .atlas-home-group-grid { grid-template-columns: 1fr; gap: 0; margin-top: 1rem; border-radius: 14px; }
  .atlas-home-group-grid article { min-height: 0; padding: 1.2rem; }
  .atlas-home-group-grid article:nth-child(odd) { border-right: 0; }
  .atlas-home-group-grid article:not(:last-child) { border-bottom: 1px solid rgba(211, 248, 250, .16); }
  .atlas-quick-search { width: 100%; flex-basis: auto; }
  .atlas-distribution { min-height: 390px; padding: 1.1rem; }
  .atlas-dashboard { border-radius: 16px; }
  .atlas-table-heading, .atlas-class-table a {
    grid-template-columns: 18px 28px minmax(100px, 1fr) repeat(3, 42px); gap: 0;
  }
  .atlas-table-heading, .atlas-class-table a { padding-right: .65rem; padding-left: .65rem; }
  .atlas-table-heading { font-size: .48rem; }
  .atlas-class-name strong { font-size: .78rem; }
  .atlas-class-name i { font-size: .58rem; }
  .atlas-class-index, .atlas-class-stat strong { font-size: .6rem; }
  .atlas-class-stat small { font-size: .52rem; }
  .evolution-legend { gap: .7rem 1rem; }
  .catalog-page .site-header, .explorer-page .site-header, .site-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem;
    width: calc(100% - 28px); height: auto; min-height: 104px; padding: 10px 0;
  }
  .site-header-tools { display: contents; }
  .site-search { grid-row: 2; grid-column: 1 / -1; width: 100%; }
  .site-header nav { grid-row: 1; grid-column: 2; align-items: center; }
  .site-header nav { gap: .8rem; }
  .site-header nav a { font-size: .72rem; }
  .brand { letter-spacing: .08em; }
  .brand-mark { display: none; }
  .ocean-explorer { min-height: 640px; }
  .depth-scale { display: none; }
  .focus-caption { min-width: 120px; padding: .35rem .55rem; }
  .focus-caption strong { font-size: .86rem; }
  .focus-caption i { font-size: .58rem; }
  .explorer-hint { bottom: 6.6rem; font-size: .58rem; letter-spacing: .1em; }
  .relation-buttons {
    top: auto; right: 0; bottom: max(1rem, env(safe-area-inset-bottom)); left: 0;
    display: flex; gap: .65rem; width: auto; height: auto; padding: 1rem; overflow-x: auto;
    pointer-events: auto; scroll-snap-type: x mandatory;
  }
  .relation-buttons button {
    position: relative; top: auto; left: auto; flex: 0 0 auto; transform: none;
    opacity: 1; pointer-events: auto; scroll-snap-align: center;
  }
  .relation-buttons strong { display: none; }
  .relation-buttons button::after { display: none; }
  .fish-dialog[open] { display: block; }
  .dialog-visual { min-height: 220px; }
  .dialog-visual > img { min-height: 220px; }
  .fish-grid, .catalog-grid { grid-template-columns: 1fr; }
  .page-shell { width: min(calc(100% - 28px), var(--max)); padding: 3.2rem 0 5rem; }
  .catalog-shell { width: min(calc(100% - 24px), var(--max)); }
  .catalog-shell[data-catalog-level="classes"] { width: min(calc(100% - 24px), var(--max)); min-height: 0; padding-top: 44px; }
  .catalog-heading, .catalog-taxon-hero { align-items: flex-start; flex-direction: column; }
  .catalog-heading { width: 100%; gap: 1rem; margin-right: 0; margin-left: 0; }
  .catalog-heading h1 { font-size: 3.7rem; }
  .catalog-ambient-fish { display: none; }
  .catalog-insight { align-items: flex-start; width: 100%; margin-right: 0; margin-left: 0; }
  .catalog-insight span { font-size: 1.7rem; }
  .catalog-taxon-hero { gap: 2rem; min-height: 0; padding: 1.5rem; }
  .catalog-taxon-hero h1 { font-size: 3.4rem; }
  .catalog-taxon-stats { gap: 1.8rem; }
  .catalog-taxon-stats div { text-align: left; }
  .catalog-taxon-stats dd { font-size: 1.8rem; }
  .catalog-order-group { grid-template-columns: 1fr; padding: 1rem; }
  .catalog-order-group > header { padding: .2rem 0 .8rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .catalog-order-list { grid-template-columns: 1fr; }
  .catalog-order-card { grid-template-columns: 7px minmax(0, 1fr) 18px; }
  .catalog-order-card small { grid-column: 2; }
  .family-card { grid-template-columns: 1fr; }
  .family-card-visual { min-height: 190px; max-height: 260px; }
  .catalog-family-list-heading { align-items: flex-start; flex-direction: column; }
  .catalog-family-list-heading > p { text-align: left; }
  .taxonomy-shell { width: calc(100% - 16px); padding-top: .5rem; }
  .taxonomy-heading { padding: .45rem .5rem 0; margin-bottom: .55rem; }
  .taxonomy-heading h1 { font-size: clamp(2rem, 11vw, 3.2rem); letter-spacing: .035em; }
  .taxonomy-heading-lead { font-size: .62rem; letter-spacing: .01em; }
  .taxonomy-stage { height: calc(100svh - 210px); min-height: 540px; border-radius: 18px; }
  .catalog-filters, .fish-form fieldset { grid-template-columns: 1fr; }
  .catalog-filters .search-field, .fish-form .wide { grid-column: auto; }
  .fish-detail-page .site-header { width: calc(100% - 28px); height: 68px; }
  .fish-profile { width: calc(100% - 28px); padding: 28px 0 48px; }
  .fish-profile article, .profile-visual, .profile-information { grid-template-columns: 1fr; }
  .profile-photo-image, .profile-placeholder { height: 260px; }
  .profile-ai-visual img { height: 230px; padding-top: 40px; }
  .profile-copy h1 { font-size: clamp(2.65rem, 13vw, 3.3rem); }
  .profile-copy .lead { font-size: 14px; }
  .profile-side-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .related-species-grid { grid-template-columns: 1fr; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
  .admin-heading-actions { justify-content: flex-start; }
  .admin-stat-grid { grid-template-columns: 1fr; }
  .admin-search { align-items: stretch; flex-direction: column; }
  .admin-search select { width: 100%; }
  .publish-actions { align-items: stretch; flex-direction: column; }
  .publish-actions h2 { margin-right: 0; }
}

@media (max-width: 480px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: .6rem;
    min-height: 142px;
  }
  .site-header nav {
    grid-row: 2;
    grid-column: 1;
    justify-content: space-between;
    width: 100%;
  }
  .site-search {
    grid-row: 3;
    grid-column: 1;
  }
  .brand small { display: none; }
  .profile-toolbar { gap: 12px; }
  .fish-card-trigger { min-width: 174px; min-height: 58px; padding-right: 10px; padding-left: 8px; }
  .fish-card-trigger-icon { flex-basis: 34px; width: 34px; }
  .fish-card-trigger-label { font-size: 12px; letter-spacing: .035em; }
  .profile-side-panels { grid-template-columns: 1fr; }
  .profile-facts { grid-template-columns: 1fr; }
  .profile-facts div, .profile-facts div:nth-child(even) { border-right-width: 0; }
  .profile-facts .profile-fact-distribution, .profile-facts .profile-fact-conservation { grid-column: 1; }
}

/* Find a Fish — deep-water search page */
.catalog-search-page {
  --max: 1208px;
  min-height: 100vh;
  background: #041a2c url("/assets/generated/taxonomy-ocean-bg-v1.png") top center / cover fixed no-repeat;
  font-family: "Atlas Inter", Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}
.catalog-search-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  background: rgba(1, 21, 39, .46);
  pointer-events: none;
}
.catalog-search-page .site-header {
  left: 12px;
  width: min(calc(100% - 48px), 1192px);
  height: 74px;
}
.catalog-search-page .catalog-shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 1208px);
  padding: 30px 0 80px;
}
.catalog-search-page .back-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 8px 20px;
  color: rgba(214, 234, 240, .66);
  text-decoration: none;
  font-size: 14px;
}
.catalog-search-page .back-link:hover { color: #f4d782; }
.catalog-search-page .page-intro { margin: 12px 20px 0; }
.catalog-search-page .page-intro .eyebrow {
  margin-bottom: 23px;
  color: #f3cd62;
  font: 700 11px/1 "Atlas Inter", Inter, sans-serif;
  letter-spacing: .24em;
}
.catalog-search-page .page-intro h1 {
  margin: 0;
  color: #f7f5f0;
  font: 600 clamp(48px, 4vw, 60px)/.95 "Atlas Display", "Atlas Serif", serif;
  letter-spacing: .015em;
  text-shadow: 0 2px 18px rgba(0, 11, 26, .36);
}
.catalog-search-page .page-intro > p:last-child {
  margin: 14px 0 0;
  color: rgba(220, 237, 241, .78);
  font-size: 13px;
  line-height: 1.6;
}
.catalog-search-page .catalog-filters {
  display: block;
  margin: 12px 20px 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.catalog-search-primary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 144px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 7px 8px 7px 18px;
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .18);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 8, 14, .35);
  backdrop-filter: blur(14px);
}
.catalog-search-primary:focus-within { border-color: rgba(124, 229, 213, .5); box-shadow: 0 0 0 3px rgba(124, 229, 213, .12), 0 24px 60px rgba(0, 8, 14, .35); }
.catalog-search-primary > img { width: 21px; height: 21px; opacity: .96; }
.catalog-search-primary input {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  color: #f4fbfa;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 15px;
}
.catalog-search-primary input::placeholder { color: rgba(205, 228, 231, .38); }
.catalog-search-primary .button {
  min-height: 46px;
  padding: 0 24px;
  color: #06333a;
  background: linear-gradient(135deg, #8fe9da, #62cfc2);
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(38, 197, 182, .18);
  transition: box-shadow .18s, transform .18s, filter .18s;
}
.catalog-search-primary .button:hover {
  background: linear-gradient(135deg, #aef4e9, #7ce5d5);
  box-shadow: 0 10px 28px rgba(38, 197, 182, .26);
  transform: translateY(-1px);
}
.catalog-filter-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 20px;
  align-items: end;
  margin-top: 18px;
}
.catalog-filter-row label {
  gap: 7px;
  color: rgba(230, 245, 245, .6);
  font: 600 .62rem/1.4 "Atlas Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.catalog-filter-row select {
  min-height: 46px;
  padding: 0 13px;
  color: #eaf9f7;
  background: rgba(1, 19, 27, .55);
  border: 1px solid rgba(205, 237, 240, .18);
  border-radius: 10px;
  outline: 0;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.catalog-filter-row select:focus {
  background: rgba(1, 24, 33, .7);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 229, 213, .12);
}
.catalog-clear-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 0 4px;
  color: #a9dcd9;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  font-size: 13px;
}
.catalog-clear-filters:hover { color: #fff; }
.catalog-results-panel {
  margin-top: 14px;
  padding: 0 0 12px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(9, 44, 57, .88), rgba(4, 26, 36, .94));
  border: 1px solid rgba(181, 236, 229, .16);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 8, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
}
.catalog-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 45px;
  padding: 4px 20px;
  background: rgba(1, 19, 27, .4);
  border-bottom: 1px solid rgba(181, 236, 229, .12);
}
.catalog-results-toolbar .result-count { margin: 0; color: rgba(205, 228, 231, .6); }
.catalog-sort-control { display: flex; grid-template: none; flex-direction: row; gap: 4px; align-items: center; color: rgba(224, 239, 243, .84); font-size: 13px; }
.catalog-sort-control select {
  width: auto;
  min-height: 36px;
  padding: 0 28px 0 3px;
  color: #eaf9f7;
  background-color: transparent;
  border: 0;
  outline: 0;
}
.catalog-search-page .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 14px 0; }
.catalog-search-page .catalog-card {
  transform: none;
}
.catalog-search-page .catalog-card:hover,
.catalog-search-page .catalog-card:focus-visible {
  border-color: rgba(124, 229, 213, .5);
  box-shadow: 0 30px 70px rgba(0, 8, 14, .5);
  transform: translateY(-3px);
}
.catalog-search-page .card-water { height: 180px; }
.catalog-search-page .catalog-card > div:last-child { min-height: 143px; padding: 13px 18px 16px; }
.catalog-search-page .catalog-card-family {
  margin: 0 0 4px;
  color: rgba(205, 228, 231, .5);
  font: 500 10px/1.4 "Atlas Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.catalog-search-page .catalog-card h2 {
  margin: 2px 0 3px;
  color: #f4fbfa;
  font: 400 23px/1.16 "Atlas Serif", "Noto Serif SC", serif;
}
.catalog-search-page .catalog-card i { color: rgba(205, 228, 231, .6); font: italic 14px/1.5 Georgia, "Noto Serif SC", serif; }
.catalog-search-page .catalog-card .status { display: none; }
.catalog-search-page .catalog-card ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 0; }
.catalog-search-page .catalog-card li {
  padding: 5px 10px;
  color: #d8f2ee;
  background: rgba(226, 248, 247, .06);
  border: 1px solid rgba(208, 241, 239, .16);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
}
.catalog-search-page .empty-state { min-height: 320px; padding: 32px 20px; }
.catalog-search-page .pagination { margin: 26px 0 14px; }

@media (max-width: 980px) {
  .catalog-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .catalog-clear-filters { justify-content: flex-start; }
  .catalog-search-page .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .catalog-search-page { background-attachment: scroll; }
  .catalog-search-page .site-header { left: 0; }
  .catalog-search-page .catalog-shell { width: calc(100% - 28px); padding-top: 20px; }
  .catalog-search-page .page-intro { margin-top: 12px; }
  .catalog-search-page .page-intro h1 { font-size: 44px; }
  .catalog-search-primary { grid-template-columns: 24px minmax(0, 1fr); padding: 10px; }
  .catalog-search-primary .button { grid-column: 1 / -1; }
  .catalog-filter-row { grid-template-columns: 1fr; }
  .catalog-search-page .catalog-grid { grid-template-columns: 1fr; }
  .catalog-results-toolbar { align-items: flex-start; flex-direction: column; gap: 2px; padding: 10px 14px; }
  .catalog-search-page .card-water { height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 1.5rem 0 2.2rem;
  color: rgba(205, 228, 231, .66);
  border-top: 1px solid rgba(205, 237, 240, .16);
  font-size: .78rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; }
.site-footer a { color: #b9dcdd; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer p { max-width: 420px; margin: 0; text-align: right; }
.info-shell { max-width: 980px; }
.info-shell .page-intro { max-width: 760px; }
.info-shell .page-intro h1 {
  font: 400 clamp(2rem, 4.2vw, 3.1rem)/1.14 "Atlas Serif", Georgia, "Noto Serif SC", serif;
}
.info-sections {
  counter-reset: info-section;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 3rem 0 2.2rem;
}
.info-sections section {
  counter-increment: info-section;
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .18);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 8, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.info-sections section::before {
  content: counter(info-section, decimal-leading-zero);
  display: block;
  margin-bottom: .8rem;
  color: rgba(124, 229, 213, .55);
  font: 500 .68rem/1 "Atlas Mono", monospace;
  letter-spacing: .3em;
}
.info-sections section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -12%, rgba(124, 229, 213, .08), transparent 46%);
}
.info-sections h2 {
  margin: 0 0 .65rem;
  color: #f4fbfa;
  font: 400 clamp(1.2rem, 2.2vw, 1.45rem)/1.3 "Atlas Serif", Georgia, "Noto Serif SC", serif;
}
.info-sections p { max-width: 760px; margin: 0; color: rgba(211, 233, 234, .72); font-size: .92rem; line-height: 1.85; }
.feedback-shell { max-width: 1180px; }
.feedback-shell .page-intro { max-width: 850px; }
.feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: 1.35rem;
  margin-top: 3rem;
  align-items: start;
}
.feedback-panel, .feedback-guide {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.35rem);
  background: linear-gradient(150deg, rgba(9, 44, 57, .96), rgba(4, 26, 36, .98));
  border: 1px solid rgba(181, 236, 229, .18);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 8, 14, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.feedback-panel::before, .feedback-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 86% -8%, rgba(124, 229, 213, .13), transparent 34%);
}
.feedback-panel > *, .feedback-guide > * { position: relative; }
.feedback-panel-heading {
  margin-bottom: 1.55rem;
  padding-bottom: 1.45rem;
  border-bottom: 1px solid rgba(181, 236, 229, .14);
}
.feedback-panel-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  color: rgba(124, 229, 213, .78);
  font: 500 .68rem/1 "Atlas Mono", monospace;
  letter-spacing: .24em;
}
.feedback-signal {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 13px rgba(124, 229, 213, .8);
}
.feedback-panel-heading h2, .feedback-guide-heading h2 {
  margin: 0;
  color: #f4fbfa;
  font: 400 clamp(1.65rem, 3vw, 2.35rem)/1.16 "Atlas Serif", Georgia, "Noto Serif SC", serif;
}
.feedback-panel-heading > p:last-child {
  max-width: 38ch;
  margin: .85rem 0 0;
  color: rgba(211, 233, 234, .7);
  line-height: 1.7;
}
.feedback-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.feedback-field {
  display: grid;
  min-width: 0;
  gap: .55rem;
}
.feedback-field--wide { grid-column: 1 / -1; }
.feedback-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  color: #eaf9f7;
  font: 600 .7rem/1.35 "Atlas Mono", monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.feedback-field > span small {
  color: rgba(181, 236, 229, .48);
  font: 400 .62rem/1.35 "Atlas Mono", monospace;
  letter-spacing: 0;
  text-transform: none;
}
.feedback-field input, .feedback-field select, .feedback-field textarea {
  width: 100%;
  min-height: 48px;
  padding: .72rem .85rem;
  color: #eaf9f7;
  background: rgba(2, 19, 28, .56);
  border: 1px solid rgba(181, 236, 229, .2);
  border-radius: 9px;
  outline: 0;
  font: 400 .86rem/1.45 "Atlas Sans", system-ui, sans-serif;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.feedback-field textarea { min-height: 170px; resize: vertical; line-height: 1.65; }
.feedback-field input::placeholder, .feedback-field textarea::placeholder { color: rgba(211, 233, 234, .38); }
.feedback-field input:focus, .feedback-field select:focus, .feedback-field textarea:focus {
  background: rgba(2, 22, 31, .8);
  border-color: rgba(124, 229, 213, .78);
  box-shadow: 0 0 0 3px rgba(124, 229, 213, .1);
}
.feedback-field input[readonly] {
  overflow: hidden;
  color: rgba(211, 233, 234, .58);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-field-note, .feedback-counter {
  color: rgba(181, 236, 229, .48);
  font: 400 .68rem/1.45 "Atlas Mono", monospace;
}
.feedback-field-note { margin-top: -.18rem; }
.feedback-counter { justify-self: end; margin-top: -.25rem; }
.feedback-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.cf-turnstile { margin-top: 1.35rem; }
.feedback-submit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.35rem;
}
.feedback-submit-row .button {
  min-height: 50px;
  padding: 0 1.45rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #8fe9da, #62cfc2);
  box-shadow: 0 8px 24px rgba(38, 197, 182, .18);
  transition: box-shadow .18s, transform .18s, filter .18s;
}
.feedback-submit-row .button:hover {
  background: linear-gradient(135deg, #aef4e9, #7ce5d5);
  box-shadow: 0 10px 28px rgba(38, 197, 182, .26);
  transform: translateY(-1px);
}
.feedback-submit-row .button:disabled { cursor: wait; filter: saturate(.4); opacity: .68; transform: none; }
.feedback-status {
  flex: 1;
  min-height: 1.4rem;
  margin: 0;
  color: rgba(211, 233, 234, .66);
  font-size: .75rem;
  line-height: 1.5;
}
.feedback-status.is-error { color: #ffb09f; }
.feedback-success, .feedback-unavailable {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1.35rem;
  padding: .9rem 1rem;
  color: #c8f7eb;
  background: rgba(72, 187, 165, .1);
  border: 1px solid rgba(124, 229, 213, .28);
  border-radius: 10px;
  font-size: .8rem;
  line-height: 1.6;
}
.feedback-unavailable { color: rgba(255, 218, 207, .8); background: rgba(255, 141, 125, .08); border-color: rgba(255, 141, 125, .24); }
.feedback-success::before { content: "✓"; color: var(--accent); font: 700 1rem/1.4 "Atlas Mono", monospace; }
.feedback-unavailable-mark { color: #ff9d8a; font: 500 1.1rem/1.2 "Atlas Mono", monospace; }
.feedback-success p, .feedback-unavailable p { margin-top: 0; margin-bottom: 0; }
.feedback-guide-heading .eyebrow { margin: 0 0 .9rem; }
.feedback-guide-heading h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.feedback-guide .info-sections {
  grid-template-columns: 1fr;
  gap: .8rem;
  margin: 1.7rem 0 0;
}
.feedback-guide .info-sections section {
  padding: 1rem 1.1rem;
  border-radius: 15px;
  box-shadow: none;
}
.feedback-guide .info-sections section::before { margin-bottom: .6rem; font-size: .62rem; }
.feedback-guide .info-sections h2 { font-size: 1.08rem; }
.feedback-guide .info-sections p { font-size: .8rem; line-height: 1.7; }
.feedback-guide-footnote {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  color: rgba(181, 236, 229, .5);
  border-top: 1px solid rgba(181, 236, 229, .14);
  font: 400 .68rem/1.5 "Atlas Mono", monospace;
  letter-spacing: .03em;
}
.info-shell > .button {
  min-height: 50px;
  padding: 0 1.6rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #8fe9da, #62cfc2);
  box-shadow: 0 8px 24px rgba(38, 197, 182, .18);
  font-weight: 700;
  transition: box-shadow .18s, transform .18s, filter .18s;
}
.info-shell > .button:hover {
  background: linear-gradient(135deg, #aef4e9, #7ce5d5);
  box-shadow: 0 10px 28px rgba(38, 197, 182, .26);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .info-sections { grid-template-columns: 1fr; }
  .feedback-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .site-footer { align-items: flex-start; flex-direction: column; width: calc(100% - 28px); }
  .site-footer p { text-align: left; }
  .feedback-fields { grid-template-columns: 1fr; }
  .feedback-field--wide { grid-column: auto; }
  .feedback-panel, .feedback-guide { padding: 1.25rem; border-radius: 17px; }
  .feedback-submit-row { align-items: stretch; flex-direction: column; }
  .feedback-submit-row .button { width: 100%; }
}

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 10%, rgba(33, 132, 145, .2), transparent 34%),
    radial-gradient(circle at 10% 90%, rgba(212, 183, 88, .07), transparent 30%),
    #041b25;
}
.auth-page .account-link { color: #f0d47a; }
.auth-shell {
  display: grid;
  place-items: center;
  width: min(calc(100% - 40px), var(--max));
  min-height: calc(100vh - 155px);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) 0;
}
.auth-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  width: min(100%, 980px);
  min-height: 620px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(9, 44, 57, .92), rgba(4, 26, 36, .96));
  border: 1px solid rgba(181, 236, 229, .18);
  border-radius: 22px;
  box-shadow: 0 40px 110px rgba(0, 8, 14, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.8rem, 4vw, 3rem);
  background:
    linear-gradient(to top, rgba(2, 16, 24, .9) 6%, rgba(2, 16, 24, .28) 52%, rgba(4, 38, 50, .12)),
    url("/assets/ocean-reef.webp") center 30% / cover no-repeat,
    #06303f;
  border-right: 1px solid rgba(181, 236, 229, .14);
}
.auth-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 16%, rgba(194, 247, 241, .14) 30%, transparent 44%),
    linear-gradient(104deg, transparent 42%, rgba(140, 229, 229, .08) 52%, transparent 62%);
  mix-blend-mode: screen;
  animation: auth-rays 11s ease-in-out infinite alternate;
}
@keyframes auth-rays {
  from { transform: translateX(-3%); opacity: .65; }
  to { transform: translateX(3%); opacity: 1; }
}
.auth-aside-inner { position: relative; }
.auth-aside-eyebrow {
  margin: 0 0 .8rem;
  color: var(--accent-strong);
  font: 500 .68rem/1 "Atlas Mono", monospace;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.auth-aside-title {
  margin: 0;
  max-width: 14ch;
  color: #f4fbfa;
  font: 400 clamp(1.9rem, 3.4vw, 2.7rem)/1.16 "Atlas Serif", Georgia, "Noto Serif SC", serif;
  text-shadow: 0 2px 18px rgba(0, 8, 14, .6);
}
.auth-aside-copy {
  margin: 1rem 0 0;
  max-width: 32ch;
  color: rgba(214, 238, 238, .78);
  font-size: .88rem;
  line-height: 1.75;
  text-shadow: 0 1px 10px rgba(0, 8, 14, .55);
}
.auth-depth {
  position: absolute;
  top: 0;
  right: 1.15rem;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 1.5rem 0;
  color: rgba(210, 240, 238, .42);
  font: 500 .58rem/1 "Atlas Mono", monospace;
  letter-spacing: .14em;
  list-style: none;
}
.auth-depth li { position: relative; padding-right: 1.05rem; text-align: right; }
.auth-depth li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: .55rem;
  height: 1px;
  background: rgba(210, 240, 238, .34);
}
.auth-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 4.5vw, 3.25rem);
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -12%, rgba(124, 229, 213, .09), transparent 46%);
}
.auth-card > * { position: relative; }
.auth-card h1 {
  margin: 0;
  color: #f7fbf9;
  font: 400 clamp(1.9rem, 4.5vw, 2.7rem)/1.12 "Atlas Serif", Georgia, "Noto Serif SC", serif;
}
.auth-lead { margin: .9rem 0 2.1rem; color: rgba(211, 233, 234, .7); font-size: .92rem; line-height: 1.7; }
.auth-social, .auth-form { display: grid; gap: .8rem; }
.auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 50px;
  padding: 0 1.1rem;
  color: #eaf9f7;
  background: rgba(226, 248, 247, .05);
  border: 1px solid rgba(208, 241, 239, .16);
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 600;
  transition: background-color .18s, border-color .18s, transform .18s;
}
.auth-provider:hover {
  background: rgba(226, 248, 247, .1);
  border-color: rgba(208, 241, 239, .4);
  transform: translateY(-1px);
}
.auth-provider svg { width: 18px; height: 18px; flex: 0 0 18px; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0; color: rgba(205, 228, 231, .48); font-size: .72rem; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: rgba(205, 237, 240, .13); }
.auth-form label {
  color: rgba(230, 245, 245, .72);
  font: 600 .68rem/1.4 "Atlas Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.auth-field-row { display: grid; gap: .7rem; }
.auth-field-row input {
  min-width: 0;
  min-height: 50px;
  padding: .7rem 1rem;
  color: #f4fbfa;
  background: rgba(1, 19, 27, .55);
  border: 1px solid rgba(205, 237, 240, .18);
  border-radius: 10px;
  outline: 0;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.auth-field-row input::placeholder { color: rgba(205, 228, 231, .38); }
.auth-field-row input:focus {
  background: rgba(1, 24, 33, .7);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 229, 213, .12);
}
.auth-field-row .button {
  min-height: 50px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8fe9da, #62cfc2);
  box-shadow: 0 8px 24px rgba(38, 197, 182, .18);
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
.auth-field-row .button:hover {
  background: linear-gradient(135deg, #aef4e9, #7ce5d5);
  box-shadow: 0 10px 28px rgba(38, 197, 182, .26);
  transform: translateY(-1px);
}
.auth-field-row .button:disabled { opacity: .6; transform: none; }
.auth-code-form { margin-top: 1.15rem; }
.auth-code-form[hidden] { display: none; }
.auth-magic-link {
  display: block;
  margin: 1.2rem auto 0;
  padding: .35rem;
  color: #a9dcd9;
  background: transparent;
  border: 0;
  font-size: .84rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.auth-magic-link:hover { color: #fff; }
.auth-status { min-height: 1.5rem; margin: 1.1rem 0 0; color: #bfe6df; font-size: .82rem; line-height: 1.5; }
.auth-status.is-error { color: #ffab9f; }
.auth-notice {
  margin: 1.5rem 0 0;
  padding: .9rem 1rem;
  color: #cae5e2;
  background: rgba(181, 236, 229, .06);
  border-left: 3px solid rgba(124, 229, 213, .7);
  border-radius: 0 8px 8px 0;
  line-height: 1.6;
}
.auth-notice-error { color: #ffd1c9; border-left-color: var(--danger); }
.account-identity { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.account-identity h1 { font-size: clamp(1.8rem, 6vw, 2.75rem); overflow-wrap: anywhere; }
.account-identity p {
  margin: .35rem 0 0;
  color: rgba(205, 228, 231, .6);
  font: 500 .8rem/1.4 "Atlas Mono", monospace;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.account-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  color: #06333a;
  background: linear-gradient(135deg, #8fe9da, #62cfc2);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(124, 229, 213, .14), 0 10px 26px rgba(38, 197, 182, .22);
  font: 700 1.4rem/1 "Atlas Serif", serif;
}
.auth-sign-out { min-width: 130px; }
.account-card .auth-sign-out {
  align-self: flex-start;
  color: #eaf9f7;
  background: rgba(226, 248, 247, .05);
  border: 1px solid rgba(208, 241, 239, .16);
  border-radius: 10px;
  font-weight: 600;
  transition: background-color .18s, border-color .18s, transform .18s;
}
.account-card .auth-sign-out:hover {
  background: rgba(226, 248, 247, .1);
  border-color: rgba(208, 241, 239, .4);
  transform: translateY(-1px);
}
.account-stage { min-height: 560px; }
.account-card { gap: 0; }
.account-card .auth-lead { margin-top: 1.6rem; }
.account-data-controls {
  margin: 1.5rem 0 1.1rem;
  padding: 1rem;
  background: rgba(255, 151, 132, .05);
  border: 1px solid rgba(255, 171, 159, .2);
  border-radius: 12px;
}
.account-data-controls h2 { margin: 0; color: #f5fbfa; font-size: 1rem; }
.account-data-controls p { margin: .55rem 0 1rem; color: rgba(205, 228, 231, .72); font-size: .84rem; line-height: 1.6; }
.account-clear-data {
  min-height: 42px;
  color: #ffd5ce;
  background: rgba(145, 42, 34, .18);
  border: 1px solid rgba(255, 171, 159, .42);
  border-radius: 10px;
}
.account-clear-data:hover { color: #fff; background: rgba(177, 55, 45, .3); border-color: rgba(255, 190, 180, .72); }
.account-clear-data:disabled { opacity: .58; }
.account-card .auth-sign-out { margin-top: .4rem; }
@media (max-width: 900px) {
  .auth-page .site-header-tools { display: contents; }
  .auth-page .site-header nav { grid-row: 1; grid-column: 2; align-items: center; gap: .8rem; }
  .auth-page .site-header nav a { font-size: .72rem; }
  .auth-stage { grid-template-columns: 1fr; min-height: 0; }
  .auth-aside {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid rgba(181, 236, 229, .14);
  }
  .auth-depth { display: none; }
}
@media (max-width: 560px) {
  .site-header .account-link { max-width: 5.5rem; }
  .auth-page .site-header {
    grid-template-columns: 1fr;
    gap: .6rem;
    min-height: 142px;
  }
  .auth-page .site-header nav {
    grid-row: 2;
    grid-column: 1;
    justify-content: space-between;
    width: 100%;
  }
  .auth-page .site-search {
    grid-row: 3;
    grid-column: 1;
  }
  .auth-shell { width: min(calc(100% - 24px), var(--max)); padding: 2rem 0 4rem; }
  .auth-stage { border-radius: 16px; }
  .auth-aside { min-height: 180px; padding: 1.4rem; }
  .auth-card { padding: 1.4rem; }
  .account-identity { align-items: flex-start; }
  .account-avatar { width: 52px; height: 52px; flex-basis: 52px; }
}