:root{
  --bg:#f6f4f0; --card:#fff; --ink:#1c1a17; --mut:#6f6a62; --line:#e6e1d8;
  --accent:#8a3ffc; --accent-soft:#f2ebff; --good:#137a4b; --warn:#b06d00; --bad:#b3261e;
  --r:14px; --shadow:0 1px 2px rgba(28,26,23,.06),0 8px 24px rgba(28,26,23,.05);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141312; --card:#1e1d1b; --ink:#f2efe9; --mut:#a09a90; --line:#302e2b;
  --accent:#b088ff; --accent-soft:#2a2140; --good:#5fd39b; --warn:#e2ab52; --bad:#ff8a80;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --bg:#141312; --card:#1e1d1b; --ink:#f2efe9; --mut:#a09a90; --line:#302e2b;
  --accent:#b088ff; --accent-soft:#2a2140; --good:#5fd39b; --warn:#e2ab52; --bad:#ff8a80;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:7px 9px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
a{color:var(--accent)}

/* gate */
.gate{min-height:100dvh;display:grid;place-items:center;padding:16px}
.gatecard{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:30px 26px;width:min(380px,100%);text-align:center}
.gatemark{font-size:38px}
.gatecard h1{font-size:20px;margin:6px 0 2px}
.gatecard p{color:var(--mut);margin:0 0 18px;font-size:13px}
.gatecard input{margin-bottom:10px;text-align:center}
.gatecard button{width:100%;background:var(--accent);color:#fff;border:0;border-radius:9px;padding:10px;font-weight:600}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:8px}

/* chrome */
header{position:sticky;top:0;z-index:20;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:10px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-size:15px;display:flex;gap:7px;align-items:center}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav button{background:none;border:0;color:var(--mut);padding:6px 11px;border-radius:99px;font-weight:500}
nav button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.right{margin-left:auto;display:flex;gap:8px;align-items:center}
.ghost{background:none;border:1px solid var(--line);border-radius:8px;padding:5px 11px;color:var(--mut)}
.savestate{font-size:12px;color:var(--mut)}
main{padding:18px 16px 80px;max-width:1180px;margin:0 auto}
.tab{display:none}.tab.on{display:block}

/* bits */
h2{font-size:16px;margin:26px 0 10px}
h2:first-child{margin-top:0}
.sub{color:var(--mut);font-size:13px;margin:-4px 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12px;color:var(--mut);margin-top:3px}
.stat i{display:block;font-style:normal;font-size:11px;color:var(--mut);opacity:.85;margin-top:5px}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:660px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:600;background:color-mix(in srgb,var(--card) 92%,var(--bg))}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 40%,transparent)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:600;border:1px solid var(--line);white-space:nowrap}
.pill.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,var(--line))}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.pill.mut{color:var(--mut)}
.muted{color:var(--mut)}
.small{font-size:12px}
.link{background:none;border:0;color:var(--accent);padding:0;text-decoration:underline;text-underline-offset:2px}

.omsg{display:grid;gap:12px}
.ocard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px}
.ohead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.ohead b{font-size:15px}
.obody{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;white-space:normal}
.mh{font-weight:700;margin:11px 0 3px}
.mb{margin:1px 0 1px 14px;position:relative}
.mb:before{content:"•";position:absolute;left:-13px;color:var(--mut)}
.mp{margin:5px 0}
.orow{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.orow button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:5px 11px;color:var(--mut)}
.orow button.pri{background:var(--accent);color:#fff;border-color:var(--accent)}

.sheet{position:fixed;inset:0;background:rgba(20,18,16,.45);z-index:50;display:grid;place-items:end center;padding:0}
.sheetinner{background:var(--card);width:min(720px,100%);max-height:88dvh;overflow:auto;border-radius:18px 18px 0 0;padding:22px;position:relative}
.sheetclose{position:absolute;top:14px;right:14px;background:none;border:0;font-size:18px;color:var(--mut)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
label.f{display:block;font-size:12px;color:var(--mut);margin-bottom:3px}
.frow{margin-bottom:11px}
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent)}
@media (max-width:640px){
  main{padding:14px 16px 70px}
  header{padding:9px 16px;gap:10px}
  .right{width:100%;margin-left:0}
  .stats{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}