/* ============================================================
   style.css — ظاهر کل سایت (تم تیره، شبیه اسپاتیفای)
   ============================================================ */

/* متغیرهای رنگ: یک بار اینجا تعریف می‌کنیم و همه‌جا با var(--اسم) استفاده می‌کنیم */
:root {
  --bg: #000;            /* پس‌زمینه کل صفحه */
  --panel: #121212;      /* پس‌زمینه کادرها */
  --elev: #1f1f1f;       /* کادرهای برجسته‌تر */
  --hover: #2a2a2a;      /* رنگ هنگام رفتن موس روی چیزی */
  --line: #2c2c2c;       /* خط‌های جداکننده */
  --text: #fff;          /* رنگ متن */
  --muted: #b3b3b3;      /* رنگ متن کم‌رنگ */
  /* ===== تم رنگی (برای عوض کردن رنگ برنامه فقط همین ۵ خط را عوض کن) =====
     الان: نارنجی کدویی (هالووین)
     سبز اسپاتیفای:  --accent:#1fdf64; --accent-2:#4ff284; --accent-rgb:31,223,100; --glow:#1a7f45; --hue:150
     آبی:            --accent:#3b9eff; --accent-2:#6fb7ff; --accent-rgb:59,158,255; --glow:#1a4f8f; --hue:210
     بنفش:           --accent:#a970ff; --accent-2:#c09cff; --accent-rgb:169,112,255; --glow:#4a2a8f; --hue:270 */
  --accent: #ff7518;     /* رنگ اصلی (دکمه‌ها، آیکن‌های فعال، نوار پیشرفت) */
  --accent-2: #ff9a4d;   /* نسخه روشن‌تر (هنگام hover) */
  --accent-rgb: 255,117,24;  /* همان رنگ اصلی به شکل R,G,B (برای پس‌زمینه‌های کم‌رنگ) */
  --glow: #a8440a;       /* نور پس‌زمینه صفحه ورود */
  --hue: 25;             /* طیف رنگ پیش‌فرض کاور خالی و بالای صفحه‌ها (۰ تا ۳۶۰) */
  --ctl-a: #ffb86b; --ctl-b: #ff6a3d; --ctl-rgb: 255,150,80;   /* رنگ‌های دکمه‌ها و نوار پخش (با فصل عوض می‌شود) */
  --danger: #f15e6c;     /* قرمز */
  --warn: #ffa42b;       /* نارنجی */
  --radius: 12px;        /* گردی گوشه‌ها */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  /* فونت‌های سیستم (بدون نیاز به اینترنت) */
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
body.noscroll { overflow: hidden; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
a { color: inherit; text-decoration: none; }
.lnk:hover { text-decoration: underline; }
.lnk.strong { font-weight: 700; color: var(--text); }
.lnk.more { color: var(--muted); font-size: 13px; font-weight: 600; }
.lnk.more:hover { color: var(--text); }

/* نوار اسکرول باریک و تیره */
* { scrollbar-width: thin; scrollbar-color: #444 transparent; }

/* ---------- دکمه‌ها و فیلدها ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

input[type=text], input[type=password], input[type=search], input[type=number], select, textarea {
  width: 100%;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select option { background: #1f1f1f; color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--elev);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  transition: transform .1s, background .15s;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); color: #000; }
.btn.primary:hover { background: var(--accent-2); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn.big { padding: 12px 18px; font-size: 16px; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  color: var(--muted);
  flex: none;
  transition: color .15s, background .15s, transform .1s;
}
.icon-btn:hover { color: var(--text); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.small { width: 28px; height: 28px; }
.icon-btn.on { color: var(--accent); }
.icon-btn.round-btn { background: rgba(255,255,255,.08); color: var(--text); }
.icon-btn.round-btn:hover { background: rgba(255,255,255,.16); }
svg { display: block; }

/* ---------- صفحه ورود ---------- */
.login {
  position: relative; overflow: hidden;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 20px;
  background: #050505;
}
.glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: .55; pointer-events: none; }
.glow.g1 { background: var(--glow); top: -180px; right: -120px; }
.glow.g2 { background: #3b2a8f; bottom: -220px; left: -140px; opacity: .4; }
.login-card {
  position: relative;
  width: 100%; max-width: 390px;
  background: rgba(18,18,18,.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 30px 28px;
  display: grid; gap: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.login-card .logo { font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.login-card .logo svg { color: var(--accent); }
.login-card label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); border-radius: 50%; }
.pw-toggle:hover { color: var(--text); background: rgba(255,255,255,.08); }
.error { color: var(--danger); min-height: 1.4em; font-size: 14px; }

/* ---------- ساختار اصلی برنامه ---------- */
.app {
  display: grid;
  grid-template-columns: min(var(--wL, 270px), 30vw) minmax(0, 1fr) min(var(--wR, 270px), 30vw);     /* ستون منو + ستون اصلی + نوار دوستان (راست)؛ min(…, 30vw) یعنی با کوچک شدن پنجره هیچ‌وقت از صفحه بیرون نمی‌زند */
  grid-template-rows: minmax(0, 1fr) auto;  /* بالا: محتوا، پایین: پلیر */
  height: 100dvh;
  gap: 8px;
  padding: 8px;
}
.sidebar {
  position: relative;
  grid-row: 1;
  background: var(--panel);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  padding: 16px 10px;
  gap: 10px;
  min-height: 0;
}
.brand { font-size: 20px; font-weight: 800; padding: 4px 10px 10px; display: flex; gap: 8px; align-items: center; }
.brand svg { color: var(--accent); }
.nav { display: grid; gap: 2px; overflow-y: auto; flex: 1; align-content: start; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 10px; border-radius: 8px;
  color: var(--muted); font-weight: 600;
  transition: color .15s, background .15s;
}
.nav-item span.t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item small { color: var(--muted); font-weight: 400; }
.nav-item:hover { color: var(--text); background: var(--elev); }
.nav-item.active { color: var(--text); background: var(--hover); }
.nav-item.active svg { color: var(--accent); }
.nav-sep {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 10px 4px; color: var(--muted); font-size: 13px;
}
.userbox {
  border-top: 1px solid var(--line);
  padding: 12px 8px 2px;
  display: grid; gap: 8px; font-size: 14px;
}
.userbox .name { font-weight: 700; }
.userbox .remain { color: var(--muted); font-size: 13px; }
.userbox .remain.warn { color: var(--warn); }
.userbox .row-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.main {
  grid-row: 1;
  background: var(--panel);
  border-radius: var(--radius);
  overflow-y: auto;
  min-height: 0;
  position: relative;
}
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: rgba(18,18,18,.78);
  backdrop-filter: blur(14px);
}
.searchbox {
  position: relative; display: flex; align-items: center;
  flex: 1; min-width: 0;                       /* کل عرض خالی نوار بالا را پر می‌کند */
  background: var(--elev); border: 1px solid transparent; border-radius: 999px;
  padding: 0 14px; gap: 8px; color: var(--muted);
  transition: border-color .15s, background .15s;
}
.searchbox:focus-within { border-color: var(--accent); background: #262626; color: var(--text); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }   /* کادر نارنجیِ نازک + هاله‌ی ملایم؛ رنگش از تم/فصل می‌آید */
.searchbox input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; padding: 10px 0; border-radius: 0; }
.content { padding: 0 20px 28px; }
.page { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.page-title, .greet { font-size: 30px; font-weight: 800; margin: 8px 0 14px; }
.view-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--muted); flex-wrap: wrap; }
.view-head > span { margin-inline-end: auto; }
.empty { color: var(--muted); text-align: center; padding: 60px 10px; line-height: 2; }

/* ---------- بخش‌ها و کارت‌ها ---------- */
.sect { margin: 26px 0 8px; }
.sect-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sect-head h2 { margin: 0; font-size: 21px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }

.card {
  background: var(--elev); border-radius: var(--radius); padding: 14px;
  cursor: pointer; outline: none; position: relative;
  transition: background .2s, transform .15s;
}
.card:hover, .card:focus-visible { background: #2b2b2b; transform: translateY(-2px); }
.card-art { position: relative; margin-bottom: 12px; }
.card-art .art { width: 100%; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.card-play {
  position: absolute; bottom: 8px; right: 8px; left: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: #000;
  display: grid; place-items: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s, background .15s;
  box-shadow: 0 8px 18px rgba(0,0,0,.5);
}
.card:hover .card-play, .card:focus-within .card-play { opacity: 1; transform: none; }
.card-play:hover { background: var(--accent-2); transform: scale(1.06) !important; }
.card-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { color: var(--muted); font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.round { text-align: center; }
.card.round .card-play { left: auto; right: 10px; }

/* ---------- تصویر (کاور / عکس خواننده) ---------- */
.art {
  position: relative; overflow: hidden; flex: none;
  aspect-ratio: 1; border-radius: 8px;
  background: var(--elev);
  display: grid; place-items: center; color: rgba(255,255,255,.75);
  container-type: inline-size;
}
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art.round { border-radius: 50%; }
.art svg { width: 42%; height: 42%; }
.art .ph-t { font-size: 44cqw; font-weight: 800; line-height: 1; color: rgba(255,255,255,.9); }
.art.sm { width: 44px; border-radius: 6px; }
.art.md { width: 56px; border-radius: 8px; }
.art.xl { width: 100%; border-radius: 14px; }
.art.hero-art { width: 200px; box-shadow: 0 14px 44px rgba(0,0,0,.6); }
.art.hero-art.round { box-shadow: 0 14px 44px rgba(0,0,0,.6); }

/* ---------- بالای صفحه خواننده / آلبوم ---------- */
.hero {
  display: flex; align-items: flex-end; gap: 24px;
  margin: 0 -20px; padding: 28px 20px 22px;
  background: linear-gradient(hsl(var(--h, var(--hue)) 45% 28%), rgba(18,18,18,0));
}
.hero-info { min-width: 0; display: grid; gap: 6px; }
.hero-kind { font-size: 13px; font-weight: 700; }
.hero-title { margin: 0; font-size: clamp(30px, 5.2vw, 64px); font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.hero-desc { color: #ddd; font-size: 14px; }
.hero-sub { color: #ddd; font-size: 14px; }
.hero-actions { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.big-play {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: #000;
  display: grid; place-items: center;
  transition: transform .12s, background .15s;
}
.big-play:hover { transform: scale(1.06); background: var(--accent-2); }

/* ---------- لیست آهنگ‌ها ---------- */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}
.row:hover, .row:focus-visible { background: rgba(255,255,255,.08); }
.row.playing { background: rgba(var(--accent-rgb),.1); }
.row.playing .r-title { color: var(--accent); }
.r-index { width: 28px; text-align: center; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; position: relative; height: 20px; }
.r-index .pl { position: absolute; inset: 0; display: none; place-items: center; color: var(--text); }
.row:hover .r-index .n { display: none; }
.row:hover .r-index .pl { display: grid; }
.row.playing .r-index .n { color: var(--accent); }
.r-main { flex: 3; min-width: 0; display: flex; align-items: center; gap: 12px; }
.r-text { min-width: 0; }
.r-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-artist { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-album { flex: 2; min-width: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-dur { width: 52px; text-align: left; color: var(--muted); font-size: 13px; direction: ltr; flex: none; }
.row .icon-btn { opacity: 0; }
.row:hover .icon-btn, .row:focus-within .icon-btn, .row .icon-btn.on { opacity: 1; }
.r-artist a:hover, .r-album a:hover { color: var(--text); }

/* ---------- پلیر پایین صفحه ---------- */
.player {
  grid-column: 1 / -1; grid-row: 2;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.p-info { display: flex; align-items: center; gap: 12px; min-width: 0; }   /* مشخصات آهنگ سمت چپ (ترتیب طبیعی در چیدمان چپ‌به‌راست) */
.p-info .p-meta { text-align: left; }
.p-info .p-title, .p-info .p-artist { unicode-bidi: plaintext; }
.p-info.clickable .p-cover, .p-info.clickable .p-meta { cursor: pointer; }
.p-meta { min-width: 0; }
.p-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-info.clickable .p-meta:hover .p-title { text-decoration: underline; }
.p-artist a { color: inherit; text-decoration: none; }
.p-artist a:hover { color: #fff; text-decoration: underline; }
.p-artist { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-center { display: grid; gap: 6px; justify-items: center; }
.p-controls { display: flex; align-items: center; gap: 10px; direction: ltr; }
.p-controls { gap: 8px; }
.p-controls .icon-btn { width: 36px; height: 36px; border-radius: 50%; color: #d6d6d6; transition: background .15s, color .15s, transform .12s; }
.p-controls .icon-btn:hover { background: rgba(var(--ctl-rgb), .16); color: #fff; }
.p-controls .icon-btn:active { transform: scale(.92); }
.p-controls .icon-btn.on { color: var(--ctl-a); }
.p-controls .play {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(145deg, var(--ctl-a), var(--ctl-b)); color: #1c1008;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(var(--ctl-rgb), .4), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .15s, box-shadow .15s;
}
.p-controls .play:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(var(--ctl-rgb), .6), inset 0 1px 0 rgba(255,255,255,.45); }
.p-controls .play:active { transform: scale(.95); }
#btnRepeat, #npRepeat { position: relative; }
#btnRepeat.one::after, #npRepeat.one::after {
  content: "1"; position: absolute; top: 3px; right: 3px;
  font-size: 9px; font-weight: 800; color: var(--accent);
}
.p-seek { width: 100%; display: flex; align-items: center; gap: 10px; direction: ltr; color: var(--muted); font-size: 12px; }
.p-seek .time { width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.p-vol { display: flex; align-items: center; justify-content: flex-end; gap: 6px; direction: ltr; }
.p-vol input[type=range] { flex: none; width: 130px; }   /* کوچک؛ بدون این flex:none سراسری کشیده می‌شد */

/* نوار لغزنده (seek و صدا): بخش پرشده سفید (با hover سبز)، بقیه خاکستری */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 5px; border-radius: 3px; padding: 0; border: 0;
  /* بخش پرشده: گرادیانت دو رنگ فصل؛ بقیه: شیشه‌ای کم‌رنگ */
  background: linear-gradient(90deg, var(--ctl-a), var(--ctl-b)) 0 0 / var(--pct, 0%) 100% no-repeat, rgba(255,255,255,.16);
  outline: none; cursor: pointer; transition: height .15s;
}
input[type=range]:hover { height: 6px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(var(--ctl-rgb), .28), 0 2px 6px rgba(0,0,0,.5); transition: transform .12s; }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); }
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(var(--ctl-rgb), .28); }

/* ---------- صفحه «در حال پخش» ---------- */
.np {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  overflow: hidden auto;
  background: linear-gradient(hsl(var(--h, var(--hue)) 45% 30%), #0b0b0b 88%);
  animation: up .28s ease;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.np-bg {
  position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover;
  filter: blur(70px) saturate(1.5) brightness(.55); opacity: .85; pointer-events: none;
}
.np-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.np-label { font-weight: 700; font-size: 14px; }
.np-body {
  position: relative; width: 100%; max-width: 460px; margin: 0 auto;
  padding: 6px 26px 36px; display: grid; gap: 22px; align-content: center; flex: 1;
}
.np-cover .art { box-shadow: 0 24px 60px rgba(0,0,0,.65); }
.np-info { display: flex; align-items: center; gap: 12px; }
.np-text { flex: 1; min-width: 0; }
.np-title { font-size: 26px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-artist { font-size: 16px; color: #ddd; margin-top: 2px; }
.np-album { font-size: 13px; color: var(--muted); margin-top: 2px; }
.np-controls { justify-content: center; gap: 16px; }
.np-controls .play { width: 62px; height: 62px; }
.np-controls .icon-btn { width: 44px; height: 44px; color: #ddd; }
.np-controls .icon-btn.on { color: var(--accent); }
.np .p-seek { color: #ccc; }

/* ---------- منوی کوچک و پیام موقت ---------- */
.menu {
  position: fixed; z-index: 50;
  min-width: 200px; max-width: 280px; max-height: 320px; overflow-y: auto;
  background: var(--elev); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.menu-title { color: var(--muted); font-size: 12px; padding: 6px 10px; }
.menu-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 6px; }
.menu-item:hover { background: var(--hover); }
.menu-item.accent { color: var(--accent); }
.toast {
  position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
  background: #fff; color: #000; padding: 10px 18px; border-radius: 999px;
  font-weight: 600; z-index: 80; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  max-width: 90vw; text-align: center;
}
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 20; }
.only-mobile { display: none; }

/* ---------- موبایل ---------- */
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 280px; z-index: 30;
    border-radius: 0; transform: translateX(-100%); transition: transform .2s;
  }
  .sidebar.open { transform: none; }
  .main, .player { border-radius: 0; }
  .only-mobile { display: inline-grid; }
  .topbar { padding: 10px 12px; }
  .content { padding: 0 12px 24px; }
  .page-title, .greet { font-size: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .card { padding: 10px; }
  .card-play { opacity: 1; transform: none; width: 40px; height: 40px; }
  .hero { flex-direction: column; align-items: center; text-align: center; margin: 0 -12px; padding: 20px 12px 16px; gap: 14px; }
  .art.hero-art { width: 170px; }
  .hero-actions { justify-content: center; }
  .r-album, .r-index { display: none; }
  .row .icon-btn { opacity: 1; }
  .player { grid-template-columns: 1fr; gap: 6px; padding: 8px 12px 12px; }
  .p-vol input, #btnMute { display: none; }
  .p-vol { position: absolute; }
  .p-vol #btnNowPlaying { display: none; }
  .toast { bottom: 170px; }
  .np-body { padding: 0 22px 28px; }
}

/* ============================================================
   پنل ادمین
   ============================================================ */
.admin { max-width: 1180px; margin: 0 auto; padding: 16px 16px 90px; }
.admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-head h1 { margin: 0; font-size: 22px; flex: 1; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 8px 18px; border-radius: 999px; background: var(--elev); font-weight: 600; color: var(--muted); }
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: #000; }
.card-box { background: var(--panel); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.card-box h2 { margin: 0 0 12px; font-size: 17px; }
.card-box h3 { margin: 0; font-size: 15px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.form-grid label, .field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.inline { display: flex; gap: 6px; align-items: center; }
.inline > select, .inline > input { flex: 1; min-width: 0; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
tr.sel { background: rgba(var(--accent-rgb),.07); }
.btns { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.chip.ok { background: rgba(var(--accent-rgb),.15); color: var(--accent); }
.chip.expired { background: rgba(255,164,43,.15); color: var(--warn); }
.chip.disabled { background: rgba(241,94,108,.15); color: var(--danger); }
.chip.admin { background: rgba(255,255,255,.12); }
.chip.dim { background: rgba(255,255,255,.07); color: var(--muted); }
.cred { width: 100%; min-height: 90px; background: var(--elev); border: 1px dashed var(--accent); border-radius: 8px; color: var(--text); padding: 10px; direction: ltr; text-align: left; font-family: monospace; }
.drop {
  border: 2px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; color: var(--muted);
  transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--accent); background: rgba(var(--accent-rgb),.07); }
.up-item { display: grid; grid-template-columns: 1fr 120px 150px; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.up-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; }
.bar { height: 6px; background: var(--elev); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); }
.up-item .st.err { color: var(--danger); }
td input[type=text], td input[type=number] { padding: 6px 8px; min-width: 110px; }
.small-text { font-size: 12px; color: var(--muted); }
.ellip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* نوار عملیات گروهی (پایین صفحه، وقتی آهنگ انتخاب شده) */
.bulkbar {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
  width: min(1100px, calc(100% - 24px));
  background: #232323; border: 1px solid #3a3a3a; border-radius: 16px;
  padding: 12px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 14px 40px rgba(0,0,0,.7);
}
.bulkbar .cnt { font-weight: 800; color: var(--accent); }
.bulkbar select { width: auto; min-width: 140px; max-width: 220px; padding: 7px 10px; }
.bulkbar .sep { width: 1px; align-self: stretch; background: #3a3a3a; }

/* کارت خواننده / پلی‌لیست در پنل */
.acard { background: var(--panel); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ahead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ahead .grow { flex: 1; min-width: 160px; }
.ahead .art { cursor: pointer; }
.ahead .art:hover { outline: 2px solid var(--accent); }
.albums-list { margin-top: 12px; display: grid; gap: 8px; padding-inline-start: 14px; border-inline-start: 2px solid var(--line); }
.arow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--elev); border-radius: 10px; padding: 8px 10px; }
.arow .grow { flex: 1; min-width: 140px; }
.arow .art { cursor: pointer; }
.arow .art:hover { outline: 2px solid var(--accent); }
.srow { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.srow:hover { background: rgba(255,255,255,.05); }
.srow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .no { width: 26px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }

/* پنجره‌ی انتخاب (مودال) */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 60; display: grid; place-items: center; padding: 14px; }
.modal {
  width: 100%; max-width: 640px; max-height: calc(100dvh - 28px);
  background: var(--panel); border: 1px solid #333; border-radius: 16px;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 14px 16px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.modal-foot .grow { flex: 1; color: var(--muted); font-size: 13px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pick-row:hover { background: rgba(255,255,255,.06); }
.pick-row.on { background: rgba(var(--accent-rgb),.1); }
.pick-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .ord.off { background: transparent; border: 2px solid #555; color: transparent; }
.pick-row .ord { min-width: 24px; height: 24px; border-radius: 12px; background: var(--accent); color: #000; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
@media (max-width: 800px) {
  .up-item { grid-template-columns: 1fr 70px 110px; }
  .bulkbar { bottom: 6px; }
}

/* ===== بنر تبلیغات ===== */
/* ===== تبلیغات: دو مربع کنار هم، ارتفاع ≈ سه ردیف آهنگ (۱۶۰ پیکسل) =====
   همه‌ی صفحه‌ها (هر صفحه ≤ ۲ تبلیغ) در یک خانه‌ی گرید روی هم می‌افتند، پس ارتفاع خودکار و بدون جهش است */
.ad-wrap { --ad: 420px; position: relative; display: grid; margin: 0 0 30px; }
.ad-page { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 0; transition: opacity .9s ease, visibility 0s linear .9s; }
.ad-page.on { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; transition: opacity .9s ease; }
.ad-page.prev { opacity: 1; visibility: visible; z-index: 1; transition: none; }   /* صفحه‌ی قبلی زیر صفحه‌ی در حال روشن‌شدن می‌ماند */
@media (prefers-reduced-motion: reduce) { .ad-page, .ad-page.on { transition: none; } }
.ad { position: relative; min-height: 130px; display: block; overflow: hidden; border-radius: 12px; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, hsl(var(--h,var(--hue)) 55% 32%), hsl(calc(var(--h,var(--hue)) + 20) 50% 18%)); }
.ad picture { display: block; }
.ad-img { display: block; width: 100%; height: auto; max-height: var(--ad); object-fit: cover; }   /* ارتفاع = نسبت خود عکس؛ فقط اگر خیلی بلند بود از بالا/پایین بریده می‌شود */
.ad-body { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 10px 12px; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); }
.ad-body.bare { background: none; padding: 8px 10px; }
.ad-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: rgba(255,255,255,.25); margin-bottom: 4px; }
.ad-title { font-size: 16px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ad-text { font-size: 12px; color: #ddd; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ad-dots { position: absolute; left: 0; right: 0; bottom: -18px; display: flex; justify-content: center; gap: 6px; z-index: 5; }
.ad-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; }
.ad-dot.on { background: var(--accent); }

/* ===== پنل ادمین: لیست آهنگ‌های بازشونده و کشیدن‌ورها کردن ===== */
details.trk { margin-top: 8px; }
details.trk > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.arow-wrap.over, .acard.over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.arow-wrap { padding: 6px 0; }

/* ===== تعداد پخش و بنر خواننده ===== */
.r-plays { width: 74px; flex: none; color: var(--muted); font-size: 12px; text-align: center; }
.hero { position: relative; }
.hero.has-banner { min-height: 400px; overflow: hidden; background: none; padding-top: 60px; }
.hero-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.has-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #121212 0%, rgba(18,18,18,.55) 45%, rgba(18,18,18,.2) 100%); }
.hero.has-banner > .art, .hero.has-banner > .hero-info { position: relative; z-index: 1; }
@media (max-width: 700px) { .r-plays { display: none; } }

.more-btn { margin: 10px 10px 0; }

.extra-box { max-height: 150px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 6px; }

/* ===== نوار دوستان (سمت راست) ===== */
.friends { position: relative; grid-row: 1; grid-column: 3; background: var(--panel); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.f-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px; }
.f-head h2 { margin: 0; font-size: 16px; }
.f-list { overflow-y: auto; padding: 4px 8px 10px; display: grid; gap: 4px; align-content: start; }
.friend { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 8px; border-radius: 10px; }
.friend:hover { background: rgba(255,255,255,.05); }
.friend.together { background: rgba(var(--accent-rgb),.12); }
.f-av { position: relative; width: 40px; height: 40px; }
.f-av .art { width: 40px; border-radius: 50%; }
.f-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #6a6a6a; border: 2px solid var(--panel); }
.f-dot.on { background: var(--accent); }
.f-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-sub, .f-time { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-track { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 3px 0; padding: 3px 8px; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--text); font-size: 12px; text-align: left; }
.f-track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-track:hover { background: rgba(255,255,255,.16); }
.f-track.live { background: rgba(var(--accent-rgb),.18); }
.f-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.f-actions .btn { padding: 3px 10px; font-size: 12px; }
.together-bar { margin: 4px 10px 6px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--accent-rgb),.16); font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.me-line { display: flex; align-items: center; gap: 8px; }
.me-av { width: 28px; height: 28px; flex: none; cursor: pointer; }
.me-av .art { width: 28px; border-radius: 50%; }
.badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #000; font-size: 11px; font-weight: 800; }
.only-narrow { display: none; }
.logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
#logoIcon, #brandIcon { display: inline-grid; }
.np-sleep { min-width: 36px; height: 36px; display: inline-grid; place-items: center; }
.sleep-btn.on { color: var(--accent); width: auto; padding: 0 8px; font-size: 12px; gap: 4px; display: inline-flex; align-items: center; }
@media (max-width: 1100px) {
  .app { grid-template-columns: min(var(--wL, 270px), 40vw) minmax(0, 1fr); }
  .only-narrow { display: inline-grid; }
  .friends { position: fixed; top: 0; bottom: 0; right: 0; width: min(var(--wR, 290px), calc(100vw - 48px)); z-index: 31; border-radius: 0; transform: translateX(100%); transition: transform .2s; }
  .friends.open { transform: none; }
}
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  #btnSleep { display: none !important; }      /* گوشی: تایمر داخل صفحه‌ی «در حال پخش» است */
}
#logoIcon { width: 36px; height: 36px; } #brandIcon { width: 28px; height: 28px; }
#friendsBtn.has-badge { position: relative; }
#friendsBtn.has-badge::after { content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.logo-prev { width: 72px; height: 72px; border-radius: 14px; background: var(--elev); display: grid; place-items: center; overflow: hidden; }
@media (max-width: 800px) {
  .player { position: relative; }
  .p-vol { position: absolute; right: 12px; top: 10px; }
}

/* ===== دستگیره‌ی تغییر اندازه‌ی کادر چپ و راست ===== */
.resizer { position: absolute; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 5; touch-action: none; }
.resizer::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 56px; margin: -28px 0 0 -2px; border-radius: 4px; background: var(--line, #444); opacity: 0; transition: opacity .15s, background .15s; }
.resizer:hover::after, .resizer.drag::after { opacity: 1; background: var(--accent); }
.sidebar > .resizer { right: -10px; }          /* لبه‌ی راست منو */
.friends > .resizer { left: 0; }               /* لبه‌ی چپ نوار دوستان */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { pointer-events: none; }
@media (max-width: 800px) { .resizer { display: none; } }

/* ردیف «خواننده‌های اخیر» صفحه اصلی: همیشه ۵ ستون (در صفحه‌ی کوچک ۳ ستون) */
.grid.recent-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 800px) { .grid.recent-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* «Recently played» صفحه اصلی: دو تا کنار هم، ۴ ردیف (روی صفحه‌ی خیلی کوچک یکی‌یکی) */
.recent-songs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rt { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 8px; background: rgba(255,255,255,.06); cursor: pointer; min-width: 0; transition: background .15s; }
.rt:hover, .rt:focus-visible { background: rgba(255,255,255,.12); }
.rt .art { width: 52px; height: 52px; flex: none; border-radius: 6px; overflow: hidden; }
.rt .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-text { min-width: 0; flex: 1; }
.rt-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-artist { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-play { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #000; display: grid; place-items: center; flex: none; opacity: 0; transition: opacity .15s; }
.rt:hover .rt-play, .rt:focus-visible .rt-play { opacity: 1; }
.rt.playing .rt-title { color: var(--accent); }
@media (max-width: 560px) { .recent-songs { grid-template-columns: 1fr; } }

/* کادر تاریخ انتشار در پنل ادمین */
.date-wrap { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.date-in { width: 90px; padding: 5px 8px; border-radius: 8px; font-size: 13px; color-scheme: dark; }

/* ===== صندوق اعلانات ===== */
.bell-wrap { position: relative; display: inline-flex; flex: none; }
.bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #000; font-size: 11px; font-weight: 800; display: grid; place-items: center; pointer-events: none; box-sizing: border-box; }
.notif-panel { position: fixed; top: 64px; right: calc(var(--wR, 270px) + 20px); width: min(390px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 90px)); display: flex; flex-direction: column; background: var(--elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.6); z-index: 60; overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-actions { display: flex; gap: 12px; font-size: 13px; }
.notif-actions .lnk { background: none; border: 0; padding: 0; cursor: pointer; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 34px 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.notif-item:hover, .notif-item:focus-visible { background: rgba(255,255,255,.06); }
.notif-item.unread { background: rgba(var(--accent-rgb), .1); }
.notif-item.unread::before { content: ""; position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.notif-ic { font-size: 20px; line-height: 1.2; flex: none; }
.notif-main { min-width: 0; flex: 1; }
.notif-title { font-weight: 700; font-size: 14px; }
.notif-body { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.notif-time { color: var(--muted); font-size: 12px; margin-top: 4px; }
.notif-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.notif-x:hover { background: rgba(255,255,255,.1); color: var(--text); }
.notif-empty { padding: 28px 14px; text-align: center; color: var(--muted); }
.notif-reward { padding: 10px 14px 12px; border-top: 1px solid var(--line); font-size: 13px; display: grid; gap: 6px; }
.notif-reward .bar { height: 6px; border-radius: 3px; background: #3a3a3a; overflow: hidden; }
@media (max-width: 1100px) { .notif-panel { right: 12px; } }
@media (max-width: 800px) { .notif-panel { top: 56px; } }

/* صفحه‌ی همه‌ی آلبوم‌ها/سینگل‌های خواننده: کاور مربعی + ترک‌ها زیرش */
.rel-block { margin: 0 0 34px; }
.rel-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 12px; }
.rel-cover { display: block; width: 200px; flex: none; }
.art.rel-art { width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.rel-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: flex-start; }
.rel-title { font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
.big-play.small { width: 44px; height: 44px; }
.more-btn { margin-top: 10px; display: inline-block; }
@media (max-width: 800px) { .rel-cover, .art.rel-art { width: 120px; } .rel-title { font-size: 20px; } }

.follow-btn { padding: 7px 18px; border-radius: 20px; border: 1px solid #777; background: transparent; color: var(--text); font-weight: 700; }
.follow-btn:hover { border-color: #fff; }
.follow-btn.on { border-color: var(--accent); color: var(--accent); }
.art.nav-av { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.nav-item .art.nav-av svg { width: 60%; }

/* نوار پیشرفت: ناحیه‌ی لمس بزرگ‌تر برای انگشت، بدون تداخل با اسکرول صفحه */
#seek, #npSeek { touch-action: none; }
@media (pointer: coarse) {
  #seek, #npSeek { height: 6px; padding: 12px 0; background-clip: content-box; box-sizing: content-box; }
  #seek::-webkit-slider-thumb, #npSeek::-webkit-slider-thumb { width: 16px; height: 16px; }
}

/* ویرایشگر برش عکس */
.crop-back { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.75); display: grid; place-items: center; padding: 16px; }
.crop-modal { background: var(--elev, #222); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.crop-title { font-weight: 800; font-size: 18px; }
.crop-frame { position: relative; overflow: hidden; background: #000; border-radius: 8px; touch-action: none; cursor: grab; user-select: none; }
.crop-frame.round { border-radius: 50%; }
.crop-frame img { position: absolute; max-width: none; pointer-events: none; }
.crop-zoom-row { display: flex; align-items: center; gap: 10px; width: 100%; direction: ltr; }
.crop-zoom-row input { flex: 1; }
.crop-actions { display: flex; gap: 10px; align-self: flex-end; }

/* پلی‌لیست: عکس تلفیقی */
.art.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; }
.art.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-dialog { width: min(380px, 92vw); align-items: stretch; }
.pl-dialog input, .pl-dialog select { width: 100%; }
.art.mosaic img { position: static; }
.season-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 35; }

/* جستجوهای اخیر */
.recent-search { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45; background: var(--elev); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.rs-title { font-size: 11px; color: var(--muted); padding: 4px 10px; text-transform: uppercase; letter-spacing: .04em; }
.rs-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.rs-item:hover { background: var(--hover); }
.rs-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-x { color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; }
.rs-x:hover { color: var(--text); }

.rs-item .art.rs-art { width: 30px; border-radius: 6px; }
.rs-item .art.rs-art.round { border-radius: 50%; }
.rs-item .art.rs-art svg { width: 55%; height: 55%; }
.rs-clock { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); flex: none; }

/* کادر نازک دور هر آلبوم/سینگل در صفحه‌ی See more (رنگش از فصل می‌آید) */
.rel-block { border: 1px solid rgba(var(--accent-rgb), .38); border-radius: 16px; padding: 16px; background: rgba(var(--accent-rgb), .035); transition: border-color .2s, background .2s; }
.rel-block:hover { border-color: rgba(var(--accent-rgb), .7); }
@media (max-width: 800px) { .rel-block { padding: 12px; border-radius: 14px; } }

/* کادر نازکِ گرد دور گزینه‌های پنل چپ (منو) و راست (دوستان)؛ رنگ از فصل می‌آید */
.nav-item, .friend { border: 1px solid rgba(var(--accent-rgb), .28); }
.nav-item:hover, .friend:hover { border-color: rgba(var(--accent-rgb), .6); }
.nav-item.active { border-color: rgba(var(--accent-rgb), .7); }
.nav-item { border-radius: 10px; }

.nav-item { margin-bottom: 2px; }   /* گزینه‌های منوی چپ ۲ پیکسل از هم فاصله دارند */

/* اسم برنامه: یک نور رنگ فصل از اول جمله شروع می‌کند، روی حروف می‌گذرد و در آخر جمله می‌رود؛ بعد مکث و دوباره */
#logoName, #brandName { position: relative; display: inline-block; }
#logoName::after, #brandName::after {
  content: attr(data-text); position: absolute; left: -16px; top: -12px; padding: 12px 16px; white-space: nowrap; pointer-events: none;
  color: var(--accent-2);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .9), 0 0 20px rgba(var(--accent-rgb), .6);
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: nameSweep 7s ease-in-out infinite;
}
@keyframes nameSweep {            /* ۰ تا ۴۵٪: گذر از چپ به راست؛ بقیه: مکث */
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  45%  { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) { #logoName::after, #brandName::after { animation: none; display: none; } }

/* گوشی: نوار پخش پایین از صفحه جدا و برجسته باشد (رنگ روشن‌تر، خط رنگی فصل، سایه به سمت بالا، لبه‌ی گرد) */
@media (max-width: 800px) {
  .player {
    background: linear-gradient(180deg, #232323, #181818);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(var(--accent-rgb), .55);
    box-shadow: 0 -10px 28px rgba(0,0,0,.75), 0 -1px 18px rgba(var(--accent-rgb), .18);
    padding-top: 14px;
    position: relative;
    z-index: 5;
  }
  .player::before {                       /* دستگیره‌ی کوچک بالای نوار */
    content: ''; position: absolute; top: 5px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 2px; background: rgba(var(--accent-rgb), .55);
  }
  .p-vol { top: 16px; }
}


.build-tag { font-size: 11px; color: var(--muted); opacity: .7; padding: 0 4px 4px; }
.build-tag.warn { color: #ff6b6b; opacity: 1; font-weight: 700; }

/* گوشی: صفحه زوم نشود (نه با دو انگشت، نه با دوبار لمس)؛ اسکرول عادی کار می‌کند */
html, body { touch-action: pan-x pan-y; }
@media (max-width: 800px) {
  input, select, textarea { font-size: 16px; }   /* زیر ۱۶ پیکسل، آیفون موقع کلیک روی کادر خودش زوم می‌کند */
}

/* ===== بنر خواننده با نسبت ثابت ۳٫۲:۱ =====
   قبلاً بنر پشت کل بالای صفحه پهن می‌شد و نسبتش با عرض صفحه عوض می‌شد؛ حالا یک جعبه‌ی هم‌نسبت با کادر برش ادمین است،
   پس همان چیزی که در پنل می‌بینی (و ذخیره می‌کنی) روی همه‌ی صفحه‌ها بدون برش اضافه نشان داده می‌شود. */
.hero.has-banner { --hp: 20px; flex-wrap: wrap; min-height: 0; overflow: visible; background: none; padding: 0 var(--hp) 22px; }
.hero.has-banner::after { display: none; }
.hero-banner-box { position: relative; z-index: 0; flex: 0 0 calc(100% + var(--hp) * 2); margin: 0 calc(var(--hp) * -1) -70px; aspect-ratio: 3.2 / 1; overflow: hidden; }
.hero-banner-box .hero-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-banner-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #121212 0%, rgba(18,18,18,.35) 40%, rgba(18,18,18,0) 100%); }
@media (max-width: 800px) { .hero.has-banner { --hp: 12px; padding-bottom: 16px; } .hero-banner-box { margin-bottom: -56px; flex: none; width: calc(100% + 24px); } }   /* روی گوشی hero ستونی است؛ flex-basis ارتفاع می‌شود، پس عرض را صریح می‌دهیم */


/* روی گوشی کادر جستجو باریک است (بین منو و زنگ)، پس اسم ریسنت‌سرچ‌ها نصفه می‌افتاد.
   فهرست را به عرض کل صفحه باز می‌کنیم و اگر اسمی باز هم بلند بود می‌گذاریم تا دو خط شکسته شود. */
@media (max-width: 800px) {
  .recent-search { position: fixed; top: 64px; left: 10px; right: 10px; max-height: calc(100dvh - 140px); overflow-y: auto; }
}

/* بنر بیشتر زیر عکس و اسم خواننده بیاید: هم‌پوشانی تا ۲۲٪ عرض (حداکثر ۱۹۰ پیکسل)، روی گوشی ۲۸٪ */
.hero-banner-box { margin-bottom: max(-190px, -22%); }
.hero-banner-box::after { background: linear-gradient(to top, #121212 0%, rgba(18,18,18,.55) 30%, rgba(18,18,18,.15) 65%, rgba(18,18,18,0) 100%); }   /* پایین‌تر کمی تیره‌تر تا اسم خوانا بماند */
@media (max-width: 800px) { .hero-banner-box { margin-bottom: -28%; } }

/* عکس پروفایل کوچک است؛ یک نشانه‌ی دوربین کوچک روی آن می‌گذاریم تا معلوم باشد قابل تغییر است */
.me-av { position: relative; }
.me-av::after { content: '✎'; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; display: grid; place-items: center; font-size: 9px; line-height: 1; color: #111; background: var(--accent); border-radius: 50%; }

/* ===== نوار دوستان: بردر همیشه کامل دیده شود + جمع‌شدن روی کامپیوتر ===== */
.friend { grid-template-columns: 40px minmax(0, 1fr); min-width: 0; }   /* قبلاً ستون 1fr با اسم بلند عریض‌تر از نوار می‌شد و بردر ردیف بریده می‌شد */
.friend > * { min-width: 0; }
.f-list { overflow-x: hidden; }
@media (min-width: 1101px) {
  html.friends-off .app { grid-template-columns: min(var(--wL, 270px), 30vw) minmax(0, 1fr); }
  html.friends-off .friends { display: none; }
  html.friends-off .notif-panel { right: 20px; }
}
@media (max-width: 1100px) { .notif-panel { right: 12px; } }

/* ===== جستجوهای اخیر: ردیف افقی، خواننده دایره‌ای و آلبوم/آهنگ مربعی، اسم کامل ===== */
.recent-search { padding: 8px 8px 10px; min-width: min(340px, calc(100vw - 20px)); }
.rs-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 2px; scrollbar-width: thin; }
.rs-card { flex: 0 0 82px; width: 82px; cursor: pointer; text-align: center; }
.rs-pic { position: relative; width: 82px; height: 82px; }
.rs-pic .art { width: 100%; }
.rs-card .art.rs-art, .rs-card .art.rs-art.round { width: 100%; }
.rs-card .art.rs-art:not(.round) { border-radius: 10px; }
.rs-card:hover .art { filter: brightness(1.12); }
.rs-card .rs-x { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font-size: 13px; line-height: 1; display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s; }
.rs-card:hover .rs-x, .rs-card:focus-within .rs-x { opacity: 1; }
@media (hover: none) { .rs-card .rs-x { opacity: .9; } }
.rs-card .rs-t { margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.25; white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.rs-k { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* نتایج جستجو: اسم‌ها کامل (تا ۳ خط) به‌جای «…» */
.grid.wrap-names .card-title, .grid.wrap-names .card-sub { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.credit { font-size: 11px; color: var(--muted); opacity: .6; padding: 0 4px 6px; letter-spacing: .03em; }
.login-credit { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; z-index: 2; }
/* پنل ادمین: خواننده‌ها کاشی‌های کوچک مربعی */
.atiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.atile { background: var(--panel); border: 0; border-radius: 12px; padding: 8px; cursor: pointer; text-align: center; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 4px; }
.atile:hover { filter: brightness(1.15); }
.atile .art { width: 100%; border-radius: 8px; }
.atile-n { font-size: 12px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atile-c { font-size: 10.5px; color: var(--muted); }

.build-tag:not(.warn) { display: none; }   /* شماره‌ی نسخه فقط وقتی سرور/برنامه ناهماهنگ‌اند (هشدار) دیده می‌شود */

/* ===== صفحه‌ی خرید اشتراک ===== */
.buy-card { max-height: calc(100dvh - 40px); overflow-y: auto; width: min(460px, calc(100vw - 28px)); }
.buy-h { margin: 0; font-size: 20px; }
.buy-plans { display: grid; gap: 8px; }
.buy-plan { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 2px solid transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.buy-plan b { font-size: 15px; }
.buy-plan span { color: var(--accent); font-weight: 700; }
.buy-plan:hover { filter: brightness(1.15); }
.buy-plan.on { border-color: var(--accent); }
.buy-steps { display: grid; gap: 10px; font-size: 14px; line-height: 1.5; }
.buy-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.buy-steps code { background: rgba(255,255,255,.1); padding: 1px 6px; border-radius: 6px; }
.buy-steps .amount { color: var(--accent); font-weight: 800; }
.buy-note { font-size: 12.5px; color: var(--muted); }

/* بنر خواننده روی صفحه‌ی بزرگ: عرض نمایش محدود می‌شود (تا عکس کوچک‌تر و در نتیجه شارپ‌تر دیده شود) و لبه‌ی راستش محو می‌شود */
@media (min-width: 1600px) {   /* فقط وقتی محتوا پهن‌تر از ۱۰۰۰ پیکسل است (مانیتور بزرگ) */
  .hero-banner-box { max-width: 1000px; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%); mask-image: linear-gradient(to right, #000 78%, transparent 100%); }
}

.buy-sum { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.buy-go { text-decoration: none; margin-top: 4px; border-color: var(--accent); }
.buy-go:hover { filter: brightness(1.2); }
.buy-steps ol { padding-left: 0; padding-right: 20px; }

.buy-badge { display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #111; font-size: 11px; font-weight: 800; vertical-align: middle; }

/* «Popular» در صفحه‌ی خواننده، مثل اسپاتیفای: شماره، کاور مربعی ۴۰ پیکسلی، اسم آهنگ، تعداد پخش (فقط عدد)، لایک، زمان؛ بدون ستون خواننده/آلبوم */
.songs.popular .r-album, .songs.popular .r-artist { display: none; }
.songs.popular .row { min-height: 56px; }
.songs.popular .art.sm { width: 40px; height: 40px; border-radius: 4px; }
.songs.popular .r-title { font-size: 15px; font-weight: 500; }
.songs.popular .r-plays { flex: 1 1 0; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; padding-right: 18px; }
@media (max-width: 700px) { .songs.popular .r-plays { display: none; } }

/* ===== گوشی: نوار پخش پایین باز/بسته می‌شود (روی دستگیره‌ی بالای نوار بزن یا بکش) =====
   بسته: فقط کاور، اسم آهنگ و دکمه‌ی پخش/توقف؛ باز: همه‌ی دکمه‌ها و نوار زمان. */
.p-grip { display: none; }
@media (max-width: 800px) {
  .p-grip { display: block; position: absolute; top: 0; left: 50%; width: 140px; height: 28px; margin-left: -70px; background: none; border: 0; padding: 0; z-index: 2; touch-action: none; }
  .player.collapsed { padding-top: 16px; padding-bottom: 10px; min-height: 0; }
  .player.collapsed .p-seek, .player.collapsed #btnShuffle, .player.collapsed #btnPrev, .player.collapsed #btnNext,
  .player.collapsed #btnRepeat, .player.collapsed .p-vol, .player.collapsed #pLike, .player.collapsed #pAdd { display: none; }
  .player.collapsed .p-center { position: absolute; right: 14px; top: 50%; margin-top: -14px; }
  .player.collapsed .p-info { padding-right: 64px; }
}

/* تبلیغ تک‌ردیفی: روی گوشی کمی کوتاه‌تر */
@media (max-width: 800px) { .ad-wrap { --ad: 340px; } }

/* ===== آهنگ‌های آفلاین ===== */
.off-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.off-bar .small-text { flex: 1 1 200px; min-width: 0; }
.row.is-off .r-title::after { content: ' ✓'; color: var(--accent); font-size: 12px; }
body.offline-mode .row:not(.is-off) { opacity: .35; }

/* نسخه ۸۰: آیفون — نوار پخش را از لبه‌ی پایین بالاتر می‌بریم تا موقع کشیدن انگشت برای بیرون آمدن از برنامه
   (حرکت «خط پایین صفحه») به نوار زمان/دکمه‌ها نخورد و آهنگ وسط‌کاره پرش نکند. */
@media (max-width: 800px) {
  .player { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }
  .player.collapsed { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
}