/* ═══════════════════════════════════════════════════════
   main.css — Musio Music Player
   Generated from index.html
═══════════════════════════════════════════════════════ */

:root {
  --bg:#0a0a14; --bg2:#111120; --bg3:#18182a; --card:#1a1a2e;
  --accent:#7c6aff; --accent2:#a98aff; --glow:rgba(124,106,255,0.3);
  --green:#1ed760; --txt:#f0eeff; --txt2:#9090b0; --txt3:#505070;
  --border:rgba(124,106,255,0.15);
  --nav-h:64px; --mini-h:70px; --safe-b:env(safe-area-inset-bottom,0px);
}


/* ══ FULL PLAYER LYRIC VIEW ══ */
.fp-lyric-view{
  position:absolute;inset:0;z-index:10;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.25,.46,.45,.94);
  padding-top:env(safe-area-inset-top,0px);
}
.fp-lyric-view.open{transform:translateY(0);}
.fp-lyric-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;flex-shrink:0;
  border-bottom: 1px solid transparent;
}
.fp-lyric-song-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.fp-lyric-thumb{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;
}
.fp-lyric-thumb img{width:100%;height:100%;object-fit:cover;}
.fp-lyric-meta{flex:1;min-width:0;}
.fp-lyric-title{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-lyric-artist{font-size:12px;color:var(--txt2);font-weight:600;margin-top:1px;}
.fp-lyric-close{
  width:36px;height:36px;border:none;background:rgba(255,255,255,.08);
  border-radius:10px;color:var(--txt);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fp-lyric-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 24px;
}
.fp-lyric-scroll::-webkit-scrollbar{display:none;}
.fp-lyric-lines{display:flex;flex-direction:column;gap:4px;padding-bottom:60px;}
.fp-lyric-line{
  font-size:18px;font-weight:700;line-height:1.55;
  color:var(--txt3);cursor:pointer;
  transition:color .3s,transform .3s,font-size .3s;
  padding:2px 0;
}
.fp-lyric-line.active{
  color:var(--txt);font-size:22px;font-weight:900;
  transform:translateX(4px);
}
.fp-lyric-line.past{color:var(--txt2);}
.fp-lyric-empty{
  text-align:center;padding:60px 20px;color:var(--txt3);
}
.fp-lyric-empty i{font-size:40px;margin-bottom:14px;display:block;}
.fp-lyric-empty p{font-size:14px;font-weight:600;line-height:1.6;}
.fp-lyric-controls{
  display:flex;align-items:center;justify-content:center;gap:24px;
  padding:10px 0 6px;flex-shrink:0;
}
.fp-lyric-prog-wrap{
  padding:0 20px 16px;flex-shrink:0;
}
.fp-lyric-bar{
  width:100%;height:4px;background:rgba(255,255,255,.15);border-radius:2px;
  cursor:pointer;margin-bottom:6px;touch-action:none;
}
.fp-lyric-fill{height:100%;background:var(--accent2);border-radius:2px;width:0%;transition:width .1s linear;}
.fp-lyric-edit-wrap{
  flex-shrink:0;padding:0 16px 10px;
  border-top:1px solid var(--border);
  padding-top:12px;
}
.fp-lyric-edit-label{font-size:11px;font-weight:800;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
#fp-lyric-btn.active{color:var(--accent2);border-color:var(--accent2);}

/* MARQUEE TITLE */
.marquee-wrap{overflow:hidden;flex:1;min-width:0;}
.marquee-inner{display:inline-block;white-space:nowrap;font-size:20px;font-weight:900;}
.marquee-inner.scrolling{animation:marquee-scroll linear infinite;}
@keyframes marquee-scroll{0%{transform:translateX(0);}100%{transform:translateX(var(--marquee-dist,-100%));}}

/* LYRIC PANEL CSS removed — no lyric-panel element in HTML, using fp-lyric-view instead */

/* THEME PICKER */
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;}
.theme-swatch{aspect-ratio:1;border-radius:14px;cursor:pointer;position:relative;
  border:2px solid transparent;transition:all .2s;overflow:hidden;}
.theme-swatch.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3);}
.theme-swatch-inner{width:100%;height:100%;border-radius:11px;}
.theme-swatch-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;opacity:0;transition:opacity .15s;}
.theme-swatch.active .theme-swatch-check{opacity:1;}
.theme-label{font-size:10px;font-weight:800;text-align:center;color:var(--txt3);margin-top:5px;letter-spacing:.3px;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;touch-action:manipulation;background:#0a0a14;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);overscroll-behavior:none;}

/* AUTH */
#auth-screen{
  position:fixed;inset:0;z-index:999;overflow-y:auto;
  background:radial-gradient(ellipse at 30% 0%,rgba(124,106,255,.3),transparent 55%),
             radial-gradient(ellipse at 80% 100%,rgba(30,215,96,.1),transparent 50%),var(--bg);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
/* Default hidden — JS akan unhide hanya kalau memang belum login */
#auth-screen.hidden{display:none;}

/* SPLASH — blank overlay untuk cegah flicker saat Firebase cek auth */
html.is-pwa #splash{display:none!important;}
#splash{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  transition:opacity .3s;
}
#splash.hide{opacity:0;pointer-events:none;}
#splash.gone{display:none;}

.auth-wrap{width:100%;max-width:400px;}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo .lc{width:68px;height:68px;border-radius:20px;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:0 12px 40px var(--glow);}
.auth-logo h1{font-size:28px;font-weight:900;
  background:linear-gradient(135deg,#fff,var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.auth-logo p{color:var(--txt2);font-size:13px;margin-top:4px;}
.auth-card{background:rgba(24,24,42,.9);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:22px;padding:24px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);}
.auth-tabs{display:flex;gap:4px;background:rgba(255,255,255,.05);
  border-radius:12px;padding:4px;margin-bottom:22px;}
.auth-tab{flex:1;padding:10px;border:none;background:transparent;
  color:var(--txt2);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
  border-radius:10px;cursor:pointer;transition:all .2s;}
.auth-tab.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--glow);}
.fg{margin-bottom:12px;}
.fg label{display:block;font-size:11px;font-weight:800;color:var(--txt3);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;}
.fg input{width:100%;padding:13px 15px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:12px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:15px;outline:none;transition:all .2s;}
.fg input:focus{border-color:var(--accent);background:rgba(124,106,255,.08);}
.btn-main{width:100%;padding:14px;margin-top:4px;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  border:none;border-radius:12px;color:#fff;font-family:'DM Sans',sans-serif;
  font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 20px var(--glow);transition:all .2s;}
.btn-main:active{transform:scale(.97);}
.btn-main:disabled{opacity:.5;pointer-events:none;}
.auth-err{background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.25);
  color:#ff7070;border-radius:10px;padding:10px 14px;font-size:13px;
  font-weight:600;margin-top:10px;display:none;}
.auth-err.show{display:block;}

/* APP */
#app{display:none;flex-direction:column;height:100%;position:relative;}
#app.show{display:flex;}

/* TOPBAR */
.topbar{
  flex-shrink:0;display:flex;align-items:center;
  padding:0 16px;gap:10px;
  background:var(--bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:none;
  z-index:50;overflow:visible;
  padding-top:env(safe-area-inset-top,0px);
  height:calc(60px + env(safe-area-inset-top,0px));
  /* Full bleed: fill the gap above status bar */
  box-shadow:0 -200px 0 200px var(--bg);
  margin-top:calc(-1 * env(safe-area-inset-top,0px));
}
.tb-logo{display:none;}
/* .tb-search-clear → see search.css */

/* Per-page topbar sections */
.tb-section{display:flex;align-items:center;width:100%;gap:10px;}
.tb-logo-text{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px;}
.tb-page-title-only{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.4px;}
.drop{position:absolute;top:calc(100% + 8px);right:0;
  background:var(--bg3);border:1px solid var(--border);border-radius:14px;
  padding:8px;min-width:165px;z-index:400;
  box-shadow:0 16px 48px rgba(0,0,0,.6);display:none;}
.drop{display:none;} /* kept for legacy refs */
.drop-item{padding:11px 13px;border-radius:10px;font-size:13px;font-weight:700;
  color:var(--txt2);cursor:pointer;display:flex;align-items:center;gap:10px;
  transition:all .15s;}
.drop-item:active{background:rgba(255,255,255,.07);color:var(--txt);}
.drop-item.red{color:#ff6b6b;}

/* SCROLL */
.scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--mini-h) + var(--nav-h) + var(--safe-b) + 16px);
  scroll-behavior:smooth;}
.scroll-area::-webkit-scrollbar{display:none;}

/* VIEWS */
.view{display:none;padding:16px 18px;}
.view.active{display:block;}

/* ── TOPBAR tweaks ── */
.tb-page-title{flex:1;font-size:20px;font-weight:900;color:#fff;letter-spacing:-.3px;}

/* ── HOME FILTER TABS (Semua / Musik) ── */
.home-filter-row{
  display:flex;gap:8px;margin-bottom:20px;margin-top:4px;
}
.home-filter-tab{
  padding:6px 16px;border-radius:20px;font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:800;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);
  transition:all .18s;letter-spacing:.1px;
}
.home-filter-tab.active{
  background:#fff;color:#0a0a14;
}
.home-filter-tab:active{opacity:.7;}

/* ── HOME GREETING ── */
.home-greeting{
  margin-bottom:22px;margin-top:4px;
}
.home-greeting h2{
  font-size:26px;font-weight:900;margin-bottom:4px;color:#fff;
  letter-spacing:-.5px;line-height:1.2;
}
.home-greeting p{
  color:rgba(255,255,255,.45);font-size:13px;font-weight:500;
}

/* ── QUICK RESUME GRID (2 col card grid) ── */
.rp-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-bottom:28px;
}
.rp-grid-card{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.08);border-radius:6px;
  padding:4px 10px 4px 4px;cursor:pointer;
  transition:background .15s;overflow:hidden;
  min-height:52px;
}
.rp-grid-card:active{background:rgba(255,255,255,.14);}
.rp-grid-thumb{
  width:52px;height:52px;border-radius:4px;flex-shrink:0;
  object-fit:cover;background:rgba(255,255,255,.06);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.rp-grid-thumb img{width:100%;height:100%;object-fit:cover;}
.rp-grid-title{
  font-size:12px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.rp-grid-artist{
  font-size:11px;color:rgba(255,255,255,.45);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:2px;
}

/* ── EXPLORE VIEW → dipindah ke explore.css ── */

/* HERO */
.hero{padding:6px 2px 22px;margin-bottom:0;position:relative;}
.hero::after{display:none;}
.hero h2{font-size:26px;font-weight:900;margin-bottom:5px;color:#fff;letter-spacing:-.5px;line-height:1.2;}
.hero p{color:rgba(255,255,255,.45);font-size:14px;line-height:1.4;font-weight:500;}

/* SECTIONS */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px;}
.sec-title{font-size:22px;font-weight:900;letter-spacing:-.5px;}
.sec-more{font-size:13px;font-weight:700;color:rgba(255,255,255,.45);cursor:pointer;
  transition:all .15s;}
.sec-more:active{color:#fff;}

/* HORIZONTAL SCROLL CARDS */
.cards-scroll{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 8px 0;margin-bottom:28px;scroll-snap-type:x mandatory;}
.cards-scroll::-webkit-scrollbar{display:none;}
.card{flex-shrink:0;width:152px;background:transparent;border-radius:0;
  padding:0;cursor:pointer;transition:transform .18s;scroll-snap-align:start;border:none;}
.card:active{transform:scale(.95);}
.card-thumb{width:152px;height:152px;border-radius:12px;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:42px;
  margin-bottom:10px;overflow:hidden;position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,.5);}
.card-thumb img{width:100%;height:100%;object-fit:cover;}
.card-play-ov{position:absolute;inset:0;background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;border-radius:12px;opacity:0;
  transition:opacity .15s;}
.card:active .card-play-ov{opacity:1;}
.cpob{width:40px;height:40px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px var(--glow);}
.cpob i{font-size:13px;color:#fff;margin-left:2px;}
.card-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.card-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}

/* ══ CHARTS SCROLL ══ */
.charts-scroll{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 8px 0;margin-bottom:28px;scroll-snap-type:x mandatory;}
.charts-scroll::-webkit-scrollbar{display:none;}
.chart-card{flex-shrink:0;width:130px;cursor:pointer;transition:transform .18s;scroll-snap-align:start;}
.chart-card:active{transform:scale(.94);}
.chart-card-thumb{width:130px;height:130px;border-radius:12px;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:38px;
  overflow:hidden;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.45);margin-bottom:9px;}
.chart-card-thumb img{width:100%;height:100%;object-fit:cover;}
.chart-card-rank{position:absolute;top:7px;left:8px;font-size:12px;font-weight:900;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  color:#fff;padding:2px 7px;border-radius:8px;line-height:1.5;}
.chart-card-rank.gold{background:rgba(255,200,50,.85);color:#000;}
.chart-card-rank.silver{background:rgba(180,180,190,.85);color:#000;}
.chart-card-rank.bronze{background:rgba(200,130,60,.85);color:#000;}
.chart-card-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.chart-card-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.chart-card-plays{font-size:11px;color:rgba(255,255,255,.3);margin-top:3px;font-weight:600;}

/* SONG ROWS */
.song-list{margin-bottom:24px;}
.srow{display:flex;align-items:center;gap:14px;padding:8px 4px;
  border-radius:12px;cursor:pointer;transition:background .15s;}
.srow:active,.srow.playing{background:rgba(255,255,255,.06);}
.srow-num{width:20px;text-align:center;flex-shrink:0;font-size:13px;color:rgba(255,255,255,.3);font-weight:700;}
.srow-thumb{width:56px;height:56px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.4);}
.srow-thumb img{width:100%;height:100%;object-fit:cover;}
.srow-info{flex:1;min-width:0;}
.srow-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.srow-title.ptxt{color:var(--accent2);}
.srow-sub{font-size:13px;color:rgba(255,255,255,.4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.srow-dur{font-size:12px;color:rgba(255,255,255,.3);flex-shrink:0;font-weight:600;}
.del-btn{width:32px;height:32px;border:none;background:transparent;color:var(--txt3);
  font-size:14px;cursor:pointer;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;}
.del-btn:active{background:rgba(255,80,80,.15);color:#ff7070;}
.srow-actions{display:flex;gap:4px;flex-shrink:0;}


/* HIGHLIGHT in search → see search.css (.se-hl) */

/* EQ ANIM */
.eq{display:flex;align-items:flex-end;gap:2px;height:16px;width:18px;}
.eq-b{width:3px;background:var(--accent2);border-radius:1.5px;
  animation:eqb .7s ease-in-out infinite alternate;}
.eq-b:nth-child(1){height:6px;animation-delay:0s;}
.eq-b:nth-child(2){height:14px;animation-delay:.15s;}
.eq-b:nth-child(3){height:9px;animation-delay:.05s;}
.eq-b:nth-child(4){height:12px;animation-delay:.25s;}
@keyframes eqb{from{transform:scaleY(.3);}to{transform:scaleY(1);}}

/* GENRE PILLS → dipindah ke explore.css */

/* MINI PLAYER */
.mini-player{
  position:fixed;left:10px;right:10px;
  bottom:calc(var(--nav-h) + var(--safe-b) + 8px);
  height:var(--mini-h);z-index:105;
  background:rgba(30,25,52,.97);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  display:flex;align-items:center;padding:0 8px 0 10px;gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  transform:translateY(120px);opacity:0;
  pointer-events:none;
  transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .25s;
}
.mini-player.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.mini-thumb{width:44px;height:44px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.4);}
.mini-thumb img{width:100%;height:100%;object-fit:cover;}
.mini-info{flex:1;min-width:0;cursor:pointer;overflow:hidden;}
.mini-marquee-wrap{overflow:hidden;width:100%;}
.mini-title{font-size:14px;font-weight:700;white-space:nowrap;display:inline-block;letter-spacing:-.1px;}
.mini-title.scrolling{animation:marquee-scroll linear infinite;}
.mini-artist{font-size:12px;color:rgba(255,255,255,.45);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.mini-progress{position:absolute;bottom:0;left:10px;right:10px;height:2px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
.mini-pf{height:100%;background:var(--accent);width:0%;transition:width .1s linear;border-radius:2px;}
.mini-btn{width:38px;height:38px;border:none;background:transparent;
  color:rgba(255,255,255,.85);font-size:17px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border-radius:10px;
  transition:background .15s;}
.mini-btn:active{background:rgba(255,255,255,.08);}
.mini-like-btn{color:rgba(255,255,255,.4);font-size:15px;}
.mini-like-btn.liked{color:var(--accent2);}

/* ══════════════════════════════════════
   FULL PLAYER — REDESIGN TOTAL
══════════════════════════════════════ */
.full-player{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;overflow:hidden;
  background:#08060f;
  transform:translateY(100%);
  transition:transform .48s cubic-bezier(.32,.72,0,1);
}
.full-player.open{transform:translateY(0);}
.fp-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,rgba(124,106,255,.22),transparent 65%);
}
.fp-bg-blur{
  position:absolute;inset:-20px;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
}
.fp-bg-blur img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(48px) saturate(1.6) brightness(.45);
  transform:scale(1.15);
}
.fp-bg-blur.loaded{opacity:1;}
.fp-bg-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,6,15,.2) 0%,
    rgba(8,6,15,.05) 30%,
    rgba(8,6,15,.6) 68%,
    rgba(8,6,15,.96) 100%);
}

/* ── SCROLL BODY ── */
.fp-scroll-body{
  position:absolute;inset:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;z-index:2;
}
.fp-scroll-body::-webkit-scrollbar{display:none;}
.fp-sticky{position:sticky;top:0;z-index:5;}
.fp-header{
  display:flex;align-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px 10px;gap:12px;
  background:linear-gradient(to bottom,rgba(8,6,15,.82),transparent);
}
.fp-down{
  width:38px;height:38px;border:none;
  background:rgba(255,255,255,.1);border-radius:50%;
  color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s,transform .15s;
}
.fp-down:active{background:rgba(255,255,255,.18);transform:scale(.92);}
.fp-center{flex:1;text-align:center;}
.fp-now{font-size:11px;font-weight:800;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1.5px;}
.fp-art{
  flex-shrink:0;
  width:min(280px,calc(100vw - 48px));height:min(280px,calc(100vw - 48px));
  border-radius:20px;margin:10px auto 20px;
  background:linear-gradient(135deg,#1e1340,#2d1860);
  display:flex;align-items:center;justify-content:center;font-size:72px;
  overflow:hidden;position:relative;cursor:pointer;
  box-shadow:0 28px 72px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fp-art:active{transform:scale(.96);}
.fp-art img{width:100%;height:100%;object-fit:cover;}
.fp-art-playing-ring{
  position:absolute;inset:-3px;border-radius:23px;
  border:2px solid rgba(124,106,255,.0);
  transition:border-color .4s;pointer-events:none;
}
.fp-art.is-playing .fp-art-playing-ring{border-color:rgba(124,106,255,.55);box-shadow:0 0 20px rgba(124,106,255,.25);}
@media (max-height:680px){
  .fp-art{width:min(190px,calc(100vw - 48px));height:min(190px,calc(100vw - 48px));margin:4px auto 14px;}
}
.fp-meta{padding:0 22px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.fp-meta-txt{flex:1;min-width:0;}
.fp-title{font-size:22px;font-weight:900;letter-spacing:-.3px;line-height:1.2;}
.fp-artist{font-size:14px;color:rgba(255,255,255,.5);font-weight:600;margin-top:5px;cursor:pointer;transition:color .15s;}
.fp-artist:active{color:rgba(255,255,255,.8);}
.fp-like{
  width:42px;height:42px;border:none;background:transparent;
  color:rgba(255,255,255,.3);font-size:24px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,transform .2s;
}
.fp-like:active{transform:scale(.85);}
.fp-like.liked{color:#ff4f7b;}
.fp-prog-wrap{padding:0 22px;margin-bottom:18px;}
.fp-bar{
  width:100%;height:4px;background:rgba(255,255,255,.12);border-radius:99px;
  cursor:pointer;position:relative;margin-bottom:9px;touch-action:none;
}
.fp-fill{height:100%;border-radius:99px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .1s linear;position:relative;}
.fp-fill::after{
  content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(124,106,255,.8);opacity:0;transition:opacity .15s;
}
.fp-bar:active .fp-fill::after,.fp-bar:hover .fp-fill::after{opacity:1;}
.fp-times{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.35);font-weight:700;letter-spacing:.3px;}
.fp-controls{padding:0 14px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;}
.fc-btn{
  width:46px;height:46px;border:none;background:transparent;
  color:rgba(255,255,255,.45);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:color .15s,transform .15s,background .15s;
}
.fc-btn:active{background:rgba(255,255,255,.08);transform:scale(.88);}
.fc-btn.active{color:var(--accent2);}
.fp-playbtn{
  width:66px;height:66px;border-radius:50%;border:none;
  background:#fff;color:#0a0812;font-size:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 28px rgba(124,106,255,.5),0 0 0 6px rgba(255,255,255,.07);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.fp-playbtn:active{transform:scale(.91);box-shadow:0 2px 14px rgba(124,106,255,.3);}
.fp-playbtn i{margin-left:2px;}
.fp-playbtn.playing i{margin-left:0;}
.fp-vol{padding:0 22px;margin-bottom:14px;display:flex;align-items:center;gap:12px;}
.fp-vol i{color:rgba(255,255,255,.28);font-size:14px;flex-shrink:0;}
.vol-range{
  flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.12);
  -webkit-appearance:none;appearance:none;outline:none;cursor:pointer;
}
.vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(124,106,255,.6);
}
.fp-extra{
  padding:0 16px 14px;
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
}
.fp-extra-btn{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px 12px;border:none;
  background:rgba(255,255,255,.06);border-radius:14px;
  color:rgba(255,255,255,.55);font-family:'DM Sans',sans-serif;
  font-size:10px;font-weight:800;letter-spacing:.3px;cursor:pointer;min-width:56px;
  transition:background .15s,color .15s,transform .15s;
}
.fp-extra-btn i{font-size:17px;line-height:1;}
.fp-extra-btn:active{background:rgba(124,106,255,.2);color:var(--accent2);transform:scale(.93);}
.fp-extra-btn.active-state{background:rgba(124,106,255,.15);color:var(--accent2);}

/* SECTION CARDS */
.fp-scroll-body-pad{height:calc(32px + env(safe-area-inset-bottom,0px));}
.fp-section-card{
  margin:8px 14px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  padding:16px;
}
.fp-section-label{
  font-size:11px;font-weight:800;color:rgba(255,255,255,.3);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;
}
.fp-section-label-expand{
  font-size:11px;font-weight:700;color:var(--accent2);
  background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:0;
}
.fp-lyric-preview-lines{display:flex;flex-direction:column;gap:10px;}
.fp-lyric-preview-line{font-size:15px;font-weight:700;color:rgba(255,255,255,.28);line-height:1.6;}
.fp-lyric-preview-line.lp-active{font-size:19px;font-weight:900;color:#fff;}
.fp-lyric-preview-empty{font-size:13px;color:rgba(255,255,255,.25);font-weight:600;font-style:italic;}
.fp-artist-card-inner{display:flex;flex-direction:column;gap:12px;}
.fp-artist-cover{width:100%;height:150px;border-radius:14px;
  background:linear-gradient(135deg,#1a1040,#2a1050);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;}
.fp-artist-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:14px;}
.fp-artist-cover-label{position:absolute;top:10px;left:12px;font-size:10px;font-weight:800;
  color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:1px;}
.fp-artist-info-row{display:flex;align-items:center;justify-content:space-between;}
.fp-artist-info-name{font-size:17px;font-weight:900;}
.fp-artist-info-sub{font-size:12px;color:rgba(255,255,255,.35);font-weight:600;margin-top:2px;}
.fp-artist-bio{font-size:13px;color:rgba(255,255,255,.45);font-weight:600;line-height:1.65;margin-top:6px;}
.fp-artist-follow-btn{padding:7px 18px;border-radius:20px;border:1.5px solid rgba(255,255,255,.25);
  background:transparent;color:#fff;font-size:12px;font-weight:800;cursor:pointer;
  font-family:'DM Sans',sans-serif;flex-shrink:0;transition:all .2s;}
.fp-artist-follow-btn:active{background:rgba(255,255,255,.1);}
.fp-credit-row{display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.fp-credit-row:last-child{border-bottom:none;padding-bottom:0;}
.fp-credit-name{font-size:14px;font-weight:800;}
.fp-credit-role{font-size:11px;color:rgba(255,255,255,.3);font-weight:600;margin-top:2px;}
.fp-credit-follow-btn{padding:5px 14px;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);
  background:transparent;color:#fff;font-size:11px;font-weight:800;cursor:pointer;
  font-family:'DM Sans',sans-serif;flex-shrink:0;transition:all .2s;white-space:nowrap;}
.fp-credit-follow-btn:active{background:rgba(255,255,255,.1);}

/* ══ INLINE LYRIC SECTION — kept for lyric fullscreen view ══ */
.fp-il-header{display:none;}/* hidden – ganti ke card style */
.fp-lyric-inline{display:none;}/* hidden – content pindah ke fp-section-card */
.fp-il-lines{display:flex;flex-direction:column;gap:2px;}
.fp-il-line{
  font-size:14px;font-weight:700;line-height:1.65;
  color:var(--txt3);cursor:pointer;
  transition:color .3s,transform .25s,font-size .25s;
  padding:1px 0;
}
.fp-il-line.active{
  color:var(--txt);font-size:17px;font-weight:900;
  transform:translateX(5px);
}
.fp-il-line.past{color:var(--txt2);}
.fp-il-empty{
  text-align:center;padding:24px 16px;color:var(--txt3);
}
.fp-il-empty i{font-size:28px;margin-bottom:8px;display:block;opacity:.5;}
.fp-il-empty p{font-size:12px;font-weight:600;line-height:1.5;}

/* ══ QUEUE PANEL ══ */
.queue-panel{position:fixed;inset:0;z-index:245;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.queue-panel.open{opacity:1;pointer-events:all;}
.queue-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;
  padding:16px 0 calc(24px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  max-height:75vh;display:flex;flex-direction:column;}
.queue-panel.open .queue-sheet{transform:translateY(0);}
.queue-head{display:flex;align-items:center;justify-content:space-between;
  padding:0 18px 12px;flex-shrink:0;border-bottom:1px solid var(--border);}
.queue-head h3{font-size:17px;font-weight:900;}
.queue-head-right{display:flex;align-items:center;gap:10px;}
.queue-clear{font-size:12px;font-weight:700;color:var(--txt3);
  background:none;border:none;font-family:'DM Sans',sans-serif;cursor:pointer;}
.queue-close{width:32px;height:32px;border:none;background:rgba(255,255,255,.08);
  border-radius:10px;color:var(--txt);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.queue-list{overflow-y:auto;flex:1;padding:8px 10px;}
.queue-list::-webkit-scrollbar{display:none;}
.qrow{display:flex;align-items:center;gap:10px;padding:8px;
  border-radius:12px;cursor:pointer;transition:background .15s;}
.qrow:active,.qrow.qactive{background:rgba(124,106,255,.12);}
.qrow-num{width:22px;text-align:center;font-size:12px;color:var(--txt3);font-weight:700;flex-shrink:0;}
.qrow-thumb{width:42px;height:42px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;}
.qrow-thumb img{width:100%;height:100%;object-fit:cover;}
.qrow-info{flex:1;min-width:0;}
.qrow-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qrow-title.qptxt{color:var(--accent2);}
.qrow-sub{font-size:11px;color:var(--txt2);margin-top:1px;}
.qrow-del{width:28px;height:28px;border:none;background:transparent;color:var(--txt3);
  font-size:13px;cursor:pointer;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;}
.qrow-del:active{background:rgba(255,80,80,.15);color:#ff7070;}
.queue-section-label{padding:10px 8px 4px;font-size:10px;font-weight:800;
  color:var(--txt3);text-transform:uppercase;letter-spacing:.8px;}

/* ══ SLEEP TIMER ══ */
.sleep-panel{position:fixed;inset:0;z-index:215;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.sleep-panel.open{opacity:1;pointer-events:all;}
.sleep-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:20px 18px calc(28px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.sleep-panel.open .sleep-sheet{transform:translateY(0);}
.sleep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.sleep-head h3{font-size:17px;font-weight:900;}
.sleep-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px;}
.sleep-opt{padding:14px 8px;border:1.5px solid var(--border);border-radius:14px;
  background:transparent;color:var(--txt2);font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:800;cursor:pointer;text-align:center;transition:all .2s;}
.sleep-opt.active{background:rgba(124,106,255,.2);border-color:var(--accent);color:var(--accent2);}
.sleep-opt .sleep-min{font-size:20px;font-weight:900;color:var(--txt);display:block;margin-bottom:2px;}
.sleep-countdown{text-align:center;padding:12px;background:rgba(124,106,255,.1);
  border-radius:12px;font-size:13px;font-weight:700;color:var(--accent2);
  display:none;margin-bottom:10px;}
.sleep-countdown.show{display:block;}
.sleep-cancel{width:100%;padding:13px;background:rgba(255,80,80,.08);
  border:1.5px solid rgba(255,80,80,.2);border-radius:12px;color:#ff7070;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:800;cursor:pointer;display:none;}
.sleep-cancel.show{display:block;}

/* ══ RADIO MODE BADGE ══ */
.radio-badge{display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;background:linear-gradient(135deg,var(--green),#17b84e);
  color:#fff;padding:2px 8px;border-radius:20px;letter-spacing:.5px;margin-left:6px;
  vertical-align:middle;animation:radioPulse 2s ease-in-out infinite;}
@keyframes radioPulse{0%,100%{opacity:1;}50%{opacity:.7;}}
.radio-mode-indicator{position:relative;z-index:1;text-align:center;
  padding:6px 20px 0;font-size:11px;font-weight:700;color:var(--green);}

/* ══ PLAYBACK SPEED ══ */
.speed-panel{position:fixed;inset:0;z-index:215;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.speed-panel.open{opacity:1;pointer-events:all;}
.speed-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:20px 18px calc(28px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.speed-panel.open .speed-sheet{transform:translateY(0);}
.speed-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.speed-head h3{font-size:17px;font-weight:900;}
.speed-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px;}
.speed-preset{padding:12px 6px;border:1.5px solid var(--border);border-radius:12px;
  background:transparent;color:var(--txt2);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:800;cursor:pointer;text-align:center;transition:all .2s;}
.speed-preset.active{background:rgba(124,106,255,.2);border-color:var(--accent);color:var(--accent2);}
.speed-slider-wrap{margin-bottom:10px;}
.speed-slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.speed-current{font-size:22px;font-weight:900;color:var(--accent2);}
.speed-unit{font-size:12px;color:var(--txt3);font-weight:700;}
.speed-slider{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.15);
  -webkit-appearance:none;appearance:none;outline:none;cursor:pointer;}
.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--accent2);box-shadow:0 2px 8px rgba(0,0,0,.3);}
.speed-btn-indicator{text-align:center;font-size:11px;font-weight:700;color:var(--txt3);margin-top:6px;}

/* ══ EQUALIZER ══ */
.eq-panel{position:fixed;inset:0;z-index:215;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.eq-panel.open{opacity:1;pointer-events:all;}
.eq-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:20px 18px calc(28px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  max-height:90vh;overflow-y:auto;}
.eq-panel.open .eq-sheet{transform:translateY(0);}
.eq-sheet::-webkit-scrollbar{display:none;}
.eq-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.eq-head h3{font-size:17px;font-weight:900;}
.eq-presets{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px;}
.eq-presets::-webkit-scrollbar{display:none;}
.eq-preset-btn{flex-shrink:0;padding:8px 16px;border:1.5px solid var(--border);
  border-radius:20px;background:transparent;color:var(--txt2);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;}
.eq-preset-btn.active{background:rgba(124,106,255,.2);border-color:var(--accent);color:var(--accent2);}
.eq-bands{display:flex;align-items:flex-end;justify-content:space-between;
  gap:6px;height:180px;padding:0 4px;margin-bottom:12px;}
.eq-band{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;}
.eq-band-slider{writing-mode:vertical-lr;direction:rtl;
  width:36px;height:140px;
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.1);border-radius:20px;outline:none;cursor:pointer;}
.eq-band-slider::-webkit-slider-thumb{-webkit-appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  box-shadow:0 2px 8px rgba(124,106,255,.4);}
.eq-band-label{font-size:10px;font-weight:800;color:var(--txt3);letter-spacing:.3px;}
.eq-band-val{font-size:10px;font-weight:800;color:var(--accent2);min-width:28px;text-align:center;}
.eq-band-zero{width:100%;height:1px;background:rgba(255,255,255,.15);
  position:relative;margin-bottom:4px;}
.eq-reset-btn{width:100%;padding:13px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:12px;color:var(--txt2);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;}
.eq-reset-btn:active{background:rgba(255,255,255,.1);}
.eq-on-badge{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px;}

/* ══ COLLABORATIVE PLAYLIST ══ */
.collab-section{margin-top:14px;flex-shrink:0;border-top:1px solid var(--border);padding-top:14px;}
.collab-label{font-size:11px;font-weight:800;color:var(--txt3);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:10px;}
.collab-song-row{display:flex;align-items:center;gap:10px;padding:8px;
  border-radius:12px;transition:background .15s;}
.collab-song-row:active{background:rgba(255,255,255,.06);}
.collab-adder{font-size:10px;color:var(--accent2);font-weight:700;margin-top:2px;}
.collab-add-btn{width:100%;padding:12px;background:rgba(124,106,255,.1);
  border:1.5px dashed rgba(124,106,255,.4);border-radius:12px;
  color:var(--accent2);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:8px;transition:all .2s;}
.collab-add-btn:active{background:rgba(124,106,255,.2);}
.collab-empty{text-align:center;padding:20px 0;color:var(--txt3);}
.collab-empty i{font-size:24px;display:block;margin-bottom:8px;opacity:.5;}
.collab-empty p{font-size:12px;font-weight:600;}
.blend-remove-btn{width:28px;height:28px;border:none;background:transparent;
  color:var(--txt3);font-size:12px;cursor:pointer;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.blend-remove-btn:active{background:rgba(255,80,80,.15);color:#ff7070;}

/* ══ QUEUE DRAG REORDER ══ */
.qrow[draggable="true"]{cursor:grab;}
.qrow[draggable="true"]:active{cursor:grabbing;}
.qrow.drag-over-top{border-top:2px solid var(--accent2);}
.qrow.drag-over-bot{border-bottom:2px solid var(--accent2);}
.qrow.dragging{opacity:.4;background:rgba(124,106,255,.15);}
.qrow-drag-handle{width:24px;height:24px;display:flex;align-items:center;
  justify-content:center;color:var(--txt3);font-size:12px;flex-shrink:0;cursor:grab;
  touch-action:none;}

/* ══ TOP CHARTS ══ */
.chart-rank{width:26px;text-align:center;flex-shrink:0;font-size:14px;font-weight:900;}
.chart-rank.gold{color:#f5c842;}
.chart-rank.silver{color:#b0b0c8;}
.chart-rank.bronze{color:#c87d4a;}
.chart-plays{font-size:11px;color:var(--txt3);flex-shrink:0;font-weight:700;white-space:nowrap;}

/* ══ RECENTLY PLAYED ══ */
.rp-scroll{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 8px 0;margin-bottom:24px;scroll-snap-type:x mandatory;}
.rp-scroll::-webkit-scrollbar{display:none;}
.rp-card{flex-shrink:0;width:120px;cursor:pointer;transition:transform .18s;scroll-snap-align:start;}
.rp-card:active{transform:scale(.93);}
.rp-thumb{width:120px;height:120px;border-radius:12px;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:36px;
  margin-bottom:9px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.45);}
.rp-thumb img{width:100%;height:100%;object-fit:cover;}
.rp-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.rp-artist{font-size:12px;color:rgba(255,255,255,.4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}

/* ══ ARTIS FAVORITMU ══ */
.artist-fav-section{margin-bottom:28px;}
.artist-fav-scroll{display:flex;gap:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 0 8px 0;scroll-snap-type:x mandatory;}
.artist-fav-scroll::-webkit-scrollbar{display:none;}
.artist-fav-card{flex-shrink:0;width:80px;cursor:pointer;transition:transform .18s;text-align:center;scroll-snap-align:start;}
.artist-fav-card:active{transform:scale(.92);}
.artist-fav-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#1a1040,#3a1080);display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:8px;border:2px solid rgba(124,106,255,.3);box-shadow:0 4px 16px rgba(0,0,0,.4);}
.artist-fav-avatar img{width:100%;height:100%;object-fit:cover;}
.artist-fav-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.85);}
.artist-fav-count{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px;}

/* ══ MOOD PILLS HOME ══ */
.mood-pills{display:flex;gap:8px;overflow-x:auto;padding:0 0 6px 0;margin-bottom:20px;}
.mood-pills::-webkit-scrollbar{display:none;}
.mood-pill{flex-shrink:0;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55);background:rgba(255,255,255,.05);
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:6px;}
.mood-pill.active{background:rgba(124,106,255,.22);border-color:rgba(124,106,255,.5);color:#fff;}
.mood-pill:active{transform:scale(.94);}

/* ══ AI RECOMMENDATION ══ */
.ai-rec-section{margin-bottom:28px;}
.ai-rec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 2px;}
.ai-rec-title{font-size:22px;font-weight:900;display:flex;align-items:center;gap:8px;letter-spacing:-.5px;}
.ai-rec-title .ai-badge{font-size:10px;font-weight:800;background:linear-gradient(135deg,var(--accent),#b06aff);
  color:#fff;padding:3px 8px;border-radius:20px;letter-spacing:.3px;}
.ai-rec-refresh{background:rgba(255,255,255,.06);border:none;color:rgba(255,255,255,.5);
  font-size:12px;padding:6px 12px;border-radius:20px;font-family:'DM Sans',sans-serif;
  font-weight:700;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:5px;}
.ai-rec-refresh:active{background:rgba(124,106,255,.2);color:var(--accent2);}
.ai-rec-refresh.loading i{animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-rec-cards{display:flex;gap:10px;overflow-x:auto;padding:0 0 8px 0;scroll-snap-type:x mandatory;}
.ai-rec-cards::-webkit-scrollbar{display:none;}
.ai-rec-card{flex-shrink:0;width:152px;background:transparent;border-radius:0;
  padding:0;cursor:pointer;transition:transform .18s;position:relative;
  border:none;scroll-snap-align:start;}
.ai-rec-card:active{transform:scale(.95);}
.ai-rec-card .card-thumb{width:152px;height:152px;border-radius:12px;margin-bottom:10px;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:42px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.5);}
.ai-rec-card .card-thumb img{width:100%;height:100%;object-fit:cover;}
.ai-rec-card .card-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;}
.ai-rec-card .card-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.ai-why{font-size:11px;color:var(--accent2);margin-top:5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ══ ARTIST PAGE ══ */
.artist-page{position:fixed;inset:0;z-index:220;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.artist-page.open{transform:translateX(0);}
.artist-header{position:relative;height:200px;flex-shrink:0;overflow:hidden;}
.artist-header-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:72px;}
.artist-header-bg img{width:100%;height:100%;object-fit:cover;}
.artist-header-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(10,10,20,.95));}
.artist-header-back{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:14px;z-index:2;
  width:38px;height:38px;border:none;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  border-radius:12px;color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.artist-header-info{position:absolute;bottom:16px;left:16px;right:16px;z-index:2;}
.artist-name{font-size:26px;font-weight:900;}
.artist-stats{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px;font-weight:600;}
.artist-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px;}
.artist-body::-webkit-scrollbar{display:none;}

/* ══ ALBUM PAGE ══ */
.album-page{position:fixed;inset:0;z-index:220;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.album-page.open{transform:translateX(0);}
.album-header{position:relative;height:220px;flex-shrink:0;overflow:hidden;}
.album-header-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:72px;}
.album-header-bg img{width:100%;height:100%;object-fit:cover;}
.album-header-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(10,10,20,.95));}
.album-header-back{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:14px;z-index:2;
  width:38px;height:38px;border:none;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  border-radius:12px;color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.album-header-info{position:absolute;bottom:16px;left:16px;right:16px;z-index:2;}
.album-title{font-size:24px;font-weight:900;}
.album-meta{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px;font-weight:600;}
.album-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px;}
.album-body::-webkit-scrollbar{display:none;}
.album-actions{display:flex;gap:10px;margin-bottom:20px;}

/* ══ NOTIFICATION CENTER ══ */
.notif-panel{position:fixed;inset:0;z-index:235;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .38s cubic-bezier(.25,.46,.45,.94);}
.notif-panel.open{transform:translateY(0);}
.notif-header{display:flex;align-items:center;justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px 12px;
  border-bottom:1px solid var(--border);flex-shrink:0;
  background:rgba(10,10,20,.98);backdrop-filter:blur(16px);}
.notif-header h2{font-size:19px;font-weight:900;}
.notif-close{width:36px;height:36px;border:none;background:rgba(255,255,255,.08);
  border-radius:10px;color:var(--txt);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.notif-mark-all{font-size:12px;font-weight:700;color:var(--accent2);background:none;
  border:none;font-family:'DM Sans',sans-serif;cursor:pointer;padding:6px 10px;
  border-radius:8px;transition:all .15s;}
.notif-mark-all:active{background:rgba(124,106,255,.12);}
.notif-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.notif-scroll::-webkit-scrollbar{display:none;}
.notif-list{padding:12px 14px;display:flex;flex-direction:column;gap:6px;}
.notif-item{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:14px;cursor:pointer;transition:background .15s;
  background:rgba(255,255,255,.04);border:1px solid var(--border);position:relative;}
.notif-item:active{background:rgba(124,106,255,.1);}
.notif-item.unread{background:rgba(124,106,255,.08);border-color:rgba(124,106,255,.2);}
.notif-item.unread::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent2);}
.notif-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
  overflow:hidden;}
.notif-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.notif-icon-badge{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;border:2px solid var(--bg3);}
.notif-icon-badge.like{background:#ff6b9d;}
.notif-icon-badge.live{background:var(--green);}
.notif-avatar-wrap{position:relative;flex-shrink:0;}
.notif-content{flex:1;min-width:0;}
.notif-text{font-size:13px;font-weight:600;line-height:1.45;color:var(--txt);}
.notif-text b{font-weight:800;}
.notif-time{font-size:11px;color:var(--txt3);margin-top:3px;font-weight:600;}
.notif-thumb{width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;}
.notif-thumb img{width:100%;height:100%;object-fit:cover;}
.notif-empty{text-align:center;padding:60px 20px;color:var(--txt3);}
.notif-empty i{font-size:44px;margin-bottom:14px;display:block;opacity:.4;}
.notif-empty p{font-size:14px;font-weight:600;line-height:1.6;}
.notif-section-label{font-size:11px;font-weight:800;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.5px;padding:10px 4px 6px;}
/* Bell badge */
.tb-notif-btn{position:relative;width:40px;height:40px;border:none;
  background:rgba(255,255,255,.07);border-radius:12px;color:rgba(255,255,255,.6);
  font-size:16px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .18s;}
.tb-notif-btn:active{background:rgba(255,255,255,.14);transform:scale(.93);}
.tb-notif-btn .notif-badge{position:absolute;top:-3px;right:-3px;
  min-width:16px;height:16px;border-radius:8px;
  background:var(--accent);color:#fff;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid var(--bg);display:none;}
.tb-notif-btn .notif-badge.show{display:flex;}

/* ══ PLAYLIST DESCRIPTION ══ */
.pl-detail-desc{font-size:13px;color:var(--txt2);margin-top:6px;line-height:1.55;
  font-weight:600;padding:0 4px;cursor:pointer;}
.pl-detail-desc.empty{color:var(--txt3);font-style:italic;}
.pl-desc-edit-wrap{margin-bottom:16px;}
.pl-desc-textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:12px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;outline:none;
  resize:none;min-height:72px;transition:all .2s;}
.pl-desc-textarea:focus{border-color:var(--accent);}

/* ══ CANVAS / ANIMATED BG ══ */
.fp-canvas-bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:0;}
.fp-canvas-el{width:100%;height:100%;object-fit:cover;opacity:.18;
  filter:blur(20px) saturate(1.5);transform:scale(1.08);transition:opacity .5s;}
.fp-canvas-anim{position:absolute;inset:0;
  background:radial-gradient(ellipse at var(--cx,50%) var(--cy,30%),var(--accent),transparent 60%);
  opacity:.25;animation:canvasPulse 4s ease-in-out infinite alternate;}
@keyframes canvasPulse{
  0%{opacity:.15;transform:scale(1);}
  50%{opacity:.3;transform:scale(1.05);}
  100%{opacity:.18;transform:scale(1);}
}

/* ══ FITUR 3: LIKED SONGS PLAYLIST ══ */
.liked-playlist-hero{
  border-radius:18px;padding:28px 20px 20px;margin-bottom:20px;
  background:linear-gradient(135deg,#4a0080,#8b1a8b 40%,#1a0040);
  border:1px solid rgba(169,138,255,.2);
  position:relative;overflow:hidden;
}
.liked-playlist-hero::before{
  content:'';position:absolute;right:-30px;top:-30px;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,157,.25),transparent 70%);
}
.liked-pl-icon{font-size:44px;margin-bottom:10px;display:block;}
.liked-pl-title{font-size:22px;font-weight:900;margin-bottom:4px;
  background:linear-gradient(135deg,#fff,#ffaac4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.liked-pl-count{font-size:13px;color:rgba(255,255,255,.7);font-weight:600;}
.liked-pl-actions{display:flex;gap:10px;margin-top:16px;position:relative;z-index:1;}
.liked-pl-play{flex:1;padding:13px;
  background:linear-gradient(135deg,#ff6b9d,#a855f7);
  border:none;border-radius:12px;color:#fff;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 20px rgba(255,107,157,.3);transition:transform .15s;}
.liked-pl-play:active{transform:scale(.97);}
.liked-pl-shuffle{
  width:48px;height:48px;border:none;border-radius:12px;
  background:rgba(255,255,255,.12);color:#fff;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;}
.liked-pl-shuffle:active{background:rgba(255,255,255,.2);}

/* ══ FITUR 4: SEARCH FILTER TABS → see search.css ══ */

/* ══ FITUR 5: PLAYLIST COVER AUTO-GENERATE (canvas overlay) ══ */
.pl-gen-badge{
  position:absolute;bottom:6px;right:6px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  border-radius:6px;padding:2px 6px;
  font-size:9px;font-weight:800;color:var(--accent2);letter-spacing:.3px;
}

/* ══ CROSSFADE INDICATOR ══ */
.crossfade-badge{position:fixed;top:calc(env(safe-area-inset-top,0px) + 60px);
  right:14px;z-index:300;background:rgba(124,106,255,.2);border:1px solid var(--accent);
  border-radius:10px;padding:5px 10px;font-size:11px;font-weight:800;color:var(--accent2);
  opacity:0;transition:opacity .3s;pointer-events:none;}
.crossfade-badge.show{opacity:1;}

/* ══ FRIEND ACTIVITY ══ */
.friend-activity-section{margin-bottom:10px;}
.friend-activity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px;}
.friend-activity-title{font-size:22px;font-weight:900;display:flex;align-items:center;gap:8px;letter-spacing:-.5px;}
.fa-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  display:inline-block;animation:livePulse 1.5s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}
/* Stories-style horizontal scroll */
.friend-stories-scroll{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 4px 2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.friend-stories-scroll::-webkit-scrollbar{display:none;}
.friend-story-item{display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;flex-shrink:0;width:72px;transition:transform .15s;}
.friend-story-item:active{transform:scale(.93);}
.friend-story-ring{width:64px;height:64px;border-radius:50%;padding:2.5px;
  background:linear-gradient(135deg,var(--accent),#b06aff,#ff6aad);
  box-shadow:0 0 14px rgba(124,106,255,.35);flex-shrink:0;position:relative;}
.friend-story-ring.no-ring{background:rgba(255,255,255,.12);}
.friend-avatar{width:100%;height:100%;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;
  border:2.5px solid var(--bg);overflow:hidden;position:relative;}
.friend-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.friend-avatar-status{position:absolute;bottom:1px;right:1px;width:11px;height:11px;
  border-radius:50%;background:var(--green);border:2px solid var(--bg);z-index:2;}
.friend-story-song{position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  background:rgba(20,20,36,.92);backdrop-filter:blur(8px);border-radius:8px;
  padding:4px 8px;white-space:nowrap;font-size:10px;font-weight:700;
  color:#fff;border:1px solid rgba(255,255,255,.1);pointer-events:none;
  opacity:0;transition:opacity .2s;max-width:130px;overflow:hidden;text-overflow:ellipsis;}
.friend-story-item:hover .friend-story-song,.friend-story-item:focus .friend-story-song{opacity:1;}
.friend-story-name{font-size:11px;font-weight:700;color:var(--txt);text-align:center;
  width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
.friend-story-track{font-size:10px;color:var(--accent2);font-weight:600;text-align:center;
  width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* mini now-playing bar inside avatar ring */
.friend-np-bar{position:absolute;bottom:0;left:0;right:0;height:16px;
  background:rgba(10,10,20,.7);display:flex;align-items:center;justify-content:center;gap:2px;border-radius:0 0 50px 50px;}
.friend-np-bar span{width:2px;background:var(--accent2);border-radius:2px;animation:npBar .7s ease-in-out infinite alternate;}
.friend-np-bar span:nth-child(2){animation-delay:.15s;height:6px;}
.friend-np-bar span:nth-child(3){animation-delay:.3s;height:10px;}
.friend-np-bar span:nth-child(1),.friend-np-bar span:nth-child(4){height:4px;}
@keyframes npBar{from{transform:scaleY(.4);}to{transform:scaleY(1.2);}}
.friend-empty{text-align:center;padding:24px 0;color:rgba(255,255,255,.3);}
.friend-empty i{font-size:28px;display:block;margin-bottom:8px;opacity:.4;}
.friend-empty p{font-size:12px;font-weight:600;}

/* ══ DOWNLOAD / OFFLINE ══ */
.dl-btn{width:32px;height:32px;border:none;background:transparent;color:var(--txt3);
  font-size:14px;cursor:pointer;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s;}
.dl-btn:active{background:rgba(255,255,255,.07);}
.dl-btn.downloaded{color:var(--green);}
.dl-btn.downloading{color:var(--accent2);animation:dlPulse .8s ease-in-out infinite alternate;}
@keyframes dlPulse{from{opacity:.5;}to{opacity:1;}}
.offline-badge{font-size:10px;font-weight:800;color:var(--green);
  background:rgba(30,215,96,.12);border-radius:6px;padding:2px 6px;margin-left:6px;}

/* ══ STATS / WRAPPED ══ */
.wrapped-panel{position:fixed;inset:0;z-index:250;
  background:rgba(0,0,0,.8);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.wrapped-panel.open{opacity:1;pointer-events:all;}
.wrapped-sheet{width:100%;max-width:480px;
  background:linear-gradient(180deg,#1a1040 0%,var(--bg3) 40%);
  border-radius:24px 24px 0 0;
  padding:20px 20px calc(32px + var(--safe-b));
  transform:translateY(100%);transition:transform .38s cubic-bezier(.25,.46,.45,.94);
  max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.wrapped-panel.open .wrapped-sheet{transform:translateY(0);}
.wrapped-sheet::-webkit-scrollbar{display:none;}
.wrapped-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.wrapped-head h2{font-size:22px;font-weight:900;
  background:linear-gradient(135deg,#fff,var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.wrapped-year{font-size:11px;font-weight:800;color:var(--txt3);letter-spacing:.5px;}
.wrapped-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.wrapped-stat{background:rgba(255,255,255,.06);border-radius:16px;padding:16px;
  border:1px solid var(--border);text-align:center;}
.wrapped-stat-val{font-size:28px;font-weight:900;
  background:linear-gradient(135deg,var(--accent2),#fff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.wrapped-stat-lbl{font-size:11px;font-weight:700;color:var(--txt3);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;}
.wrapped-top-section{margin-bottom:20px;}
.wrapped-top-title{font-size:14px;font-weight:800;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;}
.wrapped-top-song{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:rgba(255,255,255,.05);border-radius:14px;margin-bottom:6px;cursor:pointer;
  transition:background .15s;}
.wrapped-top-song:active{background:rgba(124,106,255,.15);}
.wrapped-rank{width:26px;text-align:center;font-size:15px;font-weight:900;flex-shrink:0;}
.wrapped-song-thumb{width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;}
.wrapped-song-thumb img{width:100%;height:100%;object-fit:cover;}
.wrapped-song-info{flex:1;min-width:0;}
.wrapped-song-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wrapped-song-plays{font-size:11px;color:var(--accent2);margin-top:2px;font-weight:600;}
.wrapped-genre-bar{margin-bottom:8px;}
.wrapped-genre-lbl{display:flex;justify-content:space-between;margin-bottom:4px;}
.wrapped-genre-name{font-size:12px;font-weight:700;}
.wrapped-genre-pct{font-size:12px;color:var(--txt3);font-weight:600;}
.wrapped-bar-track{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;}
.wrapped-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:3px;transition:width .6s cubic-bezier(.25,.46,.45,.94);}

/* ══ BLEND PLAYLIST ══ */
.blend-panel{position:fixed;inset:0;z-index:248;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.blend-panel.open{opacity:1;pointer-events:all;}
.blend-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:20px 18px calc(28px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  max-height:88vh;display:flex;flex-direction:column;}
.blend-panel.open .blend-sheet{transform:translateY(0);}
.blend-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-shrink:0;}
.blend-head h3{font-size:18px;font-weight:900;}
.blend-desc{font-size:13px;color:var(--txt2);line-height:1.55;margin-bottom:18px;font-weight:600;flex-shrink:0;}
.blend-code-box{background:rgba(124,106,255,.1);border:1.5px dashed var(--accent);
  border-radius:14px;padding:16px;text-align:center;margin-bottom:16px;flex-shrink:0;}
.blend-code{font-size:26px;font-weight:900;letter-spacing:6px;color:var(--accent2);}
.blend-code-lbl{font-size:11px;color:var(--txt3);margin-top:6px;font-weight:700;}
.blend-join-section{flex-shrink:0;}
.blend-join-label{font-size:12px;font-weight:800;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.blend-join-row{display:flex;gap:8px;}
.blend-code-input{flex:1;padding:12px 14px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:11px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;outline:none;
  letter-spacing:4px;text-transform:uppercase;}
.blend-code-input:focus{border-color:var(--accent);}
.blend-members{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:16px;}
.blend-members::-webkit-scrollbar{display:none;}
.blend-member-row{display:flex;align-items:center;gap:10px;padding:10px 8px;
  border-radius:12px;cursor:pointer;transition:background .15s;}
.blend-member-row:active{background:rgba(255,255,255,.06);}
.blend-member-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;}
.blend-member-info{flex:1;min-width:0;}
.blend-member-name{font-size:13px;font-weight:700;}
.blend-member-songs{font-size:11px;color:var(--txt2);margin-top:2px;}

/* ══ MINI PLAYER SWIPE UP ══ */
.mini-player{cursor:pointer;}

/* ══ SETTINGS PANEL (Crossfade) ══ */
.settings-panel{position:fixed;inset:0;z-index:245;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.settings-panel.open{opacity:1;pointer-events:all;}
.settings-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:20px 18px calc(28px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.settings-panel.open .settings-sheet{transform:translateY(0);}
.settings-row{display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);}
.settings-row:last-child{border-bottom:none;}
.settings-info{flex:1;}
.settings-label{font-size:14px;font-weight:700;}
.settings-desc{font-size:11px;color:var(--txt3);margin-top:3px;font-weight:600;}
.settings-val{font-size:13px;font-weight:800;color:var(--accent2);min-width:40px;text-align:right;}
.cf-slider{width:100px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);
  -webkit-appearance:none;appearance:none;outline:none;cursor:pointer;}
.cf-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--accent2);}

/* ── PRIVACY TOGGLE SWITCH ── */
.priv-sw-label{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}
.priv-sw-input{opacity:0;width:0;height:0;position:absolute;}
.priv-sw-track{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:12px;cursor:pointer;transition:background .3s;}
.priv-sw-thumb{position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.priv-sw-input:checked ~ .priv-sw-track{background:var(--green);}
.priv-sw-input:checked ~ .priv-sw-thumb{transform:translateX(20px);}
/* presence toggle uses accent (warning) colour instead of green */
#privacy-presence-toggle:checked ~ .priv-sw-track,
#priv-ov-presence-toggle:checked ~ .priv-sw-track{background:var(--accent);}
.privacy-toggle-row{align-items:center;}

/* ── PRIVACY OVERVIEW PANEL ── */
.privacy-overview-panel{position:fixed;inset:0;z-index:255;background:var(--bg);
  transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);}
.privacy-overview-panel.open{transform:translateX(0);}
.priv-ov-header{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;
  border-bottom:1px solid var(--border);flex-shrink:0;
  background:rgba(10,10,20,.98);backdrop-filter:blur(16px);}
.priv-ov-back{width:36px;height:36px;border:none;background:rgba(255,255,255,.08);
  border-radius:10px;color:var(--txt);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.priv-ov-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px 80px;}
.priv-ov-body::-webkit-scrollbar{display:none;}
.priv-ov-section-title{font-size:11px;font-weight:800;color:var(--txt3);letter-spacing:.6px;
  text-transform:uppercase;padding:12px 2px 6px;}
.priv-ov-desc{font-size:13px;color:var(--txt2);font-weight:500;line-height:1.6;
  padding:8px 2px 16px;}

/* BOTTOM NAV */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:transparent;
  border-top:none;
  display:flex;align-items:flex-start;padding-top:8px;z-index:100;
}
/* Gradient fade di balik bottom nav — Spotify style */
.bottom-nav::before{
  content:'';
  position:absolute;inset:0;
  top:-80px;
  background:linear-gradient(to top,
    rgba(10,8,20,1) 0%,
    rgba(10,8,20,.95) 40%,
    rgba(10,8,20,.6) 70%,
    transparent 100%
  );
  pointer-events:none;
  z-index:-1;
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;padding:4px 0;transition:all .2s cubic-bezier(.22,1,.36,1);min-width:0;
  position:relative;
}
.bn-icon-wrap{
  width:36px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:all .22s cubic-bezier(.22,1,.36,1);
}
.bn-item.active .bn-icon-wrap{
  background:transparent;
}
.bn-item i{font-size:19px;color:rgba(255,255,255,.3);transition:color .2s;}
.bn-item span{font-size:10px;font-weight:600;color:rgba(255,255,255,.3);transition:color .2s;white-space:nowrap;letter-spacing:.1px;}
.bn-item.active i{color:#fff;}
.bn-item.active span{color:#fff;font-weight:700;}
.bn-item.active{transform:none;}
/* Profile avatar in topbar — direct link to profile view */
.tb-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;cursor:pointer;position:relative;overflow:hidden;
  border:2px solid transparent;transition:border-color .2s,transform .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);}
.tb-avatar:active{transform:scale(.93);}
.tb-avatar.profile-active{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,106,255,.3);}
.tb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}


/* ── USER DRAWER ── */
/* ── USER DRAWER ───────────────────────────────────────────────────── */
.user-drawer-bg{position:fixed;inset:0;z-index:350;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .28s cubic-bezier(.4,0,.2,1);}
.user-drawer-bg.open{opacity:1;pointer-events:all;}
.user-drawer{position:absolute;left:0;top:0;bottom:0;width:82%;max-width:300px;background:var(--bg2);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px);border-right:1px solid var(--border);}
.user-drawer-bg.open .user-drawer{transform:translateX(0);}
.drawer-top{padding:calc(env(safe-area-inset-top,0px) + 22px) 18px 18px;border-bottom:1px solid var(--border);}
.drawer-user-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.drawer-avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#b06aff);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;overflow:hidden;border:2px solid rgba(124,106,255,.4);}
.drawer-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.drawer-user-info{flex:1;min-width:0;}
.drawer-name{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt);letter-spacing:-.1px;}
.drawer-email{font-size:12px;color:var(--txt3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.drawer-view-profile{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:12px;font-weight:700;color:var(--accent2);background:rgba(124,106,255,.12);border:1px solid var(--border);border-radius:20px;padding:5px 12px;cursor:pointer;font-family:"DM Sans",sans-serif;-webkit-appearance:none;transition:background .15s,transform .15s;-webkit-tap-highlight-color:transparent;}
.drawer-view-profile:active{background:rgba(124,106,255,.22);transform:scale(.97);}
.drawer-view-profile i{font-size:9px;}
.drawer-menu{flex:1;padding:8px 10px 0;}
.drawer-section-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--txt3);padding:10px 10px 4px;}
.drawer-item{display:flex;align-items:center;gap:12px;padding:0 10px;height:50px;cursor:pointer;border-radius:14px;margin-bottom:2px;transition:background .15s;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;}
.drawer-item:active{background:rgba(255,255,255,.07);}
.drawer-item-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--txt2);border-radius:10px;background:var(--bg3);transition:color .15s,background .15s;}
.drawer-item:active .drawer-item-icon{background:rgba(124,106,255,.15);color:var(--accent2);}
.drawer-item-label{font-size:14px;font-weight:600;color:var(--txt2);flex:1;}
.drawer-item.active{background:rgba(124,106,255,.14);}
.drawer-item.active .drawer-item-icon{background:rgba(124,106,255,.2);color:var(--accent2);}
.drawer-item.active .drawer-item-label{color:var(--txt);font-weight:700;}
.drawer-item.danger .drawer-item-icon{color:#ff6b6b;background:rgba(255,80,80,.1);}
.drawer-item.danger .drawer-item-label{color:#ff8a8a;}
.drawer-item.danger:active{background:rgba(255,80,80,.08);}
.drawer-sep{height:1px;background:var(--border);margin:8px 10px;}
.drawer-version{padding:14px 20px calc(8px + env(safe-area-inset-bottom,0px));font-size:11px;color:var(--txt3);font-weight:600;text-align:center;letter-spacing:.3px;}
.drawer-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);transform:scale(0);animation:drwRipple .45s ease-out forwards;pointer-events:none;}
@keyframes drwRipple{to{transform:scale(4);opacity:0;}}
/* UPLOAD MODAL */
/* ── UPLOAD MODAL — iOS Native Redesign ── */
.modal-bg{position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;}
.modal-bg.open{opacity:1;pointer-events:all;}
.modal-sheet{width:100%;max-width:480px;
  background:rgba(28,22,48,.96);
  border-radius:28px 28px 0 0;
  padding:0 0 calc(16px + var(--safe-b));
  transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1);
  max-height:min(92vh,92dvh);overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 -8px 48px rgba(0,0,0,.45);}
@media (max-height:640px){
  .modal-sheet{max-height:96vh;max-height:96dvh;}
  .drop-z{padding:14px 18px;}
  .drop-z .dz-icon-wrap{width:38px;height:38px;margin-bottom:6px;}
  .drop-z i{font-size:18px;}
  .up-form-group{margin-bottom:6px;}
  .up-form input,.up-form select{padding:10px 12px;}
  .cover-upload-row{padding:8px 12px;}
  .cover-preview{width:42px;height:42px;}
}
.modal-bg.open .modal-sheet{transform:translateY(0);}
.modal-handle{width:36px;height:4px;background:rgba(255,255,255,.18);border-radius:2px;
  margin:12px auto 0;}
.modal-title{font-size:17px;font-weight:800;letter-spacing:-.3px;
  padding:14px 20px 0;color:var(--txt);}
#upload-file{display:none;}

/* Drop zone */
.drop-z{margin:10px 20px 0;border-radius:18px;padding:22px 18px;
  text-align:center;cursor:pointer;transition:all .22s;position:relative;
  background:rgba(124,106,255,.07);
  border:1.5px dashed rgba(124,106,255,.35);}
.drop-z.drag-over,.drop-z.has-file{
  border-color:var(--accent);background:rgba(124,106,255,.13);}
.drop-z .dz-icon-wrap{width:48px;height:48px;border-radius:14px;
  background:linear-gradient(145deg,rgba(124,106,255,.25),rgba(176,106,255,.15));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;transition:transform .2s;}
.drop-z.has-file .dz-icon-wrap{transform:scale(.9);}
.drop-z i{font-size:22px;color:var(--accent);}
.drop-z p{font-size:13px;font-weight:700;color:var(--txt2);margin-bottom:2px;line-height:1.4;}
.drop-z small{font-size:11px;color:var(--txt3);font-weight:600;}
.drop-z .dz-filename{font-size:12px;font-weight:700;color:var(--accent2);
  margin-top:4px;word-break:break-all;}

/* Form section */
.up-form{display:flex;flex-direction:column;gap:0;margin:10px 20px 0;}
.up-form-group{position:relative;margin-bottom:8px;}
.up-form-group label{display:none;}
.up-form input,.up-form select{
  width:100%;padding:13px 14px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:14px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
  outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;}
.up-form input::placeholder{color:var(--txt3);font-weight:600;}
.up-form input:focus,.up-form select:focus{
  border-color:var(--accent);background:rgba(124,106,255,.06);}
.up-form select option{background:#1c1630;}
.up-form-select-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--txt3);font-size:11px;pointer-events:none;}

/* Cover row */
.cover-upload-row{display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.08);border-radius:14px;margin-bottom:8px;
  cursor:pointer;transition:all .2s;position:relative;}
.cover-upload-row:active{background:rgba(124,106,255,.08);border-color:var(--accent);}
.cover-preview{width:52px;height:52px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  overflow:hidden;position:relative;}
.cover-preview img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.cover-preview-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;border-radius:12px;
  opacity:0;transition:opacity .2s;}
.cover-upload-row:hover .cover-preview-overlay,
.cover-upload-row:active .cover-preview-overlay{opacity:1;}
.cover-preview-overlay i{font-size:15px;color:#fff;}
.cover-upload-info{flex:1;}
.cover-upload-info p{font-size:13px;font-weight:700;color:var(--txt2);}
.cover-upload-info small{font-size:11px;color:var(--txt3);}
.cover-upload-progress{font-size:11px;color:var(--accent2);font-weight:700;margin-top:2px;}
#cover-file{display:none;}
#avatar-file{display:none;}

/* Progress bar */
.up-prog{height:3px;background:rgba(255,255,255,.06);border-radius:2px;
  overflow:hidden;display:none;margin:8px 20px 0;}
.up-pf{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  width:0%;transition:width .3s;border-radius:2px;}
.up-status{font-size:12px;color:var(--txt3);text-align:center;
  margin:6px 20px 0;font-weight:600;}

/* Action buttons */
.modal-btns{display:flex;gap:10px;padding:12px 20px 0;}
.btn-cancel{flex:1;padding:13px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--txt2);
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;
  transition:background .18s;}
.btn-cancel:active{background:rgba(255,255,255,.13);}
.btn-submit{flex:2;padding:13px;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  border:none;border-radius:14px;color:#fff;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 18px rgba(124,106,255,.35);transition:transform .15s,box-shadow .15s;}
.btn-submit:active{transform:scale(.97);box-shadow:0 2px 8px rgba(124,106,255,.2);}
.btn-submit:disabled{opacity:.45;pointer-events:none;}
.btn-close-upload{width:100%;padding:13px;margin:8px 0 0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);border-radius:14px;color:var(--txt3);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;
  transition:background .18s;}
.btn-close-upload:active{background:rgba(255,255,255,.1);}

/* EMPTY */
.empty{text-align:center;padding:44px 20px;color:var(--txt3);}
.empty i{font-size:42px;margin-bottom:12px;display:block;}
.empty p{font-size:14px;font-weight:600;line-height:1.5;}

/* TOAST */
#toast{position:fixed;bottom:calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + 10px);
  left:50%;transform:translateX(-50%) translateY(60px);
  background:rgba(28,22,52,.97);backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:14px;padding:11px 18px;
  font-size:13px;font-weight:700;z-index:999;white-space:nowrap;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  pointer-events:none;opacity:0;}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#toast.ok{color:var(--green);}
#toast.err{color:#ff7070;}
#toast.info{color:var(--accent2);}

/* SEARCH VIEW → moved to search.css */

/* ══════════════════════════════════════════
   PROFILE VIEW — Native iOS Redesign
══════════════════════════════════════════ */

/* Hero banner area */
.profile-hero{
  position:relative;
  margin:calc(-1 * env(safe-area-inset-top,0px)) -18px 0;
  padding-top:env(safe-area-inset-top,0px);
  height:calc(200px + env(safe-area-inset-top,0px));
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 -200px 0 200px #1a0e3a;
}
.profile-hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#1a0e3a 0%,#0d0820 50%,#0a0a14 100%);
  transition:background .4s;
}
.profile-hero-bg.has-img{background:none;}
.profile-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:blur(2px) saturate(1.3);transform:scale(1.05);}
.profile-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,20,.1) 0%,rgba(10,10,20,.85) 100%);
}
.profile-hero-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(124,106,255,.22),transparent 70%);
  pointer-events:none;
}
.prof-banner-edit{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:5;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:rgba(255,255,255,.8);font-size:12px;transition:all .18s;}
.prof-banner-edit:active{background:rgba(0,0,0,.65);transform:scale(.92);}
.prof-back-btn{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;z-index:5;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:rgba(255,255,255,.85);font-size:13px;transition:all .18s;
  -webkit-tap-highlight-color:transparent;}
.prof-back-btn:active{background:rgba(0,0,0,.65);transform:scale(.92);}

/* Avatar + identity block */
.profile-identity{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  margin-top:-52px;
  padding-bottom:20px;
  -webkit-font-smoothing:antialiased;
  font-family:'DM Sans',sans-serif;
}
.profile-avatar{
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:900;color:#fff;
  position:relative;
  box-shadow:0 0 0 3px var(--bg),0 0 0 5px rgba(124,106,255,.4),0 12px 32px rgba(0,0,0,.5);
  cursor:pointer;overflow:hidden;
  transition:transform .18s;
}
.profile-avatar:active{transform:scale(.95);}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.profile-avatar-edit{
  position:absolute;inset:0;background:rgba(0,0,0,.48);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  opacity:0;transition:opacity .18s;}
.profile-avatar:active .profile-avatar-edit{opacity:1;}
.profile-avatar-edit i{font-size:18px;color:#fff;}

.profile-name{
  font-size:22px;font-weight:900;margin-top:12px;
  letter-spacing:-.4px;text-align:center;font-family:'DM Sans',sans-serif;color:#fff;
}
.profile-email{
  font-size:12px;color:var(--txt3);margin-top:3px;text-align:center;
  font-weight:700;font-family:'DM Sans',sans-serif;
}
.profile-joined{
  font-size:11px;color:var(--txt3);margin-top:2px;text-align:center;
  font-weight:700;font-family:'DM Sans',sans-serif;
}

/* Edit name quick btn */
.prof-quick-btns{
  display:flex;gap:10px;justify-content:center;
  margin-top:16px;
}
.prof-qbtn{
  padding:0 20px;
  height:36px;
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:980px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:rgba(255,255,255,.88);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:background .15s,transform .12s;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;min-width:120px;justify-content:center;
}
.prof-qbtn:active{background:rgba(255,255,255,.16);transform:scale(.94);}
/* Icon-only btn (Pengaturan) */
.prof-qbtn.icon-only{
  min-width:44px;width:44px;padding:0;border-radius:50%;
  font-size:16px;
}

/* Stats row */
.profile-stats-row{
  display:flex;align-items:stretch;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  margin:0 0 10px;
  overflow:hidden;
}
.pstat{
  flex:1;padding:14px 8px;text-align:center;cursor:pointer;
  transition:background .15s;position:relative;
  min-height:44px;-webkit-tap-highlight-color:transparent;
}
.pstat:active{background:rgba(124,106,255,.12);}
.pstat+.pstat::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:1px;background:rgba(255,255,255,.08);
}
.pstat-val{font-size:22px;font-weight:900;color:var(--accent2);line-height:1;}
.pstat-lbl{font-size:10px;color:var(--txt3);font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.3px;}

/* iOS grouped list style */
.profile-section{margin-bottom:8px;}
.profile-section-label{
  font-size:11px;font-weight:800;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.6px;
  padding:0 4px 6px;
}
.profile-list{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  overflow:hidden;
}
.profile-action{
  display:flex;align-items:center;gap:13px;
  padding:13px 16px;
  cursor:pointer;
  transition:background .12s;
  position:relative;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.profile-action:active{background:rgba(255,255,255,.07);}
.profile-action+.profile-action::before{
  content:'';position:absolute;top:0;left:58px;right:0;height:1px;
  background:rgba(255,255,255,.06);
}
.profile-action-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;
}
.profile-action-info{flex:1;min-width:0;}
.profile-action-title{font-size:14px;font-weight:700;line-height:1.2;}
.profile-action-sub{font-size:12px;color:var(--txt3);margin-top:2px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-action-chev{color:rgba(255,255,255,.2);font-size:11px;flex-shrink:0;}
.profile-action.red .profile-action-title{color:#ff6b6b;}
.profile-action.red .profile-action-icon{background:rgba(255,80,80,.18)!important;color:#ff7070!important;}

/* Appearance quick grid */
.prof-quick-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;margin-bottom:4px;
}
.prof-qgrid-item{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:14px 8px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;transition:all .16s;
}
.prof-qgrid-item:active{background:rgba(124,106,255,.15);transform:scale(.95);}
.prof-qgrid-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:#fff;
}
.prof-qgrid-label{
  font-size:11px;font-weight:800;color:var(--txt2);
  text-align:center;line-height:1.3;
}

/* Banner panel (keep functional) */
.banner-panel{position:fixed;inset:0;z-index:410;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.banner-panel.open{opacity:1;pointer-events:all;}
.banner-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:20px 18px calc(28px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  max-height:85vh;overflow-y:auto;}
.banner-panel.open .banner-sheet{transform:translateY(0);}
.banner-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.banner-head h3{font-size:17px;font-weight:900;}
.banner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.banner-opt{aspect-ratio:16/9;border-radius:12px;cursor:pointer;position:relative;
  border:2px solid transparent;transition:all .2s;overflow:hidden;}
.banner-opt.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);}
.banner-opt-inner{width:100%;height:100%;border-radius:10px;}
.banner-opt-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;opacity:0;transition:opacity .15s;}
.banner-opt.active .banner-opt-check{opacity:1;}
.banner-upload-btn{width:100%;padding:13px;background:rgba(124,106,255,.12);
  border:1.5px dashed rgba(124,106,255,.4);border-radius:14px;
  color:var(--accent2);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;}
.banner-upload-btn:active{background:rgba(124,106,255,.2);}

/* Legacy compat */
.profile-header{display:none;}
.profile-stats{display:none;}
/* v-profile: layout mengikuti pub-profile (flex column, full height) */
#v-profile{
  padding:0;
  display:none;flex-direction:column;
  min-height:0;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#v-profile.active{display:flex;}
/* Header v-profile */
.myp-header{
  position:relative;height:220px;flex-shrink:0;overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);
}
/* Avatar camera overlay on tap */
#prof-avatar:active #prof-avatar-edit-overlay{opacity:1!important;}
/* pub-content-body di dalam v-profile scroll area */
#v-profile .pub-content-body{
  overflow-y:visible;
  padding-bottom:0;
}
/* Stats row spacing override */
#v-profile .pub-stats-row{padding:16px 18px;}
/* playlist stat placeholder — rendered by updateProfileStats */
#pstat-playlists{}
/* Edit name modal */
.edit-name-wrap{position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s;}
.edit-name-wrap.open{opacity:1;pointer-events:all;}
.edit-name-card{background:var(--bg3);border:1px solid var(--border);border-radius:20px;
  padding:24px 20px;width:100%;max-width:360px;}
.edit-name-card h3{font-size:18px;font-weight:900;margin-bottom:16px;}
.edit-name-card input{width:100%;padding:13px 15px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:12px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:15px;outline:none;margin-bottom:14px;transition:all .2s;}
.edit-name-card input:focus{border-color:var(--accent);}
.edit-name-btns{display:flex;gap:10px;}

/* ══════════════════════════════════════════
   PLAYLIST VIEW
══════════════════════════════════════════ */
.playlist-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
.pl-card{background:var(--card);border-radius:16px;padding:14px;cursor:pointer;
  border:1px solid var(--border);transition:transform .15s;}
.pl-card:active{transform:scale(.96);}
.pl-card-cover{width:100%;aspect-ratio:1;border-radius:12px;margin-bottom:10px;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:grid;grid-template-columns:1fr 1fr;gap:3px;overflow:hidden;}
.pl-card-cover.empty-cov{display:flex;align-items:center;justify-content:center;font-size:36px;}
.pl-cov-cell{overflow:hidden;}
.pl-cov-cell img{width:100%;height:100%;object-fit:cover;}
.pl-cov-cell.emoji{display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(135deg,#1a1040,#2a1050);}
.pl-card-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-card-count{font-size:12px;color:var(--txt2);margin-top:2px;}
.pl-card-new{border:2px dashed rgba(124,106,255,.4);background:rgba(124,106,255,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;aspect-ratio:auto;padding:24px 14px;}
.pl-card-new i{font-size:28px;color:var(--accent);}
.pl-card-new span{font-size:14px;font-weight:800;color:var(--accent2);}
/* Playlist detail */
.pl-detail{display:none;}
.pl-detail.active{display:block;}
.pl-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.pl-back{width:38px;height:38px;border:none;background:rgba(255,255,255,.08);
  border-radius:12px;color:var(--txt);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pl-detail-cover{width:100%;aspect-ratio:1;max-width:220px;border-radius:18px;margin:0 auto 16px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:hidden;
  background:linear-gradient(135deg,#1a1040,#2a1050);}
.pl-detail-cover.empty-cov{display:flex;align-items:center;justify-content:center;font-size:52px;}
.pl-detail-info{text-align:center;margin-bottom:20px;}
.pl-detail-name{font-size:22px;font-weight:900;}
.pl-detail-count{font-size:13px;color:var(--txt2);margin-top:4px;}
.pl-detail-actions{display:flex;gap:10px;margin-bottom:20px;}
.pl-play-all{flex:1;padding:13px;background:linear-gradient(135deg,var(--accent),#b06aff);
  border:none;border-radius:12px;color:#fff;font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;}
.pl-shuffle{width:50px;padding:13px;background:rgba(255,255,255,.07);
  border:1.5px solid var(--border);border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--txt2);font-size:16px;}
.pl-del-btn{width:50px;padding:13px;background:rgba(255,80,80,.08);
  border:1.5px solid rgba(255,80,80,.2);border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#ff7070;font-size:16px;}
/* Create playlist modal */
.cp-modal-bg{position:fixed;inset:0;z-index:450;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s;}
.cp-modal-bg.open{opacity:1;pointer-events:all;}
.cp-modal-card{background:var(--bg3);border:1px solid var(--border);
  border-radius:20px;padding:24px 20px;width:100%;max-width:360px;}
.cp-modal-card h3{font-size:18px;font-weight:900;margin-bottom:16px;}
.cp-modal-card input{width:100%;padding:13px 15px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:12px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:15px;outline:none;margin-bottom:14px;transition:all .2s;}
.cp-modal-card input:focus{border-color:var(--accent);}
.cp-modal-btns{display:flex;gap:10px;}
/* Add-to-playlist modal */
.atp-modal-bg{position:fixed;inset:0;z-index:460;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.atp-modal-bg.open{opacity:1;pointer-events:all;}
.atp-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:18px 18px calc(24px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  max-height:70vh;overflow-y:auto;}
.atp-modal-bg.open .atp-sheet{transform:translateY(0);}
.atp-title{font-size:17px;font-weight:900;margin-bottom:14px;}
.atp-pl-item{display:flex;align-items:center;gap:12px;padding:12px 10px;
  border-radius:12px;cursor:pointer;transition:background .15s;}
.atp-pl-item:active{background:rgba(255,255,255,.07);}
.atp-pl-cover{width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;}
.atp-pl-name{font-size:14px;font-weight:700;}
.atp-pl-count{font-size:12px;color:var(--txt2);margin-top:1px;}
.atp-new{display:flex;align-items:center;gap:12px;padding:12px 10px;
  border-radius:12px;cursor:pointer;background:rgba(124,106,255,.08);
  border:1.5px solid rgba(124,106,255,.2);margin-top:8px;}
.atp-new i{width:44px;height:44px;border-radius:10px;background:rgba(124,106,255,.2);
  display:flex;align-items:center;justify-content:center;color:var(--accent2);font-size:18px;flex-shrink:0;}
.atp-new span{font-size:14px;font-weight:800;color:var(--accent2);}

/* Context menu */
.ctx-menu{position:fixed;z-index:500;background:var(--bg3);border:1px solid var(--border);
  border-radius:16px;padding:8px;min-width:180px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);display:none;}
.ctx-menu.open{display:block;}
.ctx-item{padding:12px 14px;border-radius:10px;font-size:13px;font-weight:700;
  color:var(--txt2);cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .15s;}
.ctx-item:active{background:rgba(255,255,255,.07);color:var(--txt);}
.ctx-item.red{color:#ff6b6b;}
.ctx-sep{height:1px;background:var(--border);margin:4px 0;}

audio{display:none;}

/* ══════════════════════════════════════════════
   FITUR BARU 1: LIVE COLLAB PLAYLIST (Enhanced)
   Real-time queue sync, host controls, listeners
══════════════════════════════════════════════ */
.lp-panel{position:fixed;inset:0;z-index:247;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.lp-panel.open{opacity:1;pointer-events:all;}
.lp-sheet{width:100%;max-width:480px;background:var(--bg3);
  border-radius:22px 22px 0 0;padding:0 0 calc(24px + var(--safe-b));
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  max-height:92vh;display:flex;flex-direction:column;}
.lp-panel.open .lp-sheet{transform:translateY(0);}
/* Hero header */
.lp-hero{padding:20px 18px 16px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(124,106,255,.25),rgba(30,215,96,.08));
  border-bottom:1px solid var(--border);}
.lp-hero-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.lp-hero-title{font-size:18px;font-weight:900;display:flex;align-items:center;gap:8px;}
.lp-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;
  animation:livePulse 1.5s ease-in-out infinite;}
.lp-session-info{font-size:12px;color:var(--txt2);font-weight:600;margin-top:2px;}
/* Room code display */
.lp-code-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.lp-code-badge{flex:1;background:rgba(124,106,255,.12);border:1.5px dashed var(--accent);
  border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;}
.lp-code-val{font-size:20px;font-weight:900;letter-spacing:5px;color:var(--accent2);}
.lp-code-lbl{font-size:10px;color:var(--txt3);font-weight:700;}
.lp-copy-btn{padding:10px 14px;background:rgba(124,106,255,.15);border:1px solid var(--accent);
  border-radius:10px;color:var(--accent2);font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .2s;}
.lp-copy-btn:active{background:rgba(124,106,255,.3);}
/* Join input */
.lp-join-row{display:flex;gap:8px;}
.lp-join-inp{flex:1;padding:10px 12px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:10px;color:var(--txt);
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;outline:none;
  letter-spacing:4px;text-transform:uppercase;transition:all .2s;}
.lp-join-inp:focus{border-color:var(--accent);}
.lp-join-btn{padding:10px 16px;background:linear-gradient(135deg,var(--green),#17b84e);
  border:none;border-radius:10px;color:#fff;font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:800;cursor:pointer;transition:all .2s;white-space:nowrap;}
.lp-join-btn:active{transform:scale(.96);}
/* Tabs */
.lp-tabs{display:flex;gap:4px;padding:12px 18px 0;flex-shrink:0;}
.lp-tab{flex:1;padding:9px;border:none;background:rgba(255,255,255,.06);
  color:var(--txt2);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;
  border-radius:10px;cursor:pointer;transition:all .2s;}
.lp-tab.active{background:var(--accent);color:#fff;}
/* Tab content */
.lp-tab-content{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 18px;}
.lp-tab-content.active{display:block;}
.lp-tab-content::-webkit-scrollbar{display:none;}
/* Listeners list */
.lp-listener{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;}
.lp-listener-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  position:relative;overflow:hidden;}
.lp-listener-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.lp-listener-name{font-size:13px;font-weight:700;flex:1;}
.lp-host-badge{font-size:10px;font-weight:800;background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;padding:2px 7px;border-radius:20px;margin-left:6px;letter-spacing:.3px;}
.lp-listener-song{font-size:11px;color:var(--accent2);font-weight:600;}
/* Shared queue */
.lp-queue-row{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:12px;cursor:pointer;transition:background .15s;}
.lp-queue-row:active{background:rgba(255,255,255,.06);}
.lp-queue-row.lp-now-playing{background:rgba(124,106,255,.12);}
.lp-q-num{width:20px;text-align:center;font-size:12px;color:var(--txt3);font-weight:700;flex-shrink:0;}
.lp-q-thumb{width:38px;height:38px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;}
.lp-q-thumb img{width:100%;height:100%;object-fit:cover;}
.lp-q-info{flex:1;min-width:0;}
.lp-q-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-q-adder{font-size:10px;color:var(--txt3);font-weight:600;margin-top:1px;}
.lp-q-del{width:26px;height:26px;border:none;background:transparent;color:var(--txt3);
  font-size:12px;cursor:pointer;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.lp-q-del:active{background:rgba(255,80,80,.15);color:#ff7070;}
/* Host controls bar */
.lp-host-controls{padding:10px 18px;flex-shrink:0;border-top:1px solid var(--border);
  display:flex;gap:8px;align-items:center;}
.lp-host-label{font-size:10px;font-weight:800;color:var(--accent2);text-transform:uppercase;
  letter-spacing:.5px;flex-shrink:0;}
.lp-hc-btn{flex:1;padding:10px;background:rgba(255,255,255,.06);border:1px solid var(--border);
  border-radius:10px;color:var(--txt2);font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:5px;transition:all .2s;white-space:nowrap;}
.lp-hc-btn:active{background:rgba(124,106,255,.15);color:var(--accent2);}
.lp-hc-btn.active{background:rgba(124,106,255,.15);border-color:var(--accent);color:var(--accent2);}
/* Empty state */
.lp-empty{text-align:center;padding:32px 16px;color:var(--txt3);}
.lp-empty i{font-size:32px;display:block;margin-bottom:10px;opacity:.5;}
.lp-empty p{font-size:13px;font-weight:600;line-height:1.6;}
/* Live banner shown above mini player when in session */
.lp-live-banner{position:fixed;left:8px;right:8px;
  bottom:calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + 10px);
  z-index:89;background:linear-gradient(135deg,rgba(30,215,96,.15),rgba(124,106,255,.1));
  border:1px solid rgba(30,215,96,.3);border-radius:14px;
  padding:8px 14px;display:flex;align-items:center;gap:10px;
  transform:translateY(0);opacity:0;pointer-events:none;transition:opacity .3s;}
.lp-live-banner.show{opacity:1;pointer-events:all;}
.lp-lb-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:livePulse 1.5s ease-in-out infinite;flex-shrink:0;}
.lp-lb-txt{font-size:12px;font-weight:700;color:var(--txt);flex:1;}
.lp-lb-btn{font-size:11px;font-weight:800;color:var(--green);background:none;border:none;
  font-family:'DM Sans',sans-serif;cursor:pointer;padding:0;flex-shrink:0;}

/* ══════════════════════════════════════════════
   FITUR BARU 2: SONG CANVAS / STORY
   Visual background video/story per lagu
══════════════════════════════════════════════ */
.canvas-story-panel{position:fixed;inset:0;z-index:205;
  background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:translateY(100%);transition:transform .38s cubic-bezier(.25,.46,.45,.94);}
.canvas-story-panel.open{transform:translateY(0);}
.canvas-story-bg{position:absolute;inset:0;overflow:hidden;}
.canvas-story-bg video,.canvas-story-bg img.cs-bg-img{
  width:100%;height:100%;object-fit:cover;opacity:1;}
.canvas-story-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.7) 100%);}
/* Particle canvas */
.canvas-story-particles{position:absolute;inset:0;pointer-events:none;}
/* Song info overlay */
.cs-song-info{position:absolute;bottom:calc(120px + var(--safe-b));left:0;right:0;
  padding:0 20px;z-index:2;}
.cs-title{font-size:22px;font-weight:900;text-shadow:0 2px 12px rgba(0,0,0,.6);margin-bottom:4px;}
.cs-artist{font-size:14px;font-weight:600;color:rgba(255,255,255,.8);
  text-shadow:0 1px 6px rgba(0,0,0,.5);}
.cs-progress-wrap{position:absolute;bottom:calc(80px + var(--safe-b));left:0;right:0;padding:0 20px;z-index:2;}
.cs-prog-bar{width:100%;height:3px;background:rgba(255,255,255,.2);border-radius:2px;
  cursor:pointer;touch-action:none;}
.cs-prog-fill{height:100%;background:#fff;border-radius:2px;width:0%;transition:width .1s linear;}
.cs-prog-times{display:flex;justify-content:space-between;font-size:10px;
  color:rgba(255,255,255,.6);font-weight:700;margin-top:4px;}
.cs-controls{position:absolute;bottom:calc(12px + var(--safe-b));left:0;right:0;
  display:flex;align-items:center;justify-content:space-around;padding:0 10px;z-index:2;}
.cs-btn{width:48px;height:48px;border:none;background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);border-radius:50%;color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;}
.cs-btn:active{background:rgba(255,255,255,.3);transform:scale(.93);}
.cs-play-btn{width:58px;height:58px;background:rgba(255,255,255,.95);color:#000;font-size:22px;}
.cs-play-btn:active{background:#fff;}
.cs-top-bar{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:2;}
.cs-close-btn{width:38px;height:38px;border:none;background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);border-radius:12px;color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.cs-like-btn{width:38px;height:38px;border:none;background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);border-radius:12px;color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;}
.cs-like-btn.liked{color:#ff6b9d;background:rgba(255,107,157,.2);}
/* Canvas button in full player */
.cs-fp-btn-active{border-color:var(--green)!important;color:var(--green)!important;}
/* Upload canvas section in upload modal */
.cs-upload-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px 12px;
  background:rgba(255,255,255,.04);border:1.5px dashed var(--border);border-radius:12px;cursor:pointer;
  transition:all .2s;}
.cs-upload-row:hover,.cs-upload-row:active{border-color:var(--accent);background:rgba(124,106,255,.06);}
.cs-upload-icon{width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.cs-upload-info p{font-size:13px;font-weight:700;color:var(--txt2);}
.cs-upload-info small{font-size:11px;color:var(--txt3);}
.cs-upload-progress{font-size:11px;color:var(--accent2);font-weight:700;margin-top:3px;}

/* ══════════════════════════════════════════════
   FITUR BARU 3: PUBLIC USER PROFILE PAGE
   View other users profiles
══════════════════════════════════════════════ */
.pub-profile-page{position:fixed;inset:0;z-index:240;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.pub-profile-page.open{transform:translateX(0);}
.pub-profile-header{position:relative;height:220px;flex-shrink:0;overflow:hidden;}
.pub-ph-bg{position:absolute;inset:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);}
.pub-ph-bg img{width:100%;height:100%;object-fit:cover;}
.pub-ph-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(10,10,20,.9));}
.pub-ph-back{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:14px;z-index:2;
  width:38px;height:38px;border:none;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  border-radius:12px;color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.pub-ph-actions{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2;
  display:flex;gap:8px;}
.pub-ph-action-btn{width:38px;height:38px;border:none;background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px);border-radius:12px;color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;}
.pub-ph-action-btn:active{background:rgba(0,0,0,.6);}
.pub-ph-info{position:absolute;bottom:16px;left:16px;right:16px;z-index:2;
  display:flex;align-items:center;gap:12px;}
.pub-avatar-wrap{flex-shrink:0;}
.pub-avatar{width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;
  border:3px solid rgba(255,255,255,.2);overflow:hidden;}
.pub-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pub-name-wrap{flex:1;min-width:0;}
.pub-username{font-size:20px;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.4);}
.pub-joined{font-size:12px;color:rgba(255,255,255,.6);font-weight:600;margin-top:2px;}
/* Stats row */
.pub-stats-row{display:flex;padding:14px 18px;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;}
.pub-stat-item{flex:1;text-align:center;cursor:pointer;padding:4px 0;}
.pub-stat-item:active{opacity:.7;}
.pub-stat-val{font-size:20px;font-weight:900;color:var(--accent2);}
.pub-stat-lbl{font-size:11px;color:var(--txt3);font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.3px;}
.pub-stat-divider{width:1px;background:var(--border);margin:4px 0;}
/* Content tabs */
.pub-content-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;}
.pub-ct{flex:1;padding:12px;border:none;background:transparent;
  color:var(--txt3);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .2s;border-bottom:2px solid transparent;position:relative;}
.pub-ct.active{color:var(--accent2);border-bottom-color:var(--accent2);}
.pub-content-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;}
.pub-content-body::-webkit-scrollbar{display:none;}
.pub-tab-pane{display:none;}
.pub-tab-pane.active{display:block;}
/* Now playing card */
.pub-np-card{background:rgba(124,106,255,.08);border:1px solid var(--border);
  border-radius:14px;padding:14px;margin-bottom:16px;
  display:flex;align-items:center;gap:12px;}
.pub-np-thumb{width:52px;height:52px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;}
.pub-np-thumb img{width:100%;height:100%;object-fit:cover;}
.pub-np-info{flex:1;min-width:0;}
.pub-np-label{font-size:10px;font-weight:800;color:var(--green);
  text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.pub-np-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-np-artist{font-size:12px;color:var(--txt2);font-weight:600;margin-top:1px;}
/* Playlist card in pub profile */
.pub-pl-card{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:12px;cursor:pointer;transition:background .15s;margin-bottom:4px;}
.pub-pl-card:active{background:rgba(255,255,255,.06);}
.pub-pl-cover{width:48px;height:48px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;}
.pub-pl-cover img{width:100%;height:100%;object-fit:cover;}
.pub-pl-name{font-size:14px;font-weight:700;}
.pub-pl-count{font-size:12px;color:var(--txt2);margin-top:2px;}
/* ── FOLLOW BUTTON ── */
.pub-follow-btn{padding:7px 18px;border-radius:20px;border:none;font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:800;cursor:pointer;transition:all .2s;white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),#b06aff);color:#fff;flex-shrink:0;}
.pub-follow-btn.following{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:rgba(255,255,255,.85);}
.pub-follow-btn:active{transform:scale(.95);}
.pub-follow-row{display:none !important;}/* deprecated — tombol sudah di header */
/* ── ENHANCED PUB PROFILE ── */
/* Bio under name */
.pub-bio{
  font-size:12px;color:rgba(255,255,255,.55);font-weight:500;
  margin-top:4px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Verified badge */
.pub-verified{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;background:var(--accent2);border-radius:50%;
  font-size:9px;color:#fff;margin-left:5px;vertical-align:middle;flex-shrink:0;
}
/* Profile header: taller on bio present */
.pub-profile-header.has-bio{height:240px;}
/* Stat item click ripple */
.pub-stat-item{transition:opacity .15s;}
/* Skeleton shimmer */
@keyframes pub-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.pub-skel{
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 75%);
  background-size:200% 100%;
  animation:pub-shimmer 1.4s infinite;
}
/* Song row in pub profile — reuse srow but mini variant */
.pub-srow{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);
  cursor:pointer;transition:background .12s;border-radius:10px;
  padding-left:8px;padding-right:8px;margin:0 -8px;
}
.pub-srow:last-child{border-bottom:none;}
.pub-srow:active{background:rgba(255,255,255,.06);}
.pub-srow-num{
  width:22px;text-align:center;font-size:13px;font-weight:700;
  color:var(--txt3);flex-shrink:0;
}
.pub-srow-thumb{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.pub-srow-thumb img{width:100%;height:100%;object-fit:cover;}
.pub-srow-info{flex:1;min-width:0;}
.pub-srow-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-srow-title.playing{color:var(--accent2);}
.pub-srow-sub{font-size:12px;color:var(--txt2);margin-top:2px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-srow-dur{font-size:12px;color:var(--txt3);font-weight:600;flex-shrink:0;}
.pub-srow-eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0;}
.pub-srow-eq span{width:3px;border-radius:2px;background:var(--accent2);animation:pub-eq .8s ease-in-out infinite alternate;}
.pub-srow-eq span:nth-child(1){height:8px;animation-delay:0s;}
.pub-srow-eq span:nth-child(2){height:14px;animation-delay:.2s;}
.pub-srow-eq span:nth-child(3){height:6px;animation-delay:.1s;}
.pub-srow-eq span:nth-child(4){height:10px;animation-delay:.3s;}
@keyframes pub-eq{0%{transform:scaleY(.4)}100%{transform:scaleY(1)}}
/* ── FOLLOWERS / FOLLOWING PAGE ── */
.follow-page{position:fixed;inset:0;z-index:260;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  padding-top:env(safe-area-inset-top,0px);}
.follow-page.open{transform:translateX(0);}
.follow-page-header{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;
  border-bottom:1px solid var(--border);flex-shrink:0;
  background:rgba(10,10,20,.98);backdrop-filter:blur(16px);}
.follow-page-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.follow-page-tab{flex:1;padding:12px;border:none;background:transparent;
  color:var(--txt3);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;border-bottom:2px solid transparent;}
.follow-page-tab.active{color:var(--accent2);border-bottom-color:var(--accent2);}
.follow-user-row{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-radius:14px;margin-bottom:4px;background:var(--card);cursor:pointer;}
.follow-user-row:active{background:rgba(124,106,255,.14);}
.follow-user-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#b06aff);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;overflow:hidden;}
.follow-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.follow-user-info{flex:1;min-width:0;}
.follow-user-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.follow-user-sub{font-size:11px;color:var(--txt2);margin-top:2px;}
.follow-action-btn{padding:7px 14px;border-radius:16px;border:1.5px solid var(--border);
  background:transparent;color:var(--txt2);font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.follow-action-btn.danger{border-color:rgba(255,80,80,.35);color:#ff7070;}
.follow-action-btn:active{opacity:.7;}
/* notif-icon-badge follow */
.notif-icon-badge.follow{background:var(--accent);}


/* ── Settings Page (full-screen overlay, slides from right) ── */
.settings-page{
  position:fixed;inset:0;z-index:241;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overscroll-behavior:contain;
  will-change:transform;
}
.settings-page.open{transform:translateX(0);}
.settings-page-inner{display:flex;flex-direction:column;height:100%;}
.settings-page-header{
  display:flex;align-items:center;gap:14px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;
  background:rgba(var(--bg-rgb,18,18,28),.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.0);
  transition:border-color .2s;
  position:sticky;top:0;z-index:10;
}
.settings-page-header.scrolled{
  border-bottom-color:rgba(255,255,255,.08);
}
.settings-back-btn{
  width:38px;height:38px;border:none;
  background:rgba(255,255,255,.08);border-radius:50%;
  color:var(--txt);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s,transform .1s;
  min-width:44px;min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.settings-back-btn:active{background:rgba(255,255,255,.15);transform:scale(.9);}
.settings-page-title{font-size:22px;font-weight:900;letter-spacing:-.4px;}
.settings-page-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 32px);
  scroll-behavior:smooth;
}
.settings-page-body::-webkit-scrollbar{display:none;}
.settings-page-body .profile-section{margin-bottom:8px;}
.settings-page-body .profile-section-label{
  font-size:11px;font-weight:800;letter-spacing:.8px;
  color:var(--txt3);text-transform:uppercase;
  padding:12px 0 6px;
}
.settings-page-body .prof-quick-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding-bottom:4px;
}
.settings-page-body .profile-action{
  min-height:44px;-webkit-tap-highlight-color:transparent;
}
.settings-page-body .prof-qgrid-item{
  min-height:80px;-webkit-tap-highlight-color:transparent;
}

/* ── My Profile Content Tabs ── */
.my-prof-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--border);
  margin:8px -14px 0;
  flex-shrink:0;
}
.my-pt{
  flex:1;padding:12px 8px;border:none;background:transparent;
  color:var(--txt3);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:800;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;
}
.my-pt.active{color:var(--accent2);border-bottom-color:var(--accent2);}
.my-prof-body{margin:0 -14px;padding:0;}
.my-prof-pane{display:none;padding:14px;}
.my-prof-pane.active{display:block;}


/* ══ MY SOCIAL PANEL — styles ══ */
#my-social-panel.open{transform:translateX(0);}
/* BUG FIX #11: Pastikan tab pertama (uploads) aktif by default via JS saat panel dibuka */
.msp-tab{flex:1;padding:9px 4px;border:none;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:800;cursor:pointer;
  transition:all .2s;background:rgba(255,255,255,.06);color:var(--txt2);}
.msp-tab.active{background:rgba(124,106,255,.25);color:var(--accent2);}
.msp-loading,.msp-empty{text-align:center;padding:48px 20px;color:var(--txt3);}
.msp-loading i,.msp-empty i{font-size:32px;margin-bottom:12px;display:block;}
.msp-empty p{font-size:13px;font-weight:600;line-height:1.6;}
.msp-song-row{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:14px;margin-bottom:6px;background:var(--card);cursor:pointer;}
.msp-song-row:active{background:rgba(124,106,255,.14);}
.msp-song-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1040,#2a1050);
  display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;}
.msp-song-thumb img{width:100%;height:100%;object-fit:cover;}
.msp-song-info{flex:1;min-width:0;}
.msp-song-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msp-song-sub{font-size:11px;color:var(--txt2);margin-top:2px;}


/* ══ DEDUPE MODAL + MISC — styles ══ */
    #blm-ai-toggle:checked + #blm-ai-track{background:var(--accent);}
    #blm-ai-toggle:checked ~ #blm-ai-thumb,
    #blm-ai-toggle:checked + span + span{transform:translateX(20px);}
    label:has(#blm-ai-toggle:checked) span:last-child{transform:translateX(20px);}
    label:has(#blm-ai-toggle:checked) span:nth-child(2){background:var(--accent);}
    
/* ── LAZY LOAD MORE BTN ── */
.load-more-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:12px auto 4px;padding:12px 24px;
  background:var(--card);border:1px solid var(--border);
  border-radius:50px;color:var(--txt2);font-size:13px;font-weight:600;
  cursor:pointer;transition:background .2s,color .2s;
}
.load-more-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.load-more-btn i{font-size:11px;}

/* ══════════════════════════════════════
   UPLOAD PAGE — Native MD3 Feel
══════════════════════════════════════ */
/* ══════════════════════════════════════
   UPLOAD PAGE — Native feel, konsisten beranda
══════════════════════════════════════ */
/* ══════════════════════════════════════
   UPLOAD PAGE — native feel, konsisten beranda
══════════════════════════════════════ */
#v-upload{
  padding:0;
  background:var(--bg);
}

/* Header — ikut pola topbar beranda */
.up-header{
  padding:20px 16px 0;
  background:var(--bg);
}
.up-back-row{
  display:flex;align-items:center;gap:14px;margin-bottom:28px;
}
.up-back-btn{
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.07);border:none;
  color:var(--txt);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;-webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .12s;
  position:relative;overflow:hidden;
}
.up-back-btn:active{background:rgba(255,255,255,.13);transform:scale(.92);}
.up-title-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--accent2);margin-bottom:4px;
  font-family:'DM Sans',sans-serif;
}
.up-title-main{
  font-size:26px;font-weight:900;letter-spacing:-.5px;
  color:#fff;line-height:1.1;font-family:'DM Sans',sans-serif;
}

/* Drop zone */
.up-dropzone{
  margin:0 16px;
  border:1.5px dashed rgba(124,106,255,.3);
  border-radius:16px;
  padding:36px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;cursor:pointer;
  background:rgba(255,255,255,.03);
  transition:border-color .2s,background .2s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.up-dropzone:active{
  background:rgba(124,106,255,.07);
  border-color:rgba(124,106,255,.55);
  transform:scale(.982);
}
.up-dz-icon{
  width:64px;height:64px;border-radius:18px;
  background:rgba(124,106,255,.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  transition:transform .2s;
}
.up-dropzone:active .up-dz-icon{transform:scale(.88);}
.up-dz-icon i{font-size:26px;color:var(--accent2);}
.up-dz-title{
  font-size:15px;font-weight:800;color:#fff;
  margin:0;text-align:center;letter-spacing:-.2px;
  font-family:'DM Sans',sans-serif;
}
.up-dz-sub{
  font-size:12px;color:var(--txt3);font-weight:600;
  letter-spacing:.2px;margin-top:6px;
  font-family:'DM Sans',sans-serif;
}
.up-dz-filename{
  display:none;font-size:12px;font-weight:700;
  color:var(--accent2);margin-top:10px;
  text-align:center;word-break:break-all;padding:0 12px;
  font-family:'DM Sans',sans-serif;
}

/* Form section */
.up-form{display:none;padding:0 16px 16px;}

/* Cover row */
.up-cover-row{
  display:flex;align-items:center;gap:14px;
  padding:12px;border-radius:14px;
  background:rgba(255,255,255,.05);
  margin-bottom:2px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s;
  position:relative;overflow:hidden;
}
.up-cover-row:active{background:rgba(255,255,255,.09);}
.up-cover-thumb{
  width:52px;height:52px;border-radius:10px;
  background:var(--bg3);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.up-cover-thumb i{font-size:20px;color:var(--txt3);}
.up-cover-thumb img{width:100%;height:100%;object-fit:cover;}
.up-cover-info{flex:1;}
.up-cover-label{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.1px;font-family:'DM Sans',sans-serif;}
.up-cover-sub{font-size:12px;color:var(--txt2);margin-top:3px;font-weight:500;font-family:'DM Sans',sans-serif;}
.up-cover-chevron{
  width:28px;height:28px;border-radius:8px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.up-cover-chevron i{font-size:11px;color:var(--txt3);}

/* Fields */
.up-fields{margin-top:8px;display:flex;flex-direction:column;gap:8px;}
.up-input{
  width:100%;height:52px;padding:0 16px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  color:#fff;font-size:15px;font-weight:600;
  outline:none;box-sizing:border-box;
  -webkit-appearance:none;font-family:'DM Sans',sans-serif;
  transition:border-color .2s,background .2s;
}
.up-input:focus{
  border-color:rgba(124,106,255,.55);
  background:rgba(124,106,255,.05);
}
.up-input::placeholder{color:var(--txt3);font-family:'DM Sans',sans-serif;}
.up-select-wrap{position:relative;}
.up-select{
  width:100%;height:52px;padding:0 40px 0 16px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  color:#fff;font-size:15px;font-weight:600;
  outline:none;appearance:none;-webkit-appearance:none;
  box-sizing:border-box;font-family:'DM Sans',sans-serif;
  transition:border-color .2s;
}
.up-select:focus{border-color:rgba(124,106,255,.55);}
.up-select-arrow{
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);
  font-size:12px;color:var(--txt3);pointer-events:none;
}
.up-genre-hint{
  display:none;font-size:11px;color:var(--accent2);
  font-weight:700;padding-left:4px;font-family:'DM Sans',sans-serif;
}

/* Section label — sama persis dengan beranda sec-title tapi ukuran kecil */
.up-section-label{
  font-size:11px;font-weight:800;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.5px;
  margin:16px 0 8px;font-family:'DM Sans',sans-serif;
}

/* Progress */
.up-progress-bar{
  display:none;margin-top:16px;height:3px;
  border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;
}
.up-progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:99px;transition:width .3s;
}
.up-status{
  font-size:12px;color:var(--txt2);font-weight:600;
  margin-top:8px;min-height:16px;text-align:center;
  font-family:'DM Sans',sans-serif;
}

/* Submit button — identik dengan tombol utama beranda */
.up-btn-submit{
  width:100%;margin-top:20px;height:54px;
  border-radius:14px;border:none;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  color:#fff;font-size:16px;font-weight:800;
  cursor:pointer;font-family:'DM Sans',sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s,box-shadow .15s,filter .15s;
  box-shadow:0 6px 24px rgba(124,106,255,.3);
  display:flex;align-items:center;justify-content:center;gap:9px;
  letter-spacing:-.1px;
}
.up-btn-submit:active{
  transform:scale(.97);
  box-shadow:0 2px 10px rgba(124,106,255,.15);
  filter:brightness(.92);
}
.up-btn-reset{
  width:100%;margin-top:8px;
  margin-bottom:calc(32px + env(safe-area-inset-bottom,0px));
  height:48px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:transparent;
  color:var(--txt2);font-size:14px;font-weight:600;
  cursor:pointer;font-family:'DM Sans',sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.up-btn-reset:active{background:rgba(255,255,255,.05);}