:root{
  --bg:#101317;
  --panel:#171c22;
  --panel-2:#1f252c;
  --line:#303944;
  --text:#eef3f4;
  --muted:#95a3a5;
  --cyan:#42d6c6;
  --green:#89d46d;
  --amber:#f0ba62;
  --red:#ee7468;
  --ink:#0a0d10;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0}
button,input,select{font:inherit}
button{border:1px solid var(--line);background:var(--cyan);color:#05110f;border-radius:7px;padding:10px 13px;font-weight:750;cursor:pointer}
button:hover{filter:brightness(1.06)}
button.ghost{background:transparent;color:var(--text)}
button:disabled{cursor:not-allowed;background:#2a3037;color:var(--muted)}
.app-shell{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr)}
.sidebar{border-right:1px solid var(--line);background:#0c1014;padding:18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--amber));color:var(--ink);display:grid;place-items:center;font-weight:900}
.brand strong,.brand small{display:block}.brand small{color:var(--muted);margin-top:2px}
.nav{display:grid;gap:6px}.nav a{color:var(--text);text-decoration:none;border:1px solid transparent;border-radius:7px;padding:10px 12px}.nav a:hover{background:var(--panel);border-color:var(--line)}
.status-panel,.mini-board,.panel,.office-stage,.metrics article{border:1px solid var(--line);background:var(--panel);border-radius:8px}
.status-panel{padding:14px}.status-panel p{margin:10px 0 0;color:var(--muted);line-height:1.45;font-size:14px}
.mode,.live-dot{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:rgba(137,212,109,.12);color:var(--green);font-size:12px;font-weight:800;text-transform:uppercase}
.mini-board{padding:14px;display:grid;gap:10px}.mini-board strong{margin-bottom:2px}.mini-board label{display:flex;gap:8px;color:var(--muted);font-size:14px}
.workspace{padding:22px;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
h1,h2,h3,p{margin:0}h1{font-size:30px;line-height:1.05}h2{font-size:18px}.topbar p{color:var(--muted);margin-top:7px;max-width:760px}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.metrics article{padding:14px}.metrics strong{display:block;font-size:26px}.metrics span{color:var(--muted);font-size:13px;text-transform:uppercase;font-weight:750}
.office-grid{display:grid;grid-template-columns:minmax(420px,1fr) 420px;gap:14px;align-items:start}
.office-stage{overflow:hidden}.stage-head,.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid var(--line)}
.stage-head span:not(.live-dot),.panel-head span{color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:800}
.office-canvas{height:560px;background:#111820;position:relative}
.office-canvas canvas{display:block;width:100%;height:100%}
.control-column{display:grid;gap:14px}
.panel{padding:0;overflow:hidden}.task-form{display:grid;grid-template-columns:1fr 140px 105px auto;gap:8px;padding:14px;border-bottom:1px solid var(--line)}
input,select{width:100%;border:1px solid var(--line);background:#0d1116;color:var(--text);border-radius:7px;padding:10px 11px;min-width:0}
.list{display:grid;gap:8px;padding:14px;max-height:350px;overflow:auto}.list article,.agent-list article,.systems article,.activity-log article{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:11px}
.list article{display:grid;gap:7px}.list strong,.agent-list strong,.systems strong{display:block}.list span,.agent-list span,.systems span,.activity-log span{color:var(--muted);font-size:13px;line-height:1.35}
.task-meta{display:flex;gap:6px;flex-wrap:wrap}.pill{border:1px solid var(--line);border-radius:999px;padding:4px 7px;color:var(--muted);font-size:12px}
.compact{max-height:240px}.approval-actions{display:flex;gap:8px;margin-top:8px}.approval-actions button{padding:7px 9px}
.bottom-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;margin-top:14px;align-items:start}
.agent-list,.systems,.activity-log{display:grid;gap:8px;padding:14px;max-height:420px;overflow:auto}
.agent-list article{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}.agent-level{color:var(--amber);font-weight:850}
.systems article{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}.systems span{grid-column:1/2}.systems button{grid-row:1/3;grid-column:2/3}
.activity-log article{display:grid;gap:5px}.activity-log time{color:var(--cyan);font-size:12px;font-weight:800}
.log-panel{min-height:300px}
@media (max-width:1180px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.office-grid,.bottom-grid{grid-template-columns:1fr}.task-form{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.workspace{padding:14px}.topbar{display:grid}.actions{justify-content:flex-start}.metrics{grid-template-columns:1fr}.office-canvas{height:420px}.task-form{grid-template-columns:1fr}.stage-head,.panel-head{align-items:flex-start;display:grid}}