/* ==========================================================================
   AUDIVA — Spotify-style UI (filter pills, grid 2 kolom, section unggulan,
   full-screen player, panel lirik karaoke, bell notifikasi)
   Dimuat setelah <style> inline agar menimpa aturan lama.
   ========================================================================== */

/* ================== SPOTIFY REDESIGN: pills, grid 2 kolom, unggulan, full player ================== */
.filter-pills{display:flex;gap:10px;margin:2px 0 16px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.filter-pills::-webkit-scrollbar{display:none}
.pill{border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;padding:9px 20px;
  border-radius:999px;background:#2A2A2A;color:#b3b3b3;transition:.2s;white-space:nowrap}
.pill:hover{color:#fff;background:#3a3a3a}
.pill.active,.pill.active:hover{background:#1DB954;color:#121212}

/* Grid 2 kolom ala Spotify: cover kiri + judul kanan, bg #181818, radius 8px */
#grid.sp{grid-template-columns:repeat(2,1fr);gap:10px}
#grid.sp .card{display:flex;align-items:center;gap:12px;background:#181818;border-radius:8px;
  padding:8px;min-width:0;overflow:hidden}
#grid.sp .card .cover{width:56px;height:56px;aspect-ratio:auto;flex:0 0 56px;margin:0;
  border-radius:6px;font-size:20px;box-shadow:none}
#grid.sp .card .pbtn{width:34px;height:34px;right:4px;bottom:4px}
#grid.sp .card .tt{font-size:14px}
#grid.sp .card .ar{font-size:12px;margin-top:2px}
#grid.sp .card .badge{top:4px;left:4px;right:auto;font-size:9px;padding:2px 6px}
@media(max-width:640px){
  #grid.sp{gap:8px}
  #grid.sp .card{gap:8px;padding:6px}
  #grid.sp .card .cover{width:44px;height:44px;flex-basis:44px;font-size:16px}
  #grid.sp .card .tt{font-size:12.5px}
  #grid.sp .card .ar{font-size:11px}
}

/* Bell notifikasi */
.notif-wrap{position:relative}
.notif-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:8px;
  background:#1DB954;color:#000;font-size:10px;font-weight:800;display:flex;align-items:center;
  justify-content:center;padding:0 4px;pointer-events:none}
.notif-badge.hidden{display:none}
.notif-drop{position:absolute;right:0;top:calc(100% + 10px);width:320px;max-width:86vw;background:#1c1c1c;
  border:1px solid #ffffff1f;border-radius:12px;box-shadow:0 18px 50px #000c;z-index:300;overflow:hidden}
.notif-drop.hidden{display:none}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid #ffffff14;font-weight:800;font-size:13px}
.notif-head button{color:#1DB954;font-size:12px;font-weight:700;background:none;border:0;cursor:pointer;font-family:inherit}
.notif-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid #ffffff0d;cursor:pointer}
.notif-item:hover{background:#ffffff10}
.notif-item .ni-ic{width:32px;height:32px;border-radius:50%;background:#1DB95422;color:#1DB954;
  display:flex;align-items:center;justify-content:center;flex:0 0 32px;font-size:15px}
.notif-item .ni-tx{font-size:12.5px;line-height:1.45;color:#eaeaea;flex:1;min-width:0;word-break:break-word}
.notif-item .ni-tm{font-size:10.5px;color:#8f8f8f;margin-top:2px}
.notif-item.unread .ni-tx{font-weight:700}
.notif-empty{padding:18px 14px;color:#8f8f8f;font-size:12.5px;text-align:center}

/* Section unggulan dengan cover besar full-width */
.feature{position:relative;border-radius:14px;overflow:hidden;min-height:200px;display:flex;
  align-items:flex-end;background:#181818;margin-bottom:28px;cursor:pointer}
.feature .fimg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.5)}
.feature .fbody{position:relative;z-index:1;padding:22px;width:100%;
  background:linear-gradient(transparent,#000000d9)}
.feature .fk{font-size:11px;font-weight:800;letter-spacing:2px;color:#1DB954;text-transform:uppercase}
.feature .ft{font-size:28px;font-weight:800;margin-top:6px;line-height:1.15}
.feature .fs{color:#ddd;font-size:13px;margin-top:6px}
.feature .fplay{margin-top:14px;width:50px;height:50px;border-radius:50%;background:#1DB954;color:#000;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px #0007}

/* FULL PLAYER (layar penuh) */
.fp{position:fixed;inset:0;z-index:9999;background:linear-gradient(#3a3a3a,#000 62%);color:#fff;
  display:flex;flex-direction:column;overflow:hidden}
.fp.hidden{display:none}
.fp-top{display:flex;align-items:center;gap:14px;padding:14px 18px;flex:0 0 auto}
.fp-back,.fp-close{width:38px;height:38px;border-radius:50%;background:#ffffff18;display:flex;
  align-items:center;justify-content:center;color:#fff;flex:0 0 38px}
.fp-pl{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:#c9c9c9;font-weight:800;
  flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-body{flex:1 1 auto;overflow-y:auto;padding:4px 20px calc(28px + env(safe-area-inset-bottom,0px));
  max-width:560px;width:100%;margin:0 auto}
.fp-cover{width:300px;max-width:100%;height:300px;max-height:44vw;border-radius:10px;margin:10px auto 20px;
  display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800;
  background:#333 center/cover no-repeat;box-shadow:0 24px 60px #000a}
.fp-meta{margin-bottom:14px}
.fp-t{font-size:26px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-a{color:#b3b3b3;font-size:15px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-prog{display:flex;align-items:center;gap:10px;margin:12px 0 8px}
.fp-prog .bar{flex:1;height:5px;background:#ffffff3d;border-radius:3px;position:relative;cursor:pointer}
.fp-prog .bar .fill{height:100%;background:#fff;border-radius:3px;width:0}
.fp-time{font-size:11.5px;color:#c9c9c9;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.fp-ctrls{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px}
.fp-ctrls .icon-btn{color:#e6e6e6}
.fp-ctrls .icon-btn.active{color:#1DB954}
.fp-ctrls .fp-play{width:64px;height:64px;border-radius:50%;background:#fff;color:#000;display:flex;
  align-items:center;justify-content:center;border:0;cursor:pointer}
.fp-ctrls .fp-play:hover{transform:scale(1.05)}
.fp-extra{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 6px;color:#c9c9c9}
.fp-extra button{display:flex;align-items:center;gap:8px;color:inherit;font-size:13px;font-weight:700;
  background:none;border:0;cursor:pointer;font-family:inherit}
.fp-extra button.on{color:#1DB954}
.fp-lyrics{display:none;margin-top:10px;border-top:1px solid #ffffff1a;padding:14px 0 6px;
  max-height:42vh;overflow-y:auto;scroll-behavior:smooth}
.fp-lyrics.on{display:block}
.fp-lyric{font-size:16px;line-height:1.6;color:#8f8f8f;padding:7px 0;font-weight:700;
  transition:color .2s,font-size .2s;cursor:pointer}
.fp-lyric.on{color:#fff;font-size:19px}
.fp-qhead{font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:#b3b3b3;text-transform:uppercase;
  margin:18px 0 8px}
.fp-qitem{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;min-width:0}
.fp-qitem:hover{background:#ffffff12}
.fp-qitem.cur{background:#ffffff0f}
.fp-qitem .qcov{width:42px;height:42px;border-radius:5px;flex:0 0 42px;display:flex;align-items:center;
  justify-content:center;background:#333 center/cover no-repeat;font-weight:800;font-size:16px}
.fp-qmeta{min-width:0;flex:1}
.fp-qitem .qt{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-qitem .qa{font-size:12px;color:#b3b3b3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.fp-empty{color:#b3b3b3;font-size:13px;padding:8px 0}

/* ---------- Lirik: state kosong & baris yang bisa diklik ---------- */
.fp-empty-lyrics{display:flex;flex-direction:column;gap:6px;padding:20px 6px;text-align:center;color:#b3b3b3}
.fp-empty-lyrics b{color:#fff;font-size:15px;font-weight:800}
.fp-empty-lyrics span{font-size:12.5px;line-height:1.55;color:#9a9a9a}
.fp-lyric.clickable{cursor:pointer}
.fp-lyric.clickable:hover{color:#e8e8e8}
.fp-lyric.on{cursor:default}

/* ---------- Cover full player responsif (tetap kotak) ---------- */
.fp-cover{width:min(300px,72vw);height:min(300px,72vw);max-height:none}
@media(max-height:640px){.fp-cover{width:min(220px,52vw);height:min(220px,52vw)}}

/* ---------- Skeleton loading (tanpa teks "Loading...") ---------- */
.skel-card{display:flex;align-items:center;gap:12px;background:#181818;border-radius:8px;padding:10px;overflow:hidden}
.skel-cover{width:56px;height:56px;flex:0 0 56px;border-radius:6px;
  background:linear-gradient(90deg,#202020 25%,#2e2e2e 37%,#202020 63%);background-size:400% 100%;
  animation:skel 1.35s ease infinite}
.skel-lines{flex:1;min-width:0}
.skel-line{height:11px;border-radius:5px;margin-top:8px;
  background:linear-gradient(90deg,#202020 25%,#2e2e2e 37%,#202020 63%);background-size:400% 100%;
  animation:skel 1.35s ease infinite}
.skel-line:first-child{margin-top:0}
.skel-line.w70{width:70%}.skel-line.w45{width:45%}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Full player: aman dari notch ---------- */
.fp-top{padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px}

/* ---------- Lirik: indikator transkripsi otomatis ---------- */
.fp-lyrspin{width:22px;height:22px;margin:10px auto 2px;border-radius:50%;
  border:2px solid #2f2f2f;border-top-color:#1DB954;animation:lspin .9s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}