/* =========================================================
   Lumen — Music Player Template
   Dark canvas + warm yellow glow. Glass panels. Soft motion.
   ========================================================= */

:root{
  --bg:            #0a0a0c;
  --bg-elevated:   #131215;
  --panel:         rgba(255,255,255,0.045);
  --panel-border:  rgba(255,255,255,0.08);
  --text:          #f3f1ea;
  --text-dim:      #9a968c;
  --yellow:        #ffd146;
  --yellow-soft:   #ffe08a;
  --yellow-deep:   #c98f1f;
  --danger:        #ff6b6b;
  --danger-deep:   #b23a3a;
  --radius-lg:     22px;
  --radius-md:     16px;
  --radius-sm:     10px;
  --mini-h:        112px;
  --topbar-h:      58px;
  --shadow-glow:   0 0 40px rgba(255,209,70,0.18);
  --ease:          cubic-bezier(.22,.9,.32,1);
  --font-latin:    -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --font-fa:       "Vazirmatn","Tahoma",var(--font-latin);
}

[data-theme="light"]{
  --bg:            #f6f3ec;
  --bg-elevated:   #ffffff;
  --panel:         rgba(20,18,10,0.04);
  --panel-border:  rgba(20,18,10,0.09);
  --text:          #1c1a15;
  --text-dim:      #6b675c;
  --yellow:        #d99a12;
  --yellow-soft:   #b97e0c;
  --yellow-deep:   #a06e0a;
  --shadow-glow:   0 0 30px rgba(217,154,18,0.14);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,209,70,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 20%, rgba(255,209,70,0.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-latin);
  overflow-x:hidden;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
html[dir="rtl"] body{ font-family:var(--font-fa); }
button{ font-family:inherit; }
a{ color:var(--yellow); }
::selection{ background:rgba(255,209,70,0.3); }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,209,70,0.25); border-radius:8px; }

/* ---------------- accessibility ---------------- */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--yellow); color:#241a02; padding:10px 16px; border-radius:0 0 10px 0;
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------------- glass helper ---------------- */
.glass{
  background:var(--panel);
  border:1px solid var(--panel-border);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

/* ================= TOP BAR ================= */
.topbar{
  position:sticky; top:0; z-index:40;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg, rgba(10,10,12,0.85), rgba(10,10,12,0.55) 70%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
[data-theme="light"] .topbar{
  background:linear-gradient(180deg, rgba(246,243,236,0.9), rgba(246,243,236,0.6) 70%, transparent);
}
.icon-btn{
  width:42px; height:42px; border-radius:50%;
  border:none; background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s var(--ease), transform .15s var(--ease);
}
.icon-btn:active{ transform:scale(0.9); background:rgba(255,209,70,0.12); }
.topbar-spacer{ width:42px; }

.burger{ display:flex; flex-direction:column; gap:4px; width:20px; }
.burger i{ display:block; height:2px; border-radius:2px; background:var(--text); transition:transform .25s var(--ease), opacity .2s; }

.brand{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.3px; }
.brand-mark{ color:var(--yellow); text-shadow:0 0 16px rgba(255,209,70,0.6); font-size:20px; }
.brand-mark.large{ font-size:30px; }
.brand-name{ font-size:17px; }

/* ================= SIDE MENU ================= */
.side-menu{
  position:fixed; top:0; bottom:0; left:0; width:78%; max-width:300px; z-index:60;
  background:linear-gradient(160deg, var(--bg-elevated), var(--bg));
  border-right:1px solid var(--panel-border);
  transform:translateX(-105%); transition:transform .32s var(--ease);
  padding:calc(env(safe-area-inset-top) + 22px) 18px 22px;
  display:flex; flex-direction:column;
}
.side-menu.open{ transform:translateX(0); box-shadow:30px 0 60px rgba(0,0,0,0.4); }
.side-menu-header{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.side-app-name{ font-weight:700; font-size:18px; }
.side-app-tag{ font-size:12px; color:var(--text-dim); }

.menu-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.menu-item{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 14px; border-radius:var(--radius-sm); border:none;
  background:transparent; color:var(--text-dim); font-size:15.5px; font-weight:600;
  cursor:pointer; text-align:left; transition:background .2s var(--ease), color .2s var(--ease);
}
.menu-ico{ width:20px; text-align:center; color:inherit; font-size:16px; }
.menu-item:active{ transform:scale(0.98); }
.menu-item.active{ color:var(--yellow); background:rgba(255,209,70,0.09); }
.side-menu-footer{ margin-top:auto; font-size:11px; color:var(--text-dim); opacity:.7; }

.scrim{
  position:fixed; inset:0; z-index:55; background:rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.scrim.open{ opacity:1; pointer-events:auto; }

[dir="rtl"] .side-menu{ left:auto; right:0; border-right:none; border-left:1px solid var(--panel-border); transform:translateX(105%); }
[dir="rtl"] .side-menu.open{ transform:translateX(0); }
[dir="rtl"] .menu-item{ text-align:right; }

/* ================= MAIN / PAGES ================= */
main{ padding:6px 16px calc(var(--mini-h) + 34px); min-height:100vh; }
.page-container{ display:none; animation:fadeUp .35s var(--ease); }
.page-container.active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.page-head{ margin:18px 0 20px; }
.page-head h1{ margin:0 0 4px; font-size:28px; letter-spacing:-.3px; }
.page-head .sub{ margin:0; color:var(--text-dim); font-size:14px; }
.section-label{ font-size:15px; color:var(--text-dim); margin:26px 2px 10px; font-weight:600; }
.count-label{ font-size:12.5px; color:var(--text-dim); margin:0 2px 12px; }
.count-and-sort{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 12px; }
.count-and-sort .count-label{ margin:0; }

/* ---------------- empty state ---------------- */
.empty-state-panel{
  text-align:center; padding:52px 20px; border-radius:var(--radius-lg);
  border:1px dashed var(--panel-border); background:var(--panel);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty-state-icon{ font-size:40px; margin-bottom:6px; filter:grayscale(0.2); opacity:.9; }
.empty-state-title{ font-size:20px; margin:0; }
.empty-state-body{ color:var(--text-dim); font-size:14px; max-width:340px; margin:0 0 8px; line-height:1.5; }
.empty-state{ color:var(--text-dim); font-size:13.5px; padding:18px 4px; text-align:center; }

/* ---------------- song list / rows ---------------- */
.song-list{ display:flex; flex-direction:column; gap:10px; }
.song-row{
  display:flex; align-items:center; gap:12px;
  padding:10px; border-radius:var(--radius-md);
  border:1px solid var(--panel-border); background:var(--panel);
  cursor:pointer; transition:transform .18s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.song-row:active{ transform:scale(0.98); }
.song-row.playing{ border-color:rgba(255,209,70,0.5); box-shadow:var(--shadow-glow); }
.song-row.dragging{ opacity:0.4; }
.song-row.draggable .drag-handle{ cursor:grab; color:var(--text-dim); padding:0 2px; font-size:16px; }
.song-cover{
  width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.song-meta{ flex:1; min-width:0; }
.song-title{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-artist{ font-size:12.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-side{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.song-stats{ text-align:right; }
.song-duration{ font-size:12px; color:var(--text-dim); min-width:36px; }
.song-plays{ font-size:11px; color:var(--text-dim); }
.song-plays::before{ content:"▸ "; opacity:.6; }
.song-play-btn{
  width:38px; height:38px; border-radius:50%; border:none; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, var(--yellow-soft), var(--yellow-deep));
  color:#241a02; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(255,209,70,0.35);
}
.song-play-btn:active{ transform:scale(0.88); }
.song-fav-btn{
  width:34px; height:34px; border-radius:50%; border:none; background:transparent;
  color:var(--text-dim); font-size:18px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:color .2s var(--ease), transform .15s var(--ease);
}
.song-fav-btn.active{ color:var(--yellow); text-shadow:0 0 10px rgba(255,209,70,0.5); }
.song-fav-btn:active{ transform:scale(0.85); }
.song-remove-btn{
  width:30px; height:30px; border-radius:50%; border:none; background:transparent;
  color:var(--text-dim); cursor:pointer; flex-shrink:0; font-size:13px;
}
.song-remove-btn:hover{ color:var(--danger); }

/* ---------------- sort control ---------------- */
.sort-control{ position:relative; display:inline-block; }
.sort-control-btn{
  border:1px solid var(--panel-border); background:var(--panel); color:var(--text);
  padding:9px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.sort-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:180px;
  background:var(--bg-elevated); border:1px solid var(--panel-border); border-radius:var(--radius-md);
  padding:6px; box-shadow:0 12px 32px rgba(0,0,0,0.4);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease);
  max-height:280px; overflow-y:auto;
}
[dir="rtl"] .sort-menu{ right:auto; left:0; }
.sort-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.sort-menu-item{
  display:block; width:100%; text-align:left; border:none; background:transparent; color:var(--text-dim);
  padding:9px 10px; border-radius:8px; font-size:13px; cursor:pointer;
}
[dir="rtl"] .sort-menu-item{ text-align:right; }
.sort-menu-item:hover{ background:rgba(255,209,70,0.08); }
.sort-menu-item.active{ color:var(--yellow); font-weight:700; }
/* ---------------- library toolbar ---------------- */
.library-toolbar{ display:flex; gap:10px; margin-bottom:16px; }
.search-inline{ flex:1; }
.search-inline input{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); background:var(--panel); color:var(--text);
  font-size:14.5px; outline:none;
}
.search-inline input:focus{ border-color:var(--yellow-deep); box-shadow:0 0 0 3px rgba(255,209,70,0.15); }

/* ---------------- panels ---------------- */
.panel{ border-radius:var(--radius-md); padding:16px; margin-bottom:14px; }
.panel-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.panel-title{ font-size:15px; font-weight:600; }
.panel-hint{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.about-panel p{ font-size:14.5px; line-height:1.6; color:var(--text); margin:0 0 12px; }
.about-panel p:last-child{ margin-bottom:0; }
.link{ font-size:14px; word-break:break-all; text-decoration:none; }
.danger-row{ margin-top:14px; padding-top:14px; border-top:1px solid var(--panel-border); }

.btn{
  border:none; border-radius:999px; padding:10px 18px; font-size:13.5px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:transform .15s var(--ease), opacity .2s;
}
.btn:active{ transform:scale(0.94); }
.btn.primary{ background:linear-gradient(135deg, var(--yellow-soft), var(--yellow-deep)); color:#241a02; }
.btn.ghost{ background:transparent; border:1px solid var(--panel-border); color:var(--text); }
.btn.danger{ background:linear-gradient(135deg, #ff8a8a, var(--danger-deep)); color:#2a0d0d; }
.btn.large{ padding:13px 26px; font-size:14.5px; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

.playlist-create{ display:flex; gap:10px; }
.playlist-create input{
  flex:1; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--panel-border);
  background:var(--panel); color:var(--text); font-size:14px; outline:none;
}
.playlist-create input:focus{ border-color:var(--yellow-deep); }

.segmented{ display:flex; border-radius:999px; background:var(--panel); border:1px solid var(--panel-border); padding:3px; flex-wrap:wrap; }
.seg{
  border:none; background:transparent; color:var(--text-dim); padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:700; cursor:pointer; transition:all .2s var(--ease);
}
.seg.active{ background:linear-gradient(135deg, var(--yellow-soft), var(--yellow-deep)); color:#241a02; }

/* ---------------- playlists ---------------- */
.playlist-list{ display:flex; flex-direction:column; gap:10px; }
.playlist-card-wrap{ border-radius:var(--radius-md); border:1px solid var(--panel-border); background:var(--panel); overflow:hidden; }
.playlist-card-wrap.open{ border-color:rgba(255,209,70,0.35); }
.playlist-card{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; }
.playlist-card .name{ font-weight:600; font-size:14.5px; }
.playlist-card .count{ font-size:12px; color:var(--text-dim); }
.playlist-detail{ padding:0 14px 16px; display:flex; flex-direction:column; gap:12px; }
.reorder-hint{ font-size:12px; color:var(--text-dim); margin:0; }
.add-songs-panel{ display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:var(--radius-sm); background:rgba(0,0,0,0.15); max-height:260px; overflow-y:auto; }
.add-song-check{ display:flex; align-items:center; gap:10px; font-size:13.5px; padding:6px 4px; cursor:pointer; }

/* ---------------- data / settings actions ---------------- */
.data-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.sleep-status{ min-height:16px; }

/* ---------------- phone music ---------------- */
.phone-file-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); background:var(--panel); cursor:pointer; margin-bottom:8px;
}
.phone-file-row.already-imported{ opacity:0.5; cursor:default; }
.phone-file-row input{ accent-color:var(--yellow-deep); width:16px; height:16px; flex-shrink:0; }
.phone-file-name{ flex:1; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone-file-badge{ font-size:11px; color:var(--text-dim); border:1px solid var(--panel-border); border-radius:999px; padding:2px 8px; }
.phone-music-import-bar{ position:sticky; bottom:calc(var(--mini-h) + 14px); display:flex; justify-content:center; margin-top:12px; }
.phone-music-limitation{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 20px; }

/* ================= MINI PLAYER ================= */
.mini-player{
  position:fixed; left:8px; right:8px; bottom:calc(env(safe-area-inset-bottom) + 8px);
  z-index:50; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg, rgba(40,34,10,0.92), rgba(10,10,12,0.94));
  border:1px solid rgba(255,209,70,0.18);
  box-shadow:0 12px 40px rgba(0,0,0,0.45), 0 0 30px rgba(255,209,70,0.08);
  transition:box-shadow .4s var(--ease);
}
[data-theme="light"] .mini-player{
  background:linear-gradient(135deg, rgba(255,236,190,0.92), rgba(255,255,255,0.94));
}
.mini-player.intense{ box-shadow:0 12px 40px rgba(0,0,0,0.45), 0 0 46px rgba(255,209,70,0.24); }

.mini-progress-track{ position:relative; height:5px; width:100%; background:rgba(255,255,255,0.08); cursor:pointer; touch-action:none; transition:height .15s var(--ease); }
.mini-progress-track.dragging{ height:8px; }
.mini-progress-fill{ position:relative; height:100%; width:0%; background:linear-gradient(90deg, var(--yellow-deep), var(--yellow)); transition:width .1s linear; }
.mini-progress-track.dragging .mini-progress-fill{ transition:none; }
.mini-progress-knob{
  position:absolute; right:-6px; top:50%; transform:translateY(-50%) scale(0);
  width:13px; height:13px; border-radius:50%; background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,0.4); transition:transform .15s var(--ease);
}
.mini-progress-track:hover .mini-progress-knob,
.mini-progress-track.dragging .mini-progress-knob{ transform:translateY(-50%) scale(1); }

.mini-time-row{
  display:flex; justify-content:space-between; padding:2px 12px 0;
  font-size:10.5px; color:var(--text-dim); font-variant-numeric:tabular-nums;
}
.mini-time{ min-width:32px; }
.mini-time-row .mini-time:last-child{ text-align:right; }

.mini-inner{ display:flex; align-items:center; gap:8px; padding:6px 10px 9px; height:calc(var(--mini-h) - 22px); }
.mini-left{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; cursor:pointer; }
.mini-cover{ width:46px; height:46px; border-radius:12px; object-fit:cover; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,0.4); }
.mini-text{ min-width:0; }
.mini-title{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30vw; }
.mini-artist{ font-size:11.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30vw; }

.waveform{ width:60px; height:30px; flex-shrink:0; opacity:.95; display:none; }
@media (min-width:460px){ .waveform{ display:block; } }

.mini-controls{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.mini-btn{
  width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mini-btn.play{
  width:44px; height:44px; background:radial-gradient(circle at 35% 30%, var(--yellow-soft), var(--yellow-deep));
  color:#241a02; box-shadow:0 3px 14px rgba(255,209,70,0.4);
}
.mini-btn.active{ color:var(--yellow); }
.mini-btn:active{ transform:scale(0.88); }
#miniFavBtn{ font-size:17px; }
#miniFavBtn.active{ color:var(--yellow); }

/* ================= PLAYER BOTTOM SHEET ================= */
.player-sheet-modal{ position:fixed; inset:0; z-index:85; visibility:hidden; }
.player-sheet-modal.open{ visibility:visible; }
.player-sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s var(--ease);
}
.player-sheet-modal.open .player-sheet-backdrop{ opacity:1; }

.player-sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:92vh; overflow-y:auto;
  border-radius:26px 26px 0 0; padding:10px 22px calc(env(safe-area-inset-bottom) + 20px);
  transform:translateY(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; align-items:center;
}
.player-sheet-modal.open .player-sheet{ transform:translateY(0); }
.player-sheet-handle{ width:40px; height:4px; border-radius:4px; background:rgba(255,255,255,0.2); margin:6px auto 4px; }
.player-sheet-close{ position:absolute; top:10px; right:14px; background:rgba(255,255,255,0.08); }
[dir="rtl"] .player-sheet-close{ right:auto; left:14px; }

.player-sheet-art-wrap{ width:100%; display:flex; justify-content:center; margin:18px 0 22px; }
.player-sheet-cover{
  width:min(72vw, 280px); height:min(72vw, 280px); border-radius:20px; object-fit:cover;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.player-sheet-meta{ text-align:center; margin-bottom:22px; width:100%; }
.player-sheet-title{ font-size:20px; font-weight:800; margin-bottom:4px; }
.player-sheet-artist{ font-size:14px; color:var(--text-dim); }

.player-sheet-progress-track{
  position:relative; width:100%; height:5px; border-radius:4px; background:rgba(255,255,255,0.1);
  cursor:pointer; touch-action:none; transition:height .15s var(--ease);
}
.player-sheet-progress-track.dragging{ height:8px; }
.player-sheet-progress-fill{ position:relative; height:100%; border-radius:4px; width:0%; background:linear-gradient(90deg, var(--yellow-deep), var(--yellow)); transition:width .1s linear; }
.player-sheet-progress-track.dragging .player-sheet-progress-fill{ transition:none; }
.player-sheet-progress-knob{
  position:absolute; right:-7px; top:50%; transform:translateY(-50%) scale(0);
  width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 8px rgba(0,0,0,0.5);
  transition:transform .15s var(--ease);
}
.player-sheet-progress-track:hover .player-sheet-progress-knob,
.player-sheet-progress-track.dragging .player-sheet-progress-knob{ transform:translateY(-50%) scale(1); }
.player-sheet-time-row{ width:100%; display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-dim); margin:6px 0 24px; font-variant-numeric:tabular-nums; }

.player-sheet-controls{ display:flex; align-items:center; justify-content:center; gap:18px; width:100%; margin-bottom:22px; }
.player-sheet-controls .mini-btn{ width:42px; height:42px; background:rgba(255,255,255,0.06); position:relative; }
.player-sheet-controls .mini-btn.active{ color:var(--yellow); }
.player-sheet-controls .mini-btn.play.large{
  width:66px; height:66px; background:radial-gradient(circle at 35% 30%, var(--yellow-soft), var(--yellow-deep));
  color:#241a02; box-shadow:0 6px 22px rgba(255,209,70,0.4);
}
.repeat-one-badge{
  position:absolute; top:2px; right:2px; font-size:8px; font-weight:800; width:13px; height:13px;
  border-radius:50%; background:var(--yellow); color:#241a02; display:flex; align-items:center; justify-content:center;
}

.player-sheet-secondary-row{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; flex-wrap:wrap; }
.player-sheet-secondary-row .mini-btn{ width:38px; height:38px; background:rgba(255,255,255,0.06); }
#sheetFavBtn.active{ color:var(--yellow); }
.sheet-pill-btn{
  border:1px solid var(--panel-border); background:rgba(255,255,255,0.06); color:var(--text);
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.sheet-pill-btn.disabled-hint{ opacity:0.55; }
.sheet-pill-btn.shake{ animation:sheet-shake .35s; }
@keyframes sheet-shake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

.sheet-panel{ width:100%; margin-top:16px; border-radius:var(--radius-md); background:rgba(0,0,0,0.2); padding:12px; max-height:280px; overflow-y:auto; }
.sheet-speed-list{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sheet-speed-item{
  border:1px solid var(--panel-border); background:transparent; color:var(--text-dim);
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer;
}
.sheet-speed-item.active{ background:linear-gradient(135deg, var(--yellow-soft), var(--yellow-deep)); color:#241a02; border-color:transparent; }
.sheet-hint{ text-align:center; color:var(--text-dim); font-size:13px; padding:10px; margin:0; }
.sheet-add-instrumental{ display:flex; justify-content:center; margin-top:8px; }
.sheet-queue-list{ display:flex; flex-direction:column; gap:8px; }

@media (min-width:860px){
  .player-sheet{ left:50%; right:auto; transform:translate(-50%,100%); max-width:420px; border-radius:26px; bottom:24px; }
  .player-sheet-modal.open .player-sheet{ transform:translate(-50%,0); }
}
/* ================= LYRICS MODAL ================= */
.lyrics-modal{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.lyrics-modal.open{ visibility:visible; }
.lyrics-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease);
}
.lyrics-modal.open .lyrics-backdrop{ opacity:1; }

.lyrics-sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:88vh;
  border-radius:26px 26px 0 0; overflow:hidden;
  transform:translateY(100%); transition:transform .42s var(--ease);
  display:flex; flex-direction:column;
}
.lyrics-modal.open .lyrics-sheet{ transform:translateY(0); }

/* Blurred, darkened album art fills the whole sheet as an ambient,
   color-matched backdrop — the "dynamic gradient from artwork" effect,
   achieved with the artwork itself rather than a computed palette.
   A slow ambient breathing animation keeps it from feeling static. */
.lyrics-art-bg{
  position:absolute; inset:-10%; background-size:cover; background-position:center;
  filter:blur(48px) saturate(1.35) brightness(0.5); transform:scale(1.15);
  transition:background-image .6s var(--ease); z-index:0;
  animation:lyrics-bg-breathe 10s ease-in-out infinite;
}
@keyframes lyrics-bg-breathe{
  0%, 100% { transform:scale(1.15) rotate(0deg); filter:blur(48px) saturate(1.35) brightness(0.5); }
  50%      { transform:scale(1.24) rotate(1.5deg); filter:blur(56px) saturate(1.55) brightness(0.58); }
}
@media (prefers-reduced-motion: reduce){ .lyrics-art-bg{ animation:none; } }

.lyrics-sheet::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(10,10,12,0.35), rgba(10,10,12,0.82) 60%, rgba(10,10,12,0.92));
}

.lyrics-content{
  position:relative; z-index:1; display:flex; flex-direction:column; min-height:0;
  padding:18px 18px calc(env(safe-area-inset-bottom) + 16px); flex:1;
}

.lyrics-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lyrics-cover{ width:56px; height:56px; border-radius:14px; object-fit:cover; box-shadow:0 6px 20px rgba(0,0,0,0.5); }
.lyrics-title{ font-weight:700; font-size:16.5px; }
.lyrics-artist{ font-size:12.5px; color:var(--text-dim); }
.lyrics-head .icon-btn{ margin-left:auto; background:rgba(255,255,255,0.08); }
[dir="rtl"] .lyrics-head .icon-btn{ margin-left:0; margin-right:auto; }

.lyrics-lang-toggle{ display:flex; gap:8px; margin-bottom:14px; justify-content:center; }
.lyrics-lang-toggle .seg{ background:rgba(255,255,255,0.06); border:1px solid var(--panel-border); }

.lyrics-body{
  overflow-y:auto; scroll-behavior:smooth; flex:1; min-height:0;
  display:flex; flex-direction:column; gap:6px; align-items:center;
  text-align:center; padding:12px 6px 24px;
  mask-image:linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}
.lyric-line{
  font-size:17px; font-weight:600; line-height:1.85; color:rgba(243,241,234,0.38);
  padding:6px 10px; border-radius:10px; max-width:36ch;
  filter:blur(0.2px); transform:scale(0.97) translateY(0);
  transition:color .4s var(--ease), transform .4s cubic-bezier(.34,1.4,.4,1), filter .4s var(--ease), text-shadow .4s var(--ease);
  animation:lyric-line-in .5s var(--ease) backwards;
}
@keyframes lyric-line-in{ from{ opacity:0; transform:translateY(10px) scale(0.97); } to{ opacity:1; transform:translateY(0) scale(0.97); } }
.lyric-line.current{
  color:var(--yellow); font-size:20px; font-weight:800; transform:scale(1.06) translateY(0);
  filter:blur(0); animation:lyric-line-in .5s var(--ease) backwards, lyric-glow-pulse 2.4s ease-in-out infinite .5s;
}
@keyframes lyric-glow-pulse{
  0%, 100% { text-shadow:0 0 20px rgba(255,209,70,0.4); }
  50%      { text-shadow:0 0 30px rgba(255,209,70,0.65); }
}
@media (prefers-reduced-motion: reduce){
  .lyric-line{ animation:none; }
  .lyric-line.current{ animation:none; }
}

.lyrics-empty-state{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 10px 10px; }
.lyrics-empty-icon{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:radial-gradient(circle at 35% 30%, var(--yellow-soft), var(--yellow-deep)); color:#241a02;
}

.lyrics-floating-controls{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; padding-top:6px;
}
.lyrics-floating-controls .mini-btn{ background:rgba(255,255,255,0.06); }
.lyrics-floating-controls .mini-btn.play{ background:radial-gradient(circle at 35% 30%, var(--yellow-soft), var(--yellow-deep)); }

.lyrics-textarea{
  width:100%; min-height:220px; border-radius:var(--radius-sm); border:1px solid var(--panel-border);
  background:rgba(0,0,0,0.3); color:var(--text); font-size:14.5px; line-height:1.7; padding:12px; resize:vertical;
  text-align:left;
}
[dir="rtl"] .lyrics-textarea{ text-align:right; }
.lyrics-editor-actions{ display:flex; gap:10px; margin-top:12px; justify-content:center; }
.lyrics-edit-link{ align-self:center; margin-top:8px; }

/* ================= TOAST + DROP OVERLAY ================= */
.toast{
  position:fixed; left:50%; bottom:calc(var(--mini-h) + 20px); transform:translateX(-50%) translateY(8px);
  background:var(--bg-elevated); border:1px solid var(--panel-border); color:var(--text);
  padding:10px 18px; border-radius:999px; font-size:13px; z-index:90; opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease); box-shadow:0 8px 24px rgba(0,0,0,0.35);
  max-width:88vw; text-align:center;
}
.toast.toast-error{ border-color:rgba(255,107,107,0.4); color:#ffdada; }
.toast.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
.ios-import-tip{
  font-size:12px; color:var(--text-dim); margin:-8px 2px 14px; padding:8px 12px;
  border-radius:var(--radius-sm); background:rgba(255,209,70,0.06); border:1px solid rgba(255,209,70,0.15);
}

.drop-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,12,0.82); backdrop-filter:blur(6px);
  color:var(--yellow); font-size:20px; font-weight:700;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
  border:3px dashed rgba(255,209,70,0.4); margin:10px; border-radius:24px;
}
.drop-overlay.visible{ opacity:1; }

/* ================= LMP (.lmp) IMPORT/EXPORT DIALOG ================= */
.lmp-modal{ position:fixed; inset:0; z-index:95; visibility:hidden; display:flex; align-items:center; justify-content:center; }
.lmp-modal.open{ visibility:visible; }
.lmp-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s var(--ease);
}
.lmp-modal.open .lmp-backdrop{ opacity:1; }

.lmp-sheet{
  position:relative; z-index:1; width:min(90vw, 380px); border-radius:var(--radius-lg);
  padding:28px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transform:scale(0.92) translateY(12px); opacity:0;
  transition:transform .32s var(--ease), opacity .28s var(--ease);
  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(255,209,70,0.10);
}
.lmp-modal.open .lmp-sheet{ transform:scale(1) translateY(0); opacity:1; }

.lmp-icon{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:6px;
  background:radial-gradient(circle at 35% 30%, var(--yellow-soft), var(--yellow-deep)); color:#241a02;
}
.lmp-icon.success{ background:radial-gradient(circle at 35% 30%, #b8f2c9, #2f9e5c); color:#04250f; }
.lmp-icon.error{ background:radial-gradient(circle at 35% 30%, #ffb3b3, var(--danger-deep)); color:#2a0d0d; }

.lmp-spinner{
  width:44px; height:44px; border-radius:50%; margin-bottom:8px;
  border:3px solid rgba(255,209,70,0.2); border-top-color:var(--yellow);
  animation:lmp-spin 0.9s linear infinite;
}
@keyframes lmp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .lmp-spinner{ animation:none; border-top-color:rgba(255,209,70,0.2); } }

.lmp-title{ font-size:17px; font-weight:700; margin:0; }
.lmp-message{ font-size:13.5px; color:var(--text-dim); margin:0; line-height:1.5; }
.lmp-counter{ font-size:12px; color:var(--yellow); font-weight:700; letter-spacing:.3px; }

.lmp-field{ width:100%; text-align:left; margin-top:10px; }
[dir="rtl"] .lmp-field{ text-align:right; }
.lmp-field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px; }
.lmp-field input{
  width:100%; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--panel-border);
  background:var(--panel); color:var(--text); font-size:14px; outline:none;
}
.lmp-field input:focus{ border-color:var(--yellow-deep); box-shadow:0 0 0 3px rgba(255,209,70,0.15); }

.lmp-actions{ display:flex; gap:10px; margin-top:18px; width:100%; }
.lmp-actions .btn{ flex:1; }

.lmp-details{
  width:100%; text-align:left; margin:12px 0 0; padding:12px 14px; border-radius:var(--radius-sm);
  background:rgba(0,0,0,0.18); list-style:none; max-height:180px; overflow-y:auto;
  font-size:12.5px; line-height:1.6; display:flex; flex-direction:column; gap:4px;
}
[dir="rtl"] .lmp-details{ text-align:right; }
.lmp-details-warn li{ color:var(--yellow-soft); }
.lmp-details-error li{ color:#ff9b9b; }
.lmp-details li::before{ content:"• "; opacity:.7; }

.update-version-rows{ width:100%; display:flex; flex-direction:column; gap:6px; margin:6px 0 4px; }
.update-version-row{
  display:flex; justify-content:space-between; font-size:12.5px;
  padding:7px 10px; border-radius:8px; background:rgba(255,255,255,0.04);
}
.update-version-label{ color:var(--text-dim); }
.update-version-value{ font-weight:700; color:var(--text); }

/* Export wizard — a wider, left-aligned, scrollable variant of the
   same dialog shell used for the simple progress/success/error states. */
.lmp-sheet.wizard{
  width:min(92vw, 480px); max-height:86vh; overflow-y:auto;
  text-align:left; align-items:stretch;
}
[dir="rtl"] .lmp-sheet.wizard{ text-align:right; }
.lmp-sheet.wizard .lmp-title{ text-align:center; margin-bottom:4px; }
.lmp-section{ width:100%; margin-top:14px; }
.lmp-section-title{ font-size:13px; font-weight:700; color:var(--yellow); margin-bottom:6px; }
.lmp-subheading{ font-size:12px; color:var(--text-dim); margin:10px 0 6px; }
.lmp-checklist{
  display:flex; flex-direction:column; gap:2px; border-radius:var(--radius-sm);
  background:rgba(0,0,0,0.15); padding:6px;
}
.lmp-checklist-scroll{ max-height:160px; overflow-y:auto; }
.lmp-toggle-row{
  display:flex; align-items:center; gap:10px; font-size:13px; padding:7px 8px;
  border-radius:8px; cursor:pointer;
}
.lmp-toggle-row:hover{ background:rgba(255,209,70,0.06); }
.lmp-toggle-row input{ flex-shrink:0; accent-color:var(--yellow-deep); width:16px; height:16px; }
.lmp-size-estimate{
  width:100%; text-align:center; font-size:12.5px; color:var(--yellow-soft);
  margin-top:14px; padding:8px; border-radius:var(--radius-sm); background:rgba(255,209,70,0.06);
}

/* ================= RESPONSIVE / DESKTOP ================= */
@media (min-width:860px){
  main{ max-width:920px; margin:0 auto; padding:10px 24px calc(var(--mini-h) + 40px); }
  .song-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .mini-player{ left:50%; transform:translateX(-50%); max-width:760px; }
  .lyrics-sheet{ left:50%; right:auto; transform:translate(-50%,100%); max-width:560px; border-radius:26px; bottom:24px; }
  .lyrics-modal.open .lyrics-sheet{ transform:translate(-50%,0); }
  .side-menu{ max-width:280px; }
}