/* storage scene: 1800 x 674 canvas; wires behind the nodes, tokens and the lock in front */
.sc-st-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sc-st-svg.front { z-index: 2; }
.sc-st-bus { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 2; }
.sc-st-wire { fill: none; stroke: #f4f4f4; stroke-width: 3.5; stroke-linecap: butt; stroke-linejoin: round; }
.sc-st-wire.bad { stroke: #ff5b4f; }

.sc-st-nodes { position: absolute; inset: 0; z-index: 1; }
.sc-st-n { position: absolute; border-radius: 16px; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 2px solid #6b6b6b; background: rgba(24,24,24,.92); overflow: hidden; }
.sc-st-n b { font-size: 24px; font-weight: 700; color: #fff; }
.sc-st-n small { font-size: 17px; line-height: 1.25; color: var(--mute); }
.sc-st-n.worker b { font-family: var(--mono); font-size: 22px; }
.sc-st-n.lb b { font-size: 20px; }
.sc-st-n.client { border-style: dashed; }
.sc-st-n.store { border-width: 1.5px; }
.sc-st-n.ext { border-style: dashed; }
.sc-st-badges { position: relative; height: 24px; margin-top: 2px; }
.sc-st-badge { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 17px; font-weight: 600; color: #d9d9d9; }
.sc-st-badge.bad { color: #ff8f86; }
.sc-st-badge.wait { color: #ffd894; }
.sc-st-badge.ok { color: #9ff0cf; }
.sc-st-badge.model { color: #9cc8ff; }
.sc-st-llm { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #2f7fe0, #6aa8ff); box-shadow: 0 0 14px rgba(106,168,255,.8); }

/* tokens: one per request, labelled */
.sc-st-tok rect { fill: #f4f4f4; stroke: #f4f4f4; stroke-width: 2; }
.sc-st-tok text { font-family: var(--mono); font-size: 17px; font-weight: 700; fill: #161616; }
.sc-st-tok.b rect { fill: #1e1e1e; stroke: #f4f4f4; }
.sc-st-tok.b text { fill: #f4f4f4; }
.sc-st-tok.bad rect { fill: #ff5b4f; stroke: #ff5b4f; }
.sc-st-tok.bad text { fill: #fff; }
.sc-st-tok.ok rect { fill: #3fd49b; stroke: #3fd49b; }
.sc-st-tok.ok text { fill: #0e2a20; }

/* the lock */
.sc-st-lock .body { fill: #f3b84e; filter: drop-shadow(0 0 10px rgba(243,184,78,.75)); }
.sc-st-lock .shackle { fill: none; stroke: #2a1d05; stroke-width: 2.6; stroke-linecap: round; }
.sc-st-lock .case { fill: #2a1d05; }
.sc-st-ttl { fill: none; stroke: #f3b84e; stroke-width: 4; stroke-linecap: round; }
.sc-st-timeout circle { fill: #ff5b4f; }
.sc-st-timeout path { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.sc-st-timeout text { font-family: var(--mono); font-size: 17px; font-weight: 700; fill: #ff8f86; }

/* session panel */
.sc-st-panel { position: absolute; left: 1250px; right: 0; top: 0; bottom: 30px; z-index: 1; border-radius: 18px; border: 1px solid var(--card-line); background: rgba(10,10,10,.6); }
.sc-st-k { position: absolute; left: 24px; top: 22px; font-size: 18px; font-weight: 600; color: var(--mute); }
.sc-st-ver { position: absolute; left: 24px; top: 50px; display: block; font-family: var(--mono); font-size: 64px; font-weight: 700; color: #fff; line-height: 1.1; }
.sc-st-chip { position: absolute; right: 24px; top: 74px; font-family: var(--mono); font-size: 17px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.16); color: #8d8d8d; white-space: nowrap; }
.sc-st-line { position: absolute; left: 24px; right: 24px; height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.045); font-family: var(--mono); font-size: 17px; color: #d9d9d9; white-space: nowrap; }
.sc-st-line.ok { color: #9ff0cf; }
.sc-st-line.bad { color: #ffb3ad; background: rgba(255,91,79,.1); }
.sc-st-line.note { background: transparent; color: #8d8d8d; font-style: italic; padding-left: 0; }