/* ============================================
   MUSE — token system
   bg-deep #0a0818 · bg-mid #150f28 · violet #3d2a6d
   cyan #4deeea · pink #ff2e9a · orange #ff8a3d
   text #f2eefc · text-dim #9d92c2
   display: Orbitron · body/fa: Vazirmatn
=============================================== */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root{
  --bg-deep:#0a0818;
  --bg-mid:#140e28;
  --bg-card:#1a1330;
  --violet:#3d2a6d;
  --cyan:#4deeea;
  --pink:#ff2e9a;
  --orange:#ff8a3d;
  --text:#f2eefc;
  --text-dim:#9d92c2;
  --text-faint:#5c5480;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,body{ height:100%; overscroll-behavior:none; }

body{
  background:var(--bg-deep);
  color:var(--text);
  font-family:'Vazirmatn', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.app{
  position:relative;
  height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:480px;
  margin:0 auto;
  overflow:hidden;
}

/* ---------- ambient background ---------- */
.bg-grid{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(77,238,234,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,238,234,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 100%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 100% 60% at 50% 100%, #000 40%, transparent 85%);
  opacity:.5;
}
.bg-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 30% at 20% 0%, rgba(255,46,154,.25), transparent 60%),
    radial-gradient(ellipse 60% 30% at 85% 8%, rgba(77,238,234,.18), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(61,42,109,.5), transparent 70%);
}

/* ---------- top bar ---------- */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(14px + var(--safe-top)) 18px 10px;
}
.icon-btn{
  width:38px; height:38px; border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.icon-btn:active{ transform:scale(.92); color:var(--cyan); border-color:rgba(77,238,234,.4); }
.brand{
  font-family:'Orbitron', sans-serif;
  font-weight:900;
  font-size:19px;
  letter-spacing:5px;
  color:var(--cyan);
  text-shadow:0 0 18px rgba(77,238,234,.65), 0 0 40px rgba(255,46,154,.25);
}

/* ---------- views ---------- */
.views{ position:relative; z-index:1; flex:1; min-height:0; overflow:hidden; }
.view{
  height:100%; display:flex; flex-direction:column;
  padding: 6px 22px 12px;
  overflow-y:auto;
}

/* ---------- cover stage ---------- */
.cover-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:min(56vw, 300px);
  margin-top:4px;
}
.cover-main{
  position:relative; z-index:2;
  width:min(64vw,300px); height:min(64vw,300px);
  border-radius:22px;
  padding:2px;
  background:linear-gradient(135deg, var(--cyan), var(--pink) 60%, var(--orange));
  box-shadow: 0 0 45px rgba(77,238,234,.35), 0 20px 40px rgba(0,0,0,.5);
}
.cover-art{
  width:100%; height:100%; border-radius:20px;
  background: radial-gradient(circle at 30% 20%, #4a2a7a, #150f28 70%);
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
}
.cover-art::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(10,8,20,.55), transparent 55%);
}
.cover-side{
  position:absolute; top:8%; bottom:8%; width:22%;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(61,42,109,.55), rgba(20,14,40,.3));
  border:1px solid rgba(255,255,255,.06);
  filter:blur(.3px);
  opacity:.55;
}
.cover-side#coverPrev{ right:2%; transform:scale(.9); }
.cover-side#coverNext{ left:2%; transform:scale(.9); }

.dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); }
.dot.active{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); width:16px; border-radius:4px; transition:.25s; }

/* ---------- track meta ---------- */
.track-meta{ text-align:center; margin-top:20px; }
.title-row{ display:flex; align-items:center; justify-content:center; gap:8px; }
.track-title{
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  font-size:21px;
  letter-spacing:.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fav-btn{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint);
  transition:.15s;
}
.fav-btn:active{ transform:scale(.85); }
.fav-btn[aria-pressed="true"]{ color:var(--pink); }
.fav-btn[aria-pressed="true"] svg path{ fill:var(--pink); }
.track-sub{
  margin-top:6px;
  font-size:13.5px;
  color:var(--text-dim);
  letter-spacing:1px;
}

/* ---------- scrub / waveform ---------- */
.scrub{ margin-top:26px; position:relative; }
.wave{ width:100%; height:38px; display:block; }
.wave-bg{ fill:none; stroke:rgba(157,146,194,.3); stroke-width:2; }
.wave-fg{ fill:none; stroke:var(--cyan); stroke-width:2; filter:drop-shadow(0 0 6px rgba(77,238,234,.8)); }
.seek{
  position:absolute; inset:0; width:100%; height:38px;
  opacity:0; cursor:pointer; margin:0;
}
.time-row{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--text-dim); margin-top:2px;
  font-variant-numeric:tabular-nums;
  direction:ltr;
}

/* ---------- transport ---------- */
.transport{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:22px; padding:0 4px;
  direction:ltr; /* keep prev/play/next order fixed regardless of page direction */
}
.ctrl-btn{
  position:relative;
  width:42px; height:42px; border-radius:50%;
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.ctrl-btn[aria-pressed="true"]{ color:var(--cyan); text-shadow:0 0 10px rgba(77,238,234,.8); }
.ctrl-btn:active{ transform:scale(.88); }
.repeat-one{
  position:absolute; top:1px; right:2px;
  font-size:8px; font-weight:800; font-family:'Orbitron',sans-serif;
  background:var(--cyan); color:var(--bg-deep);
  border-radius:50%; width:12px; height:12px;
  display:none; align-items:center; justify-content:center;
}
#repeatBtn[data-mode="one"] .repeat-one{ display:flex; }
#repeatBtn[data-mode="off"]{ color:var(--text-faint); }

.play-btn{
  width:66px; height:66px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2a2050, var(--bg-deep));
  border:2px solid var(--cyan);
  color:var(--cyan);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 24px rgba(77,238,234,.55), inset 0 0 14px rgba(77,238,234,.15);
  transition:.15s;
}
.play-btn:active{ transform:scale(.93); box-shadow:0 0 32px rgba(77,238,234,.85); }
.play-btn svg{ margin-left:3px; }
.play-btn.is-playing svg{ margin-left:0; }

/* ---------- view header (browse/playlists) ---------- */
.view-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 16px;
}
.view-header h2{
  font-family:'Orbitron', sans-serif; font-size:19px; letter-spacing:2px; color:var(--text);
}
.pill-btn{
  background:linear-gradient(135deg, rgba(77,238,234,.15), rgba(255,46,154,.15));
  border:1px solid rgba(77,238,234,.5);
  color:var(--cyan);
  padding:8px 16px; border-radius:999px;
  font-size:13px; font-weight:700;
}
.pill-btn:active{ transform:scale(.95); }

/* ---------- track list ---------- */
.track-list{ list-style:none; display:flex; flex-direction:column; gap:6px; padding-bottom:14px; }
.track-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  transition:.15s;
}
.track-row.active{
  background:linear-gradient(90deg, rgba(77,238,234,.1), rgba(255,46,154,.06));
  border-color:rgba(77,238,234,.35);
}
.track-row:active{ background:rgba(255,255,255,.06); }
.track-thumb{
  width:44px; height:44px; border-radius:10px; flex:none;
  background:linear-gradient(135deg, var(--violet), var(--pink) 120%);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.track-row.active .track-thumb{ box-shadow:0 0 12px rgba(77,238,234,.6); }
.track-info{ flex:1; min-width:0; }
.track-info .name{ font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-info .artist{ font-size:12px; color:var(--text-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-dur{ font-size:12px; color:var(--text-faint); font-variant-numeric:tabular-nums; direction:ltr; }
.eq{ display:flex; gap:2px; align-items:flex-end; height:14px; width:14px; }
.eq span{ width:3px; background:var(--cyan); border-radius:2px; animation:eqbar 1s ease-in-out infinite; }
.eq span:nth-child(2){ animation-delay:.2s; }
.eq span:nth-child(3){ animation-delay:.4s; }
@keyframes eqbar{ 0%,100%{ height:4px; } 50%{ height:14px; } }

.empty-state{ display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-dim); text-align:center; }
.empty-glyph{ font-size:40px; color:var(--text-faint); text-shadow:0 0 20px rgba(77,238,234,.3); }
.empty-state p{ font-size:14px; }

/* ---------- playlists grid ---------- */
.pl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-bottom:14px; }
.pl-card{
  aspect-ratio:1; border-radius:18px; padding:14px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(160deg, var(--violet), var(--bg-mid) 70%);
  border:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.pl-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 10%, rgba(255,138,61,.35), transparent 55%);
}
.pl-card .pl-name{ font-weight:700; font-size:14.5px; position:relative; display:flex; align-items:center; gap:6px; }
.pl-card .pl-count{ font-size:11.5px; color:var(--text-dim); position:relative; margin-top:2px; }
.pl-card:active{ transform:scale(.97); }
.pl-card.fav-card{ background:linear-gradient(160deg, #6b1a4a, var(--bg-mid) 70%); }
.pl-card.fav-card::before{ background:radial-gradient(circle at 80% 10%, rgba(255,46,154,.4), transparent 55%); }
.pl-card.new-card{
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.02);
  border:1.5px dashed rgba(157,146,194,.35);
}
.pl-card.new-card::before{ display:none; }
.pl-card.new-card .plus{ font-size:26px; color:var(--cyan); line-height:1; }

/* ---------- coming soon views ---------- */
.view-soon{
  align-items:center; justify-content:center; text-align:center; gap:8px;
  color:var(--text-dim);
}
.view-soon .soon-glyph{ font-size:34px; color:var(--cyan); text-shadow:0 0 20px rgba(77,238,234,.5); margin-bottom:4px; }
.view-soon h2{ font-family:'Orbitron',sans-serif; font-size:18px; letter-spacing:1px; color:var(--text); }
.view-soon p{ font-size:13.5px; }

/* ---------- track-picker modal ---------- */
.modal{
  position:fixed; inset:0; z-index:20;
  background:rgba(6,4,14,.6);
  backdrop-filter:blur(4px);
  display:flex; align-items:flex-end;
}
.modal-sheet{
  width:100%; max-width:480px; margin:0 auto;
  max-height:78vh;
  background:var(--bg-mid);
  border:1px solid rgba(255,255,255,.08);
  border-bottom:none;
  border-radius:22px 22px 0 0;
  padding:16px 18px calc(16px + var(--safe-bottom));
  display:flex; flex-direction:column;
  box-shadow:0 -20px 50px rgba(0,0,0,.5);
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.modal-header h3{ font-family:'Orbitron',sans-serif; font-size:16px; letter-spacing:1px; }
.modal-sheet .track-list{ overflow-y:auto; max-height:50vh; }
.modal-confirm{ margin-top:12px; width:100%; text-align:center; }
.pick-check{
  width:20px; height:20px; border-radius:6px; flex:none;
  border:1.5px solid rgba(157,146,194,.5);
  display:flex; align-items:center; justify-content:center;
}
.track-row.picked .pick-check{ background:var(--cyan); border-color:var(--cyan); color:var(--bg-deep); }

/* ---------- tab bar ---------- */
.tabbar{
  position:relative; z-index:2;
  display:flex;
  direction:ltr;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(10,8,20,.75);
  backdrop-filter:blur(16px);
  padding: 8px 4px calc(8px + var(--safe-bottom));
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--text-faint); font-size:10.5px; padding:4px 0;
}
.tab svg{ transition:.15s; }
.tab.active{ color:var(--cyan); }
.tab.active svg{ filter:drop-shadow(0 0 6px rgba(77,238,234,.7)); }
.tab:active{ transform:scale(.93); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px);
  background:var(--bg-card); border:1px solid rgba(77,238,234,.35);
  color:var(--text); font-size:13px;
  padding:10px 18px; border-radius:999px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:.25s;
  z-index:10; white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- misc ---------- */
button{ background:none; border:none; font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

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

@media (prefers-reduced-motion: reduce){
  .eq span{ animation:none; height:8px; }
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

@media (max-height: 700px){
  .cover-stage{ height:min(46vw,230px); }
  .track-meta{ margin-top:12px; }
  .scrub{ margin-top:16px; }
  .transport{ margin-top:14px; }
}