/* ===========================================================================
   Liquid Glass design system (2026) — frosted translucent panels over a living
   mesh-gradient backdrop. Catppuccin Mocha palette. Performant everywhere:
   backdrop-filter blur+saturate + specular highlights (no SVG displacement, so
   it works in Firefox/Safari too, per the "use sparingly" guidance).
   =========================================================================== */
:root{
  --bg:#0c0c14; --crust:#11111b; --mantle:#181825; --surface:#313244;
  --surface2:#45475a; --text:#cdd6f4; --sub:#a6adc8; --muted:#7f849c;
  --lav:#b4befe; --blue:#89b4fa; --sapphire:#74c7ec; --mauve:#cba6f7;
  --pink:#f5c2e7; --green:#a6e3a1; --teal:#94e2d5; --peach:#fab387;
  --yellow:#f9e2af; --red:#f38ba8;
  /* dark frosted glass — opaque enough for readable text, still blurs the backdrop */
  --glass-bg:linear-gradient(150deg,rgba(26,26,42,.82),rgba(17,17,27,.74));
  --glass-brd:rgba(205,214,244,.12);
  --glass-shadow:0 10px 40px rgba(0,0,0,.5);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.2);
  --r:18px;
  --blur:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);background:var(--bg);color-scheme:dark;
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* dark dropdown lists (Chromium honours option bg) — consistent with the glass UI */
select{color-scheme:dark}
select option,select optgroup{background:#1b1b2b;color:#cdd6f4}
select option:checked{background:#45475a}

/* --- living mesh backdrop --- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(120% 120% at 50% 0%,#1a1a2e 0%,#0c0c14 55%,#08080e 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.22;
  mix-blend-mode:screen;will-change:transform}
.b1{width:46vw;height:46vw;left:-8vw;top:-10vw;background:var(--mauve);animation:float 26s ease-in-out infinite}
.b2{width:42vw;height:42vw;right:-8vw;top:-6vw;background:var(--blue);animation:float 32s ease-in-out infinite reverse}
.b3{width:48vw;height:48vw;left:18vw;bottom:-18vw;background:var(--teal);animation:float 30s ease-in-out infinite}
.b4{width:34vw;height:34vw;right:6vw;bottom:-10vw;background:var(--pink);animation:float 24s ease-in-out infinite reverse}
@keyframes float{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(7vw,5vh) scale(1.18)}
  100%{transform:translate(-4vw,3vh) scale(.92)}
}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- glass surface utility --- */
.glass{background:var(--glass-bg);backdrop-filter:blur(var(--blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(165%);
  border:1px solid var(--glass-brd);border-radius:var(--r);
  box-shadow:var(--glass-shadow),var(--glass-inset)}

/* --- top navigation --- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:12px 22px;margin:0;border-radius:0 0 var(--r) var(--r);
  border-left:0;border-right:0;border-top:0}
.brand{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand span{background:linear-gradient(90deg,var(--mauve),var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}
.navlinks{display:flex;gap:6px}
.navlinks a{padding:7px 14px;border-radius:11px;color:var(--sub);font-weight:600;font-size:13px;
  transition:all .18s ease}
.navlinks a:hover{color:var(--text);background:rgba(205,214,244,.08);text-decoration:none}
.navlinks a.active{color:var(--crust);background:linear-gradient(135deg,var(--lav),var(--blue));
  box-shadow:0 4px 14px rgba(137,180,250,.35)}
.nav-extra{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;text-align:right}
.navbtn{padding:7px 12px;border-radius:11px;border:1px solid var(--glass-brd);
  background:rgba(205,214,244,.06);color:var(--sub);font-weight:600;font-size:12px;cursor:pointer;
  transition:all .15s ease}
.navbtn:hover{color:var(--text);background:rgba(205,214,244,.12)}
.navbtn.on{color:var(--crust);background:linear-gradient(135deg,var(--green),var(--teal));border-color:transparent}

/* --- modal --- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,14,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:20px;
  animation:fade .2s ease}
.modal.hidden{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{width:min(520px,100%);padding:24px;max-height:85vh;overflow:auto;
  animation:pop .25s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-box h3{margin:0 0 8px;font-size:18px}
.modal-box .hint{color:var(--muted);font-size:12px;margin:0 0 14px;line-height:1.5}
.modal-actions{display:flex;gap:8px;margin-top:16px}

@media(max-width:560px){
  .nav{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .brand{font-size:17px}
  .navlinks a{padding:6px 11px}
  .nav-extra{margin-left:0;width:100%;order:3;justify-content:flex-start;flex-wrap:wrap}
  .navbtn{padding:6px 10px}
  #stats{display:none}
  .modal-box{width:100%}
}

.build-tag{position:fixed;bottom:4px;right:7px;font-size:9px;color:var(--muted);opacity:.4;
  z-index:1;pointer-events:none;font-family:monospace}

@media(prefers-reduced-motion:reduce){.blob{animation:none}}