/* ==========================================================================
   LinguaReel Studio — Frame.io v4 Multi-Panel Video Grid & Metadata Framework
   Follows DESIGN.md: Deep Matte Black (#09090B), Panel (#111115), Card (#16161C),
   1px solid rgba(255,255,255,0.07) borders, Vibrant Neon Gold (#F59E0B -> #FFD700)
   ========================================================================== */

:root {
  /* Frame.io V4 Cinema Dark Surfaces */
  --bg: #09090b;
  --bg-2: #0d0d11;
  --rail-bg: #09090b;
  --tree-bg: #111115;
  --canvas-bg: #09090b;
  --panel: #111115;
  --panel-2: #16161c;
  --panel-elevated: #1c1c24;

  /* Frame.io V4 Hairline Borders (1px solid rgba(255,255,255,0.07)) */
  --line: rgba(255, 255, 255, 0.07);
  --line-card: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-focus: rgba(245, 158, 11, 0.65);

  /* Typography Hierarchy */
  --text: #f4f4f6;
  --muted: #a1a1aa;
  --soft: #71717a;

  /* Vibrant Neon Gold Primary Accent & Semantic Palette */
  --gold: #f59e0b;
  --gold-bright: #ffd700;
  --gold-glow: rgba(245, 158, 11, 0.32);
  --indigo: #f59e0b;
  --indigo-bright: #ffd700;
  --indigo-glow: rgba(245, 158, 11, 0.28);
  --violet: #a855f7;
  --cyan: #10b981;
  --sky: #38bdf8;
  --amber: #f59e0b;
  --coral: #f43f5e;
  --red: #ef4444;

  /* Radii & Shadows */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.62);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.42);

  /* Typography Stacks */
  --font-sans: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

/* Hide old marketing aurora blobs for authentic Frame.io V4 matte dark workspace */
.aurora {
  display: none !important;
}

/* ==========================================================================
   1. DUAL-LEFT NAVIGATION SHELL (.app-shell, .f4-icon-rail, .sidebar)
   ========================================================================== */

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 224px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--canvas-bg);
}

/* Far-Left 48px Global Icon Rail */
.f4-icon-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  z-index: 25;
  user-select: none;
}

.f4-rail-top,
.f4-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.f4-rail-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7d8498;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.f4-rail-btn:hover {
  color: #eef0f6;
  background: rgba(255, 255, 255, 0.05);
}

.f4-rail-btn.active {
  color: #ffffff;
  background: #1f222e;
  border-color: #2e3244;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.f4-rail-brand {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

/* Second Column: 224px Hierarchical Project Tree Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100vh;
  padding: 10px 10px;
  background: var(--tree-bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #262936 transparent;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 8px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, 3px);
  align-items: end;
  gap: 2.5px;
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  flex-shrink: 0;
}

.brand-mark i {
  display: block;
  width: 3px;
  border-radius: 99px;
  background: #ffffff;
}
.brand-mark i:nth-child(1) { height: 7px; opacity: 0.85; }
.brand-mark i:nth-child(2) { height: 13px; }
.brand-mark i:nth-child(3) { height: 10px; opacity: 0.9; }

.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #7d8498;
}

/* Tree Section Groups (Assets, Collections, Shares) */
.f4-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.f4-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 3px;
  color: #7d8498;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.f4-tree-plus {
  font-style: normal;
  font-size: 12px;
  color: #687086;
  cursor: pointer;
}

.main-nav,
.f4-collections-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item,
.f4-tree-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #a4acb9;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}

.f4-tree-child {
  padding-left: 16px;
}

.f4-tree-caret {
  width: 10px;
  color: #646b80;
  font-size: 10px;
  text-align: center;
  flex-shrink: 0;
}

.nav-icon,
.f4-col-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  flex-shrink: 0;
}

.nav-item:hover,
.f4-tree-item:hover {
  color: #eef0f6;
  background: rgba(255, 255, 255, 0.04);
}

.nav-item.active,
.f4-tree-item.active {
  color: #ffffff;
  font-weight: 600;
  background: #232634;
  border-color: #2f3346;
}

.nav-item b,
.f4-tree-item b {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.22);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.sidebar-spacer {
  flex: 1;
}

/* Bottom C2C Connections Dock in Sidebar */
.system-mini {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--line-card);
  border-radius: 8px;
  background: #151821;
}

.mini-title {
  color: #c4cad8;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  min-width: 0;
}

.mini-row span:not(.status-dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker-mini-row {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.mini-worker-link {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 10.5px;
  border-radius: 5px;
}

.mini-worker-link:hover {
  color: #ffffff;
  border-color: var(--indigo-bright);
  background: rgba(99, 102, 241, 0.2);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  flex-shrink: 0;
}
.status-dot.ok {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.status-dot.bad {
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral);
}

.local-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: #687086;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
}
.local-badge span {
  color: var(--cyan);
}

/* ==========================================================================
   2. MAIN WORKSPACE & 2-TIER FRAME.IO V4 HEADER (.main, .topbar, .f4-subtoolbar)
   ========================================================================== */

.main {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--canvas-bg);
}

/* Tier 1: 44px Breadcrumb Header Bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.mobile-menu {
  display: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.f4-breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.f4-project-chip {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, #ec4899, #6366f1);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.f4-crumb-node {
  color: #8b92a8;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.f4-crumb-slash {
  color: #4b5162;
  font-size: 12px;
}

.topbar h1,
#pageTitle {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f4-crumb-caret {
  color: #8b92a8;
  font-size: 10px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.worker-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #181a22;
  color: #c4cad8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.worker-pill:hover {
  border-color: var(--indigo-bright);
  color: #ffffff;
}

.worker-pill.online {
  border-color: rgba(16, 185, 129, 0.38);
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
}

.engine-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-card);
  border-radius: 6px;
  background: #181a22;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-card);
  border-radius: 6px;
  background: #181a22;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.icon-btn:hover {
  border-color: var(--line-strong);
  color: #ffffff;
  background: #222530;
}

.f4-panel-toggles {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-card);
  border-radius: 6px;
  background: #161820;
}

.f4-panel-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #7d8498;
  font-size: 11px;
}

.f4-panel-btn.active {
  background: #252936;
  color: #ffffff;
}

/* Frame.io V4 Purple Collaborator Pill (#userAvatarBtn) */
.avatar,
.user-avatar-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #5850ec !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(88, 80, 236, 0.4);
}

.f4-collab-icon {
  font-size: 11px;
}

/* Tier 2: 48px Secondary Sub-Toolbar (.f4-subtoolbar) */
.f4-subtoolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 18px;
  background: var(--canvas-bg);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.f4-subtoolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.f4-toolbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c4cad8;
  font-size: 12px;
  font-weight: 500;
}

.f4-toolbar-glyph {
  color: #8b92a8;
  font-size: 12px;
}

.f4-toolbar-dot {
  color: #464b5c;
  font-size: 11px;
  user-select: none;
}

.f4-visible-badge {
  padding: 2px 7px;
  border-radius: 5px;
  background: #232634;
  border: 1px solid #303548;
  color: #d5dae6;
  font-size: 11px;
  font-weight: 600;
}

.f4-sorted-label {
  color: #8b92a8;
  font-size: 11.5px;
}

.source-select {
  height: 28px;
  padding: 0 24px 0 9px;
  border: 1px solid #282c3a;
  border-radius: 6px;
  background: #1b1e28;
  color: #eef0f6;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.source-select:hover,
.source-select:focus {
  outline: none;
  border-color: var(--indigo-bright);
}

.f4-subtoolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Compact Recessed Search Input in Sub-Toolbar ([ ⌕ Search in Key Scenes... ]) */
.f4-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 310px;
  max-width: 100%;
  height: 32px;
  padding: 0 4px 0 10px;
  border: 1px solid #262936;
  border-radius: 7px;
  background: #0e1015;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.f4-search-form:focus-within {
  border-color: var(--indigo-bright);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.f4-search-form .search-symbol {
  color: #6c7388;
  font-size: 13px;
}

.f4-search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #eef0f6;
  font-size: 12px;
}

.f4-search-form input::placeholder {
  color: #646b80;
}

.f4-search-form .primary-btn {
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  background: #232634;
  border: 1px solid #32374a;
  color: #e2e8f0;
  box-shadow: none;
}

.f4-search-form .primary-btn:hover {
  background: var(--indigo);
  border-color: var(--indigo-bright);
  color: #ffffff;
  transform: none;
}

.f4-search-form .primary-btn i {
  display: none;
}

/* Quick Keyword Chips in Sub-Toolbar */
.hint-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.hint-row button {
  padding: 3px 8px;
  border: 1px solid #252836;
  border-radius: 5px;
  background: #181a22;
  color: #8b92a8;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.hint-row button:hover {
  border-color: #3b4054;
  color: #ffffff;
  background: #222530;
}

/* ==========================================================================
   3. PAGES, PANELS & WORKSPACE FOOTER (.page, .panel, .f4-statusbar)
   ========================================================================== */

.page {
  display: none;
  padding: 18px 20px 28px;
  flex: 1;
}

.page.active {
  display: block;
}

#page-studio.page.active {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.panel {
  padding: 16px 18px;
  border: 1px solid var(--line-card);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.f4-asset-browser.panel {
  flex: 1;
  padding: 14px 18px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.production-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  margin: 0 18px 20px;
}

.browser-download-panel {
  margin: 0 18px 16px;
}

/* Bottom Status Bar (16 Items) */
.f4-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 18px;
  margin-top: auto;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  color: #7d8498;
  font-size: 11.5px;
  font-weight: 500;
}

.f4-status-meta {
  color: #5e6478;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* ==========================================================================
   4. BUTTONS, FORMS, EPISODE BIN & INSPECTOR CONTROLS
   ========================================================================== */

.section-head,
.page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.step-label {
  display: inline-block;
  margin-bottom: 3px;
  color: #818cf8;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-head h3,
.page-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.section-head p,
.page-intro p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.primary-btn,
.launch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: var(--indigo);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.primary-btn:hover,
.launch-btn:hover:not(:disabled) {
  background: var(--indigo-bright);
}

.secondary-btn,
.selection-actions button,
.job-card-side button,
.modal-actions button {
  padding: 6px 11px;
  border: 1px solid #2b2f3e;
  border-radius: 6px;
  background: #1f222d;
  color: #d5dae6;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.secondary-btn:hover,
.selection-actions button:hover,
.job-card-side button:hover,
.modal-actions button:hover {
  border-color: #3e4459;
  background: #272b39;
  color: #ffffff;
}

.selection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.range-select-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #12141b;
  border: 1px solid #262936;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--muted);
}

.range-select-group input[type="number"] {
  width: 44px;
  padding: 2px 4px;
  border: 1px solid #282c3a;
  border-radius: 4px;
  background: #181a22;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.download-episodes-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  background: rgba(16, 185, 129, 0.14) !important;
  color: #6ee7b7 !important;
  font-weight: 600 !important;
}

.selected-film {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #262936;
  border-radius: 8px;
  background: #14161e;
}

.selected-film .selected-artwork {
  width: 100%;
  height: 98px;
  border-radius: 6px;
}

.selected-kicker {
  color: #818cf8;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
}

.selected-film strong {
  display: block;
  margin: 2px 0 4px;
  font-size: 14px;
  color: #ffffff;
}

.selected-film p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.selected-film div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 10px;
}

.episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 7px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 3px;
}

.episode-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #252836;
  border-radius: 7px;
  background: #14161d;
  cursor: pointer;
  transition: all 0.12s ease;
}

.episode-item:hover {
  border-color: #3b4054;
  background: #1b1e28;
}

.episode-item input {
  accent-color: var(--indigo-bright);
}

.episode-item strong {
  display: block;
  font-size: 11.5px;
  color: #eef0f6;
}

.episode-item small {
  color: var(--muted);
  font-size: 10px;
}

.field-label,
.two-fields label span,
.settings-card label span {
  display: block;
  margin-bottom: 5px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}

.language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid #262936;
  border-radius: 7px;
  background: #14161d;
  cursor: pointer;
}

.language-option.selected {
  border-color: var(--indigo-bright);
  background: rgba(88, 80, 236, 0.16);
  color: #ffffff;
}

.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

select,
.settings-card input,
.settings-card textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #282c3a;
  border-radius: 6px;
  background: #12141b;
  color: var(--text);
  font-size: 12px;
  outline: none;
}

select:focus,
.settings-card input:focus,
.settings-card textarea:focus {
  border-color: var(--indigo-bright);
}

.summary-box {
  display: grid;
  gap: 2px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #282c3a;
  border-radius: 8px;
  background: #14161e;
}

.summary-box span {
  color: #818cf8;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.summary-box strong {
  font-size: 13px;
  color: #ffffff;
}

.summary-box small {
  color: var(--muted);
  font-size: 11px;
}

.launch-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 11px 14px;
}

.launch-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
}

.launch-btn span:nth-child(2) {
  display: grid;
  text-align: left;
}

.launch-btn small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10.5px;
}

.launch-btn i {
  margin-left: auto;
  font-style: normal;
}

.launch-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   5. JOBS, SETTINGS, MODALS, TOASTS & RESPONSIVE BREAKPOINTS
   ========================================================================== */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--line-card);
  border-radius: var(--radius);
  background: var(--panel);
}

.stat-card span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(88, 80, 236, 0.15);
  color: #a5b4fc;
}

.stat-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.stat-card strong {
  font-size: 20px;
  color: #ffffff;
}

.jobs-list {
  display: grid;
  gap: 10px;
}

.job-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--line-card);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}

.job-card:hover {
  border-color: #383d52;
}

.job-status {
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.job-status.running,
.job-status.queued {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
}

.job-status.completed {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

.job-status.failed,
.job-status.partial {
  background: rgba(244, 63, 94, 0.16);
  color: #fb7185;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-title {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.settings-title span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: rgba(88, 80, 236, 0.15);
  color: #a5b4fc;
}

.settings-title h3 {
  margin: 0;
  font-size: 13.5px;
}

.settings-title p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.diagnostics {
  display: grid;
  gap: 7px;
}

.diagnostic {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #252836;
  border-radius: 7px;
  background: #14161d;
}

.diagnostic i {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--coral);
}

.diagnostic.ok i {
  background: var(--cyan);
}

.diagnostic strong {
  display: block;
  font-size: 11.5px;
}

.diagnostic small {
  color: var(--muted);
  font-size: 10.5px;
}

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.modal,
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 8, 12, 0.78);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  width: min(860px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #161821;
  box-shadow: var(--shadow);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #1f222d;
  color: var(--text);
  cursor: pointer;
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: grid;
  gap: 8px;
}

.toast {
  padding: 10px 14px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 8px;
  background: #161922;
  color: var(--text);
  font-size: 12px;
  box-shadow: var(--shadow);
}

.toast.error {
  border-color: rgba(244, 63, 94, 0.45);
}

.spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--indigo-bright);
  border-radius: 99px;
  animation: spin 0.8s linear infinite;
}

.hidden {
  display: none !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Download Floating Widget */
.download-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #161922;
  border: 1px solid #2e3244;
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: var(--shadow);
  z-index: 9999;
}

/* Video Stitch Studio Layout */
.stitch-workspace-grid {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.stitch-sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 140px);
  position: sticky;
  top: 56px;
}

.stitch-drama-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.stitch-drama-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 7px;
  background: #14161d;
  border: 1px solid #252836;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.stitch-drama-item.active {
  background: #232634;
  border-color: var(--indigo-bright);
}

.stitch-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.stitch-checkbox-label {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  background: rgba(88, 80, 236, 0.08);
  border: 1px solid rgba(88, 80, 236, 0.24);
  cursor: pointer;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .f4-icon-rail {
    display: none;
  }
  .sidebar {
    position: fixed;
    left: 0;
    z-index: 40;
    width: 250px;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .mobile-menu {
    display: inline-grid;
    place-items: center;
  }
  .production-grid,
  .settings-grid,
  .stitch-workspace-grid,
  .stitch-options-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   6. FRAME.IO V4 MULTI-PANEL WORKSPACE UPGRADE (DESIGN.md NORMATIVE SPEC)
   ========================================================================== */

.lucide,
.lucide-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

.sr-only-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Collapsible Left Sidebar & Brand Row */
.app-shell {
  grid-template-columns: 48px 248px minmax(0, 1fr);
  transition: grid-template-columns 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 48px 0px minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.f4-rail-btn.active {
  color: #09090b;
  background: linear-gradient(135deg, #f59e0b, #ffd700);
  border-color: #ffd700;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.38);
}

.f4-rail-brand {
  background: linear-gradient(135deg, #f59e0b, #ffd700);
  color: #09090b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.38);
}

.brand-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.brand-header-row .brand {
  border-bottom: 0;
  padding: 2px 4px;
  min-width: 0;
}

.brand-mark {
  background: linear-gradient(135deg, #f59e0b 0%, #ffd700 100%);
}

.brand-mark i {
  background: #09090b;
}

.sidebar-collapse-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #16161c;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.14s ease;
}

.sidebar-collapse-btn:hover {
  color: #f4f4f6;
  border-color: rgba(245, 158, 11, 0.45);
}

.nav-item.active,
.f4-tree-item.active {
  color: #ffd700;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
}

.nav-item b,
.f4-tree-item b {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
  color: #ffd700;
}

/* Global Voice Casting Panel in Left Sidebar */
.f4-casting-group,
.f4-global-casting-panel {
  margin-top: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #16161c;
}

.f4-cast-pill-badge,
.f4-mono-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: #d4d4d8;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.f4-mono-tag.gold {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.42);
  color: #ffd700;
}

.f4-mono-tag.warn {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(255, 215, 0, 0.55);
  color: #ffd700;
}

.f4-mono-tag.ok {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.42);
  color: #34d399;
}

.f4-casting-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.f4-cast-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 6px;
  background: #111115;
  border: 1px solid var(--line);
}

.f4-cast-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.f4-cast-avatar.female,
.f4-cast-avatar.emerald {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #34d399;
}

.f4-cast-avatar.male,
.f4-cast-avatar.sky {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.38);
  color: #7dd3fc;
}

.f4-cast-avatar.narrator,
.f4-cast-avatar.gold,
.f4-cast-avatar.amber {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.42);
  color: #ffd700;
}

.f4-cast-info {
  min-width: 0;
  flex: 1;
}

.f4-cast-info strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #f4f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f4-cast-info small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f4-cast-pill {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #ffd700;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.f4-cast-manage-btn {
  margin-top: 6px;
  font-size: 11px;
  color: #ffd700;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Grid Toolbar: Status Filters & Grid Size Slider (4..10) */
.f4-subtoolbar {
  background: #111115;
  border-bottom: 1px solid var(--line);
  padding: 6px 16px;
  gap: 10px;
}

.f4-status-filters {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border-radius: 6px;
  background: #09090b;
  border: 1px solid var(--line);
}

.f4-status-filter,
.f4-status-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.f4-status-filter:hover,
.f4-status-filter-btn:hover {
  color: #f4f4f6;
  background: rgba(255, 255, 255, 0.04);
}

.f4-status-filter.active,
.f4-status-filter-btn.active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.45);
  color: #ffd700;
}

.f4-dot-gold,
.f4-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  display: inline-block;
  background: #ffd700;
  box-shadow: 0 0 6px #f59e0b;
}

.f4-grid-slider-box {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: #09090b;
  border: 1px solid var(--line);
  color: var(--muted);
}

.f4-grid-slider-box input[type="range"] {
  width: 82px;
  height: 4px;
  accent-color: #f59e0b;
  cursor: pointer;
}

.f4-grid-cols-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #ffd700;
  min-width: 58px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Multi-Panel Split Workspace (.f4-workspace-split) */
.f4-workspace-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 338px;
  align-items: start;
  flex: 1;
  min-height: 0;
  transition: grid-template-columns 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.f4-workspace-split.inspector-collapsed {
  grid-template-columns: minmax(0, 1fr) 0px;
}

.f4-workspace-split.inspector-collapsed .f4-right-inspector {
  width: 0;
  padding: 0;
  border-left-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.f4-center-column {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.f4-mini-action,
.f4-mini-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
  color: #ffd700;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.f4-mini-action:hover,
.f4-mini-action-btn:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #ffd700;
}

.f4-asset-browser > #searchState {
  display: none !important;
}

/* Floating Batch Action Bar (Bottom Viewport Floating Dock) */
.f4-floating-batch-bar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(820px, calc(100vw - 640px));
  min-width: 560px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(17, 17, 21, 0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.85), 0 0 30px rgba(245, 158, 11, 0.24);
}

.f4-batch-left,
.f4-batch-count-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.f4-batch-badge,
.f4-batch-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ffd700);
  color: #09090b;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.f4-batch-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f4-batch-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.f4-batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: #16161c;
  border: 1px solid var(--line-strong);
  color: #f4f4f6;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}

.f4-batch-btn:hover {
  border-color: #ffd700;
  color: #ffd700;
}

.f4-batch-btn.primary,
.f4-batch-btn.primary-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #ffd700 100%);
  border: 1px solid #ffd700;
  color: #09090b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.35);
}

.f4-batch-btn.primary:hover,
.f4-batch-btn.primary-gold:hover {
  color: #09090b;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Right Inspector Panel (.f4-right-inspector) */
.f4-right-inspector {
  position: sticky;
  top: 44px;
  height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 12px;
  background: #111115;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}

.f4-inspector-head,
.f4-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.f4-inspector-head > div {
  min-width: 0;
}

.f4-inspector-kicker {
  display: block;
  color: #ffd700;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.f4-inspector-head strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #f4f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f4-qa-score-pill {
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.42);
  color: #34d399;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* 9:16 Vertical Video Preview Monitor inside Right Inspector */
.f4-inspector-video-wrap,
.f4-inspector-player-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: #16161c;
  border: 1px solid var(--line);
}

.f4-inspector-video-9x16,
.f4-inspector-916-stage {
  position: relative;
  aspect-ratio: 9 / 16;
  height: 228px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(245, 158, 11, 0.24), transparent 55%),
    linear-gradient(180deg, #1b1926 0%, #09090b 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
}

.f4-inspector-video-9x16 video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.f4-video-hud-top {
  position: absolute;
  bottom: 42px;
  left: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

.f4-hud-pill {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(9, 9, 11, 0.85);
  border: 1px solid var(--line);
  color: #f4f4f6;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.f4-hud-pill.gold {
  color: #ffd700;
  border-color: rgba(245, 158, 11, 0.45);
}

.f4-inspector-telemetry-row,
.f4-inspector-telemetry-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: wrap;
}

.f4-meta-pill.gold {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.38);
  color: #ffd700;
}

.f4-meta-pill.emerald {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.38);
  color: #34d399;
}

/* Dual-Layer Audio Waveform Visualizer */
.f4-waveform-box {
  padding: 10px;
  border-radius: 8px;
  background: #16161c;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.f4-waveform-header,
.f4-waveform-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}

.f4-waveform-header b,
.f4-waveform-head b {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #ffd700;
}

.f4-waveform-canvas,
.f4-waveform-track {
  position: relative;
  height: 46px;
  border-radius: 5px;
  background: #09090b;
  border: 1px solid var(--line);
  overflow: hidden;
}

.f4-waveform-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.f4-waveform-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
}

.f4-waveform-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dot-gold,
.dot-emerald {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  display: inline-block;
}
.dot-gold { background: #f59e0b; }
.dot-emerald { background: #10b981; }

/* Inline Speed Warning & Dialogue QA Editor */
.f4-qa-cues-box,
.f4-inspector-qa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f4-qa-cues-head,
.f4-qa-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  color: #f4f4f6;
}

.f4-qa-cues-list,
.f4-inspector-cues {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.f4-cue-item,
.f4-cue-card {
  padding: 8px;
  border-radius: 7px;
  background: #16161c;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.f4-cue-item.warn,
.f4-cue-card.is-speed-warn {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.06);
}

.f4-cue-meta,
.f4-cue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.f4-cue-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
}

.f4-cue-speaker,
.f4-cue-role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #e4e4e7;
}

.f4-cue-speed {
  padding: 2px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
}

.f4-cue-speed.warn {
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(255, 215, 0, 0.55);
  color: #ffd700;
}

.f4-cue-speed.ok {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.42);
  color: #34d399;
}

.f4-cue-input {
  width: 100%;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #09090b;
  color: #f4f4f6;
  font-size: 11px;
}

.f4-cue-input:focus {
  outline: none;
  border-color: #ffd700;
}

.f4-apply-qa-btn,
.f4-inspector-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #ffd700;
  background: linear-gradient(135deg, #f59e0b, #ffd700);
  color: #09090b;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   GIAI ĐOẠN 2 & 3 — FRAME.IO V4 FULL SYSTEM SYNCHRONIZATION
   (Step 2 Episode Matrix · Step 3 RTX Render Engine · Production Queue)
   ========================================================================== */

/* 1. Persistent Breadcrumb Back Button & Step 2 Active Mode */
.f4-breadcrumb-back,
.f4-back-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #FFD700;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.f4-breadcrumb-back:hover,
.f4-back-store-btn:hover {
  background: linear-gradient(135deg, #F59E0B, #FFD700);
  border-color: #FFD700;
  color: #09090B;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}

.f4-breadcrumb-back .lucide,
.f4-back-store-btn .lucide {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}

.f4-breadcrumb-back.hidden {
  display: none !important;
}

/* When Step 2 & Step 3 are active, collapse the top discovery browser so Step 2 & 3 fill the Studio workspace cleanly */
#page-studio.f4-step2-active .f4-subtoolbar,
#page-studio.f4-step2-active .search-panel.f4-asset-browser,
#page-studio.f4-step2-active .f4-right-inspector,
#page-studio.f4-step2-active .f4-floating-batch-bar {
  display: none !important;
}

#page-studio.f4-step2-active .f4-workspace-split {
  grid-template-columns: 1fr !important;
}

/* 2. Step 2 & Step 3 Production Grid Layout (#productionGrid) */
.production-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(380px, 0.92fr);
  gap: 14px;
  align-items: start;
  margin-top: 0;
}

@media (max-width: 1180px) {
  .production-grid {
    grid-template-columns: 1fr;
  }
}

.production-grid > .panel,
.f4-step2-matrix-panel,
.f4-step3-inspector-panel {
  background: #111115 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48) !important;
}

.f4-matrix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.f4-matrix-head-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.f4-step-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.f4-matrix-head h3,
.f4-step3-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #F4F4F6;
  letter-spacing: -0.01em;
}

.f4-step3-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Batch Quick-Select Toolbar in Step 2 */
.f4-batch-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.f4-batch-primary-btns {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.f4-matrix-tool-btn,
#selectAll,
#selectNone {
  height: 30px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #16161C;
  color: #F4F4F6;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.f4-matrix-tool-btn:hover,
#selectAll:hover,
#selectNone:hover {
  border-color: rgba(245, 158, 11, 0.55);
  color: #FFD700;
  background: rgba(245, 158, 11, 0.1);
}

.f4-quick-range-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 7px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.f4-range-pill {
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: #A1A1AA;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.f4-range-pill:hover {
  color: #F4F4F6;
  background: rgba(255, 255, 255, 0.06);
}

.f4-range-pill.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
  color: #FFD700;
}

/* Hero Drama Banner Card (#selectedFilm) */
.selected-film,
.f4-hero-drama-banner {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #16161C 0%, #111115 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 215, 0, 0.05) !important;
}

.selected-film .selected-artwork {
  width: 78px !important;
  height: 112px !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  flex-shrink: 0;
}

.selected-film-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.selected-film-copy .selected-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #F59E0B;
  text-transform: uppercase;
}

.selected-film-copy strong {
  font-size: 15px;
  font-weight: 700;
  color: #F4F4F6;
  line-height: 1.35;
}

.selected-film-copy p {
  margin: 0;
  font-size: 11.5px;
  color: #A1A1AA;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.f4-hero-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.f4-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E4E4E7;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
}

.f4-hero-pill.gold {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.48) !important;
  color: #FFD700 !important;
  font-weight: 700 !important;
}

/* Compact Episode Matrix Grid (#episodeList) — Fix top clipping & style compact tiles */
#episodeList,
.episode-list.f4-episode-matrix-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
  gap: 8px !important;
  max-height: 540px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 4px 12px 4px !important;
  margin-top: 6px !important;
  align-content: start !important;
  box-sizing: border-box !important;
}

.episode-item.f4-episode-tile {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 64px !important;
  padding: 9px 11px !important;
  border-radius: 8px !important;
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.episode-item.f4-episode-tile:hover {
  border-color: rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-1px);
}

.episode-item.f4-episode-tile input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.episode-item.f4-episode-tile.is-checked,
.episode-item.f4-episode-tile:has(input:checked) {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid #F59E0B !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.16), inset 0 0 0 1px rgba(255, 215, 0, 0.14) !important;
}

.f4-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.episode-item.f4-episode-tile .episode-number {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #E4E4E7 !important;
  letter-spacing: 0.02em;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
}

.episode-item.f4-episode-tile .episode-number b {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.episode-item.f4-episode-tile.is-checked .episode-number,
.episode-item.f4-episode-tile.is-checked .episode-number b,
.episode-item.f4-episode-tile:has(input:checked) .episode-number,
.episode-item.f4-episode-tile:has(input:checked) .episode-number b {
  color: #FFD700 !important;
}

.episode-item.f4-episode-tile .episode-check {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(9, 9, 11, 0.65) !important;
  color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.episode-item.f4-episode-tile.is-checked .episode-check,
.episode-item.f4-episode-tile:has(input:checked) .episode-check {
  background: linear-gradient(135deg, #F59E0B, #FFD700) !important;
  border-color: #FFD700 !important;
  color: #09090B !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

.f4-tile-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.f4-tile-duration {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
  color: #A1A1AA;
}

.f4-tile-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #A1A1AA;
}

.f4-tile-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  display: inline-block;
}

.episode-item.f4-episode-tile.episode-locked {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

.episode-item.f4-episode-tile.episode-locked .f4-tile-dot {
  background: #EF4444;
  box-shadow: none;
}

/* Step 3 Inspector Controls & Dark Studio Surfaces */
.f4-step3-inspector-panel label > span,
.f4-step3-inspector-panel .field-label {
  color: #E4E4E7 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.f4-step3-inspector-panel select,
.f4-step3-inspector-panel input[type="number"],
.f4-step3-inspector-panel input[type="text"] {
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F6 !important;
  border-radius: 7px !important;
  height: 36px;
  padding: 0 11px;
  font-size: 12px;
}

.f4-step3-inspector-panel select:focus,
.f4-step3-inspector-panel input:focus {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18) !important;
  outline: none !important;
}

.f4-step3-inspector-panel .voice-mode-panel,
.f4-step3-inspector-panel .summary-box,
.f4-step3-inspector-panel .library-job-voices {
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
}

.f4-step3-inspector-panel .summary-box strong {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: #FFD700 !important;
}

.f4-step3-inspector-panel .launch-btn {
  background: linear-gradient(135deg, #F59E0B, #FFD700) !important;
  border: 1px solid #FFD700 !important;
  color: #09090B !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.32) !important;
}

.f4-step3-inspector-panel .launch-btn strong,
.f4-step3-inspector-panel .launch-btn small,
.f4-step3-inspector-panel .launch-btn .launch-icon,
.f4-step3-inspector-panel .launch-btn i {
  color: #09090B !important;
}

/* ==========================================================================
   3. PRODUCTION QUEUE (#page-jobs) — FRAME.IO V4 TELEMETRY & 2-MODE MATRIX
   ========================================================================== */

#page-jobs {
  background: #09090B;
}

.f4-queue-intro {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 3 Interactive Telemetry Filter Cards */
.f4-telemetry-filter-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

@media (max-width: 760px) {
  .f4-telemetry-filter-row {
    grid-template-columns: 1fr !important;
  }
}

.f4-telemetry-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 9px !important;
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer;
  user-select: none;
  transition: all 0.16s ease !important;
}

.f4-telemetry-card:hover {
  border-color: rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-1px);
  background: #1B1B22 !important;
}

.f4-telemetry-card.is-active-filter {
  border-color: #F59E0B !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), #16161C) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.18) !important;
}

.f4-telemetry-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.f4-telemetry-icon .lucide {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.f4-telemetry-icon.gold {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.38);
  color: #F59E0B;
}

.f4-telemetry-icon.emerald {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #10B981;
}

.f4-telemetry-icon.crimson {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.38);
  color: #EF4444;
}

.f4-telemetry-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.f4-telemetry-meta small {
  font-size: 11.5px;
  font-weight: 600;
  color: #A1A1AA;
}

.f4-telemetry-meta strong {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #F4F4F6 !important;
  line-height: 1.1;
}

.f4-telemetry-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.f4-telemetry-pill.gold {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #FFD700;
}

.f4-telemetry-pill.emerald {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34D399;
}

.f4-telemetry-pill.crimson {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
}

/* Queue Subtoolbar & 2-Mode View Switcher */
.f4-queue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: #111115;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.f4-queue-toolbar-left,
.f4-queue-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.f4-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 7px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.f4-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: #A1A1AA;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.f4-view-btn .lucide {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.f4-view-btn:hover {
  color: #F4F4F6;
}

.f4-view-btn.active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.5);
  color: #FFD700;
}

/* Multi-Panel Queue Split: Main Queue + Right Inspector Drawer */
.f4-queue-workspace-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1200px) {
  .f4-queue-workspace-split {
    grid-template-columns: 1fr;
  }
}

/* Mode 1 (Default): 9:16 Queue Card Grid */
#jobsList.f4-queue-grid-mode {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 680px) {
  #jobsList.f4-queue-grid-mode {
    grid-template-columns: 1fr !important;
  }
}

/* Mode 2: High-Density 5-Step Pipeline Matrix */
#jobsList.f4-queue-pipeline-mode {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Individual Queue Job Card (.job-card.f4-queue-card) */
.job-card.f4-queue-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 13px 14px !important;
  border-radius: 9px !important;
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer;
  transition: all 0.16s ease !important;
}

#jobsList.f4-queue-pipeline-mode .job-card.f4-queue-card {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  padding: 11px 14px !important;
}

.job-card.hidden,
.job-card.f4-queue-card.hidden {
  display: none !important;
}

.job-card.f4-queue-card:hover {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: #1A1A22 !important;
}

.job-card.f4-queue-card.is-selected-job,
.job-card.f4-queue-card.status-running,
.job-card.f4-queue-card.status-queued {
  border-color: #F59E0B !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.14) !important;
}

.job-card.f4-queue-card.status-completed {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

/* 9:16 Vertical Preview & Waveform Box */
.f4-job-preview-9x16 {
  position: relative;
  width: 92px;
  min-height: 142px;
  border-radius: 7px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

#jobsList.f4-queue-pipeline-mode .f4-job-preview-9x16 {
  width: 68px;
  min-height: 102px;
}

.f4-job-poster-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.34;
  filter: blur(1px) saturate(1.15);
  z-index: 0;
}

.f4-job-waveform-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.f4-job-top-badge {
  position: relative;
  z-index: 2;
  margin: 5px 5px 0;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.25;
}

.f4-job-top-badge.is-tech,
.f4-job-top-badge.is-completed {
  background: rgba(9, 9, 11, 0.82);
  border: 1px solid rgba(16, 185, 129, 0.48);
  color: #34D399;
}

.f4-job-top-badge.is-running {
  background: rgba(245, 158, 11, 0.24);
  border: 1px solid #F59E0B;
  color: #FFD700;
}

.f4-job-top-badge.is-cancelled {
  background: rgba(113, 113, 122, 0.24);
  border: 1px solid rgba(161, 161, 170, 0.4);
  color: #D4D4D8;
}

.f4-job-top-badge.is-failed {
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #FCA5A5;
}

.f4-job-aspect-pill {
  position: relative;
  z-index: 2;
  margin: 0 5px 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(9, 9, 11, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E4E4E7;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
}

/* Job Card Main Body */
.f4-job-card-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
}

.f4-job-title-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.f4-job-title-head strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #F4F4F6;
  line-height: 1.35;
}

.f4-job-meta-pills {
  display: flex !important;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.f4-job-meta-pills .f4-meta-pill {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #D4D4D8;
}

.f4-job-meta-pills .f4-meta-pill.is-gold {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
  color: #FFD700;
}

/* 5-Step Pipeline Matrix Bar (.f4-pipeline-5step) */
.f4-pipeline-5step {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-radius: 6px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.f4-step-node {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #71717A;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.f4-step-node i {
  font-style: normal;
  font-weight: 800;
}

.f4-step-node b {
  font-weight: 600;
}

.f4-step-node.is-done {
  color: #34D399;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
}

.f4-step-node.is-active {
  color: #FFD700;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.48);
}

.f4-step-node.is-warn {
  color: #FCA5A5;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.38);
}

.f4-step-connector {
  width: 10px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  display: inline-block;
}

.f4-step-connector.is-done {
  background: rgba(16, 185, 129, 0.55);
}

/* Fix Concatenated Stage & Percentage (.job-progress-head) */
.job-progress-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 5px !important;
}

.job-progress-head .job-stage-label,
.job-progress-head span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #D4D4D8 !important;
}

.job-progress-head .job-progress-pct,
.job-progress-head strong {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.36) !important;
  color: #FFD700 !important;
  flex-shrink: 0;
}

.job-card.status-completed .job-progress-head .job-progress-pct,
.job-card.status-completed .job-progress-head strong {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.42) !important;
  color: #34D399 !important;
}

/* Slim 4px progress bar for 100% completed tasks */
.job-card.status-completed .progress-track,
.job-card.status-completed progress.progress-native {
  height: 4px !important;
  min-height: 4px !important;
  border-radius: 999px !important;
}

.job-card.status-completed .progress-caption,
.job-card.status-completed .job-progress-caption {
  display: none !important;
}

/* Luxury Empty State when Queue Status Filter has 0 matching tasks */
.f4-queue-filter-empty {
  grid-column: 1 / -1;
  padding: 40px 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, #16161C 0%, #111115 100%);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.f4-qf-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10B981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.f4-qf-empty-icon .lucide {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.f4-queue-filter-empty strong {
  font-size: 14px;
  font-weight: 700;
  color: #F4F4F6;
}

.f4-queue-filter-empty p {
  margin: 0;
  font-size: 12px;
  color: #A1A1AA;
}

.f4-queue-filter-empty p b {
  font-family: var(--font-mono);
  color: #FFD700;
}

.f4-qf-reset-btn {
  margin-top: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 7px;
  border: 1px solid #FFD700;
  background: linear-gradient(135deg, #F59E0B, #FFD700);
  color: #09090B;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.28);
  transition: all 0.15s ease;
}

.f4-qf-reset-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.42);
}

/* Right Queue Inspector Drawer (#queueInspectorDrawer) */
.f4-queue-inspector-drawer {
  background: #111115;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 56px;
}

.f4-queue-inspector-body {
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.f4-queue-inspector-empty {
  padding: 28px 16px;
  text-align: center;
  color: #A1A1AA;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.f4-queue-inspector-empty .lucide {
  width: 28px;
  height: 28px;
  stroke: #F59E0B;
  stroke-width: 1.8;
  fill: none;
}

/* Technical Export Specs Card in Right Inspector (.f4-qinsp-tech-card) */
.f4-qinsp-tech-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.f4-qinsp-tech-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.f4-qinsp-tech-row.is-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.f4-qinsp-tech-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #A1A1AA;
}

.f4-qinsp-tech-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #34D399;
  word-break: break-all;
  line-height: 1.35;
}

.f4-qinsp-tech-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  color: #F4F4F6;
  text-align: right;
}

.f4-qinsp-tech-val.is-gold {
  color: #FFD700;
}

.f4-qinsp-section {
  padding: 10px 11px;
  border-radius: 8px;
  background: #16161C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f4-qinsp-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #A1A1AA;
}

.f4-qinsp-ep-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 160px;
  overflow-y: auto;
}

.f4-qinsp-ep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
}

.f4-qinsp-ep-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #FFD700;
}

.f4-qinsp-ep-stage {
  color: #D4D4D8;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.f4-qinsp-ep-pct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #A1A1AA;
}

.f4-qinsp-ep-pct.is-ok {
  color: #34D399;
}

.f4-qinsp-hint {
  margin: 0;
  font-size: 11px;
  color: #A1A1AA;
  line-height: 1.45;
}

.f4-qinsp-cues {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.f4-qinsp-cue {
  padding: 6px 8px;
  border-radius: 5px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.f4-qinsp-cue-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #F59E0B;
}

.f4-qinsp-cue p {
  margin: 2px 0 0;
  font-size: 11px;
  color: #F4F4F6;
}

.f4-qinsp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.f4-qinsp-actions button {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #16161C;
  color: #F4F4F6;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.f4-qinsp-actions button.primary {
  background: linear-gradient(135deg, #F59E0B, #FFD700);
  border-color: #FFD700;
  color: #09090B;
  font-weight: 700;
}

/* ==========================================================================
   MUSE STUDIO 2-COLUMN QUEUE & 9:16 EPISODE VIDEO INSPECTOR
   ("Hàng đợi video" Left List + "✦ Chi tiết kết quả" Right Video Player)
   ========================================================================== */

.f4-queue-workspace-split.f4-muse-queue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(400px, 0.96fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 1180px) {
  .f4-queue-workspace-split.f4-muse-queue-layout {
    grid-template-columns: 1fr;
  }
}

.f4-queue-main-col,
.f4-muse-queue-col {
  background: #111115;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

.f4-muse-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.f4-muse-queue-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.f4-muse-queue-title .lucide {
  width: 16px;
  height: 16px;
  stroke: #F59E0B;
  stroke-width: 2;
  fill: none;
}

.f4-muse-queue-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #F4F4F6;
  letter-spacing: -0.01em;
}

.f4-muse-queue-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.f4-muse-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  min-width: 230px;
  padding: 0 11px;
  border-radius: 7px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.f4-muse-search-box:focus-within {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.14);
}

.f4-muse-search-box .lucide {
  width: 13.5px;
  height: 13.5px;
  stroke: #71717A;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

.f4-muse-search-box input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  color: #F4F4F6 !important;
  font-size: 11.5px !important;
  outline: none !important;
  padding: 0 !important;
}

.f4-muse-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px !important;
}

.f4-status-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.f4-status-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #09090B;
  color: #D4D4D8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.f4-status-filter:hover {
  border-color: rgba(245, 158, 11, 0.45);
  color: #F4F4F6;
}

.f4-status-filter.active,
.f4-status-filter.is-active-filter {
  background: rgba(245, 158, 11, 0.16);
  border-color: #FFD700;
  color: #FFD700;
}

.f4-dot-gold,
.f4-dot-emerald,
.f4-dot-crimson {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}

.f4-dot-gold { background: #F59E0B; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.f4-dot-emerald { background: #10B981; }
.f4-dot-crimson { background: #EF4444; }

.f4-filter-count,
.f4-muse-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
  color: #E4E4E7;
}

.f4-status-filter.active .f4-filter-count,
.f4-status-filter.is-active-filter .f4-filter-count {
  background: rgba(9, 9, 11, 0.35);
  color: #FFD700;
}

/* Stack queue cards as clean horizontal rows like Muse Studio */
#jobsList,
#jobsList.f4-queue-grid-mode,
#jobsList.f4-queue-pipeline-mode,
#jobsList.f4-muse-jobs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  padding-right: 4px;
}

#jobsList .job-card.f4-queue-card,
#jobsList.f4-queue-grid-mode .job-card.f4-queue-card,
#jobsList.f4-queue-pipeline-mode .job-card.f4-queue-card {
  display: grid !important;
  grid-template-columns: 38px 68px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#jobsList .job-card.f4-queue-card.is-selected-job {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.11) 0%, #191922 100%) !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.18) !important;
}

.f4-job-index-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.f4-job-index-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: #71717A;
}

.job-card.f4-queue-card.is-selected-job .f4-job-index-num {
  color: #FFD700;
}

#jobsList .f4-job-preview-9x16,
#jobsList.f4-queue-grid-mode .f4-job-preview-9x16,
#jobsList.f4-queue-pipeline-mode .f4-job-preview-9x16 {
  width: 68px !important;
  height: 96px !important;
  min-height: 96px !important;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.f4-job-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.2s ease;
}

.job-card.f4-queue-card:hover .f4-job-poster-img {
  transform: scale(1.04);
}

.f4-job-preview-9x16.has-poster .f4-job-waveform-svg {
  opacity: 0.16;
}

/* In Danh sách (grid) mode, hide the 5-step row inside the card so rows are compact; show it in 5 Bước (pipeline) mode */
#jobsList.f4-queue-grid-mode .f4-pipeline-5step {
  display: none;
}

/* Right Column: "✦ Chi tiết kết quả" Video Player & Episode Selector */
.f4-muse-inspector,
.f4-muse-detail-drawer {
  background: #111115 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  position: sticky;
  top: 52px;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}

.f4-muse-inspector-head,
.f4-muse-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 9, 11, 0.55);
}

.f4-muse-sparkle {
  color: #FFD700;
  font-size: 14px;
}

.f4-muse-detail-kicker .lucide {
  width: 14px;
  height: 14px;
  stroke: #FFD700;
  stroke-width: 2.2;
  fill: none;
}

.f4-muse-detail-sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: #A1A1AA;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f4-muse-detail-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.f4-muse-head-btn {
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #16161C;
  color: #E4E4E7;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.f4-muse-head-btn:hover:not(:disabled) {
  border-color: #FFD700;
  color: #FFD700;
}

.f4-muse-head-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.f4-muse-head-btn.is-danger:hover {
  border-color: #EF4444;
  color: #FCA5A5;
}

/* 9:16 Video Player Stage Card */
.f4-qinsp-player-card {
  padding: 12px;
  border-radius: 10px;
  background: #16161C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.f4-qinsp-video-stage {
  position: relative;
  width: 100%;
  max-width: 248px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #050507;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}

.f4-qinsp-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.94;
  pointer-events: none;
}

.f4-qinsp-video-stage.is-video-loaded .f4-qinsp-poster-img {
  opacity: 0.25;
  filter: blur(8px) saturate(1.2);
  z-index: 0;
}

.f4-qinsp-video-el {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.f4-qinsp-stage-corner {
  position: absolute;
  bottom: 42px;
  right: 8px;
  z-index: 4;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(9, 9, 11, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #FFD700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 9.5px;
  font-weight: 800;
  pointer-events: none;
}

.f4-qinsp-video-live-overlay,
.f4-qinsp-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.92) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 14px;
  text-align: center;
  gap: 6px;
}

.f4-qinsp-video-fallback.hidden {
  display: none !important;
}

.f4-qinsp-fallback-card {
  background: rgba(17, 17, 21, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.f4-qinsp-fallback-card strong,
.f4-qinsp-video-live-overlay strong {
  font-size: 12px;
  color: #F4F4F6;
}

.f4-qinsp-fallback-card p,
.f4-qinsp-video-live-overlay p {
  margin: 0;
  font-size: 10.5px;
  color: #D4D4D8;
  line-height: 1.35;
}

.f4-qinsp-fallback-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.f4-qinsp-fallback-btns button {
  height: 27px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #16161C;
  color: #F4F4F6;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.f4-qinsp-fallback-btns button.primary {
  background: linear-gradient(135deg, #F59E0B, #FFD700);
  border-color: #FFD700;
  color: #09090B;
}

.f4-qinsp-video-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.f4-qinsp-video-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.f4-qinsp-ep-active-tag {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 800;
  color: #FFD700;
}

.f4-qinsp-ep-status-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.f4-qinsp-ep-status-tag.is-ok {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.42);
  color: #34D399;
}

.f4-qinsp-ep-status-tag.is-gold {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.42);
  color: #FFD700;
}

.f4-qinsp-drama-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #F4F4F6;
  line-height: 1.35;
}

.f4-qinsp-drama-sub {
  margin: 0;
  font-size: 11px;
  color: #A1A1AA;
}

/* Interactive Multi-Episode Selector Strip (.f4-qinsp-ep-selector) */
.f4-qinsp-ep-selector {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.f4-qinsp-ep-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 135px;
  overflow-y: auto;
  padding: 2px 0;
}

.f4-qinsp-ep-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #09090B;
  color: #D4D4D8;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.f4-qinsp-ep-pill:hover {
  border-color: rgba(245, 158, 11, 0.55);
  color: #F4F4F6;
}

.f4-qinsp-ep-pill.is-ep-done .f4-ep-pill-state {
  color: #34D399;
}

.f4-qinsp-ep-pill.is-ep-run .f4-ep-pill-state {
  color: #FFD700;
}

.f4-qinsp-ep-pill.is-ep-warn .f4-ep-pill-state {
  color: #FCA5A5;
}

.f4-qinsp-ep-pill.is-active-ep {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.24), rgba(255, 215, 0, 0.14));
  border-color: #FFD700;
  color: #FFD700;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.f4-qinsp-ep-pill.is-active-ep .f4-ep-pill-num {
  font-weight: 800;
  color: #FFD700;
}

/* ==========================================================================
   INTERACTIVE COLUMN RESIZERS & TOPBAR PANEL TOGGLE CONTROLS
   ========================================================================== */

.engine-pill {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.engine-pill:hover {
  border-color: rgba(245, 158, 11, 0.55) !important;
  color: #FFD700 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.16);
}

.f4-panel-toggles {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 7px !important;
  background: #111115 !important;
}

.f4-panel-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent !important;
  outline: none !important;
  background: transparent !important;
  color: #71717A !important;
  width: 26px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 5px !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.14s ease;
}

.f4-panel-btn .lucide {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.f4-panel-btn:hover {
  color: #F4F4F6 !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.f4-panel-btn.active {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.48) !important;
  color: #FFD700 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.22);
}

/* Resizable App Shell & Sidebar */
.app-shell {
  grid-template-columns: 48px var(--f4-sidebar-width, 248px) minmax(0, 1fr) !important;
}

.app-shell.is-resizing-cols,
.app-shell.is-resizing-cols * {
  transition: none !important;
  user-select: none !important;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 48px 0px minmax(0, 1fr) !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.sidebar {
  position: relative;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.f4-sidebar-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 35;
  touch-action: none;
}

.f4-sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: transparent;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.f4-sidebar-resizer:hover::after,
.f4-sidebar-resizer.is-dragging::after {
  background: #FFD700;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
}

/* Vertical Column Resizer Splitter Bar (.f4-col-resizer) */
.f4-col-resizer {
  width: 14px;
  align-self: stretch;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 15;
  position: relative;
}

.f4-col-resizer::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.07);
  transition: all 0.15s ease;
}

.f4-col-resizer span {
  position: relative;
  z-index: 2;
  width: 4px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.15s ease;
}

.f4-col-resizer:hover::before,
.f4-col-resizer.is-dragging::before {
  width: 2px;
  background: rgba(245, 158, 11, 0.65);
}

.f4-col-resizer:hover span,
.f4-col-resizer.is-dragging span {
  height: 88px;
  width: 5px;
  background: #FFD700;
  border-color: #FFD700;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.85);
}

/* Studio Split Grid with Resizer */
.f4-workspace-split {
  grid-template-columns: minmax(0, 1fr) 14px var(--f4-studio-inspector-width, 340px) !important;
  gap: 0 !important;
}

.app-shell.inspector-collapsed .f4-workspace-split,
.f4-workspace-split.inspector-collapsed {
  grid-template-columns: minmax(0, 1fr) 0px 0px !important;
}

.app-shell.inspector-collapsed #studioColResizer,
.f4-workspace-split.inspector-collapsed #studioColResizer,
.app-shell.inspector-collapsed .f4-right-inspector,
.f4-workspace-split.inspector-collapsed .f4-right-inspector {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Step 2 & Step 3 (#productionGrid) Split with Resizer */
#productionGrid.production-grid:not(.hidden) {
  display: grid !important;
  grid-template-columns: minmax(340px, 1fr) 14px minmax(340px, var(--f4-prod-inspector-width, 430px)) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.app-shell.inspector-collapsed #productionGrid.production-grid:not(.hidden) {
  grid-template-columns: minmax(0, 1fr) 0px 0px !important;
}

.app-shell.inspector-collapsed #prodColResizer,
.app-shell.inspector-collapsed #productionGrid .launch-panel {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Queue Workspace Split (#page-jobs) with Resizer & Collapse Support */
.f4-queue-workspace-split.f4-muse-queue-layout {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) 14px minmax(320px, var(--f4-queue-inspector-width, 460px)) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.app-shell.inspector-collapsed .f4-queue-workspace-split.f4-muse-queue-layout {
  grid-template-columns: minmax(0, 1fr) 0px 0px !important;
}

.app-shell.inspector-collapsed #queueColResizer,
.app-shell.inspector-collapsed #queueInspectorDrawer {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Scale 9:16 Video Player Smoothly When Right Inspector Width Is Resized */
.f4-qinsp-video-stage {
  max-width: clamp(220px, calc(var(--f4-queue-inspector-width, 460px) - 140px), 480px) !important;
}

/* ==========================================================================
   100VH VIEWPORT LOCK, INDEPENDENT COLUMN SCROLLING & STITCH TABLE CARD
   ========================================================================== */

html,
body {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.app-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

/* Fix Sidebar Bottom Horizontal Scrollbar */
.sidebar .system-mini,
.sidebar .mini-row,
.sidebar .local-badge {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sidebar .mini-row span,
.sidebar .local-badge {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.main {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.topbar {
  flex-shrink: 0 !important;
  height: 44px !important;
}

.page.active {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
}

#page-studio.page.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#page-studio .f4-subtoolbar,
#page-studio .f4-statusbar {
  flex-shrink: 0 !important;
}

#page-studio .f4-workspace-split {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

#page-studio .f4-center-column {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
}

#page-studio .f4-right-inspector {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* When Step 2 & Step 3 (#productionGrid) is Active: Lock Center Column & Scroll Both Panels Independently */
#page-studio.f4-step2-active .f4-subtoolbar,
#page-studio.f4-step2-active .search-panel.f4-asset-browser,
#page-studio.f4-step2-active #studioColResizer,
#page-studio.f4-step2-active .f4-right-inspector,
#page-studio.f4-step2-active .f4-floating-batch-bar,
#page-studio:has(#productionGrid:not(.hidden)) .f4-subtoolbar,
#page-studio:has(#productionGrid:not(.hidden)) .search-panel.f4-asset-browser,
#page-studio:has(#productionGrid:not(.hidden)) #studioColResizer,
#page-studio:has(#productionGrid:not(.hidden)) .f4-right-inspector,
#page-studio:has(#productionGrid:not(.hidden)) .f4-floating-batch-bar {
  display: none !important;
}

#page-studio.f4-step2-active .f4-workspace-split,
#page-studio:has(#productionGrid:not(.hidden)) .f4-workspace-split {
  grid-template-columns: 1fr !important;
}

#page-studio.f4-step2-active .f4-center-column,
#page-studio:has(#productionGrid:not(.hidden)) .f4-center-column {
  overflow: hidden !important;
}

#page-studio.f4-step2-active #productionGrid.production-grid:not(.hidden),
#page-studio:has(#productionGrid:not(.hidden)) #productionGrid.production-grid:not(.hidden) {
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

/* Step 2 Left/Center Panel: Fixed Header/Hero + Full-Height Scrollable Episode Grid */
#productionGrid .selection-panel.f4-step2-matrix-panel {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 12px 14px !important;
  background: #111115 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}

#productionGrid .f4-matrix-head,
#productionGrid .selection-film-col {
  flex-shrink: 0 !important;
}

#productionGrid #episodeList,
#productionGrid .f4-episode-matrix-grid {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
  padding: 4px 4px 10px 2px !important;
}

/* Step 3 Right Docked Inspector Panel: Fixed Header + Scrollable Body + Sticky Bottom Footer */
#productionGrid .launch-panel.f4-step3-inspector-panel {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #111115 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
}

.f4-step3-inspector-panel > .f4-step3-head {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 11px 16px !important;
  background: #111115 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.f4-step3-scroll-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 15px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.f4-step3-scroll-body .f4-render-fieldset {
  margin: 0 !important;
  padding: 11px 13px !important;
}

.f4-step3-scroll-body .f4-worker-telemetry-box {
  margin-top: 8px !important;
  padding: 7px 10px !important;
}

.f4-step3-scroll-body .language-grid {
  margin-bottom: 2px !important;
}

/* Fix Bug 2 & Bug 3: Full-Width Profile Summary & Full-Width Execution Target Select */
.f4-col-span-2,
.two-fields > .render-profile-summary,
.two-fields.f4-single-full-field > label,
.two-fields > :only-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#profileDescription.render-profile-summary {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: auto !important;
  margin-top: 4px !important;
  padding: 9px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  box-sizing: border-box !important;
}

#executionTargetSelect {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Sticky Bottom Footer in Step 3 Inspector */
.f4-step3-sticky-footer {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  background: #111115 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 10px 15px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

.f4-step3-sticky-footer .summary-box {
  margin: 0 !important;
  padding: 8px 11px !important;
}

.f4-step3-sticky-footer .launch-btn {
  margin: 0 !important;
  width: 100% !important;
}

/* Queue Page (#page-jobs) 100vh Lock & Independent Column Scroll */
#page-jobs.page.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px 16px !important;
}

#page-jobs .f4-queue-workspace-split.f4-muse-queue-layout {
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#page-jobs .f4-queue-main-col {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#page-jobs #jobsList {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

#page-jobs #queueInspectorDrawer {
  position: static !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#page-jobs #queueInspectorBody {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   YÊU CẦU 3: STITCH STUDIO (#page-stitch) — ENCLOSED EPISODE TABLE CARD
   ========================================================================== */

#page-stitch.page.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px 16px !important;
}

#page-stitch .page-intro {
  flex-shrink: 0 !important;
  margin-bottom: 10px !important;
}

#page-stitch .stitch-workspace-grid {
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 290px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#page-stitch .stitch-sidebar-panel {
  position: static !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

#page-stitch .stitch-drama-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#page-stitch .stitch-main-panel {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-right: 4px !important;
}

#page-stitch .stitch-active-workspace:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
}

#page-stitch .stitch-overview-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  flex-shrink: 0 !important;
}

#page-stitch .stitch-meta-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

#page-stitch .tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #D4D4D8;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
}

#page-stitch .tag-pill.accent {
  border-color: rgba(245, 158, 11, 0.45);
  color: #FFD700;
}

#page-stitch .tag-pill.srt {
  border-color: rgba(16, 185, 129, 0.45);
  color: #34D399;
}

/* Enclosed Card for Sequence & Episode Ordering Table */
#page-stitch .stitch-sequence-panel {
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 330px !important;
  max-height: 44vh !important;
  min-height: 220px !important;
  overflow: hidden !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

#page-stitch .stitch-section-header {
  flex-shrink: 0 !important;
  padding: 11px 16px !important;
  background: #111115 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-stitch .stitch-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-stitch .stitch-sec-title strong {
  display: block;
  font-size: 13px;
  color: #F4F4F6;
}

#page-stitch .stitch-sec-title small {
  display: block;
  font-size: 11px;
  color: #A1A1AA;
}

#page-stitch .stitch-episodes-table-wrapper {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  width: 100% !important;
  background: #16161C !important;
}

#page-stitch .stitch-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto;
}

#page-stitch .stitch-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: #111115 !important;
  color: #A1A1AA !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 9px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-stitch .stitch-table thead th.text-right,
#page-stitch .stitch-table td.text-right {
  text-align: right !important;
}

#page-stitch .stitch-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: #16161C;
  transition: background 0.12s ease;
}

#page-stitch .stitch-table tbody tr:hover {
  background: rgba(245, 158, 11, 0.07) !important;
}

#page-stitch .stitch-table tbody tr.excluded {
  opacity: 0.42;
}

#page-stitch .stitch-table td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
  color: #F4F4F6;
  font-size: 12px;
}

.stitch-ord-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  background: #09090B;
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #FFD700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
}

.f4-meta-pill.is-emerald {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.42) !important;
  color: #34D399 !important;
}

.stitch-move-cell {
  white-space: nowrap;
}

.stitch-move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  margin-left: 4px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #09090B;
  color: #E4E4E7;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.stitch-move-btn:hover:not(:disabled) {
  border-color: #FFD700;
  color: #FFD700;
  background: rgba(245, 158, 11, 0.14);
}

.stitch-move-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

#page-stitch .stitch-action-bar {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 16px !important;
  background: #111115 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5);
}

#page-stitch .stitch-panel-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#page-stitch .stitch-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-stitch .stitch-panel-title strong {
  display: block;
  font-size: 13px;
  color: #F4F4F6;
}

#page-stitch .stitch-panel-title small {
  display: block;
  font-size: 11px;
  color: #A1A1AA;
  font-family: var(--font-mono);
}

#page-stitch .stitch-search-box {
  margin-bottom: 10px;
}

#page-stitch .stitch-search-box input,
#page-stitch .stitch-card input[type="number"],
#page-stitch .stitch-card input[type="text"],
#page-stitch .stitch-card select {
  width: 100%;
  background: #09090B !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 7px !important;
  padding: 8px 11px !important;
  color: #F4F4F6 !important;
  font-size: 12px !important;
  outline: none;
  box-sizing: border-box;
}

#page-stitch .stitch-search-box input:focus,
#page-stitch .stitch-card input:focus,
#page-stitch .stitch-card select:focus {
  border-color: #F59E0B !important;
}

#page-stitch .stitch-drama-card {
  padding: 10px 12px;
  border-radius: 9px;
  background: #111115;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.14s ease;
}

#page-stitch .stitch-drama-card.active,
#page-stitch .stitch-drama-card:hover {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.08);
}

#page-stitch .stitch-drama-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #F4F4F6;
  margin-bottom: 6px;
}

#page-stitch .stitch-drama-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #FFD700;
}

#page-stitch .stitch-options-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

#page-stitch .stitch-card {
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#page-stitch .stitch-card label > span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #D4D4D8;
  margin-bottom: 5px;
}

#page-stitch .stitch-card label > small {
  display: block;
  font-size: 10.5px;
  color: #71717A;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .f4-queue-workspace-split.f4-muse-queue-layout,
  #productionGrid.production-grid:not(.hidden),
  #page-stitch .stitch-workspace-grid,
  #page-stitch .stitch-options-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .f4-col-resizer {
    display: none !important;
  }
}

/* ==========================================================================
   FINAL 10/10 POLISH:
   1. Settings & Voice Studio Matte Black (#111115/#16161C) & Neon Gold (#F59E0B)
   2. QA Inspector Multi-Line Dialogue Wrapping & Single-Line 9:16 Metadata Pills
   3. Stitch Left List 2-Line Layout with JetBrains Mono Metadata Pills
   4. Step 3 Logo Picker Header & Widened Voice Engine Select
   ========================================================================== */

/* 1. Settings & Voice Studio Section Icons & Cards */
.settings-title span {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.42) !important;
  color: #FFD700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.15) !important;
}

#page-settings .settings-card {
  background: #111115 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45) !important;
}

#page-settings .settings-card input,
#page-settings .settings-card select,
#page-settings .settings-card textarea {
  background: #09090B !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F6 !important;
}

#page-settings .settings-card input:focus,
#page-settings .settings-card select:focus,
#page-settings .settings-card textarea:focus {
  border-color: rgba(245, 158, 11, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.16) !important;
}

#page-settings .step-label,
#page-voices .step-label {
  color: #F59E0B !important;
}

/* 2. QA Inspector Multi-Line Dialogue Wrapping & 9:16 Metadata Pills */
.f4-cue-input {
  width: 100% !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #09090B !important;
  color: #F4F4F6 !important;
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  resize: none !important;
  min-height: 44px !important;
  display: block !important;
}

.f4-metadata-pills {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.f4-meta-pill {
  padding: 2px 4.5px !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 3. Stitch Left List ("Phim đã render"): Clean 2-Line Layout */
#page-stitch .stitch-drama-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: #16161C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-stitch .stitch-drama-item.active {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), rgba(22, 22, 28, 0.96)) !important;
  border-color: rgba(245, 158, 11, 0.52) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 215, 0, 0.14) !important;
}

#page-stitch .stitch-drama-item-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#page-stitch .stitch-drama-item-head strong {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #F4F4F6 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

#page-stitch .stitch-ep-count-badge {
  flex-shrink: 0 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.36) !important;
  color: #FFD700 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#page-stitch .stitch-drama-item-meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  overflow: hidden !important;
}

#page-stitch .stitch-drama-item-meta .f4-meta-pill {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #A1A1AA !important;
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#page-stitch .stitch-drama-item-meta .f4-meta-pill.srt-ok,
#page-stitch .stitch-drama-item-meta .f4-meta-pill.is-emerald,
#page-stitch .stitch-drama-item-meta .f4-meta-pill.stitch-srt-tag {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.36) !important;
  color: #34D399 !important;
}

/* 4. Step 3 Setup Panel: Widened Voice Engine Column & Default Inspector Width */
#productionGrid.production-grid:not(.hidden) {
  grid-template-columns: minmax(0, 1fr) 8px minmax(410px, var(--f4-prod-inspector-width, 450px)) !important;
}

#productionGrid .two-fields.f4-profile-engine-fields {
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr) !important;
  gap: 8px !important;
}

/* ==========================================================================
   FULL FUNCTIONAL WIRING — GLOBAL VOICE CASTING MODAL, QA INSPECTOR & CARDS
   ========================================================================== */

button.f4-cast-row {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

button.f4-cast-row:hover {
  border-color: rgba(245, 158, 11, 0.55);
  background: #181820;
  transform: translateX(1px);
}

.f4-cast-manage-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.f4-cast-manage-btn:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: #FFD700;
  color: #FFD700;
}

.f4-casting-dialog {
  max-width: 580px !important;
  width: 94vw !important;
  background: #111115 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.f4-cast-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .f4-cast-modal-grid {
    grid-template-columns: 1fr;
  }
}

.f4-cast-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #16161C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.f4-cast-modal-field.is-focused-role {
  border-color: #F59E0B;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}

.f4-cast-modal-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #F4F4F6;
}

.f4-cast-modal-field select {
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  background: #09090B;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F4F4F6;
  font-size: 11.5px;
}

.f4-cast-modal-field select:focus {
  outline: none;
  border-color: #F59E0B;
}

.f4-cast-modal-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.f4-inspector-open-drama-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 32px;
  margin-top: 2px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.48);
  background: rgba(245, 158, 11, 0.14);
  color: #FFD700;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.f4-inspector-open-drama-btn:hover {
  background: linear-gradient(135deg, #F59E0B, #FFD700);
  border-color: #FFD700;
  color: #09090B;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.32);
}

.f4-inspector-open-drama-btn .lucide {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: currentColor;
}

.f4-qa-badge,
.f4-card-field-box .f4-field-label,
.f4-card-field-box .f4-field-value,
.f4-card-field-box .f4-role-pill {
  display: none !important;
}

.f4-card-field-box {
  justify-content: center;
}

.f4-card-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.42);
  color: #FFD700;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.14s ease;
}

.f4-card-open-btn:hover {
  background: #F59E0B;
  border-color: #FFD700;
  color: #09090B;
}

.f4-waveform-canvas[data-waveform-scrub] {
  cursor: pointer;
}

#page-studio #rightInspectorPanel,
#page-studio #studioColResizer,
[data-toggle-inspector] {
  display: none !important;
}

#page-studio .f4-workspace-split {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* ==========================================================================
   CHROME EXTENSION PROMO PANEL (Auto Downloader Drama Sidebar Ad Banner)
   ========================================================================== */
.f4-ext-promo-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
  padding: 12px 11px;
  border-radius: 11px;
  text-decoration: none;
  color: #f4f4f6;
  background:
    radial-gradient(circle at 18% 18%, rgba(244, 63, 94, 0.22), transparent 56%),
    radial-gradient(circle at 88% 85%, rgba(245, 158, 11, 0.22), transparent 58%),
    linear-gradient(155deg, #1b1520 0%, #121218 55%, #19151d 100%);
  border: 1px solid rgba(244, 63, 94, 0.48);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(244, 63, 94, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  animation: f4-ext-border-pulse 3.2s ease-in-out infinite;
}

.f4-ext-promo-panel:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #ffd700;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.68),
    0 0 26px rgba(245, 158, 11, 0.38),
    inset 0 1px 0 rgba(255, 215, 0, 0.28);
}

.f4-ext-promo-glow {
  position: absolute;
  top: -40%;
  left: -60%;
  width: 55%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transform: rotate(24deg);
  pointer-events: none;
  animation: f4-ext-sheen 4.2s ease-in-out infinite;
}

.f4-ext-promo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.f4-ext-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fda4af;
}

.f4-ext-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
  display: inline-block;
  animation: f4-ext-dot-blink 1.4s ease-in-out infinite;
}

.f4-ext-promo-free {
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e, #f59e0b);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.4);
}

.f4-ext-promo-hero {
  display: flex;
  align-items: center;
  gap: 10px;
}

.f4-ext-logo-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 16px rgba(244, 63, 94, 0.35);
  animation: f4-ext-float 2.8s ease-in-out infinite;
}

.f4-ext-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
}

.f4-ext-logo-ring {
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  border: 1.5px solid rgba(244, 63, 94, 0.58);
  pointer-events: none;
  animation: f4-ext-ring-pulse 2.2s ease-out infinite;
}

.f4-ext-hero-copy {
  min-width: 0;
  flex: 1;
}

.f4-ext-hero-copy strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  background: linear-gradient(90deg, #ffffff 0%, #fde68a 55%, #fda4af 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.f4-ext-hero-copy small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #e4e4e7;
  line-height: 1.3;
}

.f4-ext-promo-desc {
  margin: 0;
  font-size: 10.8px;
  line-height: 1.45;
  color: #d4d4d8;
}

.f4-ext-promo-desc b {
  color: #ffd700;
  font-weight: 700;
}

.f4-ext-promo-desc span {
  color: #fda4af;
  font-weight: 600;
}

.f4-ext-promo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.f4-ext-promo-tags span {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f4f4f6;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}

.f4-ext-promo-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f43f5e 0%, #f59e0b 55%, #ffd700 100%);
  background-size: 200% 200%;
  color: #09090b;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.42);
  animation: f4-ext-cta-gradient 3s ease infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.f4-ext-promo-panel:hover .f4-ext-promo-cta {
  box-shadow: 0 8px 22px rgba(255, 215, 0, 0.52);
}

.f4-ext-promo-cta .lucide {
  width: 14px;
  height: 14px;
  stroke: #09090b;
  stroke-width: 2.5;
}

.f4-ext-cta-arrow {
  font-style: normal;
  font-weight: 900;
  transition: transform 0.18s ease;
}

.f4-ext-promo-panel:hover .f4-ext-cta-arrow {
  transform: translateX(3px);
}

@keyframes f4-ext-border-pulse {
  0%, 100% {
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 16px rgba(244, 63, 94, 0.18);
  }
  50% {
    border-color: rgba(245, 158, 11, 0.72);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(245, 158, 11, 0.28);
  }
}

@keyframes f4-ext-sheen {
  0% { left: -75%; }
  45%, 100% { left: 135%; }
}

@keyframes f4-ext-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes f4-ext-ring-pulse {
  0% { transform: scale(0.96); opacity: 0.85; }
  70% { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

@keyframes f4-ext-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

@keyframes f4-ext-cta-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}




.f4-qinsp-play{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid var(--accent,#f5b700);background:rgba(9,9,11,.85);color:#ffd700;font-size:28px;cursor:pointer;display:grid;place-items:center;padding-left:6px}.f4-qinsp-play:focus-visible{outline:3px solid #fff;outline-offset:4px}.f4-qinsp-play-status{position:absolute;z-index:5;bottom:75px;left:12px;right:12px;padding:8px;background:rgba(9,9,11,.85);font-size:12px;text-align:center}.f4-qinsp-play.hidden,.f4-qinsp-play-status.hidden{display:none}