@font-face{font-family:Inter;src:url(inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
[hidden]{display:none!important}
@font-face{font-family:Fraunces;src:url(fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#1F2A44;--green:#2E7D6B;--cream:#F6F1E7;--card:#fff;--line:#E2DCCD;--muted:#6b7280;--red:#B4443A;--amber:#B7791F;--bg:#F6F1E7}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#E9ECF2;--card:#1B2233;--bg:#111726;--line:#2B3448;--muted:#98A2B3;--cream:#111726}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Inter,system-ui,sans-serif}
h1,h2,h3{font-family:Fraunces,Georgia,serif;letter-spacing:-.01em;margin:0 0 .4em}
h2{font-size:28px}
a{color:var(--green)}
.btn{font:600 15px Inter;border:0;border-radius:12px;padding:12px 18px;cursor:pointer;background:var(--line);color:var(--ink)}
.btn.primary{background:var(--green);color:#fff}.btn.danger{background:var(--red);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line)}.btn.small{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.5}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.err{color:var(--red)}.muted{color:var(--muted)}
.mark{width:54px;height:54px;border-radius:14px;background:var(--ink);color:var(--cream);display:grid;place-items:center;font:700 22px Fraunces,serif}
@media (prefers-color-scheme:dark){.mark{background:var(--green);color:#fff}}
.mark.sm{width:34px;height:34px;font-size:15px;border-radius:10px}
#login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login{width:min(380px,100%);display:grid;gap:14px}
.login label{display:grid;gap:6px;font-weight:600;font-size:14px}
input,textarea{font:16px Inter;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-size:17px}
#nav{display:flex;gap:4px;flex:1;overflow-x:auto}
#nav a{padding:8px 14px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:600;white-space:nowrap}
#nav a.on{background:var(--bg);color:var(--green)}
.badge{background:var(--red);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;margin-left:6px}
main{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.tabs button{font:600 14px Inter;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:20px;padding:7px 14px;cursor:pointer}
.tabs button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.prod{padding:0;overflow:hidden;display:flex;flex-direction:column}
.prod .hero{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--line);cursor:zoom-in}
.thumbs{display:flex;gap:6px;padding:8px 12px 0;overflow-x:auto}
.thumbs img{width:64px;height:48px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;flex:none}
.thumbs img.on{border-color:var(--green)}
.pb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.pt{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pt h3{font-size:20px;margin:0}
.price{font:700 20px Fraunces,serif;white-space:nowrap}
.chip{display:inline-block;font:600 12px Inter;border-radius:20px;padding:3px 10px;background:var(--line);color:var(--ink)}
.chip.waiting{background:#FDE9C9;color:#7A4B0B}.chip.accepted{background:#D6EFE7;color:#1D5A4C}.chip.declined{background:#F6D5D1;color:#7E2A22}.chip.live{background:var(--green);color:#fff}
details summary{cursor:pointer;color:var(--green);font-weight:600;font-size:14px}
.desc{font-size:14px;white-space:pre-wrap;margin-top:8px}
.acts{display:flex;gap:10px;margin-top:auto;padding-top:6px}
.acts .btn{flex:1}
.reason{background:var(--bg);border-radius:10px;padding:10px 12px;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.stat b{display:block;font:700 28px Fraunces,serif}
.stat span{color:var(--muted);font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
td.n,th.n{text-align:right}
.ev{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.ev time{color:var(--muted);white-space:nowrap;min-width:118px}
.note{border-left:4px solid var(--amber);padding:10px 14px;background:var(--card);border-radius:8px;margin-bottom:16px;font-size:14px}
.empty{text-align:center;padding:40px 10px;color:var(--muted)}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:20;padding:10px}
#lightbox img{max-width:100%;max-height:100%;border-radius:8px}
@media (max-width:560px){.top{gap:8px}#logout{margin-left:auto}#nav{order:3;flex-basis:100%}h2{font-size:24px}.grid{grid-template-columns:1fr}}

main.term{max-width:none;padding:0}
.termwrap{display:flex;flex-direction:column;height:calc(100dvh - 58px);background:#0f1522}
@media (max-width:560px){.termwrap{height:calc(100dvh - 100px)}}
.termbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.pill{font:600 12px Inter;border-radius:20px;padding:3px 10px;background:#D6EFE7;color:#1F2A44}
.termbox{flex:1;min-height:0;position:relative}
#term{position:absolute;inset:0;padding:6px 4px 0 8px;touch-action:none}
.live{position:absolute;right:12px;bottom:12px}
.copyview{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column}
.copyview pre{flex:1;overflow:auto;margin:0;padding:12px;font:13px ui-monospace,Menlo,monospace;white-space:pre-wrap;user-select:text}
.compose{display:flex;gap:8px;padding:8px;background:var(--card);border-top:1px solid var(--line);align-items:flex-end}
.compose textarea{flex:1;resize:none;max-height:120px}
.keys{display:flex;gap:4px;padding:4px 8px 8px;background:var(--card);overflow-x:auto}
.keys button{font:600 13px Inter;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 10px;flex:none}

.todo{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);border-left:5px solid var(--amber)}
.todo b{font:700 34px Fraunces,serif}.todo em{font-style:normal;color:var(--green);font-weight:700}
.todo.done{border-left-color:var(--green)}
.rv{max-width:620px;margin:0 auto}
.rvtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rvimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;cursor:pointer;background:var(--line)}
.rvdots{display:flex;gap:6px;justify-content:center;margin-top:8px}.rvdots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.rvdots i.on{background:var(--green)}
.rvacts{display:flex;gap:12px;margin:14px 0 8px;position:sticky;bottom:10px}
.btn.big{flex:1;padding:18px;font-size:18px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.12)}

/* ---------- immersive brain theme ---------- */
:root,:root:not([data-theme=light]){--ink:#E9ECF2;--card:rgba(20,28,46,.78);--bg:#0b1020;--line:rgba(143,184,255,.18);--muted:#98A2B3;--cream:#0b1020;--green:#7FD1B9}
html,body{background:radial-gradient(ellipse at 50% 40%,#16213a 0%,#0b1020 60%,#070a14 100%) fixed;color:var(--ink)}
#brain3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
#app{position:relative;z-index:2}
#login{position:relative;z-index:3}
.top{background:rgba(11,16,32,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#nav a{color:#98A2B3}#nav a.on{background:rgba(127,209,185,.14);color:#7FD1B9}
.card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.btn{background:rgba(255,255,255,.08);color:var(--ink)}.btn.primary{background:#2E7D6B;color:#fff}.btn.ghost{border-color:var(--line)}
input,textarea{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line)}
.tabs button{background:rgba(20,28,46,.7);color:var(--ink);border-color:var(--line)}.tabs button.on{background:#E9ECF2;color:#0b1020}
.mark{background:#2E7D6B;color:#fff}
.reason{background:rgba(255,255,255,.06)}.note{background:var(--card)}
.chip{background:rgba(255,255,255,.1);color:var(--ink)}
main.home{pointer-events:none}
main.panel{margin-top:34vh;transition:margin .5s}
@media (min-width:900px){main.panel{margin-top:22vh}}
body.zoomed main.panel{margin-top:30vh}
main.term{margin-top:0}
main.enter{animation:rise .55s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main.enter{animation:none}}
.homehint{position:fixed;left:0;right:0;bottom:28px;text-align:center;pointer-events:none}
.homehint h1{font-size:30px;margin:0;letter-spacing:.02em}.homehint p{margin:4px 0 0;color:#98A2B3}
#brainLabels{position:fixed;inset:0;z-index:1;pointer-events:none}
.blabel{position:absolute;left:0;top:0;pointer-events:auto;text-decoration:none;color:#fff;background:rgba(11,16,32,.55);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--c) 60%,transparent);border-radius:14px;padding:6px 12px;white-space:nowrap;transition:opacity .3s,background .2s;box-shadow:0 0 24px color-mix(in srgb,var(--c) 30%,transparent)}
.blabel b{display:block;font:700 15px Fraunces,serif;color:var(--c)}.blabel span{font-size:12px;color:#c9d1dd}
.blabel em{position:absolute;top:-8px;right:-8px;background:#B4443A;color:#fff;font:700 11px Inter;font-style:normal;border-radius:10px;padding:1px 7px}
.blabel:hover{background:rgba(11,16,32,.85)}
@media (max-width:560px){.blabel span{display:none}.blabel{padding:5px 10px}}
.termwrap{background:#0b1020}
.todo{border-left-color:#F2C572}
#app{pointer-events:none}
#app .top,#app main.panel,#app main.term{pointer-events:auto}
main.panel{position:relative;padding-top:28px}
main.panel::before{content:"";position:absolute;inset:0 -16px auto;height:calc(100% + 40px);z-index:-1;border-radius:28px 28px 0 0;
  background:linear-gradient(to bottom,rgba(11,16,32,0),rgba(11,16,32,.82) 90px,rgba(11,16,32,.9));pointer-events:none}

/* ---------- side bar ---------- */
#side{position:fixed;top:72px;right:16px;bottom:16px;width:390px;z-index:4;background:rgba(14,20,36,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid color-mix(in srgb,var(--c,#7fd1b9) 40%,transparent);border-radius:22px;padding:26px 24px;overflow:auto;
  box-shadow:0 0 60px color-mix(in srgb,var(--c,#7fd1b9) 18%,transparent),0 20px 60px rgba(0,0,0,.5);
  transform:translateX(430px);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
#side.open{transform:none;opacity:1}
#side h2{font-size:26px;margin:4px 0 8px}
.skick{font:700 12px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.sclose{position:absolute;top:14px;right:14px;border:0;background:rgba(255,255,255,.08);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:14px}
.sstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin:14px 0}
.sstats div{background:rgba(255,255,255,.05);border-radius:12px;padding:10px}.sstats b{display:block;font:700 24px Fraunces,serif;color:var(--c)}.sstats span{font-size:12px;color:var(--muted)}
.srow{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.srow img{width:64px;height:48px;object-fit:cover;border-radius:8px;flex:none}.srow b{display:block;font-size:14px}.srow span{font-size:12px;color:var(--muted)}
.srow i{color:var(--c);font-style:normal;flex:none}.srow.link:hover b{color:var(--c)}
.sacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.sacts .btn{text-decoration:none}
.blabel.on{background:rgba(11,16,32,.9);box-shadow:0 0 30px color-mix(in srgb,var(--c) 55%,transparent)}
@media (max-width:767px){#side{display:none}}
#brain3d{cursor:grab;touch-action:none}
main.home .homehint p{font-size:14px}
body.side-open .homehint{opacity:0;transition:opacity .3s}

/* ---------- v3: sleek labels + side bar ---------- */
html,body{background:#070b16}
.blabel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;
  display:flex;flex-direction:column;align-items:center;gap:3px;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.blabel b{display:flex;align-items:center;gap:6px;font:600 11px Inter!important;letter-spacing:.24em;text-transform:uppercase;color:var(--c)!important;
  text-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent),0 0 2px rgba(0,0,0,.8)}
.blabel span{font:500 11px Inter;color:#c9d6e8;opacity:0;max-height:0;overflow:hidden;transition:opacity .25s,max-height .25s;text-shadow:0 0 6px rgba(0,0,0,.9)}
.blabel:hover span,.blabel.on span{opacity:1;max-height:16px}
.blabel i{display:block;width:1px;height:30px;background:linear-gradient(var(--c),transparent);opacity:.7}
.blabel i::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--c);margin:28px 0 0 -2px;box-shadow:0 0 8px var(--c)}
.blabel em{position:static!important;background:none!important;color:#070b16!important;font:700 10px Inter!important;letter-spacing:0;
  min-width:17px;height:17px;border-radius:9px;display:inline-grid;place-items:center;padding:0 4px!important;background-color:var(--c)!important;box-shadow:0 0 10px var(--c)}
.blabel em[hidden]{display:none}
.blabel.on b{text-shadow:0 0 18px var(--c),0 0 4px var(--c)}
@media (max-width:560px){.blabel b{font-size:10px!important;letter-spacing:.18em}.blabel i{height:22px}.blabel i::after{margin-top:20px}}
#side{background:linear-gradient(180deg,rgba(12,18,34,.72),rgba(8,12,24,.86));border:0;border-left:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  border-radius:0;top:61px;right:0;bottom:0;padding:34px 30px;box-shadow:-30px 0 80px rgba(0,0,0,.45)}
#side::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:120px;background:var(--c);box-shadow:0 0 14px var(--c)}
#side h2{font:600 24px Inter;letter-spacing:-.01em}
.skick{font:600 10px Inter;letter-spacing:.3em}
.sstats{display:flex;gap:0;margin:22px 0;grid-template-columns:none}
.sstats div{background:none;border-radius:0;padding:0 16px;border-left:1px solid rgba(255,255,255,.1)}
.sstats div:first-child{padding-left:0;border-left:0}
.sstats b{font:300 30px Inter;letter-spacing:-.02em}
.sstats span{text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.srow{border-bottom:1px solid rgba(255,255,255,.06)}
.srow img{border-radius:4px}
.sclose{background:none;border:1px solid rgba(255,255,255,.15);width:30px;height:30px}
.sacts .btn{border-radius:999px;padding:10px 18px;font-size:13px;letter-spacing:.02em}
.sacts .btn:not(.primary){background:none;border:1px solid rgba(255,255,255,.18)}
.sacts .btn.primary{background:var(--c);color:#070b16}
.homehint h1{font:600 22px Inter;letter-spacing:.3em;text-transform:uppercase}
.homehint p{font-size:12px;letter-spacing:.08em}
.blabel i{display:none}
.blabel{align-items:center}
.blabel b::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.sstats span{white-space:nowrap;letter-spacing:.1em}
.sstats div{padding:0 14px}
.homehint{animation:hintfade 7s ease forwards}
@keyframes hintfade{0%,70%{opacity:1}100%{opacity:0}}

/* =====================================================================
   Futuristic HUD theme (v4) — applies to every section
   ===================================================================== */
@font-face{font-family:Mono;src:url(mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root,:root:not([data-theme=light]){--neon:#6ff0c8;--neon2:#7fb2ff;--ink:#dfe9f5;--muted:#8193ab;--bg:#05080f;--card:rgba(8,14,28,.74);--line:rgba(127,233,255,.16);--green:#6ff0c8}
html,body{background:#05080f}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(40,90,160,.18),transparent 60%),
    repeating-linear-gradient(0deg,rgba(127,233,255,.035) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,rgba(127,233,255,.035) 0 1px,transparent 1px 48px)}
body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
h1,h2,h3{font-family:Inter,sans-serif}
main.panel h2,.homehint h1{font:600 20px Mono,monospace!important;letter-spacing:.2em;text-transform:uppercase}
main.panel h2::before{content:"// ";color:var(--neon)}
main.panel h3{font:600 13px Mono,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--neon)}
.muted{color:var(--muted)}
/* top bar */
.top{background:rgba(5,8,15,.78);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(111,240,200,.08),0 10px 30px rgba(0,0,0,.35)}
.brand b{font:600 13px Mono,monospace;letter-spacing:.22em;text-transform:uppercase}
.mark{border-radius:6px!important;background:transparent!important;border:1px solid var(--neon);color:var(--neon)!important;font:600 13px Mono,monospace!important;box-shadow:0 0 12px rgba(111,240,200,.35),inset 0 0 10px rgba(111,240,200,.2)}
#nav a{font:600 11px Mono,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-radius:4px;position:relative}
#nav a.on{background:transparent;color:var(--neon);text-shadow:0 0 10px rgba(111,240,200,.6)}
#nav a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.badge{background:#ff5a78;font:700 10px Mono,monospace;box-shadow:0 0 10px rgba(255,90,120,.6)}
/* panels: sharp glass with corner brackets */
.card,.note{border-radius:4px!important;background:var(--card);border:1px solid var(--line);position:relative;
  background-image:linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon));
  background-size:12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-color:var(--card)}
.card.prod{padding:0;overflow:hidden}
.prod .hero{border-bottom:1px solid var(--line)}
.stat b,.sstats b,.todo b{font-family:Mono,monospace!important;font-weight:400!important;color:var(--neon);text-shadow:0 0 14px rgba(111,240,200,.35)}
.stat span,.todo span{font:500 11px Mono,monospace;letter-spacing:.08em;text-transform:uppercase}
.todo{border-left:1px solid var(--line)!important}
.todo em{font:600 11px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--neon)}
.price{font:600 18px Mono,monospace!important;color:var(--neon)}
.pt h3{font:600 17px Inter!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
/* chips, tabs, buttons */
.chip{border-radius:2px;font:600 10px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;background:rgba(127,233,255,.08);border:1px solid var(--line)}
.chip.waiting{background:rgba(255,200,90,.1);color:#ffc85a;border-color:rgba(255,200,90,.35)}
.chip.accepted{background:rgba(111,240,200,.1);color:#6ff0c8;border-color:rgba(111,240,200,.35)}
.chip.declined{background:rgba(255,90,120,.1);color:#ff7a8a;border-color:rgba(255,90,120,.35)}
.chip.live{background:#6ff0c8;color:#05080f}
.tabs button{border-radius:2px;font:600 10px Mono,monospace;letter-spacing:.16em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--muted)}
.tabs button.on{background:rgba(111,240,200,.1);color:var(--neon);border-color:var(--neon);box-shadow:0 0 12px rgba(111,240,200,.25)}
.btn{border-radius:2px;font:600 11px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;background:transparent;border:1px solid rgba(127,233,255,.3);color:var(--ink);transition:box-shadow .2s,background .2s}
.btn:hover{box-shadow:0 0 14px rgba(127,233,255,.3);background:rgba(127,233,255,.06)}
.btn.primary{background:var(--neon);color:#05080f;border-color:var(--neon);box-shadow:0 0 16px rgba(111,240,200,.35)}
.btn.primary:hover{background:#9ff7da}
.btn.danger{background:transparent;color:#ff7a8a;border-color:rgba(255,122,138,.6)}
.btn.danger:hover{background:rgba(255,122,138,.1);box-shadow:0 0 14px rgba(255,122,138,.35)}
.btn.big{border-radius:2px;font-size:14px}
input,textarea{border-radius:2px;background:rgba(127,233,255,.04);border:1px solid var(--line);font-family:Mono,monospace;font-size:14px}
input:focus,textarea:focus{outline:none;border-color:var(--neon);box-shadow:0 0 12px rgba(111,240,200,.25)}
.reason{border-radius:2px;border-left:2px solid #ff7a8a;background:rgba(255,122,138,.06)}
details summary{font:600 11px Mono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
.desc{font-size:13px}
table td,table th{border-bottom:1px solid var(--line)}th{font:600 10px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
td.n{font-family:Mono,monospace}
.ev time{font:500 11px Mono,monospace;color:var(--neon)}
/* login */
.login{background:rgba(8,14,28,.8)}
.login h1{font:600 16px Mono,monospace;letter-spacing:.24em;text-transform:uppercase}
.login label{font:600 10px Mono,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* side bar + review + terminal */
#side h2{font:600 18px Mono,monospace!important;letter-spacing:.08em;text-transform:uppercase}
.skick{font-family:Mono,monospace!important}
.sacts .btn{border-radius:2px}
.rvimg{border-radius:4px;border:1px solid var(--line)}
.rvdots i{border-radius:1px;width:14px;height:3px}
.termwrap{background:#05080f}.termbar{background:rgba(8,14,28,.9)}
.pill{border-radius:2px;font:600 10px Mono,monospace;letter-spacing:.14em;text-transform:uppercase}
.keys button{border-radius:2px;font:600 11px Mono,monospace;background:transparent}
.xterm{padding:4px}
.blabel b,.blabel span{font-family:Mono,monospace!important}
.corelabel b{font-size:12px!important;letter-spacing:.3em}
main.panel::before{background:linear-gradient(to bottom,rgba(5,8,15,0),rgba(5,8,15,.84) 90px,rgba(5,8,15,.92))}

/* =====================================================================
   v5: rooms (half-screen panel beside the brain), back button, chat bar
   ===================================================================== */
#roomBack{position:fixed;top:74px;left:16px;z-index:6;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--neon);
  font:600 11px Mono,monospace;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px 8px 8px;border:1px solid rgba(111,240,200,.35);border-radius:3px;
  background:rgba(5,8,15,.7);backdrop-filter:blur(8px);box-shadow:0 0 16px rgba(111,240,200,.18);animation:fadein .8s .6s both}
#roomBack svg{width:34px;height:27px;filter:drop-shadow(0 0 6px rgba(111,240,200,.7))}
#roomBack:hover{background:rgba(111,240,200,.08);box-shadow:0 0 22px rgba(111,240,200,.35)}
#roomBack[hidden]{display:none}
@keyframes fadein{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
main.room{position:relative;padding-bottom:140px}
main.room.enter{animation:roomin 1.1s .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes roomin{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@media (min-width:768px){
  main.room{position:fixed;top:61px;right:0;bottom:0;width:50vw;max-width:none;margin:0!important;overflow-y:auto;padding:30px 36px 150px;
    background:linear-gradient(90deg,rgba(5,8,15,.55),rgba(5,8,15,.9) 60px,rgba(5,8,15,.94));border-left:1px solid rgba(127,233,255,.18);
    box-shadow:-40px 0 90px rgba(0,0,0,.45);z-index:3}
  main.room::before{display:none}
  main.room::after{content:"";position:fixed;top:61px;right:50vw;width:1px;height:140px;background:var(--neon);box-shadow:0 0 16px var(--neon)}
  main.room.enter{animation:slidein 1.1s .45s cubic-bezier(.2,.8,.2,1) both}
  @keyframes slidein{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}
  main.room .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  main.room .rv{max-width:none}
}
@media (max-width:767px){main.room{margin-top:34vh}}
body.in-room .homehint{display:none}
/* chat bar */
.chat{position:sticky;bottom:0;margin:28px -8px 0;padding:10px 8px 14px;background:linear-gradient(to bottom,rgba(5,8,15,0),rgba(5,8,15,.96) 30%);z-index:2}
.chatbar{display:flex;gap:8px;align-items:center;border:1px solid rgba(127,233,255,.28);background:rgba(8,14,28,.92);padding:6px;border-radius:3px;box-shadow:0 0 20px rgba(111,240,200,.08)}
.chatbar:focus-within{border-color:var(--neon);box-shadow:0 0 22px rgba(111,240,200,.25)}
.chatwho{font:600 10px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);padding:0 6px;white-space:nowrap}
.chatin{flex:1;border:0!important;background:transparent!important;box-shadow:none!important;padding:8px 4px;font-size:14px;min-width:0}
.chatbar .btn{padding:8px 14px}
.chattog{padding:8px 10px!important}
.chatlog{border:1px solid var(--line);background:rgba(3,6,12,.94);margin-bottom:8px;border-radius:3px}
.chatlog-h{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--line);font:600 10px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chatlog-h a{color:var(--neon);text-decoration:none}
.chatlog pre{margin:0;padding:10px;max-height:34vh;overflow:auto;font:12px/1.45 Mono,monospace;color:#cfe3f0;white-space:pre-wrap}
@media (max-width:560px){.chatwho{display:none}}
@media (max-width:560px){#nav{order:0;flex-basis:auto;flex:1}.brand b{display:none}.top{flex-wrap:nowrap}#nav a{padding:8px 10px}}

/* Notifications + Backups rooms */
.alert{display:grid;gap:3px;padding:12px 14px 12px 16px;margin-bottom:8px;border-radius:10px;background:rgba(255,255,255,.04);border-left:3px solid var(--lc,#8a94a3);color:inherit;text-decoration:none}
a.alert:hover{background:rgba(255,255,255,.08)}
.alert b{font-weight:600}
.alert .lvl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--lc,#8a94a3)}
.alert.urgent{--lc:#ff6b5a}.alert.action{--lc:#ff8a3d}.alert.good{--lc:#7fe0a8}.alert.info{--lc:#8fb8ff}
.stat b.ok{color:#7fe0a8}.stat b.bad{color:#ff6b5a}
.blabel.solar{align-items:flex-start}  /* solar view: name sits right next to its planet (hover text no longer widens the gap) */
/* chat bar: always pinned to the bottom of the screen, even in short rooms */
.chat{position:fixed;left:0;right:0;bottom:0;margin:0;padding:18px 16px calc(14px + env(safe-area-inset-bottom,0px));z-index:4}
@media (min-width:768px){.chat{left:auto;width:50vw;padding:18px 36px 16px}}
main.room.enter{animation-fill-mode:backwards}  /* no leftover transform after the slide-in, so the fixed chat bar pins to the screen, not the panel */
/* full-screen rooms */
main.room .expand{float:right;margin:2px 0 0 12px}
main.room h2.clickable{cursor:pointer}
@media (min-width:768px){
  body.full main.room{left:0;width:100vw;padding:30px max(36px,7vw) 150px;border-left:0}
  body.full main.room::after{display:none}
  body.full .chat{width:100vw;padding-inline:max(36px,7vw)}
  body.full #brainLabels{display:none}
}
@media (max-width:767px){body.full main.room{margin-top:0!important}body.full main.room::before{background:rgba(5,8,15,.97)!important}}
.afilters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 18px}
.afilters input{flex:1 1 220px;max-width:360px}
#atopics{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid rgba(127,233,255,.25);background:rgba(8,14,28,.8);color:#c9d6e8;border-radius:999px;padding:5px 11px;font:500 12px Inter,sans-serif;cursor:pointer}
.chip b{color:var(--neon);font-weight:600;margin-left:3px}
.chip.on{border-color:var(--neon);color:#fff;box-shadow:0 0 12px rgba(111,240,200,.2)}
.aday{margin-bottom:18px}.aday h3{margin:0 0 8px}
@media (min-width:768px){body.full main.room{padding-top:84px}}
@media (max-width:767px){body.full main.room{padding-top:70px}body.full main.room .ev{grid-template-columns:52px 1fr}}
@media (max-width:767px){main.room .ev time{flex:0 0 46px;width:46px;min-width:0}}  /* phones: narrow time column */

/* ===== v6 layout (computer/iPad): agents in the top bar; rooms = 1/4 DNA strand + 3/4 information ===== */
#nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
#nav a{display:flex;align-items:center;gap:6px;white-space:nowrap}
#nav a i{width:6px;height:6px;border-radius:50%;background:var(--c,#6ff0c8);box-shadow:0 0 8px var(--c,#6ff0c8);opacity:.75}
#nav a.on i{opacity:1}
#nav a.on{color:var(--c,#6ff0c8)!important;border-color:var(--c,#6ff0c8)!important}
#nav a .badge{position:static;margin-left:2px}
@media (max-width:767px){#nav a.agent{display:none}#nav a i{display:none}}
#strand{position:fixed;left:0;top:61px;bottom:0;width:25vw;z-index:3;pointer-events:none;background:linear-gradient(90deg,#020408,#03060c)}
@media (min-width:768px){
  main.room{left:25vw;right:auto;width:75vw}
  main.room::after{right:auto;left:25vw}
  .chat{left:25vw;right:auto;width:75vw}
  body.in-room #brainLabels,body.in-room #roomBack{display:none}
  body.full main.room{left:0;width:100vw}
  body.full .chat{left:0;width:100vw}
}
@media (max-width:767px){#strand{display:none!important}}
#nav a{padding:8px 10px;letter-spacing:.12em}
#nav a.on{text-shadow:0 0 10px var(--c,#6ff0c8)}
#nav a.on::after{background:var(--c,#6ff0c8);box-shadow:0 0 8px var(--c,#6ff0c8)}
#strand{height:calc(100vh - 61px)}  /* a canvas does not stretch with top+bottom; give it the height */

/* Personal Development: folder tree + note */
.pd{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:18px;align-items:start}
@media (max-width:899px){.pd{grid-template-columns:1fr}}
.pdtree{position:sticky;top:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.pdtree details{border-left:1px solid rgba(255,122,217,.25);padding-left:10px;margin:2px 0}
.pdtree summary{cursor:pointer;padding:6px 4px;color:#e9ecf2;font-weight:600;list-style:none}
.pdtree summary::before{content:"▸ ";color:#ff7ad9}.pdtree details[open]>summary::before{content:"▾ "}
.pdtree a{display:block;padding:6px 8px;border-radius:6px;color:#c9d6e8;text-decoration:none}
.pdtree a:hover{background:rgba(255,255,255,.05)}.pdtree a.on{background:rgba(255,122,217,.14);color:#fff}
.pdempty{padding:4px 8px;font-size:13px}
.pdnote{line-height:1.6;min-width:0}
.pdnote h3{font-size:22px;margin:4px 0 12px;color:#fff;letter-spacing:.02em;text-transform:none}
.pdnote h4{margin:20px 0 8px;color:#ff9be4;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.pdnote ul,.pdnote ol{margin:6px 0 10px;padding-left:22px}.pdnote li{margin:4px 0}
.pdnote li.q{margin-top:12px;font-weight:600;color:#fff}
.pdnote li.ans{list-style:none;margin-left:-18px}
.pdnote details summary{cursor:pointer;color:#ff9be4;font-size:13px;font-weight:600}
.pdnote details[open] summary{margin-bottom:4px}
.pdcrumb{font:500 11px Mono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.pdcrumb span{color:#ff7ad9}
.mdtable{overflow-x:auto;margin:8px 0}.mdtable table{width:100%;border-collapse:collapse;font-size:14px}
.mdtable th,.mdtable td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.mdtable th{color:#ff9be4;font-weight:600}