#splash { display: none; }
    .splash-on #splash {
      display: flex; align-items: center; justify-content: center;
      position: fixed; inset: 0; z-index: 9999;
      background: var(--color-bg, #1E1E1E);
      transition: opacity .45s var(--ease-out, ease);
    }
    #splash.is-done { opacity: 0; pointer-events: none; }
    .splash__reel {
      width: 88px; height: 88px; transform-origin: 50% 50%;
      animation: splashspin 1.05s linear infinite;
    }
    .splash__reel circle { fill: none; stroke: var(--acc, #00FF41); }
    .splash__reel .splash__hub { fill: var(--acc, #00FF41); stroke: none; }
    @keyframes splashspin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .splash__reel { animation-duration: 2.6s; } }

/* ===== tokens.css ===== */
    /* =============================================================================
       DSK•LoFi — tokens.css
       Adapted from PARKOUR design system (colors_and_type.css).
       100% local: font stacks resolved to system faces (no CDN allowed).
       Accent remapped to neon green ("Matrix" brief) — green is the DS signal
       color for "go / target", which maps to the app's processed-signal accent.
       ========================================================================== */

    :root {
      /* ---- NEUTRALS — asphalt ramp (PARKOUR) ---- */
      --ink-950: #161616;
      --ink-900: #1E1E1E;
      --ink-800: #2B2B2B;
      --ink-700: #363636;
      --ink-600: #444444;
      --ink-500: #555555;
      --ink-400: #6E6E6E;
      --ink-300: #9A9A9A;
      --ink-100: #D8D8D8;
      --paper:   #FFFFFF;

      /* ---- NEON ACCENTS ---- */
      --neon-green:  #00FF41;   /* matrix phosphor */
      --neon-cyan:   #4ECDC4;
      --neon-amber:  #FFE66D;
      --neon-red:    #FF3B30;

      --glow-green: 0 0 12px rgba(0, 255, 65, 0.45);
      --glow-cyan:  0 0 12px rgba(78, 205, 196, 0.55);
      --glow-amber: 0 0 12px rgba(255, 230, 109, 0.55);
      --glow-red:   0 0 14px rgba(255, 59, 48, 0.60);

      /* ---- SEMANTIC ---- */
      --color-bg:             var(--ink-900);
      --color-surface:        var(--ink-800);
      --color-surface-raised: var(--ink-700);
      --color-playfield:      var(--ink-600);

      --color-text:        var(--paper);
      --color-text-muted:  var(--ink-300);
      --color-text-faint:  var(--ink-400);

      --color-accent:  var(--neon-green);
      --color-success: var(--neon-green);
      --color-danger:  var(--neon-red);
      --color-warning: var(--neon-amber);

      --color-border:        #3E443E;
      --color-border-strong: var(--ink-300);

      /* app-level accent aliases (theme-swappable in one place) */
      --acc:        #00FF41;                 /* = --neon-green (literal para leerlo desde JS) */
      --acc-ink:    var(--ink-950);          /* text on accent fill   */
      --acc-dim:    rgba(0, 255, 65, 0.14);  /* accent wash           */
      --acc-faint:  rgba(0, 255, 65, 0.07);
      --glow-acc:   var(--glow-green);
      --scanline:   rgba(0, 255, 65, 0.03);
      --scrim:      rgba(10, 12, 10, 0.78);
      --track-bg:   var(--ink-950);
      --viz-bg:     #0C0F0C;

      /* ---- TYPE — local stacks only (no webfont CDN) ---- */
      --font-display: "Courier New", ui-monospace, "Cascadia Mono", Menlo, monospace;
      --font-ui:      "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
      --font-mono:    ui-monospace, "Courier New", SFMono-Regular, Menlo, monospace;

      --fw-light: 300;
      --fw-reg:   400;
      --fw-med:   500;
      --fw-semi:  600;
      --fw-bold:  700;

      --fs-logo:  clamp(22px, 5.4vw, 30px);
      --fs-h1:    clamp(22px, 4.4vw, 34px);
      --fs-h2:    clamp(18px, 3.2vw, 24px);
      --fs-h3:    16px;
      --fs-body:  15px;
      --fs-small: 13px;
      --fs-micro: 11px;

      --fs-hud-stat:  clamp(20px, 5vw, 30px);
      --fs-hud-label: 11px;

      --lh-tight: 1.05;
      --lh-snug:  1.25;
      --lh-body:  1.5;

      --ls-display: 0.5px;
      --ls-label:   1.5px;
      --ls-body:    0px;

      /* ---- SPACING — 4px grid ---- */
      --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
      --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
      --space-12: 48px; --space-16: 64px;
      --space-touch: 44px;

      /* ---- RADII ---- */
      --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
      --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;

      /* ---- ELEVATION ---- */
      --shadow-1: 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.45);
      --shadow-2: 0 2px 0 rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.55);
      --shadow-3: 0 4px 0 rgba(0,0,0,0.5), 0 14px 40px rgba(0,0,0,0.65);
      --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.06);

      --btn-edge:       0 4px 0 rgba(0,0,0,0.55);
      --btn-edge-press: 0 1px 0 rgba(0,0,0,0.55);

      /* ---- MOTION ---- */
      --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
      --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    }

    /* =============================================================================
       LIGHT THEME — same skeleton, paper surfaces, darker phosphor green
       for AA contrast. Toggled via <html data-theme="light">.
       ========================================================================== */
    html[data-theme="light"],
    html[data-theme="light-blue"],
    html[data-theme="light-rose"],
    html[data-theme="light-violet"] {
      --color-bg:             #E8EBE8;
      --color-surface:        #F2F4F2;
      --color-surface-raised: #FFFFFF;
      --color-playfield:      #DDE2DD;

      --color-text:        #131713;
      --color-text-muted:  #586058;
      --color-text-faint:  #8A948A;

      --color-border:        #C5CDC5;
      --color-border-strong: #9AA49A;

      --acc:       #00871F;
      --acc-ink:   #FFFFFF;
      --acc-dim:   rgba(0, 135, 31, 0.12);
      --acc-faint: rgba(0, 135, 31, 0.06);
      --glow-acc:  0 0 10px rgba(0, 135, 31, 0.30);
      --scanline:  rgba(0, 100, 25, 0.025);
      --scrim:     rgba(20, 26, 20, 0.45);
      --track-bg:  #CFD6CF;
      --viz-bg:    #10140F;

      --neon-red:  #D02620;
      --glow-red:  0 0 12px rgba(208, 38, 32, 0.35);

      --shadow-1: 0 1px 2px rgba(20,30,20,0.10), 0 2px 6px rgba(20,30,20,0.08);
      --shadow-2: 0 2px 4px rgba(20,30,20,0.10), 0 6px 18px rgba(20,30,20,0.12);
      --shadow-3: 0 4px 10px rgba(20,30,20,0.14), 0 14px 40px rgba(20,30,20,0.18);
      --shadow-inset: inset 0 0 0 1px rgba(20,30,20,0.07);

      --btn-edge:       0 4px 0 rgba(20,30,20,0.25);
      --btn-edge-press: 0 1px 0 rgba(20,30,20,0.25);
    }

    /* =============================================================================
       TEMAS EXTRA — 3 oscuros + 3 claros (además de dark/light por defecto).
       Solo cambian el acento y matices; el esqueleto lo heredan de :root (oscuros)
       o del bloque light compartido de arriba (claros).
       ========================================================================== */

    /* ---- OSCUROS ---- */
    html[data-theme="dark-cyan"] {
      --color-bg: #14191A; --color-surface: #1B2123; --color-surface-raised: #232B2D;
      --color-playfield: #2C3537; --color-border: #2E3B3C;
      --neon-cyan: #4ECDC4;
      --acc: #4ECDC4; --acc-ink: #06201E;
      --acc-dim: rgba(78,205,196,0.16); --acc-faint: rgba(78,205,196,0.07);
      --glow-acc: 0 0 12px rgba(78,205,196,0.50);
      --scanline: rgba(78,205,196,0.035); --scrim: rgba(8,14,14,0.78);
      --track-bg: #0C1212; --viz-bg: #0A1110;
      --color-accent: var(--acc); --color-success: var(--acc);
    }
    html[data-theme="dark-amber"] {
      --color-bg: #1B1812; --color-surface: #241F17; --color-surface-raised: #2D2619;
      --color-playfield: #382F1F; --color-border: #3C3422;
      --acc: #FFB23E; --acc-ink: #201503;
      --acc-dim: rgba(255,178,62,0.16); --acc-faint: rgba(255,178,62,0.07);
      --glow-acc: 0 0 12px rgba(255,178,62,0.50);
      --scanline: rgba(255,178,62,0.035); --scrim: rgba(16,12,6,0.78);
      --track-bg: #120F08; --viz-bg: #120E07;
      --color-accent: var(--acc); --color-success: var(--acc); --color-warning: #FFE66D;
    }
    html[data-theme="dark-magenta"] {
      --color-bg: #1A1620; --color-surface: #221C2B; --color-surface-raised: #2B2336;
      --color-playfield: #352B43; --color-border: #392E47;
      --acc: #FF4D9D; --acc-ink: #2A0418;
      --acc-dim: rgba(255,77,157,0.16); --acc-faint: rgba(255,77,157,0.07);
      --glow-acc: 0 0 12px rgba(255,77,157,0.50);
      --scanline: rgba(255,77,157,0.035); --scrim: rgba(12,8,16,0.78);
      --track-bg: #100A16; --viz-bg: #0F0A15;
      --color-accent: var(--acc); --color-success: var(--acc);
    }

    /* ---- CLAROS (acento sobre el esqueleto claro compartido) ---- */
    html[data-theme="light-blue"] {
      --acc: #1466C7; --acc-ink: #FFFFFF;
      --acc-dim: rgba(20,102,199,0.12); --acc-faint: rgba(20,102,199,0.06);
      --glow-acc: 0 0 10px rgba(20,102,199,0.30);
      --scanline: rgba(20,80,160,0.025); --viz-bg: #0E1320;
      --color-accent: var(--acc); --color-success: var(--acc);
    }
    html[data-theme="light-rose"] {
      --acc: #C2185B; --acc-ink: #FFFFFF;
      --acc-dim: rgba(194,24,91,0.12); --acc-faint: rgba(194,24,91,0.06);
      --glow-acc: 0 0 10px rgba(194,24,91,0.30);
      --scanline: rgba(160,20,75,0.025); --viz-bg: #1E0F16;
      --color-accent: var(--acc); --color-success: var(--acc);
    }
    html[data-theme="light-violet"] {
      --acc: #6D4AC2; --acc-ink: #FFFFFF;
      --acc-dim: rgba(109,74,194,0.12); --acc-faint: rgba(109,74,194,0.06);
      --glow-acc: 0 0 10px rgba(109,74,194,0.30);
      --scanline: rgba(90,60,160,0.025); --viz-bg: #14101E;
      --color-accent: var(--acc); --color-success: var(--acc);
    }
    /* ===== app.css ===== */
    /* =============================================================================
       DSK•LoFi — app.css
       Mobile-first vertical layout. PARKOUR design system: asphalt greys, neon
       green signal accent, cabinet buttons, hard shadows, glow = lift.
       ========================================================================== */

    *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body {
      margin: 0; padding: 0;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;   /* sin menú al mantener pulsado (iOS/WebView) */
    }
    /* permitir selección/edición solo en campos de texto */
    input, textarea, [contenteditable] {
      -webkit-user-select: text;
      user-select: text;
      -webkit-touch-callout: default;
    }
    [hidden] { display: none !important; }

    body {
      font-family: var(--font-ui);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--color-text);
      background: var(--color-bg);
      background-image:
        linear-gradient(var(--scanline) 1px, transparent 1px),
        linear-gradient(90deg, var(--scanline) 1px, transparent 1px);
      background-size: 24px 24px;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
      padding-bottom: env(safe-area-inset-bottom);
      transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
    }
    body.has-modal { overflow: hidden; }

    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; -webkit-tap-highlight-color: transparent; }
    button:focus { outline: none; }
    button:focus-visible, input:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
    canvas { display: block; width: 100%; height: 100%; }

    /* ============================ SVG ICONS ============================ */
    .ic {
      width: 20px; height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: none;
      display: block;
    }
    .ic--solid { fill: currentColor; stroke: none; width: 28px; height: 28px; }
    .ic--lg { width: 30px; height: 30px; }
    .ic--caret { width: 22px; height: 22px; stroke-width: 2.4; }
    .ic--warn { stroke: var(--neon-red); width: 32px; height: 32px; }
    .ic--heart { width: 13px; height: 13px; fill: var(--neon-red); stroke: none; }

    /* ============================ APP BAR ============================ */
    .appbar {
      position: sticky; top: 0; z-index: 30;
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-3);
      padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
      background: color-mix(in srgb, var(--color-bg) 88%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--color-border);
    }

    .appbar__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
    .brand__lines {
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      text-align: center; gap: 2px; min-width: 0; flex: 1;
    }
    .brand__credit { font-size: var(--fs-micro); line-height: 1.1; }
    .logo {
      font-family: var(--font-display);
      font-weight: var(--fw-bold);
      font-size: var(--fs-logo);
      letter-spacing: var(--ls-display);
      color: var(--color-text);
      white-space: nowrap;
    }
    .logo__dot { color: var(--acc); text-shadow: var(--glow-acc); }
    .logo__tag {
      font-size: var(--fs-micro);
      text-transform: uppercase;
      letter-spacing: var(--ls-label);
      color: var(--color-text-faint);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .icon-btn {
      width: var(--space-touch); height: var(--space-touch);
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-md);
      background: var(--color-surface-raised);
      box-shadow: var(--shadow-inset);
      color: var(--color-text);
      font-size: 20px;
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
    }
    .icon-btn:hover { background: var(--acc-dim); }
    .icon-btn:active { transform: scale(0.92); }

    /* ============================ LAYOUT ============================ */
    .app {
      max-width: 520px;
      margin: 0 auto;
      padding: var(--space-4);
      display: flex; flex-direction: column;
      gap: var(--space-4);
      margin-top: 15px;
    }

    .panel {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-2);
      overflow: hidden;
    }

    .app__foot {
      display: flex; flex-direction: column; align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) 0 var(--space-6);
    }
    .app__foot-line {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--color-text-faint);
    }
    .app__foot-credit {
      display: inline-flex; align-items: center;
      gap: 5px;
      font-size: var(--fs-micro);
      color: var(--color-text-muted);
    }
    .app__foot-credit a {
      color: var(--acc);
      font-weight: var(--fw-semi);
      text-decoration: none;
    }
    .app__foot-credit a:hover { text-decoration: underline; }

    /* ============================ TAPE DECK ============================ */
    .deck { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); position: relative;  }

    .deck__viz {
      position: relative;
      height: 132px;
      border-radius: var(--radius-md);
      background: var(--viz-bg);
      box-shadow: var(--shadow-inset);
      overflow: hidden;
      display: none;
    }
    .deck__viz canvas { position: absolute; inset: 0; }
    .viz-mode {
      position: absolute;
      top: 8px; right: 8px;
      z-index: 3;
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--viz-bg) 70%, transparent);
      color: var(--acc);
      box-shadow: var(--shadow-inset);
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
    }
    .viz-mode .ic { width: 17px; height: 17px; }
    .viz-mode:hover { background: var(--acc-dim); }
    .viz-mode:active { transform: scale(0.9); }

    /* ---- botón LYRIC (espejo del ojo, arriba-izquierda) ---- */
    .viz-lyric {
      position: absolute; top: 8px; left: 8px; z-index: 3;
      display: inline-flex; align-items: center; gap: 5px;
      height: 32px; padding: 0 10px;
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--viz-bg) 70%, transparent);
      color: var(--acc); box-shadow: var(--shadow-inset);
      font-family: var(--font-display); font-size: var(--fs-micro, 11px);
      letter-spacing: var(--ls-label); text-transform: uppercase;
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
    }
    .viz-lyric .ic { width: 15px; height: 15px; }
    .viz-lyric:hover { background: var(--acc-dim); }
    .viz-lyric:active { transform: scale(0.92); }

    /* ---- botón SHAZAM (reconocimiento), abajo-derecha ---- */
    .viz-shazam {
      position: absolute; bottom: 8px; right: 8px; z-index: 3;
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--viz-bg) 70%, transparent);
      color: var(--acc); box-shadow: var(--shadow-inset);
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
    }
    .viz-shazam .ic { width: 16px; height: 16px; }
    .viz-shazam:hover { background: var(--acc-dim); }
    .viz-shazam:active { transform: scale(0.9); }

    /* ---- botón ARTWORK (carátula), abajo-izquierda ---- */
    .viz-artwork {
      position: absolute; bottom: 8px; left: 8px; z-index: 3;
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--viz-bg) 70%, transparent);
      color: var(--acc); box-shadow: var(--shadow-inset);
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
    }
    .viz-artwork .ic { width: 16px; height: 16px; }
    .viz-artwork:hover { background: var(--acc-dim); }
    .viz-artwork:active { transform: scale(0.9); }
    .viz-artwork[hidden] { display: none; }

    /* ============================ ARTWORK MODAL ============================ */
    .modal--artwork {
      position: fixed; inset: 0; z-index: 500;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      background: #000;
    }
    .modal--artwork[aria-hidden="true"] { display: none; }
    .modal--artwork[aria-hidden="false"] { display: flex; }
    .aw-bg {
      position: absolute; inset: 0; z-index: 0;
      background-size: cover; background-position: center;
      filter: blur(32px) brightness(0.35) saturate(1.4);
    }
    .aw-close {
      position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px;
      z-index: 2; color: #fff;
      background: rgba(0,0,0,0.45); border-radius: var(--radius-sm);
    }
    .aw-wrap {
      position: relative; z-index: 1;
      flex: 1; width: 100%; min-height: 0;
      display: flex; align-items: center; justify-content: center;
      padding: calc(56px + env(safe-area-inset-top)) 16px 8px;
    }
    .aw-img {
      max-width: 100%; max-height: 100%;
      object-fit: contain;
      border-radius: var(--radius-sm);
      box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    }
    .aw-actions {
      position: relative; z-index: 1;
      display: flex; gap: var(--space-3);
      padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
      width: 100%;
    }
    .aw-actions .btn { flex: 1; }

    /* ---- editor de etiquetas ID3 ---- */
    .tag-card { width: min(94vw, 460px); }
    .tag-body { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .tag-cover { width: 140px; height: 140px; align-self: center; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-raised); box-shadow: var(--shadow-inset); display: flex; align-items: center; justify-content: center; }
    .tag-cover__save { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-bg) 72%, transparent); color: var(--color-text); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: var(--btn-edge); transition: transform var(--dur-fast); }
    .tag-cover__save .ic { width: 18px; height: 18px; }
    .tag-cover__save:active { transform: scale(0.9); }
    .tag-cover__img { width: 100%; height: 100%; object-fit: cover; }
    .tag-cover__none { color: var(--color-text-faint); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; }
    .tag-cover__btns { display: flex; gap: var(--space-2); justify-content: center; }
    .tag-cover__btns .btn { flex: 1; max-width: 160px; }
    .tag-field { display: flex; flex-direction: column; gap: 4px; }
    .tag-field > span { font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-faint); }
    .tag-actions { display: flex; gap: var(--space-2); }

    /* ---- A–B repeat ---- */
    .ab-card { width: min(94vw, 380px); }
    .ab-card--on .ab-now { color: var(--acc); }
    .ab-now { text-align: center; font-family: var(--font-mono); font-size: var(--fs-h2, 28px); font-weight: 600; margin: var(--space-1) 0; color: var(--color-text); letter-spacing: 0.02em; }
    .ab-top { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-1) 0 var(--space-2); }
    .ab-top .ab-now { flex: 1; margin: 0; }
    .ab-clearbtn { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface-raised); color: var(--color-text-muted); box-shadow: var(--btn-edge), var(--shadow-inset); }
    .ab-clearbtn .ic { width: 18px; height: 18px; }
    .ab-clearbtn:active { transform: scale(0.92); color: var(--neon-red); }
    .ab-wave { display: block; width: 100%; height: 116px; margin: var(--space-1) 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-raised); box-shadow: var(--shadow-inset); touch-action: none; cursor: ew-resize; }
    .ab-dj { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
    .ab-dj__btn { flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--btn-edge), var(--shadow-inset); font-family: var(--font-mono); font-weight: 700; font-size: 16px; }
    .ab-dj__btn .ic { width: 18px; height: 18px; }
    .ab-dj__btn:active { transform: scale(0.93); }
    .ab-dj__btn--txt { color: var(--acc); }
    .ab-points { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
    .ab-pt { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md, 12px); background: var(--color-surface-raised); box-shadow: var(--shadow-inset); }
    .ab-pt__hd { display: flex; align-items: center; gap: var(--space-2); }
    .ab-pt__set { height: 38px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; color: var(--acc-ink); background: var(--acc); }
    .ab-pt__set:active { transform: scale(0.96); }
    .ab-pt--a .ab-pt__set { background: var(--neon-cyan, var(--acc)); box-shadow: 0 0 14px color-mix(in srgb, var(--neon-cyan, var(--acc)) 55%, transparent); }
    .ab-pt--b .ab-pt__set { background: var(--neon-amber, var(--acc)); box-shadow: 0 0 14px color-mix(in srgb, var(--neon-amber, var(--acc)) 55%, transparent); }
    .ab-pt__nudge { display: flex; gap: var(--space-2); }
    .ab-pt__nudge .ab-nudge { flex: 1; }
    .ab-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
    .ab-tag { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro); background: var(--color-surface-raised); box-shadow: var(--shadow-inset); }
    .ab-tag--a { color: var(--neon-cyan, var(--acc)); }
    .ab-tag--b { color: var(--neon-amber, var(--acc)); }
    .ab-time { flex: 1; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-text-muted); }
    .ab-nudge { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--btn-edge), var(--shadow-inset); font-size: 16px; font-weight: 700; }
    .ab-nudge:active { transform: scale(0.9); }
    .ab-set { flex: none; padding: 0 var(--space-3); height: 30px; }
    .ab-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
    .ab-step { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
    .ab-step__lbl { font-size: var(--fs-micro); color: var(--color-text-faint); margin-right: auto; }
    .ab-step__chip { padding: 0 var(--space-3); height: 28px; border-radius: var(--radius-pill, 999px); background: var(--color-surface-raised); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-micro); box-shadow: var(--btn-edge), var(--shadow-inset); }
    .ab-step__chip.is-on { color: var(--acc-ink); background: var(--acc); box-shadow: var(--glow-acc); }
    .ab-step__chip:active { transform: scale(0.94); }
    .ab-export { margin-top: var(--space-3); }
    .ab-reps { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
    .ab-reps { flex-wrap: nowrap; }
    .ab-reps__num { width: 44px; min-width: 0; flex: 0 1 44px; height: 28px; border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-inset); text-align: center; font-family: var(--font-mono); font-size: var(--fs-micro); border: 0; padding: 0; }
    .ab-export__btn { height: 30px; padding: 0 var(--space-3); margin-left: auto; flex: none; white-space: nowrap; }
    /* ---- stems (IA) ---- */
    .stm-intro { color: var(--color-text-muted); font-size: var(--fs-micro); line-height: 1.45; margin: 0; }
    .stm-cached { margin-top: var(--space-2); }
    .stm-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 700; color: var(--acc-ink); background: var(--acc); }
    .stm-checks { display: flex; gap: var(--space-4); flex-wrap: wrap; }
    .stm-check { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--fs-small, 14px); }
    .stm-check input { width: 18px; height: 18px; accent-color: var(--acc); }
    .stm-progress { margin-top: var(--space-3); }
    .stm-bar { height: 8px; border-radius: 999px; background: var(--color-surface-raised); box-shadow: var(--shadow-inset); overflow: hidden; }
    .stm-bar__fill { height: 100%; width: 0%; background: var(--acc); box-shadow: var(--glow-acc); transition: width 0.18s ease; }
    .stm-prow { display: flex; justify-content: space-between; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-text-muted); }
    .stm-result { margin-top: var(--space-4); }
    .ab-play { flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--acc); color: var(--acc-ink); box-shadow: var(--glow-acc); }
    .ab-play .ic { width: 20px; height: 20px; }
    .ab-play:active { transform: scale(0.92); }
    .ab-clear { flex: 1; }
    .ab-hint { margin-top: var(--space-3); font-size: var(--fs-micro); color: var(--color-text-faint); text-align: center; text-wrap: pretty; }

    /* ============================ SHAZAM MODAL ============================ */
    .sh-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-top: var(--space-6); min-height: 260px; justify-content: center; position: relative; }
    .sh-close { position: absolute; top: 8px; right: 8px; }
    .sh-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; }
    .sh-status { font-family: var(--font-display); letter-spacing: var(--ls-label); text-transform: uppercase; font-size: var(--fs-sm); color: var(--color-text-dim); }
    .sh-pulse { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }
    .sh-pulse__core { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--acc); color: var(--color-surface); box-shadow: var(--glow-acc); }
    .sh-pulse__core .ic { width: 26px; height: 26px; }
    .sh-pulse__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; animation: sh-ping 1.8s ease-out infinite; }
    .sh-pulse__ring--2 { animation-delay: 0.5s; }
    .sh-pulse__ring--3 { animation-delay: 1s; }
    @keyframes sh-ping { 0% { transform: scale(0.6); opacity: 0.7; } 80% { opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
    .sh-spinner { width: 32px; height: 32px; }
    .sh-result__cover { width: 120px; height: 120px; border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-inset); background: var(--viz-bg); }
    .sh-result__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; text-align: center; max-width: 90%; }
    .sh-result__artist { font-size: var(--fs-sm); color: var(--color-text-dim); text-align: center; max-width: 90%; }
    .sh-result__actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
    .sh-act { display: flex; align-items: center; justify-content: center; gap: 8px; }
    .sh-act .ic { width: 18px; height: 18px; }
    .sh-error__glyph { font-size: 40px; color: var(--color-text-dim); font-family: var(--font-display); }

    .deck__meta { cursor: pointer; }

    /* ============================ LYRICS MODAL ============================ */
    .lyr-card { width: min(94vw, 520px); height: 92vh; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
    .lyr-search { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
    .lyr-search__input { flex: 1; min-width: 0; }
    .lyr-search__go { flex: none; padding: 0 var(--space-4); }
    .lyr-src { margin-top: var(--space-3); display: flex; }
    .lyr-src .seg__item { flex: 1; padding: 0 var(--space-2); min-width: 0; }
    .lyr-body { margin-top: var(--space-3); flex: 1; min-height: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .lyr-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); color: var(--color-text-muted); font-size: var(--fs-small); text-align: center; text-wrap: pretty; }
    .lyr-state--empty { color: var(--color-text-faint); }
    .lyr-reshead { font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
    .lyr-reslist { gap: var(--space-1); }
    .lyr-resitem { display: flex; align-items: center; gap: var(--space-2); text-align: left; }
    .lyr-resitem__txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lyr-badge { flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--color-surface-raised); color: var(--color-text-faint); }
    .lyr-badge--sync { background: var(--acc-dim); color: var(--acc); }
    .lyr-back { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--acc); margin-bottom: var(--space-2); }
    .lyr-songhead { font-weight: var(--fw-semi); font-size: var(--fs-body); color: var(--color-text); margin-bottom: var(--space-2); text-wrap: pretty; }
    .lyr-ctl { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
    .lyr-modeseg { margin-bottom: 0; }
    .lyr-ctl__btns { margin-left: auto; display: flex; gap: var(--space-2); }
    .lyr-ctlbtn { flex: none; width: 42px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--btn-edge), var(--shadow-inset); transition: transform var(--dur-fast), background var(--dur-fast); }
    .lyr-ctlbtn .ic { width: 18px; height: 18px; }
    .lyr-ctlbtn:active { transform: scale(0.92); }
    .lyr-ctlbtn.is-on { background: var(--acc); color: var(--acc-ink); box-shadow: var(--glow-acc); }
    .lyr-text { white-space: pre-wrap; word-break: break-word; font-size: 16px; line-height: 1.7; color: var(--color-text-muted); -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; cursor: text; }
    .lyr-text--synced { white-space: normal; }
    .lyr-line { margin: 0 0 3px; font-size: 16px; transition: color var(--dur-fast), opacity var(--dur-fast); opacity: 0.5; -webkit-user-select: text; user-select: text; }
    .lyr-line.is-cur { color: var(--acc); opacity: 1; text-shadow: var(--glow-acc); font-weight: var(--fw-semi); }
    .lyr-actions[hidden] { display: none; }
    /* barra inferior compacta de iconos (play · quitar voz · karaoke · compartir · pdf) */
    .lyr-iconbar { display: flex; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); justify-content: space-between; }
    .lyr-ibtn { flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--btn-edge), var(--shadow-inset); transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast); }
    .lyr-ibtn .ic { width: 19px; height: 19px; }
    .lyr-ibtn:active { transform: scale(0.92); }
    .lyr-ibtn.is-on { background: var(--acc); color: var(--acc-ink); box-shadow: var(--glow-acc); }
    .lyr-ibtn.is-disabled, .lyr-ibtn:disabled { opacity: 0.35; pointer-events: none; }
    .lyr-ibtn--kar.is-on { background: var(--acc); color: var(--acc-ink); }
    #lyricsModal { z-index: 330; }

    /* ===================== MODO KARAOKE (PANTALLA COMPLETA) ===================== */
    .modal.modal--karaoke { position: fixed; inset: 0; z-index: 9000; flex-direction: column; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--acc) 12%, var(--color-bg)) 0%, var(--color-bg) 60%); }
    .modal--karaoke.modal--open { display: flex; }
    .kar-top { display: flex; align-items: center; gap: var(--space-2); padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3); flex: none; }
    .kar-head { flex: 1; min-width: 0; font-weight: var(--fw-semi); font-size: var(--fs-small); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kar-x { flex: none; color: var(--color-text); }
    .kar-stage { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: clamp(10px, 3.2vh, 26px); padding: 38vh var(--space-5); text-align: center; scrollbar-width: none; }
    .kar-stage::-webkit-scrollbar { display: none; }
    .kar-line { font-size: clamp(20px, 5.6vw, 30px); font-weight: var(--fw-semi); line-height: 1.3; color: var(--color-text-faint); opacity: 0.45; transition: opacity var(--dur-base), color var(--dur-base), transform var(--dur-base); transform: scale(0.96); text-wrap: balance; }
    .kar-line.is-past { opacity: 0.3; }
    .kar-line.is-cur { opacity: 1; color: var(--color-text); transform: scale(1); }
    /* resaltado palabra a palabra (LRC mejorado) */
    .kar-w { transition: color var(--dur-fast), text-shadow var(--dur-fast); }
    .kar-line.is-cur .kar-w.is-sung { color: var(--acc); }
    .kar-line.is-cur .kar-w.is-cur { text-shadow: var(--glow-acc); }
    /* barrido proporcional cuando no hay tiempos de palabra */
    .kar-line.is-cur .kar-fulltext { background: linear-gradient(90deg, var(--acc) 0%, var(--acc) var(--kfill, 0%), currentColor var(--kfill, 0%), currentColor 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .kar-ctl { flex: none; display: flex; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); }
    .kar-cbtn { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--btn-edge), var(--shadow-inset); transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
    .kar-cbtn .ic { width: 22px; height: 22px; }
    .kar-cbtn:active { transform: scale(0.9); }
    .kar-cbtn.is-on { background: var(--acc); color: var(--acc-ink); box-shadow: var(--glow-acc); }
    .kar-cbtn--play { width: 64px; height: 64px; background: var(--acc); color: var(--acc-ink); box-shadow: var(--glow-acc); }
    .kar-cbtn--play .ic { width: 26px; height: 26px; }
    /* en la app nativa el WebView ya está desplazado bajo las barras: anulamos
       los insets para que no se dupliquen (margen arriba / corte abajo) */
    .is-webview .kar-top { padding-top: var(--space-3); }
    .is-webview .kar-ctl { padding-bottom: var(--space-5); }

    /* ============================ ONLINE (YouTube) ============================ */
    .yt-bar { gap: var(--space-2); }
    .yt-search__input { flex: 1; min-width: 0; }
    .yt-go { flex: none; }
    .yt-row { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; overflow: hidden; padding: var(--space-3); text-align: left; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent); transition: background var(--dur-fast); }
    .yt-row:hover { background: var(--acc-faint); }
    .yt-row__thumb { flex: none; width: 64px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface-raised); }
    .yt-row__main { flex: 1 1 auto; min-width: 0; overflow: hidden; }
    .yt-row__title { display: block; max-width: 100%; font-size: var(--fs-base, 15px); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .yt-row__sub { display: block; max-width: 100%; font-size: var(--fs-micro); color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .yt-row__act { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text-faint); }
    .yt-row__act .ic { width: 18px; height: 18px; }
    .yt-row__act:hover, .yt-row__act:active { background: var(--acc-dim); color: var(--acc); }
    .yt-row__act.is-busy { opacity: 0.5; pointer-events: none; }
    .yt-row__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--color-border) 70%, transparent); opacity: 0; transition: opacity var(--dur-fast); }
    .yt-row__bar.is-active { opacity: 1; }
    .yt-row__barfill { height: 100%; width: 0%; background: var(--acc); box-shadow: var(--glow-acc); transition: width 0.15s linear; }
    .yt-state { padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-text-faint); font-size: var(--fs-small); text-wrap: pretty; }
    /* selección múltiple en resultados online */
    .yt-row__chk { flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 2px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
    .yt-row__chk .ic { width: 14px; height: 14px; stroke-width: 3; }
    .yt-row--checked { background: var(--acc-faint); }
    .yt-row--checked .yt-row__chk { background: var(--acc); border-color: var(--acc); color: var(--color-bg); }
    .yt-foot { flex: none; }
    .yt-typebar { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
    .yt-type-chip { flex: 1; padding: var(--space-2) var(--space-2); font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; text-align: center; border-radius: var(--radius-pill); background: var(--color-surface-raised); color: var(--color-text-faint); box-shadow: var(--shadow-inset); }
    .yt-type-chip.is-active { background: var(--acc); color: var(--acc-ink); box-shadow: var(--btn-edge); }
    .yt-plview[hidden] { display: none; }
    .yt-row--playlist .yt-row__thumb { position: relative; }
    .yt-row__plcount { position: absolute; right: 2px; bottom: 2px; padding: 1px 5px; border-radius: var(--radius-sm); background: rgba(0,0,0,.7); color: #fff; font-size: 10px; line-height: 1.4; }
    .yt-row__playbtn { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--acc); }
    .yt-row__playbtn .ic { width: 20px; height: 20px; }
    .yt-row__playbtn:hover, .yt-row__playbtn:active { background: var(--acc-dim); }

    .yt-ver { text-align: center; color: var(--color-text-faint); font-size: var(--fs-tiny, 11px); line-height: 1.5; padding: 0 var(--space-5) var(--space-6); opacity: 0.8; }
    .yt-ver__new { color: var(--acc); font-weight: 600; }
    .yt-ver__link { color: var(--acc); text-decoration: underline; }

    /* visualizer picker grid */
    .viz-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: var(--space-2);
    }
    .viz-grid__item {
      display: flex; align-items: center; gap: var(--space-2);
      padding: var(--space-3);
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
      background: var(--track-bg, rgba(0,0,0,0.2));
      color: var(--color-text);
      font-size: var(--fs-small, 13px); font-weight: var(--fw-semi, 600);
      text-align: left;
    }
    .viz-grid__item.is-on {
      border-color: var(--acc);
      background: var(--acc-dim);
      color: var(--acc);
    }
    .viz-grid__num {
      font-family: var(--font-mono); font-size: var(--fs-micro, 11px);
      opacity: 0.6;
    }
    .deck__scan {
      position: absolute; inset: 0; pointer-events: none;
      background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
    }
    .deck__empty {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--space-2);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: var(--ls-label);
      color: #3D5A3D;
      text-transform: uppercase;
    }
    .deck__empty-glyph { font-size: 18px; letter-spacing: 6px; opacity: 0.5; }
    body.has-track .deck__empty { display: none; }
    body.has-track .deck__viz { display: block; }

    .deck__track { display: none; align-items: center; gap: var(--space-3); }
    body.has-track .deck__track { display: flex; }
    .deck__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: center; }
    .deck__name {
      font-weight: var(--fw-semi);
      font-size: var(--fs-body);
      max-width: 100%;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .deck__time {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: var(--fs-small);
      color: var(--color-text-muted);
      display: inline-flex; gap: var(--space-2);
    }
    .deck__time-sep { color: var(--color-text-faint); }
    #timeCur { color: var(--acc); text-shadow: var(--glow-acc); }

    /* cassette reels — la rotación la controla JS (var --reel-rot) para poder
       acelerar/frenar gradualmente junto al efecto de cinta */
    .reel {
      width: 34px; height: 34px; flex: none;
      border-radius: 50%;
      border: 2px solid var(--color-border-strong);
      background:
        radial-gradient(circle at center, var(--color-surface-raised) 0 28%, transparent 29%),
        conic-gradient(var(--color-text-faint) 0 12deg, transparent 12deg 60deg,
                       var(--color-text-faint) 60deg 72deg, transparent 72deg 120deg,
                       var(--color-text-faint) 120deg 132deg, transparent 132deg 180deg,
                       var(--color-text-faint) 180deg 192deg, transparent 192deg 240deg,
                       var(--color-text-faint) 240deg 252deg, transparent 252deg 300deg,
                       var(--color-text-faint) 300deg 312deg, transparent 312deg 360deg);
      transform: rotate(var(--reel-rot, 0deg));
    }

    .deck__wave {
      display: none;
      position: relative;
      height: 46px;
      border-radius: var(--radius-sm);
      background: var(--track-bg);
      box-shadow: var(--shadow-inset);
      overflow: hidden;
      touch-action: none;
    }
    body.has-track .deck__wave { display: block; }

    .wave-busy {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      gap: var(--space-2);
      background: color-mix(in srgb, var(--track-bg) 82%, transparent);
      backdrop-filter: blur(1px);
      z-index: 4;
    }
    .wave-busy[hidden] { display: none; }
    .wave-busy__txt {
      font-size: var(--fs-small, 12px);
      font-weight: var(--fw-bold, 700);
      letter-spacing: var(--ls-label, 0.08em);
      text-transform: uppercase;
      color: var(--acc);
    }

    /* transport */
    .deck__transport {
      display: none;
      align-items: center; justify-content: center;
      gap: var(--space-4);
      padding: var(--space-1) 0;
      flex-wrap: nowrap;
    }
    body.has-track .deck__transport { display: flex; }
    .deck__transport--fx {
      gap: var(--space-3);
      padding-top: 0;
      justify-content: space-between;
      width: 100%;
    }

    .t-btn {
      min-width: var(--space-touch); height: var(--space-touch);
      position: relative;
      padding: 0 var(--space-3);
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-md);
      background: var(--color-surface-raised);
      box-shadow: var(--btn-edge), var(--shadow-inset);
      font-size: 19px;
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
                  background var(--dur-fast), color var(--dur-fast);
    }
    .t-btn:active { transform: translateY(3px); box-shadow: var(--btn-edge-press), var(--shadow-inset); }
    .t-btn.is-on { color: var(--acc); background: var(--acc-dim); text-shadow: var(--glow-acc); }
    .t-btn--voice { display: none; }
    body.player-only .t-btn--voice { display: inline-flex; }

    /* botones pequeños (prev/next/stop/shuffle/loop/tape/rnd/timer) */
    .t-btn--sm {
      min-width: 40px; width: 40px; height: 40px;
      padding: 0;
    }
    .t-btn--sm .ic { width: 18px; height: 18px; }
    /* la fila de efectos tiene 6 botones: algo más compactos para que respiren */
    .deck__transport--fx .t-btn--sm {
      min-width: 38px; width: 38px; height: 38px;
    }
    .deck__transport--fx .t-btn--sm .ic { width: 17px; height: 17px; }
    .t-btn--txt {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
    }
    .t-btn.i-on {
      color: var(--acc-ink);
      background: var(--acc);
      box-shadow: var(--btn-edge), var(--glow-acc);
    }

    .t-btn--play {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: var(--acc);
      color: var(--acc-ink);
      box-shadow: var(--btn-edge), var(--glow-acc);
    }
    .t-btn--play:active { box-shadow: var(--btn-edge-press), var(--glow-acc); }
    .t-btn--play #playGlyph { display: flex; }
    .t-btn--play:not(.is-playing) #playGlyph { transform: translateX(2px); }

    .t-btn--rnd .ic { width: 18px; height: 18px; }
    .t-btn--rnd.is-rolling .ic { animation: dice-roll 480ms var(--ease-pop); }
    @keyframes dice-roll {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(220deg) scale(1.25); }
      100% { transform: rotate(360deg) scale(1); }
    }

    /* badge del temporizador */
    .t-btn__badge {
      position: absolute;
      bottom: -4px; right: -4px;
      min-width: 16px; height: 16px;
      padding: 0 3px;
      border-radius: var(--radius-pill);
      background: var(--acc);
      color: var(--acc-ink);
      font-family: var(--font-mono);
      font-size: 9px; font-weight: var(--fw-bold);
      line-height: 16px; text-align: center;
      box-shadow: var(--glow-acc);
    }

    /* loader */
    .loader {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--space-2);
      padding: var(--space-8) var(--space-4);
      border: 2px dashed var(--color-border);
      border-radius: var(--radius-md);
      cursor: pointer;
      text-align: center;
      transition: border-color var(--dur-base), background var(--dur-base);
      margin-bottom: 20px;
    }
    .loader:hover { border-color: var(--acc); background: var(--acc-faint); }
    .loader__glyph { color: var(--acc); }
    .loader__glyph .ic { filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.45)); }
    .loader__title {
      font-weight: var(--fw-bold);
      font-size: var(--fs-small);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
    }
    .loader__sub { font-size: var(--fs-small); color: var(--color-text-muted); }
    .loader__formats {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 1px;
      color: var(--color-text-faint);
    }
    body.has-track .loader { display: none; }
    .loader--busy { border-style: solid; cursor: default; }
    body.has-track .loader--busy:not([hidden]) { display: flex; }

    .spinner {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 3px solid var(--acc-dim);
      border-top-color: var(--acc);
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .deck .deck__actions {
      display: none;
      justify-content: center;
      gap: var(--space-3);
    }
    body.has-track .deck .deck__actions { display: flex; }
    .deck .deck__change,
    .deck .deck__export { align-self: center; }
    .deck__export {
      color: var(--acc);
      border-color: var(--acc);
    }
    .deck__export:hover { background: var(--acc); color: var(--acc-ink); }

    /* ============================ FX SECTIONS ============================ */
    .fx__head {
      display: flex; align-items: center;
      gap: var(--space-3);
      min-height: 56px;
      padding: 0 var(--space-4);
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }
    .fx__led {
      width: 8px; height: 8px; flex: none;
      border-radius: 50%;
      background: var(--acc);
      box-shadow: var(--glow-acc);
      transition: background var(--dur-base), box-shadow var(--dur-base);
    }
    .fx--off .fx__led { background: var(--color-text-faint); box-shadow: none; }
    .fx__led--static { background: var(--color-text-faint); box-shadow: none; }

    .fx__title {
      flex: 1;
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--fs-h3);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .fx--hero .fx__title { color: var(--acc); text-shadow: var(--glow-acc); }

    .fx__reset {
      width: 38px; height: 38px; flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--color-text-muted);
      transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-pop);
    }
    .fx__reset .ic { width: 18px; height: 18px; }
    .fx__reset:hover { color: var(--color-text); background: var(--acc-dim); }
    .fx__reset:active { transform: rotate(-180deg); }

    .fx__caret {
      flex: none;
      display: flex;
      color: var(--color-text-faint);
      transition: transform var(--dur-base) var(--ease-out);
    }
    .fx--collapsed .fx__caret { transform: rotate(-90deg); }

    .fx__body {
      display: flex; flex-direction: column;
      gap: var(--space-4);
      padding: var(--space-2) var(--space-4) var(--space-5);
      border-top: 1px solid var(--color-border);
    }
    .fx--collapsed .fx__body { display: none; }

    .fx--off .fx__params,
    .fx--off .fx__presets-row {
      opacity: 0.4;
      pointer-events: none;
      filter: saturate(0.2);
      transition: opacity var(--dur-base), filter var(--dur-base);
    }

    /* switch */
    .switch {
      flex: none;
      display: inline-flex; align-items: center;
      gap: var(--space-2);
      height: 30px;
      padding: 3px 10px 3px 3px;
      border-radius: var(--radius-pill);
      background: var(--track-bg);
      box-shadow: var(--shadow-inset);
      transition: background var(--dur-base);
    }
    .switch__knob {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--color-text-faint);
      transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-pop);
    }
    .switch__txt {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      font-weight: var(--fw-bold);
      letter-spacing: 1px;
      color: var(--color-text-faint);
      min-width: 24px;
      text-align: center;
    }
    .switch--on { background: var(--acc-dim); }
    .switch--on .switch__knob { background: var(--acc); box-shadow: var(--glow-acc); transform: translateX(2px); }
    .switch--on .switch__txt { color: var(--acc); }

    /* presets */
    .fx__presets-row { display: flex; flex-direction: column; gap: var(--space-2); }
    .fx__presets-label {
      font-size: var(--fs-micro);
      font-weight: var(--fw-semi);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--color-text-faint);
    }
    .fx__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }

    .chip {
      min-height: 36px;
      padding: 0 var(--space-4);
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border);
      background: var(--color-surface-raised);
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      font-weight: var(--fw-bold);
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-text-muted);
      transition: all var(--dur-fast) var(--ease-out);
    }
    .chip:hover { border-color: var(--acc); color: var(--color-text); }
    .chip:active { transform: scale(0.95); }
    .chip--active {
      background: var(--acc);
      border-color: var(--acc);
      color: var(--acc-ink);
      box-shadow: var(--glow-acc);
    }

    /* ============================ PARAM SLIDERS ============================ */
    .fx__params { display: flex; flex-direction: column; gap: var(--space-3); }

    .param { display: flex; flex-direction: column; gap: var(--space-1); }
    .param__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
    .param__label {
      font-size: var(--fs-micro);
      font-weight: var(--fw-semi);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--color-text-muted);
    }
    .param__val {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: var(--fs-small);
      font-weight: var(--fw-bold);
      color: var(--acc);
    }

    .param__range {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 34px;
      background: transparent;
      margin: 0;
      --fill: 50%;
      touch-action: pan-y;
    }
    .param__range::-webkit-slider-runnable-track {
      height: 8px;
      border-radius: var(--radius-pill);
      background: linear-gradient(90deg, var(--acc) var(--fill), var(--track-bg) var(--fill));
      box-shadow: var(--shadow-inset);
    }
    .param__range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px; height: 24px;
      margin-top: -8px;
      border-radius: 50%;
      background: var(--color-text);
      border: 3px solid var(--color-bg);
      box-shadow: 0 0 0 1.5px var(--acc), var(--glow-acc);
      transition: transform var(--dur-fast) var(--ease-pop);
    }
    .param__range:active::-webkit-slider-thumb { transform: scale(1.18); }
    .param__range::-moz-range-track {
      height: 8px;
      border-radius: var(--radius-pill);
      background: var(--track-bg);
    }
    .param__range::-moz-range-progress {
      height: 8px;
      border-radius: var(--radius-pill);
      background: var(--acc);
    }
    .param__range::-moz-range-thumb {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--color-text);
      border: 3px solid var(--color-bg);
      box-shadow: 0 0 0 1.5px var(--acc), var(--glow-acc);
    }

    /* ============================ SEGMENTED / FIELDS / BUTTONS ============================ */
    .seg {
      display: inline-flex;
      background: var(--track-bg);
      border-radius: var(--radius-md);
      padding: var(--space-1);
      gap: var(--space-1);
      box-shadow: var(--shadow-inset);
    }
    .seg__item {
      min-height: 38px;
      padding: 0 var(--space-4);
      border-radius: var(--radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--space-2);
      font-weight: var(--fw-semi);
      font-size: var(--fs-small);
      text-transform: uppercase;
      letter-spacing: var(--ls-label);
      color: var(--color-text-muted);
      transition: all var(--dur-fast) var(--ease-out);
    }
    .seg__item--active {
      background: var(--acc);
      color: var(--acc-ink);
      box-shadow: var(--glow-acc);
    }

    .field {
      width: 100%;
      min-height: var(--space-touch);
      padding: 0 var(--space-4);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: var(--track-bg);
      color: var(--color-text);
      font-family: var(--font-mono);
      font-size: var(--fs-small);
      box-shadow: var(--shadow-inset);
    }
    .field:focus { border-color: var(--acc); outline: none; box-shadow: var(--shadow-inset), var(--glow-acc); }

    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--space-2);
      min-height: var(--space-touch);
      padding: 0 var(--space-5);
      border-radius: var(--radius-md);
      font-weight: var(--fw-bold);
      font-size: var(--fs-body);
      text-transform: uppercase;
      letter-spacing: var(--ls-label);
      color: var(--acc-ink);
      background: var(--acc);
      box-shadow: var(--btn-edge);
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
                  filter var(--dur-fast) var(--ease-out);
    }
    .btn:hover { filter: brightness(1.08); }
    .btn:active { transform: translateY(3px); box-shadow: var(--btn-edge-press); }
    .btn--success { background: var(--acc); box-shadow: var(--btn-edge), var(--glow-acc); }
    .btn--success:active { box-shadow: var(--btn-edge-press), var(--glow-acc); }
    .btn--danger { background: var(--neon-red); color: #FFFFFF; box-shadow: var(--btn-edge), var(--glow-red); }
    .btn--ghost { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--btn-edge), var(--shadow-inset); }
    .btn--block { width: 100%; }

    /* export */
    .export__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .export__row--col { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .export__hint {
      margin: 0;
      font-size: var(--fs-micro);
      color: var(--color-text-faint);
      text-align: center;
      text-wrap: pretty;
    }

    /* ============================ MODALS ============================ */
    .modal { position: fixed; inset: 0; z-index: 100; display: none; }
    .modal--open { display: block; }
    .modal__scrim {
      position: absolute; inset: 0;
      background: var(--scrim);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      animation: scrim-in var(--dur-base) var(--ease-out);
    }
    @keyframes scrim-in { from { opacity: 0; } }

    .modal__card {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: min(92vw, 380px);
      max-height: 86vh;
      overflow-y: auto;
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-3);
      padding: var(--space-5);
      display: flex; flex-direction: column;
      gap: var(--space-4);
      animation: card-in var(--dur-base) var(--ease-pop);
    }
    @keyframes card-in {
      from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    }
    .modal__card--sm { width: min(88vw, 330px); text-align: center; }
    /* picker de visualizador: más abajo en la pantalla para ver la viz por encima */
    .modal--low .modal__card { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translate(-50%, 0); }
    .modal--low .modal__scrim { background: color-mix(in srgb, var(--scrim) 55%, transparent); }
    @keyframes card-in-low { from { opacity: 0; transform: translate(-50%, 8px) scale(0.98); } }
    .modal--low .modal__card { animation: card-in-low var(--dur-base) var(--ease-pop); }

    .modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .modal__title {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--fs-h3);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
    }
    .modal__title--danger { color: var(--neon-red); text-shadow: var(--glow-red); }
    .modal__title--icon { display: flex; justify-content: center; text-shadow: none; }
    .modal__title--icon .ic--warn { filter: drop-shadow(0 0 7px rgba(255, 59, 48, 0.5)); }
    .modal__x { width: 38px; height: 38px; font-size: 15px; }
    .modal__msg { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); text-wrap: pretty; }
    .modal__actions { display: flex; gap: var(--space-3); justify-content: center; }
    .modal__actions .btn { flex: 1; }
    .modal__foot {
      display: flex; justify-content: space-between;
      padding-top: var(--space-2);
      border-top: 1px solid var(--color-border);
    }

    .opt { display: flex; flex-direction: column; gap: var(--space-2); }
    .opt .seg { align-self: stretch; }
    .opt .seg .seg__item { flex: 1; }
    .opt--restore { gap: var(--space-2); }

    /* selector de tema: dos columnas (oscuros | claros) */
    .theme-pick { display: flex; gap: var(--space-3); align-self: stretch; }
    .theme-col { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
    .theme-sw {
      --sw: var(--acc);
      display: flex; align-items: center; justify-content: center;
      height: var(--space-touch);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface-raised);
      transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .theme-sw__dot {
      width: 18px; height: 18px; border-radius: var(--radius-pill);
      background: var(--sw);
      box-shadow: 0 0 0 2px rgba(0,0,0,0.25), 0 0 10px color-mix(in srgb, var(--sw) 60%, transparent);
    }
    .theme-sw--active {
      border-color: var(--sw);
      background: color-mix(in srgb, var(--sw) 16%, var(--color-surface-raised));
    }
    .theme-sw--active .theme-sw__dot { box-shadow: 0 0 0 2px var(--sw), 0 0 12px var(--sw); }
    .opt__sub { margin: 0; font-size: var(--fs-micro); color: var(--color-text-faint); text-align: center; }
    .opt__sub a { color: var(--acc); text-decoration: underline; }
    .opt__about {
      margin: 0;
      font-size: var(--fs-micro);
      color: var(--color-text-faint);
      text-align: center;
      text-wrap: pretty;
    }
    .opt__badge {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: 1px;
      color: var(--color-text-muted);
      text-transform: uppercase;
    }

    /* progress */
    .progress {
      height: 12px;
      border-radius: var(--radius-pill);
      background: var(--track-bg);
      box-shadow: var(--shadow-inset);
      overflow: hidden;
    }
    .progress__bar {
      height: 100%;
      width: 0%;
      border-radius: var(--radius-pill);
      background: var(--acc);
      box-shadow: var(--glow-acc);
      transition: width 200ms linear;
    }
    .progress__pct {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: var(--fs-small);
      font-weight: var(--fw-bold);
      color: var(--acc);
    }

    /* ============================ TOASTS ============================ */
    .toasts {
      position: fixed;
      left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 200;
      display: flex; flex-direction: column; align-items: center;
      gap: var(--space-2);
      width: min(92vw, 420px);
      pointer-events: none;
    }
    .toast {
      display: flex; align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-2);
      font-size: var(--fs-small);
      font-weight: var(--fw-semi);
      max-width: 100%;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-pop);
    }
    .toast--in { opacity: 1; transform: none; }
    .toast__dot {
      width: 8px; height: 8px; flex: none;
      border-radius: 50%;
      background: var(--acc);
      box-shadow: var(--glow-acc);
    }
    .toast--warn .toast__dot { background: var(--neon-amber); box-shadow: var(--glow-amber); }
    .toast__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ============================ WEBVIEW (APK NATIVA) ============================ */
    /* El Kotlin ya empuja el WebView bajo las barras de sistema (insets como padding
       del contenedor raíz). En la app nativa anulamos los env(safe-area-inset-*) que
       el layout web añade, para que no se dupliquen y no aparezca margen arriba/abajo. */
    .is-webview .appbar {
      padding-top: var(--space-3);
    }
    .is-webview body,
    html.is-webview body {
      padding-bottom: 0;
    }
    .is-webview .toasts {
      bottom: var(--space-5);
    }
    /* la lista a pantalla completa NO debe sumar el inset (el WebView ya lo aplica) */
    .is-webview .plfs { padding-top: 0; }
    .is-webview .lib-foot { padding-bottom: 15px; }
    .is-webview .sel-bar { padding-bottom: var(--space-2); }

    /* bloque SALIDA siempre oculto: el volumen va al 100% y se controla con el
       volumen del propio dispositivo */
    .fx[data-plain="output"] { display: none !important; }

    @media (max-width: 767px) and (orientation: portrait) {
      .is-webview .appbar {
        margin-top: -20px;
      }
      .is-webview .app__foot {
        margin-bottom: -12px;
      }
    }

    /* ============================ PLAYLIST ============================ */
    .playlist {
      border-radius: var(--radius-md);
      background: var(--track-bg);
      box-shadow: var(--shadow-inset);
      overflow: hidden;
    }
    .playlist__head {
      display: flex; align-items: center; gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--color-border);
    }
    .playlist__title {
      font-size: var(--fs-micro); font-weight: var(--fw-semi);
      letter-spacing: var(--ls-label); text-transform: uppercase;
      color: var(--color-text-muted);
      flex-shrink: 0;
    }
    .plsearch {
      position: relative; flex: 1; min-width: 0;
      display: flex; align-items: center;
    }
    .plsearch__input {
      width: 100%;
      background: var(--track-bg, rgba(0,0,0,0.25));
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      color: var(--color-text);
      font-size: var(--fs-small, 12px);
      padding: 4px 24px 4px 8px;
      height: 28px;
      outline: none;
      transition: border-color var(--dur-fast);
    }
    .plsearch__input:focus { border-color: var(--acc); }
    .plsearch__clear {
      position: absolute; right: 4px;
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px;
      color: var(--color-text-muted);
    }
    .plsearch__clear svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }
    .plsearch__clear:hover { color: var(--acc); }
    .playlist__count {
      font-family: var(--font-mono); font-size: var(--fs-micro);
      color: var(--acc);
      flex-shrink: 0;
    }
    .pl-repeat {
      position: relative; flex: none; width: 24px; height: 24px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm); color: var(--color-text-faint);
      transition: color var(--dur-fast), background var(--dur-fast); margin-right: 2px;
    }
    .pl-repeat .ic { width: 14px; height: 14px; }
    .pl-repeat:active { transform: scale(0.9); }
    .pl-repeat[data-state="all"], .pl-repeat[data-state="one"] { color: var(--acc); background: var(--acc-faint); }
    .pl-repeat__one {
      position: absolute; right: 1px; bottom: -1px; font-family: var(--font-mono);
      font-size: 8px; font-weight: 700; line-height: 1; display: none;
    }
    .pl-repeat[data-state="one"] .pl-repeat__one { display: block; }
    .playlist__items { height: 176px; overflow-y: auto; }
    .pl-empty {
      padding: var(--space-3);
      text-align: center;
      font-size: var(--fs-small, 12px);
      color: var(--color-text-faint, #888);
    }
    .pl-item {
      display: flex; align-items: center; gap: var(--space-3);
      width: 100%;
      padding: var(--space-2) var(--space-3);
      text-align: left;
      border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
      transition: background var(--dur-fast);
    }
    .pl-item:hover { background: var(--acc-faint); }
    .pl-item__idx {
      flex: none; width: 22px;
      font-family: var(--font-mono); font-size: var(--fs-micro);
      color: var(--color-text-faint); text-align: right;
    }
    .pl-item__name {
      flex: 1; min-width: 0;
      font-size: var(--fs-small);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      color: var(--color-text-muted);
    }
    .pl-item--active { background: var(--acc-dim); }
    .pl-item--active .pl-item__name { color: var(--acc); font-weight: var(--fw-semi); }
    .pl-item--active .pl-item__idx { color: var(--acc); }

    /* ============================ GENERAL PRESET BAR ============================ */
    .preset-bar { padding: var(--space-3) var(--space-4); overflow: visible; position: relative; z-index: 20; }
    .preset-bar__row { display: flex; flex-direction: column; gap: var(--space-2); }
    .preset-bar__controls { display: flex; gap: var(--space-2); align-items: stretch; }
    .preset-bar__admin { flex: none; }

    /* combo (listbox custom) */
    .combo { position: relative; flex: 1; min-width: 0; }
    .combo__btn {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-2);
      min-height: var(--space-touch);
      padding: 0 var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: var(--track-bg);
      box-shadow: var(--shadow-inset);
      color: var(--color-text);
      font-size: var(--fs-small);
    }
    .combo__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .combo__btn .ic--caret { flex: none; color: var(--color-text-faint); transition: transform var(--dur-base); }
    .combo--open .combo__btn .ic--caret { transform: rotate(180deg); }
    .combo__menu {
      position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; z-index: 40;
      max-height: 260px; overflow-y: auto;
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-3);
      padding: var(--space-1);
    }
    .combo__group {
      padding: var(--space-2) var(--space-3) var(--space-1);
      font-size: var(--fs-micro); font-weight: var(--fw-bold);
      letter-spacing: var(--ls-label); text-transform: uppercase;
      color: var(--color-text-faint);
    }
    .combo__item {
      width: 100%; text-align: left;
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      font-size: var(--fs-small);
      color: var(--color-text);
      transition: background var(--dur-fast);
    }
    .combo__item:hover { background: var(--acc-dim); }
    .combo__item--active { background: var(--acc); color: var(--acc-ink); }

    /* admin list */
    .gp-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 200px; overflow-y: auto; }
    .gp-row {
      display: flex; align-items: center; gap: var(--space-2);
      padding: var(--space-2);
      border-radius: var(--radius-sm);
      background: var(--track-bg);
    }
    .gp-row__name { flex: 1; min-width: 0; font-size: var(--fs-small);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gp-row__apply { min-height: 32px; }
    .gp-row__del { width: 36px; height: 36px; flex: none; color: var(--neon-red); }

    /* timer */
    #exportCancel.is-armed {
      background: var(--danger, #e0245e);
      color: #fff;
      border-color: var(--danger, #e0245e);
    }
    .speed-presets {
      display: flex; flex-wrap: wrap; gap: var(--space-2);
      justify-content: center;
    }
    .speed-manual {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 6px;
    }
    .speed-manual__val {
      font-family: var(--font-mono); font-size: var(--fs-small, 13px);
      color: var(--acc); font-variant-numeric: tabular-nums;
    }
    .timer-opts { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
    .timer-custom { display: flex; gap: var(--space-2); }
    .timer-custom .field { flex: 1; }
    .loader__dir { margin-top: var(--space-2); }

    /* ============================ MOTION SAFETY ============================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ===================== switch (toggle) ===================== */
    .opt--switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .opt__sw-text { flex: 1; min-width: 0; }
    .opt--col { display: flex; flex-direction: column; gap: var(--space-2); }
    .opt-gain { display: flex; align-items: center; gap: var(--space-3); }
    .opt-gain .slider { flex: 1; min-width: 0; }
    .opt-gain__val { flex: none; min-width: 64px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--acc); }
    .switch {
      position: relative; flex-shrink: 0;
      width: 46px; height: 27px;
      border-radius: 14px;
      background: var(--color-border);
      transition: background var(--dur-fast) var(--ease-out);
    }
    .switch__knob {
      position: absolute; top: 3px; left: 3px;
      width: 21px; height: 21px;
      border-radius: 50%;
      background: #fff;
      transition: transform var(--dur-fast) var(--ease-out);
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .switch[aria-checked="true"] { background: var(--acc); }
    .switch[aria-checked="true"] .switch__knob { transform: translateX(19px); }

    /* ===================== modo solo-reproductor ===================== */
    /* oculta efectos, presets, exportación, waveform, cambiar pista y random;
       deja deck, lista, visualizador y la barra de seek propia */
    body.player-only .preset-bar,
    body.player-only .fx[data-sec],
    body.player-only .fx[data-plain="export"],
    body.player-only #btnGoExport,
    body.player-only #btnChange,
    body.player-only .deck__wave,
    body.player-only .deck__transport--fx #btnTape,
    body.player-only .deck__transport--fx #btnRnd {
      display: none !important;
    }

    /* cuando se abre un vídeo en modo reproductor, mostrar la sección de exportar */
    body.player-only.has-video .fx[data-plain="export"] {
      display: block !important;
    }

    /* barra de seek (solo modo reproductor) */
    .po-seek {
      display: flex; align-items: center; gap: var(--space-2);
      padding: 2px var(--space-2);
    }
    .po-seek[hidden] { display: none; }
    .po-seek__time {
      font-family: var(--font-mono); font-size: var(--fs-micro, 11px);
      color: var(--color-text-muted); flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .po-seek__range {
      flex: 1; min-width: 0;
      -webkit-appearance: none; appearance: none;
      height: 4px; border-radius: 2px;
      background: var(--color-border);
      outline: none;
      cursor: pointer;
    }
    .po-seek__range::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 15px; height: 15px; border-radius: 50%;
      background: var(--acc);
      box-shadow: 0 0 6px var(--acc);
      cursor: pointer;
    }
    .po-seek__range::-moz-range-thumb {
      width: 15px; height: 15px; border: none; border-radius: 50%;
      background: var(--acc);
      cursor: pointer;
    }

    /* ===================== lista a pantalla completa ===================== */
    .playlist__title--btn {
      background: none; border: none; padding: 0;
      color: inherit; font: inherit; cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px;
      letter-spacing: 0.04em;
    }
    .playlist__title--btn::after {
      content: ""; width: 5px; height: 5px;
      border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
      transform: rotate(-45deg); opacity: 0.6; margin-left: 1px;
    }
    .plfs {
      position: fixed; inset: 0; z-index: 210;
      background: var(--color-bg, #0d0f0d);
      display: flex; flex-direction: column;
      padding-top: env(safe-area-inset-top);
    }
    .plfs[hidden] { display: none; }
    .plfs__head {
      display: flex; align-items: center; gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }
    .plfs__close, .plfs__open {
      width: 40px; height: 40px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--color-surface-raised, rgba(255,255,255,0.05));
      color: var(--color-text);
    }
    .plfs__close .ic, .plfs__open .ic { width: 20px; height: 20px; }
    .plfs__close:active, .plfs__open:active { transform: scale(0.92); }
    .plfs__open .ic { width: 18px; height: 18px; }
    .plfs__title {
      flex: 1; min-width: 0;
      font-size: var(--fs-base, 15px); font-weight: var(--fw-bold, 700);
      letter-spacing: var(--ls-label); text-transform: uppercase;
      color: var(--color-text);
    }
    .plfs__count {
      font-family: var(--font-mono); font-size: var(--fs-small, 13px);
      color: var(--acc); flex-shrink: 0;
    }
    .plfs__search {
      position: relative; display: flex; align-items: center;
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }
    .plfs__search .plsearch__input { width: 100%; height: 38px; padding: 6px 30px 6px 12px; font-size: var(--fs-base, 15px); }
    .plfs__search .plsearch__clear { right: calc(var(--space-4) + 6px); }
    .exp-search-prog {
      display: flex; align-items: center; gap: var(--space-2);
      padding: 0 var(--space-4) var(--space-2);
      opacity: 0; max-height: 0; overflow: hidden;
      transition: opacity .18s ease, max-height .18s ease;
    }
    .exp-search-prog.is-on { opacity: 1; max-height: 24px; }
    .exp-search-prog__track {
      flex: 1; height: 3px; border-radius: var(--radius-pill);
      background: var(--color-border); overflow: hidden;
    }
    .exp-search-prog__track > i {
      display: block; height: 100%; width: 0%;
      background: var(--acc); border-radius: var(--radius-pill);
      transition: width .15s linear;
    }
    .exp-search-prog.is-done .exp-search-prog__track > i { width: 100% !important; }
    .exp-search-prog__count {
      flex: 0 0 auto; font-size: 11px; line-height: 1;
      color: var(--color-text-muted); font-variant-numeric: tabular-nums;
      min-width: 2ch; text-align: right;
    }
    .plfs__items {
      flex: 1; overflow-y: auto;
      padding: var(--space-2) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
    }
    .plfs__items .pl-item { padding: var(--space-4) var(--space-3); font-size: var(--fs-base, 15px); }
    .plfs__items .pl-empty { padding: var(--space-5); }


    /* ============================ SCROLLBAR ============================ */

    /* Fuerza el color en navegadores modernos (Chrome 121+, Firefox) */
    html, body {
      scrollbar-width: thin !important;
      /* El primer color es el pulgar (oscuro), el segundo es el fondo */
      scrollbar-color: #1a1c1a var(--color-bg) !important;
    }

    /* Estilos estrictos para WebKit */
    ::-webkit-scrollbar {
      width: 6px !important;
      background: var(--color-bg) !important;
    }

    ::-webkit-scrollbar-track {
      background: var(--color-bg) !important;
    }

    ::-webkit-scrollbar-thumb {
      background: #1a1c1a !important; /* Un gris casi negro para que se funda */
      border-radius: 10px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--acc-dim) !important;
    }
    /* ===== library.css ===== */
    /* =============================================================================
       DSK•LoFi — library.css
       Estilos de la biblioteca: pestañas dentro de #plFs, explorador, listas,
       filas, menú de acciones (⋮) y botón ⋮ por pista. Hereda tokens de tokens.css.
       ========================================================================== */

    /* ---- botón ⋮ dentro de cada .pl-item (cola / fullscreen / mini) ---- */
    .pl-item { position: relative; }
    .pl-item__menu {
      flex: none;
      width: 34px; height: 34px; margin: -6px -4px -6px 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--color-text-faint);
      transition: background var(--dur-fast), color var(--dur-fast);
    }
    .pl-item__menu .ic { width: 18px; height: 18px; }
    .pl-item__menu:hover, .pl-item__menu:active { background: var(--acc-dim); color: var(--acc); }

    /* ============================ PESTAÑAS ============================ */
    .lib-tabs {
      display: flex; gap: var(--space-1);
      padding: var(--space-2) var(--space-3) 0;
      border-bottom: 1px solid var(--color-border);
      background: var(--color-bg);
    }
    .lib-tab {
      flex: 1;
      padding: var(--space-3) var(--space-2);
      font-family: var(--font-display); font-size: var(--fs-micro);
      letter-spacing: var(--ls-label); text-transform: uppercase;
      color: var(--color-text-faint);
      border-bottom: 2px solid transparent;
      transition: color var(--dur-fast), border-color var(--dur-fast);
    }
    .lib-tab[hidden] { display: none; }
    .lib-tab--active { color: var(--acc); border-bottom-color: var(--acc); text-shadow: var(--glow-acc); }

    /* ============================ PANELES ============================ */
    .lib-panel { display: none; }
    .lib-panel--active {
      display: flex; flex-direction: column;
      flex: 1; min-height: 0;
    }
    .lib-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .lib-view[hidden] { display: none; }

    /* barra superior (explorador / listas) */
    .lib-bar {
      display: flex; align-items: center; gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }
    .lib-up {
      flex: none; width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--color-surface-raised); color: var(--color-text);
    }
    .lib-up[hidden] { display: none; }
    .lib-up .ic { width: 18px; height: 18px; }
    .lib-path {
      flex: 1; min-width: 0;
      font-size: var(--fs-small); font-weight: var(--fw-semi);
      letter-spacing: var(--ls-label); text-transform: uppercase;
      color: var(--color-text-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lib-add {
      flex: none;
      padding: var(--space-2) var(--space-3);
      font-family: var(--font-display); font-size: var(--fs-micro);
      letter-spacing: var(--ls-label); text-transform: uppercase;
      border-radius: var(--radius-pill);
      background: var(--acc); color: var(--acc-ink);
      box-shadow: var(--btn-edge);
    }
    .lib-add--ghost { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-inset); }
    .lib-add:active { transform: translateY(2px); box-shadow: var(--btn-edge-press); }

    /* lista de filas (explorador / listas / detalle) */
    .lib-list {
      flex: 1; overflow-y: auto;
      padding: var(--space-2) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
    }
    .lib-empty {
      padding: var(--space-8) var(--space-5);
      text-align: center; color: var(--color-text-faint);
      font-size: var(--fs-small); text-wrap: pretty;
    }

    /* fila genérica */
    .lib-row {
      display: flex; align-items: center; gap: var(--space-3);
      width: 100%;
      padding: var(--space-4) var(--space-3);
      text-align: left; cursor: pointer;
      border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
      transition: background var(--dur-fast);
    }
    .lib-row:hover { background: var(--acc-faint); }
    .lib-row__ic { flex: none; display: inline-flex; color: var(--color-text-faint); }
    .lib-row__play { background: none; border: 0; padding: 4px; margin: -4px; cursor: pointer; color: var(--acc); }
    .lib-row__play:active { transform: scale(0.9); }
    .lib-row__ic .ic { width: 20px; height: 20px; }
    .lib-row--folder .lib-row__ic { color: var(--acc); }
    .lib-row--pending { border: 1px dashed var(--neon-amber); }
    .lib-row--pending .lib-row__ic { color: var(--neon-amber); }
    .lib-row--pending .lib-row__name { color: var(--neon-amber); }
    .lib-row__sub--pending { color: var(--neon-amber); }

    /* ---- selección múltiple ---- */
    .lib-sel--active { background: var(--acc-dim); color: var(--acc); }
    .lib-row__chk {
      flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm);
      border: 2px solid var(--color-border);
      display: inline-flex; align-items: center; justify-content: center;
      color: transparent;
    }
    .lib-row__chk .ic { width: 14px; height: 14px; stroke-width: 3; }
    .lib-row--checked { background: var(--acc-faint); }
    .lib-row--checked .lib-row__chk { background: var(--acc); border-color: var(--acc); color: var(--color-bg); }
    .sel-bar {
      display: flex; align-items: stretch; gap: var(--space-2);
      padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
      border-top: 1px solid var(--color-border);
      background: var(--color-surface-raised);
    }
    .sel-bar[hidden] { display: none; }
    .sel-bar__count {
      flex: none; min-width: 26px; text-align: center;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-text-muted);
    }
    .sel-bar__btn {
      flex: 1; min-width: 0; padding: var(--space-1) var(--space-1);
      display: flex; align-items: center; justify-content: center; text-align: center;
      font-family: var(--font-display); font-size: 10px;
      letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.2;
      border-radius: var(--radius-sm);
      background: var(--acc); color: var(--color-bg); box-shadow: var(--btn-edge);
      white-space: normal; overflow-wrap: break-word;
    }
    .sel-bar__btn:active { transform: translateY(2px); box-shadow: var(--btn-edge-press); }
    .sel-bar__btn:disabled { opacity: 0.4; }
    .sel-bar__btn--ghost { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-inset); }
    .sel-bar__btn--danger { background: var(--neon-red); color: #fff; }
    .lib-row__name {
      flex: 1; min-width: 0;
      font-size: var(--fs-base, 15px); color: var(--color-text-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lib-row__sub { flex: none; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-text-faint); }
    .lib-row__ord {
      flex: none; width: 22px; text-align: right;
      font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-text-faint);
    }
    .lib-row__act {
      flex: none; width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--color-text-faint); font-size: 20px;
    }
    .lib-row__act .ic { width: 18px; height: 18px; }
    .lib-row__act:hover, .lib-row__act:active { background: var(--acc-dim); color: var(--acc); }
    .lib-row__mv {
      flex: none; width: 30px; height: 30px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm); font-size: 12px;
      color: var(--color-text-faint); background: var(--color-surface-raised);
    }
    .lib-row__mv:active { transform: scale(0.92); color: var(--acc); }

    /* pie del panel EN CURSO */
    .lib-foot {
      flex: none;
      padding: var(--space-3) var(--space-4) calc(var(--space-1) + env(safe-area-inset-bottom));
      border-top: 1px solid var(--color-border);
    }

    /* ============================ MENÚ DE ACCIONES (⋮) ============================ */
    .menu-list { display: flex; flex-direction: column; gap: var(--space-1); text-align: left; }
    .menu-item {
      display: block; width: 100%;
      padding: var(--space-4) var(--space-4);
      border-radius: var(--radius-md);
      font-size: var(--fs-base, 15px); color: var(--color-text);
      background: var(--color-surface);
      transition: background var(--dur-fast);
    }
    .menu-item:hover, .menu-item:active { background: var(--acc-dim); }
    .menu-item--accent { color: var(--acc); font-weight: var(--fw-semi); }
    .menu-item--danger { color: var(--neon-red); }

    /* campo de nombre de lista a ancho completo */
    #listNameInput { width: 100%; }

    /* pista activa dentro del detalle de una lista */
    .lib-row--active { background: var(--acc-dim); }
    .lib-row--active .lib-row__name { color: var(--acc); font-weight: var(--fw-semi); }
    .lib-row--active .lib-row__ord { color: var(--acc); }

    /* icono "abrir gestor de listas" a la izquierda del nombre en la mini-lista */
    .playlist__title-ic { display: inline-flex; align-items: center; }
    .playlist__title-ic .ic { width: 14px; height: 14px; color: var(--acc); }
    .playlist__title-txt { display: inline-block; }

    /* mini-lista (vista del cuerpo de la app): altura para ~4 pistas */
    .playlist .pl-item { min-height: 44px; }

    /* ---- capas: la lista fullscreen está en z-index 210; estos modales y los
       toasts deben quedar POR ENCIMA al abrirse desde dentro de ella ---- */
    #trackMenuModal, #listPickModal, #listNameModal { z-index: 320; }
    .toasts { z-index: 600; }
    /* todos los modales por encima de la lista a pantalla completa */
    .modal { z-index: 320; }
    .modal.modal--artwork { z-index: 500; }
    #confirmModal, #errorModal { z-index: 360; }
    /* ocultar la barra de transporte en la pantalla inicial (sin pista) */
    body:not(.has-track) .po-seek { display: none; }
    /* menos hueco bajo los botones en modo solo reproductor */
    body.player-only .deck { padding-bottom: 0px; }

    /* botón "cargar carpeta" en la pantalla de carga inicial */
    .loader__actions { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: var(--space-4); }
    .loader__folder, .loader__lib { margin: 0; }

    /* enlace discreto "importar configuración" — solo en la primera ejecución */
    .loader__import-cfg {
      display: block; margin: var(--space-3) auto 0; padding: 0;
      background: none; border: none; cursor: pointer;
      font-size: var(--fs-small); color: var(--color-text-muted);
      text-decoration: underline; text-underline-offset: 2px;
    }
    .loader__import-cfg:hover { color: var(--acc); }

    /* ---- carátula difuminada tras el visualizador ---- */
    .viz-cover {
      position: absolute; inset: 0; z-index: 0;
      width: 100%; height: 100%; object-fit: cover;
      opacity: 0; transform: scale(1.18);
      filter: blur(16px) saturate(1.15);
      transition: opacity var(--dur-slow) var(--ease-out);
      pointer-events: none;
    }
    .viz-cover.is-set { opacity: 0.22; }
    .deck__viz canvas { z-index: 1; }   /* viz/onda por encima de la carátula */

    /* toggle de carátula en el selector de visualizaciones */
    .viz-cover-toggle.is-on {
      background: var(--acc); color: var(--acc-ink);
      border-color: var(--acc); box-shadow: var(--glow-acc);
    }

    /* ---- cabecera de opciones: grupo ayuda + cerrar ---- */
    .modal__head-actions { display: flex; align-items: center; gap: var(--space-2); }

    /* ---- modal de ayuda ---- */
    #helpModal { z-index: 340; }
    .help-body { text-align: left; display: flex; flex-direction: column; gap: var(--space-3); }
    .help-body h4 {
      margin: var(--space-3) 0 0;
      font-family: var(--font-display); font-size: var(--fs-small);
      letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--acc);
    }
    .help-body p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); line-height: var(--lh-body); text-wrap: pretty; }
    .help-body b { color: var(--color-text); font-weight: var(--fw-semi); }

/* ============================ AJUSTES VISUALES EXTRA ============================ */
.loader__lib {
  background: var(--acc);
  color: var(--acc-ink);
  box-shadow: var(--btn-edge), var(--glow-acc);
}
.loader__lib:active { box-shadow: var(--btn-edge-press), var(--glow-acc); }

.lib-tabs { gap: var(--space-2); }
.lib-tab {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: var(--fw-bold);
}
.lib-tab--active { background: var(--acc-dim); }
.lib-tab:not(.lib-tab--active) { opacity: 0.75; }

#btnEject {
  background: var(--acc);
  color: var(--acc-ink);
  box-shadow: var(--btn-edge), var(--glow-acc);
}
#btnEject:hover, #btnEject:active { background: var(--acc); filter: brightness(1.08); }

.chip {
  min-height: 40px;
  padding: 0 var(--space-5);
  font-size: var(--fs-small, 13px);
  letter-spacing: 1.5px;
}
    /* ---- Selector de modelos de stems (diseño propio) ---- */
    .stm-modelbtn {
      display: flex; align-items: center; gap: 8px; width: 100%;
      padding: 10px 12px; margin-top: 6px;
      background: var(--color-surface-raised); color: var(--color-text);
      border: 1px solid var(--color-border); border-radius: var(--radius-md);
      font: inherit; cursor: pointer; text-align: left;
    }
    .stm-modelbtn__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stm-modelbtn__chev { color: var(--neon-cyan); font-size: 12px; }
    .stm-modelpanel {
      margin-top: 6px; max-height: 320px; overflow-y: auto;
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--radius-md); padding: 6px;
    }
    .stm-tierlabel {
      font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .06em;
      color: var(--color-text-faint); padding: 8px 8px 4px; text-transform: uppercase;
    }
    .stm-mrow {
      display: flex; flex-direction: column; gap: 4px;
      padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
      border: 1px solid transparent;
    }
    .stm-mrow__l1 { display: flex; align-items: center; gap: 8px; }
    .stm-mrow__l2 { display: flex; align-items: center; gap: 10px; padding-left: 26px; }
    .stm-mrow__l2 .stm-mrow__desc { flex: 1; min-width: 0; }
    .stm-time-val {
      width: 52px; flex-shrink: 0; text-align: right;
      font-size: 13px; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
      color: var(--neon-cyan);
    }
    .stm-swap { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--color-text-faint); padding: 0 2px; }
    .stm-swap--on { color: var(--neon-amber); }
    .stm-mrow:hover { background: var(--color-surface-raised); }
    .stm-mrow--sel { border-color: var(--acc); background: rgba(0,255,65,.07); }
    .stm-mrow__meta { flex: 1; min-width: 0; }
    .stm-mrow__name { flex: 1; min-width: 0; font-weight: var(--fw-semi); font-size: 14px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; }
    .stm-mrow__name .star { color: var(--neon-amber); }
    .stm-mrow__desc { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
    .stm-mrow__right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
    .stm-badge {
      font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em;
      padding: 3px 7px; border-radius: var(--radius-pill); text-transform: uppercase;
    }
    .stm-badge--ok { color: var(--acc-ink); background: var(--acc); }
    .stm-badge--sel { color: var(--neon-cyan); border: 1px solid var(--neon-cyan); }
    .stm-dlbtn {
      font-size: 12px; font-weight: var(--fw-semi); padding: 6px 10px;
      border-radius: var(--radius-sm); border: 1px solid var(--neon-cyan);
      background: transparent; color: var(--neon-cyan); cursor: pointer;
    }
    .stm-dlbtn:disabled { opacity: .5; cursor: default; }
    .stm-mrow__prog { width: 88px; }
    .stm-mrow__bar {
      height: 5px; border-radius: var(--radius-pill); overflow: hidden;
      background: var(--color-surface-raised); border: 1px solid var(--color-border);
    }
    .stm-mrow__fill { height: 100%; width: 0%; background: var(--neon-cyan); transition: width .15s ease; }
    .stm-mrow__pct { font-size: 10px; color: var(--color-text-faint); text-align: right; margin-top: 2px; }

    /* cronómetro de separación de stems */
    .stm-time { margin-top: 6px; font-size: 13px; color: var(--neon-cyan); font-variant-numeric: tabular-nums; }
    .stm-time--done { color: var(--acc); font-weight: var(--fw-semi); }

    /* favorito + borrar en filas de modelo */
    .stm-fav { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--color-text-faint); padding: 0 2px; }
    .stm-fav--on { color: var(--neon-amber); }
    .stm-delbtn { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; opacity: .7; padding: 0 2px; }
    .stm-delbtn:hover { opacity: 1; }

    /* botones de reordenar carpetas raíz */
    .lib-row__move { background: none; border: none; cursor: pointer; color: var(--neon-cyan); font-size: 12px; line-height: 1; padding: 4px 5px; flex-shrink: 0; }
    .lib-row__move:disabled { opacity: .25; cursor: default; }

    /* añadir carpetas comunes por ruta (explorador) */
    .lib-quickadd { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 4px 10px; }
    .lib-quickadd__chip {
      font-size: 12px; font-weight: var(--fw-semi); padding: 6px 10px;
      border-radius: var(--radius-pill); cursor: pointer;
      background: var(--color-surface-raised); color: var(--neon-cyan);
      border: 1px solid var(--color-border);
    }
    .lib-quickadd__chip:active { background: var(--color-surface); }