/* nsl/admin: terminal-grade console. Tokens first, components after. */
@font-face{font-family:"JBM";src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212}
@font-face{font-family:"JBM";src:url(fonts/jetbrains-mono-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"JBM";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212}
@font-face{font-family:"JBM";src:url(fonts/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"JBM";src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212}
@font-face{font-family:"JBM";src:url(fonts/jetbrains-mono-latin-ext-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"SG";src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"SG";src:url(fonts/space-grotesk-latin-ext-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"SG";src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"SG";src:url(fonts/space-grotesk-latin-ext-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  --bg:#07080a;--bg2:#0c0e11;--panel:#101318;--panel2:#141820;--line:#1c2129;--line2:#2a313c;
  --text:#e7eaee;--muted:#8d95a1;--dim:#58606c;
  --acid:#c6ff33;--acid-ink:#0b0f02;--acid-soft:rgba(198,255,51,.10);--acid-glow:rgba(198,255,51,.35);
  --amber:#ffb22e;--amber-soft:rgba(255,178,46,.12);--red:#ff5454;--red-soft:rgba(255,84,84,.12);
  --blue:#5cb8ff;--blue-soft:rgba(92,184,255,.12);--violet:#b490ff;--violet-soft:rgba(180,144,255,.12);
  --mono:"JBM",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--disp:"SG","JBM",system-ui,sans-serif;
  --r:6px;--r2:10px;--ease:cubic-bezier(.2,.8,.2,1);--fast:140ms;--mid:240ms;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.5 var(--mono);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px}
::selection{background:var(--acid);color:var(--acid-ink)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--acid);outline-offset:2px}
.mono{font-family:var(--mono)} .disp{font-family:var(--disp)}
.muted{color:var(--muted)} .dim{color:var(--dim)} .acid{color:var(--acid)} .red{color:var(--red)} .amber{color:var(--amber)} .blue{color:var(--blue)}
.row{display:flex;align-items:center;gap:8px} .col{display:flex;flex-direction:column;gap:8px} .grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap} .between{justify-content:space-between} .end{justify-content:flex-end}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiny{font-size:11px} .small{font-size:12px} .up{text-transform:uppercase;letter-spacing:.08em}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:1fr 26px;height:100vh}
.side{grid-row:1/2;border-right:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),var(--bg));display:flex;flex-direction:column;padding:14px 10px;gap:4px;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.brand b{font-family:var(--disp);font-size:15px;letter-spacing:.01em}
.brand .glyph{width:26px;height:26px;border-radius:6px;background:var(--acid);color:var(--acid-ink);display:grid;place-items:center;font-weight:700;box-shadow:0 0 24px var(--acid-glow)}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);text-decoration:none;color:var(--muted);position:relative;transition:color var(--fast),background var(--fast)}
.nav a:hover{color:var(--text);background:var(--panel)}
.nav a[aria-current=page]{color:var(--text);background:var(--panel2)}
.nav a[aria-current=page]::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;background:var(--acid);box-shadow:0 0 12px var(--acid)}
.nav kbd{margin-left:auto}
kbd{font:500 10px var(--mono);color:var(--dim);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--bg2)}
.side-foot{margin-top:auto;padding:10px 8px 0;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
.main{overflow:auto;min-width:0;position:relative}
.page{padding:22px 26px 60px;max-width:1500px;animation:enter var(--mid) var(--ease) backwards}
.head{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px}
.head h1{font:700 26px/1.1 var(--disp);margin:0;letter-spacing:-.01em}
.head .crumb{color:var(--dim);font-size:11px;margin-bottom:4px}
.status{grid-column:1/3;border-top:1px solid var(--line);background:var(--bg2);display:flex;align-items:center;gap:16px;padding:0 12px;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden}
.status .sep{width:1px;height:12px;background:var(--line2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);display:inline-block}
.dot.off{background:var(--red);box-shadow:0 0 8px var(--red)} .dot.warn{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.dot.pulse{animation:pulse 1.8s ease-in-out infinite}

/* ---------- surfaces ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;position:relative}
.card h3{margin:0 0 10px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.span2{grid-column:span 2} .span3{grid-column:span 3}
.kpi .v{font:700 30px/1 var(--disp);letter-spacing:-.02em;margin-top:2px}
.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.kpi .s{font-size:11px;color:var(--dim);margin-top:6px}
.kpi::after{content:"";position:absolute;inset:auto 14px 0 14px;height:1px;background:linear-gradient(90deg,transparent,var(--acid-soft),transparent)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel2);padding:6px 11px;border-radius:var(--r);cursor:pointer;transition:border-color var(--fast),background var(--fast),transform var(--fast);white-space:nowrap}
.btn:hover{border-color:var(--muted)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--acid);color:var(--acid-ink);border-color:var(--acid);font-weight:700;box-shadow:0 0 0 0 var(--acid-glow)}
.btn.primary:hover{box-shadow:0 0 20px var(--acid-glow)}
.btn.danger{border-color:rgba(255,84,84,.5);color:var(--red)} .btn.danger:hover{background:var(--red-soft)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)} .btn.ghost:hover{color:var(--text);background:var(--panel2)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sm{padding:3px 8px;font-size:12px}
input.in,select.in,textarea.in{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);padding:7px 10px;outline:none;transition:border-color var(--fast),box-shadow var(--fast)}
input.in:focus,select.in:focus,textarea.in:focus{border-color:var(--acid);box-shadow:0 0 0 3px var(--acid-soft)}
textarea.in{resize:vertical;min-height:110px;line-height:1.55;tab-size:2}
textarea.code{font-size:12px;min-height:200px;color:#d8e4c4}
label.f{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
label.f .hint{text-transform:none;letter-spacing:0;color:var(--dim)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.seg button{border:0;background:transparent;padding:5px 10px;cursor:pointer;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--panel2);color:var(--text);box-shadow:inset 0 -2px 0 var(--acid)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:2px 10px;font-size:12px;cursor:pointer;color:var(--muted);background:transparent}
.chip[aria-pressed=true]{color:var(--acid-ink);background:var(--acid);border-color:var(--acid)}
.switch{width:38px;height:22px;border-radius:999px;background:var(--line2);border:0;position:relative;cursor:pointer;transition:background var(--mid)}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform var(--mid) var(--ease)}
.switch[aria-checked=true]{background:var(--acid)} .switch[aria-checked=true]::after{transform:translateX(16px);background:var(--acid-ink)}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:1px 7px;border-radius:4px;border:1px solid currentColor;line-height:16px;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.st-live,.st-completed,.st-paid,.st-ready,.st-published{color:var(--acid)}
.st-review,.st-needs_review,.st-queued,.st-planning,.st-previews,.st-retry_wait,.st-running,.st-claimed,.st-submitting,.st-pending{color:var(--amber)}
.st-draft{color:var(--muted)} .st-hidden{color:var(--blue)} .st-retired,.st-failed,.st-blocked,.st-cancelled{color:var(--red)}
.tag{font-size:11px;color:var(--muted);border:1px dashed var(--line2);border-radius:4px;padding:0 6px}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--dim);padding:8px 10px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--panel);z-index:1}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr.click{cursor:pointer;transition:background var(--fast)}
.tbl tr.click:hover td{background:var(--panel2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--acid);transform-origin:left;animation:grow .7s var(--ease) backwards}

/* ---------- styles grid ---------- */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:transform var(--mid) var(--ease),border-color var(--fast),box-shadow var(--mid);animation:enter var(--mid) var(--ease) backwards;animation-delay:calc(var(--i,0)*18ms);text-align:left;padding:0;display:flex;flex-direction:column}
.scard:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.scard .cover{aspect-ratio:3/2;background:var(--bg2);position:relative;overflow:hidden}
.scard .cover img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;filter:saturate(.9);transition:transform .6s var(--ease)}
.scard:hover .cover img{transform:scale(1.04)}
.scard .cover .pill{position:absolute;top:8px;left:8px;background:rgba(7,8,10,.75);backdrop-filter:blur(6px)}
.scard .cover .gen{position:absolute;right:8px;bottom:8px;font-size:11px;background:rgba(7,8,10,.75);padding:1px 6px;border-radius:4px}
.scard .body{padding:10px 12px 12px}
.scard .name{font:700 15px var(--disp)}
.slots{display:flex;gap:4px;margin-top:8px}
.slot{flex:1;height:18px;border-radius:3px;border:1px solid var(--line2);font-size:9.5px;display:grid;place-items:center;color:var(--dim);text-transform:uppercase}
.slot.live{background:var(--acid-soft);border-color:rgba(198,255,51,.45);color:var(--acid)}
.slot.review,.slot.draft{border-style:dashed;color:var(--amber);border-color:rgba(255,178,46,.4)}
.slot.hidden{color:var(--blue);border-color:rgba(92,184,255,.35)}

/* ---------- drawer / modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(3,4,6,.6);backdrop-filter:blur(3px);z-index:40;animation:fade var(--mid) backwards}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(860px,96vw);background:var(--bg2);border-left:1px solid var(--line2);z-index:41;display:flex;flex-direction:column;animation:slide var(--mid) var(--ease) backwards;box-shadow:-30px 0 60px rgba(0,0,0,.5)}
.drawer>header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.drawer>header h2{margin:0;font:700 20px var(--disp)}
.drawer>.body{overflow:auto;padding:18px 20px 40px;flex:1}
.drawer>footer{padding:10px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;background:var(--bg)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-4px 0 16px}
.tabs button{border:0;background:transparent;padding:8px 12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--text);border-color:var(--acid)}
.modal{position:fixed;left:50%;top:14vh;transform:translateX(-50%);width:min(560px,94vw);background:var(--bg2);border:1px solid var(--line2);border-radius:12px;z-index:51;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop var(--mid) var(--ease) backwards;max-height:76vh;display:flex;flex-direction:column}
.modal>.body{padding:18px 20px;overflow:auto}
.modal h2{margin:0 0 4px;font:700 18px var(--disp)}
.modal>footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line)}
.scrim.top{z-index:50}

/* ---------- palette ---------- */
.palette{top:12vh;width:min(640px,94vw);padding:0}
.palette input{border:0;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;background:transparent;font-size:15px;padding:16px 18px}
.palette input:focus{box-shadow:none}
.palette ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.palette li{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:var(--r);cursor:pointer;color:var(--muted)}
.palette li[aria-selected=true]{background:var(--panel2);color:var(--text);box-shadow:inset 2px 0 0 var(--acid)}
.palette li .k{margin-left:auto;font-size:11px;color:var(--dim)}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:16px;bottom:40px;z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--acid);padding:10px 14px;border-radius:var(--r);min-width:260px;max-width:420px;animation:pop var(--mid) var(--ease) backwards;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.err{border-left-color:var(--red)} .toast.warn{border-left-color:var(--amber)}

/* ---------- feed ---------- */
.feed{list-style:none;margin:0;padding:0;max-height:430px;overflow:auto}
.feed li{display:grid;grid-template-columns:64px 18px 1fr auto;gap:8px;align-items:center;padding:6px 2px;border-bottom:1px dashed var(--line);font-size:12px;animation:enter var(--mid) var(--ease) backwards;animation-delay:calc(var(--i,0)*25ms)}
.feed time{color:var(--dim);font-size:11px}

/* ---------- prompt viewer ---------- */
pre.prompt{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px;font-size:12px;line-height:1.6;color:#cfd8c0;max-height:60vh;overflow:auto;margin:0}
pre.prompt .h{color:var(--acid);font-weight:700}

/* ---------- images ---------- */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.thumb{aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;background:var(--panel2);border:1px solid var(--line);position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;animation:fade .4s backwards}
.thumb .cap{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:10px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.thumb.sel{outline:2px solid var(--acid);outline-offset:1px}
.skel{background:linear-gradient(90deg,var(--panel) 0%,var(--panel2) 50%,var(--panel) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:var(--r)}

/* ---------- charts ---------- */
svg.chart{width:100%;height:auto;display:block;overflow:visible}
svg.chart .ax{stroke:var(--line);stroke-width:1}
svg.chart text{fill:var(--dim);font:10px var(--mono)}
svg.chart .ln{fill:none;stroke:var(--acid);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);animation:draw 1.1s var(--ease) forwards}
svg.chart .area{fill:url(#acidfade);opacity:0;animation:fade .8s .3s forwards}
svg.chart rect.b{fill:var(--acid);transform-box:fill-box;transform-origin:bottom;animation:rise .6s var(--ease) backwards}
svg.chart rect.b.f{fill:var(--red)} svg.chart rect.b.s{fill:var(--blue)}
svg.chart rect.hm{rx:2}
.legend{display:flex;gap:14px;font-size:11px;color:var(--muted)} .legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ---------- login ---------- */
.gate{min-height:100vh;display:grid;place-items:center;padding:20px}
.gate .box{width:min(420px,100%);background:rgba(16,19,24,.85);border:1px solid var(--line2);border-radius:14px;padding:26px;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(198,255,51,.04);animation:pop .4s var(--ease) backwards;backdrop-filter:blur(8px)}
.gate h1{font:700 22px var(--disp);margin:14px 0 2px}
.boot{font-size:11.5px;color:var(--dim);min-height:76px;margin:12px 0 18px;white-space:pre-line}
.boot .ok{color:var(--acid)}
.caret::after{content:"▋";color:var(--acid);animation:blink 1s steps(1) infinite;margin-left:2px}
.otp{display:flex;gap:6px;justify-content:space-between}
.otp input{width:46px;height:54px;text-align:center;font:700 22px var(--disp);background:var(--bg);border:1px solid var(--line2);border-radius:8px;outline:none}
.otp input:focus{border-color:var(--acid);box-shadow:0 0 0 3px var(--acid-soft)}
.qr{background:#fff;border-radius:10px;padding:10px;width:184px;height:184px;margin:6px auto 10px;display:block}
.err-line{color:var(--red);font-size:12px;min-height:18px;margin-top:8px}

/* ---------- motion ---------- */
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{opacity:0;transform:translateX(-50%) scale(.97)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.gate .box,.toast{animation-name:popc}
@keyframes popc{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes blink{50%{opacity:0}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}

/* ---------- responsive ---------- */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.span3{grid-column:span 2}}
@media (max-width:760px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr 26px}
  .side{grid-row:auto;flex-direction:row;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--line)}
  .brand{padding:0 8px 0 0}.brand b,.side-foot,.nav kbd{display:none}
  .nav{display:flex;flex-direction:row!important;gap:2px}.nav a::before{display:none}.nav a{padding:7px 9px}
  .side .nav a{font-size:0;gap:0}.side .nav a svg{width:18px;height:18px}
  .head{flex-wrap:wrap;align-items:flex-start}.head h1{font-size:22px}
  .main{overflow-x:hidden}
  .status{grid-column:1}
  .page{padding:16px}
  .g4,.g3,.g2{grid-template-columns:1fr}.span2,.span3{grid-column:auto}
  .tbl .hide-m{display:none}
}

/* =====================================================================
   v1.1 layer: motion system, new components, phone layout
   ===================================================================== */
html.locked,html.locked body{overflow:hidden}
.portal{position:relative;z-index:40}

/* living background: slow aurora */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 70% 10%,rgba(198,255,51,.07),transparent 70%),
             radial-gradient(35% 30% at 15% 90%,rgba(92,184,255,.05),transparent 70%),
             radial-gradient(30% 30% at 85% 75%,rgba(180,144,255,.045),transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-3%,2%,0) rotate(4deg)}100%{transform:translate3d(2%,-3%,0) rotate(-3deg)}}

/* page transition */
.page{animation:pageIn .42s var(--ease) backwards}
@keyframes pageIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.head h1{background:linear-gradient(90deg,var(--text) 0%,var(--text) 40%,var(--acid) 50%,var(--text) 60%,var(--text) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleSweep 1.6s .15s var(--ease) backwards}
@keyframes titleSweep{from{background-position:100% 0}to{background-position:0 0}}
.head .crumb::after{content:"_";color:var(--acid);animation:blink 1s steps(1) infinite;margin-left:1px}

/* scroll reveal + stagger */
.reveal{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.reveal.in{opacity:1;transform:none}

/* tilt + shine cards */
.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .25s var(--ease),border-color var(--fast),box-shadow var(--mid),opacity .55s var(--ease)}
.tilt:hover{border-color:var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.reveal.tilt:not(.in){transform:translateY(14px) scale(.985)}
.shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(198,255,51,.10),transparent 60%)}
.tilt:hover .shine{opacity:1}
.card{overflow:hidden}

/* ripple on buttons, chips, cards */
.btn,.chip,.seg button,.scard{position:relative;overflow:hidden}
.ripple{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:currentColor;opacity:.28;pointer-events:none;animation:ripple .65s var(--ease) forwards}
@keyframes ripple{to{transform:scale(28);opacity:0}}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s 1.2s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* brand glitch + nav */
.brand .glyph{animation:glyphPulse 4s ease-in-out infinite}
@keyframes glyphPulse{0%,100%{box-shadow:0 0 18px var(--acid-glow)}50%{box-shadow:0 0 34px var(--acid-glow)}}
.brand b:hover{animation:glitch .5s steps(2) 2}
@keyframes glitch{0%{text-shadow:2px 0 var(--red),-2px 0 var(--blue)}50%{text-shadow:-2px 0 var(--red),2px 0 var(--blue)}100%{text-shadow:none}}
.nav a svg{transition:transform .25s var(--ease)}
.nav a:hover svg{transform:translateX(2px) scale(1.08)}
.nav a[aria-current=page] svg{color:var(--acid)}
.nav a[aria-current=page]::before{animation:navIn .35s var(--ease) backwards}
@keyframes navIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* live dots: radar rings */
.dot.pulse{position:relative;animation:none}
.dot.pulse::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--acid);animation:radar 1.8s ease-out infinite}
.dot.off.pulse::after{border-color:var(--red)}
@keyframes radar{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
svg.chart .ping{fill:none;stroke:#c6ff33;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:ping 2s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:1}to{transform:scale(4);opacity:0}}
svg.chart rect.hm{transform-box:fill-box;transform-origin:center;animation:pop2 .5s var(--ease) backwards}
@keyframes pop2{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}

/* kpi number glow when it lands */
.kpi .v{animation:numGlow 1.4s .2s ease-out backwards}
@keyframes numGlow{from{text-shadow:0 0 18px var(--acid-glow)}to{text-shadow:none}}

/* tables: staggered rows + hover marker */
.tbl tbody tr{animation:rowIn .4s var(--ease) backwards;animation-delay:calc(var(--i,0)*22ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.tbl tr.click td:first-child{position:relative}
.tbl tr.click:hover td:first-child::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--acid);box-shadow:0 0 10px var(--acid)}
.tbl-wrap{overflow:auto;-webkit-overflow-scrolling:touch}

/* style cards */
.scard{animation:cardIn .5s var(--ease) backwards;animation-delay:calc(var(--i,0)*28ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.scard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(198,255,51,.10) 50%,transparent 65%);transform:translateX(-110%);transition:transform .8s var(--ease)}
.scard:hover::after{transform:translateX(110%)}
.scard .slot{transition:transform .2s var(--ease)}
.scard:hover .slot.live{transform:translateY(-2px)}
.badge{position:absolute;right:8px;top:8px;font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(7,8,10,.8);color:var(--amber);border:1px solid rgba(255,178,46,.4)}

/* drawers & modals: springy entrance, staggered content */
.drawer{animation:drawerIn .45s cubic-bezier(.16,1.12,.3,1) backwards}
@keyframes drawerIn{from{transform:translateX(70px);opacity:0}to{transform:none;opacity:1}}
.drawer>.body>*{animation:enter .4s var(--ease) backwards}
.drawer>.body>*:nth-child(2){animation-delay:50ms}.drawer>.body>*:nth-child(3){animation-delay:100ms}.drawer>.body>*:nth-child(4){animation-delay:150ms}
.modal{transform:translateX(-50%);animation:modalIn .32s cubic-bezier(.16,1.15,.3,1) backwards}
@keyframes modalIn{from{opacity:0;transform:translateX(-50%) translateY(12px) scale(.96);filter:blur(4px)}to{opacity:1;transform:translateX(-50%);filter:none}}
.palette li{animation:enter .25s var(--ease) backwards;animation-delay:calc(var(--i,0)*18ms)}

/* toasts: check draw + progress bar */
.toast{display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;animation:toastIn .4s cubic-bezier(.16,1.2,.3,1) backwards}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.toast .tick{color:var(--acid);flex:none}.toast .tick path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .15s var(--ease) forwards}
.toast .tbar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--acid);transform-origin:left;animation:tbar linear forwards}
.toast.err .tbar{background:var(--red)}.toast.warn .tbar{background:var(--amber)}
@keyframes tbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(3,4,6,.88);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:zoom-out;animation:fade .25s backwards;padding:16px}
.lightbox img{max-width:min(92vw,900px);max-height:88vh;max-height:88dvh;border-radius:12px;box-shadow:0 30px 80px #000;animation:zoomIn .4s cubic-bezier(.16,1.15,.3,1) backwards}
@keyframes zoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.lb-close{position:fixed;top:14px;right:14px}
.spinner{width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--acid);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* image drop zone */
.drop{display:flex;gap:12px;align-items:center;border:1px dashed var(--line2);border-radius:var(--r2);padding:10px;transition:border-color var(--fast),background var(--fast)}
.drop.over{border-color:var(--acid);background:var(--acid-soft)}
.drop-img{width:72px;height:96px;flex:none;border-radius:8px;background:var(--bg);display:grid;place-items:center;overflow:hidden;position:relative;color:var(--dim)}
.drop-img img{width:100%;height:100%;object-fit:cover;animation:fade .4s backwards}
.drop-img .spinner{position:absolute}
.drop.busy{opacity:.8}

/* sort select, empty, flags */
.sortsel{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.sortsel select.in{width:auto;padding:5px 8px}
.empty{color:var(--dim);padding:28px;text-align:center;border:1px dashed var(--line2);border-radius:10px;animation:fade .4s backwards}
.flag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:0 6px;border-radius:4px;border:1px solid;white-space:nowrap}
.flag.res{color:var(--red);border-color:rgba(255,84,84,.45)}.flag.arc{color:var(--blue);border-color:rgba(92,184,255,.4)}
.actionbar{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);margin-bottom:14px;align-items:center}
.score{font:700 12px var(--disp);color:var(--acid);background:var(--acid-soft);border-radius:4px;padding:0 6px}

/* ===================== phone layout ===================== */
@media (max-width:760px){
  body{font-size:13.5px}
  .shell{height:100vh;height:100dvh}
  .side{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(12,14,17,.92)}
  .side .nav{flex:1;justify-content:space-between}
  .side .nav a{flex:1;justify-content:center;padding:9px 0}
  .brand{display:none}
  .status{gap:8px;font-size:10px}.status .sep,.status .tag{display:none}
  .page{padding:14px 12px 70px}
  .head{gap:10px;margin-bottom:14px}.head>.grow{flex-basis:100%}
  .head h1{font-size:22px}
  .kpi .v{font-size:26px}
  .card{padding:12px}
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .scard .body{padding:8px}.scard .name{font-size:13px}.slot{height:16px;font-size:8.5px}
  .drawer{width:100vw;border-left:0;animation-name:sheetIn}
  .drawer>header{padding:12px 14px}.drawer>header h2{font-size:17px}
  .drawer>.body{padding:14px 14px 90px}
  .drawer>footer{padding:10px 14px;flex-wrap:wrap}
  .modal{top:auto;bottom:0;left:0;transform:none;width:100vw;max-height:88vh;max-height:88dvh;border-radius:16px 16px 0 0;animation-name:sheetUp}
  .tabs{overflow-x:auto;scrollbar-width:none}.tabs button{white-space:nowrap}
  .seg{overflow-x:auto;max-width:100%;scrollbar-width:none}.seg button{white-space:nowrap}
  .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .toasts{left:12px;right:12px;bottom:34px}.toast{min-width:0;max-width:none}
  .feed li{grid-template-columns:44px 16px 1fr auto}
  .drop{flex-direction:column;align-items:stretch}.drop-img{width:100%;height:160px}
  .tilt{transform:none!important}
  input.in,select.in,textarea.in{font-size:16px}
}
@keyframes sheetIn{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.grid>.kpi:nth-child(2),.grid>.reveal:nth-child(2){--i:1}.grid>.kpi:nth-child(3),.grid>.reveal:nth-child(3){--i:2}.grid>.kpi:nth-child(4),.grid>.reveal:nth-child(4){--i:3}
@media (max-width:760px){.drawer .grid.g4,.page>.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.drawer .kpi .v{font-size:22px}}

/* example gallery editor */
.exgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ex{position:relative;border-radius:10px;animation:cardIn .45s var(--ease) backwards;animation-delay:calc(var(--i,0)*45ms)}
.ex-img{aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--bg);border:1px solid var(--line);position:relative;transition:border-color var(--fast),box-shadow var(--mid),transform var(--mid) var(--ease)}
.ex-img img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;animation:fade .45s backwards;transition:transform .6s var(--ease),filter .3s}
.ex:hover .ex-img{border-color:var(--line2);box-shadow:0 10px 26px rgba(0,0,0,.45);transform:translateY(-2px)}
.ex:hover .ex-img img{transform:scale(1.05)}
.ex.vacant .ex-img{border-style:dashed;border-color:var(--line2)}
.ex.over .ex-img{border-color:var(--acid);box-shadow:0 0 0 3px var(--acid-soft)}
.ex.is-hidden .ex-img img{filter:grayscale(1) brightness(.45)}
.ex-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.ex-busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,8,10,.6)}
.ex-tag{position:absolute;left:6px;top:6px;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;padding:1px 5px;border-radius:4px;background:rgba(7,8,10,.8);color:var(--blue);border:1px solid rgba(92,184,255,.4)}
.ex-tag.up{left:auto;right:6px;color:var(--acid);border-color:rgba(198,255,51,.4)}
.ex-pill{position:absolute;left:6px;bottom:6px}
.ex-cap{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;margin-top:6px}
.ex-actions{display:flex;gap:2px;margin-top:4px;opacity:.55;transition:opacity var(--fast)}
.ex:hover .ex-actions,.ex:focus-within .ex-actions{opacity:1}
.ex-actions .btn{padding:3px 6px}
.flag.ok{color:var(--acid);border-color:rgba(198,255,51,.45);display:inline-flex;align-items:center;gap:4px}
.flag.warn{color:var(--amber);border-color:rgba(255,178,46,.45)}
@media (max-width:1100px){.exgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.exgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ex-actions{opacity:1}}