:root{color-scheme:light dark;
 --bg:#ffffff;--bg2:#f2f2f7;--card:#ffffff;--fill:rgba(118,118,128,.12);--fill2:rgba(118,118,128,.20);
 --fg:#0f1419;--mut:#536471;--line:rgba(60,60,67,.16);--acc:#007aff;--acc-fg:#ffffff;--acc-soft:rgba(0,122,255,.12);
 --ok:#248a3d;--ok-soft:rgba(52,199,89,.14);--bad:#d70015;--bad-soft:rgba(255,59,48,.12);--warn:#b25000;--warn-soft:rgba(255,149,0,.14);
 --bar:rgba(255,255,255,.78);--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
 --r-lg:20px;--r-md:14px;--r-sm:10px;--tab-h:52px}
@media (prefers-color-scheme:dark){:root{
 --bg:#000000;--bg2:#000000;--card:#16181c;--fill:rgba(118,118,128,.24);--fill2:rgba(118,118,128,.34);
 --fg:#e7e9ea;--mut:#8b98a5;--line:#2f3336;--acc:#0a84ff;--acc-fg:#ffffff;--acc-soft:rgba(10,132,255,.18);
 --ok:#30d158;--ok-soft:rgba(48,209,88,.16);--bad:#ff453a;--bad-soft:rgba(255,69,58,.16);--warn:#ff9f0a;--warn-soft:rgba(255,159,10,.16);
 --bar:rgba(0,0,0,.72);--shadow:none}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg2);color:var(--fg);font:17px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;letter-spacing:-.01em}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
b,strong{font-weight:600}
.mut{color:var(--mut)}.sm{font-size:15px}.xs{font-size:13px}.bad{color:var(--bad)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}
.mt{margin-top:12px}.mb{margin-bottom:12px}.grow{flex:1;min-width:200px}.full{width:100%}.num{width:5.5em}
.pre{white-space:pre-wrap;word-break:break-word}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:1fr;min-height:100vh}
.side{display:none}
.main{min-width:0;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
 padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--line)}
.top h1{margin:0;font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fill2);color:var(--fg);font-weight:700;font-size:15px;flex:none}
.avatar.lg{width:44px;height:44px;font-size:18px}
.content{max-width:640px;margin:0 auto;padding:12px 16px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
 background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line)}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mut);font-size:10.5px;font-weight:500;text-decoration:none}
.tabbar a.on{color:var(--acc)}
.ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on .ico{stroke-width:2.3}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
@media (min-width:900px){
 body{background:var(--bg)}
 .app{grid-template-columns:260px minmax(0,700px);justify-content:center;background:var(--bg)}
 .side{display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;padding:20px 12px;border-right:.5px solid var(--line);background:var(--bg)}
 .side .brand{display:flex;align-items:center;gap:10px;padding:6px 12px 18px;font-size:20px;font-weight:800;color:var(--fg)}
 .side .brand img{width:32px;height:32px;border-radius:8px}
 .side a.nav{position:relative;display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:999px;color:var(--fg);font-size:19px;text-decoration:none}
 .side a.nav:hover{background:var(--fill)}
 .side a.nav.on{font-weight:700}
 .side a.nav .badge{position:static;margin-left:auto}
 .side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:999px}
 .side .me .grow{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .side .me button{min-height:34px;padding:0 12px;font-size:14px}
 .tabbar{display:none}
 .main{padding-bottom:40px;background:var(--bg);border-right:.5px solid var(--line);min-height:100vh}
 .top{padding:16px 24px}
 .content{max-width:none;padding:16px 24px}
}

/* ---------- surfaces ---------- */
.card{background:var(--card);border-radius:var(--r-lg);padding:16px;margin:0 0 12px;box-shadow:var(--shadow)}
@media (prefers-color-scheme:dark){.card{border:.5px solid var(--line)}}
.card > b:first-child,.card-title{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.section-h{margin:22px 4px 8px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.flash{background:var(--acc-soft);box-shadow:none;border:0;font-size:15px}
.flash.err{background:var(--bad-soft)}
.mode{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-md);margin:0 0 12px;font-size:14px;background:var(--acc-soft)}
.mode.live{background:var(--bad-soft)}
.mode .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}.mode.live .dot{background:var(--bad)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
@media (min-width:600px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{margin:0;display:flex;flex-direction:column;gap:2px}
.stat b{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .mut{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}

/* ---------- controls ---------- */
button,.btn{font:inherit;font-size:16px;font-weight:600;min-height:44px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;
 background:var(--fill);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .08s ease,opacity .15s}
button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}
button.ok,.btn.primary{background:var(--acc);color:var(--acc-fg)}
button.bad{background:var(--bad-soft);color:var(--bad)}
input,select,textarea{font:inherit;font-size:17px;padding:11px 14px;border-radius:var(--r-sm);border:0;background:var(--fill);color:var(--fg);min-height:44px;outline:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--acc-soft)}
textarea{line-height:1.45;resize:vertical}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--acc);vertical-align:-5px;margin-right:6px}
label.sm{display:inline-flex;align-items:center;gap:8px;color:var(--mut)}
form{margin:0}
.segmented{display:flex;gap:2px;padding:2px;margin:0 0 14px;background:var(--fill);border-radius:10px;overflow-x:auto}
.segmented a,.segmented span{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:7px 6px;border-radius:8px;color:var(--fg);font-size:13px;font-weight:500;text-transform:capitalize;text-decoration:none}
.segmented a.on,.segmented span.on{background:var(--card);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:0 0 14px;scrollbar-width:none}
.chips a{flex:none;padding:6px 14px;border-radius:999px;background:var(--fill);color:var(--fg);font-size:14px;text-decoration:none}
.chips a.on{background:var(--fg);color:var(--bg)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--fill);color:var(--mut);font-size:13px;font-weight:600;border:0;text-decoration:none}
.pill.on{background:var(--fg);color:var(--bg)}
.pill.spam{background:var(--bad-soft);color:var(--bad)}.pill.warnp{background:var(--warn-soft);color:var(--warn)}
.pill.live{background:var(--bad-soft);color:var(--bad)}.pill.test{background:var(--acc-soft);color:var(--acc)}

/* ---------- timeline items (watchlist accounts, drafts) ---------- */
.who{display:flex;gap:12px;align-items:flex-start}
.who .meta{min-width:0;flex:1}
.who .name{font-weight:700;color:var(--fg)}
.who .handle{color:var(--mut)}
.src{margin-top:10px;padding:12px 14px;border:.5px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.variant{margin-top:12px;padding:14px;border-radius:var(--r-md);background:var(--fill)}
.variant .pre{font-size:17px;line-height:1.45}
.spamlist{margin:8px 0 0;padding-left:20px;color:var(--mut);font-size:14px}
.spamlist li{margin:2px 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.post{font-size:17px;line-height:1.45;margin:4px 0 0}
a.qcard{display:block;color:var(--fg);text-decoration:none}a.qcard:hover{background:var(--fill);text-decoration:none}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
details summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:18px;line-height:1}
details[open] summary::before{transform:rotate(90deg)}
button.full{width:100%}

/* ---------- list rows (iOS inset grouped) ---------- */
.card.list{padding:0;overflow:hidden}
.listrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 16px;color:var(--fg);text-decoration:none}
.listrow + .listrow{border-top:.5px solid var(--line)}
.listrow:hover{background:var(--fill);text-decoration:none}
.lr-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.lr-num{display:flex;flex-direction:column;align-items:flex-end}
.lr-num b{font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.chev{color:var(--mut);font-size:24px;line-height:1}
.clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pill.st-completed{background:var(--ok-soft);color:var(--ok)}.pill.st-partial{background:var(--warn-soft);color:var(--warn)}
.pill.st-failed,.pill.st-interrupted{background:var(--bad-soft);color:var(--bad)}.pill.st-running{background:var(--acc-soft);color:var(--acc)}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{display:inline-flex;gap:4px;align-items:center;padding:5px 10px;border-radius:999px;background:var(--fill);font-size:13px;color:var(--mut)}
.chip b{color:var(--fg);font-weight:600}
details.card > summary{display:flex;align-items:center;gap:8px;width:100%}details.card > summary > .xs{margin-left:auto}
.steps{margin-top:10px}
.step{padding:10px 0;border-top:.5px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.step.fail .stepno{background:var(--bad-soft);color:var(--bad)}
.stepno{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:var(--fill);font-size:12px;font-weight:700;color:var(--mut)}
.step pre{margin-top:6px;padding:10px;border-radius:var(--r-sm);background:var(--fill);max-height:260px;overflow:auto}

/* ---------- tables ---------- */
.card:has(> table),.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);text-align:left;padding:8px 6px}
td{border-top:.5px solid var(--line);padding:10px 6px;vertical-align:top}
pre{white-space:pre-wrap;word-break:break-word;margin:0;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
code{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--fill);padding:1px 5px;border-radius:5px}

/* ---------- sign-in ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login .box{width:100%;max-width:360px;text-align:center}
.login img{width:84px;height:84px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.login h1{font-size:32px;margin:18px 0 6px;letter-spacing:-.02em}
.btn-x{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:22px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:700;font-size:17px;text-decoration:none}
.btn-x:hover{text-decoration:none;opacity:.9}

:root{--s1:#2a78d6;--s2:#eb6834;--s0:#b4b3ad;--grid:#e8e7e3;--track:#efeeea}
@media (prefers-color-scheme:dark){:root{--s1:#3987e5;--s2:#d95926;--s0:#5e5d59;--grid:#2c2c2a;--track:#262624}}
.s1{background:var(--s1)}.s2{background:var(--s2)}.s0{background:var(--s0)}
.viz{margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.viz figcaption{margin-bottom:8px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-bottom:10px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.hbars{display:grid;gap:8px}
.hrow{display:grid;grid-template-columns:minmax(90px,34%) 1fr;gap:10px;align-items:center;font-size:13px}
.hlbl{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.htrack{display:grid;grid-template-columns:1fr 2.5em;gap:6px;align-items:center;border-left:1px solid var(--grid);min-height:16px}
.hbox{display:block;min-width:0}
.hfill{display:flex;gap:2px;height:16px;min-width:0}
.seg{height:16px;min-width:2px}.seg:last-child{border-radius:0 4px 4px 0}
.hval{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.between{justify-content:space-between}
.meter{margin-bottom:14px}.mtrack{height:10px;background:var(--track);border-radius:4px;margin-top:6px;overflow:hidden}
.mfill{height:10px;border-radius:0 4px 4px 0}
.cols{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:12px;color:var(--mut)}
.yaxis{display:flex;flex-direction:column;justify-content:space-between;text-align:right;height:150px;font-variant-numeric:tabular-nums}
.yaxis span{line-height:1;transform:translateY(-2px)}
.cplot{position:relative;display:flex;align-items:flex-end;gap:2px;height:150px;border-bottom:1px solid var(--grid)}
.gl{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--grid)}
.col{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
.col:hover{background:var(--track)}
.bar{display:block;width:100%;max-width:24px;border-radius:4px 4px 0 0;position:relative;z-index:1}
.xl{position:absolute;top:100%;margin-top:4px;white-space:nowrap;font-size:11px}
.cols{padding-bottom:18px}
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}.h0{height:0%}.h1{height:1%}.h2{height:2%}.h3{height:3%}.h4{height:4%}.h5{height:5%}.h6{height:6%}.h7{height:7%}.h8{height:8%}.h9{height:9%}.h10{height:10%}.h11{height:11%}.h12{height:12%}.h13{height:13%}.h14{height:14%}.h15{height:15%}.h16{height:16%}.h17{height:17%}.h18{height:18%}.h19{height:19%}.h20{height:20%}.h21{height:21%}.h22{height:22%}.h23{height:23%}.h24{height:24%}.h25{height:25%}.h26{height:26%}.h27{height:27%}.h28{height:28%}.h29{height:29%}.h30{height:30%}.h31{height:31%}.h32{height:32%}.h33{height:33%}.h34{height:34%}.h35{height:35%}.h36{height:36%}.h37{height:37%}.h38{height:38%}.h39{height:39%}.h40{height:40%}.h41{height:41%}.h42{height:42%}.h43{height:43%}.h44{height:44%}.h45{height:45%}.h46{height:46%}.h47{height:47%}.h48{height:48%}.h49{height:49%}.h50{height:50%}.h51{height:51%}.h52{height:52%}.h53{height:53%}.h54{height:54%}.h55{height:55%}.h56{height:56%}.h57{height:57%}.h58{height:58%}.h59{height:59%}.h60{height:60%}.h61{height:61%}.h62{height:62%}.h63{height:63%}.h64{height:64%}.h65{height:65%}.h66{height:66%}.h67{height:67%}.h68{height:68%}.h69{height:69%}.h70{height:70%}.h71{height:71%}.h72{height:72%}.h73{height:73%}.h74{height:74%}.h75{height:75%}.h76{height:76%}.h77{height:77%}.h78{height:78%}.h79{height:79%}.h80{height:80%}.h81{height:81%}.h82{height:82%}.h83{height:83%}.h84{height:84%}.h85{height:85%}.h86{height:86%}.h87{height:87%}.h88{height:88%}.h89{height:89%}.h90{height:90%}.h91{height:91%}.h92{height:92%}.h93{height:93%}.h94{height:94%}.h95{height:95%}.h96{height:96%}.h97{height:97%}.h98{height:98%}.h99{height:99%}.h100{height:100%}.b0{bottom:0%}.b1{bottom:1%}.b2{bottom:2%}.b3{bottom:3%}.b4{bottom:4%}.b5{bottom:5%}.b6{bottom:6%}.b7{bottom:7%}.b8{bottom:8%}.b9{bottom:9%}.b10{bottom:10%}.b11{bottom:11%}.b12{bottom:12%}.b13{bottom:13%}.b14{bottom:14%}.b15{bottom:15%}.b16{bottom:16%}.b17{bottom:17%}.b18{bottom:18%}.b19{bottom:19%}.b20{bottom:20%}.b21{bottom:21%}.b22{bottom:22%}.b23{bottom:23%}.b24{bottom:24%}.b25{bottom:25%}.b26{bottom:26%}.b27{bottom:27%}.b28{bottom:28%}.b29{bottom:29%}.b30{bottom:30%}.b31{bottom:31%}.b32{bottom:32%}.b33{bottom:33%}.b34{bottom:34%}.b35{bottom:35%}.b36{bottom:36%}.b37{bottom:37%}.b38{bottom:38%}.b39{bottom:39%}.b40{bottom:40%}.b41{bottom:41%}.b42{bottom:42%}.b43{bottom:43%}.b44{bottom:44%}.b45{bottom:45%}.b46{bottom:46%}.b47{bottom:47%}.b48{bottom:48%}.b49{bottom:49%}.b50{bottom:50%}.b51{bottom:51%}.b52{bottom:52%}.b53{bottom:53%}.b54{bottom:54%}.b55{bottom:55%}.b56{bottom:56%}.b57{bottom:57%}.b58{bottom:58%}.b59{bottom:59%}.b60{bottom:60%}.b61{bottom:61%}.b62{bottom:62%}.b63{bottom:63%}.b64{bottom:64%}.b65{bottom:65%}.b66{bottom:66%}.b67{bottom:67%}.b68{bottom:68%}.b69{bottom:69%}.b70{bottom:70%}.b71{bottom:71%}.b72{bottom:72%}.b73{bottom:73%}.b74{bottom:74%}.b75{bottom:75%}.b76{bottom:76%}.b77{bottom:77%}.b78{bottom:78%}.b79{bottom:79%}.b80{bottom:80%}.b81{bottom:81%}.b82{bottom:82%}.b83{bottom:83%}.b84{bottom:84%}.b85{bottom:85%}.b86{bottom:86%}.b87{bottom:87%}.b88{bottom:88%}.b89{bottom:89%}.b90{bottom:90%}.b91{bottom:91%}.b92{bottom:92%}.b93{bottom:93%}.b94{bottom:94%}.b95{bottom:95%}.b96{bottom:96%}.b97{bottom:97%}.b98{bottom:98%}.b99{bottom:99%}.b100{bottom:100%}