/* Hjelmevej shared design system */
:root{
  --bg:#0b0d11; --bg-elev:#14161c; --bg-elev2:#1b1e26; --bg-input:#0e1015;
  --border:#262a33; --border-soft:#1f2229;
  --text:#e9ebef; --muted:#9aa2ae; --faint:#6b7280;
  --accent:#3ddc84; --accent-dim:#33c473; --accent-ink:#06210f;
  --amber:#e6b83c; --red:#e2534a; --blue:#7fb4ff;
  --radius:14px; --radius-sm:10px; --shadow:0 6px 18px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 500px at 50% -200px, #12161f 0%, rgba(18,22,31,0) 70%), var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; min-height:56px;
  background:#0c0e13;
  border-bottom:1px solid var(--border-soft);
}
.topbar .brand{width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(61,220,132,.14); flex:none}
.topbar h1{font-size:15px; font-weight:650; margin:0; letter-spacing:.2px; white-space:nowrap}
.topbar .sub{color:var(--faint); font-size:12px; margin-left:2px}
.topbar .spacer{margin-left:auto}
.topbar .navlink{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--muted); font-size:13px; padding:8px 11px; border-radius:var(--radius-sm);
  border:1px solid transparent;
}
.topbar .navlink:hover{color:var(--text); background:var(--bg-elev); text-decoration:none}
.topbar .iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-sm);
  background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer
}
.topbar .iconbtn:hover{color:var(--text);border-color:#39404b;background:var(--bg-elev)}
.topbar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:18px 16px 40px}
.wrap.narrow{max-width:680px}
.pagehead{margin:6px 2px 16px}
.pagehead h2{font-size:20px;margin:0 0 4px;font-weight:680;letter-spacing:.2px}
.pagehead p{margin:0;color:var(--muted);font-size:13px}

/* cards / sections */
.card,.sec{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.sec{padding:18px 20px;margin-bottom:14px}
.sec h3{font-size:14px;margin:0 0 14px;font-weight:640;display:flex;align-items:center;gap:9px}
.sec h3 .ic{color:var(--accent);display:inline-flex}
.sec h3 .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.hr{height:1px;background:var(--border-soft);border:0;margin:14px 0}

/* forms */
.row{margin-bottom:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px;font-weight:520}
input,select{
  width:100%;padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid #2b2f39;background:var(--bg-input);color:var(--text);
  font-size:15px;outline:none;transition:border-color .15s, box-shadow .15s
}
input:focus,select:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(61,220,132,.14)}
.hint{font-size:11px;color:var(--faint);margin-top:5px}
.checks{display:flex;flex-wrap:wrap;gap:14px}
.checks label{display:inline-flex;align-items:center;gap:8px;color:var(--text);margin:0;font-size:14px;cursor:pointer}
.checks input{width:auto;accent-color:var(--accent)}

/* switch */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:#2b2f39;border-radius:999px;transition:.2s;cursor:pointer}
.switch .sl:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#e9ebef;border-radius:50%;transition:.2s}
.switch input:checked + .sl{background:var(--accent-dim)}
.switch input:checked + .sl:before{transform:translateX(18px)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 17px;border:0;border-radius:var(--radius-sm);
  font-size:14px;font-weight:640;cursor:pointer;transition:transform .05s, filter .15s, background .15s
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--bg-elev2);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:#39404b;background:#20242d}
.btnrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}

/* messages */
.msg{font-size:12.5px;color:var(--faint);min-height:16px}
.msg.ok{color:var(--accent)} .msg.err{color:#ff8f8f} .msg.busy{color:var(--amber)}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:999px;background:#2a2d35;color:var(--muted)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#8a90a0}
.pill.live{background:rgba(61,220,132,.15);color:#7ce9a8}
.pill.live .dot{background:var(--accent);animation:pulse 2s infinite}
.pill.recon{background:rgba(230,184,60,.16);color:var(--amber)}
.pill.recon .dot{background:var(--amber)}
.pill.off{background:rgba(226,83,74,.16);color:#ff8f8f}
.pill.off .dot{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* hub cards */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.hubcard{display:flex;flex-direction:column;gap:10px;padding:18px;text-decoration:none;color:var(--text);
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s, transform .08s, background .15s}
.hubcard:hover{border-color:#3a4250;background:#171a21;text-decoration:none;transform:translateY(-2px)}
.hubcard .ci{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(61,220,132,.12);color:var(--accent)}
.hubcard .ci svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.hubcard .ct{font-weight:640;font-size:15px}
.hubcard .cd{color:var(--muted);font-size:12.5px}

/* stat chips */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{background:var(--bg-input);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:12px 14px}
.stat .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:19px;font-weight:680;margin-top:3px}
.stat .v small{font-size:12px;color:var(--muted);font-weight:500}

footer{padding:16px;color:var(--faint);font-size:11px;text-align:center}

/* mobile */
@media (max-width:560px){
  .grid2{grid-template-columns:1fr}
  .topbar h1 .sub{display:none}
  .wrap{padding:14px 12px 32px}
  .btn{padding:12px 16px}
  .topbar .navlink span.lbl{display:none}
}

/* unified header */
.topbar .wordmark{font-size:15px;font-weight:650;color:var(--text);text-decoration:none;letter-spacing:.2px;white-space:nowrap}
.topbar .nav{display:flex;gap:2px;margin-left:10px}
.topbar .nav a{padding:7px 12px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:520;text-decoration:none}
.topbar .nav a:hover{color:var(--text);background:var(--bg-elev);text-decoration:none}
.topbar .nav a.active{color:var(--accent);background:rgba(61,220,132,.12)}
.topbar .out{margin-left:auto;color:var(--faint);font-size:12.5px;text-decoration:none;padding:7px 10px;border-radius:8px}
.topbar .out:hover{color:var(--text);background:var(--bg-elev);text-decoration:none}
@media(max-width:520px){.topbar .wordmark{display:none}.topbar .nav a{padding:7px 9px;font-size:12px}.topbar .out{font-size:11px}}