:root{--bg:#0b0b0c;--panel:#131315;--panel2:#18181b;--line:#242428;--text:#e8e8ea;--muted:#8b8b93;--dim:#5c5c66;
--orange:#ff6a1a;--orange2:#ff8a3d;--green:#2ecc71;--red:#ff4d4f;--yellow:#f5b820;--blue:#4aa3ff;--purple:#9b6dff;--pink:#ff5fa2;--teal:#22c7c7;
--mono:ui-monospace,"JetBrains Mono","Cascadia Mono","SF Mono",Menlo,Consolas,monospace;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}
a{color:var(--orange2)}
body{display:grid;grid-template-rows:auto auto 1fr;height:100vh;overflow:hidden}
header.top{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--line);background:#0e0e10}
header .brand{font-family:var(--mono);font-weight:800;letter-spacing:.08em;color:var(--orange);font-size:16px}
header .brand span{color:var(--muted);font-weight:500;letter-spacing:0;margin-left:8px;font-family:var(--sans);text-transform:none}
header .brand small{color:var(--dim);font-weight:400;margin-left:8px;font-size:11px;letter-spacing:.05em}
.stats{display:flex;gap:0;border-bottom:1px solid var(--line);background:#0e0e10;overflow-x:auto}
.stat{padding:8px 16px;border-right:1px solid var(--line);min-width:120px}
.stat .k{font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.stat .v{font-family:var(--mono);font-size:20px;font-weight:700;color:#fff;line-height:1.2}
.stat .v.o{color:var(--orange)}.stat .s{font-size:11px;color:var(--dim);font-family:var(--mono)}
main{display:grid;grid-template-columns:56px 200px 1fr;min-height:0}
nav.rail{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:10px;gap:6px;background:#0e0e10}
nav.rail button{width:40px;height:40px;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
nav.rail button.on{background:var(--orange);color:#111}
nav.rail button:hover:not(.on){background:var(--panel2);color:#fff}
aside.sub{border-right:1px solid var(--line);padding:14px 12px;background:#0f0f11;overflow:auto}
aside.sub h2{margin:0 0 10px;font-size:15px;font-weight:700}
aside.sub .item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;color:var(--muted);cursor:pointer;font-size:13px;width:100%;border:0;background:transparent;font-family:inherit;text-align:left}
aside.sub .item.on,aside.sub .item:hover{background:var(--panel2);color:#fff}
aside.sub .item i{color:var(--orange);font-style:normal;width:14px;text-align:center}
section.content{overflow:auto;padding:14px 18px 40px;min-width:0}
.filter{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:14px;font-family:var(--mono);font-size:12px}
.filter label{color:var(--muted);letter-spacing:.1em;font-size:10px}
select,input[type=text],input[type=number],textarea{background:#0e0e10;border:1px solid var(--line);color:#fff;border-radius:6px;padding:6px 8px;font-family:var(--mono);font-size:12px}
button.btn{background:var(--panel2);border:1px solid var(--line);color:#fff;border-radius:6px;padding:6px 10px;font-family:var(--mono);font-size:12px;cursor:pointer}
button.btn.o{background:var(--orange);border-color:var(--orange);color:#111;font-weight:700}
button.btn.sm{padding:3px 8px;font-size:11px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--muted);padding:4px 10px;font-family:var(--mono);font-size:11px;cursor:pointer}
.seg button.on{background:var(--orange);color:#111;font-weight:700}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px;min-width:0}
.panel h3{margin:0 0 4px;font-size:15px;letter-spacing:.02em}
.panel h3 .tag{font-size:10px;letter-spacing:.14em;color:var(--muted);margin-left:8px;font-weight:500;text-transform:uppercase}
.panel .sub{color:var(--muted);font-size:12px;margin-bottom:10px}
.panel .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1200px){.grid3,.grid4{grid-template-columns:1fr 1fr}}@media(max-width:800px){.grid2,.grid3,.grid4{grid-template-columns:1fr}main{grid-template-columns:56px 1fr}aside.sub{display:none}}
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.tile .k{font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.tile .v{font-family:var(--mono);font-size:24px;font-weight:700;color:#fff;margin:2px 0}
.tile .v.o{color:var(--orange)}.tile .v.g{color:var(--green)}.tile .s{font-size:11px;color:var(--dim)}
.feed{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.card{flex:0 0 250px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:12px}
.card.err{border-color:var(--red)}.card.live{border-color:var(--orange)}
.card .m{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#fff}
.card .c{color:var(--orange2);font-size:11px;margin:2px 0 6px}
.card .kv{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;line-height:1.7}
.card .kv b{color:#fff;font-weight:600}
.card .ft{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:6px;padding-top:6px;font-size:11px;color:var(--muted)}
.card .ft b{color:var(--orange);font-size:13px}
.chip{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:4px;border:1px solid var(--line);color:var(--muted);letter-spacing:.06em;white-space:nowrap}
.chip.o{color:var(--orange);border-color:#5a2e12;background:#1d120a}.chip.g{color:var(--green);border-color:#164a2a;background:#0b1f13}
.chip.r{color:var(--red);border-color:#5a1a1c;background:#200b0c}.chip.b{color:var(--blue);border-color:#173b5a;background:#0a1620}
.chip.p{color:var(--purple);border-color:#3b2a66;background:#140f24}.chip.y{color:var(--yellow);border-color:#5a4610;background:#1f1a08}
.chip.t{color:var(--teal);border-color:#114d4d;background:#08201f}.chip.k{color:var(--pink);border-color:#5a1f3a;background:#210a16}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);margin-right:6px;vertical-align:middle}
.dot.g{background:var(--green);box-shadow:0 0 6px var(--green)}.dot.r{background:var(--red)}.dot.y{background:var(--yellow)}.dot.o{background:var(--orange);box-shadow:0 0 6px var(--orange)}
.bar{height:6px;background:#26262b;border-radius:3px;overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:var(--orange);border-radius:3px}
.bar i.g{background:var(--green)}.bar i.b{background:var(--blue)}.bar i.p{background:var(--purple)}.bar i.y{background:var(--yellow)}.bar i.t{background:var(--teal)}.bar i.r{background:var(--red)}.bar i.k{background:var(--pink)}
.meter{display:grid;grid-template-columns:44px 1fr 56px 110px;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);margin:5px 0}
.meter.w{grid-template-columns:110px 1fr 56px 150px}
.meter b{color:#fff;text-align:right}.meter .r{text-align:right;color:var(--dim)}
.flow{display:grid;grid-template-columns:70px 170px 1fr 50px 70px 50px;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;margin:6px 0}
.flow .n{color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow .p{text-align:right;color:#fff}.flow .q{text-align:right;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
th{font-weight:500;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.06em}
td{padding:7px 8px;border-bottom:1px solid #1c1c20;color:#ddd;vertical-align:middle}td.r,th.r{text-align:right}td b{color:#fff}
tr:hover td{background:#17171a}
.node{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px}
.node .hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.node .hd .nm{font-weight:700;color:#fff}
.node .models{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.node .foot{font-family:var(--mono);font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
.node .foot b{color:#fff}
.mini{font-family:var(--mono);font-size:11px;color:var(--muted)}
canvas{width:100%;display:block}
.rec{border-left:3px solid var(--blue);background:var(--panel2);padding:10px 12px;border-radius:6px;margin-bottom:10px}
.rec.save{border-color:var(--green)}.rec.warn{border-color:var(--yellow)}
.rec b{color:#fff;display:block;margin-bottom:3px}.rec p{margin:2px 0;color:var(--muted);font-size:12px}.rec p.a{color:var(--orange2)}
pre{background:#0e0e10;border:1px solid var(--line);border-radius:6px;padding:10px;font-size:11.5px;overflow:auto;color:#ddd;font-family:var(--mono)}
.up{display:grid;grid-template-columns:repeat(30,1fr);gap:2px}
.up i{display:block;height:18px;border-radius:2px;background:#26262b}.up i.g{background:var(--green)}.up i.y{background:var(--yellow)}.up i.r{background:var(--red)}
.kbd{font-family:var(--mono);background:#0e0e10;border:1px solid var(--line);padding:1px 5px;border-radius:4px;font-size:11px}
.empty{color:var(--dim);font-family:var(--mono);font-size:12px;padding:14px;text-align:center}
.toast{position:fixed;right:18px;bottom:18px;background:#1c1c20;border:1px solid var(--orange);color:#fff;padding:10px 14px;border-radius:8px;font-family:var(--mono);font-size:12px;z-index:9;max-width:480px;word-break:break-all}
.legend{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

.chat{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding:6px 2px}
.msg{padding:8px 12px;border-radius:8px;max-width:88%;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg.u{align-self:flex-end;background:#1d120a;border:1px solid #5a2e12}.msg.a{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.msg .meta{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:4px}
.studio-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.studio-row textarea{flex:1;min-width:240px;min-height:44px;resize:vertical}
.gallery{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.gallery img{width:256px;height:256px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
audio{width:100%;margin-top:8px}
.pool{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---- R1-UI: states, accessibility, phone width ---- */
:focus-visible{outline:2px solid var(--orange2);outline-offset:2px}
button:disabled,input:disabled,textarea:disabled,select:disabled{opacity:.45;cursor:not-allowed}
.notice{border-left:3px solid var(--yellow);background:var(--panel2);padding:8px 12px;border-radius:6px;margin:8px 0;font-size:12px;color:var(--muted);line-height:1.5}
.notice b{color:#fff}
.loading{color:var(--muted)}
.loading::before{content:"";display:inline-block;width:10px;height:10px;border:2px solid var(--line);border-top-color:var(--orange);border-radius:50%;margin-right:8px;vertical-align:middle;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.grid2>*,.grid3>*,.grid4>*{min-width:0}
.panel{overflow-x:auto}
@media(max-width:800px){
  header.top{padding:8px 12px;gap:8px}header .brand{font-size:13px}header .brand small{display:none}#clock{display:none}
  section.content{padding:10px 10px 40px}.filter{flex-wrap:wrap}.filter select{max-width:46%}
  .meter,.meter.w{grid-template-columns:78px 1fr 48px}.meter .r,.meter.w .r{grid-column:1/-1;text-align:left;margin-top:-2px}
  .flow{grid-template-columns:56px 1fr 44px}.flow .q,.flow>:nth-child(6){display:none}.flow .bar{grid-column:1/-1}
  .tile .v{font-size:20px}.stat{min-width:96px;padding:6px 10px}.stat .v{font-size:16px}
  .studio-row textarea{min-width:140px}.gallery img{width:100%;max-width:256px;height:auto}
  .chat{max-height:50vh}.msg{max-width:96%}
}