/* ══ css/base/styles.css ══ */
/* ═══════════════════════════════════════════════
   DarkMuse — All Styles (extracted from monolith)
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   DarkMuse v21 — Design System
═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#18181e;--bg2:#1e1e26;--bg3:#252532;--bg4:#2e2e3c;
  --panel:#111116;
  --crimson:#e84a60;--crimson2:#f06070;--crimson3:#ff7085;
  --gold:#e8b84b;--gold2:#f0c860;--gold3:#f8d870;
  --text:#f0ead8;--text2:#b8b0a2;--text3:#8c8490;
  --border:#28283a;--border2:#36364a;
  --track-h:100px;--arc-h:110px;
  --lsidebar-w:210px;--rpanel-w:256px;
  --transport-h:52px;
  --s0:#00c8c8;--s1:#4ac870;--s2:#e84a60;--s3:#a04ae8;--s4:#e8c04a;--s5:#4ad0d8;
  --ff-cinzel:'Palatino Linotype',Palatino,'Book Antiqua',Garamond,serif;
  --ff-crimson:'Georgia','Times New Roman',serif;
  --ff-mono:'Consolas','Monaco','Lucida Console',monospace;
}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:var(--ff-crimson);color:var(--text)}

/* ── APP LAYOUT ── */


/* ── LEFT SIDEBAR ── */

.lsidebar::-webkit-scrollbar{width:3px}.lsidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.ls-logo{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.ls-gem{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ls-gem img{width:36px;height:36px;object-fit:contain;display:block}
.ls-logo-text{font-family:var(--ff-cinzel);font-size:15px;font-weight:700;letter-spacing:2px;line-height:1.1;display:block}.ls-logo-text span{color:var(--gold)}
.ls-tag{font-size:11px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;display:block}
.ls-section{padding:12px 14px 8px;border-bottom:1px solid var(--border)}


/* Emotion buttons */
.em-grid{display:flex;flex-direction:column;gap:4px}

.em-btn2:hover{background:var(--bg4);border-color:var(--border2)}
.em-btn2.active{border-color:var(--gold);background:rgba(232,184,75,.12)}
.em-btn2-icon{font-size:20px;flex-shrink:0;line-height:1}

.em-btn2.active .em-btn2-name{color:var(--gold2)}

/* Arc gauge */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:8px 0 4px}
.gauge-svg{cursor:grab;touch-action:none;user-select:none}
.gauge-svg:active{cursor:grabbing}
.gauge-val-wrap{text-align:center;margin-top:-8px}



/* Sidebar controls */
.ls-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ls-ctrl-label{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;color:var(--text3);text-transform:uppercase;min-width:42px}

.ls-feel{font-family:var(--ff-cinzel);font-size:16px;color:var(--crimson3);letter-spacing:1px;min-width:64px}
.ls-slider{-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;background:var(--bg4);outline:none;cursor:pointer}
.ls-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid var(--bg)}
.ls-slider::-moz-range-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid var(--bg)}
.ls-select{background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:var(--ff-mono);font-size:14px;padding:4px 7px;border-radius:4px;outline:none;cursor:pointer;width:100%}
.ls-select option{background:var(--bg3)}
.ls-key-row{display:flex;gap:5px}
.ls-key-sel{flex:1;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:var(--ff-mono);font-size:14px;padding:4px 6px;border-radius:4px;outline:none;cursor:pointer}

/* Utilities */
.util-btn{display:flex;align-items:center;gap:6px;width:100%;padding:5px 8px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--text3);cursor:pointer;font-family:var(--ff-cinzel);font-size:10px;letter-spacing:0.8px;transition:.12s;text-align:left;margin-bottom:1px;line-height:1}
.util-btn:hover{background:var(--bg3);border-color:var(--border2);color:var(--text2)}
.util-btn-icon{font-size:11px;width:14px;text-align:center;flex-shrink:0;opacity:.6}

/* View switcher */
.view-sw{display:flex;gap:5px;margin-top:4px}
.view-btn{flex:1;padding:6px 4px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:pointer;font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;transition:.15s;text-align:center}
.view-btn:hover{background:var(--bg3);color:var(--text2)}
.view-btn.active{background:var(--bg4);border-color:var(--border2);color:var(--text)}

/* ── CENTER ── */


/* Top bar */
.app-topbar{height:58px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0}
.proj-input{background:none;border:1px solid transparent;font-family:var(--ff-cinzel);font-size:15px;color:var(--gold2);letter-spacing:1px;outline:none;min-width:180px;padding:3px 7px;border-radius:4px;transition:.2s}
.proj-input:hover,.proj-input:focus{border-color:var(--border2);background:var(--bg3)}
.style-sel{background:var(--bg3);border:1px solid var(--border2);color:var(--gold);font-family:var(--ff-cinzel);font-size:18px;letter-spacing:1px;padding:5px 10px 5px 8px;border-radius:5px;outline:none;cursor:pointer;text-transform:uppercase}
.style-sel option{background:var(--bg3);color:var(--text)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:7px}
.btn{padding:6px 14px;border-radius:5px;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1.5px;cursor:pointer;border:1px solid var(--border2);color:var(--text2);background:transparent;transition:.15s;text-transform:uppercase;white-space:nowrap}
.btn:hover{background:var(--bg4);color:var(--text)}
.btn.gold{border-color:var(--gold);color:var(--gold);font-weight:600}
.btn.gold:hover{background:rgba(232,184,75,.12)}
.btn.accent{background:var(--crimson);border-color:var(--crimson2);color:#fff}
.btn.accent:hover{background:var(--crimson2)}
.btn.guide{border-color:rgba(100,180,255,.4);color:rgba(120,190,255,.8)}
.btn.guide:hover{background:rgba(100,180,255,.08)}
/* Empty cell hover hint */
.seq-cell-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;opacity:0;transition:.15s;pointer-events:none}
.seq-cell[data-create-tid]:hover .seq-cell-empty{opacity:1}
.seq-cell-add-lbl{font-family:var(--ff-cinzel);font-size:15px;letter-spacing:1px;color:var(--text3);text-transform:uppercase}
/* Instrument column header tooltip */
.track-col-hdr{position:relative}
.track-col-hdr::after{content:attr(title);position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--border2);border-radius:4px;padding:4px 8px;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:.5px;color:var(--text2);white-space:nowrap;pointer-events:none;opacity:0;transition:.15s;z-index:50}
.track-col-hdr:hover::after{opacity:1}
/* Selected cell highlight */
.seq-cell.selected .seq-cell-inner{outline:2px solid var(--gold);outline-offset:-2px;border-radius:4px}
.btn-icon{width:28px;height:28px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:.15s}
.btn-icon:hover{background:var(--bg4);color:var(--text2)}
.btn-icon:disabled{opacity:.2;cursor:default}

/* Progress stepper */
.stepper{display:flex;align-items:stretch;padding:0 16px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;height:62px}
.step{display:flex;align-items:center;gap:10px;padding:0 14px;flex:1;cursor:pointer;transition:.15s;position:relative;border-radius:0}
.step:hover{background:rgba(255,255,255,.03)}
.step.active{background:rgba(232,184,75,.06)}
.step-num{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--text3);display:flex;align-items:center;justify-content:center;font-family:var(--ff-cinzel);font-size:16px;color:var(--text3);flex-shrink:0;transition:.15s}
.step.active .step-num{background:var(--gold);border-color:var(--gold);color:#1a1a20;font-weight:700}
.step-content{display:flex;flex-direction:column;gap:2px}

.step.active .step-title{color:var(--gold)}

.step-arrow{color:var(--text3);font-size:18px;padding:0 4px;align-self:center;flex-shrink:0}
.gen-btn{margin-left:12px;background:var(--gold);border:none;border-radius:7px;padding:0 20px;font-family:var(--ff-cinzel);font-size:18px;letter-spacing:2px;color:#1a1a20;cursor:pointer;font-weight:700;text-transform:uppercase;transition:.15s;height:40px;white-space:nowrap;align-self:center;flex-shrink:0}
.gen-btn:hover{background:var(--gold2)}

/* ── SEQUENCER ── */
.sequencer-wrap{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
.seq-timeline{height:36px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;flex-shrink:0;position:relative;overflow:hidden}
.seq-timeline-offset{width:180px;flex-shrink:0;border-right:1px solid var(--border);display:flex;align-items:center;padding-left:12px;font-family:var(--ff-cinzel);font-size:15px;letter-spacing:2px;color:var(--text3);text-transform:uppercase}
.seq-timeline-marks{flex:1;position:relative}
.seq-time-mark{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-family:var(--ff-mono);font-size:16px;color:var(--text3)}
.seq-time-mark::before{content:'';position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--border2)}

/* Arc bar (intensity curve) */
.arc-bar{height:var(--arc-h);flex-shrink:0;position:relative;background:var(--bg);border-bottom:1px solid var(--border);overflow:hidden;cursor:crosshair;user-select:none}
.arc-canvas{position:absolute;inset:0;width:100%;height:100%}
.arc-bar-labels{position:absolute;top:5px;left:8px;display:flex;align-items:center;gap:10px;pointer-events:none}
.arc-label{font-family:var(--ff-cinzel);font-size:15px;letter-spacing:2px;color:var(--text3);text-transform:uppercase}
.arc-feedback{position:absolute;bottom:6px;left:8px;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;pointer-events:none;transition:.4s}
.arc-legend{position:absolute;top:4px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none;max-width:180px}
.arc-legend-item{display:flex;align-items:center;gap:3px;font-size:18px;transition:.2s;user-select:none}
.arc-mode-btn{font-family:var(--ff-cinzel);font-size:15px;letter-spacing:1px;color:var(--text3);background:var(--bg3);border:1px solid var(--border2);border-radius:3px;padding:2px 7px;cursor:pointer;pointer-events:all;transition:.15s}
.arc-mode-btn:hover{color:var(--text)}.arc-mode-btn.active{color:var(--gold2);border-color:var(--gold)}
.arc-fs-btn{position:absolute;bottom:5px;right:8px;font-family:var(--ff-cinzel);font-size:15px;letter-spacing:1px;color:var(--text3);background:var(--bg3);border:1px solid var(--border2);border-radius:3px;padding:2px 8px;cursor:pointer;pointer-events:all;transition:.15s}
.arc-fs-btn:hover{color:var(--gold2);border-color:var(--gold)}
.arc-hint{position:absolute;bottom:5px;left:8px;font-size:16px;color:var(--text3);letter-spacing:.3px;pointer-events:none;font-family:var(--ff-cinzel)}

/* Track column headers */
.track-col-headers{display:flex;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0}
.track-col-hdr-offset{width:180px;flex-shrink:0;border-right:1px solid var(--border);display:flex;align-items:center;padding:0 12px;font-family:var(--ff-cinzel);font-size:15px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;height:36px}
.track-col-hdr{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:4px;border-right:1px solid var(--border);height:36px;cursor:pointer;transition:.12s}
.track-col-hdr:hover{background:var(--bg3)}
.track-col-hdr-icon{font-size:16px;line-height:1}
.track-col-hdr-name{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:1px;color:var(--text3);text-transform:uppercase}
.track-col-hdr.muted{opacity:.3}
.track-col-hdr.soloed .track-col-hdr-name{color:rgba(80,220,80,.9)}

/* Sequencer rows (sections as rows) */
.seq-rows{scrollbar-width:thin;scrollbar-color:var(--border2) transparent;min-height:0;flex:1;overflow-y:auto;overflow-x:hidden}
.seq-rows::-webkit-scrollbar{width:4px}.seq-rows::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.seq-row{min-width:0;display:flex;border-bottom:1px solid var(--border);height:var(--track-h);position:relative}
.seq-row-label{width:180px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 8px 0 10px;border-right:1px solid var(--border);background:var(--panel);position:relative}
.seq-row-stripe{position:absolute;left:0;top:0;bottom:0;width:3px}
.seq-row-icon{width:36px;height:36px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;overflow:hidden}
.seq-row-info{min-width:0}

.seq-row-time{font-family:var(--ff-mono);font-size:11px;color:var(--text3);margin-top:2px}
.seq-row-del{display:none;position:absolute;top:5px;right:5px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:2px;transition:.15s}
.seq-row-label:hover .seq-row-del{display:flex}
.seq-row-del:hover{color:var(--crimson3)}
.seq-row-cells{flex:1;display:flex}

/* Sequencer cells */
.seq-cell{flex:1;border-right:1px solid var(--border);position:relative;cursor:pointer;overflow:hidden;transition:.12s}
.seq-cell:hover{brightness:1.1}
.seq-cell-add{font-size:16px;color:var(--text3)}
.seq-cell-inner{padding:8px 9px 5px;height:100%;display:flex;flex-direction:column;position:relative}
.seq-cell-title{font-family:var(--ff-cinzel);font-size:13px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.7;overflow:hidden;display:-webkit-box;display:-moz-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;-moz-box-orient:vertical}
.seq-cell-sub{font-size:12px;color:rgba(255,255,255,.5);font-style:italic;line-height:1.7;margin-top:2px;overflow:hidden;display:-webkit-box;display:-moz-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;-moz-box-orient:vertical;flex:1}
.seq-cell-waveform{position:absolute;bottom:0;left:0;right:0;height:22px;pointer-events:none;opacity:.5}
.seq-cell-menu{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.3);border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:16px;padding:1px 4px;border-radius:3px;transition:.15s;opacity:0;line-height:1}
.seq-cell:hover .seq-cell-menu{opacity:1}
.seq-cell-menu:hover{background:rgba(0,0,0,.6);color:rgba(255,255,255,.9)}
.seq-cell.selected{outline:2px solid var(--gold);outline-offset:-2px}
.seq-cell.is-muted .seq-cell-inner{opacity:.18;pointer-events:none}
.seq-cell.is-muted .seq-cell-empty{display:none}
.seq-cell.drag-over{outline:2px dashed var(--gold);outline-offset:-2px;background:rgba(232,184,75,.08)!important}

/* Section colors for cells */
.seq-cell.s0{background:rgba(0,200,200,.14)}
.seq-cell.s1{background:rgba(74,200,112,.14)}
.seq-cell.s2{background:rgba(232,74,96,.18)}
.seq-cell.s3{background:rgba(160,74,232,.14)}
.seq-cell.s4{background:rgba(232,192,74,.16)}
.seq-cell.s5{background:rgba(74,208,216,.14)}

/* Add section bar */
.seq-add-row{display:flex;align-items:center;border-top:1px solid var(--border);background:var(--panel);flex-shrink:0}
.seq-add-sec{padding:8px 16px;cursor:pointer;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;transition:.15s;display:flex;align-items:center;gap:6px}
.seq-add-sec:hover{color:var(--gold);background:rgba(232,184,75,.05)}

/* Template panel */
.tpl-panel{position:absolute;top:100%;left:0;min-width:210px;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;z-index:200;padding:5px;box-shadow:0 8px 32px rgba(0,0,0,.7);display:none}
.tpl-panel.open{display:block;animation:fadeIn .12s ease}
.tpl-title{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;padding:3px 8px 5px;border-bottom:1px solid var(--border);margin-bottom:3px}
.tpl-opt{padding:7px 9px;border-radius:4px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:1px}
.tpl-opt:hover{background:var(--bg4)}
.tpl-opt-name{font-family:var(--ff-cinzel);font-size:14px;letter-spacing:1px;color:var(--text)}
.tpl-opt-desc{font-size:18px;color:var(--text3);font-style:italic}
.tpl-sep{height:1px;background:var(--border);margin:3px 0}
.tpl-custom{padding:6px 9px;border-radius:4px;cursor:pointer;transition:.15s;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;color:var(--text3)}
.tpl-custom:hover{background:var(--bg4);color:var(--text2)}

/* ── RIGHT PANEL ── */
.rpanel{width:var(--rpanel-w);flex-shrink:0;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.rp-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.rp-tab{flex:1;padding:10px;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);cursor:pointer;text-align:center;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.rp-tab:hover{color:var(--text2)}.rp-tab.on{color:var(--gold2);border-bottom-color:var(--gold2)}
.rp-body{scrollbar-width:thin;scrollbar-color:var(--border2) transparent;flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px}
.rp-body::-webkit-scrollbar{width:3px}.rp-body::-webkit-scrollbar-thumb{background:var(--border2)}
.rp-section{margin-bottom:16px}
.rp-label{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin-bottom:7px}
.rp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;opacity:.4}
.rp-empty-icon{font-size:16px;margin-bottom:10px;opacity:.4}
.rp-empty-text{font-size:15px;color:var(--text3);line-height:1.8;font-style:italic}
.rp-prompt-box{background:var(--bg3);border:1px solid var(--border2);border-radius:5px;padding:10px 12px;font-family:var(--ff-crimson);font-size:16px;color:var(--text);line-height:1.7;min-height:60px}
.rp-context{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;color:var(--gold2);text-transform:uppercase;margin-bottom:2px}
.rp-sub{font-size:18px;color:var(--text3)}
.insp-ta{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--text);font-family:var(--ff-crimson);font-size:16px;line-height:1.7;padding:8px 10px;resize:none;outline:none;min-height:72px;transition:border-color .15s}
.insp-ta:focus{border-color:var(--gold)}
.insp-ta::placeholder{color:var(--text3);font-style:italic}
.insp-slider{-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;background:var(--bg4);outline:none;cursor:pointer;margin-bottom:5px}
.insp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--crimson);border:2px solid var(--bg);cursor:pointer;transition:.15s}
.insp-slider::-moz-range-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--crimson);border:2px solid var(--bg);cursor:pointer;transition:.15s}
.insp-slider::-webkit-slider-thumb:hover{background:var(--crimson2)}
.insp-slider-labels{display:flex;justify-content:space-between;font-size:16px;color:var(--text3);font-family:var(--ff-cinzel);letter-spacing:.5px}
.insp-intensity-score{color:var(--crimson3);font-family:var(--ff-mono);font-size:18px}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
/* ══ INSPECTOR PANEL REDESIGN ══ */
.insp-header{padding:12px 14px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.insp-inst-name{font-family:var(--ff-cinzel);font-size:14px;letter-spacing:1.5px;color:var(--text);text-transform:uppercase}
.insp-inst-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.insp-sec-name{font-size:11px;color:var(--text3);letter-spacing:1px;margin-top:2px;font-style:italic}
.insp-separator{font-family:var(--ff-cinzel);font-size:14px;color:var(--text3);margin:0 6px}
.insp-section-lbl{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin:10px 0 6px;display:flex;align-items:center;gap:8px}
.insp-section-lbl::after{content:'';flex:1;height:1px;background:var(--border)}

/* Transform buttons redesign */
.qa-btn{padding:7px 5px;border-radius:5px;font-family:var(--ff-cinzel);font-size:9px;letter-spacing:.8px;cursor:pointer;border:1px solid var(--border2);color:var(--text2);background:var(--bg3);transition:.15s;text-align:center;text-transform:uppercase;line-height:1.3;display:flex;flex-direction:column;align-items:center;gap:2px}
.qa-btn:hover{background:var(--bg4);color:var(--text)}
.qa-btn .qa-icon{font-size:14px}
.qa-btn:hover{background:var(--bg4);color:var(--text)}
.qa-btn.qa-intensify{border-color:rgba(232,74,96,.4);color:rgba(255,120,130,.85)}
.qa-btn.qa-intensify:hover{background:rgba(232,74,96,.12)}
.qa-btn.qa-simplify{border-color:rgba(74,208,216,.3);color:rgba(100,230,240,.8)}
.qa-btn.qa-simplify:hover{background:rgba(74,208,216,.08)}
.qa-btn.qa-darker{border-color:rgba(160,74,232,.4);color:rgba(200,130,255,.8)}
.qa-btn.qa-darker:hover{background:rgba(160,74,232,.1)}
.qa-btn.qa-epic{border-color:rgba(232,184,75,.4);color:rgba(248,220,90,.85)}
.qa-btn.qa-epic:hover{background:rgba(232,184,75,.1)}
.qa-btn.qa-atmospheric{border-color:rgba(74,154,232,.4);color:rgba(110,195,255,.8)}
.qa-btn.qa-atmospheric:hover{background:rgba(74,154,232,.1)}
.qa-btn.qa-random{border-color:rgba(74,200,112,.3);color:rgba(100,230,140,.8)}
.qa-btn.qa-random:hover{background:rgba(74,200,112,.08)}

/* ── Transform Currents — replaces emoji button grid ────────── */
.tc-currents{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.tc-current{
  display:flex;align-items:baseline;gap:7px;
  padding:5px 4px;
  cursor:pointer;border-radius:3px;
  transition:background 0.15s ease;
}
.tc-current:hover{background:rgba(255,255,255,0.04)}
.tc-arrow{
  font-family:var(--ff-cinzel);font-size:11px;
  color:rgba(255,255,255,0.28);
  min-width:12px;text-align:center;
  flex-shrink:0;
}
.tc-name{
  font-family:var(--ff-cinzel);font-size:9px;
  letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  min-width:62px;flex-shrink:0;
}
.tc-desc{
  font-family:var(--ff-crimson,Georgia,serif);font-size:10.5px;
  font-style:italic;
  color:rgba(255,255,255,0.22);
  letter-spacing:0.2px;
}
.tc-current:hover .tc-name{color:rgba(255,255,255,0.80)}
.tc-current:hover .tc-arrow{color:rgba(255,255,255,0.55)}
.tc-current:hover .tc-desc{color:rgba(255,255,255,0.38)}
.tc-drift{
  font-family:var(--ff-crimson,Georgia,serif);font-size:10px;
  font-style:italic;
  color:rgba(255,255,255,0.18);
  letter-spacing:1px;
  cursor:pointer;padding:5px 4px;
  border-radius:3px;
  transition:color 0.15s ease;
  margin-top:2px;
}
.tc-drift:hover{color:rgba(255,255,255,0.50)}
.sug-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s}
.sug-item:last-child{border-bottom:none}
.sug-item:hover{background:var(--bg3);margin:0 -14px;padding:6px 14px}
.sug-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.sug-dot.high{background:var(--crimson)}.sug-dot.mid{background:var(--gold)}.sug-dot.low{background:#4ad0d8}.sug-dot.subtle{background:#4ac870}
.sug-text{font-family:var(--ff-crimson);font-size:15px;color:var(--text2);font-style:italic;line-height:1.7;flex:1}
.sug-item:hover .sug-text{color:var(--text)}
.sug-intensity{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
.sug-intensity.high{color:var(--crimson)}.sug-intensity.mid{color:var(--gold)}.sug-intensity.low{color:#4ad0d8}.sug-intensity.subtle{color:#4ac870}
.kw{font-size:18px;padding:3px 9px;border-radius:3px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);cursor:pointer;font-family:var(--ff-cinzel);letter-spacing:.3px;transition:.15s}
.kw:hover{border-color:var(--crimson);color:var(--crimson3)}
.insp-delete{width:100%;padding:8px;border-radius:4px;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;cursor:pointer;border:1px solid rgba(232,74,96,.3);color:rgba(232,100,110,.65);background:transparent;transition:.15s;text-transform:uppercase}
.insp-delete:hover{background:rgba(232,74,96,.1);color:var(--crimson3);border-color:var(--crimson)}

/* Right panel platform/prompt section */
.rp-plat-row{display:flex;gap:4px;padding:8px 14px;border-top:1px solid var(--border);flex-shrink:0;align-items:center;background:var(--bg2)}
.rp-ref-row{display:flex;align-items:center;gap:8px;padding:5px 14px;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg2)}
.prompt-out{font-family:var(--ff-crimson);font-size:16px;line-height:1.8;color:var(--text)}
.prompt-out .stag{color:var(--gold2);font-weight:600}
.stag.peak{color:var(--crimson3)!important}
.prompt-out .itag{color:var(--crimson3)}
.prompt-plat-style{display:block;color:var(--gold3);font-family:var(--ff-mono);font-size:18px;margin-bottom:6px;line-height:1.7;white-space:pre-wrap}
.rp-actions{display:flex;gap:6px;padding:8px 14px;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg2);align-items:center}
.char-counter{font-family:var(--ff-mono);font-size:16px;color:var(--text3);margin-left:auto;letter-spacing:.3px;transition:.2s}
.char-counter.warn{color:rgba(232,192,50,.9)}.char-counter.over{color:var(--crimson3)}
.clip-pill{display:none;align-items:center;gap:5px;padding:2px 8px;border-radius:3px;background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.3);font-family:var(--ff-cinzel);font-size:15px;letter-spacing:1px;color:var(--gold2);white-space:nowrap}
.clip-pill.visible{display:flex}
.clip-pill-clear{cursor:pointer;color:var(--text3);font-size:16px;transition:.12s}.clip-pill-clear:hover{color:var(--text2)}

/* ── TRANSPORT BAR ── */
.transport-bar{position:fixed;bottom:0;left:0;right:0;height:var(--transport-h);background:var(--panel);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;z-index:100}
.t-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:.15s;flex-shrink:0}
.t-btn-play{background:var(--gold);color:#1a1a20;font-size:13px;font-weight:700}
.t-btn-play:hover{background:var(--gold2)}
.t-btn-stop{background:var(--bg4);color:var(--text2);font-size:11px;border:1px solid var(--border2)}
.t-btn-stop:hover{background:var(--bg4);color:var(--text)}

.t-sep{width:1px;height:20px;background:var(--border2)}

.t-waveform{flex:1;height:28px;background:var(--bg3);border-radius:4px;overflow:hidden;position:relative}
.t-waveform canvas{position:absolute;inset:0;width:100%;height:100%}
.t-vol-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.t-vol-icon{color:var(--text3);font-size:15px}
.t-vol-slider{-moz-appearance:none;-webkit-appearance:none;appearance:none;width:70px;height:3px;border-radius:2px;background:var(--bg4);outline:none;cursor:pointer}
.t-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text2);cursor:pointer;transition:.12s}
.t-vol-slider::-moz-range-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text2);cursor:pointer;transition:.12s}
.t-vol-slider::-webkit-slider-thumb:hover{background:var(--gold)}

/* ── VARIOUS KEPT ── */
.clip-ta{display:none;background:transparent;border:none;outline:none;font-family:var(--ff-crimson);font-size:16px;color:var(--text);resize:none;width:100%;line-height:1.7;flex:1;min-height:0}
.btn-tap{background:transparent;border:1px solid var(--border2);border-radius:4px;padding:3px 10px;font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;color:var(--text3);cursor:pointer;transition:.15s;flex-shrink:0}
.btn-tap:hover{background:var(--bg4);color:var(--text2)}.btn-tap.tapped{border-color:var(--gold);color:var(--gold2)}
.hsep{width:1px;height:26px;background:var(--border2)}
/* topbar icon groups — tighter intra-group gap, looser inter-group via .hsep */
.tb-group{display:flex;align-items:center;gap:4px}
.topbar-right{gap:8px !important}
/* kill the older mode-switcher wrapper. The eh-darkmuse-theme.js
   script inserts its own .alyx-mode-switcher above this wrapper; without
   this rule the wrapper's padding + border-bottom + ::after toggle pill
   from mockup-redesign.css create a phantom second "ADVANCED MODE" bar
   visible right under the new switcher. */
#modeSwitcherWrap{display:none !important}
#modeSwitcher{display:none !important}
.plat-btn{font-family:var(--ff-cinzel);font-size:15px;letter-spacing:1.5px;padding:4px 9px;border-radius:4px;border:1px solid var(--border2);color:var(--text3);background:transparent;cursor:pointer;transition:.15s;text-transform:uppercase}
.plat-btn:hover{background:var(--bg3);color:var(--text2)}.plat-btn.active{border-color:var(--gold);color:var(--gold2);background:rgba(232,184,75,.08)}
.ref-input{background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text2);font-family:var(--ff-crimson);font-size:15px;font-style:italic;outline:none;flex:1;padding:1px 4px;transition:.15s;min-width:0}
.ref-input:focus{border-color:var(--gold2);color:var(--text)}.ref-input::placeholder{color:var(--text3)}
.hist-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);transition:.12s}
.hist-item:last-child{border-bottom:none}
.hist-time{font-family:var(--ff-mono);font-size:16px;color:var(--text3);flex-shrink:0;margin-top:3px}
.hist-text{font-family:var(--ff-crimson);font-size:15px;color:var(--text2);line-height:1.7;flex:1;overflow:hidden;display:-webkit-box;display:-moz-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;-moz-box-orient:vertical}
.hist-copy{font-size:16px;padding:2px 7px;border-radius:3px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:pointer;font-family:var(--ff-cinzel);flex-shrink:0;transition:.15s}
.hist-copy:hover{background:var(--bg4);color:var(--text2)}
.hist-empty{font-family:var(--ff-crimson);font-size:16px;color:var(--text3);font-style:italic}
.mute-status{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;color:var(--text3)}
.mute-status span{color:var(--gold2)}

/* Rename input for sections */
.sec-rename-input{background:transparent;border:none;outline:none;font-family:var(--ff-cinzel);font-size:18px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);width:100%}

/* Drag / reorder */
.track-col-hdr.drag-over-track{outline:1px dashed var(--gold)!important}
.track-col-hdr.dragging-track{opacity:.4}
.seq-row.drag-over-row{background:rgba(232,184,75,.04)!important}

/* Cell edit modal — keep existing styles */
.cedit-rel-lbl.similar{color:rgba(80,200,130,.8)}.cedit-rel-lbl.amplify{color:rgba(240,80,90,.8)}.cedit-rel-lbl.attenuate{color:rgba(80,160,230,.8)}.cedit-rel-lbl.contrast{color:rgba(200,152,42,.8)}.cedit-rel-lbl.pair{color:rgba(170,100,240,.8)}

/* ══ TOPBAR REDESIGN v2 ══ */
.topbar-project{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.proj-cover{width:44px;height:44px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:.15s}
.proj-cover:hover{border-color:var(--gold);background:rgba(232,184,75,.06)}
.proj-name-row{display:flex;align-items:center;gap:6px}
.proj-chips{display:flex;align-items:center;gap:5px}
.proj-chip{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;padding:2px 7px;border-radius:3px;border:1px solid;text-transform:uppercase;white-space:nowrap}
.proj-chip-bpm{border-color:rgba(74,208,216,.4);color:rgba(100,230,240,.9);background:rgba(74,208,216,.08)}
.proj-chip-key{border-color:rgba(160,74,232,.4);color:rgba(200,130,255,.9);background:rgba(160,74,232,.08)}
.proj-chip-genre{border-color:rgba(232,184,75,.35);color:var(--gold2);background:rgba(232,184,75,.07)}

/* ══ GEN BTN — CTA SUPREMO ══ */
.gen-btn{margin-left:12px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:7px;padding:0 22px;font-family:var(--ff-cinzel);font-size:14px;letter-spacing:2px;color:#1a1a20;cursor:pointer;font-weight:700;text-transform:uppercase;transition:.2s;height:40px;white-space:nowrap;align-self:center;flex-shrink:0;box-shadow:0 0 0 rgba(232,184,75,0);position:relative}
.gen-btn:hover{background:linear-gradient(135deg,var(--gold2),var(--gold3));box-shadow:0 0 18px rgba(232,184,75,.35);transform:translateY(-1px)}
.gen-btn:active{transform:translateY(0)}
@keyframes genGlow{0%,100%{box-shadow:0 0 8px rgba(232,184,75,.2)}50%{box-shadow:0 0 22px rgba(232,184,75,.5)}}
.gen-btn.idle{animation:genGlow 2.5s ease-in-out infinite}

/* ══ CTX MENU PREMIUM ══ */
.ctx-menu{position:fixed;z-index:900;background:rgba(20,20,26,.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px;box-shadow:0 16px 48px rgba(0,0,0,.85);min-width:180px;display:none}
.ctx-menu.open{display:block;animation:fadeIn .1s ease}
.ctx-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:5px;cursor:pointer;font-family:var(--ff-cinzel);font-size:11px;letter-spacing:.8px;color:var(--text2);transition:.12s}
.ctx-item:hover{background:rgba(255,255,255,.07);color:var(--text)}
.ctx-item.danger{color:rgba(220,80,90,.8)}
.ctx-item.danger:hover{background:rgba(192,24,48,.15);color:var(--crimson3)}
.ctx-item.disabled{opacity:.3;cursor:default;pointer-events:none}
.ctx-icon{font-size:14px;width:16px;text-align:center;flex-shrink:0;opacity:.7}
.ctx-sep{height:1px;background:rgba(255,255,255,.08);margin:4px 0}

/* ══ CARDS LIMPIAS — subtítulo solo en hover ══ */
.seq-cell-sub{font-size:11px;color:rgba(255,255,255,.45);font-style:italic;line-height:1.5;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex:1;opacity:0;transition:opacity .2s}
.seq-cell:hover .seq-cell-sub{opacity:1}
.seq-cell-title{font-family:var(--ff-cinzel);font-size:11px;font-weight:600;color:rgba(255,255,255,.88);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ══ SECTION COLORS MÁS SUTILES ══ */
.seq-cell.s0{background:rgba(0,200,200,.07)}
.seq-cell.s1{background:rgba(74,200,112,.07)}
.seq-cell.s2{background:rgba(232,74,96,.09)}
.seq-cell.s3{background:rgba(160,74,232,.07)}
.seq-cell.s4{background:rgba(232,192,74,.08)}
.seq-cell.s5{background:rgba(74,208,216,.07)}

/* ══ MINIMAPA INFERIOR ══ */
.minimap-bar{height:56px;flex-shrink:0;background:var(--panel);border-top:1px solid var(--border);display:flex;overflow:hidden;position:relative}
.minimap-label{width:180px;flex-shrink:0;display:flex;align-items:center;padding:0 12px;font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;border-right:1px solid var(--border)}
.minimap-canvas-wrap{flex:1;position:relative;overflow:hidden}
#minimapCanvas{position:absolute;inset:0;width:100%;height:100%}
.proj-edit-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:3px;transition:.15s}
.proj-edit-btn:hover{color:var(--gold2)}
.inspector-tab-btn{font-family:var(--ff-cinzel);font-size:12px;letter-spacing:2px;padding:6px 14px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--text3);cursor:pointer;transition:.15s;text-transform:uppercase;height:100%}
.inspector-tab-btn:hover{color:var(--text2)}.inspector-tab-btn.active{color:var(--gold2);border-bottom-color:var(--gold2)}
/* ── SLIDING INSPECTOR ── */
.inspector-panel{position:fixed;top:0;right:-340px;width:320px;height:100vh;padding-bottom:var(--transport-h);background:var(--bg2);border-left:1px solid var(--border);z-index:200;display:flex;flex-direction:column;transition:right .25s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 32px rgba(0,0,0,.6)}
.inspector-panel.open{right:0}
.insp-panel-header{display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--border);height:48px;flex-shrink:0;gap:8px}
.insp-panel-tabs{display:flex;flex:1}
.insp-panel-tab{font-family:var(--ff-cinzel);font-size:12px;letter-spacing:1.5px;padding:0 14px;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;text-transform:uppercase;height:100%;display:flex;align-items:center}
.insp-panel-tab:hover{color:var(--text2)}.insp-panel-tab.on{color:var(--gold2);border-bottom-color:var(--gold2)}
.insp-panel-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:6px;border-radius:4px;transition:.15s;flex-shrink:0}
.insp-panel-close:hover{color:var(--text);background:var(--bg3)}
.insp-panel-actions{display:flex;gap:6px;padding:8px 14px;border-top:1px solid var(--border);flex-shrink:0;align-items:center}
/* ── CELL INTENSITY SLIDER ── */
.cell-iv-row{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:5px;flex-shrink:0}
.cell-iv-lbl{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:.8px;color:rgba(255,255,255,.45);text-transform:uppercase;flex-shrink:0;min-width:40px;transition:.15s}
.cell-iv-slider{-moz-appearance:none;-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;outline:none;cursor:pointer;background:rgba(255,255,255,.12);transition:height .15s}
.cell-iv-slider:hover{height:5px}
.cell-iv-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--iv-color,rgba(255,255,255,.7));cursor:pointer;border:2px solid rgba(0,0,0,.4);box-shadow:0 0 4px rgba(0,0,0,.4);transition:.15s}
.cell-iv-slider::-webkit-slider-thumb:hover{width:14px;height:14px}
.cell-iv-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--iv-color,rgba(255,255,255,.7));cursor:pointer;border:2px solid rgba(0,0,0,.4)}
/* ── SECTION COLUMN HEADERS (proportional) ── */
.sec-col-hdr{display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 6px;border-right:1px solid var(--border);position:relative;min-width:0;cursor:default}
.sec-col-name{font-family:var(--ff-cinzel);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-col-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:11px;padding:2px 4px;border-radius:3px;transition:.15s;flex-shrink:0}
.sec-col-btn:hover{color:var(--gold2);background:var(--bg3)}
.sec-resize{position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:10;background:transparent}
.sec-resize:hover{background:rgba(232,184,75,.3)}
/* ── FIX seq-row-cells for proportional cells ── */
.seq-row-cells{flex:1;display:flex;min-width:0;overflow:hidden}
/* ── MUTE/SOLO BUTTONS ── */
.track-mute-btn,.track-solo-btn{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;width:22px;height:22px;border-radius:3px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}
.track-mute-btn:hover{background:rgba(232,74,96,.15);color:var(--crimson3);border-color:var(--crimson)}
.track-mute-btn.active{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.track-solo-btn:hover{background:rgba(232,184,75,.15);color:var(--gold2);border-color:var(--gold)}
.track-solo-btn.active{background:var(--gold);color:#1a1a20;border-color:var(--gold)}
.tempo-mod-btn{background:transparent;border:1px solid var(--border2);border-radius:4px;padding:3px 9px;font-family:var(--ff-cinzel);font-size:12px;letter-spacing:1px;color:var(--text3);cursor:pointer;transition:.15s}
.tempo-mod-btn:hover{background:var(--bg4);color:var(--text2)}
/* ── TRANSPORT EXTRA ── */
.t-stats{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.t-stats span{font-family:var(--ff-mono);font-size:10px;color:var(--text3)}
.t-action-btn{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:1.5px;padding:5px 12px;border-radius:5px;border:1px solid var(--border2);color:var(--text2);background:transparent;cursor:pointer;transition:.15s;flex-shrink:0}
.t-action-btn:hover{background:var(--bg4)}.t-action-btn.gold{border-color:var(--gold);color:var(--gold);font-weight:600}.t-action-btn.gold:hover{background:rgba(232,184,75,.12)}
.t-btn-rec{background:var(--bg4);color:var(--crimson3);border:1px solid var(--border2);font-size:14px}
.t-btn-rec.active{background:var(--crimson);color:#fff;border-color:var(--crimson);animation:recblink 1s infinite}
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.4}}
/* ── GAUGE MOOD LABEL ── */
.gauge-lbl{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin-top:2px}


/* ── GENRE PANEL ── */
.genre-section{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
/* ══ GENRE PANEL REDESIGN ══ */
.genre-chips{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 8px;flex-shrink:0}
.genre-cat-label{display:flex;align-items:center;gap:7px;font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;padding:8px 8px 4px;cursor:pointer;user-select:none;border-radius:4px;transition:.12s}
.genre-cat-label:hover{color:var(--text2)}
.genre-cat-label .cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.genre-cat-label .cat-arrow{margin-left:auto;font-size:10px;transition:.2s;color:var(--text3)}
.genre-cat-label.collapsed .cat-arrow{transform:rotate(-90deg)}
.genre-cat-items{overflow:hidden;transition:max-height .25s ease}
.genre-cat-items.collapsed{max-height:0!important}
.genre-see-more{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;color:var(--text3);padding:3px 8px 6px;cursor:pointer;display:block;text-transform:uppercase;transition:.12s}
.genre-see-more:hover{color:var(--gold2)}

/* Cat colors */
.cat-metal{background:#e84a60}.cat-orquestal{background:#9a4ab8}.cat-electronico{background:#00d4ff}
.cat-world{background:#50c878}.cat-rock{background:#e88a4a}.cat-experimental{background:#4ad0d8}
.cat-clasica{background:#ffd700}.cat-jazz{background:#c8b840}.cat-popular{background:#e8b84b}.cat-pop{background:#e87aaa}
.genre-chip{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:.8px;padding:4px 10px;border-radius:20px;border:1px solid var(--border2);color:var(--text2);background:var(--bg3);cursor:pointer;transition:.15s;white-space:nowrap;text-transform:uppercase}
.genre-chip:hover{border-color:var(--gold);color:var(--gold2);background:rgba(232,184,75,.08)}
.genre-chip.active{border-color:var(--gold);color:var(--gold2);background:rgba(232,184,75,.12);font-weight:600}
.genre-search{background:var(--bg3);border:1px solid var(--border2);border-radius:4px;color:var(--text);font-family:var(--ff-crimson);font-size:13px;padding:5px 8px;outline:none;margin:0 8px 6px;transition:.15s;width:calc(100% - 16px)}
.genre-search:focus{border-color:var(--gold2)}
.genre-search::placeholder{color:var(--text3);font-style:italic}
.genre-scroll{scrollbar-width:thin;scrollbar-color:var(--border2) transparent;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 14px 8px}
.genre-scroll::-webkit-scrollbar{width:3px}.genre-scroll::-webkit-scrollbar-thumb{background:var(--border2)}
.genre-cat-label{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;padding:8px 0 5px;border-bottom:1px solid var(--border);margin-bottom:5px}
.genre-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;cursor:pointer;transition:.12s;border:1px solid transparent}
.genre-item:hover{background:var(--bg3);border-color:var(--border2)}
.genre-item.active{background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.3)}
.genre-item-icon{font-size:15px;flex-shrink:0;width:22px;text-align:center}
.genre-item-info{min-width:0}
.genre-item-name{font-family:var(--ff-cinzel);font-size:13px;letter-spacing:.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genre-item.active .genre-item-name{color:var(--gold2)}
.genre-item-tags{font-size:11px;color:var(--text3);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── GENRE TRIGGER (sidebar compact) ── */
.genre-trigger{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);cursor:pointer;transition:.15s;user-select:none}
.genre-trigger:hover{border-color:var(--gold);background:rgba(232,184,75,.06)}
.genre-trigger.open{border-color:var(--gold);background:rgba(232,184,75,.10)}
.genre-trigger-icon{font-size:14px;flex-shrink:0}
.genre-trigger-name{flex:1;font-family:var(--ff-cinzel);font-size:11px;letter-spacing:.8px;color:var(--gold2);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genre-trigger-arrow{font-size:10px;color:var(--text3);flex-shrink:0;transition:transform .2s}
.genre-trigger.open .genre-trigger-arrow{transform:rotate(180deg)}

/* ── GENRE PANEL (floating overlay) ── */
.genre-panel-overlay{position:fixed;inset:0;z-index:9499;display:none;background:transparent}
.genre-panel-overlay.show{display:block}
.genre-panel{
  position:fixed;left:0;top:0;bottom:0;width:300px;z-index:9500;
  background:var(--bg2);border-right:1px solid var(--border2);
  display:flex;flex-direction:column;
  transform:translateX(-100%);opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s;
  box-shadow:4px 0 32px rgba(0,0,0,.6);
}
.genre-panel.open{transform:translateX(0);opacity:1;pointer-events:all}
.genre-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.genre-panel-title{font-family:var(--ff-cinzel);font-size:12px;letter-spacing:3px;color:var(--gold2);text-transform:uppercase}
.genre-panel-close{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:.12s}
.genre-panel-close:hover{color:var(--text);background:var(--bg3)}
.genre-panel-search-row{padding:10px 12px 8px;flex-shrink:0;border-bottom:1px solid var(--border)}
.genre-panel-search{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--text);font-family:var(--ff-crimson);font-size:13px;padding:6px 10px;outline:none;transition:.15s}
.genre-panel-search:focus{border-color:var(--gold2)}
.genre-panel-search::placeholder{color:var(--text3);font-style:italic}
.genre-panel-chips{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px 6px;flex-shrink:0;border-bottom:1px solid var(--border)}
.genre-panel-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 12px 12px}
.genre-panel-body::-webkit-scrollbar{width:3px}
.genre-panel-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* category rows — collapsible */
.gpc-row{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 5px;cursor:pointer;border-bottom:1px solid var(--border);margin-bottom:4px;user-select:none}
.gpc-row:hover .gpc-label{color:var(--text2)}
.gpc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-right:7px}
.gpc-label{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;flex:1}
.gpc-count{font-size:10px;color:var(--text3);margin-right:6px}
.gpc-arrow{font-size:9px;color:var(--text3);transition:transform .18s}
.gpc-arrow.open{transform:rotate(90deg)}
.gpc-items{overflow:hidden;transition:max-height .2s ease}

/* genre items inside panel */
.genre-panel-body .genre-item{padding:5px 8px;border-radius:5px}
.genre-panel-body .genre-item-name{font-size:12px}

/* ── SECTION DURATION LABEL ── */
.sec-col-dur{font-family:var(--ff-mono);font-size:9px;color:var(--text3);letter-spacing:.5px;margin-left:4px;opacity:.7}
.sec-col-hdr:hover .sec-col-dur{opacity:1;color:var(--gold2)}

/* ── HISTORY IMPROVEMENTS ── */
.hist-subtab{flex:1;padding:8px;font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1.5px;color:var(--text3);cursor:pointer;text-align:center;border-bottom:2px solid transparent;transition:.15s;text-transform:uppercase}
.hist-subtab:hover{color:var(--text2)}
.hist-subtab.active{color:var(--gold2);border-bottom-color:var(--gold2)}
.hist-empty{font-family:var(--ff-crimson);font-size:13px;color:var(--text3);font-style:italic;padding:16px 0;line-height:1.7;text-align:center}
.gen-hist-item{padding:10px 0;border-bottom:1px solid var(--border)}
.gen-hist-item:last-child{border-bottom:none}
.gen-hist-plat{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;text-transform:uppercase;border-radius:3px;padding:2px 6px;border:1px solid}
.gen-hist-plat.suno{color:#e8b84b;border-color:rgba(232,184,75,.4);background:rgba(232,184,75,.07)}
.gen-hist-plat.udio{color:#4ac870;border-color:rgba(74,200,112,.4);background:rgba(74,200,112,.07)}
.gen-hist-plat.acestep{color:#4ad0d8;border-color:rgba(74,208,216,.4);background:rgba(74,208,216,.07)}
.gen-hist-plat.stable{color:#4a9ae8;border-color:rgba(74,154,232,.4);background:rgba(74,154,232,.07)}
.hist-compare-btn{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;color:var(--text3);background:none;border:1px solid var(--border2);border-radius:3px;padding:1px 6px;cursor:pointer;transition:.12s}
.hist-compare-btn:hover{color:var(--gold2);border-color:var(--gold)}
.hist-compare-btn.active{color:var(--gold2);border-color:var(--gold);background:rgba(232,184,75,.1)}
.hist-diff{background:var(--bg3);border-radius:6px;padding:10px 12px;margin-top:6px;font-family:var(--ff-crimson);font-size:12px;color:var(--text2);line-height:1.6;border:1px solid var(--border2)}
.hist-diff-title{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin-bottom:6px}
.hist-name-input{background:transparent;border:none;border-bottom:1px solid var(--border2);color:var(--text2);font-family:var(--ff-crimson);font-size:11px;outline:none;width:100%;padding:1px 2px;transition:.15s}
.hist-name-input:focus{border-color:var(--gold2)}

/* ── EXPORT PANEL ── */
.export-panel-overlay{position:fixed;inset:0;background:rgba(10,10,15,.8);z-index:800;display:none;align-items:center;justify-content:center}
.export-panel-overlay.show{display:flex}
.export-panel{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:24px 28px;width:380px;box-shadow:0 24px 64px rgba(0,0,0,.8)}
.export-panel-title{font-family:var(--ff-cinzel);font-size:13px;letter-spacing:3px;color:var(--gold2);text-transform:uppercase;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.export-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;border:1px solid var(--border2);margin-bottom:8px;cursor:pointer;transition:.15s}
.export-opt:hover{border-color:var(--gold);background:rgba(232,184,75,.05)}
.export-opt-highlight{border-color:rgba(232,184,75,.3)!important;background:rgba(232,184,75,.04)}
.export-opt-highlight:hover{border-color:var(--gold)!important;background:rgba(232,184,75,.1)!important}
.export-opt-icon{font-size:22px;flex-shrink:0}
.export-opt-info{}
.export-opt-name{font-family:var(--ff-cinzel);font-size:12px;letter-spacing:1px;color:var(--text)}
.export-opt-desc{font-size:11px;color:var(--text3);font-style:italic;margin-top:2px}

/* ── ARC DRAG TOOLTIP ── */
#arcDragTip{
  position:fixed;pointer-events:none;z-index:900;
  background:rgba(18,18,28,.92);border:1px solid var(--border2);
  border-radius:5px;padding:3px 8px;
  font-family:var(--ff-cinzel);font-size:11px;letter-spacing:1px;color:var(--gold2);
  white-space:nowrap;opacity:0;transition:opacity .1s;
  transform:translate(-50%,-160%);
}
#arcDragTip.show{opacity:1}

/* ── GENERATE BTN PULSE ── */
@keyframes genPulse{
  0%{box-shadow:0 0 0 0 rgba(232,184,75,.5)}
  70%{box-shadow:0 0 0 10px rgba(232,184,75,0)}
  100%{box-shadow:0 0 0 0 rgba(232,184,75,0)}
}
.gen-btn.pulsing{animation:genPulse .45s ease-out}

/* ── WAVEFORM SHIMMER on selected cell ── */
@keyframes shimmerSlide{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.seq-cell.selected .seq-cell-waveform{
  opacity:1!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.15) 60%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.15) 60%,transparent 100%);
  -webkit-mask-size:200% 100%;
  mask-size:200% 100%;
  animation:shimmerSlide 2s linear infinite;
}

/* ── GENRE TRIGGER flash on genre change ── */
@keyframes genreFlash{
  0%{background:rgba(232,184,75,.3);border-color:var(--gold2)}
  100%{background:var(--bg3);border-color:var(--border2)}
}
.genre-trigger.flash{animation:genreFlash .5s ease-out}

/* ── HOVER improvements ── */
.util-btn{transition:background .15s,color .15s,transform .1s}
.util-btn:hover{transform:translateX(2px)}
.seq-cell{transition:box-shadow .15s}
.seq-cell:hover:not(.selected){box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.arc-mode-btn{transition:color .15s,border-color .15s,background .15s}
.btn{transition:background .15s,color .15s,opacity .15s}
.btn:hover{opacity:.88}

/* ── FIREFOX COMPATIBILITY ── */
button{font-family:inherit;font-size:inherit;-moz-appearance:none;appearance:none;box-sizing:border-box;}
button::-moz-focus-inner{border:0;padding:0;}
input{font-family:inherit;font-size:inherit;}
input[type=range]{-moz-appearance:none;appearance:none;}
canvas{display:block;}
select{-moz-appearance:none;appearance:none;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}


/* SHORTCUTS MODAL */
.shortcuts-overlay{position:fixed;inset:0;background:rgba(10,10,15,.88);z-index:850;display:none;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.shortcuts-overlay.show{opacity:1;pointer-events:all;display:flex}
.shortcuts-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:540px;max-width:92vw;padding:24px 28px;box-shadow:0 20px 70px rgba(0,0,0,.85);max-height:82vh;overflow-y:auto}
.shortcuts-title{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:3px;color:var(--gold2);text-transform:uppercase;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.shortcuts-close{cursor:pointer;color:var(--text3);font-size:18px;transition:.15s}
.shortcuts-close:hover{color:var(--text2)}
.shortcuts-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 24px}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.shortcut-keys{font-family:var(--ff-mono);font-size:18px;color:var(--gold3);white-space:nowrap}
.shortcut-desc{font-size:14px;color:var(--text2);margin-left:10px;text-align:right}
.shortcuts-section-label{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin:13px 0 5px;grid-column:1/-1;padding-bottom:4px;border-bottom:1px solid var(--border)}

/* CELL EDIT MODAL */
.cedit-overlay{position:fixed;inset:0;background:rgba(10,10,15,.82);z-index:800;display:none;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.cedit-overlay.show{opacity:1;pointer-events:all;display:flex}
.cedit-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:520px;max-width:94vw;box-shadow:0 24px 80px rgba(0,0,0,.85);display:flex;flex-direction:column;overflow:hidden}
.cedit-header{display:flex;align-items:center;gap:10px;padding:13px 16px 11px;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0}
.cedit-inst{font-family:var(--ff-cinzel);font-size:15px;letter-spacing:2px;color:var(--gold2);text-transform:uppercase}
.cedit-dot{width:1px;height:14px;background:var(--border2)}
.cedit-sec{font-family:var(--ff-cinzel);font-size:18px;letter-spacing:1px;color:var(--text3);text-transform:uppercase}
.cedit-close{margin-left:auto;cursor:pointer;color:var(--text3);font-size:20px;background:none;border:none;transition:.15s;padding:2px 5px}
.cedit-close:hover{color:var(--text)}
.cedit-ta{background:transparent;border:none;outline:none;font-family:var(--ff-crimson);font-size:20px;color:var(--text);resize:none;width:100%;line-height:1.7;padding:16px 18px;min-height:140px;flex:1}
.cedit-ta::placeholder{color:rgba(255,255,255,.2);font-style:italic}
.cedit-footer{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--border);background:var(--panel);flex-shrink:0}
.cedit-hint{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;color:var(--text3);text-transform:uppercase;flex:1}
.cedit-sem{width:100%;padding:0 16px 12px;display:flex;flex-wrap:wrap;gap:5px;max-height:90px;overflow:hidden}
.cedit-chip{font-size:18px;padding:3px 9px;border-radius:3px;cursor:pointer;font-family:var(--ff-crimson);font-style:italic;color:var(--text2);border:1px solid var(--border2);background:var(--bg3);transition:.12s;white-space:nowrap}
.cedit-chip:hover{border-color:var(--gold);color:var(--text);background:var(--bg4)}
.cedit-rel-lbl{font-family:var(--ff-cinzel);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 5px;border-radius:2px;margin-right:2px}
.cedit-rel-lbl.similar{color:rgba(80,200,130,.8)}.cedit-rel-lbl.amplify{color:rgba(240,80,90,.8)}.cedit-rel-lbl.attenuate{color:rgba(80,160,230,.8)}.cedit-rel-lbl.contrast{color:rgba(200,152,42,.8)}.cedit-rel-lbl.pair{color:rgba(170,100,240,.8)}

/* ARRANGEMENT PRESET MODAL */
.apm-overlay{position:fixed;inset:0;background:rgba(10,10,15,.85);z-index:810;display:none;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.apm-overlay.show{opacity:1;pointer-events:all;display:flex}
.apm-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:480px;max-width:93vw;padding:26px 28px;box-shadow:0 24px 80px rgba(0,0,0,.88)}
.apm-title{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:3px;color:var(--gold2);text-transform:uppercase;margin-bottom:6px;display:flex;justify-content:space-between}
.apm-sub{font-size:16px;color:var(--text3);font-style:italic;margin-bottom:20px}
.apm-emotions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.apm-em{padding:12px 14px;border-radius:6px;border:1px solid var(--border2);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:10px}
.apm-em:hover{background:var(--bg3)}
.apm-em.sel{border-color:var(--gold);background:rgba(200,152,42,.08)}
.apm-em-icon{font-size:16px;flex-shrink:0}
.apm-em-name{font-family:var(--ff-cinzel);font-size:18px;letter-spacing:1px;color:var(--text)}
.apm-em-desc{font-size:18px;color:var(--text3);font-style:italic;margin-top:1px}
.apm-opts{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:15px;color:var(--text2)}
.apm-opts label{display:flex;align-items:center;gap:6px;cursor:pointer}
.apm-footer{display:flex;gap:8px;justify-content:flex-end}

/* FIRST RUN OVERLAY */
.firstrun-overlay{position:fixed;inset:0;background:var(--bg);z-index:950;display:none;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.firstrun-overlay.show{opacity:1;pointer-events:all;display:flex}
.firstrun-logo{font-family:var(--ff-cinzel);font-size:14px;letter-spacing:4px;color:var(--text3);text-transform:uppercase;margin-bottom:40px;display:flex;align-items:center;gap:10px}
.firstrun-gem{width:26px;height:26px;background:var(--crimson);clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);flex-shrink:0}
.firstrun-q{font-family:var(--ff-cinzel);font-size:16px;font-weight:600;letter-spacing:3px;color:var(--text);margin-bottom:10px;text-align:center}
.firstrun-sub{font-family:var(--ff-crimson);font-size:18px;color:var(--text3);font-style:italic;margin-bottom:44px;text-align:center}
.firstrun-emotions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:560px;width:100%;margin-bottom:32px;padding:0 20px}
.fr-em{padding:20px 18px;border-radius:10px;border:1px solid var(--border2);cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--bg2)}
.fr-em:hover{background:var(--bg3);border-color:var(--border2);transform:translateY(-2px)}
.fr-em-icon{font-size:16px;line-height:1}
.fr-em-name{font-family:var(--ff-cinzel);font-size:18px;letter-spacing:2px;color:var(--text);text-transform:uppercase}
.fr-em-desc{font-size:14px;color:var(--text3);font-style:italic;line-height:1.7}
.firstrun-skip{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:2px;color:var(--text3);cursor:pointer;padding:8px 16px;border-radius:4px;border:1px solid transparent;transition:.15s;text-transform:uppercase}
.firstrun-skip:hover{border-color:var(--border2);color:var(--text2)}
.tlbl{cursor:default}
.track-drag-handle{font-size:14px;color:var(--text3);cursor:grab;padding:2px 3px;border-radius:2px;transition:.12s;line-height:1;flex-shrink:0}
.track-row-handle{font-size:16px;color:var(--text3);cursor:grab;padding:0 4px 0 0;line-height:1;flex-shrink:0;transition:.12s;user-select:none}
.track-row-handle:hover{color:var(--gold2)}
.track-row-handle:active{cursor:grabbing}
.seq-row.drag-over-row{outline:2px solid var(--gold);outline-offset:-2px}
.seq-row.dragging-row{opacity:.35}
.track-drag-handle:hover{color:var(--text2);background:var(--bg3)}
.track-drag-handle:active{cursor:grabbing}
.tlbl.drag-over-track{background:rgba(200,152,42,.12)!important;outline:1px dashed var(--gold)}
.tlbl.dragging-track{opacity:.4}

/* CONTEXT MENU */
.ctx-menu{position:fixed;z-index:900;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:4px;box-shadow:0 8px 32px rgba(0,0,0,.75);min-width:170px;display:none}
.ctx-menu.open{display:block;animation:fadeIn .1s ease}
.ctx-item{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:4px;cursor:pointer;font-family:var(--ff-cinzel);font-size:18px;letter-spacing:.8px;color:var(--text2);transition:.12s}
.ctx-item:hover{background:var(--bg4);color:var(--text)}
.ctx-item.danger{color:rgba(220,80,90,.8)}
.ctx-item.danger:hover{background:rgba(192,24,48,.12);color:var(--crimson3)}
.ctx-item.disabled{opacity:.3;cursor:default;pointer-events:none}
.ctx-sep{height:1px;background:var(--border);margin:3px 0}
.ctx-icon{font-size:15px;width:14px;text-align:center}

/* ═══════════════════════════════════════
   FULLSCREEN CURVE MODE
═══════════════════════════════════════ */
.fs-overlay{
  position:fixed;inset:0;z-index:900;
  background:#141418;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.fs-overlay.open{opacity:1;pointer-events:all;}

.fs-top{
  flex:1;position:relative;min-height:0;
  display:flex;flex-direction:column;
}
.fs-canvas-wrap{
  flex:1;position:relative;min-height:0;
  cursor:crosshair;
}
.fs-canvas{position:absolute;inset:0;width:100%;height:100%;}

/* FS legend — left side, big */
.fs-legend{
  position:absolute;bottom:36px;left:16px;
  display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 14px;
  pointer-events:all;z-index:10;
  max-width:70%;
}
.fs-legend-item{
  display:flex;align-items:center;gap:6px;
  cursor:pointer;transition:.15s;
  padding:3px 6px;border-radius:4px;
  user-select:none;
}
.fs-legend-item:hover{background:rgba(255,255,255,.05);}
.fs-legend-item.dimmed{opacity:.2;}
.fs-legend-dot{width:16px;height:3px;border-radius:2px;flex-shrink:0;}
.fs-legend-name{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:1px;}
.fs-legend-val{font-family:var(--ff-mono);font-size:10px;margin-left:2px;opacity:.6;}

/* FS section labels on X axis */
.fs-sec-labels{
  position:absolute;bottom:0;left:0;right:0;
  height:28px;display:flex;pointer-events:none;
}
.fs-sec-label{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-cinzel);font-size:18px;letter-spacing:2px;
  text-transform:uppercase;opacity:.5;border-right:1px solid rgba(255,255,255,.09);
}

/* FS controls top-right */
.fs-controls{
  position:absolute;top:16px;right:20px;
  display:flex;align-items:center;gap:10px;z-index:10;
}
.fs-btn{
  padding:6px 14px;border-radius:4px;
  font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1.5px;
  cursor:pointer;border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.5);background:transparent;
  transition:.15s;text-transform:uppercase;
}
.fs-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.fs-btn.active{border-color:var(--gold);color:var(--gold);}
.fs-btn.exit{border-color:rgba(200,50,60,.4);color:rgba(220,80,90,.7);}
.fs-btn.exit:hover{background:rgba(200,50,60,.1);color:var(--crimson3);}

/* preset shapes toolbar */
.fs-shapes{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:10;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);
  border-radius:6px;padding:5px 8px;
}
.fs-shape-btn{
  width:36px;height:28px;border-radius:4px;
  border:1px solid rgba(255,255,255,.12);background:transparent;
  color:rgba(255,255,255,.5);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:.15s;
}
.fs-shape-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5);}
.fs-shape-btn[title]:hover::after{
  content:attr(title);position:absolute;top:100%;margin-top:4px;
  background:var(--bg4);border:1px solid var(--border2);
  border-radius:4px;padding:3px 8px;font-family:var(--ff-cinzel);
  font-size:16px;letter-spacing:1px;color:var(--text);white-space:nowrap;
}

/* FS prompt panel — bottom */
.fs-prompt{
  flex-shrink:0;
  background:#0e0e12;
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 32px 20px;
  min-height:100px;max-height:38vh;
  overflow-y:auto;
}
.fs-prompt-label{
  font-family:var(--ff-cinzel);font-size:16px;letter-spacing:3px;
  color:rgba(255,255,255,.2);text-transform:uppercase;
  margin-bottom:10px;display:flex;align-items:center;gap:10px;
}
.fs-prompt-live{
  font-size:16px;color:var(--gold3);opacity:0;transition:opacity .3s;
  letter-spacing:1px;
}
.fs-prompt-text{
  font-family:var(--ff-crimson);font-size:22px;line-height:2;
  color:rgba(255,255,255,.75);
}
.fs-prompt-text .stag{color:var(--gold2);font-weight:600;}
.fs-prompt-text .itag{color:var(--crimson3);}
.fs-prompt-text .itag.lit{
  background:rgba(200,152,42,.25);border-radius:3px;
  transition:background .6s;
}

/* cursor value tooltip on arc */
.fs-cursor-tip{
  position:absolute;pointer-events:none;
  background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.15);
  border-radius:4px;padding:4px 10px;
  font-family:var(--ff-mono);font-size:14px;
  color:#fff;white-space:nowrap;display:none;z-index:20;
}

/* normal arc controls that open FS */
.arc-fs-btn{
  position:absolute;top:5px;right:8px;
  font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;
  color:var(--text3);background:var(--bg3);
  border:1px solid var(--border2);border-radius:3px;
  padding:2px 8px;cursor:pointer;pointer-events:all;transition:.15s;
}
.arc-fs-btn:hover{color:var(--gold2);border-color:var(--gold);}

/* HOVERBOARD */
#hoverboard{position:fixed;z-index:9999;max-width:280px;min-width:200px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.7);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;display:none}
#hoverboard.visible{opacity:1;transform:translateY(0)}
.hb-icon{font-size:16px;margin-bottom:6px;display:block;line-height:1}
.hb-title{font-family:var(--ff-cinzel);font-size:14px;letter-spacing:1.5px;color:var(--gold2);text-transform:uppercase;margin-bottom:5px}
.hb-body{font-size:15px;color:var(--text2);line-height:1.7;font-style:italic}
.hb-body em{color:var(--text);font-style:normal}
.hb-refs{margin-top:7px;padding-top:7px;border-top:1px solid var(--border);font-size:18px;color:var(--text3);font-family:var(--ff-mono)}
.hb-refs span{color:var(--text2)}
.hb-prog{position:absolute;bottom:0;left:0;height:2px;background:var(--gold);border-radius:0 0 0 8px;transition:width linear;width:0}

/* NARRATIVE */
.narrative-overlay{position:fixed;inset:0;background:rgba(10,10,15,.92);z-index:800;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none}
.narrative-overlay.show{opacity:1;pointer-events:all;display:flex}
.narrative-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:500px;max-width:90vw;padding:30px;box-shadow:0 24px 80px rgba(0,0,0,.8)}
.narrative-step{display:none}.narrative-step.active{display:block}
.nar-icon{font-size:28px;margin-bottom:10px;display:block}
.nar-title{font-family:var(--ff-cinzel);font-size:22px;font-weight:600;letter-spacing:2px;color:var(--gold2);margin-bottom:8px}
.nar-subtitle{font-size:16px;color:var(--text2);line-height:1.8;margin-bottom:18px;font-style:italic}
.nar-options{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.nar-opt{padding:12px 14px;border-radius:6px;border:1px solid var(--border2);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:12px}
.nar-opt:hover{background:var(--bg3)}
.nar-opt.selected{border-color:var(--gold);background:rgba(200,152,42,.08)}
.nar-opt-icon{font-size:16px;flex-shrink:0}
.nar-opt-name{font-family:var(--ff-cinzel);font-size:14px;letter-spacing:1px;color:var(--text);margin-bottom:2px}
.nar-opt-desc{font-size:14px;color:var(--text3);font-style:italic}
.nar-actions{display:flex;gap:10px;justify-content:flex-end}
.nar-skip{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;color:var(--text3);cursor:pointer;padding:8px 12px;border:1px solid transparent;border-radius:4px;transition:.15s;text-transform:uppercase}
.nar-skip:hover{color:var(--text2);border-color:var(--border)}
.nar-next{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:2px;color:#fff;background:var(--crimson);border:1px solid var(--crimson2);border-radius:4px;padding:9px 20px;cursor:pointer;transition:.15s;text-transform:uppercase}
.nar-next:hover{background:var(--crimson2)}
.nar-progress{display:flex;gap:5px;margin-bottom:18px}
.nar-dot{width:20px;height:2px;border-radius:1px;background:var(--border2);transition:.3s}
.nar-dot.done{background:var(--gold)}.nar-dot.active{background:var(--crimson3)}

/* SUG PANEL */
.sug-panel{position:fixed;z-index:500;width:250px;background:var(--bg3);border:1px solid var(--border2);border-radius:7px;padding:6px;box-shadow:0 10px 36px rgba(0,0,0,.7);display:none}
.insp-sug-item{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:5px;cursor:pointer;transition:.12s;border:1px solid transparent;margin-bottom:3px}
.insp-sug-item:hover{background:var(--bg3);border-color:var(--border2)}
.insp-sug-icon{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;background:var(--bg3)}
.insp-sug-name{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;color:var(--text);text-transform:uppercase}
.insp-sug-desc{font-size:10px;color:var(--text3);font-style:italic;line-height:1.4;margin-top:1px}
.insp-similar-item{font-size:11px;color:var(--text2);padding:4px 8px;border-radius:4px;cursor:pointer;transition:.12s;border-left:2px solid var(--border2);margin-bottom:3px}
.insp-similar-item:hover{background:var(--bg3);border-left-color:var(--gold)}
.insp-footer{display:flex;gap:6px;padding:8px 14px;border-top:1px solid var(--border);flex-shrink:0}
.insp-footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px;border-radius:5px;border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;text-transform:uppercase;transition:.15s}
.insp-footer-btn:hover{background:var(--bg3);color:var(--text)}
.insp-footer-btn.primary{border-color:rgba(232,184,75,.4);color:var(--gold2)}
.insp-footer-btn.primary:hover{background:rgba(232,184,75,.08)}
.sug-panel.open{display:block;animation:fadeIn .12s ease}
.sug-header{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;padding:3px 7px 6px;border-bottom:1px solid var(--border);margin-bottom:4px;display:flex;justify-content:space-between}
.sug-close{cursor:pointer;color:var(--text3);font-size:14px;transition:.15s}
.sug-close:hover{color:var(--text2)}
.sug-item{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:4px;cursor:pointer;transition:.15s;margin-bottom:2px}
.sug-item:hover{background:var(--bg4)}
.sug-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.sug-dot.high{background:var(--sug-high)}.sug-dot.mid{background:var(--sug-mid)}.sug-dot.low{background:var(--sug-low)}.sug-dot.subtle{background:var(--sug-subtle)}
.sug-text{font-family:var(--ff-crimson);font-size:15px;color:var(--text2);font-style:italic;line-height:1.7;flex:1}
.sug-item:hover .sug-text{color:var(--text)}
.sug-intensity{font-family:var(--ff-cinzel);font-size:16px;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
.sug-intensity.high{color:var(--sug-high)}.sug-intensity.mid{color:var(--sug-mid)}.sug-intensity.low{color:var(--sug-low)}.sug-intensity.subtle{color:var(--sug-subtle)}
.sug-footer{font-size:18px;color:var(--text3);padding:5px 8px 2px;font-style:italic;border-top:1px solid var(--border);margin-top:2px}



/* ══════════════════════════════════════
   CELL VISUAL REDESIGN — no more Excel
══════════════════════════════════════ */

/* Gradient + depth per section color */
.seq-cell.s0{background:linear-gradient(145deg,rgba(0,200,200,.22) 0%,rgba(0,160,160,.08) 60%,rgba(0,0,0,.15) 100%);box-shadow:inset 0 1px 0 rgba(0,220,220,.25),inset 0 0 30px rgba(0,0,0,.25);}
.seq-cell.s1{background:linear-gradient(145deg,rgba(74,200,112,.22) 0%,rgba(50,160,80,.08) 60%,rgba(0,0,0,.15) 100%);box-shadow:inset 0 1px 0 rgba(100,220,130,.25),inset 0 0 30px rgba(0,0,0,.25);}
.seq-cell.s2{background:linear-gradient(145deg,rgba(232,74,96,.26) 0%,rgba(180,40,60,.1) 60%,rgba(0,0,0,.2) 100%);box-shadow:inset 0 1px 0 rgba(255,100,120,.3),inset 0 0 30px rgba(0,0,0,.3);}
.seq-cell.s3{background:linear-gradient(145deg,rgba(160,74,232,.22) 0%,rgba(110,40,180,.08) 60%,rgba(0,0,0,.15) 100%);box-shadow:inset 0 1px 0 rgba(180,100,255,.25),inset 0 0 30px rgba(0,0,0,.25);}
.seq-cell.s4{background:linear-gradient(145deg,rgba(232,192,74,.24) 0%,rgba(180,140,40,.08) 60%,rgba(0,0,0,.15) 100%);box-shadow:inset 0 1px 0 rgba(255,210,100,.3),inset 0 0 30px rgba(0,0,0,.25);}
.seq-cell.s5{background:linear-gradient(145deg,rgba(74,208,216,.22) 0%,rgba(40,160,168,.08) 60%,rgba(0,0,0,.15) 100%);box-shadow:inset 0 1px 0 rgba(100,230,240,.25),inset 0 0 30px rgba(0,0,0,.25);}

/* Stronger hover — feel alive */
.seq-cell.s0:hover{background:linear-gradient(145deg,rgba(0,220,220,.35) 0%,rgba(0,180,180,.15) 100%);box-shadow:inset 0 1px 0 rgba(0,240,240,.4),0 0 20px rgba(0,200,200,.15);}
.seq-cell.s1:hover{background:linear-gradient(145deg,rgba(74,220,112,.35) 0%,rgba(50,180,80,.15) 100%);box-shadow:inset 0 1px 0 rgba(100,240,.4),0 0 20px rgba(74,200,112,.15);}
.seq-cell.s2:hover{background:linear-gradient(145deg,rgba(232,74,96,.4) 0%,rgba(200,40,60,.2) 100%);box-shadow:inset 0 1px 0 rgba(255,120,140,.45),0 0 20px rgba(232,74,96,.2);}
.seq-cell.s3:hover{background:linear-gradient(145deg,rgba(160,74,232,.35) 0%,rgba(120,40,200,.15) 100%);box-shadow:inset 0 1px 0 rgba(200,120,255,.4),0 0 20px rgba(160,74,232,.15);}
.seq-cell.s4:hover{background:linear-gradient(145deg,rgba(232,210,.38) 0%,rgba(200,160,40,.15) 100%);box-shadow:inset 0 1px 0 rgba(255,220,120,.45),0 0 20px rgba(232,192,74,.2);}
.seq-cell.s5:hover{background:linear-gradient(145deg,rgba(74,220,230,.35) 0%,rgba(40,180,190,.15) 100%);box-shadow:inset 0 1px 0 rgba(100,240,250,.4),0 0 20px rgba(74,208,216,.15);}

/* Cell inner — bottom fade to dark for depth */
.seq-cell-inner::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:28px;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.4));
  pointer-events:none;
}

/* Title — more prominent, slight glow */
.seq-cell-title{
  font-family:var(--ff-cinzel)!important;font-size:12px!important;font-weight:700!important;
  color:rgba(255,255,255,.95)!important;line-height:1.3!important;
  text-shadow:0 1px 8px rgba(0,0,0,.8),0 0 20px currentColor;
  overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
  display:block!important;
}

/* Subtitle — italic, muted */
.seq-cell-sub{
  font-family:var(--ff-crimson)!important;font-size:11px!important;
  color:rgba(255,255,255,.45)!important;font-style:italic!important;
  line-height:1.4!important;margin-top:2px!important;
  overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
  display:block!important;
}

/* Selected glow */
.seq-cell.selected{outline:2px solid var(--gold)!important;outline-offset:-2px!important;box-shadow:inset 0 0 40px rgba(232,184,75,.15),0 0 20px rgba(232,184,75,.2)!important;}

/* Waveform canvas — bigger, more prominent */
.seq-cell-waveform{position:absolute!important;bottom:22px!important;left:0!important;right:0!important;height:28px!important;pointer-events:none!important;opacity:.7!important;}

/* Row label — subtle left border glow */
.seq-row:hover .seq-row-label{background:rgba(255,255,255,.02)!important;}

/* ── RESIZE HANDLES ── */
.resize-handle-ew{
  position:absolute;top:0;right:-4px;bottom:0;width:8px;
  cursor:ew-resize;z-index:50;background:transparent;
  transition:background .15s;
}
.resize-handle-ew:hover,.resize-handle-ew.dragging{
  background:rgba(232,184,75,.25);
}
.resize-handle-ns{
  position:absolute;left:0;right:0;bottom:-4px;height:8px;
  cursor:ns-resize;z-index:50;background:transparent;
  transition:background .15s;
}
.resize-handle-ns:hover,.resize-handle-ns.dragging{
  background:rgba(232,184,75,.25);
}

/* ══════════════════════════════════════
   CRITICAL LAYOUT FIXES
══════════════════════════════════════ */

.app{
  display:flex!important;flex-direction:row!important;
  height:100vh!important;padding-bottom:52px!important;
  box-sizing:border-box!important;overflow:hidden!important;
}

.lsidebar{
  width:210px!important;flex-shrink:0!important;
  height:100%!important;box-sizing:border-box!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overflow-x:hidden!important;
}
.genre-section{flex:1!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}

.app-center{
  flex:1!important;min-width:0!important;
  height:100%!important;box-sizing:border-box!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  padding-bottom:160px!important;
}

.app-topbar{
  height:58px!important;flex-shrink:0!important;
  display:flex!important;align-items:center!important;
  overflow:hidden!important;
}

.stepper{
  height:62px!important;flex-shrink:0!important;
  display:flex!important;align-items:stretch!important;
  overflow:hidden!important;
}

.sequencer-wrap{
  flex:1!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overflow-x:hidden!important;
}

.seq-timeline{
  height:36px!important;flex-shrink:0!important;
  display:flex!important;align-items:center!important;
  overflow:hidden!important;
}

.arc-bar{
  height:110px!important;flex-shrink:0!important;
  position:relative!important;overflow:hidden!important;
  cursor:crosshair!important;user-select:none!important;
}
.arc-canvas{
  position:absolute!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;
  display:block!important;
}

.track-col-headers{
  height:36px!important;flex-shrink:0!important;
  display:flex!important;flex-direction:row!important;
  overflow:hidden!important;
}
.track-col-hdr-offset{
  width:180px!important;flex-shrink:0!important;
  display:flex!important;align-items:center!important;
  padding:0 6px!important;box-sizing:border-box!important;
}
.sec-col-hdr{
  display:flex!important;align-items:center!important;
  overflow:hidden!important;position:relative!important;
  border-right:1px solid var(--border)!important;
  padding:0 8px!important;gap:4px!important;
}

.seq-rows{
  flex:1!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  display:block!important;
}

.seq-add-row{
  flex-shrink:0!important;display:flex!important;
  align-items:center!important;height:34px!important;
}

.seq-row{
  display:flex!important;flex-direction:row!important;
  height:88px!important;flex-shrink:0!important;
  border-bottom:1px solid var(--border)!important;
  width:100%!important;box-sizing:border-box!important;
}
.seq-row-label{
  width:180px!important;flex-shrink:0!important;
  display:flex!important;align-items:center!important;
  gap:4px!important;padding:0 6px!important;
  border-right:1px solid var(--border)!important;
  overflow:hidden!important;box-sizing:border-box!important;
  position:relative!important;
}
.seq-row-info{
  min-width:0!important;flex:1!important;overflow:hidden!important;
}
.seq-row-name{
  font-size:11px!important;letter-spacing:.5px!important;
  white-space:nowrap!important;overflow:hidden!important;
  text-overflow:ellipsis!important;max-width:100%!important;
}
.seq-row-time{
  font-size:9px!important;color:var(--text3)!important;
  white-space:nowrap!important;overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.seq-row-icon{
  width:28px!important;height:28px!important;flex-shrink:0!important;
}
.track-row-handle{
  font-size:12px!important;padding:0 2px!important;flex-shrink:0!important;
}
/* Hide M/S/dup buttons by default, show on hover */
.seq-row-btns{
  display:none!important;gap:2px!important;margin-left:auto!important;flex-shrink:0!important;
}
.seq-row:hover .seq-row-btns{
  display:flex!important;
}
.track-mute-btn, .track-solo-btn{
  width:18px!important;height:18px!important;font-size:8px!important;
  padding:0!important;
}
.seq-row-cells{
  flex:1!important;min-width:0!important;
  display:flex!important;flex-direction:row!important;
  overflow:hidden!important;
}
.seq-cell{
  position:relative!important;overflow:hidden!important;
  cursor:pointer!important;
  border-right:1px solid var(--border)!important;
  box-sizing:border-box!important;
  display:flex!important;flex-direction:column!important;
}
.seq-cell-inner{
  padding:8px 9px 5px!important;flex:1!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;
}
.seq-cell-empty{
  flex:1!important;display:flex!important;
  flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:4px!important;
  opacity:0!important;transition:opacity .15s!important;
}
.seq-cell[data-create-tid]:hover .seq-cell-empty{opacity:1!important;}

.cell-iv-slider::-moz-range-progress{background:var(--iv-color,rgba(255,255,255,.7));border-radius:2px;}
.cell-iv-slider::-moz-range-track{background:rgba(255,255,255,.12);height:3px;border-radius:2px;}
.ls-slider::-moz-range-track{background:var(--bg4);height:3px;border-radius:2px;border:none;}
.insp-slider::-moz-range-track{background:var(--bg4);height:3px;border-radius:2px;border:none;}
/* ── TYPOGRAPHY ALIGNMENT FIXES ── */
/* Sidebar labels consistent */
.ls-label{font-size:12px!important;letter-spacing:1.5px!important;margin-bottom:8px!important;display:block!important;}
/* Emotion button names — center aligned */
.em-btn2{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;padding:6px 10px!important;}
.em-btn2-name{font-size:12px!important;letter-spacing:.5px!important;}
/* Section column headers — vertically centered */
.sec-col-hdr{justify-content:center!important;text-align:center!important;}
.sec-col-name{font-size:13px!important;letter-spacing:1.5px!important;}
/* Stepper text alignment */
.step-title{font-size:12px!important;letter-spacing:1px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.step-desc{font-size:12px!important;white-space:nowrap!important;}
/* Row label instrument name */
.seq-row-name{font-size:12px!important;letter-spacing:1px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.seq-row-time{font-size:10px!important;color:var(--text3)!important;}
/* Transport — monospace alignment */
.t-time{font-size:14px!important;letter-spacing:.5px!important;}
.t-meta{font-size:11px!important;letter-spacing:.5px!important;}
/* Gauge percentage */
.gauge-pct{font-size:26px!important;line-height:1!important;}
.gauge-lbl{font-size:10px!important;letter-spacing:2px!important;}
/* BPM display */
.ls-bpm{font-size:18px!important;letter-spacing:0!important;line-height:1!important;}

/* ── WAVEFORM CANVAS — full cell, absolute positioned ── */
.seq-cell-waveform{
  position:absolute!important;
  bottom:0!important;left:0!important;right:0!important;
  width:100%!important;height:70%!important;
  pointer-events:none!important;
  opacity:1!important;
}
.seq-cell-inner{
  position:relative!important;
}
/* Cell title sits above waveform */
.seq-cell-title{
  position:relative!important;z-index:2!important;
}
.seq-cell-sub{
  position:relative!important;z-index:2!important;
}
.cell-iv-row{
  position:relative!important;z-index:2!important;
}

/* ══ SETTINGS MODAL ══ */
.settings-overlay{position:fixed;inset:0;background:rgba(10,10,15,.88);z-index:1000;display:none;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .2s}
.settings-overlay.show{display:flex;opacity:1;pointer-events:all}
.settings-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:480px;max-width:96vw;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.8)}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.settings-title{font-family:var(--ff-cinzel);font-size:14px;letter-spacing:2px;color:var(--text);text-transform:uppercase}
.settings-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:4px;transition:.15s}
.settings-close:hover{color:var(--text);background:var(--bg3)}
.settings-body{flex:1;overflow-y:auto;padding:20px}
.settings-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.settings-section:last-child{border-bottom:none;margin-bottom:0}
.settings-section-title{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;margin-bottom:14px}
.settings-field{margin-bottom:14px}
.settings-label{font-family:var(--ff-cinzel);font-size:12px;letter-spacing:1px;color:var(--text2);display:block;margin-bottom:6px}
.settings-input-row{display:flex;gap:6px}
.settings-input{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--text);font-family:var(--ff-mono);font-size:13px;padding:8px 12px;outline:none;transition:.15s}
.settings-input:focus{border-color:var(--gold2)}
.settings-input::placeholder{color:var(--text3);font-style:italic}
.settings-hint{font-size:11px;color:var(--text3);font-style:italic;margin-top:5px}
.settings-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:4px;color:var(--text2);cursor:pointer;padding:6px 12px;font-size:13px;transition:.15s}
.settings-btn:hover{background:var(--bg4);color:var(--text)}
.settings-btn-danger{background:transparent;border:1px solid rgba(232,74,96,.4);border-radius:5px;color:rgba(232,74,96,.7);cursor:pointer;padding:8px 14px;font-family:var(--ff-cinzel);font-size:11px;letter-spacing:1px;transition:.15s}
.settings-btn-danger:hover{background:rgba(232,74,96,.1);color:var(--crimson3)}
.settings-btn-secondary{background:transparent;border:1px solid var(--border2);border-radius:5px;color:var(--text2);cursor:pointer;padding:8px 14px;font-family:var(--ff-cinzel);font-size:11px;letter-spacing:1px;transition:.15s}
.settings-btn-secondary:hover{background:var(--bg3)}
.settings-footer{padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0}
.settings-save{width:100%;background:var(--gold);border:none;border-radius:6px;color:#1a1a20;font-family:var(--ff-cinzel);font-size:12px;letter-spacing:2px;font-weight:700;padding:10px;cursor:pointer;transition:.15s;text-transform:uppercase}
.settings-save:hover{background:var(--gold2)}
.settings-api-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 8px;border-radius:3px;margin-left:8px}
.settings-api-status.ok{background:rgba(74,200,112,.15);color:#4ac870;}
.settings-api-status.missing{background:rgba(232,74,96,.1);color:rgba(232,100,100,.8);}

/* ══ GENERATE OVERLAY ══ */
.gen-overlay{position:fixed;inset:0;background:rgba(10,10,15,.92);z-index:1000;display:none;align-items:center;justify-content:center}
.gen-overlay.show{display:flex}
.gen-box{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;width:400px;padding:32px;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.8)}
.gen-spinner{width:48px;height:48px;border:3px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-status{font-family:var(--ff-cinzel);font-size:13px;letter-spacing:1px;color:var(--text2);margin-bottom:16px}
.gen-progress{height:3px;background:var(--bg4);border-radius:2px;overflow:hidden;margin-bottom:20px}
.gen-progress-bar{height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width .3s}
.gen-result-title{font-family:var(--ff-cinzel);font-size:16px;color:var(--gold2);margin-bottom:12px;letter-spacing:1px}
.gen-result-link{display:block;background:var(--gold);color:#1a1a20;font-family:var(--ff-cinzel);font-size:12px;font-weight:700;letter-spacing:2px;padding:12px 20px;border-radius:6px;text-decoration:none;margin-bottom:10px;transition:.15s}
.gen-result-link:hover{background:var(--gold2)}
.gen-result-hint{font-size:11px;color:var(--text3);font-style:italic}
.gen-close{margin-top:14px;background:transparent;border:1px solid var(--border2);border-radius:5px;color:var(--text3);cursor:pointer;padding:6px 16px;font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;transition:.15s}
.gen-close:hover{background:var(--bg3);color:var(--text2)}
.gen-result-icon{font-size:36px;margin-bottom:10px}
.gen-result-steps{margin:14px 0;text-align:left;display:flex;flex-direction:column;gap:8px}
.gen-step{display:flex;align-items:center;gap:10px;font-family:var(--ff-cinzel);font-size:11px;letter-spacing:.5px;color:var(--text2);transition:.3s}
.gen-step-done{color:var(--gold2)}
.gen-step-dim{color:var(--text3)}
.gen-step-num{width:20px;height:20px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.gen-step-done .gen-step-num{background:rgba(232,184,75,.2);border-color:var(--gold);color:var(--gold2)}
.gen-error{color:var(--crimson3);font-size:12px;margin-top:10px}

/* ══ ONBOARDING TOOLTIP ══ */
.ob-overlay{position:fixed;inset:0;z-index:900;pointer-events:none;background:rgba(0,0,0,.45)}
.ob-overlay.active{pointer-events:none}
@keyframes obGlow{0%,100%{box-shadow:0 0 0 3px rgba(232,184,75,.4),0 0 20px rgba(232,184,75,.2),0 0 0 6px rgba(232,184,75,.1)}50%{box-shadow:0 0 0 3px rgba(232,184,75,.8),0 0 30px rgba(232,184,75,.4),0 0 0 8px rgba(232,184,75,.15)}}
.ob-highlight{animation:obGlow 1.8s ease-in-out infinite!important;border-radius:6px;position:relative;z-index:901}
.ob-arrow{position:fixed;width:0;height:0;z-index:902;pointer-events:none}
.ob-arrow.down{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--gold)}
.ob-arrow.up{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--gold)}
.ob-arrow.right{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid var(--gold)}
.ob-preview{margin-bottom:12px;border-radius:6px;overflow:hidden;background:var(--bg3);border:1px solid var(--border2);padding:8px;display:flex;align-items:center;justify-content:center;min-height:48px}
.ob-backdrop{display:none}
.ob-tooltip{position:fixed;background:var(--bg2);border:1px solid var(--gold);border-radius:10px;padding:20px 24px;width:300px;box-shadow:0 16px 48px rgba(0,0,0,.7),0 0 0 1px rgba(232,184,75,.2);z-index:901;pointer-events:all}
.ob-step{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:8px}
.ob-title{font-family:var(--ff-cinzel);font-size:16px;color:var(--text);margin-bottom:8px;letter-spacing:1px}
.ob-text{font-family:var(--ff-crimson);font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:16px}
.ob-actions{display:flex;justify-content:space-between;align-items:center}
.ob-skip{background:none;border:none;color:var(--text3);cursor:pointer;font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;padding:0;transition:.15s}
.ob-skip:hover{color:var(--text2)}
.ob-next{background:var(--gold);border:none;border-radius:5px;color:#1a1a20;cursor:pointer;font-family:var(--ff-cinzel);font-size:11px;font-weight:700;letter-spacing:1.5px;padding:8px 16px;transition:.15s}
.ob-next:hover{background:var(--gold2)}
.ob-dots{display:flex;gap:6px;align-items:center}
.ob-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:.2s}
.ob-dot.active{background:var(--gold);width:18px;border-radius:3px}


/* Arc canvas clips inside bar */
.arc-canvas{clip-path:none!important;}
.arc-bar-inner{position:absolute;inset:0;overflow:hidden;pointer-events:none;}

/* ══ TEMPLATE PICKER MODAL ══ */
.tpl-picker-overlay{position:fixed;inset:0;background:rgba(10,10,15,.88);z-index:1000;display:none;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .2s}
.tpl-picker-overlay.show{display:flex;opacity:1;pointer-events:all}
.tpl-picker-box{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;width:460px;max-width:96vw;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.8)}
.tpl-picker-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.tpl-picker-title{font-family:var(--ff-cinzel);font-size:13px;letter-spacing:2px;color:var(--text);text-transform:uppercase}
.tpl-picker-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:4px;transition:.15s}
.tpl-picker-close:hover{color:var(--text);background:var(--bg3)}
.tpl-picker-list{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.tpl-pick-item{padding:14px 16px;border:1px solid var(--border2);border-radius:8px;cursor:pointer;transition:.15s}
.tpl-pick-item:hover{border-color:var(--gold);background:rgba(232,184,75,.06)}
.tpl-pick-name{font-family:var(--ff-cinzel);font-size:14px;letter-spacing:1.5px;color:var(--text);margin-bottom:5px}
.tpl-pick-desc{font-family:var(--ff-crimson);font-size:13px;color:var(--text3);font-style:italic;line-height:1.5}
.tpl-picker-footer{padding:12px 20px;border-top:1px solid var(--border);font-family:var(--ff-cinzel);font-size:10px;color:var(--text3);letter-spacing:1px}


/* Tempo labels fix */
.tempo-labels{display:flex;justify-content:space-between;align-items:center;width:100%;font-family:var(--ff-cinzel);font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}

/* ══ AUDIO PREVIEW BAR ══ */
.preview-bar{position:fixed;bottom:52px;left:0;right:0;height:44px;background:rgba(14,14,20,.97);border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 14px;z-index:99;backdrop-filter:blur(8px);}
.preview-btn{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:.15s;flex-shrink:0;}
.preview-play{background:var(--crimson);color:#fff;}.preview-play:hover{background:var(--crimson2);}
.preview-stop{background:var(--bg4);color:var(--text2);border:1px solid var(--border2);}.preview-stop:hover{background:var(--bg3);}
.preview-progress{flex:1;height:4px;background:var(--bg4);border-radius:2px;cursor:pointer;position:relative;overflow:hidden;}
.preview-fill{height:100%;background:linear-gradient(90deg,var(--crimson),var(--crimson2));border-radius:2px;width:0%;transition:width .1s linear;}
.preview-section-marker{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.2);}
.preview-label{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;color:var(--text3);flex-shrink:0;min-width:80px;}
.preview-vol{width:60px;height:3px;-webkit-appearance:none;appearance:none;border-radius:2px;background:var(--bg4);outline:none;cursor:pointer;}
.preview-vol::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text2);cursor:pointer;}
.preview-chord-label{font-family:var(--ff-mono);font-size:11px;color:var(--gold2);min-width:60px;text-align:center;}

/* ══ SECTION REORDER ══ */
.seq-row.can-drag{cursor:grab;}
.seq-row.reorder-drag{opacity:.3;}
.seq-row.reorder-over{outline:2px solid var(--gold);outline-offset:-2px;}

/* ══ ZOOM CONTROL ══ */
.zoom-ctrl{display:flex;align-items:center;gap:4px;padding:0 8px;}
.zoom-btn{width:22px;height:22px;border-radius:3px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:.12s;}
.zoom-btn:hover{background:var(--bg4);color:var(--text2);}
.zoom-val{font-family:var(--ff-mono);font-size:10px;color:var(--text3);min-width:32px;text-align:center;}

/* ══ CHORD SUGGESTIONS ══ */
.chord-panel{background:var(--bg3);border:1px solid var(--border2);border-radius:7px;padding:10px 12px;margin-top:8px;}
.chord-grid{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.chord-chip{font-family:var(--ff-mono);font-size:11px;padding:3px 9px;border-radius:4px;border:1px solid var(--border2);color:var(--gold2);background:rgba(232,184,75,.07);cursor:pointer;transition:.12s;}
.chord-chip:hover{background:rgba(232,184,75,.15);border-color:var(--gold);}

/* ══ HUMANIZE ANIMATION ══ */
@keyframes humanizePulse{0%{box-shadow:0 0 0 0 rgba(74,200,112,.5)}70%{box-shadow:0 0 0 8px rgba(74,200,112,0)}100%{box-shadow:0 0 0 0 rgba(74,200,112,0)}}
.humanize-btn.pulsing{animation:humanizePulse .5s ease-out;}

/* ══ VERSION HISTORY ══ */
.ver-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:.12s;}
.ver-item:hover{background:var(--bg3);margin:0 -14px;padding:7px 14px;}
.ver-badge{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;padding:2px 6px;border-radius:3px;border:1px solid var(--border2);color:var(--text3);flex-shrink:0;}
.ver-badge.auto{border-color:rgba(74,200,112,.4);color:#4ac870;}
.ver-badge.manual{border-color:rgba(232,184,75,.4);color:var(--gold2);}
.ver-time{font-family:var(--ff-mono);font-size:10px;color:var(--text3);flex-shrink:0;}
.ver-label{font-size:12px;color:var(--text2);font-style:italic;flex:1;}
.ver-restore{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;padding:2px 7px;border-radius:3px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:pointer;transition:.12s;flex-shrink:0;}
.ver-restore:hover{border-color:var(--gold);color:var(--gold2);}

/* ══ SHARE URL MODAL ══ */
.share-overlay{position:fixed;inset:0;background:rgba(10,10,15,.88);z-index:1000;display:none;align-items:center;justify-content:center;}
.share-overlay.show{display:flex;}
.share-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:480px;max-width:94vw;padding:24px 28px;box-shadow:0 24px 64px rgba(0,0,0,.8);}
.share-title{font-family:var(--ff-cinzel);font-size:13px;letter-spacing:2px;color:var(--gold2);text-transform:uppercase;margin-bottom:14px;}
.share-url{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--text2);font-family:var(--ff-mono);font-size:11px;padding:8px 10px;outline:none;margin-bottom:10px;cursor:text;}
.share-actions{display:flex;gap:8px;}

/* ══ SEARCH BAR ══ */
.global-search{position:fixed;top:0;left:0;right:0;bottom:0;z-index:950;background:rgba(10,10,15,.92);display:none;align-items:flex-start;justify-content:center;padding-top:80px;}
.global-search.show{display:flex;}
.search-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:520px;max-width:94vw;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.8);}
.search-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:var(--ff-crimson);font-size:18px;padding:16px 20px;outline:none;}
.search-input::placeholder{color:var(--text3);font-style:italic;}
.search-results{max-height:320px;overflow-y:auto;padding:6px;}
.search-result-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:5px;cursor:pointer;transition:.12s;}
.search-result-item:hover{background:var(--bg3);}
.search-result-loc{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;color:var(--text3);text-transform:uppercase;min-width:140px;}
.search-result-text{font-size:12px;color:var(--text2);font-style:italic;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-result-mark{color:var(--gold2);font-style:normal;font-weight:600;}
.search-empty{font-family:var(--ff-crimson);font-size:13px;color:var(--text3);font-style:italic;padding:20px;text-align:center;}

/* ══ AI PANEL ══ */
.ai-panel-overlay{position:fixed;inset:0;background:rgba(10,10,15,.88);z-index:1000;display:none;align-items:center;justify-content:center;}
.ai-panel-overlay.show{display:flex;}
.ai-panel{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;width:500px;max-width:94vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.85);}
.ai-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.ai-panel-title{font-family:var(--ff-cinzel);font-size:13px;letter-spacing:2px;color:var(--gold2);text-transform:uppercase;}
.ai-panel-body{flex:1;overflow-y:auto;padding:16px 20px;}
.ai-panel-footer{padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:8px;}
.ai-thinking{display:flex;align-items:center;gap:10px;padding:12px;border-radius:6px;background:var(--bg3);font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;color:var(--text3);}
.ai-thinking-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:aiDot 1.2s infinite;}
.ai-thinking-dot:nth-child(2){animation-delay:.2s;}
.ai-thinking-dot:nth-child(3){animation-delay:.4s;}
@keyframes aiDot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.ai-suggestion-item{padding:10px 12px;border-radius:6px;border:1px solid var(--border2);margin-bottom:8px;cursor:pointer;transition:.15s;}
.ai-suggestion-item:hover{border-color:var(--gold);background:rgba(232,184,75,.05);}
.ai-sug-loc{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;margin-bottom:4px;}
.ai-sug-text{font-family:var(--ff-crimson);font-size:13px;color:var(--text);line-height:1.5;font-style:italic;}
.ai-feedback{background:var(--bg3);border-radius:6px;padding:12px 14px;font-family:var(--ff-crimson);font-size:13px;color:var(--text2);line-height:1.7;border-left:3px solid var(--gold);}
.ai-feedback strong{color:var(--gold2);}


/* ══════════════════════════════════════════
   NEW FEATURES CSS
══════════════════════════════════════════ */

/* ── AUDIO PREVIEW BAR ── */
.audio-preview-bar{
  display:flex;align-items:center;gap:10px;
  padding:0 16px;height:44px;flex-shrink:0;
  background:var(--bg2);border-top:1px solid var(--border);
  position:fixed;bottom:52px;left:0;right:0;z-index:90;
}
.audio-preview-bar.hidden{display:none}
.ap-btn{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  flex-shrink:0;transition:.15s}
.ap-btn-play{background:var(--crimson);color:#fff}
.ap-btn-play:hover{background:var(--crimson2)}
.ap-btn-stop{background:var(--bg4);border:1px solid var(--border2);color:var(--text2)}
.ap-label{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1.5px;
  color:var(--text3);text-transform:uppercase;flex-shrink:0}
.ap-section-name{font-family:var(--ff-cinzel);font-size:11px;letter-spacing:1px;
  color:var(--gold2);min-width:80px}
.ap-progress{flex:1;height:4px;background:var(--bg4);border-radius:2px;
  overflow:hidden;cursor:pointer;position:relative}
.ap-progress-fill{height:100%;background:var(--crimson);border-radius:2px;
  width:0%;transition:width .1s linear}
.ap-chord-vis{display:flex;gap:3px;flex-shrink:0}
.ap-note{width:6px;border-radius:1px;background:var(--crimson);
  opacity:0;transition:opacity .1s,height .1s;height:16px;align-self:flex-end}
.ap-vol{display:flex;align-items:center;gap:5px;flex-shrink:0}
.ap-vol-icon{color:var(--text3);font-size:12px}
.ap-vol-slider{-webkit-appearance:none;width:60px;height:3px;
  border-radius:2px;background:var(--bg4);outline:none;cursor:pointer}
.ap-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;
  height:11px;border-radius:50%;background:var(--text2);cursor:pointer}
.ap-mode-btn{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  padding:3px 8px;border-radius:3px;border:1px solid var(--border2);
  background:transparent;color:var(--text3);cursor:pointer;transition:.15s;
  text-transform:uppercase}
.ap-mode-btn:hover{background:var(--bg3);color:var(--text2)}
.ap-mode-btn.active{border-color:var(--crimson);color:var(--crimson3);
  background:rgba(232,74,96,.08)}

/* ── GLOBAL SEARCH ── */
.gsearch-overlay{position:fixed;inset:0;background:rgba(10,10,15,.85);
  z-index:1100;display:none;align-items:flex-start;justify-content:center;
  padding-top:80px}
.gsearch-overlay.show{display:flex}
.gsearch-box{background:var(--bg2);border:1px solid var(--border2);
  border-radius:10px;width:560px;max-width:94vw;
  box-shadow:0 24px 64px rgba(0,0,0,.8);overflow:hidden}
.gsearch-input-row{display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border)}
.gsearch-icon{font-size:16px;color:var(--text3);flex-shrink:0}
.gsearch-input{flex:1;background:transparent;border:none;outline:none;
  font-family:var(--ff-crimson);font-size:16px;color:var(--text)}
.gsearch-input::placeholder{color:var(--text3);font-style:italic}
.gsearch-kbd{font-family:var(--ff-mono);font-size:10px;color:var(--text3);
  background:var(--bg3);border:1px solid var(--border2);border-radius:3px;
  padding:2px 6px;flex-shrink:0}
.gsearch-results{max-height:360px;overflow-y:auto;padding:6px}
.gsearch-result{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:5px;cursor:pointer;transition:.12s}
.gsearch-result:hover{background:var(--bg3)}
.gsearch-result-inst{font-family:var(--ff-cinzel);font-size:10px;
  letter-spacing:1px;color:var(--text3);text-transform:uppercase;
  min-width:80px;flex-shrink:0}
.gsearch-result-sec{font-size:10px;color:var(--gold2);
  font-family:var(--ff-cinzel);letter-spacing:1px;min-width:70px;flex-shrink:0}
.gsearch-result-text{font-family:var(--ff-crimson);font-size:13px;
  color:var(--text2);flex:1;font-style:italic;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.gsearch-highlight{color:var(--gold2);font-style:normal;font-weight:600}
.gsearch-empty{font-family:var(--ff-crimson);font-size:13px;color:var(--text3);
  font-style:italic;padding:20px;text-align:center}
.gsearch-hint{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1.5px;
  color:var(--text3);text-transform:uppercase;padding:8px 16px;
  border-top:1px solid var(--border)}

/* ── VERSION HISTORY ── */
.vhist-item{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:5px;cursor:pointer;transition:.12s;border:1px solid transparent}
.vhist-item:hover{background:var(--bg3);border-color:var(--border2)}
.vhist-item.current{border-color:rgba(232,184,75,.3);background:rgba(232,184,75,.05)}
.vhist-time{font-family:var(--ff-mono);font-size:10px;color:var(--text3);flex-shrink:0}
.vhist-label{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:.5px;
  color:var(--text2);flex:1}
.vhist-clips{font-size:10px;color:var(--text3);flex-shrink:0}
.vhist-restore{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  padding:2px 7px;border-radius:3px;border:1px solid var(--border2);
  background:transparent;color:var(--text3);cursor:pointer;transition:.12s;
  flex-shrink:0}
.vhist-restore:hover{border-color:var(--gold);color:var(--gold2)}

/* ── CHORD PROGRESSION PANEL ── */
.chord-panel{position:fixed;right:0;top:0;bottom:0;width:280px;
  background:var(--bg2);border-left:1px solid var(--border);
  z-index:300;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.5)}
.chord-panel.open{transform:translateX(0)}
.chord-panel-header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.chord-panel-title{font-family:var(--ff-cinzel);font-size:12px;letter-spacing:2px;
  color:var(--gold2);text-transform:uppercase}
.chord-panel-close{background:none;border:none;color:var(--text3);
  font-size:16px;cursor:pointer;padding:2px 6px;border-radius:3px;transition:.12s}
.chord-panel-close:hover{color:var(--text);background:var(--bg3)}
.chord-panel-body{flex:1;overflow-y:auto;padding:12px 14px}
.chord-row{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.chord-chip{padding:6px 12px;border-radius:5px;border:1px solid var(--border2);
  background:var(--bg3);font-family:var(--ff-cinzel);font-size:11px;
  letter-spacing:1px;color:var(--text2);cursor:pointer;transition:.15s}
.chord-chip:hover{border-color:var(--gold);color:var(--gold2);
  background:rgba(232,184,75,.08)}
.chord-section-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;
  color:var(--text3);text-transform:uppercase;margin:10px 0 6px;display:flex;
  align-items:center;gap:8px}
.chord-section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.chord-play-btn{padding:3px 8px;border-radius:3px;border:1px solid var(--border2);
  background:transparent;color:var(--text3);cursor:pointer;font-size:11px;
  transition:.12s}
.chord-play-btn:hover{background:var(--bg4);color:var(--text2)}

/* ── HUMANIZE ANIMATION ── */
@keyframes humanizePulse{
  0%{opacity:1}50%{opacity:.4}100%{opacity:1}
}
.humanizing{animation:humanizePulse .6s ease-in-out 3}

/* ── CONFLICT IMPROVED ── */
.conflict-badge{display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;border-radius:3px;font-family:var(--ff-cinzel);
  font-size:9px;letter-spacing:.8px;text-transform:uppercase}
.conflict-badge.warn{background:rgba(232,184,75,.12);color:#e8c04a;
  border:1px solid rgba(232,184,75,.3)}
.conflict-badge.info{background:rgba(74,208,216,.08);color:#4ad0d8;
  border:1px solid rgba(74,208,216,.25)}
.conflict-badge.error{background:rgba(232,74,96,.1);color:var(--crimson3);
  border:1px solid rgba(232,74,96,.3)}

/* ── SHARE URL TOAST ── */
.share-pill{position:fixed;bottom:170px;left:50%;transform:translateX(-50%);
  background:var(--bg3);border:1px solid var(--gold);border-radius:8px;
  padding:12px 20px;display:none;align-items:center;gap:10px;z-index:9999;
  box-shadow:0 8px 32px rgba(0,0,0,.6)}
.share-pill.show{display:flex}
.share-url{font-family:var(--ff-mono);font-size:11px;color:var(--text2);
  max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-copy-btn{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  padding:4px 10px;border-radius:3px;border:1px solid var(--gold);
  background:rgba(232,184,75,.1);color:var(--gold2);cursor:pointer;
  flex-shrink:0;transition:.12s}
.share-copy-btn:hover{background:rgba(232,184,75,.2)}
.share-close{color:var(--text3);cursor:pointer;font-size:14px;flex-shrink:0;
  transition:.12s}
.share-close:hover{color:var(--text2)}

/* ── SECTION DRAG REORDER ── */
.sec-col-hdr.sec-drag-over{outline:2px dashed var(--gold)!important;
  background:rgba(232,184,75,.08)!important}
.sec-col-hdr.sec-dragging{opacity:.4}
.seq-row.sec-drag-row-over .seq-cell:first-child{
  border-left:2px solid var(--gold)}

/* ── AI SUGGEST BUTTON ── */
.ai-suggest-btn{display:flex;align-items:center;gap:6px;width:100%;
  padding:8px 12px;border-radius:6px;border:1px solid rgba(160,74,232,.4);
  background:rgba(160,74,232,.06);color:rgba(200,130,255,.9);cursor:pointer;
  font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;
  text-transform:uppercase;transition:.15s;margin-top:4px}
.ai-suggest-btn:hover{background:rgba(160,74,232,.14);border-color:rgba(160,74,232,.7)}
.ai-suggest-btn.loading{opacity:.6;pointer-events:none}
.ai-result-chip{padding:6px 10px;border-radius:4px;border:1px solid rgba(160,74,232,.3);
  background:rgba(160,74,232,.06);font-family:var(--ff-crimson);font-size:12px;
  color:rgba(220,180,255,.9);cursor:pointer;transition:.15s;line-height:1.5;
  display:block;margin-bottom:5px}
.ai-result-chip:hover{background:rgba(160,74,232,.15);border-color:rgba(160,74,232,.6)}

/* ── SECTION REORDER HANDLE ── */
.sec-drag-handle{font-size:11px;color:var(--text3);cursor:grab;
  padding:0 3px;line-height:1;user-select:none;flex-shrink:0}
.sec-drag-handle:active{cursor:grabbing}

/* ══ BATCH 2 CSS ══ */

/* ── AI PANEL ── */
.ai-panel-overlay{position:fixed;inset:0;background:rgba(10,10,15,.88);
  z-index:1200;display:none;align-items:center;justify-content:center}
.ai-panel-overlay.show{display:flex}
.ai-panel-box{background:var(--bg2);border:1px solid rgba(160,74,232,.5);
  border-radius:12px;width:520px;max-width:94vw;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.85),0 0 40px rgba(160,74,232,.1)}
.ai-panel-header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:rgba(160,74,232,.06)}
.ai-panel-title{font-family:var(--ff-cinzel);font-size:13px;letter-spacing:2px;
  color:rgba(200,130,255,.95);text-transform:uppercase}
.ai-panel-body{flex:1;overflow-y:auto;padding:16px 18px}
.ai-panel-footer{padding:12px 18px;border-top:1px solid var(--border);
  flex-shrink:0;display:flex;gap:8px;align-items:center}
.ai-spinner{width:18px;height:18px;border:2px solid rgba(160,74,232,.3);
  border-top-color:rgba(200,130,255,.9);border-radius:50%;
  animation:spin .7s linear infinite;flex-shrink:0}
.ai-thinking{font-family:var(--ff-crimson);font-size:13px;color:var(--text3);
  font-style:italic}
.ai-result-section{margin-bottom:16px}
.ai-result-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;
  color:rgba(160,74,232,.8);text-transform:uppercase;margin-bottom:6px;
  display:flex;align-items:center;gap:8px}
.ai-result-label::after{content:'';flex:1;height:1px;
  background:rgba(160,74,232,.2)}
.ai-clip-option{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;
  border-radius:6px;border:1px solid var(--border2);background:var(--bg3);
  margin-bottom:6px;cursor:pointer;transition:.15s}
.ai-clip-option:hover{border-color:rgba(160,74,232,.5);
  background:rgba(160,74,232,.08)}
.ai-clip-option-text{font-family:var(--ff-crimson);font-size:13px;
  color:var(--text2);flex:1;line-height:1.5;font-style:italic}
.ai-clip-option-apply{font-family:var(--ff-cinzel);font-size:9px;
  letter-spacing:1px;padding:3px 8px;border-radius:3px;
  border:1px solid rgba(160,74,232,.4);background:transparent;
  color:rgba(200,130,255,.8);cursor:pointer;flex-shrink:0;
  transition:.12s;white-space:nowrap}
.ai-clip-option-apply:hover{background:rgba(160,74,232,.15)}
.ai-feedback-item{padding:8px 12px;border-radius:6px;border-left:3px solid;
  background:var(--bg3);margin-bottom:6px;font-family:var(--ff-crimson);
  font-size:13px;color:var(--text2);line-height:1.5}
.ai-feedback-item.positive{border-color:#4ac870;background:rgba(74,200,112,.05)}
.ai-feedback-item.warning{border-color:#e8c04a;background:rgba(232,192,74,.05)}
.ai-feedback-item.critical{border-color:var(--crimson);background:rgba(232,74,96,.05)}
.ai-mode-tabs{display:flex;gap:4px;padding:10px 18px 0;flex-shrink:0}
.ai-mode-tab{flex:1;padding:8px;font-family:var(--ff-cinzel);font-size:9px;
  letter-spacing:1.5px;text-align:center;border-radius:5px 5px 0 0;
  border:1px solid var(--border2);border-bottom:none;
  color:var(--text3);cursor:pointer;transition:.15s;text-transform:uppercase}
.ai-mode-tab:hover{color:var(--text2);background:var(--bg3)}
.ai-mode-tab.active{color:rgba(200,130,255,.95);background:rgba(160,74,232,.08);
  border-color:rgba(160,74,232,.4)}

/* ── ZOOM SLIDER ── */
.zoom-row{display:flex;align-items:center;gap:6px;padding:4px 16px;
  background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0}
.zoom-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1.5px;
  color:var(--text3);text-transform:uppercase;flex-shrink:0}
.zoom-slider{-webkit-appearance:none;width:100px;height:3px;border-radius:2px;
  background:var(--bg4);outline:none;cursor:pointer}
.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;
  border-radius:50%;background:var(--gold);cursor:pointer}
.zoom-pct{font-family:var(--ff-mono);font-size:10px;color:var(--text3);
  flex-shrink:0;min-width:32px}
.zoom-reset{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  padding:2px 7px;border-radius:3px;border:1px solid var(--border2);
  background:transparent;color:var(--text3);cursor:pointer;transition:.12s}
.zoom-reset:hover{color:var(--text2);background:var(--bg3)}

/* ── SECTION JUMP BUTTONS ── */
.sec-jump-row{display:flex;gap:4px;align-items:center;flex-shrink:0}
.sec-jump-btn{font-family:var(--ff-cinzel);font-size:8px;letter-spacing:.8px;
  padding:3px 7px;border-radius:3px;border:1px solid var(--border2);
  background:transparent;color:var(--text3);cursor:pointer;
  text-transform:uppercase;transition:.12s;white-space:nowrap}
.sec-jump-btn:hover{background:var(--bg3);color:var(--text2)}
.sec-jump-btn.active{border-color:var(--gold);color:var(--gold2);
  background:rgba(232,184,75,.08)}

/* ── COLOR PICKER POPOVER ── */
.color-picker-pop{position:fixed;z-index:800;background:var(--bg3);
  border:1px solid var(--border2);border-radius:7px;padding:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.7);display:none}
.color-picker-pop.show{display:flex;gap:6px;flex-wrap:wrap;width:140px}
.color-swatch{width:24px;height:24px;border-radius:4px;cursor:pointer;
  border:2px solid transparent;transition:.12s;flex-shrink:0}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.selected{border-color:#fff}

/* ── CELL NAVIGATION HIGHLIGHT ── */
.seq-cell.kb-focus{outline:2px solid var(--gold3)!important;
  outline-offset:-2px!important}

/* ── COPY SECTION BTN ── */
.copy-section-btn{font-family:var(--ff-cinzel);font-size:8px;letter-spacing:1px;
  padding:2px 6px;border-radius:3px;border:1px solid var(--border2);
  background:transparent;color:var(--text3);cursor:pointer;
  opacity:0;transition:.15s}
.sec-col-hdr:hover .copy-section-btn{opacity:1}
.copy-section-btn:hover{border-color:var(--gold);color:var(--gold2)}

/* ── INSTRUMENT LABEL ALIGNMENT FIX ── */
.seq-row-label {
  gap:4px!important;
  padding:0 5px!important;
  overflow:hidden!important;
}
.seq-row-info {
  flex:1!important;
  min-width:0!important;
  overflow:hidden!important;
}
.seq-row-name {
  font-size:10px!important;
  letter-spacing:.3px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.seq-row-time {
  font-size:9px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.seq-row-icon {
  width:26px!important;
  height:26px!important;
  flex-shrink:0!important;
}
.seq-row-icon svg {
  width:26px!important;
  height:26px!important;
}
.track-row-handle {
  font-size:11px!important;
  padding:0 1px!important;
  flex-shrink:0!important;
  opacity:.4;
}
.seq-row:hover .track-row-handle { opacity:1; }
/* Hide M/S/dup/del buttons until hover */
.seq-row-label > div[style*="margin-left:auto"],
.seq-row-label > .seq-row-btns {
  display:none!important;
}
.seq-row:hover > .seq-row-label > div[style*="margin-left:auto"],
.seq-row:hover > .seq-row-label > .seq-row-btns {
  display:flex!important;
  gap:2px!important;
}
.track-mute-btn, .track-solo-btn {
  width:17px!important;
  height:17px!important;
  font-size:7px!important;
  padding:0!important;
  letter-spacing:0!important;
}

/* ══════════════════════════════════════════
   SIMPLE MODE
══════════════════════════════════════════ */

/* ── MODE SWITCHER ── */
.mode-switcher{position:relative;cursor:pointer;user-select:none}
.mode-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;
  color:var(--gold2);text-transform:uppercase;display:flex;align-items:center;
  gap:4px;padding:2px 0;transition:.15s}
.mode-label:hover{color:var(--gold3)}
.mode-arrow{font-size:8px;transition:transform .2s}
.mode-switcher.open .mode-arrow{transform:rotate(180deg)}
.mode-dropdown{position:absolute;top:calc(100% + 6px);left:0;
  background:var(--bg3);border:1px solid var(--border2);border-radius:7px;
  padding:4px;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.7);
  display:none;z-index:500}
.mode-switcher.open .mode-dropdown{display:block;animation:fadeIn .12s ease}
.mode-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:5px;cursor:pointer;transition:.12s;font-family:var(--ff-cinzel);
  font-size:10px;letter-spacing:1px;color:var(--text2);text-transform:uppercase}
.mode-opt:hover{background:var(--bg4);color:var(--text)}
.mode-opt.active{color:var(--gold2)}
.mode-opt.active::before{content:'✓';color:var(--gold2);width:12px}
.mode-opt:not(.active)::before{content:'';width:12px}
.mode-opt.soon{opacity:.35;cursor:default;pointer-events:none}
.mode-sep{height:1px;background:var(--border);margin:3px 0}

/* ── SIMPLE MODE OVERLAY ── */
.simple-mode-overlay{
  position:fixed;inset:0;z-index:400;
  background:var(--bg);
  display:none;flex-direction:column;
  opacity:0;transition:opacity .3s ease;
}
.simple-mode-overlay.show{display:flex;opacity:1}

/* ── SIMPLE LAYOUT ── */
.sm-layout{display:flex;height:100%;overflow:hidden}
.sm-sidebar{width:220px;flex-shrink:0;background:var(--bg2);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  overflow-y:auto;padding-bottom:20px;min-height:0}
.sm-center{flex:1;display:flex;flex-direction:column;overflow:hidden;
  padding:20px 24px;gap:16px;min-width:0}
.sm-right{width:280px;flex-shrink:0;background:var(--bg2);
  border-left:1px solid var(--border);display:flex;flex-direction:column;
  min-height:0}

/* ── SIMPLE TOPBAR ── */
.sm-topbar{height:58px;background:var(--panel);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
.sm-title-input{background:none;border:1px solid transparent;
  font-family:var(--ff-cinzel);font-size:16px;color:var(--gold2);
  letter-spacing:1px;outline:none;padding:3px 8px;border-radius:4px;transition:.2s}
.sm-title-input:hover,.sm-title-input:focus{border-color:var(--border2);background:var(--bg3)}
.sm-chips{display:flex;gap:5px;align-items:center}
.sm-chip{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  padding:3px 9px;border-radius:3px;border:1px solid;text-transform:uppercase}
.sm-generate-btn{margin-left:auto;background:linear-gradient(135deg,var(--gold),var(--gold2));
  border:none;border-radius:8px;padding:0 24px;height:40px;
  font-family:var(--ff-cinzel);font-size:13px;letter-spacing:2px;
  color:#1a1a20;cursor:pointer;font-weight:700;text-transform:uppercase;
  transition:.2s;display:flex;align-items:center;gap:8px;flex-shrink:0}
.sm-generate-btn:hover{background:linear-gradient(135deg,var(--gold2),var(--gold3));
  box-shadow:0 0 20px rgba(232,184,75,.4);transform:translateY(-1px)}

/* ── SIMPLE SIDEBAR SECTIONS ── */
.sm-section{padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.sm-section-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;
  color:var(--text3);text-transform:uppercase;margin-bottom:10px}

/* Emotion buttons in simple mode */
.sm-emotion-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sm-em-btn{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 6px;border-radius:8px;border:1px solid var(--border2);
  background:var(--bg3);cursor:pointer;transition:.2s;position:relative}
.sm-em-btn:hover{border-color:var(--border2);background:var(--bg4);transform:translateY(-1px)}
.sm-em-btn.active{border-color:var(--gold);background:rgba(232,184,75,.1);
  box-shadow:0 0 12px rgba(232,184,75,.15)}
.sm-em-icon{font-size:22px;line-height:1}
.sm-em-name{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  color:var(--text2);text-transform:uppercase}
.sm-em-btn.active .sm-em-name{color:var(--gold2)}

/* Intensity gauge simple */
.sm-gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:4px 0 0}

/* Tempo simple */
.sm-tempo-row{display:flex;align-items:center;gap:8px}
.sm-tempo-val{font-family:var(--ff-cinzel);font-size:20px;color:var(--gold2);
  letter-spacing:0;min-width:40px;text-align:right}
.sm-tempo-unit{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  color:var(--text3);text-transform:uppercase;margin-top:4px}

/* ── ENERGY CURVE ── */
.sm-curve-section{flex-shrink:0}
.sm-curve-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;
  color:var(--text3);text-transform:uppercase;margin-bottom:8px;
  display:flex;align-items:center;gap:8px}
.sm-curve-label span{color:var(--text3);font-size:10px;cursor:help;
  border:1px solid var(--border2);border-radius:50%;width:14px;height:14px;
  display:inline-flex;align-items:center;justify-content:center}
.sm-curve-wrap{position:relative;height:120px;background:var(--bg2);
  border-radius:8px;border:1px solid var(--border);overflow:hidden;cursor:crosshair}
.sm-curve-canvas{position:absolute;inset:0;width:100%;height:100%}
.sm-curve-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-cinzel);font-size:8px;letter-spacing:1px;color:var(--text3);
  text-transform:uppercase;pointer-events:none;white-space:nowrap}

/* ── SECTION CARDS ── */
.sm-cards-section{flex:1;min-height:0;display:flex;flex-direction:column}
.sm-cards-row{display:flex;gap:12px;flex:1;min-height:0;overflow-x:auto;
  padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.sm-cards-row::-webkit-scrollbar{height:3px}
.sm-cards-row::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.sm-card{flex:1;min-width:180px;max-width:260px;display:flex;flex-direction:column;
  border-radius:12px;border:1px solid var(--border2);background:var(--bg2);
  overflow:hidden;cursor:pointer;transition:.2s;position:relative}
.sm-card:hover{border-color:rgba(255,255,255,.15);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sm-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),
  0 8px 32px rgba(232,184,75,.15)}

/* Card visual area */
.sm-card-visual{height:320px;position:relative;overflow:hidden;flex-shrink:0}
.sm-card-visual-canvas{position:absolute;inset:0;width:100%;height:100%}
.sm-card-num{position:absolute;top:10px;left:12px;font-family:var(--ff-cinzel);
  font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.5);
  text-transform:uppercase}
.sm-card-section-name{position:absolute;top:28px;left:12px;font-family:var(--ff-cinzel);
  font-size:16px;letter-spacing:3px;font-weight:700;color:rgba(255,255,255,.9);
  text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.sm-card-time{position:absolute;bottom:8px;left:12px;font-family:var(--ff-mono);
  font-size:10px;color:rgba(255,255,255,.4)}

/* Card body */
.sm-card-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:8px}
.sm-card-desc{font-family:var(--ff-crimson);font-size:14px;color:var(--text2);
  font-style:italic;line-height:1.4;cursor:text;border-radius:4px;
  padding:4px 6px;transition:.15s;border:1px solid transparent;min-height:36px}
.sm-card-desc:hover{border-color:var(--border2);background:var(--bg3)}
.sm-card-desc.editing{border-color:var(--gold2);background:var(--bg3);outline:none;
  color:var(--text);font-style:normal;cursor:text}
.sm-card-desc-input{width:100%;background:transparent;border:none;outline:none;
  font-family:var(--ff-crimson);font-size:14px;color:var(--text);
  resize:none;line-height:1.4;min-height:32px}

/* Card intensity slider */
.sm-card-intensity{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.sm-card-intensity-label{font-family:var(--ff-cinzel);font-size:8px;
  letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;
  display:flex;justify-content:space-between}
.sm-card-slider{-webkit-appearance:none;width:100%;height:3px;border-radius:2px;
  outline:none;cursor:pointer}
.sm-card-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  border-radius:50%;cursor:pointer;border:2px solid rgba(0,0,0,.4);
  box-shadow:0 0 4px rgba(0,0,0,.4)}

/* Add section button */
.sm-add-section{display:flex;align-items:center;justify-content:center;
  min-width:60px;max-width:80px;border-radius:12px;border:1px dashed var(--border2);
  cursor:pointer;transition:.15s;color:var(--text3);font-family:var(--ff-cinzel);
  font-size:20px;flex-shrink:0}
.sm-add-section:hover{border-color:var(--gold);color:var(--gold2);
  background:rgba(232,184,75,.04)}

/* ── RIGHT PANEL ── */
.sm-right-header{padding:16px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.sm-right-title{font-family:var(--ff-cinzel);font-size:10px;letter-spacing:2px;
  color:var(--text3);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.sm-right-title::before{content:'✦';color:var(--gold2)}
.sm-ai-btns{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex-shrink:0;
  border-bottom:1px solid var(--border)}
.sm-ai-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:8px;border:1px solid;cursor:pointer;transition:.15s;
  font-family:var(--ff-cinzel);font-size:10px;letter-spacing:1px;
  text-transform:uppercase;font-weight:600}
.sm-ai-btn:hover{transform:translateX(2px)}
.sm-ai-btn-icon{font-size:18px;flex-shrink:0}
.sm-ai-btn.epic{border-color:rgba(160,74,232,.5);color:rgba(200,130,255,.9);
  background:rgba(160,74,232,.08)}
.sm-ai-btn.epic:hover{background:rgba(160,74,232,.16)}
.sm-ai-btn.dark{border-color:rgba(74,96,200,.5);color:rgba(120,150,255,.9);
  background:rgba(74,96,200,.08)}
.sm-ai-btn.dark:hover{background:rgba(74,96,200,.16)}
.sm-ai-btn.atmosphere{border-color:rgba(74,200,216,.5);color:rgba(100,220,240,.9);
  background:rgba(74,200,216,.08)}
.sm-ai-btn.atmosphere:hover{background:rgba(74,200,216,.16)}
.sm-ai-btn.surprise{border-color:rgba(232,192,74,.5);color:var(--gold2);
  background:rgba(232,192,74,.08)}
.sm-ai-btn.surprise:hover{background:rgba(232,192,74,.16)}

/* Prompt preview */
.sm-prompt-section{flex:1;overflow-y:auto;padding:14px}
.sm-prompt-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;
  color:var(--text3);text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between}
.sm-prompt-text{font-family:var(--ff-crimson);font-size:13px;color:var(--text2);
  line-height:1.8}
.sm-prompt-text .highlight{color:var(--gold2);font-style:italic}
.sm-prompt-text .highlight-red{color:var(--crimson3);font-style:italic}
.sm-copy-btn{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1px;
  padding:3px 8px;border-radius:3px;border:1px solid var(--border2);
  background:transparent;color:var(--text3);cursor:pointer;transition:.12s}
.sm-copy-btn:hover{border-color:var(--gold);color:var(--gold2)}

/* ── SIMPLE TRANSPORT ── */
.sm-transport{position:fixed;bottom:0;left:0;right:0;height:64px;
  background:var(--panel);border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:12px;z-index:401}
.sm-t-btn{width:36px;height:36px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;cursor:pointer;border:none;
  font-size:14px;transition:.15s;flex-shrink:0}
.sm-t-play{background:var(--gold);color:#1a1a20}
.sm-t-play:hover{background:var(--gold2)}
.sm-t-stop{background:var(--bg4);color:var(--text2);border:1px solid var(--border2)}
.sm-t-stop:hover{background:var(--bg3)}
.sm-t-time{font-family:var(--ff-cinzel);font-size:11px;color:var(--text3);flex-shrink:0}
.sm-t-progress{flex:1;height:4px;background:var(--bg4);border-radius:2px;
  overflow:hidden;cursor:pointer}
.sm-t-fill{height:100%;background:var(--gold);width:0%;border-radius:2px;transition:.1s}
.sm-t-sections{display:flex;position:relative;margin-top:-18px;pointer-events:none}
.sm-t-sec-label{font-family:var(--ff-cinzel);font-size:8px;letter-spacing:1px;
  color:var(--text3);text-transform:uppercase;text-align:center}
.sm-export-group{display:flex;gap:5px;align-items:center;margin-left:auto;flex-shrink:0}
.sm-export-label{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1.5px;
  color:var(--text3);text-transform:uppercase;margin-right:4px}
.sm-export-btn{font-family:var(--ff-cinzel);font-size:9px;letter-spacing:1.5px;
  padding:6px 12px;border-radius:5px;border:1px solid var(--border2);
  background:transparent;color:var(--text2);cursor:pointer;transition:.15s;
  text-transform:uppercase;display:flex;align-items:center;gap:4px}
.sm-export-btn:hover{background:var(--bg3);color:var(--text)}
.sm-export-btn.suno{border-color:rgba(232,184,75,.5);color:var(--gold2)}
.sm-export-btn.suno:hover{background:rgba(232,184,75,.1)}

/* ── SECTION LABEL ROW ── */
.sm-sections-timeline{display:flex;height:22px;align-items:center;
  padding:0 4px;flex-shrink:0;margin-top:-4px}
.sm-sec-tick{flex:1;text-align:center;font-family:var(--ff-cinzel);font-size:8px;
  letter-spacing:1px;color:var(--text3);text-transform:uppercase;transition:.2s}
.sm-sec-tick.active{color:var(--gold2)}

@keyframes sm-card-select{
  0%{box-shadow:0 0 0 0 rgba(232,184,75,.5)}
  100%{box-shadow:0 0 0 8px rgba(232,184,75,0),0 8px 32px rgba(232,184,75,.15)}
}
.sm-card.selected{animation:sm-card-select .3s ease-out forwards}

/* ══ SIMPLE MODE LAYOUT CRITICAL FIXES ══ */
#simpleModeOverlay {
  display: none;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 400 !important;
  background: var(--bg) !important;
  flex-direction: column !important;
}
#simpleModeOverlay.show { display: flex !important; opacity: 1 !important; }

#simpleModeOverlay .sm-layout {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: 0 !important; /* force flex child to shrink properly */
}
#simpleModeOverlay .sm-sidebar {
  width: 220px !important;
  flex-shrink: 0 !important;
  background: var(--bg2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  border-right: 1px solid var(--border) !important;
  height: 100% !important;
}
#simpleModeOverlay .sm-center {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: var(--bg) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 20px 24px !important;
  gap: 16px !important;
}
#simpleModeOverlay .sm-right {
  width: 280px !important;
  flex-shrink: 0 !important;
  background: var(--bg2) !important;
  border-left: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
}
#simpleModeOverlay .sm-topbar {
  height: 58px !important;
  flex-shrink: 0 !important;
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  gap: 12px !important;
}
#simpleModeOverlay .sm-transport {
  height: 64px !important;
  flex-shrink: 0 !important;
  background: var(--panel) !important;
  border-top: 1px solid var(--border) !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  gap: 12px !important;
  z-index: 401 !important;
}
/* Curve section fills properly */
#simpleModeOverlay .sm-curve-section {
  flex-shrink: 0 !important;
}
#simpleModeOverlay .sm-curve-wrap {
  height: 120px !important;
  position: relative !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
#simpleModeOverlay .sm-cards-section {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#simpleModeOverlay .sm-cards-row {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  align-items: stretch !important;
}
#simpleModeOverlay .sm-card {
  flex: 1 !important;
  min-width: 180px !important;
  max-width: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  border: 1px solid var(--border2) !important;
  background: var(--bg2) !important;
  overflow: hidden !important;
}
#simpleModeOverlay .sm-card-visual {
  height: 320px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
#simpleModeOverlay .sm-card-visual canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#simpleModeOverlay .sm-card-body {
  padding: 10px 12px 14px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: var(--bg2) !important;
}
/* Ensure the main .app doesn't show under simple mode */
body.simple-mode-active .app { display: none !important; }


/* ══ SIMPLE MODE v2 ══ */

/* Card connector arrows */
.sm-connector{
  display:flex;align-items:center;justify-content:center;
  width:18px;flex-shrink:0;color:rgba(255,255,255,.12);
  font-size:14px;align-self:center;padding-bottom:80px;
  pointer-events:none;transition:.2s;
}
.sm-cards-row:hover .sm-connector{color:rgba(255,255,255,.2);}

/* Add section as full card */
.sm-add-card{
  flex:1;min-width:160px;max-width:220px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;
  border-radius:12px;border:2px dashed rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);cursor:pointer;transition:.25s;
}
.sm-add-card:hover{
  border-color:rgba(232,184,75,.35);background:rgba(232,184,75,.03);
  transform:translateY(-2px);
}
.sm-add-card-plus{
  font-size:28px;color:rgba(255,255,255,.15);transition:.2s;line-height:1;
}
.sm-add-card-label{
  font-family:var(--ff-cinzel);font-size:9px;letter-spacing:3px;
  color:rgba(255,255,255,.18);text-transform:uppercase;transition:.2s;
}
.sm-add-card:hover .sm-add-card-plus{color:rgba(232,184,75,.5);}
.sm-add-card:hover .sm-add-card-label{color:rgba(232,184,75,.6);}

/* Prompt quality */
.sm-quality-block{
  padding:10px 14px 14px;border-top:1px solid var(--border);flex-shrink:0;
}
.sm-quality-title{
  font-family:var(--ff-cinzel);font-size:8px;letter-spacing:2px;
  color:var(--text3);text-transform:uppercase;margin-bottom:7px;
}
.sm-quality-stars{font-size:18px;letter-spacing:2px;margin-bottom:3px;}
.sm-quality-badge{
  font-family:var(--ff-cinzel);font-size:9px;letter-spacing:2px;
  color:var(--text3);text-transform:uppercase;
}

/* Sidebar tooltips */
.sm-tooltip{
  font-family:var(--ff-crimson);font-size:11px;color:var(--text3);
  font-style:italic;line-height:1.5;padding:4px 0 8px;
}

/* Switch to advanced btn in sidebar */
.sm-switch-btn{
  display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;
  border-radius:5px;border:1px solid var(--border2);background:transparent;
  color:var(--text3);font-family:var(--ff-cinzel);font-size:9px;
  letter-spacing:1.5px;cursor:pointer;transition:.15s;text-transform:uppercase;
  margin:0;
}
.sm-switch-btn:hover{border-color:var(--gold);color:var(--gold2);
  background:rgba(232,184,75,.05);}

/* ── ONBOARDING SECTION ── */
.sm-onboarding{
  flex-shrink:0;background:var(--bg2);border-top:1px solid var(--border);
  display:none; /* shown only when Simple Mode active */
  padding:32px 40px;gap:40px;
  overflow-y:auto;
}
.sm-onboarding.visible{display:flex;}
.sm-ob-col{flex:1;min-width:0;}
.sm-ob-title{
  font-family:var(--ff-cinzel);font-size:11px;letter-spacing:3px;
  color:var(--gold2);text-transform:uppercase;margin-bottom:6px;
}
.sm-ob-sub{
  font-family:var(--ff-crimson);font-size:12px;color:var(--text3);
  font-style:italic;margin-bottom:18px;line-height:1.5;
}
.sm-ob-step{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;
}
.sm-ob-step-num{
  width:22px;height:22px;border-radius:50%;background:rgba(232,184,75,.15);
  border:1px solid rgba(232,184,75,.3);color:var(--gold2);
  font-family:var(--ff-cinzel);font-size:9px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:1px;
}
.sm-ob-step-text{
  font-family:var(--ff-crimson);font-size:13px;color:var(--text2);
  line-height:1.5;
}
.sm-ob-step-text b{color:var(--text);font-style:italic;}
.sm-ob-mini-cards{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap;}
.sm-ob-mini-card{
  flex:1;min-width:50px;border-radius:6px;overflow:hidden;
  border:1px solid var(--border2);
}
.sm-ob-mini-visual{height:48px;display:flex;align-items:center;
  justify-content:center;font-size:20px;}
.sm-ob-mini-label{
  font-family:var(--ff-cinzel);font-size:7px;letter-spacing:1px;
  color:var(--text3);text-transform:uppercase;text-align:center;
  padding:3px 4px;background:var(--bg3);
}
.sm-ob-hint{
  font-family:var(--ff-cinzel);font-size:8px;letter-spacing:1px;
  color:var(--text3);text-transform:uppercase;
  display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;
}
.sm-ob-hint span{display:flex;align-items:center;gap:3px;}
.sm-ob-hint span::before{content:'·';color:var(--gold2);}
.sm-ob-modes{display:flex;gap:10px;align-items:center;}
.sm-ob-mode-box{
  flex:1;border-radius:8px;border:1px solid var(--border2);
  padding:10px;background:var(--bg3);
}
.sm-ob-mode-tag{
  font-family:var(--ff-cinzel);font-size:8px;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:8px;
}
.sm-ob-mode-tag.simple{color:#4ac870;}
.sm-ob-mode-tag.advanced{color:var(--gold2);}
.sm-ob-principle{
  margin-top:16px;padding:12px 14px;border-radius:6px;
  border:1px solid rgba(232,184,75,.2);background:rgba(232,184,75,.04);
  font-family:var(--ff-crimson);font-size:12px;color:var(--text2);
  line-height:1.6;
}
.sm-ob-principle b{color:var(--gold2);font-style:italic;}
.sm-ob-perfect-for{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.sm-ob-tag{
  font-family:var(--ff-cinzel);font-size:8px;letter-spacing:.5px;
  padding:3px 8px;border-radius:20px;border:1px solid var(--border2);
  color:var(--text2);background:var(--bg3);text-transform:uppercase;
}
.sm-ob-arrow{font-size:20px;color:rgba(255,255,255,.2);flex-shrink:0;
  align-self:center;}


#simpleModeOverlay .sm-card-desc {
  font-family: var(--ff-crimson) !important;
  font-size: 14px !important;
  color: var(--text2) !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 4px 2px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  cursor: text !important;
  transition: .15s !important;
  line-height: 1.3 !important;
}
#simpleModeOverlay .sm-card-desc:hover {
  border-color: var(--border2) !important;
  background: var(--bg3) !important;
}
#simpleModeOverlay .sm-card-intensity-label span:first-child {
  font-family: var(--ff-cinzel) !important;
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
}
/* Card slider colored track */
#simpleModeOverlay .sm-card-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: var(--iv-color, #4ac870) !important;
  cursor: pointer !important;
  border: 2px solid rgba(0,0,0,.4) !important;
}


/* ══ SIMPLE MODE FINAL LAYOUT ══ */

/* Cards row: fill all available height */
#simpleModeOverlay .sm-cards-row {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
}

/* Each card stretches to fill height */
#simpleModeOverlay .sm-card {
  flex: 1 !important;
  min-width: 180px !important;
  max-width: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 10px !important;
  border: 1px solid var(--border2) !important;
  background: var(--bg2) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
}
#simpleModeOverlay .sm-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
#simpleModeOverlay .sm-card.selected {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold), 0 8px 32px rgba(232,184,75,.15) !important;
}

/* Card visual: flex 1 to fill remaining space */
#simpleModeOverlay .sm-card-visual {
  flex: 1 !important;
  min-height: 200px !important;
  position: relative !important;
  overflow: hidden !important;
}
#simpleModeOverlay .sm-card-visual canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Card body: fixed height at bottom */
#simpleModeOverlay .sm-card-body {
  flex: 0 0 auto !important;
  padding: 10px 12px 12px !important;
  background: rgba(10,10,15,.9) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Add section card */
#simpleModeOverlay .sm-add-card {
  flex: 1 !important;
  min-width: 120px !important;
  max-width: 160px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 10px !important;
  border: 2px dashed rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.02) !important;
  cursor: pointer !important;
  transition: .2s !important;
}
#simpleModeOverlay .sm-add-card:hover {
  border-color: rgba(232,184,75,.35) !important;
  background: rgba(232,184,75,.03) !important;
}

/* Connector arrows */
#simpleModeOverlay .sm-connector {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  color: rgba(255,255,255,.15) !important;
  font-size: 18px !important;
  padding-bottom: 120px !important;
  pointer-events: none !important;
}

/* Transport waveform */
#simpleModeOverlay .sm-transport {
  height: 56px !important;
  flex-shrink: 0 !important;
  background: var(--panel) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  gap: 10px !important;
  z-index: 401 !important;
  position: static !important;
}

/* Card desc text */
#simpleModeOverlay .sm-card-desc {
  font-family: var(--ff-crimson) !important;
  font-size: 14px !important;
  color: var(--text2) !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 2px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  cursor: text !important;
  transition: .15s !important;
}
#simpleModeOverlay .sm-card-desc:hover {
  border-color: var(--border2) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Slider */
#simpleModeOverlay .sm-card-slider {
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 3px !important;
  border-radius: 2px !important;
  outline: none !important;
  cursor: pointer !important;
}
#simpleModeOverlay .sm-card-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: var(--iv-color, #4ac870) !important;
  cursor: pointer !important;
  border: 2px solid rgba(0,0,0,.5) !important;
  box-shadow: 0 0 6px rgba(0,0,0,.5) !important;
}

/* Onboarding mini cards */
.sm-ob-mini-card {
  flex: 1 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  border: 1px solid var(--border2) !important;
  min-width: 40px !important;
}
.sm-ob-mini-visual {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
.sm-ob-mini-label {
  font-family: var(--ff-cinzel) !important;
  font-size: 7px !important;
  letter-spacing: 1px !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 3px 2px !important;
  background: var(--bg3) !important;
}

/* Waveform progress bar decoration */
#smWaveCanvas { image-rendering: pixelated; }


/* ══ SIMPLE MODE SPACE FIX ══ */

/* Sidebar — tighter sections */
#simpleModeOverlay .sm-section {
  padding: 10px 14px 8px !important;
  border-bottom: 1px solid var(--border) !important;
}
#simpleModeOverlay .sm-section-label {
  font-family: var(--ff-cinzel) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
/* Tooltips smaller */
#simpleModeOverlay .sm-section > div[style*="font-crimson"],
#simpleModeOverlay .sm-section > div[style*="italic"] {
  font-size: 10px !important;
  margin-bottom: 5px !important;
}
/* Emotion grid tighter */
#simpleModeOverlay .sm-emotion-grid {
  gap: 4px !important;
}
#simpleModeOverlay .sm-em-btn {
  padding: 7px 4px !important;
  gap: 3px !important;
}
#simpleModeOverlay .sm-em-icon {
  font-size: 18px !important;
}
#simpleModeOverlay .sm-em-name {
  font-size: 8px !important;
  letter-spacing: 0.5px !important;
}
/* Gauge tighter */
#simpleModeOverlay .sm-gauge-wrap {
  padding: 0 !important;
}
#simpleModeOverlay #smGaugeSvg {
  width: 120px !important;
  height: 70px !important;
}
/* Tempo */
#simpleModeOverlay .sm-tempo-val {
  font-size: 16px !important;
}
/* Genre trigger */
#simpleModeOverlay .genre-trigger {
  padding: 6px 10px !important;
  font-size: 11px !important;
}

/* ── CENTER: give curve less, cards more ── */
#simpleModeOverlay .sm-center {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 12px 16px 0 !important;
  gap: 8px !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}
/* Curve compact */
#simpleModeOverlay #smCurveWrap {
  height: 100px !important;
}
/* Curve label */
#simpleModeOverlay .sm-curve-label,
#simpleModeOverlay [style*="ENERGY CURVE"] {
  margin-bottom: 4px !important;
}
/* Drag hint smaller */
#simpleModeOverlay .sm-curve-hint,
#simpleModeOverlay [style*="Drag the points"] {
  font-size: 10px !important;
  margin-top: 3px !important;
}

/* ── CARDS: image fills everything ── */
#simpleModeOverlay .sm-cards-row {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  padding-bottom: 12px !important;
}
#simpleModeOverlay .sm-card {
  flex: 1 !important;
  min-width: 160px !important;
  max-width: 240px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 8px !important;
  border: 1px solid var(--border2) !important;
  background: var(--bg2) !important;
  overflow: hidden !important;
  transition: transform .15s, box-shadow .15s !important;
  cursor: pointer !important;
}
#simpleModeOverlay .sm-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.5) !important;
  border-color: rgba(255,255,255,.15) !important;
}
#simpleModeOverlay .sm-card.selected {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgba(232,184,75,.2) !important;
}
/* Image fills ALL remaining space */
#simpleModeOverlay .sm-card-visual {
  flex: 1 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
#simpleModeOverlay .sm-card-visual canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Card body fixed and compact */
#simpleModeOverlay .sm-card-body {
  flex: 0 0 auto !important;
  padding: 8px 10px 10px !important;
  background: rgba(8,8,14,.92) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
#simpleModeOverlay .sm-card-desc {
  font-family: var(--ff-crimson) !important;
  font-size: 13px !important;
  color: var(--text2) !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 2px !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  cursor: text !important;
  transition: .12s !important;
  line-height: 1.3 !important;
}
#simpleModeOverlay .sm-card-desc:hover {
  border-color: var(--border2) !important;
  background: rgba(255,255,255,.03) !important;
}
#simpleModeOverlay .sm-card-intensity-label span:first-child {
  font-family: var(--ff-cinzel) !important;
  font-size: 7px !important;
  letter-spacing: 1.5px !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
}
#simpleModeOverlay .sm-card-slider {
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 2px !important;
  border-radius: 1px !important;
  outline: none !important;
  cursor: pointer !important;
}
#simpleModeOverlay .sm-card-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: var(--iv-color, #4ac870) !important;
  cursor: pointer !important;
  border: 2px solid rgba(0,0,0,.5) !important;
}

/* Add section card */
#simpleModeOverlay .sm-add-card {
  flex: 0 0 auto !important;
  width: 100px !important;
  min-width: 80px !important;
  max-width: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  border: 1px dashed rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.02) !important;
  cursor: pointer !important;
  transition: .2s !important;
  padding-bottom: 12px !important;
}
#simpleModeOverlay .sm-add-card:hover {
  border-color: rgba(232,184,75,.3) !important;
  background: rgba(232,184,75,.03) !important;
}

/* Connectors */
#simpleModeOverlay .sm-connector {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  color: rgba(255,255,255,.12) !important;
  font-size: 16px !important;
  padding-bottom: 80px !important;
  pointer-events: none !important;
}

/* ── RIGHT PANEL ── */
#simpleModeOverlay .sm-right {
  width: 260px !important;
  flex-shrink: 0 !important;
  background: var(--bg2) !important;
  border-left: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* AI buttons tighter */
#simpleModeOverlay .sm-ai-btn {
  padding: 8px 12px !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  border-radius: 6px !important;
  margin: 0 !important;
}
#simpleModeOverlay .sm-ai-btn-icon {
  font-size: 14px !important;
}
/* Prompt preview fills all remaining space */
#simpleModeOverlay #smPromptPreview {
  font-size: 12px !important;
  line-height: 1.7 !important;
}

/* ── TRANSPORT ── */
#simpleModeOverlay .sm-transport {
  height: 52px !important;
  flex-shrink: 0 !important;
  background: var(--panel) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  gap: 10px !important;
  position: static !important;
}
#simpleModeOverlay .sm-export-btn {
  font-size: 9px !important;
  padding: 5px 10px !important;
  letter-spacing: 1px !important;
}

/* ── ONBOARDING: compact strip ── */
#simpleModeOverlay #smOnboarding {
  flex-shrink: 0 !important;
  max-height: 130px !important;
  background: linear-gradient(to bottom, rgba(18,18,28,.95), rgba(2,2,6,1)) !important;
  border-top: 2px solid rgba(201,162,39,.12) !important;
  padding: 14px 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  display: flex !important;
}


/* ══ SIMPLE MODE CARDS v3 ══ */
#simpleModeOverlay #smCardsRow {
  display: flex !important;
  gap: 10px !important;
  flex: 1 !important;
  min-height: 0 !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  padding-bottom: 14px !important;
}
#simpleModeOverlay .sm-card {
  flex: 1 !important;
  min-width: 170px !important;
  max-width: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s, border-color .15s !important;
  background: var(--bg2) !important;
}
#simpleModeOverlay .sm-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
  border-color: rgba(255,255,255,.2) !important;
}
#simpleModeOverlay .sm-card.selected {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold), 0 8px 28px rgba(232,184,75,.2) !important;
}
#simpleModeOverlay .sm-card-visual {
  flex: 1 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
#simpleModeOverlay .sm-card-visual canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#simpleModeOverlay .sm-card-body {
  flex: 0 0 auto !important;
  padding: 8px 12px 10px !important;
  background: rgba(6,6,12,.95) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
#simpleModeOverlay .sm-card-desc {
  font-family: var(--ff-crimson) !important;
  font-size: 13px !important;
  color: var(--text2) !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 1px !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  cursor: text !important;
  transition: .12s !important;
}
#simpleModeOverlay .sm-card-desc:hover {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.03) !important;
}
#simpleModeOverlay .sm-card-slider {
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 2px !important;
  border-radius: 1px !important;
  outline: none !important;
  cursor: pointer !important;
}
#simpleModeOverlay .sm-card-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--iv-color, #4ac870) !important;
  cursor: pointer !important;
  border: 2px solid rgba(0,0,0,.5) !important;
}
#simpleModeOverlay .sm-connector {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,.12) !important;
  font-size: 16px !important;
  padding-bottom: 80px !important;
  pointer-events: none !important;
}
/* Add section card */
#simpleModeOverlay .sm-add-card {
  flex: 0 0 auto !important;
  width: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
  border: 1px dashed rgba(255,255,255,.08) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: .2s !important;
}
#simpleModeOverlay .sm-add-card:hover {
  border-color: rgba(232,184,75,.25) !important;
  background: rgba(232,184,75,.02) !important;
}
/* Emotion buttons */
#simpleModeOverlay .sm-em-btn {
  padding: 8px 4px !important;
  gap: 3px !important;
  border-radius: 6px !important;
}
#simpleModeOverlay .sm-em-icon { font-size: 18px !important; }
#simpleModeOverlay .sm-em-name {
  font-size: 7px !important;
  letter-spacing: 1px !important;
}
/* AI buttons */
#simpleModeOverlay .sm-ai-btn {
  padding: 8px 12px !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  border-radius: 5px !important;
  gap: 8px !important;
}
#simpleModeOverlay .sm-ai-btn-icon { font-size: 13px !important; }
/* Export buttons */
#simpleModeOverlay .sm-export-btn {
  font-size: 8px !important;
  padding: 5px 9px !important;
  letter-spacing: 1px !important;
}
#simpleModeOverlay .sm-t-btn {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
}


/* ══ GRADIENT FADE EFFECTS ══ */

/* 1. Simple Mode right panel — prompt preview fade */
#simpleModeOverlay #smPromptPreview {
  position: relative;
}
#simpleModeOverlay .sm-prompt-fade {
  position: sticky;
  bottom: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(10,10,18,1));
  pointer-events: none;
  flex-shrink: 0;
  margin-top: -48px;
}

/* 2. Simple Mode sidebar — fade before switch button */
.sm-sidebar-fade {
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(8,8,14,.95));
  pointer-events: none;
  flex-shrink: 0;
  margin-bottom: -8px;
}

/* 3. Advanced Mode inspector — prompt fade */
.insp-prompt-fade {
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--panel));
  pointer-events: none;
  flex-shrink: 0;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}

/* 4. Advanced right panel history tab fade */
.rp-content-fade {
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--bg2));
  pointer-events: none;
  flex-shrink: 0;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}


/* ══ MEDIUM + EASY IMPROVEMENTS ══ */

/* 1. Right panel wider: 240 → 300px */
#simpleModeOverlay .sm-right,
#simpleModeOverlay [style*="width:240px"] {
  width: 300px !important;
}

/* 2. Focus mode — non-selected cards dim */
#simpleModeOverlay .sm-card.sm-unfocused {
  opacity: 0.45 !important;
  transform: scale(0.98) !important;
  filter: brightness(0.7) !important;
  transition: opacity .25s, transform .25s, filter .25s !important;
}
#simpleModeOverlay .sm-card {
  transition: opacity .25s, transform .2s, box-shadow .2s, border-color .15s, filter .25s !important;
}
#simpleModeOverlay .sm-card.selected {
  opacity: 1 !important;
  filter: brightness(1.08) !important;
}

/* 3. Add Section card — gold dashed border + purple glow */
#simpleModeOverlay .sm-add-card {
  border: 1.5px dashed rgba(201,162,39,.35) !important;
  background: rgba(160,74,232,.04) !important;
  transition: all .2s !important;
  position: relative !important;
}
#simpleModeOverlay .sm-add-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 9px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(160,74,232,0);
  transition: box-shadow .2s;
  pointer-events: none;
}
#simpleModeOverlay .sm-add-card:hover {
  border-color: rgba(201,162,39,.7) !important;
  background: rgba(160,74,232,.08) !important;
  box-shadow: 0 0 20px rgba(160,74,232,.2), 0 0 40px rgba(160,74,232,.08) !important;
}
#simpleModeOverlay .sm-add-card .sm-add-plus {
  font-size: 32px !important;
  color: rgba(201,162,39,.4) !important;
  transition: .2s !important;
  line-height: 1 !important;
}
#simpleModeOverlay .sm-add-card:hover .sm-add-plus {
  color: rgba(201,162,39,.9) !important;
  transform: scale(1.15) !important;
}

/* 4. Energy curve — glow under line */
#smCurveCanvas {
  filter: drop-shadow(0 0 6px rgba(201,162,39,.3));
}

/* 5. Onboarding collapsible */
#smOnboarding {
  transition: max-height .3s cubic-bezier(.4,0,.2,1), padding .3s !important;
  overflow: hidden !important;
}
#smOnboarding.collapsed {
  max-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.sm-ob-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  cursor: pointer;
  flex-shrink: 0;
  width: 100%;
  user-select: none;
}
.sm-ob-toggle-label {
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  transition: color .15s;
}
.sm-ob-toggle:hover .sm-ob-toggle-label {
  color: rgba(255,255,255,.6);
}
.sm-ob-toggle-arrow {
  font-size: 10px;
  color: rgba(255,255,255,.2);
  transition: transform .3s, color .15s;
}
.sm-ob-toggle:hover .sm-ob-toggle-arrow {
  color: rgba(255,255,255,.5);
}
#smOnboarding.collapsed .sm-ob-toggle-arrow {
  transform: rotate(180deg);
}
.sm-ob-content {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 6. Curve halos on points */
.sm-curve-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: smHaloPulse 2s ease-in-out infinite;
}
@keyframes smHaloPulse {
  0%, 100% { opacity: .15; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: .35; transform: translate(-50%,-50%) scale(1.3); }
}

/* 7. Narrative inspector when card selected — image thumbnail */
.sm-insp-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
  display: block;
}
.sm-insp-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.sm-insp-thumb-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(8,8,14,.98));
  pointer-events: none;
}


/* ══ RESPONSIVE CARD SIZES ══ */

/* Base: ≤1366px */
#simpleModeOverlay .sm-card {
  min-width: 160px !important;
  max-width: 200px !important;
}
#simpleModeOverlay .sm-card-visual {
  min-height: 320px !important;
}

/* 1366–1599px */
@media (min-width: 1367px) and (max-width: 1599px) {
  #simpleModeOverlay .sm-card {
    min-width: 190px !important;
    max-width: 230px !important;
  }
  #simpleModeOverlay .sm-card-visual {
    min-height: 380px !important;
  }
}

/* 1600–1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
  #simpleModeOverlay .sm-card {
    min-width: 210px !important;
    max-width: 260px !important;
  }
  #simpleModeOverlay .sm-card-visual {
    min-height: 430px !important;
  }
}

/* ≥1920px */
@media (min-width: 1920px) {
  #simpleModeOverlay .sm-card {
    min-width: 230px !important;
    max-width: 300px !important;
  }
  #simpleModeOverlay .sm-card-visual {
    min-height: 480px !important;
  }
}

/* ══ EMOTION TRANSITION FADE ══ */
#simpleModeOverlay .sm-card-visual canvas {
  transition: opacity .25s ease !important;
}
#simpleModeOverlay .sm-card-visual canvas.sm-fading {
  opacity: 0 !important;
}

/* Global color accent transition on emotion change */
#simpleModeOverlay {
  transition: background-color .3s ease !important;
}
#simpleModeOverlay .sm-em-btn {
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s !important;
}
#simpleModeOverlay .sm-em-btn.active {
  transition: border-color .3s, background .3s, box-shadow .3s !important;
}

/* Curve canvas fade on emotion change */
#smCurveCanvas {
  transition: opacity .2s ease !important;
}
#smCurveCanvas.sm-fading {
  opacity: 0.3 !important;
}


/* ══════════════════════════════════════════════════════════════
   ASSISTANT PANEL — ChatGPT Integration
   Permanent right sidebar matching the mockup design
══════════════════════════════════════════════════════════════ */

/* App layout update: make room for the assistant panel */
.app.asst-open {
  padding-right: 0;
}
.asst-panel-wrap {
  width: 280px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.asst-panel-wrap.collapsed {
  width: 0;
  border-left: none;
}

/* Header */
.asst-header {
  display: flex;
  align-items: center;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}
.asst-title {
  font-family: var(--ff-cinzel);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text);
  text-transform: uppercase;
  flex: 1;
}
.asst-header-close {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 3px;
  transition: .12s;
  line-height: 1;
}
.asst-header-close:hover { color: var(--text2); background: var(--bg3); }

/* Provider row */
.asst-provider-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.asst-provider-label {
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text2);
  text-transform: uppercase;
}
.asst-status-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
}
.asst-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #444;
  transition: background .3s;
  flex-shrink: 0;
}
.asst-status-dot.active { background: #4ac870; box-shadow: 0 0 6px rgba(74,200,112,.5); }
.asst-status-txt {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text3);
  text-transform: uppercase;
}
.asst-status-txt.active { color: #4ac870; }
.asst-key-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 4px;
  color: var(--text3);
  cursor: pointer;
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 8px;
  transition: .15s;
  text-transform: uppercase;
}
.asst-key-btn:hover { border-color: var(--gold); color: var(--gold2); background: rgba(232,184,75,.06); }

/* Scrollable body */
.asst-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.asst-body::-webkit-scrollbar { width: 3px; }
.asst-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* Section label */
.asst-sec-label {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.asst-sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Clip context section */
.asst-context-label {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.asst-context-inst {
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--gold2);
}
.asst-prompt-ta {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--ff-crimson);
  font-size: 14px;
  line-height: 1.6;
  padding: 8px 10px;
  resize: none;
  outline: none;
  min-height: 70px;
  transition: border-color .15s;
}
.asst-prompt-ta:focus { border-color: var(--gold); }
.asst-prompt-ta::placeholder { color: var(--text3); font-style: italic; }

/* Intensity row */
.asst-intensity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.asst-intensity-lbl {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text3);
  text-transform: uppercase;
}
.asst-intensity-val {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--crimson3);
  font-weight: 700;
}
.asst-intensity-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--crimson) 0%, var(--gold) 50%, var(--crimson2) 100%);
  outline: none;
  cursor: pointer;
  margin-bottom: 4px;
}
.asst-intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--crimson3);
  border: 2px solid var(--bg);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(232,74,96,.4);
}
.asst-intensity-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--crimson3);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.asst-intensity-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: .5px;
  color: var(--text3);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Action buttons */
.asst-actions {
  display: flex;
  gap: 5px;
}
.asst-btn {
  flex: 1;
  padding: 8px 4px;
  border-radius: 5px;
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .15s;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid;
}
.asst-btn.suggest {
  border-color: rgba(160,74,232,.5);
  color: rgba(200,130,255,.9);
  background: rgba(160,74,232,.08);
}
.asst-btn.suggest:hover { background: rgba(160,74,232,.18); }
.asst-btn.refine {
  border-color: rgba(74,154,232,.5);
  color: rgba(120,190,255,.9);
  background: rgba(74,154,232,.08);
}
.asst-btn.refine:hover { background: rgba(74,154,232,.18); }
.asst-btn.apply {
  border-color: rgba(74,200,112,.5);
  color: rgba(100,230,140,.9);
  background: rgba(74,200,112,.08);
}
.asst-btn.apply:hover { background: rgba(74,200,112,.18); }
.asst-btn.loading {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Suggestion items */
.asst-sug-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: .15s;
  background: var(--bg3);
  margin-bottom: 5px;
}
.asst-sug-item:hover {
  border-color: var(--gold);
  background: rgba(232,184,75,.06);
}
.asst-sug-info { flex: 1; min-width: 0; }
.asst-sug-name {
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.asst-sug-desc {
  font-family: var(--ff-crimson);
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  line-height: 1.4;
}
.asst-sug-arrow {
  font-size: 11px;
  color: var(--text3);
  align-self: center;
  flex-shrink: 0;
}
.asst-sug-item:hover .asst-sug-arrow { color: var(--gold2); }

/* Chat area */
.asst-chat-area {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.asst-chat-log {
  flex: 0 0 auto;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.asst-chat-log:empty { display: none; }
.asst-chat-msg {
  font-family: var(--ff-crimson);
  font-size: 13px;
  line-height: 1.55;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 95%;
}
.asst-chat-msg.user {
  background: var(--bg4);
  color: var(--text2);
  border: 1px solid var(--border2);
  align-self: flex-end;
  text-align: right;
}
.asst-chat-msg.asst {
  background: rgba(160,74,232,.1);
  color: var(--text);
  border: 1px solid rgba(160,74,232,.25);
  align-self: flex-start;
}
.asst-chat-msg.thinking {
  color: var(--text3);
  font-style: italic;
  animation: asstPulse 1s ease-in-out infinite;
}
@keyframes asstPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.asst-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.asst-chat-ta {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--ff-crimson);
  font-size: 13px;
  padding: 6px 10px;
  resize: none;
  outline: none;
  min-height: 32px;
  max-height: 80px;
  line-height: 1.5;
  transition: border-color .15s;
  overflow-y: auto;
}
.asst-chat-ta:focus { border-color: rgba(160,74,232,.5); }
.asst-chat-ta::placeholder { color: var(--text3); font-style: italic; }
.asst-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(160,74,232,.2);
  border: 1px solid rgba(160,74,232,.4);
  color: rgba(200,130,255,.9);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  flex-shrink: 0;
}
.asst-send-btn:hover { background: rgba(160,74,232,.35); }
.asst-send-btn:disabled { opacity: .3; cursor: not-allowed; }
.asst-disclaimer {
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: .5px;
  color: var(--text3);
  text-align: center;
  padding: 4px 14px 7px;
  opacity: .6;
}

/* API Key Modal */
.asst-key-modal {
  position: fixed;
  inset: 0;
  background: rgba(10,10,15,.88);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.asst-key-modal.show { display: flex; }
.asst-key-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  width: 420px;
  max-width: 95vw;
  padding: 24px 26px;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
}
.asst-key-title {
  font-family: var(--ff-cinzel);
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--gold2);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.asst-key-sub {
  font-family: var(--ff-crimson);
  font-size: 13px;
  color: var(--text3);
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.5;
}
.asst-key-label {
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text2);
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px;
}
.asst-key-input-row { display: flex; gap: 6px; margin-bottom: 10px; }
.asst-key-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 8px 12px;
  outline: none;
  transition: .15s;
}
.asst-key-input:focus { border-color: var(--gold2); }
.asst-key-input::placeholder { color: var(--text3); font-style: italic; }
.asst-key-vis-btn {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text3);
  cursor: pointer;
  padding: 0 10px;
  font-size: 14px;
  transition: .15s;
}
.asst-key-vis-btn:hover { color: var(--text2); background: var(--bg4); }
.asst-key-hint {
  font-family: var(--ff-crimson);
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.5;
}
.asst-key-hint a { color: var(--gold2); text-decoration: none; }
.asst-key-hint a:hover { text-decoration: underline; }
.asst-key-footer { display: flex; gap: 8px; justify-content: flex-end; }
.asst-key-save {
  background: var(--gold);
  border: none;
  border-radius: 5px;
  color: #1a1a20;
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 9px 18px;
  cursor: pointer;
  transition: .15s;
  text-transform: uppercase;
}
.asst-key-save:hover { background: var(--gold2); }
.asst-key-clear {
  background: transparent;
  border: 1px solid rgba(232,74,96,.4);
  border-radius: 5px;
  color: rgba(232,100,110,.7);
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 9px 16px;
  cursor: pointer;
  transition: .15s;
  text-transform: uppercase;
}
.asst-key-clear:hover { background: rgba(232,74,96,.1); color: var(--crimson3); border-color: var(--crimson); }
.asst-key-cancel {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text3);
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 9px 16px;
  cursor: pointer;
  transition: .15s;
  text-transform: uppercase;
}
.asst-key-cancel:hover { background: var(--bg3); }
.asst-key-status {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: 8px;
  text-transform: uppercase;
}
.asst-key-status.ok { background: rgba(74,200,112,.15); color: #4ac870; }
.asst-key-status.missing { background: rgba(232,74,96,.1); color: rgba(232,100,100,.8); }

/* ASSISTANT panel toggle button (in topbar) */
.asst-toggle-btn {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: .15s;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.asst-toggle-btn:hover { border-color: rgba(160,74,232,.5); color: rgba(200,130,255,.9); background: rgba(160,74,232,.06); }
.asst-toggle-btn.active { border-color: rgba(160,74,232,.6); color: rgba(200,130,255,.95); background: rgba(160,74,232,.12); }
.asst-toggle-dot { width: 6px; height: 6px; border-radius: 50%; background: #555; transition: .3s; }
.asst-toggle-btn.active .asst-toggle-dot,
.asst-toggle-btn .asst-toggle-dot.live { background: #4ac870; box-shadow: 0 0 5px rgba(74,200,112,.5); }

/* Empty state */
.asst-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  opacity: .5;
  gap: 6px;
}
.asst-empty-icon { font-size: 22px; }
.asst-empty-txt { font-family: var(--ff-crimson); font-size: 13px; color: var(--text3); font-style: italic; line-height: 1.6; }

/* Spinner */
.asst-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(160,74,232,.3);
  border-top-color: rgba(160,74,232,.9);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}


/* ── Utilities panel refinements ────────────────────────────── */
.util-section { padding-top: 6px !important; }
.util-group-label {
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 1.8px;
  color: var(--text3);
  text-transform: uppercase;
  opacity: .5;
  padding: 4px 8px 2px;
  display: block;
}
.util-divider {
  height: 1px;
  background: var(--border);
  margin: 5px 0;
  opacity: .5;
}
.util-btn.util-ai { color: rgba(200,130,255,.7); }
.util-btn.util-ai:hover { color: rgba(200,130,255,.95); border-color: rgba(160,74,232,.3); background: rgba(160,74,232,.07); }
.util-btn.util-danger { color: rgba(232,74,96,.5); }
.util-btn.util-danger:hover { color: rgba(232,74,96,.85); border-color: rgba(232,74,96,.3); background: rgba(232,74,96,.06); }
.util-btn:hover { transform: none !important; }

/* ══════════════════════════════════════════════════════════════════
   SIMPLE MODE v2 — Full visual redesign matching mockup
   Cards with gradient backgrounds, curve labels, new topbar
══════════════════════════════════════════════════════════════════ */

/* ── Topbar ─────────────────────────────────────────────────────── */
.sm2-topbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  flex-shrink: 0;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sm2-chip {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: rgba(255,255,255,.7);
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: default;
  white-space: nowrap;
}
.sm2-chip.gold { border-color: rgba(232,184,75,.5); color: var(--gold2); }
.sm2-generate-btn2 {
  margin-left: auto;
  padding: 9px 22px;
  border-radius: 6px;
  border: none;
  background: var(--gold);
  color: #111;
  font-family: var(--ff-cinzel);
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.sm2-generate-btn2:hover { background: var(--gold2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,184,75,.3); }

/* ── Sidebar section headers ─────────────────────────────────────── */
.sm2-sec-hdr {
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  margin-bottom: 1px;
}
.sm2-sec-sub {
  font-family: var(--ff-crimson);
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  margin-bottom: 8px;
}

/* ── Emotion grid ────────────────────────────────────────────────── */
.sm2-em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 2px;
}
.sm2-em-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: .15s;
}
.sm2-em-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.sm2-em-btn.active {
  background: rgba(232,184,75,.12);
  border-color: rgba(232,184,75,.4);
}
.sm2-em-icon { font-size: 16px; line-height: 1; }
.sm2-em-name {
  font-family: var(--ff-cinzel);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--text3);
  text-transform: uppercase;
  line-height: 1;
}
.sm2-em-btn.active .sm2-em-name { color: var(--gold2); }

/* ── Advanced mode button ────────────────────────────────────────── */
.sm2-adv-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid rgba(232,184,75,.2);
  border-radius: 6px;
  margin: 0 14px 14px;
  cursor: pointer;
  transition: .15s;
  background: rgba(232,184,75,.03);
}
.sm2-adv-btn:hover { background: rgba(232,184,75,.08); border-color: rgba(232,184,75,.4); }
.sm2-adv-btn-left { display: flex; flex-direction: column; gap: 2px; }
.sm2-adv-label {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--gold2);
  text-transform: uppercase;
}
.sm2-adv-sub {
  font-family: var(--ff-crimson);
  font-size: 10px;
  color: var(--text3);
  font-style: italic;
}
.sm2-adv-arrow { color: var(--gold2); font-size: 14px; }

/* ── Energy curve with labels ────────────────────────────────────── */
.sm2-curve-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.sm2-curve-title {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
}
.sm2-curve-info {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  color: var(--text3);
  border: 1px solid var(--border2);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  flex-shrink: 0;
}
.sm2-curve-wrap {
  position: relative;
  height: 120px;
  border-radius: 6px;
  overflow: visible;
  cursor: crosshair;
}
.sm2-curve-labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 20px;
  pointer-events: none;
  display: block;
}
.sm2-curve-label {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: capitalize;
  white-space: nowrap;
  line-height: 1;
}
.sm2-curve-hint {
  text-align: center;
  font-family: var(--ff-crimson);
  font-size: 10px;
  color: var(--text3);
  font-style: italic;
  margin-top: 28px;
}

/* ── Section cards (new design) ──────────────────────────────────── */
.sm2-cards-row {
  display: flex;
  gap: 0;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
}

.sm-card2 {
  flex: 1;
  min-width: 160px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
  border-left: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  background: #0d0d18;
  position: relative;
}
.sm-card2:hover { border-color: rgba(255,255,255,.2); }
.sm-card2.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232,184,75,.3), 0 8px 32px rgba(0,0,0,.6);
}

/* Image zone */
.sm-card2-img {
  position: relative;
  flex: 1;
  min-height: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sm-card2-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.85) 100%);
  z-index: 1;
}
.sm-card2-num {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.5);
  z-index: 2;
  line-height: 1;
}
.sm-card2-name-wrap {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
}
.sm-card2-name {
  font-family: var(--ff-cinzel);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.sm-card2-subtitle {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  margin-top: 3px;
}
.sm-card2-time {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: rgba(255,255,255,.45);
  z-index: 2;
}

/* Description zone */
.sm-card2-desc-wrap {
  flex-shrink: 0;
  padding: 8px 10px 6px;
  background: rgba(6,6,12,.95);
  border-top: 1px solid rgba(255,255,255,.05);
}
.sm-card2-desc {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: rgba(255,255,255,.75);
  font-family: var(--ff-crimson);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  min-height: 36px;
  max-height: 56px;
  overflow-y: auto;
  box-sizing: border-box;
  cursor: text;
}
.sm-card2-desc::placeholder { color: rgba(255,255,255,.2); }

/* Intensity zone */
.sm-card2-iv-wrap {
  flex-shrink: 0;
  padding: 6px 10px 8px;
  background: rgba(4,4,10,.98);
  border-top: 1px solid rgba(255,255,255,.04);
}
.sm-card2-iv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sm-card2-iv-lbl {
  font-family: var(--ff-cinzel);
  font-size: 7px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
}
.sm-card2-iv-pct {
  font-family: var(--ff-cinzel);
  font-size: 11px;
  color: rgba(255,255,255,.6);
  letter-spacing: .5px;
}
.sm-card2-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}
.sm-card2-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.6);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,.6);
}
.sm-card2-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.6);
  cursor: pointer;
}

/* ADD SECTION card */
.sm-card2-add {
  flex: 0 0 120px !important;
  max-width: 140px !important;
}
.sm-card2-add .sm-card2-img {
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #090910 !important;
  border: 2px dashed rgba(255,255,255,.08);
  flex: 1;
}
.sm-card2-add:hover .sm-card2-img { border-color: rgba(255,255,255,.2); }
.sm-card2-add-icon {
  font-size: 28px;
  color: rgba(255,255,255,.2);
  line-height: 1;
  font-weight: 200;
  transition: .15s;
}
.sm-card2-add:hover .sm-card2-add-icon { color: rgba(255,255,255,.5); }
.sm-card2-add-label {
  font-family: var(--ff-cinzel);
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  transition: .15s;
}
.sm-card2-add:hover .sm-card2-add-label { color: rgba(255,255,255,.55); }
.sm-card2-add-hint {
  font-family: var(--ff-crimson);
  font-size: 10px;
  color: rgba(255,255,255,.18);
  text-align: center;
  font-style: italic;
  padding: 0 12px;
  transition: .15s;
}
.sm-card2-add:hover .sm-card2-add-hint { color: rgba(255,255,255,.3); }

/* Card background gradients per position */
.sm-card2-bg-0 { background: linear-gradient(160deg,#0a1628 0%,#111e36 50%,#0d1a30 100%); }
.sm-card2-bg-1 { background: linear-gradient(160deg,#0a1e0d 0%,#0f2d13 50%,#091a0c 100%); }
.sm-card2-bg-2 { background: linear-gradient(160deg,#200808 0%,#3c0f0f 50%,#1c0606 100%); }
.sm-card2-bg-3 { background: linear-gradient(160deg,#1a1200 0%,#2e2100 50%,#1a1400 100%); }

/* ── Transport bar ────────────────────────────────────────────────── */
.sm2-transport {
  height: 44px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  background: rgba(4,4,10,.98);
}
.sm2-transport-play { display: flex; gap: 6px; align-items: center; }
.sm2-t-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: rgba(255,255,255,.6);
  font-size: 10px;
  cursor: pointer;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sm2-t-btn:hover { background: rgba(255,255,255,.08); }
.sm2-t-btn.play { border-color: rgba(74,200,112,.5); color: #4ac870; }
.sm2-t-time {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
  min-width: 70px;
}
.sm2-waveform {
  flex: 1;
  position: relative;
  height: 24px;
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
}
.sm2-export-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sm2-export-label {
  font-family: var(--ff-cinzel);
  font-size: 7px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.2);
  text-transform: uppercase;
}
.sm2-export-btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: rgba(255,255,255,.5);
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: .15s;
  text-transform: uppercase;
  white-space: nowrap;
}
.sm2-export-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
.sm2-export-btn.primary {
  border-color: rgba(232,184,75,.4);
  color: var(--gold2);
  background: rgba(232,184,75,.05);
}
.sm2-export-btn.primary:hover { background: rgba(232,184,75,.12); }


/* ══ GENRE PANEL v2 — tabs, recommended cards ══ */
.gp-tabs {
  display: flex;
  gap: 0;
  background: var(--bg3);
  border-radius: 5px;
  padding: 2px;
}
.gp-tab {
  padding: 5px 14px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .12s;
  text-transform: uppercase;
}
.gp-tab.active {
  background: var(--bg2);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.gp-tab:hover:not(.active) { color: var(--text2); }

/* Recommended genre cards */
.gp-recommended {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 10px 6px;
  flex-shrink: 0;
}
.gp-rec-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--bg3);
  cursor: pointer;
  transition: .14s;
}
.gp-rec-card:hover { background: var(--bg4); border-color: var(--border2); }
.gp-rec-card.active {
  background: rgba(160,74,232,.12);
  border-color: rgba(160,74,232,.4);
}
.gp-rec-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gp-rec-info { flex: 1; min-width: 0; }
.gp-rec-name {
  font-family: var(--ff-cinzel);
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--text);
  margin-bottom: 1px;
}
.gp-rec-tags {
  font-family: var(--ff-crimson);
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gp-rec-card.active .gp-rec-name { color: rgba(200,130,255,.95); }
.gp-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(160,74,232,.7);
  flex-shrink: 0;
  display: none;
}
.gp-rec-card.active .gp-rec-dot { display: block; }

/* Instrument grid in genre panel */
.gp-inst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gp-inst-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  transition: .14s;
  text-align: center;
}
.gp-inst-item:hover { background: var(--bg4); border-color: var(--border2); }
.gp-inst-icon { font-size: 20px; }
.gp-inst-name {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: .5px;
  color: var(--text2);
  text-transform: uppercase;
}
.gp-inst-cat {
  font-family: var(--ff-crimson);
  font-size: 10px;
  color: var(--text3);
  font-style: italic;
}


/* ══ QUICK ACTIONS buttons ══ */
.qa-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: .5px;
  transition: .12s;
  text-align: left;
  margin-bottom: 1px;
}
.qa-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.qa-icon {
  font-size: 11px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text3);
}
.qa-btn:hover .qa-icon { color: var(--gold2); }
.qa-btn.qa-danger { color: rgba(232,74,96,.5); }
.qa-btn.qa-danger:hover { background: rgba(232,74,96,.06); color: rgba(232,74,96,.8); }
.qa-btn.qa-danger:hover .qa-icon { color: rgba(232,74,96,.8); }


/* ── Section card delete button (hover reveal) ── */
.sm-card2-num-row {
  position: absolute;
  top: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}
.sm-card2-del {
  opacity: 0;
  background: rgba(232,74,96,.15);
  border: 1px solid rgba(232,74,96,.3);
  border-radius: 3px;
  color: rgba(232,74,96,.7);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  padding: 2px 5px;
  transition: opacity .15s, background .15s;
}
.sm-card2:hover .sm-card2-del { opacity: 1; }
.sm-card2-del:hover { background: rgba(232,74,96,.3) !important; color: rgba(232,74,96,1) !important; }

/* ── Simple Mode card drag states ── */
.sm-card2.sm-drag-ghost  { opacity: .35; transform: scale(.97); }
.sm-card2.sm-drag-over   {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(232,184,75,.3);
  transform: translateY(-3px);
}
.sm-card2[draggable="true"] { cursor: grab; }
.sm-card2[draggable="true"]:active { cursor: grabbing; }
/* Only show grab cursor on image zone, not on textareas/sliders */
.sm-card2-desc-wrap,
.sm-card2-iv-wrap { cursor: default; }


/* ══ QUICK ACTIONS v2 — matching mockup ══ */
.qa-section { padding: 8px 0 6px !important; }
.qa-header {
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  padding: 0 12px 6px;
}
.qa-btn2 {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: background .12s, color .12s;
  text-align: left;
  position: relative;
}
.qa-btn2:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.qa2-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255,255,255,.45);
  transition: color .12s;
}
.qa-btn2:hover .qa2-icon { color: var(--gold2); }
.qa2-label {
  font-family: var(--ff-cinzel);
  font-size: 10.5px;
  letter-spacing: .4px;
  flex: 1;
  line-height: 1;
}
.qa2-badge {
  font-family: var(--ff-cinzel);
  font-size: 7.5px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(160,74,232,.25);
  border: 1px solid rgba(160,74,232,.45);
  color: rgba(210,150,255,.9);
  flex-shrink: 0;
  line-height: 1;
}
.qa2-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 5px 12px;
}
.qa-btn2.qa2-danger { color: rgba(232,74,96,.65); }
.qa-btn2.qa2-danger .qa2-icon { color: rgba(232,74,96,.5); }
.qa-btn2.qa2-danger:hover { background: rgba(232,74,96,.08); color: rgba(232,74,96,.95); }
.qa-btn2.qa2-danger:hover .qa2-icon { color: rgba(232,74,96,.9); }


/* Edge cards get rounded outer corners */
.sm2-cards-row .sm-card2:first-child {
  border-left: 1px solid rgba(255,255,255,.08);
  border-radius: 8px 0 0 8px;
}
.sm2-cards-row .sm-card2:last-child {
  border-radius: 0 8px 8px 0;
}
.sm2-cards-row .sm-card2.sm-card2-add {
  border-left: 1px solid rgba(255,255,255,.06);
  border-radius: 0 8px 8px 0;
}

/* ══ Scale description ══ */
.scale-desc {
  font-family: var(--ff-crimson);
  font-size: 11.5px;
  font-style: italic;
  color: rgba(255,255,255,.55);
  margin-top: 6px;
  line-height: 1.4;
  padding: 4px 8px;
  background: rgba(255,255,255,.04);
  border-left: 2px solid rgba(232,184,75,.35);
  border-radius: 0 4px 4px 0;
  transition: color .2s, border-color .2s;
}

/* ══ Onboarding mini-cards drag states ══ */
.sm-ob-mini-card[draggable="true"] { cursor: grab; transition: opacity .15s, transform .15s; }
.sm-ob-mini-card[draggable="true"]:active { cursor: grabbing; }
.sm-ob-mini-card.ob-drag-ghost { opacity: .3; transform: scale(.93); }
.sm-ob-mini-card.ob-drag-over {
  border-color: var(--gold) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(232,184,75,.25);
}


/* ══════════════════════════════════════════════════════════════════
   CONTEXT PANEL — Unified inspector for Advanced + Simple Mode
   Replaces asstPanelWrap content
══════════════════════════════════════════════════════════════════ */

.ctx-panel {
  width: 280px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0e0e16;
  border-left: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  position: relative;
}
.ctx-panel.collapsed { width: 0; border: none; overflow: hidden; }

/* ── Header ── */
.ctx-header {
  display: flex;
  align-items: flex-start;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  gap: 10px;
}
.ctx-inst-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
}
.ctx-header-info { flex: 1; min-width: 0; }
.ctx-title {
  font-family: var(--ff-cinzel);
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.ctx-title-inst { color: var(--text); font-weight: 700; }
.ctx-title-sep { color: rgba(255,255,255,.25); font-size: 10px; }
.ctx-title-sec { color: var(--gold2); letter-spacing: 1px; }
.ctx-subtitle {
  font-family: var(--ff-crimson);
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  margin-top: 2px;
}
.ctx-collapse-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: var(--text3);
  cursor: pointer;
  font-size: 10px;
  padding: 5px 8px;
  transition: .12s;
  flex-shrink: 0;
  font-family: var(--ff-cinzel);
  letter-spacing: 1px;
}
.ctx-collapse-btn:hover { background: rgba(255,255,255,.1); color: var(--text2); }

/* ── Body ── */
.ctx-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.ctx-body::-webkit-scrollbar { width: 3px; }
.ctx-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

.ctx-section {
  padding: 12px 14px 6px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ctx-section-lbl {
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ctx-section-lbl-icon { opacity: .6; font-size: 10px; }

/* ── Prompt ──
    (clarity pass): the previous bg/border at 4-8% white was below
   the perceptual contrast threshold on dark themes — the box "melted"
   into the panel background. We sink the box (dark, not lighter) and
   use a firm 14% border so the edge reads as an editable area without
   fighting the gothic palette. Focus picks up the brand gold accent.   */
.ctx-prompt-ta {
  width: 100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--ff-crimson);
  font-size: 14px;
  line-height: 1.65;
  padding: 10px 12px;
  resize: none;
  outline: none;
  min-height: 72px;
  max-height: 130px;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
.ctx-prompt-ta:hover { border-color: rgba(255,255,255,.22); }
.ctx-prompt-ta:focus {
  border-color: var(--gold2);
  background: rgba(0,0,0,.32);
  box-shadow: 0 0 0 3px rgba(232,184,75,.12);
}
.ctx-prompt-ta::placeholder { color: rgba(255,255,255,.28); font-style: italic; }

/* ── Intensity ── */
.ctx-intensity-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ctx-intensity-pct {
  font-family: var(--ff-cinzel);
  font-size: 18px;
  letter-spacing: .5px;
  font-weight: 700;
  transition: color .2s;
}
.ctx-intensity-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin-bottom: 8px;
  background: linear-gradient(to right, #4a9ae8 0%, #a04ae8 50%, #e84a60 100%);
}
.ctx-intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e84a60;
  border: 3px solid #0e0e16;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(232,74,96,.5);
  transition: box-shadow .15s;
}
.ctx-intensity-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 14px rgba(232,74,96,.7);
}
.ctx-intensity-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e84a60;
  border: 3px solid #0e0e16;
  cursor: pointer;
}
.ctx-intensity-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.25);
  text-transform: uppercase;
}

/* ── Transform buttons ── */
.ctx-transform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ctx-tfm-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: .14s;
  text-align: left;
}
.ctx-tfm-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-1px);
}
.ctx-tfm-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.ctx-tfm-label {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}

/* Colored variants */
.ctx-tfm-btn.force   { border-color: rgba(232,74,96,.25);  }
.ctx-tfm-btn.force   .ctx-tfm-label { color: rgba(232,120,120,.9); }
.ctx-tfm-btn.force:hover   { border-color: rgba(232,74,96,.5); background: rgba(232,74,96,.07); }
.ctx-tfm-btn.space   { border-color: rgba(74,154,232,.25);  }
.ctx-tfm-btn.space   .ctx-tfm-label { color: rgba(100,180,255,.9); }
.ctx-tfm-btn.space:hover   { border-color: rgba(74,154,232,.5); background: rgba(74,154,232,.07); }
.ctx-tfm-btn.shadow  { border-color: rgba(160,74,232,.25);  }
.ctx-tfm-btn.shadow  .ctx-tfm-label { color: rgba(190,130,255,.9); }
.ctx-tfm-btn.shadow:hover  { border-color: rgba(160,74,232,.5); background: rgba(160,74,232,.07); }
.ctx-tfm-btn.epic    { border-color: rgba(232,184,75,.25);  }
.ctx-tfm-btn.epic    .ctx-tfm-label { color: rgba(232,200,100,.9); }
.ctx-tfm-btn.epic:hover    { border-color: rgba(232,184,75,.5); background: rgba(232,184,75,.07); }
.ctx-tfm-btn.atmos   { border-color: rgba(74,200,200,.25);  }
.ctx-tfm-btn.atmos   .ctx-tfm-label { color: rgba(100,220,220,.9); }
.ctx-tfm-btn.atmos:hover   { border-color: rgba(74,200,200,.5); background: rgba(74,200,200,.07); }
.ctx-tfm-btn.surprise { border-color: rgba(200,200,200,.15);  }
.ctx-tfm-btn.surprise .ctx-tfm-label { color: rgba(200,220,255,.9); }
.ctx-tfm-btn.surprise:hover { border-color: rgba(200,200,200,.35); background: rgba(255,255,255,.06); }

/* ── Context panel influence currents (replaces emoji grid) ── */
.ctx-currents { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.ctx-current {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 4px; border-radius: 4px; cursor: pointer;
  transition: background 0.14s;
}
.ctx-current:hover { background: rgba(255,255,255,0.04); }
.ctx-curr-arrow {
  font-family: var(--ff-cinzel); font-size: 12px;
  color: rgba(255,255,255,0.25); min-width: 13px; text-align: center; flex-shrink: 0;
}
.ctx-curr-name {
  font-family: var(--ff-cinzel); font-size: 9px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.52); min-width: 66px; flex-shrink: 0;
}
.ctx-curr-desc {
  font-family: var(--ff-crimson, Georgia, serif); font-size: 11px;
  font-style: italic; color: rgba(255,255,255,0.20); letter-spacing: 0.2px;
}
.ctx-current:hover .ctx-curr-name  { color: rgba(255,255,255,0.80); }
.ctx-current:hover .ctx-curr-arrow { color: rgba(255,255,255,0.55); }
.ctx-current:hover .ctx-curr-desc  { color: rgba(255,255,255,0.38); }
.ctx-drift {
  font-family: var(--ff-crimson, Georgia, serif); font-size: 10.5px;
  font-style: italic; color: rgba(255,255,255,0.18); letter-spacing: 1px;
  cursor: pointer; padding: 6px 4px; border-radius: 4px;
  transition: color 0.14s; margin-top: 2px;
}
.ctx-drift:hover { color: rgba(255,255,255,0.50); }

/* ── Suggestion items ── */
.ctx-sug-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: .14s;
  margin-bottom: 5px;
}
.ctx-sug-item:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.ctx-sug-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ctx-sug-text { flex: 1; min-width: 0; }
.ctx-sug-name {
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ctx-sug-desc {
  font-family: var(--ff-crimson);
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  line-height: 1.4;
}
.ctx-sug-arrow {
  color: rgba(255,255,255,.2);
  font-size: 14px;
  flex-shrink: 0;
  transition: .12s;
}
.ctx-sug-item:hover .ctx-sug-arrow { color: var(--gold2); transform: translateX(2px); }

/* ── Similar items ── */
.ctx-sim-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: .12s;
  margin-bottom: 3px;
}
.ctx-sim-item:hover { background: rgba(255,255,255,.05); }
.ctx-sim-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255,255,255,.3);
}
.ctx-sim-text { flex: 1; min-width: 0; }
.ctx-sim-label {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
}
.ctx-sim-value {
  font-family: var(--ff-crimson);
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ctx-sim-arrow { color: rgba(255,255,255,.15); font-size: 12px; flex-shrink: 0; }
.ctx-sim-item:hover .ctx-sim-arrow { color: rgba(255,255,255,.4); }

/* ── Empty state ── */
.ctx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  gap: 10px;
}
.ctx-empty-icon { font-size: 28px; opacity: .2; }
.ctx-empty-title {
  font-family: var(--ff-cinzel);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.25);
  text-transform: uppercase;
}
.ctx-empty-sub {
  font-family: var(--ff-crimson);
  font-size: 12px;
  color: rgba(255,255,255,.15);
  font-style: italic;
  line-height: 1.6;
}

/* ── Footer ── */
.ctx-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.ctx-footer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background .12s;
  border-right: 1px solid rgba(255,255,255,.04);
}
.ctx-footer-btn:last-child { border-right: none; }
.ctx-footer-btn:hover { background: rgba(255,255,255,.05); }
.ctx-footer-btn-icon { font-size: 14px; }
.ctx-footer-btn-lbl {
  font-family: var(--ff-cinzel);
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ctx-footer-btn.ai { }
.ctx-footer-btn.ai .ctx-footer-btn-icon { color: rgba(160,74,232,.9); }
.ctx-footer-btn.ai .ctx-footer-btn-lbl { color: rgba(160,74,232,.7); }
.ctx-footer-btn.ai:hover { background: rgba(160,74,232,.08); }
.ctx-footer-btn.copy .ctx-footer-btn-icon,
.ctx-footer-btn.copy .ctx-footer-btn-lbl { color: rgba(232,184,75,.7); }
.ctx-footer-btn.copy:hover { background: rgba(232,184,75,.07); }
.ctx-footer-btn.txt .ctx-footer-btn-icon,
.ctx-footer-btn.txt .ctx-footer-btn-lbl { color: rgba(255,255,255,.4); }
.ctx-footer-btn.remove .ctx-footer-btn-icon,
.ctx-footer-btn.remove .ctx-footer-btn-lbl { color: rgba(232,74,96,.5); }
.ctx-footer-btn.remove:hover { background: rgba(232,74,96,.07); }

/* ── Chat drawer (opens on AI button) ── */
.ctx-chat-drawer {
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  max-height: 280px;
  flex-shrink: 0;
}
.ctx-chat-drawer.hidden { display: none; }
.ctx-chat-log {
  flex: 1;
  min-height: 0;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.06) transparent;
}
.ctx-chat-msg {
  font-family: var(--ff-crimson);
  font-size: 12.5px;
  line-height: 1.55;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 95%;
}
.ctx-chat-msg.user {
  background: rgba(255,255,255,.06);
  color: var(--text2);
  border: 1px solid rgba(255,255,255,.08);
  align-self: flex-end;
}
.ctx-chat-msg.asst {
  background: rgba(160,74,232,.09);
  color: var(--text);
  border: 1px solid rgba(160,74,232,.2);
  align-self: flex-start;
}
.ctx-chat-msg.thinking {
  color: var(--text3);
  font-style: italic;
  animation: asstPulse 1s ease-in-out infinite;
}
.ctx-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 7px 10px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.ctx-chat-ta {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--ff-crimson);
  font-size: 12.5px;
  padding: 6px 9px;
  resize: none;
  outline: none;
  min-height: 30px;
  max-height: 70px;
  line-height: 1.5;
  transition: border-color .15s;
}
.ctx-chat-ta:focus { border-color: rgba(160,74,232,.4); }
.ctx-chat-ta::placeholder { color: rgba(255,255,255,.18); font-style: italic; }
.ctx-chat-send {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(160,74,232,.18);
  border: 1px solid rgba(160,74,232,.35);
  color: rgba(200,130,255,.9);
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: .15s;
}
.ctx-chat-send:hover { background: rgba(160,74,232,.32); }
.ctx-disclaimer {
  font-family: var(--ff-cinzel);
  font-size: 7px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.15);
  text-align: center;
  padding: 3px 10px 6px;
}

/* ── Loading spinner ── */
.ctx-spinner {
  width: 12px; height: 12px;
  border: 1.5px solid rgba(160,74,232,.3);
  border-top-color: rgba(160,74,232,.9);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* Hide old inspector + old asst panel */
.inspector-panel { display: none !important; }


/* ══ Prompt Preview Modal ══ */
.pp-send-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s;
  font-family: var(--ff-cinzel);
}
.pp-send-btn:hover { filter: brightness(1.2); transform: translateY(-2px); }
.pp-btn-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }

/* ══ Export History Item ══ */
.eh-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .12s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.eh-item:hover { background: rgba(255,255,255,.04); }
.eh-platform-badge {
  font-family: var(--ff-cinzel);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}
.eh-text { flex: 1; min-width: 0; }
.eh-time { font-family: var(--ff-mono); font-size: 10px; color: rgba(255,255,255,.2); flex-shrink: 0; }
.eh-preview { font-family: var(--ff-crimson); font-size: 12px; color: var(--text2); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.eh-project { font-family: var(--ff-cinzel); font-size: 9px; letter-spacing: 1px; color: var(--text3); text-transform: uppercase; margin-bottom: 3px; }

/* ══ Compare panel ══ */
.cmp-panel {
  position: fixed;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  max-width: 95vw;
  background: #0d0d16;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px 10px 0 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.6);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.cmp-panel.hidden { transform: translateX(-50%) translateY(110%); }
.cmp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.cmp-title {
  font-family: var(--ff-cinzel);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
}
.cmp-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.cmp-col {
  flex: 1;
  padding: 12px 16px;
  border-right: 1px solid rgba(255,255,255,.05);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-col:last-child { border-right: none; }
.cmp-col-hdr { font-family: var(--ff-cinzel); font-size: 9px; letter-spacing: 1.5px; color: var(--gold2); text-transform: uppercase; margin-bottom: 4px; }
.cmp-inst { font-family: var(--ff-cinzel); font-size: 10px; color: var(--text2); }
.cmp-clip { font-family: var(--ff-crimson); font-size: 13px; color: var(--text); font-style: italic; line-height: 1.55; }
.cmp-iv { font-family: var(--ff-cinzel); font-size: 9px; color: var(--text3); margin-top: 4px; }
.cmp-diff { background: rgba(232,184,75,.12); border-radius: 3px; padding: 1px 4px; color: var(--gold2); }


/* ════════════════════════════════════════════════════════════════
   ✦ ALYX PROACTIVE — placeholder de sugerencia en cells empty
   ════════════════════════════════════════════════════════════════ */
/* When Alyx propone, el placeholder cambia de color/style para
   distinguirse del placeholder generic ("describe piano here..."). */
.clip-ta.atp-proactive-suggestion::placeholder {
  color: rgba(212, 165, 116, 0.55);   /* dorado/seppia tenue */
  font-style: italic;
  opacity: 1;  /* anular el opacity:0.5 por defecto en algunos navegadores */
}
/* Variation when la sugerencia proviene de TU corpus (personal seed).
   Un tono more cálido — Alyx is usando something tuyo. */
.clip-ta.atp-proactive-suggestion.atp-proactive-personal::placeholder {
  color: rgba(232, 184, 75, 0.7);     /* gold more vivo */
}

/* Latido sutil al primer momento de show la sugerencia. Una sola
   pulsación al aparecer — Alyx "respira" un instante y se queda. */
@keyframes atpProactiveBreath {
  0%   { opacity: 0;   }
  40%  { opacity: 1;   }
  60%  { opacity: 0.85; }
  100% { opacity: 1;   }
}
.clip-ta.atp-proactive-suggestion::placeholder {
  animation: atpProactiveBreath 600ms ease-out;
}


/* ══ css/modules/advanced-tools-panel.css ══ */
/* ════════════════════════════════════════════════════════════════
   ADVANCED TOOLS PANEL — DarkMuse
   Infraestructura aislada. Todos los selectores usan prefijo .atp-
   para evitar colisiones con los styles existentes.
   ════════════════════════════════════════════════════════════════ */

/* ── Button hamburguesa en topbar ─────────────────────────────── */
/* Reutiliza el aspecto de .btn-icon pero con un selector propio
   para poder ajustarlo sin tocar los demore buttons del topbar.   */
.atp-hamburger{
  width:30px;height:30px;
  border-radius:5px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
  position:relative;
  flex-shrink:0;
}
.atp-hamburger:hover{
  background:var(--bg4);
  color:var(--gold2);
  border-color:var(--gold);
}
.atp-hamburger.atp-active{
  background:rgba(232,184,75,.12);
  color:var(--gold2);
  border-color:var(--gold);
}
.atp-hamburger svg{
  width:16px;height:16px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ── Backdrop ────────────────────────────────────────────────── */
.atp-backdrop{
  position:fixed;
  inset:0;
  background:rgba(8,8,12,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1150;
}
.atp-backdrop.atp-open{
  opacity:1;
  pointer-events:auto;
}

/* ── Contenedor of the panel ────────────────────────────────────── */
.atp-panel{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:360px;
  max-width:92vw;
  background:var(--bg2);
  border-left:1px solid var(--border2);
  box-shadow:-20px 0 60px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  z-index:1160;
  font-family:var(--ff-crimson);
  color:var(--text);
  /* Visible always en el DOM (para que las transitions funcionen);
     el translate fuera de screen lo oculta efectivamente.        */
  will-change:transform;
}
.atp-panel.atp-open{
  transform:translateX(0);
}

/* Scrollbar minimal dentro of the panel */
.atp-panel ::-webkit-scrollbar{width:4px;height:4px}
.atp-panel ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.atp-panel ::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ── Header ──────────────────────────────────────────────────── */
.atp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.atp-header-title{
  font-family:var(--ff-cinzel);
  font-size:12px;
  letter-spacing:3px;
  color:var(--gold2);
  text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.atp-header-count{
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--text3);
  background:var(--bg3);
  border:1px solid var(--border2);
  padding:2px 6px;
  border-radius:3px;
  letter-spacing:0;
}
.atp-close-btn{
  width:26px;height:26px;
  border-radius:4px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
  transition:.15s;
}
.atp-close-btn:hover{
  background:var(--bg4);
  color:var(--text);
  border-color:var(--gold);
}

/* ── Cuerpo of the panel ────────────────────────────────────────── */
.atp-body{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

/* Navegación de submenús */
.atp-nav{
  display:flex;
  flex-direction:column;
  padding:8px 10px;
  gap:2px;
}
.atp-nav-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 12px;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
  text-align:left;
  width:100%;
  color:var(--text2);
  font-family:inherit;
}
.atp-nav-item:hover{
  background:var(--bg3);
  border-color:var(--border2);
}
.atp-nav-item:active{
  transform:scale(.985);
}
.atp-nav-item.atp-selected{
  background:rgba(232,184,75,.08);
  border-color:rgba(232,184,75,.35);
}
.atp-nav-item.atp-selected .atp-nav-title{color:var(--gold2)}
.atp-nav-item.atp-selected .atp-nav-icon{color:var(--gold2)}

.atp-nav-icon{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:5px;
  background:var(--bg3);
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);
  font-size:14px;
  transition:.15s;
}
.atp-nav-item:hover .atp-nav-icon{
  color:var(--gold2);
  border-color:var(--gold);
}

.atp-nav-text{
  flex:1;
  min-width:0;
}
.atp-nav-title{
  font-family:var(--ff-cinzel);
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--text);
  line-height:1.2;
  margin-bottom:3px;
  transition:color .15s;
}
.atp-nav-desc{
  font-family:var(--ff-crimson);
  font-size:12px;
  color:var(--text3);
  line-height:1.35;
}

/* Separador entre nav y placeholder */
.atp-sep{
  height:1px;
  background:var(--border);
  margin:8px 14px;
  flex-shrink:0;
}

/* ── Placeholder de contenido ────────────────────────────────── */
.atp-placeholder{
  padding:14px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.atp-placeholder-label{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:2px;
  color:var(--text3);
  text-transform:uppercase;
}
.atp-placeholder-card{
  background:var(--bg3);
  border:1px dashed var(--border2);
  border-radius:8px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color .2s;
}
.atp-placeholder-card:hover{
  border-color:var(--gold);
}
.atp-placeholder-title{
  font-family:var(--ff-cinzel);
  font-size:14px;
  letter-spacing:2px;
  color:var(--gold2);
  text-transform:uppercase;
}
.atp-placeholder-desc{
  font-family:var(--ff-crimson);
  font-size:13px;
  color:var(--text2);
  line-height:1.45;
}
.atp-placeholder-hint{
  margin-top:6px;
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--text3);
  letter-spacing:.5px;
  padding-top:8px;
  border-top:1px dashed var(--border2);
}
.atp-placeholder-hint::before{
  content:"⚙ ";
  color:var(--gold);
}

/* ── Footer ──────────────────────────────────────────────────── */
.atp-footer{
  padding:10px 14px;
  border-top:1px solid var(--border);
  flex-shrink:0;
  display:flex;
  justify-content:flex-end;
}
.atp-footer-btn{
  padding:6px 14px;
  border-radius:4px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text2);
  font-family:var(--ff-cinzel);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
}
.atp-footer-btn:hover{
  background:var(--bg4);
  color:var(--text);
  border-color:var(--gold);
}

/* ── Animation de entrada del contenido del placeholder ──────── */
@keyframes atpFadeSlide{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:translateY(0)}
}
.atp-placeholder{
  animation:atpFadeSlide .25s ease forwards;
}

/* ── Responsivo / ventanas estrechas (Electron resize) ───────── */
@media (max-width: 720px){
  .atp-panel{width:88vw}
}

/* ── Soporte de theme claro (si the app cambia a light) ────────── */
/* The app principal usa data-theme="light" sobre body en su toggle */
body[data-theme="light"] .atp-backdrop{background:rgba(220,220,225,.5)}
body[data-theme="light"] .atp-panel{box-shadow:-20px 0 60px rgba(0,0,0,.15)}

/* ── Accesibilidad: respetar prefers-reduced-motion ──────────── */
/* Si el SO/navegador del user pide menos movimiento, anulamos
   transitions y animaciones dentro of the panel y sus modules.    */
@media (prefers-reduced-motion: reduce){
  .atp-panel,
  .atp-panel *,
  .atp-backdrop,
  .atpm,
  .atpm *,
  .atpm-toast{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══ css/modules/advanced-tools-modules.css ══ */
/* ════════════════════════════════════════════════════════════════
   ADVANCED TOOLS MODULES — DarkMuse
   Styles specifics de los modules funcionales:
   · Presets · Generate Scope · Lock System
   Todos los selectores con prefijo .atpm- (modules) para no chocar
   con .atp- (panel base) ni con el resto of the app.
   ════════════════════════════════════════════════════════════════ */

/* ── Layout común de los modules ─────────────────────────────── */
.atpm{
  padding:14px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:atpmFadeIn .25s ease forwards;
}
@keyframes atpmFadeIn{
  from{opacity:0;transform:translateY(4px)}
  to  {opacity:1;transform:translateY(0)}
}
.atpm-section-label{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:2px;
  color:var(--text3);
  text-transform:uppercase;
  margin-bottom:-4px;
}
.atpm-divider{
  height:1px;
  background:var(--border);
  margin:2px 0;
}
.atpm-empty{
  font-family:var(--ff-crimson);
  font-size:12px;
  color:var(--text3);
  font-style:italic;
  text-align:center;
  padding:14px 8px;
  border:1px dashed var(--border2);
  border-radius:6px;
}
.atpm-toast{
  position:fixed;
  bottom:24px;
  right:24px;
  background:var(--bg3);
  border:1px solid var(--gold);
  color:var(--text);
  padding:10px 16px;
  border-radius:6px;
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  z-index:1200;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.atpm-toast.atpm-show{opacity:1;transform:translateY(0)}

/* ────────────────────────────────────────────────────────────── */
/* ── 1) PRESETS ───────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */
.atpm-search-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.atpm-search{
  flex:1;
  background:var(--bg3);
  border:1px solid var(--border2);
  color:var(--text);
  font-family:var(--ff-crimson);
  font-size:13px;
  padding:7px 10px;
  border-radius:5px;
  outline:none;
  transition:border-color .15s;
}
.atpm-search:focus{ border-color:var(--gold) }
.atpm-search::placeholder{ color:var(--text3) }

.atpm-icon-btn{
  width:32px;height:32px;
  border-radius:5px;
  border:1px solid var(--border2);
  background:var(--bg3);
  color:var(--text2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
  transition:.15s;
  flex-shrink:0;
}
.atpm-icon-btn:hover{
  background:var(--bg4);
  color:var(--gold2);
  border-color:var(--gold);
}

.atpm-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.atpm-chip{
  padding:5px 10px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:var(--bg3);
  color:var(--text2);
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
  white-space:nowrap;
}
.atpm-chip:hover{
  background:var(--bg4);
  color:var(--text);
}
.atpm-chip.atpm-active{
  background:rgba(232,184,75,.15);
  color:var(--gold2);
  border-color:var(--gold);
}

.atpm-preset-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:340px;
  overflow-y:auto;
  padding-right:2px;
}
.atpm-preset-card{
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:7px;
  padding:11px 12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  transition:.15s;
  position:relative;
}
.atpm-preset-card:hover{
  border-color:var(--gold);
  background:var(--bg4);
}
.atpm-preset-icon{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:5px;
  background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  color:var(--gold2);
}
.atpm-preset-main{
  flex:1;
  min-width:0;
}
.atpm-preset-name{
  font-family:var(--ff-cinzel);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:3px;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:6px;
}
.atpm-preset-badge{
  font-family:var(--ff-mono);
  font-size:8px;
  letter-spacing:.5px;
  color:var(--text3);
  background:var(--bg);
  border:1px solid var(--border2);
  padding:1px 5px;
  border-radius:3px;
  text-transform:uppercase;
}
.atpm-preset-badge.atpm-badge-user{ color:var(--gold2); border-color:rgba(232,184,75,.4) }
.atpm-preset-desc{
  font-family:var(--ff-crimson);
  font-size:12px;
  color:var(--text3);
  line-height:1.3;
}
.atpm-preset-actions{
  display:flex;
  gap:4px;
  flex-direction:column;
  flex-shrink:0;
}
.atpm-mini-btn{
  width:26px;height:26px;
  border-radius:4px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  transition:.15s;
}
.atpm-mini-btn:hover{
  background:var(--bg);
  color:var(--gold2);
  border-color:var(--gold);
}
.atpm-mini-btn.atpm-danger:hover{
  color:var(--crimson);
  border-color:var(--crimson);
}

.atpm-action-btn{
  width:100%;
  padding:9px 12px;
  border-radius:5px;
  border:1px solid var(--border2);
  background:var(--bg3);
  color:var(--text2);
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.atpm-action-btn:hover{
  background:var(--bg4);
  border-color:var(--gold);
  color:var(--gold2);
}
.atpm-action-btn.atpm-primary{
  border-color:var(--gold);
  color:var(--gold2);
}
.atpm-action-btn.atpm-primary:hover{
  background:rgba(232,184,75,.15);
}
.atpm-action-btn.atpm-danger{
  border-color:rgba(232,74,96,.4);
  color:var(--crimson);
}
.atpm-action-btn.atpm-danger:hover{
  background:rgba(232,74,96,.08);
  border-color:var(--crimson);
}

/* ────────────────────────────────────────────────────────────── */
/* ── 2) GENERATE SCOPE ────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */
.atpm-scope-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.atpm-scope-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:11px 12px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  cursor:pointer;
  transition:.15s;
  text-align:left;
  width:100%;
  color:var(--text2);
  font-family:inherit;
}
.atpm-scope-item:hover{
  background:var(--bg4);
  border-color:rgba(232,184,75,.4);
}
.atpm-scope-item.atpm-selected{
  background:rgba(232,184,75,.1);
  border-color:var(--gold);
}
.atpm-scope-radio{
  flex-shrink:0;
  width:16px;height:16px;
  border-radius:50%;
  border:2px solid var(--border2);
  position:relative;
  margin-top:1px;
  transition:.15s;
}
.atpm-scope-item.atpm-selected .atpm-scope-radio{
  border-color:var(--gold);
}
.atpm-scope-item.atpm-selected .atpm-scope-radio::after{
  content:'';
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:var(--gold);
}
.atpm-scope-text{flex:1;min-width:0}
.atpm-scope-name{
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:3px;
  line-height:1.2;
}
.atpm-scope-item.atpm-selected .atpm-scope-name{color:var(--gold2)}
.atpm-scope-desc{
  font-family:var(--ff-crimson);
  font-size:12px;
  color:var(--text3);
  line-height:1.3;
}
.atpm-scope-count{
  margin-top:4px;
  font-family:var(--ff-mono);
  font-size:9px;
  color:var(--gold);
  letter-spacing:.5px;
}

/* ────────────────────────────────────────────────────────────── */
/* ── 3) LOCK SYSTEM ───────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */
.atpm-lock-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
}
.atpm-lock-stats-num{
  font-family:var(--ff-cinzel);
  font-size:22px;
  color:var(--gold2);
  line-height:1;
}
.atpm-lock-stats-lbl{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--text3);
  text-transform:uppercase;
}

.atpm-lock-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.atpm-lock-actions .atpm-action-btn{
  font-size:10px;
  padding:8px 6px;
  letter-spacing:1.3px;
}

.atpm-lock-grid{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:220px;
  overflow-y:auto;
  padding:8px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
}
.atpm-lock-grid-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  background:var(--bg);
  border-radius:4px;
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--text2);
}
.atpm-lock-grid-icon{
  color:var(--gold2);
  font-size:11px;
  flex-shrink:0;
}
.atpm-lock-grid-text{
  flex:1;
  min-width:0;
  display:flex;
  gap:4px;
  align-items:baseline;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.atpm-lock-grid-track{color:var(--text)}
.atpm-lock-grid-sec{color:var(--text3);font-size:10px}
.atpm-lock-grid-rm{
  width:22px;height:22px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text3);
  border-radius:3px;
  cursor:pointer;
  font-size:12px;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.atpm-lock-grid-rm:hover{
  color:var(--crimson);
  border-color:var(--crimson);
  background:rgba(232,74,96,.08);
}

/* ── Indicador visual de cell bloqueada en el sequencer ─────── */
/* Applied al `.seq-cell` original sin tocar su renderizado.    */
.seq-cell.atp-locked::before{
  content:'🔒';
  position:absolute;
  top:3px;
  left:3px;
  font-size:9px;
  z-index:5;
  pointer-events:none;
  text-shadow:0 0 4px rgba(0,0,0,.8);
  opacity:.85;
}
.seq-cell.atp-locked{
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(232,184,75,.4);
}

/* ── Hint de selection current (común a los tres modules) ─────── */
.atpm-selection-hint{
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--text3);
  padding:6px 9px;
  background:rgba(232,184,75,.05);
  border:1px dashed rgba(232,184,75,.3);
  border-radius:4px;
  line-height:1.35;
}
.atpm-selection-hint b{color:var(--gold2);font-weight:normal}


/* ══ css/modules/version-export-modules.css ══ */
/* ════════════════════════════════════════════════════════════════
   ADVANCED TOOLS MODULES II — Version History · Export Options
   Continuación de advanced-tools-modules.css (mismo prefijo .atpm-).
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────── */
/* ── 4) VERSION HISTORY ───────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */
.atpm-version-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
}
.atpm-version-stats-grp{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.atpm-version-stats-num{
  font-family:var(--ff-cinzel);
  font-size:18px;
  color:var(--gold2);
  line-height:1;
}
.atpm-version-stats-lbl{
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.4px;
  color:var(--text3);
  text-transform:uppercase;
}

/* Toggle de auto-snapshot */
.atpm-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  gap:10px;
}
.atpm-toggle-label{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.atpm-toggle-title{
  font-family:var(--ff-cinzel);
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--text);
  text-transform:uppercase;
}
.atpm-toggle-sub{
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text3);
  margin-top:2px;
}
.atpm-toggle{
  position:relative;
  width:36px;height:20px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:12px;
  cursor:pointer;
  flex-shrink:0;
  transition:.15s;
}
.atpm-toggle::after{
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--text3);
  transition:.2s;
}
.atpm-toggle.atpm-on{
  background:rgba(232,184,75,.15);
  border-color:var(--gold);
}
.atpm-toggle.atpm-on::after{
  left:18px;
  background:var(--gold2);
}

/* List de versions */
.atpm-version-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:340px;
  overflow-y:auto;
  padding-right:2px;
}
.atpm-version-card{
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  padding:10px 12px;
  transition:.15s;
  position:relative;
}
.atpm-version-card:hover{
  border-color:rgba(232,184,75,.4);
  background:var(--bg4);
}
.atpm-version-card.atpm-current{
  border-color:var(--gold);
  background:rgba(232,184,75,.06);
}
.atpm-version-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.atpm-version-icon{
  font-size:13px;
  flex-shrink:0;
}
.atpm-version-name{
  flex:1;
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--text);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.atpm-version-time{
  font-family:var(--ff-mono);
  font-size:9px;
  color:var(--text3);
  flex-shrink:0;
}
.atpm-version-meta{
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text3);
  line-height:1.3;
  margin-top:2px;
}
.atpm-version-meta b{
  color:var(--text2);
  font-weight:normal;
  font-family:var(--ff-mono);
  font-size:10px;
}
.atpm-version-comment{
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text2);
  font-style:italic;
  margin-top:3px;
  border-left:2px solid var(--border2);
  padding-left:6px;
}
.atpm-version-actions{
  display:flex;
  gap:4px;
  margin-top:8px;
}
.atpm-version-action{
  flex:1;
  padding:5px 6px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text2);
  border-radius:4px;
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
}
.atpm-version-action:hover{
  background:var(--bg);
  color:var(--gold2);
  border-color:var(--gold);
}
.atpm-version-action.atpm-danger:hover{
  color:var(--crimson);
  border-color:var(--crimson);
}

/* Vista de comparación */
.atpm-diff-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.atpm-diff-back{
  width:28px;height:28px;
  background:transparent;
  border:1px solid var(--border2);
  border-radius:4px;
  color:var(--text2);
  font-size:14px;
  cursor:pointer;
  transition:.15s;
}
.atpm-diff-back:hover{
  border-color:var(--gold);
  color:var(--gold2);
}
.atpm-diff-title{
  flex:1;
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.4px;
  color:var(--text);
  text-transform:uppercase;
}
.atpm-diff-summary{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  padding:8px 0;
}
.atpm-diff-summary-item{
  text-align:center;
  padding:8px 4px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:5px;
}
.atpm-diff-summary-num{
  font-family:var(--ff-cinzel);
  font-size:18px;
  line-height:1;
}
.atpm-diff-summary-num.atpm-add{color:#4ac870}
.atpm-diff-summary-num.atpm-del{color:var(--crimson)}
.atpm-diff-summary-num.atpm-mod{color:var(--gold2)}
.atpm-diff-summary-lbl{
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.4px;
  color:var(--text3);
  text-transform:uppercase;
  margin-top:3px;
}

.atpm-diff-section{
  margin-top:8px;
}
.atpm-diff-section-title{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--text3);
  text-transform:uppercase;
  margin-bottom:4px;
}
.atpm-diff-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-height:200px;
  overflow-y:auto;
}
.atpm-diff-row{
  padding:6px 8px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:4px;
  font-family:var(--ff-mono);
  font-size:10px;
  line-height:1.4;
}
.atpm-diff-row.atpm-add{border-left:3px solid #4ac870}
.atpm-diff-row.atpm-del{border-left:3px solid var(--crimson)}
.atpm-diff-row.atpm-mod{border-left:3px solid var(--gold2)}
.atpm-diff-key{color:var(--text);font-weight:600;font-size:10px}
.atpm-diff-from{color:var(--crimson);text-decoration:line-through;opacity:.6}
.atpm-diff-to{color:#4ac870}
.atpm-diff-arrow{color:var(--text3);margin:0 4px}

.atpm-comment-input{
  width:100%;
  box-sizing:border-box;
  background:var(--bg3);
  border:1px solid var(--border2);
  color:var(--text);
  font-family:var(--ff-crimson);
  font-size:12px;
  padding:7px 10px;
  border-radius:5px;
  outline:none;
  resize:vertical;
  min-height:30px;
  max-height:80px;
}
.atpm-comment-input:focus{ border-color:var(--gold) }

/* ────────────────────────────────────────────────────────────── */
/* ── 5) EXPORT OPTIONS ────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */
.atpm-export-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.atpm-export-card{
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  padding:14px 10px;
  cursor:pointer;
  transition:.15s;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:88px;
  position:relative;
}
.atpm-export-card:hover{
  background:var(--bg4);
  border-color:var(--gold);
  transform:translateY(-1px);
}
.atpm-export-card:active{
  transform:translateY(0);
}
.atpm-export-card.atpm-busy{
  opacity:.5;
  pointer-events:none;
}
.atpm-export-icon{
  font-size:22px;
  line-height:1;
  color:var(--gold2);
}
.atpm-export-name{
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.4px;
  color:var(--text);
  text-transform:uppercase;
  line-height:1.2;
}
.atpm-export-ext{
  font-family:var(--ff-mono);
  font-size:9px;
  color:var(--text3);
  letter-spacing:.5px;
}
.atpm-export-desc{
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text3);
  text-align:center;
  margin-top:4px;
  padding:8px 4px;
  border-top:1px dashed var(--border2);
  line-height:1.3;
}

/* Filename input */
.atpm-export-name-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.atpm-export-name-input{
  width:100%;
  box-sizing:border-box;
  background:var(--bg3);
  border:1px solid var(--border2);
  color:var(--text);
  font-family:var(--ff-mono);
  font-size:12px;
  padding:7px 10px;
  border-radius:5px;
  outline:none;
  transition:border-color .15s;
}
.atpm-export-name-input:focus{ border-color:var(--gold) }

/* Toast variant para exports exitosos (con info de size) */
.atpm-toast .atpm-toast-small{
  display:block;
  font-family:var(--ff-mono);
  font-size:9px;
  color:var(--text3);
  margin-top:3px;
  letter-spacing:.5px;
  text-transform:none;
}


/* ══ css/modules/transform-modules.css ══ */
/* ════════════════════════════════════════════════════════════════
   ADVANCED TOOLS MODULES III — Similar Ideas · Transform Tools
   Continuación con prefijo .atpm- (mismo namespace que modules I-II).
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────── */
/* ── 6) SIMILAR IDEAS ─────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */

/* Cabecera con cell activa */
.atpm-context-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  background:linear-gradient(135deg, rgba(232,184,75,.06) 0%, transparent 100%);
  border:1px solid var(--border2);
  border-left:3px solid var(--gold);
  border-radius:5px;
}
.atpm-context-icon{
  width:30px;height:30px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:14px;
  background:rgba(232,184,75,.12);
  border:1px solid rgba(232,184,75,.35);
  color:var(--gold2);
}
.atpm-context-main{
  flex:1;
  min-width:0;
}
.atpm-context-title{
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.4px;
  color:var(--text);
  text-transform:uppercase;
  margin-bottom:2px;
  line-height:1.2;
}
.atpm-context-current{
  font-family:var(--ff-crimson);
  font-size:12px;
  color:var(--text2);
  line-height:1.35;
  font-style:italic;
}
.atpm-context-empty{
  color:var(--text3);
  font-style:italic;
}

/* Source badges (de where viene cada idea) */
.atpm-source-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:-4px;
}
.atpm-source-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:10px;
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  border:1px solid var(--border2);
  background:var(--bg3);
  color:var(--text3);
}
.atpm-source-badge.atpm-on{
  color:var(--gold2);
  border-color:rgba(232,184,75,.5);
  background:rgba(232,184,75,.08);
}
.atpm-source-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  opacity:.85;
}

/* List de ideas */
.atpm-ideas-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:380px;
  overflow-y:auto;
  padding-right:2px;
}
.atpm-idea-card{
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  padding:9px 10px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  transition:.15s;
  position:relative;
  overflow:hidden;
}
.atpm-idea-card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--gold);
  opacity:0;
  transition:opacity .15s;
}
.atpm-idea-card:hover{
  background:var(--bg4);
  border-color:rgba(232,184,75,.4);
}
.atpm-idea-card:hover::before{ opacity:.4 }

.atpm-idea-label{
  flex-shrink:0;
  width:auto;
  min-width:54px;
  text-align:center;
  padding:3px 6px;
  border-radius:3px;
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  background:var(--bg);
  border:1px solid var(--border2);
  color:var(--text3);
  align-self:center;
}
.atpm-idea-label.atpm-l-ai      { color:#a04ae8; border-color:rgba(160,74,232,.4); background:rgba(160,74,232,.06) }
.atpm-idea-label.atpm-l-similar { color:#4ad0d8; border-color:rgba(74,208,216,.4); background:rgba(74,208,216,.06) }
.atpm-idea-label.atpm-l-combinatoriall { color:#d878a0; border-color:rgba(216,120,160,.45); background:rgba(216,120,160,.08); font-weight:600 }
/* ✦ Variation combinatorial que usó vocabulario del corpus del user.
   El color dorado (gold) distingue el aporte personal sin gritar. */
.atpm-idea-label.atpm-l-combinatoriall-personal {
  color:var(--gold, #e8b84b);
  border-color:rgba(232,184,75,.55);
  background:rgba(232,184,75,.10);
  font-weight:600;
}
.atpm-idea-label.atpm-l-genre   { color:#e88a4a; border-color:rgba(232,138,74,.4); background:rgba(232,138,74,.06) }
.atpm-idea-label.atpm-l-shape   { color:#4ac870; border-color:rgba(74,200,112,.4); background:rgba(74,200,112,.06) }
.atpm-idea-label.atpm-l-default { color:var(--gold2); border-color:rgba(232,184,75,.4); background:rgba(232,184,75,.06) }

/* Card con barra lateral dorada when contiene un aporte personal. */
.atpm-idea-card.atpm-idea-personal::before{
  opacity:0.7;
  background:var(--gold, #e8b84b);
}
.atpm-idea-card.atpm-idea-personal:hover::before{ opacity:1 }

.atpm-idea-text{
  flex:1;
  min-width:0;
  font-family:var(--ff-crimson);
  font-size:12px;
  color:var(--text);
  line-height:1.4;
  word-wrap:break-word;
}
.atpm-idea-apply{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:4px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--gold2);
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
  align-self:center;
}
.atpm-idea-apply:hover{
  background:rgba(232,184,75,.12);
  border-color:var(--gold);
  transform:scale(1.05);
}
.atpm-idea-apply:active{ transform:scale(.95) }

/* State: loading ideas IA */
.atpm-ai-loading{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--gold2);
  background:var(--bg3);
  border:1px dashed rgba(232,184,75,.4);
  border-radius:5px;
}
.atpm-spinner{
  width:14px;height:14px;
  border:2px solid rgba(232,184,75,.25);
  border-top-color:var(--gold2);
  border-radius:50%;
  animation:atpmSpin .8s linear infinite;
}
@keyframes atpmSpin{ to { transform:rotate(360deg) } }

.atpm-ai-fail{
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--crimson);
  padding:9px 12px;
  background:rgba(232,74,96,.06);
  border:1px solid rgba(232,74,96,.3);
  border-radius:5px;
  line-height:1.35;
}

/* ────────────────────────────────────────────────────────────── */
/* ── 7) TRANSFORM TOOLS ───────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */

.atpm-transform-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.atpm-transform-card{
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  padding:11px 8px 10px;
  cursor:pointer;
  transition:.15s;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:78px;
  position:relative;
}
.atpm-transform-card:hover{
  background:var(--bg4);
  border-color:var(--gold);
  transform:translateY(-1px);
}
.atpm-transform-card:active{ transform:translateY(0) }
.atpm-transform-card[disabled],
.atpm-transform-card.atpm-disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}
.atpm-transform-card.atpm-busy{
  pointer-events:none;
}
.atpm-transform-card.atpm-busy::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.atpm-transform-icon{
  font-size:20px;
  line-height:1;
  color:var(--gold2);
  margin-bottom:1px;
}
.atpm-transform-name{
  font-family:var(--ff-cinzel);
  font-size:10px;
  letter-spacing:1.4px;
  color:var(--text);
  text-transform:uppercase;
  line-height:1.2;
}
.atpm-transform-desc{
  font-family:var(--ff-crimson);
  font-size:10px;
  color:var(--text3);
  line-height:1.2;
  font-style:italic;
  max-width:120px;
}

/* Preview area: muestra el resultado before de aplicar */
.atpm-preview-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  margin-top:2px;
}
.atpm-preview-title{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--text3);
  text-transform:uppercase;
}
.atpm-preview-before,
.atpm-preview-after{
  font-family:var(--ff-crimson);
  font-size:12px;
  line-height:1.35;
  padding:6px 8px;
  border-radius:4px;
}
.atpm-preview-before{
  color:var(--text3);
  background:var(--bg);
  border:1px solid var(--border2);
  text-decoration:line-through;
  text-decoration-color:rgba(232,74,96,.4);
  text-decoration-thickness:1px;
}
.atpm-preview-arrow{
  font-family:var(--ff-cinzel);
  font-size:11px;
  color:var(--gold2);
  text-align:center;
  letter-spacing:1.5px;
}
.atpm-preview-after{
  color:var(--text);
  background:rgba(232,184,75,.08);
  border:1px solid rgba(232,184,75,.4);
}
.atpm-preview-actions{
  display:flex;
  gap:6px;
}
.atpm-preview-actions .atpm-action-btn{
  flex:1;
}


/* ══ css/modules/settings-module.css ══ */
/* ════════════════════════════════════════════════════════════════
   ADVANCED TOOLS MODULES IV — Settings
   Mismo prefijo .atpm- + .atps- (settings-specific) para los
   elementos propios del module.
   ════════════════════════════════════════════════════════════════ */

/* ── Sub-navegación entre sections ──────────────────────────── */
.atps-subnav{
  display:flex;
  gap:3px;
  padding:3px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.atps-subnav::-webkit-scrollbar{ display:none }
.atps-subnav-item{
  flex:1 1 auto;
  min-width:0;
  padding:7px 9px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text3);
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:4px;
  transition:.15s;
  text-align:center;
  white-space:nowrap;
}
.atps-subnav-item:hover{
  color:var(--text);
  background:var(--bg);
}
.atps-subnav-item.atps-active{
  background:rgba(232,184,75,.12);
  color:var(--gold2);
  border-color:rgba(232,184,75,.4);
}

/* ── Section (panel de una tab) ──────────────────────────── */
.atps-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:atpmFadeIn .2s ease forwards;
}
.atps-section-title{
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.6px;
  color:var(--text);
  text-transform:uppercase;
  padding-bottom:5px;
  border-bottom:1px solid var(--border2);
  margin-top:4px;
}

/* ── Filas de settings ───────────────────────────────────────── */
.atps-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  transition:.15s;
}
.atps-row:hover{ border-color:rgba(232,184,75,.25) }
.atps-row-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.atps-row-title{
  font-family:var(--ff-cinzel);
  font-size:10px;
  letter-spacing:1.4px;
  color:var(--text);
  text-transform:uppercase;
  line-height:1.2;
}
.atps-row-sub{
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text3);
  line-height:1.35;
}
.atps-row-control{
  flex-shrink:0;
  display:flex;
  align-items:center;
}

/* When el control es full-width (textarea, input largo) */
.atps-row-vertical{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.atps-row-vertical .atps-row-control{ width:100% }

/* ── Inputs y selects ────────────────────────────────────────── */
.atps-input,
.atps-select{
  background:var(--bg);
  border:1px solid var(--border2);
  color:var(--text);
  font-family:var(--ff-mono);
  font-size:12px;
  padding:6px 10px;
  border-radius:4px;
  outline:none;
  transition:border-color .15s;
  width:100%;
  box-sizing:border-box;
}
.atps-input:focus,
.atps-select:focus{ border-color:var(--gold) }
.atps-input::placeholder{ color:var(--text3) }
.atps-input-sm{ width:90px }
.atps-input-md{ width:160px }

.atps-input-key{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.5px;
  width:100%;
}

/* Toggle (reusa style del module Version History) */
.atps-toggle{
  position:relative;
  width:36px;height:20px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:12px;
  cursor:pointer;
  flex-shrink:0;
  transition:.15s;
}
.atps-toggle::after{
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--text3);
  transition:.2s;
}
.atps-toggle.atps-on{
  background:rgba(232,184,75,.15);
  border-color:var(--gold);
}
.atps-toggle.atps-on::after{
  left:18px;
  background:var(--gold2);
}

/* Slider */
.atps-slider-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  width:170px;
}
.atps-slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:2px;
  outline:none;
  cursor:pointer;
}
.atps-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;height:14px;
  background:var(--gold2);
  border:1px solid var(--gold);
  border-radius:50%;
  cursor:pointer;
  transition:transform .1s;
}
.atps-slider::-webkit-slider-thumb:hover{ transform:scale(1.15) }
.atps-slider::-moz-range-thumb{
  width:14px;height:14px;
  background:var(--gold2);
  border:1px solid var(--gold);
  border-radius:50%;
  cursor:pointer;
}
.atps-slider-val{
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--gold2);
  width:36px;
  text-align:right;
}

/* Botones de segmento (theme: dark/midnight/sepia) */
.atps-segments{
  display:flex;
  gap:0;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:5px;
  padding:2px;
}
.atps-segment{
  flex:1;
  padding:6px 10px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text3);
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:3px;
  transition:.15s;
  white-space:nowrap;
}
.atps-segment:hover{ color:var(--text) }
.atps-segment.atps-active{
  background:rgba(232,184,75,.15);
  color:var(--gold2);
  border-color:rgba(232,184,75,.35);
}

/* Eye toggle (show/hide password) */
.atps-input-wrap{
  position:relative;
  width:100%;
}
.atps-eye{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:var(--text3);
  font-size:12px;
  cursor:pointer;
  padding:4px;
  line-height:1;
}
.atps-eye:hover{ color:var(--gold2) }

/* Status pill (e.g., "API connected") */
.atps-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:10px;
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  border:1px solid var(--border2);
  background:var(--bg);
  color:var(--text3);
}
.atps-pill.atps-good{ color:#4ac870; border-color:rgba(74,200,112,.4) }
.atps-pill.atps-warn{ color:var(--crimson); border-color:rgba(232,74,96,.4) }
.atps-pill-dot{
  width:5px;height:5px;
  border-radius:50%;
  background:currentColor;
}

/* Shortcuts table */
.atps-shortcuts-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
}
.atps-shortcut{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:4px;
}
.atps-shortcut-keys{
  flex-shrink:0;
  min-width:115px;
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--gold2);
  letter-spacing:.5px;
}
.atps-shortcut-keys kbd{
  display:inline-block;
  padding:1px 6px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:3px;
  font-family:inherit;
  font-size:9px;
  color:var(--text2);
  margin-right:3px;
}
.atps-shortcut-desc{
  flex:1;
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text2);
}
.atps-shortcut-group{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--text3);
  text-transform:uppercase;
  margin:6px 0 2px;
  padding:0 4px;
}

/* Section Reset (peligrosa) */
.atps-danger-section{
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed rgba(232,74,96,.3);
  border-radius:6px;
  background:rgba(232,74,96,.03);
}
.atps-danger-section .atps-row{
  background:transparent;
  border:none;
  padding:0;
}
.atps-danger-title{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--crimson);
  text-transform:uppercase;
  margin-bottom:6px;
}

/* Indicador de "saved" */
.atps-saved-flash{
  position:absolute;
  top:8px;right:36px;
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.5px;
  color:#4ac870;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.atps-saved-flash.atps-show{ opacity:.9 }

/* Footer info */
.atps-footer-info{
  font-family:var(--ff-mono);
  font-size:9px;
  color:var(--text3);
  padding:8px 10px;
  text-align:center;
  border-top:1px dashed var(--border2);
  margin-top:6px;
  letter-spacing:.5px;
}

/* ── Corpus stats (section Alyx Learning) ─────────────────────── */
.atps-corpus-stats{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  margin-top:6px;
  border-top:1px dashed var(--border2);
  border-radius:4px;
  background:rgba(107,227,168,.04);
  border-left:2px solid rgba(107,227,168,.30);
}
.atps-corpus-head{
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--text2);
  line-height:1.6;
}
.atps-corpus-num{
  color:#6be3a8;
  font-weight:700;
  padding:0 2px;
}
.atps-corpus-table{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--ff-mono);
  font-size:10px;
  margin-top:4px;
}
.atps-corpus-row{
  display:grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr 0.8fr 0.7fr;
  gap:8px;
  padding:4px 8px;
  align-items:center;
  border-radius:3px;
}
.atps-corpus-row:nth-child(even){
  background:rgba(255,255,255,.02);
}
.atps-corpus-row-head{
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:9px;
  background:rgba(107,227,168,.08);
  border-bottom:1px solid rgba(107,227,168,.18);
}
.atps-corpus-style{
  color:var(--gold2);
  font-weight:600;
  text-transform:lowercase;
}
.atps-corpus-empty{
  font-style:italic;
  color:var(--text3);
  font-size:11px;
  padding:8px 0;
  text-align:center;
}
.atps-corpus-preview-title{
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--text3);
  margin-top:6px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.atps-corpus-preview{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:4px;
}
.atps-corpus-preview-item{
  font-size:11px;
  color:var(--text2);
  line-height:1.5;
  padding:3px 6px;
  border-left:2px solid rgba(107,227,168,.25);
  background:rgba(255,255,255,.02);
  border-radius:0 3px 3px 0;
}
.atps-corpus-count{
  display:inline-block;
  font-family:var(--ff-mono);
  font-size:9px;
  color:#6be3a8;
  background:rgba(107,227,168,.12);
  border:1px solid rgba(107,227,168,.28);
  padding:0 4px;
  border-radius:3px;
  margin-right:6px;
  vertical-align:1px;
}

/* ── Hooks de theme aplicados SOLO al panel + modules ATP ──────── */
/* IMPORTANTE: los temas anulan variables --bg / --gold solo dentro
   del scope of the panel ATP. The app principal (sequencer, inspector,
   topbar) NO se ve afectada — solo the panel lateral y sus modules. */
.atp-panel[data-atp-theme="midnight"],
:root[data-atp-theme="midnight"] .atp-panel,
:root[data-atp-theme="midnight"] .atpm-toast.atpm-shared{
  --bg: #0e0e16;
  --bg2: #14141c;
  --bg3: #1a1a26;
  --bg4: #23232f;
}
.atp-panel[data-atp-theme="sepia"],
:root[data-atp-theme="sepia"] .atp-panel,
:root[data-atp-theme="sepia"] .atpm-toast.atpm-shared{
  --bg: #1a1612;
  --bg2: #221d16;
  --bg3: #2a241c;
  --bg4: #332a1f;
  --gold: #d4a04a;
  --gold2: #e8b860;
}

/* Density: compacto reduce padding global de los modules ATP */
:root[data-atp-density="compact"] .atpm,
:root[data-atp-density="compact"] .atps-section{
  gap:7px;
}
:root[data-atp-density="compact"] .atps-row,
:root[data-atp-density="compact"] .atpm-preset-card,
:root[data-atp-density="compact"] .atpm-version-card,
:root[data-atp-density="compact"] .atpm-idea-card{
  padding:7px 9px;
}
:root[data-atp-density="comfortable"] .atpm,
:root[data-atp-density="comfortable"] .atps-section{
  gap:14px;
}

/* Font scale */
:root[data-atp-fontscale="small"]    .atpm,
:root[data-atp-fontscale="small"]    .atps-section{ font-size:90% }
:root[data-atp-fontscale="large"]    .atpm,
:root[data-atp-fontscale="large"]    .atps-section{ font-size:110% }
:root[data-atp-fontscale="x-large"]  .atpm,
:root[data-atp-fontscale="x-large"]  .atps-section{ font-size:120% }

/* ════════════════════════════════════════════════════════════════
   ✦ TU VOCABULARIO — Modal de inspección del corpus Alyx
   ════════════════════════════════════════════════════════════════ */
.atps-vocab-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100000;
  padding:24px;
}
.atps-vocab-box{
  width:min(940px, 96vw);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:var(--bg2, #1a1820);
  border:1px solid var(--border, #3d3548);
  border-radius:10px;
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
  overflow:hidden;
  font-family:var(--ff-text, system-ui, sans-serif);
}
.atps-vocab-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border, #3d3548);
  background:var(--bg3, #14111a);
}
.atps-vocab-title{
  font-family:var(--ff-cinzel, serif);
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent, #d4a574);
  flex:1;
}
.atps-vocab-count{
  color:var(--text3, #8a7d99);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.atps-vocab-close{
  width:28px; height:28px;
  border:1px solid var(--border, #3d3548);
  background:transparent;
  color:var(--text, #d8d2e0);
  cursor:pointer;
  border-radius:4px;
  font-size:14px;
  line-height:1;
}
.atps-vocab-close:hover{ background:var(--bg, #0e0c14) }

/* Toolbar: tabs de style + sort */
.atps-vocab-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 18px;
  border-bottom:1px solid var(--border2, #2a2530);
  flex-wrap:wrap;
}
.atps-vocab-tabs, .atps-vocab-sorts{
  display:flex; gap:4px;
}
.atps-vocab-tab, .atps-vocab-sort{
  padding:6px 11px;
  border:1px solid var(--border2, #2a2530);
  background:transparent;
  color:var(--text3, #8a7d99);
  cursor:pointer;
  border-radius:4px;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-family:var(--ff-cinzel, serif);
  transition:.15s;
}
.atps-vocab-tab:hover, .atps-vocab-sort:hover{ color:var(--text) }
.atps-vocab-tab-active, .atps-vocab-sort-active{
  color:var(--accent, #d4a574);
  border-color:var(--accent, #d4a574);
  background:rgba(212,165,116,0.08);
}

/* Toolbar 2: filtro de text + toggle no promovidos */
.atps-vocab-toolbar2{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 18px;
  border-bottom:1px solid var(--border2, #2a2530);
  flex-wrap:wrap;
}
.atps-vocab-filter{
  flex:1;
  min-width:200px;
  padding:7px 10px;
  background:var(--bg3, #14111a);
  border:1px solid var(--border2, #2a2530);
  border-radius:4px;
  color:var(--text);
  font-size:12px;
  font-family:inherit;
}
.atps-vocab-filter:focus{
  outline:none;
  border-color:var(--accent, #d4a574);
}
.atps-vocab-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text3, #8a7d99);
  font-size:11px;
  cursor:pointer;
  user-select:none;
}
.atps-vocab-toggle input{ cursor:pointer }

/* List */
.atps-vocab-list{
  flex:1;
  overflow-y:auto;
  padding:6px 0;
}
.atps-vocab-empty{
  padding:48px 18px;
  text-align:center;
  color:var(--text3, #8a7d99);
  font-style:italic;
  font-size:12px;
}
.atps-vocab-row{
  display:grid;
  grid-template-columns: 24px 1fr 110px 130px 60px 1fr 32px;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  font-size:12px;
  transition:background .12s;
}
.atps-vocab-row:hover{ background:rgba(255,255,255,0.025) }
.atps-vocab-promoted{
  color:var(--accent, #d4a574);
  text-align:center;
  font-size:14px;
}
.atps-vocab-unpromoted .atps-vocab-promoted{
  color:var(--text3, #8a7d99);
  opacity:0.4;
}
.atps-vocab-unpromoted{ opacity:0.55 }
.atps-vocab-text{
  color:var(--text, #d8d2e0);
  font-family:var(--ff-text, system-ui);
  word-break:break-word;
}
.atps-vocab-stat{
  color:var(--text3, #8a7d99);
  font-variant-numeric:tabular-nums;
  font-size:11px;
  white-space:nowrap;
}
.atps-vocab-good{ color:#6fcf97 }
.atps-vocab-bad{ color:#cf6f6f }
.atps-vocab-tags{
  color:var(--text3, #8a7d99);
  font-size:10px;
  font-style:italic;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.atps-vocab-del{
  width:26px; height:26px;
  border:1px solid var(--border2, #2a2530);
  background:transparent;
  color:var(--text3, #8a7d99);
  cursor:pointer;
  border-radius:4px;
  font-size:12px;
  line-height:1;
  transition:.15s;
}
.atps-vocab-del:hover{
  color:#cf6f6f;
  border-color:#cf6f6f;
  background:rgba(207,111,111,0.08);
}

/* Footer */
.atps-vocab-footer{
  padding:9px 18px;
  border-top:1px solid var(--border, #3d3548);
  background:var(--bg3, #14111a);
}
.atps-vocab-hint{
  color:var(--text3, #8a7d99);
  font-size:10px;
  letter-spacing:0.5px;
}

/* Responsive: en pantallas pequeñas, simplificar grid */
@media (max-width: 720px){
  .atps-vocab-row{
    grid-template-columns: 24px 1fr 32px;
    grid-template-rows: auto auto;
    row-gap:4px;
  }
  .atps-vocab-text{ grid-column: 2 / 3 }
  .atps-vocab-stat,
  .atps-vocab-tags{
    grid-column: 2 / 3;
    font-size:10px;
  }
  .atps-vocab-del{ grid-row: 1 / 3 }
}


/* ══ css/atp/atp-predictive.css ══ */
/* ════════════════════════════════════════════════════════════════
   ATP PREDICTIVE — Dropdown de escritura predictiva
   ════════════════════════════════════════════════════════════════ */

.atp-pred-dropdown{
  position: fixed;
  background: #181818;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  font-family: var(--ff-sans, -apple-system, system-ui, sans-serif);
  font-size: 13px;
  color: #e8e8e8;
  overflow-y: auto;
  max-height: 320px;
  padding: 4px 0;
  animation: atpPredFadeIn 120ms ease-out;
}

@keyframes atpPredFadeIn{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.atp-pred-item{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 60ms;
}
.atp-pred-item:hover,
.atp-pred-item.atp-pred-selected{
  background: rgba(232,184,75,.10);
  border-left-color: var(--gold, #e8b84b);
}

.atp-pred-tag{
  flex-shrink: 0;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: var(--ff-mono, monospace);
  border: 1px solid;
  margin-top: 1px;
  min-width: 44px;
  text-align: center;
}
.atp-pred-tag-safe{
  color: #4ad0d8;
  border-color: rgba(74,208,216,.4);
  background: rgba(74,208,216,.08);
}
.atp-pred-tag-combo{
  color: #d878a0;
  border-color: rgba(216,120,160,.4);
  background: rgba(216,120,160,.08);
}
.atp-pred-tag-wild{
  color: #a04ae8;
  border-color: rgba(160,74,232,.45);
  background: rgba(160,74,232,.10);
}
.atp-pred-tag-wildmax{
  color: #e8b84b;
  border-color: rgba(232,184,75,.5);
  background: rgba(232,184,75,.12);
  font-weight: 700;
}

/* Personal corpus badge — "✦ you". Verde-azulado, distinto del resto
   para que el user reconozca inmediatamente que es vocabulario suyo. */
.atp-pred-tag-personal{
  color: #6be3a8;
  border-color: rgba(107,227,168,.5);
  background: rgba(107,227,168,.12);
  font-weight: 700;
}
.atp-pred-item.atp-pred-personal{
  background: rgba(107,227,168,.04);
  border-left-color: rgba(107,227,168,.35);
}
.atp-pred-item.atp-pred-personal:hover,
.atp-pred-item.atp-pred-personal.atp-pred-selected{
  background: rgba(107,227,168,.12);
  border-left-color: #6be3a8;
}
.atp-pred-count{
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  font-size: 10px;
  font-family: var(--ff-mono, monospace);
  color: #6be3a8;
  background: rgba(107,227,168,.10);
  border: 1px solid rgba(107,227,168,.30);
  border-radius: 3px;
  vertical-align: 1px;
}

.atp-pred-text{
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  word-break: break-word;
  color: #e8e8e8;
}

.atp-pred-footer{
  padding: 6px 10px;
  border-top: 1px solid #2a2a2a;
  margin-top: 4px;
  font-size: 11px;
  color: #888;
  font-family: var(--ff-mono, monospace);
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.atp-pred-footer kbd{
  display: inline-block;
  padding: 1px 5px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 10px;
  color: #c8c8c8;
  font-family: var(--ff-mono, monospace);
  margin-right: 2px;
}

/* Scrollbar fino para el dropdown */
.atp-pred-dropdown::-webkit-scrollbar{ width: 8px; }
.atp-pred-dropdown::-webkit-scrollbar-track{ background: transparent; }
.atp-pred-dropdown::-webkit-scrollbar-thumb{
  background: #3a3a3a;
  border-radius: 4px;
}
.atp-pred-dropdown::-webkit-scrollbar-thumb:hover{ background: #4a4a4a; }


/* ══ css/atp/atp-insights-ui.css ══ */
/* ════════════════════════════════════════════════════════════════
   ALYX INSIGHTS UI — Styles
   ════════════════════════════════════════════════════════════════
   Panel flotante esquina inferior-izquierda. Colapsado por defecto.
   Only cabecera + badges when colapsado; cabecera + dos listas
   + footer when expandido.
   ════════════════════════════════════════════════════════════════ */

.alyx-ins-root{
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 9988;
  background: var(--bg2, #1e1e26);
  border: 1px solid var(--border2, #36364a);
  border-radius: 6px;
  font-family: var(--ff-sans, -apple-system, system-ui, sans-serif);
  color: var(--text, #f0ead8);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  width: 320px;
  max-width: 90vw;
  overflow: hidden;
  transition: width .18s, max-height .22s;
}
.alyx-ins-root.alyx-ins-collapsed{
  width: 260px;
}
.alyx-ins-root.alyx-ins-expanded{
  max-height: 70vh;
}

/* Cabecera ───────────────────────────────────────────────────── */
.alyx-ins-header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(232,184,75,.06), transparent);
}
.alyx-ins-expanded .alyx-ins-header{
  border-bottom-color: var(--border, #28283a);
}
.alyx-ins-title{
  flex: 1;
  font-family: var(--ff-cinzel, serif);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold, #e8b84b);
}
.alyx-ins-toggle{
  font-size: 12px;
  color: var(--text3, #8c8490);
  transition: transform .18s;
  display: inline-block;
}
.alyx-ins-expanded .alyx-ins-toggle{
  transform: rotate(180deg);
}

/* Badges de severidad ────────────────────────────────────────── */
.alyx-ins-badges{
  display: flex;
  gap: 4px;
}
.alyx-ins-badge{
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  font-family: var(--ff-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  border: 1px solid;
  line-height: 1.4;
}
.alyx-ins-badge-ok{
  color: #4ac870;
  border-color: rgba(74,200,112,.4);
  background: rgba(74,200,112,.08);
}

/* Cuerpo (only expandido) ───────────────────────────────────── */
.alyx-ins-body{
  max-height: calc(70vh - 40px);
  overflow-y: auto;
  display: none;
}
.alyx-ins-expanded .alyx-ins-body{
  display: block;
}

.alyx-ins-section{
  padding: 10px 10px 4px;
  border-bottom: 1px solid var(--border, #28283a);
}
.alyx-ins-section:last-child{
  border-bottom: 0;
}
.alyx-ins-section-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.alyx-ins-section-title{
  flex: 1;
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
}
.alyx-ins-refresh{
  background: transparent;
  border: 1px solid var(--border2, #36364a);
  color: var(--text3, #8c8490);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  transition: .12s;
  line-height: 1.4;
}
.alyx-ins-refresh:hover{
  color: var(--gold, #e8b84b);
  border-color: var(--gold, #e8b84b);
}

/* Listas ───────────────────────────────────────────────────── */
.alyx-ins-list{
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alyx-ins-item{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  border-left: 2px solid transparent;
  background: rgba(255,255,255,.015);
}
.alyx-ins-tag{
  flex-shrink: 0;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid;
  margin-top: 1px;
  min-width: 46px;
  text-align: center;
}
.alyx-ins-text{
  flex: 1;
  color: var(--text2, #b8b0a2);
}
.alyx-ins-meta{
  flex-shrink: 0;
  font-family: var(--ff-mono, monospace);
  font-size: 10px;
  color: var(--text3, #8c8490);
  margin-top: 1px;
}
.alyx-ins-empty{
  padding: 6px 8px;
  font-size: 11px;
  font-style: italic;
  color: var(--text3, #8c8490);
}

/* Severidad — colorimetría por nivel ───────────────────────── */
.alyx-ins-sev-critical{
  color: var(--crimson, #e84a60);
  border-color: rgba(232,74,96,.45);
  background: rgba(232,74,96,.08);
}
.alyx-ins-item.alyx-ins-sev-critical{
  border-left-color: var(--crimson, #e84a60);
}

.alyx-ins-sev-warning{
  color: var(--gold, #e8b84b);
  border-color: rgba(232,184,75,.45);
  background: rgba(232,184,75,.08);
}
.alyx-ins-item.alyx-ins-sev-warning{
  border-left-color: var(--gold, #e8b84b);
}

.alyx-ins-sev-info{
  color: #4ad0d8;
  border-color: rgba(74,208,216,.4);
  background: rgba(74,208,216,.08);
}
.alyx-ins-item.alyx-ins-sev-info{
  border-left-color: #4ad0d8;
}

.alyx-ins-sev-hint{
  color: var(--text3, #8c8490);
  border-color: var(--border2, #36364a);
  background: rgba(255,255,255,.02);
}
.alyx-ins-item.alyx-ins-sev-hint{
  border-left-color: var(--border2, #36364a);
}

/* Footer ───────────────────────────────────────────────────── */
.alyx-ins-foot{
  padding: 6px 10px 10px;
  font-size: 10px;
  font-style: italic;
  color: var(--text3, #8c8490);
  text-align: right;
}


/* ══ css/atp/atp-redesign.css ══ */
/* ════════════════════════════════════════════════════════════════
   ALYX REDESIGN — Styles
   ════════════════════════════════════════════════════════════════
   · Panel derecho rediseñado (override del inspector existente)
   · Glow en cells para issues structurales
   · Selector de genres unificado (mismo style para recommended,
     featured y demore categories)
   ════════════════════════════════════════════════════════════════ */

/* ── Panel derecho ─────────────────────────────────────────── */
#inspectorContent{
  padding: 0 !important;
  font-family: var(--ff-sans, -apple-system, system-ui, sans-serif);
  color: var(--text, #f0ead8);
}

.alyx-rp-empty{
  text-align: center;
  padding: 30px 16px;
  color: var(--text3, #8c8490);
}
.alyx-rp-empty-icon{
  font-size: 32px;
  color: var(--gold, #e8b84b);
  opacity: .5;
  margin-bottom: 10px;
}
.alyx-rp-empty-text{
  font-size: 13px;
  line-height: 1.5;
}

/* Selected cell header */
.alyx-rp-selected{
  background: linear-gradient(180deg, rgba(232,184,75,.07), transparent);
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border, #28283a);
  margin-bottom: 4px;
}
.alyx-rp-selected-row{
  display: flex;
  align-items: center;
  gap: 12px;
}
.alyx-rp-icon{
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3, #252532);
  border-radius: 6px;
}
.alyx-rp-selected-info{
  flex: 1;
  min-width: 0;
}
.alyx-rp-selected-title{
  font-family: var(--ff-cinzel, serif);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--gold, #e8b84b);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.alyx-rp-selected-clip{
  font-size: 12px;
  color: var(--text2, #b8b0a2);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sections */
.alyx-rp-section{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(40,40,58,.6);
}
.alyx-rp-section:last-child{
  border-bottom: 0;
}
.alyx-rp-label{
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alyx-rp-label-hint{
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.3px;
  color: var(--text3, #8c8490);
  opacity: .6;
  text-transform: lowercase;
}
.alyx-rp-label-ai{
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gold2, #f0c860);
  background: rgba(232,184,75,.12);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(232,184,75,.25);
}

/* Intensity slider with gradient */
.alyx-rp-intensity-bar{
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    rgba(74,200,112,.6) 0%,
    rgba(232,184,75,.7) 50%,
    rgba(232,74,96,.85) 100%);
  margin-bottom: 4px;
  overflow: hidden;
}
.alyx-rp-intensity-fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,.05);
}
.alyx-rp-intensity-thumb{
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  background: var(--text, #f0ead8);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(255,255,255,.5);
  pointer-events: none;
}
.alyx-rp-intensity-labels{
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text3, #8c8490);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.alyx-rp-intensity-input{
  width: 100%;
  height: 4px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  margin-top: -8px;
  opacity: 0;
  position: relative;
  z-index: 2;
}
.alyx-rp-intensity-input::-webkit-slider-thumb{
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* Transform/Effect/Vocal grid */
.alyx-rp-tx-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.alyx-rp-tx-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg3, #252532);
  border: 1px solid var(--border, #28283a);
  border-radius: 4px;
  color: var(--text2, #b8b0a2);
  font-family: var(--ff-sans, sans-serif);
  font-size: 12px;
  cursor: pointer;
  transition: all .14s ease;
  text-align: left;
  min-height: 36px;
}
.alyx-rp-tx-btn:hover{
  background: var(--bg4, #2e2e3c);
  border-color: var(--gold, #e8b84b);
  color: var(--gold2, #f0c860);
}
.alyx-rp-tx-btn:active{
  transform: scale(.97);
}
.alyx-rp-tx-icon{
  font-size: 14px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.alyx-rp-tx-label{
  flex: 1;
  font-size: 11px;
  line-height: 1.2;
}

/* Effect buttons — cyan accent to differentiate from Transform */
.alyx-rp-tx-btn-effect:hover{
  border-color: #4ad0d8;
  color: #4ad0d8;
}
/* Vocal buttons — crimson accent */
.alyx-rp-tx-btn-vocal:hover{
  border-color: var(--crimson, #e84a60);
  color: var(--crimson2, #f06070);
}

/* Suggestions / Similar Ideas */
.alyx-rp-suggestions{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alyx-rp-suggestions-empty{
  font-size: 11px;
  font-style: italic;
  color: var(--text3, #8c8490);
  padding: 8px 4px;
}
.alyx-rp-sug-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.015);
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--ff-sans, sans-serif);
  font-size: 12px;
  color: var(--text2, #b8b0a2);
  cursor: pointer;
  text-align: left;
  transition: all .12s;
  width: 100%;
}
.alyx-rp-sug-item:hover{
  background: rgba(232,184,75,.06);
  border-color: rgba(232,184,75,.3);
  color: var(--text, #f0ead8);
}
.alyx-rp-sug-dot{
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold, #e8b84b);
}
.alyx-rp-sug-dot.soft{ background: #4ac870; }
.alyx-rp-sug-dot.mid{ background: var(--gold, #e8b84b); }
.alyx-rp-sug-dot.intense{ background: var(--crimson, #e84a60); }
.alyx-rp-sug-text{
  flex: 1;
  font-size: 11.5px;
  line-height: 1.35;
}
.alyx-rp-sug-item-similar .alyx-rp-sug-text{
  font-style: italic;
}

/* ── Cell glow when hovering issues in insights panel ──────── */
.seq-cell.alyx-issue-glow-critical,
.clip-cell.alyx-issue-glow-critical{
  animation: alyxGlowCritical 2.4s ease-out;
  position: relative;
  z-index: 5;
}
.seq-cell.alyx-issue-glow-warning,
.clip-cell.alyx-issue-glow-warning{
  animation: alyxGlowWarning 2.4s ease-out;
  position: relative;
  z-index: 5;
}
.seq-cell.alyx-issue-glow-info,
.clip-cell.alyx-issue-glow-info{
  animation: alyxGlowInfo 2.4s ease-out;
  position: relative;
  z-index: 5;
}

@keyframes alyxGlowCritical{
  0%   { box-shadow: 0 0 0 0 rgba(232,74,96,0);       outline: 2px solid rgba(232,74,96,0); }
  25%  { box-shadow: 0 0 24px 4px rgba(232,74,96,.7); outline: 2px solid rgba(232,74,96,.9); }
  100% { box-shadow: 0 0 0 0 rgba(232,74,96,0);       outline: 2px solid rgba(232,74,96,0); }
}
@keyframes alyxGlowWarning{
  0%   { box-shadow: 0 0 0 0 rgba(232,184,75,0);       outline: 2px solid rgba(232,184,75,0); }
  25%  { box-shadow: 0 0 22px 4px rgba(232,184,75,.7); outline: 2px solid rgba(232,184,75,.9); }
  100% { box-shadow: 0 0 0 0 rgba(232,184,75,0);       outline: 2px solid rgba(232,184,75,0); }
}
@keyframes alyxGlowInfo{
  0%   { box-shadow: 0 0 0 0 rgba(74,208,216,0);       outline: 2px solid rgba(74,208,216,0); }
  25%  { box-shadow: 0 0 20px 4px rgba(74,208,216,.6); outline: 2px solid rgba(74,208,216,.8); }
  100% { box-shadow: 0 0 0 0 rgba(74,208,216,0);       outline: 2px solid rgba(74,208,216,0); }
}

/* Insights panel items — cursor pointer to signal interactivity */
.alyx-ins-item[data-secid]{
  cursor: pointer;
  transition: background .12s;
}
.alyx-ins-item[data-secid]:hover{
  background: rgba(255,255,255,.04);
}

/* ── Selector de genres unificado ─────────────────────────── */
/* Hacemos que las dos sections (gp-recommended y genreScroll)
   usen el mismo style de tarjeta. */
.gp-recommended .gp-chip,
#genreScroll .gs-item{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: var(--bg3, #252532) !important;
  border: 1px solid var(--border, #28283a) !important;
  border-radius: 5px !important;
  margin-bottom: 5px !important;
  cursor: pointer !important;
  transition: all .12s !important;
  text-align: left !important;
  width: 100% !important;
}
.gp-recommended .gp-chip:hover,
#genreScroll .gs-item:hover{
  background: var(--bg4, #2e2e3c) !important;
  border-color: var(--gold, #e8b84b) !important;
}
.gp-recommended .gp-chip.on,
#genreScroll .gs-item.on{
  background: linear-gradient(180deg, rgba(160,74,232,.15), rgba(160,74,232,.05)) !important;
  border-color: rgba(160,74,232,.6) !important;
}

/* ════════════════════════════════════════════════════════════════
   REGLAS EXTRAÍDAS DE v2 (que yes funcionaban bien)
   ════════════════════════════════════════════════════════════════ */

/* Emociones en grid 2 columnas */
.em-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  flex-direction: unset !important;
}
.em-btn2{
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  min-height: 32px;
}
.em-btn2-icon{ font-size: 14px !important; }
.em-btn2-name{ font-size: 10.5px !important; letter-spacing: .3px !important; }

/* Selector de genres UNIFICADO — clases reales (.gp-rec-card y .genre-item) */
.gp-rec-card,
.genre-item{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: var(--bg3, #252532) !important;
  border: 1px solid var(--border, #28283a) !important;
  border-radius: 5px !important;
  margin: 0 12px 5px !important;
  cursor: pointer !important;
  transition: all .12s !important;
  text-align: left !important;
}
.gp-rec-card:hover,
.genre-item:hover{
  background: var(--bg4, #2e2e3c) !important;
  border-color: var(--gold, #e8b84b) !important;
}
.gp-rec-card.active,
.genre-item.active{
  background: linear-gradient(180deg, rgba(160,74,232,.18), rgba(160,74,232,.06)) !important;
  border-color: rgba(160,74,232,.6) !important;
}
.gp-rec-icon,
.genre-item-icon{
  font-size: 18px !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  text-align: center !important;
}
.gp-rec-info, .genre-item-info{ flex: 1 !important; min-width: 0 !important; }
.gp-rec-name, .genre-item-name{
  font-family: var(--ff-cinzel, serif) !important;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  color: var(--text, #f0ead8) !important;
  text-transform: none !important;
  margin-bottom: 2px !important;
}
.gp-rec-card.active .gp-rec-name,
.genre-item.active .genre-item-name{ color: var(--gold, #e8b84b) !important; }
.gp-rec-tags, .genre-item-tags{
  font-family: var(--ff-crimson, Georgia, serif) !important;
  font-size: 10.5px !important;
  font-style: italic !important;
  color: var(--text3, #8c8490) !important;
}
.gp-rec-dot{ display: none !important; }

.gpc-row{
  margin: 8px 12px 4px !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(40,40,58,.6) !important;
}
.gpc-items{ margin-bottom: 6px !important; }

/* ════════════════════════════════════════════════════════════════
   v3 — Insights docked/floating + topbar menu + prompt textarea
   ════════════════════════════════════════════════════════════════ */

/* Panel modes */
#alyxInsightsPanel.alyx-ins-docked{
  width: 36px !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  resize: none;
  border-right: 1px solid var(--border2, #36364a);
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  cursor: pointer;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-header{
  flex-direction: column;
  padding: 10px 6px;
  cursor: pointer;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-title{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  margin: 6px 0;
  flex: none;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-badges{
  flex-direction: column;
  gap: 3px;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-body{
  display: none !important;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-toggle,
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-dock{
  display: none;
}

#alyxInsightsPanel.alyx-ins-floating{
  cursor: default;
  resize: both;
  min-width: 280px;
  min-height: 120px;
  border-radius: 6px;
}
#alyxInsightsPanel.alyx-ins-floating .alyx-ins-header{
  cursor: move;
  user-select: none;
}
.alyx-ins-dock{
  font-size: 13px;
  line-height: 1;
}
.alyx-ins-dock:hover{
  color: var(--gold, #e8b84b) !important;
}

/* Topbar consolidation menu */
.alyx-topbar-more{
  background: transparent;
  border: 1px solid var(--border2, #36364a);
  border-radius: 4px;
  color: var(--text2, #b8b0a2);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  margin-left: 4px;
  transition: all .12s;
}
.alyx-topbar-more:hover{
  background: var(--bg3, #252532);
  border-color: var(--gold, #e8b84b);
  color: var(--gold, #e8b84b);
}
.alyx-topbar-more-pop{
  position: fixed;
  z-index: 10000;
  background: var(--bg2, #1e1e26);
  border: 1px solid var(--border2, #36364a);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  padding: 6px;
  min-width: 220px;
}
.alyx-topbar-more-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 3px;
  transition: background .1s;
}
.alyx-topbar-more-row:hover{
  background: var(--bg3, #252532);
}
.alyx-topbar-more-row > button,
.alyx-topbar-more-row > .icon-btn{
  flex-shrink: 0;
}
.alyx-topbar-more-label{
  flex: 1;
  font-family: var(--ff-sans, sans-serif);
  font-size: 11.5px;
  color: var(--text2, #b8b0a2);
  text-transform: capitalize;
}

/* Inspector prompt textarea — double the height to use the empty
   space below in the inspector panel. */
#ctxPromptTa{
  min-height: 280px !important;
  height: auto !important;
}
.rp-body{
  display: flex !important;
  flex-direction: column !important;
}
.rp-body .rp-section:has(#ctxPromptTa){
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.rp-body .rp-section:has(#ctxPromptTa) #ctxPromptTa{
  flex: 1 !important;
}


/* ════════════════════════════════════════════════════════════════
   v4 — Insights horizontal en sidebar + "What happens next" 3x
   ════════════════════════════════════════════════════════════════ */

/* Insights horizontal docked: franja al background del sidebar izquierdo */
#alyxInsightsPanel.alyx-ins-docked{
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--border2, #36364a);
  border-right: none;
  cursor: pointer;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-header{
  flex-direction: row;
  padding: 10px 12px;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-title{
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 10px;
  margin: 0;
  flex: 1;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-badges{
  flex-direction: row;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-body{
  display: none !important;
}
#alyxInsightsPanel.alyx-ins-docked .alyx-ins-toggle{ display: none; }

/* Make the sidebar position-relative so the docked panel can anchor */
.lsidebar{ position: relative; }

/* "What happens next" / suggestions section — 3x larger.
   The suggestions block in the insights panel becomes the focal element. */
.alyx-ins-body .alyx-ins-section:nth-child(2){
  padding: 16px 14px;
}
.alyx-ins-body .alyx-ins-section:nth-child(2) .alyx-ins-section-title{
  font-size: 13px;
  letter-spacing: 1.8px;
  color: var(--gold, #e8b84b);
}
.alyx-ins-body .alyx-ins-section:nth-child(2) .alyx-ins-item{
  font-size: 14px;
  padding: 10px 12px;
  line-height: 1.5;
  min-height: 50px;
}
.alyx-ins-body .alyx-ins-section:nth-child(2) .alyx-ins-text{
  font-size: 13px;
}
.alyx-ins-body .alyx-ins-section:nth-child(2) .alyx-ins-tag{
  font-size: 10px;
  padding: 2px 8px;
  min-width: 56px;
}

/* Quick Ideas (emotional shortcuts) */
.alyx-quick-emotions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 12px;
}
.alyx-quick-emo-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg3, #252532);
  border: 1px solid var(--border, #28283a);
  border-radius: 4px;
  color: var(--text2, #b8b0a2);
  font-family: var(--ff-sans, sans-serif);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all .12s;
}
.alyx-quick-emo-btn:hover{
  background: var(--bg4, #2e2e3c);
  border-color: var(--gold, #e8b84b);
  color: var(--gold2, #f0c860);
}
.alyx-quick-emo-icon{ font-size: 18px; }

/* En Simple Mode, asegurarnos de que el sidebar izquierdo muestra
   genre, key y scale igual que en Advanced. Simple Mode no oculta
   esos bloques de fábrica si son hijos de .lsidebar — confirmamos. */
body.simple-mode .lsidebar .ls-section,
.lsidebar .ls-section{
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════
   ONBOARDING — Tours con glow dorado y animaciones premium
   ════════════════════════════════════════════════════════════════ */

/* Overlay oscuro con blur del resto de la screen */
.alyx-ob-overlay{
  position: fixed; inset: 0;
  z-index: 10500;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: auto;
  opacity: 0;
  transition: background .4s ease, backdrop-filter .4s ease, opacity .4s ease;
}
.alyx-ob-overlay.alyx-ob-overlay-show{
  background: rgba(8, 8, 14, .68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
}
.alyx-ob-hidden{ display: none !important; }

/* Glow dorado en el elemento target */
.alyx-ob-glow{
  position: fixed;
  pointer-events: none;
  z-index: 10550;
  border-radius: 8px;
  opacity: 0;
  transition: left .35s cubic-bezier(.4,0,.2,1),
              top .35s cubic-bezier(.4,0,.2,1),
              width .35s cubic-bezier(.4,0,.2,1),
              height .35s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
  box-shadow:
    0 0 0 2px rgba(232,184,75,.95),
    0 0 14px 2px rgba(232,184,75,.7),
    0 0 36px 8px rgba(232,184,75,.45),
    0 0 80px 20px rgba(232,184,75,.18);
}
.alyx-ob-glow.alyx-ob-glow-active{
  opacity: 1;
  animation: alyx-ob-breathe 2.2s ease-in-out infinite;
}
@keyframes alyx-ob-breathe{
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(232,184,75,.95),
      0 0 14px 2px rgba(232,184,75,.7),
      0 0 36px 8px rgba(232,184,75,.45),
      0 0 80px 20px rgba(232,184,75,.18);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255,210,110,1),
      0 0 22px 4px rgba(255,210,110,.85),
      0 0 56px 14px rgba(232,184,75,.55),
      0 0 110px 30px rgba(232,184,75,.25);
  }
}
.alyx-ob-glow.alyx-ob-glow-flash{
  animation: alyx-ob-flash .3s ease-out, alyx-ob-breathe 2.2s ease-in-out .3s infinite;
}
@keyframes alyx-ob-flash{
  0% { filter: brightness(1.6) saturate(1.4); transform: scale(1.06); }
  100% { filter: brightness(1) saturate(1); transform: scale(1); }
}

/* Tooltip con bounce de entrada */
.alyx-ob-tooltip{
  position: fixed;
  z-index: 10600;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, #19181f 0%, #131219 100%);
  border: 1px solid rgba(185,92,130,.45);
  border-top: 1px solid rgba(185,92,130,.65);   /* stronger top — where Alyx peeks */
  border-radius: 6px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.72),
    0 0 0 1px rgba(185,92,130,.10),
    0 0 20px rgba(185,92,130,.12);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity .28s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.alyx-ob-tooltip.alyx-ob-tooltip-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.alyx-ob-step{
  font-family: var(--ff-mono, monospace);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--gold, #e8b84b);
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: .8;
}

/* ── Pneuma mark (Ψ) — silent system signature on each tooltip ──
   Faint, top-right corner, never labelled, never explained.     */
.alyx-ob-tooltip::before {
  content: 'Ψ';
  position: absolute;
  top: 7px;
  right: 10px;
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  font-size: 8px;
  color: rgba(138, 79, 179, 0.22);
  pointer-events: none;
  user-select: none;
  z-index: 3;
  text-shadow: 0 0 6px rgba(138, 79, 179, 0.12);
  line-height: 1;
}
.alyx-ob-title{
  font-family: var(--ff-cinzel, serif);
  font-size: 17px;
  letter-spacing: .8px;
  color: rgba(240,218,225,0.95);
  margin: 0 0 8px;
  font-weight: 600;
}
.alyx-ob-body{
  font-family: var(--ff-sans, sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text2, #b8b0a2);
  margin: 0 0 16px;
}
.alyx-ob-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
/* Ψ separator above actions — hairline + faint glyph */
.alyx-ob-actions::before {
  content: '';
  position: absolute;
  left: 20px; right: 20px;
  bottom: 46px;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(138,79,179,0.10) 20%,
    rgba(138,79,179,0.10) 80%,
    transparent
  );
  pointer-events: none;
}
.alyx-ob-btn{
  background: transparent;
  border: 1px solid var(--border2, #36364a);
  color: var(--text2, #b8b0a2);
  font-family: var(--ff-sans, sans-serif);
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s ease;
}
.alyx-ob-btn:hover{
  border-color: var(--gold, #e8b84b);
  color: var(--gold, #e8b84b);
  background: rgba(232,184,75,.08);
}
.alyx-ob-next{
  border-color: var(--gold, #e8b84b);
  color: var(--gold, #e8b84b);
  background: rgba(232,184,75,.1);
}
.alyx-ob-next:hover{
  background: rgba(232,184,75,.22);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,184,75,.25);
}
.alyx-ob-skip{
  font-size: 11px;
  letter-spacing: .5px;
  opacity: .7;
  position: relative;
}
.alyx-ob-skip:hover{ opacity: 1; }

/* Confetti partícula */
.alyx-ob-confetti{
  position: fixed;
  width: 8px; height: 12px;
  background: linear-gradient(180deg, #e8b84b, #f0c860);
  z-index: 10700;
  pointer-events: none;
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(232,184,75,.6);
}
.alyx-ob-confetti:nth-child(2n){
  background: linear-gradient(180deg, #f0c860, #fff2c0);
  width: 6px; height: 6px;
  border-radius: 50%;
}
.alyx-ob-confetti:nth-child(3n){
  background: linear-gradient(180deg, #d4a73f, #e8b84b);
  width: 10px; height: 4px;
}

/* Help button (replay) */
.alyx-ob-help{
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9985;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg2, #1e1e26);
  border: 1px solid var(--border2, #36364a);
  color: var(--text3, #8c8490);
  font-family: var(--ff-cinzel, serif);
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.alyx-ob-help:hover{
  border-color: var(--gold, #e8b84b);
  color: var(--gold, #e8b84b);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(232,184,75,.3);
}


/* ════════════════════════════════════════════════════════════════
   ALYX ONBOARDING — Portrait system (v1.14 — final)
   Matched 1:1 to the mockup artwork. Three poses positioned to
   appear leaning on/peeking over the tooltip panel.
   No clip-path: the cutouts already exclude panels.
   ════════════════════════════════════════════════════════════════ */

/* ── Tooltip: allow portrait to bleed outside, isolate blends ─── */
.alyx-ob-tooltip {
  overflow: visible !important;
  isolation: isolate;
}

/* ── Portrait base — defaults to 'peek' on top-left ──────────── */
.alyx-ob-portrait {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;                       /* sits below text content */
  opacity: 0;
  transition: opacity 0.45s ease 0.15s;
  filter: saturate(0.95);
  /* Default position: peek pose, leaning over top-left corner.
     The cutout's bottom half is naturally behind/below the panel,
     so we offset by negative top to lift the head above tooltip. */
  width: 215px;
  height: auto;
  left:  -78px;
  top:   -222px;                    /* head sits above tooltip */
}
.alyx-ob-tooltip.alyx-ob-tooltip-show .alyx-ob-portrait {
  opacity: 1;
}

/* ── Variant: pos-right ─────────────────────────────────────────
   Used when tooltip is on the LEFT of target (target on right).
   Alyx leans from the right side of the tooltip.
   Uses 'side' pose (hand on chin) — looks right by default,
   so no mirroring needed.                                       */
.alyx-ob-portrait.pos-right {
  left: auto;
  right: -84px;
  top:  -225px;
  width: 195px;
}

/* ── Variant: pos-bottom ────────────────────────────────────────
   Tooltip is BELOW target. Alyx still hangs over the top.       */
.alyx-ob-portrait.pos-bottom {
  left: -72px;
  top:  -220px;
  width: 200px;
}

/* ── Variant: pos-right-bottom ─────────────────────────────────
   Portrait hangs from BOTTOM-RIGHT of tooltip.
   For steps where tooltip is near top of viewport — prevents
   portrait being clipped above the screen edge.                 */
.alyx-ob-portrait.pos-right-bottom {
  left: auto;
  right: -195px;   /* portrait fully outside tooltip right edge */
  top:  auto;
  bottom: -90px;
  width: 185px;
}

/* ── Variant: pos-left-mid ──────────────────────────────────────
   Portrait on the LEFT, vertically centered on the tooltip.
   For steps near the top of the viewport where top:-222px
   would push portrait off-screen.                              */
.alyx-ob-portrait.pos-left-mid {
  left:  -215px;   /* portrait fully outside tooltip left edge */
  top:   -50px;
  width: 200px;
}

/* ── Content always above portrait ──────────────────────────── */
.alyx-ob-step,
.alyx-ob-title,
.alyx-ob-body,
.alyx-ob-actions {
  position: relative;
  z-index: 2;
}

/* Step counter and title sit to the right of Alyx's head
   (which is in the upper-left bleed area, NOT inside tooltip).
   So we don't need padding-left — the head is OUTSIDE the box.
   But the close-button-area (top-right) and content flow stay clean. */

/* When Alyx is on the right, give content right-side breathing room */
.alyx-ob-portrait.pos-right ~ .alyx-ob-actions {
  padding-right: 8px;
}

/* ── Subtle dropshadow under portrait — feels "resting" on tooltip ── */
.alyx-ob-portrait {
  filter:
    saturate(0.95)
    drop-shadow(0 6px 18px rgba(0,0,0,0.45))
    drop-shadow(0 2px 6px rgba(185,92,130,0.18));
}

/* ── Horizontally mirrored variant ──
   Used when the pose looks the wrong way for its side (e.g. lean pose
   on the right of the panel needs to face left toward the content).  */
.alyx-ob-portrait.flipped {
  transform: scaleX(-1);
}

/* ── Narrow viewport: hide portrait ──────────────────────────── */
@media (max-width: 620px) {
  .alyx-ob-portrait { display: none !important; }
}


/* ══ css/atp/atp-polish.css ══ */
/* ════════════════════════════════════════════════════════════════
   ALYX POLISH — Micro-animaciones premium
   ════════════════════════════════════════════════════════════════
   Applied sobre elementos existentes via selectores CSS, sin tocar
   JavaScript. Coherente con el branding (dorado + crimson) y la
   identidad oscura del project.

   Cubre:
     · Simple Mode cards (.sm-card2) — hover zoom + glow dorado
     · Curva de intensidad — glow al hover sobre el wrap
     · Transform/Effect/Vocal buttons — hover lift + glow
     · Quick Ideas — hover scale + glow emotional
     · Emotion buttons — hover scale
     · Genre cards — hover lift
     · Insights items — hover slide
     · Compose button — hover pulse
     · Help button — hover rotate

   IMPORTANTE: NO meto métricas inventadas (Coherence Score, etc.)
   ni "chat style Alyx" because eso son features, no polish, y
   are descartadas para v1.
   ════════════════════════════════════════════════════════════════ */

/* ── Simple Mode Cards ─────────────────────────────────────── */
.sm-card2{
  transition:
    transform .25s cubic-bezier(.4, 0, .2, 1),
    box-shadow .25s ease,
    border-color .25s ease;
  will-change: transform;
}
.sm-card2:hover:not(.selected){
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 8px 24px rgba(0,0,0,.5),
    0 0 0 1px rgba(232,184,75,.35),
    0 0 28px rgba(232,184,75,.18);
}
.sm-card2.selected{
  box-shadow:
    0 4px 16px rgba(0,0,0,.5),
    0 0 0 2px rgba(232,184,75,.7),
    0 0 36px rgba(232,184,75,.28);
}
.sm-card2-img{
  transition: filter .3s ease;
}
.sm-card2:hover .sm-card2-img{
  filter: brightness(1.08) saturate(1.1);
}

/* Card description textarea — focus glow */
.sm-card2-desc{
  transition: background .2s, box-shadow .2s;
}
.sm-card2-desc:focus{
  background: rgba(232,184,75,.05);
  box-shadow: inset 0 0 0 1px rgba(232,184,75,.4);
  outline: none;
}

/* ── Intensity Curve — glow at hover ───────────────────────── */
.sm2-curve-wrap{
  transition: box-shadow .35s ease;
  border-radius: 6px;
}
.sm2-curve-wrap:hover{
  box-shadow:
    inset 0 0 0 1px rgba(232,184,75,.25),
    0 0 40px rgba(232,184,75,.12);
}

/* The Advanced Mode curves area too */
#apmCurves{
  transition: box-shadow .35s ease;
}
#apmCurves:hover{
  box-shadow:
    inset 0 0 0 1px rgba(232,184,75,.18),
    0 0 36px rgba(232,184,75,.08);
}

/* ── Transform / Effect / Vocal buttons — premium hover ────── */
.alyx-rp-tx-btn{
  position: relative;
  overflow: hidden;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .2s ease;
}
.alyx-rp-tx-btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(232,184,75,.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.alyx-rp-tx-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    0 0 0 1px rgba(232,184,75,.5);
}
.alyx-rp-tx-btn:hover::before{
  opacity: 1;
}
.alyx-rp-tx-btn:active{
  transform: translateY(0) scale(.98);
  transition-duration: .08s;
}

/* Effects buttons — cyan accent overrides */
.alyx-rp-tx-btn-effect:hover{
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    0 0 0 1px rgba(74,208,216,.55);
}
.alyx-rp-tx-btn-effect::before{
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(74,208,216,.2) 0%, transparent 60%);
}

/* Vocal buttons — crimson accent */
.alyx-rp-tx-btn-vocal:hover{
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    0 0 0 1px rgba(232,74,96,.55);
}
.alyx-rp-tx-btn-vocal::before{
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(232,74,96,.2) 0%, transparent 60%);
}

/* ── Quick Ideas — scale + glow ────────────────────────────── */
.alyx-quick-emo-btn{
  position: relative;
  transition:
    transform .18s cubic-bezier(.34, 1.4, .64, 1),
    background .15s,
    border-color .15s,
    color .15s,
    box-shadow .2s;
}
.alyx-quick-emo-btn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 6px 16px rgba(0,0,0,.4),
    0 0 24px rgba(232,184,75,.18);
}
.alyx-quick-emo-btn:active{
  transform: translateY(0) scale(.97);
}
.alyx-quick-emo-icon{
  transition: transform .2s ease;
  display: inline-block;
}
.alyx-quick-emo-btn:hover .alyx-quick-emo-icon{
  transform: scale(1.15) rotate(-3deg);
}

/* ── Emotion buttons — scale ───────────────────────────────── */
.em-btn2{
  transition: transform .15s, background .15s, border-color .15s;
}
.em-btn2:hover{
  transform: translateY(-1px);
}
.em-btn2.active{
  box-shadow: 0 0 0 1px rgba(232,184,75,.6), 0 0 18px rgba(232,184,75,.2);
}

/* ── Genre cards — lift on hover ───────────────────────────── */
.gp-rec-card,
.genre-item{
  transition: transform .15s, background .15s, border-color .15s, box-shadow .2s !important;
}
.gp-rec-card:hover,
.genre-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(232,184,75,.5);
}

/* ── Insights items — slide on hover ───────────────────────── */
.alyx-ins-item{
  transition: transform .15s, background .15s;
}
.alyx-ins-item[data-secid]:hover{
  transform: translateX(3px);
}

/* ── Compose button — gentle pulse + hover pop ─────────────── */
#alyxComposeBtn{
  position: relative;
  animation: alyx-compose-pulse 3.5s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), background .15s, box-shadow .2s !important;
}
#alyxComposeBtn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 24px rgba(232,184,75,.35),
    0 0 0 1px rgba(232,184,75,.6) !important;
  animation: none;
}
#alyxComposeBtn:active{
  transform: translateY(0) scale(.98);
}
@keyframes alyx-compose-pulse{
  0%, 100%{ box-shadow: 0 2px 12px rgba(0,0,0,.4); }
  50%     { box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 22px rgba(232,184,75,.22); }
}

/* ── Help button — rotate on hover ─────────────────────────── */
.alyx-ob-help{
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), border-color .2s, color .2s, box-shadow .25s !important;
}
.alyx-ob-help:hover{
  transform: scale(1.12) rotate(15deg);
}

/* ── Topbar more button — rotate on hover ──────────────────── */
.alyx-topbar-more{
  transition: transform .2s, background .15s, border-color .15s, color .15s !important;
}
.alyx-topbar-more:hover{
  transform: rotate(90deg);
}

/* ── Suggestion items — slide ──────────────────────────────── */
.alyx-rp-sug-item{
  transition: transform .15s, background .15s, border-color .15s !important;
}
.alyx-rp-sug-item:hover{
  transform: translateX(3px);
}

/* ── Sidebar tool buttons (if any) ─────────────────────────── */
.alyx-sb-tool-btn{
  transition: transform .15s, background .15s, border-color .15s !important;
}
.alyx-sb-tool-btn:hover{
  transform: translateX(3px);
}

/* ── Tooltip Next button — already has bounce, accentuated ── */
.alyx-ob-next{
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), background .15s, box-shadow .2s !important;
}
.alyx-ob-next:hover{
  transform: translateY(-2px) scale(1.04);
}

/* ════════════════════════════════════════════════════════════════
   v2 POLISH — Cell activa, tipografía, Generate dominante, mini-map
   ════════════════════════════════════════════════════════════════ */

/* ── 2. Cell activa con glow dorado + elevación ───────────── */
.seq-cell.selected{
  position: relative;
  z-index: 6;
  transform: translateY(-2px);
  transition: transform .15s ease, box-shadow .2s ease;
}
.seq-cell.selected::before{
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    0 0 0 2px rgba(232,184,75,.85),
    0 4px 14px rgba(0,0,0,.4),
    0 0 24px rgba(232,184,75,.35),
    0 0 48px rgba(232,184,75,.15);
  pointer-events: none;
  border-radius: 3px;
  z-index: 5;
  animation: alyx-cell-glow 2.5s ease-in-out infinite;
}
@keyframes alyx-cell-glow{
  0%, 100%{
    box-shadow:
      0 0 0 2px rgba(232,184,75,.85),
      0 4px 14px rgba(0,0,0,.4),
      0 0 24px rgba(232,184,75,.35),
      0 0 48px rgba(232,184,75,.15);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(255,210,110,1),
      0 4px 16px rgba(0,0,0,.5),
      0 0 34px rgba(232,184,75,.55),
      0 0 68px rgba(232,184,75,.25);
  }
}

/* ── 1. Reducir ruido visual (conservador) ─────────────────── */
/* Bajar contraste de divisorias 30% */
.seq-cell{
  border-right-color: rgba(255,255,255,.05) !important;
}
.track-col-headers,
.track-row{
  border-color: rgba(255,255,255,.06) !important;
}
/* Text secundario more tenue (15%) */
.ls-tag,
.scale-desc,
.track-sub,
.seq-cell-sub{
  opacity: .82;
}
/* Labels auxiliares un punto more discretos */
.ls-label{
  opacity: .88;
}

/* ── 4. Jerarquía tipográfica ──────────────────────────────── */
/* Títulos more grandes */
.insp-panel-tab,
.alyx-rp-selected-title,
.alyx-ins-title{
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
}
.ls-logo-text{
  font-size: 22px !important;
}
.step-title{
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* Descripciones un punto more pequeñas */
.step-desc{
  font-size: 11px !important;
  opacity: .75;
}
.alyx-rp-selected-clip{
  font-size: 11.5px !important;
}
/* Labels secundarios more discretos */
.t-meta,
.t-stats span{
  font-size: 10.5px !important;
  opacity: .8;
}

/* ── 6. Button Generate / Compose more dominante ─────────────── */
#alyxComposeBtn{
  padding: 14px 22px !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  background: linear-gradient(180deg, rgba(232,184,75,.28), rgba(232,184,75,.14)) !important;
  border-width: 1.5px !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,.5),
    0 0 20px rgba(232,184,75,.2) !important;
}
#alyxComposeBtn:hover{
  box-shadow:
    0 8px 28px rgba(232,184,75,.4),
    0 0 0 1.5px rgba(232,184,75,.8) !important;
}
/* Export en transport — also un poco more dominante */
.t-action-btn.gold{
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 0 0 1px rgba(232,184,75,.4), 0 0 16px rgba(232,184,75,.18);
}

/* ── 3. More protagonismo a Insights when hay novedad ─────── */
#alyxInsightsPanel.alyx-ins-has-news{
  animation: alyx-ins-glow 2s ease-in-out infinite;
}
@keyframes alyx-ins-glow{
  0%, 100%{
    box-shadow:
      0 -2px 12px rgba(0,0,0,.3),
      0 0 0 0 rgba(232,184,75,0);
  }
  50%{
    box-shadow:
      0 -2px 16px rgba(0,0,0,.4),
      0 -2px 24px rgba(232,184,75,.25);
  }
}
/* Title del insights more large when is flotante */
#alyxInsightsPanel.alyx-ins-floating .alyx-ins-title{
  font-size: 14px !important;
  letter-spacing: 1.6px !important;
}

/* ── 7. Mini mapa de structure (dentro del sequencer) ─────── */
.alyx-mini-map{
  display: flex;
  gap: 2px;
  padding: 6px 14px;
  background: var(--bg2, #1e1e26);
  border-bottom: 1px solid var(--border, #28283a);
}
.alyx-mini-map-section{
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  transition: all .2s ease;
  cursor: pointer;
  position: relative;
}
.alyx-mini-map-section:hover{
  height: 6px;
  margin-top: -1px;
  background: rgba(232,184,75,.4);
}
.alyx-mini-map-section.active{
  background: var(--gold, #e8b84b);
  box-shadow: 0 0 8px rgba(232,184,75,.5);
}
.alyx-mini-map-section[data-phase="intro"]    { background: #4a78c8; }
.alyx-mini-map-section[data-phase="build"]    { background: #74a8d8; }
.alyx-mini-map-section[data-phase="climax"]   { background: #e84a60; }
.alyx-mini-map-section[data-phase="aftermath"]{ background: #a04ae8; }
.alyx-mini-map-section[data-phase="outro"]    { background: #4ac870; }

/* ── 5. Header con métricas (duration, sections, instruments) ── */
.alyx-meta-header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--bg2, #1e1e26);
  border-bottom: 1px solid var(--border, #28283a);
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
}
.alyx-meta-item{
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.alyx-meta-label{ opacity: .65; }
.alyx-meta-value{
  font-family: var(--ff-mono, monospace);
  font-size: 12px;
  color: var(--gold, #e8b84b);
  letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════════
   v3 POLISH — Add Section bar reorganizada
   ════════════════════════════════════════════════════════════════ */

.seq-add-row{
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0 14px !important;
  height: 44px;
}
.seq-add-sec{
  flex-shrink: 0;
}
.seq-add-sep{
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.seq-add-toolbar{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.seq-add-tool{
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  color: var(--text2, #b8b0a2);
  width: 30px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .12s ease;
  padding: 0;
}
.seq-add-tool:hover{
  background: var(--bg3, #252532);
  border-color: rgba(232,184,75,.5);
  color: var(--gold, #e8b84b);
  transform: translateY(-1px);
}
.seq-add-tool:active{
  transform: translateY(0) scale(.96);
}
.seq-add-drag-hint{
  flex: 1;
  text-align: center;
  font-family: var(--ff-cinzel, serif);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
  opacity: .6;
}

/* ════════════════════════════════════════════════════════════════
   v4 POLISH — Prompt preview en vivo abajo del sequencer
   ════════════════════════════════════════════════════════════════ */

.alyx-prompt-preview{
  flex: 1;
  min-height: 120px;
  background: linear-gradient(180deg, rgba(10,10,18,.5), rgba(8,8,14,.7));
  border-top: 1px solid rgba(232,184,75,.12);
  padding: 14px 18px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alyx-pp-header{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.alyx-pp-mode-tag{
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold, #e8b84b);
  background: rgba(232,184,75,.1);
  border: 1px solid rgba(232,184,75,.3);
  padding: 2px 7px;
  border-radius: 3px;
}
.alyx-pp-mode-tag.alyx-pp-mode-solo{
  color: #ff6680;
  background: rgba(255,102,128,.12);
  border-color: rgba(255,102,128,.4);
}
.alyx-pp-title{
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
}
.alyx-pp-body{
  font-family: var(--ff-mono, monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text2, #b8b0a2);
  white-space: pre-wrap;
  word-break: break-word;
}
.alyx-pp-global-body{
  padding: 4px 0;
}
.alyx-pp-solo-body{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alyx-pp-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.alyx-pp-sec{
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold, #e8b84b);
  flex-shrink: 0;
  min-width: 80px;
}
.alyx-pp-arrow{
  color: var(--text3, #8c8490);
  flex-shrink: 0;
}
.alyx-pp-text{
  flex: 1;
  font-family: var(--ff-mono, monospace);
  font-size: 11.5px;
}
.alyx-pp-empty{
  color: var(--text3, #8c8490);
  font-style: italic;
  opacity: .5;
}

/* ════════════════════════════════════════════════════════════════
   Onboarding — fix blur tapping the target
   ════════════════════════════════════════════════════════════════ */
/* Bajamos el blur a 4px (era 8px, oscurecía demasiado y se veía borroso) */
.alyx-ob-overlay.alyx-ob-overlay-show{
  background: rgba(8, 8, 14, .68) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* El elemento target debe quedar nítido — elevamos su z-index con
   pointer-events para que se vea por encima del blur del overlay.
   Usamos una class que JS añade al elemento target. */
.alyx-ob-target-elevated{
  position: relative !important;
  z-index: 10560 !important;
  isolation: isolate !important;
}

/* ── Simple-mode tour: drop the blur backdrop ──
   Targets in the simple-mode tour live inside #simpleModeOverlay, which has
   position:fixed + z-index:400 → it creates its own stacking context, and
   that context confines descendant z-index. So the .alyx-ob-target-elevated
   trick above (10560) doesn't escape the parent's z:400 — the highlighted
   element stays under the tour's z:10500 blurred backdrop and gets blurred
   along with everything else, leaving the gold glow ring pointing at a smear.

   Rather than tear apart the stacking model, we just suppress the blur for
   the simple-mode tour. The breathing gold glow ring + tooltip are plenty
   of visual signal on their own (it's how Intro.js, Shepherd etc. work by
   default). Body class `alyx-ob-active-simple` is added by start() in
   atp-onboarding.js and removed by _end(). */
body.alyx-ob-active-simple .alyx-ob-overlay.alyx-ob-overlay-show{
  background: rgba(8, 8, 14, .22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ════════════════════════════════════════════════════════════════
   v5 POLISH — Sequencer doble alto, preview altura limitada
   ════════════════════════════════════════════════════════════════ */

/* Forzar 5 filas de tracks visibles. Cada .track-row real mide
   ~78px (incluye padding + waveform preview), ayes que 5 × 78 = 390px
   con margin de seguridad → 460px. */
#seqRows{
  min-height: 460px !important;
  flex: 2 1 auto !important;
}

/* Preview del prompt: ocupa el espacio QUE QUEDA hasta abajo del
   centro. Termina justo encima del transport — alineado con la base
   de Quick Actions del sidebar. NO altura fija — flex 1. Marco fino
   para separarlo de Add Section. */
.alyx-prompt-preview{
  flex: 1 1 auto !important;
  min-height: 140px !important;
  max-height: none !important;
  overflow-y: auto !important;
  margin: 8px 12px 12px !important;
  border: 1px solid rgba(232,184,75,.18) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(10,10,18,.55), rgba(8,8,14,.75)) !important;
}

/* El centro principal: que reparta dando prioridad al sequencer
   pero respetando un minimum al preview. */
.app-center{
  display: flex !important;
  flex-direction: column !important;
}

/* ── Fix dos scrolls solapados en lateral derecho ─────────────
   El inspector-panel (older) is fixed en right:-340px when
   no is open, pero sigue mostrando su scrollbar. Lo ocultamos
   completely when no is open. */
.inspector-panel:not(.open){
  display: none !important;
}

/* El ctx-panel mantiene su scroll unique en .ctx-body */


/* Quick Ideas: visible dentro del sidebar en su position natural */
.alyx-quick-ideas-block{
  display: block !important;
  visibility: visible !important;
}


/* ══ css/atp/mockup-redesign.css ══ */
/* ════════════════════════════════════════════════════════════════
   EHDARKMUSE — MOCKUP REDESIGN OVERLAY
   ════════════════════════════════════════════════════════════════
   Visual polish to match the v9 sequencer mockup.
   - Loaded LAST so it overrides earlier !important rules.
   - Pure visual / DOM-positional changes. No new JS behavior here.
   - The right context panel is preserved (we do NOT replace it
     with an AI Assistant column).
   ════════════════════════════════════════════════════════════════ */

/* ── 1. LOGO REBRAND : EHDarkMuse ──────────────────────────────── */
.ls-logo-text {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 19px !important;
  letter-spacing: 1.2px !important;
  font-weight: 700 !important;
  color: #f0eadc !important;
  white-space: nowrap !important;
}
.ls-logo-text > span {
  color: #e8b84b !important;
}
.ls-tag {
  display: block !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 8.5px !important;
  letter-spacing: 1.8px !important;
  color: rgba(255,255,255,.35) !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* ── 2. ADVANCED MODE — toggle slider visual ───────────────────── */
.mode-switcher {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.mode-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 1.8px !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important;
  position: relative !important;
}
.mode-label::after {
  /* Yellow ON toggle pill (visual only — does not break the existing dropdown) */
  content: "";
  display: inline-block;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8b84b, #b88a2d);
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4),
              0 0 6px rgba(232,184,75,.4);
  flex-shrink: 0;
  margin-left: 10px;
}
.mode-label .mode-arrow {
  display: none !important; /* arrow hidden — replaced by slider visual */
}
.mode-label::before {
  /* The knob of the toggle */
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff8e5;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ── 3. SECTION COLUMN HEADERS — clean compact look ────────────── */
/* Hide drag handle + dropdown caret by default, show on hover.
   Lets the section name + duration take the full width. */
.sec-col-hdr {
  justify-content: center !important;
  position: relative !important;
}
.sec-col-hdr .sec-drag-handle {
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
  font-size: 11px !important;
  color: var(--text3) !important;
  cursor: grab !important;
}
.sec-col-hdr .sec-col-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
  background: none !important;
  border: none !important;
  color: var(--text3) !important;
  font-size: 11px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
}
.sec-col-hdr:hover .sec-drag-handle,
.sec-col-hdr:hover .sec-col-btn {
  opacity: .7 !important;
}
.sec-col-hdr:hover .sec-drag-handle:hover,
.sec-col-hdr:hover .sec-col-btn:hover {
  opacity: 1 !important;
  color: var(--gold2, #e8b84b) !important;
}

.sec-col-name {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 11px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.85) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: calc(100% - 60px) !important;
}
.sec-col-dur {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: .5px !important;
  color: rgba(255,255,255,.4) !important;
  margin-left: 6px !important;
  opacity: 1 !important;
}

/* Slightly taller header so the colored top stripe reads cleanly */
.track-col-headers {
  height: 38px !important;
}

/* ── 4. INTENSITY (arc-bar) AREA — clean layout ────────────────── */
.arc-bar {
  background: linear-gradient(180deg,
              rgba(20,20,28,.4),
              rgba(12,12,18,.6)) !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

/* INTENSITY label + All/Global at top-left */
.arc-bar-labels {
  top: 8px !important;
  left: 14px !important;
  gap: 12px !important;
  z-index: 5 !important;
}
.arc-bar-labels .arc-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important;
}
.arc-mode-btn {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.45) !important;
  cursor: pointer !important;
  transition: .15s !important;
  pointer-events: all !important;
}
.arc-mode-btn:hover { color: rgba(255,255,255,.8) !important; }
.arc-mode-btn.active {
  background: rgba(232,184,75,.15) !important;
  border-color: rgba(232,184,75,.5) !important;
  color: #e8b84b !important;
}

/* MIN / MAX y-axis hints (decorative — overlayed left side) */
.arc-bar::before {
  content: "MAX";
  position: absolute;
  top: 28px;
  left: 14px;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.18);
  pointer-events: none;
  z-index: 1;
}
.arc-bar::after {
  content: "MIN";
  position: absolute;
  bottom: 26px;
  left: 14px;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.18);
  pointer-events: none;
  z-index: 1;
}

/* Hint text — move it OUT of the curve area (down-left, small) */
.arc-hint {
  bottom: 4px !important;
  left: 14px !important;
  font-size: 8.5px !important;
  letter-spacing: .3px !important;
  color: rgba(255,255,255,.22) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

/* Focus button — small icon-only top right */
.arc-fs-btn {
  bottom: auto !important;
  top: 6px !important;
  right: 195px !important;
  font-size: 9px !important;
  padding: 3px 8px !important;
  letter-spacing: 1px !important;
  background: rgba(0,0,0,.4) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.4) !important;
}
.arc-fs-btn:hover { color: #e8b84b !important; border-color: rgba(232,184,75,.4) !important; }

/* Legend on the right — cleaner stack */
.arc-legend {
  top: 6px !important;
  right: 10px !important;
  gap: 3px !important;
  max-width: 170px !important;
  padding: 6px 8px !important;
  background: linear-gradient(180deg,
              rgba(12,12,18,.85),
              rgba(8,8,14,.7)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 4px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 5 !important;
}
.arc-legend-item {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: .5px !important;
  color: rgba(255,255,255,.75) !important;
  /* mockup uses mixed case (Piano, Dist. Guitar…) — keep as inst.name */
  text-transform: none !important;
  gap: 6px !important;
}
/* (the legend color bar is rendered inline by app-core.js, so we don't add another with ::before) */

/* feedback text inside the bar — keep but mute */
.arc-feedback {
  bottom: 4px !important;
  left: auto !important;
  right: 14px !important;
  font-size: 9px !important;
  color: rgba(255,255,255,.3) !important;
  opacity: .6 !important;
}

/* ── 5. ZOOM ROW — section jump buttons polish ─────────────────── */
.zoom-row {
  padding: 6px 14px !important;
  background: linear-gradient(180deg,
              rgba(0,0,0,.25),
              rgba(0,0,0,.1)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.sec-jump-row {
  gap: 5px !important;
}
.sec-jump-btn {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.3px !important;
  padding: 4px 9px !important;
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.55) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: .15s !important;
}
.sec-jump-btn:hover {
  color: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.05) !important;
}
.sec-jump-btn.active {
  color: #e8b84b !important;
  border-color: rgba(232,184,75,.6) !important;
  background: rgba(232,184,75,.1) !important;
}

/* Reset btn */
.zoom-reset {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  padding: 3px 9px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.5) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

/* ── 6. STRUCTURE/TIMELINE BAR ─────────────────────────────────── */
.seq-timeline {
  background: rgba(0,0,0,.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.seq-timeline-offset {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.5) !important;
}
.seq-time-mark {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,.45) !important;
}

/* ── 7. INSTRUMENT label column header ─────────────────────────── */
.track-col-hdr-offset {
  background: rgba(0,0,0,.25) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important;
}

/* ── 8. GLOBAL PROMPT FOOTER PANEL ─────────────────────────────── */
.gp-footer {
  position: relative;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg,
              rgba(18,18,26,.95),
              rgba(12,12,18,.95));
  border-top: 1px solid rgba(232,184,75,.18);
  border-bottom: 1px solid rgba(255,255,255,.04);
  padding: 10px 14px;
  gap: 16px;
  flex-shrink: 0;
}
.gp-footer-text {
  flex: 1;
  min-width: 0;
}
.gp-footer-lbl {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #e8b84b;
  text-transform: uppercase;
  margin-bottom: 3px;
  opacity: .85;
}
.gp-footer-body {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  letter-spacing: .3px;
}
.gp-footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.gp-ready {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gp-ready::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ec77a;
  box-shadow: 0 0 6px rgba(78,199,122,.6);
}
.gp-vol-block {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gp-vol-lbl {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}
.gp-vol-slider {
  width: 100px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.gp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
  cursor: pointer;
}
.gp-vol-slider::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.4);
  cursor: pointer;
}
.gp-vol-pct {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.55);
  min-width: 30px;
  text-align: right;
}

/* The big LET ALYX COMPOSE button (replaces the floating one) */
.gp-compose-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(180deg,
              rgba(232,184,75,.18),
              rgba(232,184,75,.08));
  border: 1px solid rgba(232,184,75,.5);
  border-radius: 4px;
  color: #e8b84b;
  cursor: pointer;
  transition: .15s;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,255,255,.05);
}
.gp-compose-btn:hover {
  background: linear-gradient(180deg,
              rgba(232,184,75,.28),
              rgba(232,184,75,.14));
  border-color: rgba(232,184,75,.7);
  color: #ffd97a;
}
.gp-compose-icon {
  font-size: 14px;
  line-height: 1;
}
.gp-compose-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.gp-compose-main {
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 700;
}
.gp-compose-sub {
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(232,184,75,.55);
  margin-top: 2px;
}

/* Hide the old floating Compose button — replaced by gp-compose-btn */
#alyxComposeBtn {
  display: none !important;
}

/* ── 9. HIDE BOTTOM ALYX INSIGHTS STRIP (not in mockup) ────────── */
#alyxInsightsPanel.ehdm-hidden,
#alyxInsightsPanel { /* by default keep but compress  */
  /* keep visible but the redesign script will minimize it */
}
/* Toggle class added by JS to fully collapse */
body.ehdm-redesign #alyxInsightsPanel {
  display: none !important;
}

/* ── 10. CENTER LAYOUT FIX so footer panel sits cleanly ────────── */
.app-center {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.sequencer-wrap {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── 11. STEP / PROGRESS STEPPER — minor polish ────────────────── */
.stepper {
  background: linear-gradient(180deg,
              rgba(0,0,0,.2),
              rgba(0,0,0,.05)) !important;
}
.step .step-num {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
}
.step.active .step-num {
  background: #e8b84b !important;
  color: #18181e !important;
  box-shadow: 0 0 10px rgba(232,184,75,.4) !important;
}
.step .step-title {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  letter-spacing: .5px !important;
}

/* ── 12. PROJ CHIPS — make sure they read cleanly ──────────────── */
.proj-chip {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.3px !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
}
.proj-chip-bpm {
  background: rgba(232,184,75,.1) !important;
  border-color: rgba(232,184,75,.4) !important;
  color: #e8b84b !important;
}
.proj-chip-key {
  background: rgba(180,80,140,.12) !important;
  border-color: rgba(180,80,140,.45) !important;
  color: #d289b3 !important;
}
.proj-chip-genre {
  background: rgba(140,90,200,.12) !important;
  border-color: rgba(140,90,200,.45) !important;
  color: #b8a0e8 !important;
}

/* ── 13. SIDEBAR SECTION LABELS ────────────────────────────────── */
.ls-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.45) !important;
  text-transform: uppercase !important;
}

/* ── 14. INSTRUMENT row label column — readable ────────────────── */
.seq-row .row-label,
.seq-row .track-label {
  font-family: var(--ff-cinzel, "Cinzel", serif);
}

/* ── 15. RESPONSIVE GUARD ──────────────────────────────────────── */
@media (max-width: 1200px) {
  .gp-footer-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gp-vol-slider { width: 70px; }
  .gp-compose-sub { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PART 2 — bottom area cleanup
   ════════════════════════════════════════════════════════════════ */

/* ── 16. HIDE the older transport-bar (its functions live in
   gp-footer + the top toolbar now) ───────────────────────────── */
.transport-bar {
  display: none !important;
}

/* ── 17. Make the preview-bar (play/stop transport) sit at bottom 0
   and span the center column nicely. It stays below gp-footer. ── */
.preview-bar {
  bottom: 0 !important;
  height: 50px !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg,
              rgba(14,14,20,.97),
              rgba(8,8,14,.99)) !important;
  border-top: 1px solid rgba(232,184,75,.15) !important;
  gap: 12px !important;
}
.preview-btn {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}
.preview-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,.4) !important;
  min-width: auto !important;
}
.preview-vol {
  width: 80px !important;
  height: 3px !important;
}
.preview-chord-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  color: rgba(232,184,75,.7) !important;
}

/* Ensure my gp-footer doesn't get covered by the preview-bar.
   Add bottom padding equal to preview-bar height. */
.app-center {
  padding-bottom: 50px !important;
  box-sizing: border-box !important;
}

/* ── 18. Force-hide the comparison panel when it has the hidden
   class — protect against it slipping up the layout when empty. */
.cmp-panel.hidden {
  display: none !important;
}

/* ── 19. ARC-HINT — ensure smaller, even against older rules ──── */
.arc-bar .arc-hint,
#arcBar .arc-hint {
  bottom: 4px !important;
  left: 14px !important;
  font-size: 8.5px !important;
  letter-spacing: .3px !important;
  color: rgba(255,255,255,.22) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ── 20. SECTION COLORED-BAR ROW (DURATION / SECTIONS / INSTRUMENTS)
   — show with a subtle background and inline alignment. */
.dur-bar,
.section-info-bar,
.duration-bar,
.seq-info-bar {
  background: rgba(0,0,0,.15) !important;
}

/* ── 21. Top-bar buttons icon polish ───────────────────────────── */
.app-topbar .btn-icon {
  color: rgba(255,255,255,.55) !important;
  transition: color .15s !important;
}
.app-topbar .btn-icon:hover {
  color: #e8b84b !important;
}

/* ── 22. EXPORT / IMPORT buttons in topbar — match mockup pill ── */
.app-topbar .btn.gold {
  background: linear-gradient(180deg,
              rgba(232,184,75,.18),
              rgba(232,184,75,.06)) !important;
  border: 1px solid rgba(232,184,75,.5) !important;
  color: #e8b84b !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
}
.app-topbar .btn.gold:hover {
  background: linear-gradient(180deg,
              rgba(232,184,75,.28),
              rgba(232,184,75,.12)) !important;
}

/* ── 23. GENERATE button in stepper — strong gold pill ─────────── */
#genMainBtn,
.gen-btn,
.gen-btn.idle {
  background: linear-gradient(180deg, #e8b84b, #b88a2d) !important;
  color: #18181e !important;
  border: 1px solid rgba(232,184,75,.6) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px rgba(232,184,75,.25),
              inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#genMainBtn:hover {
  background: linear-gradient(180deg, #f0c460, #c89a35) !important;
}

/* ════════════════════════════════════════════════════════════════
   PART 3 — bug fixes
   ════════════════════════════════════════════════════════════════ */

/* ── BUG 1 — Quick Ideas text clipping (Sadness / Fear) ────────
   The 2-column grid in a 210px sidebar leaves ~90px per button,
   not enough for "Sadness" beside an icon. Stack icon over label
   so the full word always fits. */
.alyx-quick-emotions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  min-width: 0 !important;
}
.alyx-quick-emo-btn {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 9px 6px !important;
  font-size: 12px !important;
  gap: 4px !important;
  letter-spacing: .2px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.alyx-quick-emo-btn > span:not(.alyx-quick-emo-icon) {
  min-width: 0 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.alyx-quick-emo-icon {
  font-size: 17px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* ── BUG 2 — duplicate prompt panel ────────────────────────────
   atp-prompt-preview.js injects #alyxPromptPreview at the bottom
   of the sequencer. Our new GLOBAL PROMPT footer replaces that
   role, so hide the original to avoid duplication. */
#alyxPromptPreview {
  display: none !important;
}



/* ══ css/atp/simple-mode-redesign.css ══ */
/* ════════════════════════════════════════════════════════════════
   EHDARKMUSE — SIMPLE MODE REDESIGN
   ════════════════════════════════════════════════════════════════
   Card-based, centered, purple-accent layout that replaces the
   sidebar-driven Simple Mode. Loaded only while Simple Mode is
   active (body.simple-mode).
   ════════════════════════════════════════════════════════════════ */

/* ── Colour tokens for Simple Mode (purple accent) ─────────────── */
/* bg/card/text tokens DERIVE from the theme palette variables
   (--bg, --bg2, --bg3, --text, etc.) so that palette switches and the
   brightness slider in the ◈ panel propagate to Simple Mode. Before,
   all six neutral tokens were hardcoded hex values, which meant Simple
   Mode visually ignored the user's palette choice. Purple accent and
   "good" green stay hardcoded — they ARE the Simple Mode identity. */
.sr-root {
  --sr-purple:   #8b5cf6;
  --sr-purple-2: #a78bfa;
  --sr-purple-d: #6d3fdf;
  --sr-bg:       var(--bg, #0c0c14);
  --sr-card:     var(--bg2, #131321);
  --sr-card-2:   var(--bg3, #1a1a2c);
  --sr-border:   rgba(255,255,255,.06);
  --sr-border-2: rgba(255,255,255,.1);
  --sr-text:     var(--text, #e8e6ee);
  --sr-text-2:   var(--text2, #a9a4b5);
  --sr-text-3:   rgba(255,255,255,.4);
  --sr-good:     #4ec77a;
}

/* While Simple Mode is on, hide the older overlay UI we replaced */
body.simple-mode-active #simpleModeOverlay > .sm2-topbar,
body.simple-mode-active #simpleModeOverlay > div > div:first-child,        /* older left sidebar */
body.simple-mode-active #simpleModeOverlay > .sm2-transport,
body.simple-mode-active #simpleModeOverlay > #smOnboarding,
body.simple-mode-active #simpleModeOverlay > div:last-child[style*="height:28px"] {
  /* We use a JS-driven hide via .sr-active instead to avoid clobbering 
     anything important — this rule is a no-op without .sr-active. */
}
body.simple-mode-active #simpleModeOverlay.sr-active > *:not(.sr-root) {
  display: none !important;
}

/* ── Root layout ───────────────────────────────────────────────── */
.sr-root {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* derive gradient from theme. --ehdm-bg-deepest is always
     slightly darker than --bg in every preset, so it makes a natural
     subtle gradient. Fallback to original colors if vars aren't set. */
  background: linear-gradient(180deg,
              var(--bg, #0d0d18) 0%,
              var(--ehdm-bg-deepest, #08080f) 100%);
  color: var(--sr-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-y: auto;
  z-index: 1;
}

/* ── Top bar ───────────────────────────────────────────────────── */
.sr-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--sr-border);
}
.sr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}
.sr-logo-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(109,63,223,.1));
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 8px;
  color: var(--sr-purple-2);
  font-size: 18px;
}
.sr-logo-text {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--sr-text);
  line-height: 1;
}
.sr-logo-text em {
  color: var(--sr-purple-2);
  font-style: normal;
}
.sr-logo-sub {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 2.2px;
  color: var(--sr-text-3);
  text-transform: uppercase;
  margin-top: 3px;
}
.sr-proj-wrap {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sr-card);
  border: 1px solid var(--sr-border-2);
  border-radius: 8px;
  padding: 9px 14px;
}
.sr-proj-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--sr-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.sr-proj-edit {
  background: none;
  border: none;
  color: var(--sr-text-3);
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  transition: color .15s;
}
.sr-proj-edit:hover { color: var(--sr-purple-2); }
.sr-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sr-icon-btn {
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--sr-border-2);
  border-radius: 8px;
  color: var(--sr-text-2);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .15s;
}
.sr-icon-btn:hover {
  border-color: var(--sr-border-2);
  background: rgba(255,255,255,.03);
  color: var(--sr-text);
}
.sr-icon-only {
  width: 38px;
  padding: 0;
  justify-content: center;
}
.sr-generate-btn {
  height: 38px;
  padding: 0 22px;
  background: linear-gradient(180deg, var(--sr-purple), var(--sr-purple-d));
  border: 1px solid rgba(167,139,250,.5);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .15s;
  box-shadow: 0 4px 18px rgba(139,92,246,.35);
}
.sr-generate-btn:hover {
  background: linear-gradient(180deg, var(--sr-purple-2), var(--sr-purple));
  transform: translateY(-1px);
}

/* ── Stepper ───────────────────────────────────────────────────── */
.sr-steps {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 18px 32px;
  background: rgba(0,0,0,.18);
}
.sr-step {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sr-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sr-card-2);
  border: 1px solid var(--sr-border-2);
  display: grid;
  place-items: center;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--sr-text-2);
  flex-shrink: 0;
  transition: all .2s;
}
.sr-step.active .sr-step-num {
  background: linear-gradient(180deg, var(--sr-purple), var(--sr-purple-d));
  border-color: var(--sr-purple);
  color: #fff;
  box-shadow: 0 0 14px rgba(139,92,246,.45);
}
.sr-step.done .sr-step-num {
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.45);
  color: var(--sr-purple-2);
}
.sr-step-info { line-height: 1.2; min-width: 0; }
.sr-step-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--sr-text);
  text-transform: uppercase;
}
.sr-step-desc {
  font-size: 11px;
  color: var(--sr-text-3);
  margin-top: 2px;
}

/* ── Main scroll body ──────────────────────────────────────────── */
.sr-body {
  flex: 1;
  padding: 22px 32px 40px;
  min-height: 0;
  overflow-y: auto;
}

/* ── Top row : 4 picker cards ──────────────────────────────────── */
.sr-row-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.sr-card {
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: 10px;
  padding: 20px 22px;
}
.sr-card-hdr {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.sr-card-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--sr-purple-2);
  font-size: 16px;
}
.sr-card-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--sr-text);
  text-transform: uppercase;
}
.sr-card-info {
  margin-left: auto;
  font-size: 11px;
  color: var(--sr-text-3);
  cursor: help;
}

/* select + input controls inside cards */
.sr-select,
.sr-input {
  width: 100%;
  height: 42px;
  background: var(--sr-card-2);
  border: 1px solid var(--sr-border-2);
  border-radius: 7px;
  color: var(--sr-text);
  font-family: inherit;
  font-size: 13px;
  padding: 0 14px;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.sr-select:hover,
.sr-input:focus {
  border-color: rgba(139,92,246,.5);
}
.sr-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a9a4b5' stroke-width='1.6'><path d='M2 2.5l4 3 4-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 32px;
}
.sr-card-sub {
  margin-top: 10px;
  font-size: 11px;
  color: var(--sr-text-3);
  line-height: 1.4;
}

/* Emotion chips inside card */
.sr-em-chips {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sr-em-chip {
  height: 32px;
  background: transparent;
  border: 1px solid var(--sr-border-2);
  border-radius: 6px;
  color: var(--sr-text-2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.sr-em-chip:hover {
  border-color: rgba(139,92,246,.45);
  color: var(--sr-text);
}
.sr-em-chip.active {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.6);
  color: var(--sr-purple-2);
}

/* Tempo big number + slider */
.sr-tempo-big {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--sr-text);
  line-height: 1;
  margin: 4px 0 14px;
}
.sr-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--sr-card-2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.sr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--sr-purple);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(139,92,246,.5);
}
.sr-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--sr-purple);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: grab;
}
.sr-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--sr-text-3);
  text-transform: uppercase;
  margin-top: 6px;
}
.sr-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sr-text-3);
  margin-top: 2px;
}

/* Tempo quick buttons */
.sr-tempo-quick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 12px;
}
.sr-tempo-quick button {
  height: 32px;
  background: var(--sr-card-2);
  border: 1px solid var(--sr-border-2);
  border-radius: 6px;
  color: var(--sr-text-2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.sr-tempo-quick button:hover {
  border-color: rgba(139,92,246,.4);
  color: var(--sr-text);
}
.sr-tempo-quick button.primary {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.5);
  color: var(--sr-purple-2);
}

/* Duration big number + buttons */
.sr-duration-big {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--sr-text);
  line-height: 1;
  margin: 4px 0 16px;
}
.sr-duration-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sr-duration-row button {
  height: 36px;
  background: var(--sr-card-2);
  border: 1px solid var(--sr-border-2);
  border-radius: 7px;
  color: var(--sr-text-2);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.sr-duration-row button:hover {
  border-color: rgba(139,92,246,.4);
  color: var(--sr-text);
}
.sr-duration-row button.active {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.6);
  color: var(--sr-purple-2);
  font-weight: 600;
}

/* ── Advanced Settings card ────────────────────────────────────── */
.sr-adv {
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 16px;
}
.sr-adv-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.sr-adv-hdr .sr-card-icon {
  color: var(--sr-purple-2);
}
.sr-adv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px 22px;
  margin-bottom: 22px;
}
.sr-adv-cell .sr-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--sr-text-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sr-adv-cell .sr-lbl .sr-info {
  font-size: 11px;
  cursor: help;
  color: rgba(255,255,255,.25);
}
.sr-pct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sr-text);
  margin-bottom: 6px;
}
.sr-pct-row .sr-pct-val {
  color: var(--sr-text);
  font-weight: 600;
}
.sr-adv-cell .sr-slider-range {
  font-size: 10px;
}

/* Instrument toggles row */
.sr-inst-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--sr-border);
}
.sr-inst-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sr-inst-name {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--sr-text-2);
  text-transform: uppercase;
}
.sr-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--sr-card-2);
  border: 1px solid var(--sr-border-2);
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.sr-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #6b6b7e;
  border-radius: 50%;
  transition: all .2s;
}
.sr-toggle.on {
  background: var(--sr-purple);
  border-color: var(--sr-purple-2);
}
.sr-toggle.on::after {
  left: 18px;
  background: #fff;
}

/* ── Music Preview card ────────────────────────────────────────── */
.sr-preview {
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.sr-preview-hdr {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--sr-text);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sr-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sr-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sr-purple);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
  box-shadow: 0 4px 14px rgba(139,92,246,.4);
}
.sr-play-btn:hover {
  background: var(--sr-purple-2);
  transform: scale(1.05);
}
.sr-wave-wrap {
  flex: 1;
  height: 60px;
  background: rgba(0,0,0,.2);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.sr-wave-wrap canvas { display: block; width: 100%; height: 100%; }
.sr-wave-time {
  position: absolute;
  bottom: 4px;
  font-size: 10px;
  color: var(--sr-text-3);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}
.sr-wave-time.start { left: 8px; }
.sr-wave-time.end   { right: 8px; }
.sr-vol-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sr-vol-wrap .sr-slider { width: 90px; }

/* ── Global Prompt card ────────────────────────────────────────── */
.sr-prompt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: 10px;
  padding: 20px 24px;
}
.sr-prompt-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.sr-prompt-lbl {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--sr-purple-2);
  text-transform: uppercase;
}
.sr-prompt-edit-note {
  font-size: 11px;
  color: var(--sr-text-3);
}
.sr-prompt-textarea {
  width: 100%;
  min-height: 92px;
  background: transparent;
  border: none;
  color: var(--sr-text-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
  resize: vertical;
}
.sr-prompt-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.sr-prompt-count {
  font-size: 11px;
  color: var(--sr-text-3);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}
.sr-prompt-edit-icon {
  background: none;
  border: none;
  color: var(--sr-text-3);
  cursor: pointer;
  font-size: 14px;
  transition: color .15s;
}
.sr-prompt-edit-icon:hover { color: var(--sr-purple-2); }
.sr-export-col {
  border-left: 1px solid var(--sr-border);
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
}
.sr-export-lbl {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--sr-text);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sr-export-btn {
  height: 38px;
  padding: 0 14px;
  background: var(--sr-card-2);
  border: 1px solid var(--sr-border-2);
  border-radius: 7px;
  color: var(--sr-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .15s;
}
.sr-export-btn:hover {
  border-color: rgba(139,92,246,.5);
  background: rgba(139,92,246,.07);
}
.sr-export-btn .sr-export-ico {
  color: var(--sr-purple-2);
}

/* ── Randomize hint button (top of body) ───────────────────────── */
.sr-random-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sr-random-btn {
  padding: 9px 16px;
  background: linear-gradient(180deg, rgba(139,92,246,.18), rgba(109,63,223,.08));
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 7px;
  color: var(--sr-purple-2);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .15s;
}
.sr-random-btn:hover {
  background: linear-gradient(180deg, rgba(139,92,246,.28), rgba(109,63,223,.16));
  border-color: rgba(167,139,250,.6);
  color: #fff;
}
.sr-random-mode {
  font-size: 11px;
  color: var(--sr-text-3);
  letter-spacing: 1px;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .sr-row-top { grid-template-columns: repeat(2, 1fr); }
  .sr-adv-grid { grid-template-columns: repeat(3, 1fr); }
  .sr-inst-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .sr-row-top,
  .sr-adv-grid,
  .sr-inst-row { grid-template-columns: 1fr 1fr; }
  .sr-prompt { grid-template-columns: 1fr; }
  .sr-export-col { border-left: none; border-top: 1px solid var(--sr-border); padding-left: 0; padding-top: 16px; }
  .sr-steps { grid-template-columns: 1fr 1fr; }
}


/* ══ css/base/palette-v10.css ══ */
/* ════════════════════════════════════════════════════════════════
   INDUSTRIAL PALETTE — BASE DEFAULT
   Exactamente la paleta mostrada: #121212 / #1E1E1E / #2A2A2A / #3A3A3A
   Se aplica before 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 — 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 older 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;
}


/* ══ css/base/responsive.css ══ */
/* ══════════════════════════════════════════════════════════════════
   EHDarkMuse — Responsive Layer
   Estrategia:
   ≥1025px  → layout desktop original (sin cambios)
   768–1024px → sidebar colapsada a 48px (solo iconos), ctx-panel solapado
   ≤767px   → layout vertical: topbar + cuerpo scrollable + fab de acciones
   ══════════════════════════════════════════════════════════════════ */

/* ── Variables de breakpoint ─────────────────────────────────────── */
:root {
  --resp-sidebar-collapsed: 48px;
  --resp-topbar-h-mobile: 52px;
  --resp-transition: 0.22s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET  768 – 1024 px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Root layout ── */
  .app {
    flex-direction: row !important;
  }

  /* ── Sidebar colapsada a iconos ── */
  .lsidebar {
    width: var(--resp-sidebar-collapsed) !important;
    min-width: var(--resp-sidebar-collapsed) !important;
    overflow: hidden !important;
    transition: width var(--resp-transition) !important;
    position: relative !important;
    z-index: 120 !important;
  }

  /* Expandir sidebar al hacer hover (solo tablet con mouse) */
  @media (hover: hover) {
    .lsidebar:hover {
      width: 210px !important;
      box-shadow: 4px 0 24px rgba(0,0,0,.55) !important;
    }
  }

  /* Ocultar textos/labels en sidebar colapsada */
  .lsidebar .ls-logo-text,
  .lsidebar .ls-tag,
  .lsidebar .mode-switcher span:not(.mode-icon),
  .lsidebar .emotion-label,
  .lsidebar .emotion-meta,
  .lsidebar .emotion-desc,
  .lsidebar .ls-section-label,
  .lsidebar .gauge-label,
  .lsidebar .gauge-val-wrap,
  .lsidebar .tempo-controls,
  .lsidebar .key-scale-row,
  .lsidebar .genre-section,
  .lsidebar .ls-extras {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity var(--resp-transition) !important;
  }

  .lsidebar:hover .ls-logo-text,
  .lsidebar:hover .ls-tag,
  .lsidebar:hover .mode-switcher span:not(.mode-icon),
  .lsidebar:hover .emotion-label,
  .lsidebar:hover .emotion-meta,
  .lsidebar:hover .emotion-desc,
  .lsidebar:hover .ls-section-label,
  .lsidebar:hover .gauge-label,
  .lsidebar:hover .gauge-val-wrap,
  .lsidebar:hover .tempo-controls,
  .lsidebar:hover .key-scale-row,
  .lsidebar:hover .genre-section,
  .lsidebar:hover .ls-extras {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ── Logo: solo icono en colapsado ── */
  .lsidebar .ls-logo {
    padding: 10px 6px !important;
    justify-content: center !important;
  }

  /* ── Topbar: compactar ── */
  .app-topbar {
    padding: 0 10px !important;
    gap: 8px !important;
  }

  .topbar-project {
    max-width: 160px !important;
  }

  /* Ocultar botones secundarios de topbar en tablet */
  .btn-icon[title*="History"],
  .btn-icon[title*="Tap"] {
    display: none !important;
  }

  /* ── ctx-panel: solapado sobre el contenido (overlay) ── */
  .ctx-panel:not(.collapsed) {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    z-index: 200 !important;
    box-shadow: -4px 0 24px rgba(0,0,0,.6) !important;
  }

  /* ── Inspector panel: ancho fijo más compacto ── */
  .inspector-panel {
    max-width: 300px !important;
  }

  /* ── Arc bar: reducir altura ── */
  .arc-bar {
    height: 80px !important;
  }

  /* ── Sequencer grid: permitir scroll horizontal ── */
  .seq-grid-wrap,
  .seq-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Modales: width adaptado ── */
  .shortcuts-box,
  .cedit-box,
  .settings-panel {
    max-width: 90vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE  ≤ 767 px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Root: columna ── */
  html, body {
    overflow: auto !important;
  }

  .app {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
  }

  /* ── Sidebar: drawer horizontal en la parte inferior ──
     Oculta por defecto, se abre con clase .mob-sidebar-open
     (añadida/quitada por el botón hamburger) */
  .lsidebar {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    z-index: 500 !important;
    transition: height var(--resp-transition) !important;
    border-top: 1px solid var(--border) !important;
    border-right: none !important;
  }

  .lsidebar.mob-sidebar-open {
    height: 55vh !important;
    overflow-y: auto !important;
  }

  /* ── Topbar mobile ── */
  .app-topbar {
    height: var(--resp-topbar-h-mobile) !important;
    padding: 0 10px !important;
    gap: 6px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  /* Truncar nombre del proyecto */
  #projName {
    max-width: 110px !important;
    font-size: 12px !important;
  }

  /* Ocultar labels de modo largo */
  .topbar-mode-label {
    display: none !important;
  }

  /* Ocultar botones no esenciales en topbar */
  .btn-icon[title*="History"],
  .btn-icon[title*="Tap"],
  .btn-icon[title*="Tour"],
  .btn-icon[title*="Shortcuts"] {
    display: none !important;
  }

  /* ── Botón hamburger para sidebar (inyectado por JS responsive) ── */
  #mobSidebarBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── Centro de la app: columna ── */
  .app-center {
    height: auto !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
  }

  /* ── Stepper: scroll horizontal ── */
  .stepper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 4px 0 !important;
  }

  .step-btn {
    flex-shrink: 0 !important;
    min-width: 70px !important;
  }

  /* ── Arc bar: altura reducida ── */
  .arc-bar {
    height: 60px !important;
  }

  /* ── Sequencer: scroll horizontal ── */
  .sequencer-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 200px !important;
  }

  .seq-grid-wrap,
  .seq-grid {
    overflow-x: auto !important;
    min-width: 480px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── ctx-panel: oculto por defecto, aparece como sheet inferior ── */
  .ctx-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    max-height: 60vh !important;
    overflow: hidden !important;
    z-index: 400 !important;
    border-top: 1px solid var(--border) !important;
    border-left: none !important;
    transition: height var(--resp-transition) !important;
  }

  .ctx-panel.mob-panel-open {
    height: 55vh !important;
    overflow-y: auto !important;
  }

  .ctx-panel.collapsed {
    height: 0 !important;
    border: none !important;
  }

  /* ── Inspector panel: full width sheet ── */
  .inspector-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 0 !important;
    max-height: 70vh !important;
    overflow: hidden !important;
    z-index: 450 !important;
    border-top: 2px solid var(--accent) !important;
    border-left: none !important;
    transition: height var(--resp-transition) !important;
  }

  .inspector-panel.mob-panel-open,
  .inspector-panel[style*="display: flex"],
  .inspector-panel[style*="display:flex"] {
    height: 65vh !important;
    overflow-y: auto !important;
  }

  /* ── Modales: full-screen en mobile ── */
  .shortcuts-overlay,
  .cedit-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .shortcuts-box,
  .cedit-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
  }

  /* ── Shortcuts grid: 1 columna ── */
  .shortcuts-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Genre panel: full-width ── */
  .genre-panel {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 70vh !important;
  }

  /* ── Settings panel: full-screen ── */
  .settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* ── Prompt output: padding correcto ── */
  #promptOut {
    font-size: 12px !important;
    padding: 10px !important;
  }

  /* ── FAB: botón flotante para abrir el ctx-panel en mobile ── */
  #mobCtxBtn {
    display: flex !important;
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
    z-index: 300 !important;
    cursor: pointer !important;
    border: none !important;
  }

  /* ── Ocultar en desktop ── */
  #mobCtxBtn,
  #mobSidebarBtn {
    display: none;
  }

  /* Touch targets mínimos ── */
  .cell-btn,
  .btn-icon,
  .ctx-collapse-btn {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* ── Simple mode: adaptar cards ── */
  #simpleModeOverlay .sm-cards-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  #simpleModeOverlay .sm-card {
    min-width: 140px !important;
    max-width: 45vw !important;
  }

  /* ── Cell edit modal: textarea más alto ── */
  .cedit-ta {
    min-height: 120px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TOUCH: mostrar elementos mobile-only cuando hay pantalla táctil
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #mobCtxBtn,
  #mobSidebarBtn {
    display: flex !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PRINT: suprimir paneles UI, mostrar solo el prompt
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .lsidebar,
  .app-topbar,
  .ctx-panel,
  .inspector-panel,
  .arc-bar,
  .stepper,
  .seq-timeline {
    display: none !important;
  }

  .app-center {
    padding: 0 !important;
  }

  #promptOut {
    font-size: 11pt !important;
    white-space: pre-wrap !important;
    color: #000 !important;
    background: #fff !important;
  }
}


/* ══ css/alyx/alyx-base.css ══ */
/* ════════════════════════════════════════════════════════════════
   EHDarkMuse — alyx-base.css
   ────────────────────────────────────────────────────────────────
   Three coordinated adjustments to the base palette and overlay
   backgrounds:

   1. The palette default is 'slate' (true neutral gray). The
      backgrounds across the app now read from the preset's CSS
      vars, but we also push a slightly higher contrast floor in
      case a preset is partially loaded.

   2. The cell-edit "ventanita" (#ceditOverlay) and shortcuts /
      firstrun overlays used hardcoded near-black backgrounds in
      styles.css. We swap them for the active --bg2 / --bg3 so
      they ride the preset and feel less like caves.

   3. The palette panel itself has a neutral, slightly lifted
      background so the close button reads cleanly against it.
   ════════════════════════════════════════════════════════════════ */

/* ─ 1. Global floor: lift the deepest surfaces a notch ──────── */
:root {
  /* Only used if a preset hasn't set these (defensive) */
  --ehdm-floor-1: rgba(255,255,255,.025);
  --ehdm-floor-2: rgba(255,255,255,.045);
}

/* If localStorage was empty before  the user landed on the
   industrial #121212 base from palette-v10.css. Even after the
   slate preset applies, palette-v10.css still cascades into a few
   nested selectors. These overrides ride above it. */
body, .app-shell, .app-main {
  background: var(--bg) !important;
}

/* Right-side context panel — was leaning very dark on slate */
.ctx-panel {
  background: var(--bg2) !important;
  border-left: 1px solid var(--border) !important;
}
.ctx-section {
  background: transparent !important;
}

/* ─ 2. Modal "ventanitas" — ride the active preset ──────────── */
.cedit-overlay {
  background: rgba(0,0,0,.55) !important;      /* scrim, not panel */
}
.cedit-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.55),
              0 0 0 1px rgba(255,255,255,.04) !important;
}
.cedit-header {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
}
.cedit-ta {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.cedit-footer {
  background: var(--bg3) !important;
  border-top: 1px solid var(--border) !important;
}

.shortcuts-overlay { background: rgba(0,0,0,.55) !important; }
.shortcuts-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
}

/* : was rgba(0,0,0,.6) — too transparent against the
   colorful waveform cells behind it, made the modal text unreadable
   (see screenshot bug report). Reverted to opaque so it functions as
   an current first-run gate, not a tinted overlay on top of the app. */
.firstrun-overlay {
  background: var(--bg) !important;
}
.narrative-overlay {
  background: rgba(0,0,0,.6) !important;
}

/* Advanced Tools Panel — also rides the preset */
.atp-overlay  { background: rgba(0,0,0,.55) !important; }
.atp-panel,
.atp-shell {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
}

/* ─ 3. Palette panel — lifted neutral background so the close ─
       button (now a real bordered pill) has contrast against it. */
#ehdmThemePanel {
  background: var(--bg3) !important;
}

/* Active swatch card highlight tweak — accent ring instead of
   purple-only, so it reads on the new slate background too. */
.ehdm-preset-card.active {
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) !important;
}

/* ─ 4. Sequencer cells: bump base contrast slightly on slate ── */
.seq-cell {
  background-color: var(--bg3);
}
.seq-cell:hover {
  background-color: var(--bg4);
}

/* ─ 5. Sidebar / topbar — match the new floor ───────────────── */
.app-topbar,
.step-bar,
.sidebar,
.lsidebar,
.timeline-bar {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

/* ─ 6. Simple Mode overlay — same treatment ─────────────────── */
.simple-mode-overlay,
.sm2-topbar {
  background: var(--bg) !important;
}
.sr-root {
  background: var(--bg) !important;
}
.sr-root .sr-card,
.sr-root .sr-panel {
  background: var(--bg2) !important;
}


/* ══ css/alyx/alyx-cells.css ══ */
/* ════════════════════════════════════════════════════════════════
   EHDarkMuse — alyx-cells.css
   ────────────────────────────────────────────────────────────────
   Visual layer for alyx-cells.js:
    · Action row (clear + lock) top-right of filled cells, hover-only
    · Legacy ⋮ menu hidden (right-click still gives the full menu)
    · Drag cursors (grab / grabbing)
    · Dragging-cell ghost + drag-over highlight refresh
    · Locked cells: clear disabled, lock pinned visible/golden, the
      ::before pseudo-lock from advanced-tools-modules.css suppressed
      so we don't show two padlocks at once
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Action row container ─────────────────────────────────── */
.alyx-cell-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
  z-index: 6;
  pointer-events: auto;
}

/* ── 2. Buttons (shared base) ────────────────────────────────── */
.alyx-cell-actions > button {
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .55);
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity .12s ease,
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .1s ease;
  font-family: system-ui, -apple-system, "Segoe UI Emoji", sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  /* Don't let the emoji glyph affect line layout */
  vertical-align: middle;
}

/* Show on hover anywhere in the cell */
.seq-cell:hover .alyx-cell-actions > button {
  opacity: .88;
}

/* ── 3. Clear button (✕) — red on hover ──────────────────────── */
.alyx-cell-clear:hover {
  background: rgba(239, 68, 68, .82);
  color: #fff;
  border-color: rgba(239, 68, 68, .9);
  opacity: 1;
  transform: scale(1.06);
}
.alyx-cell-clear:active { transform: scale(.94); }

/* ── 4. Lock button (🔒) — amber on hover, pinned-amber active ── */
.alyx-cell-lock:hover {
  background: rgba(245, 158, 11, .55);
  color: #fff;
  border-color: rgba(245, 158, 11, .75);
  opacity: 1;
  transform: scale(1.06);
}
.alyx-cell-lock:active { transform: scale(.94); }

/* When the cell is locked, the lock button stays visible and amber */
.seq-cell.atp-locked .alyx-cell-lock {
  opacity: 1;
  background: rgba(245, 158, 11, .25);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, .55);
}

/* When the cell is locked, suppress clear (it would be a no-op anyway) */
.seq-cell.atp-locked .alyx-cell-clear {
  opacity: .25 !important;
  cursor: not-allowed;
  pointer-events: auto;  /* allow the click → toast feedback */
}
.seq-cell.atp-locked .alyx-cell-clear:hover {
  background: rgba(239, 68, 68, .3);
  transform: none;
}

/* Suppress the existing top-left 🔒 pseudo from advanced-tools-modules.css
   so we don't show two locks. The amber outline ring on the cell stays. */
.seq-cell.atp-locked::before { display: none !important; }

/* ── 5. Hide older three-dot ⋮ menu button ───────────────────── */
/* Right-click on the cell still opens the same context menu with
   Edit / Copy / Paste / Delete — kept for power users. The visible
   dots were redundant once clear and lock got inline buttons. */
.seq-cell-menu {
  display: none !important;
}

/* ── 6. Drag affordances ─────────────────────────────────────── */

/* Filled cells: show grab cursor (but not on the action buttons or
   the intensity slider, which keep their own cursor). */
.seq-cell[draggable="true"] {
  cursor: grab;
}
.seq-cell[draggable="true"]:active {
  cursor: grabbing;
}

/* Action buttons override the grab cursor */
.alyx-cell-actions > button,
.alyx-cell-actions > button * {
  cursor: pointer;
}

/* Cell being dragged — ghost it */
.seq-cell.dragging {
  opacity: .35;
  cursor: grabbing !important;
}

/* Hover target — the destination cell during drag.
   styles.css already has a base .drag-over rule with a gold dashed
   outline. We make it more readable on the new lighter backgrounds
   by adding a soft inner glow without removing the original. */
.seq-cell.drag-over {
  outline-offset: -3px !important;
}
.seq-cell.drag-over::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  background: rgba(167, 139, 250, .08);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .35);
}

/* Locked cells: visually communicate that they refuse drops */
.seq-cell.atp-locked.drag-over {
  outline-color: rgba(239, 68, 68, .6) !important;
}
.seq-cell.atp-locked.drag-over::after {
  background: rgba(239, 68, 68, .08);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .4);
}


/* ══ css/alyx/alyx-clarity.css ══ */
/* ══════════════════════════════════════════════════════════════════
   ALYX — CLARITY PASS
   ─────────────────────────────────────────────────────────────────
   Single goal: rescatar los contenedores de la sensación amorfa.
   El codebase tiene ~95 reglas con bordes/fondos a 4–8% de blanco
   sobre background oscuro — por debajo del umbral de contraste useful en
   monitores no calibrados. El effect acumulado es que NADA tiene
   border aparente; las cajas "se funden con el background".
   
   This pasada NO toca esas 95 reglas. En su lugar:
     1) Define tokens semantics para "edge" / "input bg" / "focus".
     2) Re-pinta selectores specifics (los que more se ven).
     3) Añade un sistema de :focus consistente con acento dorado.
     4) Homologa los tokens de Simple Mode a la misma escala.
   
   Carga LAST en index.html. No usa !important salvo where una hoja
   previous ya lo usa con la misma propiedad.
══════════════════════════════════════════════════════════════════ */


/* ── 1. SEMANTIC EDGE TOKENS ──────────────────────────────────────
   Los porcentajes son sobre blanco puro a alpha. La escala:
     soft   = 7%  → separadores internos, scrollbar, fines decorativos
     edge   = 14% → bordes de contenedor "encontrable"  ←  el suelo
     strong = 22% → contenedor active / hover / drop-zone
   Si una caja existe como entidad, minimum edge. Si es decoración,
   soft. This es la single decision global; lo demore se deriva.
─────────────────────────────────────────────────────────────────── */
:root {
  --clarity-edge-soft:    rgba(255,255,255,.07);
  --clarity-edge:         rgba(255,255,255,.14);
  --clarity-edge-strong:  rgba(255,255,255,.22);

  /* Inputs: caja hundida en negro semitransparente, no aclarada en
     blanco — preserva el ambiente oscuro y diferencia "área editable"
     de "panel". */
  --clarity-input-bg:       rgba(0,0,0,.28);
  --clarity-input-bg-hover: rgba(0,0,0,.36);

  /* Foco: acento dorado de marca + halo suave. Si por alguna razón
     --gold2 no estuviera definido, fallback razonable. */
  --clarity-focus:       var(--gold2, #e8c360);
  --clarity-focus-glow:  rgba(232,184,75,.18);

  /* Acento secundario (selecciones, no-foco) */
  --clarity-accent:      var(--ehdm-purple-2, var(--gold2, #a78bfa));
}


/* ══════════════════════════════════════════════════════════════════
   2. INPUTS Y TEXTAREAS NOMBRADOS
   El selector .ctx-prompt-ta es el del screenshot. Los demore
   reciben el mismo tratamiento because comparten patrón.
══════════════════════════════════════════════════════════════════ */

/* The inspector prompt textarea — quejas en review  */
.ctx-prompt-ta {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ctx-prompt-ta:hover  { background: var(--clarity-input-bg-hover); }
.ctx-prompt-ta:focus  {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 3px var(--clarity-focus-glow);
}
.ctx-prompt-ta::placeholder { color: rgba(255,255,255,.32); font-style: italic; }

/* Project name (topbar): border transparente por defecto = invisible.
   Le damos un soft edge permanente para que el ojo encuentre el field. */
.proj-input {
  border-color: var(--clarity-edge-soft);
  background: transparent;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.proj-input:hover {
  border-color: var(--clarity-edge);
  background: var(--clarity-input-bg);
}
.proj-input:focus {
  border-color: var(--clarity-focus);
  background: var(--clarity-input-bg);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}

/* Reference input — "In the style of…"  
   Before: sin background, border inferior-only transparente.
   Ahora: caja completa con suelo de input. */
.ref-input {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge-soft);
  border-radius: 5px;
  padding: 5px 9px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ref-input:hover  { border-color: var(--clarity-edge); }
.ref-input:focus  {
  border-color: var(--clarity-focus);
  background: var(--clarity-input-bg-hover);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}

/* OpenAI API key modal */
.asst-key-input {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge);
}
.asst-key-input:focus {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}

/* The big cell-edit floating modal textarea — `.cedit-ta`
   Es transparent + border:none because el contenedor `.cedit-box`
   ya hace de caja. Pero al user le help saber where acaba el
   área de escritura. Añadimos un divider sutil. */
.cedit-ta {
  border-top: 1px solid var(--clarity-edge-soft) !important;
  border-bottom: 1px solid var(--clarity-edge-soft) !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. INPUTS GENÉRICOS SIN CLASE
   Defensa contra cualquier <input>/<textarea> que se haya añadido
   sin pensar en styles — quedan con un minimum decente.
══════════════════════════════════════════════════════════════════ */
input[type="text"]:not([class]),
input[type="number"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
input[type="search"]:not([class]),
textarea:not([class]),
select:not([class]) {
  background: var(--clarity-input-bg);
  border: 1px solid var(--clarity-edge);
  border-radius: 4px;
  padding: 6px 9px;
  color: var(--text, #f0ead8);
  font-family: var(--ff-crimson, Georgia, serif);
  outline: none;
}
input[type="text"]:not([class]):focus,
input[type="number"]:not([class]):focus,
input[type="email"]:not([class]):focus,
input[type="password"]:not([class]):focus,
input[type="search"]:not([class]):focus,
textarea:not([class]):focus,
select:not([class]):focus {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
}


/* ══════════════════════════════════════════════════════════════════
   4. CARDS Y PANELES — bordes encontrables
══════════════════════════════════════════════════════════════════ */

/* Alyx card of the panel derecho — before a 20% sobre purple, casi
   no se distinguía del background. Subimos sin gritar. */
.alyx-card {
  border-color: rgba(167,139,250,.36);
}

.alyx-extra-item {
  border-color: var(--clarity-edge) !important;
}

/* EHDM preset cards (Palette panel) */
.ehdm-preset-card { border-color: var(--clarity-edge-soft); }
.ehdm-preset-card:hover { border-color: var(--clarity-edge); }
.ehdm-preset-card.active {
  border-color: rgba(139,92,246,.7);
  box-shadow: 0 0 0 1px rgba(139,92,246,.3);
}

/* Inspector context panel — border izquierdo more visible */
.ctx-panel { border-left-color: var(--clarity-edge); }

/* Section dividers internos del inspector — eran .04, casi invisibles */
.ctx-section { border-bottom-color: var(--clarity-edge-soft); }

/* Buttons que estaban en .08 */
.ctx-collapse-btn {
  background: rgba(255,255,255,.06);
  border-color: var(--clarity-edge);
}
.ctx-collapse-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--clarity-edge-strong);
}

/* Sequencer cell hover — before inset .08, ahora inset edge */
.seq-cell:hover:not(.selected) {
  box-shadow: inset 0 0 0 1px var(--clarity-edge);
}

/* Drop target — more obvio */
.seq-cell.drag-over {
  outline: 2px dashed var(--clarity-focus) !important;
  background: rgba(232,184,75,.10) !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. FOCUS GLOBAL — accesibilidad y consistencia
   Aplicar :focus-visible (no :focus) para que el halo solo aparezca
   con teclado / navegación deliberada, no con mouse click.
══════════════════════════════════════════════════════════════════ */
.btn:focus-visible,
.btn-icon:focus-visible,
.plat-btn:focus-visible,
.btn-tap:focus-visible,
.inspector-tab-btn:focus-visible,
.asst-toggle-btn:focus-visible {
  border-color: var(--clarity-focus);
  box-shadow: 0 0 0 2px var(--clarity-focus-glow);
  outline: none;
}


/* ══════════════════════════════════════════════════════════════════
   6. SIMPLE MODE — homologación a la misma escala
   El root de Simple Mode tiene sus propios tokens; los subimos al
   mismo suelo. La structure no cambia, only los values.
══════════════════════════════════════════════════════════════════ */
.sr-root {
  --sr-border:   var(--clarity-edge);
  --sr-border-2: var(--clarity-edge-strong);
}

/* Simple Mode prompt textarea — el contenedor .sr-prompt ya tenía
   un border decente, pero el textarea interior no marcaba where se
   puede escribir. Le damos pista sin pisar el card. */
.sr-prompt-textarea {
  border-top: 1px solid var(--clarity-edge-soft);
  padding-top: 10px;
  transition: border-color .15s;
}
.sr-prompt-textarea:focus {
  border-top-color: var(--sr-purple-2, #a78bfa);
}

/* Simple Mode inputs (select + text input) */
.sr-input,
.sr-select {
  background: var(--clarity-input-bg);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sr-input:hover,
.sr-select:hover {
  background: var(--clarity-input-bg-hover);
}
.sr-input:focus,
.sr-select:focus {
  border-color: var(--sr-purple-2, #a78bfa) !important;
  box-shadow: 0 0 0 2px rgba(167,139,250,.18);
}


/* ══════════════════════════════════════════════════════════════════
   7. PROMPT OUTPUT (read-only) — `.prompt-out` / `.rp-prompt-box`
   Ya usaba --bg3 + --border2, visible. Only añadimos un detalle:
   un highlight sutil when "● live" is active (el JS pone
   opacity:1 a #promptLive when hay regeneration).
══════════════════════════════════════════════════════════════════ */
.rp-prompt-box {
  border-color: var(--clarity-edge);
}


/* ══════════════════════════════════════════════════════════════════
   8. EDGE-CASE PATCHES — selectores con !important previo
   Where otra hoja usa !important con bordes invisibles, lo igualamos.
══════════════════════════════════════════════════════════════════ */
.alyx-extra-item[style*="rgba(255,255,255,.05)"] {
  border-color: var(--clarity-edge) !important;
}

/* fin  — clarity pass */


/* ══ css/alyx/alyx-spectrum-ribbon.css ══ */
/* ═══════════════════════════════════════════════════════════
   EMOTIONAL SPECTRUM RIBBON — alyx-spectrum-ribbon.css
   Static stylesheet. Covers both Advanced and Simple Mode.
   ═══════════════════════════════════════════════════════════ */

#emotion-spectrum-ribbon,
#emotion-spectrum-ribbon-sm {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity    0.25s ease,
              margin-top 0.25s ease;
  margin-top: 0;
}

#emotion-spectrum-ribbon.esrib-visible,
#emotion-spectrum-ribbon-sm.esrib-visible {
  max-height: 44px;
  opacity: 1;
  margin-top: 6px;
}

#emotion-spectrum-ribbon-sm.esrib-visible {
  max-height: 48px;
  margin-top: 10px;
}

.esrib-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 0 4px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  min-height: 22px;
}

#emotion-spectrum-ribbon-sm .esrib-inner {
  justify-content: center;
  padding: 6px 0 5px 0;
}

.esrib-word {
  font-family: var(--ff-cinzel, 'Palatino Linotype', serif);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text3, #6E6E6E);
  white-space: nowrap;
  opacity: 0;
  animation: esrib-word-in 0.45s ease forwards;
  text-transform: lowercase;
}

#emotion-spectrum-ribbon-sm .esrib-word {
  font-size: 10px;
  letter-spacing: 1.2px;
}

.esrib-word.esrib-dynamic {
  color: rgba(167, 139, 250, 0.60);
}

.esrib-sep {
  font-family: var(--ff-cinzel, serif);
  font-size: 9px;
  color: rgba(110, 110, 110, 0.35);
  padding: 0 5px;
  opacity: 0;
  animation: esrib-word-in 0.45s ease forwards;
  user-select: none;
  pointer-events: none;
}

#emotion-spectrum-ribbon-sm .esrib-sep {
  padding: 0 6px;
}

@keyframes esrib-word-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══ css/alyx/alyx-prompt-refinement.css ══ */
/* ════════════════════════════════════════════════════════════════════
   ALYX PROMPT PANEL REFINEMENT — v1.14

   Compositional intention surface, not a command box.
   Subtle overrides only — base styles.css is untouched.

   Direction: less "prompt engineering", more "musical intention".
   Atmospheric, interpretative, restrained.
   ════════════════════════════════════════════════════════════════════ */


/* ══ Section labels ═══════════════════════════════════════════════
   "Platform" and "Prompt ● live" labels — whisper, don't announce.  */

.rp-label {
  font-size: 8px;
  letter-spacing: 3.5px;
  color: rgba(140, 132, 144, 0.45);
  margin-bottom: 10px;
}


/* ══ Prompt output container ══════════════════════════════════════
   The compositional surface itself.
   Less form field, more atmospheric vessel.                         */

.rp-prompt-box {
  background:    rgba(255, 255, 255, 0.015);
  border:        1px solid rgba(255, 255, 255, 0.05);
  border-left:   2px solid rgba(232, 184, 75, 0.09);
  border-radius: 4px;
  padding:       13px 14px 15px 13px;
  min-height:    68px;
  transition:    border-color 0.6s ease, background 0.6s ease;
}


/* ══ Prompt output text ═══════════════════════════════════════════
   Breathing room. Slightly softer opacity — the text is read
   not scanned.                                                       */

.prompt-out {
  font-size:   13px;
  line-height: 1.90;
  color:       rgba(240, 234, 216, 0.80);
}


/* ══ STYLE: line ══════════════════════════════════════════════════
   Currently: monospace 18px — reads as technical instruction.
   New:       serif italic 12.5px — reads as compositional note.    */

.prompt-plat-style {
  font-family: 'Georgia', 'Times New Roman', serif !important;
  font-size:   12.5px !important;
  font-style:  italic;
  font-weight: 400;
  color:       rgba(240, 200, 96, 0.70);
  letter-spacing: 0.15px;
  line-height: 1.75;
  margin-bottom: 8px;
  white-space: pre-wrap;
}


/* ══ Section tags [Verse] [Chorus] etc. ═══════════════════════════
   Softer gold — less badge, more atmospheric marker.               */

.prompt-out .stag {
  font-weight:    500;
  color:          rgba(240, 200, 96, 0.62);
  letter-spacing: 0.3px;
}

.prompt-out .stag.peak {
  color: rgba(240, 200, 96, 0.85);  /* peak section keeps presence */
}


/* ══ Instrument tags ══════════════════════════════════════════════ */

.prompt-out .itag {
  color: rgba(255, 112, 133, 0.62);
}


/* ══ Platform buttons ════════════════════════════════════════════
   Reduced from 15px → 9px. They are selectors, not headlines.     */

.plat-btn {
  font-size:    9px;
  letter-spacing: 1.2px;
  padding:      4px 8px;
  color:        rgba(140, 132, 144, 0.62);
  border-color: rgba(255, 255, 255, 0.07);
}

.plat-btn:hover {
  color:        rgba(184, 176, 162, 0.82);
  border-color: rgba(255, 255, 255, 0.11);
  background:   transparent;
}

.plat-btn.active {
  color:        rgba(240, 200, 96, 0.88);
  border-color: rgba(232, 184, 75, 0.30);
  background:   rgba(232, 184, 75, 0.052);
}


/* ══ Ref input ════════════════════════════════════════════════════
   Already good structurally (bottom-border only).
   Softer placeholder, slightly reduced size.                       */

.ref-input {
  font-size:   13px;
  letter-spacing: 0.15px;
  color:       rgba(184, 176, 162, 0.72);
}

.ref-input::placeholder {
  color:      rgba(140, 132, 144, 0.36);
  font-style: italic;
}

.ref-input:focus {
  color:        rgba(240, 234, 216, 0.88);
  border-color: rgba(232, 184, 75, 0.25);
}


/* ══ Inspector panel tabs ═════════════════════════════════════════
   "Details" / "Prompt" tabs — reduce from 12px to 9px.           */

.insp-panel-tab {
  font-size:    9px;
  letter-spacing: 2px;
}


/* ══ Inspector footer ════════════════════════════════════════════
   Slightly quieter separator.                                       */

.insp-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.10);
  padding: 7px 12px;
}

.insp-footer-btn {
  font-size: 8.5px;
  letter-spacing: 1px;
  color: rgba(140, 132, 144, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
  padding: 6px;
}

.insp-footer-btn:hover {
  color: rgba(184, 176, 162, 0.90);
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.03);
}

.insp-footer-btn.primary {
  border-color: rgba(232, 184, 75, 0.35);
  color: rgba(240, 200, 96, 0.85);
}

.insp-footer-btn.primary:hover {
  background: rgba(232, 184, 75, 0.07);
}


/* ══ css/alyx/alyx-typography.css ══ */
/* ══════════════════════════════════════════════════════════════════
   ALYX — TYPOGRAPHY PASS
   ─────────────────────────────────────────────────────────────────
   Segundo movimiento de la conversación de UX iniciada en .
   Objetivo: subir el suelo de legibilidad sin desfigurar el character
   "gótico-editorial" del producto.

   Diagnostic previo (resumido):
     · 394 reglas con font-size 7–11px repartidas en 16 files CSS.
     · letter-spacing 2–3px en small caps con 8–10px de cuerpo:
       triple ataque a la legibilidad (size, tracking, contraste).
     · 77 reglas font-style:italic en styles.css. Crimson italic en
       cuerpos smalls sobre background oscuro es la zona more cansada.
     · Mezclas no intencionadas de Cinzel + Crimson + Georgia/Times
       en la misma línea por how se cargan inline-style el HTML.

   This pasada NO toca esas 394 reglas. En su lugar:
     1) Define tokens semantics para escala de size, tracking y
        color de labels.
     2) Sube el "suelo" de los selectores more visibles (labels de
        section, títulos de cell, chips, tabs, panel headers).
     3) Reserva itálicas para attribution/poetic — quita del
        funcional (subtítulos de cell, captions, hints).
     4) Normaliza la family inline a las variables del sistema.

   Carga LAST en index.html after de clarity. !important only
   where una hoja previous ya lo usa con la misma propiedad.
══════════════════════════════════════════════════════════════════ */


/* ── 1. SEMANTIC TYPOGRAPHY TOKENS ────────────────────────────────
   La regla mental simple:
     · Si es label funcional (label), sm o md. Never menos de sm.
     · Si es text leíble, body-md o body-lg.
     · Si es "decoración" (caption, hint), label-sm + color-dim.
   Tres tamaños, no cinco. Tres tracking, no siete.
─────────────────────────────────────────────────────────────────── */
:root {
  /* Label scale — before 7/8/9/10/11/12/13px en distintos lugares */
  --typo-label-xs: 10px;  /* solo decorativo: timestamps, indicadores */
  --typo-label-sm: 11px;  /* default para small caps de section */
  --typo-label-md: 12px;  /* label enfatizada */
  --typo-label-lg: 14px;  /* title de panel */

  /* Body scale */
  --typo-body-sm: 13px;   /* sub text, captions con peso */
  --typo-body-md: 14px;   /* default body */
  --typo-body-lg: 16px;   /* text del prompt, áreas editables */

  /* Tracking — before 1.5–3px, ahora max 1.2px en small caps */
  --typo-track-tight:  .3px;
  --typo-track-normal: .8px;
  --typo-track-wide:   1.2px;   /* tope absoluto */

  /* Color scale — before hasta 30% blanco (invisible).
     45% es el suelo perceptible howde sobre background oscuro. */
  --typo-label-color:      rgba(255,255,255,.62);
  --typo-label-color-dim:  rgba(255,255,255,.45);
  --typo-label-color-emph: rgba(255,255,255,.85);

  /* Cuerpo: usamos los tokens existentes */
  --typo-body-color:     var(--text);
  --typo-body-color-dim: var(--text2);
}


/* ══════════════════════════════════════════════════════════════════
   2. SECTION LABELS — el problema more visible
   "— PROMPT", "— INTENSITY", "EMOTION", "TEMPO": small caps a 7-9px
   con tracking salvaje. Subimos suelo a 11px, tracking 1px, color 62%.
══════════════════════════════════════════════════════════════════ */

/* Inspector context panel — eran 8px / ls 2px / color 30% */
.ctx-section-lbl {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
  color: var(--typo-label-color-dim) !important;
}
.ctx-section-lbl-icon {
  font-size: var(--typo-label-md) !important;
  opacity: .75 !important;
}

/* Sidebar section labels */
.ls-label {
  font-size: var(--typo-label-md) !important;
  letter-spacing: var(--typo-track-wide) !important;
  color: var(--typo-label-color) !important;
}

/* Sidebar control labels (BPM, KEY etc — los que aparecen al lado de sliders) */
.ls-ctrl-label {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-normal);
  color: var(--typo-label-color-dim);
}

/* Right panel labels — "Prompt", "Ref" etc */
.rp-label {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-wide);
  color: var(--typo-label-color);
}

/* Generic arc labels (intensity bar, etc.) */
.arc-label,
.arc-bar-labels .arc-label {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. CHIPS, PILLS, BADGES — etiquetas funcionales
   Eran 9-10px con tracking 1px. Subir a 11px reduce el sentimiento
   "decorativo" y los hace clickables.
══════════════════════════════════════════════════════════════════ */

.proj-chip {
  font-size: var(--typo-label-sm);
  letter-spacing: var(--typo-track-normal);
  padding: 3px 9px;
}

.alyx-pill {
  font-size: var(--typo-label-sm);
  letter-spacing: var(--typo-track-tight);
}

/* Section column header (encima de cada bloque del sequencer) */
.sec-col-hdr {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
}

/* Mode switcher trigger */
.alyx-mode-trigger,
.alyx-mode-cur {
  font-size: var(--typo-label-md) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   4. CELL CONTENT — where el user lee text real
   .seq-cell-title estaba a 11–13px (varía según override).
   .seq-cell-sub a 11px italic — el italic + dark + small es
   la combination more cansada del codebase. Subimos sub a 12px y
   conservamos italic (es identidad), pero also subimos contraste.
══════════════════════════════════════════════════════════════════ */

.seq-cell-title {
  font-size: var(--typo-body-sm) !important;
  font-weight: 600 !important;
  letter-spacing: var(--typo-track-tight) !important;
  color: rgba(255,255,255,.92) !important;
}
.seq-cell-sub {
  font-size: var(--typo-label-md) !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.55 !important;
  /* mantenemos font-style:italic because es identidad del project */
}

/* "+ Add" hint en cells empty */
.seq-cell-add-lbl {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. TOPBAR Y NAVEGACIÓN — buttons de text
   EXPORT / IMPORT / DETAILS / HISTORY estaban en ls 1.5px. Bajamos
   a 1.2px y subimos something de cuerpo en los tabs because tab active
   es ancla visual primaria.
══════════════════════════════════════════════════════════════════ */

.btn {
  letter-spacing: var(--typo-track-wide) !important;
}

.inspector-tab-btn {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-wide);
}

.asst-toggle-btn {
  letter-spacing: var(--typo-track-normal);
}

.proj-input {
  /* name del project en topbar — Cinzel 15px era OK,
     pero el letter-spacing 1px applied por proj-input
     en alyx-fix.css se cargaba la legibilidad. */
  letter-spacing: var(--typo-track-tight) !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. STEPPER — pasos numerados de la cabecera
   Letter-spacing demasiado wide para que los subtítulos largos
   entren howdamente. Subimos cuerpo del title, bajamos tracking.
══════════════════════════════════════════════════════════════════ */

.step-title {
  font-size: var(--typo-body-md);
  letter-spacing: var(--typo-track-tight);
}
.step-desc {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-tight);
  color: var(--typo-label-color-dim);
}


/* ══════════════════════════════════════════════════════════════════
   7. AI / ASSISTANT PANEL
   Mucha label y mucha caption juntas. Conviene jerarquizar:
   title de section 13px wide, captions 11px tight.
══════════════════════════════════════════════════════════════════ */

.asst-section-title,
.asst-section-lbl {
  font-size: var(--typo-label-md) !important;
  letter-spacing: var(--typo-track-normal) !important;
  color: var(--typo-label-color) !important;
}

.asst-key-label,
.asst-key-sub {
  font-size: var(--typo-label-sm) !important;
}

.asst-key-status {
  font-size: var(--typo-label-xs) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   8. ITALIC AUDIT
   Reserva del italic para text editorial / atribución. Quitar de:
   · Placeholders cortos (ya cubierto en clarity para inputs)
   · Sub-headlines descriptivas con pocas palabras
   · Hint text de empty states
   Conservamos italic en .seq-cell-sub (identidad) y en cuerpos
   editoriales largos.
══════════════════════════════════════════════════════════════════ */

/* Hints decorativos cortos: remove italic */
.hist-empty,
.proj-edit-btn,
.gauge-lbl,
.ls-tag {
  font-style: normal !important;
}

/* Empty state del sequencer — italic estaba en rgba a 35%, doblemente
   ilegible. Subimos a 55% y remove italic. */
.sec-empty-hint,
.empty-state-hint {
  font-style: normal;
  color: var(--typo-label-color-dim);
}


/* ══════════════════════════════════════════════════════════════════
   9. FONT FAMILY NORMALIZATION
   Algunos inline styles en index.html usan 'Crimson Pro',serif o
   'Georgia',serif directly. Eso se ve sobre todo en bloques
   descriptivos del onboarding y simple-mode-overlay. Mapeamos esos
   nombres al stack del sistema para evitar saltos de personalidad
   tipográfica dentro de la misma frase.
══════════════════════════════════════════════════════════════════ */

/* Where el HTML pone 'Crimson Pro' inline, lo redirigimos.
   No podemos sobreescribir un inline style con CSS externo a
   no ser que la family inline use ! important — pero podemos
   reforzar el stack del root del body. */
body, html {
  font-family: var(--ff-crimson);
}


/* ══════════════════════════════════════════════════════════════════
   10. CTX-PANEL CONTENT — text explicativo del inspector
   Subimos cuerpo del prompt textarea a 15px because there el user
   escribe Y lee — size primario.
══════════════════════════════════════════════════════════════════ */

.ctx-prompt-ta {
  font-size: var(--typo-body-lg);
  line-height: 1.55;
}

/* Modal flotante de edición de clip */
.cedit-ta {
  font-size: var(--typo-body-lg);
  line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════════
   11. CINZEL / SMALL CAPS — regla general de tracking
   El stack --ff-cinzel es 'Palatino Linotype' en realidad. Palatino
   con letter-spacing 2-3px en mayúsculas chico se separa demasiado;
   las letras dejan de leerse como palabra. Aplicamos un techo via
   un selector amplio: cualquier cosa con font-family Cinzel +
   text-transform uppercase tiene max ls de 1.2px.
══════════════════════════════════════════════════════════════════ */

[style*="text-transform:uppercase"][style*="letter-spacing:2"],
[style*="text-transform:uppercase"][style*="letter-spacing: 2"],
[style*="text-transform:uppercase"][style*="letter-spacing:3"],
[style*="text-transform:uppercase"][style*="letter-spacing: 3"] {
  letter-spacing: var(--typo-track-wide) !important;
}

/* fin  — typography pass */


/* ══ css/alyx/alyx-polish.css ══ */
/* ══════════════════════════════════════════════════════════════════
   ALYX — POLISH PASS
   ─────────────────────────────────────────────────────────────────
   Tres frentes: densidad, jerarquía visual, paridad con Simple Mode.

   Densidad
     · .em-btn2 (emotion buttons) — 36px → 54px, gap 3→8px, padding
       4→9px, icon 14→18px, label 10.5→11px con tracking .8px.
     · .ctx-tfm-btn (transform buttons) — un poco more de aire.
     · .gp-rec-card / .genre-item — confirmados en clarity, here solo
       un retoque de gap.

   Jerarquía
     · .ls-group-hdr — los dos cabeceros nuevos del sidebar.
       Style: caps pequeñas, color de acento, hairline debajo,
       margin vertical more generoso para que el group se lea como
       unidad.
     · .alyx-collapsible / .alyx-collapsed — visual del collapse.
       El chevron, la animation, hide el contenido.

   Simple Mode
     · .sr-card-title estaba en letter-spacing 2.2px sobre 11px —
       el mismo problema que tratamos en  para Normal Mode.
       Bajamos a 1.2px.
     · .sr-step-title igual.
     · Botones de Simple Mode con tracking razonable.

   Carga LAST en el HTML, after de clarity y typography.
══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. DENSIDAD — emotion buttons del sidebar
   atp-redesign.css los puso en grid 2×3 con min-height 32px. Subimos
   altura, padding, icon y name. !important because atp-redesign
   los marcó ayes.
══════════════════════════════════════════════════════════════════ */

.em-grid {
  gap: 8px !important;
}

.em-btn2 {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 11px 6px !important;
  min-height: 60px !important;
  border-radius: 6px !important;
  border-color: var(--clarity-edge, rgba(255,255,255,.14)) !important;
  transition: background .15s, border-color .15s, transform .12s !important;
}
.em-btn2:hover {
  border-color: var(--clarity-edge-strong, rgba(255,255,255,.22)) !important;
  transform: translateY(-1px);
}
.em-btn2.active {
  border-color: var(--gold) !important;
  background: rgba(232,184,75,.12) !important;
}

.em-btn2-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
.em-btn2-name {
  font-size: 11px !important;
  letter-spacing: .8px !important;
  font-weight: 500 !important;
  margin-top: 1px !important;
}


/* ══════════════════════════════════════════════════════════════════
   2. DENSIDAD — transform buttons del inspector
   Also con emoji y muy apretados. Mismo tratamiento more suave.
══════════════════════════════════════════════════════════════════ */

.ctx-transform-grid {
  gap: 6px !important;
}
.ctx-tfm-btn {
  padding: 9px 6px !important;
  min-height: 56px !important;
  gap: 4px !important;
  border-color: var(--clarity-edge, rgba(255,255,255,.14)) !important;
}
.ctx-tfm-btn:hover {
  border-color: var(--clarity-edge-strong, rgba(255,255,255,.22)) !important;
  transform: translateY(-1px);
}
.ctx-tfm-icon { font-size: 17px !important; }
.ctx-tfm-label {
  font-size: 10px !important;
  letter-spacing: .5px !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. JERARQUÍA — sidebar group headers
   Los dos cabeceros nuevos (WHAT YOU FEEL, TECHNICAL). Style
   tipográfico discreto pero claro, acento de color por group,
   hairline debajo.
══════════════════════════════════════════════════════════════════ */

.ls-group-hdr {
  padding: 14px 14px 6px;
  font-family: var(--ff-cinzel, Cinzel, serif);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 6px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.ls-group-hdr::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
}
.ls-group-feel {
  color: rgba(167,139,250,.85);
}
.ls-group-feel::after {
  background: linear-gradient(to right,
              rgba(167,139,250,.5) 0%,
              rgba(167,139,250,0) 100%);
}
.ls-group-tech {
  color: rgba(232,184,75,.85);
}
.ls-group-tech::after {
  background: linear-gradient(to right,
              rgba(232,184,75,.4) 0%,
              rgba(232,184,75,0) 100%);
}

/* Los .ls-section dentro de un group recibe menos border-bottom para
   que el cabecero del group lleve la jerarquía visual primaria, no
   las separaciones internas. */
.ls-group-hdr + .ls-section { border-top: none; }


/* ══════════════════════════════════════════════════════════════════
   4. JERARQUÍA — inspector section collapse
   Style del chevron y del state colapsado. El JS de
   alyx-collapse.js maneja la lógica; here only la pintura.
══════════════════════════════════════════════════════════════════ */

.ctx-section.alyx-collapsible .ctx-section-lbl {
  user-select: none;
  padding: 4px 0;
  margin: -4px 0 4px;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.ctx-section.alyx-collapsible .ctx-section-lbl:hover {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75) !important;
}

.alyx-chev {
  display: inline-block;
  font-size: 9px;
  margin-right: 4px;
  opacity: .55;
  transition: transform .15s, opacity .15s;
  width: 9px;
  text-align: center;
}
.ctx-section.alyx-collapsible:hover .alyx-chev { opacity: 1; }

/* When is colapsada, todo lo que NO sea el label se oculta.
   Padding inferior reducido. */
.ctx-section.alyx-collapsed > *:not(.ctx-section-lbl) {
  display: none;
}
.ctx-section.alyx-collapsed {
  padding-bottom: 4px !important;
}
.ctx-section.alyx-collapsed .ctx-section-lbl {
  margin-bottom: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. SIMPLE MODE — typography polish equivalente a 
    solo tocó selectores de Normal Mode. Here extendemos a
   .sr-card-title (era 2.2px tracking) y a otros sr-* que tienen
   el mismo problema de "small caps con tracking salvaje".
══════════════════════════════════════════════════════════════════ */

.sr-card-title {
  font-size: 12px !important;
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
  color: var(--clarity-label-color, rgba(255,255,255,.85)) !important;
}

/* Resto de small caps de Simple Mode al mismo nivel — mismo problema
   que .sr-card-title: 11px en 700 peso con tracking 2.2px hace que
   las letras dejen de leerse como palabra. */
.sr-logo-sub,
.sr-preview-hdr,
.sr-prompt-lbl,
.sr-export-lbl {
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
}

.sr-step-title {
  letter-spacing: .5px !important;
}
.sr-step-desc {
  letter-spacing: .3px !important;
}

/* Los buttons de Simple Mode con caps */
.sr-icon-btn,
.sr-generate-btn {
  letter-spacing: 1.2px !important;
}

/* Labels secundarios (sr-card-info, etc.) — bajar tracking */
.sr-card-info,
.sr-card-sub,
.sr-genre-tag,
.sr-em-tag {
  letter-spacing: .5px !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. SIMPLE MODE — paridad con la pasada de iconos
    sustituyó emojis del topbar en Normal Mode. Simple Mode
   tiene su propio topbar; el button SAVE usa 💾. Lo dejamos por
   ahora (es una action primaria, no un icon de chrome). Si lo
   quieres uniforme also, dilo.
══════════════════════════════════════════════════════════════════ */

/* Espacio para future paridades. Por ahora empty intencionalmente. */


/* fin  — polish */


/* ══ css/alyx/alyx-genre-panel.css ══ */
/* ══════════════════════════════════════════════════════════════════
   ALYX — GENRE PANEL HARDENING
   ─────────────────────────────────────────────────────────────────
   Reportado: la window flotante de Genres se ve mal en screen
   (no he podido play el bug visual exacto, pero hay dos
   sospechas razonables y este parche cubre ambas).

   1. El overlay current es 100% transparente:
        .genre-panel-overlay { background: transparent }
      Sin dimming visible, el user ve the panel Y el resto del UI
      al mismo nivel. Si las dos cosas son oscuras, parecen una sola
      cosa rota. Lo solucionamos con un background semi-oscuro + un blur
      ligero — patrón isndar de modal.

   2. Z-index of the panel a 9500. Hay otro elemento del project a
      9985 (atp-redesign) que en algún flujo could tomar prioridad.
      Subimos the panel y el overlay a 99500/99499 — bien por encima
      de cualquier otra capa current y con margin para el futuro.

   Also forzamos isolation:isolate para garantizar stacking
   context propio independing del ancestor, por si something new
   introduce transforms/filter en algún padre.

   Carga LAST en index.html.
══════════════════════════════════════════════════════════════════ */

.genre-panel-overlay {
  z-index: 99499 !important;
  background: rgba(8, 8, 14, .55) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.genre-panel {
  z-index: 99500 !important;
  /* Stacking context propio — the panel se aísla. */
  isolation: isolate;
  /* Sombra more marcada para que el border derecho sea inequívoco. */
  box-shadow: 6px 0 48px rgba(0, 0, 0, .8) !important;
}

/* Si en algún momento the panel acaba dentro de un ancestor con
   transform/filter (containing block bug), forzamos los values
   posicionales para que sigan siendo fijos al viewport. */
.genre-panel.open {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

/* fin  — genre panel hardening */


/* ══ css/alyx/alyx-voice-type.css ══ */
/* ════════════════════════════════════════════════════════════════
   ALYX — VOICE TYPE SELECTOR (CSS)
   ────────────────────────────────────────────────────────────────
   Pill toggle de 3 segmentos. Design:
     · Contenedor unique redondeado (no 3 buttons sueltos).
     · Active state usa el accent purple del project.
     · Hover sutil — el selector debe sentirse ambient, no agresivo.
     · When vocal-mode = instrumental, se atenúa al 35% (preserva
       la selection visualmente, pero la deja claro que no aplica).
   ════════════════════════════════════════════════════════════════ */

.vtype-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  height: 26px;
  transition: opacity .2s ease, filter .2s ease;
}

.vtype-group.is-dimmed {
  opacity: .35;
  filter: saturate(.4);
}

.vtype-seg {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0 10px;
  height: 22px;
  border-radius: 999px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3px;
  color: rgba(220, 215, 230, .58);
  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
  user-select: none;
  white-space: nowrap;
}

.vtype-seg:hover:not(.is-active) {
  color: rgba(232, 224, 248, .85);
  background: rgba(255, 255, 255, .04);
}

.vtype-seg:active:not(.is-active) {
  transform: scale(.97);
}

.vtype-seg.is-active {
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .20),
    rgba(139, 92, 246, .12));
  color: rgba(238, 232, 255, .98);
  /* Sin ring duro: la selection se percibe "teñida con intención",
     no marcada como un radio button. Un inner glow muy suave es
     suficiente para diferenciar. */
  box-shadow: inset 0 0 8px rgba(167, 139, 250, .14);
}

/* Active focus ring para accesibilidad de teclado, sin chocar
   con el active gradient */
.vtype-seg:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, .65),
    inset 0 0 8px rgba(167, 139, 250, .14);
}

/* La separación entre el button de vocal-mode y el voice-type
   se reduce ligeramente: are conceptualmente relacionados. */
#vocalModeGroup + .hsep + #voiceTypeGroup {
  margin-left: 2px;
}

/* En el caso de que el .hsep sea injected after de vmode pero
   before que llegue voice-type, suavizamos su altura visual. */
.vtype-group + .hsep {
  opacity: .6;
}

/* Light theme parity — si el user is en mode claro, los
   tokens de color del topbar cambian de luminosidad. */
[data-theme="light"] .vtype-group {
  background: rgba(0, 0, 0, .04);
  border-color: rgba(0, 0, 0, .10);
}
[data-theme="light"] .vtype-seg {
  color: rgba(40, 30, 60, .58);
}
[data-theme="light"] .vtype-seg:hover:not(.is-active) {
  color: rgba(40, 30, 60, .85);
  background: rgba(0, 0, 0, .05);
}
[data-theme="light"] .vtype-seg.is-active {
  background: linear-gradient(180deg,
    rgba(139, 92, 246, .16),
    rgba(109, 63, 223, .10));
  color: rgba(30, 15, 60, .95);
  box-shadow: inset 0 0 8px rgba(139, 92, 246, .10);
}


/* ══ css/alyx/alyx-cell-regen.css ══ */
/* ════════════════════════════════════════════════════════════════
   ALYX — PER-CELL REGENERATION (CSS)
   ────────────────────────────────────────────────────────────────
   Panel minimum. Una row de gestos, un susurro de contexto.
   No header, no labels de formulario, no buttons de cancel
   (Esc y click fuera cancelan). El conjunto debe leerse como un
   instrument, no como un cuadro de dialog.

   Layout:
     ┌───────────────────────────────────────────────┐
     │  [scope pills]   [✦]   [↻]   [✕]              │
     │  piano · climax — grief, in D Minor           │
     └───────────────────────────────────────────────┘
   ════════════════════════════════════════════════════════════════ */

/* ── Panel container ─────────────────────────────────────────── */
.alyx-regen-panel {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 14px);
  z-index: 10000;

  background: rgba(20, 20, 32, .82);
  border: 1px solid rgba(167, 139, 250, .15);
  /* Pill alargada con pie suave para acomodar el whisper. El whisper
     gestiona su propia altura — si is empty no añade espacio. */
  border-radius: 22px;
  padding: 6px 8px 7px 14px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, .55),
    0 0 24px rgba(139, 92, 246, .06);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: rgba(232, 224, 248, .92);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .22s cubic-bezier(.2, .8, .3, 1),
    transform .26s cubic-bezier(.2, .8, .3, 1),
    visibility 0s linear .26s;
}
.alyx-regen-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity .22s cubic-bezier(.2, .8, .3, 1),
    transform .26s cubic-bezier(.2, .8, .3, 1),
    visibility 0s linear 0s;
}

/* ── Row single de controles ─────────────────────────────────── */
.arp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Scope pills (los tres modos) ────────────────────────────── */
.arp-scope {
  display: inline-flex;
  gap: 2px;
}
.arp-scope-pill {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(232, 224, 248, .50);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .1px;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.arp-scope-pill:hover:not(.is-active) {
  color: rgba(232, 224, 248, .85);
  background: rgba(255, 255, 255, .04);
}
.arp-scope-pill.is-active {
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .20),
    rgba(139, 92, 246, .10));
  color: rgba(238, 232, 255, .96);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .32);
  font-style: normal;
}

/* ── Blend toggle (✦) ────────────────────────────────────────── */
/* Una sola estrella que pulsa muy suavemente when is activa.
   Toggle visceral, sin label. Tooltip explica si hace falta. */
.arp-blend {
  appearance: none;
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(232, 224, 248, .30);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
  transition: color .25s ease, background .25s ease, transform .15s ease;
}
.arp-blend:hover {
  color: rgba(232, 224, 248, .8);
  background: rgba(255, 255, 255, .05);
}
.arp-blend.is-on {
  color: rgba(190, 165, 255, .92);
  animation: arpBlendPulse 3.2s ease-in-out infinite;
}
.arp-blend:active {
  transform: scale(.92);
}
@keyframes arpBlendPulse {
  0%, 100% { opacity: .85; text-shadow: 0 0 0 transparent; }
  50%      { opacity: 1;   text-shadow: 0 0 8px rgba(167, 139, 250, .55); }
}

/* ── Regenerate (↻) — action primaria ────────────────────────── */
.arp-go {
  appearance: none;
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .26),
    rgba(109, 63, 223, .14));
  border: 1px solid rgba(167, 139, 250, .42);
  color: rgba(248, 244, 255, 1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arp-go:hover {
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .38),
    rgba(109, 63, 223, .22));
  border-color: rgba(167, 139, 250, .65);
  box-shadow: 0 0 14px rgba(139, 92, 246, .25);
}
.arp-go:active {
  transform: scale(.94) rotate(35deg);
}

/* ── Close (✕) — sutil ──────────────────────────────────────── */
.arp-close {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(232, 224, 248, .35);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  transition: color .15s, background .15s;
}
.arp-close:hover {
  color: rgba(232, 224, 248, .85);
  background: rgba(255, 255, 255, .05);
}

/* ── Susurro contextual ─────────────────────────────────────── */
.arp-whisper {
  margin: 5px 8px 0 14px;
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .25px;
  color: rgba(232, 224, 248, .42);
  text-align: center;
  line-height: 1.4;
  min-height: 0;
}
.arp-whisper:empty {
  display: none;
}

/* ── Focus accesible ─────────────────────────────────────────── */
.arp-scope-pill:focus-visible,
.arp-blend:focus-visible,
.arp-go:focus-visible,
.arp-close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, .55),
    0 0 12px rgba(139, 92, 246, .2);
}

/* ── Item Anchor en el ctxMenu ──────────────────────────────── */
/* El glifo ⟡ debe sentirse como una marca, no como un candado de
   sistema. Small ajuste de opacidad y sin highlight loud. */
.ctx-item .ctx-lock-label {
  display: inline;
}
.ctx-item.disabled {
  opacity: .35;
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .alyx-regen-panel {
    bottom: 14px;
    left: 12px;
    right: 12px;
    transform: translateY(14px);
    width: auto;
    border-radius: 18px;
    padding: 6px 8px;
  }
  .alyx-regen-panel.is-open {
    transform: translateY(0);
  }
  .arp-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .arp-scope-pill {
    font-size: 10px;
    padding: 5px 9px;
  }
}

/* ── Light theme parity ─────────────────────────────────────── */
[data-theme="light"] .alyx-regen-panel {
  background: rgba(252, 250, 255, .92);
  border-color: rgba(139, 92, 246, .22);
  color: rgba(40, 25, 70, .92);
  box-shadow:
    0 16px 48px rgba(60, 40, 100, .22),
    0 0 24px rgba(139, 92, 246, .06);
}
[data-theme="light"] .arp-scope-pill          { color: rgba(40, 25, 70, .50); }
[data-theme="light"] .arp-scope-pill:hover:not(.is-active) {
  background: rgba(0, 0, 0, .04);
  color: rgba(40, 25, 70, .92);
}
[data-theme="light"] .arp-scope-pill.is-active {
  background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(109, 63, 223, .10));
  color: rgba(30, 15, 70, .96);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .32);
}
[data-theme="light"] .arp-blend               { color: rgba(40, 25, 70, .30); }
[data-theme="light"] .arp-blend:hover         { color: rgba(40, 25, 70, .85); background: rgba(0, 0, 0, .04); }
[data-theme="light"] .arp-blend.is-on         { color: rgba(109, 63, 223, .92); }
[data-theme="light"] .arp-close               { color: rgba(40, 25, 70, .35); }
[data-theme="light"] .arp-close:hover         { color: rgba(40, 25, 70, .85); background: rgba(0, 0, 0, .04); }
[data-theme="light"] .arp-whisper             { color: rgba(40, 25, 70, .50); }


/* ══ css/alyx/alyx-key-recommend.css ══ */
/* ════════════════════════════════════════════════════════════════
   ALYX — RECOMMENDED KEYS & SCALES (CSS)
   ────────────────────────────────────────────────────────────────
   La recommendation es atmosférica, no semafórica. La diferencia entre
   "fuerte" / "alternativa" / "rara" se expresa por PROFUNDIDAD VISUAL,
   no por color de aviso.

     · strong → pill rellena, presencia plena
     · alt    → pill solo perfilada, peso medio
     · rare   → pill ghost (.55 opacidad), invita curiosidad sin gritar

   No hay button de expand. Todas las tiers se muestran always — las
   raras simply recedidas, presentes en periferia.

   Active state (la pill coincide con la selection current): glow purple
   suave + text encendido. NO un border fuerte: la decision del user
   se percibe iluminada, no "checked".
   ════════════════════════════════════════════════════════════════ */

/* Container — oculto when no hay emotion seleccionada */
.alyx-rec-row {
  display: none;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  margin: 5px 0 3px;
  padding: 0;
  min-height: 0;
}
.alyx-rec-row.is-visible {
  display: flex;
}

/* Label whisper ("for grief") — un susurro, no un header */
.alyx-rec-row .rec-label {
  font-size: 9px;
  letter-spacing: .3px;
  text-transform: lowercase;
  color: rgba(232, 224, 248, .35);
  margin-right: 4px;
  font-weight: 400;
  font-style: italic;
}

/* ── Pill base ────────────────────────────────────────────────── */
.alyx-rec-row .rec-pill {
  appearance: none;
  display: inline-block;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .15px;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease,
    opacity .18s ease,
    box-shadow .18s ease;
  white-space: nowrap;
  line-height: 1.25;
}

/* ── Strong — presencia plena, "naturalmente encaja" ──────────── */
.alyx-rec-row .rec-strong {
  background: rgba(167, 139, 250, .10);
  border-color: rgba(167, 139, 250, .18);
  color: rgba(232, 224, 248, .92);
}
.alyx-rec-row .rec-strong:hover {
  background: rgba(167, 139, 250, .18);
  border-color: rgba(167, 139, 250, .32);
  color: rgba(248, 244, 255, 1);
  transform: translateY(-1px);
}

/* ── Alt — only perfilada, "also could servir" ────────────── */
.alyx-rec-row .rec-alt {
  background: transparent;
  border-color: rgba(255, 255, 255, .12);
  color: rgba(232, 224, 248, .65);
}
.alyx-rec-row .rec-alt:hover {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(232, 224, 248, .92);
  transform: translateY(-1px);
}

/* ── Rare — ghost, "si te atreves" ────────────────────────────── */
.alyx-rec-row .rec-rare {
  background: transparent;
  border-color: transparent;
  color: rgba(232, 224, 248, .38);
  opacity: .75;
}
.alyx-rec-row .rec-rare:hover {
  background: rgba(255, 255, 255, .035);
  color: rgba(232, 224, 248, .82);
  opacity: 1;
  transform: translateY(-1px);
}

/* ── Active state — la pill que coincide con la selection ─────
   Glow purple suave, no border duro. La decision del user se ve
   "iluminada", no marcada como un checkbox. */
.alyx-rec-row .rec-pill.is-active,
.alyx-rec-row .rec-pill.is-active:hover {
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .26),
    rgba(139, 92, 246, .14));
  border-color: rgba(167, 139, 250, .55);
  color: rgba(248, 244, 255, 1);
  opacity: 1;
  box-shadow:
    0 0 14px rgba(139, 92, 246, .18),
    inset 0 0 6px rgba(167, 139, 250, .08);
  transform: translateY(0);
}

/* ── Focus accessibility ───────────────────────────────────────── */
.alyx-rec-row .rec-pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, .55),
    0 0 12px rgba(139, 92, 246, .18);
}

/* ── Compact layout en sidebar estrecho ───────────────────────── */
@media (max-width: 1100px) {
  .alyx-rec-row .rec-label { display: none; }
}

/* ── Light theme parity ────────────────────────────────────────── */
[data-theme="light"] .alyx-rec-row .rec-label  { color: rgba(40, 25, 70, .42); }

[data-theme="light"] .alyx-rec-row .rec-strong {
  background: rgba(139, 92, 246, .10);
  border-color: rgba(139, 92, 246, .22);
  color: rgba(30, 15, 70, .92);
}
[data-theme="light"] .alyx-rec-row .rec-strong:hover {
  background: rgba(139, 92, 246, .18);
  border-color: rgba(139, 92, 246, .42);
  color: rgba(20, 10, 60, 1);
}

[data-theme="light"] .alyx-rec-row .rec-alt {
  border-color: rgba(0, 0, 0, .14);
  color: rgba(40, 25, 70, .65);
}
[data-theme="light"] .alyx-rec-row .rec-alt:hover {
  background: rgba(0, 0, 0, .035);
  border-color: rgba(0, 0, 0, .25);
  color: rgba(20, 10, 60, .92);
}

[data-theme="light"] .alyx-rec-row .rec-rare {
  color: rgba(40, 25, 70, .42);
}
[data-theme="light"] .alyx-rec-row .rec-rare:hover {
  background: rgba(0, 0, 0, .03);
  color: rgba(20, 10, 60, .82);
}

[data-theme="light"] .alyx-rec-row .rec-pill.is-active,
[data-theme="light"] .alyx-rec-row .rec-pill.is-active:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, .22), rgba(109, 63, 223, .14));
  border-color: rgba(109, 63, 223, .55);
  color: rgba(20, 10, 50, 1);
  box-shadow:
    0 0 14px rgba(139, 92, 246, .18),
    inset 0 0 6px rgba(139, 92, 246, .08);
}


/* ══ css/alyx/alyx-lethe.css ══ */
/* ════════════════════════════════════════════════════════════════
   LETHE — Experimental Layer Styles
   ────────────────────────────────────────────────────────────────
   Visual identity of the Lethe layer:
     · A topbar toggle button (𝝠 glyph) that pulses when active
     · A subtle gold-on-shadow tint when the canvas is in Lethe mode
     · Section header glyphs for the 9 dramaturgical states
     · Ghost-layer indicator (low-mix opacity) for atmosphere cells
   The aesthetic stays inside DarkMuse's existing palette — gold
   accents on near-black, no new colors introduced.
   ════════════════════════════════════════════════════════════════ */

/* ── Toggle button in the topbar ─────────────────────────────── */
.lethe-toggle {
  position: relative;
  font-family: 'Times New Roman', Georgia, serif;  /* the lambda reads better in serif */
  font-size: 16px;
  font-weight: 400;
  color: rgba(232, 184, 75, 0.55);                  /* dim gold when inactive */
  letter-spacing: 0;
  transition: color 220ms ease, text-shadow 220ms ease, background 220ms ease;
}

.lethe-toggle:hover {
  color: rgba(232, 184, 75, 0.95);
  text-shadow: 0 0 8px rgba(232, 184, 75, 0.45);
}

.lethe-toggle.on {
  color: rgba(232, 184, 75, 1);
  text-shadow:
    0 0 10px rgba(232, 184, 75, 0.7),
    0 0 22px rgba(232, 184, 75, 0.3);
  animation: letheBreath 4.5s ease-in-out infinite;
}

/* Slow breath — matches the "haunted but alive" feel of the layer.
   Deliberately understated; this is not a notification dot. */
@keyframes letheBreath {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(232, 184, 75, 0.55),
      0 0 18px rgba(232, 184, 75, 0.22);
  }
  50% {
    text-shadow:
      0 0 14px rgba(232, 184, 75, 0.85),
      0 0 28px rgba(232, 184, 75, 0.4);
  }
}

/* Tiny indicator dot when active — bottom-right of the button, so
   the lambda glyph itself remains clean. Pure CSS, no extra DOM. */
.lethe-toggle.on::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(232, 184, 75, 0.9);
  box-shadow: 0 0 6px rgba(232, 184, 75, 0.8);
}

/* ── Body class applied while Lethe is active ────────────────── */
/* (Reserved — Lethe currently does not set this on body, but a
   future hook can use it to tint the canvas. Documented here so
   the styling slot is reserved.) */
body.lethe-on .arc-stage {
  /* subtle vignette in gold when active */
  box-shadow: inset 0 0 60px rgba(232, 184, 75, 0.06);
}

/* ── Section header glyphs ───────────────────────────────────── */
/* When a section is one of the 9 Lethe states (matched by name),
   the section header gets a small leading glyph. Applied via the
   data-lethe attribute that index.html / ui-render can choose to
   set. Glyphs match STATES[i].glyph in the JS module. */
.section-head[data-lethe="invocation"]::before        { content: '☉  '; color: rgba(232,184,75,0.7); }
.section-head[data-lethe="emergence"]::before         { content: '⟁  '; color: rgba(232,184,75,0.7); }
.section-head[data-lethe="fracture"]::before          { content: '⚡  '; color: rgba(232,184,75,0.7); }
.section-head[data-lethe="false_peak"]::before        { content: '◬  '; color: rgba(232,184,75,0.85); }
.section-head[data-lethe="dissociation"]::before      { content: '◌  '; color: rgba(232,184,75,0.55); }
.section-head[data-lethe="recollection"]::before      { content: '⌖  '; color: rgba(232,184,75,0.7); }
.section-head[data-lethe="collapse"]::before          { content: '▽  '; color: rgba(232,184,75,0.85); }
.section-head[data-lethe="hollow_resolution"]::before { content: '○  '; color: rgba(232,184,75,0.55); }
.section-head[data-lethe="afterimage"]::before        { content: '~  '; color: rgba(232,184,75,0.4); }

/* ── Ghost layer cell indicator ──────────────────────────────── */
/* When a cell's text contains 'subliminal' or 'spectral' (the
   ghost-layer markers the Lethe generator inserts), the cell
   renders at reduced opacity — visually echoes what these layers
   do in the mix. Only opt-in via data-lethe-ghost attribute. */
.clip[data-lethe-ghost="true"],
.clip-cell[data-lethe-ghost="true"] {
  opacity: 0.62;
  font-style: italic;
}

/* ── Lethe preamble preview tag (in prompt output) ───────────── */
/* The preamble starts with "═══ LETHE DRAMATURGY ═══" — when the
   live prompt panel renders it, we tint the heading gold. Targeted
   loosely so it works whether the preamble is in a <pre> or inline. */
#promptOut pre {
  position: relative;
}

#promptOut pre:has-text("LETHE DRAMATURGY"),
#promptOut pre[data-lethe="true"] {
  border-left: 2px solid rgba(232, 184, 75, 0.5);
  padding-left: 12px !important;
}

/* Fallback (browsers without :has-text — most): use a generic
   gold left-border on any <pre> that starts the prompt output
   when body.lethe-on is set. Optional, doesn't break anything. */
body.lethe-on #promptOut > pre:first-child {
  border-left: 2px solid rgba(232, 184, 75, 0.5);
  padding-left: 12px !important;
}


/* ══ css/audio/eh-audio-panel.css ══ */
/* ════════════════════════════════════════════════════════════════
   EHDM AUDIO PANEL — Dramaturgical Listener Styles
   ────────────────────────────────────────────────────────────────
   Aesthetic rules:
     · gold-on-shadow palette matching EHDarkMuse
     · minimal, analytical, atmospheric
     · NOT DAW-like (no level meters, no transport controls,
       no waveform-as-editing-surface)
     · the modal feels like a small chapel where the composition
       is being listened back to, not a console
   ════════════════════════════════════════════════════════════════ */

/* Topbar toggle ─────────────────────────────────────────────── */
.ehdm-audio-toggle {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 18px;
  color: rgba(232, 184, 75, 0.55);
  letter-spacing: 0;
  transition: color 220ms ease, text-shadow 220ms ease;
}
.ehdm-audio-toggle:hover {
  color: rgba(232, 184, 75, 0.95);
  text-shadow: 0 0 8px rgba(232, 184, 75, 0.45);
}

/* Modal root — overlay covering the whole viewport ──────────── */
.ehdm-audio-modal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: rgba(240, 230, 210, 0.92);
}
.ehdm-audio-modal.on { display: flex; }

.ehdm-audio-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Card ──────────────────────────────────────────────────────── */
.ehdm-audio-card {
  position: relative;
  width: min(960px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(14, 12, 16, 0.97), rgba(8, 8, 12, 0.97));
  border: 1px solid rgba(232, 184, 75, 0.18);
  border-radius: 6px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 80px rgba(232, 184, 75, 0.025);
  padding: 22px 26px 24px 26px;
}

/* Header ────────────────────────────────────────────────────── */
.ehdm-audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(232, 184, 75, 0.12);
}
.ehdm-audio-title { display: flex; align-items: baseline; gap: 12px; }
.ehdm-audio-glyph {
  font-size: 22px;
  color: rgba(232, 184, 75, 0.9);
  font-family: 'Times New Roman', Georgia, serif;
  line-height: 1;
}
.ehdm-audio-title-text {
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(232, 184, 75, 0.95);
}
.ehdm-audio-subtitle {
  font-size: 11px;
  color: rgba(240, 230, 210, 0.45);
  font-style: italic;
  margin-left: 4px;
}
.ehdm-audio-close {
  background: transparent;
  border: 1px solid rgba(232, 184, 75, 0.18);
  color: rgba(232, 184, 75, 0.6);
  width: 28px; height: 28px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 180ms ease;
}
.ehdm-audio-close:hover {
  color: rgba(232, 184, 75, 1);
  border-color: rgba(232, 184, 75, 0.5);
}

/* Drop zone ─────────────────────────────────────────────────── */
.ehdm-audio-drop {
  border: 1px dashed rgba(232, 184, 75, 0.28);
  border-radius: 5px;
  padding: 56px 30px;
  text-align: center;
  background: rgba(232, 184, 75, 0.02);
  transition: all 200ms ease;
}
.ehdm-audio-drop.hover {
  border-color: rgba(232, 184, 75, 0.7);
  background: rgba(232, 184, 75, 0.06);
}
.ehdm-audio-drop-glyph {
  font-size: 48px;
  font-family: 'Times New Roman', Georgia, serif;
  color: rgba(232, 184, 75, 0.5);
  margin-bottom: 18px;
  animation: ehdmAudioBreath 4.5s ease-in-out infinite;
}
@keyframes ehdmAudioBreath {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.75; }
}
.ehdm-audio-drop-prompt {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: rgba(240, 230, 210, 0.85);
  margin-bottom: 8px;
}
.ehdm-audio-drop-hint {
  font-size: 11px;
  color: rgba(240, 230, 210, 0.38);
  margin-top: 6px;
  font-style: italic;
}
.ehdm-audio-drop-note { color: rgba(240, 230, 210, 0.25); }
.ehdm-audio-pick {
  margin-top: 22px;
  padding: 8px 22px;
  background: transparent;
  border: 1px solid rgba(232, 184, 75, 0.4);
  color: rgba(232, 184, 75, 0.95);
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 180ms ease;
}
.ehdm-audio-pick:hover {
  background: rgba(232, 184, 75, 0.08);
  border-color: rgba(232, 184, 75, 0.7);
}

/* Busy / loading ────────────────────────────────────────────── */
.ehdm-audio-busy {
  text-align: center;
  padding: 80px 30px;
}
.ehdm-audio-busy-glyph {
  font-size: 56px;
  font-family: 'Times New Roman', Georgia, serif;
  color: rgba(232, 184, 75, 0.7);
  animation: ehdmAudioPulse 1.8s ease-in-out infinite;
}
@keyframes ehdmAudioPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.ehdm-audio-busy-label {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(232, 184, 75, 0.7);
  font-style: italic;
}
.ehdm-audio-busy-bar {
  margin: 24px auto 0 auto;
  width: 60%;
  height: 2px;
  background: rgba(232, 184, 75, 0.1);
  border-radius: 1px;
  overflow: hidden;
}
.ehdm-audio-busy-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(232,184,75,0.4), rgba(232,184,75,0.9));
  transition: width 220ms ease;
}

/* Result section ────────────────────────────────────────────── */
.ehdm-audio-result { display: block; }

.ehdm-audio-canvas-wrap {
  position: relative;
  padding: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(232, 184, 75, 0.12);
  border-radius: 4px;
}
.ehdm-audio-canvas {
  display: block;
  width: 100%;
  height: 220px;
}
.ehdm-audio-legend {
  display: flex;
  gap: 22px;
  padding: 10px 8px 4px 8px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.55);
}
.ehdm-audio-legend-intended .dot,
.ehdm-audio-legend-current   .dot {
  display: inline-block;
  width: 14px; height: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.ehdm-audio-legend-intended .dot {
  background: repeating-linear-gradient(90deg, rgba(232,184,75,0.55) 0 3px, transparent 3px 7px);
}
.ehdm-audio-legend-current .dot { background: rgba(255, 206, 110, 0.95); height: 2px; }

/* Meta line ─────────────────────────────────────────────────── */
.ehdm-audio-meta {
  margin-top: 20px;
  text-align: center;
}
.ehdm-audio-meta-line {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: rgba(240, 230, 210, 0.4);
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
}

/* Observations list ─────────────────────────────────────────── */
.ehdm-audio-obs {
  margin: 24px 0 18px 0;
  padding: 18px 22px;
  background: rgba(232, 184, 75, 0.025);
  border-left: 2px solid rgba(232, 184, 75, 0.18);
  border-radius: 0 4px 4px 0;
}
.ehdm-audio-obs-empty {
  font-size: 13px;
  color: rgba(240, 230, 210, 0.55);
  font-style: italic;
  text-align: center;
  padding: 10px 0;
}
.ehdm-audio-obs-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(240, 230, 210, 0.82);
}
.ehdm-audio-obs-item + .ehdm-audio-obs-item {
  border-top: 1px solid rgba(232, 184, 75, 0.08);
}
.ehdm-audio-obs-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.ehdm-audio-obs-major .ehdm-audio-obs-dot {
  background: rgba(232, 184, 75, 0.95);
  box-shadow: 0 0 6px rgba(232, 184, 75, 0.55);
}
.ehdm-audio-obs-minor .ehdm-audio-obs-dot {
  background: transparent;
  border: 1px solid rgba(232, 184, 75, 0.7);
}
.ehdm-audio-obs-note .ehdm-audio-obs-dot {
  background: rgba(232, 184, 75, 0.35);
}
.ehdm-audio-obs-text {
  flex: 1;
}
.ehdm-audio-obs-major .ehdm-audio-obs-text {
  color: rgba(245, 235, 215, 0.95);
}
.ehdm-audio-obs-note  .ehdm-audio-obs-text {
  color: rgba(240, 230, 210, 0.62);
  font-style: italic;
}

/* Footer buttons ────────────────────────────────────────────── */
.ehdm-audio-foot {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}
.ehdm-audio-btn {
  padding: 7px 18px;
  background: transparent;
  border: 1px solid rgba(232, 184, 75, 0.28);
  color: rgba(232, 184, 75, 0.85);
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 180ms ease;
  font-family: inherit;
}
.ehdm-audio-btn:hover {
  background: rgba(232, 184, 75, 0.06);
  border-color: rgba(232, 184, 75, 0.55);
  color: rgba(232, 184, 75, 1);
}
.ehdm-audio-btn-ghost { color: rgba(240, 230, 210, 0.55); }
.ehdm-audio-btn-ghost:hover { color: rgba(232, 184, 75, 1); }

/* Small responsive nudge — narrow screens collapse legend & footer */
@media (max-width: 720px) {
  .ehdm-audio-card { padding: 16px 18px; }
  .ehdm-audio-canvas { height: 180px; }
  .ehdm-audio-legend { flex-direction: column; gap: 6px; }
  .ehdm-audio-foot   { flex-direction: column-reverse; }
  .ehdm-audio-btn    { width: 100%; }
}

/* ─── Phase 2 — Response Engine UI ─────────────────────────── */

.ehdm-audio-response-wrap {
  margin-top: 22px;
  border-top: 1px solid rgba(232, 184, 75, 0.10);
  padding-top: 20px;
}

/* Two-column row for False Peak Confidence + Decay Profile */
.ehdm-audio-p2-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 720px){
  .ehdm-audio-p2-row { grid-template-columns: 1fr; }
}

.ehdm-audio-p2-block {
  background: rgba(232, 184, 75, 0.03);
  border: 1px solid rgba(232, 184, 75, 0.12);
  border-radius: 4px;
  padding: 14px 16px;
}
.ehdm-audio-p2-block:empty { display: none; }

/* Shared Phase 2 typography */
.ehdm-p2-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(232, 184, 75, 0.6);
  margin-bottom: 8px;
}
.ehdm-p2-body {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(240, 230, 210, 0.72);
  font-style: italic;
  margin-top: 6px;
}
.ehdm-p2-note {
  font-size: 11px;
  color: rgba(240, 230, 210, 0.5);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 184, 75, 0.08);
  font-style: italic;
  line-height: 1.5;
}
.ehdm-p2-divergence { color: rgba(232, 184, 75, 0.75); }

/* False Peak Confidence ─── */
.ehdm-fp-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 4px 0;
}
.ehdm-fp-dots {
  font-size: 13px;
  color: rgba(232, 184, 75, 0.9);
  letter-spacing: 2px;
}
.ehdm-fp-word {
  font-size: 14px;
  color: rgba(240, 230, 210, 0.9);
  letter-spacing: 1.8px;
  text-transform: lowercase;
}

/* Perceived Decay Profile ─── */
.ehdm-decay-name {
  font-size: 14px;
  color: rgba(232, 184, 75, 0.9);
  letter-spacing: 1.6px;
  margin: 6px 0 4px 0;
  text-transform: lowercase;
}

/* Section Annotation chips ─── */
.ehdm-audio-annotations-bar {
  margin-bottom: 16px;
}
.ehdm-audio-annotations-bar:empty { display: none; }
.ehdm-annot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ehdm-annot-chip {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(232, 184, 75, 0.06);
  border: 1px solid rgba(232, 184, 75, 0.20);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: rgba(232, 184, 75, 0.80);
  cursor: default;
  font-style: italic;
}

/* Compositional Response suggestions ─── */
.ehdm-audio-suggestions {
  margin-top: 4px;
}
.ehdm-audio-suggestions:empty { display: none; }
.ehdm-sug-item {
  padding: 12px 0 12px 0;
  border-bottom: 1px solid rgba(232, 184, 75, 0.07);
}
.ehdm-sug-item:last-child { border-bottom: none; }
.ehdm-sug-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.ehdm-sug-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(232, 184, 75, 0.8);
  box-shadow: 0 0 5px rgba(232, 184, 75, 0.45);
  flex-shrink: 0;
}
.ehdm-sug-short {
  font-size: 12px;
  letter-spacing: 0.8px;
  color: rgba(240, 230, 210, 0.92);
}
.ehdm-sug-tag {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(232, 184, 75, 0.55);
  border: 1px solid rgba(232, 184, 75, 0.22);
  border-radius: 2px;
  padding: 2px 7px;
  margin-left: auto;
  flex-shrink: 0;
}
.ehdm-sug-body {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(240, 230, 210, 0.70);
  padding-left: 16px;
  font-style: italic;
}


/* ══ css/dream/pneuma.css ══ */
/* ════════════════════════════════════════════════════════════════
   PNEUMA.CSS — Dream System Visual Identity
   ════════════════════════════════════════════════════════════════
   Visual language: liminal, sub-surface, private.
   Not decorative — functional darkness.

   No purple gradients on white. No "AI aesthetic."
   This is the visual equivalent of a signal from beneath —
   low saturation, high intentionality, precise weight.
   ════════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ────────────────────────────────────────────── */
:root {
  --pneuma-bg:          #07040f;
  --pneuma-bg-2:        #0d0918;
  --pneuma-bg-3:        #120e20;
  --pneuma-border:      rgba(100,72,148,0.28);
  --pneuma-border-2:    rgba(138,79,179,0.45);
  --pneuma-text:        rgba(210,185,240,0.92);
  --pneuma-text-2:      rgba(160,135,200,0.70);
  --pneuma-text-3:      rgba(110,90,150,0.55);
  --pneuma-accent:      rgba(138,79,179,1.0);
  --pneuma-accent-glow: rgba(138,79,179,0.25);
  --pneuma-danger:      rgba(220,72,98,0.85);
  --pneuma-gold:        rgba(200,175,80,0.85);
  --pneuma-teal:        rgba(72,200,185,0.85);
  --pneuma-ff:          'Cinzel Decorative', 'Cinzel', 'Trajan Pro', Georgia, serif;
  --pneuma-ff-mono:     'Fira Code', 'IBM Plex Mono', 'Consolas', monospace;
  --pneuma-panel-w:     288px;
  --pneuma-panel-z:     8800;
}

/* ── TOGGLE BUTTON ────────────────────────────────────────────── */
.pneuma-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10,7,18,0.9);
  border: 1px solid var(--pneuma-border);
  color: var(--pneuma-text-2);
  padding: 5px 10px 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--pneuma-ff);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.25s;
  position: relative;
}

.pneuma-toggle-btn:hover {
  border-color: var(--pneuma-border-2);
  color: var(--pneuma-text);
  box-shadow: 0 0 12px var(--pneuma-accent-glow);
}

.pneuma-toggle-btn.open,
.pneuma-toggle-btn.dream-active {
  border-color: var(--pneuma-accent);
  color: rgba(200,160,240,1);
  box-shadow: 0 0 16px var(--pneuma-accent-glow), inset 0 0 8px rgba(138,79,179,0.08);
}

.pneuma-toggle-btn.dream-active {
  animation: pneuma-pulse-ring 2.4s ease-in-out infinite;
}

.pneuma-toggle-glyph {
  font-size: 13px;
  line-height: 1;
  color: var(--pneuma-accent);
  text-shadow: 0 0 8px var(--pneuma-accent-glow);
}

/* ── PANEL CONTAINER ──────────────────────────────────────────── */
.pneuma-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--pneuma-panel-w);
  background: var(--pneuma-bg);
  border-right: 1px solid var(--pneuma-border);
  z-index: var(--pneuma-panel-z);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease;
  box-shadow: 4px 0 32px rgba(0,0,0,0.7), inset -1px 0 0 rgba(138,79,179,0.04);
  font-family: var(--pneuma-ff-mono);
}

.pneuma-panel-closed {
  transform: translateX(calc(-1 * var(--pneuma-panel-w) - 8px));
  opacity: 0;
  pointer-events: none;
}

.pneuma-panel-open {
  transform: translateX(0);
  opacity: 1;
  animation: pneuma-panel-in 0.28s cubic-bezier(0.22,1,0.36,1);
}

/* ── PANEL HEADER ─────────────────────────────────────────────── */
.pneuma-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--pneuma-border);
  background: var(--pneuma-bg-2);
  flex-shrink: 0;
}

.pneuma-panel-glyph {
  font-family: var(--pneuma-ff);
  font-size: 18px;
  color: var(--pneuma-accent);
  text-shadow: 0 0 12px var(--pneuma-accent-glow);
  line-height: 1;
  flex-shrink: 0;
}

.pneuma-panel-title {
  font-family: var(--pneuma-ff);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--pneuma-text);
  text-transform: uppercase;
  flex-shrink: 0;
}

.pneuma-panel-subtitle {
  font-size: 9px;
  color: var(--pneuma-text-3);
  letter-spacing: 1px;
  flex: 1;
  text-align: right;
  text-transform: lowercase;
}

.pneuma-panel-close {
  background: none;
  border: none;
  color: var(--pneuma-text-3);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.pneuma-panel-close:hover { color: var(--pneuma-text); }

/* ── SECTIONS ─────────────────────────────────────────────────── */
.pneuma-section {
  flex-shrink: 0;
  border-bottom: 1px solid var(--pneuma-border);
  padding: 10px 12px 12px;
}

.pneuma-disc-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.pneuma-section-label {
  font-family: var(--pneuma-ff);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--pneuma-text-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pneuma-section-note {
  font-family: var(--pneuma-ff-mono);
  letter-spacing: 0.5px;
  color: var(--pneuma-text-3);
  opacity: 0.7;
  font-size: 8px;
  text-transform: lowercase;
}

/* ── VISUAL ARC ───────────────────────────────────────────────── */
.pneuma-arc-section { padding-bottom: 0; }

.pneuma-arc-container {
  height: 170px;
  position: relative;
  background: #060310;
  border: 1px solid rgba(80,50,120,0.3);
  border-radius: 2px;
  overflow: hidden;
}

#pneuma-arc-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── IDENTITY FIELD ───────────────────────────────────────────── */
.pneuma-identity-dims {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.pneuma-dim-row {
  display: grid;
  grid-template-columns: 46px 1fr 32px;
  align-items: center;
  gap: 6px;
}

.pd-label {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--pneuma-text-3);
  text-transform: uppercase;
  text-align: right;
}

.pd-bar {
  height: 3px;
  background: rgba(60,40,90,0.5);
  border-radius: 2px;
  overflow: hidden;
}

.pd-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--pneuma-accent);
  transition: width 0.6s ease, background 0.4s ease;
}

.pd-val {
  font-size: 8px;
  color: var(--pneuma-text-2);
  text-align: right;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* ── PRESSURE INDICATOR ──────────────────────────────────────── */
.pneuma-pressure-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(80,50,120,0.2);
  margin-top: 4px;
}

.pneuma-pressure-label {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--pneuma-danger);
  opacity: 0.7;
  text-transform: uppercase;
  text-align: right;
}

.pneuma-pressure-bar {
  height: 3px;
  background: rgba(80,20,30,0.4);
  border-radius: 2px;
  overflow: hidden;
}

.pneuma-pressure-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease, background 0.4s ease;
}

.pneuma-pressure-val {
  font-size: 8px;
  color: var(--pneuma-danger);
  opacity: 0.7;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── DREAM MODE CONTROLS ──────────────────────────────────────── */
.pneuma-dream-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.pneuma-dream-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(80,60,100,0.5);
  border: 1px solid rgba(100,80,140,0.4);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}

.pneuma-dream-indicator.active {
  background: var(--pneuma-accent);
  box-shadow: 0 0 6px var(--pneuma-accent-glow);
  animation: pneuma-pulse-ring 1.8s ease-in-out infinite;
}

.pneuma-dream-state-text {
  font-size: 9px;
  color: var(--pneuma-text-2);
  letter-spacing: 0.5px;
}

.pneuma-dream-controls {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.pneuma-btn {
  font-family: var(--pneuma-ff);
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--pneuma-border);
  background: transparent;
  color: var(--pneuma-text-2);
}

.pneuma-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pneuma-btn:not(:disabled):hover {
  border-color: var(--pneuma-border-2);
  color: var(--pneuma-text);
}

.pneuma-btn-primary {
  border-color: rgba(138,79,179,0.5);
  color: rgba(200,140,255,0.9);
}

.pneuma-btn-primary:not(:disabled):hover {
  background: rgba(138,79,179,0.1);
  border-color: var(--pneuma-accent);
  box-shadow: 0 0 8px var(--pneuma-accent-glow);
}

.pneuma-btn-step {
  color: var(--pneuma-teal);
  border-color: rgba(72,200,185,0.3);
}

.pneuma-btn-step:not(:disabled):hover {
  background: rgba(72,200,185,0.06);
  border-color: var(--pneuma-teal);
}

.pneuma-btn-auto.active {
  background: rgba(138,79,179,0.12);
  border-color: var(--pneuma-accent);
  color: rgba(200,140,255,1);
}

.pneuma-btn-deact {
  color: var(--pneuma-danger);
  border-color: rgba(220,72,98,0.3);
}

.pneuma-btn-deact:hover {
  background: rgba(220,72,98,0.06);
  border-color: var(--pneuma-danger);
}

/* ── LAST STEP ────────────────────────────────────────────────── */
.pneuma-dream-last {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pneuma-dream-last-label {
  font-size: 7.5px;
  letter-spacing: 1.5px;
  color: var(--pneuma-text-3);
  text-transform: uppercase;
  flex-shrink: 0;
}

.pneuma-dream-last-text {
  font-size: 9px;
  color: var(--pneuma-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── DISCOVERY LAYER ──────────────────────────────────────────── */
.pneuma-rescan-btn {
  background: none;
  border: none;
  color: var(--pneuma-text-3);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  margin-left: 4px;
  transition: color 0.15s, transform 0.2s;
}

.pneuma-rescan-btn:hover {
  color: var(--pneuma-text);
  transform: rotate(180deg);
}

.pneuma-disc-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(80,50,120,0.4) transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 8px;
}

.pneuma-disc-list::-webkit-scrollbar { width: 3px; }
.pneuma-disc-list::-webkit-scrollbar-track { background: transparent; }
.pneuma-disc-list::-webkit-scrollbar-thumb { background: rgba(80,50,120,0.5); border-radius: 2px; }

/* ── DISCOVERY CARDS ──────────────────────────────────────────── */
.pneuma-disc-card {
  background: var(--pneuma-bg-2);
  border: 1px solid var(--pneuma-border);
  border-radius: 3px;
  padding: 8px 10px;
  transition: border-color 0.2s;
  animation: pneuma-card-in 0.25s ease both;
}

.pneuma-disc-card:hover {
  border-color: var(--pneuma-border-2);
  background: var(--pneuma-bg-3);
}

.pneuma-disc-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.pneuma-disc-icon {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.pneuma-disc-title {
  font-family: var(--pneuma-ff);
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--pneuma-text);
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pneuma-disc-sev {
  font-size: 8px;
  color: var(--pneuma-text-3);
  letter-spacing: 0;
  flex-shrink: 0;
  font-family: monospace;
}

.pneuma-disc-desc {
  font-size: 9px;
  color: var(--pneuma-text-2);
  line-height: 1.5;
  margin-bottom: 3px;
}

.pneuma-disc-detail {
  font-size: 8px;
  color: var(--pneuma-text-3);
  line-height: 1.4;
  margin-bottom: 5px;
}

.pneuma-disc-action {
  font-family: var(--pneuma-ff);
  font-size: 7.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--pneuma-border);
  background: transparent;
  color: var(--pneuma-text-3);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}

.pneuma-disc-action:hover {
  border-color: var(--pneuma-border-2);
  color: var(--pneuma-text);
  background: rgba(138,79,179,0.06);
}

.pneuma-disc-empty {
  font-size: 9px;
  color: var(--pneuma-text-3);
  text-align: center;
  padding: 16px 8px;
  line-height: 1.5;
}

/* ── CATEGORY-SPECIFIC CARD ACCENTS ──────────────────────────── */
.pneuma-disc-unresolved    { border-left: 2px solid rgba(220,72,98,0.5); }
.pneuma-disc-identity_fracture { border-left: 2px solid rgba(240,100,60,0.5); }
.pneuma-disc-latent_path   { border-left: 2px solid rgba(72,200,185,0.5); }
.pneuma-disc-motif_echo    { border-left: 2px solid rgba(200,175,80,0.5); }
.pneuma-disc-unusual_transition { border-left: 2px solid rgba(160,100,240,0.5); }
.pneuma-disc-attractor_field  { border-left: 2px solid rgba(72,200,160,0.5); }
.pneuma-disc-dream_fragment   { border-left: 2px solid rgba(200,140,255,0.5); }

/* ── ALYX IDENTITY SCORE ──────────────────────────────────────── */
.pneuma-alyx-score-row {
  display: grid;
  grid-template-columns: 34px 1fr 32px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(80,50,120,0.2);
}

.pneuma-alyx-label {
  font-family: var(--pneuma-ff);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--pneuma-accent);
  text-align: right;
}

.pneuma-alyx-bar {
  height: 4px;
  background: rgba(60,40,90,0.5);
  border-radius: 2px;
  overflow: hidden;
}

.pneuma-alyx-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s ease, background 0.5s ease;
  background: rgba(80,200,160,0.85);
}

.pneuma-alyx-val {
  font-size: 8px;
  color: var(--pneuma-text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── WEATHER ROW ──────────────────────────────────────────────── */
.pneuma-weather-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(80,50,120,0.2);
  margin-top: 4px;
}

.pneuma-weather-icon {
  font-size: 11px;
  color: var(--pneuma-teal);
  flex-shrink: 0;
  transition: opacity 0.4s;
}

.pneuma-weather-label {
  font-size: 9px;
  color: var(--pneuma-text-2);
  letter-spacing: 0.5px;
  flex: 1;
}

.pneuma-night-badge {
  font-family: var(--pneuma-ff);
  font-size: 7.5px;
  letter-spacing: 1.5px;
  color: rgba(140,100,200,0.7);
  border: 1px solid rgba(140,100,200,0.3);
  border-radius: 2px;
  padding: 1px 5px;
  animation: pneuma-pulse-ring 3s ease-in-out infinite;
}

/* ── RECURSIVE DREAMING DEPTH INDICATOR ─────────────────────── */
.pneuma-recursion-depth {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 7.5px;
  color: var(--pneuma-gold);
  opacity: 0.8;
}

/* ── NARRATIVE LABEL ──────────────────────────────────────────── */
#pneuma-narrative-label {
  font-family: var(--pneuma-ff-mono);
  font-size: 7.5px;
  color: rgba(160,135,200,0.6);
  letter-spacing: 0.3px;
  text-transform: lowercase;
  font-style: italic;
}
@media (max-width: 900px) {
  .pneuma-panel {
    width: 100vw;
    max-width: 320px;
  }
}

/* ── ORGANISM STATUS CHIPS ────────────────────────────────────── */
.pneuma-organism-row {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pneuma-org-chip {
  font-family: var(--pneuma-ff-mono);
  font-size: 8.5px;
  color: var(--pneuma-text-3);
  background: rgba(40,25,65,0.6);
  border: 1px solid var(--pneuma-border);
  border-radius: 2px;
  padding: 2px 6px;
  letter-spacing: 0.5px;
  transition: color 0.3s, border-color 0.3s;
  cursor: default;
}

.pneuma-org-chip:hover {
  border-color: var(--pneuma-border-2);
  color: var(--pneuma-text-2);
}

#pneuma-org-scars    { color: rgba(220,80,100,0.65); }
#pneuma-org-branches { color: rgba(200,175,80,0.65); }
#pneuma-org-wells    { color: rgba(72,220,160,0.65); }

/* ── FEEDBACK MODAL ───────────────────────────────────────────── */
.alyx-fb-modal {
  background: var(--pneuma-bg-2);
  border: 1px solid var(--pneuma-border-2);
  border-radius: 6px;
  padding: 16px 20px;
  width: min(380px, 92vw);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 24px var(--pneuma-accent-glow);
}

.alyx-fb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.alyx-fb-glyph {
  font-family: var(--pneuma-ff);
  font-size: 20px;
  color: var(--pneuma-accent);
  text-shadow: 0 0 10px var(--pneuma-accent-glow);
  flex-shrink: 0;
}

.alyx-fb-title {
  font-family: var(--pneuma-ff);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--pneuma-text);
  text-transform: uppercase;
}

.alyx-fb-sub {
  font-size: 8.5px;
  color: var(--pneuma-text-3);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.alyx-fb-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--pneuma-text-3);
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  transition: color 0.15s;
}

.alyx-fb-dismiss:hover { color: var(--pneuma-text-2); }

.alyx-fb-stars {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 4px;
}

.alyx-fb-star {
  font-family: var(--pneuma-ff);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--pneuma-border);
  background: transparent;
  color: var(--pneuma-text-3);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
  text-align: center;
}

.alyx-fb-star:hover,
.alyx-fb-star.selected {
  border-color: var(--pneuma-accent);
  color: rgba(200,140,255,0.95);
  background: rgba(138,79,179,0.1);
}

.alyx-fb-labels {
  display: flex;
  font-size: 7.5px;
  color: var(--pneuma-text-3);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.alyx-fb-note-row {
  display: flex;
  gap: 6px;
}

.alyx-fb-note {
  flex: 1;
  background: rgba(10,6,20,0.8);
  border: 1px solid var(--pneuma-border);
  color: var(--pneuma-text);
  padding: 5px 8px;
  border-radius: 2px;
  font-family: var(--pneuma-ff-mono);
  font-size: 9px;
  outline: none;
}

.alyx-fb-note:focus { border-color: var(--pneuma-border-2); }

.alyx-fb-submit {
  font-family: var(--pneuma-ff);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(138,79,179,0.5);
  background: rgba(138,79,179,0.12);
  color: rgba(200,140,255,0.9);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.alyx-fb-submit:disabled { opacity: 0.3; cursor: not-allowed; }
.alyx-fb-submit:not(:disabled):hover {
  background: rgba(138,79,179,0.2);
  border-color: var(--pneuma-accent);
}

/* ── DISCOVERY STATS + COHERENCE THREAD ─────────────────────── */
.pneuma-disc-stats {
  font-family: var(--pneuma-ff-mono);
  font-size: 7.5px;
  color: var(--pneuma-text-3);
  letter-spacing: 0.3px;
  font-style: italic;
}

.pneuma-coherence-thread {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 4px 8px;
  background: rgba(200,175,80,0.04);
  border: 1px solid rgba(200,175,80,0.15);
  border-radius: 2px;
}

.pct-label {
  font-family: var(--pneuma-ff);
  font-size: 7.5px;
  letter-spacing: 2px;
  color: rgba(200,175,80,0.5);
  text-transform: uppercase;
  flex-shrink: 0;
}

.pct-words {
  font-family: var(--pneuma-ff-mono);
  font-size: 8.5px;
  color: rgba(200,175,80,0.8);
  letter-spacing: 0.5px;
}

/* ── PROMPT SCORE BADGE ───────────────────────────────────────── */
.alyx-prompt-score {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(8,4,16,0.7);
  border: 1px solid rgba(80,50,120,0.25);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  font-family: var(--pneuma-ff-mono, monospace);
  user-select: none;
}

.aps-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(80,80,100,0.5);
  flex-shrink: 0;
  transition: background 0.4s, box-shadow 0.4s;
}

.aps-val {
  font-size: 11px;
  font-weight: 600;
  color: rgba(160,140,200,0.8);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  transition: color 0.4s;
}

.aps-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(120,100,160,0.6);
  transition: color 0.4s;
}

.aps-breakdown {
  margin-left: auto;
  font-size: 8px;
  color: rgba(100,80,140,0.5);
  cursor: help;
}

/* ── DIFF MODAL ───────────────────────────────────────────────── */
.alyx-diff-modal {
  background: var(--pneuma-bg-2, #0d0918);
  border: 1px solid var(--pneuma-border-2, rgba(138,79,179,0.45));
  border-radius: 6px;
  padding: 18px 22px;
  width: min(560px, 94vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.8);
}

.alyx-diff-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.alyx-diff-glyph {
  font-size: 20px;
  color: rgba(80,200,200,0.9);
  font-family: monospace;
  flex-shrink: 0;
}

.alyx-diff-title {
  font-family: var(--pneuma-ff, serif);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--pneuma-text, #e8e8ef);
  text-transform: uppercase;
}

.alyx-diff-sub {
  font-size: 8.5px;
  color: var(--pneuma-text-3, #888);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.alyx-diff-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--pneuma-text-3, #888);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
  transition: color 0.15s;
}
.alyx-diff-close:hover { color: var(--pneuma-text, #e8e8ef); }

.alyx-diff-summary {
  font-size: 10px;
  color: rgba(80,200,200,0.8);
  font-family: var(--pneuma-ff-mono, monospace);
  padding: 7px 10px;
  background: rgba(80,200,200,0.05);
  border: 1px solid rgba(80,200,200,0.15);
  border-radius: 3px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.alyx-diff-rows {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(80,50,120,0.4) transparent;
}

.alyx-diff-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 8px;
  background: var(--pneuma-bg, #07040f);
  border: 1px solid var(--pneuma-border, rgba(100,72,148,0.28));
  border-radius: 2px;
}

.alyx-diff-cat {
  font-family: var(--pneuma-ff, serif);
  font-size: 7.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 60px;
}

.alyx-diff-desc {
  font-size: 9px;
  color: var(--pneuma-text-2, #aaa);
  font-family: var(--pneuma-ff-mono, monospace);
  line-height: 1.4;
}

.alyx-diff-empty {
  font-size: 9px;
  color: var(--pneuma-text-3, #888);
  text-align: center;
  padding: 16px;
}

.alyx-diff-version-btn {
  font-family: var(--pneuma-ff, serif);
  font-size: 7.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid rgba(80,200,200,0.3);
  background: transparent;
  color: rgba(80,200,200,0.7);
  border-radius: 2px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.15s;
}
.alyx-diff-version-btn:hover {
  background: rgba(80,200,200,0.08);
  border-color: rgba(80,200,200,0.7);
  color: rgba(80,200,200,1);
}


/* ══ css/atp/atp-texture-blend.css ══ */
/* ════════════════════════════════════════════════════════════════
   TEXTURE + BLEND — EHDarkMuse
   ════════════════════════════════════════════════════════════════
   Progressive-disclosure creative layers for emotional color
   grading (Texture) and genre hybridization (Blend).

   Design language:
   · Cinematic sliders — no browser range inputs
   · Thin tracks, subdued handles, soft fills
   · Atmospheric expand/collapse with graceful transitions
   · All controls feel optional, discoverable, elegant
   · When everything is at default: visually near-invisible
   ════════════════════════════════════════════════════════════════ */

/* ── SHARED: sub-section toggle row ─────────────────────────────── */
.ehdm-sub-section {
  border-bottom: 1px solid var(--ehdm-border-1);
  overflow: hidden;
}

.ehdm-sub-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.ehdm-sub-toggle:hover {
  background: rgba(255,255,255,.025);
}

.ehdm-sub-toggle-label {
  flex: 1;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  transition: color .2s;
}
.ehdm-sub-section.is-open .ehdm-sub-toggle-label,
.ehdm-sub-section.is-active .ehdm-sub-toggle-label {
  color: rgba(255,255,255,.50);
}
.ehdm-sub-section.is-active:not(.is-open) .ehdm-sub-toggle-label {
  color: var(--ehdm-purple-2);
}

.ehdm-sub-toggle-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ehdm-purple);
  box-shadow: 0 0 6px rgba(139,92,246,.6);
  opacity: 0;
  transition: opacity .25s;
  flex-shrink: 0;
}
.ehdm-sub-section.is-active .ehdm-sub-toggle-dot {
  opacity: 1;
}

.ehdm-sub-toggle-chevron {
  font-size: 9px;
  color: rgba(255,255,255,.22);
  transition: transform .25s cubic-bezier(.4,0,.2,1), color .2s;
  flex-shrink: 0;
  line-height: 1;
}
.ehdm-sub-section.is-open .ehdm-sub-toggle-chevron {
  transform: rotate(90deg);
  color: rgba(255,255,255,.42);
}

.ehdm-sub-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.4,0,.2,1);
}
.ehdm-sub-section.is-open .ehdm-sub-body {
  max-height: 500px;
}

/* ══════════════════════════════════════════════════════════════════
   TEXTURE SYSTEM
   ══════════════════════════════════════════════════════════════════ */
#ehdmTextureSection {
  padding: 0;
}

.tex-inner {
  padding: 4px 14px 12px;
}

/* ── Directions bar ─────────────────────────────────────────────── */
.tex-dir-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tex-dir-btn {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  background: none;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.tex-dir-btn:hover {
  color: var(--ehdm-purple-2);
  border-color: var(--ehdm-purple-mid);
  background: var(--ehdm-purple-dim);
}

.tex-reset-btn {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.18);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 4px;
  transition: color .15s;
}
.tex-reset-btn:hover { color: rgba(255,255,255,.5); }
.tex-reset-btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ── Axis rows ──────────────────────────────────────────────────── */
.tex-axis {
  margin-bottom: 9px;
  position: relative;
}
.tex-axis:last-child { margin-bottom: 0; }

.tex-axis-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tex-axis-name {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
}

.tex-axis-poles {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}

.tex-axis-pole {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 7.5px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.18);
  text-transform: lowercase;
  transition: color .15s;
}

/* ── Cinematic track ────────────────────────────────────────────── */
.tex-track-area {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
}

.tex-track {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.10);
  border-radius: 1px;
}

/* Center tick mark */
.tex-track::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -4px;
  width: 1px;
  height: 9px;
  background: rgba(255,255,255,.16);
}

.tex-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5px;
  border-radius: 1px;
  pointer-events: none;
  transition: opacity .1s;
  /* width and left are set via JS inline style */
}
.tex-fill.tex-fill--pos {
  background: linear-gradient(90deg, rgba(34,211,238,.35), rgba(34,211,238,.7));
}
.tex-fill.tex-fill--neg {
  background: linear-gradient(90deg, rgba(139,92,246,.7), rgba(139,92,246,.35));
}

.tex-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.15);
  pointer-events: none;
  transition: background .15s, box-shadow .15s, transform .1s;
  /* left is set via JS inline style */
}

/* Handle states */
.tex-track-area:hover .tex-handle {
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.3), 0 0 0 1.5px rgba(255,255,255,.3);
}
.tex-track-area.is-dragging .tex-handle {
  background: var(--ehdm-cyan-2);
  box-shadow: 0 0 12px rgba(34,211,238,.5), 0 0 0 2px rgba(34,211,238,.25);
  transform: translate(-50%, -50%) scale(1.15);
}
.tex-track-area.is-dragging .tex-fill {
  opacity: 1;
}

/* ── Seeding animation — handle pulses purple when seeded ──────── */
@keyframes texSeedPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,.7); background: var(--ehdm-purple-2); }
  60%  { box-shadow: 0 0 0 8px rgba(139,92,246,0); background: #fff; }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); background: rgba(255,255,255,.72); }
}
.tex-handle.is-seeding {
  animation: texSeedPulse .55s ease-out forwards;
}

/* ── Lethe mode — axis relabels with subtle tint ───────────────── */
.tex-axis.lethe-mode .tex-axis-name { color: rgba(167,139,250,.55); }
.tex-axis.lethe-mode .tex-axis-pole { color: rgba(167,139,250,.25); }
.tex-axis.lethe-mode .tex-track-area:hover .tex-handle {
  background: var(--ehdm-purple-2);
  box-shadow: 0 0 8px rgba(139,92,246,.4), 0 0 0 1.5px rgba(139,92,246,.3);
}

/* ══════════════════════════════════════════════════════════════════
   DIRECTIONS PANEL — floating overlay to the right of sidebar
   ══════════════════════════════════════════════════════════════════ */
#ehdmDirectionsOverlay {
  position: fixed;
  inset: 0;
  z-index: 98000;
  display: none;
}
#ehdmDirectionsOverlay.is-open { display: block; }

#ehdmDirectionsPanel {
  position: fixed;
  left: var(--lsidebar-w, 210px);
  top: 0;
  bottom: 0;
  width: 240px;
  background: var(--ehdm-bg-panel, #131321);
  border-right: 1px solid var(--ehdm-border-2);
  box-shadow: 4px 0 32px rgba(0,0,0,.6);
  z-index: 98001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-8px);
  opacity: 0;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s;
}
#ehdmDirectionsOverlay.is-open #ehdmDirectionsPanel {
  transform: translateX(0);
  opacity: 1;
}

.dir-panel-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ehdm-border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.dir-panel-title {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.dir-panel-close {
  font-size: 13px;
  color: rgba(255,255,255,.3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  transition: color .12s;
  line-height: 1;
}
.dir-panel-close:hover { color: rgba(255,255,255,.7); }

.dir-panel-sub {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.22);
  text-transform: uppercase;
  padding: 8px 16px 4px;
  flex-shrink: 0;
}

.dir-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}

.dir-card {
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--ehdm-border-1);
  border-radius: 6px;
  background: var(--ehdm-bg-card, #1a1a2c);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  position: relative;
  overflow: hidden;
}
.dir-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--dir-accent, var(--ehdm-purple));
  opacity: .4;
  transition: opacity .15s;
}
.dir-card:hover {
  border-color: var(--ehdm-border-3);
  background: var(--ehdm-bg-elev, #21213a);
  transform: translateX(2px);
}
.dir-card:hover::before { opacity: .8; }

.dir-card.is-applying {
  animation: dirApply .5s ease-out;
}
@keyframes dirApply {
  0%   { background: rgba(139,92,246,.18); border-color: var(--ehdm-purple-mid); }
  100% { background: var(--ehdm-bg-card); border-color: var(--ehdm-border-1); }
}

.dir-card-name {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.78);
  margin-bottom: 3px;
  text-transform: uppercase;
}
.dir-card-desc {
  font-size: 10px;
  color: rgba(255,255,255,.32);
  line-height: 1.4;
}
.dir-card-tags {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.dir-card-tag {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 7px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 2px;
  padding: 1px 5px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════
   BLEND SYSTEM
   ══════════════════════════════════════════════════════════════════ */
#ehdmBlendSection {
  padding: 0;
}

.blend-inner {
  padding: 4px 14px 12px;
}

/* ── Secondary genre slot ────────────────────────────────────────── */
.blend-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.blend-add-label {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 8.5px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
  flex: 1;
}

.blend-add-btn {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.blend-add-btn:hover {
  color: var(--ehdm-cyan-2);
  border-color: var(--ehdm-cyan-mid);
  background: var(--ehdm-cyan-dim);
  border-style: solid;
}

/* ── Active blend view ──────────────────────────────────────────── */
.blend-active {
  display: none;
}
.blend-active.is-visible {
  display: block;
}

/* Two genre chips with ratio between them */
.blend-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.blend-chip {
  flex: 1;
  min-width: 0;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  padding: 5px 8px;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  transition: border-color .15s;
}
.blend-chip.is-primary { border-color: var(--ehdm-purple-mid); }
.blend-chip.is-secondary { cursor: pointer; }
.blend-chip.is-secondary:hover {
  border-color: var(--ehdm-border-3);
  background: rgba(255,255,255,.06);
}

.blend-chip-pct {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  color: rgba(255,255,255,.45);
  flex-shrink: 0;
}
.blend-chip.is-primary .blend-chip-pct {
  color: var(--ehdm-purple-2);
}

.blend-chip-name {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-transform: uppercase;
}
.blend-chip.is-primary .blend-chip-name {
  color: rgba(255,255,255,.78);
}

.blend-chip-remove {
  font-size: 9px;
  color: rgba(255,255,255,.2);
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color .12s;
  line-height: 1;
}
.blend-chip-remove:hover { color: rgba(255,255,255,.6); }

/* ── Blend ratio track ──────────────────────────────────────────── */
.blend-ratio-wrap {
  margin-bottom: 8px;
  position: relative;
  padding: 0 2px;
}

.blend-ratio-track {
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  cursor: ew-resize;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

.blend-ratio-fill-a {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--ehdm-purple-mid), rgba(139,92,246,.35));
  border-radius: 2px;
  transition: width .1s;
  pointer-events: none;
}

.blend-ratio-fill-b {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, rgba(34,211,238,.25), var(--ehdm-cyan-mid));
  border-radius: 2px;
  transition: width .1s;
  pointer-events: none;
}

.blend-ratio-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.80);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.15);
  pointer-events: none;
  transition: background .12s;
}
.blend-ratio-track:hover .blend-ratio-handle {
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.25);
}
.blend-ratio-track.is-dragging .blend-ratio-handle {
  background: var(--ehdm-cyan-2);
  box-shadow: 0 0 10px rgba(34,211,238,.5);
}

/* ── Compatibility indicator ────────────────────────────────────── */
.blend-compat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0 2px;
}

.blend-compat-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
}
.blend-compat-dot.is-green {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52,211,153,.5);
}
.blend-compat-dot.is-amber {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,.4);
}
.blend-compat-dot.is-red {
  background: rgba(248,113,113,.7);
  box-shadow: 0 0 6px rgba(248,113,113,.3);
}

.blend-compat-label {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 8px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
  transition: color .25s;
}
.blend-compat.is-green .blend-compat-label { color: rgba(52,211,153,.55); }
.blend-compat.is-amber .blend-compat-label { color: rgba(251,191,36,.5); }
.blend-compat.is-red   .blend-compat-label { color: rgba(248,113,113,.5); }

/* ── Blend seeding indicator ────────────────────────────────────── */
.blend-seed-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity .3s;
}
.blend-seed-indicator.is-visible { opacity: 1; }

.blend-seed-text {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 7.5px;
  letter-spacing: .5px;
  color: rgba(139,92,246,.55);
  text-transform: uppercase;
}

@keyframes blendSeedDots {
  0%, 20%  { opacity: .2; }
  50%      { opacity: 1; }
  80%, 100%{ opacity: .2; }
}
.blend-seed-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ehdm-purple-2);
  animation: blendSeedDots 1.2s ease-in-out infinite;
}
.blend-seed-dot:nth-child(2) { animation-delay: .2s; }
.blend-seed-dot:nth-child(3) { animation-delay: .4s; }

/* ── Genre picker for secondary ─────────────────────────────────── */
#ehdmSecondaryPicker {
  position: fixed;
  background: var(--ehdm-bg-panel, #131321);
  border: 1px solid var(--ehdm-border-2);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 97000;
  width: 220px;
  max-height: 300px;
  overflow: hidden;
  flex-direction: column;
  display: none; /* hidden until .is-open */
}
#ehdmSecondaryPicker.is-open { display: flex; }

.sec-picker-search {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--ehdm-border-1);
  flex-shrink: 0;
}
.sec-picker-input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--ehdm-text, #e8e6ee);
  outline: none;
  transition: border-color .15s;
}
.sec-picker-input:focus { border-color: var(--ehdm-purple-mid); }
.sec-picker-input::placeholder { color: rgba(255,255,255,.2); }

.sec-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}

.sec-picker-item {
  padding: 6px 14px;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  transition: color .12s, background .12s;
}
.sec-picker-item:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.04);
}
.sec-picker-item-icon { font-size: 12px; flex-shrink: 0; }

/* ── Texture status summary in compact (non-open) state ─────────── */
.tex-status-line {
  font-size: 8.5px;
  color: rgba(139,92,246,.55);
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  letter-spacing: .5px;
  padding: 0 14px 6px;
  display: none;
  line-height: 1.4;
}
.ehdm-sub-section.is-active:not(.is-open) .tex-status-line {
  display: block;
}


/* ══ css/atp/atp-assist.css ══ */
/* ════════════════════════════════════════════════════════════════
   EHDM ASSIST — Creative-assistance layer CSS
   ════════════════════════════════════════════════════════════════
   Covers: Directions panel, Morphing, Quick Generate,
           Micro-copy tooltips, Snapshot visibility,
           Why-This reasoning annotations.

   Design law: none of this should be visible until needed.
   Default state = no visual noise added to the app.
   ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   DIRECTIONS PANEL
   ══════════════════════════════════════════════════════════════════ */
#ehdmDirOverlay {
  position: fixed;
  inset: 0;
  z-index: 96000;
  display: none;
  background: rgba(6, 6, 12, .45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#ehdmDirOverlay.is-open { display: block; }

#ehdmDirPanel {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 304px;
  background: var(--ehdm-bg-deep, #0c0c14);
  border-right: 1px solid var(--ehdm-border-2);
  box-shadow: 6px 0 40px rgba(0,0,0,.7);
  z-index: 96001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
#ehdmDirOverlay.is-open #ehdmDirPanel {
  transform: translateX(0);
}

/* ── Panel header ──────────────────────────────────────────────── */
.dir-panel-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--ehdm-border-1);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dir-panel-title-group { flex: 1; min-width: 0; }
.dir-panel-title {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  display: block;
  margin-bottom: 3px;
}
.dir-panel-sub {
  font-size: 11px;
  color: rgba(255,255,255,.30);
  line-height: 1.4;
}
.dir-panel-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.28);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  transition: color .12s;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.dir-panel-close:hover { color: rgba(255,255,255,.7); }

/* ── Tab switcher (Directions / Morph) ─────────────────────────── */
.dir-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--ehdm-border-1);
  flex-shrink: 0;
}
.dir-tab-btn {
  flex: 1;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.30);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 8px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.dir-tab-btn.is-active {
  color: var(--ehdm-purple-2);
  border-bottom-color: var(--ehdm-purple);
}
.dir-tab-btn:hover:not(.is-active) { color: rgba(255,255,255,.55); }

/* ── Direction card grid ───────────────────────────────────────── */
.dir-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.07) transparent;
}

.dir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Direction card ────────────────────────────────────────────── */
.dir-card {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--ehdm-border-1);
  background: var(--ehdm-bg-card, #1a1a2c);
  padding: 10px 11px 9px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s, transform .12s;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}
.dir-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2.5px;
  background: var(--dir-accent, var(--ehdm-purple));
  opacity: .5;
  transition: opacity .15s;
}
.dir-card:hover {
  border-color: rgba(255,255,255,.12);
  background: var(--ehdm-bg-elev, #21213a);
  transform: translateY(-1px);
}
.dir-card:hover::before { opacity: .9; }

.dir-card.is-applying {
  animation: dirCardApply .6s ease-out;
}
@keyframes dirCardApply {
  0%   { background: rgba(139,92,246,.20); border-color: var(--ehdm-purple-mid); }
  100% { background: var(--ehdm-bg-card); border-color: var(--ehdm-border-1); }
}

.dir-card-name {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  line-height: 1.3;
  margin-bottom: 5px;
}
.dir-card-sub {
  font-size: 10px;
  color: rgba(255,255,255,.40);
  line-height: 1.45;
  flex: 1;
}
.dir-card-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.dir-card-tag {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 6.5px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 2px;
  padding: 1px 5px;
  text-transform: uppercase;
}

/* ── Why-This hover reveal on cards ────────────────────────────── */
.dir-card-why {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 18, .92);
  border-radius: 5px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.dir-card:hover .dir-card-why { opacity: 1; }

.dir-card-why-label {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--ehdm-purple-2);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dir-card-why-text {
  font-size: 10px;
  color: rgba(255,255,255,.60);
  line-height: 1.5;
  font-style: italic;
}

/* ── Quick-generate from directions ──────────────────────────────*/
.dir-qg-bar {
  padding: 10px 12px;
  border-top: 1px solid var(--ehdm-border-1);
  flex-shrink: 0;
}
.dir-qg-btn {
  width: 100%;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ehdm-purple-2);
  background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(109,63,223,.06));
  border: 1px solid var(--ehdm-purple-mid);
  border-radius: 5px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: center;
}
.dir-qg-btn:hover {
  background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(109,63,223,.14));
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   MORPH VIEW (within the directions panel)
   ══════════════════════════════════════════════════════════════════ */
.morph-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.morph-cards-row {
  display: flex;
  gap: 8px;
  padding: 12px 12px 8px;
  flex-shrink: 0;
}

.morph-slot {
  flex: 1;
  min-width: 0;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  padding: 10px 10px 8px;
  min-height: 90px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.morph-slot:hover {
  border-color: var(--ehdm-purple-mid);
  background: var(--ehdm-purple-dim);
}
.morph-slot.is-filled {
  border-style: solid;
  border-color: rgba(255,255,255,.10);
  background: var(--ehdm-bg-card);
}
.morph-slot.is-filled:hover {
  border-color: rgba(255,255,255,.18);
  background: var(--ehdm-bg-elev);
}
.morph-slot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 60px;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.22);
  text-transform: uppercase;
  text-align: center;
  gap: 4px;
}
.morph-slot-content { display: none; }
.morph-slot.is-filled .morph-slot-empty { display: none; }
.morph-slot.is-filled .morph-slot-content {
  display: block;
}
.morph-slot-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--slot-accent, var(--ehdm-purple));
  opacity: .6;
}
.morph-slot-name {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 4px;
  line-height: 1.3;
}
.morph-slot-sub {
  font-size: 9px;
  color: rgba(255,255,255,.35);
  line-height: 1.4;
}
.morph-slot-change {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.25);
  text-transform: uppercase;
  margin-top: 6px;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Morph rail ─────────────────────────────────────────────────── */
.morph-rail-wrap {
  padding: 6px 12px 4px;
  flex-shrink: 0;
}
.morph-rail-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.morph-rail-label {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 7.5px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
}

.morph-rail {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  position: relative;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  overflow: visible;
}
.morph-rail-fill-a {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--ehdm-purple-mid), rgba(139,92,246,.25));
  border-radius: 2px;
  pointer-events: none;
}
.morph-rail-fill-b {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, rgba(34,211,238,.20), var(--ehdm-cyan-mid));
  border-radius: 2px;
  pointer-events: none;
}
.morph-rail-handle {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: background .12s;
}
.morph-rail:hover .morph-rail-handle {
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.morph-rail.is-dragging .morph-rail-handle {
  background: var(--ehdm-cyan-2);
  box-shadow: 0 0 12px rgba(34,211,238,.5);
}

/* ── Morph description and apply ──────────────────────────────── */
.morph-desc {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.morph-desc-text {
  font-size: 10.5px;
  color: rgba(255,255,255,.35);
  line-height: 1.6;
  font-style: italic;
  min-height: 40px;
}

.morph-apply-row {
  padding: 10px 12px;
  border-top: 1px solid var(--ehdm-border-1);
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}
.morph-apply-btn {
  flex: 1;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ehdm-cyan-2);
  background: linear-gradient(180deg, var(--ehdm-cyan-dim), rgba(34,211,238,.04));
  border: 1px solid var(--ehdm-cyan-mid);
  border-radius: 5px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: center;
}
.morph-apply-btn:hover {
  background: linear-gradient(180deg, rgba(34,211,238,.18), rgba(34,211,238,.08));
  color: #fff;
}
.morph-apply-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ── Morph select picker overlay ──────────────────────────────── */
.morph-picker-overlay {
  position: absolute;
  inset: 0;
  background: var(--ehdm-bg-deep);
  z-index: 2;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.07) transparent;
  display: none;
}
.morph-picker-overlay.is-open { display: block; }
.morph-picker-title {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.40);
  text-transform: uppercase;
  padding: 8px 4px 10px;
}

/* ══════════════════════════════════════════════════════════════════
   QUICK GENERATE — Sidebar entry point
   ══════════════════════════════════════════════════════════════════ */
#ehdmQuickGenSection {
  padding: 0;
  border-bottom: 1px solid var(--ehdm-border-1);
}

.qg-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px;
  cursor: pointer;
  transition: background .12s;
  user-select: none;
}
.qg-toggle:hover { background: rgba(255,255,255,.025); }

.qg-toggle-gem {
  font-size: 11px;
  color: var(--ehdm-purple-2);
  flex-shrink: 0;
  line-height: 1;
}
.qg-toggle-label {
  flex: 1;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.qg-toggle-arrow {
  font-size: 9px;
  color: rgba(255,255,255,.22);
  transition: transform .2s;
}
#ehdmQuickGenSection.is-open .qg-toggle-arrow {
  transform: rotate(90deg);
}

.qg-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.4,0,.2,1);
}
#ehdmQuickGenSection.is-open .qg-body { max-height: 220px; }

.qg-inner { padding: 4px 14px 12px; }

.qg-suggestion {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  margin-bottom: 10px;
  line-height: 1.5;
}
.qg-suggestion strong {
  color: rgba(255,255,255,.65);
  font-weight: normal;
  font-style: italic;
}

.qg-actions { display: flex; flex-direction: column; gap: 6px; }

.qg-draft-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid var(--ehdm-purple-mid);
  background: linear-gradient(180deg, rgba(139,92,246,.12), rgba(109,63,223,.05));
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
  width: 100%;
}
.qg-draft-btn:hover {
  background: linear-gradient(180deg, rgba(139,92,246,.20), rgba(109,63,223,.10));
  border-color: var(--ehdm-purple-2);
}
.qg-draft-icon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.qg-draft-text {
  flex: 1;
  min-width: 0;
}
.qg-draft-name {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ehdm-purple-2);
  display: block;
  margin-bottom: 1px;
}
.qg-draft-sub {
  font-size: 9px;
  color: rgba(255,255,255,.30);
}

.qg-browse-btn {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  background: none;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
  width: 100%;
  text-align: center;
}
.qg-browse-btn:hover {
  color: rgba(255,255,255,.6);
  border-color: rgba(255,255,255,.18);
}

/* ── Composing overlay (fullscreen, brief) ────────────────────── */
#ehdmComposingOverlay {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: rgba(6, 6, 12, .75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
}
#ehdmComposingOverlay.is-visible { display: flex; }

.composing-label {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.composing-direction {
  font-size: 11px;
  color: rgba(255,255,255,.30);
  font-style: italic;
  text-align: center;
  max-width: 300px;
}

@keyframes composingPulse {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1; }
}
.composing-dots { display: flex; gap: 6px; margin-top: 6px; }
.composing-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ehdm-purple-2);
  animation: composingPulse 1.4s ease-in-out infinite;
}
.composing-dot:nth-child(2) { animation-delay: .2s; }
.composing-dot:nth-child(3) { animation-delay: .4s; }

/* ══════════════════════════════════════════════════════════════════
   MICRO-COPY TOOLTIPS
   ══════════════════════════════════════════════════════════════════ */
#ehdmTooltip {
  position: fixed;
  z-index: 99500;
  background: var(--ehdm-bg-deepest, #06060c);
  border: 1px solid var(--ehdm-border-2);
  border-radius: 6px;
  padding: 9px 12px;
  width: 210px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s, transform .14s;
}
#ehdmTooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ehdm-tip-title {
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ehdm-purple-2);
  margin-bottom: 5px;
  display: block;
}
.ehdm-tip-body {
  font-size: 10.5px;
  color: rgba(255,255,255,.50);
  line-height: 1.5;
}

/* ── Tooltip trigger marker (invisible, on hoverable elements) ──── */
[data-ehdm-tip] { cursor: default; }

/* ── Hover trigger dot on Texture axis labels ────────────────────*/
.tex-axis-name {
  position: relative;
  cursor: help;
}
.tex-axis-name::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  margin-left: 5px;
  vertical-align: middle;
  transition: background .12s;
}
.tex-axis-name:hover::after {
  background: var(--ehdm-purple-2);
}

/* ══════════════════════════════════════════════════════════════════
   SNAPSHOT / VERSION MEMORY VISIBILITY
   ══════════════════════════════════════════════════════════════════ */

/* ── Undo/Redo button enhancement ───────────────────────────────── */
.ehdm-snap-counter {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ehdm-purple);
  border: 1.5px solid var(--ehdm-bg-deep);
  font-size: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  pointer-events: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
}
.ehdm-snap-counter.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Version History button pulse ─────────────────────────────── */
@keyframes snapNewPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}
.ehdm-hist-new {
  animation: snapNewPulse .7s ease-out;
}

/* ── Enhanced history items — diff language ─────────────────────── */
.ehdm-snap-diff {
  font-size: 9px;
  color: rgba(139,92,246,.65);
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  letter-spacing: .5px;
  margin-top: 3px;
  display: block;
}
.ehdm-snap-diff.is-reset { color: rgba(248,113,113,.55); }
.ehdm-snap-diff.is-compose { color: rgba(52,211,153,.55); }
.ehdm-snap-diff.is-genre { color: rgba(34,211,238,.55); }

/* ── Snapshot mini-timeline under undo/redo ─────────────────────── */
.ehdm-snap-timeline {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 2px;
  margin-top: 3px;
}
.ehdm-snap-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
  transition: background .15s, transform .15s;
  cursor: pointer;
}
.ehdm-snap-dot.is-current {
  background: var(--ehdm-purple-2);
  box-shadow: 0 0 5px rgba(139,92,246,.5);
  transform: scale(1.3);
}
.ehdm-snap-dot:hover:not(.is-current) {
  background: rgba(255,255,255,.35);
}

/* ── Snapshot wrap for topbar undo group ──────────────────────── */
.ehdm-snap-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}
.ehdm-snap-btnrow {
  display: flex;
  gap: 0;
}

/* ══════════════════════════════════════════════════════════════════
   WHY THIS — reasoning annotations
   ══════════════════════════════════════════════════════════════════ */
.ehdm-why-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-cinzel, 'Cinzel', serif);
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 2px;
  padding: 1px 6px;
  cursor: help;
  transition: color .12s, border-color .12s;
}
.ehdm-why-pill:hover {
  color: var(--ehdm-purple-2);
  border-color: var(--ehdm-purple-mid);
}

/* ── Why-This floating note (appears near inspector) ─────────── */
.ehdm-why-note {
  font-size: 10px;
  color: rgba(255,255,255,.30);
  line-height: 1.5;
  font-style: italic;
  padding: 6px 0 2px;
  border-top: 1px solid rgba(255,255,255,.05);
  margin-top: 6px;
}
.ehdm-why-note::before {
  content: '✦ ';
  color: var(--ehdm-purple-2);
  font-style: normal;
  font-size: 8px;
}

/* ── Quick Actions "Directions" entry ────────────────────────── */
.qa-btn2.qa-directions-btn .qa2-icon {
  color: var(--ehdm-purple-2);
}