/* ==========================================================================
   BeeTales — Industrial Circuit Theme
   Palette derived from beetales-logo-v2.png:
     · Deep forest green  : #040c06 / #081209
     · Circuit green      : #6ec832 / #4a8a28  (logo border glow)
     · Helmet gold/amber  : #f5a623 / #c87d1a  (constructor helmet)
     · Cream/beige text   : #f2e8c6 / #e8ddb0  (logo lettering)
     · Frog green mid     : #4caf3e            (frog body)
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Backgrounds */
  --bg:           #040c06;
  --panel:        #081209;
  --panel-soft:   #0d1e10;
  --panel-strong: #050e07;

  /* Typography */
  --text:         #e8ddb0;   /* beige-cream — matches logo lettering */
  --text-strong:  #f2e8c6;   /* brighter cream */
  --muted:        #7a9a68;   /* muted forest green */

  /* Borders */
  --line:         #1a3620;
  --line-strong:  #2a5030;

  /* Circuit green accent (logo border glow) */
  --accent:       #4a8a28;
  --accent-strong:#6ec832;
  --accent-soft:  #2d5c1a;
  --accent-ink:   #030e04;   /* near-black text on green buttons */

  /* Helmet gold accent */
  --amber:        #c87d1a;
  --amber-strong: #f5a623;

  /* Functional */
  --danger:  #e05a45;
  --success: #6ec832;
  --shadow:  0 28px 80px rgba(0, 6, 1, 0.68);
}

/* --------------------------------------------------------------------------
   Base — html & body
   -------------------------------------------------------------------------- */

html {
  background: #020804;
}

body {
  isolation: isolate;
  background-color: #040c06;
  background-image:
    /* dark overlay so the UI stays readable over the detailed image */
    linear-gradient(
      180deg,
      rgba(4, 12, 6, 0.72) 0%,
      rgba(4, 12, 6, 0.52) 40%,
      rgba(4, 12, 6, 0.64) 80%,
      rgba(4, 12, 6, 0.88) 100%
    ),
    /* left-side vignette to anchor left panel */
    linear-gradient(
      90deg,
      rgba(4, 12, 6, 0.48) 0%,
      transparent 36%,
      transparent 64%,
      rgba(4, 12, 6, 0.36) 100%
    ),
    url("assets/beetales-bg-industrial.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
}

/* Animated circuit-spark overlay — green nodes + amber sparks */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
  background-image:
    /* bright circuit-green dots */
    radial-gradient(circle, rgba(110, 200, 50, 0.9)  0 1px, transparent 2px),
    radial-gradient(circle, rgba(76,  175, 62, 0.75) 0 1px, transparent 2.2px),
    /* helmet-gold spark dots */
    radial-gradient(circle, rgba(245, 166, 35, 0.7)  0 1px, transparent 2px),
    radial-gradient(circle, rgba(200, 125, 26, 0.55) 0 1px, transparent 1.8px);
  background-size:
    157px 179px,
    241px 211px,
    313px 267px,
    197px 243px;
  background-position:
    18px 22px,
    79px 53px,
    141px 97px,
    37px 133px;
  animation: beetales-circuit-sparks 28s linear infinite;
}

@keyframes beetales-circuit-sparks {
  0% {
    background-position: 18px 22px, 79px 53px, 141px 97px, 37px 133px;
    opacity: 0.16;
  }
  40% {
    opacity: 0.26;
  }
  70% {
    opacity: 0.18;
  }
  100% {
    background-position: 64px -68px, 17px -78px, 198px -33px, 92px -54px;
    opacity: 0.20;
  }
}

.app-shell {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Brand logo & hero
   -------------------------------------------------------------------------- */

.brand-logo {
  display: block;
  width: min(100%, 390px);
  height: auto;
  filter:
    drop-shadow(0 8px 20px rgba(0, 6, 2, 0.65))
    drop-shadow(0 0 32px rgba(110, 200, 50, 0.18));
}

/* Product heading card overlaid on the hero image */
.product-heading {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 22px;
  width: min(78%, 340px);
  margin: 0;
  padding: 18px 20px;
  border-left: 2px solid var(--amber-strong);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(
    90deg,
    rgba(3, 10, 4, 0.94),
    rgba(4, 12, 6, 0.66) 72%,
    transparent
  );
  text-shadow: 0 2px 14px rgba(0, 6, 2, 0.96);
}

.product-heading span {
  display: block;
  margin-bottom: 8px;
  color: var(--amber-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-heading h1,
legend,
.results-heading h2,
.preview-heading h2 {
  color: var(--text-strong);
}

/* Hero visual frame */
.swamp-hero {
  width: min(100%, 520px);
  margin-top: 24px;
  border-color: rgba(46, 80, 48, 0.65);
  background: var(--panel-strong);
  box-shadow:
    0 24px 70px rgba(0, 8, 2, 0.52),
    inset 0 1px rgba(110, 200, 50, 0.06);
}

.swamp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 8, 3, 0.18),
    transparent 38%,
    rgba(2, 8, 3, 0.28)
  );
  pointer-events: none;
}

.swamp-hero img {
  aspect-ratio: 1717 / 916;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Typography & utility text colours
   -------------------------------------------------------------------------- */

.lead,
.drop-hint,
.file-size,
#status-message,
.setting-help,
.result-card span,
.preview-heading > span,
.results-hint {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Format badge strip
   -------------------------------------------------------------------------- */

.format-strip span {
  border-color: var(--line-strong);
  background: rgba(14, 30, 16, 0.72);
  color: var(--text-strong);
  text-shadow: 0 0 8px rgba(110, 200, 50, 0.2);
}

/* --------------------------------------------------------------------------
   Privacy note
   -------------------------------------------------------------------------- */

.privacy-note {
  border-color: rgba(74, 138, 40, 0.35);
  background:
    radial-gradient(circle at 9% 22%, rgba(110, 200, 50, 0.09), transparent 46%),
    linear-gradient(135deg, rgba(13, 30, 16, 0.96), rgba(5, 14, 7, 0.98));
  color: var(--text);
  box-shadow:
    0 18px 42px rgba(0, 8, 2, 0.38),
    inset 0 1px rgba(110, 200, 50, 0.05);
}

.privacy-mascot {
  width: 118px;
  filter: drop-shadow(0 12px 20px rgba(0, 8, 2, 0.55));
}

.privacy-note strong { color: var(--text-strong); }
.privacy-note p      { color: var(--muted); }

.privacy-note li {
  border-color: rgba(74, 138, 40, 0.26);
  background: rgba(74, 138, 40, 0.09);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Sponsor button
   -------------------------------------------------------------------------- */

.sponsor-button {
  color: #ffe2a5;
  border-color: rgba(200, 125, 26, 0.44);
  background: rgba(120, 90, 20, 0.1);
}

.sponsor-button span { color: var(--amber-strong); }

.sponsor-button:hover {
  color: #fff3cc;
  border-color: rgba(245, 166, 35, 0.68);
  background: rgba(200, 125, 26, 0.18);
}

/* --------------------------------------------------------------------------
   Converter panel  — the main form card
   -------------------------------------------------------------------------- */

.converter-panel {
  border-color: rgba(42, 80, 48, 0.65);
  background:
    /* subtle amber top glow — nod to the logo's golden helmet */
    linear-gradient(
      180deg,
      rgba(245, 166, 35, 0.04) 0%,
      rgba(110, 200, 50, 0.03) 8%,
      transparent 24%
    ),
    var(--panel);
  box-shadow:
    var(--shadow),
    inset 0 1px rgba(110, 200, 50, 0.06),
    /* left circuit-line accent */
    inset 3px 0 0 rgba(110, 200, 50, 0.12);
}

/* --------------------------------------------------------------------------
   Drop zone
   -------------------------------------------------------------------------- */

.drop-zone {
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(74, 138, 40, 0.06), transparent 48%),
    var(--panel-strong);
}

.drop-zone:hover,
.drop-zone.is-dragging {
  border-color: rgba(110, 200, 50, 0.55);
  background:
    linear-gradient(180deg, rgba(74, 138, 40, 0.12), transparent 56%),
    var(--panel-strong);
  box-shadow:
    0 0 0 4px rgba(74, 138, 40, 0.13),
    0 0 24px rgba(110, 200, 50, 0.08);
}

.drop-icon {
  border-color: rgba(110, 200, 50, 0.55);
  background: rgba(74, 138, 40, 0.13);
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   File list & cards
   -------------------------------------------------------------------------- */

.drop-title,
.file-name,
.file-list strong,
.result-card strong {
  color: var(--text-strong);
}

.file-card,
.preview-panel {
  border-color: var(--line);
  background: var(--panel-soft);
}

.file-list { border-color: var(--line); }

.file-list li {
  background: rgba(110, 200, 50, 0.03);
}

/* Status state text (Loading, Converting, Completed) */
.file-list em { color: var(--amber-strong); }

.clear-button,
.file-list button { color: var(--muted); }

.file-label { color: var(--accent-strong); }

/* --------------------------------------------------------------------------
   Video preview & crop
   -------------------------------------------------------------------------- */

.crop-container {
  position: relative;
  border-radius: 6px;
  background: #020804;
  overflow: hidden;
}

.crop-box    { border-color: var(--accent-strong); }
.crop-handle { background:   var(--accent-strong); }

.crop-action-button {
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--muted);
}

.crop-action-button:hover {
  border-color: var(--accent-strong);
  background: rgba(74, 138, 40, 0.1);
  color: var(--text);
}

.preview-meta-bar .meta-tag {
  background: rgba(110, 200, 50, 0.09);
  color: var(--muted);
}

.frame-nav-button {
  border-color: rgba(232, 221, 176, 0.18);
  background: rgba(3, 9, 4, 0.72);
  color: var(--muted);
}

.frame-nav-button:hover {
  background: rgba(3, 9, 4, 0.9);
  color: var(--text);
}

.timeline-canvas,
.waveform-canvas {
  background: rgba(3, 9, 4, 0.5);
  border: 1px solid rgba(42, 80, 48, 0.3);
}

/* --------------------------------------------------------------------------
   Settings controls
   -------------------------------------------------------------------------- */

.setting-select,
.time-grid input,
.segmented-control,
.mode-control span {
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--text);
}

.setting-select:focus,
.time-grid input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px rgba(74, 138, 40, 0.15);
}

.time-grid label > span,
.mode-control small,
.segmented-control span {
  color: var(--muted);
}

.mode-control strong { color: var(--text-strong); }

.mode-control span:hover,
.segmented-control span:hover {
  border-color: rgba(110, 200, 50, 0.44);
  background: rgba(74, 138, 40, 0.07);
  color: var(--text-strong);
}

/* Active / checked state — bright circuit-green fill */
.mode-control input:checked + span,
.segmented-control input:checked + span {
  color: var(--accent-ink);
  border-color: rgba(110, 200, 50, 0.7);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  box-shadow:
    0 6px 20px rgba(28, 72, 20, 0.38),
    0 0 12px rgba(110, 200, 50, 0.18);
}

.mode-control input:checked + span strong,
.mode-control input:checked + span small {
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Notes / hints
   -------------------------------------------------------------------------- */

.mp4-note,
.gif-note,
.karaoke-note {
  border-color: rgba(74, 138, 40, 0.28);
  background: rgba(74, 138, 40, 0.07);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Buttons — primary action (circuit green)
   -------------------------------------------------------------------------- */

.primary-button {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  box-shadow:
    0 14px 32px rgba(20, 56, 16, 0.42),
    0 0 18px rgba(110, 200, 50, 0.14);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.primary-button:hover {
  background: linear-gradient(180deg, #82d43e, #55962e);
  box-shadow:
    0 18px 38px rgba(26, 68, 20, 0.48),
    0 0 28px rgba(110, 200, 50, 0.22);
}

/* --------------------------------------------------------------------------
   Buttons — download (helmet amber/gold)
   -------------------------------------------------------------------------- */

.download-button,
.open-button,
.result-card a {
  color: #180f02;
  background: linear-gradient(180deg, var(--amber-strong), var(--amber));
  box-shadow: 0 8px 20px rgba(100, 52, 4, 0.3);
}

.download-button:hover,
.open-button:hover,
.result-card a:hover {
  color: #180f02;
  background: linear-gradient(180deg, #ffc040, #d98820);
  box-shadow: 0 10px 26px rgba(120, 64, 6, 0.38);
}

/* Download all — ghost style */
.download-all-button {
  color: #ffe2a5;
  border-color: rgba(200, 125, 26, 0.4);
  background: rgba(200, 125, 26, 0.09);
}

.download-all-button:hover {
  background: rgba(200, 125, 26, 0.17);
  border-color: rgba(245, 166, 35, 0.6);
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.results-tools > span { color: var(--success); }

.result-card {
  border-color: rgba(110, 200, 50, 0.2);
  background: rgba(74, 138, 40, 0.055);
}

/* --------------------------------------------------------------------------
   Progress bar
   -------------------------------------------------------------------------- */

.progress-track {
  border-color: rgba(232, 221, 176, 0.05);
  background: #020804;
}

.progress-bar {
  background: linear-gradient(
    90deg,
    var(--accent)        0%,
    var(--accent-strong) 55%,
    var(--amber-strong)  100%
  );
  box-shadow: 0 0 10px rgba(110, 200, 50, 0.28);
}

/* --------------------------------------------------------------------------
   Floating reset button
   -------------------------------------------------------------------------- */

.reset-floating-button {
  border-color: rgba(74, 138, 40, 0.5);
  background: rgba(5, 14, 7, 0.95);
  color: var(--text-strong);
  box-shadow: 0 12px 32px rgba(0, 8, 2, 0.52);
}

.reset-floating-button span  { color: var(--amber-strong); }

.reset-floating-button:hover {
  border-color: var(--accent-strong);
  background: rgba(13, 30, 16, 0.98);
  box-shadow:
    0 14px 36px rgba(0, 8, 2, 0.58),
    0 0 12px rgba(110, 200, 50, 0.1);
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-color: rgba(42, 80, 48, 0.44);
  color: #5a7a52;
}

.site-footer a       { color: var(--muted); }
.site-footer a:hover { color: var(--text-strong); }

/* --------------------------------------------------------------------------
   Focus rings — circuit green
   -------------------------------------------------------------------------- */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(110, 200, 50, 0.45);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  body {
    background-position: 60% center;
    background-attachment: scroll;
  }

  .brand-logo {
    width: min(100%, 340px);
  }

  .product-heading {
    left: 14px;
    top: 14px;
    width: min(86%, 300px);
    padding: 13px 15px;
  }

  .product-heading h1 {
    font-size: clamp(1.6rem, 9vw, 2.4rem);
  }

  .privacy-mascot {
    width: 82px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Sprint 1 — Presets bar, Save Frame, & Loudness Toggle Theme
   -------------------------------------------------------------------------- */

.presets-bar {
  border-color: rgba(42, 80, 48, 0.65);
  background: var(--panel-strong);
}

.preset-pill {
  border-color: rgba(74, 138, 40, 0.42);
  background: rgba(74, 138, 40, 0.09);
}

.preset-pill:hover {
  border-color: var(--accent-strong);
  background: rgba(74, 138, 40, 0.18);
}

.preset-apply {
  color: var(--text-strong);
}

.preset-delete {
  border-left-color: rgba(74, 138, 40, 0.35);
  color: var(--muted);
}

.preset-delete:hover {
  color: var(--danger);
}

.save-preset-button {
  border-color: rgba(74, 138, 40, 0.45);
  color: var(--muted);
}

.save-preset-button:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.08);
}

.preset-name-input {
  border-color: rgba(74, 138, 40, 0.5);
  background: var(--panel-soft);
  color: var(--text-strong);
}

.preset-inline-button {
  border-color: rgba(74, 138, 40, 0.5);
  background: var(--panel-soft);
}

.save-frame-button {
  border-color: rgba(74, 138, 40, 0.42);
  background: var(--panel-strong);
  color: var(--text-strong);
}

.save-frame-button:hover {
  border-color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.1);
  color: var(--accent-strong);
  box-shadow: 0 0 14px rgba(110, 200, 50, 0.15);
}

/* --------------------------------------------------------------------------
   Sprint 2 — Share config & Drag/Drop queue Theme
   -------------------------------------------------------------------------- */

.share-config-button {
  border-color: rgba(74, 138, 40, 0.45);
  color: var(--muted);
}

.share-config-button:hover {
  border-color: var(--amber-strong);
  color: var(--amber-strong);
  background: rgba(245, 166, 35, 0.08);
}

.share-config-button.is-copied {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.18);
  box-shadow: 0 0 12px rgba(110, 200, 50, 0.28);
}

.file-list li.drag-over {
  border-top-color: var(--amber-strong);
  background: rgba(245, 166, 35, 0.15);
  box-shadow: 0 -4px 14px rgba(245, 166, 35, 0.25);
}

/* --------------------------------------------------------------------------
   Sprint 3 — Aux Files & History Theme
   -------------------------------------------------------------------------- */

.aux-file-button {
  border-color: rgba(74, 138, 40, 0.45);
  background: rgba(74, 138, 40, 0.06);
  color: var(--text);
}

.aux-file-button:hover {
  border-color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.12);
  color: var(--text-strong);
}

.aux-file-status {
  border-color: rgba(74, 138, 40, 0.5);
  background: rgba(110, 200, 50, 0.12);
  color: var(--text-strong);
}

.history-floating-button {
  border-color: rgba(74, 138, 40, 0.5);
  background: rgba(5, 14, 7, 0.95);
  color: var(--text-strong);
  box-shadow: 0 12px 32px rgba(0, 8, 2, 0.52);
}

.history-floating-button:hover {
  border-color: var(--amber-strong);
  background: rgba(13, 30, 16, 0.98);
  box-shadow: 0 14px 36px rgba(0, 8, 2, 0.58), 0 0 12px rgba(245, 166, 35, 0.15);
}

.history-dialog {
  border-color: rgba(74, 138, 40, 0.6);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 8, 2, 0.8);
}

.history-header,
.history-footer {
  border-color: rgba(42, 80, 48, 0.6);
  background: var(--panel-strong);
}

.history-item {
  border-color: rgba(42, 80, 48, 0.5);
  background: rgba(13, 30, 16, 0.6);
}

.savings-badge {
  border-color: rgba(110, 200, 50, 0.45);
  background: rgba(110, 200, 50, 0.18);
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   Sprint 4 — Language Selector & Guide Modal Theme
   -------------------------------------------------------------------------- */

.user-utilities-bar {
  border-color: rgba(74, 138, 40, 0.4);
  background:
    radial-gradient(circle at 10% 20%, rgba(110, 200, 50, 0.08), transparent 45%),
    rgba(13, 30, 16, 0.95);
}

.language-select {
  border-color: rgba(74, 138, 40, 0.5);
  background: var(--panel-soft);
  color: var(--text-strong);
}

.guide-toggle-button {
  border-color: rgba(245, 166, 35, 0.4);
  background: rgba(245, 166, 35, 0.08);
  color: var(--amber-strong);
}

.guide-toggle-button:hover {
  border-color: var(--amber-strong);
  background: rgba(245, 166, 35, 0.16);
  box-shadow: 0 0 12px rgba(245, 166, 35, 0.2);
}

.guide-dialog {
  border-color: rgba(74, 138, 40, 0.65);
  background: var(--panel);
  box-shadow: 0 26px 80px rgba(0, 8, 2, 0.85);
}

.guide-header,
.guide-footer {
  border-color: rgba(42, 80, 48, 0.65);
  background: var(--panel-strong);
}

.guide-card,
.guide-item-block,
.guide-feature-list li {
  border-color: rgba(42, 80, 48, 0.55);
  background: rgba(13, 30, 16, 0.65);
}

.guide-tab-button.is-active {
  border-color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.15);
  color: var(--accent-strong);
}

/* ==========================================================================
   Sprint 5 — Karaoke & Dynamic Subtitles Studio Theme
   ========================================================================== */

.karaoke-settings {
  display: grid;
  gap: 18px;
}

.karaoke-input-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.karaoke-tabs-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(42, 80, 48, 0.55);
  padding-bottom: 10px;
}

.karaoke-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.karaoke-tab-btn:hover {
  color: var(--text-strong);
  background: rgba(110, 200, 50, 0.08);
}

.karaoke-tab-btn.is-active {
  background: rgba(110, 200, 50, 0.16);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.karaoke-lyrics-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-strong);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 12px;
  resize: vertical;
  min-height: 90px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.karaoke-lyrics-textarea:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 12px rgba(110, 200, 50, 0.25);
}

.karaoke-paste-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.karaoke-words-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.karaoke-auto-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #00FF66 0%, #00B843 100%);
  border: none;
  color: #040C06;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.35);
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.karaoke-auto-sync-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.6);
}

.karaoke-auto-sync-btn:active {
  transform: translateY(1px) scale(0.98);
}

.karaoke-prepare-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  color: var(--text-strong);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.karaoke-prepare-btn:hover {
  border-color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.14);
  color: var(--accent-strong);
}

/* AI Auto-Sync Banner & Progress */
.karaoke-ai-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(14, 38, 22, 0.65);
  border: 1px solid rgba(0, 255, 102, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: #cfebd2;
}

.karaoke-ai-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.karaoke-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 255, 102, 0.15);
  border: 1px solid rgba(0, 255, 102, 0.6);
  color: #00ff66;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.karaoke-ai-banner p {
  margin: 0;
  line-height: 1.45;
  color: #a8d5af;
}

.karaoke-ai-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.karaoke-ai-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6EC832, #00FF66);
  transition: width 0.2s ease;
}

/* Sincronizador Tap-to-Sync */
.karaoke-sync-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.karaoke-sync-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.35);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--amber-strong);
}

.karaoke-words-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 140px;
  overflow-y: auto;
}

.karaoke-empty-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

.word-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.word-chip:hover {
  border-color: var(--line-strong);
  color: var(--text-strong);
}

.word-chip.is-active {
  background: rgba(245, 166, 35, 0.22);
  border-color: var(--amber-strong);
  color: #FFE600;
  transform: scale(1.06);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.35);
}

.word-chip.is-synced {
  background: rgba(110, 200, 50, 0.15);
  border-color: rgba(110, 200, 50, 0.6);
  color: var(--accent-strong);
}

.word-chip .chip-time {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.75;
}

.karaoke-sync-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.karaoke-tap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border: none;
  color: var(--accent-ink);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(110, 200, 50, 0.35);
  transition: transform 0.1s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.karaoke-tap-btn:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(110, 200, 50, 0.5);
}

.karaoke-tap-btn:not(:disabled):active {
  transform: translateY(1px) scale(0.98);
}

.karaoke-tap-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.tap-key-badge {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.karaoke-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.karaoke-ctrl-btn:not(:disabled):hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
}

.karaoke-ctrl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.karaoke-offset-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 6px;
}

.karaoke-offset-label {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 600;
}

.karaoke-offset-btn {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--text-strong);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.karaoke-offset-btn:not(:disabled):hover {
  border-color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.2);
  color: var(--accent-strong);
}

.karaoke-offset-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.karaoke-sync-stat {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.karaoke-sync-stat strong {
  color: var(--text-strong);
}

/* Style Presets */
.karaoke-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.karaoke-preset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.karaoke-preset-card:hover {
  border-color: var(--line-strong);
  background: var(--panel-soft);
}

.karaoke-preset-card.is-active {
  border-color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.1);
  box-shadow: 0 0 12px rgba(110, 200, 50, 0.2);
}

.preset-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  padding: 2px 5px;
  border-radius: 3px;
  margin-bottom: 6px;
}

.karaoke-preset-card.is-active .preset-badge {
  background: var(--accent-strong);
  color: var(--accent-ink);
}

.karaoke-preset-card strong {
  font-size: 0.85rem;
  color: var(--text-strong);
  margin-bottom: 2px;
}

.karaoke-preset-card small {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Custom Controls */
.karaoke-custom-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.custom-control-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.custom-control-item label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.karaoke-color-picker {
  height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
}

.custom-control-checkbox {
  justify-content: flex-end;
}

/* Export Buttons */
.karaoke-export-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.karaoke-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  color: var(--text-strong);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.karaoke-export-btn:hover {
  border-color: var(--accent-strong);
  background: rgba(110, 200, 50, 0.15);
  color: var(--accent-strong);
}

/* ==========================================================================
   Dynamic Subtitle Overlay (Live Playback Video Player)
   ========================================================================== */

.dynamic-subtitle-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
  box-sizing: border-box;
}

.dynamic-subtitle-overlay.pos-top {
  align-items: flex-start;
  padding-top: 32px;
}

.dynamic-subtitle-overlay.pos-middle {
  align-items: center;
}

.dynamic-subtitle-overlay.pos-bottom {
  align-items: flex-end;
  padding-bottom: 32px;
}

.dynamic-subtitle-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  text-align: center;
  max-width: 90%;
  pointer-events: none;
}

.sub-word {
  display: inline-block;
  font-weight: 900;
  line-height: 1.1;
  transition: transform 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.12s ease;
  will-change: transform, color;
}

.sub-word.active {
  transform: scale(1.18);
  z-index: 2;
  animation: subPop 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes subPop {
  0% {
    transform: scale(0.9);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.18);
    opacity: 1;
  }
}

/* Audio Visualizer Canvas for Audio-Only Playback */
.audio-visualizer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: radial-gradient(circle at center, #0a1f10 0%, #030804 100%);
  z-index: 1;
  border-radius: inherit;
}