/* ============================================================
   VENZE MUSIC — stylesheet
   Tema : Blue / Black premium
   Developer : Venze
   ============================================================ */

:root{
  --bg:#04070f;
  --bg2:#070c17;
  --panel:rgba(126,164,255,.055);
  --panel2:rgba(126,164,255,.10);
  --line:rgba(126,164,255,.14);
  --txt:#e9efff;
  --muted:#8b9bc0;
  --accent:#3b82f6;
  --accent2:#22d3ee;
  --accent3:#60a5fa;
  --grad:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);
  --grad-soft:linear-gradient(135deg,rgba(37,99,235,.32),rgba(6,182,212,.22));
  --shadow:0 18px 50px rgba(0,0,0,.6);
  --glow:0 12px 34px rgba(37,99,235,.35);
  --r:16px;
  --sidebar:258px;
  --player-h:94px;
}

*{ box-sizing:border-box; }

/* ukuran default ikon SVG (di-override oleh class di bawah) */
svg{ width:16px; height:16px; flex:none; display:inline-block; vertical-align:-.15em; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1000px 620px at 8% -12%, rgba(37,99,235,.32), transparent 62%),
    radial-gradient(900px 520px at 98% -4%, rgba(6,182,212,.20), transparent 62%),
    radial-gradient(900px 700px at 50% 118%, rgba(59,130,246,.18), transparent 62%),
    var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

button{ font-family:inherit; color:inherit; cursor:pointer; }
img{ display:block; }
a{ color:inherit; text-decoration:none; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(126,164,255,.22); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(126,164,255,.4); background-clip:padding-box; }

:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px; }

/* ================= LAYOUT ================= */
.app{
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:100vh;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:22px 16px;
  background:linear-gradient(180deg, rgba(10,18,38,.92), rgba(6,10,22,.86));
  border-right:1px solid var(--line);
  backdrop-filter:blur(16px);
  z-index:60;
}

.brand{ display:flex; align-items:center; gap:12px; padding:4px 6px; }
.logo{
  width:44px; height:44px; border-radius:14px;
  background:var(--grad);
  display:grid; place-items:center;
  font-weight:800; font-size:21px;
  box-shadow:0 10px 26px rgba(37,99,235,.55);
}
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt b{ font-size:17.5px; letter-spacing:.2px; }
.brand-txt small{ color:var(--muted); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; }

.nav{ display:flex; flex-direction:column; gap:6px; }
.nav-btn{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:12px 15px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:var(--muted);
  font-size:14.5px; font-weight:600;
  transition:.18s;
  text-align:left;
}
.nav-btn svg{ width:19px; height:19px; }
.nav-btn:hover{ background:var(--panel); color:var(--txt); transform:translateX(3px); }
.nav-btn.active{
  background:var(--grad-soft);
  border-color:rgba(96,165,250,.45);
  color:#fff;
  box-shadow:0 8px 24px rgba(37,99,235,.25);
}
.nav-btn.active::before{
  content:"";
  position:absolute; left:-16px; top:20%;
  width:4px; height:60%;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}

.side-card{
  margin-top:auto;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(37,99,235,.24), rgba(6,182,212,.12));
  border:1px solid rgba(96,165,250,.28);
}
.side-card p{ margin:10px 0 14px; font-size:12.5px; color:#c6d4f2; line-height:1.55; }
.side-card .eq{ display:flex; gap:3px; align-items:flex-end; height:24px; }
.side-card .eq i{ display:block; width:4px; border-radius:3px; }
.side-card .eq i:nth-child(1){ height:12px; animation-delay:0s; }
.side-card .eq i:nth-child(2){ height:21px; animation-delay:.15s; }
.side-card .eq i:nth-child(3){ height:14px; animation-delay:.3s; }
.side-card .eq i:nth-child(4){ height:23px; animation-delay:.45s; }
.side-mini{
  width:100%;
  padding:10px 12px;
  border:0; border-radius:12px;
  background:var(--grad);
  color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:.18s;
  box-shadow:var(--glow);
}
.side-mini:hover{ filter:brightness(1.14); transform:translateY(-2px); }
.side-mini svg{ width:15px; height:15px; }

.side-dev{
  display:flex; align-items:center; gap:8px;
  padding:11px 13px;
  border-radius:13px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
}
.side-dev b{ color:#fff; letter-spacing:.4px; }

.dev-dot{
  width:8px; height:8px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

.sidebar-shade{ display:none; }

/* ================= MAIN / TOPBAR ================= */
.main{
  display:flex; flex-direction:column;
  min-width:0;
  padding-bottom:calc(var(--player-h) + 26px);
}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:14px clamp(16px,3vw,34px);
  background:rgba(4,7,15,.75);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.topbar .menu-btn{ display:none; }

.search{
  position:relative;
  flex:1; max-width:640px;
  display:flex; align-items:center; gap:10px;
  padding:0 16px;
  height:46px;
  border-radius:99px;
  background:var(--panel);
  border:1px solid var(--line);
  transition:.2s;
}
.search:focus-within{
  border-color:rgba(59,130,246,.8);
  box-shadow:0 0 0 4px rgba(59,130,246,.16);
  background:rgba(126,164,255,.09);
}
.s-ico{ display:flex; color:var(--muted); }
.s-ico svg{ width:18px; height:18px; }
.search input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  color:var(--txt); font-size:14.5px;
}
.search input::placeholder{ color:#71809f; }
.s-clear{ background:transparent; border:0; color:var(--muted); display:flex; padding:4px; border-radius:50%; }
.s-clear[hidden]{ display:none; }
.s-clear:hover{ color:#fff; background:var(--panel2); }
.s-clear svg{ width:16px; height:16px; }

.suggest{
  position:absolute; top:54px; left:0; right:0;
  background:#0a1020;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:80;
  animation:pop .16s ease;
}
@keyframes pop{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.sug-item{
  display:flex; align-items:center; gap:11px;
  width:100%;
  padding:12px 16px;
  background:transparent; border:0;
  font-size:14px; color:#d5dff7;
  text-align:left;
  transition:.14s;
}
.sug-item svg{ width:15px; height:15px; color:var(--muted); flex:none; }
.sug-item:hover,.sug-item.on{ background:rgba(59,130,246,.24); color:#fff; }
.sug-item mark{ background:none; color:var(--accent2); font-weight:700; }

.dev-badge{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  padding:9px 16px;
  border-radius:99px;
  background:var(--grad-soft);
  border:1px solid rgba(96,165,250,.45);
  font-size:13px; color:#dce7ff;
  white-space:nowrap;
}
.dev-badge b{ color:#fff; letter-spacing:.5px; }

/* ================= VIEW ================= */
.view{ flex:1; padding:26px clamp(16px,3vw,34px) 40px; animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin:32px 0 16px;
}
.section-head:first-child{ margin-top:0; }
.section-head h2{
  margin:0; font-size:21px; letter-spacing:.2px;
  position:relative; padding-left:14px;
}
.section-head h2::before{
  content:"";
  position:absolute; left:0; top:4px; bottom:4px;
  width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.section-head p{ margin:6px 0 0 14px; color:var(--muted); font-size:13px; }
.link-btn{
  background:var(--panel); border:1px solid var(--line);
  color:var(--muted); border-radius:99px;
  padding:8px 16px; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  transition:.18s;
}
.link-btn svg{ width:14px; height:14px; }
.link-btn:hover{ color:#fff; border-color:rgba(96,165,250,.6); background:rgba(59,130,246,.2); transform:translateY(-1px); }

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:clamp(28px,4vw,50px);
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(37,99,235,.55), transparent 65%),
    linear-gradient(120deg, rgba(30,64,175,.75), rgba(8,147,218,.42) 55%, rgba(6,182,212,.30));
  border:1px solid rgba(126,164,255,.25);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.45;
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:99px;
  background:rgba(3,6,15,.5);
  border:1px solid rgba(148,197,255,.3);
  font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:#dbe8ff;
}
.hero-eyebrow svg{ width:14px; height:14px; color:var(--accent2); }
.hero h1{
  position:relative; z-index:1;
  margin:16px 0 8px;
  font-size:clamp(32px,5vw,54px);
  line-height:1.05;
  letter-spacing:-1.2px;
}
.hero h1 span{
  background:linear-gradient(90deg,#ffffff 10%, #93c5fd 55%, #22d3ee);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ position:relative; z-index:1; margin:0; max-width:580px; color:#d3def5; font-size:15px; line-height:1.65; }
.hero-dev{ position:relative; z-index:1; margin-top:16px; font-size:13px; color:#b9c8e8; }
.hero-dev b{ color:#fff; }
.hero-actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px;
  border-radius:99px;
  border:1px solid transparent;
  font-size:14px; font-weight:700;
  transition:.18s;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--glow); }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.btn-ghost{ background:rgba(3,6,15,.5); border-color:rgba(148,197,255,.3); color:#fff; }
.btn-ghost:hover{ background:rgba(3,6,15,.72); border-color:rgba(96,165,250,.6); }

/* CHIPS */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chip{
  padding:10px 18px;
  border-radius:99px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:13px; color:#c9d6f2;
  transition:.18s;
}
.chip:hover{
  background:var(--grad-soft);
  border-color:rgba(96,165,250,.6);
  color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}

/* TABS */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{
  padding:10px 18px;
  border-radius:99px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:8px;
  transition:.18s;
}
.tab svg{ width:15px; height:15px; }
.tab:hover{ color:#fff; background:var(--panel2); }
.tab.active{
  background:var(--grad); color:#fff; border-color:transparent;
  box-shadow:0 10px 26px rgba(37,99,235,.4);
}
.tab b{ font-weight:700; opacity:.85; }

/* RAIL / CARDS */
.rail{
  display:flex; gap:16px;
  overflow-x:auto;
  padding:6px 2px 16px;
  scroll-snap-type:x mandatory;
}
.rail::-webkit-scrollbar{ height:8px; }

.card{
  flex:0 0 auto;
  width:172px;
  scroll-snap-align:start;
  background:linear-gradient(180deg, rgba(126,164,255,.07), rgba(126,164,255,.03));
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  transition:.2s;
  position:relative;
  text-align:left;
}
.card:hover,.card:focus-within{
  transform:translateY(-6px);
  background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(6,182,212,.08));
  border-color:rgba(96,165,250,.5);
  box-shadow:0 22px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(96,165,250,.25);
}
.card-cover{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1/1; background:#0a1020; }
.card-cover img{ width:100%; height:100%; object-fit:cover; transition:.35s; }
.card:hover .card-cover img{ transform:scale(1.07); }
.card-fab{
  position:absolute; right:10px; bottom:10px;
  width:42px; height:42px; border-radius:50%;
  background:var(--grad);
  border:0; display:grid; place-items:center;
  opacity:0; transform:translateY(10px) scale(.9);
  transition:.2s;
  box-shadow:0 12px 26px rgba(0,0,0,.6);
}
.card-fab svg{ width:18px; height:18px; color:#fff; }
.card:hover .card-fab,.card:focus-within .card-fab{ opacity:1; transform:none; }
.card-fab:hover{ filter:brightness(1.15); }
.card-title{
  margin:12px 3px 3px;
  font-size:14px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-sub{
  margin:0 3px;
  font-size:12.2px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card.round{ width:152px; background:transparent; border:0; padding:0; }
.card.round .card-cover{ border-radius:50%; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  gap:18px;
}
.grid .card{ width:auto; }

/* SONG ROWS */
.list{ display:flex; flex-direction:column; gap:5px; }
.row{
  display:grid;
  grid-template-columns:34px 48px minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid transparent;
  transition:.15s;
  cursor:pointer;
}
.row:hover{ background:var(--panel); border-color:var(--line); transform:translateX(3px); }
.row.playing{
  background:linear-gradient(135deg, rgba(37,99,235,.28), rgba(6,182,212,.14));
  border-color:rgba(96,165,250,.45);
  box-shadow:inset 3px 0 0 var(--accent2), 0 8px 22px rgba(0,0,0,.3);
}
.row-n{ color:var(--muted); font-size:13px; text-align:center; }
.row-eq{ display:flex; gap:2px; align-items:flex-end; height:14px; justify-content:center; }
.row-eq i{ width:3px; background:linear-gradient(180deg,#a5f3fc,#2563eb); border-radius:2px; animation:bounce .9s ease-in-out infinite; }
.row-eq i:nth-child(1){ height:8px; }
.row-eq i:nth-child(2){ height:13px; animation-delay:.2s; }
.row-eq i:nth-child(3){ height:10px; animation-delay:.4s; }
.row.playing .row-n{ color:#fff; }
.row-art{ width:48px; height:48px; border-radius:11px; object-fit:cover; background:#0a1020; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.row-meta{ min-width:0; }
.row-title{
  font-size:14.3px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row.playing .row-title{ color:#fff; }
.row-sub{
  font-size:12.4px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row-dur{ color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.row-btn{
  width:36px; height:36px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--line);
  display:grid; place-items:center;
  opacity:0;
  transition:.15s;
  color:#fff;
}
.row-btn svg{ width:15px; height:15px; }
.row:hover .row-btn,.row:focus-within .row-btn{ opacity:1; background:var(--grad); border-color:transparent; }

/* DETAIL HEADER */
.detail-head{
  display:flex; gap:26px; align-items:flex-end;
  padding:28px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(37,99,235,.28), rgba(126,164,255,.03));
  border:1px solid var(--line);
}
.detail-cover{
  width:192px; height:192px;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 26px 54px rgba(0,0,0,.65), 0 0 0 1px rgba(126,164,255,.2);
  background:#0a1020;
  flex:none;
}
.detail-info h1{ margin:10px 0 8px; font-size:clamp(26px,4vw,46px); letter-spacing:-.6px; }
.detail-info .meta{ color:#c3d1ee; font-size:13.5px; line-height:1.65; }
.detail-info .meta b{ color:#fff; }
.detail-actions{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

.artist-head{ align-items:center; }
.artist-head .detail-cover{ border-radius:50%; box-shadow:0 26px 54px rgba(0,0,0,.65), 0 0 0 4px rgba(59,130,246,.35); }
.verified{ display:inline-flex; align-items:center; gap:7px; color:var(--accent2); font-size:12.5px; font-weight:700; letter-spacing:.6px; }
.verified svg{ width:15px; height:15px; }

/* EMPTY / ERROR */
.empty{
  text-align:center;
  padding:72px 20px;
  border:1px dashed rgba(126,164,255,.3);
  border-radius:22px;
  background:var(--panel);
}
.empty .big{ color:var(--accent3); margin-bottom:14px; }
.empty .big svg{ width:46px; height:46px; }
.empty h3{ margin:0 0 8px; font-size:19px; }
.empty p{ margin:0 auto; max-width:440px; color:var(--muted); font-size:14px; line-height:1.65; }

/* SKELETON */
.skeleton{
  position:relative; overflow:hidden;
  background:rgba(126,164,255,.07);
  border-radius:14px;
}
.skeleton::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(148,197,255,.12), transparent);
  transform:translateX(-100%);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
.hero-skeleton{ height:216px; border-radius:26px; }
.sk-row{ display:flex; gap:16px; margin-top:26px; overflow:hidden; }
.sk-card{ width:172px; height:214px; flex:none; }
.sk-line{ height:14px; margin:10px 0; }
.sk-line.w60{ width:60%; }
.sk-line.w40{ width:40%; }
.sk-row-list{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.sk-item{ height:66px; border-radius:14px; }

/* ================= FOOTER ================= */
.footer{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding:24px clamp(16px,3vw,34px);
  border-top:1px solid var(--line);
  color:var(--muted); font-size:12.5px;
}
.footer b{ color:#fff; }

/* ================= DRAWER ================= */
.drawer{
  position:fixed;
  top:0; right:0;
  bottom:var(--player-h);
  width:min(400px,92vw);
  background:linear-gradient(180deg, #070d1c, #05080f);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(0,0,0,.6);
  z-index:70;
  display:flex; flex-direction:column;
  transform:translateX(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.drawer[hidden]{ display:none; }
.drawer.open{ transform:none; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.drawer-body{ flex:1; overflow-y:auto; padding:18px; }

.drawer-shade{
  position:fixed; inset:0;
  background:rgba(2,5,12,.6);
  backdrop-filter:blur(3px);
  z-index:65;
  opacity:0; pointer-events:none;
  transition:.25s;
}
.drawer-shade.show{ opacity:1; pointer-events:auto; }

/* LYRICS */
.lyric-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.lyric-toolbar span{
  font-size:11.5px; color:var(--muted); letter-spacing:.8px; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.switch{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--muted);
  background:var(--panel); border:1px solid var(--line);
  padding:7px 13px; border-radius:99px;
  transition:.18s;
  flex:none;
}
.switch svg{ width:14px; height:14px; }
.switch:hover{ color:#fff; border-color:rgba(96,165,250,.55); }
.switch.on{ background:rgba(59,130,246,.32); border-color:rgba(96,165,250,.6); color:#fff; }

.lyrics{ display:flex; flex-direction:column; gap:16px; }
.lyric{
  font-size:17px; line-height:1.5;
  color:#5f6f92;
  transition:.25s;
  cursor:pointer;
}
.lyric .tr{ display:block; font-size:13.5px; color:#48587a; margin-top:3px; }
.lyric:hover{ color:#a9b8d8; }
.lyric.active{ color:#fff; font-weight:700; transform:scale(1.03); transform-origin:left center; text-shadow:0 0 24px rgba(59,130,246,.6); }
.lyric.active .tr{ color:var(--accent2); }
.lyric.passed{ color:#8b9bc0; }
.lyrics-plain p{ margin:0 0 14px; color:#c2cfe9; font-size:15.5px; line-height:1.75; }

/* QUEUE */
.q-item{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:12px; align-items:center;
  padding:9px 10px;
  border-radius:13px;
  cursor:pointer;
  transition:.15s;
  border:1px solid transparent;
}
.q-item:hover{ background:var(--panel); border-color:var(--line); }
.q-item.current{
  background:linear-gradient(135deg, rgba(37,99,235,.3), rgba(6,182,212,.14));
  border-color:rgba(96,165,250,.45);
}
.q-item img{ width:46px; height:46px; border-radius:10px; object-fit:cover; background:#0a1020; }
.q-item .t{ font-size:13.6px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.q-item .s{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.q-item .n{ font-size:12px; color:var(--muted); display:flex; align-items:center; }
.q-item .n svg{ width:15px; height:15px; color:var(--accent2); }

/* ================= MINI PLAYER ================= */
.player{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--player-h);
  z-index:90;
  display:grid;
  grid-template-columns:minmax(210px,1fr) minmax(320px,1.7fr) minmax(210px,1fr);
  align-items:center;
  gap:18px;
  padding:0 clamp(12px,2vw,24px);
  background:linear-gradient(180deg, rgba(8,13,28,.94), rgba(4,7,15,.97));
  backdrop-filter:blur(22px);
  border-top:1px solid rgba(126,164,255,.18);
  box-shadow:0 -16px 44px rgba(0,0,0,.55);
}
.player::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.85), rgba(34,211,238,.85), transparent);
}

.p-info{ display:flex; align-items:center; gap:13px; min-width:0; }
.p-art-wrap{ position:relative; flex:none; cursor:pointer; }
.p-art{
  width:58px; height:58px;
  border-radius:12px;
  object-fit:cover;
  background:#0a1020;
  box-shadow:0 10px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(126,164,255,.18);
  transition:.2s;
}
.p-art-wrap:hover .p-art{ transform:scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,.7), 0 0 0 2px rgba(96,165,250,.5); }
.p-eq{
  position:absolute; right:-4px; bottom:-4px;
  display:none;
  gap:2px; align-items:flex-end;
  padding:4px;
  background:#05070f;
  border-radius:8px;
  border:1px solid var(--line);
  height:18px;
}
.p-eq.on{ display:flex; }
.p-eq i,.eq i{
  width:3px;
  background:linear-gradient(180deg,#a5f3fc,#2563eb);
  border-radius:2px;
  animation:bounce .9s ease-in-out infinite;
}
.p-eq i:nth-child(1){ height:7px; animation-delay:0s; }
.p-eq i:nth-child(2){ height:13px; animation-delay:.2s; }
.p-eq i:nth-child(3){ height:9px; animation-delay:.4s; }
@keyframes bounce{ 0%,100%{ transform:scaleY(.35);} 50%{ transform:scaleY(1);} }

.p-txt{ min-width:0; cursor:pointer; }
.p-title{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-artist{ font-size:12.3px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.p-fav{ flex:none; }
.p-fav.on{ color:#fb7185; }
.p-fav.on svg{ fill:currentColor; }

.p-mid{ display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; width:100%; }
.p-ctrls{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  background:transparent;
  border:1px solid transparent;
  color:var(--muted);
  transition:.16s;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ color:#fff; background:var(--panel2); transform:scale(1.06); }
.icon-btn.on{ color:var(--accent2); background:rgba(34,211,238,.16); }
.icon-btn.ctrl{ width:40px; height:40px; }
.icon-btn.ctrl-lg{ width:44px; height:44px; background:var(--panel); border-color:var(--line); }
.icon-btn.ctrl-lg svg{ width:22px; height:22px; }
.icon-btn.ctrl-lg:hover{ background:rgba(59,130,246,.28); border-color:rgba(96,165,250,.5); }

.play-btn{
  width:48px; height:48px;
  border-radius:50%;
  border:0;
  background:var(--grad);
  display:grid; place-items:center;
  color:#fff;
  box-shadow:0 12px 28px rgba(37,99,235,.55);
  transition:.16s;
}
.play-btn svg{ width:21px; height:21px; }
.play-btn:hover{ transform:scale(1.08); filter:brightness(1.14); }
.play-btn:active{ transform:scale(.96); }
.play-btn.loading span{ display:block; width:19px; height:19px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.p-seek{ display:flex; align-items:center; gap:11px; width:100%; max-width:640px; }
.p-seek .t{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:34px; text-align:center; }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px;
  background:transparent;
  cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:99px;
  background:linear-gradient(to right, var(--accent) 0, var(--accent2) var(--p,0%), rgba(126,164,255,.18) var(--p,0%), rgba(126,164,255,.18) 100%);
}
input[type=range]::-moz-range-track{
  height:5px; border-radius:99px;
  background:linear-gradient(to right, var(--accent) 0, var(--accent2) var(--p,0%), rgba(126,164,255,.18) var(--p,0%), rgba(126,164,255,.18) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:13px; height:13px; margin-top:-4px;
  border-radius:50%;
  background:#fff;
  border:0;
  opacity:0; transition:.15s;
  box-shadow:0 2px 8px rgba(0,0,0,.7);
}
input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border:0;
  border-radius:50%; background:#fff;
  opacity:0; transition:.15s;
}
input[type=range]:hover::-webkit-slider-thumb{ opacity:1; }
input[type=range]:hover::-moz-range-thumb{ opacity:1; }

.p-right{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.vol{ display:flex; align-items:center; gap:7px; width:118px; }
.p-progress-mobile{ display:none; }

/* ================= FULL-SCREEN PLAYER ================= */
.fullplayer{
  position:fixed; inset:0;
  z-index:100;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:#04060d;
  animation:fsIn .3s cubic-bezier(.4,0,.2,1);
}
.fullplayer[hidden]{ display:none; }
.fullplayer.closing{ animation:fsOut .26s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fsIn{ from{ opacity:0; transform:translateY(28px) scale(.99);} to{ opacity:1; transform:none;} }
@keyframes fsOut{ to{ opacity:0; transform:translateY(28px) scale(.99);} }

.fp-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.fp-bg img{ width:100%; height:100%; object-fit:cover; filter:blur(70px) saturate(1.6); transform:scale(1.25); opacity:.5; }
.fp-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(37,99,235,.5), transparent 65%),
    linear-gradient(180deg, rgba(4,6,13,.72), rgba(4,6,13,.94));
}

.fp-inner{
  position:relative; z-index:1;
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(14px,2.4vh,26px);
  padding:clamp(16px,4vw,48px);
  overflow-y:auto;
}

.fp-head{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:14px;
  padding:16px clamp(14px,3vw,28px);
}
.fp-head-txt{ flex:1; min-width:0; text-align:center; }
.fp-head-txt span{
  display:block;
  font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:#9fb2d6;
}
.fp-head-txt b{
  display:block;
  font-size:14px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.fp-art-wrap{ position:relative; flex:none; }
.fp-art{
  width:min(38vh,330px); height:min(38vh,330px);
  border-radius:26px;
  object-fit:cover;
  background:#0a1020;
  box-shadow:0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(126,164,255,.22), 0 0 70px rgba(37,99,235,.35);
  animation:artFloat 6s ease-in-out infinite;
}
@keyframes artFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.fp-eq{
  position:absolute; right:-6px; bottom:-6px;
  display:none;
  gap:3px; align-items:flex-end;
  padding:7px 8px;
  background:#05070f;
  border-radius:12px;
  border:1px solid var(--line);
  height:26px;
}
.fp-eq.on{ display:flex; }
.fp-eq i{ width:4px; background:linear-gradient(180deg,#a5f3fc,#2563eb); border-radius:2px; animation:bounce .9s ease-in-out infinite; }
.fp-eq i:nth-child(1){ height:10px; }
.fp-eq i:nth-child(2){ height:18px; animation-delay:.2s; }
.fp-eq i:nth-child(3){ height:13px; animation-delay:.4s; }

.fp-meta{ width:min(560px,100%); text-align:center; position:relative; padding:0 46px; }
.fp-title{
  font-size:clamp(21px,3vw,30px); font-weight:800; letter-spacing:-.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fp-artist{ margin-top:6px; font-size:15px; color:#a8b8da; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-fav{ position:absolute; right:0; top:2px; }
.fp-fav.on{ color:#fb7185; }
.fp-fav.on svg{ fill:currentColor; }

.fp-seek{ width:min(620px,100%); }
.fp-seek input{ height:22px; }
.fp-times{
  display:flex; justify-content:space-between;
  margin-top:2px;
  font-size:11.5px; color:#93a4c8; font-variant-numeric:tabular-nums;
}

.fp-ctrls{ display:flex; align-items:center; gap:clamp(14px,3vw,26px); }
.fp-ctrls .play-btn{ width:64px; height:64px; }
.fp-ctrls .play-btn svg{ width:27px; height:27px; }
.fp-ctrls .icon-btn{ width:48px; height:48px; }
.fp-ctrls .icon-btn svg{ width:22px; height:22px; }

.fp-extra{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.fp-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:99px;
  background:rgba(126,164,255,.10);
  border:1px solid var(--line);
  color:#cfdaf3;
  font-size:13px; font-weight:600;
  transition:.18s;
}
.fp-chip svg{ width:15px; height:15px; }
.fp-chip:hover{ background:rgba(59,130,246,.26); border-color:rgba(96,165,250,.55); color:#fff; }
.fp-vol{ display:flex; align-items:center; gap:9px; width:170px; color:var(--muted); }
.fp-vol svg{ width:17px; height:17px; }

/* full-screen + drawer */
body.fs-open .drawer{ bottom:0; z-index:120; }
body.fs-open .drawer-shade{ z-index:115; }

/* ================= TOASTS ================= */
.toasts{
  position:fixed;
  left:50%; bottom:calc(var(--player-h) + 22px);
  transform:translateX(-50%);
  z-index:130;
  display:flex; flex-direction:column; gap:9px;
  align-items:center;
  pointer-events:none;
  width:max-content;
  max-width:92vw;
}
.toast{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  border-radius:99px;
  background:rgba(8,14,30,.97);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  font-size:13.5px;
  animation:toastIn .25s ease;
  max-width:92vw;
}
.toast svg{ width:15px; height:15px; flex:none; }
.toast.err{ border-color:rgba(244,63,94,.55); background:rgba(30,8,18,.97); }
.toast.err svg{ color:#fb7185; }
.toast.ok{ border-color:rgba(34,197,94,.5); }
.toast.ok svg{ color:#4ade80; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.toast.out{ animation:toastOut .25s ease forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateY(10px);} }

/* ================= RESPONSIVE ================= */
@media (max-width:1120px){
  .p-right .vol{ width:92px; }
  .card{ width:158px; }
}

@media (max-width:980px){
  .app{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; top:0; left:0; bottom:0;
    width:276px; height:100%;
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open{ transform:none; }
  .sidebar-shade{
    display:block;
    position:fixed; inset:0;
    background:rgba(2,5,12,.62);
    z-index:55;
    opacity:0; pointer-events:none;
    transition:.25s;
  }
  .sidebar-shade.show{ opacity:1; pointer-events:auto; }
  .menu-btn,.topbar .menu-btn{ display:grid; }
  .dev-badge{ font-size:12px; padding:8px 12px; }
  .player{ grid-template-columns:minmax(150px,1fr) minmax(250px,1.5fr) auto; }
  .vol{ width:auto; }
  .vol input[type=range]{ display:none; }
}

@media (max-width:760px){
  :root{ --player-h:128px; }
  .dev-badge{ display:none; }
  .topbar{ padding:11px 14px; gap:9px; }
  .search{ height:44px; }

  .player{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:6px 10px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    align-content:center;
  }
  .p-info{ grid-column:1; grid-row:1; gap:11px; }
  .p-right{ grid-column:2; grid-row:1; align-self:center; }
  .p-mid{ grid-column:1 / -1; grid-row:2; gap:5px; }
  .p-art{ width:44px; height:44px; }
  .p-ctrls{ gap:16px; }
  .play-btn{ width:44px; height:44px; }
  .p-seek .t{ min-width:30px; font-size:11px; }
  .p-fav{ margin-left:auto; }
  #fsOpenBtn{ display:none; }

  .detail-head{ flex-direction:column; align-items:flex-start; gap:18px; padding:20px; }
  .detail-cover{ width:152px; height:152px; }
  .row{ grid-template-columns:26px 44px minmax(0,1fr) auto auto; gap:10px; padding:9px 8px; }
  .row-art{ width:44px; height:44px; }
  .row-btn{ opacity:1; width:32px; height:32px; }
  .card{ width:146px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:13px; }
  .drawer{ bottom:var(--player-h); width:100%; }
  .toasts{ bottom:calc(var(--player-h) + 14px); }
  .hero{ padding:26px 20px; }

  .fp-art{ width:min(30vh,240px); height:min(30vh,240px); border-radius:22px; }
  .fp-inner{ justify-content:flex-start; padding-top:76px; }
  .fp-ctrls .play-btn{ width:58px; height:58px; }
  .fp-vol{ display:none; }
}

@media (max-width:420px){
  .row-n{ display:none; }
  .row{ grid-template-columns:44px minmax(0,1fr) auto auto; gap:9px; }
  .fp-meta{ padding:0 8px; }
  .fp-fav{ position:static; display:flex; justify-content:center; margin-top:10px; }
}