Constant STYLE
Source const STYLE: &str = "/* ui-storybook \u{2014} semantic CSS in rust-ui\'s dark zinc aesthetic.\n *\n * Plain CSS rather than Tailwind to keep the toolchain Rust-only. Class\n * naming intentionally mirrors rust-ui\'s component class hooks so swapping\n * to Tailwind later is a string replacement, not a rewrite.\n */\n\n:root {\n /* Neutral-zinc palette. The recorder shell is intentionally hue-\n * free \u{2014} slight blue cast from the Tailwind `zinc` family was\n * showing up as a subtle tint on the card surfaces, so the panel\n * and card backgrounds use these exact values (matching\n * neutral-950 / neutral-900) instead. */\n --bg: #0a0a0b;\n --bg-elev: #171719;\n --bg-row-alt: #1f1f1f;\n --fg: #ffffff;\n --fg-muted: #a1a1aa; /* zinc-400 */\n --border: #272727; /* neutral edge */\n --border-strong: #3f3f3f;\n --accent: #fafafa;\n --accent-fg: #09090b;\n --danger: #ef4444; /* red-500 */\n --secondary: #1f1f1f;\n --kf-hold: #a1a1aa;\n --kf-linear: #38bdf8; /* sky-400 */\n --kf-ease: #a78bfa; /* violet-400 */\n --kf-marker: #facc15; /* yellow-400 */\n\n --radius: 6px;\n --radius-sm: 4px;\n --radius-lg: 10px;\n\n --font-sans: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n\n /* \u{2500}\u{2500} Semantic UI-01 tokens \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\n *\n * Aliases for the recurring product surfaces. Components should\n * reach for these instead of the raw `--bg` / `--border` /\n * `--accent` values so the same component reads correctly in\n * popovers, panels, and selected rows. New semantic tokens are\n * added here when a component needs one that isn\'t yet defined.\n */\n --surface-base: var(--bg);\n --surface-elevated: var(--bg-elev);\n --surface-popover: #131313;\n --surface-selected: #232323;\n --surface-glass: rgba(23, 23, 25, 0.78);\n\n --text-primary: var(--fg);\n --text-secondary: var(--fg-muted);\n --text-tertiary: #71717a;\n\n --line-subtle: var(--border);\n --line-strong: var(--border-strong);\n /* Visible white edge for the recorder card/row outlines. 12 %\n * opacity reads as a clean hairline against the neutral panel\n * without screaming for attention; consumers apply it as\n * `border: 1.5px solid var(--line-card)`. */\n --line-card: rgba(255, 255, 255, 0.12);\n\n --action-record: var(--danger);\n --action-record-hover: #dc2626;\n\n --shadow-popover: 0 18px 48px rgba(0, 0, 0, 0.55);\n --shadow-elevated: 0 6px 16px rgba(0, 0, 0, 0.30);\n\n --radius-panel: var(--radius-lg);\n --radius-control: var(--radius);\n --radius-pill: 999px;\n\n --focus-ring: 0 0 0 2px rgba(56, 189, 248, 0.55);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Surface \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.surface {\n border-radius: var(--radius-panel);\n}\n.surface-base { background: var(--surface-base); }\n.surface-elevated {\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n box-shadow: var(--shadow-elevated);\n}\n.surface-popover {\n background: var(--surface-popover);\n border: 1px solid var(--line-subtle);\n box-shadow: var(--shadow-popover);\n}\n.surface-selected {\n background: var(--surface-selected);\n border: 1px solid var(--line-strong);\n}\n.surface-glass {\n background: var(--surface-glass);\n border: 1px solid var(--line-strong);\n backdrop-filter: blur(12px);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Badge \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: var(--radius-pill);\n font-family: var(--font-sans);\n font-size: 11px;\n font-weight: 500;\n line-height: 1.4;\n}\n.badge-neutral {\n background: var(--secondary);\n color: var(--text-primary);\n}\n.badge-accent {\n background: rgba(250, 250, 250, 0.10);\n color: var(--text-primary);\n border: 1px solid var(--line-subtle);\n}\n.badge-danger {\n background: rgba(239, 68, 68, 0.16);\n color: #f87171;\n}\n.badge-live {\n background: rgba(239, 68, 68, 0.18);\n color: #fca5a5;\n}\n.badge-live::before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--action-record);\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);\n animation: rec-pulse 1.4s ease-out infinite;\n}\n.badge-plan {\n background: transparent;\n color: var(--text-secondary);\n border: 1px solid var(--line-subtle);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n font-size: 10px;\n}\n.badge-count {\n background: var(--secondary);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 10px;\n padding: 1px 6px;\n min-width: 18px;\n justify-content: center;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Divider \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.divider {\n background: var(--line-subtle);\n}\n.divider-h {\n height: 1px;\n width: 100%;\n}\n.divider-v {\n width: 1px;\n align-self: stretch;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Kbd row \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.kbd-row {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n}\n.kbd-key {\n font-family: var(--font-mono);\n background: var(--secondary);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-sm);\n padding: 1px 6px;\n font-size: 11px;\n color: var(--text-primary);\n line-height: 1.4;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} ChevronDown \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\n * Inline SVG that paints with `currentColor`, so the consuming\n * container\'s `color` rule controls the tint. The SVG carries its\n * own width/height, but `display:block` avoids the inline baseline\n * gap when sitting alongside text. */\n.chevron-down {\n display: block;\n flex-shrink: 0;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} IconTile \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.icon-tile {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: var(--radius-control);\n font-family: var(--font-sans);\n font-size: 11px;\n font-weight: 600;\n color: var(--text-primary);\n flex-shrink: 0;\n border: 1px solid var(--line-subtle);\n}\n.icon-tile-workspace { background: linear-gradient(135deg, #4338ca, #db2777); color: #fff; border-color: transparent; }\n.icon-tile-device { background: var(--secondary); color: var(--text-secondary); }\n.icon-tile-app { background: #1e293b; color: #e2e8f0; }\n.icon-tile-action { background: var(--surface-elevated); }\n.icon-tile-user { background: #18181b; color: #fafafa; border-radius: 8px; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-01 story layout helpers \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.token-grid {\n display: grid;\n grid-template-columns: 220px 80px 1fr;\n gap: 8px 14px;\n align-items: center;\n font-family: var(--font-mono);\n font-size: 12px;\n padding: 14px 18px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-panel);\n}\n.token-name { color: var(--text-secondary); }\n.token-swatch {\n width: 60px;\n height: 20px;\n border-radius: var(--radius-sm);\n border: 1px solid var(--line-subtle);\n}\n.token-value { color: var(--text-primary); }\n\n.surface-stack {\n display: grid;\n gap: 14px;\n padding: 14px;\n background: var(--surface-base);\n border-radius: var(--radius-panel);\n}\n.surface-demo {\n padding: 16px 20px;\n font-family: var(--font-sans);\n font-size: 13px;\n color: var(--text-primary);\n}\n\n.badge-row { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} AppShell \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.app-shell {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 480px;\n background: var(--surface-base);\n border-radius: var(--radius-panel);\n overflow: hidden;\n border: 1px solid var(--line-subtle);\n}\n.app-shell-titlebar {\n padding: 8px 14px;\n background: var(--surface-elevated);\n border-bottom: 1px solid var(--line-subtle);\n font-family: var(--font-mono);\n font-size: 11px;\n color: var(--text-secondary);\n}\n.app-shell-body { flex: 1; display: flex; min-height: 0; }\n.app-shell-rail {\n width: 76px;\n background: var(--bg);\n border-right: 1px solid var(--line-card);\n display: flex;\n flex-direction: column;\n}\n.app-shell-main {\n flex: 1;\n background: var(--surface-base);\n padding: 18px 22px;\n overflow: auto;\n min-width: 0;\n}\n.app-shell-inspector {\n width: 280px;\n background: var(--surface-elevated);\n border-left: 1px solid var(--line-subtle);\n padding: 16px 18px;\n overflow: auto;\n}\n.app-shell-footer {\n background: var(--surface-elevated);\n border-top: 1px solid var(--line-subtle);\n padding: 6px 14px;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} NavigationRail \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.nav-rail {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 0;\n height: 100%;\n gap: 14px;\n color: var(--text-secondary);\n}\n.nav-rail-top { display: flex; align-items: center; justify-content: center; }\n.nav-rail-bottom {\n margin-top: auto;\n padding-bottom: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.nav-rail-items {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 100%;\n align-items: center;\n}\n/* Each rail entry is a uniform rounded-square icon tile (label\n * underneath). The base state is a flat surface-elevated tile; the\n * selected state is a brighter outlined version. */\n.nav-rail-item {\n appearance: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 10px;\n width: 56px;\n padding: 0;\n cursor: pointer;\n color: var(--text-secondary);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 4px;\n position: relative;\n transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n}\n.nav-rail-item .nav-rail-icon {\n width: 44px;\n height: 44px;\n border-radius: 10px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-card);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* The icon child is an SVG that paints with `currentColor`, so\n * `color` here drives the stroke tint of the Lucide glyph. */\n color: rgba(255, 255, 255, 0.85);\n}\n.nav-rail-item:hover .nav-rail-icon {\n background: var(--surface-selected);\n color: #ffffff;\n border-color: var(--line-strong);\n}\n/* Active state brightens the label only; the tile itself stays\n * unchanged until :hover. */\n.nav-rail-item-active {\n color: var(--text-primary);\n}\n.nav-rail-item-disabled { opacity: 0.4; cursor: not-allowed; }\n.nav-rail-label {\n font-size: 11px;\n font-weight: 500;\n color: inherit;\n letter-spacing: 0.01em;\n}\n.nav-rail-count {\n position: absolute;\n top: 4px;\n right: 4px;\n background: var(--action-record);\n color: #fff;\n font-family: var(--font-mono);\n font-size: 9px;\n line-height: 1;\n padding: 2px 5px;\n border-radius: var(--radius-pill);\n min-width: 14px;\n text-align: center;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} WorkspaceBadge \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.workspace-badge {\n appearance: none;\n background: transparent;\n border: 0;\n padding: 0;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(--text-secondary);\n}\n.workspace-badge-tile {\n width: 44px;\n height: 44px;\n border-radius: 10px;\n background: var(--action-record);\n color: #fff;\n font-family: var(--font-sans);\n font-size: 14px;\n font-weight: 700;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n letter-spacing: 0.02em;\n}\n.workspace-badge-chevron {\n position: absolute;\n right: -2px;\n bottom: -2px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: var(--surface-elevated);\n border: 1px solid var(--line-strong);\n color: var(--text-secondary);\n font-size: 8px;\n line-height: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.workspace-badge-open .workspace-badge-chevron { color: var(--text-primary); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UserAvatar \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.user-avatar {\n appearance: none;\n background: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.user-avatar-img { width: 100%; height: 100%; object-fit: cover; }\n.user-avatar-monogram {\n width: 100%;\n height: 100%;\n background: #2563eb;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 13px;\n font-weight: 600;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} App-shell story scaffolding \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.shell-story { width: 720px; height: 460px; }\n.shell-story .app-shell { height: 100%; min-height: 0; }\n.shell-story-main-placeholder {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--text-tertiary);\n font-family: var(--font-mono);\n font-size: 13px;\n}\n.shell-story-inspector-placeholder {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--text-secondary);\n}\n\nhtml, body {\n background: var(--bg);\n color: var(--fg);\n font-family: var(--font-sans);\n font-size: 14px;\n line-height: 1.5;\n margin: 0;\n padding: 0;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Button \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.btn {\n appearance: none;\n border: 1px solid transparent;\n border-radius: var(--radius);\n font: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n user-select: none;\n}\n.btn:disabled { opacity: 0.5; cursor: not-allowed; }\n.btn-sm { padding: 4px 10px; font-size: 12px; height: 28px; }\n.btn-md { padding: 6px 14px; font-size: 14px; height: 34px; }\n.btn-lg { padding: 8px 18px; font-size: 15px; height: 40px; }\n\n.btn-default { background: var(--accent); color: var(--accent-fg); }\n.btn-default:hover:not(:disabled) { background: #e4e4e7; }\n\n.btn-outline { background: transparent; color: var(--fg); border-color: var(--border); }\n.btn-outline:hover:not(:disabled) { background: var(--bg-elev); border-color: var(--border-strong); }\n\n.btn-ghost { background: transparent; color: var(--fg); }\n.btn-ghost:hover:not(:disabled) { background: var(--bg-elev); }\n\n.btn-destructive { background: var(--danger); color: #fff; }\n.btn-destructive:hover:not(:disabled) { background: #dc2626; }\n\n.btn-secondary { background: var(--secondary); color: var(--fg); }\n.btn-secondary:hover:not(:disabled) { background: #3f3f46; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Card \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.card {\n background: var(--bg-elev);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n overflow: hidden;\n}\n.card-header {\n padding: 14px 18px 10px;\n border-bottom: 1px solid var(--border);\n}\n.card-title { font-size: 15px; font-weight: 600; }\n.card-subtitle { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }\n.card-body { padding: 14px 18px; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Story layout helpers \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.story-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }\nkbd {\n font-family: var(--font-mono);\n background: var(--secondary);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n padding: 1px 6px;\n font-size: 12px;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} DopeSheet \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.dope-sheet {\n position: relative;\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n font-family: var(--font-mono);\n font-size: 11px;\n overflow: hidden;\n}\n.dope-row {\n display: grid;\n grid-template-columns: 120px 1fr;\n align-items: stretch;\n border-bottom: 1px solid var(--border);\n}\n.dope-row:last-child { border-bottom: 0; }\n.dope-row:nth-child(odd) .dope-track { background: var(--bg-row-alt); }\n.dope-ruler { background: var(--bg-elev); color: var(--fg-muted); }\n\n.dope-label {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n border-right: 1px solid var(--border);\n background: var(--bg-elev);\n}\n.dope-label-spacer { background: var(--bg-elev); }\n.dope-label-glyph {\n width: 14px;\n height: 14px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--fg-muted);\n}\n.dope-label-text { color: var(--fg); }\n\n.dope-track {\n position: relative;\n height: 28px;\n}\n.dope-ruler-track { height: 22px; }\n.dope-tick {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 1px;\n background: var(--border);\n}\n.dope-tick-label {\n position: absolute;\n top: 3px;\n left: 4px;\n font-size: 10px;\n color: var(--fg-muted);\n}\n\n.dope-keyframe {\n position: absolute;\n top: 50%;\n width: 8px;\n height: 8px;\n margin-left: -4px;\n margin-top: -4px;\n transform: rotate(45deg);\n background: var(--kf-hold);\n border-radius: 1px;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n}\n.dope-keyframe.kf-hold { background: var(--kf-hold); }\n.dope-keyframe.kf-linear { background: var(--kf-linear); }\n.dope-keyframe.kf-ease { background: var(--kf-ease); }\n.dope-keyframe.kf-marker {\n background: var(--kf-marker);\n width: 3px;\n height: 22px;\n margin-left: -1.5px;\n margin-top: -11px;\n transform: none;\n border-radius: 1px;\n}\n\n.dope-playhead {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 2px;\n margin-left: 119px; /* offset past the labels column */\n background: var(--accent);\n box-shadow: 0 0 6px rgba(250, 250, 250, 0.4);\n pointer-events: none;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} DropZone \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.drop-zone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 56px 32px;\n border-radius: var(--radius-lg);\n text-align: center;\n transition: background 160ms ease, border-color 160ms ease,\n transform 160ms ease;\n user-select: none;\n}\n.drop-zone-idle {\n background: var(--bg-elev);\n border: 1.5px dashed var(--border-strong);\n}\n.drop-zone-idle:hover {\n border-color: var(--fg-muted);\n background: #1c1c20;\n}\n.drop-zone-active {\n background: rgba(56, 189, 248, 0.08);\n border: 1.5px solid var(--kf-linear);\n transform: scale(1.005);\n}\n.drop-zone-glyph {\n font-size: 42px;\n line-height: 1;\n color: var(--fg-muted);\n}\n.drop-zone-active .drop-zone-glyph {\n color: var(--kf-linear);\n}\n.drop-zone-headline {\n font-size: 16px;\n font-weight: 600;\n color: var(--fg);\n}\n.drop-zone-subtext {\n font-size: 13px;\n color: var(--fg-muted);\n}\n.drop-zone-hint {\n margin-top: 8px;\n font-family: var(--font-mono);\n font-size: 11px;\n color: var(--fg-muted);\n background: var(--secondary);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n padding: 2px 8px;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} PlayerControls \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.player-controls {\n display: grid;\n grid-template-columns: 36px auto 1fr auto;\n gap: 12px;\n align-items: center;\n padding: 10px 14px;\n background: var(--bg-elev);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n}\n.player-toggle {\n appearance: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-fg);\n border: 0;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: transform 120ms ease;\n}\n.player-toggle:hover { transform: scale(1.05); }\n.player-toggle-glyph {\n font-size: 11px;\n letter-spacing: -1px;\n line-height: 1;\n}\n.player-toggle-paused .player-toggle-glyph { padding-left: 2px; /* visual centering */ }\n.player-time {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--fg-muted);\n min-width: 38px;\n text-align: center;\n}\n.player-scrub {\n display: flex;\n align-items: center;\n height: 30px;\n}\n.player-scrub-track {\n position: relative;\n flex: 1;\n height: 4px;\n background: var(--border);\n border-radius: 2px;\n}\n.player-scrub-fill {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n background: var(--accent);\n border-radius: 2px;\n}\n.player-scrub-handle {\n position: absolute;\n top: 50%;\n width: 12px;\n height: 12px;\n margin-left: -6px;\n margin-top: -6px;\n background: var(--accent);\n border-radius: 50%;\n box-shadow: 0 0 0 4px rgba(250, 250, 250, 0.08);\n transition: box-shadow 120ms ease;\n}\n.player-scrub-handle:hover {\n box-shadow: 0 0 0 6px rgba(250, 250, 250, 0.14);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Editor mock composition \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.editor-mock {\n display: grid;\n grid-template-columns: 1fr;\n gap: 14px;\n}\n.editor-mock-preview {\n margin-bottom: 12px;\n}\n.editor-mock-screen {\n aspect-ratio: 16 / 9;\n background:\n linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(167, 139, 250, 0.16)),\n var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--fg-muted);\n font-family: var(--font-mono);\n font-size: 13px;\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} RecordingToolbar \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.recording-toolbar {\n display: grid;\n grid-template-columns: auto auto 1fr auto;\n gap: 14px;\n align-items: center;\n padding: 10px 14px;\n background: var(--bg-elev);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n font-size: 13px;\n}\n.rec-status {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--fg-muted);\n}\n.rec-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--fg-muted);\n display: inline-block;\n}\n.rec-recording .rec-dot:not(.rec-dot-static) {\n background: var(--danger);\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);\n animation: rec-pulse 1.4s ease-out infinite;\n}\n.rec-paused .rec-dot:not(.rec-dot-static) {\n background: var(--kf-marker);\n}\n.rec-status-label {\n font-weight: 500;\n}\n.rec-recording .rec-status-label { color: var(--danger); }\n.rec-paused .rec-status-label { color: var(--kf-marker); }\n.rec-timer {\n font-family: var(--font-mono);\n font-size: 14px;\n color: var(--fg);\n min-width: 60px;\n}\n.rec-source {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--fg-muted);\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n padding: 4px 10px;\n justify-self: start;\n}\n.rec-source-glyph {\n color: var(--kf-linear);\n font-size: 14px;\n line-height: 1;\n}\n.rec-actions {\n display: flex;\n gap: 8px;\n}\n.rec-action {\n appearance: none;\n border: 1px solid transparent;\n border-radius: var(--radius);\n padding: 6px 14px;\n font: inherit;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: background 120ms ease;\n}\n.rec-action-primary {\n background: var(--danger);\n color: #fff;\n}\n.rec-action-primary:hover { background: #dc2626; }\n.rec-action-primary .rec-dot-static {\n background: #fff;\n}\n.rec-action-secondary {\n background: var(--secondary);\n color: var(--fg);\n}\n.rec-action-secondary:hover { background: #3f3f46; }\n.rec-action-stop {\n background: transparent;\n color: var(--fg);\n border-color: var(--border);\n}\n.rec-action-stop:hover {\n background: var(--bg-elev);\n border-color: var(--border-strong);\n}\n\n@keyframes rec-pulse {\n 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }\n 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} StatusBar \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.status-bar {\n display: flex;\n align-items: center;\n gap: 18px;\n padding: 6px 14px;\n background: var(--bg-elev);\n border-top: 1px solid var(--border);\n border-radius: var(--radius-sm);\n font-size: 12px;\n font-family: var(--font-mono);\n color: var(--fg-muted);\n}\n.status-cell {\n display: inline-flex;\n align-items: baseline;\n gap: 6px;\n}\n.status-key {\n text-transform: uppercase;\n font-size: 10px;\n letter-spacing: 0.05em;\n color: #71717a;\n}\n.status-value {\n color: var(--fg);\n}\n.status-spacer { flex: 1; }\n.status-detail {\n font-size: 12px;\n color: var(--fg-muted);\n}\n.status-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 3px 10px;\n border-radius: 999px;\n font-family: var(--font-sans);\n font-size: 11px;\n font-weight: 500;\n}\n.status-pill-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n}\n.status-pill-ready { background: rgba(34, 197, 94, 0.12); color: #4ade80; }\n.status-pill-ready .status-pill-dot { background: #4ade80; }\n.status-pill-busy { background: rgba(56, 189, 248, 0.12); color: var(--kf-linear); }\n.status-pill-busy .status-pill-dot {\n background: var(--kf-linear);\n box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);\n animation: rec-pulse 1.4s ease-out infinite;\n}\n.status-pill-error { background: rgba(239, 68, 68, 0.14); color: #f87171; }\n.status-pill-error .status-pill-dot { background: var(--danger); }\n\n/* track-kind tints (subtle accents on the row backgrounds) */\n.track-video .dope-track { background: linear-gradient(0deg, rgba(56, 189, 248, 0.04), rgba(56, 189, 248, 0.04)), var(--bg); }\n.track-cursor .dope-track { background: linear-gradient(0deg, rgba(167, 139, 250, 0.04), rgba(167, 139, 250, 0.04)), var(--bg); }\n.track-audio .dope-track { background: linear-gradient(0deg, rgba(34, 197, 94, 0.04), rgba(34, 197, 94, 0.04)), var(--bg); }\n.track-caption .dope-track { background: linear-gradient(0deg, rgba(250, 204, 21, 0.04), rgba(250, 204, 21, 0.04)), var(--bg); }\n.track-effect .dope-track { background: linear-gradient(0deg, rgba(244, 114, 182, 0.04), rgba(244, 114, 182, 0.04)), var(--bg); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} PopoverSurface (UI-03) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.popover-surface {\n background: var(--surface-popover);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-popover);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n font-family: var(--font-sans);\n}\n.popover-header {\n padding: 12px 14px 8px;\n border-bottom: 1px solid var(--line-subtle);\n}\n.popover-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }\n.popover-description { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }\n.popover-body { padding: 6px; }\n.popover-footer {\n padding: 8px 12px;\n border-top: 1px solid var(--line-subtle);\n display: flex;\n align-items: center;\n gap: 8px;\n background: var(--surface-elevated);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} MenuList \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} MenuSection \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.menu-section { display: contents; }\n.menu-section-heading {\n text-transform: uppercase;\n font-size: 10px;\n letter-spacing: 0.08em;\n color: var(--text-tertiary);\n padding: 8px 10px 4px;\n}\n.menu-section-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} MenuRow \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.menu-row-item { list-style: none; }\n.menu-row {\n appearance: none;\n border: 0;\n background: transparent;\n width: 100%;\n padding: 6px 10px;\n display: flex;\n align-items: center;\n gap: 10px;\n border-radius: var(--radius-control);\n font: inherit;\n color: var(--text-primary);\n cursor: pointer;\n text-align: left;\n transition: background 120ms ease;\n position: relative;\n}\n.menu-row:hover:not(:disabled) { background: var(--surface-elevated); }\n.menu-row-selected { background: var(--surface-selected); }\n.menu-row-action .menu-row-title { font-weight: 600; }\n.menu-row-danger { color: #f87171; }\n.menu-row-disabled { opacity: 0.45; cursor: not-allowed; }\n\n.menu-row-leading { flex-shrink: 0; display: inline-flex; align-items: center; }\n.menu-row-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n.menu-row-title { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.menu-row-subtitle { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.menu-row-badges { display: inline-flex; gap: 6px; flex-shrink: 0; }\n.menu-row-trailing {\n display: inline-flex;\n align-items: center;\n color: var(--text-secondary);\n font-family: var(--font-mono);\n font-size: 11px;\n flex-shrink: 0;\n}\n.menu-row-check { color: var(--text-primary); font-size: 11px; margin-left: 4px; }\n\n.menu-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 8px;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} IconButton (UI-04) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.icon-btn {\n appearance: none;\n border: 1px solid transparent;\n border-radius: var(--radius-control);\n width: 32px;\n height: 32px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font: inherit;\n cursor: pointer;\n color: var(--text-secondary);\n background: transparent;\n transition: background 120ms ease, color 120ms ease;\n}\n.icon-btn:hover:not(:disabled) { background: var(--surface-elevated); color: var(--text-primary); }\n.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n.icon-btn-pressed { background: var(--surface-selected); color: var(--text-primary); border-color: var(--line-strong); }\n.icon-btn-filled { background: var(--secondary); color: var(--text-primary); }\n.icon-btn-danger { background: var(--action-record); color: #fff; }\n.icon-btn-danger:hover:not(:disabled) { background: var(--action-record-hover); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} ToggleSwitch \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.toggle {\n appearance: none;\n border: 0;\n background: transparent;\n padding: 0;\n cursor: pointer;\n}\n.toggle:disabled { cursor: not-allowed; }\n.toggle-track {\n display: inline-block;\n width: 32px;\n height: 18px;\n background: var(--secondary);\n border-radius: 999px;\n position: relative;\n transition: background 120ms ease;\n}\n.toggle-knob {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 14px;\n height: 14px;\n background: var(--text-primary);\n border-radius: 50%;\n transition: transform 160ms ease;\n}\n.toggle-on .toggle-track { background: var(--text-primary); }\n.toggle-on .toggle-knob { background: #09090b; transform: translateX(14px); }\n.toggle-disabled { opacity: 0.45; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} ToggleSwitch \u{2014} single-element pill toggle \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n/* Used by the live RecorderPage rows (camera / mic / system-audio /\n * on-screen options). Renders as a <button role=\"switch\"> with a\n * single <span class=\"toggle-switch-thumb\"> child \u{2014} no separate track\n * element, so the button itself is the track. Visual treatment matches\n * the two-element `.toggle` above but adapted to that flatter DOM.\n */\n.toggle-switch {\n appearance: none;\n position: relative;\n display: inline-block;\n width: 32px;\n height: 18px;\n padding: 0;\n background: var(--secondary);\n border: 0;\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: background 120ms ease;\n flex-shrink: 0;\n}\n.toggle-switch:disabled { cursor: not-allowed; opacity: 0.45; }\n.toggle-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }\n.toggle-switch-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 14px;\n height: 14px;\n background: var(--text-primary);\n border-radius: 50%;\n transition: transform 160ms ease, background 120ms ease;\n}\n.toggle-switch-checked { background: var(--text-primary); }\n.toggle-switch-checked .toggle-switch-thumb {\n background: var(--surface-base);\n transform: translateX(14px);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} SegmentedControl \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.segmented {\n display: inline-flex;\n background: var(--secondary);\n border-radius: var(--radius-pill);\n padding: 3px;\n gap: 2px;\n}\n.segment {\n appearance: none;\n border: 0;\n background: transparent;\n font: inherit;\n padding: 4px 12px;\n border-radius: var(--radius-pill);\n color: var(--text-secondary);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n}\n.segment:hover:not(:disabled) { color: var(--text-primary); }\n.segment-active { background: var(--text-primary); color: #09090b; }\n.segment-active:hover { color: #09090b; }\n.segment-disabled { opacity: 0.4; cursor: not-allowed; }\n.segment-icon { font-size: 12px; line-height: 1; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Slider \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.slider {\n display: grid;\n grid-template-columns: 80px 1fr 40px;\n align-items: center;\n gap: 10px;\n font-size: 12px;\n color: var(--text-secondary);\n}\n.slider-label { white-space: nowrap; }\n.slider-track {\n position: relative;\n height: 4px;\n background: var(--secondary);\n border-radius: 999px;\n}\n.slider-fill {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n background: var(--text-primary);\n border-radius: 999px;\n}\n.slider-thumb {\n position: absolute;\n top: 50%;\n width: 12px;\n height: 12px;\n margin: -6px 0 0 -6px;\n background: var(--text-primary);\n border-radius: 50%;\n box-shadow: 0 0 0 4px rgba(250, 250, 250, 0.08);\n}\n.slider-readout {\n font-family: var(--font-mono);\n color: var(--text-primary);\n text-align: right;\n}\n.slider-disabled { opacity: 0.45; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} SelectPill \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.select-pill {\n appearance: none;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-pill);\n padding: 4px 10px 4px 8px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font: inherit;\n font-size: 12px;\n color: var(--text-primary);\n cursor: pointer;\n}\n.select-pill:hover:not(:disabled) { background: var(--surface-selected); }\n.select-pill:disabled { opacity: 0.45; cursor: not-allowed; }\n.select-pill-icon { font-size: 13px; line-height: 1; }\n.select-pill-chevron { color: var(--text-tertiary); font-size: 9px; }\n.select-pill-open .select-pill-chevron { color: var(--text-primary); transform: rotate(180deg); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} ColorSwatch \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.color-swatch {\n appearance: none;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n border: 0;\n padding: 0;\n cursor: pointer;\n position: relative;\n}\n.color-swatch-ring {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n}\n.color-swatch-selected {\n box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--text-primary);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Meter \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.meter { display: inline-flex; gap: 2px; align-items: center; }\n.meter-bar {\n display: inline-block;\n width: 3px;\n height: 14px;\n background: var(--secondary);\n border-radius: 1px;\n}\n.meter-bar-on { background: #4ade80; }\n.meter-danger .meter-bar-on { background: var(--action-record); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} DisplaySourceCard (UI-07) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.display-source-card {\n background: var(--surface-elevated);\n border: 2px solid transparent;\n border-radius: var(--radius-panel);\n padding: 10px 12px 12px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n font-family: var(--font-sans);\n width: 360px;\n color: var(--text-primary);\n}\n.display-source-card-selected { border-color: var(--action-record); }\n.display-source-card-unavailable { opacity: 0.6; }\n.display-source-header { display: flex; align-items: center; gap: 8px; }\n.display-source-label { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }\n.display-source-name {\n font-size: 13px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.display-source-size {\n font-size: 11px;\n color: var(--text-secondary);\n}\n.display-source-star { color: var(--kf-marker); font-size: 12px; line-height: 1; }\n.display-source-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n.display-source-dims {\n background: var(--action-record);\n color: #fff;\n font-family: var(--font-mono);\n font-size: 11px;\n padding: 2px 8px;\n border-radius: var(--radius-pill);\n}\n.display-source-chevron { color: var(--text-tertiary); font-size: 11px; transition: transform 120ms; }\n.display-source-chevron-open { color: var(--text-primary); transform: rotate(180deg); }\n\n.display-source-unavailable-banner {\n font-size: 11px;\n color: var(--action-record);\n background: rgba(239, 68, 68, 0.10);\n border: 1px solid rgba(239, 68, 68, 0.30);\n border-radius: var(--radius-control);\n padding: 6px 10px;\n text-align: center;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} DisplayPreviewFrame \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.display-preview {\n width: 100%;\n background: linear-gradient(140deg, #2a2a32, #15151a);\n border-radius: var(--radius-control);\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n border: 1px solid var(--line-subtle);\n}\n.display-preview-titlebar {\n background: #2a2a2f;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n height: 16px;\n}\n.display-preview-tlbtn { width: 8px; height: 8px; border-radius: 50%; }\n.display-preview-tlbtn-red { background: #ef4444; }\n.display-preview-tlbtn-amber { background: #f59e0b; }\n.display-preview-tlbtn-green { background: #10b981; }\n.display-preview-body {\n position: relative;\n flex: 1;\n background:\n linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(167, 139, 250, 0.10)),\n radial-gradient(closest-side at 50% 60%, #1a1a20, #0b0b0e);\n}\n.display-preview-chip {\n position: absolute;\n border-radius: 4px;\n display: flex;\n align-items: flex-start;\n padding: 2px 6px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);\n color: var(--text-primary);\n font-size: 10px;\n}\n.display-preview-chip-label {\n font-family: var(--font-sans);\n background: rgba(0, 0, 0, 0.35);\n padding: 1px 4px;\n border-radius: 3px;\n white-space: nowrap;\n}\n.display-preview-overlay {\n position: absolute;\n top: 6px;\n right: 8px;\n font-family: var(--font-mono);\n font-size: 10px;\n background: rgba(0, 0, 0, 0.55);\n border: 1px solid rgba(250, 250, 250, 0.10);\n border-radius: var(--radius-pill);\n padding: 2px 8px;\n color: var(--text-primary);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} CaptureSourceRow (UI-08) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.capture-source-row {\n display: grid;\n grid-template-columns: 36px 1fr auto auto auto;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-panel);\n font-family: var(--font-sans);\n width: 360px;\n}\n.capture-source-row-expanded { border-color: var(--line-strong); }\n.capture-source-row-off { opacity: 0.85; }\n.capture-source-leading { display: inline-flex; align-items: center; justify-content: center; }\n.capture-source-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.capture-source-title {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 600;\n color: var(--text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.capture-source-star { color: var(--kf-marker); font-size: 11px; line-height: 1; }\n.capture-source-subtitle {\n font-size: 11px;\n color: var(--text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.capture-source-meter { display: inline-flex; align-items: center; }\n.capture-source-toggle { display: inline-flex; align-items: center; }\n.capture-source-chevron {\n appearance: none;\n background: transparent;\n border: 0;\n color: var(--text-tertiary);\n font-size: 11px;\n cursor: pointer;\n padding: 4px;\n border-radius: var(--radius-control);\n}\n.capture-source-chevron:hover { background: var(--surface-selected); color: var(--text-primary); }\n.capture-source-chevron-open { color: var(--text-primary); transform: rotate(180deg); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} DevicePickerMenu / DevicePickerRow (UI-08) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.device-picker-row-item { list-style: none; }\n.device-picker-row {\n appearance: none;\n border: 0;\n background: transparent;\n width: 100%;\n padding: 8px 10px;\n display: grid;\n grid-template-columns: 36px 1fr auto auto auto;\n align-items: center;\n gap: 10px;\n border-radius: var(--radius-control);\n font: inherit;\n color: var(--text-primary);\n cursor: pointer;\n text-align: left;\n transition: background 120ms ease;\n}\n.device-picker-row:hover { background: var(--surface-elevated); }\n.device-picker-row-selected { background: var(--surface-selected); }\n.device-picker-thumb {\n width: 36px;\n height: 24px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--text-primary);\n font-size: 11px;\n flex-shrink: 0;\n}\n.device-picker-thumb-glyph {\n background: rgba(0, 0, 0, 0.35);\n padding: 1px 5px;\n border-radius: 3px;\n}\n.device-picker-row-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.device-picker-row-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.device-picker-row-detail {\n font-size: 11px;\n color: var(--text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.device-picker-row-meter { display: inline-flex; align-items: center; }\n.device-picker-row-check {\n color: var(--action-record);\n font-weight: 700;\n font-size: 12px;\n}\n\n.device-picker-state {\n padding: 24px 20px;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n}\n.device-picker-state-glyph {\n font-size: 22px;\n color: var(--text-tertiary);\n}\n.device-picker-state-glyph-warn { color: var(--action-record); }\n.device-picker-state-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-primary);\n}\n.device-picker-state-subtitle {\n font-size: 12px;\n color: var(--text-secondary);\n max-width: 240px;\n}\n\n.btn-sm { padding: 4px 10px; font-size: 12px; height: 26px; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} SystemAudioRow + AppList (UI-09) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.system-audio-row {\n display: grid;\n grid-template-columns: auto 1fr auto auto;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-panel);\n width: 360px;\n}\n.system-audio-leading { display: inline-flex; align-items: center; }\n.system-audio-icon-stack { display: inline-flex; align-items: center; }\n.system-audio-icon {\n width: 24px;\n height: 24px;\n border-radius: 6px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 700;\n color: #fff;\n border: 2px solid var(--surface-elevated);\n margin-left: -8px;\n flex-shrink: 0;\n}\n.system-audio-icon:first-child { margin-left: 0; }\n.system-audio-icon-overflow {\n width: 24px;\n height: 24px;\n border-radius: 6px;\n background: var(--secondary);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--surface-elevated);\n margin-left: -8px;\n}\n.system-audio-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.system-audio-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }\n.system-audio-subtitle { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); }\n.system-audio-toggle { display: inline-flex; align-items: center; }\n.system-audio-chevron {\n appearance: none;\n background: transparent;\n border: 0;\n color: var(--text-tertiary);\n font-size: 11px;\n cursor: pointer;\n padding: 4px;\n border-radius: var(--radius-control);\n}\n.system-audio-chevron-open { color: var(--text-primary); transform: rotate(180deg); }\n\n.system-audio-applist {\n background: var(--surface-popover);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-panel);\n padding: 10px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 360px;\n}\n.system-audio-filters {\n display: inline-flex;\n gap: 4px;\n padding: 3px;\n background: var(--secondary);\n border-radius: var(--radius-pill);\n align-self: flex-start;\n}\n.system-audio-filter {\n appearance: none;\n border: 0;\n background: transparent;\n font: inherit;\n padding: 3px 12px;\n border-radius: var(--radius-pill);\n color: var(--text-secondary);\n cursor: pointer;\n font-size: 11px;\n}\n.system-audio-filter:hover { color: var(--text-primary); }\n.system-audio-filter-active { background: var(--text-primary); color: #09090b; }\n\n.system-audio-rows {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.audio-app-row {\n display: grid;\n grid-template-columns: 18px 24px 1fr auto auto auto;\n align-items: center;\n gap: 10px;\n padding: 6px 8px;\n border-radius: var(--radius-control);\n}\n.audio-app-row:hover { background: var(--surface-elevated); }\n.audio-app-row-selected { background: var(--surface-selected); }\n\n.audio-app-check {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n border: 1px solid var(--line-strong);\n background: var(--surface-base);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: var(--text-primary);\n}\n.audio-app-check-on {\n background: var(--text-primary);\n color: #09090b;\n border-color: var(--text-primary);\n}\n\n.audio-app-icon {\n width: 24px;\n height: 24px;\n border-radius: 5px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 700;\n color: #fff;\n flex-shrink: 0;\n}\n\n.audio-app-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.audio-app-name {\n font-size: 13px;\n color: var(--text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.audio-app-context {\n font-size: 11px;\n color: var(--text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.audio-app-live {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.04em;\n color: var(--action-record);\n}\n.audio-app-live-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--action-record);\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);\n animation: rec-pulse 1.4s ease-out infinite;\n}\n.audio-app-meter { display: inline-flex; align-items: center; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} OnScreenOptionsPopover (UI-10) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.on-screen-options {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.on-screen-option-row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: flex-start;\n gap: 12px;\n padding: 10px 6px;\n border-radius: var(--radius-control);\n}\n.on-screen-option-row:not(:last-child) {\n border-bottom: 1px solid var(--line-subtle);\n border-radius: 0;\n padding-bottom: 12px;\n margin-bottom: 2px;\n}\n.on-screen-option-row-disabled { opacity: 0.5; }\n.on-screen-option-toggle { display: inline-flex; align-items: center; padding-top: 2px; }\n.on-screen-option-text {\n display: flex;\n flex-direction: column;\n gap: 3px;\n min-width: 0;\n}\n.on-screen-option-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-primary);\n}\n.on-screen-option-description {\n font-size: 12px;\n color: var(--text-secondary);\n line-height: 1.4;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-11 \u{2014} Recording-controls footer \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.recording-controls-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 10px 12px;\n background: var(--surface-popover);\n border-top: 1px solid var(--line-subtle);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n.recording-controls-selects {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n.recording-controls-zoom,\n.recording-controls-countdown {\n display: inline-flex;\n}\n\n/* Inverted shortcut chips for the red Start button. */\n.shortcut-badges {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n margin-left: 8px;\n}\n.shortcut-badge {\n font-family: var(--font-mono);\n font-size: 11px;\n font-weight: 600;\n padding: 1px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.28);\n color: rgba(255, 255, 255, 0.92);\n border: 1px solid rgba(0, 0, 0, 0.32);\n min-width: 14px;\n text-align: center;\n}\n.shortcut-badges-on-action .shortcut-badge {\n background: rgba(0, 0, 0, 0.32);\n border-color: rgba(0, 0, 0, 0.42);\n}\n\n/* Start recording button. */\n.start-recording-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 600;\n color: #fff;\n background: var(--action-record);\n border: 1px solid rgba(0, 0, 0, 0.25);\n border-radius: var(--radius-pill);\n cursor: pointer;\n box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,\n 0 1px 3px rgba(0, 0, 0, 0.35);\n transition: background 80ms ease;\n}\n.start-recording-btn:hover:not(:disabled) {\n background: var(--action-record-hover);\n}\n.start-recording-btn:disabled,\n.start-recording-disabled {\n opacity: 0.55;\n cursor: not-allowed;\n box-shadow: none;\n}\n.start-recording-loading {\n cursor: progress;\n}\n.start-recording-permission-blocked {\n background: #f59e0b; /* amber-500 */\n color: #111;\n}\n.start-recording-permission-blocked .shortcut-badge {\n background: rgba(0, 0, 0, 0.18);\n color: #111;\n border-color: rgba(0, 0, 0, 0.28);\n}\n.start-recording-glyph {\n font-size: 12px;\n line-height: 1;\n}\n.start-recording-label {\n font-size: 13px;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-12 \u{2014} Tray record popover \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.tray-record-popover {\n display: flex;\n flex-direction: column;\n width: 420px;\n border-radius: var(--radius-panel);\n background: var(--surface-popover);\n border: 1px solid var(--line-subtle);\n box-shadow: var(--shadow-popover);\n overflow: hidden;\n position: relative;\n}\n.tray-record-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n padding: 10px 12px;\n border-bottom: 1px solid var(--line-subtle);\n}\n.tray-record-workspace-chip {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px 4px 4px;\n border-radius: var(--radius-pill);\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n color: var(--text-primary);\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n}\n.tray-record-workspace-chip:hover { background: var(--surface-selected); }\n.tray-record-workspace-label { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }\n.tray-record-chevron { color: var(--text-tertiary); font-size: 10px; }\n\n.tray-record-body {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n}\n.tray-record-display,\n.tray-record-sources,\n.tray-record-audio,\n.tray-record-on-screen {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.tray-record-on-screen-row {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n gap: 10px;\n padding: 8px 10px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n color: var(--text-primary);\n cursor: pointer;\n text-align: left;\n}\n.tray-record-on-screen-row:hover { background: var(--surface-selected); }\n.tray-record-on-screen-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n.tray-record-on-screen-title { font-size: 13px; font-weight: 600; }\n.tray-record-on-screen-summary { font-size: 11px; color: var(--text-secondary); }\n\n.tray-popover-overlay {\n position: absolute;\n z-index: 10;\n}\n.tray-popover-overlay-workspace { top: 56px; left: 12px; }\n.tray-popover-overlay-camera,\n.tray-popover-overlay-microphone { top: 220px; right: 12px; }\n.tray-popover-overlay-on-screen { bottom: 76px; right: 12px; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-13 \u{2014} Compact recording status pill \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.recording-status-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-pill);\n color: var(--text-primary);\n font-size: 12px;\n}\n.recording-status-recording { background: var(--action-record); color: #fff; border-color: rgba(0,0,0,0.25); }\n.recording-status-paused { background: #f59e0b; color: #111; border-color: rgba(0,0,0,0.3); }\n.recording-status-stopping { background: var(--surface-elevated); color: var(--text-secondary); }\n.recording-status-stopped { background: #16a34a; color: #fff; border-color: rgba(0,0,0,0.2); }\n.recording-status-error { background: #7f1d1d; color: #fee2e2; border-color: rgba(0,0,0,0.3); }\n.recording-status-countdown { background: var(--action-record); color: #fff; padding: 4px 8px; }\n.recording-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }\n.recording-status-dot-live { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.7); animation: status-pulse 1.5s ease-in-out infinite; }\n.recording-status-dot-paused { background: #111; }\n.recording-status-text { font-weight: 600; font-family: var(--font-mono); }\n.recording-status-shortcuts { display: inline-flex; gap: 2px; margin-left: 4px; }\n.recording-status-kbd {\n font-family: var(--font-mono);\n font-size: 10px;\n padding: 1px 4px;\n border-radius: 3px;\n background: rgba(0,0,0,0.3);\n color: rgba(255,255,255,0.92);\n}\n.recording-status-action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n background: rgba(0,0,0,0.25);\n border: none;\n border-radius: 50%;\n color: #fff;\n cursor: pointer;\n font-size: 10px;\n}\n.recording-status-action:hover { background: rgba(0,0,0,0.4); }\n.recording-status-action-stop { background: rgba(255,255,255,0.18); }\n.recording-status-action-stop:hover { background: rgba(255,255,255,0.28); }\n.recording-status-glyph { font-size: 13px; }\n\n.countdown-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(0,0,0,0.32);\n}\n.countdown-badge-digit {\n font-family: var(--font-mono);\n font-size: 16px;\n font-weight: 700;\n color: #fff;\n}\n\n@keyframes status-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-14 \u{2014} Library sidebar \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.library-sidebar {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 12px;\n width: 220px;\n height: 100%;\n background: var(--surface-base);\n border-right: 1px solid var(--line-subtle);\n color: var(--text-primary);\n}\n.library-primary, .library-section-rows {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n.library-section-heading {\n display: block;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n color: var(--text-tertiary);\n margin: 0 4px 6px;\n}\n.library-nav-row {\n display: grid;\n grid-template-columns: 18px 1fr auto;\n align-items: center;\n gap: 10px;\n padding: 6px 8px;\n border-radius: var(--radius-control);\n font-size: 13px;\n cursor: pointer;\n}\n.library-nav-row:hover { background: var(--surface-elevated); }\n.library-nav-row-selected { background: var(--surface-selected); color: var(--text-primary); }\n.library-nav-row-disabled { opacity: 0.5; cursor: not-allowed; }\n.library-nav-icon { font-size: 14px; color: var(--text-secondary); text-align: center; }\n.library-nav-row-selected .library-nav-icon { color: var(--text-primary); }\n.library-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.library-nav-count {\n color: var(--text-tertiary);\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n}\n.library-nav-badge {\n background: var(--action-record);\n color: #fff;\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: var(--radius-pill);\n min-width: 16px;\n text-align: center;\n}\n\n.storage-meter {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 8px;\n border-radius: var(--radius-control);\n background: var(--surface-elevated);\n}\n.storage-meter-bar {\n position: relative;\n height: 6px;\n background: var(--line-subtle);\n border-radius: var(--radius-pill);\n overflow: hidden;\n}\n.storage-meter-fill {\n display: block;\n height: 100%;\n background: var(--kf-linear);\n transition: width 200ms ease;\n}\n.storage-meter-warn .storage-meter-fill { background: var(--action-record); }\n.storage-meter-labels {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 11px;\n color: var(--text-secondary);\n}\n.storage-meter-plan {\n font-weight: 700;\n font-size: 10px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--text-tertiary);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-15 \u{2014} Recording card + library grid \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.library-grid-host {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 16px;\n width: 100%;\n background: var(--surface-base);\n color: var(--text-primary);\n}\n.library-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n}\n.library-filters {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.library-filter {\n padding: 4px 10px;\n background: transparent;\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-pill);\n color: var(--text-secondary);\n font-size: 12px;\n cursor: pointer;\n}\n.library-filter:hover { background: var(--surface-elevated); color: var(--text-primary); }\n.library-filter-active {\n background: var(--surface-selected);\n color: var(--text-primary);\n border-color: var(--line-strong);\n}\n.library-toolbar-right { display: inline-flex; align-items: center; gap: 8px; }\n.library-sort {\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n color: var(--text-primary);\n font-size: 12px;\n padding: 4px 10px;\n border-radius: var(--radius-control);\n cursor: pointer;\n}\n.library-layout-toggle { display: inline-flex; border: 1px solid var(--line-subtle); border-radius: var(--radius-control); overflow: hidden; }\n.library-layout-btn {\n background: transparent;\n color: var(--text-secondary);\n padding: 4px 8px;\n border: none;\n cursor: pointer;\n font-size: 13px;\n}\n.library-layout-btn-active { background: var(--surface-selected); color: var(--text-primary); }\n\n.library-grid {\n display: grid;\n gap: 14px;\n}\n.library-grid-grid {\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n}\n.library-grid-list {\n grid-template-columns: 1fr;\n}\n.library-grid-list .recording-card {\n display: grid;\n grid-template-columns: 160px 1fr;\n align-items: center;\n}\n.library-grid-list .recording-card-thumb { aspect-ratio: 16 / 9; min-height: 80px; }\n.library-grid-list .recording-card-body { padding: 12px 16px; }\n\n.library-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 48px 12px;\n color: var(--text-secondary);\n}\n.library-empty-icon { font-size: 28px; color: var(--text-tertiary); }\n.library-empty-message { font-size: 13px; }\n\n.recording-card {\n display: flex;\n flex-direction: column;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-panel);\n overflow: hidden;\n cursor: pointer;\n}\n.recording-card-selected { outline: 2px solid var(--kf-linear); outline-offset: 1px; }\n.recording-card-thumb {\n position: relative;\n aspect-ratio: 16 / 9;\n background-size: cover;\n}\n.recording-card-duration {\n position: absolute;\n right: 8px;\n bottom: 8px;\n font-family: var(--font-mono);\n font-size: 11px;\n font-weight: 600;\n color: #fff;\n padding: 2px 6px;\n background: rgba(0,0,0,0.65);\n border-radius: var(--radius-pill);\n}\n.recording-card-category {\n position: absolute;\n left: 8px;\n bottom: 8px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n padding: 2px 6px;\n background: rgba(0,0,0,0.55);\n color: #fff;\n border-radius: var(--radius-pill);\n}\n.recording-card-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n justify-content: center;\n background: rgba(0,0,0,0.55);\n color: #fff;\n font-size: 12px;\n}\n.recording-card-overlay-bar { position: relative; width: 60%; height: 6px; background: rgba(255,255,255,0.18); border-radius: var(--radius-pill); overflow: hidden; }\n.recording-card-overlay-fill { display: block; height: 100%; background: #fff; }\n.recording-card-overlay-failed { background: rgba(220,38,38,0.65); }\n.recording-card-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 10px 12px 12px;\n}\n.recording-card-title { font-size: 13px; font-weight: 600; }\n.recording-card-subtitle { font-size: 11px; color: var(--text-secondary); }\n.recording-card-metrics { display: inline-flex; gap: 10px; margin-top: 4px; }\n.recording-card-metric { font-size: 11px; color: var(--text-tertiary); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-16 \u{2014} Editor shell \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.editor-shell {\n display: grid;\n grid-template-rows: auto auto 1fr auto;\n width: 100%;\n height: 100%;\n background: var(--bg);\n color: var(--text-primary);\n}\n.editor-titlebar {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: 10px;\n padding: 6px 12px;\n background: var(--surface-elevated);\n border-bottom: 1px solid var(--line-subtle);\n}\n.editor-titlebar-traffic { display: inline-flex; gap: 6px; }\n.traffic-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }\n.traffic-close { background: #ff5f57; }\n.traffic-min { background: #ffbd2e; }\n.traffic-max { background: #28c840; }\n.editor-titlebar-text {\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 0;\n text-align: center;\n}\n.editor-titlebar-title { font-size: 13px; font-weight: 600; }\n.editor-titlebar-subtitle { font-size: 11px; color: var(--text-secondary); }\n.editor-titlebar-empty .editor-titlebar-title { color: var(--text-tertiary); font-style: italic; font-weight: 400; }\n\n.editor-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 12px;\n background: var(--surface-base);\n border-bottom: 1px solid var(--line-subtle);\n}\n.editor-toolbar-actions { display: inline-flex; gap: 4px; }\n.editor-toolbar-end { display: inline-flex; gap: 8px; }\n.editor-action {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--radius-control);\n color: var(--text-secondary);\n font-size: 12px;\n cursor: pointer;\n}\n.editor-action:hover { background: var(--surface-elevated); color: var(--text-primary); }\n.editor-action-selected { background: var(--surface-selected); color: var(--text-primary); border-color: var(--line-strong); }\n.editor-action-disabled { opacity: 0.4; cursor: not-allowed; }\n.editor-action-icon { font-size: 13px; }\n\n.editor-body {\n display: grid;\n grid-template-columns: 1fr 320px;\n gap: 8px;\n padding: 8px;\n overflow: hidden;\n}\n.editor-canvas {\n background:\n repeating-conic-gradient(var(--surface-elevated) 0% 25%, var(--surface-base) 0% 50%) 50% 50% / 24px 24px;\n border-radius: var(--radius-panel);\n border: 1px solid var(--line-subtle);\n min-height: 280px;\n}\n/* AUT-510 \u{2014} the live preview canvas. Its intrinsic size is the clip\'s pixel\n dimensions (putImageData doesn\'t scale), so fit it into the pane preserving\n aspect; the black backdrop frames letterboxing. */\n.editor-preview-canvas {\n display: block;\n width: 100%;\n height: 100%;\n max-height: 70vh;\n object-fit: contain;\n border-radius: var(--radius-panel);\n background: #000;\n}\n/* Editor drop zone \u{2014} shown in the canvas when no clip is loaded. Drop a\n video anywhere to open it for editing (handled globally by the app-root\n file-drop listener); `--active` is the drag-over highlight. */\n.editor-dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 100%;\n height: 100%;\n min-height: 280px;\n padding: 24px;\n background: var(--surface-base);\n border: 2px dashed var(--line-subtle);\n border-radius: var(--radius-panel);\n color: var(--fg-muted);\n text-align: center;\n transition:\n border-color 120ms ease,\n background 120ms ease,\n color 120ms ease;\n}\n.editor-dropzone--active {\n border-color: var(--accent);\n background: color-mix(in srgb, var(--accent) 12%, var(--surface-base));\n color: var(--fg);\n}\n.editor-dropzone-icon {\n font-size: 34px;\n line-height: 1;\n opacity: 0.75;\n}\n.editor-dropzone-title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--fg);\n}\n.editor-dropzone-hint {\n margin: 0;\n max-width: 320px;\n font-size: 12.5px;\n}\n.editor-inspector {\n background: var(--surface-elevated);\n border-radius: var(--radius-panel);\n border: 1px solid var(--line-subtle);\n padding: 12px;\n overflow: auto;\n}\n.editor-timeline {\n background: var(--surface-elevated);\n border-top: 1px solid var(--line-subtle);\n padding: 8px 12px;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-17 \u{2014} Wisp canvas host + drop zone \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.wisp-canvas-host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n min-height: 200px;\n}\n.wisp-canvas-host-css-fallback {\n background:\n repeating-conic-gradient(var(--surface-elevated) 0% 25%, var(--surface-base) 0% 50%) 50% 50% / 24px 24px;\n}\n.wisp-canvas-css-label {\n position: absolute;\n bottom: 8px;\n left: 8px;\n font-size: 10px;\n color: var(--text-tertiary);\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n.wisp-canvas-asset { max-width: 100%; max-height: 100%; object-fit: contain; }\n.wisp-canvas-banner {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n background: rgba(245, 158, 11, 0.12);\n color: #f59e0b;\n border: 1px solid rgba(245, 158, 11, 0.5);\n border-radius: var(--radius-control);\n font-size: 12px;\n}\n\n.editor-drop-zone {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: var(--radius-panel);\n border: 1px dashed var(--line-strong);\n background:\n repeating-conic-gradient(var(--surface-elevated) 0% 25%, var(--surface-base) 0% 50%) 50% 50% / 24px 24px;\n overflow: hidden;\n min-height: 360px;\n}\n.editor-drop-zone-active {\n border-color: var(--kf-linear);\n box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45) inset;\n}\n.editor-drop-zone-content {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 24px;\n text-align: center;\n background: rgba(9, 9, 11, 0.55);\n}\n.editor-drop-zone-icon { font-size: 28px; color: var(--text-secondary); }\n.editor-drop-zone-headline { font-size: 18px; font-weight: 600; color: var(--text-primary); }\n.editor-drop-zone-subtext { font-size: 12px; color: var(--text-secondary); }\n.editor-drop-zone-actions {\n display: grid;\n grid-template-columns: repeat(3, minmax(120px, 1fr));\n gap: 12px;\n margin-top: 12px;\n}\n.editor-drop-zone-action {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n padding: 10px 12px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n color: var(--text-primary);\n cursor: pointer;\n}\n.editor-drop-zone-action:hover { background: var(--surface-selected); }\n.editor-drop-zone-action-icon { font-size: 16px; color: var(--text-secondary); }\n.editor-drop-zone-action-label { font-size: 13px; font-weight: 600; }\n.editor-drop-zone-action-desc { font-size: 11px; color: var(--text-secondary); }\n\n.editor-recent-clips {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-top: 16px;\n width: 100%;\n}\n.editor-recent-clips-heading {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n color: var(--text-tertiary);\n}\n.editor-recent-clips-strip { display: flex; gap: 8px; overflow-x: auto; }\n.editor-recent-clip {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n padding: 6px;\n cursor: pointer;\n min-width: 140px;\n}\n.editor-recent-clip-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background-size: cover; }\n.editor-recent-clip-meta { display: flex; flex-direction: column; gap: 2px; }\n.editor-recent-clip-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }\n.editor-recent-clip-duration { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-18 \u{2014} Inspector panel \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.inspector-panel {\n display: flex;\n flex-direction: column;\n width: 320px;\n height: 100%;\n background: var(--surface-base);\n color: var(--text-primary);\n}\n.inspector-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px;\n border-bottom: 1px solid var(--line-subtle);\n}\n.inspector-tab {\n padding: 4px 10px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--radius-pill);\n color: var(--text-secondary);\n font-size: 12px;\n cursor: pointer;\n}\n.inspector-tab:hover { background: var(--surface-elevated); color: var(--text-primary); }\n.inspector-tab-active { background: var(--surface-selected); color: var(--text-primary); border-color: var(--line-strong); }\n\n.inspector-body { padding: 8px 12px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }\n\n.property-section { display: flex; flex-direction: column; gap: 6px; }\n.property-section-heading {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n color: var(--text-tertiary);\n}\n.property-section-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }\n.property-row {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n align-items: center;\n gap: 8px;\n padding: 4px 4px;\n font-size: 12px;\n}\n.property-row-disabled { opacity: 0.45; }\n.property-row-label { color: var(--text-secondary); }\n.property-row-value { color: var(--text-primary); font-variant-numeric: tabular-nums; }\n.property-row-control { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }\n\n.property-slider {\n position: relative;\n flex: 1;\n height: 4px;\n background: var(--line-subtle);\n border-radius: var(--radius-pill);\n overflow: hidden;\n}\n.property-slider-fill { display: block; height: 100%; background: var(--kf-linear); }\n\n.property-toggle {\n position: relative;\n width: 28px;\n height: 16px;\n background: var(--line-subtle);\n border-radius: var(--radius-pill);\n transition: background 120ms ease;\n}\n.property-toggle-on { background: var(--kf-linear); }\n.property-toggle-knob {\n position: absolute;\n top: 1px;\n left: 1px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #fff;\n transition: transform 120ms ease;\n}\n.property-toggle-on .property-toggle-knob { transform: translateX(12px); }\n\n.property-swatches { display: inline-flex; gap: 4px; }\n.property-swatch {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 1px solid var(--line-subtle);\n cursor: pointer;\n}\n.property-swatch-selected { outline: 2px solid var(--kf-linear); outline-offset: 1px; }\n\n.property-pill {\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n color: var(--text-primary);\n font-size: 12px;\n padding: 3px 8px;\n cursor: pointer;\n}\n.property-control-value { font-size: 12px; color: var(--text-primary); }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-19 \u{2014} Timeline skeleton \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.timeline-skeleton {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 8px 12px;\n background: var(--surface-elevated);\n border-radius: var(--radius-panel);\n border: 1px solid var(--line-subtle);\n}\n.timeline-transport {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-family: var(--font-mono);\n font-size: 11px;\n color: var(--text-secondary);\n}\n.timeline-transport-toggle {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--surface-popover);\n border: 1px solid var(--line-strong);\n color: var(--text-primary);\n cursor: pointer;\n font-size: 10px;\n}\n.timeline-timecode { color: var(--text-primary); font-variant-numeric: tabular-nums; }\n.timeline-timecode-sep { color: var(--text-tertiary); }\n.timeline-timecode-total { color: var(--text-secondary); }\n\n.timeline-tracks {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.timeline-track-row {\n display: grid;\n grid-template-columns: 100px 1fr;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: var(--radius-control);\n background: var(--surface-popover);\n}\n.timeline-track-row-selected { outline: 2px solid var(--kf-linear); outline-offset: -2px; }\n.timeline-track-row-disabled { opacity: 0.45; }\n.timeline-track-label {\n font-size: 11px;\n font-weight: 600;\n color: var(--text-primary);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n}\n.timeline-track-body {\n display: flex;\n align-items: center;\n min-height: 28px;\n border: 1px dashed var(--line-strong);\n border-radius: var(--radius-control);\n padding: 0 8px;\n color: var(--text-tertiary);\n font-size: 11px;\n font-style: italic;\n}\n.timeline-track-placeholder { user-select: none; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-20 \u{2014} Cursor Studio shell + style picker \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.cursor-studio-shell {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: var(--bg);\n color: var(--text-primary);\n}\n.cursor-studio-body {\n display: grid;\n grid-template-columns: 1fr 320px;\n gap: 8px;\n padding: 8px;\n flex: 1;\n min-height: 200px;\n}\n.cursor-studio-preview {\n background: var(--surface-elevated);\n border-radius: var(--radius-panel);\n border: 1px solid var(--line-subtle);\n min-height: 280px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.cursor-studio-inspector {\n background: var(--surface-elevated);\n border-radius: var(--radius-panel);\n border: 1px solid var(--line-subtle);\n padding: 12px;\n}\n\n.cursor-style-picker {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n border-top: 1px solid var(--line-subtle);\n background: var(--surface-base);\n}\n.cursor-style-heading {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n color: var(--text-tertiary);\n}\n.cursor-style-tiles {\n display: grid;\n grid-template-columns: repeat(8, 1fr);\n gap: 8px;\n}\n.cursor-style-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n padding: 12px 6px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n color: var(--text-primary);\n cursor: pointer;\n}\n.cursor-style-tile:hover { background: var(--surface-selected); }\n.cursor-style-tile-selected {\n background: #fafafa;\n color: #09090b;\n border-color: #fafafa;\n}\n.cursor-style-tile-disabled { opacity: 0.45; cursor: not-allowed; }\n.cursor-style-tile-preview { font-size: 18px; }\n.cursor-style-tile-label { font-size: 11px; font-weight: 600; }\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-21 \u{2014} Cursor preview canvas + appearance panel \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.cursor-preview-canvas {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n min-height: 200px;\n border-radius: var(--radius-panel);\n border: 1px solid var(--line-subtle);\n overflow: hidden;\n}\n.cursor-preview-arrow {\n font-size: 36px;\n color: #38bdf8;\n text-shadow: 0 0 8px rgba(56, 189, 248, 0.55);\n transform: rotate(-30deg);\n}\n.cursor-preview-ring {\n position: absolute;\n width: 96px;\n height: 96px;\n border-radius: 50%;\n border: 2px solid rgba(56, 189, 248, 0.65);\n box-shadow: 0 0 24px rgba(56, 189, 248, 0.45);\n animation: cursor-ring-pulse 1.6s ease-in-out infinite;\n pointer-events: none;\n}\n.cursor-preview-asset { max-width: 80%; max-height: 80%; object-fit: contain; }\n.cursor-preview-banner {\n position: absolute;\n bottom: 8px;\n left: 8px;\n font-size: 11px;\n color: var(--text-tertiary);\n}\n\n@keyframes cursor-ring-pulse {\n 0%, 100% { transform: scale(0.85); opacity: 0.55; }\n 50% { transform: scale(1.05); opacity: 1; }\n}\n\n.cursor-appearance-panel {\n display: flex;\n flex-direction: column;\n width: 320px;\n height: 100%;\n background: var(--surface-base);\n}\n.cursor-appearance-body {\n flex: 1;\n padding: 12px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n.cursor-appearance-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 8px 12px;\n border-top: 1px solid var(--line-subtle);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} UI-22 \u{2014} Contact sheet \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.contact-sheet {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 24px;\n background: var(--bg);\n color: var(--text-primary);\n}\n.contact-sheet-heading {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--text-tertiary);\n margin: 0;\n}\n.contact-sheet-row {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n.contact-sheet-row-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 12px;\n}\n.contact-sheet-cursor-tile {\n width: 320px;\n height: 360px;\n overflow: hidden;\n border-radius: var(--radius-panel);\n border: 1px solid var(--line-subtle);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} DEV-03 / DEV-08 \u{2014} Storybook index cockpit \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.storybook-index-root {\n display: grid;\n grid-template-columns: 280px 1fr;\n width: 100vw;\n height: 100vh;\n background: var(--surface-base);\n color: var(--text-primary);\n}\n@media (max-width: 720px) {\n .storybook-index-root { grid-template-columns: 1fr; grid-template-rows: 240px 1fr; }\n}\n.storybook-index-sidebar {\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--line-subtle);\n background: var(--surface-elevated);\n overflow: hidden;\n}\n.storybook-index-topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n border-bottom: 1px solid var(--line-subtle);\n}\n.storybook-index-title {\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.04em;\n}\n.storybook-index-count {\n font-size: 10px;\n font-family: var(--font-mono);\n color: var(--text-tertiary);\n background: var(--surface-popover);\n border-radius: var(--radius-pill);\n padding: 2px 8px;\n}\n.storybook-index-search { padding: 8px 12px; border-bottom: 1px solid var(--line-subtle); }\n.storybook-index-search input {\n width: 100%;\n box-sizing: border-box;\n background: var(--surface-popover);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n color: var(--text-primary);\n font-size: 12px;\n padding: 6px 10px;\n}\n.storybook-index-search input::placeholder { color: var(--text-tertiary); }\n.storybook-index-search input:focus {\n outline: none;\n border-color: var(--kf-linear);\n box-shadow: var(--focus-ring);\n}\n\n.storybook-index-list {\n list-style: none;\n margin: 0;\n padding: 8px 0 16px;\n overflow-y: auto;\n flex: 1;\n}\n.storybook-index-list ul { list-style: none; margin: 0; padding: 0; }\n.storybook-index-category { padding: 6px 0; }\n.storybook-index-category.is-hidden { display: none; }\n.storybook-index-heading {\n display: block;\n padding: 6px 14px;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--text-tertiary);\n}\n.storybook-index-row { display: block; }\n.storybook-index-row.is-hidden { display: none; }\n.storybook-index-row a {\n display: block;\n padding: 4px 14px 4px 22px;\n color: var(--text-secondary);\n font-size: 12px;\n text-decoration: none;\n border-left: 2px solid transparent;\n}\n.storybook-index-row a:hover { background: var(--surface-popover); color: var(--text-primary); }\n.storybook-index-row.is-active a {\n background: var(--surface-selected);\n color: var(--text-primary);\n border-left-color: var(--kf-linear);\n}\n\n.storybook-index-main {\n display: flex;\n flex-direction: column;\n min-height: 0;\n background: var(--surface-base);\n}\n.storybook-index-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n border-bottom: 1px solid var(--line-subtle);\n}\n.storybook-index-current {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--text-secondary);\n}\n.storybook-index-open {\n font-size: 11px;\n color: var(--text-tertiary);\n text-decoration: none;\n}\n.storybook-index-open:hover { color: var(--text-primary); }\n.storybook-index-frame {\n flex: 1;\n width: 100%;\n border: 0;\n background: var(--surface-popover);\n min-height: 0;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Webcam bubble overlay (M-BUBBLE.0 / AUT-273) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\n *\n * The `webcam-bubble` Tauri window is transparent + borderless.\n * `.bubble-root` is the body\'s full-viewport child that draws the\n * visible circular surface. For M-BUBBLE.0 this is a coloured\n * placeholder so the empty window is findable; M-BUBBLE.2 (AUT-275)\n * replaces the inner content with a `<canvas>` painted from the\n * M-CAM.2 frame channel.\n *\n * IMPORTANT: do NOT change the bubble shape via `clip-path` or by\n * pre-clipping the canvas. The mask is wisp\'s responsibility \u{2014} once\n * M-CAM.3\'s pipeline is real, the bubble canvas will receive\n * already-masked pixels. CSS-rounding the same edge would visibly\n * double-crop the circle (CLAUDE.md \"Mask is wisp\'s, not CSS\").\n */\n.bubble-root {\n position: fixed;\n inset: 0;\n width: 100vw;\n height: 100vh;\n border-radius: 50%;\n background: radial-gradient(circle at 50% 40%, #4338ca 0%, #1e1b4b 70%, transparent 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n user-select: none;\n -webkit-user-select: none;\n}\n.bubble-root:active { cursor: grabbing; }\n.bubble-root-placeholder {\n font-family: var(--font-sans);\n font-size: 13px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.85);\n letter-spacing: 0.02em;\n text-transform: uppercase;\n pointer-events: none;\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Webcam bubble \u{2014} overlay-on-circle (M-QUAL.4) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\n *\n * No card: the circle IS the widget. `.bubble-root--design` is a\n * transparent, drag-enabled window-filler that centers the\n * `.bubble-stage` (the circle) with a floating device caption below\n * it. The overlays (PREVIEW pill, icon cluster, control pill) are\n * painted on top of the circle as siblings of the clipped feed.\n * Sized for the 260\u{d7}300 webcam-bubble window (tauri.conf.json).\n */\n.bubble-root--design {\n background: transparent !important;\n border-radius: 0 !important;\n display: flex !important;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 0;\n width: 100vw;\n height: 100vh;\n inset: 0;\n position: fixed;\n cursor: grab;\n}\n.bubble-root--design:active { cursor: grabbing; }\n\n/* No card \u{2014} the circle IS the widget. `.bubble-stage` is a relative\n * box (= the circle\'s bounding square) that holds the clipped camera\n * circle plus the overlays as siblings on top of it. overflow stays\n * visible so the top-right icon cluster can hover at the circle edge. */\n.bubble-stage {\n position: relative;\n /* A hard 240\u{d7}240 square \u{2192} border-radius:50% is a perfect circle.\n * `flex-shrink:0` stops the vertical flex column from squashing the\n * height (which would make it an ellipse). NO `aspect-ratio` here:\n * with explicit width+height it\'s redundant, and `aspect-ratio` on a\n * flex item has WebKit sizing quirks that can yield a non-square box\n * (the crooked-preview bug). */\n box-sizing: border-box;\n width: 240px;\n height: 240px;\n flex-shrink: 0;\n}\n\n/* The clipped circular camera feed, filling the stage. Sibling\n * overlays below sit ON it (not inside, so they aren\'t clipped). */\n.bubble-canvas-wrap {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n overflow: hidden;\n /* No dark backing \u{2014} the feed fills the circle, and before the first\n * frame the circle is transparent (no black disc). */\n background: transparent;\n}\n.bubble-canvas-wrap canvas,\n.bubble-canvas-wrap .camera-preview-surface,\n.bubble-canvas-wrap .camera-preview {\n width: 100%;\n height: 100%;\n display: block;\n /* Let clicks fall THROUGH the camera feed to `.bubble-canvas-wrap`\n * (a drag region) \u{2014} Tauri starts a window drag only when the click\n * *target* is itself a drag-region element, and the canvas covers\n * the whole circle. Without this the bubble isn\'t draggable. */\n pointer-events: none;\n}\n\n/* PREVIEW pill \u{2014} overlaid near the top of the circle, centered. */\n.bubble-preview-chip {\n position: absolute;\n /* Sit inside the upper third of the circle (not on the narrow top\n * arc, where the pill pokes out of the bubble), nudged right of dead\n * center so it reads balanced over the feed. */\n top: 16%;\n left: 56%;\n transform: translateX(-50%);\n z-index: 2;\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 3px 9px;\n border-radius: 999px;\n background: rgba(12, 12, 14, 0.55);\n -webkit-backdrop-filter: blur(4px);\n backdrop-filter: blur(4px);\n color: rgba(255, 255, 255, 0.95);\n font: 700 9px/1 var(--font-sans);\n letter-spacing: 0.12em;\n pointer-events: none;\n}\n.bubble-preview-chip-dot {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: #ef4444;\n box-shadow: 0 0 5px rgba(239, 68, 68, 0.85);\n}\n\n/* Pause + settings \u{2014} top-right, hovering at the circle\'s upper-right\n * edge (the stage corner sits just outside the inscribed circle). */\n.bubble-header-actions {\n position: absolute;\n top: 4px;\n right: 4px;\n z-index: 2;\n display: inline-flex;\n gap: 2px;\n padding: 2px;\n border-radius: 999px;\n background: rgba(12, 12, 14, 0.55);\n -webkit-backdrop-filter: blur(4px);\n backdrop-filter: blur(4px);\n}\n.bubble-icon-btn {\n appearance: none;\n background: transparent;\n border: none;\n padding: 3px;\n border-radius: 999px;\n color: rgba(255, 255, 255, 0.85);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n line-height: 0;\n}\n.bubble-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }\n.bubble-icon-btn svg { width: 15px; height: 15px; }\n\n/* Three controls \u{2014} overlaid near the bottom of the circle (~85% down),\n * tightly grouped in a subtle dark pill for legibility over the feed. */\n.bubble-controls {\n position: absolute;\n bottom: 9%;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px;\n border-radius: 999px;\n background: rgba(12, 12, 14, 0.6);\n -webkit-backdrop-filter: blur(4px);\n backdrop-filter: blur(4px);\n}\n.bubble-control {\n appearance: none;\n border: none;\n border-radius: 999px;\n width: 24px;\n height: 24px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.14);\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n line-height: 0;\n}\n.bubble-control:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }\n.bubble-control svg { width: 13px; height: 13px; }\n.bubble-control--active { background: #fff; color: #161618; }\n.bubble-control--active:hover { background: #fff; color: #161618; }\n\n/* Caption \u{2014} floating text below the circle on the page background (no\n * card); the shadow keeps it legible over whatever is behind. */\n.bubble-caption {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n font: 11px/1.2 var(--font-sans);\n color: rgba(255, 255, 255, 0.7);\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);\n}\n.bubble-caption-icon {\n display: inline-flex;\n line-height: 0;\n}\n.bubble-caption-icon svg { width: 12px; height: 12px; }\n.bubble-caption-label { font-weight: 600; color: rgba(255, 255, 255, 0.9); }\n.bubble-caption-sep { opacity: 0.5; }\n.bubble-caption-corner { white-space: nowrap; }\n\n/* The bubble window\'s body is transparent so the borderless window\'s\n * corners are see-through. The dist/ HTML doesn\'t have a body class\n * hook, so we lean on `.bubble-root` being the first child to neutralise\n * the body\'s default rendering when present. */\nhtml:has(.bubble-root),\nbody:has(.bubble-root) {\n /* Both html AND body must be transparent \u{2014} the base `html, body`\n * rule paints `--bg` (#0a0a0b), and overriding only `body` left the\n * `html` element painting an opaque near-black behind the circle\n * (the \"surrounding black\" the bubble appeared to sit on). With both\n * transparent the borderless window shows only the circle + label. */\n background: transparent !important;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\n/* \"Show webcam bubble\" toggle in the Recorder surface. */\n.bubble-toggle {\n appearance: none;\n background: var(--surface-elevated);\n color: var(--text-primary);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n padding: 8px 14px;\n font: inherit;\n font-weight: 500;\n cursor: pointer;\n margin-top: 16px;\n align-self: flex-start;\n transition: background 120ms ease, border-color 120ms ease;\n}\n.bubble-toggle:hover {\n background: var(--surface-selected);\n border-color: var(--line-strong);\n}\n.bubble-toggle:focus-visible {\n outline: none;\n box-shadow: var(--focus-ring);\n}\n\n/* Click-through-mode active state (M-BUBBLE.1 v0 / AUT-274). When the\n * user has enabled passthrough, the toggle button stays \"lit\" so it\'s\n * obvious the bubble is currently not interactive. */\n.bubble-toggle--clickthrough[data-active=\"true\"] {\n background: var(--action-record);\n color: #fff;\n border-color: var(--action-record-hover);\n}\n.bubble-toggle--clickthrough[data-active=\"true\"]:hover {\n background: var(--action-record-hover);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Camera-pipeline diagnostics overlay (M-CAM.3 / AUT-257) \u{2500}\u{2500}\n *\n * Sits inside the Recorder surface. Polls preview_diagnostics every\n * 500ms; renders a small monospace table so the frame counter +\n * source dims / fps are easy to eyeball. Not a finalised UI \u{2014} this\n * is a developer-facing proof-of-life that ships with the M-CAM.3\n * gst layer until the wisp render layer fills in the actual visible\n * canvas. */\n.camera-diagnostics {\n margin-top: 16px;\n padding: 10px 14px;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--text-secondary);\n max-width: 480px;\n align-self: flex-start;\n}\n.camera-diagnostics-header {\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 6px;\n font-family: var(--font-sans);\n font-size: 13px;\n letter-spacing: 0.01em;\n}\n.camera-diagnostics-empty {\n margin: 0;\n font-style: italic;\n color: var(--text-tertiary);\n}\n.camera-diagnostics-rows {\n margin: 0;\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 12px;\n row-gap: 2px;\n}\n.camera-diagnostics-rows dt {\n color: var(--text-tertiary);\n}\n.camera-diagnostics-rows dd {\n margin: 0;\n color: var(--text-primary);\n}\n.camera-diagnostics-frames {\n /* Frame counter ticks up at ~30 Hz \u{2014} emphasise so the user can\n * eyeball it visibly changing. */\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n}\n.camera-diagnostics-dump {\n font-size: 11px;\n word-break: break-all;\n color: var(--text-secondary);\n}\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} Live RecorderPage \u{2014} recording state \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\n *\n * The new app-ui live RecorderPage flips a `data-recording=\"true\"`\n * attribute on the root section while a session is active. While\n * recording:\n * - source rows + on-screen options dim (still readable, but you\n * can\'t change selections mid-record \u{2014} backend would reject)\n * - the start-recording footer is replaced with a Stop button\n * - a red pill at the top shows elapsed time + RECORDING label\n */\n.recorder-page {\n position: relative;\n}\n.recorder-page-recording-pill {\n position: absolute;\n top: 12px;\n left: 50%;\n transform: translateX(-50%);\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 14px;\n border-radius: 999px;\n background: var(--action-record, #ef4444);\n color: #fff;\n font: 600 11px/1 var(--font-sans);\n letter-spacing: 0.06em;\n box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);\n z-index: 5;\n}\n.recorder-page-recording-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #fff;\n animation: recorder-page-pulse 1.2s ease-in-out infinite;\n}\n.recorder-page-recording-label {\n font-weight: 700;\n letter-spacing: 0.08em;\n}\n.recorder-page-recording-elapsed {\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n}\n@keyframes recorder-page-pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.55; transform: scale(0.85); }\n}\n.recorder-page[data-recording=\"true\"] .recorder-page-sources,\n.recorder-page[data-recording=\"true\"] .recorder-page-audio,\n.recorder-page[data-recording=\"true\"] .recorder-page-on-screen,\n.recorder-page[data-recording=\"true\"] .recorder-page-display {\n opacity: 0.55;\n pointer-events: none;\n}\n.recording-controls-footer-stop {\n /* Mirror the regular footer but signal that we\'re in the stop state. */\n}\n.start-recording-stop {\n background: #fff !important;\n color: var(--action-record, #ef4444) !important;\n border: 2px solid var(--action-record, #ef4444);\n}\n.start-recording-stop:hover {\n background: var(--action-record, #ef4444) !important;\n color: #fff !important;\n}\n\n\n/* \u{2500}\u{2500}\u{2500}\u{2500}\u{2500} RecorderPage layout (crates/app-ui/src/recorder_page.rs) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\n * Header + action bar are flex-shrink:0; middle body scrolls.\n * All rules scoped under `.recorder-page` / `.app-surface--recorder`\n * so storybook isolated stories keep their canonical sizes. */\n.recorder-page {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n min-width: 0;\n padding: 8px 12px 12px;\n gap: 8px;\n width: 100%;\n max-width: 100%;\n font-size: 11px;\n overflow-x: hidden;\n}\n.recorder-page,\n.recorder-page *,\n.recorder-page *::before,\n.recorder-page *::after {\n box-sizing: border-box;\n}\n\n/* AppShell wiring \u{2014} pin the recorder flush to the rail, kill the\n * shell-main\'s default padding + scroll so the recorder owns its\n * internal scroll. `:has()` is supported in every webview Tauri 2\n * ships against. */\n.app-surface--recorder {\n padding: 0;\n margin: 0;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.app-surface--recorder > .recorder-page {\n flex: 1;\n min-height: 0;\n}\n.app-shell-main:has(> .app-surface--recorder) {\n padding: 0;\n overflow: hidden;\n min-width: 0;\n}\n\n/* Header \u{2014} capture-mode tabs + overflow menu. Pinned to top. */\n.recorder-page-header {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n}\n.recorder-page-tabs {\n flex: 1;\n min-width: 0;\n}\n.recorder-page-tabs .segmented {\n width: 100%;\n display: flex;\n justify-content: space-between;\n background: var(--surface-elevated);\n border: 1px solid var(--line-subtle);\n}\n.recorder-page-tabs .segment {\n flex: 1;\n justify-content: center;\n font-size: 11px;\n padding: 5px 8px;\n}\n.recorder-page-tabs .segment-active {\n background: var(--surface-selected);\n color: var(--text-primary);\n box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);\n}\n.recorder-page-tabs .segment-icon { font-size: 11px; opacity: 0.85; }\n.recorder-page-overflow {\n appearance: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--radius-control);\n color: var(--text-secondary);\n cursor: pointer;\n font-size: 14px;\n line-height: 1;\n padding: 4px 8px;\n flex-shrink: 0;\n}\n.recorder-page-overflow:hover {\n background: var(--surface-elevated);\n color: var(--text-primary);\n}\n.recorder-page .icon-tile {\n width: 30px;\n height: 30px;\n border-radius: var(--radius-control);\n}\n/* White Lucide icons at 20 px inside the device tile (overrides\n the default muted zinc-400 color + the component\'s built-in size). */\n.recorder-page .icon-tile-device { color: var(--text-primary); }\n.recorder-page .icon-tile-device .lucide { width: 20px; height: 20px; }\n\n/* Body \u{2014} scrollable middle. */\n.recorder-page-body {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n min-width: 0;\n min-height: 0;\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n /* Slim webkit scrollbar so the column doesn\'t reserve a wide gutter. */\n scrollbar-width: thin;\n scrollbar-color: var(--surface-selected) transparent;\n /* Reserve the scrollbar slot even when content fits without it,\n * so the right edge of body content sits at a stable x-coordinate\n * (otherwise the right \"margin\" jumps by 6 px the moment scrolling\n * starts). `scrollbar-gutter` is supported in every modern WebKit\n * and Blink. */\n scrollbar-gutter: stable;\n}\n.recorder-page-body::-webkit-scrollbar { width: 6px; }\n.recorder-page-body::-webkit-scrollbar-thumb {\n background: var(--surface-selected);\n border-radius: 3px;\n}\n.recorder-page-sources,\n.recorder-page-audio { display: flex; flex-direction: column; gap: 6px; }\n.recorder-page-display { display: flex; flex-direction: column; gap: 6px; }\n.recorder-page-on-screen { display: flex; flex-direction: column; gap: 4px; }\n.recorder-page-picker,\n.recorder-page-applist { display: flex; flex-direction: column; }\n\n.recorder-page-sources .capture-source-row,\n.recorder-page-audio .system-audio-row {\n width: 100%;\n}\n.recorder-page-picker .popover-surface,\n.recorder-page-applist .system-audio-applist {\n width: 100%;\n}\n\n/* \u{2500}\u{2500} Display selector row + stylized preview \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\n * The label group (name + size pill + star) sits inline on the left\n * with natural width; the chevron is pushed to the right edge via\n * `margin-left: auto` so the right side stays anchored regardless\n * of label length. */\n.recorder-display-selector {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 7px 10px;\n background: var(--bg);\n border: 1.5px solid var(--line-card);\n border-radius: var(--radius-control);\n color: var(--text-primary);\n font-family: var(--font-sans);\n cursor: pointer;\n text-align: left;\n appearance: none;\n}\n.recorder-display-selector:hover { border-color: rgba(255, 255, 255, 0.22); }\n.recorder-display-selector-swatch {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n background: #ea580c;\n display: inline-block;\n flex-shrink: 0;\n}\n.recorder-display-selector-label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n.recorder-display-selector-name {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.recorder-display-selector-size {\n font-size: 10px;\n color: var(--text-secondary);\n background: var(--surface-selected);\n padding: 1px 6px;\n border-radius: 4px;\n font-family: var(--font-mono);\n}\n.recorder-display-selector-star {\n font-size: 11px;\n color: var(--text-tertiary);\n}\n.recorder-display-selector-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n color: var(--text-secondary);\n margin-left: auto;\n flex-shrink: 0;\n transition: transform 120ms;\n}\n.recorder-display-selector-chevron[data-open=\"true\"] {\n color: var(--text-primary);\n transform: rotate(180deg);\n}\n\n/* Wraps the storybook DisplayPreviewFrame so we can layer a red\n * border + a dim badge over it without modifying the component. */\n.recorder-display-preview-wrap {\n position: relative;\n border: 2px solid var(--action-record);\n border-radius: 10px;\n overflow: hidden;\n background: var(--surface-base);\n}\n.recorder-display-preview-wrap .display-preview {\n border: 0;\n border-radius: 0;\n max-height: 220px;\n}\n/* AUT-269 \u{2014} live screen preview, overlaid on the mock DisplayPreviewFrame.\n * Transparent (canvas default) until the first captured frame paints, so the\n * mock shows through as a placeholder, then the real screen covers it. */\n.recorder-display-preview-canvas {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.recorder-display-preview-badge {\n position: absolute;\n top: 8px;\n right: 8px;\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: var(--radius-pill);\n background: var(--action-record);\n color: #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);\n z-index: 2;\n}\n\n/* Source rows (camera / mic) \u{2014} restyled grid + reordered children.\n * Cards sit barely above the panel (`var(--surface-elevated)`,\n * `#171719`) and are outlined by a clearly visible 1.5 px hairline\n * \u{2014} same treatment as the audio + on-screen + display-selector\n * rows so the column reads as one outlined set. */\n.recorder-page-sources .capture-source-row {\n padding: 7px 10px;\n /* `auto` first column tracks the IconTile size; gap is a real\n * 12 px regardless of future tile-size changes. */\n grid-template-columns: auto 1fr auto auto;\n gap: 12px;\n border-radius: var(--radius-control);\n background: var(--bg);\n border-width: 1.5px;\n border-color: var(--line-card);\n}\n.recorder-page-sources .capture-source-title { font-size: 12px; }\n.recorder-page-sources .capture-source-subtitle { font-size: 10px; }\n.recorder-page-sources .capture-source-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 4px;\n color: var(--text-secondary);\n min-width: 26px;\n height: 26px;\n}\n.recorder-page-sources .capture-source-text .meter-bar { height: 7px; width: 2px; }\n\n/* System-audio row \u{2014} same grid columns + favorite + chevron + toggle. */\n.recorder-page-audio .system-audio-row {\n display: grid;\n grid-template-columns: auto 1fr auto auto;\n padding: 7px 10px;\n gap: 12px;\n border-radius: var(--radius-control);\n background: var(--bg);\n align-items: center;\n border: 1.5px solid var(--line-card);\n}\n.recorder-page-audio .system-audio-title {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n}\n.recorder-page-audio .system-audio-subtitle { font-size: 10px; }\n.recorder-page-audio .system-audio-inline-icons {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 1px 3px;\n border-radius: 5px;\n background: var(--surface-selected);\n}\n.recorder-page-audio .system-audio-inline-icons .system-audio-icon {\n width: 14px;\n height: 14px;\n font-size: 8px;\n border-radius: 3px;\n border: 1px solid rgba(0, 0, 0, 0.25);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n margin: 0;\n}\n.recorder-page-audio .system-audio-inline-icons .system-audio-icon-overflow {\n font-size: 9px;\n padding: 0 3px;\n}\n.recorder-page-audio .system-audio-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 4px;\n color: var(--text-secondary);\n min-width: 26px;\n height: 26px;\n}\n\n/* On-screen row \u{2014} styled to match the source rows above it. */\n.recorder-page-on-screen-row {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 7px 10px;\n background: var(--bg);\n border: 1.5px solid var(--line-card);\n border-radius: var(--radius-control);\n color: var(--text-primary);\n font-family: var(--font-sans);\n cursor: pointer;\n text-align: left;\n}\n.recorder-page-on-screen-row:focus-visible {\n outline: none;\n box-shadow: var(--focus-ring);\n}\n.recorder-page-on-screen-text {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n.recorder-page-on-screen-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }\n.recorder-page-on-screen-summary {\n font-size: 10px;\n color: var(--text-secondary);\n background: var(--surface-selected);\n padding: 1px 7px;\n border-radius: var(--radius-pill);\n}\n.recorder-page-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n color: var(--text-secondary);\n transition: transform 120ms;\n}\n.recorder-page-chevron[data-open=\"true\"] {\n color: var(--text-primary);\n transform: rotate(180deg);\n}\n\n/* Toggle switches \u{2014} compact 26 \u{d7} 15 inside the recorder. */\n.recorder-page .toggle-switch { width: 26px; height: 15px; }\n.recorder-page .toggle-switch-thumb { width: 11px; height: 11px; }\n.recorder-page .toggle-switch-checked .toggle-switch-thumb {\n transform: translateX(11px);\n}\n\n/* Star buttons inside rows \u{2014} same neutral tone, slightly more visible. */\n.recorder-page .capture-source-star {\n color: var(--text-tertiary);\n font-size: 11px;\n line-height: 1;\n}\n\n/* \u{2500}\u{2500} Pinned action bar (auto-zoom + countdown + Start) \u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}\u{2500} */\n.recorder-page-action-bar {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding-top: 4px;\n}\n\n/* M-SAVE.3 \u{2014} post-record Save panel (folder + format + Export/Discard). */\n.recorder-save-panel {\n gap: 10px;\n}\n.recorder-save-fields {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.recorder-save-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 10px;\n background: var(--bg);\n border: 1.5px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-control, 8px);\n}\n.recorder-save-key {\n flex-shrink: 0;\n width: 52px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-dim, #8a8f98);\n}\n.recorder-save-folder {\n flex: 1 1 auto;\n min-width: 0;\n font-size: 12px;\n color: var(--text, #e6e6e6);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n direction: rtl; /* keep the filename (tail) visible when truncating */\n text-align: left;\n}\n.recorder-save-change {\n flex-shrink: 0;\n font-size: 12px;\n padding: 4px 10px;\n background: transparent;\n color: var(--accent, #4fc3f7);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-control, 8px);\n cursor: pointer;\n}\n.recorder-save-change:hover:not(:disabled) {\n border-color: var(--accent, #4fc3f7);\n}\n.recorder-save-format {\n flex: 1 1 auto;\n font-size: 12px;\n padding: 6px 10px;\n background: var(--bg);\n color: var(--text, #e6e6e6);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-control, 8px);\n cursor: pointer;\n}\n.recorder-save-actions {\n display: grid;\n grid-template-columns: 1fr 1fr 1.5fr;\n gap: 8px;\n}\n.recorder-save-discard,\n.recorder-save-edit,\n.recorder-save-export {\n font-size: 13px;\n font-weight: 600;\n padding: 9px 14px;\n border-radius: var(--radius-control, 8px);\n cursor: pointer;\n}\n.recorder-save-discard {\n background: transparent;\n color: var(--text-dim, #8a8f98);\n border: 1px solid rgba(255, 255, 255, 0.12);\n}\n.recorder-save-discard:hover:not(:disabled) {\n color: var(--text, #e6e6e6);\n border-color: rgba(255, 255, 255, 0.24);\n}\n.recorder-save-edit {\n background: rgba(255, 255, 255, 0.06);\n color: var(--text, #e6e6e6);\n border: 1px solid rgba(255, 255, 255, 0.16);\n}\n.recorder-save-edit:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.28);\n}\n.recorder-save-export {\n background: var(--accent, #4fc3f7);\n color: var(--bg, #0f1115);\n border: 1px solid var(--accent, #4fc3f7);\n}\n.recorder-save-export:hover:not(:disabled) {\n filter: brightness(1.08);\n}\n.recorder-save-panel button:disabled {\n opacity: 0.5;\n cursor: default;\n}\n.recorder-save-saved {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 10px;\n background: var(--bg);\n border: 1.5px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-control, 8px);\n}\n\n/* M-SAVE.4 \u{2014} \u{22ef} \"More options\" menu (output-folder setting). */\n.recorder-overflow-wrap {\n position: relative;\n}\n.recorder-overflow-menu {\n position: absolute;\n top: calc(100% + 6px);\n right: 0;\n z-index: 20;\n width: 260px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n background: var(--bg);\n border: 1.5px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-control, 8px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n}\n.recorder-overflow-key {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-dim, #8a8f98);\n}\n.recorder-overflow-folder {\n font-size: 12px;\n color: var(--text, #e6e6e6);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n direction: rtl;\n text-align: left;\n}\n.recorder-overflow-change {\n margin-top: 4px;\n font-size: 12px;\n font-weight: 600;\n padding: 7px 10px;\n background: transparent;\n color: var(--accent, #4fc3f7);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-control, 8px);\n cursor: pointer;\n}\n.recorder-overflow-change:hover {\n border-color: var(--accent, #4fc3f7);\n}\n.recorder-page-action-bar .recorder-page-controls {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n}\n.recorder-page-action-bar .recorder-page-controls > * { width: 100%; }\n.recorder-page-action-bar .select-pill {\n width: 100%;\n justify-content: flex-start;\n font-size: 12px;\n padding: 7px 10px;\n gap: 12px;\n border-radius: var(--radius-control);\n background: var(--bg);\n border-width: 1.5px;\n border-color: var(--line-card);\n}\n.recorder-page-action-bar .select-pill-icon { font-size: 13px; }\n.recorder-page-action-bar .select-pill-label {\n flex: 1;\n text-align: left;\n}\n.recorder-page-action-bar .select-pill-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n color: var(--text-secondary);\n}\n\n/* Start button \u{2014} full-width red pill with target glyph + shortcut chips. */\n.recorder-page-action-bar .recording-controls-footer {\n padding: 0;\n background: transparent;\n border-top: 0;\n border-radius: 0;\n}\n.recorder-page-action-bar .recording-controls-action { width: 100%; }\n.recorder-page-action-bar .start-recording-btn {\n width: 100%;\n justify-content: flex-start;\n padding: 10px 14px;\n font-size: 13px;\n border-radius: var(--radius-control);\n}\n.recorder-page-action-bar .start-recording-glyph { font-size: 13px; }\n.recorder-page-action-bar .start-recording-label { font-size: 13px; font-weight: 600; }\n.recorder-page-action-bar .start-recording-btn .shortcut-badges { margin-left: auto; }\n.recorder-page-action-bar .shortcut-badge {\n font-size: 11px;\n padding: 2px 6px;\n min-width: 18px;\n border-radius: 4px;\n}\n";