*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow:hidden}
.app{display:flex;flex-direction:column;height:100vh}
/* top */
.top{height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:16px}
.mark{width:24px;height:24px;background:url(/assets/capstone-mark.svg) center/contain no-repeat}
.casebar{display:flex;align-items:center;gap:8px}
.casebar select{background:var(--bg-inset);border:1px solid var(--border-default);color:var(--text-primary);border-radius:var(--radius-md);padding:7px 10px;font-size:13px;font-family:var(--font-sans);max-width:280px;outline:none}
.ic{width:30px;height:30px;border:1px solid var(--border-subtle);background:var(--bg-inset);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:14px}
.ic.wide{width:auto;padding:0 12px;height:30px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--brand-subtle-text,var(--brand));background:var(--brand-subtle);border-color:var(--brand)}
.ic.wide:hover{color:#fff;background:var(--brand)}
.ic:hover{color:var(--text-primary);border-color:var(--brand)}
.ic.danger:hover{border-color:var(--danger);color:var(--danger)}
.saved{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);margin-left:4px}
.engine-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--radius-pill);background:var(--bg-inset);color:var(--text-muted);border:1px solid var(--border-subtle);white-space:nowrap}
.engine-chip .engine-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint)}
.engine-chip.live{color:var(--success-text);border-color:color-mix(in oklab,var(--success) 35%,var(--border-subtle));background:var(--success-subtle)}
.engine-chip.live .engine-dot{background:var(--success);box-shadow:0 0 0 3px color-mix(in oklab,var(--success) 25%,transparent)}
.saved.dirty{color:var(--warning-text)}
.back{margin-left:auto;color:var(--text-secondary);text-decoration:none;font-size:13px;border:1px solid var(--border-subtle);padding:7px 13px;border-radius:var(--radius-md)}
.back:hover{border-color:var(--brand);color:var(--text-primary)}
/* toolbar */
.toolbar{height:46px;flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);z-index:15}
.tgroup{display:flex;gap:6px;align-items:center;position:relative}
.tgroup.right{margin-left:auto}
.toolbar button{background:var(--bg-inset);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:var(--font-sans);white-space:nowrap}
.toolbar button:hover:not(:disabled){color:var(--text-primary);border-color:var(--brand)}
.toolbar button:disabled{opacity:.4;cursor:default}
.toolbar button.accent{background:var(--brand-subtle);border-color:var(--brand);color:var(--brand-subtle-text);font-weight:600}
.toolbar button.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}
.toolbar button.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.stat{font-size:12px;font-family:var(--font-mono);color:var(--text-muted)}
.menu{display:none;position:absolute;top:36px;left:0;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:5px;z-index:30;box-shadow:var(--shadow-pop);min-width:190px}
.menu.open{display:block}
.menu button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:8px 10px;border-radius:var(--radius-sm)}
.menu button:hover{background:var(--bg-inset)}
/* body */
.body{flex:1;display:flex;min-height:0}
.rail{width:262px;flex:0 0 auto;border-right:1px solid var(--border-subtle);background:var(--bg-surface);overflow-y:auto;padding:14px}
.grp{margin-bottom:16px}
.grp h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted);font-family:var(--font-mono);font-weight:600}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg.wide{margin-bottom:12px}
.seg button{flex:1;min-width:fit-content;background:var(--bg-inset);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);padding:6px 9px;font-size:12px;cursor:pointer;font-family:var(--font-sans);white-space:nowrap}
.seg button.on{background:var(--brand-subtle);border-color:var(--brand);color:var(--brand-subtle-text)}
.seg button:hover{color:var(--text-primary)}
select,input[type=text],textarea{width:100%;background:var(--bg-inset);border:1px solid var(--border-default);color:var(--text-primary);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px;font-family:var(--font-sans);outline:none;margin-bottom:8px}
.rail select{font-size:12px;padding:7px 9px}
select:focus,input:focus,textarea:focus{border-color:var(--brand)}
.btn{width:100%;background:var(--brand);color:var(--on-brand);border:0;border-radius:var(--radius-md);padding:9px;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--font-sans);margin-top:4px}
.btn:hover{background:var(--brand-hover)}
.btn.ghost{background:var(--bg-inset);color:var(--text-secondary);border:1px solid var(--border-subtle)}
.btn.ghost:hover{color:var(--text-primary);border-color:var(--brand)}
.metricrow{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px}
.metricrow:hover{background:var(--bg-inset)}
.metricrow .bar{flex:1;height:5px;background:var(--bg-inset);border-radius:3px;overflow:hidden}
.metricrow .bar i{display:block;height:100%;background:var(--brand)}
.metricrow .nm{width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}
.metricrow .v{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);width:34px;text-align:right}
/* canvas */
.canvas-wrap{flex:1;position:relative;min-width:0;background:radial-gradient(circle at 50% 38%, color-mix(in oklab,var(--brand) 8%, transparent), transparent 60%),var(--bg-canvas)}
#cy{position:absolute;inset:0}
.hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(10,22,34,.82);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:6px 14px;font-size:12px;color:var(--text-secondary);backdrop-filter:blur(6px);z-index:5}
.legend{margin-top:10px;font-size:11px;display:grid;grid-template-columns:auto auto;gap:5px 12px}
.legend span{display:flex;align-items:center;gap:6px;color:var(--text-secondary)}
.dot{width:9px;height:9px;border-radius:50%}
.zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:5}
.zoom button{width:32px;height:32px;background:rgba(10,22,34,.85);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:16px}
.zoom button:hover{color:var(--text-primary);border-color:var(--brand)}
.grp h4 .d{color:var(--brand);text-transform:none;letter-spacing:0}
.rail input[type=range]{width:100%;margin:2px 0 0;accent-color:var(--brand)}
.railnote{margin-top:7px;font-size:10.5px;line-height:1.4;color:var(--text-muted)}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted);font-family:var(--font-mono);font-size:13px;z-index:8}
/* inspector */
.inspector{width:326px;flex:0 0 auto;border-left:1px solid var(--border-subtle);background:var(--bg-surface);overflow-y:auto;padding:18px}
.inspector .empty{color:var(--text-muted);font-size:13px;margin-top:30px;text-align:center}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:10px;color:var(--text-muted)}
.ititle{font-family:var(--font-display);font-weight:600;font-size:19px;margin:4px 0 2px;display:flex;align-items:center;gap:9px}
.glyph{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.isub{color:var(--text-secondary);font-size:13px;margin-bottom:12px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.04em}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-subtle);font-size:13px}
.kv .k{color:var(--text-muted)}.kv .v{font-family:var(--font-mono);color:var(--text-primary);text-align:right}
.sec{margin-top:16px}.sec h5{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted);font-family:var(--font-mono)}
.pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:var(--radius-pill);margin-left:6px}
.pill.match{background:var(--danger-subtle);color:var(--danger-text)}.pill.review{background:var(--warning-subtle);color:var(--warning-text)}.pill.clear{background:var(--success-subtle);color:var(--success-text)}
/* modal */
.modal{display:none;position:fixed;inset:0;background:rgba(4,12,19,.62);z-index:50;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal.open{display:flex}
.sheet{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-2xl);width:620px;max-width:92vw;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-pop)}
.sheet.sm{width:420px}
.sheethead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}
.sheethead h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:17px}
.x{background:transparent;border:0;color:var(--text-muted);font-size:18px;cursor:pointer}
.x:hover{color:var(--text-primary)}
.sheetbody{padding:18px 20px;overflow-y:auto}
.muted{color:var(--text-secondary);font-size:13px;margin:0 0 12px}
textarea{min-height:140px;font-family:var(--font-mono);font-size:12px;resize:vertical}
.impfile{margin:8px 0 12px;font-size:12px}
.fl{display:block;font-size:11px;color:var(--text-muted);margin:6px 0 4px;font-weight:600}
.checkrow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);margin:8px 0}
.checkrow input{width:auto;margin:0}
.maptbl{margin-top:14px;font-size:12px}
.maptbl .mrow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.maptbl .mrow label{width:130px;color:var(--text-muted)}
.maptbl select{margin:0}
.note-ok{color:var(--success-text);font-size:12px;font-family:var(--font-mono);margin-top:8px}
@media(max-width:1180px){.inspector{display:none}}

/* auth / collaboration */
.lockbanner{display:none;align-items:center;gap:12px;padding:9px 16px;background:var(--warning-subtle);color:var(--warning-text);border-bottom:1px solid color-mix(in oklab,var(--warning) 35%,transparent);font-size:13px}
.lockbanner.show{display:flex}
.lockbanner button{background:var(--warning-text);color:#fff;border:0;border-radius:var(--radius-sm);padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-sans)}
.lockbanner.conflict{background:var(--danger-subtle);color:var(--danger-text);border-color:color-mix(in oklab,var(--danger) 40%,transparent)}
.lockbanner.conflict button{background:var(--danger-text)}
body.readonly .toolbar button:not(#expBtn):not(#screenAll){opacity:.4;pointer-events:none}