.sim-body { background: #080b10; }
.sim-body::before { display: none; }
.sim-header { height: 56px; padding: 0 24px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--line); }
.sim-breadcrumb { display:flex; gap:16px; color:#8e9aab; font-size:12px; }
.sim-breadcrumb a { color:#dce5f0; }
.sim-label { margin-left:auto; color:#8293a8; font:11px ui-monospace,Consolas,monospace; }
.sim-workspace { padding: 20px 20px 24px; max-width:1920px; margin:auto; }
.sim-titlebar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.ticket-heading { flex:1 1 340px; min-width:0; }
.ticket-heading h1 { overflow-wrap:anywhere; }
.sim-titlebar h1 { margin:5px 0 0; font-size:27px; font-weight:650; letter-spacing:-.045em; }
.sim-titlebar .eyebrow { font-size:9px; }
.sim-subtitle { margin:4px 0 0; color:#99a9bc; font-size:12px; }
.session-actions { display:flex; align-items:center; gap:10px; }
#scenario-select { width:min(230px,30vw); min-width:150px; max-width:100%; text-overflow:ellipsis; min-height:36px; padding:0 28px 0 10px; color:#d4e1f0; background:#111824; border:1px solid #273141; border-radius:7px; font-size:11px; }
#scenario-select:focus-visible { outline:2px solid #79a7df; outline-offset:2px; }
#session-status { font-size:11px; color:#8796a9; margin-right:8px; }
.sim-button { cursor:pointer; min-height:36px; padding:0 13px; color:#cdd8e7; background:#111824; border:1px solid #273141; border-radius:7px; font-size:11px; font-weight:650; }
.sim-button:hover { background:#182334; }
.sim-button.primary { background:#c5e0ff; border-color:#c5e0ff; color:#101823; }
.sim-button.primary:hover { background:#e0eeff; }
button:disabled { cursor:wait; opacity:.45; }
.sim-grid { display:grid; grid-template-columns:258px minmax(440px,1fr) 272px; gap:12px; align-items:stretch; min-height:560px; height:calc(100dvh - 204px); }
.ticket-pane,.console-pane,.evidence-pane { border:1px solid #202938; border-radius:10px; overflow:hidden; background:#0c1119; min-width:0; }
.ticket-pane,.evidence-pane { overflow-y:auto; scrollbar-width:thin; scrollbar-color:#344257 transparent; }
.pane-title { display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1; min-height:46px; padding:0 16px; border-bottom:1px solid var(--line); background:#0c1119; font-size:13px; font-weight:650; }
.small-label { color:#8191a6; font:9px ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.07em; }
.ticket-priority { color:#a4b7ce; font-size:11px; font-weight:500; }
.ticket-content { padding:16px; }
.ticket-content .ticket-lead { margin:0; color:#d2deed; font-size:14px; line-height:1.55; }
.ticket-content h2 { font-size:12px; margin:0 0 10px; }
.ticket-content p,.ticket-content li,.evidence-pane p { color:#afbed0; font-size:13px; line-height:1.65; }
.ticket-facts { margin:16px 0; border-block:1px solid var(--line); padding:10px 0; }
.ticket-facts div { margin:8px 0; }
.ticket-facts dt { color:#8f9fb4; font-size:10px; margin-bottom:2px; }
.ticket-facts dd { margin:0; color:#d0dbea; font:11px/1.4 ui-monospace,Consolas,monospace; }
.ticket-section { border-bottom:1px solid var(--line); padding-bottom:12px; }
.ticket-content ul { padding-left:16px; margin:0; }
.ticket-content li { padding-left:2px; margin-bottom:6px; font-size:12px; line-height:1.45; }
details summary { cursor:pointer; color:#d3deeb; font-size:12px; }
.ticket-content details { border-top:1px solid var(--line); padding-top:16px; margin-top:22px; }
.hint-button { display:flex; justify-content:space-between; width:100%; background:transparent; border:1px solid #2c3c52; border-radius:7px; color:#accff5; font-size:12px; padding:10px; cursor:pointer; margin-top:14px; }
.ticket-content .hint-caption { font-size:10px; color:#8c9bb0; margin:7px 0 0; line-height:1.45; }
.console-pane { display:flex; flex-direction:column; background:#080d14; }
.terminal-toolbar { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #202938; min-height:46px; background:#101721; gap:6px; }
.device-tabs { display:flex; align-self:stretch; }
.device-tab { background:transparent; border:0; border-bottom:2px solid transparent; color:#9bacc0; padding:0 15px; font-size:12px; cursor:pointer; }
.device-tab span { display:block; font-size:9px; margin-top:4px; color:#728297; }
.device-tab.selected { color:#d6e9ff; border-bottom-color:#84baff; background:#162030; }
.terminal-help { border:0; background:transparent; color:#b1d2f8; font-size:11px; cursor:pointer; padding:10px 14px; }
.terminal-help:hover { text-decoration:underline; }
.terminal-output { flex:1; min-height:0; overflow:auto; padding:18px 18px; scrollbar-width:thin; scrollbar-color:#344257 transparent; font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; color:#c5d3e4; }
.terminal-welcome { padding:12px 0 20px; }
.terminal-wordmark { color:#7890ae; font-size:10px; letter-spacing:.12em; }
.terminal-welcome p:first-of-type { color:#deebfc; font-size:16px; margin-top:22px; }
.terminal-welcome p { color:#91a2b9; }
.terminal-muted { font-size:10px; }
.terminal-entry { margin:0 0 18px; }
.terminal-entry pre { margin:5px 0 0; font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.terminal-help-entry { margin-top:5px; }
.terminal-help-entry summary { color:#9db8d7; font:11px ui-monospace,Consolas,monospace; }
.terminal-command { color:#e0ebfa; white-space:pre-wrap; overflow-wrap:anywhere; }
.terminal-command span { color:#83b6f5; }
.terminal-path { color:#7c91ac; font-size:11px; }
.terminal-status { display:flex; justify-content:space-between; gap:8px; color:#a3b4c9; font:11px ui-monospace,Consolas,monospace; padding:9px 15px; border-block:1px solid #1b2736; background:#0d1520; }
.terminal-guidance { padding:9px 15px; border-bottom:1px solid #1b2736; color:#aabbd0; font-size:11px; line-height:1.4; }
.terminal-guidance code { color:#d6e9ff; font:inherit; }
.command-suggestions { display:flex; align-items:center; gap:8px; margin-top:8px; }
.suggestion-label { color:#8295ad; font:10px ui-monospace,Consolas,monospace; }
#command-suggestions { display:flex; flex-wrap:wrap; gap:6px; }
.command-suggestion { padding:4px 7px; border:1px solid #31445b; border-radius:5px; color:#b9d6f5; background:#142034; font:10px ui-monospace,Consolas,monospace; cursor:pointer; }
.command-suggestion:hover,.command-suggestion:focus-visible { background:#20334d; border-color:#6695c9; }
#dirty-label.pending { color:#e3bc7f; }
#terminal-form { display:flex; gap:9px; align-items:center; padding:10px 15px; }
#prompt { color:#93c3ff; white-space:nowrap; font:12px ui-monospace,Consolas,monospace; }
#command { min-width:0; width:100%; border:0; background:transparent; outline:none; padding:4px 0; color:#e4edf9; font:13px ui-monospace,Consolas,monospace; }
#command::placeholder { color:#8090a5; }
#terminal-form:focus-within { box-shadow:inset 0 0 0 1px #4d7198; }
#send { background:#213750; border:1px solid #476587; border-radius:5px; color:#d6e9ff; font-size:11px; font-weight:650; padding:6px 9px; cursor:pointer; white-space:nowrap; }
#interrupt { background:#17263a; border:1px solid #375575; border-radius:5px; color:#c7ddf7; font:10px ui-monospace,Consolas,monospace; padding:6px 8px; cursor:pointer; white-space:nowrap; }
#cli-completions { padding:12px 16px; color:#a9caef; background:#111e2e; border-top:1px solid #28405c; font:11px/1.7 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; max-height:110px; overflow:auto; }
.topology-card { padding:16px 16px 10px; }
.network-path { display:flex; flex-direction:column; align-items:stretch; margin:12px 0 7px; }
.network-path div { display:flex; justify-content:space-between; align-items:center; gap:6px; min-height:27px; padding:4px 8px; border:1px solid #2b3b50; border-radius:5px; background:#111b28; color:#d2dfef; font-size:11px; }
.network-path div span { color:#9db0c7; font:10px ui-monospace,Consolas,monospace; }
.network-path .path-router { border-color:#648fbd; background:#17283c; }
.network-path i { align-self:center; display:block; height:10px; border-left:1px solid #57718e; }
.topology-card p { font-size:10px; margin:7px 0 0; }
.evidence-detail { padding:13px 16px; border-top:1px solid var(--line); }
.evidence-detail p { font-size:11px; margin:10px 0 0; line-height:1.55; }
#ticket-evidence,#handover-evidence { white-space:pre-line; }
.notes-panel { padding:13px 16px; border-top:1px solid var(--line); }
.notes-panel[open] summary { margin-bottom:12px; }
.notes-panel label { display:block; font-size:12px; margin-bottom:12px; }
.notes-panel textarea { width:100%; background:#080d14; border:1px solid #28364b; color:#c9d7e9; padding:10px; border-radius:6px; font-family:inherit; font-size:11px; line-height:1.6; resize:vertical; min-height:90px; }
.notes-panel textarea:focus { outline:1px solid #79a7df; }
.notes-panel button { margin-top:8px; }
#notes-status { color:#8ab9aa; font-size:10px; display:block; margin-top:8px; }
#connection-error { padding:12px 15px; border:1px solid #805e39; color:#e5c79d; background:#211c16; border-radius:7px; font-size:12px; margin-bottom:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
dialog { color:#e3edf9; background:#101824; border:1px solid #3b4d66; border-radius:14px; padding:30px; width:min(560px,calc(100% - 40px)); box-shadow:0 30px 100px #0009; }
dialog::backdrop { background:#02050bc9; }
dialog h2 { margin:12px 0 15px; font-size:25px; letter-spacing:-.035em; }
dialog p { color:#a7b7cc; font-size:13px; line-height:1.75; }
.guide-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.guide-columns h3 { font-size:13px; margin:12px 0 4px; }
.guide-columns p { margin:5px 0 12px; }
.guide-columns code,.guide-shortcuts code { color:#d6e9ff; font:12px ui-monospace,Consolas,monospace; }
#guide-dialog { width:min(700px,calc(100% - 40px)); }
#guide-dialog .guide-shortcuts { border-top:1px solid var(--line); padding-top:12px; color:#bfd2e8; }
#guide-dialog .guide-disclosure { color:#8296ae; font-size:11px; }
#guide-dialog button { display:block; margin-left:auto; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
@media (max-width:1350px) { .sim-titlebar { align-items:flex-start; flex-wrap:wrap; } .session-actions { flex:1 1 100%; flex-wrap:wrap; justify-content:flex-end; } #scenario-select { width:min(230px,40vw); } }
.result-check { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; color:#b0bfd2; }
.result-check span { color:#e2b47c; min-width:42px; }
.result-check.pass span { color:#94d3b5; }
dialog .result-caption { font-size:11px; color:#8a9cb5; }
.desktop-notice { display:none; }
.noscript-message { padding:30px; }
@media (min-width:1550px) { .sim-grid { grid-template-columns:290px minmax(480px,1fr) 310px; } }
@media (max-width:1099px) { .sim-workspace { display:none; } .desktop-notice { display:block; max-width:560px; margin:90px auto; padding:24px; } .desktop-notice h1 { font-size:44px; letter-spacing:-.05em; } .desktop-notice p { color:#9daec4; line-height:1.8; } .sim-breadcrumb { display:none; } }