:root {
  --bg:#0b0b0f;--bg2:#14141b;--bg3:#1d1d26;
  --surface:rgba(255,255,255,0.07);--surface2:rgba(255,255,255,0.12);
  --border:rgba(255,255,255,0.12);--border2:rgba(255,255,255,0.22);
  --text:#f5f5f7;--text2:rgba(245,245,247,0.68);--text3:rgba(245,245,247,0.40);
  --accent:#fa243c;--accent2:#ff5a7a;
  --radius:18px;--radius-sm:12px;
  --player-h:74px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --safe-t-env:env(safe-area-inset-top,0px);
  --ui-safe-top:calc(var(--safe-t-env) + 10px);--ui-safe-list-top:calc(var(--safe-t-env) + 26px);
  --dyn1:#37162f;--dyn2:#182035;
  --font:-apple-system,'SF Pro Display','Helvetica Neue',sans-serif;
}
@media(prefers-color-scheme:light){
  :root{--bg:#f5f5f7;--bg2:#ffffff;--bg3:#ececf2;
    --surface:rgba(0,0,0,0.045);--surface2:rgba(0,0,0,0.085);
    --border:rgba(0,0,0,0.12);--border2:rgba(0,0,0,0.20);
    --text:#161618;--text2:rgba(22,22,24,0.60);--text3:rgba(22,22,24,0.38);
    --dyn1:#ffe2ea;--dyn2:#dbe3ff;}
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text);user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:100%;}

/* ── Dynamic BG ── */
#dyn-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,var(--dyn1) 0%,transparent 60%),
             radial-gradient(ellipse at 70% 80%,var(--dyn2) 0%,transparent 60%),var(--bg);
  transition:background 1.2s ease;}

/* ── App shell ── */
#app{position:fixed;inset:0;z-index:1;display:flex;overflow:hidden;}
#sidebar{width:280px;background:color-mix(in srgb,var(--bg2) 88%, transparent);border-right:.5px solid var(--border);
  backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);
  padding:calc(var(--ui-safe-top) + 8px) 16px calc(22px + var(--safe-b));overflow-y:auto;flex-shrink:0;}
#main-pane{flex:1;display:flex;flex-direction:column;min-width:0;}
.sidebar-title{font-size:38px;font-weight:800;letter-spacing:-0.8px;line-height:1.05;margin:8px 10px 18px;white-space:nowrap;}
.side-head{font-size:13px;color:var(--text2);font-weight:700;margin:18px 10px 8px;}
.side-group{display:flex;flex-direction:column;gap:6px;}
.side-btn{border:none;background:none;color:var(--text);text-align:left;font-family:var(--font);font-size:20px;
  line-height:1.25;padding:10px 12px;border-radius:11px;cursor:pointer;transition:background .15s,color .15s;}
.side-btn.active{background:var(--accent);color:#fff;font-weight:700;}
.side-btn:active{opacity:.7;}
.side-add{color:var(--accent);font-weight:600;}
#sidebar-playlists{display:flex;flex-direction:column;gap:4px;}
.sidebar-playlist-btn{font-size:17px;padding:8px 12px;}

/* ── Header ── */
#header{padding:calc(var(--ui-safe-top) + 8px) 22px 0;flex-shrink:0;}
.header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.header-left{display:flex;align-items:center;gap:10px;min-width:0;}
.app-title{font-size:40px;font-weight:800;letter-spacing:-0.9px;}
.sidebar-toggle{display:none;border:none;background:var(--surface);color:var(--text);width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;cursor:pointer;}
.header-actions{display:flex;gap:10px;align-items:center;}
#import-label{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:22px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;
  transition:opacity .15s,transform .15s;}
#import-label:active{opacity:.8;transform:scale(.96);}
#file-input{display:none;}

/* ── Search ── */
#search-wrap{padding:12px 22px 10px;flex-shrink:0;}
#search{width:100%;padding:10px 16px 10px 38px;border:none;border-radius:12px;
  background:var(--surface2);color:var(--text);font-size:15px;font-family:var(--font);outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(140,140,160,0.8)' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;}
#search::placeholder{color:var(--text3);}

/* ── Content ── */
#content{flex:1;overflow:hidden;position:relative;}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  padding:12px 18px 0;padding-bottom:calc(var(--player-h) + 24px + var(--safe-b));
  display:none;-webkit-overflow-scrolling:touch;}
.view.active{display:block;}
.section-title{font-size:20px;font-weight:700;padding:14px 4px 10px;}

/* ── Albums grid ── */
#albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding-bottom:8px;}
.album-card{cursor:pointer;border-radius:var(--radius);overflow:hidden;background:var(--surface);
  transition:transform .18s;position:relative;}
.album-card:active{transform:scale(.95);}
.album-art-wrap{width:100%;aspect-ratio:1;background:var(--surface2);overflow:hidden;position:relative;}
.album-art-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.album-art-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:40px;color:var(--text3);background:linear-gradient(135deg,var(--surface2),var(--surface));}
.album-info{padding:8px 10px 10px;}
.album-name{font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.album-sub{font-size:12px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Song rows ── */
.song-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .15s;}
.song-row:active{background:var(--surface);}
.song-row.playing .song-title{color:var(--accent);}
.song-thumb{width:48px;height:48px;border-radius:8px;flex-shrink:0;overflow:hidden;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text3);position:relative;}
.song-thumb img{width:100%;height:100%;object-fit:cover;}
.play-ind{position:absolute;inset:0;background:rgba(252,60,68,.6);
  display:none;align-items:center;justify-content:center;}
.song-row.playing .play-ind{display:flex;}
.bars{display:flex;align-items:flex-end;gap:2px;height:16px;}
.bar{width:3px;background:#fff;border-radius:2px;animation:eq .8s ease-in-out infinite;}
.bar:nth-child(2){animation-delay:.2s;}.bar:nth-child(3){animation-delay:.4s;}
@keyframes eq{0%,100%{height:4px;}50%{height:14px;}}
.song-info{flex:1;min-width:0;}
.song-title{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.song-meta{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.song-dur{font-size:13px;color:var(--text3);flex-shrink:0;}
.divider{height:.5px;background:var(--border);margin:4px 0;}

/* ── Artists ── */
.artist-row{display:flex;align-items:center;gap:14px;padding:10px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;}
.artist-row:active{background:var(--surface);}
.artist-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0;}
.artist-name{font-size:16px;font-weight:500;}.artist-count{font-size:13px;color:var(--text2);margin-top:2px;}

/* ── Playlists ── */
.playlist-row{display:flex;align-items:center;gap:14px;padding:10px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;}
.playlist-row:active{background:var(--surface);}
.pl-thumb{width:52px;height:52px;border-radius:10px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#9b59b6);
  display:flex;align-items:center;justify-content:center;font-size:22px;}
.pl-thumb img{width:100%;height:100%;object-fit:cover;}
.pl-name{font-size:16px;font-weight:500;}.pl-count{font-size:13px;color:var(--text2);margin-top:2px;}
#pl-add-btn{display:flex;align-items:center;gap:8px;padding:12px 4px;cursor:pointer;
  font-size:16px;color:var(--accent);font-weight:500;}

/* ── Empty / Drop zone ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:60vh;gap:16px;text-align:center;padding:24px;}
#drop-zone{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:40px 32px;border:2px dashed var(--border);border-radius:24px;cursor:pointer;
  transition:border-color .2s,background .2s;width:100%;max-width:320px;}
#drop-zone:active,#drop-zone.drag-over{border-color:var(--accent);background:rgba(252,60,68,.06);}
.drop-icon{font-size:56px;}.drop-title{font-size:20px;font-weight:700;}
.drop-sub{font-size:14px;color:var(--text2);line-height:1.6;text-align:center;}
.drop-btn{margin-top:4px;padding:10px 24px;background:var(--accent);color:#fff;border-radius:22px;font-size:15px;font-weight:600;}

/* ── Mini player ── */
#mini-player{position:fixed;bottom:calc(var(--safe-b) + 14px);left:14px;right:14px;
  height:var(--player-h);background:color-mix(in srgb,var(--bg2) 78%, transparent);
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  border:.5px solid var(--border);border-radius:18px;
  display:flex;align-items:center;gap:12px;padding:0 12px;
  z-index:100;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:opacity .3s,transform .3s;}
@media(prefers-color-scheme:light){#mini-player{background:rgba(240,240,248,.88);}}
[data-layout="landscape"] #mini-player{left:calc(280px + 22px);}
#mini-player.hidden{opacity:0;transform:translateY(120%);pointer-events:none;}
.mini-art{width:48px;height:48px;border-radius:10px;overflow:hidden;flex-shrink:0;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:20px;}
.mini-art img{width:100%;height:100%;object-fit:cover;}
.mini-info{flex:1;min-width:0;}
.mini-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-artist{font-size:12px;color:var(--text2);}
.mini-ctrls{display:flex;gap:4px;}
.mini-btn{width:36px;height:36px;border:none;border-radius:50%;background:none;color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:opacity .15s;}
.mini-btn:active{opacity:.5;}
.mini-prog{position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:0 0 18px 18px;overflow:hidden;}
.mini-prog-bar{height:100%;width:0%;background:var(--accent);transition:width .5s linear;}

/* ── Full player ── */
#full-player{position:fixed;inset:0;z-index:200;background:var(--bg);
  transform:translateY(100%);transition:transform .45s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow:hidden;}
#full-player.open{transform:translateY(0);}
.fp-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,var(--dyn1) 0%,transparent 60%),
             radial-gradient(ellipse at 50% 100%,var(--dyn2) 0%,transparent 50%),var(--bg);
  transition:background 1.2s ease;}
.fp-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);}
@media(prefers-color-scheme:light){.fp-bg::after{background:rgba(255,255,255,.4);}}
.fp-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  padding:0 24px;padding-top:calc(var(--safe-t) + 8px);padding-bottom:calc(var(--safe-b) + 14px);overflow:hidden;}
.fp-handle-wrap{display:flex;justify-content:center;padding:6px 0 14px;}
.fp-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);}
.fp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.fp-close,.fp-queue-btn{width:32px;height:32px;border:none;border-radius:50%;
  background:var(--surface);color:var(--text2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;}
.fp-title-small{font-size:15px;font-weight:600;color:var(--text2);}

.fp-art-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:4px 0;}
.fp-art{width:min(calc(100vw - 80px),300px);height:min(calc(100vw - 80px),300px);
  border-radius:22px;overflow:hidden;background:var(--surface2);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;font-size:80px;color:var(--text3);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);flex-shrink:0;}
.fp-art.paused{transform:scale(.90);}
.fp-art.playing{animation:artPulse 2.8s ease-in-out infinite;}
.fp-art img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes artPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}

.fp-song-info{display:flex;align-items:flex-start;justify-content:space-between;margin:16px 0 6px;}
.fp-song-text{flex:1;min-width:0;}
.fp-song-title{font-size:21px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-song-artist{font-size:15px;color:var(--accent);margin-top:3px;}
.fp-love-btn{width:36px;height:36px;border:none;background:none;color:var(--text3);font-size:22px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
  transition:transform .2s,color .2s;}
.fp-love-btn.loved{color:var(--accent);}
.fp-love-btn:active{transform:scale(.8);}

.fp-seek-wrap{margin:6px 0;}
#seek-bar{width:100%;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--surface2);border-radius:2px;cursor:pointer;outline:none;}
#seek-bar::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--text);box-shadow:0 0 4px rgba(0,0,0,.3);margin-top:-6px;}
#seek-bar::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--text) 0%,var(--text) var(--seek-pct,0%),var(--surface2) var(--seek-pct,0%));}
.fp-time-row{display:flex;justify-content:space-between;margin-top:4px;}
.fp-time{font-size:12px;color:var(--text3);}

.fp-controls{display:flex;align-items:center;justify-content:space-between;margin:12px 0;}
.fp-ctrl{width:44px;height:44px;border:none;background:none;color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity .15s;border-radius:50%;flex-shrink:0;}
.fp-ctrl:active{opacity:.5;}
.fp-ctrl.active{color:var(--accent);}
#fp-play-btn{width:64px;height:64px;border-radius:50%;background:var(--text);color:var(--bg);}

.fp-vol-row{display:flex;align-items:center;gap:10px;margin:0 0 8px;}
.fp-vol-icon{color:var(--text3);flex-shrink:0;}
#vol-bar{flex:1;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--surface2);border-radius:2px;cursor:pointer;outline:none;}
#vol-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text);margin-top:-5px;}
#vol-bar::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--text2) 0%,var(--text2) var(--vol-pct,80%),var(--surface2) var(--vol-pct,80%));}


@media (min-width: 834px){
  #header{padding-left:28px;padding-right:28px;}
  #search-wrap{padding-left:28px;padding-right:28px;}
  .view{padding-left:24px;padding-right:24px;}
  #albums-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;}
}
@media (max-width: 900px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:350;transform:translateX(-102%);transition:transform .25s ease;
    border-right:.5px solid var(--border);}
  #sidebar.open{transform:translateX(0);}
  .sidebar-toggle{display:inline-flex;}
  .app-title{font-size:30px;}
}
/* ── Queue panel ── */
#queue-panel{position:fixed;inset:0;z-index:210;background:var(--bg);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);
  display:flex;overflow:hidden;}
#queue-panel.open{transform:translateY(0);}
#queue-panel.preview{transform:translateY(56%);}

/* vertical: top=now playing, bottom=list */
#queue-now{flex-shrink:0;padding:calc(var(--ui-safe-top)+8px) 20px 16px;
  border-bottom:.5px solid var(--border);background:var(--bg2);}
#queue-list-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#queue-list{padding:8px 0 calc(var(--safe-b)+20px);}
[data-layout="landscape"] #queue-panel.open:not(.preview) #queue-list{padding-top:calc(var(--ui-safe-top) + 10px);}

/* landscape: left=now playing, right=list */
[data-layout="landscape"] #queue-panel{flex-direction:row;}
[data-layout="landscape"] #queue-now{border-bottom:none;border-right:.5px solid var(--border);
  width:40%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--ui-safe-top)+8px) 24px calc(var(--safe-b)+12px);}
[data-layout="landscape"] #queue-list-wrap{flex:1;}

.queue-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;position:sticky;top:0;background:var(--bg2);z-index:2;padding-top:4px;}
.queue-title{font-size:20px;font-weight:700;}
.queue-close{border:none;background:none;
  color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:4px 8px 4px 0;}
.queue-now-art{width:140px;height:140px;border-radius:16px;overflow:hidden;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;
  font-size:50px;flex-shrink:0;margin:0 auto 14px;}
[data-layout="landscape"] .queue-now-art{width:120px;height:120px;}
[data-layout="landscape"] #queue-panel.preview{transform:translateY(52%);flex-direction:column;}
[data-layout="landscape"] #queue-panel.preview #queue-now{
  width:auto;border-right:none;border-bottom:.5px solid var(--border);padding:calc(var(--ui-safe-top)+2px) 18px 10px;
  display:grid;grid-template-columns:140px 1fr;grid-template-areas:"art title" "art artist" "art ctrls" "art prog";
  gap:8px 14px;align-items:center;justify-content:stretch;
}
[data-layout="landscape"] #queue-panel.preview .queue-now-art{grid-area:art;width:140px;height:140px;margin:0;}
[data-layout="landscape"] #queue-panel.preview .queue-now-title{grid-area:title;text-align:left;margin-bottom:0;}
[data-layout="landscape"] #queue-panel.preview .queue-now-artist{grid-area:artist;text-align:left;}
[data-layout="landscape"] #queue-panel.preview .queue-now-ctrls{grid-area:ctrls;justify-content:flex-start;margin-top:0;}
[data-layout="landscape"] #queue-panel.preview .queue-now-prog{grid-area:prog;margin:0;}

[data-layout="portrait"] #queue-panel.open:not(.preview) #queue-now{
  padding:calc(var(--ui-safe-top)+6px) 14px 10px;
  display:grid;grid-template-columns:56px 1fr auto;
  grid-template-areas:"art title ctrls" "art artist ctrls" "prog prog prog";
  gap:4px 10px;align-items:center;min-height:108px;
}
[data-layout="portrait"] #queue-panel.open:not(.preview) .queue-now-art{grid-area:art;width:56px;height:56px;margin:0;}
[data-layout="portrait"] #queue-panel.open:not(.preview) .queue-now-title{grid-area:title;text-align:left;margin:0;}
[data-layout="portrait"] #queue-panel.open:not(.preview) .queue-now-artist{grid-area:artist;text-align:left;}
[data-layout="portrait"] #queue-panel.open:not(.preview) .queue-now-ctrls{grid-area:ctrls;margin:0;justify-content:flex-end;}
[data-layout="portrait"] #queue-panel.open:not(.preview) .queue-now-prog{grid-area:prog;margin:2px 0 0;}
.queue-now-art img{width:100%;height:100%;object-fit:cover;}
.queue-now-title{font-size:16px;font-weight:700;text-align:center;margin-bottom:4px;}
.queue-now-artist{font-size:14px;color:var(--text2);text-align:center;}
.queue-now-ctrls{display:flex;justify-content:center;gap:6px;margin-top:10px;}
.queue-now-btn{width:36px;height:36px;border:none;border-radius:50%;background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.queue-now-btn.main{width:42px;height:42px;background:var(--text);color:var(--bg);}
.queue-now-prog{height:4px;background:var(--surface2);border-radius:3px;overflow:hidden;margin:12px 0 2px;}
.queue-now-prog-bar{height:100%;width:0%;background:var(--accent);}

.queue-row{display:flex;align-items:center;gap:10px;padding:8px 16px;
  border-radius:10px;transition:background .15s;cursor:pointer;}
.queue-row:active{background:var(--surface);}
.queue-row.playing{background:rgba(252,60,68,.08);}
.queue-row.playing .q-title{color:var(--accent);}
.q-num{font-size:13px;color:var(--text3);width:22px;text-align:right;flex-shrink:0;}
.q-art{width:40px;height:40px;border-radius:7px;overflow:hidden;flex-shrink:0;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:16px;}
.q-art img{width:100%;height:100%;object-fit:cover;}
.q-info{flex:1;min-width:0;}
.q-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.q-artist{font-size:12px;color:var(--text2);}
.q-dur{font-size:12px;color:var(--text3);flex-shrink:0;}
.q-drag{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  color:var(--text3);cursor:grab;flex-shrink:0;touch-action:none;}
.q-drag:active{cursor:grabbing;}
.queue-row.drag-over-top{border-top:2px solid var(--accent);}
.queue-row.drag-over-bot{border-bottom:2px solid var(--accent);}

/* ── Album detail sheet ── */
#album-detail{position:fixed;inset:0;z-index:190;background:var(--bg);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow:hidden;}
#album-detail.open{transform:translateY(0);}
.ad-header{flex-shrink:0;padding:0 20px 0;background:var(--bg2);}
.detail-safe-top{height:calc(var(--ui-safe-list-top) + 8px);}
.ad-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.ad-back{width:32px;height:32px;border:none;border-radius:50%;background:var(--surface);
  color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ad-art{width:70px;height:70px;border-radius:12px;overflow:hidden;flex-shrink:0;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:28px;}
.ad-art img{width:100%;height:100%;object-fit:cover;}
.ad-info{flex:1;min-width:0;}
.ad-album-name{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ad-album-sub{font-size:13px;color:var(--text2);margin-top:2px;}
.ad-actions{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.ad-play-btn{padding:12px 18px;border:none;border-radius:16px;background:var(--accent);color:#fff;
  font-size:17px;font-weight:700;cursor:pointer;font-family:var(--font);
  display:flex;align-items:center;justify-content:center;gap:8px;min-width:140px;}
.ad-play-btn.large{flex:1;min-height:48px;}
.ad-chip-btn{padding:11px 14px;border:.5px solid var(--border2);border-radius:14px;background:var(--surface);
  color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);
  display:flex;align-items:center;gap:6px;transition:background .18s,color .18s,border-color .18s;}
.ad-chip-btn:active{opacity:.75;}
.ad-chip-btn.is-on{background:color-mix(in srgb,var(--accent) 20%, transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 52%, var(--border2));}
.ad-songs{flex:1;overflow-y:auto;padding:16px 16px 0;padding-bottom:calc(var(--safe-b)+20px);
  -webkit-overflow-scrolling:touch;}
.detail-list-label{font-size:13px;font-weight:700;color:var(--text2);padding:0 4px 10px;letter-spacing:.02em;}

/* ── Playlist detail sheet ── */
#pl-detail{position:fixed;inset:0;z-index:190;background:var(--bg);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow:hidden;}
#pl-detail.open{transform:translateY(0);}
.pld-header{flex-shrink:0;padding:0 20px 0;background:var(--bg2);}
.pld-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.pld-art{width:70px;height:70px;border-radius:12px;overflow:hidden;flex-shrink:0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#9b59b6);
  display:flex;align-items:center;justify-content:center;font-size:28px;}
.pld-art img{width:100%;height:100%;object-fit:cover;}
.pld-info{flex:1;min-width:0;}
.pld-name-input{font-size:18px;font-weight:700;background:none;border:none;color:var(--text);
  font-family:var(--font);width:100%;outline:none;padding:0;}
.pld-count{font-size:13px;color:var(--text2);margin-top:2px;}
.pld-actions{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.pld-del-btn{padding:10px 14px;border:.5px solid var(--border2);border-radius:12px;background:var(--surface);
  color:#e74c3c;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font);}
.pld-songs{flex:1;overflow-y:auto;padding:16px 16px 0;padding-bottom:calc(var(--safe-b)+20px);
  -webkit-overflow-scrolling:touch;}
.pld-add-songs{padding:12px 4px;display:flex;align-items:center;gap:8px;
  font-size:15px;color:var(--accent);cursor:pointer;font-weight:500;}

/* ── Add-to-playlist picker ── */
#pl-picker{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:flex-end;}
#pl-picker.open{display:flex;}
.pl-picker-sheet{width:100%;background:var(--bg2);border-radius:20px 20px 0 0;
  padding:20px 20px calc(var(--safe-b)+20px);max-height:70vh;overflow-y:auto;}
.pl-picker-title{font-size:18px;font-weight:700;margin-bottom:16px;}
.pl-picker-row{display:flex;align-items:center;gap:12px;padding:10px 0;cursor:pointer;}
.pl-picker-row:active{opacity:.7;}
.pl-picker-thumb{width:44px;height:44px;border-radius:9px;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#9b59b6);
  display:flex;align-items:center;justify-content:center;font-size:18px;}
.pl-picker-thumb img{width:100%;height:100%;object-fit:cover;}
.pl-picker-new{color:var(--accent);font-size:15px;font-weight:600;padding:8px 0;}

/* ── Add songs to playlist picker ── */
#song-picker{position:fixed;inset:0;z-index:310;background:rgba(0,0,0,.65);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:flex-end;}
#song-picker.open{display:flex;}
.song-picker-sheet{width:100%;background:var(--bg2);border-radius:20px 20px 0 0;
  padding:20px 20px calc(var(--safe-b)+20px);max-height:80vh;overflow-y:auto;}
.song-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.song-picker-title{font-size:18px;font-weight:700;}
.song-picker-done{padding:7px 18px;border:none;border-radius:18px;background:var(--accent);
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);}
.song-pick-row{display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer;}
.sp-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;}
.sp-check.checked{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ── Loading overlay ── */
#loading-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.65);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;align-items:center;justify-content:center;}
#loading-card{background:var(--bg2);border:.5px solid var(--border);border-radius:20px;
  padding:28px 28px 24px;width:min(320px,88vw);display:flex;flex-direction:column;align-items:center;gap:14px;}
.loading-spinner{width:36px;height:36px;border:3px solid var(--surface2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#loading-main{font-size:16px;font-weight:600;}
#loading-detail{width:100%;display:flex;flex-direction:column;gap:8px;}
#loading-file{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
#loading-prog-wrap{width:100%;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden;}
#loading-prog-bar{height:100%;width:0%;background:var(--accent);border-radius:3px;transition:width .25s ease;}
#loading-count-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text3);}

/* ── Toast ── */
#toast{position:fixed;bottom:calc(var(--player-h) + 30px + var(--safe-b));
  left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--bg2);color:var(--text);padding:10px 20px;border-radius:22px;
  font-size:14px;font-weight:500;border:.5px solid var(--border);
  opacity:0;pointer-events:none;z-index:500;transition:opacity .3s,transform .3s;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

::-webkit-scrollbar{width:0;}