@livepeer-frameworks/player-wc 0.1.0

package/dist/cjs/styles/shared-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.js","sources":["../../../../src/styles/shared-styles.ts"],"sourcesContent":["// AUTO-GENERATED — do not edit. Run `pnpm run build:css` to regenerate.\n// Source: packages/core/src/styles/player.css\nimport { css } from \"lit\";\n\nexport const sharedStyles = css`\n/*\n * FrameWorks Player CSS\n * Plain CSS - no build step required (just copy to dist).\n * CSS variables are OUTSIDE layer for guaranteed availability.\n * Component styles are in @layer fw-player for cascade isolation.\n */\n\n/* =====================================================\n   CSS VARIABLES - OUTSIDE LAYER (always available)\n   ===================================================== */\n\n/*\n * Player-scoped CSS variables - on .fw-player-surface to avoid :root pollution.\n * All player components must be wrapped in .fw-player-surface to inherit these.\n * These are OUTSIDE the layer so they're always available regardless of cascade.\n */\n.fw-player-surface {\n  /* Tokyo Night color palette */\n  --tn-bg-dark: 235 21% 11%; /* #1a1b26 - Darkest (slab backgrounds) */\n  --tn-bg: 233 23% 17%; /* #24283b - Main background */\n  --tn-bg-highlight: 233 23% 21%; /* #292e42 - Elevated surfaces */\n  --tn-bg-visual: 232 27% 25%; /* #33395e - Selection/active states */\n\n  /* Text hierarchy */\n  --tn-fg: 223 27% 76%; /* #a9b1d6 - Primary text */\n  --tn-fg-bright: 220 13% 91%; /* #e2e4ea - Bright/highlighted text */\n  --tn-fg-dark: 224 16% 53%; /* #787c99 - Secondary text (muted) */\n  --tn-fg-gutter: 228 15% 45%; /* #5a607f - Borders, seams */\n\n  /* Accent colors (semantic) */\n  --tn-blue: 218 79% 73%; /* #7aa2f7 - Primary actions */\n  --tn-green: 95 53% 55%; /* #9ece6a - Success */\n  --tn-red: 348 74% 64%; /* #f7768e - Destructive, live */\n  --tn-yellow: 35 79% 64%; /* #e0af68 - Warnings */\n  --tn-purple: 267 82% 77%; /* #bb9af7 - Secondary accent */\n  --tn-cyan: 178 64% 63%; /* #7dcfff - Info */\n  --tn-teal: 162 66% 62%; /* #73daca - Terminal green */\n\n  /* Player-internal variables (not shared with host) */\n  --fw-background: var(--tn-bg);\n  --fw-foreground: var(--tn-fg);\n  --fw-card: var(--tn-bg-highlight);\n  --fw-card-foreground: var(--tn-fg);\n  --fw-popover: var(--tn-bg-highlight);\n  --fw-popover-foreground: var(--tn-fg);\n  --fw-primary: var(--tn-blue);\n  --fw-primary-foreground: var(--tn-bg-dark);\n  --fw-secondary: var(--tn-bg-visual);\n  --fw-secondary-foreground: var(--tn-fg);\n  --fw-muted: var(--tn-bg-highlight);\n  --fw-muted-foreground: var(--tn-fg-dark);\n  --fw-accent: var(--tn-bg-visual);\n  --fw-accent-foreground: var(--tn-fg);\n  --fw-destructive: var(--tn-red);\n  --fw-destructive-foreground: var(--tn-bg-dark);\n  --fw-border: var(--tn-fg-gutter);\n  --fw-input: var(--tn-bg-highlight);\n  --fw-ring: var(--tn-blue);\n  --fw-radius: 0;\n\n  /* Controls-specific variables */\n  --fw-controls-bg: hsl(var(--tn-bg-dark) / 0.85);\n  --fw-controls-fg: hsl(var(--tn-fg));\n  --fw-seam: hsl(var(--tn-fg-gutter) / 0.3);\n  color: var(--fw-controls-fg);\n}\n\n/* Declare layer upfront for lowest priority */\n@layer fw-player;\n\n/* Component styles in the fw-player layer */\n@layer fw-player {\n  /* =====================================================\n     ANIMATIONS\n     ===================================================== */\n  @keyframes float {\n    0%,\n    100% {\n      transform: translateY(0px) scale(1);\n    }\n    50% {\n      transform: translateY(-12px) scale(0.95);\n    }\n  }\n\n  @keyframes spin-slow {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .animate-spin-slow {\n    animation: spin-slow 18s linear infinite;\n  }\n\n  .animate-spin {\n    animation: spin 1s linear infinite;\n  }\n\n  /* =====================================================\n     SLAB SYSTEM - Player Controls & Overlays\n     ===================================================== */\n\n  .fw-player-surface button {\n    font: inherit;\n  }\n\n  /* Slab base - solid structural block */\n  .fw-slab {\n    background: var(--fw-controls-bg);\n    border: 1px solid var(--fw-seam);\n  }\n\n  /* Slab header - uppercase, padded */\n  .fw-slab-header {\n    padding: 0.5rem 1rem;\n    border-bottom: 1px solid var(--fw-seam);\n    font-size: 0.75rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* Slab body - padded content area */\n  .fw-slab-body {\n    padding: 1rem;\n  }\n\n  /* Slab actions - flush buttons, seams between */\n  .fw-slab-actions {\n    display: flex;\n    border-top: 1px solid var(--fw-seam);\n  }\n\n  .fw-slab-actions > * {\n    flex: 1;\n    border-radius: 0 !important;\n  }\n\n  .fw-slab-actions > * + * {\n    border-left: 1px solid var(--fw-seam);\n  }\n\n  /* Control bar - stacked layout (seekbar above controls row) */\n  .fw-control-bar {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    background: var(--fw-controls-bg);\n    border-top: 1px solid var(--fw-seam);\n    backdrop-filter: blur(8px);\n    pointer-events: auto;\n  }\n\n  /* Control group - seamed sections within bar */\n  .fw-control-group {\n    display: flex;\n    align-items: center;\n    padding: 0.5rem;\n  }\n\n  .fw-control-group + .fw-control-group {\n    border-left: 1px solid var(--fw-seam);\n  }\n\n  /* Flush button - fills space, no radius */\n  .fw-btn-flush {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.5rem 0.75rem;\n    border-radius: 0;\n    background: transparent;\n    color: hsl(var(--tn-fg));\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n    cursor: pointer;\n    border: none;\n  }\n\n  .fw-btn-flush:hover {\n    background: hsl(var(--tn-bg-visual) / 0.5);\n  }\n\n  .fw-btn-flush:active {\n    background: hsl(var(--tn-bg-visual));\n  }\n\n  .fw-btn-flush--active {\n    color: hsl(var(--tn-blue));\n  }\n\n  /* Status indicators */\n  .fw-status-online {\n    color: hsl(var(--tn-green));\n  }\n  .fw-status-offline {\n    color: hsl(var(--tn-red));\n  }\n  .fw-status-warning {\n    color: hsl(var(--tn-yellow));\n  }\n  .fw-status-info {\n    color: hsl(var(--tn-cyan));\n  }\n\n  /* =====================================================\n     PLAYER CONTAINER STYLES (Slab-based)\n     ===================================================== */\n\n  .fw-player-root {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    border-radius: 0; /* Slabs don't have rounded corners */\n    background-color: hsl(var(--tn-bg-dark));\n    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-player-container {\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    border-radius: 0;\n    background-color: hsl(var(--tn-bg-dark));\n  }\n\n  .fw-player-video {\n    height: 100%;\n    width: 100%;\n    border-radius: 0;\n    object-fit: contain;\n    background-color: hsl(var(--tn-bg-dark));\n  }\n\n  .fw-player-embed {\n    height: 100%;\n    width: 100%;\n    min-height: 300px;\n    border-radius: 0;\n    border-width: 0;\n    background-color: hsl(var(--tn-bg-dark));\n  }\n\n  .fw-player-dvd {\n    position: absolute;\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  /* =====================================================\n     VIDEO.JS CONTAINER CONSTRAINTS\n     ===================================================== */\n\n  /* VideoJS wrapper must respect container bounds */\n  .fw-player-container .video-js {\n    width: 100% !important;\n    height: 100% !important;\n    max-width: 100% !important;\n    max-height: 100% !important;\n    min-width: 0 !important;\n    min-height: 0 !important;\n    padding: 0 !important;\n    background: black;\n  }\n\n  /* Ensure video tech fills the wrapper with letterboxing */\n  .fw-player-container .video-js .vjs-tech {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: contain !important;\n  }\n\n  /* =====================================================\n     VIDEO.JS UI HIDING (when using custom controls)\n     ===================================================== */\n\n  /* Hide all VideoJS chrome when using our custom controls */\n  .vjs-fw-custom-controls .vjs-control-bar,\n  .vjs-fw-custom-controls .vjs-big-play-button,\n  .vjs-fw-custom-controls .vjs-loading-spinner,\n  .vjs-fw-custom-controls .vjs-text-track-display,\n  .vjs-fw-custom-controls .vjs-error-display,\n  .vjs-fw-custom-controls .vjs-modal-dialog,\n  .vjs-fw-custom-controls .vjs-poster,\n  .vjs-fw-custom-controls .vjs-live-control,\n  .vjs-fw-custom-controls .vjs-title-bar {\n    display: none !important;\n  }\n\n  /* Ensure video element fills container (absolute positioning) */\n  .vjs-fw-custom-controls .vjs-tech {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  /* =====================================================\n     SEMANTIC COMPONENT CLASSES (npm_studio pattern)\n     All component styling - no Tailwind utilities needed\n     ===================================================== */\n\n  /* --- Settings Menu --- */\n  .fw-settings-menu {\n    position: absolute;\n    bottom: 3rem;\n    right: 0;\n    width: 12rem;\n    max-height: 70vh;\n    overflow-y: auto;\n    background: hsl(var(--tn-bg-dark));\n    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 0.1),\n      0 4px 6px -4px rgb(0 0 0 / 0.1);\n    border-radius: 0.25rem;\n    z-index: 50;\n  }\n\n  .fw-settings-section {\n    padding: 0.5rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-settings-section:last-child {\n    border-bottom: none;\n  }\n\n  .fw-settings-label {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n    text-transform: uppercase;\n    font-weight: 600;\n    margin-bottom: 0.25rem;\n    padding-left: 0.25rem;\n  }\n\n  .fw-settings-options {\n    display: flex;\n    gap: 0.25rem;\n  }\n\n  .fw-settings-options--wrap {\n    flex-wrap: wrap;\n  }\n\n  .fw-settings-btn {\n    flex: 1;\n    padding: 0.375rem 0.25rem;\n    font-size: 10px;\n    border-radius: 0.25rem;\n    background: hsl(var(--tn-bg));\n    color: hsl(var(--tn-fg));\n    border: none;\n    cursor: pointer;\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n  }\n\n  .fw-settings-btn:hover {\n    background: hsl(var(--tn-bg-highlight));\n  }\n\n  .fw-settings-btn--active {\n    background: hsl(var(--tn-blue));\n    color: hsl(var(--tn-bg-dark));\n  }\n\n  .fw-settings-btn--active:hover {\n    background: hsl(var(--tn-blue));\n  }\n\n  .fw-settings-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    max-height: 8rem;\n    overflow-y: auto;\n  }\n\n  .fw-settings-list-item {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n    text-align: left;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: hsl(var(--tn-fg));\n    border: none;\n    cursor: pointer;\n    transition: background-color 0.15s;\n  }\n\n  .fw-settings-list-item:hover {\n    background: hsl(var(--tn-bg-highlight));\n  }\n\n  .fw-settings-list-item--active {\n    background: hsl(var(--tn-blue) / 0.2);\n    color: hsl(var(--tn-blue));\n  }\n\n  /* --- Context Menu (bits-ui wrapper) --- */\n  .fw-context-menu {\n    z-index: 50;\n    min-width: 8rem;\n    overflow: hidden;\n    border-radius: 0.25rem;\n    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    background: hsl(var(--tn-bg-dark));\n    padding: 0;\n    color: hsl(var(--tn-fg));\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 0.1),\n      0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n\n  .fw-context-menu-item {\n    position: relative;\n    display: flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    padding: 0.5rem 0.75rem;\n    font-size: 0.875rem;\n    outline: none;\n    color: hsl(var(--tn-fg));\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n  }\n\n  .fw-context-menu-item:hover,\n  .fw-context-menu-item:focus {\n    background: hsl(var(--tn-bg-visual));\n    color: white;\n  }\n\n  .fw-context-menu-item[data-disabled] {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  .fw-context-menu-item--inset {\n    padding-left: 2rem;\n  }\n\n  .fw-context-menu-separator {\n    margin: 0.25rem -0.25rem;\n    height: 1px;\n    background: hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-context-menu-label {\n    padding: 0.375rem 0.5rem;\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-context-menu-checkbox {\n    position: relative;\n    display: flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    padding: 0.5rem 0.5rem 0.5rem 2rem;\n    font-size: 0.875rem;\n    outline: none;\n    color: hsl(var(--tn-fg));\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n  }\n\n  .fw-context-menu-checkbox:hover,\n  .fw-context-menu-checkbox:focus {\n    background: hsl(var(--tn-bg-visual));\n    color: white;\n  }\n\n  .fw-context-menu-indicator {\n    position: absolute;\n    left: 0.5rem;\n    display: flex;\n    height: 0.875rem;\n    width: 0.875rem;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* --- Live Badge --- */\n  .fw-live-badge {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.125rem 0.5rem;\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n    border: none;\n    cursor: pointer;\n  }\n\n  .fw-live-badge--active {\n    background: rgb(220 38 38);\n    color: white;\n    cursor: default;\n  }\n\n  .fw-live-badge--behind {\n    background: #414868;\n    color: #a9b1d6;\n  }\n\n  .fw-live-badge--behind:hover {\n    background: rgb(220 38 38);\n    color: white;\n  }\n\n  /* --- Volume Control --- */\n  .fw-volume-group {\n    display: flex;\n    align-items: center;\n    border-radius: 0;\n    transition:\n      background-color 0.2s,\n      width 0.2s;\n    cursor: pointer;\n  }\n\n  .fw-volume-group--expanded {\n    background: hsl(var(--tn-bg-visual) / 0.5);\n  }\n\n  .fw-volume-group:hover {\n    background: hsl(var(--tn-bg-visual) / 0.5);\n  }\n\n  .fw-volume-group--expanded:hover {\n    background: hsl(var(--tn-bg-visual) / 0.5);\n  }\n\n  .fw-volume-group--disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  .fw-volume-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    color: rgb(255 255 255 / 0.8);\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n\n  .fw-volume-btn:hover {\n    color: white;\n  }\n\n  .fw-volume-slider-wrapper {\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    transition:\n      width 0.2s ease-out,\n      opacity 0.2s ease-out;\n  }\n\n  .fw-volume-slider-wrapper--collapsed {\n    width: 0;\n    opacity: 0;\n  }\n\n  .fw-volume-slider-wrapper--expanded {\n    width: 7rem;\n    padding-right: 0.5rem;\n    opacity: 1;\n  }\n\n  /* --- Slider Component (shared by React/Svelte) --- */\n  .fw-slider {\n    position: relative;\n    display: flex;\n    width: 100%;\n    height: 1.25rem;\n    touch-action: none;\n    user-select: none;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .fw-slider--vertical {\n    flex-direction: column;\n    width: 1.25rem;\n    height: 100%;\n  }\n\n  .fw-slider-track {\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 4px;\n    border-radius: 9999px;\n    background: hsl(var(--tn-fg-gutter) / 0.4);\n    overflow: hidden;\n    transition: height 0.15s ease;\n  }\n\n  .fw-slider:hover .fw-slider-track {\n    height: 6px;\n  }\n\n  .fw-slider--vertical .fw-slider-track {\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    right: auto;\n    width: 4px;\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  .fw-slider--vertical:hover .fw-slider-track {\n    width: 6px;\n    height: auto;\n  }\n\n  .fw-slider-range {\n    position: absolute;\n    height: 100%;\n    border-radius: 9999px;\n    background: hsl(var(--tn-fg));\n  }\n\n  .fw-slider-range--accent {\n    background: hsl(var(--tn-cyan));\n  }\n\n  .fw-slider--vertical .fw-slider-range {\n    width: 100%;\n    height: auto;\n    bottom: 0;\n  }\n\n  .fw-slider-thumb {\n    display: block;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: hsl(var(--tn-fg));\n    border: none;\n    box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);\n    cursor: pointer;\n    transition:\n      width 0.15s ease,\n      height 0.15s ease,\n      box-shadow 0.15s ease;\n  }\n\n  .fw-slider:hover .fw-slider-thumb {\n    width: 14px;\n    height: 14px;\n  }\n\n  .fw-slider-thumb:focus {\n    outline: none;\n  }\n\n  .fw-slider-thumb:focus-visible {\n    box-shadow: 0 0 0 2px hsl(var(--tn-fg) / 0.5);\n  }\n\n  .fw-slider-thumb--accent {\n    background: hsl(var(--tn-cyan));\n  }\n\n  .fw-slider-thumb[data-disabled] {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  /* --- Time Display --- */\n  .fw-time-display {\n    font-family: ui-monospace, monospace;\n    font-size: 11px;\n    line-height: 1;\n    color: hsl(var(--tn-fg-dark));\n    white-space: nowrap;\n    padding: 0 0.5rem;\n  }\n\n  /* --- Controls Wrapper --- */\n  .fw-controls-wrapper {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    transition: opacity 0.2s;\n    pointer-events: none;\n  }\n\n  .fw-controls-wrapper--visible {\n    opacity: 1;\n  }\n\n  .fw-controls-wrapper--hidden {\n    opacity: 0;\n  }\n\n  .fw-controls-row {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .fw-controls-left {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    flex-shrink: 1;\n  }\n\n  .fw-controls-right {\n    display: flex;\n    align-items: center;\n  }\n\n  .fw-seek-wrapper {\n    width: 100%;\n    padding: 0 0.5rem;\n    margin-bottom: -0.25rem;\n  }\n\n  /* --- SeekBar Component --- */\n  .fw-seek-track {\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 4px;\n    border-radius: 9999px;\n    background: hsl(var(--tn-fg-gutter) / 0.4);\n    transition: height 0.15s ease;\n  }\n\n  .fw-seek-wrapper:hover .fw-seek-track,\n  .fw-seek-track--active {\n    height: 6px;\n  }\n\n  .fw-seek-buffered {\n    position: absolute;\n    height: 100%;\n    border-radius: 9999px;\n    background: hsl(var(--tn-fg) / 0.3);\n    transition: all 0.2s ease;\n  }\n\n  .fw-seek-progress {\n    position: absolute;\n    height: 100%;\n    border-radius: 9999px;\n    background: hsl(var(--tn-blue));\n    transition: width 0.1s linear;\n  }\n\n  .fw-seek-thumb {\n    position: absolute;\n    top: 50%;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: hsl(var(--tn-blue));\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n    transform: translate(-50%, -50%);\n    transition:\n      opacity 0.15s ease,\n      transform 0.15s ease;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .fw-seek-wrapper:hover .fw-seek-thumb,\n  .fw-seek-thumb--active {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n\n  .fw-seek-thumb--hidden {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.75);\n  }\n\n  .fw-seek-tooltip {\n    position: absolute;\n    bottom: 100%;\n    margin-bottom: 8px;\n    padding: 4px 8px;\n    font-family: ui-monospace, monospace;\n    font-size: 12px;\n    background: hsl(var(--tn-bg-dark) / 0.95);\n    color: hsl(var(--tn-fg));\n    border-radius: 4px;\n    white-space: nowrap;\n    pointer-events: none;\n    transform: translateX(-50%);\n  }\n\n  /* --- Stats Panel --- */\n  .fw-stats-panel {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    width: 18rem;\n    max-height: 80%;\n    overflow-y: auto;\n    background: hsl(var(--tn-bg-dark) / 0.85);\n    backdrop-filter: blur(4px);\n    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    font-family: ui-monospace, monospace;\n    font-size: 0.75rem;\n    z-index: 30;\n  }\n\n  .fw-stats-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.5rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-stats-section {\n    padding: 0.5rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-stats-section:last-child {\n    border-bottom: none;\n  }\n\n  .fw-stats-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 0.125rem 0;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-stats-value {\n    color: hsl(var(--tn-fg));\n  }\n\n  /* --- Loading Screen --- */\n  .fw-loading-screen {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: hsl(var(--tn-bg-dark));\n    z-index: 20;\n  }\n\n  .fw-loading-spinner {\n    width: 2rem;\n    height: 2rem;\n    border: 3px solid hsl(var(--tn-fg-gutter) / 0.3);\n    border-top-color: hsl(var(--tn-blue));\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n  }\n\n  .fw-loading-text {\n    margin-top: 1rem;\n    font-size: 0.875rem;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* --- Idle Screen --- */\n  .fw-idle-screen {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: hsl(var(--tn-bg-dark));\n    z-index: 20;\n  }\n\n  .fw-idle-message {\n    font-size: 0.875rem;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* --- Stream State Overlay --- */\n  .fw-stream-state-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: hsl(var(--tn-bg-dark) / 0.9);\n    gap: 1rem;\n    z-index: 20;\n  }\n\n  .fw-stream-state-icon {\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-stream-state-text {\n    font-size: 0.875rem;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* --- Title Overlay --- */\n  .fw-title-overlay {\n    padding: 1rem;\n    background: linear-gradient(to bottom, hsl(var(--tn-bg-dark) / 0.8), transparent);\n  }\n\n  /* --- Thumbnail Overlay --- */\n  .fw-player-thumbnail {\n    position: relative;\n    display: flex;\n    height: 100%;\n    min-height: 280px;\n    width: 100%;\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: hsl(var(--tn-bg-dark));\n  }\n\n  /* --- Speed Indicator --- */\n  .fw-speed-indicator {\n    pointer-events: none;\n    background: none;\n    backdrop-filter: none;\n  }\n\n  /* --- Skip Indicator --- */\n  .fw-skip-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* --- Error Display --- */\n  .fw-player-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n    padding: 1.5rem;\n    min-height: 280px;\n    background: hsl(var(--tn-bg-dark));\n    color: hsl(var(--tn-fg));\n    text-align: center;\n  }\n\n  /* --- Error Popup Overlay --- */\n  .fw-error-overlay {\n    position: absolute;\n    z-index: 20;\n  }\n\n  .fw-error-overlay--fullscreen {\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: hsl(0 0% 0% / 0.6);\n    backdrop-filter: blur(4px);\n  }\n\n  .fw-error-overlay--passive {\n    top: 0.75rem;\n    left: 0.75rem;\n    right: 0.75rem;\n  }\n\n  .fw-error-popup {\n    background: hsl(var(--tn-bg-dark));\n    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n  }\n\n  .fw-error-popup--fullscreen {\n    min-width: 280px;\n    max-width: 320px;\n  }\n\n  .fw-error-popup--passive {\n    max-width: 28rem;\n  }\n\n  .fw-error-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-error-header--error {\n    background: hsl(0 70% 50% / 0.1);\n  }\n\n  .fw-error-header--warning {\n    background: hsl(45 100% 50% / 0.1);\n  }\n\n  .fw-error-title {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .fw-error-title--error {\n    color: hsl(0 70% 60%);\n  }\n\n  .fw-error-title--warning {\n    color: hsl(45 100% 50%);\n  }\n\n  .fw-error-close {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    background: transparent;\n    border: none;\n    color: hsl(var(--tn-fg-dark));\n    cursor: pointer;\n    transition:\n      background-color 0.15s ease,\n      color 0.15s ease;\n  }\n\n  .fw-error-close:hover {\n    background: hsl(var(--tn-fg) / 0.1);\n    color: hsl(var(--tn-fg));\n  }\n\n  .fw-error-body {\n    padding: 0.75rem;\n  }\n\n  .fw-error-message {\n    font-size: 14px;\n    color: hsl(var(--tn-fg));\n  }\n\n  .fw-error-actions {\n    display: flex;\n    border-top: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-error-btn {\n    flex: 1;\n    padding: 0.5rem 1rem;\n    font-size: 12px;\n    font-weight: 500;\n    color: hsl(var(--tn-fg));\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    transition:\n      background-color 0.15s ease,\n      color 0.15s ease;\n  }\n\n  .fw-error-btn:hover {\n    background: hsl(var(--tn-fg) / 0.05);\n    color: hsl(var(--tn-fg-bright));\n  }\n\n  /* --- Context Menu Animations (for bits-ui) --- */\n  @keyframes fw-context-menu-in {\n    from {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes fw-context-menu-out {\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n\n  .fw-context-menu[data-state=\"open\"] {\n    animation: fw-context-menu-in 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .fw-context-menu[data-state=\"closed\"] {\n    animation: fw-context-menu-out 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  /* Slide animations for different sides */\n  .fw-context-menu[data-side=\"top\"] {\n    transform-origin: bottom center;\n  }\n\n  .fw-context-menu[data-side=\"bottom\"] {\n    transform-origin: top center;\n  }\n\n  .fw-context-menu[data-side=\"left\"] {\n    transform-origin: right center;\n  }\n\n  .fw-context-menu[data-side=\"right\"] {\n    transform-origin: left center;\n  }\n\n  /* =====================================================\n     DEV MODE PANEL (Advanced settings sidebar)\n     ===================================================== */\n\n  /* Main panel - side panel container */\n  .fw-dev-panel {\n    z-index: 40;\n    pointer-events: auto;\n    background: hsl(var(--tn-bg-dark));\n    border-left: 1px solid hsl(var(--tn-fg-gutter) / 0.5);\n    color: hsl(var(--tn-fg));\n    font-family: ui-monospace, monospace;\n    font-size: 0.75rem;\n    width: 280px;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    flex-shrink: 0;\n  }\n\n  /* Header with tabs */\n  .fw-dev-header {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    background: hsl(var(--tn-bg) / 0.5);\n  }\n\n  /* Tab buttons */\n  .fw-dev-tab {\n    padding: 0.5rem 0.75rem;\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 600;\n    background: transparent;\n    border: none;\n    border-right: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    color: hsl(var(--tn-fg-dark));\n    cursor: pointer;\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n  }\n\n  .fw-dev-tab:hover {\n    background: hsl(var(--tn-bg-dark) / 0.5);\n    color: hsl(var(--tn-fg));\n  }\n\n  .fw-dev-tab--active {\n    background: hsl(var(--tn-bg-dark));\n    color: hsl(var(--tn-fg-bright));\n  }\n\n  .fw-dev-close {\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    color: hsl(var(--tn-fg-dark));\n    cursor: pointer;\n    transition: color 0.15s;\n    margin-left: auto;\n  }\n\n  .fw-dev-close:hover {\n    color: hsl(var(--tn-fg));\n  }\n\n  /* Spacer - pushes close button to right */\n  .fw-dev-spacer {\n    flex: 1;\n  }\n\n  /* Content area (body) */\n  .fw-dev-content,\n  .fw-dev-body {\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Section with label */\n  .fw-dev-section {\n    padding: 0.75rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-dev-section-label,\n  .fw-dev-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 600;\n    color: hsl(var(--tn-fg-dark));\n    margin-bottom: 0.25rem;\n  }\n\n  .fw-dev-section-value,\n  .fw-dev-value {\n    font-size: 0.875rem;\n    color: hsl(var(--tn-fg-bright));\n  }\n\n  .fw-dev-value-arrow {\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-dev-value-muted {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n    margin-top: 0.25rem;\n  }\n\n  .fw-dev-section-sub {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n    margin-top: 0.25rem;\n  }\n\n  /* Mode selector buttons */\n  .fw-dev-mode-options,\n  .fw-dev-mode-group {\n    display: flex;\n    gap: 0.25rem;\n    margin-top: 0.5rem;\n  }\n\n  .fw-dev-mode-desc {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n    margin-top: 0.5rem;\n    font-style: italic;\n  }\n\n  .fw-dev-mode-btn {\n    flex: 1;\n    padding: 0.375rem 0.5rem;\n    font-size: 10px;\n    font-weight: 500;\n    border-radius: 0.25rem;\n    background: hsl(var(--tn-bg-highlight));\n    border: none;\n    color: hsl(var(--tn-fg-dark));\n    cursor: pointer;\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n  }\n\n  .fw-dev-mode-btn:hover {\n    color: hsl(var(--tn-fg));\n    background: hsl(var(--tn-bg-visual));\n  }\n\n  .fw-dev-mode-btn--active {\n    background: hsl(var(--tn-blue));\n    color: hsl(var(--tn-bg-dark));\n  }\n\n  /* Action buttons row */\n  .fw-dev-actions {\n    display: flex;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-dev-action-btn {\n    flex: 1;\n    padding: 0.5rem 0.75rem;\n    background: hsl(var(--tn-bg-highlight));\n    border: none;\n    border-right: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n    color: hsl(var(--tn-fg));\n    font-size: 0.75rem;\n    cursor: pointer;\n    transition:\n      background-color 0.15s,\n      color 0.15s;\n  }\n\n  .fw-dev-action-btn:last-child {\n    border-right: none;\n  }\n\n  .fw-dev-action-btn:hover {\n    background: hsl(var(--tn-bg-visual));\n    color: hsl(var(--tn-fg-bright));\n  }\n\n  /* Combo list header */\n  .fw-dev-list-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.5rem 0.75rem;\n    background: hsl(var(--tn-bg) / 0.5);\n  }\n\n  .fw-dev-list-title {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 600;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-dev-list-toggle {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.25rem;\n    transition: color 0.15s;\n  }\n\n  .fw-dev-list-toggle:hover {\n    color: hsl(var(--tn-fg));\n  }\n\n  /* Combo list items */\n  .fw-dev-combo-list {\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-dev-combo-item {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 0.75rem;\n    text-align: left;\n    background: transparent;\n    border: none;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);\n    color: hsl(var(--tn-fg));\n    cursor: pointer;\n    transition: background-color 0.15s;\n  }\n\n  .fw-dev-combo-item:last-child {\n    border-bottom: none;\n  }\n\n  .fw-dev-combo-item:hover {\n    background: hsl(var(--tn-bg) / 0.5);\n  }\n\n  .fw-dev-combo-item--active {\n    background: hsl(var(--tn-bg-visual));\n    color: hsl(var(--tn-fg-bright));\n    box-shadow: inset 0 0 0 1px hsl(var(--tn-blue));\n  }\n\n  .fw-dev-combo-item--disabled {\n    opacity: 0.4;\n  }\n\n  .fw-dev-combo-item--warning {\n    background: hsl(var(--tn-yellow) / 0.05);\n  }\n\n  .fw-dev-combo-item--warning:hover {\n    background: hsl(var(--tn-yellow) / 0.1);\n  }\n\n  .fw-dev-combo-rank {\n    width: 1.25rem;\n    height: 1.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: 700;\n    border-radius: 0.125rem;\n    background: hsl(var(--tn-fg-gutter) / 0.5);\n    color: hsl(var(--tn-fg-dark));\n    flex-shrink: 0;\n  }\n\n  .fw-dev-combo-rank--active {\n    background: hsl(var(--tn-blue));\n    color: hsl(var(--tn-bg-dark));\n  }\n\n  .fw-dev-combo-rank--warning {\n    background: hsl(var(--tn-yellow) / 0.3);\n    color: hsl(var(--tn-yellow));\n  }\n\n  .fw-dev-combo-name {\n    flex: 1;\n    font-size: 0.75rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .fw-dev-combo-arrow {\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-dev-combo-type {\n    color: hsl(var(--tn-cyan));\n  }\n\n  .fw-dev-combo-type--warning {\n    color: hsl(var(--tn-yellow));\n  }\n\n  .fw-dev-combo-score {\n    font-size: 10px;\n    font-family: ui-monospace, monospace;\n    font-variant-numeric: tabular-nums;\n    padding: 0.125rem 0.375rem;\n    border-radius: 0.125rem;\n    flex-shrink: 0;\n  }\n\n  .fw-dev-combo-score--high {\n    background: hsl(var(--tn-green) / 0.2);\n    color: hsl(var(--tn-green));\n  }\n\n  .fw-dev-combo-score--medium {\n    background: hsl(var(--tn-blue) / 0.2);\n    color: hsl(var(--tn-blue));\n  }\n\n  .fw-dev-combo-score--low {\n    background: hsl(var(--tn-yellow) / 0.2);\n    color: hsl(var(--tn-yellow));\n  }\n\n  /* Tooltip for combo details */\n  .fw-dev-tooltip {\n    position: absolute;\n    left: 0;\n    z-index: 50;\n    background: hsl(var(--tn-bg-dark));\n    border: 1px solid hsl(var(--tn-fg-gutter));\n    box-shadow:\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1);\n    padding: 0.5rem;\n    font-size: 10px;\n    white-space: nowrap;\n    pointer-events: none;\n    min-width: 220px;\n  }\n\n  .fw-dev-tooltip--above {\n    bottom: 100%;\n    margin-bottom: 0.25rem;\n  }\n\n  .fw-dev-tooltip--below {\n    top: 100%;\n    margin-top: 0.25rem;\n  }\n\n  .fw-dev-tooltip-header {\n    margin-bottom: 0.5rem;\n    padding-bottom: 0.5rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.5);\n  }\n\n  .fw-dev-tooltip-title {\n    font-weight: 700;\n    color: hsl(var(--tn-fg-bright));\n  }\n\n  .fw-dev-tooltip-subtitle {\n    color: hsl(var(--tn-cyan));\n  }\n\n  .fw-dev-tooltip-info {\n    color: hsl(var(--tn-fg-dark));\n    margin-top: 0.25rem;\n  }\n\n  .fw-dev-tooltip-score {\n    font-weight: 700;\n    color: hsl(var(--tn-fg-bright));\n    margin-bottom: 0.25rem;\n  }\n\n  .fw-dev-tooltip-breakdown {\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-dev-tooltip-breakdown-value {\n    color: hsl(var(--tn-fg));\n  }\n\n  .fw-dev-tooltip-breakdown-weight {\n    color: hsl(var(--tn-fg-gutter));\n  }\n\n  .fw-dev-tooltip-error {\n    color: hsl(var(--tn-red));\n  }\n\n  /* Stats panel content */\n  .fw-dev-stats-hero {\n    padding: 0.75rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-dev-stats-rate {\n    font-size: 1.5rem;\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .fw-dev-stats-rate--good {\n    color: hsl(var(--tn-green));\n  }\n\n  .fw-dev-stats-rate--catching {\n    color: hsl(var(--tn-blue));\n  }\n\n  .fw-dev-stats-rate--slow {\n    color: hsl(var(--tn-yellow));\n  }\n\n  .fw-dev-stats-rate--stalling {\n    color: hsl(var(--tn-red));\n  }\n\n  .fw-dev-stats-label {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-dev-stats-metrics {\n    display: flex;\n    gap: 1rem;\n    margin-top: 0.5rem;\n    font-size: 10px;\n  }\n\n  .fw-dev-stats-metric--good {\n    color: hsl(var(--tn-green));\n  }\n\n  .fw-dev-stats-metric--warning {\n    color: hsl(var(--tn-yellow));\n  }\n\n  .fw-dev-stats-metric--bad {\n    color: hsl(var(--tn-red));\n  }\n\n  /* Stats rows */\n  .fw-dev-stats-rows {\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n  }\n\n  .fw-dev-stats-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);\n  }\n\n  .fw-dev-stats-row:last-child {\n    border-bottom: none;\n  }\n\n  .fw-dev-stats-key {\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-dev-stats-value {\n    color: hsl(var(--tn-fg-bright));\n  }\n\n  .fw-dev-stats-value--cyan {\n    color: hsl(var(--tn-cyan));\n  }\n\n  .fw-dev-stats-value--warning {\n    color: hsl(var(--tn-yellow));\n  }\n\n  .fw-dev-stats-value--bad {\n    color: hsl(var(--tn-red));\n  }\n\n  .fw-dev-stats-value--good {\n    color: hsl(var(--tn-green));\n  }\n\n  /* Track badges */\n  .fw-dev-track-badge {\n    font-size: 10px;\n    font-family: ui-monospace, monospace;\n    text-transform: uppercase;\n    padding: 0.125rem 0.375rem;\n  }\n\n  .fw-dev-track-badge--video {\n    background: hsl(var(--tn-blue) / 0.2);\n    color: hsl(var(--tn-blue));\n  }\n\n  .fw-dev-track-badge--audio {\n    background: hsl(var(--tn-green) / 0.2);\n    color: hsl(var(--tn-green));\n  }\n\n  .fw-dev-track-badge--other {\n    background: hsl(var(--tn-yellow) / 0.2);\n    color: hsl(var(--tn-yellow));\n  }\n\n  .fw-dev-track-info {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* Empty state */\n  .fw-dev-empty,\n  .fw-dev-list-empty {\n    padding: 1rem 0.75rem;\n    text-align: center;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* Chevron icon (expand/collapse toggle) */\n  .fw-dev-chevron {\n    transition: transform 0.15s;\n  }\n\n  .fw-dev-chevron--open {\n    transform: rotate(180deg);\n  }\n\n  /* Combo wrapper (relative for tooltip positioning) */\n  .fw-dev-combo {\n    position: relative;\n  }\n\n  /* Combo button (alias for fw-dev-combo-item) */\n  .fw-dev-combo-btn {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 0.75rem;\n    text-align: left;\n    background: transparent;\n    border: none;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);\n    color: hsl(var(--tn-fg));\n    cursor: pointer;\n    transition: background-color 0.15s;\n  }\n\n  .fw-dev-combo-btn:last-child {\n    border-bottom: none;\n  }\n\n  .fw-dev-combo-btn:hover {\n    background: hsl(var(--tn-bg) / 0.5);\n  }\n\n  .fw-dev-combo-btn--active {\n    background: hsl(var(--tn-bg-visual));\n    color: hsl(var(--tn-fg-bright));\n    box-shadow: inset 0 0 0 1px hsl(var(--tn-blue));\n  }\n\n  .fw-dev-combo-btn--disabled {\n    opacity: 0.4;\n  }\n\n  .fw-dev-combo-btn--codec-warn {\n    background: hsl(var(--tn-yellow) / 0.05);\n  }\n\n  .fw-dev-combo-btn--codec-warn:hover {\n    background: hsl(var(--tn-yellow) / 0.1);\n  }\n\n  /* Combo rank modifiers */\n  .fw-dev-combo-rank--disabled {\n    background: hsl(var(--tn-fg-gutter) / 0.3);\n    color: hsl(var(--tn-fg-gutter));\n  }\n\n  .fw-dev-combo-rank--warn {\n    background: hsl(var(--tn-yellow) / 0.3);\n    color: hsl(var(--tn-yellow));\n  }\n\n  /* Combo type modifiers */\n  .fw-dev-combo-type--disabled {\n    color: hsl(var(--tn-fg-gutter));\n  }\n\n  .fw-dev-combo-type--warn {\n    color: hsl(var(--tn-yellow));\n  }\n\n  /* Combo score modifiers (additional) */\n  .fw-dev-combo-score--disabled {\n    background: hsl(var(--tn-fg-gutter) / 0.2);\n    color: hsl(var(--tn-fg-gutter));\n  }\n\n  .fw-dev-combo-score--mid {\n    background: hsl(var(--tn-blue) / 0.2);\n    color: hsl(var(--tn-blue));\n  }\n\n  /* Tooltip additional classes */\n  .fw-dev-tooltip-tracks {\n    color: hsl(var(--tn-fg-dark));\n    margin-top: 0.25rem;\n  }\n\n  .fw-dev-tooltip-value {\n    color: hsl(var(--tn-fg));\n  }\n\n  .fw-dev-tooltip-row {\n    color: hsl(var(--tn-fg-dark));\n    margin-bottom: 0.125rem;\n  }\n\n  .fw-dev-tooltip-bonus {\n    color: hsl(var(--tn-green));\n  }\n\n  .fw-dev-tooltip-penalty {\n    color: hsl(var(--tn-red));\n  }\n\n  .fw-dev-tooltip-weight {\n    color: hsl(var(--tn-fg-gutter));\n    font-size: 9px;\n  }\n\n  /* =====================================================\n     DEV MODE STATS TAB\n     ===================================================== */\n\n  /* Section header modifier */\n  .fw-dev-section-header {\n    margin-top: 0.5rem;\n  }\n\n  /* Playback rate hero section */\n  .fw-dev-rate {\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n\n  .fw-dev-rate-value {\n    font-size: 1.5rem;\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .fw-dev-rate-status {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n    text-transform: uppercase;\n  }\n\n  .fw-dev-rate-stats {\n    display: flex;\n    gap: 1rem;\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* Stat value modifiers */\n  .fw-dev-stat-value--good {\n    color: hsl(var(--tn-green));\n  }\n\n  .fw-dev-stat-value--accent {\n    color: hsl(var(--tn-blue));\n  }\n\n  .fw-dev-stat-value--warn {\n    color: hsl(var(--tn-yellow));\n  }\n\n  .fw-dev-stat-value--bad {\n    color: hsl(var(--tn-red));\n  }\n\n  /* Stats row (key-value pair) */\n  .fw-dev-stat {\n    display: flex;\n    justify-content: space-between;\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);\n  }\n\n  .fw-dev-stat:last-child {\n    border-bottom: none;\n  }\n\n  .fw-dev-stat-label {\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  .fw-dev-stat-value {\n    color: hsl(var(--tn-fg-bright));\n  }\n\n  /* Track display */\n  .fw-dev-track {\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);\n  }\n\n  .fw-dev-track:last-child {\n    border-bottom: none;\n  }\n\n  .fw-dev-track-header {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    margin-bottom: 0.25rem;\n  }\n\n  .fw-dev-track-codec {\n    font-size: 10px;\n    color: hsl(var(--tn-fg));\n    font-weight: 500;\n  }\n\n  .fw-dev-track-id {\n    font-size: 10px;\n    color: hsl(var(--tn-fg-gutter));\n    margin-left: auto;\n  }\n\n  .fw-dev-track-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    font-size: 10px;\n    color: hsl(var(--tn-fg-dark));\n  }\n\n  /* No tracks state */\n  .fw-dev-no-tracks {\n    padding: 0.75rem;\n    text-align: center;\n  }\n\n  .fw-dev-no-tracks-text {\n    color: hsl(var(--tn-fg-dark));\n    font-size: 10px;\n  }\n\n  .fw-dev-no-tracks-type {\n    color: hsl(var(--tn-fg-gutter));\n    margin-left: 0.25rem;\n  }\n}\n\n`;\n"],"names":["css"],"mappings":";;;;AAAA;AACA;AAGO,MAAM,YAAY,GAAGA,OAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}