:root{--bg:#f6f7f9;--fg:#14171c;--muted:#5b6472;--card:#fff;--line:#dde1e7;--accent:#1f4fd8;--ok:#13795b;--warn:#a15c00;--bad:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#0f1216;--fg:#e8ebf0;--muted:#9aa4b2;--card:#171b21;--line:#2a313b;--accent:#7aa2ff;--ok:#4cc9a0;--warn:#f0b35a;--bad:#ff8a80}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 system-ui,sans-serif}
header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;padding:.6rem 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0}
.brand{white-space:nowrap}nav{display:flex;flex-wrap:wrap;gap:.25rem;flex:1}
nav a{padding:.45rem .7rem;border-radius:8px;color:var(--fg);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
nav a[aria-current=page]{background:var(--accent);color:#fff}nav a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
main{padding:16px;max-width:1200px;margin:0 auto}h1{font-size:1.4rem;margin:.2rem 0 1rem}h2{font-size:1.1rem}
.muted{color:var(--muted)}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.board{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.col h2{margin:0 0 8px}.task{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--bg)}
.pill{display:inline-block;padding:.05rem .55rem;border-radius:99px;border:1px solid currentColor;font-size:.78rem}
.RUNNING,.QUEUED,.VALIDATING{color:var(--accent)}.COMPLETED,.APPROVED{color:var(--ok)}.WAITING_APPROVAL,.PENDING{color:var(--warn)}.FAILED,.CANCELLED,.REJECTED,.EXPIRED,.TIMED_OUT{color:var(--bad)}
button{font:inherit;min-height:44px;padding:.4rem .9rem;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--fg);border-color:var(--line)}button.bad{background:var(--bad);border-color:var(--bad)}button:disabled{opacity:.5;cursor:not-allowed}
input,select{font:inherit;min-height:44px;padding:.4rem .6rem;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
label{display:block;margin:.6rem 0 .2rem}form.card{max-width:380px;margin:8vh auto}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.4rem;border-bottom:1px solid var(--line);vertical-align:top}.scroll{overflow-x:auto}
.live{font-size:.8rem}.err{color:var(--bad)}code{word-break:break-all}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.envbadge{background:var(--warn);color:#000;font-weight:700;padding:.1rem .6rem;border-radius:6px;letter-spacing:.05em}
[hidden]{display:none!important}

.office-wrap{display:grid;grid-template-columns:1fr 340px;gap:12px}@media(max-width:900px){.office-wrap{grid-template-columns:1fr}}
.office-host{position:relative;height:68vh;min-height:360px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b1220}
.office-host:fullscreen{height:100vh;border-radius:0}.office-canvas{display:block;touch-action:none;cursor:grab}
.office-ctl{position:absolute;top:8px;right:8px;display:flex;gap:6px}.office-ctl button{padding:4px 10px}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0;font-size:.8rem}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
.sr-list{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.panel h2{margin:.2rem 0}.panel ul{padding-left:1.1rem;margin:.3rem 0}
.st-IDLE{background:#64748b;color:#04121f;border-color:transparent}.st-PLANNING{background:#a78bfa;color:#04121f;border-color:transparent}.st-RUNNING{background:#22d3ee;color:#04121f;border-color:transparent}.st-COLLABORATING{background:#34d399;color:#04121f;border-color:transparent}.st-VALIDATING{background:#60a5fa;color:#04121f;border-color:transparent}.st-WAITING_APPROVAL{background:#f59e0b;color:#04121f;border-color:transparent}.st-ERROR{background:#ef4444;color:#04121f;border-color:transparent}.st-COMPLETED{background:#22c55e;color:#04121f;border-color:transparent}
.office-ctl button{background:#0f1b2d;color:#e6edf6;border:1px solid #2c3a4f;border-radius:8px}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.door{border-radius:12px;padding:14px;border:1px solid transparent}.door h2{margin:.1rem 0}
.door-reymen{background:#0f2238;color:#e6edf6;border-color:#22d3ee}.door-reymen .muted{color:#9fb3c8}
.door-lonier{background:#f6efe2;color:#3b3226;border-color:#c9a45c}.door-lonier .muted{color:#7a6a52}
.door-siena{background:#06201a;color:#d8f3e8;border-color:#10b981}.door-siena .muted{color:#7fbfa5}
.door-ambar{background:#2b2b2e;color:#d4d4d8;border-color:#52525b}.door-ambar .muted{color:#a1a1aa}
.door-off{opacity:.65;filter:grayscale(.4)}ul.plain{list-style:none;padding:0;margin:.3rem 0}ul.plain li{padding:4px 0}
.mt{margin-top:12px}