:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#0b0e11; color:#f5f7f8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0%, #1a2028 0, #0b0e11 42%); }
.shell { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:42px 0 60px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:34px; }
.eyebrow,.kicker { color:#8f9aa6; font-size:11px; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:5px 0 0; font-size:40px; letter-spacing:-.04em; }
.subtitle { margin:6px 0 0; color:#8f9aa6; }
.status-pill { border:1px solid #29313a; border-radius:999px; padding:9px 13px; color:#c7d0d8; font-size:13px; display:flex; align-items:center; gap:8px; background:#11161b; }
.status-pill span { width:8px; height:8px; border-radius:50%; background:#70d391; box-shadow:0 0 16px #70d391; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.metric,.panel { border:1px solid #222a32; background:rgba(16,20,25,.86); border-radius:14px; }
.metric { padding:20px; display:flex; flex-direction:column; gap:5px; }
.metric strong { font-size:27px; }
.metric span { color:#8f9aa6; font-size:13px; }
.panel { padding:20px; margin-bottom:18px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.panel h2 { margin:4px 0 0; font-size:18px; }
button { border:1px solid #38434d; background:#eef2f4; color:#11161b; border-radius:8px; padding:8px 12px; font-weight:700; }
button:disabled { opacity:.58; cursor:not-allowed; }
button.ghost { background:transparent; color:#c4ccd4; }
.robot-list { display:flex; flex-direction:column; }
.robot-row { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:18px; align-items:center; padding:15px 0; border-top:1px solid #20262d; }
.robot-row:first-child { border-top:0; }
.robot-row > div { display:flex; flex-direction:column; gap:4px; }
.robot-name { flex-direction:row !important; align-items:center; gap:12px !important; }
small { color:#7f8a95; font-size:12px; }
.dot { width:9px; height:9px; border-radius:50%; background:#69737d; flex:none; }
.dot.ok { background:#70d391; }
.dot.off { background:#626a73; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.request { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #20262d; padding-top:16px; }
.request > div:first-child { display:flex; flex-direction:column; gap:4px; }
.actions { display:flex; gap:8px; }
.events { display:flex; flex-direction:column; gap:13px; }
.events div { display:grid; grid-template-columns:58px 1fr; gap:9px; padding-top:13px; border-top:1px solid #20262d; }
time { color:#7f8a95; font-variant-numeric:tabular-nums; }
footer { color:#69737d; font-size:12px; text-align:center; padding-top:10px; }
@media (max-width:800px) { .summary-grid { grid-template-columns:1fr 1fr; } .two-col { grid-template-columns:1fr; } .robot-row { grid-template-columns:1fr 1fr; } .robot-row button { display:none; } .topbar { flex-direction:column; } }