:root {
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#F1F3F6; --sunken:#FAFBFC; --hover:#F3F5F8;
  --line:#E3E6EB; --line-strong:#CDD3DC;
  --ink:#0D1522; --ink-2:#2A3445; --muted:#5D6779; --faint:#8C95A4;
  --accent:#2B4FD8; --accent-hover:#2142BD; --accent-ink:#FFFFFF; --accent-soft:#ECF0FE; --accent-line:#C7D2FA;
  --ok:#137A47; --ok-soft:#E6F5EC; --warn:#9C5700; --warn-soft:#FCF1DD; --crit:#C02D2D; --crit-soft:#FCE9E9; --neutral:#4D586A; --neutral-soft:#EEF1F5;
  --c-in:#14A08A; --c-out:#3E63E6;
  --av1:#E8EEFD; --av1i:#2B4FD8; --av2:#E3F4EF; --av2i:#0F7A66; --av3:#FBEFE2; --av3i:#9A4F0B; --av4:#F1EAFB; --av4i:#6B3FB0; --av5:#EAF0F3; --av5i:#3A5466;
  --code-bg:#0E1420; --code-ink:#D7DEEA; --code-muted:#7A8599; --code-key:#8FB2FF; --code-str:#9EDFC4;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:0 20px 48px -12px rgba(16,24,40,.22), 0 4px 12px rgba(16,24,40,.06);
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0A0D13; --surface:#10141C; --surface-2:#161B25; --sunken:#0C1017; --hover:#171D28;
  --line:#222935; --line-strong:#313A48;
  --ink:#E8EDF4; --ink-2:#C6CEDA; --muted:#8E99AA; --faint:#687387;
  --accent:#7D98FF; --accent-hover:#95ACFF; --accent-ink:#0A0D13; --accent-soft:#19223D; --accent-line:#2E3C6B;
  --ok:#4CCB88; --ok-soft:#0F281C; --warn:#EFB24D; --warn-soft:#2D210D; --crit:#F27474; --crit-soft:#341515; --neutral:#A6B0C0; --neutral-soft:#1B212C;
  --c-in:#2EC4A6; --c-out:#7D98FF;
  --av1:#1B2442; --av1i:#9DB2FF; --av2:#12302A; --av2i:#5FD6BC; --av3:#33240F; --av3i:#F0B66A; --av4:#2A1F3F; --av4i:#C3A4F5; --av5:#1D2830; --av5i:#9FB9CA;
  --code-bg:#070A10; --code-ink:#D7DEEA; --code-muted:#6F7A8E; --code-key:#8FB2FF; --code-str:#9EDFC4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 20px 48px -12px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);
  color-scheme:dark;
} }
:root[data-theme="dark"] {
  --bg:#0A0D13; --surface:#10141C; --surface-2:#161B25; --sunken:#0C1017; --hover:#171D28;
  --line:#222935; --line-strong:#313A48;
  --ink:#E8EDF4; --ink-2:#C6CEDA; --muted:#8E99AA; --faint:#687387;
  --accent:#7D98FF; --accent-hover:#95ACFF; --accent-ink:#0A0D13; --accent-soft:#19223D; --accent-line:#2E3C6B;
  --ok:#4CCB88; --ok-soft:#0F281C; --warn:#EFB24D; --warn-soft:#2D210D; --crit:#F27474; --crit-soft:#341515; --neutral:#A6B0C0; --neutral-soft:#1B212C;
  --c-in:#2EC4A6; --c-out:#7D98FF;
  --av1:#1B2442; --av1i:#9DB2FF; --av2:#12302A; --av2i:#5FD6BC; --av3:#33240F; --av3i:#F0B66A; --av4:#2A1F3F; --av4i:#C3A4F5; --av5:#1D2830; --av5i:#9FB9CA;
  --code-bg:#070A10; --code-ink:#D7DEEA; --code-muted:#6F7A8E; --code-key:#8FB2FF; --code-str:#9EDFC4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 20px 48px -12px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);
  color-scheme:dark;
}
*,*::before,*::after { box-sizing:border-box }
html,body { min-height:100% }
[hidden] { display:none !important }
body { background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased }
button,input,select,textarea { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.i { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle }
.i.sm { width:14px; height:14px } .i.lg { width:18px; height:18px }
.mono { font-family:var(--f-mono); font-size:12.5px }
.muted { color:var(--muted) } .faint { color:var(--faint) }
.num { font-variant-numeric:tabular-nums }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* Shell */
.app { display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh }
.side { background:var(--sunken); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:15 }
.tenant { all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; margin:12px; padding:8px; border-radius:8px; border:1px solid transparent }
.tenant:hover { background:var(--hover); border-color:var(--line) }
.tenant:focus-visible { outline:2px solid var(--accent) }
.logo { width:30px; height:30px; border-radius:8px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; flex:none }
.tenant .t { min-width:0; flex:1 }
.tenant b { display:block; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tenant small { display:block; color:var(--muted); font-size:12px }
.navscroll { flex:1; overflow-y:auto; padding:4px 12px 12px; display:grid; gap:18px; align-content:start }
.navgrp { display:grid; gap:1px }
.navgrp > span { font-size:11px; font-weight:500; color:var(--faint); padding:0 10px 6px; letter-spacing:.04em; text-transform:uppercase }
.nav-i { all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; color:var(--ink-2); font-weight:450; font-size:13.5px; border:1px solid transparent }
.nav-i .i { color:var(--muted) }
.nav-i:hover { background:var(--hover) }
.nav-i:focus-visible { outline:2px solid var(--accent) }
.nav-i[aria-current="page"] { background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-sm); color:var(--ink); font-weight:500 }
.nav-i[aria-current="page"] .i { color:var(--accent) }
.nav-i .count { margin-left:auto; font-size:11.5px; font-weight:500; color:var(--crit); background:var(--crit-soft); border-radius:6px; padding:0 6px; font-variant-numeric:tabular-nums }
.nav-i .tag { margin-left:auto; font-size:10.5px; font-weight:500; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:0 5px }
.side-foot { border-top:1px solid var(--line); padding:12px; display:grid; gap:2px }
.me { display:flex; align-items:center; gap:10px; padding:8px 10px; margin-top:6px }
.me .av { width:30px; height:30px; font-size:12px }
.me b { display:block; font-size:13px; font-weight:500 }
.me small { display:block; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.main { min-width:0; display:flex; flex-direction:column }
.topbar { height:56px; display:flex; align-items:center; gap:12px; padding:0 28px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:env(safe-area-inset-top,0px); z-index:10 }
.iconbtn.menu-btn { display:none }
.crumbs { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13.5px; min-width:0; white-space:nowrap }
.crumbs b { color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis }
.crumbs .i { color:var(--faint) }
.top-r { margin-left:auto; display:flex; align-items:center; gap:8px }
.gsearch { display:flex; align-items:center; gap:8px; width:300px; border:1px solid var(--line); background:var(--surface-2); border-radius:8px; padding:0 8px 0 10px; height:34px; color:var(--muted) }
.gsearch:focus-within { border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft) }
.gsearch input { border:0; outline:none; background:transparent; flex:1; min-width:0; color:var(--ink); font-size:13.5px }
kbd { font-family:var(--f-mono); font-size:11px; color:var(--muted); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 5px; background:var(--surface) }
.env { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; border:1px solid var(--line); border-radius:999px; padding:3px 10px 3px 8px; white-space:nowrap }
.env::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft) }
.iconbtn { all:unset; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:var(--muted); position:relative; flex:none }
.iconbtn:hover { background:var(--hover); color:var(--ink) }
.iconbtn:focus-visible { outline:2px solid var(--accent) }
.iconbtn .dot { position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--crit); border:2px solid var(--surface) }

.content { padding-block:28px 72px; padding-inline:28px; display:grid; gap:20px; width:100%; min-width:0 }
.ph { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap }
.ph h1 { font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0; line-height:1.25; text-wrap:balance }
.ph p { margin:4px 0 0; color:var(--muted); max-width:72ch }
.ph .acts { display:flex; gap:8px; flex-wrap:wrap }
h2 { font-size:14.5px; font-weight:600; margin:0 }
h3 { font-size:13.5px; font-weight:600; margin:0 }
.eyebrow { font-size:11.5px; color:var(--muted); font-weight:500 }

.btn { cursor:pointer; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); font-weight:500; font-size:13.5px; white-space:nowrap; box-shadow:var(--shadow-sm) }
.btn:hover { background:var(--hover) }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.btn.primary:hover { background:var(--accent-hover) }
.btn.sm { height:28px; padding:0 9px; font-size:12.5px; gap:5px; border-radius:7px }
.btn.ghost { border-color:transparent; box-shadow:none; background:transparent }
.btn.ghost:hover { background:var(--hover) }
.btn.danger { color:var(--crit) }
.btn:disabled { opacity:.45; cursor:not-allowed }

.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); min-width:0 }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; min-height:56px }
.card-h .acts { display:flex; gap:8px; flex-wrap:wrap }
.card-h .sub { color:var(--muted); font-size:12.5px; font-weight:400 }
.card-b { padding:16px 18px }
.card-f { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; flex-wrap:wrap }
.g-main { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:20px; align-items:start }
.g-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start }
.stack { display:grid; gap:20px; min-width:0 }

/* KPI */
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.kpi { padding:16px 18px 12px; display:grid; gap:6px }
.kpi .lbl { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; font-weight:500 }
.kpi .row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.kpi .v { font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15 }
.delta { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:500; border-radius:6px; padding:1px 6px; font-variant-numeric:tabular-nums }
.delta.up { color:var(--ok); background:var(--ok-soft) } .delta.down { color:var(--crit); background:var(--crit-soft) } .delta.flat { color:var(--neutral); background:var(--neutral-soft) }
.kpi .meta { font-size:12.5px; color:var(--muted) }
.spark { width:100%; height:30px; display:block; margin-top:2px }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:6px; font-size:12px; font-weight:500; white-space:nowrap; border:1px solid transparent }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
.badge.ok { background:var(--ok-soft); color:var(--ok) }
.badge.warn { background:var(--warn-soft); color:var(--warn) }
.badge.crit { background:var(--crit-soft); color:var(--crit) }
a.badge { text-decoration:none }
.err-text { color:var(--crit); font-size:12px; margin-top:3px }
.badge.neutral { background:var(--neutral-soft); color:var(--neutral) }
.badge.live { background:var(--accent-soft); color:var(--accent) }
.badge.live::before { animation:pulse 1s infinite }
.badge.plain::before { display:none }
@keyframes pulse { 50% { opacity:.25 } }
.proto { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:5px; font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.02em; border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface); white-space:nowrap }
.dir { display:inline-flex; align-items:center; gap:5px; font-size:13px; white-space:nowrap; color:var(--ink-2) }
.dir .i { width:15px; height:15px; padding:2px; border-radius:5px }
.dir.in .i { color:var(--c-in); background:var(--av2) } .dir.out .i { color:var(--c-out); background:var(--av1) }
.av { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:11px; font-weight:600; flex:none; letter-spacing:.02em }
.av.c1 { background:var(--av1); color:var(--av1i) } .av.c2 { background:var(--av2); color:var(--av2i) } .av.c3 { background:var(--av3); color:var(--av3i) } .av.c4 { background:var(--av4); color:var(--av4i) } .av.c5 { background:var(--av5); color:var(--av5i) }
.who { display:flex; align-items:center; gap:10px; min-width:0 }
.who b { font-weight:500; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.who small { display:block; color:var(--muted); font-size:12px }

/* Controls */
.seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:2px; gap:2px }
.seg button { all:unset; cursor:pointer; padding:3px 10px; border-radius:6px; font-size:12.5px; font-weight:500; color:var(--muted); white-space:nowrap }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm), 0 0 0 1px var(--line) }
.seg button:focus-visible { outline:2px solid var(--accent) }
.selw { position:relative; display:inline-flex; align-items:center }
.selw select { appearance:none; -webkit-appearance:none; height:30px; border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; padding:0 30px 0 10px; font-size:13px; cursor:pointer }
.selw .i { position:absolute; right:9px; pointer-events:none; color:var(--muted) }
.field { display:grid; gap:6px; min-width:0; align-content:start }
.field > label, .field > .lab { font-weight:500; font-size:13px }
.field .hint { font-size:12px; color:var(--muted) }
.input, .field select { height:36px; border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; padding:0 10px; width:100%; min-width:0; font-size:13.5px }
.field .selw { display:flex } .field .selw select { width:100%; height:36px }
.input-act { display:flex; gap:8px } .input-act .input { flex:1 } .input-act .btn { height:36px }
.default-submit { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0 }
.input:focus, .field select:focus, .selw select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.tsearch { display:flex; align-items:center; gap:7px; height:30px; border:1px solid var(--line-strong); border-radius:8px; padding:0 10px; background:var(--surface); color:var(--muted); width:240px; max-width:100% }
.tsearch input { border:0; outline:none; background:transparent; flex:1; min-width:0; color:var(--ink); font-size:13px }
.tsearch:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; margin:0; cursor:pointer }
.switch { position:relative; width:34px; height:20px; flex:none; display:inline-block }
.switch input { position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; width:100%; height:100% }
.switch span { position:absolute; inset:0; background:var(--line-strong); border-radius:10px; transition:background .15s; pointer-events:none }
.switch span::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s }
.switch input:checked + span { background:var(--accent) }
.switch input:checked + span::after { transform:translateX(14px) }
.switch input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px }

/* Tables */
.toolbar { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; min-height:56px }
.toolbar .sp { flex:1 }
.bulk { display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100% }
.bulk b { font-weight:500 }
.tw { overflow-x:auto }
table { border-collapse:separate; border-spacing:0; width:100%; min-width:860px }
th { text-align:left; font-size:12px; font-weight:500; color:var(--muted); padding:9px 14px; background:var(--sunken); border-bottom:1px solid var(--line); white-space:nowrap }
th .i { width:12px; height:12px; color:var(--faint); margin-left:2px }
td { padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13.5px }
tbody tr:last-child td { border-bottom:0 }
tr.click { cursor:pointer }
tr.click:hover td { background:var(--hover) }
tr.sel td { background:var(--accent-soft) }
tr.fresh td { animation:flash 1.8s ease-out }
@keyframes flash { from { background:var(--accent-soft) } to { background:transparent } }
td.cb, th.cb { width:40px; padding-right:0 }
td.act { width:44px; text-align:right; padding-left:0 }
.file { font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2) }
.tid { font-family:var(--f-mono); font-size:12px; color:var(--muted) }
.static td { cursor:default }
table.tx { min-width:0 }
table.tx th, table.tx td { white-space:nowrap }
table.tx td { padding:8px 10px; font-size:13px }
table.tx th { padding:9px 10px }
table[data-sortable] th:not([data-nosort]) { cursor:pointer; user-select:none }
table[data-sortable] th:not([data-nosort]):hover { color:var(--ink) }
table[data-sortable] th[aria-sort]::after { content:" ▲"; font-size:9px }
table[data-sortable] th[aria-sort="descending"]::after { content:" ▼" }
table.tx td.cb, table.tx th.cb { padding-right:0 }
table.tx .av { width:22px; height:22px; font-size:10px; border-radius:6px }
table.tx .who { gap:8px }
table.tx .cut { display:block; overflow:hidden; text-overflow:ellipsis }
table.tx .file .cut { max-width:210px }
table.tx .who b.cut { max-width:175px }
table.tx .st, table.tx .act { position:sticky; right:0; background:var(--surface); z-index:1 }
table.tx th.st, table.tx th.act { background:var(--sunken) }
table.tx.withsel .st { right:40px }
table.tx .st { box-shadow:inset 1px 0 0 var(--line) }
table.tx td.act, table.tx th.act { width:40px; min-width:40px }
table.tx .r { text-align:right }
table.tx td.act { padding:2px 8px 2px 0 }
table.tx td.act.st { padding-left:8px }
table.tx .iconbtn { width:28px; height:28px }
.empty { padding:40px 18px; text-align:center; color:var(--muted); display:grid; gap:6px; justify-items:center }

/* Lists */
.attn { display:grid }
.attn button { all:unset; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 18px; border-bottom:1px solid var(--line) }
.attn button:last-child { border-bottom:0 }
.attn button:hover { background:var(--hover) }
.attn button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px }
.attn .sev { width:28px; height:28px; border-radius:7px; display:grid; place-items:center }
.attn .sev.crit { background:var(--crit-soft); color:var(--crit) } .attn .sev.warn { background:var(--warn-soft); color:var(--warn) }
.attn b { font-weight:500; display:block }
.attn span { color:var(--muted); font-size:12.5px }
.attn .go { color:var(--faint); align-self:center }
.bars { display:grid; gap:14px }
.bar-row { display:grid; gap:6px }
.bar-row .top { display:flex; justify-content:space-between; gap:10px; font-size:13px }
.bar-row .top span:last-child { color:var(--muted); font-variant-numeric:tabular-nums }
.bar { height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden }
.bar i { display:block; height:100%; background:var(--accent); border-radius:3px }
.legend { display:flex; gap:14px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; align-items:center }
.legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px }
.chart text { font-family:var(--f-ui); font-size:11px; fill:var(--faint) }
.chart rect.b:hover { opacity:.8 }
.cw { overflow-x:auto }

/* Partner */
.p-layout { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:20px; align-items:start }
.plist { display:grid; max-height:calc(100vh - 220px); overflow-y:auto }
.plist button { all:unset; cursor:pointer; display:flex; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line) }
.plist button:last-child { border-bottom:0 }
.plist button:hover { background:var(--hover) }
.plist button[aria-current="true"] { background:var(--accent-soft); box-shadow:inset 2px 0 0 var(--accent) }
.plist button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px }
.plist .who { flex:1 }
.hdot { width:8px; height:8px; border-radius:50%; flex:none }
.hdot.ok { background:var(--ok) } .hdot.warn { background:var(--warn) } .hdot.crit { background:var(--crit) }
.p-head { display:flex; gap:14px; align-items:center; padding:18px; border-bottom:1px solid var(--line); flex-wrap:wrap }
.p-head .av { width:44px; height:44px; font-size:15px; border-radius:10px }
.p-head .t { flex:1; min-width:200px }
.p-head h2 { font-size:17px }
.p-head .meta { color:var(--muted); font-size:12.5px; display:flex; gap:12px; flex-wrap:wrap; margin-top:2px }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); padding:0 14px; overflow-x:auto }
.tabs button { all:unset; cursor:pointer; padding:11px 8px; font-size:13px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; display:inline-flex; gap:6px; align-items:center }
.tabs button:hover { color:var(--ink) }
.tabs button[aria-selected="true"] { color:var(--ink); border-color:var(--accent) }
.tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px }
.tabs .n { font-size:11px; color:var(--muted); background:var(--surface-2); border-radius:5px; padding:0 5px }
.conn { border:1px solid var(--line); border-radius:10px; overflow:hidden }
.conn-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--sunken); border-bottom:1px solid var(--line); flex-wrap:wrap }
.conn-h .l { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.kv { display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr); margin:0 }
.kv dt, .kv dd { padding:9px 14px; border-bottom:1px solid var(--line); margin:0; font-size:13px }
.kv dt { color:var(--muted) }
.kv dd { overflow-wrap:anywhere }
.kv dt:nth-last-of-type(1), .kv dd:last-child { border-bottom:0 }
.kv.tight { grid-template-columns:minmax(110px,150px) minmax(0,1fr) } .kv.tight dt, .kv.tight dd { padding:3px 0; border-bottom:0 }
.termlog { background:var(--code-bg); color:var(--code-ink); padding:12px 14px; font-family:var(--f-mono); font-size:12px; line-height:1.75; overflow-x:auto; white-space:pre-wrap }
.termlog .e { color:#F79A94 } .termlog .w { color:#F2C77E } .termlog .g { color:#86E0AE } .termlog .d { color:var(--code-muted) }
.callout { display:flex; gap:10px; align-items:flex-start; border-radius:10px; padding:12px 14px; font-size:13px; border:1px solid }
.callout > .i { margin-top:2px }
.callout.warn { background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 25%, transparent) } .callout.warn > .i { color:var(--warn) }
.callout.crit { background:var(--crit-soft); border-color:color-mix(in srgb, var(--crit) 25%, transparent) } .callout.crit > .i { color:var(--crit) }
.callout.info { background:var(--accent-soft); border-color:var(--accent-line) } .callout.info > .i { color:var(--accent) }
.callout b { font-weight:600 }
.exp { display:flex; align-items:center; gap:10px; min-width:160px }
.exp .bar { flex:1; min-width:60px }
.exp .bar i.warn { background:var(--warn) } .exp .bar i.ok { background:var(--ok) } .exp .bar i.crit { background:var(--crit) }

/* API */
pre.code { margin:0; background:var(--code-bg); color:var(--code-ink); font-family:var(--f-mono); font-size:12.5px; line-height:1.7; padding:16px 18px; overflow-x:auto; border-radius:0 0 12px 12px; min-height:240px }
pre.code.r { border-radius:10px; min-height:0 }
pre.code .k { color:var(--code-key) } pre.code .s { color:var(--code-str) } pre.code .c { color:var(--code-muted) }
.keybox { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px }
.keybox code { font-family:var(--f-mono); font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); padding:7px 10px; border-radius:8px; overflow-wrap:anywhere; min-width:0; flex:1 1 280px }

/* Overlays */
.scrim { position:fixed; inset:0; background:rgba(10,15,25,.38); z-index:40; animation:fade .15s }
@keyframes fade { from { opacity:0 } }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(580px,100%); background:var(--surface); z-index:41; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); animation:slide .18s ease-out; border-left:1px solid var(--line) }
@keyframes slide { from { transform:translateX(24px); opacity:0 } }
.d-h { padding:16px 20px 14px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start }
.d-h .t { min-width:0 }
.d-h h2 { font-family:var(--f-mono); font-size:15px; font-weight:500; margin-top:4px; overflow-wrap:anywhere }
.d-h .badges { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap }
.d-b { padding:18px 20px; overflow-y:auto; display:grid; gap:18px; align-content:start; flex:1 }
.d-f { padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
.idcopy { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:12px; color:var(--muted) }
.idcopy:hover { color:var(--ink) }
.timeline { list-style:none; margin:0; padding:0; display:grid }
.timeline li { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:12px; padding-bottom:16px; position:relative }
.timeline li::before { content:""; position:absolute; left:10px; top:22px; bottom:2px; width:1.5px; background:var(--line) }
.timeline li:last-child { padding-bottom:0 } .timeline li:last-child::before { display:none }
.timeline .ic { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--ok-soft); color:var(--ok) }
.timeline .ic .i { width:13px; height:13px; stroke-width:2.25 }
.timeline .pending .ic { background:var(--surface); color:var(--faint); box-shadow:inset 0 0 0 1.5px var(--line-strong) }
.timeline .running .ic { background:var(--accent-soft); color:var(--accent); animation:pulse 1s infinite }
.timeline .error .ic { background:var(--crit-soft); color:var(--crit) }
.timeline b { font-weight:500; display:block; font-size:13.5px }
.timeline .pending b { color:var(--muted) }
.timeline .error b { color:var(--crit) }
.timeline small { color:var(--muted); font-size:12.5px; display:block; overflow-wrap:anywhere }
.timeline time { font-family:var(--f-mono); font-size:11.5px; color:var(--faint); padding-top:2px }
.modal { position:fixed; z-index:41; inset:0; display:grid; place-items:center; padding:16px; pointer-events:none }
.modal .box { pointer-events:auto; background:var(--surface); width:min(680px,100%); max-height:calc(100% - 32px); overflow-y:auto; border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid var(--line); animation:pop .16s ease-out }
@keyframes pop { from { transform:scale(.98); opacity:0 } }
.m-h { padding:18px 20px 0; display:flex; justify-content:space-between; gap:12px; align-items:flex-start }
.m-h h2 { font-size:17px }
.m-h p { margin:2px 0 0; color:var(--muted); font-size:13px }
.form { display:grid; gap:16px; padding:18px 20px 20px }
.row2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.drop { border:1.5px dashed var(--line-strong); border-radius:10px; padding:16px; display:flex; gap:14px; align-items:center; cursor:pointer; position:relative; background:var(--sunken) }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accent-soft) }
.drop input { position:absolute; inset:0; opacity:0; cursor:pointer }
.drop .fi { width:40px; height:40px; border-radius:9px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); flex:none }
.drop b { font-weight:500; font-size:13px; overflow-wrap:anywhere; display:block } .drop.has-file b { font-family:var(--f-mono) }
.drop small { color:var(--muted); font-size:12px }
.pcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px }
.pcard { position:relative; border:1px solid var(--line-strong); border-radius:9px; padding:10px 12px; cursor:pointer; display:grid; gap:2px }
.pcard input { position:absolute; opacity:0; inset:0; cursor:pointer; margin:0 }
.pcard b { font-family:var(--f-mono); font-size:12.5px; font-weight:500 }
.pcard span { font-size:12px; color:var(--muted) }
.pcard:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.pcard:has(input:focus-visible) { outline:2px solid var(--accent) }
.check { display:flex; gap:8px; align-items:center; font-size:13.5px }
details.prev summary { cursor:pointer; color:var(--accent); font-weight:500; font-size:13px; display:inline-flex; gap:6px; align-items:center }
details.prev pre { margin-top:10px }
.m-f { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding-top:4px }
.pop { position:fixed; z-index:42; top:calc(52px + env(safe-area-inset-top,0px)); right:16px; width:min(360px,calc(100% - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); animation:pop .14s ease-out }
.pop .h { padding:12px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center }
.toasts { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:50; display:grid; gap:8px; width:min(380px,calc(100% - 32px)) }
.toast { display:flex; gap:10px; align-items:flex-start; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:13.5px; box-shadow:var(--shadow-lg); animation:tin .2s ease-out }
.toast .i { color:var(--ok); margin-top:2px }
@keyframes tin { from { transform:translateY(8px); opacity:0 } }

@media (max-width: 1180px) {
  .g-main, .p-layout { grid-template-columns:minmax(0,1fr) }
  .arch { grid-template-columns:minmax(0,1fr) }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .gsearch { width:220px }
}
@media (max-width: 900px) {
  .app { grid-template-columns:minmax(0,1fr) }
  .side { position:fixed; left:0; top:0; bottom:0; width:272px; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--shadow-lg); padding-top:env(safe-area-inset-top,0px) }
  .app.navopen .side { transform:none }
  .iconbtn.menu-btn { display:grid }
  .topbar { padding:0 16px; position:static }
  .gsearch, .env { display:none }
  .content { padding-inline:16px; padding-block:20px 64px }
  .g-2, .row2, .phases { grid-template-columns:minmax(0,1fr) }
  .phase { border-right:0; border-bottom:1px solid var(--line) }
  .opt + .opt { border-left:0; border-top:1px solid var(--line) }
  .kv { grid-template-columns:minmax(0,1fr) } .kv dt { border-bottom:0; padding-bottom:0 }
  .plist { max-height:none }
}
@media (max-width: 520px) { .kpis { grid-template-columns:minmax(0,1fr) } .crumbs .hide-s { display:none } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important } }

/* Portal additions */
a { color:var(--accent); text-decoration:none }
a:hover { text-decoration:underline }
a.btn, a.nav-i, a.iconbtn, .plist a, .tabs a { text-decoration:none; color:inherit }
a.btn.primary { color:var(--accent-ink) }
.nav-i { box-sizing:border-box; width:100% }
form.inline { display:inline }
.side form { margin:0 }
.tabs a { cursor:pointer; padding:11px 8px; font-size:13px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; display:inline-flex; gap:6px; align-items:center }
.tabs a:hover { color:var(--ink); text-decoration:none }
.tabs a[aria-selected="true"] { color:var(--ink); border-color:var(--accent) }
.plist a { display:flex; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line) }
.plist a:last-child { border-bottom:0 }
.plist a:hover { background:var(--hover); text-decoration:none }
.plist a[aria-current="true"] { background:var(--accent-soft); box-shadow:inset 2px 0 0 var(--accent) }
.side .tenant-switch { margin:12px; display:grid; gap:6px }
.tenant-switch .tenant { margin:0; width:100%; box-sizing:border-box }
.tenant-switch select { width:100%; height:32px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); padding:0 8px; font-size:13px }
.textarea { border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; padding:8px 10px; width:100%; min-height:110px; font-family:var(--f-mono); font-size:12px; resize:vertical }
.textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.textarea.over { border-color:var(--accent); border-style:dashed; background:var(--accent-soft) }
.input.invalid, .textarea.invalid, select.invalid { border-color:var(--crit) }
.validation-message, .errors li { color:var(--crit); font-size:12.5px }
.errors { margin:0; padding-left:18px; display:grid; gap:2px }
.check input { flex:none }
.checks-row { display:flex; gap:18px; flex-wrap:wrap }
details.more { border-top:1px solid var(--line); padding-top:12px }
details.more summary { cursor:pointer; color:var(--accent); font-weight:500; font-size:13px }
details.more[open] summary { margin-bottom:14px }
.form-grid { display:grid; gap:16px }
.section-t { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:6px 0 -4px }
.copyable { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.copyable code { font-family:var(--f-mono); font-size:13px; background:var(--surface-2); border:1px solid var(--line); padding:7px 10px; border-radius:8px; overflow-wrap:anywhere; flex:1 1 260px; min-width:0 }
.codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; font-family:var(--f-mono); font-size:13px; margin:0; padding:0; list-style:none }
.codes li { background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:5px 10px; text-align:center }
.qr { width:196px; height:196px; background:#fff; padding:8px; border-radius:10px; border:1px solid var(--line); flex:none }
.qr svg { width:100%; height:100%; display:block }
.totp { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap }
.totp .t { flex:1; min-width:220px; display:grid; gap:10px }
.steps { list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted) }
.steps li { display:flex; gap:6px; align-items:center }
.steps li + li::before { content:""; width:18px; height:1px; background:var(--line-strong) }
.steps .n { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-strong); font-size:11px; font-weight:600 }
.steps .cur { color:var(--ink); font-weight:500 } .steps .cur .n { background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.steps .done .n { background:var(--ok-soft); border-color:transparent; color:var(--ok) }
.todo { list-style:none; margin:0; padding:0; display:grid }
.todo li { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line) }
.todo li:last-child { border-bottom:0 }
.todo .n { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; border:1px solid var(--line-strong); color:var(--muted) }
.todo li.done .n { background:var(--ok-soft); color:var(--ok); border-color:transparent }
.todo li.done b { color:var(--muted); font-weight:500 }
.todo span { display:block; color:var(--muted); font-size:12.5px }
.empty .i { width:22px; height:22px; color:var(--faint) }
.dim { opacity:.55 }
td .acts { display:flex; gap:6px; justify-content:flex-end }
.pager { display:flex; gap:8px; align-items:center }
.mt0 { margin-top:0 }

.attn a { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 18px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none }
.attn a:last-child { border-bottom:0 }
.attn a:hover { background:var(--hover) }
a.kpi { color:inherit; text-decoration:none }
a.kpi:hover { border-color:var(--line-strong) }

/* Sign-in pages */
.auth { min-height:100vh; display:grid; place-items:center; padding:24px 16px }
.auth-box { width:min(520px,100%); display:grid; gap:18px }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px }
.auth .card-b { display:grid; gap:16px; padding:22px }
.auth h1 { font-size:20px; margin:0; font-weight:600 }
.auth p { margin:0; color:var(--muted) }
.auth .foot { font-size:12.5px; color:var(--muted); text-align:center }

/* Modals and drawers without script: opened by a query parameter, closed by a link */
.scrim { display:block }
a.scrim { cursor:default }
.modal .box .form .m-f { padding-top:8px }

/* Mobile navigation without script */
#navtoggle { position:absolute; opacity:0; pointer-events:none }
@media (max-width: 900px) {
  .app:has(#navtoggle:checked) .side { transform:none }
  label.menu-btn { display:grid }
}

/* Bulk selection */
label.chk { display:inline-flex; align-items:center; gap:8px; font-size:13px; cursor:pointer }
table.tx th.chk, table.tx td.chk { width:34px; padding-right:0 }
.bulk { padding:10px 16px; border-bottom:1px solid var(--line); background:var(--sunken) }
.bulk .btn[disabled] { opacity:.5; cursor:not-allowed }

/* Grouped form fields */
fieldset.fs { border:1px solid var(--line); border-radius:10px; padding:12px 14px 14px; margin:0; display:grid; gap:12px; min-width:0 }
fieldset.fs legend { padding:0 6px; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.row3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.lbl { font-weight:500; font-size:13px }
.checks { display:flex; gap:8px 18px; flex-wrap:wrap }
details.fs-more { border:1px solid var(--line); border-radius:10px; padding:10px 14px }
details.fs-more summary { cursor:pointer; color:var(--accent); font-weight:500; font-size:13px }
@media (max-width: 900px) { .row3 { grid-template-columns:minmax(0,1fr) } }

/* Message log */
.msglist { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.msglist li + li { border-top:1px solid var(--line) }
.msglist a { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start; padding:9px 12px; color:inherit; text-decoration:none }
.msglist a:hover { background:var(--hover); text-decoration:none }
.msglist b { font-weight:500; display:block; font-size:13px }
.msglist small { color:var(--muted); font-size:12px; display:block; overflow-wrap:anywhere }
.msglist .go { color:var(--faint); align-self:center }
.sev { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:none }
.msglist .sev .i { width:14px; height:14px }
.sev.ok { background:var(--ok-soft); color:var(--ok) } .sev.crit { background:var(--crit-soft); color:var(--crit) } .sev.warn { background:var(--warn-soft); color:var(--warn) }
pre.wire { margin:0; background:var(--sunken); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:var(--f-mono); font-size:12px; line-height:1.6; overflow:auto; max-height:320px; white-space:pre-wrap; overflow-wrap:anywhere }
.wire-h { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.wire-h b { font-weight:600; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.http { font-family:var(--f-mono); font-size:12px; font-weight:500 }
.http.ok { color:var(--ok) } .http.crit { color:var(--crit) } .http.warn { color:var(--warn) }
.drawer.wide { width:min(760px,100%) }
.msglist a[aria-current="true"] { background:var(--accent-soft) }

/* Messages of a transfer: one row each, unfolded with the request and answer as on the wire. */
.msglist details.msg > summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start; padding:9px 12px; cursor:pointer; list-style:none }
.msglist details.msg > summary::-webkit-details-marker { display:none }
.msglist details.msg > summary:hover { background:var(--hover) }
.msglist details.msg[open] > summary { background:var(--accent-soft) }
.msglist details.msg[open] > summary .go { transform:rotate(180deg) }
.msglist .msg-b { padding:10px 12px 14px; display:grid; gap:12px; border-top:1px solid var(--line) }
.toolbar .datef { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px }
.toolbar .datef .input { width:auto; height:32px; padding:0 8px }