@livepeer-frameworks/player-core 0.0.3

package/src/styles/player.css

@@ -0,0 +1,2126 @@
+/*
+ * 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);
+  }
+
+  /* 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;
+  }
+
+  /* =====================================================
+     UTILITY CLASSES - All utilities needed by components
+     ===================================================== */
+
+  /* Layout */
+  .flex { display: flex; }
+  .inline-flex { display: inline-flex; }
+  .hidden { display: none; }
+  .block { display: block; }
+  .relative { position: relative; }
+  .absolute { position: absolute; }
+  .fixed { position: fixed; }
+
+  /* Flex utilities */
+  .flex-col { flex-direction: column; }
+  .flex-row { flex-direction: row; }
+  .flex-wrap { flex-wrap: wrap; }
+  .flex-1 { flex: 1 1 0%; }
+  .flex-shrink { flex-shrink: 1; }
+  .flex-shrink-0 { flex-shrink: 0; }
+  .items-center { align-items: center; }
+  .items-start { align-items: flex-start; }
+  .items-end { align-items: flex-end; }
+  .justify-center { justify-content: center; }
+  .justify-between { justify-content: space-between; }
+  .justify-end { justify-content: flex-end; }
+
+  /* Positioning */
+  .inset-0 { inset: 0; }
+  .inset-x-0 { left: 0; right: 0; }
+  .inset-y-0 { top: 0; bottom: 0; }
+  .top-0 { top: 0; }
+  .top-2 { top: 0.5rem; }
+  .top-3 { top: 0.75rem; }
+  .right-0 { right: 0; }
+  .right-2 { right: 0.5rem; }
+  .right-3 { right: 0.75rem; }
+  .bottom-0 { bottom: 0; }
+  .bottom-2 { bottom: 0.5rem; }
+  .left-0 { left: 0; }
+  .left-2 { left: 0.5rem; }
+  .left-3 { left: 0.75rem; }
+
+  /* Z-index */
+  .z-10 { z-index: 10; }
+  .z-20 { z-index: 20; }
+  .z-30 { z-index: 30; }
+  .z-50 { z-index: 50; }
+
+  /* Sizing */
+  .w-0 { width: 0; }
+  .w-2 { width: 0.5rem; }
+  .w-2\.5 { width: 0.625rem; }
+  .w-4 { width: 1rem; }
+  .w-5 { width: 1.25rem; }
+  .w-6 { width: 1.5rem; }
+  .w-8 { width: 2rem; }
+  .w-10 { width: 2.5rem; }
+  .w-12 { width: 3rem; }
+  .w-24 { width: 6rem; }
+  .w-28 { width: 7rem; }
+  .w-48 { width: 12rem; }
+  .w-full { width: 100%; }
+  .h-1 { height: 0.25rem; }
+  .h-1\.5 { height: 0.375rem; }
+  .h-2 { height: 0.5rem; }
+  .h-2\.5 { height: 0.625rem; }
+  .h-4 { height: 1rem; }
+  .h-5 { height: 1.25rem; }
+  .h-6 { height: 1.5rem; }
+  .h-8 { height: 2rem; }
+  .h-10 { height: 2.5rem; }
+  .h-12 { height: 3rem; }
+  .h-full { height: 100%; }
+  .min-w-0 { min-width: 0; }
+  .min-w-\[280px\] { min-width: 280px; }
+  .max-w-xs { max-width: 20rem; }
+  .max-w-sm { max-width: 24rem; }
+  .max-w-md { max-width: 28rem; }
+  .max-h-32 { max-height: 8rem; }
+  .max-h-\[80\%\] { max-height: 80%; }
+  .max-w-\[320px\] { max-width: 320px; }
+
+  /* Spacing */
+  .gap-0\.5 { gap: 0.125rem; }
+  .gap-1 { gap: 0.25rem; }
+  .gap-2 { gap: 0.5rem; }
+  .gap-3 { gap: 0.75rem; }
+  .gap-4 { gap: 1rem; }
+  .space-x-1 > * + * { margin-left: 0.25rem; }
+  .space-x-2 > * + * { margin-left: 0.5rem; }
+  .space-y-1 > * + * { margin-top: 0.25rem; }
+  .p-1 { padding: 0.25rem; }
+  .p-2 { padding: 0.5rem; }
+  .p-3 { padding: 0.75rem; }
+  .p-4 { padding: 1rem; }
+  .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
+  .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+  .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+  .px-4 { padding-left: 1rem; padding-right: 1rem; }
+  .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
+  .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+  .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+  .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+  .pr-2 { padding-right: 0.5rem; }
+  .pr-5 { padding-right: 1.25rem; }
+  .m-0 { margin: 0; }
+  .mx-auto { margin-left: auto; margin-right: auto; }
+  .mt-1 { margin-top: 0.25rem; }
+  .mt-2 { margin-top: 0.5rem; }
+  .mb-1 { margin-bottom: 0.25rem; }
+  .mb-2 { margin-bottom: 0.5rem; }
+  .-mb-1 { margin-bottom: -0.25rem; }
+  .-ml-4 { margin-left: -1rem; }
+  .ml-0\.5 { margin-left: 0.125rem; }
+
+  /* Typography */
+  .text-\[10px\] { font-size: 10px; }
+  .text-\[11px\] { font-size: 11px; }
+  .text-xs { font-size: 0.75rem; line-height: 1rem; }
+  .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+  .text-base { font-size: 1rem; line-height: 1.5rem; }
+  .text-center { text-align: center; }
+  .text-left { text-align: left; }
+  .text-right { text-align: right; }
+  .font-medium { font-weight: 500; }
+  .font-semibold { font-weight: 600; }
+  .font-bold { font-weight: 700; }
+  .font-mono { font-family: ui-monospace, monospace; }
+  .uppercase { text-transform: uppercase; }
+  .leading-none { line-height: 1; }
+  .tracking-wide { letter-spacing: 0.025em; }
+  .tracking-wider { letter-spacing: 0.05em; }
+  .whitespace-nowrap { white-space: nowrap; }
+  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* Colors - Generic */
+  .text-white { color: white; }
+  .text-white\/50 { color: rgb(255 255 255 / 0.5); }
+  .text-white\/60 { color: rgb(255 255 255 / 0.6); }
+  .text-white\/70 { color: rgb(255 255 255 / 0.7); }
+  .text-white\/80 { color: rgb(255 255 255 / 0.8); }
+  .text-white\/90 { color: rgb(255 255 255 / 0.9); }
+  .bg-transparent { background-color: transparent; }
+  .bg-black { background-color: black; }
+  .bg-black\/40 { background-color: rgb(0 0 0 / 0.4); }
+  .bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
+  .bg-black\/60 { background-color: rgb(0 0 0 / 0.6); }
+  .bg-black\/70 { background-color: rgb(0 0 0 / 0.7); }
+  .bg-black\/80 { background-color: rgb(0 0 0 / 0.8); }
+  .bg-black\/90 { background-color: rgb(0 0 0 / 0.9); }
+  .bg-white { background-color: white; }
+  .bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
+  .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
+  .bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
+  .bg-white\/30 { background-color: rgb(255 255 255 / 0.3); }
+  .bg-white\/50 { background-color: rgb(255 255 255 / 0.5); }
+  .border-white\/10 { border-color: rgb(255 255 255 / 0.1); }
+
+  /* Colors - Tokyo Night */
+  .bg-tn-bg-dark { background-color: hsl(var(--tn-bg-dark)); }
+  .bg-tn-bg { background-color: hsl(var(--tn-bg)); }
+  .bg-tn-bg-highlight { background-color: hsl(var(--tn-bg-highlight)); }
+  .bg-tn-bg-visual { background-color: hsl(var(--tn-bg-visual)); }
+  .text-tn-fg { color: hsl(var(--tn-fg)); }
+  .text-tn-fg-dark { color: hsl(var(--tn-fg-dark)); }
+  .text-tn-blue { color: hsl(var(--tn-blue)); }
+  .text-tn-bg-dark { color: hsl(var(--tn-bg-dark)); }
+  .text-tn-accent { color: hsl(var(--tn-bg-visual)); }
+  .bg-tn-blue { background-color: hsl(var(--tn-blue)); }
+  .bg-tn-blue\/20 { background-color: hsl(var(--tn-blue) / 0.2); }
+  .bg-tn-accent { background-color: hsl(var(--tn-bg-visual)); }
+  .border-tn-seam { border-color: hsl(var(--tn-fg-gutter) / 0.3); }
+  .bg-tn-seam { background-color: hsl(var(--tn-fg-gutter) / 0.3); }
+
+  /* Colors - Semantic */
+  .bg-red-500\/10 { background-color: rgb(239 68 68 / 0.1); }
+  .bg-red-600 { background-color: rgb(220 38 38); }
+  .bg-yellow-500\/10 { background-color: rgb(234 179 8 / 0.1); }
+  .text-red-400 { color: rgb(248 113 113); }
+  .text-yellow-400 { color: rgb(250 204 21); }
+
+  /* Special button colors from component */
+  .bg-\[\#414868\] { background-color: #414868; }
+  .text-\[\#a9b1d6\] { color: #a9b1d6; }
+  .bg-\[hsl\(var\(--tn-fg-dark\)\)\] { background-color: hsl(var(--tn-fg-dark)); }
+  .text-\[hsl\(var\(--tn-fg-dark\)\)\] { color: hsl(var(--tn-fg-dark)); }
+  .bg-\[hsl\(var\(--tn-accent\)\)\] { color: hsl(var(--tn-accent)); }
+  .text-\[hsl\(var\(--tn-accent\)\)\] { color: hsl(var(--tn-accent)); }
+
+  /* Borders & Rounded */
+  .border { border-width: 1px; }
+  .border-b { border-bottom-width: 1px; }
+  .border-t { border-top-width: 1px; }
+  .border-l { border-left-width: 1px; }
+  .rounded { border-radius: 0.25rem; }
+  .rounded-md { border-radius: 0.375rem; }
+  .rounded-lg { border-radius: 0.5rem; }
+  .rounded-full { border-radius: 9999px; }
+
+  /* Effects */
+  .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
+  .backdrop-blur-sm { backdrop-filter: blur(4px); }
+
+  /* Opacity */
+  .opacity-0 { opacity: 0; }
+  .opacity-40 { opacity: 0.4; }
+  .opacity-50 { opacity: 0.5; }
+  .opacity-70 { opacity: 0.7; }
+  .opacity-100 { opacity: 1; }
+
+  /* Transitions */
+  .transition {
+    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .transition-transform {
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .duration-200 { transition-duration: 200ms; }
+  .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+
+  /* Interactive */
+  .cursor-pointer { cursor: pointer; }
+  .cursor-default { cursor: default; }
+  .cursor-not-allowed { cursor: not-allowed; }
+  .select-none { user-select: none; }
+  .touch-none { touch-action: none; }
+  .pointer-events-none { pointer-events: none; }
+  .pointer-events-auto { pointer-events: auto; }
+
+  /* Overflow */
+  .overflow-hidden { overflow: hidden; }
+  .overflow-auto { overflow: auto; }
+  .overflow-y-auto { overflow-y: auto; }
+
+  /* =====================================================
+     HOVER & FOCUS STATES
+     ===================================================== */
+  .hover\:text-white:hover { color: white; }
+  .hover\:bg-white\/5:hover { background-color: rgb(255 255 255 / 0.05); }
+  .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1); }
+  .hover\:bg-tn-bg-highlight:hover { background-color: hsl(var(--tn-bg-highlight)); }
+  .hover\:bg-tn-bg-visual:hover { background-color: hsl(var(--tn-bg-visual)); }
+  .hover\:bg-red-600:hover { background-color: rgb(220 38 38); }
+  .focus\:bg-tn-bg-visual:focus { background-color: hsl(var(--tn-bg-visual)); }
+  .focus\:text-white:focus { color: white; }
+
+  /* Group hover states */
+  .group:hover .group-hover\:rotate-90 { transform: rotate(90deg); }
+  .group:hover .group-hover\:h-1\.5 { height: 0.375rem; }
+
+  /* =====================================================
+     RESPONSIVE - sm: breakpoint (640px)
+     ===================================================== */
+  @media (min-width: 640px) {
+    .sm\:flex { display: flex; }
+  }
+
+  /* =====================================================
+     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;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    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;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    padding: 0.5rem 0.5rem 0.5rem 2rem;
+    font-size: 0.875rem;
+    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.25rem;
+    transition: background-color 0.2s, width 0.2s;
+    cursor: pointer;
+  }
+
+  .fw-volume-group--expanded {
+    background: rgb(255 255 255 / 0.1);
+  }
+
+  .fw-volume-group:hover {
+    background: rgb(255 255 255 / 0.05);
+  }
+
+  .fw-volume-group--expanded:hover {
+    background: rgb(255 255 255 / 0.1);
+  }
+
+  .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;
+  }
+
+  /* --- 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)
+     ===================================================== */
+
+  /* Toggle button - small icon button in corner */
+  .fw-dev-toggle {
+    position: absolute;
+    bottom: 3.5rem;
+    right: 0.5rem;
+    z-index: 40;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border-radius: 0.375rem;
+    background: hsl(var(--tn-bg-dark));
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.5);
+    color: hsl(var(--tn-fg-dark));
+    cursor: pointer;
+    transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.2s;
+  }
+
+  .fw-dev-toggle:hover {
+    background: hsl(var(--tn-bg-highlight));
+    border-color: hsl(var(--tn-fg-gutter));
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-dev-toggle--visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .fw-dev-toggle--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 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;
+  }
+}