:root{
  --ground:#141726; --raised:#1B1F31; --sunk:#10121F; --edge:#2A2F45;
  --ink:#EDEBE4; --ink-dim:#8B90A6; --ink-faint:#5A5F78;
  --signal:#5FD3A6; --wait:#E0A458; --fault:#E0685F; --link:#7C88D4;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:70px}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px}
h3{font-family:var(--display);font-size:15px;font-weight:500}
h4{font-family:var(--display);font-size:13px;font-weight:500;margin:22px 0 10px;color:var(--ink)}
code{font-family:var(--mono);font-size:.92em}
.muted{color:var(--ink-dim)} .faint{color:var(--ink-faint)}
.sm{font-size:12px} .bad{color:var(--fault)} .ok{color:var(--signal)} .warn{color:var(--wait)}
.trunc{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[hidden]{display:none!important}

.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 20px;background:rgba(20,23,38,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--edge)}
.mark{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ink-faint)}
.pulse.on{background:var(--signal);animation:beat 2.4s ease-out infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(95,211,166,.45)}70%{box-shadow:0 0 0 7px rgba(95,211,166,0)}100%{box-shadow:0 0 0 0 rgba(95,211,166,0)}}
.spacer{flex:1}
.meta{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.nav{display:flex;gap:2px;overflow-x:auto;padding:0 20px;border-bottom:1px solid var(--edge);position:sticky;top:53px;background:var(--ground);z-index:19}
.nav button{background:none;border:none;border-bottom:2px solid transparent;color:var(--ink-faint);padding:11px 14px;font-size:13px;cursor:pointer;white-space:nowrap;font-family:var(--body)}
.nav button:hover{color:var(--ink)}
.nav button.on{color:var(--ink);border-bottom-color:var(--link)}

button,select,input,textarea{font-family:inherit;font-size:13px;color:var(--ink)}
button{background:var(--raised);border:1px solid var(--edge);padding:6px 12px;border-radius:5px;cursor:pointer;transition:border-color .15s}
button:hover{border-color:var(--link)} button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--link);border-color:var(--link);color:#0F1120;font-weight:500}
button.danger:hover{border-color:var(--fault);color:var(--fault)}
button.ghost{background:none;border-color:transparent;color:var(--ink-dim);padding:6px 8px}
button.ghost:hover{color:var(--ink)}
select,input{background:var(--sunk);border:1px solid var(--edge);padding:8px 10px;border-radius:5px;width:100%}
label{display:block;font-size:12px;color:var(--ink-dim);margin-bottom:12px}
label input,label select{margin-top:5px}
label.ck{display:flex;align-items:center;gap:8px;color:var(--ink)}
label.ck input{width:auto;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}

main{max-width:1180px;margin:0 auto;padding:26px 20px}
section{margin-bottom:38px}
h2{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.split{display:grid;grid-template-columns:1.45fr 1fr;gap:26px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

.ladder{background:var(--raised);border:1px solid var(--edge);border-radius:10px;overflow:hidden}
.rung{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--edge)}
.rung:last-child{border-bottom:none}
.rung[data-go]{cursor:pointer}
.rung[data-go]:hover{background:rgba(224,164,88,.09)}
.rung .tier{font-family:var(--mono);font-size:10px;color:var(--ink-faint);padding-top:2px}
.rung .who{min-width:0}
.rung .name{font-family:var(--display);font-size:14px;font-weight:500}
.rung .note{font-size:11.5px;color:var(--ink-faint);margin-top:3px}
.rung .n{font-family:var(--mono);font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}
.track{height:3px;background:var(--edge);border-radius:2px;margin-top:9px;overflow:hidden}
.fill{height:100%;border-radius:2px;width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.rung[data-k] .fill{background:var(--signal)}
.rung[data-k] .n{color:var(--signal)}
.rung.held{background:rgba(224,164,88,.05)}
.rung.held .fill{background:var(--wait)} .rung.held .n{color:var(--wait)}
.rung.held .tier{color:var(--wait);opacity:.6}
.rung.lost .fill{background:var(--fault)} .rung.lost .n{color:var(--fault)}

.panel,.formcard{background:var(--raised);border:1px solid var(--edge);border-radius:10px;padding:18px}
.formcard{margin-bottom:18px}
.formcard h3{margin-bottom:5px}
.formcard>p:first-of-type{margin-bottom:14px}
.sig{margin-bottom:15px} .sig:last-child{margin-bottom:0}
.sig .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.sig .lbl{font-size:12.5px;color:var(--ink-dim)}
.sig .pct{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.sig .track{margin-top:0} .sig .fill{background:var(--link)}
.sig.good .fill{background:var(--signal)} .sig.weak .fill{background:var(--wait)}
.hint{font-size:11.5px;color:var(--ink-faint);line-height:1.55;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge)}

.scroll{overflow-x:auto;border:1px solid var(--edge);border-radius:10px;background:var(--raised)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:11px 14px;border-bottom:1px solid var(--edge);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid rgba(42,47,69,.5);white-space:nowrap;vertical-align:top}
tr:last-child td{border-bottom:none}
tr.clickable{cursor:pointer} tr.clickable:hover{background:rgba(124,136,212,.07)}
td.mono{font-family:var(--mono);font-size:12px}
td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.rowacts{display:flex;gap:5px}
.rowacts button{padding:3px 8px;font-size:11.5px}
.verifyrow td{background:var(--sunk);font-size:12.5px}
.deftable td{white-space:normal;font-size:12.5px;color:var(--ink-dim)}
.deftable td.mono{white-space:nowrap;color:var(--ink)}

.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:3px;border:1px solid;margin-right:4px}
.tag.sent,.tag.on{color:var(--signal);border-color:rgba(95,211,166,.35);background:rgba(95,211,166,.08)}
.tag.parked,.tag.test{color:var(--wait);border-color:rgba(224,164,88,.35);background:rgba(224,164,88,.08)}
.tag.failed,.tag.expired{color:var(--fault);border-color:rgba(224,104,95,.35);background:rgba(224,104,95,.08)}
.tag.pending,.tag.sending,.tag.off{color:var(--ink-dim);border-color:var(--edge)}

.empty{border:1px dashed var(--edge);border-radius:10px;padding:30px 24px;background:rgba(27,31,49,.4)}
.empty h3{margin-bottom:7px}
.empty p{color:var(--ink-dim);font-size:13px;max-width:56ch}
pre.code{font-family:var(--mono);font-size:11.5px;line-height:1.65;background:var(--sunk);border:1px solid var(--edge);border-radius:7px;padding:14px 16px;overflow-x:auto;color:var(--ink-dim);white-space:pre-wrap;word-break:break-word}

.filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filterbar select,.filterbar input{width:auto;min-width:150px}

.copyrow{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.copyrow code{flex:1;background:var(--sunk);border:1px solid var(--edge);border-radius:6px;padding:10px 12px;font-size:11.5px;overflow-x:auto;white-space:nowrap;color:var(--signal)}
.copyrow button{white-space:nowrap}
.reveal{margin-top:14px;padding:14px;border:1px solid rgba(224,164,88,.4);background:rgba(224,164,88,.07);border-radius:8px;font-size:12.5px}
.warnbox{margin-top:14px;padding:12px 14px;border-left:2px solid var(--wait);background:rgba(224,164,88,.06);font-size:12.5px;color:var(--ink-dim);border-radius:0 6px 6px 0}
.warnbox b{color:var(--ink)}
.callout{margin-top:14px;padding:12px 14px;border-left:2px solid var(--signal);background:rgba(95,211,166,.06);font-size:12.5px;color:var(--ink-dim);border-radius:0 6px 6px 0}
.alertstrip{padding:14px 16px;border:1px solid var(--edge);border-radius:9px;background:var(--raised);margin-bottom:18px;font-size:13px;color:var(--ink-dim)}
.alertstrip.warn{border-color:rgba(224,164,88,.4);background:rgba(224,164,88,.06)}
.alertstrip b{color:var(--ink);font-family:var(--mono)}
.alertstrip b.warn{color:var(--wait)}

.reasoncard{background:var(--raised);border:1px solid var(--edge);border-radius:10px;padding:16px 18px;margin-bottom:12px}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:7px}
.rc-n{font-family:var(--mono);font-size:20px;color:var(--wait);font-variant-numeric:tabular-nums}
.rc-foot{margin-top:11px;padding-top:10px;border-top:1px solid var(--edge)}

.doc p{color:var(--ink-dim);font-size:13px;margin-bottom:12px;max-width:70ch}
.doc b{color:var(--ink)}
.doclist{margin:0 0 14px 18px;color:var(--ink-dim);font-size:13px}
.doclist li{margin-bottom:7px}
.listen{padding:14px 16px;border-radius:8px;background:var(--sunk);border:1px solid var(--edge);font-size:13px;color:var(--ink-dim)}
.listen.ok{border-color:rgba(95,211,166,.4);background:rgba(95,211,166,.06);color:var(--ink)}
.listen.wait{border-color:rgba(224,164,88,.35);background:rgba(224,164,88,.05)}

#modal{position:fixed;inset:0;z-index:70;background:rgba(10,12,20,.8);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:32px 18px;overflow-y:auto}
.sheet{background:var(--ground);border:1px solid var(--edge);border-radius:12px;width:100%;max-width:800px;position:relative}
.sheet-body{padding:24px}
#modal-close{position:absolute;top:14px;right:14px;z-index:2}
.insp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--edge)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kv>div{background:var(--raised);border:1px solid var(--edge);border-radius:7px;padding:10px 12px}
.kv span{display:block;font-size:11px;color:var(--ink-faint);margin-bottom:3px}
.kv b{font-weight:500;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.chip{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:3px;border:1px solid var(--edge);color:var(--ink-faint)}
.chip.has{color:var(--signal);border-color:rgba(95,211,166,.4);background:rgba(95,211,166,.08)}
.diag{margin-top:20px;padding:14px 16px;border-left:2px solid var(--link);background:rgba(124,136,212,.07);border-radius:0 7px 7px 0}
.diag strong{display:block;font-family:var(--display);font-size:12px;margin-bottom:5px}
.diag p{color:var(--ink-dim);font-size:12.5px}

.gate{position:fixed;inset:0;z-index:60;background:var(--ground);display:flex;align-items:center;justify-content:center;padding:24px}
.gate .box{width:100%;max-width:370px}
.gate .mark{margin-bottom:26px}
.gate button{width:100%;margin-top:12px;padding:10px}
.gate .err{color:var(--fault);font-size:12px;margin-top:12px;min-height:18px}
.gate .tip{color:var(--ink-faint);font-size:11.5px;margin-top:18px;line-height:1.6}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--raised);border:1px solid var(--signal);color:var(--ink);padding:11px 18px;border-radius:8px;font-size:13px;z-index:90;opacity:0;transition:all .25s;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.bad{border-color:var(--fault)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
