/* Reef — base tokens, the voxel reef scene, shared components, login screen */
:root{
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ink:#2a2015;--ink-2:#3b2f22;--ink-3:#4a3a28;--ink-4:#594838;
  --paper:rgba(242,236,224,.95);--paper-2:rgba(242,236,224,.86);--paper-solid:#f2ece0;--field:#fbf8f2;
  --line:rgba(42,32,21,.12);--line-2:rgba(42,32,21,.2);--line-3:rgba(42,32,21,.34);
  --amber:#c47838;--amber-2:#a8622a;--amber-3:#d9985a;--amber-ink:#2a1a08;--amber-rgb:196,120,56;--amber2-rgb:168,98,42;
  --teal:#0ea5b4;--teal-2:#085660;--teal-3:#7ff7e8;--teal-rgb:14,165,180;
  --coral:#e867b6;--coral-rgb:232,103,182;
  --glass:rgba(6,44,80,.32);--glass-2:rgba(6,44,80,.44);--glass-line:rgba(255,255,255,.28);--cream:#f5f2ea;--cream-2:rgba(245,242,234,.86);
  --row-hover:rgba(14,165,180,.08);
  --r-xl:26px;--r-lg:18px;--r-md:14px;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --bar-h:76px;
  --shadow:0 24px 50px -28px rgba(3,30,60,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{min-height:100%;font:15px/1.5 var(--font-body);color:var(--ink);background:#1f76ae;overflow:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
kbd{display:inline-block;min-width:20px;padding:1px 6px;border-radius:6px;border:1px solid var(--line-2);background:rgba(255,255,255,.7);font:600 11px/1.5 var(--font-body);color:var(--ink-3);text-align:center}
[hidden]{display:none !important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic .fl{fill:currentColor;stroke:none;opacity:.22}
::selection{background:rgba(var(--amber-rgb),.45)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ============================================================ SCENE */
.reef{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;--s:1;--rx:0deg;--ry:0deg;--sy:0px;
  background:linear-gradient(180deg,#8ad6f1 0%,#56bbe6 12%,#2f98d0 30%,#1f76ae 50%,#196294 68%,#165383 84%,#14476f 100%);
  perspective:1400px;perspective-origin:50% 50%}
/* vignette + gentle depth tone: edges fall off into deeper water, centre stays airy */
.reef .tone{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 42%,rgba(8,30,60,0) 45%,rgba(8,30,60,.22) 100%),linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(8,30,60,0) 30%,rgba(8,30,60,.16) 100%)}
/* caustic rings drifting through the whole water column (static tiles, compositor-only drift) */
.reef .rings{position:absolute;left:-200px;top:-200px;width:2000px;height:1400px;opacity:.12;will-change:transform;pointer-events:none;
  background-image:radial-gradient(circle 34px at 50% 50%,rgba(255,255,255,0) 72%,rgba(255,255,255,.9) 79%,rgba(255,255,255,0) 88%),radial-gradient(circle 22px at 50% 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,.8) 79%,rgba(255,255,255,0) 90%);
  background-size:150px 130px,104px 92px;background-position:0 0,50px 30px;animation:ringsDrift 26s linear infinite}
@keyframes ringsDrift{to{transform:translate3d(150px,130px,0)}}
.reef .sil-svg{position:absolute;left:0;top:0;width:1600px;height:1000px;filter:blur(2.5px);opacity:.75}
.reef .blade{position:absolute;overflow:visible;transform-origin:50% 100%;will-change:transform;filter:blur(2px);opacity:.75;animation:bladeSway 12s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes bladeSway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
.reef .breathe{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;animation:breathe 40s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.012)}}
/* second, larger caustic web drifting across the whole water column */
.reef .caustic2{position:absolute;left:-260px;top:-200px;width:2160px;height:1550px;opacity:.09;will-change:transform;pointer-events:none;
  background-image:radial-gradient(ellipse 72px 38px at 50% 50%,rgba(255,255,255,0) 58%,rgba(255,255,255,.9) 64%,rgba(255,255,255,0) 72%);background-size:260px 150px;animation:caustic2 30s linear infinite}
@keyframes caustic2{to{transform:translate3d(260px,150px,0)}}
.reef .trail{position:absolute;width:0;height:0}
.reef .tb{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 2px rgba(255,255,255,.7);opacity:0;will-change:transform,opacity;animation:tbRise var(--dur) linear infinite;animation-delay:var(--delay)}
@keyframes tbRise{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.85}50%{transform:translate3d(var(--x),calc(var(--h) * .5),0)}90%{opacity:.7}100%{transform:translate3d(calc(var(--x) * -.6),var(--h),0);opacity:0}}
.reef .plank{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:rgba(225,247,255,.75);box-shadow:0 0 5px rgba(200,240,255,.7);opacity:.55;will-change:transform;animation:plankDrift var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes plankDrift{to{transform:translate3d(var(--dx),var(--dy),0)}}
.reef.paused *{animation-play-state:paused !important}
.reef .stage{position:absolute;left:calc(50% - 800px);top:calc(100% - 500px - 500px * var(--s) - var(--lift,0px));width:1600px;height:1000px;transform-origin:50% 50%;
  transform:scale(var(--s)) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform}
.reef .layer{position:absolute;inset:0;transform:translate3d(0,calc(var(--sy) * var(--pf,1)),var(--z,0px)) scale(var(--k,1));contain:layout paint;will-change:transform;backface-visibility:hidden}
.reef .layer-far{--pf:.45}
.reef .layer-rays{--pf:.7}
.reef .layer-rays.front{--pf:1.2}
.reef .layer-mid{--pf:1}
.reef .layer-near{--pf:1.55;filter:blur(1.6px) saturate(1.05)}
.reef .vox{position:absolute;left:0;top:0;width:1600px;height:1000px;overflow:visible}
.reef .sprites{position:absolute;inset:0}
.reef .surface{position:absolute;left:-500px;right:-500px;top:-260px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(255,255,255,.34),rgba(255,255,255,0) 62%),
  repeating-linear-gradient(100deg,rgba(255,255,255,0) 0 60px,rgba(255,255,255,.05) 70px 90px,rgba(255,255,255,0) 100px 160px);
  animation:surfaceDrift 16s ease-in-out infinite alternate}
.reef .floor{position:absolute;left:-400px;top:440px;width:2400px;height:720px;
  background:linear-gradient(180deg,rgba(25,98,148,0) 0px,rgba(28,100,148,.85) 48px,#55889a 95px,#9aa58c 150px,#b5ad88 330px,#a49c7a 720px)}
.reef .haze{position:absolute;left:-500px;right:-500px;top:300px;height:280px;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,118,174,0) 0%,rgba(31,118,174,.45) 55%,rgba(28,100,148,.85) 100%)}
/* caustic web: static tiles, moved with a compositor-only transform over one tile period */
.reef .caustic{position:absolute;left:-532px;top:440px;width:2532px;height:766px;opacity:.26;will-change:transform;
  background-image:radial-gradient(ellipse 62px 31px at 50% 50%,rgba(255,255,255,0) 57%,rgba(255,255,255,.95) 63%,rgba(255,255,255,0) 71%),
                   radial-gradient(ellipse 46px 23px at 50% 50%,rgba(220,255,255,0) 55%,rgba(220,255,255,.8) 62%,rgba(220,255,255,0) 70%);
  background-size:132px 66px,98px 50px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 80%,rgba(0,0,0,.5) 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 80%,rgba(0,0,0,.5) 100%);
  animation:caustic 18s linear infinite}
.reef .glow{mix-blend-mode:screen;opacity:.8}
/* fish */
.fish{position:absolute;left:0;top:var(--y);animation:swimR var(--dur) linear infinite;animation-delay:var(--delay);will-change:transform}
.fish.static{animation:none;will-change:auto;top:auto}
.fish.l{animation-name:swimL}
.fish .bob{animation:bob var(--bt) ease-in-out infinite alternate;animation-delay:var(--bd)}
.fish.l .bob{animation-name:bobL}
.fish svg{display:block;filter:drop-shadow(0 7px 6px rgba(5,40,80,.28))}
.fish.l svg{transform:scaleX(-1)}
.fish.soft svg{filter:blur(1.3px) drop-shadow(0 10px 10px rgba(5,40,80,.25))}
.fish .tail{transform-box:fill-box;transform-origin:100% 50%;animation:wag .55s ease-in-out infinite alternate}
.dolphin{position:absolute;left:0;top:0;animation:dolphin 36s linear infinite;will-change:transform}
.dolphin .db{animation:dbob 2.4s ease-in-out infinite alternate}
.dolphin svg{display:block;filter:drop-shadow(0 12px 12px rgba(5,40,80,.3))}
/* bubbles */
.bcol{position:absolute;width:0;height:0}
.bub{position:absolute;left:var(--x);top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);animation:rise var(--dur) linear infinite;animation-delay:var(--delay);will-change:transform,opacity;opacity:0}
.bub .w{width:100%;height:100%;border-radius:50%;animation:wob var(--wt) ease-in-out infinite alternate;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.98) 0 11%,rgba(210,242,255,.55) 32%,rgba(140,210,248,.2) 60%,rgba(70,160,230,.5) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 2px 6px rgba(10,60,120,.18)}
.amb{position:absolute;width:var(--s);height:var(--s);border-radius:50%;opacity:0;animation:ambRise var(--dur) linear infinite;animation-delay:var(--delay);
  background:radial-gradient(circle at 35% 30%,#fff 0 22%,rgba(200,240,255,.6) 52%,rgba(120,200,245,.2) 100%);box-shadow:0 0 0 .5px rgba(255,255,255,.5)}
/* god rays */
.ray{position:absolute;top:-140px;width:var(--w);height:1150px;transform:skewX(var(--sk));transform-origin:50% 0;opacity:var(--o);filter:blur(7px);will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.22) 30%,rgba(255,255,255,.07) 60%,rgba(255,255,255,0) 84%);
  animation:rayDrift var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay)}
.ray.strong{filter:blur(11px)}
/* conduit: CSS 3D cage + core, halo, glyphs */
.conduit{position:absolute;width:0;height:0;perspective:420px;--c:#7ff7e8}
.conduit .halo{position:absolute;left:-140px;top:-140px;width:280px;height:280px;border-radius:50%;animation:haloPulse 3s ease-in-out infinite alternate;
  background:radial-gradient(circle,rgba(200,255,248,.95) 0%,rgba(130,245,235,.5) 20%,rgba(90,210,240,.18) 46%,rgba(80,200,235,0) 70%)}
.conduit .rays{position:absolute;left:-180px;top:-180px;width:360px;height:360px;border-radius:50%;opacity:.85;will-change:transform;animation:spinSlow 14s linear infinite;
  background:repeating-conic-gradient(from 0deg,rgba(200,255,248,0) 0deg 17deg,rgba(200,255,248,.38) 22deg,rgba(200,255,248,0) 27deg 45deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 68%);mask:radial-gradient(circle,#000 8%,transparent 68%)}
.conduit .rays.rays2{left:-230px;top:-230px;width:460px;height:460px;opacity:.45;animation:spinSlow 22s linear infinite reverse}
.conduit .halo{animation-duration:4.5s}
.conduit .cage{position:absolute;left:-27px;top:-27px;width:54px;height:54px;transform-style:preserve-3d;animation:cageSpin 16s linear infinite}
.conduit .cf{position:absolute;inset:0;border:8px solid #62bbab;background:transparent;box-shadow:inset 0 0 0 2px #2f6f64,0 0 0 1px #9ce6d8;backface-visibility:visible}
.conduit .cf .cx{position:absolute;inset:3px;border:2px solid rgba(255,255,255,.4)}
.conduit .cf-f{transform:translateZ(27px)}.conduit .cf-b{transform:rotateY(180deg) translateZ(27px)}
.conduit .cf-l{transform:rotateY(-90deg) translateZ(27px)}.conduit .cf-r{transform:rotateY(90deg) translateZ(27px)}
.conduit .cf-t{transform:rotateX(90deg) translateZ(27px)}.conduit .cf-d{transform:rotateX(-90deg) translateZ(27px)}
.conduit .core{position:absolute;left:-11px;top:-11px;width:22px;height:22px;transform-style:preserve-3d;animation:coreSpin 7s linear infinite reverse}
.conduit .kf{position:absolute;inset:0;background:linear-gradient(135deg,#f2fffd,#86f8ea 45%,#23c4b4);box-shadow:0 0 20px 5px rgba(120,255,235,.95)}
.conduit .kf-f{transform:translateZ(11px)}.conduit .kf-b{transform:rotateY(180deg) translateZ(11px)}
.conduit .kf-l{transform:rotateY(-90deg) translateZ(11px)}.conduit .kf-r{transform:rotateY(90deg) translateZ(11px)}
.conduit .kf-t{transform:rotateX(90deg) translateZ(11px)}.conduit .kf-d{transform:rotateX(-90deg) translateZ(11px)}
.conduit .ring{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:3px solid rgba(200,255,248,.95);opacity:0;box-shadow:0 0 18px rgba(130,255,240,.8)}
.conduit.flash .ring{animation:ringOut .9s var(--ease-out) forwards}
.conduit.flash .ring.r2{animation-delay:.15s}
.conduit.flash .halo{animation:haloFlash .9s ease-out}
.conduit .glyphs{position:absolute;left:0;top:0}
.glyph{position:absolute;left:-6px;top:-10px;font:800 18px/1 var(--font-mono);color:#ffffff;text-shadow:0 0 12px #7ff7e8,0 0 4px #7ff7e8,0 1px 2px rgba(3,40,80,.6);opacity:0;animation:glyphOut var(--t) linear infinite;animation-delay:var(--d)}
/* sparks */
.sparks{position:fixed;z-index:200;pointer-events:none;width:0;height:0}
.sp{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:2px;background:var(--amber);box-shadow:0 0 8px rgba(255,179,64,.9);animation:spark var(--t) cubic-bezier(.2,.7,.3,1) forwards}
.sp.bubble{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(150,230,255,.7) 60%,rgba(80,180,240,.3));box-shadow:0 0 0 1px rgba(255,255,255,.6)}

@keyframes glowPulse{from{opacity:.55}to{opacity:1}}
@keyframes swimR{from{transform:translateX(-220px)}to{transform:translateX(1820px)}}
@keyframes swimL{from{transform:translateX(1820px)}to{transform:translateX(-220px)}}
@keyframes bob{from{transform:translateY(calc(var(--amp) * -1)) rotate(calc(var(--rot) * -1))}to{transform:translateY(var(--amp)) rotate(var(--rot))}}
@keyframes bobL{from{transform:translateY(calc(var(--amp) * -1)) rotate(var(--rot))}to{transform:translateY(var(--amp)) rotate(calc(var(--rot) * -1))}}
@keyframes wag{from{transform:scaleX(1)}to{transform:scaleX(.55)}}
@keyframes dolphin{0%{transform:translate(-340px,610px) rotate(-6deg)}12%{transform:translate(120px,500px) rotate(-18deg)}28%{transform:translate(600px,392px) rotate(-5deg)}44%{transform:translate(1060px,398px) rotate(10deg)}60%{transform:translate(1500px,520px) rotate(18deg)}70%{transform:translate(1920px,660px) rotate(8deg)}100%{transform:translate(1920px,660px) rotate(8deg)}}
@keyframes dbob{from{transform:translateY(-6px) rotate(-2deg)}to{transform:translateY(6px) rotate(2deg)}}
@keyframes rise{0%{transform:translate(0,0) scale(.45);opacity:0}8%{opacity:.95}86%{opacity:.95;transform:translate(var(--wx),-530px) scale(1.05)}100%{transform:translate(var(--wx),-590px) scale(1.5);opacity:0}}
@keyframes wob{from{transform:translateX(-5px) scaleX(.92)}to{transform:translateX(5px) scaleX(1.06)}}
@keyframes ambRise{0%{transform:translate(0,0);opacity:0}10%{opacity:.85}90%{opacity:.7}100%{transform:translate(var(--wx),var(--h));opacity:0}}
@keyframes rayDrift{from{opacity:calc(var(--o) * .5);transform:skewX(var(--sk)) translateX(-34px)}to{opacity:var(--o);transform:skewX(var(--sk)) translateX(34px)}}
@keyframes caustic{to{transform:translate3d(132px,66px,0)}}
@keyframes surfaceDrift{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
@keyframes haloPulse{from{transform:scale(.88);opacity:.75}to{transform:scale(1.12);opacity:1}}
@keyframes haloFlash{0%{transform:scale(1);filter:brightness(1)}30%{transform:scale(1.5);filter:brightness(1.8)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes ringOut{from{transform:scale(.6);opacity:1}to{transform:scale(4.2);opacity:0}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes cageSpin{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(720deg)}}
@keyframes coreSpin{from{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}to{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}
@keyframes glyphOut{0%{transform:rotate(var(--a)) translateX(16px) rotate(calc(var(--a) * -1)) scale(.6);opacity:0}12%{opacity:1}70%{opacity:.85}100%{transform:rotate(var(--a)) translateX(160px) rotate(calc(var(--a) * -1)) scale(1.15);opacity:0}}
@keyframes spark{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* the reef calms down behind the mailbox / console */
body[data-state="inbox"] .reef .layer-near,body[data-state="inbox"] .reef .layer-rays.front,
body.admin-page:not(.locked) .reef .layer-near,body.admin-page:not(.locked) .reef .layer-rays.front{display:none}

/* ---------- lite scene (<= 1024px / reduced motion): CSS gradient + one static voxel vignette ---------- */
.reef.lite{perspective:none;background:linear-gradient(180deg,#8ad6f1 0%,#56bbe6 14%,#2f98d0 34%,#1f76ae 56%,#196294 76%,#165383 100%)}
.reef.lite .rings{left:0;top:0;width:calc(100% + 190px);height:calc(100% + 170px);opacity:.14}
.reef.lite .lite{position:absolute;left:50%;bottom:var(--lite-bottom,0px);width:1000px;height:520px;margin-left:-500px}
.reef.lite .lite::before{content:"";position:absolute;left:50%;bottom:-30px;width:900px;height:240px;margin-left:-450px;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(184,169,122,.5),rgba(184,169,122,0) 70%)}
@media (max-width:768px){.reef.lite{--lite-bottom:220px}}
@media (min-width:769px) and (max-width:1024px){.reef.lite{--lite-bottom:160px}}
body[data-state="inbox"] .reef.lite,body.admin-page:not(.locked) .reef.lite{--lite-bottom:0px}
.reef.lite .layer{position:absolute;inset:auto 0 0 0;height:520px;transform:none;contain:none}
.reef.lite .vox{width:1000px;height:520px;left:0;top:auto;bottom:0}
.reef.lite .sprites{position:absolute;inset:0}
.reef.lite .fish.litefish{animation:swimRLite var(--dur) linear infinite;animation-delay:var(--delay)}
.reef.lite .fish.litefish.l{animation-name:swimLLite}
@keyframes swimRLite{from{transform:translateX(-160px)}to{transform:translateX(1160px)}}
@keyframes swimLLite{from{transform:translateX(1160px)}to{transform:translateX(-160px)}}
.reef.lite .caustic2{left:0;top:0;width:calc(100% + 260px);height:calc(100% + 150px);opacity:.08}
.reef.lite .blade{opacity:.55}
.reef.lite .tone{background:radial-gradient(ellipse 90% 70% at 50% 40%,rgba(8,30,60,0) 50%,rgba(8,30,60,.2) 100%)}
.reef.lite .lite::before{background:radial-gradient(ellipse at 50% 50%,rgba(150,160,130,.45),rgba(150,160,130,0) 70%)}

/* ============================================================ BOOT */
.boot-glow{position:fixed;inset:0;z-index:40;display:grid;place-items:center;pointer-events:none;transition:opacity .45s}
.boot-glow.hide{opacity:0}
.boot-glow i{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(150,230,255,.8) 55%,rgba(80,180,240,.4));box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 14px rgba(127,247,232,.8);animation:bootRise 1.4s ease-in-out infinite}
.boot-glow i:nth-child(2){animation-delay:.2s;margin-left:-40px}.boot-glow i:nth-child(3){animation-delay:.4s;margin-left:40px}
@keyframes bootRise{0%,100%{transform:translateY(10px) scale(.7);opacity:.3}50%{transform:translateY(-10px) scale(1);opacity:1}}
body[data-state="login"] .boot-glow,body[data-state="inbox"] .boot-glow{display:none}

/* ============================================================ SCREENS + ENTRANCE */
.screen{position:fixed;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s;-webkit-overflow-scrolling:touch}
.screen.on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.enter-item{opacity:0}
.enter .enter-item{animation:floatUp .8s var(--ease-out) both;animation-delay:calc(var(--d,400) * 1ms)}
@keyframes floatUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
/* opacity-only entrance for chrome that hosts position:fixed children (the language sheet) — a transform would become their containing block */
.enter-fade{opacity:0}
.enter .enter-fade{animation:fadeIn .7s var(--ease-out) both;animation-delay:calc(var(--d,400) * 1ms)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.shake{animation:shake .5s var(--ease-out)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* ============================================================ TOPBAR + BRAND (conduit mark only, no wordmark) */
.topbar{display:flex;align-items:center;gap:14px;padding:18px clamp(16px,4vw,40px);position:relative;z-index:2}
.brand{display:inline-flex;flex:none;align-items:center;gap:11px;color:var(--cream)}
.btn-ghost.glassy,.lang,.key-chip,.bench-tag{flex:none}
.brand .mark{width:38px;height:38px;border-radius:11px;display:block;filter:drop-shadow(0 8px 18px rgba(127,247,232,.5))}
.screen-login .topbar .brand{opacity:0}
.screen-login.enter .topbar .brand{animation:floatUp .8s var(--ease-out) .2s both}
.topbar .spacer,.app-header .spacer{flex:1}
.top-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--cream-2);padding:0 12px;min-height:38px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ============================================================ BUTTONS / FIELDS */
.rp{position:relative;overflow:hidden;isolation:isolate}
.rip{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);background:radial-gradient(circle,rgba(14,165,180,.35) 0%,rgba(14,165,180,.15) 40%,rgba(14,165,180,0) 70%);animation:rip .7s var(--ease-out) forwards;z-index:0}
@keyframes rip{to{transform:scale(2.6);opacity:0}}
.icon-btn{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--cream);background:var(--glass);border:1px solid var(--glass-line);overflow:hidden;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .35s var(--ease-spring),background .3s,border-color .3s,color .3s,box-shadow .3s}
.icon-btn .ic{width:19px;height:19px}
.icon-btn:hover{transform:translateY(-1px) scale(1.04);border-color:rgba(255,255,255,.5);box-shadow:0 10px 24px -14px rgba(127,247,232,.8)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.light{color:var(--ink-3);background:rgba(255,255,255,.75);border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.icon-btn.light:hover{color:var(--ink);border-color:var(--line-2)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:14px;font-weight:600;font-size:15px;color:var(--amber-ink);
  background:linear-gradient(135deg,var(--amber-3),var(--amber) 48%,var(--amber-2));
  box-shadow:0 14px 30px -12px rgba(var(--amber2-rgb),.75),0 0 0 1px rgba(255,255,255,.45) inset,0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .35s var(--ease-spring),box-shadow .35s,filter .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease-out);z-index:1;pointer-events:none}
.btn:hover{transform:translateY(-2px) scale(1.02);filter:saturate(1.1) brightness(1.04);box-shadow:0 18px 36px -12px rgba(var(--amber2-rgb),.85),0 0 30px -6px rgba(var(--amber-rgb),.7),0 0 0 1px rgba(255,255,255,.5) inset}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.btn:disabled{cursor:default;opacity:.85}
.btn .lbl{position:relative;z-index:2;transition:opacity .25s,transform .35s var(--ease-out)}
.btn .ic{position:relative;z-index:2;width:18px;height:18px}
.btn .rip{background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,.25) 40%,rgba(255,255,255,0) 70%)}
.btn-block{width:100%}
.btn-sm{min-height:40px;padding:0 16px;border-radius:12px;font-size:14px}
.btn.loading .lbl,.btn.loading .ic{opacity:0;transform:translateY(6px)}
.wave-loader{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;gap:7px}
.btn.loading .wave-loader{display:flex}
.wave-loader i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.6));box-shadow:0 0 10px rgba(255,255,255,.9);opacity:.3;animation:blink 1s ease-in-out infinite}
.wave-loader i:nth-child(2){animation-delay:.17s}.wave-loader i:nth-child(3){animation-delay:.34s}
@keyframes blink{0%,100%{opacity:.3;transform:translateY(2px)}50%{opacity:1;transform:translateY(-2px)}}
.btn-ghost{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:12px;font-weight:500;font-size:14px;color:var(--ink-2);border:1px solid var(--line-2);background:rgba(255,255,255,.72);
  transition:transform .35s var(--ease-spring),background .3s,border-color .3s,color .3s,box-shadow .3s}
.btn-ghost .ic{width:17px;height:17px}
.btn-ghost:hover{color:var(--ink);border-color:var(--line-3);transform:translateY(-1px) scale(1.02);box-shadow:0 10px 24px -16px rgba(3,40,80,.5)}
.btn-ghost:active{transform:scale(.97)}
.btn-ghost:disabled{opacity:.6;cursor:default}
.btn-ghost.xs{min-height:34px;padding:0 11px;font-size:13px;border-radius:10px}
.btn-ghost.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn-ghost.danger:hover,.btn-ghost.btn-danger:hover{color:#8a2f2f;border-color:rgba(200,80,80,.4);background:rgba(255,235,235,.9)}
.btn-ghost.glassy{color:var(--cream);border-color:var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost.glassy:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.field{margin-bottom:16px}
.field-label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin:0 0 7px 2px}
.field-wrap{position:relative}
.input{width:100%;min-height:50px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .3s,box-shadow .3s,background .3s;box-shadow:0 1px 2px rgba(3,40,80,.05) inset}
.input::placeholder{color:var(--ink-4)}
.input.has-toggle{padding-right:48px}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.field-wrap::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--teal-3));transform:scaleX(0);transition:transform .4s var(--ease-out);pointer-events:none}
.field-wrap:focus-within::after{transform:scaleX(1)}
.field-wrap:focus-within .input,.input:focus{border-color:rgba(var(--teal-rgb),.7);box-shadow:0 0 0 4px rgba(var(--teal-rgb),.16),0 12px 30px -18px rgba(var(--teal-rgb),.5)}
.toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);transition:color .3s,background .3s}
.toggle:hover{color:var(--ink);background:rgba(var(--teal-rgb),.12)}
.toggle .ic{width:18px;height:18px;position:absolute;transition:opacity .25s,transform .35s var(--ease-spring)}
.toggle .ic-off{opacity:0;transform:scale(.6)}
.toggle.show .ic-on{opacity:0;transform:scale(.6)}.toggle.show .ic-off{opacity:1;transform:scale(1)}
.login-err{min-height:20px;margin-top:12px;font-size:13.5px;color:#b23a3a;text-align:center}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:8px}

/* ============================================================ GLASS PANELS (prismarine glass) */
.paper{position:relative;background:linear-gradient(160deg,rgba(242,236,224,.95),rgba(238,231,218,.94));border:1px solid rgba(255,250,240,.7);border-radius:var(--r-xl);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.75),inset -1px 0 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(90,50,20,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.paper > *{position:relative}
/* static warm rim (the rotating conic rim was a per-frame repaint) */
.paper .spot{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:conic-gradient(from 220deg,rgba(255,255,255,0) 0 64%,rgba(255,220,170,.7) 76%,rgba(255,255,255,0) 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* ============================================================ LOGIN */
.screen-login{display:flex;flex-direction:column}
.login-stage{flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,440px);gap:clamp(28px,6vw,96px);align-items:center;padding:8px clamp(16px,5vw,72px) 48px;width:100%;max-width:1480px;margin:0 auto}
.hero{position:relative;min-width:0;color:#0b2a4a}
.hero::before{content:"";position:absolute;left:-30%;top:-40%;width:160%;height:180%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 42% 50%,rgba(205,238,252,.55),rgba(205,238,252,.3) 32%,rgba(205,238,252,.1) 50%,rgba(205,238,252,0) 62%)}
.hero-status{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:#dffcf7;padding:8px 14px 8px 10px;border-radius:99px;border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:24px;--d:300}
.ping{position:relative;width:9px;height:9px;border-radius:50%;background:var(--teal-3);box-shadow:0 0 10px var(--teal-3)}
.ping::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--teal-3);animation:ping 1.8s var(--ease-out) infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.hero-title{font-family:var(--font-display);font-weight:500;font-size:clamp(46px,7vw,96px);line-height:1.02;letter-spacing:-.018em;margin:0 0 24px;max-width:13ch;font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 1;color:#0b2a4a;text-shadow:0 1px 0 rgba(255,255,255,.35),0 10px 30px rgba(120,210,245,.35)}
.hero-title .w{display:inline-block;opacity:0;will-change:transform,opacity}
.enter .hero-title .w{animation:wordUp .9s var(--ease-out) both;animation-delay:calc(360ms + var(--i) * 95ms)}
@keyframes wordUp{from{opacity:0;transform:translate3d(0,34px,0) rotate(1.2deg)}to{opacity:1;transform:none}}
.hero-title .key{position:relative;color:#0a5f8c;font-style:italic;font-weight:400}
.hero-title .key .swash{position:absolute;left:-2%;right:-2%;bottom:-.06em;height:.26em;width:104%;overflow:visible}
.hero-title .key .swash path{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;filter:drop-shadow(0 0 8px rgba(255,179,64,.7))}
.enter .hero-title .key .swash path{animation:drawSwash 1.1s var(--ease-out) 1.25s both}
@keyframes drawSwash{to{stroke-dashoffset:0}}
.hero-sub{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#133b60;max-width:46ch;margin-bottom:26px;--d:860;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.hero-sub .lead{display:block;font-weight:600;color:#0b2a4a;margin-bottom:4px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.hero-tags span{font-size:13px;padding:7px 13px;border-radius:99px;border:1px solid var(--glass-line);background:var(--glass);color:#eaf8ff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .35s var(--ease-spring),border-color .3s}
.hero-tags span:hover{transform:translateY(-2px);border-color:rgba(255,179,64,.7)}
.login-card{padding:32px 30px 26px;--d:520}
.card-title{font-family:var(--font-display);font-variation-settings:"opsz" 36,"SOFT" 40;font-size:30px;font-weight:560;letter-spacing:-.014em;color:var(--ink);margin-bottom:4px}
.card-sub{font-size:14px;color:var(--ink-3);margin-bottom:22px}
.card-mark{position:absolute;right:22px;top:22px;width:40px;height:40px;opacity:.9;filter:drop-shadow(0 6px 14px rgba(14,165,180,.4))}
.login-foot{margin-top:16px;text-align:center;font-size:13px;color:var(--ink-3)}
.login-foot kbd{margin:0 2px}

/* ============================================================ LANGUAGE PICKER */
.lang{position:relative;z-index:6}
.lang-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 9px 0 11px;border-radius:12px;color:var(--cream);border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13.5px;font-weight:500;white-space:nowrap;transition:border-color .3s,transform .35s var(--ease-spring),box-shadow .3s}
.lang-btn:hover{border-color:rgba(255,255,255,.5);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(127,247,232,.8)}
.lang-btn .ic{width:17px;height:17px}
.lang-btn .chev{width:14px;height:14px;opacity:.8;transition:transform .3s}
.lang.open .lang-btn .chev{transform:rotate(180deg)}
.lang-sheet{position:absolute;right:0;top:calc(100% + 8px);min-width:232px;padding:8px;border-radius:16px;color:var(--ink);background:rgba(250,243,230,.96);border:1px solid rgba(255,250,240,.9);box-shadow:var(--shadow),0 0 0 1px rgba(214,178,120,.22) inset;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .22s,transform .35s var(--ease-spring),visibility 0s linear .22s}
.lang.open .lang-sheet{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .35s var(--ease-spring),visibility 0s}
.lang-head{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:6px 10px 8px}
.lang-list{display:grid;gap:2px;max-height:min(62vh,440px);overflow-y:auto}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;text-align:left;font-size:14px;color:var(--ink-2);transition:background .25s,color .25s}
.lang-opt:hover{background:var(--row-hover);color:var(--ink)}
.lang-opt .ln{flex:1}
.lang-opt .lc{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-4)}
.lang-opt .ck{width:16px;height:16px;color:var(--teal-2);opacity:0}
.lang-opt[aria-selected="true"]{background:linear-gradient(135deg,rgba(var(--amber-rgb),.26),rgba(var(--amber-rgb),.12));color:var(--ink);font-weight:600}
.lang-opt[aria-selected="true"] .ck{opacity:1}
.lang-bg{position:fixed;inset:0;z-index:1;display:none;background:transparent}
.lang-bg.on{display:block}
@media (max-width:768px){
  .app-header .lang-btn .lang-name{display:none}
  .app-header .lang-btn{padding:0 8px 0 10px}
  .lang-sheet{position:fixed;left:16px;right:16px;top:auto;bottom:max(16px,env(safe-area-inset-bottom));min-width:0;padding:10px;border-radius:20px;transform:translateY(20px);transform-origin:bottom center}
  .lang.open .lang-sheet{transform:none}
  .lang-bg{background:rgba(5,40,90,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
}

/* ============================================================ TOAST */
.toast{position:fixed;left:50%;bottom:26px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;color:var(--ink);font-size:14px;font-weight:500;
  background:rgba(250,243,230,.94);border:1px solid rgba(255,250,240,.9);box-shadow:0 20px 40px -20px rgba(3,40,80,.6),0 0 0 1px rgba(214,178,120,.25) inset;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .45s var(--ease-spring),opacity .3s;max-width:calc(100vw - 32px)}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast .ic{width:18px;height:18px;color:var(--teal-2)}
.toast .ic-err{display:none}
.toast.err{border-color:rgba(200,80,80,.5)}
.toast.err .ic-ok{display:none}
.toast.err .ic-err{display:block;color:#c04545}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .login-stage{grid-template-columns:1fr;gap:30px;align-items:start;padding-top:8px}
  .hero-title{max-width:none}
  .login-card{max-width:520px}
}
@media (max-width:768px){
  :root{--bar-h:64px}
  .topbar{padding:14px 16px}
  .login-stage{padding:4px 16px 28px}
  .hero-status{margin-bottom:18px}
  .hero-title{font-size:clamp(44px,13vw,70px);margin-bottom:18px}
  .hero-sub{margin-bottom:18px}
  .login-card{max-width:none;padding:24px 20px 20px}
}
/* Zero-Lag Performance Optimizations across all screen sizes */
.paper,.lang-sheet,.toast,.icon-btn,.lang-btn,.btn-ghost.glassy,.hero-status,.hero-tags span,.top-status,.bench-tag,.key-chip,.user-chip,.col-header{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.paper{background:#f2ece0 !important}
.lang-sheet{background:#f4eee2 !important}
.toast{background:#f4eee2 !important}
.reef,
.reef *,
.reef *::before,
.reef *::after{
  animation:none !important;
  transition:none !important;
}
.fish, .dolphin{
  display:none !important;
}
body[data-state="inbox"] .reef,
body.admin-page:not(.locked) .reef{
  display:none !important;
}
@media (prefers-reduced-motion:reduce){
  .reef *,.enter-item,.enter-fade,.hero-title .w,.paper .spot,.ping::after{animation:none !important;transition:none !important}
  .enter-item,.enter-fade,.hero-title .w,.screen-login .topbar .brand{opacity:1 !important}
  .hero-title .key .swash path{stroke-dashoffset:0}
}