/* ================================================
   BAILU MUSIC Toolkits – Suno-inspired Dark Theme v4
   Performance-Optimized Edition
   ================================================ */
:root {
  --bg-0:#09090b;--bg-1:#0f0f12;--bg-2:#17171c;--bg-3:#1f1f26;--bg-4:#28282f;
  --accent:#8b5cf6;--accent-h:#a78bfa;--accent-dim:rgba(139,92,246,.15);--accent-glow:rgba(139,92,246,.3);
  --red:#ef4444;--green:#22c55e;--yellow:#eab308;--orange:#f97316;
  --t1:#f4f4f5;--t2:#a1a1aa;--t3:#71717a;--t4:#52525b;
  --b1:#27272a;--b2:#3f3f46;
  --r:10px;--rs:6px;--rl:14px;
  --sidebar:380px;--header:50px;--player:64px;
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --beat:0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg-0);color:var(--t1);font-family:var(--ff);font-size:13.5px;-webkit-font-smoothing:antialiased;line-height:1.5}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--t4)}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit;outline:none}
a{color:var(--accent-h);text-decoration:none}

/* ===== Layout ===== */
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;height:var(--header);padding:0 16px 0 18px;background:var(--bg-1);border-bottom:1px solid var(--b1);flex-shrink:0;z-index:20}
.header-l{display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.logo i{color:var(--accent);font-size:18px}
.logo-tag{font-size:11px;font-weight:600;color:var(--accent-h);background:var(--accent-dim);padding:2px 8px;border-radius:4px;letter-spacing:.3px}
.header-r{display:flex;align-items:center;gap:6px}
.h-link{display:flex;align-items:center;gap:5px;color:var(--t2);font-size:12.5px;padding:6px 10px;border-radius:var(--rs);transition:.2s;border:none;background:none;cursor:pointer}
.h-link:hover{color:var(--t1);background:var(--bg-3)}

/* Body */
.body{display:flex;flex:1;overflow:hidden}

/* Mobile Tab Bar — hidden on desktop */
.mob-tabs{display:none}

/* ===== Create Panel ===== */
.panel{width:var(--sidebar);background:var(--bg-1);border-right:1px solid var(--b1);display:flex;flex-direction:column;flex-shrink:0}
.panel-inner{flex:1;overflow-y:auto;padding:0 16px 8px}

/* Mode Selector */
.mode-bar{display:flex;align-items:center;gap:6px;margin-bottom:16px;position:sticky;top:0;z-index:5;background:var(--bg-1);padding:14px 0 10px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
.mode-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 0;font-size:12.5px;font-weight:500;color:var(--t3);background:transparent;border:1px solid transparent;border-radius:var(--rs);cursor:pointer;transition:.2s;white-space:nowrap}
.mode-pill i{font-size:11px}
.mode-pill:hover{color:var(--t2);background:var(--bg-2)}
.mode-pill.on{color:var(--t1);background:var(--bg-3);border-color:var(--b1)}

/* Section */
.sec{margin-bottom:14px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.sec-title{font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.sec-title i{font-size:11px;color:var(--t3)}
.sec-action{display:flex;gap:4px}
.sec-btn{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--t3);background:none;border:none;cursor:pointer;padding:3px 8px;border-radius:var(--rs);transition:.2s}
.sec-btn:hover{color:var(--accent-h);background:var(--accent-dim)}
.sec-btn i{font-size:10px}

/* Inputs */
.inp{width:100%;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--r);padding:10px 12px;color:var(--t1);transition:.2s;resize:none}
.inp:focus{border-color:var(--accent)}
.inp::placeholder{color:var(--t4)}
textarea.inp{min-height:90px;line-height:1.55}
textarea.inp.tall{min-height:130px}
textarea.inp.mono{font-family:var(--mono);font-size:12.5px}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2371717a'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}
input[type=number].inp{-moz-appearance:textfield}
input[type=number].inp::-webkit-inner-spin-button{-webkit-appearance:none}

/* Compact row */
.row{display:flex;gap:8px;align-items:center}
.row .f1{flex:1;min-width:0}

/* Checkbox */
.ck{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;color:var(--t2);user-select:none}
.ck input{display:none}
.ck-box{width:15px;height:15px;border:1.5px solid var(--b2);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0;font-size:8px;color:transparent}
.ck input:checked+.ck-box{background:var(--accent);border-color:var(--accent);color:#fff}
.ck:hover .ck-box{border-color:var(--t3)}
.ck-row{display:flex;gap:14px;flex-wrap:wrap}

/* Toggle link (for negative prompt) */
.toggle-link{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--t4);cursor:pointer;padding:4px 0;transition:.15s;border:none;background:none}
.toggle-link:hover{color:var(--t2)}
.toggle-link i{font-size:9px;transition:transform .2s}
.toggle-link.open i{transform:rotate(180deg)}
.toggle-panel{display:none;margin-top:6px}
.toggle-panel.show{display:block}

/* Slider */
.sld{display:flex;align-items:center;gap:8px}
.sld input[type=range]{flex:1;-webkit-appearance:none;height:3px;background:var(--b1);border-radius:2px;outline:none}
.sld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--accent);border-radius:50%;cursor:pointer;transition:.15s;box-shadow:0 0 0 3px var(--accent-dim)}
.sld input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.sld-v{font-size:11.5px;color:var(--t3);min-width:32px;text-align:right;font-variant-numeric:tabular-nums}

/* File upload */
.upload{position:relative;border:1.5px dashed var(--b2);border-radius:var(--r);padding:20px;text-align:center;cursor:pointer;transition:.2s}
.upload:hover{border-color:var(--accent);background:var(--accent-dim)}
.upload.ok{border-style:solid;border-color:var(--green);background:rgba(34,197,94,.06)}
.upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload i{font-size:20px;color:var(--t4);margin-bottom:4px}
.upload.ok i{color:var(--green)}
.upload-t{font-size:12px;color:var(--t3)}
.upload-n{font-size:11px;color:var(--green);margin-top:3px;word-break:break-all}

/* Advanced Options */
.adv-toggle{display:flex;align-items:center;gap:7px;width:100%;padding:10px 0;font-size:12.5px;font-weight:500;color:var(--t2);background:none;border:none;cursor:pointer;transition:.15s}
.adv-toggle:hover{color:var(--t1)}
.adv-toggle i{font-size:10px;transition:transform .25s;width:14px;text-align:center}
.adv-toggle.open i{transform:rotate(180deg)}
.adv-body{display:none;padding-bottom:8px}
.adv-body.open{display:block}
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.adv-grid .full{grid-column:1/-1}
.adv-item label{display:block;font-size:11px;color:var(--t3);margin-bottom:4px;font-weight:500}
.adv-item .inp{padding:7px 10px;font-size:12.5px}
.divider{height:1px;background:var(--b1);margin:10px 0}

/* Generate button */
.panel-foot{padding:10px 16px;border-top:1px solid var(--b1)}
.gen-btn{width:100%;padding:11px;border:none;border-radius:var(--r);font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;transition:.25s;position:relative;overflow:hidden}
.gen-btn:hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 0 24px var(--accent-glow)}
.gen-btn:active{transform:scale(.98)}
.gen-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.gen-btn .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Workspace + Player wrapper ===== */
.ws-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ===== Workspace ===== */
.workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-0);position:relative}
.ws-top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--b1);flex-shrink:0;position:relative;z-index:1}
.ws-top h2{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.ws-top h2 i{color:var(--accent);font-size:13px}
.ws-acts{display:flex;align-items:center;gap:10px}
.ws-count{font-size:11.5px;color:var(--t4)}
.ws-btn{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t4);background:none;border:1px solid var(--b1);border-radius:var(--rs);padding:5px 10px;cursor:pointer;transition:.2s}
.ws-btn:hover{color:var(--red);border-color:var(--red);background:rgba(239,68,68,.08)}

/* Progress (workspace inline) */
.prog{display:none;padding:10px 20px 8px;border-bottom:1px solid var(--b1);flex-shrink:0;position:relative;z-index:1}
.prog.on{display:block;animation:progFade .25s ease}
@keyframes progFade{from{opacity:0}to{opacity:1}}
.prog-info{font-size:12.5px;color:var(--t2);margin-bottom:6px;display:flex;align-items:center;gap:7px}
.prog-cancel{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--t4);background:none;border:1px solid var(--b1);border-radius:var(--rs);padding:3px 10px;cursor:pointer;transition:.2s}
.prog-cancel:hover{color:var(--red);border-color:var(--red);background:rgba(239,68,68,.08)}
.prog-cancel i{font-size:10px}
.spin-sm{width:13px;height:13px;border:2px solid var(--b2);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.prog-track{height:3px;background:var(--bg-4);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-h));border-radius:2px;width:0%;transition:width .3s ease}

/* Workspace body */
.ws-body{flex:1;overflow-y:auto;padding:0;position:relative;z-index:1}
.ws-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--t4);gap:10px;padding:40px}
.ws-empty i{font-size:48px;opacity:.2}
.ws-empty p{font-size:13px;max-width:260px;line-height:1.65}

/* ===== LIVE Stage – Floating Particles ===== */
/* PERF: translateZ(0) promotes to compositor layer; contain:strict isolates layout/paint */
.stage-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;transform:translateZ(0);contain:strict}
.stage-p{
  position:absolute;border-radius:50%;opacity:0;
  animation:pFloat var(--pdur,5s) ease-out forwards;
  will-change:transform,opacity;
  contain:layout style;
}
@keyframes pFloat{
  0%{opacity:0;transform:translateY(0) translateX(0)}
  12%{opacity:var(--pop,.25)}
  70%{opacity:calc(var(--pop,.25) * .6)}
  100%{opacity:0;transform:translateY(-82vh) translateX(var(--drift,10px))}
}

/* ===== LIVE Stage – Aurora Ambient ===== */
/* PERF: Promoted to own layer. blur() is static per pseudo-element (not per-frame).
   Only opacity is beat-driven via CSS var → compositor-only update. */
.stage-aurora{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .8s ease;
  transform:translateZ(0);
  will-change:opacity;
  contain:strict;
}
.workspace.live .stage-aurora{opacity:1}
.stage-aurora::before{
  content:'';position:absolute;width:140%;height:140%;top:-20%;left:-20%;
  background:
    radial-gradient(ellipse 55% 55% at 15% 60%,rgba(139,92,246,.16) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 45%,rgba(99,102,241,.12) 0%,transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 80%,rgba(168,85,247,.12) 0%,transparent 55%);
  animation:auroraA 14s ease-in-out infinite alternate;
  opacity:calc(.3 + var(--beat,0) * .7);
  filter:blur(40px);
  transform:translateZ(0);
  will-change:transform,opacity;
}
.stage-aurora::after{
  content:'';position:absolute;width:120%;height:120%;top:-10%;left:-10%;
  background:
    radial-gradient(ellipse 50% 55% at 30% 35%,rgba(124,58,237,.12) 0%,transparent 55%),
    radial-gradient(ellipse 55% 50% at 70% 70%,rgba(192,132,252,.10) 0%,transparent 55%);
  animation:auroraB 18s ease-in-out infinite alternate;
  opacity:calc(.2 + var(--beat,0) * .6);
  filter:blur(50px);
  transform:translateZ(0);
  will-change:transform,opacity;
}
@keyframes auroraA{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  33%{transform:translate3d(3%,-2%,0) rotate(1.5deg) scale(1.02)}
  66%{transform:translate3d(-2%,3%,0) rotate(-1deg) scale(.98)}
  100%{transform:translate3d(1%,-1%,0) rotate(.5deg) scale(1.01)}
}
@keyframes auroraB{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-3%,2%,0) rotate(-1.5deg)}
  100%{transform:translate3d(2%,-3%,0) rotate(1deg)}
}

/* ===== LIVE Stage – Breathing Vignette ===== */
/* PERF: Only opacity is beat-driven → compositor-only */
.stage-vignette{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  transform:translateZ(0);
  will-change:opacity;
  contain:strict;
}
.workspace.live .stage-vignette{
  background:radial-gradient(ellipse 75% 65% at 50% 50%,transparent 30%,rgba(9,9,11,.5) 100%);
  opacity:calc(.35 + var(--beat,0) * .45)
}

/* ===== LIVE Stage – Climax God Rays ===== */
/* PERF: Canvas element, only opacity driven by JS */
.stage-climax{
  position:absolute;top:0;left:0;right:0;
  height:80%;
  z-index:0;pointer-events:none;
  opacity:0;
  will-change:opacity;
  mix-blend-mode:screen;
  transform:translateZ(0);
  contain:layout style;
}

/* ===== LIVE Stage – Beat Ripples ===== */
/* PERF: contain:strict isolates ripple DOM from main layout */
.stage-ripples{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:strict;
  transform:translateZ(0);
}
.ripple-ring{
  position:absolute;border-radius:50%;
  border:1.5px solid rgba(139,92,246,.18);
  /* PERF: Removed box-shadow (causes per-frame paint). Border-only is much cheaper. */
  left:50%;bottom:0;
  width:var(--rsize,300px);height:var(--rsize,300px);
  transform:translate(-50%,50%) scale(0);
  animation:rippleExpand var(--rdur,2.5s) ease-out forwards;
  will-change:transform,opacity;
  contain:layout style;
}
@keyframes rippleExpand{
  0%{transform:translate(-50%,50%) scale(0);opacity:.5}
  100%{transform:translate(-50%,50%) scale(1);opacity:0}
}

/* ===== LIVE Stage – Frequency Spectrum ===== */
/* PERF: Canvas element, compositor-promoted, mask is static */
.stage-freq{
  position:absolute;bottom:0;left:0;right:0;
  width:100%;
  height:40%;
  min-height:100px;
  max-height:260px;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%);
  mask-image:linear-gradient(to bottom,transparent 0%,black 20%);
  transform:translateZ(0);
  will-change:opacity;
  contain:layout style;
}
.workspace.live .stage-freq{opacity:.75}

/* ===== Song List ===== */
.song-list{display:flex;flex-direction:column}

.song-item{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--b1);cursor:default;transition:background .18s,border-color .18s}
/* PERF: Removed backdrop-filter from hover — extremely expensive on every hover */
.song-item:hover{background:rgba(139,92,246,.06);border-bottom-color:rgba(139,92,246,.12)}
.song-item.active{background:var(--bg-2)}

/* Playing item – Divine Light Matching Effect (Performance Optimized) */
.song-item.playing {
  position: relative;
  /* PERF: Static background gradient — no calc(var(--beat)) to avoid repaint */
  background: linear-gradient(90deg, rgba(139,92,246,0.1), rgba(15,15,18,0.4) 40%, transparent);
  border-bottom-color: rgba(139,92,246,0.25);
  overflow: hidden;
  /* PERF: Static inset shadow */
  box-shadow: inset 0 0 20px rgba(139,92,246,0.06);
  /* GPU layer promotion */
  will-change: transform;
  transform: translateZ(0);
}

/* Divine Light Aurora Background for Playing Item */
/* PERF: No filter:blur — use soft radial-gradient edges instead.
   Only opacity is beat-driven → compositor-only animation. */
.song-item.playing::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 80%;
  height: 200%;
  background:
    radial-gradient(ellipse 40% 50% at 50% 50%, rgba(139,92,246,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,85,247,0.15) 0%, transparent 70%);
  /* PERF: Only opacity driven by beat var (cheap compositor animation) */
  opacity: calc(0.5 + var(--beat,0) * 0.4);
  animation: itemAurora 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  /* Hardware acceleration */
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Divine Light Shine/Glow Line */
/* PERF: Static box-shadow, pulse opacity only */
.song-item.playing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    rgba(168,85,247,0.4),
    rgba(139,92,246,1),
    rgba(168,85,247,0.4)
  );
  /* PERF: Static shadow — no calc() */
  box-shadow: 0 0 12px rgba(139,92,246,0.6);
  z-index: 1;
  /* Pulse opacity instead of shadow spread */
  opacity: calc(0.7 + var(--beat,0) * 0.3);
  will-change: opacity;
}

@keyframes itemAurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(5%, 5%, 0) rotate(2deg) scale(1.1); }
}

.song-item.playing > * {
  position: relative;
  z-index: 2;
}

/* Thumbnail */
.song-thumb{width:44px;height:44px;border-radius:var(--rs);background:linear-gradient(135deg,#4c1d95,#6d28d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;cursor:pointer;overflow:hidden;transition:.2s}
.song-thumb i.note{font-size:16px;color:rgba(255,255,255,.5);transition:.15s}
.song-thumb .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);opacity:0;transition:.15s;font-size:15px;color:#fff}
.song-thumb:hover .play-overlay{opacity:1}
.song-thumb:hover i.note{opacity:0}
/* PERF: Static shadow + subtle scale pulse via transform (compositor-only) */
.song-item.playing .song-thumb{
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(139,92,246,0.4);
  transform: scale(calc(1 + var(--beat,0) * 0.02));
  will-change: transform;
}
.song-item.playing .song-thumb .play-overlay{opacity:1;background:rgba(139,92,246,.5)}

/* Song info */
.song-body{flex:1;min-width:0;cursor:pointer}
.song-title{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.song-item.playing .song-title{color:var(--accent-h)}
.song-meta{font-size:11.5px;color:var(--t4);display:flex;align-items:center;gap:4px;margin-top:2px;white-space:nowrap;overflow:hidden}
.song-meta .dot{margin:0 2px}

/* Song actions */
.song-acts{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:.15s}
.song-item:hover .song-acts{opacity:1}
.song-act{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--t4);cursor:pointer;border-radius:var(--rs);transition:.15s;font-size:12px}
.song-act:hover{color:var(--t1);background:var(--bg-4)}
.song-act.del:hover{color:var(--red)}

/* Song detail (expandable) */
.song-detail{display:none;padding:0 20px 12px 76px;background:var(--bg-2);border-bottom:1px solid var(--b1);animation:fadeIn .15s ease}
.song-detail.open{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.det-label{font-size:10.5px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.det-text{font-size:12.5px;color:var(--t2);line-height:1.55;margin-bottom:10px;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow-y:auto}
.det-text.mono{font-family:var(--mono);font-size:12px}
.det-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--t4);padding-top:6px;border-top:1px solid var(--b1)}
.det-meta span{display:flex;align-items:center;gap:4px}
.det-meta i{font-size:10px}

/* ===== Player Bar ===== */
.player{
  display:none;flex-direction:column;flex-shrink:0;z-index:10;
  position:relative;
  /* Frosted glass */
  background:rgba(15,15,18,.72);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-top:1px solid rgba(139,92,246,.12);
  box-shadow:0 -4px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.player.on{display:flex}

/* Rhythm glow layer — driven by JS --beat var */
/* PERF: Only opacity is beat-driven → compositor-only update */
.pl-glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:var(--beat,0);
  /* PERF: Removed transition — JS sets this every frame via rAF already */
  background:
    radial-gradient(ellipse 60% 160% at 50% 100%, rgba(139,92,246,.35) 0%, transparent 70%),
    radial-gradient(ellipse 40% 120% at 30% 100%, rgba(99,102,241,.2) 0%, transparent 60%),
    radial-gradient(ellipse 40% 120% at 70% 100%, rgba(168,85,247,.2) 0%, transparent 60%);
  transform:translateZ(0);
  will-change:opacity;
  contain:layout style;
}
/* Subtle ambient shimmer when playing */
.player.on .pl-glow::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(139,92,246,.06) 25%,
    rgba(168,85,247,.08) 50%,
    rgba(139,92,246,.06) 75%,
    transparent 100%);
  background-size:200% 100%;
  animation:plShimmer 6s ease-in-out infinite;
  will-change:background-position;
}
@keyframes plShimmer{
  0%,100%{background-position:200% 0}
  50%{background-position:-200% 0}
}

/* Top edge glow line */
/* PERF: Static gradient — beat variation removed (imperceptible at 1px).
   Saves recalc+paint on every frame. */
.player::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:1;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(139,92,246,.3) 20%,
    rgba(168,85,247,.5) 50%,
    rgba(139,92,246,.3) 80%,
    transparent 100%);
  /* PERF: Pulse opacity instead of repainting gradient */
  opacity:calc(.5 + var(--beat,0) * .5);
  will-change:opacity;
}

/* Seek bar at top */
.pl-seek-wrap{height:4px;position:relative;cursor:pointer;transition:height .1s;z-index:2}
.pl-seek-wrap:hover{height:6px}
/* Effect Canvas – GPU accelerated */
.pl-effect{
  position:absolute;
  bottom:2px;
  left:0;
  width:600px;
  height:600px;
  transform:translate(-50%, 0);
  pointer-events:none;
  z-index:20;
  opacity:0;
  mix-blend-mode:screen;
  will-change:opacity,left;
  contain:layout style;
}

.pl-seek{-webkit-appearance:none;appearance:none;width:100%;height:100%;background:var(--bg-4);margin:0;padding:0;display:block;cursor:pointer;outline:none;border:none}
.pl-seek::-webkit-slider-runnable-track{height:100%;background:transparent}
.pl-seek::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--t1);border-radius:50%;opacity:0;margin-top:-3px;cursor:pointer;transition:opacity .15s}
.pl-seek-wrap:hover .pl-seek::-webkit-slider-thumb{opacity:1}

/* Main player row */
.pl-main{display:flex;align-items:center;height:calc(var(--player) - 4px);padding:0 16px;gap:12px;position:relative;z-index:2}

/* Player info */
.pl-info{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pl-cover{
  width:42px;height:42px;
  background:linear-gradient(135deg,#4c1d95,#6d28d9);
  border-radius:var(--rs);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:rgba(255,255,255,.6);flex-shrink:0;
  box-shadow:0 2px 8px rgba(109,40,217,.3);
  transition:box-shadow .3s;
  position:relative;
}
.pl-cover i.fa-music{
  transition:opacity .2s;
}
.pl-cover.playing i.fa-music{
  opacity:0;
}
.pl-cover.playing::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  border-left:8px solid #fff;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  margin-left:2px;
}
.player.on .pl-cover{box-shadow:0 2px 12px rgba(139,92,246,.4)}
.pl-text{min-width:0;flex:1}
.pl-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sub{font-size:10.5px;color:var(--t4)}

/* Center controls */
.pl-center{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pl-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--t3);cursor:pointer;border-radius:50%;transition:.15s;font-size:13px}
.pl-btn:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.pl-play-btn{
  width:40px;height:40px;
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  color:#fff;font-size:14px;border-radius:50%;
  box-shadow:0 2px 12px rgba(139,92,246,.35);
  transition:all .2s;
}
.pl-play-btn:hover{background:linear-gradient(135deg,#a78bfa,#8b5cf6);color:#fff;transform:scale(1.08);box-shadow:0 4px 20px rgba(139,92,246,.5)}

/* Right section */
.pl-right{display:flex;align-items:center;gap:12px;flex:1;justify-content:flex-end}
.pl-time{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Volume Control (Modern Flat) ── */
.pl-vol-wrap{display:flex;align-items:center;gap:6px}
.pl-vol-btn{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}
.pl-vol-btn:hover{color:var(--accent-h);background:rgba(139,92,246,.08)}

/* Slider container */
.pl-vol-slider{position:relative;width:84px;height:24px;display:flex;align-items:center}
/* Background track */
.pl-vol-slider::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:4px;background:var(--bg-4);border-radius:99px;pointer-events:none}
/* Volume fill bar (display bar) */
.pl-vol-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;width:80%;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-h) 100%);border-radius:99px;pointer-events:none;z-index:1;transition:width .08s linear}
/* Glow on fill end */
.pl-vol-fill::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--accent-h);border-radius:50%;opacity:.5;filter:blur(3px);pointer-events:none}
/* Range input (transparent overlay) */
.pl-vol{position:relative;-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;outline:none;cursor:pointer;z-index:2;margin:0;padding:0}
.pl-vol::-webkit-slider-runnable-track{height:4px;background:transparent;border-radius:99px}
.pl-vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--t1);border-radius:50%;cursor:pointer;margin-top:-5px;box-shadow:0 0 0 3px rgba(139,92,246,.18),0 1px 6px rgba(0,0,0,.3);transition:all .2s ease;opacity:0}
.pl-vol-wrap:hover .pl-vol::-webkit-slider-thumb{opacity:1}
.pl-vol::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px rgba(139,92,246,.25),0 2px 10px rgba(0,0,0,.4)}
.pl-vol::-webkit-slider-thumb:active{transform:scale(1.1);box-shadow:0 0 0 5px rgba(139,92,246,.35),0 2px 12px rgba(0,0,0,.5)}
/* Firefox */
.pl-vol::-moz-range-track{height:4px;background:transparent;border:none;border-radius:99px}
.pl-vol::-moz-range-thumb{width:14px;height:14px;background:var(--t1);border-radius:50%;border:none;cursor:pointer;box-shadow:0 0 0 3px rgba(139,92,246,.18),0 1px 6px rgba(0,0,0,.3);opacity:0;transition:all .2s ease}
.pl-vol-wrap:hover .pl-vol::-moz-range-thumb{opacity:1}
.pl-vol::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px rgba(139,92,246,.25),0 2px 10px rgba(0,0,0,.4)}

/* ===== Toast ===== */
#toast{position:fixed;top:60px;right:16px;z-index:999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{padding:10px 16px;border-radius:var(--r);font-size:12.5px;color:#fff;max-width:340px;pointer-events:auto;display:flex;align-items:center;gap:8px;animation:tin .25s ease;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.toast i{font-size:14px;flex-shrink:0}
.toast.ok{background:#166534}.toast.err{background:#991b1b}.toast.inf{background:#1e3a5f}
@keyframes tin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes tout{from{opacity:1}to{opacity:0;transform:translateX(30px)}}

/* ===== Responsive ===== */
@media(max-width:880px){
  /* ── Mobile Tab Bar ── */
  .mob-tabs{
    display:flex;flex-shrink:0;
    background:var(--bg-1);border-bottom:1px solid var(--b1);
    padding:6px 10px;gap:6px;
  }
  .mob-tab{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 0;font-size:13px;font-weight:500;
    color:var(--t3);background:transparent;
    border:1px solid transparent;border-radius:var(--r);
    cursor:pointer;transition:.2s;
  }
  .mob-tab i{font-size:12px}
  .mob-tab.on{color:var(--t1);background:var(--bg-3);border-color:var(--b1)}
  .mob-tab:active{transform:scale(.97)}

  /* ── Switchable layout: panel toggles, ws-wrap always rendered (player stays visible) ── */
  .body{flex-direction:column}
  .panel{width:100%;flex:1 1 0;border-right:none;max-height:none;display:none;overflow:hidden}
  .panel.mob-on{display:flex}
  .ws-wrap{flex:0 0 auto;min-height:0}
  .ws-wrap.mob-on{flex:1 1 0}
  .ws-wrap:not(.mob-on) .workspace{display:none}

  :root{--sidebar:100%}
  .pl-name{max-width:45vw}
  .pl-vol-wrap{display:none}
}
@media(max-width:540px){
  .adv-grid{grid-template-columns:1fr}
  .mode-bar{flex-wrap:wrap}

  /* ── Mobile stage: HEAVY perf savings ── */
  /* Reduce blur radius for mobile GPU */
  .stage-aurora::before{filter:blur(20px);animation-duration:22s}
  .stage-aurora::after{filter:blur(25px);animation-duration:28s}
  .stage-freq{min-height:80px;max-height:180px}

  /* Disable playing item aurora pseudo on mobile — saves a composited layer + blend */
  .song-item.playing::before{display:none}
  .song-item.playing{
    background:linear-gradient(90deg, rgba(139,92,246,0.12), transparent 50%);
    box-shadow:none;
  }
  .song-item.playing::after{
    box-shadow:none;
    width:2px;
    opacity:1;
  }
  .song-item.playing .song-thumb{
    transform:none !important;
    will-change:auto;
    box-shadow:0 0 0 2px var(--accent);
  }

  /* ── Mobile Player: two-row, spacious, touch-friendly ── */
  .pl-main{
    flex-wrap:wrap;height:auto;
    padding:10px 16px 12px;gap:0;
  }
  /* Row 1: song name left + time right */
  .pl-info{order:1;flex:1 1 0;min-width:0}
  .pl-cover{display:none}
  .pl-sub{display:none}
  .pl-name{max-width:none;font-size:13px;line-height:1.35}
  .pl-right{order:2;flex:0 0 auto;justify-content:flex-end}
  .pl-time{font-size:11px;color:var(--t2)}
  /* Row 2: centred controls, generous touch targets */
  .pl-center{order:3;flex:0 0 100%;justify-content:center;gap:16px;padding-top:8px}
  .pl-play-btn{width:46px;height:46px;font-size:18px;box-shadow:0 2px 16px rgba(139,92,246,.4)}
  .pl-btn{width:40px;height:40px;font-size:16px}

  /* ── Workspace compact ── */
  .ws-top{padding:10px 14px}
  .ws-empty{padding:20px}
  .ws-empty i{font-size:36px}
  .ws-empty p{font-size:12px}
  .song-item{padding:8px 14px;gap:10px}
  .song-thumb{width:38px;height:38px}
  .song-detail{padding:0 14px 10px 62px}
}
@media(max-width:380px){
  .pl-name{font-size:12px}
  .pl-right{display:none}
  .header{padding:0 8px}
  .h-link{font-size:11.5px;padding:5px 7px}
  .logo{font-size:14px}
  .logo-tag{font-size:10px;padding:1px 6px}
}