/* ═══════════════════════════════════════════════
   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)}
.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)}
/* v2.20: 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}
/* v2.20: kill the legacy 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}
.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 ──
   v2.21 (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); }

/* ── 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 celdas vacías
   ════════════════════════════════════════════════════════════════ */
/* Cuando Alyx propone, el placeholder cambia de color/estilo para
   distinguirse del placeholder genérico ("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 */
}
/* Variación cuando la sugerencia proviene de TU corpus (personal seed).
   Un tono más cálido — Alyx está usando algo tuyo. */
.clip-ta.atp-proactive-suggestion.atp-proactive-personal::placeholder {
  color: rgba(232, 184, 75, 0.7);     /* gold más vivo */
}

/* Latido sutil al primer momento de mostrar 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;
}