/* =============================================================================
   portal.css -- N3 Digital Ocean Server landing page + admin area (2026-09-18)
   Dark, glassy, three-dimensional. Status colours are never alone: every colour
   pairs with a word or a glyph, because red/amber/green mean nothing on a phone
   in sunlight and nothing to a colour-blind teammate.
   ============================================================================= */
:root{
  --bg:#06080f;--bg2:#0b1020;--panel:rgba(255,255,255,.035);--panel2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --fg:#e7ecf6;--mut:#8f9ab3;--dim:#5d6780;
  --good:#22c55e;--warn:#f5b418;--serious:#f97316;--crit:#ef4444;--neutral:#6b7891;--info:#38bdf8;
  --prod:#fb5f7d;--stag:#f5a623;--dev:#38bdf8;--tool:#a3b1c6;--acc:#6d5cff;--acc2:#22d3ee;
  --r:16px;--mono:ui-monospace,"Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--fg);font:15px/1.5 Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1100px 620px at 8% -8%,rgba(109,92,255,.28),transparent 60%),
    radial-gradient(900px 520px at 100% 0,rgba(34,211,238,.16),transparent 55%),
    radial-gradient(700px 500px at 60% 110%,rgba(251,95,125,.12),transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 0,#000 20%,transparent 75%)}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.07);padding:.12em .4em;border-radius:5px;border:1px solid var(--line)}
main{position:relative;z-index:1;max-width:1380px;margin:0 auto;padding:0 clamp(12px,3vw,36px) 4rem}
.wrap-narrow{max-width:960px}

/* ---- top bar ---------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.7rem clamp(12px,3vw,36px);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(to bottom,rgba(6,8,15,.92),rgba(6,8,15,.72));border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.8rem;min-width:0}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:conic-gradient(from 210deg,var(--acc),var(--acc2),var(--prod),var(--acc));box-shadow:0 8px 24px -8px rgba(109,92,255,.8),inset 0 0 0 1px rgba(255,255,255,.25);
  animation:spin 14s linear infinite}
.logo span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#0b1020;font-size:.9rem}
@keyframes spin{to{filter:hue-rotate(360deg)}}
.brand h1{margin:0;font-size:1.05rem;letter-spacing:.01em;white-space:nowrap}
.brand .sub{font-size:.76rem;color:var(--mut);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topright{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:.45em;padding:.32em .75em;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line2);background:var(--panel2);color:var(--fg);white-space:nowrap}
.pill .led{width:.55em;height:.55em}
.btn{display:inline-flex;align-items:center;gap:.45em;padding:.5em .95em;border-radius:10px;font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--fg);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid var(--line2);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 18px -10px rgba(0,0,0,.9);transition:transform .15s,box-shadow .15s,border-color .15s;text-decoration:none!important;line-height:1.1}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.3);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 10px 24px -12px rgba(0,0,0,.9)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--acc),#3b2fd6);border-color:rgba(255,255,255,.28);box-shadow:0 10px 26px -10px rgba(109,92,255,.9)}
.btn.danger{background:linear-gradient(135deg,#b91c1c,#7f1d1d);border-color:rgba(255,255,255,.2)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.sm{padding:.36em .7em;font-size:.74rem;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn .k{font-family:var(--mono);font-size:.72em;opacity:.7;border:1px solid var(--line2);padding:0 .35em;border-radius:4px}

/* ---- status atoms ------------------------------------------------------------ */
.led{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;background:var(--c,var(--neutral));flex:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px var(--c,var(--neutral)),0 0 22px color-mix(in oklab,var(--c,var(--neutral)) 55%,transparent)}
.st-good{--c:var(--good)}.st-warning{--c:var(--warn)}.st-serious{--c:var(--serious)}.st-critical{--c:var(--crit)}.st-neutral{--c:var(--neutral)}.st-info{--c:var(--info)}
.st-good .led,.st-info .led{animation:pulse 2.6s ease-in-out infinite}.st-critical .led,.st-serious .led{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.18em .55em;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:color-mix(in oklab,var(--c,var(--neutral)) 18%,transparent);color:color-mix(in oklab,var(--c,var(--neutral)) 85%,#fff);border:1px solid color-mix(in oklab,var(--c,var(--neutral)) 40%,transparent);white-space:nowrap}
.chip.estate-prod{--c:var(--prod);background:linear-gradient(90deg,#9f1239,#e11d48);color:#fff;border-color:transparent}.chip.estate-stag{--c:var(--stag)}.chip.estate-dev{--c:var(--dev)}.chip.estate-tool{--c:var(--tool)}.chip.estate-none{--c:var(--neutral)}
.hb{display:inline-flex;align-items:center;gap:.3em;font-size:.74rem;font-weight:700;color:var(--c,var(--mut))}
.hb::before{content:attr(data-i);font-size:.9em;line-height:1}
.bar{height:6px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.bar>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in oklab,var(--c,var(--info)) 70%,#fff0),var(--c,var(--info)));box-shadow:0 0 10px color-mix(in oklab,var(--c,var(--info)) 60%,transparent);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}.dim{color:var(--dim)}.small{font-size:.8rem}
.lead{margin:.2rem 0 1rem;color:var(--mut);max-width:62rem;font-size:.9rem}

/* ---- collapsible sections ------------------------------------------------------ */
.sec{margin:1.5rem 0 0;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);overflow:visible}
.sec>h2{display:flex;align-items:center;gap:.7rem;margin:0;padding:.85rem 1.1rem;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;user-select:none;
  border-radius:var(--r);transition:background .2s}
.sec>h2:hover{background:rgba(255,255,255,.03)}
.sec>h2 .sw{width:10px;height:22px;border-radius:3px;background:var(--al,var(--acc2));box-shadow:0 0 14px var(--al,var(--acc2));flex:none}
.sec>h2 .meta{font-size:.74rem;letter-spacing:0;text-transform:none;color:var(--mut);font-weight:500;margin-left:.2rem}
.sec>h2 .chev{margin-left:auto;width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line2);color:var(--mut);transition:transform .35s cubic-bezier(.2,.8,.2,1);font-size:.7rem}
.sec:not(.open)>h2 .chev{transform:rotate(-90deg)}
.sec>.wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.sec:not(.open)>.wrap{grid-template-rows:0fr}
.sec>.wrap>.body{min-height:0;overflow:hidden;padding:0 1.1rem}
.sec.open>.wrap>.body{padding-bottom:1.1rem}
.sec.open.settled>.wrap>.body{overflow:visible}
.a-prod{--al:var(--prod)}.a-stag{--al:var(--stag)}.a-dev{--al:var(--dev)}.a-tool{--al:var(--tool)}.a-acc{--al:#a78bfa}.a-con{--al:#2dd4bf}.a-bak{--al:#4ade80}.a-doc{--al:#facc15}.a-host{--al:var(--acc2)}.a-sys{--al:#f472b6}
.a-prod>h2 .sw{--al:var(--prod)}.a-stag>h2 .sw{--al:var(--stag)}.a-dev>h2 .sw{--al:var(--dev)}.a-tool>h2 .sw{--al:var(--tool)}.a-acc>h2 .sw{--al:#a78bfa}.a-con>h2 .sw{--al:#2dd4bf}.a-bak>h2 .sw{--al:#4ade80}.a-doc>h2 .sw{--al:#facc15}.a-host>h2 .sw{--al:var(--acc2)}.a-sys>h2 .sw{--al:#f472b6}

/* ---- host health tiles ----------------------------------------------------------- */
.hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.7rem;margin:.2rem 0 .6rem}
.ht{position:relative;border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;background:var(--panel);overflow:hidden;transition:transform .2s,border-color .2s}
.ht:hover{transform:translateY(-2px);border-color:var(--line2)}
.ht::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c,transparent);opacity:.9}
.ht-l{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ht-v{font-size:1.45rem;font-weight:700;line-height:1.15;font-family:var(--mono);font-variant-numeric:tabular-nums;margin-top:.1rem}
.ht-s{font-size:.72rem;color:var(--mut);margin-top:.2rem}
.ht .bar{margin:.45rem 0 .1rem}
.ht.clickable{cursor:pointer}.ht.clickable::before{content:"?";position:absolute;right:.55rem;top:.45rem;width:1.05rem;height:1.05rem;border-radius:50%;border:1px solid var(--line2);color:var(--dim);font-size:.66rem;display:grid;place-items:center;transition:color .2s,border-color .2s}
.ht.clickable:hover::before{color:var(--fg);border-color:var(--acc2)}
.drawer.info{width:min(560px,96vw)}.dbody{overflow:auto;padding:1rem}
.ibox{border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;background:var(--panel);margin-bottom:.7rem}
.ibox h4{margin:0 0 .35rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ibox p,.ibox li{font-size:.84rem;margin:.2rem 0}.ibox ul{margin:.2rem 0 .2rem 1.1rem;padding:0;font-family:var(--mono);font-size:.8rem}
.ibox.fix{border-color:color-mix(in oklab,var(--good) 40%,var(--line))}.ibox.fix h4{color:var(--good)}.ibox.fix .btn{margin-top:.5rem}

/* ---- website tiles ("4D": three axes + time) ---------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.2rem;perspective:1500px;padding:.4rem .2rem .6rem}
.tile{position:relative;--rx:0deg;--ry:0deg;--flip:0deg;--mx:50%;--my:50%}
.tile .card{position:relative;aspect-ratio:16/10.5;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);
  transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)))}
.tile.tilting .card{transition:transform .08s linear}
.tile.flipped{--flip:180deg}
.face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:#0a0f1e;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid color-mix(in oklab,var(--c,var(--neutral)) 38%,var(--line));
  box-shadow:0 30px 60px -28px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4),0 0 40px -18px color-mix(in oklab,var(--c,var(--neutral)) 70%,transparent)}
.face.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.16),transparent 46%)}
.tile:hover .face::after{opacity:1}
.shot{position:absolute;inset:0;background:linear-gradient(160deg,#101733,#080b16)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .3s}
.tile:hover .shot img{transform:scale(1.04)}
.tile.st-critical .shot img,.tile.st-serious .shot img,.tile.stale .shot img{filter:grayscale(.55) brightness(.6)}
.noshot{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px)}
.shot.has img+.noshot{display:none}
.ribbon{position:absolute;top:.75rem;left:.75rem;transform:translateZ(46px);display:flex;gap:.4rem;align-items:center}
.ribbon .chip{backdrop-filter:blur(6px);background:color-mix(in oklab,var(--c,var(--neutral)) 26%,rgba(8,11,22,.7))}
.plate{position:absolute;left:0;right:0;bottom:0;padding:.75rem .9rem .7rem;display:flex;align-items:center;gap:.65rem;transform:translateZ(34px);
  background:linear-gradient(to top,rgba(5,8,16,.96) 0%,rgba(5,8,16,.78) 60%,rgba(5,8,16,0) 100%)}
.plate .tl{min-width:0;flex:1}
.plate b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate .host{display:block;font-family:var(--mono);font-size:.7rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate .host em{font-style:normal;font-family:Inter,"Segoe UI",system-ui,sans-serif;color:color-mix(in oklab,var(--c,var(--neutral)) 80%,#fff)}
.plate .w{font-size:.68rem;color:var(--mut);text-align:right;white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.plate .w b{font-size:.72rem;color:color-mix(in oklab,var(--c,var(--neutral)) 85%,#fff);font-weight:700;letter-spacing:.03em}
.tile .tools{display:flex;align-items:center;gap:.45rem;margin-top:.55rem;padding:0 .2rem;font-size:.74rem;color:var(--mut)}
.tile .tools .sp{flex:1}
.tile .tools .cert{font-family:var(--mono)}.cert.warning{color:var(--warn)}.cert.critical{color:var(--crit)}
.back .details{position:absolute;inset:0;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;
  background:linear-gradient(160deg,#121a3a,#0a0f1e)}
.back .details h4{margin:0 0 .25rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.back .details dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem .8rem;margin:0}
.back .details dt{color:var(--mut)}.back .details dd{margin:0;font-family:var(--mono);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tile .card,.shot img,.led,.logo{transition:none!important;animation:none!important}}

/* ---- list view of the websites ------------------------------------------------- */
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--panel2)}
.seg button{border:0;background:transparent;color:var(--mut);font:inherit;font-size:.76rem;font-weight:600;padding:.45em .8em;cursor:pointer}
.seg button.on{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));color:var(--fg)}
.tiles.list{display:block;perspective:none;padding:.2rem .1rem .4rem}
.tiles.list .grp{margin:.8rem 0 .3rem}
.srow{display:grid;grid-template-columns:.8rem 64px minmax(12rem,1.4fr) auto 5.6rem 5rem auto 1fr auto;gap:.7rem;align-items:center;padding:.45rem .7rem;margin:.3rem 0;border:1px solid color-mix(in oklab,var(--c,var(--neutral)) 28%,var(--line));border-radius:11px;background:var(--panel);font-size:.82rem;transition:transform .15s,border-color .15s}
.srow:hover{transform:translateX(3px);border-color:color-mix(in oklab,var(--c,var(--neutral)) 60%,var(--line2))}
.srow .thumb{display:block;width:64px;height:40px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#0a0f1e}
.srow .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.srow .thumb.none{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px)}
.srow .sl{min-width:0}.srow .sl b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .sl .host{display:block;font-family:var(--mono);font-size:.7rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .num{font-size:.76rem}
@media (max-width:900px){.srow{grid-template-columns:.8rem 1fr auto;row-gap:.3rem}.srow .thumb,.srow .num,.srow .dim{display:none}}

/* ---- estates ----------------------------------------------------------------------- */
.estates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;padding:.2rem 0 .4rem}
.estate{border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;background:var(--panel);position:relative;overflow:hidden}
.estate::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--al);box-shadow:0 0 18px var(--al)}
.estate h3{margin:0 0 .3rem;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.estate p{margin:.2rem 0 .6rem;font-size:.82rem;color:var(--mut)}
.estate .num{font-size:.8rem}
.estate .bar{margin:.35rem 0}

/* ---- container tiles (admin) --------------------------------------------------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:.9rem;padding:.3rem 0 .5rem}
.ct{position:relative;border:1px solid color-mix(in oklab,var(--c,var(--neutral)) 30%,var(--line));border-radius:14px;padding:.85rem .95rem .8rem;background:var(--panel);
  box-shadow:0 20px 40px -30px rgba(0,0,0,.9);transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden}
.ct:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--c,var(--neutral)) 60%,var(--line2));box-shadow:0 26px 50px -30px rgba(0,0,0,.95),0 0 40px -20px color-mix(in oklab,var(--c,var(--neutral)) 70%,transparent)}
.ct header{display:flex;align-items:center;gap:.55rem;min-width:0}
.ct header b{font-family:var(--mono);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ct .img{font-family:var(--mono);font-size:.7rem;color:var(--mut);margin:.25rem 0 .55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin:.2rem 0 .5rem}
.ct .stats>div{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:9px;padding:.4rem .5rem;min-width:0}
.ct .stats i{display:block;font-style:normal;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ct .stats b{display:block;font-family:var(--mono);font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct .stats small{display:block;font-size:.62rem;color:var(--dim);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct .stats .bar{margin-top:.3rem;height:4px}
.ct .nets{font-size:.7rem;color:var(--mut);display:flex;flex-wrap:wrap;gap:.3rem .5rem;margin-bottom:.6rem}
.ct .nets span{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:5px;padding:.05em .45em;font-family:var(--mono)}
.ct footer{display:flex;gap:.4rem;flex-wrap:wrap}
.ct .status-word{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:color-mix(in oklab,var(--c,var(--neutral)) 85%,#fff)}
.csum{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.3rem 0 .8rem;font-size:.8rem;color:var(--mut)}
.csum input{background:rgba(0,0,0,.35);border:1px solid var(--line2);color:var(--fg);border-radius:8px;padding:.4em .7em;font:inherit;font-size:.8rem;min-width:14rem}
.grp{margin:.6rem 0 .2rem;display:flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.grp .led{width:.55rem;height:.55rem}.grp[style*="--c"]{color:color-mix(in oklab,var(--c) 80%,#fff)}
.grp::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- tables, lists, kv --------------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:.8rem;margin:.3rem 0}
.tbl th,.tbl td{text-align:left;padding:.42em .6em;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600}
.tbl td.m{font-family:var(--mono);font-size:.76rem}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.55rem;padding:.2rem 0;margin:0;list-style:none}
.links li{border:1px solid var(--line);border-radius:11px;padding:.6rem .8rem;background:var(--panel);transition:transform .15s,border-color .15s}
.links li:hover{transform:translateY(-2px);border-color:var(--line2)}
.links a{font-weight:600;display:block}
.links .n{display:block;font-size:.76rem;color:var(--mut);margin-top:.1rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.45em 1.2em;font-size:.86rem;margin:.4em 0}
.kv dt{color:var(--mut);font-weight:600}.kv dd{margin:0}
.dbs{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.dbs .t{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:.3rem}
.db{margin:.3em 0;font-size:.84rem}
.tag{display:inline-block;font-size:.6em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.15em .5em;border-radius:4px;vertical-align:.15em;margin-left:.35em}
.p-real{background:#7f1d1d;color:#fecaca}.p-scratch{background:#14532d;color:#bbf7d0}.p-derived{background:#78350f;color:#fde68a}
.note{font-size:.8rem;color:var(--mut);margin:.6rem 0 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem}

/* ---- drawers, dialogs, toasts ---------------------------------------------------------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(860px,96vw);z-index:40;transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  background:rgba(8,11,22,.96);border-left:1px solid var(--line2);box-shadow:-30px 0 80px rgba(0,0,0,.7);display:flex;flex-direction:column;backdrop-filter:blur(10px)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.drawer header b{font-family:var(--mono)}
.drawer pre{margin:0;flex:1;overflow:auto;padding:1rem;font:.74rem/1.45 var(--mono);color:#cbd5e1;white-space:pre-wrap;word-break:break-word}
dialog{border:1px solid var(--line2);border-radius:16px;background:#0d1224;color:var(--fg);padding:1.3rem 1.4rem;max-width:32rem;box-shadow:0 40px 100px rgba(0,0,0,.8)}
dialog::backdrop{background:rgba(2,4,10,.7);backdrop-filter:blur(4px)}
dialog h3{margin:0 0 .5rem;font-size:1.05rem}
dialog p{margin:.3rem 0;color:var(--mut);font-size:.88rem}
dialog input{width:100%;margin:.7rem 0;background:rgba(0,0,0,.4);border:1px solid var(--line2);color:var(--fg);border-radius:9px;padding:.55em .8em;font:inherit;font-family:var(--mono)}
dialog .row{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.6rem}
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:50;display:flex;flex-direction:column;gap:.5rem}
.toast{padding:.65rem .9rem;border-radius:12px;font-size:.84rem;border:1px solid var(--line2);background:rgba(13,18,36,.96);box-shadow:0 20px 40px -20px #000;
  animation:toastin .3s cubic-bezier(.2,.8,.2,1)}
.toast.ok{border-color:color-mix(in oklab,var(--good) 50%,transparent)}.toast.err{border-color:color-mix(in oklab,var(--crit) 60%,transparent)}
@keyframes toastin{from{transform:translateY(10px);opacity:0}}
.foot{margin:2.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--mut);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.skeleton{color:var(--dim);font-style:italic;font-size:.85rem;padding:.6rem 0}
@media (max-width:640px){.brand h1{font-size:.95rem}.ct .stats{grid-template-columns:repeat(2,1fr)}.tiles{grid-template-columns:1fr}}