/* SB Stack admin.
   Its own look: warm paper background, flat white panels with hairline rules, square corners,
   Archivo for headings and numbers, monospace for system details, ink for the active state.
   Colour appears only as small squares beside a label; never as coloured lines or rounded pills. */
@font-face{font-family:"Archivo";src:url(/fonts/archivo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --paper:#F5F4F0; --panel:#FFFFFF; --panel-2:#FAF9F6; --ink:#121317; --ink-2:#3B3E46; --muted:#757884;
  --rule:#E3E1DA; --rule-2:#D3D0C7; --brand:#2563EB; --brand-soft:#EAF0FD;
  --up:#1F9D55; --warn:#C27A0E; --down:#D33A2C; --idle:#9A9CA5;
  --display:"Archivo",system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:5px;
}
:root[data-theme="dark"]{
  --paper:#0E0F12; --panel:#16181D; --panel-2:#1B1D23; --ink:#EDEBE6; --ink-2:#C2C0BA; --muted:#8C8E96;
  --rule:#272A31; --rule-2:#343841; --brand:#6E9BFF; --brand-soft:#1A2440; --idle:#6B6E77;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font:800 26px/1.15 var(--display);letter-spacing:-.025em;margin:0}
h2{font:700 15px/1.3 var(--display);margin:0;letter-spacing:-.005em}
h3,.label-mono{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
code{font:12px/1.4 var(--mono);background:var(--panel-2);border:1px solid var(--rule);border-radius:3px;padding:1px 5px;word-break:break-all}
p{margin:0 0 8px}
.sub,.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.mono{font-family:var(--mono);font-size:12px}
.hidden{display:none!important}
.boot{padding:80px 20px;text-align:center;color:var(--muted);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mt{margin-top:16px}
.right{text-align:right}
.row-gap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}

/* ── sign-in ─────────────────────────────────────────────── */
.gate-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.gate-side{background:#121317;color:#F5F4F0;display:flex;flex-direction:column;justify-content:space-between;padding:36px 40px;background-image:linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.05) 0),linear-gradient(0deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.05) 0);background-size:48px 48px}
.gate-brand{display:flex;align-items:center;gap:12px;font:800 18px var(--display);letter-spacing:-.02em}
.logo-mark.inv{background:#F5F4F0;color:#121317}
.gate-tag p{font:800 34px/1.12 var(--display);letter-spacing:-.03em;max-width:15ch;margin:10px 0 0}
.gate-side .label-mono{color:rgba(245,244,240,.55)}
.gate-foot{margin:0}
.gate-note{display:block;margin-top:14px;font-size:13px;color:rgba(245,244,240,.6)}
.gate{align-self:center;justify-self:center;width:min(400px,100% - 32px);padding:32px 0}

.gate h1{font-size:30px}
.gate .sub{margin-top:8px}
.gate-form{display:grid;gap:14px;margin:26px 0 8px}
.gate-field{display:grid;gap:6px}
.gate-field label{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.gate-field input{width:100%;padding:11px 12px;font-size:15px}
.gate-submit{width:100%;justify-content:center;padding:11px;font-size:15px}
.gate-links{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-top:12px}
.gate-msg{border-left:3px solid var(--down);padding:8px 12px;font-size:13px;margin-top:14px;background:var(--panel)}
.gate-msg.ok{border-left-color:var(--up)}
.gate .btn[data-role]{display:grid;justify-items:start;text-align:left;gap:2px;padding:12px 14px;white-space:normal}
.qr{margin:16px 0}
.qr img{width:176px;height:176px;image-rendering:pixelated;border:1px solid var(--rule);background:#fff;padding:6px}
.secret{font:13px/1.5 var(--mono);background:var(--panel);border:1px dashed var(--rule-2);padding:10px;word-break:break-all;user-select:all}
@media (max-width:860px){.gate-page{grid-template-columns:1fr}.gate-side{display:none}}

/* ── top bar ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:1px solid var(--rule)}
.top-in{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 24px;height:58px}
.logo{display:flex;align-items:center;gap:11px;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .word{font:800 16px var(--display);letter-spacing:-.02em}
.logo-mark{width:30px;height:30px;border-radius:4px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:800 12px var(--display);letter-spacing:.02em;flex:none}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink-2);padding:7px 12px;border-radius:4px;white-space:nowrap;font:700 13.5px var(--display);letter-spacing:-.005em}
.nav a:hover{color:var(--ink);background:var(--panel-2);text-decoration:none}
.nav a.on{background:var(--ink);color:var(--paper)}
.nav-dd{display:flex}
.nav-dd .caret{font-size:9px;margin-left:3px;opacity:.6}
.nav-menu{display:none;position:fixed;z-index:40;min-width:210px;background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);padding:6px;box-shadow:0 10px 30px rgba(18,19,23,.12)}
.nav-dd.open .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 10px;border-radius:3px;color:var(--ink-2);font:500 13.5px system-ui,sans-serif;letter-spacing:0;background:none}
.nav-menu a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.env-pill{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:4px 8px;background:var(--warn);color:#fff;border-radius:3px}
.userbtn{background:none;border:1px solid var(--rule);color:var(--ink);border-radius:4px;padding:4px 10px 4px 4px;display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.userbtn:hover{border-color:var(--rule-2)}
.avatar{width:24px;height:24px;border-radius:3px;background:var(--brand);display:grid;place-items:center;font:800 10.5px var(--display);color:#fff}
.menu{position:absolute;right:24px;top:58px;background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);box-shadow:0 10px 30px rgba(18,19,23,.14);min-width:250px;padding:6px;z-index:40}
.menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:3px;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu a:hover,.menu button:hover{background:var(--panel-2);text-decoration:none}

main{max-width:1360px;margin:0 auto;padding:30px 24px 90px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.head .sub{margin:6px 0 0}
.crumbs{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}

/* ── controls ────────────────────────────────────────────── */
.btn{border:1px solid var(--rule-2);background:var(--panel);padding:7px 13px;border-radius:4px;cursor:pointer;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--ink)}
.btn:hover{border-color:var(--ink);text-decoration:none}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{color:var(--down)}
.btn.danger:hover{border-color:var(--down)}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],textarea{border:1px solid var(--rule-2);background:var(--panel);border-radius:4px;padding:8px 10px;max-width:100%;color:var(--ink)}
textarea{width:100%;min-height:96px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* ── panels ──────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.card-b{padding:18px}
.card + .card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid > .card + .card,.conn > .card + .card{margin-top:0}
.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font:700 16px var(--display);margin-bottom:6px}
.banner{display:flex;gap:12px;align-items:baseline;padding:12px 16px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:18px;flex-wrap:wrap}
.banner.warn{background:var(--panel)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);margin-bottom:18px}
.kpis .kpi{border:0;border-radius:0;border-right:1px solid var(--rule)}
.kpis .kpi:last-child{border-right:0}
.kpi{padding:16px 18px}
.kpi .l{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.kpi .v{font:800 30px/1.1 var(--display);letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--muted);margin-top:4px}
.link-card{display:block;padding:18px;color:var(--ink);position:relative}
.link-card::after{content:"→";position:absolute;right:18px;top:16px;font:700 16px var(--display);color:var(--muted)}
.link-card:hover{text-decoration:none;border-color:var(--ink)}
.link-card:hover::after{color:var(--ink)}
.link-card b{font:700 16px var(--display);display:block;margin-bottom:6px}

/* segmented filter */
.chips{display:inline-flex;border:1px solid var(--rule-2);border-radius:4px;overflow:hidden}
.chip{border:0;border-right:1px solid var(--rule-2);background:var(--panel);padding:6px 11px;font-size:12px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.chip:last-child{border-right:0}
.chip.on{background:var(--ink);color:var(--paper)}

/* tables */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
.t th{text-align:left;font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 18px;border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--panel-2)}
.t td{padding:12px 18px;border-bottom:1px solid var(--rule);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr:hover td{background:var(--panel-2)}
.primary-cell{font-weight:600}
.second{color:var(--muted);font-size:12px}
td.second,.t .second.mono{font-family:var(--mono);font-size:11.5px}

/* status: a coloured square and a word */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ink-2)}
.pill i{width:8px;height:8px;border-radius:1px;background:var(--idle);flex:none}
.p-up i{background:var(--up)} .p-warn i{background:var(--warn)} .p-down i{background:var(--down)} .p-brand i{background:var(--brand)} .p-ink i{background:var(--ink)}
.sq{display:inline-block;width:9px;height:9px;border-radius:1px;margin-right:7px;vertical-align:baseline;background:var(--idle);flex:none}
.sq.up{background:var(--up)} .sq.warn{background:var(--warn)} .sq.down{background:var(--down)}

/* left sub-menu inside an area */
.set-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.subnav{display:grid;gap:1px;position:sticky;top:84px}
.subnav a{padding:8px 12px;border-radius:3px;color:var(--ink-2);font-weight:500}
.subnav a.on{background:var(--ink);color:var(--paper)}
.subnav a:hover{text-decoration:none;background:var(--panel)}
.subnav a.on:hover{background:var(--ink)}
.subnav .label{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 12px 8px}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field.full{grid-column:1/-1}
.field > label{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.field input,.field select,.field textarea{width:100%}
.field .help{font-size:12px;color:var(--muted)}
.form-error{color:var(--down);font-size:13px;margin-bottom:10px;border-left:3px solid var(--down);padding-left:10px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 14px;font-size:13.5px;margin:0}
.kv dt{font:500 11px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kv dd{margin:0;min-width:0;word-wrap:break-word}
.switch{position:relative;width:34px;height:18px;flex:none;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--rule-2);border-radius:3px;cursor:pointer;transition:.15s}
.switch span:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:2px;transition:.15s}
.switch input:checked + span{background:var(--ink)}
.switch input:checked + span:before{transform:translateX(16px)}
.conn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.conn .c{border:1px solid var(--rule);border-radius:var(--r);padding:18px;display:grid;gap:12px;align-content:start;background:var(--panel)}
.conn .c > .row-gap b{font:700 15px var(--display)}
.conn .c p{margin:0}
.conn .c .btn,.keybox .btn{justify-self:start}
.keybox{border-top:1px solid var(--rule);padding-top:12px;display:grid;gap:8px}

/* modal */
.modal-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(18,19,23,.45)}
.modal{background:var(--panel);border-radius:var(--r);width:min(540px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;border:1px solid var(--rule-2);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-b{padding:18px 20px;overflow:auto}
.modal-f{padding:12px 20px;border-top:1px solid var(--rule);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;background:var(--panel-2)}
.x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;padding:0 4px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:4px;opacity:0;transition:.2s;z-index:90;font-size:13px;max-width:calc(100% - 32px);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--down);color:#fff}

@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}.conn{grid-template-columns:1fr}}
@media (max-width:760px){
  .top-in{padding:0 14px;gap:12px}
  .logo .word,.userbtn .uname{display:none}
  main{padding:20px 16px 80px}
  .g2,.g3,.form,.set-wrap{grid-template-columns:1fr}
  .subnav{position:static;display:flex;overflow-x:auto}
  .subnav .label{display:none}
  .t th,.t td{padding:10px 12px}
  .hide-sm{display:none}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:8px}
  .kpis .kpi{border-right:0;border-bottom:1px solid var(--rule)}
}