:root{--bg:#070708;--panel:#0f0f11;--line:#26262a;--red:#e11d2e;--red2:#ff3a4a;--tx:#ececee;--mut:#8d8d95;--side:164px;--top:62px;--chat:96px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.ico{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.top{position:fixed;top:0;left:var(--side);right:0;height:var(--top);display:flex;align-items:center;gap:12px;padding:0 22px;z-index:20;background:var(--bg)}
.top h1{margin:0;font-size:1.25rem;flex:1;white-space:nowrap}
.gpu{display:flex;align-items:center;gap:14px;padding:9px 16px;border:1px solid #3a1318;border-radius:12px;background:#0d0d0f;font-size:.85rem;white-space:nowrap;box-shadow:0 0 14px rgba(225,29,46,.12)}
.gpu span{display:flex;align-items:center;gap:8px}.gpu .gx{color:var(--mut)}.gpu .gn{font-weight:600}.gpu .gm{color:var(--mut);font-variant-numeric:tabular-nums}.sep{width:1px;height:20px;background:var(--line)}
.dot{width:8px;height:8px;border-radius:50%;background:#2ecc59;box-shadow:0 0 6px #2ecc59}
.g2 .ico{width:1.2em;height:1.2em;color:var(--mut)}
.bar{display:inline-block;width:40px;height:6px;border-radius:4px;background:#2a1215;overflow:hidden}.bar u{display:block;height:100%;background:var(--red);box-shadow:0 0 6px var(--red)}
.icon{background:none;border:0;color:var(--tx);font-size:1.3rem;cursor:pointer;padding:6px 10px;border-radius:8px}
.icon:hover{background:#1b1b1e}
#menuBtn{display:none}
.side{position:fixed;top:0;left:0;bottom:0;width:var(--side);background:#09090a;border-right:1px solid var(--line);padding:76px 12px 16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;z-index:15}
.side a{display:flex;align-items:center;gap:12px;color:#c9c9ce;text-decoration:none;padding:13px 14px;border-radius:10px;border:1px solid transparent}
.side a:hover{background:#151517}
.side a.active{border-color:var(--red);color:#fff;background:#1a0709;box-shadow:0 0 14px rgba(225,29,46,.35),inset 0 0 10px rgba(225,29,46,.15)}
.side a.active .ico,.side a:hover .ico{color:var(--red2)}
.glowline{margin-top:auto;display:flex;align-items:center;padding:10px 6px}
.glowline span{flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--red));box-shadow:0 0 8px var(--red)}
.glowline i{width:7px;height:7px;border-radius:50%;background:var(--red2);box-shadow:0 0 8px var(--red2)}
main{position:fixed;top:var(--top);left:var(--side);right:0;bottom:var(--chat);overflow-y:auto;padding:4px 22px 18px;-webkit-overflow-scrolling:touch}
h2{margin:0 0 6px}
h3{margin:22px 0 10px;font-size:1.05rem}
.muted{color:var(--mut)}
.hero{display:flex;border-radius:14px;border:1px solid #4a1118;background:#0c0c0e;box-shadow:0 0 22px rgba(225,29,46,.12);overflow:hidden;min-height:190px}
.ht{flex:1 1 55%;padding:22px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:1;min-width:0}
.hero h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0}
.hero p{margin:0 0 8px;color:#cfcfd4}
.tag{font-size:.72rem;color:var(--red2);text-transform:uppercase;letter-spacing:.5px}
.btn{background:linear-gradient(#e8202f,#b9111f);color:#fff;border:0;border-radius:9px;padding:11px 20px;font-size:.95rem;cursor:pointer;box-shadow:0 0 14px rgba(225,29,46,.4)}
.btn:hover{background:var(--red2)}
.art{flex:1 1 45%;position:relative;background:
 radial-gradient(circle at 70% 70%,rgba(225,29,46,.35),transparent 35%),
 radial-gradient(circle at 20% 20%,rgba(255,255,255,.08),transparent 30%),
 linear-gradient(90deg,#0c0c0e,#15171d 40%,#0b0c10);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.art::before{content:"";position:absolute;inset:0 0 40% 0;background:repeating-linear-gradient(90deg,#1b1e27 0 8px,transparent 8px 18px,#232733 18px 24px,transparent 24px 40px);opacity:.5;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.car{position:absolute;right:12%;bottom:18%;width:55%;height:34%;background:#050506;border-radius:40% 45% 12% 12%/70% 70% 12% 12%;box-shadow:0 0 0 1px #222,0 22px 30px -8px rgba(225,29,46,.5)}
.car::after{content:"";position:absolute;right:4%;top:55%;width:18%;height:8%;background:var(--red2);border-radius:3px;box-shadow:0 0 14px 4px var(--red)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;color:var(--tx);cursor:pointer;text-align:left;font:inherit;display:flex;align-items:center;gap:14px;min-height:68px}
.tile:hover,.tile:focus-visible{border-color:var(--red);box-shadow:0 0 12px rgba(225,29,46,.3);outline:0}
.tile .ico{width:2em;height:2em;color:var(--red2)}
.tile b{display:block;font-size:.95rem;font-weight:600}.tile small{display:block;color:var(--mut);font-size:.75rem;margin-top:3px}
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.va{color:var(--red2);font-size:.85rem;text-decoration:none}
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;min-width:0}
.card:hover{border-color:var(--red)}
.card .th{height:92px}
.card .ct{padding:9px 12px}.card b{display:block;font-size:.88rem;font-weight:600}.card small{color:var(--mut);font-size:.75rem}
.chat{position:fixed;left:var(--side);right:0;bottom:0;height:var(--chat);padding:6px 22px 8px;background:var(--bg);z-index:12}
.inrow{display:flex;align-items:center;gap:12px;background:#0e0e10;border:1px solid #3a1318;border-radius:12px;padding:7px 10px 7px 16px;box-shadow:0 0 14px rgba(225,29,46,.1)}
.spark{color:var(--red2)}
.chat input{flex:1;min-width:0;background:none;border:0;color:var(--tx);font-size:.95rem;padding:8px 0}
.chat input:focus{outline:0}.inrow:focus-within{border-color:var(--red)}
.send{width:36px;height:36px;border-radius:50%;border:0;background:var(--red);cursor:pointer;display:grid;place-items:center;flex:none;box-shadow:0 0 12px rgba(225,29,46,.5)}
.send svg{width:18px;height:18px}
.tip{text-align:center;color:var(--mut);font-size:.72rem;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log{position:absolute;left:22px;right:22px;bottom:100%;max-height:40vh;overflow-y:auto;background:#101012;border:1px solid var(--line);border-radius:12px 12px 0 0;padding:8px 14px}
.log p{margin:6px 0}.log .me{color:var(--mut)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
[hidden]{display:none!important}
.win{background:var(--panel);border:1px solid var(--red);border-radius:14px;width:min(560px,100%);max-height:90vh;overflow-y:auto;box-shadow:0 0 30px rgba(225,29,46,.3)}
.wh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.wh h2{margin:0;font-size:1.2rem}.wb{padding:40px 18px;text-align:center;color:var(--mut);font-size:1.2rem}.wf{padding:14px 18px;text-align:right;border-top:1px solid var(--line)}
.scrim{display:none}
@media(max-width:1150px){.grid,.row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
 :root{--side:0px}
 .top{left:0;padding:0 12px}#menuBtn{display:block}
 .side{width:230px;transform:translateX(-100%);transition:transform .2s;z-index:40}
 .side.open{transform:none}
 .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:35}
 main{padding:4px 14px 14px}.chat{padding:6px 12px 8px}.log{left:12px;right:12px}
 .art{display:none}.ht{flex-basis:100%}
}
@media(max-width:560px){.gpu{flex-direction:column;align-items:flex-start;gap:3px;padding:5px 9px;font-size:.68rem;max-width:58vw;overflow:hidden}.gpu span{gap:5px}.gpu .sep,.gpu .bar{display:none}.top h1{font-size:1.05rem}.top{gap:6px}.grid{grid-template-columns:1fr}.row{grid-template-columns:repeat(2,1fr);gap:10px}.tip{display:none}:root{--chat:70px}}

body.inchat{--chat:0px}body.inchat .chat{display:none}
body.inchat main{padding:0;overflow:hidden}
#v-chat{height:100%}
.cv{display:flex;height:100%;min-height:0;position:relative}
.hist{width:240px;flex:none;border-right:1px solid var(--line);background:#09090a;display:flex;flex-direction:column;padding:10px;gap:10px;min-height:0}
.hh{display:none;justify-content:space-between;align-items:center}
.newc{width:100%}
.hl{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0}
.hi{display:flex;align-items:center;gap:6px;padding:9px 10px;border:1px solid transparent;border-radius:9px;cursor:pointer;color:#c9c9ce;font-size:.88rem}
.hi:hover{background:#151517}.hi.on{border-color:var(--red);background:#1a0709;box-shadow:0 0 10px rgba(225,29,46,.25)}
.ht2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.del{background:none;border:0;color:var(--mut);cursor:pointer;padding:2px 6px;border-radius:6px;font-size:.8rem}.del:hover{color:#fff;background:#3a1318}
.sm{font-size:.8rem}
.cm{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.ctop{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:1px solid var(--line)}
#histBtn{display:none}
.msel{flex:1;max-width:280px;min-width:0;background:#0e0e10;color:var(--mut);border:1px solid #3a1318;border-radius:9px;padding:9px 10px;font:inherit;font-size:.9rem;opacity:.85}
.ctop .btn.sm{margin-left:auto;padding:8px 14px;font-size:.85rem;white-space:nowrap}
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px;display:flex;flex-direction:column;gap:14px;min-height:0;-webkit-overflow-scrolling:touch}
.m{display:flex;min-width:0}.m.user{justify-content:flex-end}
.b{max-width:min(760px,86%);min-width:0;padding:11px 15px;border-radius:14px;background:var(--panel);border:1px solid var(--line);line-height:1.5;font-size:.95rem;overflow-wrap:anywhere}
.m.user .b{background:#1a0709;border-color:var(--red);box-shadow:0 0 14px rgba(225,29,46,.25);border-bottom-right-radius:4px}
.m.bot .b{border-color:#4a1118;box-shadow:0 0 14px rgba(225,29,46,.1);border-bottom-left-radius:4px}
.b code{background:#1b1b1e;padding:1px 5px;border-radius:5px;font-family:Consolas,"SF Mono",monospace;font-size:.88em}
.b.typing:empty::after,.b.typing::after{content:"▍";color:var(--red2);animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.code{margin:8px 0;border:1px solid #3a1318;border-radius:10px;overflow:hidden;background:#050506}
.ch{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;background:#140a0c;color:var(--mut);font-size:.75rem}
.cp{background:none;border:1px solid #4a1118;color:var(--tx);border-radius:6px;padding:2px 10px;cursor:pointer;font-size:.75rem}.cp:hover{background:var(--red)}
.code pre{margin:0;padding:10px 12px;overflow-x:auto;max-width:100%}.code pre code{background:none;padding:0;font-size:.85rem;white-space:pre}
.empty{margin:auto;text-align:center;color:var(--mut);padding:20px;max-width:420px}
.empty h2{color:var(--tx)}.eg{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--red);color:var(--red2);box-shadow:0 0 18px rgba(225,29,46,.35)}.eg .ico{width:28px;height:28px}
.cin{padding:8px 18px calc(10px + env(safe-area-inset-bottom));background:var(--bg)}
.cbox{display:flex;align-items:flex-end;gap:10px;background:#0e0e10;border:1px solid #3a1318;border-radius:14px;padding:8px 8px 8px 14px;box-shadow:0 0 14px rgba(225,29,46,.1)}
.cbox:focus-within{border-color:var(--red)}
.cbox textarea{flex:1;min-width:0;resize:none;background:none;border:0;color:var(--tx);font:inherit;font-size:.95rem;line-height:1.4;padding:7px 0;max-height:180px;outline:0}
.stop{background:#1a0709;color:#fff;border:1px solid var(--red);border-radius:18px;height:36px;padding:0 14px;cursor:pointer;flex:none}
.hscrim{display:none}
@media(max-width:820px){
 .hist{position:absolute;z-index:30;top:0;bottom:0;left:0;width:min(280px,85%);transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 30px #000}
 .hist.open{transform:none}.hh{display:flex}
 .hscrim.show{display:block;position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:25}
 #histBtn{display:block}
 .ctop{padding:8px 10px}.msgs{padding:12px 10px}.cin{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.b{max-width:92%}
}

/* ===== Adaptive layer: phones, Z Fold cover/inner, landscape, tablets (CSS-only, reflows live) ===== */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
 --top:calc(62px + var(--sat))}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:clamp(14px,2.4vw + 8px,16px);height:100dvh}
body{height:100dvh;overflow:hidden;overscroll-behavior:none}
.top{padding:var(--sat) calc(22px + var(--sar)) 0 22px;min-width:0}
.top h1{min-width:0;overflow:hidden;text-overflow:ellipsis}
main{padding-right:calc(22px + var(--sar));overflow-x:hidden;overscroll-behavior:contain}
.hero,.grid,.row,.card,.tile{min-width:0;max-width:100%}
.tile span,.card .ct{min-width:0;overflow-wrap:anywhere}
.chat{padding-bottom:calc(8px + var(--sab));padding-right:calc(22px + var(--sar))}
.cin{padding-right:calc(18px + var(--sar))}
:root{--chat:calc(96px + var(--sab))}
.side{padding-top:calc(76px + var(--sat));padding-bottom:calc(16px + var(--sab));padding-left:calc(12px + var(--sal))}
.side a{min-height:44px}
.msel,.ctop .btn.sm,.stop{min-height:44px}
.hi{min-height:44px}
@media(pointer:coarse){.icon{min-width:44px;min-height:44px}.send{width:44px;height:44px}.btn{min-height:44px}.del,.cp{min-height:36px;min-width:36px}}

/* tablet portrait / small laptop: 2-col, big enough */
@media(min-width:561px) and (max-width:960px){
 :root{--side:68px;--chat:calc(84px + var(--sab))}
 .top{left:var(--side);padding-left:16px}
 #menuBtn{display:none}
 .scrim.show{display:none}
 .side{width:68px;transform:none;padding:calc(14px + var(--sat)) 8px calc(14px + var(--sab)) calc(8px + var(--sal));align-items:stretch;z-index:15}
 .side a{font-size:0;gap:0;justify-content:center;padding:0;height:52px}
 .side .ico{width:26px;height:26px}
 main{padding-left:16px}
 .chat{padding-left:16px}
 .grid,.row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tip{font-size:.7rem}
}
@media(min-width:700px) and (max-width:960px){
 .art{display:block}.ht{flex-basis:55%}
 /* unfolded Fold: chat history stays alongside */
 .hist{position:static;transform:none;width:210px;box-shadow:none;z-index:auto}
 .hh,#histBtn{display:none}.hscrim.show{display:none}
 .ctop{padding:8px 14px}.msgs{padding:16px 14px}.cin{padding-left:14px}.b{max-width:min(760px,90%)}
}
@media(min-width:561px) and (max-width:699px){.hero .art{display:none}}

/* phones portrait */
@media(max-width:560px){
 :root{--chat:calc(66px + var(--sab))}
 .top{padding-left:max(10px,var(--sal));padding-right:max(10px,var(--sar))}
 .top h1{flex:1 1 auto;font-size:clamp(.95rem,4.6vw,1.1rem)}
 .gpu{max-width:none;flex:0 1 auto;min-width:0;overflow:visible;line-height:1.25}
 .gpu .g{white-space:nowrap}
 main{padding:4px max(12px,var(--sar)) 14px max(12px,var(--sal))}
 .chat{padding:6px max(10px,var(--sar)) calc(8px + var(--sab)) max(10px,var(--sal))}
 .log{left:max(10px,var(--sal));right:max(10px,var(--sar))}
 .hero{min-height:0}.ht{padding:16px}
 .hero h2{font-size:clamp(1.3rem,6vw,1.7rem)}
 .btn{min-height:44px}
 .tile{min-height:64px}
 .cin{padding-left:max(10px,var(--sal));padding-right:max(10px,var(--sar))}
 .ctop{padding-left:max(10px,var(--sal));padding-right:max(10px,var(--sar))}
 .msgs{padding-left:max(10px,var(--sal));padding-right:max(10px,var(--sar))}
}
/* very narrow: Z Fold cover (~360x829), 320 phones. Two-row top bar so nothing clips */
@media(max-width:380px){
 :root{--top:calc(118px + var(--sat))}
 .top{flex-wrap:wrap;align-content:center;row-gap:6px;column-gap:4px;height:var(--top);padding-top:calc(var(--sat) + 2px);padding-bottom:4px}
 .top h1{font-size:1.05rem;flex:1 1 0}
 .gpu{order:3;flex:1 1 100%;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding:5px 10px;font-size:.72rem}
 .gpu .g{display:flex;align-items:center;gap:6px;min-width:0}
 .gpu .gn{flex:1 1 auto;min-width:0}
 .gpu .gm{flex:none}
 .gpu .bar{display:inline-block;width:34px;flex:none}
 .gpu .sep{display:none}
 .tile{padding:12px}.tile .ico{width:1.7em;height:1.7em}
 .row{grid-template-columns:minmax(0,1fr)}
 .card .th{height:78px}
 .side{width:min(260px,82vw)}
 .hist{width:min(280px,88%)}
 .ctop{gap:6px}.ctop .btn.sm{padding:8px 10px}
 .cbox{gap:6px;padding-left:10px}.stop{padding:0 10px}
 .b{max-width:96%;font-size:.92rem}
 .wh,.wf{padding:10px 14px}
}
@media(max-width:340px){.top h1{font-size:.98rem}.hero h2{font-size:1.25rem}.msel{font-size:.85rem}}

/* landscape / short windows (phone sideways, Fold folded-flat etc.) */
@media(max-height:500px){
 :root{--top:calc(46px + var(--sat));--chat:calc(54px + var(--sab))}
 .top{padding-top:var(--sat);height:var(--top)}
 .top h1{font-size:1.05rem}
 .gpu{padding:3px 10px;font-size:.72rem}
 .hero{min-height:0}.ht{padding:12px 18px;gap:5px}.hero h2{font-size:1.35rem}.hero p{margin:0 0 4px;font-size:.85rem}
 .btn{padding:8px 16px}
 h3{margin:12px 0 8px}.tile{min-height:56px;padding:10px}
 .card .th{height:64px}
 .tip{display:none}.chat{padding-top:4px}.inrow{padding-top:3px;padding-bottom:3px}
 .modal{align-items:flex-start;overflow-y:auto}.win{max-height:none;margin:auto}
 .ctop{padding-top:4px;padding-bottom:4px}.msgs{padding-top:8px;padding-bottom:8px;gap:10px}.cin{padding-top:4px;padding-bottom:calc(4px + var(--sab))}
 .empty{padding:6px}.eg{display:none}
}
@media(max-height:500px) and (max-width:960px){
 :root{--top:calc(46px + var(--sat))}
 .top{left:var(--side)}
 .side{padding-top:calc(8px + var(--sat))}.side a{height:48px}
 .hist{position:absolute;z-index:30;top:0;bottom:0;left:0;width:min(260px,70%);transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 30px #000}
 .hist.open{transform:none}.hh{display:flex}
 .hscrim.show{display:block;position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:25}
 #histBtn{display:block}
}
@media(max-height:500px) and (max-width:380px){:root{--top:calc(118px + var(--sat))}}

/* ---- Zyra sleep/wake widget ---- */
.zy{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid #3a1318;border-radius:12px;background:#0d0d0f;font-size:.85rem;white-space:nowrap;flex:none;min-width:0}
.zl{width:10px;height:10px;border-radius:50%;background:#55555c;flex:none}
.zy[data-s=waking] .zl{background:#e8742a;animation:zpulse 1s infinite}
.zy[data-s=awake] .zl{background:#2ecc59;box-shadow:0 0 7px #2ecc59}
.zy[data-s=generating] .zl{background:var(--red);animation:zpulse .8s infinite}
.zy[data-s=error] .zl{background:#ff2b3d;box-shadow:0 0 7px #ff2b3d}
.zy[data-s=asleep] .zt{color:var(--mut)}
.zy[data-s=error] .zt{color:#ff6b78}
@keyframes zpulse{0%,100%{opacity:1;box-shadow:0 0 9px currentColor}50%{opacity:.35;box-shadow:none}}
.zb{background:#1a0c0f;color:var(--tx);border:1px solid #5a1a22;border-radius:8px;padding:5px 11px;font:inherit;font-size:.82rem;cursor:pointer;min-height:30px}
.zb:hover{background:#2a0f15;border-color:var(--red)}
.zb:disabled{opacity:.6;cursor:default}
.wakeprompt{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.wakeprompt .btn{align-self:flex-start}
.m.sys .b{background:#1a0c0f;border:1px solid #5a1a22;color:#ff9aa4}
@media(max-width:560px){.zy{padding:4px 4px 4px 8px;font-size:.75rem;gap:6px}.zb{padding:3px 8px;font-size:.75rem;min-height:30px}.zy .zp{display:none}}
@media(max-width:380px){.zy{order:2;gap:5px;padding:3px 3px 3px 7px}.zb{padding:3px 7px}.top h1{font-size:.95rem;min-width:0;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:340px){.zy #zs{display:none}.zy[data-s=error] #zs{display:none}}
@media(pointer:coarse){.zb{min-height:36px}}

/* ---- Zyra notice (non-error, dismissible, under the top bar) ---- */
.znote{position:fixed;z-index:19;top:calc(var(--top) + 4px);right:max(12px,var(--sar,0px));left:auto;max-width:min(380px,calc(100vw - 24px));display:flex;align-items:flex-start;gap:8px;padding:7px 8px 7px 12px;background:#140a0d;border:1px solid #5a1a22;border-left:3px solid var(--red);border-radius:10px;color:#ffb3ba;font-size:.78rem;line-height:1.3;box-shadow:0 6px 18px #000a}
.znote[hidden]{display:none}
.znote span{flex:1;min-width:0;overflow-wrap:anywhere}
.znote button{background:none;border:0;color:#ff9aa4;font-size:1.1rem;line-height:1;cursor:pointer;padding:0 4px;min-width:28px;min-height:28px}
@media(max-width:560px){.znote{left:8px;right:8px;max-width:none;font-size:.72rem;padding:6px 4px 6px 10px}}


/* ---- Login / accounts / admin ---- */
body.locked>.top,body.locked>.side,body.locked>main,body.locked>.chat,body.locked>.znote,body.locked>.scrim{display:none!important}
.auth{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;overflow-y:auto;
 padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
 background:radial-gradient(circle at 80% 90%,rgba(225,29,46,.28),transparent 40%),radial-gradient(circle at 10% 0,rgba(255,255,255,.05),transparent 35%),var(--bg)}
.acard{width:min(400px,100%);margin:auto;background:var(--panel);border:1px solid #4a1118;border-radius:16px;padding:26px 24px;box-shadow:0 0 34px rgba(225,29,46,.22)}
.acard h1{margin:0 0 4px;font-size:1.5rem;text-align:center}
.acard form{display:flex;flex-direction:column;gap:12px}
.asub{margin:0 0 4px;text-align:center;color:var(--mut)}
.acard input[type=text],.acard input[type=password],.acard input:not([type]){width:100%;background:#0b0b0d;color:var(--tx);border:1px solid #3a1318;border-radius:10px;padding:13px 14px;font:inherit;font-size:16px;min-height:46px}
.acard input:focus{outline:0;border-color:var(--red);box-shadow:0 0 10px rgba(225,29,46,.3)}
.rem{display:flex;align-items:center;gap:10px;color:#c9c9ce;font-size:.9rem;min-height:36px;cursor:pointer}
.rem input{width:20px;height:20px;accent-color:var(--red);flex:none}
.acard .btn{width:100%;min-height:46px}
.amsg{margin:0;min-height:1.2em;font-size:.85rem;text-align:center;overflow-wrap:anywhere}
.amsg.err{color:#ff6b78}.amsg.ok{color:#5be07f}.amsg.info{color:#ffb3ba}
.aform{display:flex;flex-direction:column;gap:10px;max-width:420px;margin:14px 0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.aform h3{margin:0}
.aform input[type=text],.aform input:not([type=checkbox]){background:#0b0b0d;color:var(--tx);border:1px solid #3a1318;border-radius:10px;padding:11px 12px;font:inherit;font-size:16px}
.aform input:focus{outline:0;border-color:var(--red)}
.usr{display:flex;align-items:center;gap:8px;flex:none;min-width:0;font-size:.85rem}
.usr .un{color:var(--mut);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbu{margin-top:auto;padding:8px 10px;color:var(--mut);font-size:.78rem;display:none;overflow-wrap:anywhere}
.sbu b{color:var(--tx)}.sbu+.glowline{margin-top:0}
.prow{display:flex;gap:10px;margin:14px 0 6px;max-width:520px}
.prow input{flex:1;min-width:0;background:#0b0b0d;color:var(--tx);border:1px solid #3a1318;border-radius:10px;padding:11px 12px;font:inherit;font-size:16px}
.prow input:focus{outline:0;border-color:var(--red)}
#v-projects .amsg,#v-admin .amsg{text-align:left}
#v-projects .row{margin-top:12px}
.alist{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:760px}
.ar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.an{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.an b{overflow-wrap:anywhere}.an small{color:var(--mut)}
.st{font-size:.72rem;padding:2px 8px;border-radius:20px;border:1px solid #3a1318;color:#5be07f}
.st.pending{color:#e8a02a;border-color:#5a4a1a}
.ab{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:560px){.usr .un{display:none}.sbu{display:block}.usr .zb{padding:3px 8px;font-size:.75rem}}
@media(min-width:561px) and (max-width:960px){.usr .un{max-width:70px}}
@media(max-width:380px){.usr{order:2}.acard{padding:20px 16px}}
@media(max-height:500px){.auth{align-items:flex-start}.acard{padding:14px 18px}.acard form{gap:8px}}

/* gpu temp + unit toggle */
.gpu .gt{color:var(--mut);font-variant-numeric:tabular-nums;flex:none}.gpu .gt.t-g{color:#3ddc84}.gpu .gt.t-y{color:#f5d90a}.gpu .gt.t-o{color:#ff9f1a}.gpu .gt.t-r{color:#ff3b4e;font-weight:800}
.gpu .tu{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding-left:10px;border-left:1px solid var(--line);color:var(--mut);font-size:.72rem;cursor:pointer;white-space:nowrap;user-select:none}
.gpu .tu input{accent-color:#e11d2e;width:13px;height:13px;margin:0;cursor:pointer}
@media(max-width:560px){.gpu .tu{margin-left:0;padding-left:0;border-left:0;font-size:.64rem}.gpu .tu input{width:11px;height:11px}.gpu .g{max-width:100%}}

@media(min-width:561px) and (max-width:960px){.gpu{display:grid;grid-template-columns:auto auto;column-gap:12px;row-gap:1px;padding:4px 10px;font-size:.72rem;max-width:100%;min-width:0}.gpu .sep,.gpu .bar{display:none}.gpu .tu{grid-column:1/-1;margin:0;padding:0;border:0;justify-self:end;font-size:.64rem}.gpu .gx{grid-column:1/-1}}

@media(min-width:561px) and (max-width:700px){.gpu{grid-template-columns:minmax(0,1fr);row-gap:0;padding:3px 10px;font-size:.68rem}.gpu .g{gap:6px}}

/* overheat guard */
.gpu .gw{color:#ff3b4e;font-weight:700;font-size:.72rem;white-space:nowrap;animation:gwp 1s infinite}
@keyframes gwp{50%{opacity:.55}}
.gban{position:fixed;z-index:21;top:calc(var(--top) + 4px);left:50%;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));display:flex;align-items:flex-start;gap:8px;padding:10px 10px 10px 14px;background:#3a0a10;border:2px solid #ff3b4e;border-radius:10px;color:#fff;font-size:.86rem;font-weight:600;line-height:1.35;box-shadow:0 8px 24px #000c}
.gban[hidden]{display:none}
.gban span{flex:1;min-width:0;overflow-wrap:anywhere}
.gban button{background:none;border:0;color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;padding:0 6px;min-width:30px;min-height:30px}
.gban button[hidden]{display:none}
@media(max-width:560px){.gban{font-size:.76rem;padding:8px 6px 8px 10px}}
body.locked>.gban{display:none!important}

/* admin chat logs */
.logs{margin-top:22px;border-top:1px solid var(--line);padding-top:14px;min-width:0;max-width:100%}
.logs h4{margin:14px 0 6px;font-size:.9rem;color:#e8e8ea}
.lgrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.lgrow select,.lgrow input{flex:1 1 150px;min-width:0;max-width:100%;background:#0d0d10;color:#e8e8ea;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:.9rem;min-height:40px}
.lgrow .btn{flex:0 0 auto}
.lgitem{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:5px 0;min-width:0}
.lgitem.lgdel{border-color:#7a1620}
.lgitem .lgt{font-weight:600;flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.lgitem small{color:var(--mut);flex:1 1 100%;overflow-wrap:anywhere}
.lgdays{display:flex;flex-wrap:wrap;gap:6px}
.lgmsg{background:var(--panel);border:1px solid var(--line);border-left:3px solid #555;border-radius:8px;padding:8px 10px;margin:6px 0;min-width:0}
.lgmsg.bot{border-left-color:var(--red)}
.lgmsg small{display:block;color:var(--mut);overflow-wrap:anywhere}
.lgtx{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.88rem;margin-top:4px}
.lgpath{overflow-wrap:anywhere;word-break:break-all}
.an .fp{display:block;width:100%;color:var(--mut);font-size:.72rem;overflow-wrap:anywhere;word-break:break-all}