/* ════════════════════════════════════════════════════════════════
   INDUSTRIAL PALETTE — BASE DEFAULT
   Exactamente la paleta mostrada: #121212 / #1E1E1E / #2A2A2A / #3A3A3A
   Se aplica antes que cualquier otro token, sin depender de JS.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --bg:    #121212;
  --bg2:   #1E1E1E;
  --bg3:   #2A2A2A;
  --bg4:   #3A3A3A;
  --panel: #0F0F0F;

  /* ── Text ── */
  --text:  #EAEAEA;
  --text2: #A0A0A0;
  --text3: #6E6E6E;

  /* ── Borders ── */
  --border:  rgba(58,58,58,.85);
  --border2: #3A3A3A;
}

/* ════════════════════════════════════════════════════════════════
   EHDARKMUSE v2.8 — UNIFIED PALETTE
   ════════════════════════════════════════════════════════════════
   Pulls Normal Mode (gold-accented) and Simple Mode (purple-accented)
   into the same color family: purple primary + cyan secondary.
   Loaded LAST so it cascades over earlier rules.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Core accents */
  --ehdm-purple:     #8b5cf6;
  --ehdm-purple-2:   #a78bfa;
  --ehdm-purple-3:   #6d3fdf;
  --ehdm-purple-dim: rgba(139, 92, 246, .12);
  --ehdm-purple-mid: rgba(139, 92, 246, .45);

  --ehdm-cyan:       #22d3ee;
  --ehdm-cyan-2:     #67e8f9;
  --ehdm-cyan-3:     #0891b2;
  --ehdm-cyan-dim:   rgba(34, 211, 238, .10);
  --ehdm-cyan-mid:   rgba(34, 211, 238, .40);

  /* Backgrounds harmonized */
  --ehdm-bg-deepest: #06060c;
  --ehdm-bg-deep:    #0c0c14;
  --ehdm-bg-panel:   #131321;
  --ehdm-bg-card:    #1a1a2c;
  --ehdm-bg-elev:    #21213a;

  --ehdm-border-1:   rgba(255,255,255,.06);
  --ehdm-border-2:   rgba(255,255,255,.10);
  --ehdm-border-3:   rgba(255,255,255,.14);

  /* Text */
  --ehdm-text:       #e8e6ee;
  --ehdm-text-2:     #a9a4b5;
  --ehdm-text-3:     rgba(255,255,255,.42);

  /* Re-point the legacy gold tokens to purple so Normal Mode adopts the
     same family as Simple Mode without touching every component. */
  --gold:            var(--ehdm-purple);
  --gold2:           var(--ehdm-purple-2);
  --gold3:           var(--ehdm-purple-mid);
}

/* ── 1. Logo accents ──────────────────────────────────────────── */
.ls-logo-text > span {
  color: var(--ehdm-purple-2) !important;
}

/* ── 2. Normal Mode top bar GENERATE / EXPORT pills ───────────── */
.app-topbar .btn.gold,
#genMainBtn,
.gen-btn,
.gen-btn.idle {
  background: linear-gradient(180deg, var(--ehdm-purple), var(--ehdm-purple-3)) !important;
  border: 1px solid var(--ehdm-purple-mid) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
  box-shadow: 0 2px 14px rgba(139,92,246,.30),
              inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.app-topbar .btn.gold:hover,
#genMainBtn:hover,
.gen-btn:hover {
  background: linear-gradient(180deg, var(--ehdm-purple-2), var(--ehdm-purple)) !important;
  box-shadow: 0 4px 18px rgba(139,92,246,.45),
              inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* ── 3. Step indicator (Normal Mode stepper) ──────────────────── */
.step.active .step-num {
  background: linear-gradient(180deg, var(--ehdm-purple), var(--ehdm-purple-3)) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(139,92,246,.45) !important;
  border-color: var(--ehdm-purple-mid) !important;
}

/* ── 4. Intensity gauge knob/arc ──────────────────────────────── */
#gaugeArc { stroke: var(--ehdm-purple-2) !important; }
#gaugeKnob { fill: var(--ehdm-purple-2) !important; }
.gauge-pct { color: var(--ehdm-purple-2) !important; }

/* ── 5. Project chips (BPM / KEY / GENRE) ─────────────────────── */
.proj-chip-bpm {
  background: var(--ehdm-purple-dim) !important;
  border-color: var(--ehdm-purple-mid) !important;
  color: var(--ehdm-purple-2) !important;
}
.proj-chip-key {
  background: var(--ehdm-cyan-dim) !important;
  border-color: var(--ehdm-cyan-mid) !important;
  color: var(--ehdm-cyan-2) !important;
}
.proj-chip-genre {
  background: rgba(167,139,250,.10) !important;
  border-color: rgba(167,139,250,.35) !important;
  color: var(--ehdm-purple-2) !important;
}

/* ── 6. Sidebar emotion buttons active ────────────────────────── */
.em-btn2.active,
.em-btn.active {
  border-color: var(--ehdm-purple-mid) !important;
  background: var(--ehdm-purple-dim) !important;
}
.em-btn2.active .em-btn2-name {
  color: var(--ehdm-purple-2) !important;
}

/* ── 7. Genre trigger button ──────────────────────────────────── */
.genre-trigger {
  border-color: var(--ehdm-purple-mid) !important;
}
.genre-trigger:hover {
  background: var(--ehdm-purple-dim) !important;
}

/* ── 8. Quick actions sidebar buttons hover/active accent ─────── */
.qa-btn2:hover .qa2-icon,
.qa-btn2:hover .qa2-label,
.qa2-badge {
  color: var(--ehdm-purple-2) !important;
}
.qa2-badge {
  background: var(--ehdm-purple-dim) !important;
  border-color: var(--ehdm-purple-mid) !important;
}

/* ── 9. INTENSITY label All/Global ────────────────────────────── */
.arc-mode-btn.active {
  background: var(--ehdm-purple-dim) !important;
  border-color: var(--ehdm-purple-mid) !important;
  color: var(--ehdm-purple-2) !important;
}

/* ── 10. Toggle (Advanced Mode) ───────────────────────────────── */
.mode-label::after {
  background: linear-gradient(180deg, var(--ehdm-purple-2), var(--ehdm-purple-3)) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4),
              0 0 6px rgba(139,92,246,.4) !important;
}

/* ── 11. GLOBAL PROMPT footer card — clearly bounded ──────────── */
.gp-footer {
  background: linear-gradient(180deg,
              rgba(26,26,44,.95),
              rgba(19,19,33,.95)) !important;
  border: 1px solid var(--ehdm-purple-mid) !important;
  border-radius: 10px !important;
  margin: 8px 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 0 24px rgba(139,92,246,.10),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
  position: relative !important;
}
.gp-footer-lbl {
  color: var(--ehdm-purple-2) !important;
  letter-spacing: 2.5px !important;
}
.gp-compose-btn {
  background: linear-gradient(180deg,
              rgba(139,92,246,.22),
              rgba(109,63,223,.10)) !important;
  border: 1px solid var(--ehdm-purple-mid) !important;
  color: var(--ehdm-purple-2) !important;
}
.gp-compose-btn:hover {
  background: linear-gradient(180deg,
              rgba(139,92,246,.32),
              rgba(109,63,223,.18)) !important;
  border-color: var(--ehdm-purple-2) !important;
  color: #fff !important;
}
.gp-compose-sub {
  color: rgba(167,139,250,.65) !important;
}
.gp-ready::before {
  background: var(--ehdm-cyan) !important;
  box-shadow: 0 0 8px rgba(34,211,238,.7) !important;
}

/* ── 12. Section quick-jump buttons (active) ──────────────────── */
.sec-jump-btn.active {
  color: var(--ehdm-purple-2) !important;
  border-color: var(--ehdm-purple-mid) !important;
  background: var(--ehdm-purple-dim) !important;
}

/* ── 13. Inspector / context panel accents ────────────────────── */
.inspector-tab-btn.active,
.itab.active {
  color: var(--ehdm-purple-2) !important;
  border-bottom-color: var(--ehdm-purple-2) !important;
}

/* ── 14. Preview bar play button (Normal Mode) ────────────────── */
.preview-play {
  background: var(--ehdm-purple) !important;
}
.preview-play:hover {
  background: var(--ehdm-purple-2) !important;
}

/* ── 15. ASSISTANT pill in top bar ────────────────────────────── */
.asst-toggle-btn {
  border-color: var(--ehdm-purple-mid) !important;
}
.asst-toggle-btn .asst-toggle-dot {
  background: var(--ehdm-cyan) !important;
  box-shadow: 0 0 6px rgba(34,211,238,.6) !important;
}

/* ── 16. Cell edit modal — make the Alyx semantic chips cyan ──── */
.cedit-chip {
  background: rgba(34,211,238,.06) !important;
  border: 1px solid rgba(34,211,238,.18) !important;
  transition: all .12s !important;
}
.cedit-chip:hover {
  background: var(--ehdm-cyan-dim) !important;
  border-color: var(--ehdm-cyan-mid) !important;
  color: var(--ehdm-cyan-2) !important;
}
.cedit-rel-lbl.similar  { color: var(--ehdm-cyan-2) !important; }
.cedit-rel-lbl.amplify  { color: var(--ehdm-purple-2) !important; }
.cedit-rel-lbl.attenuate{ color: rgba(167,139,250,.6) !important; }
.cedit-rel-lbl.contrast { color: #f0abfc !important; }
.cedit-rel-lbl.pair     { color: var(--ehdm-cyan-2) !important; }
.cedit-overlay .btn.accent {
  background: linear-gradient(180deg, var(--ehdm-purple), var(--ehdm-purple-3)) !important;
  border-color: var(--ehdm-purple-mid) !important;
  color: #fff !important;
}

/* ── 17. Generic .btn.accent and .btn.gold across the app ─────── */
.btn.accent,
.btn.gold {
  background: linear-gradient(180deg,
              rgba(139,92,246,.20),
              rgba(109,63,223,.08)) !important;
  border-color: var(--ehdm-purple-mid) !important;
  color: var(--ehdm-purple-2) !important;
}
.btn.accent:hover,
.btn.gold:hover {
  background: linear-gradient(180deg,
              rgba(139,92,246,.32),
              rgba(109,63,223,.16)) !important;
  color: #fff !important;
}

/* ── 18. Simple Mode randomize button pulse animation ─────────── */
@keyframes ehdmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}
.sr-random-btn.ehdm-pulsing {
  animation: ehdmPulse 0.6s ease-out;
}
@keyframes ehdmCardFlash {
  0%   { box-shadow: 0 0 0 1px var(--ehdm-purple-mid),
                     0 0 22px rgba(139,92,246,.35); }
  100% { box-shadow: 0 0 0 1px transparent,
                     0 0 0 transparent; }
}
.sr-card.ehdm-flashing,
.sr-adv.ehdm-flashing {
  animation: ehdmCardFlash 0.9s ease-out;
}

/* ── 19. Simple Mode prompt panel — strengthened card ─────────── */
.sr-prompt {
  border: 1px solid var(--ehdm-purple-mid) !important;
  background: linear-gradient(180deg,
              rgba(26,26,44,.95),
              rgba(19,19,33,.92)) !important;
  box-shadow: 0 0 30px rgba(139,92,246,.10),
              inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.sr-prompt-lbl {
  color: var(--ehdm-purple-2) !important;
}

/* ── 20. Keyboard hint chip (used in tooltips) ────────────────── */
.ehdm-kbd {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1px 5px;
  margin-left: 4px;
  background: rgba(34,211,238,.10);
  border: 1px solid rgba(34,211,238,.25);
  border-radius: 3px;
  color: var(--ehdm-cyan-2);
}

/* ── 21. SAVE indicator color when freshly saved ──────────────── */
#lastSavedIndicator[data-state="fresh"] {
  color: var(--ehdm-cyan-2) !important;
}