:root{color-scheme:dark;--bg:#08090c;--panel:#111318;--panel2:#181b22;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--text:#f2f3f5;--muted:#8d94a1;--faint:#5e6572;--blue:#6ea1ff;--ok:#4ade9b;--warn:#fbbf4b;--bad:#fb7185;--claude:#e8946a;--gpt:#5fd4b0;--r:24px;--r2:16px}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);background-image:radial-gradient(900px 500px at 12% -10%,rgba(84,120,255,.14),transparent 65%),radial-gradient(800px 500px at 100% 0,rgba(95,212,176,.07),transparent 60%);background-attachment:fixed;color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;cursor:pointer;background:none}button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.layout{display:grid;grid-template-columns:232px 1fr;min-height:100dvh}
.nav{position:sticky;top:0;height:100dvh;padding:22px 14px;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em;padding:0 10px 18px}
.mark{width:30px;height:30px;border-radius:11px;background:linear-gradient(135deg,#fff,#9fb6e6);color:#0b0d12;display:grid;place-items:center}
.item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:999px;color:var(--muted);font-weight:550;transition:.15s;width:100%;text-align:left}
.item:hover{color:var(--text);background:rgba(255,255,255,.04)}.item.on{color:var(--text);background:rgba(255,255,255,.09)}
.nav .sp{flex:1}.mtop{display:none}
.page{padding:30px 34px 40px;max-width:1040px;width:100%;margin:0 auto;min-width:0}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
h1{font-size:28px;line-height:1.15;letter-spacing:-.025em;font-weight:680;margin:0}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--muted);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}.dot.bad{background:var(--bad)}.dot.warn{background:var(--warn)}.dot.mute{background:var(--faint)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:14px}
.lbl{font-size:13px;color:var(--muted);font-weight:550;margin:0 0 12px}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.gauges .card{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.ring{position:relative;width:112px;height:112px;margin-bottom:12px}.ring svg{display:block;width:100%;height:100%}.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:680;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring .tr{stroke:rgba(255,255,255,.08)}.ring .v{stroke:var(--blue)}.ring .v.w{stroke:var(--warn)}.ring .v.b{stroke:var(--bad)}
.gt{font-weight:600;font-size:14px}.sub{color:var(--muted);font-size:13px}
.big{font-size:38px;font-weight:690;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.days{display:flex;align-items:flex-end;gap:4px;height:90px;margin:20px 0 14px}.days i{flex:1;background:rgba(255,255,255,.08);min-height:6px;border-radius:999px}.days i.has{background:linear-gradient(180deg,#8fb6ff,#4f7fe8)}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}.row:first-of-type{border-top:0}
.row .a{display:flex;align-items:center;gap:10px;overflow-wrap:break-word}.row .b{color:var(--muted);text-align:right;overflow-wrap:anywhere;font-size:13px;min-width:0}.row .b.n{white-space:nowrap}.bad-t{color:var(--bad)}
.seg{display:inline-flex;padding:4px;gap:2px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px}.seg button{padding:7px 16px;border-radius:999px;color:var(--muted);font-weight:550;font-size:14px;display:flex;align-items:center;gap:7px;white-space:nowrap}.seg button.on{background:#fff;color:#0b0d12}
.seg .dot.c{background:var(--claude)}.seg .dot.g{background:var(--gpt)}
.search,.field{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:12px 18px;outline-offset:0}.search{margin:14px 0}
.btn{background:#fff;color:#0b0d12;border-radius:999px;padding:12px 20px;font-weight:620;transition:.15s}.btn:hover{background:#dfe6f5}.btn.alt{background:rgba(255,255,255,.08);color:var(--text)}.btn.wide{width:100%}
.auth{min-height:100dvh;display:grid;place-items:center;padding:20px}.auth .card{width:100%;max-width:390px;padding:30px;display:flex;flex-direction:column;gap:12px;margin:0}
.auth .mark{width:44px;height:44px;border-radius:16px;margin-bottom:6px}.auth h1{font-size:24px}.err{color:var(--bad);font-size:14px;min-height:20px;text-align:center}.err.okm{color:var(--ok)}
.code{text-align:center;letter-spacing:.28em;font-size:20px;font-weight:650}
.bars{margin-top:14px}.bars .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}.bars .t b{font-size:20px;font-weight:680;letter-spacing:-.02em}
.meter{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin:9px 0 6px}.meter i{display:block;height:100%;border-radius:999px;background:var(--blue)}.meter i.w{background:var(--warn)}.meter i.b{background:var(--bad)}
.brandr{display:flex;align-items:center;gap:12px;font-weight:640;font-size:17px}.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:720;font-size:14px;flex:none;color:#0b0d12}.av.claude{background:var(--claude)}.av.gpt{background:var(--gpt)}
.twos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.twos .card{margin:0}
.chat{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;height:calc(100dvh - 40px);margin:-10px -10px -20px}
.side{overflow:auto;display:flex;flex-direction:column;gap:3px;padding-top:10px}.side button{padding:10px 15px;border-radius:999px;color:var(--muted);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550;flex:none}.side button:hover{color:var(--text)}.side button.on{background:rgba(255,255,255,.09);color:var(--text)}.side .new{color:var(--blue);display:flex;align-items:center;gap:7px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}.msgs{flex:1;overflow-y:auto;padding:12px 4px;display:flex;flex-direction:column;gap:18px}
.empty{margin:auto;text-align:center;color:var(--muted);max-width:340px;padding:30px}.empty h1{color:var(--text);font-size:22px;margin-bottom:6px}
.u{align-self:flex-end;max-width:82%;background:#262a33;border-radius:22px 22px 7px 22px;padding:11px 16px;white-space:pre-wrap;overflow-wrap:anywhere}
.a-m{display:flex;gap:12px;max-width:100%;min-width:0}.a-m>div:last-child{flex:1;min-width:0}.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;min-height:34px}.who b{font-weight:640}.who .tag{font-size:12px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:999px;padding:2px 9px}.who .st{font-size:12px;color:var(--faint)}.who .st.bad-t{color:var(--bad)}
.body{white-space:pre-wrap;overflow-wrap:anywhere}.body code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(255,255,255,.08);padding:1px 6px;border-radius:7px}.body pre{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#05060a;border:1px solid var(--line);border-radius:16px;padding:13px 15px;overflow-x:auto;margin:8px 0;white-space:pre}
.prog{font:12px ui-monospace,Menlo,monospace;color:var(--muted);margin-top:7px;display:flex;gap:8px;align-items:center}.prog span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:p 1.1s infinite;flex:none}@keyframes p{50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.stop{color:var(--bad);font-size:12px;border:1px solid var(--line2);border-radius:999px;padding:2px 11px;white-space:nowrap}
.comp{background:var(--panel2);border:1px solid var(--line2);border-radius:26px;padding:12px 12px 10px;margin:6px 0 10px}.comp textarea{display:block;width:100%;background:none;border:0;outline:0;resize:none;padding:4px 8px 10px;min-height:32px;max-height:170px}
.bar2{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.bar2 .seg button{padding:5px 12px;font-size:13px}.bar2 .sp{flex:1}
.sel{position:relative;display:inline-flex;align-items:center;color:var(--muted)}.sel select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:6px 28px 6px 13px;font-size:13px;color:var(--text);max-width:150px;text-overflow:ellipsis}.sel select option{background:#181b22}.sel svg{position:absolute;right:9px;pointer-events:none}
.go{width:40px;height:40px;border-radius:50%;background:#fff;color:#0b0d12;display:grid;place-items:center;flex:none}.go:hover{background:#dfe6f5}
.errline{color:var(--bad);font-size:13px;padding:0 6px}
@media (max-width:760px){.layout{display:block}.nav{position:fixed;top:auto;bottom:12px;left:50%;transform:translateX(-50%);height:auto;width:max-content;max-width:calc(100vw - 24px);flex-direction:row;padding:6px;background:rgba(24,27,34,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:999px;z-index:20;gap:2px}.nav .brand,.nav .sp,.nav .out{display:none}.item{flex-direction:column;gap:2px;font-size:11px;padding:7px 15px;width:auto}
.mtop{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 2px}.mtop .brand{padding:0}.mtop button{color:var(--muted);font-size:13px}
.page{padding:12px 16px 100px}h1{font-size:25px}.card{padding:18px;border-radius:22px}.gauges{gap:8px}.gauges .card{padding:14px 6px}.ring{width:76px;height:76px;margin-bottom:8px}.ring b{font-size:16px}.gt{font-size:13px}.gauges .sub{font-size:11px}.big{font-size:32px}
.chat{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:4px;height:calc(100dvh - 158px);margin:0}.side{flex-direction:row;overflow-x:auto;padding:0;scrollbar-width:none}.side button{max-width:150px}.msgs{padding:10px 0}.comp{margin:4px 0 0}.bar2 .sel{order:0;flex:1 1 40%}.bar2 .sel select{width:100%;max-width:none}.bar2 .seg{order:1}.bar2 .sp{order:2}.bar2 .go{order:3}.head{margin-bottom:12px}}
