/* Layout: sticky top bar with tabs; each tab is a stack of panels on a 12-col grid. Klevrs palette: deep plum + sage. */
:root{
  --plum:#160C28; --sage:#80B192;
  --bg:#F5F4F7; --surface:#FFFFFF; --fg:#1C1427; --muted:#615A6E; --line:#E0DBE7; --soft:#EEEAF3;
  --accent:#3F7A57; --bar-a:#80B192; --bar-b:#B6A6D4; --bar-c:#E2B66B;
  --ok:#2F7D4F; --warn:#A86A12; --stop:#B23A3A; --plan:#5B5F9C; --unk:#6B6577;
  --ok-bg:#E2F1E8; --warn-bg:#F7ECD9; --stop-bg:#F6E1E1; --plan-bg:#E6E7F4; --unk-bg:#ECEAF0;
  --display:"Roboto Condensed","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#110A1E; --surface:#1B1330; --fg:#EEEAF4; --muted:#A79FB6; --line:#30264A; --soft:#241A3A;
  --accent:#80B192; --bar-a:#80B192; --bar-b:#7E6AAE; --bar-c:#C79A4E;
  --ok:#7CC79A; --warn:#E3B05C; --stop:#EE8A8A; --plan:#A9ADE8; --unk:#A79FB6;
  --ok-bg:#1D3326; --warn-bg:#3A2C14; --stop-bg:#3A1C1F; --plan-bg:#23244A; --unk-bg:#2A2240; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#110A1E; --surface:#1B1330; --fg:#EEEAF4; --muted:#A79FB6; --line:#30264A; --soft:#241A3A;
  --accent:#80B192; --bar-a:#80B192; --bar-b:#7E6AAE; --bar-c:#C79A4E;
  --ok:#7CC79A; --warn:#E3B05C; --stop:#EE8A8A; --plan:#A9ADE8; --unk:#A79FB6;
  --ok-bg:#1D3326; --warn-bg:#3A2C14; --stop-bg:#3A1C1F; --plan-bg:#23244A; --unk-bg:#2A2240; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.5 var(--body)}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main.wrap{padding-block:24px 40px;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0;text-wrap:balance}
h1{font-size:30px;line-height:1.05}
h2{font-size:18px}
h3{font-size:14px;letter-spacing:.05em}
p{margin:0}
.muted{color:var(--muted)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:var(--plum);color:#fff}
.top-in{max-width:1280px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{font:700 15px/1 var(--display);background:var(--sage);color:var(--plum);padding:7px 7px;border-radius:4px}
.brand b{display:block;font:700 16px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.brand small{display:block;font:400 11.5px var(--mono);color:#BFB4D3}
nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto}
nav a{color:#D9D1E8;text-decoration:none;padding:7px 11px;border-radius:4px;font-weight:500}
nav a:hover{background:#2A1C45;color:#fff}
nav a[aria-current="page"]{background:var(--sage);color:var(--plum)}
nav a:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.top-actions{display:flex;gap:6px}
.top button{font:500 12.5px var(--body);background:#2A1C45;color:#fff;border:1px solid #45336A;border-radius:4px;padding:7px 10px;cursor:pointer}
.top button:hover{border-color:var(--sage)}
.top button[disabled]{opacity:.6;cursor:wait}

/* grid + panels */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.s12{grid-column:span 12}.s8{grid-column:span 8}.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}
@media (max-width:1000px){.s8,.s7,.s6,.s5,.s4{grid-column:span 12}.s3{grid-column:span 6}}
@media (max-width:560px){.s3{grid-column:span 12}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.src{font:400 11.5px var(--mono);color:var(--muted)}
.pagehead{display:flex;flex-direction:column;gap:6px}
.pagehead p{color:var(--muted);max-width:80ch}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi .l{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.kpi .v{font:700 28px/1 var(--display);font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--muted)}

/* pills */
.pill{display:inline-block;font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:4px 7px;border-radius:999px;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok)}.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-stop{background:var(--stop-bg);color:var(--stop)}.p-plan{background:var(--plan-bg);color:var(--plan)}.p-unk{background:var(--unk-bg);color:var(--unk)}

/* layers strip */
.layers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)}
.layer{padding:12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.layer:last-child{border-right:0}
.layer .n{font:600 11px var(--mono);color:var(--accent)}
.layer b{font:700 14px/1.15 var(--display);text-transform:uppercase;letter-spacing:.03em}
.layer span{font-size:12px;color:var(--muted)}
.layer.st-ok{box-shadow:inset 0 3px 0 var(--ok)}.layer.st-warn{box-shadow:inset 0 3px 0 var(--warn)}.layer.st-stop{box-shadow:inset 0 3px 0 var(--stop)}
@media (max-width:1000px){.layers{grid-template-columns:repeat(3,minmax(0,1fr))}.layer:nth-child(3){border-right:0}.layer:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:560px){.layers{grid-template-columns:1fr}.layer{border-right:0;border-bottom:1px solid var(--line)}}

/* channel cards */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ch{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;min-width:0}
.ch:hover{border-color:var(--accent)}
.ch-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ch-h b{font:700 17px var(--display);text-transform:uppercase;letter-spacing:.03em}
.ch dl{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:0;font-size:12.5px}
.ch dt{color:var(--muted)} .ch dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.ch .go{font:500 12px var(--mono);color:var(--accent)}

/* tables */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 10.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--soft)}
td.r,th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:0}
.hbar{display:flex;align-items:center;gap:8px;min-width:120px}
.hbar i{display:block;height:8px;border-radius:2px;background:var(--bar-a);min-width:1px}
.prog{height:8px;background:var(--soft);border-radius:4px;overflow:hidden;min-width:90px}
.prog i{display:block;height:100%;background:var(--bar-a)}
.prog.low i{background:var(--bar-c)}

/* charts */
svg.chart{width:100%;height:auto;display:block}
svg.chart text{fill:var(--muted);font:11px var(--mono)}
svg.chart .grid line{stroke:var(--line)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--c)}

/* funnel steps */
.steps{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.steps div{flex:1 1 120px;padding:12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.steps div:last-child{border-right:0}
.steps b{font:700 24px/1 var(--display);font-variant-numeric:tabular-nums}
.steps span{font-size:12px;color:var(--muted)}
.steps em{font:500 11px var(--mono);color:var(--accent);font-style:normal}

.attn{display:flex;flex-direction:column;gap:6px}
.attn a,.attn div{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:inherit;background:var(--surface)}
.attn a:hover{border-color:var(--accent)}
.attn b{font-family:var(--mono)}
.note{font-size:12.5px;color:var(--muted);border-left:3px solid var(--bar-c);padding:4px 0 4px 10px}
.empty{padding:40px;text-align:center;color:var(--muted)}
.foot{color:var(--muted);font-size:12px;padding-block:0 24px}

/* account, users, forms */
.top .me{color:#D9D1E8;text-decoration:none;font-size:12.5px;padding:7px 6px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .me:hover{color:#fff}
.form{display:flex;flex-direction:column;gap:6px;max-width:420px}
.form label{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:6px}
.form input,.form select{font:14px var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 10px}
.form input:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.form button,.login button{margin-top:10px;font:600 14px var(--body);background:var(--accent);color:var(--surface);border:0;border-radius:4px;padding:10px 14px;cursor:pointer}
.form button[disabled],.login button[disabled]{opacity:.6;cursor:wait}
.btn-sm{font:500 12px var(--body);background:var(--soft);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:4px 8px;cursor:pointer}
.btn-sm:hover{border-color:var(--accent)}
.btn-sm.danger{color:var(--stop)}
.row-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.note.err{border-left-color:var(--stop);color:var(--stop)}
code.pwd{font:600 14px var(--mono);background:var(--soft);padding:2px 6px;border-radius:3px;user-select:all}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--plum);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login{width:100%;max-width:380px;background:var(--surface);border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:18px}
.login .brand b{color:var(--fg)} .login .brand small{color:var(--muted)}
.login form{display:flex;flex-direction:column;gap:6px}
.login label{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:6px}
.login input{font:15px var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:10px}
.login input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.form-error{color:var(--stop);font-size:13px;margin:4px 0 0}
.small{font-size:12px}