/* ---------- design tokens ---------- */
:root{
--bg:#14111a;--panel:#1d1926;--panel2:#241f30;--panel3:#2b2539;--sunk:#141020;
--line:#322b41;--line2:#3d3550;
--ink:#f2edf8;--ink2:#c4bbd2;--muted:#a79dba;
--mint:#6fd8b4;--mint2:#8ce5c8;--mint-ink:#0e2019;--mint-dim:rgba(111,216,180,.13);--mint-line:#3d5c50;
--amber:#f2b76b;--amber-dim:rgba(242,183,107,.11);--amber-line:#6b5330;
--rose:#f27e8c;--rose2:#f79aa6;--rose-ink:#2b0e13;--rose-dim:rgba(242,126,140,.11);--rose-line:#6d3540;
--sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp7:32px;
--r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
--fs-eyebrow:10.5px;--fs-micro:11.5px;--fs-small:12.5px;--fs-body:13.5px;--fs-base:14.5px;
--fs-h3:15px;--fs-h2:18px;--fs-h1:20px;
--tr-eyebrow:.14em;--tr-tight:-.01em;--tr-tighter:-.022em;
--ctl-h:38px;--ctl-bd:#3b3452;--ctl-bg:#141020;
--shadow:0 1px 2px rgba(0,0,0,.34),0 10px 26px -16px rgba(0,0,0,.8);
--ring:0 0 0 2px var(--bg),0 0 0 4px var(--mint);
--mono:ui-monospace,'Cascadia Mono','JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
--sans:'Nunito','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--mint);text-underline-offset:2px}
img,svg,video{max-width:100%}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
code{font-family:var(--mono);font-size:.88em;background:var(--sunk);border:1px solid var(--line);padding:1px 5px;border-radius:var(--r-xs)}
.skip{position:absolute;left:-9999px;top:var(--sp2);z-index:50;background:var(--mint);color:var(--mint-ink);padding:var(--sp2) var(--sp4);border-radius:var(--r-sm);font-weight:800}
.skip:focus{left:var(--sp3)}

/* ---------- controls ---------- */
label{display:block;margin-top:var(--sp4);font-size:var(--fs-small);font-weight:700;color:var(--ink);letter-spacing:0}
input,select,textarea{width:100%;margin-top:6px;height:var(--ctl-h);padding:0 11px;border:1px solid var(--ctl-bd);border-radius:var(--r-sm);background:var(--ctl-bg);color:var(--ink);font-family:inherit;font-size:var(--fs-body);font-weight:600;line-height:calc(var(--ctl-h) - 2px)}
textarea{height:auto;min-height:96px;padding:9px 11px;line-height:1.55;resize:vertical;font-weight:500}
input::placeholder,textarea::placeholder{color:#6f6685;font-weight:500}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--line2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-dim)}
input:disabled,select:disabled,textarea:disabled{opacity:.45;cursor:not-allowed}
input[type=checkbox]{width:auto;height:auto;accent-color:var(--mint);margin:0}
select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a79dba' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;background-size:11px 8px}
select:hover{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23f2edf8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
option{background:var(--panel2);color:var(--ink)}
.mono,input.mono,.log-meta{font-family:var(--mono);font-size:var(--fs-small);font-weight:500;letter-spacing:-.01em}
.w-s{max-width:118px}
.w-m{max-width:210px}
.fh{color:var(--ink2);font-size:var(--fs-micro);margin-top:6px;font-weight:600;line-height:1.5;max-width:74ch}
.fh.warn{color:var(--amber)}
.fh code{font-size:10.5px}
label.inline{display:flex;flex-direction:row;align-items:center;gap:var(--sp2);font-size:var(--fs-small);font-weight:700;color:var(--ink2);margin:var(--sp3) 0 0}

/* ---------- buttons ---------- */
button{margin-top:var(--sp3);min-height:var(--ctl-h);padding:0 var(--sp4);border:1px solid transparent;border-radius:var(--r-sm);background:var(--mint);color:var(--mint-ink);font-family:inherit;font-weight:800;font-size:var(--fs-body);letter-spacing:.005em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);vertical-align:middle}
button:hover:not(:disabled){background:var(--mint2)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:var(--panel2);color:var(--ink);border-color:var(--line2)}
button.ghost:hover:not(:disabled){background:var(--panel3);border-color:var(--muted)}
button.danger{background:var(--rose);color:var(--rose-ink)}
button.danger:hover:not(:disabled){background:var(--rose2)}
button.sm{min-height:28px;padding:0 10px;font-size:var(--fs-micro);margin-top:0}
button.is-busy{opacity:.6;cursor:progress}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp2);align-items:center}
.btn-row form{margin:0}
.btn-row button{margin-top:0}
.cellform{display:inline;margin:0}
.dirty-flag{display:none;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:800;color:var(--amber);margin-left:var(--sp3);vertical-align:middle}
.dirty-flag::before{content:'';width:7px;height:7px;border-radius:var(--r-pill);background:var(--amber)}
form.dirty .dirty-flag{display:inline-flex}

/* ---------- toast / flash ---------- */
.toast{display:flex;align-items:flex-start;gap:10px;padding:var(--sp3) var(--sp4);border-radius:var(--r-md);font-weight:700;font-size:var(--fs-body);border:1px solid var(--mint-line);background:var(--mint-dim);color:var(--mint)}
.toast svg{width:17px;height:17px;flex:none;margin-top:1px}
.toast.bad{border-color:var(--rose-line);background:var(--rose-dim);color:var(--rose2)}

/* ---------- empty states ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp2);padding:var(--sp6) var(--sp4);border:1px dashed var(--line2);border-radius:var(--r-md);background:rgba(0,0,0,.14);text-align:center}
.empty-state svg{width:22px;height:22px;color:var(--muted);opacity:.75}
.empty-state b{font-size:var(--fs-body);font-weight:800;color:var(--ink2)}
.empty-state span{font-size:var(--fs-micro);color:var(--muted);max-width:46ch}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:9px var(--sp3);font-size:var(--fs-body);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800;background:var(--panel2);white-space:nowrap;border-bottom-color:var(--line2)}
.table-wrap th{position:sticky;top:0;z-index:1}
tr:last-child td{border-bottom:none}
table tr:hover td{background:rgba(255,255,255,.022)}
td{font-variant-numeric:tabular-nums}
td.t-num,th.t-num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:var(--fs-small)}
td.t-time{font-family:var(--mono);font-size:var(--fs-small);color:var(--ink2);white-space:nowrap}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#171322}
.table-wrap table{min-width:680px}
.table-wrap.tall{max-height:460px}
.table-wrap.narrow table{min-width:0}
.log-meta{max-width:420px;color:var(--muted);line-height:1.5}
.trunc{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowdim{opacity:.4}
.nowrap{white-space:nowrap}
.pre{white-space:pre-wrap}
.toolbar{display:flex;align-items:flex-end;gap:var(--sp3);flex-wrap:wrap}
.toolbar label{min-width:190px;flex:1;margin-top:0}
.toolbar button{margin-top:0}

/* ---------- icons ---------- */
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-fill{width:16px;height:16px;fill:currentColor;stroke:none;flex:none}


/* ---------- surfaces ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp5);min-width:0;box-shadow:var(--shadow)}
h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:var(--tr-tight);line-height:1.3;display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}
.hint{color:var(--ink2);font-size:var(--fs-small);max-width:78ch}
h3+.hint{margin-top:var(--sp2)}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3)}
.section-title+.hint{margin-top:var(--sp2)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);background:var(--panel2);border:1px solid var(--line);font-size:var(--fs-micro);font-weight:800;color:var(--ink2);white-space:nowrap}
.chip.alert{background:var(--rose-dim);border-color:var(--rose-line);color:var(--rose2)}
@media(prefers-reduced-motion:no-preference){button,input,select,textarea,a{transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}}