/* ========== DESIGN SYSTEM — RESKIN DEFINITIVO ========== */
:root {
  --bg-base: #0a0a0f;
  --bg-surface: #0f0f16;
  --bg-card: #15151e;
  --bg-elevated: #1c1c28;
  --bg-hover: #222230;
  --accent: #7c6cff;
  --accent-dim: rgba(124,108,255,0.12);
  --accent-glow: rgba(124,108,255,0.25);
  --pink: #e879a0;
  --pink-dim: rgba(232,121,160,0.12);
  --cyan: #00d4ff;
  --cyan-dim: rgba(0,212,255,0.12);
  --yellow: #f59e0b;
  --green: #10b981;
  --red: #ef4444;
  --text-primary: #eeeef8;
  --text-secondary: #8888a8;
  --text-muted: #44445a;
  --border: #1e1e2e;
  --border-bright: #2e2e42;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --font: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* === LEGACY ALIASES — JS inline styles use these (DO NOT REMOVE) === */
  --bg: var(--bg-base);
  --s1: var(--bg-surface);
  --s2: var(--bg-card);
  --bd: var(--border);
  --ac: var(--accent);
  --cy: var(--cyan);
  --pk: var(--pink);
  --gn: var(--green);
  --rd: var(--red);
  --yw: var(--yellow);
  --or: #f97316;
  --tx: var(--text-primary);
  --m1: var(--text-secondary);
  --m2: var(--text-muted);
  --r: var(--r-md);
  --shadow-card: var(--shadow);
  --shadow-glow: 0 0 20px var(--accent-glow);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background:
    /* Linee retro synthwave — griglia orizzontale sottile */
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,102,51,0.03) 2px, rgba(255,102,51,0.03) 4px),
    /* Overlay scuro per leggibilita' */
    linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 30%, transparent 60%),
    /* Gradiente tramonto synthwave */
    linear-gradient(to bottom,
      #0a0015 0%, #1a0033 15%, #4a0066 30%, #8b1a8f 45%,
      #cc3366 55%, #ff6633 65%, #ffaa00 75%, #ff6633 85%,
      #1a0033 95%, #0a0015 100%);
  background-attachment: fixed;
  color: var(--text-primary); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding-top: 52px; padding-bottom: 64px; min-height: 100vh;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ========== VISIBILITY & STATE ========== */
.hid { display: none !important; }
body:not(.adv-mode) .adv { display: none !important; }
.on { /* generic on-state — used by help-bd, tp, wh-filt, etc */ }

/* ========== HEADER ========== */
.app-header { background: rgba(10,0,20,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); height: 52px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.app-logo { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.3px; }
.app-status { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: inline-block; margin-right: 6px; transition: background .3s; }
.status-dot.online { background: var(--green); box-shadow: 0 0 8px rgba(16,185,129,.5); animation: pulse-dot 2s infinite; }
.status-dot.offline { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,.5); }
.status-text { font-size: 12px; color: var(--text-muted); }

/* ========== LAYOUT ========== */
.w { max-width: 1200px; margin: 0 auto; padding: 24px 24px 100px; background: rgba(10,10,20,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-height: calc(100vh - 52px); }
.hd { display: none; }
.cd { background: rgba(15,15,30,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 12px; }
.cd-flush { padding: 0; overflow: hidden; }
.ct { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 12px; }
.p-16 { padding: 16px; }

/* ========== HELP ========== */
.help { background: rgba(12,12,22,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 16px; overflow: hidden; }
.help-top { padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.help-top span { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.help-top .arr { color: var(--text-muted); font-size: 11px; transition: transform .2s; }
.arr.on { transform: rotate(180deg); }
.help-bd { display: none; padding: 0 16px 16px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.help-bd.on { display: block; }
.help-bd b { color: var(--text-primary); }
.help-bd .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 10px 0; }
.help-bd .st { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; font-size: 12px; color: var(--text-secondary); }
.help-bd .st b { display: block; color: var(--text-primary); margin-bottom: 4px; font-size: 13px; }

/* ========== DROP ZONE ========== */
.drop { border: 1px dashed var(--border-bright); border-radius: var(--r-lg); padding: 40px 24px; text-align: center; margin-bottom: 16px; transition: all 200ms; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-dim); }
.drop input { display: none; }
.drop h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.drop p { color: var(--text-muted); font-size: 13px; }
.drop-btns { margin-top: 16px; display: flex; gap: 8px; justify-content: center; }

/* ========== STEP BAR ========== */
.step-bar { display: flex; background: rgba(12,12,22,0.88); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 16px; overflow: hidden; }
.step-item { flex: 1; padding: 10px; text-align: center; font-size: 12px; color: var(--text-muted); border-right: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: all .15s; }
.step-item:last-child { border-right: none; }
.step-item:hover { background: rgba(124,108,255,.04); color: var(--text-secondary); }
.step-item.active { color: var(--accent); background: var(--accent-dim); }
.step-item.done { color: var(--green); }
.step-n { width: 18px; height: 18px; border-radius: 50%; background: var(--border-bright); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.step-item.active .step-n { background: var(--accent); color: white; }
.step-item.done .step-n { background: rgba(16,185,129,.15); color: var(--green); border: 1px solid rgba(16,185,129,.3); }

/* ========== BUTTONS ========== */
.b { border: 1px solid var(--border-bright); background: transparent; color: var(--text-secondary); border-radius: var(--r-sm); padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 150ms; font-family: var(--font); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.b:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); transform: translateY(-1px); }
.b:active { transform: scale(.97); }
.b1 { background: var(--accent) !important; border-color: var(--accent) !important; color: white !important; }
.b1:hover { filter: brightness(1.1); box-shadow: 0 0 16px var(--accent-glow); }
.b2 { background: var(--accent) !important; border-color: var(--accent) !important; color: white !important; }
.b2:hover { filter: brightness(1.1); box-shadow: 0 0 16px var(--accent-glow); }
.bg { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-bright); }
.bg:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.br { border-color: rgba(239,68,68,0.3) !important; color: var(--red) !important; background: transparent !important; }
.br:hover { background: rgba(239,68,68,0.1) !important; }
.bs { font-size: 12px; padding: 6px 12px; }
.bi { background: 0; border: 0; color: var(--text-muted); cursor: pointer; padding: 3px; border-radius: 4px; font-size: 14px; transition: color .1s; }
.bi:hover { color: var(--text-primary); }
.btn-auto-set, .btn-auto-set-lg, .btn-render { background: var(--accent) !important; border-color: var(--accent) !important; color: white !important; font-weight: 600 !important; }
.btn-auto-set:hover, .btn-auto-set-lg:hover, .btn-render:hover { filter: brightness(1.15); box-shadow: 0 0 20px var(--accent-glow); }
.btn-auto-set { padding: 8px 18px; }
.btn-auto-set-lg { padding: 10px 20px; }
.btn-shortcuts { font-size: 11px; font-weight: 700; }

/* ========== TOGGLE MODE ========== */
.mode-toggle { display: flex; align-items: center; gap: 8px; }
.mode-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--bg-elevated); border-radius: 20px; cursor: pointer; transition: 200ms; border: 1px solid var(--border-bright); }
.slider:before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; bottom: 2px; background: var(--text-muted); border-radius: 50%; transition: 200ms; }
input:checked + .slider { background: var(--accent); border-color: var(--accent); }
input:checked + .slider:before { transform: translateX(16px); background: white; }

/* ========== TAB BAR ========== */
.studio-tabs { display: flex; border-bottom: 1px solid var(--border); background: rgba(12,12,22,0.88); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.stab { flex: 1; padding: 14px 8px; background: transparent; border: none; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 150ms; border-bottom: 2px solid transparent; font-family: var(--font); letter-spacing: 0.5px; text-transform: uppercase; }
.stab:hover { color: var(--text-secondary); background: var(--bg-elevated); }
.stab.on { color: var(--text-primary); border-bottom-color: var(--accent); background: var(--accent-dim); }
.stab-icon { font-size: 16px; line-height: 1; }
.spanel { display: none; }
.spanel.on { display: block; animation: fade-in-up .2s ease-out; }
.panel-body { padding: 20px; }

/* ========== INPUTS & SELECT ========== */
input, select, textarea { padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: var(--r-sm); color: var(--text-primary); font-size: 13px; font-family: var(--font); outline: 0; transition: border .12s; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select { cursor: pointer; }
.select-sm { padding: 6px 10px; font-size: 12px; }
textarea { resize: vertical; min-height: 100px; font-family: var(--font-mono); font-size: 12px; }
.textarea-sm { min-height: 70px; }
.textarea-lg { min-height: 140px; font-size: 12px; }
.input-short { max-width: 200px; flex: 1; }
.input-timer { width: 70px; font-family: var(--font-mono); text-align: center; }
.input-color { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); cursor: pointer; background: transparent; padding: 0; }

/* ========== SAVED SETS ========== */
details.cd { margin-bottom: 16px; }
details.cd summary { cursor: pointer; list-style: none; }
.summary-row { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.summary-row .ct { color: var(--text-secondary); font-size: 13px; font-weight: 500; }

/* ========== SMART CRATES ========== */
.crates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crate { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; cursor: pointer; transition: all 150ms; min-width: 100px; text-align: center; animation: fade-in-up .2s ease-out both; }
.crate:hover { border-color: var(--border-bright); background: var(--bg-hover); }
.cr-icon { font-size: 1.2rem; display: block; margin-bottom: 2px; }
.cr-count { font-size: 20px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); margin-top: 2px; }
.cr-name { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* ========== AI ACTIONS & RESULTS ========== */
.ai-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-status { font-size: 11px; padding: 4px 10px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 4px; }
.ai-status.on { background: rgba(16,185,129,0.1); color: var(--green); border: 1px solid rgba(16,185,129,0.2); }
.ai-status.off { background: rgba(239,68,68,.1); color: var(--red); }
.hint-text { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.ai-res { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); display: none; max-height: 400px; overflow-y: auto; line-height: 1.7; }
.ai-res.on { display: block; }
.ai-res b { color: var(--text-primary); }
.ai-trk { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); margin: 4px 0; cursor: pointer; transition: background .12s; border: 1px solid transparent; animation: fade-in-up .2s ease-out both; }
.ai-trk:hover { background: var(--bg-hover); border-color: var(--border); }
.ai-pos { color: var(--accent); font-weight: 700; font-size: 13px; min-width: 22px; font-family: var(--font-mono); }
.ai-info { flex: 1; }
.ai-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.ai-why { font-size: 11px; color: var(--text-muted); }
.ai-ck { font-size: 11px; font-weight: 600; margin-left: auto; font-family: var(--font-mono); color: var(--text-secondary); }
.ai-load { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cyan); }
.ai-load::after { content: ''; width: 14px; height: 14px; border: 2px solid var(--cyan); border-top-color: transparent; border-radius: 50%; animation: aispin .6s linear infinite; }
.ai-p { display: flex; flex-direction: column; gap: 12px; }
.ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-row label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; min-width: 60px; }
.ai-link { font-size: 11px; color: var(--cyan); text-decoration: none; opacity: .7; }
.ai-link:hover { opacity: 1; }

/* ========== ENERGY PRESETS ========== */
.ep-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; }
.ep-btn { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; transition: all 150ms; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; }
.ep-btn:hover { border-color: var(--border-bright); background: var(--bg-hover); }
.ep-btn.sel { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 12px var(--accent-glow); }
.ep-btn svg { width: 60px; height: 24px; }
.ep-btn span { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.ep-btn.sel span { color: var(--text-primary); }

/* ========== SLIDER ========== */
.bk-slider { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11px; color: var(--text-muted); }
.bk-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.bk-slider .bk-l { color: var(--cyan); }
.bk-slider .bk-r { color: var(--or); }
input[type=range] { accent-color: var(--accent); height: 3px; }

/* ========== SECTION LABEL & UTILITIES ========== */
.section-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.checkbox-lg { width: 18px; height: 18px; }
.accent-primary { accent-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }
.field-group { flex: 1; min-width: 140px; }
.field-min-120 { min-width: 120px; }
.sa-status { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); display: none; }
.sp-info { font-size: 13px; color: var(--text-secondary); margin: 10px 0; line-height: 1.6; }

/* ========== ECURVE ========== */
.ecurve-wrap { position: relative; width: 100%; height: 100px; background: var(--bg-base); border: 1px dashed var(--border); border-radius: var(--r-sm); overflow: hidden; margin: 8px 0; cursor: crosshair; }
.ecurve-wrap canvas { width: 100%; height: 100%; }
.ecurve-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; color: var(--text-muted); pointer-events: none; transition: opacity .2s; }

/* ========== AMX DROP ========== */
.amx-drop { border: 1px dashed var(--border-bright); border-radius: var(--r-lg); padding: 32px; text-align: center; margin: 10px 0; transition: all 200ms; cursor: pointer; }
.amx-drop:hover, .amx-drop.over { border-color: var(--accent); background: var(--accent-dim); }
.amx-drop input { display: none; }
.amx-drop h4 { color: var(--text-primary); font-size: 15px; margin-bottom: 6px; }
.amx-drop p { color: var(--text-muted); font-size: 12px; }

/* ========== AMX SETTINGS ========== */
.amx-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.amx-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.amx-settings select, .amx-settings input { font-size: 12px; padding: 6px 10px; }

/* ========== AMX FILES ========== */
.amx-files { margin: 8px 0; max-height: 320px; overflow-y: auto; }
.amx-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); margin: 2px 0; background: var(--bg-elevated); font-size: 12px; border: 1px solid var(--border); }
.af-waveform { width: 200px; height: 40px; flex-shrink: 0; border-radius: 4px; background: var(--bg-base); border: 1px solid var(--border); }
.af-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-primary); }
.af-size { color: var(--text-muted); font-size: 10px; flex-shrink: 0; font-family: var(--font-mono); }
.af-match { color: var(--green); font-size: 10px; flex-shrink: 0; }
.af-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px; }
.af-remove:hover { color: var(--red); }
.af-status { font-size: 10px; font-weight: 600; flex-shrink: 0; }
.af-status.ok { color: var(--green); }
.af-status.loading { color: var(--cyan); }
.af-status.err { color: var(--red); }

/* ========== AMX PROGRESS ========== */
.amx-progress { margin: 12px 0; }
.amx-progress-bar { height: 3px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; }
.amx-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--pink)); border-radius: 2px; transition: width 300ms; }
.amx-log { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); max-height: 120px; overflow-y: auto; margin-top: 6px; line-height: 1.6; }
.amx-log .step { color: var(--cyan); }
.amx-log .done { color: var(--green); }
.amx-log .warn { color: var(--yellow); }
.amx-log .fail { color: var(--red); }

/* ========== AMX RESULT ========== */
.amx-result { margin-top: 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.amx-result h4 { font-size: 15px; color: var(--text-primary); margin-bottom: 8px; }
.ar-info { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.amx-waveform { height: 60px; background: var(--bg-base); border-radius: var(--r-sm); overflow: hidden; margin: 8px 0; position: relative; border: 1px solid var(--border); }
.amx-waveform canvas { width: 100%; height: 100%; }
.amx-marker { position: absolute; top: 0; bottom: 0; width: 2px; pointer-events: none; }
#renderModeLabel { font-size: 13px; color: var(--text-secondary); }

/* ========== DECKS ========== */
.decks { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-bottom: 12px; align-items: center; }
.deck { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; transition: border-color 200ms; }
.deck:hover { border-color: var(--border-bright); }
.deck-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px 0; }
.deck-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.deck-a .deck-label { color: var(--cyan); }
.deck-b .deck-label { color: var(--pink); }
.deck-title { font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.deck-artist { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.deck-meta { display: flex; gap: 8px; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
.deck-meta span { display: flex; align-items: center; gap: 3px; }
.deck-wv { height: 3px; background: var(--bg-elevated); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.deck-wv-fill { height: 100%; border-radius: 2px; transition: width .3s; background: linear-gradient(90deg, var(--accent), var(--pink)); }
.deck-compat { text-align: center; }
.deck-compat-arrow { color: var(--text-muted); font-size: 18px; }
.deck-compat-score { font-size: 36px; font-weight: 800; font-family: var(--font-mono); color: var(--text-primary); line-height: 1; }
.deck-compat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* ========== SET PROGRESS ========== */
.set-progress { height: 2px; background: var(--bg-elevated); border-radius: 1px; margin-bottom: 12px; overflow: hidden; }
.set-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--accent), var(--pink)); transition: width 300ms; }

/* ========== TIMELINE ========== */
.timeline-wrap { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; }
.timeline { height: 60px; position: relative; min-width: 100%; }
.tl-block { position: absolute; bottom: 0; border-radius: 4px 4px 0 0; cursor: grab; transition: filter .15s, box-shadow .15s; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; min-width: 30px; box-shadow: 0 -2px 8px rgba(0,0,0,.2); }
.tl-block:hover { filter: brightness(1.2); box-shadow: 0 -4px 16px rgba(0,0,0,.3); }
.tl-block.drg { opacity: .5; cursor: grabbing; }
.tl-block.dov { outline: 2px solid var(--accent); outline-offset: -2px; }
.tl-block.selected { outline: 2px solid var(--cyan); outline-offset: -2px; }
.tl-name { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.9); text-align: center; padding: 0 3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tl-bpm { font-size: 8px; color: rgba(255,255,255,.5); margin-bottom: 2px; font-family: var(--font-mono); }
.tl-overlap { position: absolute; bottom: 0; height: 100%; background: var(--accent-dim); border: 1px dashed rgba(124,108,255,.3); border-radius: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; z-index: 2; transition: background .15s; }
.tl-overlap:hover { background: var(--accent-glow); }
.tl-overlap-score { font-size: 9px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.tl-overlap-type { font-size: 8px; color: var(--accent); font-weight: 600; text-transform: uppercase; }
.timeline-time { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); }

/* ========== PADS — all grey, no random colors ========== */
.pads { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.pad { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; padding: 16px 8px !important; text-align: center; cursor: pointer; transition: all 150ms !important; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pad:hover { background: var(--bg-elevated) !important; border-color: var(--border-bright) !important; transform: translateY(-1px) !important; }
.pad-1,.pad-2,.pad-3,.pad-4,.pad-5,.pad-6,.pad-7,.pad-8 { border-color: var(--border) !important; }
.pad-icon { font-size: 20px; opacity: 0.5; }
.pad:hover .pad-icon { opacity: 0.8; }
.pad-name { font-size: 10px !important; color: var(--text-muted) !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
.pad:hover .pad-name { color: var(--text-secondary) !important; }
.pad-1 .pad-name,.pad-2 .pad-name,.pad-3 .pad-name,.pad-4 .pad-name,.pad-5 .pad-name,.pad-6 .pad-name,.pad-7 .pad-name,.pad-8 .pad-name { color: var(--text-muted) !important; }

/* ========== STATS ROW ========== */
.sr { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.si { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 10px; text-align: center; flex: 1; min-width: 70px; }
.si .n { font-size: 22px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }
.si .l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* ========== TOOLS BAR ========== */
.tools-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tt { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.5px; text-transform: uppercase; transition: all 150ms; font-family: var(--font); }
.tt:hover { color: var(--text-secondary); }
.tt.on { color: var(--accent); border-bottom-color: var(--accent); }
.tp { display: none; }
.tp.on { display: block; padding: 12px 0; }

/* ========== TIMER ========== */
.tm-bar { height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; margin: 8px 0; }
.tm-fill { height: 100%; border-radius: 2px; transition: width 300ms; }
.tm-fill.ok { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.tm-fill.ov { background: linear-gradient(90deg, var(--or), var(--red)); }
.tm-fill.lo { background: linear-gradient(90deg, var(--cyan), var(--accent)); }
.tm-msg { font-size: 13px; color: var(--text-secondary); }
.tm-msg b { color: var(--text-primary); }

/* ========== TOOLBAR ========== */
.tb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sf { flex: 1; min-width: 140px; max-width: 220px; }
.tb select { max-width: 170px; font-size: 12px; padding: 6px 10px; }
.tc { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.tc b { color: var(--text-primary); }
.mix-cb { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.mix-cb input { accent-color: var(--accent); width: auto; }
.bpm-range { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.bpm-range input[type="number"] { width: 52px; padding: 4px 6px; font-size: 12px; text-align: center; font-family: var(--font-mono); }

/* ========== TABLE ========== */
.tw { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); max-height: 60vh; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { background: var(--bg-elevated); position: sticky; top: 0; z-index: 2; }
th { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 8px 6px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
td { padding: 8px 6px; vertical-align: middle; }
tbody tr { border-bottom: 1px solid var(--border); transition: background 100ms; height: 48px; }
tbody tr:nth-child(even) { background: var(--bg-surface); }
tbody tr:nth-child(odd) { background: var(--bg-card); }
tbody tr:hover { background: var(--bg-elevated) !important; }

/* ========== TABLE: TRACK ROW ELEMENTS ========== */
.tn { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.ta { color: var(--text-secondary); font-size: 12px; }
.nt { font-size: 11px; color: var(--yellow); margin-top: 2px; }
.na { color: var(--text-muted); font-size: 11px; }
.sp { display: inline-flex; color: var(--green); font-size: 11px; text-decoration: none; opacity: .4; margin-left: 4px; }
.sp:hover { opacity: 1; }
.slinks { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.slinks a { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-size: 9px; font-weight: 700; text-decoration: none; opacity: .3; transition: all .12s; }
.slinks a:hover { opacity: 1; }
.sl-yt { background: rgba(255,0,0,.06); color: #f44; }
.sl-bp { background: rgba(0,200,200,.06); color: #0cc; }
.gr { cursor: grab; color: var(--text-muted); opacity: .15; font-size: 12px; }
.gr:hover { opacity: .4; }
.editable { cursor: pointer; }
.editable:hover { background: rgba(124,108,255,.04); border-radius: 4px; }
.ei { width: 54px; padding: 3px 6px; background: var(--bg-base); border: 1px solid var(--accent); border-radius: 4px; color: var(--text-primary); font: 600 12px var(--font-mono); text-align: center; outline: 0; }

/* Camelot key pills */
.ck { font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: 20px; display: inline-block; letter-spacing: .02em; font-family: var(--font-mono); }
.ck.A { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(0,212,255,.2); }
.ck.B { background: var(--pink-dim); color: var(--pink); border: 1px solid rgba(232,121,160,.2); }
.ck.X { color: var(--text-muted); background: rgba(68,68,90,.08); border: 1px solid rgba(68,68,90,.15); }

/* BPM pill */
.bv { font-weight: 600; font-size: 11px; background: var(--accent-dim); color: var(--accent); padding: 2px 8px; border-radius: 20px; display: inline-block; border: 1px solid rgba(124,108,255,.2); font-family: var(--font-mono); }
.bv2 { font-size: 10px; color: var(--text-muted); }

/* Energy/dance bars */
.mb { width: 100%; height: 3px; background: var(--bg-base); border-radius: 2px; margin-top: 1px; }
.mb div { height: 100%; border-radius: 2px; }
.mb .e { background: linear-gradient(90deg, var(--yellow), var(--or)); }
.mb .d { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.mini-wv { display: flex; gap: 1px; height: 12px; align-items: end; margin-top: 2px; }
.mini-wv span { width: 3px; border-radius: 1px; display: block; }

/* Section dropdown pills */
.ss { background: 0; border: 0; color: inherit; font-size: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; padding: 3px 8px; border-radius: 20px; font-family: inherit; -webkit-appearance: none; letter-spacing: .04em; }
.ss.intro { background: var(--cyan-dim); color: var(--cyan); }
.ss.hit { background: var(--pink-dim); color: var(--pink); }
.ss.close { background: var(--accent-dim); color: var(--accent); }

/* ========== TABLE: STATE CLASSES ========== */
tbody tr.gl td { background: rgba(0,212,255,.04); }
tbody tr.gs td { background: rgba(16,185,129,.05); }
tbody tr.dov td { border-top: 2px solid var(--accent) !important; }
tbody tr.drg { opacity: .25; }
tbody tr.kb-sel td { background: rgba(124,108,255,.06) !important; outline: 1px solid rgba(124,108,255,.2); }
tbody tr.multi-sel td { background: rgba(0,212,255,.04) !important; }
tr.locked { border-left: 3px solid var(--yellow); background: rgba(245,158,11,.03); }
tr.excluded { opacity: .3; text-decoration: line-through; }

/* ========== MIX GUIDE ROW ========== */
.mx td { padding: 0 !important; border: none !important; }
.mxc { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 38px; font-size: 11px; background: var(--bg-base); border-radius: 4px; margin: 1px 6px; border-left: 2px solid var(--border-bright); }
.mxc .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot.g { background: var(--green); }
.dot.y { background: var(--yellow); }
.dot.r { background: var(--red); }
.mxc .tip { color: var(--text-muted); flex: 1; font-size: 11px; }
.mxc .ki { color: var(--text-muted); font-size: 10px; font-weight: 600; font-family: var(--font-mono); }
.mxc .tm { color: var(--cyan); font-size: 10px; font-weight: 600; font-family: var(--font-mono); flex-shrink: 0; }
.pv-btn { font-size: 13px; }

/* ========== SCORE BADGES ========== */
.tscore { font-size: 12px; font-weight: 700; padding: 0; flex-shrink: 0; min-width: 24px; text-align: center; font-family: var(--font-mono); background: none; }
.tscore-g { color: var(--green); }
.tscore-y { color: var(--yellow); }
.tscore-r { color: var(--red); }
.score-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; }
.score-lbl.ottima { background: rgba(16,185,129,.1); color: var(--green); }
.score-lbl.buona { background: rgba(245,158,11,.1); color: var(--yellow); }
.score-lbl.scarsa { background: rgba(239,68,68,.1); color: var(--red); }

/* ========== TRANSITION TYPE ========== */
.trans-type { display: inline-flex; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 12px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; margin-left: 4px; transition: all .12s; border: 1px solid var(--border-bright); background: transparent; color: var(--text-secondary); }
.trans-type:hover { border-color: var(--accent); color: var(--accent); }
.trans-type.tt-cut { color: var(--red); border-color: rgba(239,68,68,.25); }
.trans-type.tt-fade,.trans-type.tt-filter_lp,.trans-type.tt-filter { color: var(--cyan); border-color: rgba(0,212,255,.25); }
.trans-type.tt-blend,.trans-type.tt-bass_swap,.trans-type.tt-eqfade { color: var(--green); border-color: rgba(16,185,129,.25); }
.trans-type.tt-echo,.trans-type.tt-loopout { color: var(--accent); border-color: rgba(124,108,255,.25); }
.trans-type.tt-backspin,.trans-type.tt-spindown { color: var(--or); border-color: rgba(249,115,22,.25); }
.trans-type.tt-silencedrop { color: var(--red); border-color: rgba(239,68,68,.25); }
.trans-type.tt-buildup { color: var(--yellow); border-color: rgba(245,158,11,.25); }
.trans-type.tt-stutter,.trans-type.tt-tease { color: var(--pink); border-color: rgba(232,121,160,.25); }
.trans-type.auto { opacity: .5; font-style: italic; }
.trans-menu { position: fixed; background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: var(--r-sm); padding: 4px; z-index: 100; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.trans-menu button { background: none; border: none; color: var(--text-secondary); font: 500 12px var(--font); padding: 6px 12px; border-radius: 4px; cursor: pointer; text-align: left; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.trans-menu button:hover { background: var(--accent-dim); color: var(--text-primary); }
.tm-icon { font-size: 13px; }

/* ========== SECTION DIVIDER ========== */
.sd td { padding: 2px 8px !important; border: none !important; }
.sdi { display: flex; align-items: center; gap: 6px; }
.sdl { flex: 1; height: 1px; background: var(--border); }
.sdn { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 10px; border-radius: 12px; }
.sdn.intro { background: var(--cyan-dim); color: var(--cyan); }
.sdn.hit { background: var(--pink-dim); color: var(--pink); }
.sdn.close { background: var(--accent-dim); color: var(--accent); }

/* ========== TRANSITION NOTES ========== */
.mx-note { font-size: 10px; color: var(--yellow); padding: 0 8px 2px 46px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.mx-note:hover { color: var(--text-primary); }
.mx-note-icon { opacity: .4; font-size: 11px; }
.mx-note:hover .mx-note-icon { opacity: 1; }
.mx-note-text { font-style: italic; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-add-note { font-size: 10px; color: var(--text-muted); padding: 0 8px 1px 46px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.mx:hover+.mx-add-wrap .mx-add-note, .mx-add-note:hover { opacity: 1; }

/* ========== TAGS ========== */
.tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; margin-left: 3px; transition: all .1s; }
.tag:hover { filter: brightness(1.3); }
.tag-opener { background: var(--cyan-dim); color: var(--cyan); }
.tag-banger { background: rgba(239,68,68,.1); color: var(--red); }
.tag-filler { background: rgba(245,158,11,.1); color: var(--yellow); }
.tag-closer { background: var(--accent-dim); color: var(--accent); }
.tag-menu { position: absolute; background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: var(--r-sm); padding: 4px; z-index: 100; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.tag-menu button { background: none; border: none; color: var(--text-secondary); font: 500 12px var(--font); padding: 6px 12px; border-radius: 4px; cursor: pointer; text-align: left; white-space: nowrap; }
.tag-menu button:hover { background: var(--accent-dim); color: var(--text-primary); }

/* ========== FLOW BAR ========== */
.fb { display: flex; height: 20px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); background: var(--bg-base); }
.fb div { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; transition: width .3s; }
.fb .fi { background: var(--cyan-dim); color: var(--cyan); }
.fb .fh { background: var(--pink-dim); color: var(--pink); }
.fb .fc { background: var(--accent-dim); color: var(--accent); }

/* ========== ENERGY FLOW ========== */
.eflow-wrap { position: relative; width: 100%; height: 80px; background: var(--bg-base); border-radius: var(--r-sm); overflow: hidden; margin: 10px 0; border: 1px solid var(--border); }
.eflow-wrap canvas { width: 100%; height: 100%; }
.eflow-leg { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.eflow-leg i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }

/* ========== CHART & WHEEL ========== */
.ch-wrap { position: relative; width: 100%; height: 160px; background: var(--bg-base); border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.ch-wrap canvas { width: 100%; height: 100%; }
.ch-leg { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.ch-leg i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.wh-box { text-align: center; }
.wh-box svg { max-width: 340px; width: 100%; height: auto; }
.wh-leg { display: flex; justify-content: center; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.wh-leg i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.wh-filt { display: none; align-items: center; gap: 6px; justify-content: center; margin-top: 6px; font-size: 12px; }
.wh-filt.on { display: flex; }
.wh-filt span { color: var(--cyan); font-weight: 600; }

/* ========== MASHUP ========== */
.mash-res { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; margin-top: 8px; }
.mash-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); margin: 3px 0; cursor: pointer; transition: background .12s; border: 1px solid transparent; }
.mash-item:hover { background: var(--bg-hover); border-color: var(--border); }
.mash-pct { font-size: 16px; font-weight: 800; min-width: 42px; text-align: center; font-family: var(--font-mono); }
.mash-info { flex: 1; }
.mash-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.mash-why { font-size: 11px; color: var(--text-muted); }

/* ========== BPM DETECTOR ========== */
.bpm-det { text-align: center; }
.bpm-big { font-size: 72px; font-weight: 800; font-family: var(--font-mono); color: var(--text-primary); line-height: 1; margin: 16px 0 4px; }
.bpm-big.pulse { animation: bpulse .4s; }
.bpm-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.bpm-viz { height: 60px; background: var(--bg-base); border-radius: var(--r-sm); overflow: hidden; margin: 10px 0; position: relative; border: 1px solid var(--border); }
.bpm-viz canvas { width: 100%; height: 100%; }
.bpm-status { font-size: 12px; border-radius: 20px; padding: 4px 12px; display: inline-block; }
.bpm-status.idle { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-bright); }
.bpm-status.listening { background: rgba(239,68,68,.1); color: var(--red); border: 1px solid rgba(239,68,68,.2); animation: blink 1s infinite; }
.bpm-tap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.bpm-tap-btn { background: var(--bg-elevated); border: 2px solid var(--border-bright); border-radius: var(--r-lg); padding: 20px 40px; font-size: 16px; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: all 150ms; font-family: var(--font); width: 100%; max-width: 300px; text-align: center; }
.bpm-tap-btn:active { transform: scale(0.97); background: var(--accent-dim); border-color: var(--accent); }
.bpm-matches { margin-top: 10px; }
.bpm-match { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); margin: 4px 0; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; transition: all .12s; }
.bpm-match:hover { background: var(--bg-elevated); border-color: var(--border-bright); }
.bm-pos { color: var(--accent); font-weight: 700; font-size: 13px; min-width: 20px; font-family: var(--font-mono); }
.bm-info { flex: 1; }
.bm-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.bm-meta { font-size: 11px; color: var(--text-muted); }
.bm-diff { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; }

/* ========== PLAYER BAR ========== */
.player-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-surface); border-top: 1px solid var(--border); backdrop-filter: blur(20px); height: 60px; padding: 0 24px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 16px; z-index: 100; }
.player-info { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-info b { color: var(--text-primary); font-weight: 600; }
.player-controls { display: flex; align-items: center; gap: 10px; justify-content: center; }
.player-btn { background: transparent; border: 1px solid var(--border-bright); border-radius: 50%; width: 32px; height: 32px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 150ms; font-size: 14px; }
.player-btn:hover { border-color: var(--accent); color: var(--accent); }
.player-progress { flex: 1; height: 3px; background: var(--bg-elevated); border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; transition: height .15s; }
.player-progress:hover { height: 5px; }
.player-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0; transition: width .2s; }
.player-time { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; min-width: 40px; text-align: right; }
.player-vol { display: flex; align-items: center; justify-content: flex-end; }
.player-vol input[type="range"] { width: 80px; accent-color: var(--accent); }

/* ========== MODALS ========== */
.mo-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 200; }
.mo { background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: var(--r-xl); padding: 24px; width: 90%; max-width: 400px; box-shadow: var(--shadow); }
.mo-wide { max-width: 640px; }
.mo h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.mo-bt { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.mo-body-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ========== UNDO ========== */
.undo { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: var(--r-md); padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: var(--shadow); z-index: 150; animation: su .2s; }
.un { color: var(--text-primary); font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========== TOAST ========== */
.toasts { position: fixed; top: 60px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: var(--r-md); padding: 10px 16px; font-size: 13px; color: var(--text-primary); box-shadow: var(--shadow); animation: si .2s; transition: opacity .25s, transform .25s; }
.toast.out { opacity: 0; transform: translateX(20px); }
.toast.ok { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
.toast.err { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); color: #fca5a5; }
.toast.inf { background: rgba(0,212,255,.06); border-color: rgba(0,212,255,.2); color: #7dd3fc; }

/* ========== AI BUTTON IN TABLE ========== */
.bi.ai-bt { color: var(--cyan); font-size: 11px; font-weight: 600; font-family: var(--font); }
.bi.ai-bt:hover { color: var(--pink); }

/* ========== VINYL ========== */
.vinyl-wrap { display: flex; justify-content: center; align-items: center; height: 40px; margin: 4px 0; text-align: center; }
.vinyl { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at center, var(--bg-elevated) 30%, var(--bg-card) 31%, var(--bg-card) 45%, var(--border-bright) 46%, var(--border-bright) 48%, var(--bg-card) 49%); border: 1px solid var(--border-bright); display: inline-block; position: relative; }
.vinyl::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.vinyl.spin { animation: vspin 3s linear infinite; }

/* ========== INLINE HELP ========== */
.ihelp { margin-bottom: 12px; }
.ihelp-btn { background: transparent; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 4px 0; font-family: var(--font); display: flex; align-items: center; gap: 4px; }
.ihelp-btn:hover { color: var(--text-secondary); }
.ihelp-btn .ih-arr { font-size: 10px; transition: transform .2s; }
.ihelp-btn.open .ih-arr { transform: rotate(180deg); }
.ihelp-body { display: none; background: var(--bg-elevated); border-radius: var(--r-sm); padding: 12px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.6; }
.ihelp-body.on { display: block; }
.ihelp-body ul { margin: 6px 0 6px 16px; list-style: disc; }
.ihelp-body li { margin-bottom: 3px; padding-left: 4px; }
.ihelp-body b { color: var(--text-primary); }

/* ========== PLAYLIST LIBRARY ========== */
.playlist-layout { display: flex; gap: 0; min-height: 400px; }
.playlist-sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 12px; overflow-y: auto; max-height: 600px; }
.playlist-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.playlist-add-btn { font-size: 11px !important; padding: 4px 10px !important; }
.playlist-new-form { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.playlist-new-form .input-short { flex: 1; min-width: 90px; font-size: 12px; padding: 6px 8px; }
.playlist-list { display: flex; flex-direction: column; gap: 4px; }
.playlist-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; transition: all .15s; font-size: 13px; color: var(--text-secondary); border: 1px solid transparent; }
.playlist-item:hover { background: var(--bg-hover); border-color: var(--border); }
.playlist-item.active { background: var(--accent-dim); color: var(--accent); border-color: rgba(124,108,255,.2); }
.playlist-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.playlist-item-info { flex: 1; overflow: hidden; }
.playlist-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-item-count { font-size: 10px; color: var(--text-muted); }
.playlist-item.active .playlist-item-count { color: rgba(124,108,255,.7); }
.playlist-content { flex: 1; padding: 12px 16px; overflow-y: auto; max-height: 600px; }
.playlist-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; }
.playlist-header { margin-bottom: 12px; }
.playlist-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.playlist-drop { border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: 20px; text-align: center; margin: 12px 0; transition: all .2s; cursor: pointer; background: var(--bg-surface); }
.playlist-drop:hover, .playlist-drop.drag-over { border-color: var(--accent); background: var(--accent-dim); }
.playlist-drop h4 { margin: 0 0 4px; font-size: 14px; color: var(--text-secondary); }
.playlist-drop p { margin: 0; font-size: 11px; color: var(--text-muted); }
.playlist-drop input[type="file"] { display: none; }
.playlist-upload-progress { margin: 8px 0; }
.playlist-tracks { margin-top: 8px; }
.playlist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.playlist-table th { text-align: left; padding: 8px; color: var(--text-muted); font-weight: 600; font-size: 10px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .06em; }
.playlist-table td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.playlist-table tr:hover td { background: var(--bg-hover); }
.playlist-table td[contenteditable] { cursor: text; border-radius: 4px; transition: background .15s; }
.playlist-table td[contenteditable]:focus { background: var(--accent-dim); outline: 1px solid var(--accent); color: var(--text-primary); }
.pl-actions { display: flex; gap: 4px; }
.pl-btn-add { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 3px 8px; font-size: 10px; cursor: pointer; font-weight: 600; }
.pl-btn-add:hover { filter: brightness(1.15); }
.pl-btn-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; }
.pl-btn-del:hover { background: rgba(239,68,68,.08); color: var(--red); }
@media(max-width:768px) { .playlist-layout { flex-direction: column; } .playlist-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; } }

/* ========== THEME TOGGLE ========== */
.theme-toggle { position: fixed; bottom: 70px; right: 16px; display: flex; gap: 6px; z-index: 100; }
.theme-btn { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 150ms; }
.theme-btn:hover { border-color: var(--accent); }
.theme-btn.active { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,212,255,.3); }

/* ========== KB HELP ========== */
.kb-help { position: fixed; bottom: 110px; right: 16px; background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: var(--r-md); padding: 16px; font-size: 12px; color: var(--text-secondary); box-shadow: var(--shadow); z-index: 100; min-width: 220px; display: none; }
.kb-help.on { display: block; }
.kb-title { font-weight: 700; color: var(--text-primary); margin-bottom: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.kb-help div { padding: 4px 0; display: flex; align-items: center; gap: 8px; }
kbd { background: var(--bg-card); border: 1px solid var(--border-bright); border-radius: 4px; padding: 2px 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); min-width: 24px; text-align: center; }

/* ========== DOT BACKGROUNDS ========== */
.dot-or { background: var(--or); width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-gn { background: var(--green); width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-cy { background: var(--cyan); width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-pk { background: var(--pink); width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ========== COLORS ========== */
.color-cy { color: var(--cyan) !important; }
.color-pk { color: var(--pink) !important; }
.color-ac { color: var(--accent) !important; }
.color-yw { color: var(--yellow) !important; }
.color-rd { color: var(--red) !important; }
.color-gn { color: var(--green) !important; }

/* ========== SPACING ========== */
.mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; }
.mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; }
.m-0 { margin: 0; } .p-16 { padding: 16px; } .spacer-12 { height: 12px; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.items-center { align-items: center; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-md { font-size: 14px; } .text-lg { font-size: 16px; }
.text-muted { color: var(--text-muted); } .text-m1 { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }

/* ========== PRINT ========== */
@media print { body { background: #fff !important; color: #000 !important; } .w>* { display: none !important; } #pa { display: block !important; } #pa h2 { font-size: 1.1rem; } #pa table { width: 100%; border-collapse: collapse; font-size: 11px; } #pa th { background: #eee; padding: 4px; border: 1px solid #ccc; } #pa td { padding: 3px; border: 1px solid #ccc; } }
#pa { display: none; }

/* ========== RESPONSIVE ========== */
@media(max-width:640px) { .w { padding: 10px 8px 60px; } .sr { flex-direction: column; } .pads { grid-template-columns: repeat(2,1fr); } .tb { flex-direction: column; } .tb select, .tb .sf { max-width: 100%; } .drop { padding: 24px 14px; } table { font-size: 12px; } td, th { padding: 4px 3px; } .help-bd .steps { grid-template-columns: 1fr; } .amx-settings { grid-template-columns: 1fr; } .player-bar { grid-template-columns: 1fr 2fr; padding: 0 12px; } .player-vol { display: none; } .stab { font-size: 10px; padding: 10px 4px; } }