@livepeer-frameworks/player-wc 0.1.9 → 0.2.2

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

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