/* ==========================================================================
   Root theme tokens
   ========================================================================== */

:root{
  --bg-deep:#060b12;
  --bg-ocean:#0d1721;
  --bg-shelf:#162632;
  --bg-panel:rgba(12,21,29,.9);
  --bg-panel-strong:rgba(10,18,25,.96);
  --bg-glass:rgba(96,238,255,.035);
  --bg-glass-strong:rgba(96,238,255,.06);
  --bg-wave:rgba(96,238,255,.08);
  --text-pearl:#f5f3e9;
  --text-seafoam:#b9f6f4;
  --text-muted:#98a9b4;
  --text-deep:#d7d7cb;
  --accent-blue:#5de9ff;
  --accent-seafoam:#88fff5;
  --accent-coral:#ff8f80;
  --accent-sand:#e3c67d;
  --accent-foam:#dffdf9;
  --border-glass:rgba(93,233,255,.22);
  --border-soft:rgba(227,198,125,.16);
  --shadow-depth:0 32px 90px rgba(0,3,8,.64);
  --shadow-panel:0 20px 44px rgba(0,0,0,.42);
  --glow-sonar:0 0 32px rgba(93,233,255,.22);
  --glow-foam:0 0 18px rgba(227,198,125,.14);
  --radius-panel:22px;
  --radius-control:14px;
  --radius-pill:999px;
  --space-1:.35rem;
  --space-2:.55rem;
  --space-3:.8rem;
  --space-4:1rem;
  --space-5:1.4rem;
  --space-6:1.8rem;
  --space-7:2.6rem;
  --font-ui:Inter,system-ui,sans-serif;
  --font-display:"Exo 2",Inter,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --speed-wave:24s;
  --speed-pulse:2.8s;
  --speed-sweep:7s;
  --speed-card:.45s;

  /* existing variable aliases used by markup/scripts */
  --deep:var(--bg-deep);
  --ocean:var(--bg-ocean);
  --panel:var(--bg-panel);
  --teal:var(--accent-blue);
  --glow:var(--accent-blue);
  --cyan:var(--accent-seafoam);
  --bright:var(--accent-foam);
  --silver:var(--text-deep);
  --dim:var(--text-muted);
  --text:var(--text-pearl);
  --red:var(--accent-coral);
  --gold:var(--accent-sand);
  --core:#52d7ff;
  --open:#7ef0d1;
  --osint:#ff9b8f;
  --regional:#f7c67b;
  --meta:#a9b2ff;
  --obscure:#b9a7ff;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{scroll-behavior:smooth}
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at top, rgba(93,233,255,.12), transparent 32%),
    radial-gradient(circle at 18% 12%, rgba(227,198,125,.12), transparent 22%),
    radial-gradient(circle at 50% 24%, rgba(136,255,245,.06), transparent 28%),
    linear-gradient(180deg, #1b232b 0%, var(--bg-shelf) 16%, var(--bg-ocean) 38%, var(--bg-deep) 100%);
  color:var(--text-pearl);
  font-family:var(--font-ui);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

body::before{
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(255,255,255,.035) 24.3%, transparent 24.6%),
    linear-gradient(0deg, transparent 0 19%, rgba(227,198,125,.05) 19.2%, transparent 19.4%),
    linear-gradient(135deg, transparent 0 46%, rgba(93,233,255,.03) 48%, transparent 50%);
  background-size:160px 160px, 160px 160px, 220px 220px;
  opacity:.22;
}

body::after{
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.06), transparent 16%),
    radial-gradient(circle at 75% 18%, rgba(94,234,212,.08), transparent 18%),
    radial-gradient(circle at 50% 80%, rgba(255,138,122,.05), transparent 18%);
  mix-blend-mode:screen;
}

img,svg{display:block;max-width:100%}
button,input,select{font:inherit}
a{color:var(--accent-foam);text-decoration-thickness:.08em;text-underline-offset:.16em}
a:hover{color:var(--text-pearl)}
button{border:0;background:none}
code,pre{font-family:var(--font-mono)}

:focus-visible{
  outline:2px solid var(--accent-seafoam);
  outline-offset:3px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

#bg,#scanlines,#bubbles{
  position:fixed;
  inset:0;
  pointer-events:none;
}

#bg{
  z-index:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(93,233,255,.16), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(227,198,125,.08), transparent 32%);
  overflow:hidden;
}

#bg::before,
#bg::after{
  content:"";
  position:absolute;
  inset:-12%;
}

#bg::before{
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 75% 35%, rgba(94,234,212,.08), transparent 20%),
    linear-gradient(180deg, transparent 0 34%, rgba(231,215,177,.07) 34.5%, transparent 35%);
  animation:wave-shift var(--speed-wave) linear infinite;
}

#bg::after{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px),
    radial-gradient(circle at center, rgba(56,189,248,.06), transparent 58%);
  opacity:.55;
}

#scanlines{
  z-index:1;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(94,234,212,.07) 14.2%, transparent 14.4%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  opacity:.4;
}

#bubbles{
  z-index:2;
  overflow:hidden;
}

.bubble{
  position:absolute;
  bottom:-3rem;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(239,250,255,.45), rgba(56,189,248,.08) 52%, transparent 78%);
  border:1px solid rgba(169,243,231,.18);
  box-shadow:0 0 18px rgba(56,189,248,.08);
  animation:float-up linear infinite;
}

.fish{display:none}

#app{
  position:relative;
  z-index:10;
  width:min(1280px,calc(100% - 1.4rem));
  margin:0 auto;
  padding:1.4rem 0 6rem;
}

.panel,
#loading,
#results-section{
  position:relative;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.panel,
#loading{
  width:100%;
  border:1px solid var(--border-glass);
  border-radius:var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(227,198,125,.08), rgba(227,198,125,0) 24%),
    linear-gradient(180deg, rgba(105,247,255,.03), rgba(105,247,255,.01)),
    var(--bg-panel-strong);
  box-shadow:
    var(--shadow-depth),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(227,198,125,.08),
    inset 0 -22px 50px rgba(12,56,68,.18);
}

.panel{
  overflow:hidden;
  padding:clamp(1rem,1.8vw,1.45rem);
}

.panel::before,
#loading::before,
#results-section::before,
.site-header::before,
details::before,
.quickstart-item::before,
.card::after,
.results-brief::before{
  pointer-events:none;
}

@media (min-width: 1120px){
  .panel{
    padding:1rem 1.2rem 1.3rem;
  }
  .site-header{
    padding:1.1rem 1.25rem .9rem;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:var(--space-5);
  align-items:flex-end;
  margin-bottom:var(--space-6);
  padding:var(--space-5) var(--space-5) var(--space-4);
  border:1px solid var(--border-soft);
  border-radius:calc(var(--radius-panel) + 6px);
  background:
    linear-gradient(120deg, rgba(227,198,125,.12), transparent 28%),
    linear-gradient(160deg, rgba(105,247,255,.04), transparent 48%),
    rgba(18,27,35,.82);
  box-shadow:
    var(--shadow-panel),
    inset 0 0 0 1px rgba(227,198,125,.08),
    inset 0 -16px 30px rgba(0,0,0,.18);
  overflow:hidden;
}

.site-header::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(227,198,125,.16);
  border-radius:calc(var(--radius-panel) + 2px);
  background:
    linear-gradient(90deg, transparent 0 3%, rgba(227,198,125,.12) 4%, transparent 5%, transparent 95%, rgba(93,233,255,.12) 96%, transparent 97%);
}

.site-header::after{
  content:"";
  position:absolute;
  inset:-40% auto -30% 62%;
  width:40%;
  background:linear-gradient(90deg, transparent, rgba(239,250,255,.08), transparent);
  transform:rotate(18deg);
  animation:lighthouse-sweep var(--speed-sweep) ease-in-out infinite;
}

.brand-grid{
  display:flex;
  gap:var(--space-5);
  align-items:center;
}

.brand-mark{
  position:relative;
  width:92px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6,43,68,.75), rgba(3,24,38,.3));
  border:1px solid rgba(169,243,231,.24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), var(--glow-sonar);
  flex-shrink:0;
  overflow:hidden;
}

.brand-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:drop-shadow(0 0 22px rgba(56,189,248,.2));
}

.brand-copy{display:grid;gap:.35rem}

.brand-glyphs{
  display:flex;
  gap:.55rem;
  color:var(--accent-sand);
  font-size:.88rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.brand-glyphs span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.6rem;
  height:1.6rem;
  border-radius:50%;
  border:1px solid rgba(227,198,125,.28);
  background:rgba(227,198,125,.08);
  box-shadow:0 0 0 1px rgba(93,233,255,.06) inset;
}

.logo{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--text-pearl);
  text-shadow:0 0 20px rgba(56,189,248,.28);
}

.tagline{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.6vw,1.3rem);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-sand);
}

.brand-note{
  margin:0;
  max-width:42rem;
  color:var(--text-deep);
  font-size:1rem;
}

.header-status{
  display:grid;
  gap:.45rem;
  justify-items:end;
  text-align:right;
}

.header-kicker{
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem 1rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(227,198,125,.26);
  background:linear-gradient(180deg, rgba(227,198,125,.1), rgba(93,233,255,.05));
  color:var(--accent-foam);
  font-family:var(--font-display);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.status-pill::before{
  content:"";
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  background:var(--accent-seafoam);
  box-shadow:0 0 0 6px rgba(227,198,125,.12);
}

/* ==========================================================================
   Search controls
   ========================================================================== */

.panel-hdr{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-4);
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid rgba(169,243,231,.14);
  color:var(--text-muted);
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.panel-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.35rem;
  margin-right:.35rem;
  color:var(--accent-sand);
}

#conn-wrap{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .8rem;
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg, rgba(227,198,125,.08), rgba(255,255,255,.03));
  border:1px solid rgba(227,198,125,.16);
}

.dot{
  width:.72rem;
  height:.72rem;
  border-radius:50%;
  background:var(--accent-coral);
  box-shadow:0 0 0 6px rgba(255,138,122,.12);
  animation:beacon 2.4s ease-in-out infinite;
}

.dot.on{
  background:var(--accent-seafoam);
  box-shadow:0 0 0 6px rgba(94,234,212,.12);
  animation:none;
}

.dot.standalone{
  background:var(--accent-blue);
  box-shadow:0 0 0 6px rgba(56,189,248,.12);
  animation:none;
}

#conn-lbl{
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-pearl);
}

#eng-bar{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:var(--space-4);
  color:var(--accent-foam);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#eng-bar::before{
  content:"CURRENTS";
  display:inline-flex;
  align-items:center;
  padding:.18rem .52rem;
  border-radius:var(--radius-pill);
  background:rgba(94,234,212,.1);
  border:1px solid rgba(94,234,212,.2);
  color:var(--accent-seafoam);
  font-size:.66rem;
}

.quickstart-card{
  margin-bottom:var(--space-5);
  padding:var(--space-4);
  border-radius:calc(var(--radius-panel) - 6px);
  border:1px solid var(--border-soft);
  background:
    linear-gradient(180deg, rgba(227,198,125,.08), rgba(227,198,125,0) 28%),
    linear-gradient(180deg, rgba(105,247,255,.03), transparent 65%),
    rgba(18,27,35,.78);
  box-shadow:inset 0 0 0 1px rgba(227,198,125,.06);
}

.quickstart-hdr{
  margin-bottom:var(--space-3);
  color:var(--accent-sand);
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.quickstart-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-3);
}

.quickstart-item{
  position:relative;
  min-height:100%;
  padding:var(--space-4);
  border-radius:18px;
  border:1px solid rgba(227,198,125,.18);
  background:
    linear-gradient(180deg, rgba(93,233,255,.05), rgba(93,233,255,0) 38%),
    rgba(20,30,38,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.quickstart-item::after{
  content:"";
  position:absolute;
  inset:auto 1rem 1rem;
  height:1px;
  background:linear-gradient(90deg, rgba(94,234,212,.5), transparent);
}

.quickstart-item strong{
  display:block;
  margin-bottom:.45rem;
  color:var(--text-pearl);
  font-family:var(--font-display);
  font-size:.98rem;
  letter-spacing:.08em;
}

.quickstart-item p{
  margin:0 0 .95rem;
  color:var(--text-deep);
  font-size:.95rem;
}

.quickstart-actions{display:flex;gap:.55rem;flex-wrap:wrap}

.search-shell{
  position:relative;
  margin-bottom:var(--space-5);
  padding:var(--space-5) var(--space-4) var(--space-4);
  border-radius:calc(var(--radius-panel) - 2px);
  border:1px solid rgba(227,198,125,.18);
  background:
    radial-gradient(circle at 20% 30%, rgba(93,233,255,.12), transparent 30%),
    radial-gradient(circle at 78% 30%, rgba(227,198,125,.12), transparent 32%),
    rgba(11,20,28,.86);
  overflow:hidden;
}

.search-sonar{
  position:absolute;
  inset:-20% auto auto 50%;
  width:24rem;
  height:24rem;
  transform:translateX(-50%);
  opacity:.8;
  pointer-events:none;
}

.search-sonar span{
  position:absolute;
  inset:50%;
  width:2rem;
  height:2rem;
  margin:-1rem;
  border-radius:50%;
  border:1px solid rgba(169,243,231,.18);
  animation:sonar-pulse var(--speed-pulse) ease-out infinite;
}

.search-sonar span:nth-child(2){animation-delay:.8s}
.search-sonar span:nth-child(3){animation-delay:1.6s}

.search-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
}

.search-row input,
.mode-wrap select,
#endpoint,
.key-item input{
  width:100%;
  border:1px solid rgba(227,198,125,.24);
  border-radius:var(--radius-control);
  background:
    linear-gradient(180deg, rgba(227,198,125,.08), rgba(227,198,125,0) 22%),
    linear-gradient(180deg, rgba(105,247,255,.04), rgba(105,247,255,.015)),
    rgba(8,15,22,.9);
  color:var(--text-pearl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(93,233,255,.05);
}

.search-row input{
  min-height:4.2rem;
  padding:1rem 1.15rem;
  font-size:1.08rem;
  font-weight:500;
  letter-spacing:.01em;
  transition:border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.search-row input::placeholder{color:rgba(215,237,246,.56)}
.search-row input:focus{
  border-color:rgba(94,234,212,.72);
  box-shadow:var(--glow-sonar), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.search-guidance{
  position:relative;
  z-index:1;
  margin-top:var(--space-3);
  color:var(--text-muted);
  font-size:.88rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:3.5rem;
  padding:.85rem 1.4rem;
  border:1px solid rgba(227,198,125,.34);
  border-radius:var(--radius-control);
  background:
    linear-gradient(180deg, rgba(227,198,125,.24), rgba(227,198,125,.08) 42%, rgba(93,233,255,.08)),
    rgba(10,19,26,.94);
  color:var(--text-pearl);
  font-family:var(--font-display);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:var(--glow-foam), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(93,233,255,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(93,233,255,.52);
  box-shadow:0 18px 34px rgba(0,10,18,.24), 0 0 0 1px rgba(227,198,125,.18), var(--glow-sonar);
}

.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-sm{min-height:2.5rem;padding:.6rem .95rem;font-size:.74rem}

/* ==========================================================================
   Filters
   ========================================================================== */

.opts-row{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  align-items:center;
  margin-bottom:var(--space-5);
}

.control-label{
  display:block;
  margin-bottom:.3rem;
  color:var(--text-muted);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.mode-wrap{
  min-width:180px;
}

.mode-wrap select{
  min-height:3rem;
  padding:.8rem 1rem;
  appearance:none;
}

.opts-row label{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:3rem;
  padding:.7rem 1rem;
  border:1px solid rgba(169,243,231,.16);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04);
  color:var(--text-deep);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.opts-row label:hover{
  transform:translateY(-1px);
  border-color:rgba(94,234,212,.36);
}

.opts-row input[type=checkbox]{
  width:1rem;
  height:1rem;
  accent-color:var(--accent-seafoam);
}

.opts-row label:has(input:checked){
  border-color:rgba(94,234,212,.42);
  background:linear-gradient(180deg, rgba(94,234,212,.14), rgba(56,189,248,.08));
  color:var(--text-pearl);
  box-shadow:0 0 0 1px rgba(94,234,212,.08);
}

/* ==========================================================================
   Results + panels
   ========================================================================== */

details{
  margin-bottom:var(--space-4);
  position:relative;
  border:1px solid rgba(227,198,125,.18);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(227,198,125,.06), rgba(227,198,125,0) 18%),
    rgba(16,24,32,.8);
  overflow:hidden;
}

details::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(93,233,255,.08);
  border-radius:12px;
}

summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:1rem 1.15rem;
  list-style:none;
  cursor:pointer;
  color:var(--text-pearl);
  font-family:var(--font-display);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

summary::-webkit-details-marker{display:none}
summary::after{
  content:"⟁";
  color:var(--accent-sand);
  transition:transform .24s ease;
}

details[open] summary::after{transform:rotate(180deg)}
details>div{padding:0 1.15rem 1rem;border-top:1px solid rgba(169,243,231,.1)}

.keys-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-3);
}

.key-item label{
  display:block;
  margin-bottom:.35rem;
  color:var(--text-muted);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.key-item input,
#endpoint{
  min-height:2.8rem;
  padding:.75rem .9rem;
}

.key-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--space-3)}

#src-status-wrap{margin-top:var(--space-3)}

.src-status{
  border-radius:18px;
  background:rgba(16,24,32,.76);
}

.src-status summary{
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--text-deep);
}

.src-status .src-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .7rem;
  padding-top:.5rem;
}

.src-status .src-ok,
.src-status .src-empty,
.src-status .src-fail{
  display:inline-flex;
  align-items:center;
  padding:.4rem .65rem;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
}

.src-status .src-ok{color:var(--accent-seafoam)}
.src-status .src-empty{color:var(--text-muted)}
.src-status .src-fail{color:var(--accent-coral)}

.err{
  display:none;
  margin-top:var(--space-4);
  padding:1rem 1.1rem;
  border-radius:18px;
  border:1px solid rgba(255,138,122,.32);
  background:
    linear-gradient(135deg, rgba(255,138,122,.18), rgba(255,255,255,0) 70%),
    rgba(41,18,20,.54);
  color:#ffd9d3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

#loading{
  display:none;
  margin-top:var(--space-5);
  padding:var(--space-7) var(--space-5);
  text-align:center;
}

.sonar{
  position:relative;
  width:88px;
  height:88px;
  margin:0 auto var(--space-4);
  border-radius:50%;
  border:1px solid rgba(169,243,231,.35);
  background:radial-gradient(circle, rgba(56,189,248,.18), rgba(56,189,248,.02) 60%, transparent 62%);
  box-shadow:var(--glow-sonar);
}

.sonar::before,
.sonar::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  border:1px solid rgba(169,243,231,.22);
}

.sonar::after{
  inset:-10px;
  background:conic-gradient(from 240deg, rgba(94,234,212,.45), transparent 84deg);
  border:none;
  filter:blur(4px);
  animation:sonar-spin 2.4s linear infinite;
}

#loading p{
  margin:0 0 var(--space-3);
  color:var(--accent-foam);
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.progress-wrap{margin-top:var(--space-4)}
.progress-counter{
  color:var(--accent-seafoam);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.progress-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem .6rem;
  margin-top:var(--space-3);
}

.progress-grid span{
  display:inline-flex;
  align-items:center;
  min-height:2rem;
  padding:.38rem .7rem;
  border-radius:var(--radius-pill);
  background:rgba(3,16,27,.82);
  font-size:.76rem;
}

.pg-pending{color:var(--text-muted);opacity:.55}
.pg-ok{color:var(--accent-seafoam)}
.pg-empty{color:var(--accent-sand)}
.pg-fail{color:var(--accent-coral)}

#results-section{
  width:100%;
  margin-top:var(--space-5);
}

.res-hdr{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
  padding:0 0 .75rem;
  border-bottom:1px solid rgba(169,243,231,.12);
  color:var(--text-muted);
  font-family:var(--font-display);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

#res-count{color:var(--accent-foam)}

.export-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-bottom:var(--space-3);
}

.results-brief{
  margin-bottom:var(--space-4);
  position:relative;
  padding:1rem 1.1rem;
  border-radius:18px;
  border:1px solid rgba(227,198,125,.16);
  background:
    linear-gradient(135deg, rgba(227,198,125,.08), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(93,233,255,.06), rgba(255,255,255,0) 65%),
    rgba(12,21,29,.82);
  color:var(--text-deep);
}

.results-brief::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(93,233,255,.08);
  border-radius:12px;
}

.results-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin:0 0 var(--space-3);
}

.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:2.15rem;
  padding:.45rem .75rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(105,247,255,.16);
  background:rgba(2,14,24,.78);
  color:var(--text-muted);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.meta-pill strong{
  color:var(--accent-foam);
  font-weight:700;
}

.cluster{
  margin-bottom:var(--space-3);
  padding:1rem 1.1rem;
  border-radius:18px;
  border:1px solid rgba(255,138,122,.26);
  background:rgba(255,138,122,.06);
}

.cluster-hdr{
  margin-bottom:.45rem;
  color:#ffd6ce;
  font-family:var(--font-display);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.card{
  position:relative;
  margin-bottom:var(--space-3);
  padding:1.2rem 1.25rem;
  border-radius:20px;
  border:1px solid rgba(227,198,125,.18);
  background:
    linear-gradient(180deg, rgba(227,198,125,.08), rgba(227,198,125,0) 16%),
    linear-gradient(180deg, rgba(105,247,255,.025), rgba(105,247,255,.01)),
    rgba(11,19,27,.94);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(105,247,255,.03),
    inset 0 0 0 1px rgba(93,233,255,.05);
  overflow:hidden;
  animation:card-rise var(--speed-card) ease both;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease, backdrop-filter .35s ease;
}

.card[data-openable=true]{cursor:pointer}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 0 58%, rgba(105,247,255,.05) 60%, transparent 66%);
  opacity:0;
  transition:opacity .2s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:2px;
  background:linear-gradient(90deg, rgba(227,198,125,.55), rgba(93,233,255,.2), transparent);
}

.card:hover{
  transform:translateY(-2px);
  border-color:rgba(93,233,255,.42);
  box-shadow:0 28px 48px rgba(0,8,16,.35), 0 0 0 1px rgba(227,198,125,.14), var(--glow-sonar);
  backdrop-filter:blur(18px);
  filter:saturate(1.08);
}

.tree-list,
.consensus-list{
  display:grid;
  gap:.75rem;
}

.tree-item,
.consensus-item{
  padding:.85rem .95rem;
  border-radius:16px;
  border:1px solid rgba(169,243,231,.16);
  background:rgba(2,14,24,.56);
}

.tree-item strong,
.consensus-item strong{
  color:var(--text-pearl);
}

.card:hover::before{opacity:1}

.card-top{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:flex-start;
}

.card-title{
  flex:1;
  min-width:min(100%,18rem);
  font-size:1.08rem;
  font-weight:700;
}

.card-title a{
  color:var(--text-pearl);
  text-decoration:none;
}

.card-title a:hover{
  color:var(--accent-foam);
  text-decoration:underline;
}

.badge,
.score,
.state-tag,
.card-url,
.card-seen,
.tag{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.badge,
.score{
  padding:.42rem .72rem;
  border-radius:var(--radius-pill);
  border:1px solid currentColor;
}

.state-tag{
  padding:.42rem .68rem;
  border-radius:var(--radius-pill);
  border:1px solid currentColor;
}

.badge::before{content:"SOURCE"}
.score::before{content:"SIGNAL"}
.score{color:var(--accent-seafoam)}

.b-core{color:var(--core);background:rgba(82,215,255,.08)}
.b-open{color:var(--open);background:rgba(126,240,209,.08)}
.b-osint{color:var(--osint);background:rgba(255,155,143,.08)}
.b-regional{color:var(--regional);background:rgba(247,198,123,.08)}
.b-meta{color:var(--meta);background:rgba(169,178,255,.08)}
.b-obscure{color:var(--obscure);background:rgba(185,167,255,.08)}
.b-wayback{color:var(--gold);background:rgba(231,215,177,.08)}
.b-social{color:var(--accent-blue);background:rgba(56,189,248,.08)}

.state-live{color:var(--accent-seafoam);background:rgba(105,247,255,.08)}
.state-archived{color:var(--accent-sand);background:rgba(215,201,162,.08)}
.state-gated{color:#b6a7ff;background:rgba(182,167,255,.08)}
.state-inferred{color:#8dc8ff;background:rgba(141,200,255,.08)}

.card-snip{
  margin-top:.9rem;
  color:var(--text-deep);
  font-size:.96rem;
}

.card-url,
.card-seen{
  margin-top:.75rem;
  color:var(--text-muted);
}

.card-url{word-break:break-all}
.card-url::before{content:"TRACE";color:var(--accent-sand)}
.card-seen::before{content:"CURRENTS";color:var(--accent-seafoam)}
.card-seen span{color:var(--accent-foam)}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.85rem;
}

.tag{
  padding:.34rem .62rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(169,243,231,.16);
  background:rgba(3,16,27,.82);
  color:var(--text-deep);
}

.no-results{
  position:relative;
  padding:2.5rem 1.2rem 2rem;
  border-radius:20px;
  border:1px solid rgba(105,247,255,.12);
  background:rgba(2,14,24,.66);
  text-align:center;
}

.nr-sonar{
  position:relative;
  width:10px;
  height:10px;
  margin:0 auto .85rem;
  border-radius:50%;
  background:var(--accent-seafoam);
  box-shadow:0 0 12px rgba(105,247,255,.45);
}

.nr-sonar::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(105,247,255,.18);
  animation:sonar-pulse 2.8s ease-out infinite;
}

.no-results .nr-hdr{
  margin-bottom:.5rem;
  color:var(--accent-sand);
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.no-results .nr-copy{
  margin:0 0 1rem;
  color:var(--text-muted);
  font-size:.95rem;
}

.no-results .nr-tips{
  display:inline-grid;
  gap:.55rem;
  margin:0;
  padding:0;
  list-style:none;
  text-align:left;
  color:var(--text-deep);
}

.no-results .nr-tips li::before{
  content:"◦";
  margin-right:.55rem;
  color:var(--accent-seafoam);
}

.history-list{
  display:grid;
  gap:.45rem;
  max-height:220px;
  overflow:auto;
  padding-top:.75rem;
}

.hist-item{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  align-items:center;
  padding:.75rem .85rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(169,243,231,.08);
}

.hist-query{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--accent-foam);
  font-weight:600;
  cursor:pointer;
}

.hist-query:hover{text-decoration:underline}
.hist-meta{color:var(--text-muted);font-size:.78rem}
.hist-clear{color:var(--accent-coral);cursor:pointer;font-weight:700}

/* ==========================================================================
   States
   ========================================================================== */

body[data-status="typing"] #status-text{color:var(--accent-blue)}
body[data-status="searching"] #status-text{color:var(--accent-seafoam)}
body[data-status="searching"] .search-sonar span{animation-duration:1.6s}
body[data-status="results"] #status-text{color:var(--accent-foam)}
body[data-status="empty"] #status-text{color:var(--accent-sand)}
body[data-status="error"] #status-text{color:#ffd9d3}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes wave-shift{
  from{transform:translate3d(-2%,0,0)}
  50%{transform:translate3d(2%,1.5%,0)}
  to{transform:translate3d(-2%,0,0)}
}

@keyframes float-up{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.7}
  100%{transform:translate3d(2rem,-110vh,0);opacity:0}
}

@keyframes sonar-pulse{
  0%{transform:scale(.2);opacity:0}
  12%{opacity:.55}
  100%{transform:scale(9);opacity:0}
}

@keyframes sonar-spin{
  to{transform:rotate(360deg)}
}

@keyframes beacon{
  0%,100%{opacity:1}
  50%{opacity:.28}
}

@keyframes lighthouse-sweep{
  0%,100%{transform:translateX(-14%) rotate(18deg);opacity:0}
  50%{transform:translateX(10%) rotate(18deg);opacity:1}
}

@keyframes card-rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ==========================================================================
   Footer / status strip
   ========================================================================== */

footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  gap:var(--space-4);
  align-items:center;
  padding:.8rem 1.2rem;
  border-top:1px solid rgba(169,243,231,.16);
  background:
    linear-gradient(90deg, rgba(239,250,255,.04), transparent 50%),
    rgba(2,16,26,.92);
  color:var(--text-muted);
  backdrop-filter:blur(14px);
}

footer .fl{
  color:var(--text-deep);
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ==========================================================================
   Responsive rules
   ========================================================================== */

@media (max-width:960px){
  .site-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .header-status{justify-items:start;text-align:left}
}

@media (max-width:720px){
  #app{width:min(100% - 1rem,1120px);padding-top:1rem}
  .panel{padding:1rem}
  .brand-grid{align-items:flex-start}
  .brand-mark{width:72px}
  .search-row{grid-template-columns:1fr}
  .btn{width:100%}
  .opts-row{gap:.65rem}
  .opts-row label,
  .mode-wrap{width:100%}
  .opts-row label{justify-content:flex-start}
  .res-hdr,
  footer{flex-direction:column;align-items:flex-start}
  footer{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
}

@media (max-width:520px){
  .logo{letter-spacing:.16em}
  .search-guidance{font-size:.76rem}
  .card{padding:1rem}
  .card-top{flex-direction:column;align-items:stretch}
  .badge,.score{justify-content:center}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

  body::before,
  body::after,
  #bg::before,
  #bg::after,
  .search-sonar span,
  .dot,
  .sonar::after,
  .no-results::before,
  .site-header::after{animation:none !important}
}