/* Studio storyboard panel (storyboard.js). Uses the theme tokens from theme.css, with fallbacks. */
.sb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-stats { font-family: var(--sd-mono, monospace); font-size: 12px; color: var(--sd-muted, #a3a3a3); letter-spacing: .04em; text-transform: uppercase; }
.sb-stats b { color: var(--sd-gold, #F5C518); font-weight: 700; }
.sb-new { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border: 1px solid var(--sd-gold-line, rgba(245,197,24,.28)); background: rgba(0,0,0,.5); }
.sb-new[hidden] { display: none; }
.sb-new .row { margin-top: 2px; }
.sb-new button.primary { width: auto; padding: 8px 16px; }
.sb-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: var(--sd-mono, monospace); font-size: 11px; color: var(--sd-muted, #a3a3a3); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.sb-check input { accent-color: var(--sd-gold, #F5C518); }
.sb-scenes { display: grid; gap: 10px; margin-top: 12px; }
.sb-scene { border: 1px solid var(--sd-hairline, rgba(255,255,255,.1)); border-left: 3px solid var(--sd-hairline, rgba(255,255,255,.18)); padding: 10px 12px; background: rgba(0,0,0,.45); }
.sb-scene.current { border-color: var(--sd-gold-line, rgba(245,197,24,.28)); border-left-color: var(--sd-gold, #F5C518); }
.sb-shead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sb-sn { font-family: var(--sd-mono, monospace); font-weight: 700; font-size: 18px; color: var(--sd-gold, #F5C518); }
.sb-st { flex: 1 1 220px; min-width: 0; }
.sb-st b { font-size: 14px; }
.sb-set { font-size: 12px; color: var(--sd-muted, #a3a3a3); }
.sb-set i { opacity: .6; }
.sb-time { font-family: var(--sd-mono, monospace); font-size: 11px; color: var(--sd-muted, #a3a3a3); text-transform: uppercase; }
.sb-cur { font-family: var(--sd-mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-on-gold, #000); background: var(--sd-gold, #F5C518); padding: 2px 7px; }
.sb-shead button.ghost { padding: 4px 8px; font-size: 11px; }
.sb-row { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.sb-card { flex: 0 0 168px; border: 1px solid var(--sd-gold-line, rgba(245,197,24,.28)); background: #000; }
.sb-thumb { position: relative; aspect-ratio: 16 / 9; background: #111; }
.sb-thumb img, .sb-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-n { position: absolute; left: 0; top: 0; background: var(--sd-gold, #F5C518); color: var(--sd-on-gold, #000); font: 700 11px var(--sd-mono, monospace); padding: 1px 6px; }
.sb-meta { padding: 5px 7px 0; font-family: var(--sd-mono, monospace); font-size: 10.5px; line-height: 1.45; color: var(--sd-muted, #a3a3a3); text-transform: uppercase; }
.sb-meta b { color: var(--sd-gold, #F5C518); font-weight: 600; }
.sb-beat { padding: 3px 7px 0; font-size: 11.5px; color: var(--sd-text, #fff); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb-move { display: flex; align-items: center; gap: 5px; margin: 5px 7px 7px; font-family: var(--sd-mono, monospace); font-size: 10px; text-transform: uppercase; }
.sb-move select { padding: 2px 4px; font-size: 11px; }
.sb-link { flex: 0 0 18px; align-self: center; display: flex; justify-content: center; color: transparent; }
.sb-link.on { color: var(--sd-cyan, #19E6FF); filter: drop-shadow(0 0 4px rgba(25,230,255,.6)); }
.sb-empty { font-family: var(--sd-mono, monospace); font-size: 11px; color: var(--sd-muted, #a3a3a3); text-transform: uppercase; letter-spacing: .08em; padding: 14px 4px; }
.sb-pending { position: relative; overflow: hidden; border-style: dashed; }
.sb-pending .sb-meta { padding-bottom: 8px; color: var(--sd-gold, #F5C518); }