:root { color-scheme: dark; --bg:#111918; --panel:#1b2421; --border:#344039; --gold:#d6b477; --text:#ece7da; --muted:#9da99e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans","Segoe UI",sans-serif; font-size:15px; }
a { color:inherit; text-decoration:none; }
h1,h2 { font-family:"Libre Baskerville",Georgia,serif; font-weight:400; }
h1 { margin:8px 0 14px; font-size:34px; letter-spacing:-1px; } h2 { font-size:22px; }
p { line-height:1.6; } .muted { color:var(--muted); } .small { font-size:12px; }
.eyebrow { color:var(--gold); font-size:10px; letter-spacing:2.4px; font-weight:700; margin:0 0 12px; text-transform:uppercase; }
.app-header { height:78px; display:flex; gap:32px; align-items:center; padding:0 32px; border-bottom:1px solid var(--border); }
.brand { letter-spacing:2.5px; font-size:12px; font-weight:700; white-space:nowrap; }
.brand-mark { color:var(--gold); margin-right:12px; font-size:22px; }
.brand-subtitle { color:var(--muted); font-size:12px; flex:1; } .session { display:flex; align-items:center; gap:20px; font-size:13px; }
.app-main { max-width:1600px; margin:auto; padding:28px 32px 48px; min-height:calc(100vh - 140px); }
.app-footer { border-top:1px solid var(--border); padding:20px 32px; font-size:10px; letter-spacing:2px; color:var(--muted); display:flex; justify-content:space-between; }
button,.button { display:inline-block; background:var(--gold); color:#19221d; border:1px solid var(--gold); border-radius:4px; padding:11px 18px; cursor:pointer; font:600 12px "DM Sans","Segoe UI",sans-serif; }
button:hover,.button:hover { filter:brightness(1.1); } button:disabled { opacity:.55; cursor:wait; }
button.secondary { background:transparent; color:var(--text); border-color:var(--border); }
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
label { display:block; margin:18px 0 8px; color:var(--muted); font-size:12px; }
input { width:100%; background:#121b18; color:var(--text); border:1px solid var(--border); border-radius:4px; padding:12px; font:inherit; }
form button { margin-top:18px; width:100%; } .notice { padding:12px 16px; background:#342e1e; border:1px solid #685737; border-radius:4px; font-size:13px; } .notice.error { background:#38251f; border-color:#85594a; }
.login-card { width:min(450px,100%); margin:48px auto; border:1px solid var(--border); padding:36px; background:var(--panel); border-radius:8px; }
.page-head { padding:26px 0 32px; } .hold-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,360px)); gap:24px; }
.hold-card { display:block; padding:32px; border:1px solid var(--border); border-radius:8px; background:linear-gradient(145deg,#263029,#18231e); transition:border-color .2s; }
.hold-card:hover { border-color:var(--gold); } .hold-emblem { color:var(--gold); display:block; margin-bottom:36px; font-size:34px; }
.card-link { display:block; color:var(--gold); font-size:12px; margin-top:36px; }
.back-link { font-size:12px; color:var(--muted); } .hold-header { display:flex; justify-content:space-between; align-items:center; padding:24px 0 12px; }
.hold-header h1 { font-size:36px; margin-bottom:10px; } .hold-header .muted { font-size:12px; }
.access-badge { border:1px solid #68603b; color:var(--gold); background:#282c20; padding:8px 12px; border-radius:4px; font-size:11px; }
.hold-workspace { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:22px; }
.map-shell { border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--panel); }
.map-toolbar,.map-footer { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; font-size:11px; gap:12px; }
.map-toolbar { border-bottom:1px solid var(--border); letter-spacing:.6px; }
.map-toolbar button { padding:6px 12px; margin-left:6px; background:transparent; color:var(--text); border-color:var(--border); }
.map-host { position:relative; height:clamp(360px,58vh,620px); overflow:hidden; background:#172123; }
.map-host canvas { display:block; touch-action:none; cursor:grab; } .map-host canvas:active { cursor:grabbing; }
.map-footer { color:var(--muted); border-top:1px solid var(--border); font-size:10px; flex-wrap:wrap; }
.selection-info { color:var(--gold); } .map-diagnostic { position:absolute; top:10px; left:10px; background:#111918cc; font:10px monospace; color:#c0ccb9; padding:6px 8px; pointer-events:none; border-radius:3px; }
.inspector { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:24px; }
.inspector h2 { margin:6px 0 20px; font-size:20px; } .inspector p { font-size:12px; }
hr { border:0; border-top:1px solid var(--border); margin:28px 0; } .legend-row { display:flex; align-items:center; gap:12px; font-size:12px; margin:16px 0; } .swatch { width:14px; height:14px; border-radius:2px; }
.empty-state { padding:48px 0; } #blazor-error-ui { display:none; position:fixed; bottom:0; width:100%; background:#532f25; padding:12px; z-index:100; } .loading-progress-text { padding:40px; }
@media(max-width:900px) { .brand-subtitle { display:none; } .app-header { justify-content:space-between; padding:0 20px; } .app-main { padding:24px 20px; } .hold-workspace { grid-template-columns:1fr; } .inspector { max-width:none; } .app-footer span { display:none; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
.simulation-panel {margin-top:24px;padding:24px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.simulation-panel table {width:100%;border-collapse:collapse;font-size:13px}.simulation-panel th,.simulation-panel td {padding:8px;text-align:left;border-bottom:1px solid var(--border)}
.simulation-panel details {margin:16px 0}.simulation-panel label {display:block;margin:8px 0}.simulation-panel progress {display:block;width:100%;accent-color:var(--gold)}
.building-list {display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.selected-building {border-color:var(--gold)}
.preview-workspace { display:grid;grid-template-columns:minmax(360px, .9fr) minmax(440px,1.1fr);gap:24px;align-items:start }
.preview-panel { background:var(--surface,#171d23);border:1px solid #39424c;padding:22px;border-radius:12px;min-width:0 }
.preview-panel h2 { margin-top:0 }.preview-controls {display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:14px 0}.preview-controls input {max-width:160px}.preview-controls label {margin:0}.source-editor {font:13px/21px Consolas,monospace;width:100%;height:420px;padding:14px;resize:vertical;tab-size:2;background:#0c1117;color:#dce5ee;border:1px solid #39424c;border-radius:6px;white-space:pre;overflow:auto}.preview-panel table {width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}.preview-panel th,.preview-panel td {padding:8px;text-align:left;border-bottom:1px solid #39424c}.preview-panel td input {min-width:50px;width:100%;padding:6px}.preview-panel details {margin:18px 0}.preview-panel summary {cursor:pointer;font-weight:600}.instance-setup {padding:12px 0;border-bottom:1px solid #39424c}.instance-setup label {display:block;margin:8px 0}.text-button {background:transparent;border:0;color:inherit;font-size:inherit;text-align:left;padding:3px;cursor:pointer}.text-button:hover {color:#f5c46a}.diagnostics {padding-left:20px}.diagnostics .error {color:#ff9a9a}.graph-shell {margin-top:14px;border:1px solid #39424c;border-radius:8px;overflow:hidden}.graph-host {width:100%;height:400px;background:#10161d;overflow:hidden}.graph-host svg {width:100%;height:100%;touch-action:none;user-select:none}.graph-shell>p,.graph-shell>details {margin:10px 14px}.graph-node rect {fill:#222d39;stroke:#647689;stroke-width:1.5}.graph-node text {fill:#e4ecf5;font:13px Consolas,monospace;pointer-events:none}.graph-node.decision rect {fill:#3a3020;stroke:#ba955c}.graph-node.wait rect {fill:#242440;stroke:#9890d4}.graph-node {cursor:pointer}.graph-node.active rect {stroke:#6be2b2;stroke-width:3;fill:#163b30}.graph-node.waiting rect {stroke:#edc36b}.graph-node.recent rect {stroke-width:3}.graph-node.fault rect {stroke:#ff7777;fill:#522121}.graph-edge path {fill:none;stroke:#8b9bae;stroke-width:2}.graph-edge text {fill:#bbc8d8;font:12px Consolas,monospace;paint-order:stroke;stroke:#10161d;stroke-width:4px}.graph-edge {cursor:pointer}.graph-edge.recent path {stroke:#6be2b2;stroke-width:4}.graph-edge:focus path {stroke:#f5c46a}.trace-list {max-height:280px;overflow:auto}.trace-row {display:block;font:12px/1.6 Consolas,monospace;width:100%}@media(max-width:1050px){.preview-workspace {grid-template-columns:1fr}}
.graph-node .state-timing {pointer-events:none}.graph-node .state-timing .state-remaining {font:12px Consolas,monospace;fill:#e4ecf5}.graph-node .state-timing .state-progress-track {fill:#0b1714;stroke:none}.graph-node .state-timing .state-progress-fill {fill:#6be2b2;stroke:none}