/* =====================================================================
   VideoLyrics Editor — Theme & Layout
   Dark-blue CapCut-inspired design with CSS custom properties.
   Change the :root vars to re-skin the entire app.
   ===================================================================== */

/* ── Theme tokens ──────────────────────────────────────────────────── */
:root {
  /* Base palette */
  --bg-darkest:    #0a0e1a;
  --bg-darker:     #0f1525;
  --bg-dark:       #151d30;
  --bg-panel:      #1a2338;
  --bg-surface:    #1f2b42;
  --bg-hover:      #253350;
  --bg-active:     #2c3d5e;

  /* Accent */
  --accent:        #4e8cff;
  --accent-hover:  #6ba0ff;
  --accent-dim:    #2d5aa0;
  --accent-glow:   rgba(78, 140, 255, 0.25);

  /* Highlight / karaoke */
  --highlight:     #ffd200;
  --highlight-dim: #b89600;

  /* Danger / warning */
  --danger:        #ff4d6a;
  --success:       #34d399;
  --warning:       #f59e0b;

  /* Text */
  --text-primary:  #e8ecf4;
  --text-secondary:#8a95aa;
  --text-muted:    #5a6578;
  --text-inverse:  #0a0e1a;

  /* Borders */
  --border:        #253350;
  --border-light:  #2c3d5e;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
  --shadow-md:     0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.6);

  /* Radii */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;

  /* Sizing */
  --sidebar-w:     380px;
  --topbar-h:      48px;
  --timeline-h:    360px;
  --tab-icon-size: 20px;

  /* Transitions */
  --ease:          cubic-bezier(.4,0,.2,1);
  --dur:           180ms;

  /* Typography */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-darkest);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar styling ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Layout grid ───────────────────────────────────────────────────── */
#app {
  display: grid;
  height: 100vh;
  grid-template-rows: var(--topbar-h) 1fr var(--timeline-h);
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar preview"
    "timeline timeline";
}

/* ── Top bar ───────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border);
  gap: 16px;
  z-index: 10;
}
.topbar__brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .5px;
  white-space: nowrap;
}
.topbar__song-select {
  flex: 0 1 280px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a95aa'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.topbar__song-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.topbar__views {
  display: flex;
  gap: 2px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 2px;
}
.topbar__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.topbar__view-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.topbar__view-btn.active {
  background: var(--accent);
  color: #fff;
}
.topbar__view-btn svg {
  flex-shrink: 0;
}
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; gap: 8px; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn--secondary:hover { background: var(--bg-hover); }
.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover { background: #e6364f; }
.btn--warning {
  background: var(--warning);
  color: #111;
}
.btn--warning:hover { background: #d97706; }
.btn--small { height: 26px; padding: 0 10px; font-size: 11px; }
.btn--icon {
  width: 32px;
  padding: 0;
  justify-content: center;
}
.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Sidebar / Config Panel ────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

/* Tab bar */
.sidebar__tabs {
  display: flex;
  flex-wrap: nowrap;
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border);
  padding: 4px 2px 0;
  gap: 0;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sidebar__tabs::-webkit-scrollbar { display: none; }
.sidebar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 9px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.sidebar__tab svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sidebar__tab span {
  font-size: 9px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sidebar__tab:hover {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.sidebar__tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-dark);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Tab content */
.sidebar__content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Config form controls */
.cfg-section {
  margin-bottom: 16px;
}
.cfg-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cfg-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}
.cfg-row label {
  flex: 0 0 110px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}
.cfg-row input[type="text"],
.cfg-row input[type="number"],
.cfg-row select {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-sans);
}
.cfg-row input:focus,
.cfg-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.cfg-row input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  cursor: pointer;
}
.cfg-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.cfg-row .range-val {
  width: 36px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.cfg-row .btn-browse {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background var(--dur) var(--ease);
}
.cfg-row .btn-browse:hover {
  background: var(--accent-dim);
  color: var(--text-primary);
}
.cfg-row .cfg-path {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checkbox / toggle */
.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-active);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.toggle.on { background: var(--accent); }
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease);
}
.toggle.on::after { transform: translateX(16px); }

/* ── Preview area ──────────────────────────────────────────────────── */
.preview {
  grid-area: preview;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-darkest);
  padding: 10px 16px;
  gap: 6px;
  overflow: hidden;
}
.preview__canvas-wrap {
  position: relative;
  background: #000;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
}
.preview__canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.preview__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  display: flex;
  align-items: center;
  gap: 12px;
}
.preview__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Transport controls (inside timeline toolbar) */
.transport {
  display: flex;
  align-items: center;
  gap: 6px;
}
.transport__btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
}
.transport__btn:hover { background: var(--bg-hover); }
.transport__btn--play {
  width: 30px;
  height: 30px;
  background: var(--accent);
}
.transport__btn--play:hover { background: var(--accent-hover); }
.transport__btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.timeline__spacer { flex: 1; }

/* ── Timeline ──────────────────────────────────────────────────────── */
.timeline {
  grid-area: timeline;
  display: flex;
  flex-direction: column;
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.timeline__toolbar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
  flex-shrink: 0;
}
.timeline__toolbar .btn { height: 26px; font-size: 11px; }
.timeline__zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.timeline__zoom label {
  font-size: 11px;
  color: var(--text-muted);
}
.timeline__zoom input[type="range"] {
  width: 100px;
  accent-color: var(--accent);
}

.timeline__body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}
.timeline__labels {
  width: 140px;
  flex-shrink: 0;
  background: var(--bg-dark);
  border-right: 1px solid var(--border);
  padding-top: 28px;           /* align with ruler */
  overflow-y: auto;
  overflow-x: hidden;
}
.timeline__label {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  user-select: none;
  flex-shrink: 0;
}
.timeline__label.drag-over {
  border-top: 2px solid var(--accent);
}
.timeline__label-name {
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  color: #cdd6e4;
  letter-spacing: 0.3px;
}
.timeline__label-grip {
  cursor: grab;
  opacity: 0.3;
  font-size: 9px;
  line-height: 1;
  padding: 2px;
}
.timeline__label-grip:hover { opacity: 0.7; }
.timeline__label-grip:active { cursor: grabbing; }
.timeline__label-btn {
  background: none;
  border: none;
  padding: 0 1px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1;
  border-radius: 2px;
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease);
}
.timeline__label-arrow {
  font-size: 7px;
  padding: 0;
  opacity: 0.35;
}
.timeline__label-btn:hover { opacity: 1; }
.timeline__label-btn.active { opacity: 1; color: var(--accent); }
.timeline__label-btn.locked { opacity: 1; color: var(--warning); }
.timeline__label.hidden-track .timeline__label-name { text-decoration: line-through; opacity: 0.4; }
.timeline__track.hidden-track { opacity: 0.15; pointer-events: none; }
.timeline__track.locked-track .tl-block { cursor: not-allowed; pointer-events: none; opacity: 0.7; }
.timeline__scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}
.timeline__ruler {
  height: 28px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.timeline__tracks {
  position: relative;
}
.timeline__track {
  height: 28px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.timeline__track:nth-child(odd) { background: rgba(255,255,255,.01); }

/* Timeline blocks (lyrics paragraphs) */
.tl-block {
  position: absolute;
  top: 2px;
  height: 22px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  color: var(--text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: box-shadow var(--dur) var(--ease);
  user-select: none;
}
.tl-block:hover {
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}
.tl-block.selected {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 8px var(--accent-glow);
}
.tl-block.dragging {
  opacity: .85;
  cursor: grabbing;
  z-index: 5;
}

/* Resize handles */
.tl-block__handle {
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}
.tl-block__handle--left { left: 0; }
.tl-block__handle--right { right: 0; }
.tl-block__handle:hover {
  background: rgba(255,255,255,.15);
}

/* Playhead */
.timeline__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  z-index: 10;
  pointer-events: none;
}
.timeline__playhead::before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  width: 16px;
  height: 16px;
  background: var(--danger);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: auto;
  cursor: ew-resize;
}
.timeline__playhead.dragging { z-index: 50; }

/* ── Lyrics editor (overlay / side panel) ──────────────────────────── */
.lyrics-editor {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 8px;
}
.lyrics-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lyrics-editor__header h3 {
  font-size: 13px;
  font-weight: 600;
}
.lyrics-block {
  padding: 8px;
  margin-bottom: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.lyrics-block:hover { border-color: var(--accent-dim); }
.lyrics-block.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.lyrics-block__time {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.lyrics-block__text {
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.lyrics-block textarea {
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-sans);
  resize: vertical;
}
.lyrics-block textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Lyrics block header & actions ─────────────────────────────────── */
.lyrics-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.lyrics-block__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lyrics-block:hover .lyrics-block__actions,
.lyrics-block.active .lyrics-block__actions {
  opacity: 1;
}
.lyrics-block__btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.lyrics-block__btn:hover {
  background: var(--accent-dim);
  color: var(--text-primary);
  border-color: var(--accent);
}
.lyrics-block__btn--danger:hover {
  background: rgba(255,77,106,.2);
  color: var(--danger);
  border-color: var(--danger);
}
/* Re-sync status colors */
.lyrics-block__btn--synced {
  color: #4ade80;
  border-color: #4ade80;
}
.lyrics-block__btn--synced:hover {
  background: rgba(74,222,128,.15);
  color: #4ade80;
  border-color: #4ade80;
}
.lyrics-block__btn--dirty {
  color: #fb923c;
  border-color: #fb923c;
  animation: pulse-dirty 1.5s ease-in-out infinite;
}
.lyrics-block__btn--dirty:hover {
  background: rgba(251,146,60,.2);
  color: #fb923c;
  border-color: #fb923c;
}
@keyframes pulse-dirty {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* Global Re-sync button states */
.btn--synced {
  border-color: #4ade80 !important;
  color: #4ade80 !important;
}
.btn--needs-sync {
  border-color: #fb923c !important;
  color: #fb923c !important;
  animation: pulse-dirty 1.5s ease-in-out infinite;
}

/* ── Inline editor popup (timeline) ───────────────────────────────── */
.inline-editor {
  position: fixed;
  z-index: 50;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 400px;
}
.inline-editor textarea {
  width: 100%;
  min-height: 50px;
  padding: 8px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  resize: vertical;
  margin-bottom: 8px;
}
.inline-editor textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.inline-editor__btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ── Context menu ─────────────────────────────────────────────────── */
.ctx-menu {
  position: fixed;
  z-index: 60;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 0;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
}
.ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.ctx-menu__item:hover {
  background: var(--bg-hover);
}
.ctx-menu__item--danger {
  color: var(--danger);
}
.ctx-menu__item--danger:hover {
  background: rgba(255,77,106,.1);
}
.ctx-menu__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Export progress bar ──────────────────────────────────────────── */
.export-progress {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.export-progress__bar-bg {
  flex: 1;
  height: 8px;
  background: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
}
.export-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 4px;
  transition: width 0.3s ease;
}
.export-progress__text {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 100px;
}

/* ── Success button ───────────────────────────────────────────────── */
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.btn--success {
  background: var(--success);
  color: var(--text-inverse);
}
.btn--success:hover {
  background: #2bc489;
}
.btn--success:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Status bar ────────────────────────────────────────────────────── */
.statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  color: var(--text-muted);
  z-index: 20;
  gap: 16px;
}
.statusbar__item { display: flex; align-items: center; gap: 4px; }
.statusbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* ── Toast / notifications ─────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 60px;
  right: 16px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: 13px;
  z-index: 100;
  animation: slideIn .3s var(--ease);
  max-width: 320px;
}
.toast--success { border-left: 3px solid var(--success); }
.toast--error   { border-left: 3px solid var(--danger); }
.toast--info    { border-left: 3px solid var(--accent); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Alert toast — larger, persistent */
.toast--alert {
  font-size: 15px;
  font-weight: 600;
  padding: 14px 22px;
  max-width: 420px;
  border-width: 3px;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(52, 211, 153, 0.3);
  transition: opacity 0.4s ease;
}

/* Full-screen green flash on completion */
.alert-flash {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  border: 4px solid var(--success);
  border-radius: 4px;
  animation: alertFlash 2s ease-out forwards;
}
@keyframes alertFlash {
  0%   { opacity: 0.8; box-shadow: inset 0 0 60px rgba(52, 211, 153, 0.3); }
  30%  { opacity: 0.4; }
  100% { opacity: 0; }
}

/* ── Loading spinner ───────────────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── View mode switching ───────────────────────────────────────────── */
/* Production mode: hide editor, show production full-width */
#app.view-production #editorSidebar,
#app.view-production #editorPreview,
#app.view-production #editorTimeline,
#app.view-production #karaokeView {
  display: none !important;
}
#app.view-production {
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "topbar"
    "production";
}
#app.view-production .topbar__actions { display: none; }

/* Editor mode: hide production + karaoke, show editor */
#app.view-editor #productionView,
#app.view-editor #karaokeView {
  display: none !important;
}

/* Karaoke mode: hide editor + production, show karaoke full-width */
#app.view-karaoke #editorSidebar,
#app.view-karaoke #editorPreview,
#app.view-karaoke #editorTimeline,
#app.view-karaoke #productionView {
  display: none !important;
}
#app.view-karaoke {
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "topbar"
    "karaoke";
}
#app.view-karaoke .topbar__actions { display: none; }

/* Karaoke view */
.karaoke-view {
  grid-area: karaoke;
  overflow-y: auto;
  background: var(--bg-darkest);
  padding: 24px;
}

/* Production view */
.production-view {
  grid-area: production;
  overflow-y: auto;
  background: var(--bg-darkest);
  padding: 24px;
}
.pv-container {
  max-width: 1100px;
  margin: 0 auto;
}
.pv-header {
  margin-bottom: 20px;
}
.pv-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.pv-header__subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

/* Summary cards row */
.pv-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.pv-summary__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 8px;
}
.pv-summary__num {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  line-height: 1.1;
}
.pv-summary__label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
}

/* Steps grid */
.pv-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pv-step {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease);
}
.pv-step--wide {
  grid-column: span 3;
}
.pv-step:hover {
  border-color: var(--border-light);
}
.pv-step.done {
  border-color: rgba(52, 211, 153, .3);
}
.pv-step.partial {
  border-color: rgba(96, 165, 250, .3);
}
.pv-step.partial .pv-step__num {
  background: var(--primary);
}
.pv-step.running {
  border-color: var(--warning);
  box-shadow: 0 0 12px rgba(245, 158, 11, .1);
}
.wf-song__reviewed, .wf-song__pending {
  font-size: 12px;
  margin: 0 2px;
}
.wf-song__pending {
  opacity: 0.3;
}
.pv-step__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pv-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pv-step.done .pv-step__num {
  background: var(--success);
}
.pv-step.running .pv-step__num {
  background: var(--warning);
  animation: pulse 1.5s infinite;
}
.pv-step__title {
  font-size: 13px;
  font-weight: 600;
}
.pv-step__count {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.pv-step__desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.5;
}
.pv-step__desc code {
  background: var(--bg-dark);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.pv-step__actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.pv-step__body {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 6px;
}

/* Progress bar (production view) */
.pv-step__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.pv-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-dark);
  border-radius: 4px;
  overflow: hidden;
}
.pv-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 4px;
  width: 0%;
  transition: width .3s ease;
}
.pv-progress-text {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  min-width: 50px;
  text-align: right;
}
/* Karaoke cards vertical spacing */
.kv-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Export mode chip group */
.export-mode-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 10px;
}
.export-mode-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  margin-right: 2px;
}
.export-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: 1.5px solid var(--border-light);
  background: transparent;
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.export-mode-chip:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}
.export-mode-chip--active {
  border-color: var(--accent);
  background: rgba(78, 140, 255, 0.12);
  color: var(--accent);
}
.export-mode-chip__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--border-light);
  font-size: 9px;
  font-weight: 700;
  transition: all var(--dur) var(--ease);
}
.export-mode-chip--active .export-mode-chip__check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pv-export-timer {
  font-family: 'Orbitron', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
  min-width: 130px;
  text-align: right;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

/* Log area for streaming events */
.pv-step__log {
  max-height: 150px;
  overflow-y: auto;
  font-size: 11px;
  font-family: var(--font-mono);
  line-height: 1.6;
  margin: 4px 0;
}
.pv-log-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: var(--text-secondary);
}
.pv-log-entry--done { color: var(--success); }
.pv-log-entry--error { color: var(--danger); }
.pv-log-entry--active { color: var(--warning); }

/* Song list in production */
.pv-step__songlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  margin: 4px 0;
}

/* Thumbnail grid */
.pv-step__thumbgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

/* ── Old workflow sidebar (kept for compat) ───────────────────────── */
/* ── Workflow / Production tab ─────────────────────────────────────── */
.wf-summary {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.wf-summary__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 6px 2px;
}
.wf-summary__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}
.wf-summary__label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

.wf-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  margin-bottom: 8px;
}
.wf-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.wf-card__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wf-card.done .wf-card__num {
  background: var(--success);
}
.wf-card.running .wf-card__num {
  background: var(--warning);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.wf-card__title {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}
.wf-card__status {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.wf-card__desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.wf-card__desc code {
  background: var(--bg-dark);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
}
.wf-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.wf-card__preview {
  max-height: 150px;
  overflow-y: auto;
  font-size: 11px;
  margin-bottom: 4px;
}
.wf-card__preview .wf-match {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.wf-card__preview .wf-match__icon { font-size: 12px; }
.wf-card__preview .wf-match__name {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-card__preview .wf-match__status {
  font-size: 10px;
  color: var(--text-muted);
}

/* Progress bar in workflow cards */
.wf-card__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.wf-card__progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-dark);
  border-radius: 3px;
  overflow: hidden;
}
.wf-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 3px;
  width: 0%;
  transition: width .3s ease;
}
.wf-card__progress-text {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  min-width: 40px;
  text-align: right;
}

/* Song list in workflow cards */
.wf-card__songlist {
  max-height: 200px;
  overflow-y: auto;
  margin: 4px 0;
}
.wf-song {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.wf-song:hover {
  background: var(--bg-hover);
}
.wf-song__check {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.wf-song__check.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wf-song__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-song__badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 600;
}
.wf-song__badge--synced {
  background: rgba(78,140,255,.15);
  color: var(--accent);
}
.wf-song__badge--tracks {
  background: rgba(52,211,153,.15);
  color: var(--success);
}
.wf-song__badge--exported {
  background: rgba(245,158,11,.15);
  color: var(--warning);
}
.wf-song__badge--pending {
  background: rgba(90,101,120,.2);
  color: var(--text-muted);
}
.wf-song__badge--karaoke-mp3 {
  background: rgba(168,85,247,.15);
  color: #a855f7;
}
.wf-song__badge--video-karaoke {
  background: rgba(236,72,153,.15);
  color: #ec4899;
}
.wf-song__badges {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.wf-song__btn-open {
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.wf-song__btn-open:hover {
  background: var(--accent-dim);
  color: #fff;
  border-color: var(--accent);
}
.wf-song__btn-approve {
  font-size: 9px;
  padding: 2px 8px;
  border: 1px solid #238636;
  border-radius: var(--radius-sm);
  background: #238636;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.wf-song__btn-approve:hover { background: #2ea043; }
.wf-song__btn-approve:disabled { opacity: 0.5; cursor: not-allowed; }
.wf-song__badge--approved {
  background: #23863622; color: #3fb950; border-color: #23863666;
}
.wf-song__badge--review {
  background: #d2992222; color: #d29922; border-color: #d2992266;
}
.topbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
}
.topbar__user-name { font-weight: 500; color: var(--text-primary); }
.topbar__user-role {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--accent);
}
.topbar__logout {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.topbar__logout:hover { border-color: #f85149; color: #f85149; }

/* Admin panel */
.admin-panel {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.admin-panel__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.admin-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 2px;
}
.admin-tab {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--dur) var(--ease);
}
.admin-tab.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.admin-tab:hover:not(.active) { color: var(--text-primary); }
.admin-content { display: none; }
.admin-content.active { display: block; }
.admin-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.admin-input {
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.admin-input:focus { border-color: var(--accent); }
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}
.admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.admin-row__name { font-weight: 500; flex: 1; }
.admin-row__role {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--accent);
}
.admin-row__role--reviewer { background: #388bfd22; color: #388bfd; }
.admin-row__status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
}
.admin-row__status--queued { background: #d2992222; color: #d29922; }
.admin-row__status--rendering { background: #388bfd22; color: #388bfd; }
.admin-row__status--done { background: #23863622; color: #3fb950; }
.admin-row__status--error { background: #f8514922; color: #f85149; }
.admin-row__btn {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.admin-row__btn:hover { border-color: #f85149; color: #f85149; }
.admin-row__btn--retry:hover { border-color: var(--accent); color: var(--accent); }
.admin-assign-actions { display: flex; gap: 4px; }

/* Thumbnail grid */
.wf-card__thumbgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  margin: 6px 0;
}
.wf-thumb {
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}
.wf-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.wf-thumb__label {
  font-size: 9px;
  padding: 2px 4px;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Responsive tweaks ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "preview"
      "timeline";
  }
  .sidebar { display: none; }
}