/* نوا — سیستم طراحی v2 | موبایل‌فرست، راست‌به‌چپ، تم تاریک پیش‌فرض
   زبان طراحی: «آرام و عمیق» — سطوح لایه‌ای، نور محیطی بنفش/سرخابی، حرکت هدفمند */
/* فونت وزیرمتن — خودمیزبان (ظاهر-۱۷): بدون وابستگی به CDN گوگل */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/vazir-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/vazir-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* پالت */
  --bg:#0a0a13; --bg2:#12121d; --card:#15151f; --card2:#1e1e2a; --card3:#282836;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --txt:#f5f5f8; --mut:#a7a7ba; --mut2:#85859c;
  --acc:#a78bfa; --acc2:#f0abfc;
  --grad:linear-gradient(135deg,#8b5cf6,#d946ef);
  --grad-soft:linear-gradient(135deg,rgba(139,92,246,.18),rgba(217,70,239,.18));
  --red:#f87171; --rose:#fb7185;
  --ok:#4ade80; --warn:#fbbf24;  /* توکن‌های معنایی وضعیت (پنل نسخه ۲): حل‌شده=ok، در بررسی=warn، باز=rose، ردشده=mut */
  /* شعاع گوشه */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:30px; --r-full:999px;
  /* فاصله‌گذاری */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  /* سایه و عمق */
  --sh-sm:0 2px 10px rgba(0,0,0,.28);
  --sh:0 10px 34px rgba(0,0,0,.45);
  --sh-lg:0 24px 64px rgba(0,0,0,.55);
  --sh-glow:0 8px 30px rgba(168,85,247,.38);
  /* حرکت */
  --ease:cubic-bezier(.22,.9,.28,1); --spring:cubic-bezier(.2,.9,.3,1.25);
  --dur:.22s;
  --ring:0 0 0 4px rgba(167,139,250,.22);
  --nav-h:64px; --top-h:56px;
  --ambient-1:radial-gradient(640px 420px at 88% -60px, rgba(139,92,246,.16), transparent 62%);
  --ambient-2:radial-gradient(560px 420px at -10% 12%, rgba(217,70,239,.09), transparent 58%);
}
[data-theme="light"]{
  --acc:#7c3aed; --acc2:#c026d3; --red:#dc2626; --rose:#e11d48;
  --ok:#15803d; --warn:#b45309;
  --bg:#f5f5fa; --bg2:#ffffff; --card:#ffffff; --card2:#efeff5; --card3:#e4e4ee;
  --line:rgba(20,16,50,.09); --line2:rgba(20,16,50,.16);
  --txt:#17171f; --mut:#5b5b6e; --mut2:#6e6e82;
  --sh-sm:0 2px 10px rgba(80,60,160,.08);
  --sh:0 10px 30px rgba(80,60,160,.13);
  --sh-lg:0 24px 54px rgba(80,60,160,.18);
  --sh-glow:0 8px 26px rgba(168,85,247,.28);
  --ring:0 0 0 4px rgba(139,92,246,.18);
  --ambient-1:radial-gradient(640px 420px at 88% -60px, rgba(139,92,246,.12), transparent 62%);
  --ambient-2:radial-gradient(560px 420px at -10% 12%, rgba(217,70,239,.07), transparent 58%);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  background:var(--ambient-1), var(--ambient-2), var(--bg);
  background-repeat:no-repeat;
  font-family:'Vazirmatn',system-ui,sans-serif;
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(167,139,250,.4)}
button{font-family:inherit; color:inherit}
input,textarea,select{font-family:inherit}
img{background:var(--card2)}
.hidden{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc2); outline-offset:2px; border-radius:6px}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes pulse-dot{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.5); opacity:.55}}

/* ---------- پوسته ---------- */
#topbar{
  position:sticky; top:0; z-index:40; height:var(--top-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 14px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--line);
}
.logo{font-weight:900; font-size:23px; letter-spacing:-.5px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.logo-dot{-webkit-text-fill-color:var(--acc2)}
.topbar-actions{display:flex; gap:4px}
.icon-btn{
  background:none; border:none; font-size:20px; cursor:pointer; padding:11px; min-width:44px; min-height:44px;
  border-radius:12px; color:var(--txt); position:relative; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease), transform .15s var(--ease), color var(--dur);
}
.icon-btn:hover{background:color-mix(in srgb, var(--txt) 7%, transparent)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.big{font-size:30px}
.badge{position:absolute; top:2px; inset-inline-start:2px; min-width:18px; height:18px;
  background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff; font-size:11px; font-weight:700; border-radius:var(--r-xs);
  display:flex; align-items:center; justify-content:center; padding:0 5px;
  box-shadow:0 2px 8px rgba(244,63,94,.5); animation:pop .35s var(--spring)}

#view{max-width:640px; margin:0 auto; padding:14px 12px calc(var(--nav-h) + 28px); min-height:100dvh}
#view.no-chrome{padding:0; max-width:none}
#view>*{animation:fadeUp .38s var(--ease) both}

#bottomnav{
  position:fixed; bottom:0; right:0; left:0; z-index:40; height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(20px) saturate(1.4); border-top:1px solid var(--line);
}
#bottomnav button{
  flex:1; background:none; border:none; cursor:pointer; color:var(--mut);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:11px; font-weight:600;
  transition:color var(--dur);
}
#bottomnav button .nav-ic{display:flex; align-items:center; justify-content:center; padding:5px 14px; border-radius:var(--r-full); transition:background var(--dur) var(--ease), transform .15s var(--ease)}
#bottomnav button:active .nav-ic{transform:scale(.9)}
#bottomnav button.active{color:var(--txt)}
#bottomnav button.active .nav-ic{background:color-mix(in srgb, var(--acc) 20%, transparent); color:var(--acc2)}
#bottomnav .nav-ic{font-size:22px; line-height:1}
#bottomnav .nav-ic .nv-ic{width:24px; height:24px; display:block}
#bottomnav .nav-fab .nav-ic .nv-ic{width:26px; height:26px}

/* ---------- ست آیکن SVG اختصاصی ---------- */
.nv-ic{display:block; flex:none}
.icon-btn .nv-ic{width:22px; height:22px}
.icon-btn.big .nv-ic{width:30px; height:30px}
.post-playbtn .nv-ic{width:24px; height:24px; margin-inline-start:2px; color:#fff}
.chip .nv-ic{width:14px; height:14px; vertical-align:-2px; margin-inline-end:2px}
.empty .empty-ic{width:34px; height:34px; color:var(--acc2)}
.cover-fallback .nv-ic{width:64px; height:64px; color:rgba(255,255,255,.25)}
.sheet-ic .nv-ic{width:22px; height:22px}
.msg-input button .nv-ic{width:22px; height:22px}
.fp-vol .nv-ic{width:20px; height:20px; color:#fff}
.sug-btn .nv-ic, .sec-ic .nv-ic{width:16px; height:16px}
/* ---------- آیکن تیتر بخش‌ها و صفحه ---------- */
.section-title>span{display:inline-flex; align-items:center; gap:8px}
.section-title .nv-ic{width:18px; height:18px; color:var(--acc2); flex:none}
.page-title .nv-ic{width:22px; height:22px; color:var(--acc2); vertical-align:-4px; margin-inline-end:6px}
.suggest .nv-ic{width:16px; height:16px; color:var(--mut)}
.sheet-opt .nv-ic{width:18px; height:18px; color:var(--mut); flex:none}
.avatar .nv-ic{width:20px; height:20px; color:var(--mut)}
.verified .nv-ic{width:15px; height:15px; color:var(--acc2); vertical-align:-2px}
.c-act .nv-ic{width:15px; height:15px}
.sug-ic{display:inline-flex; color:var(--mut2); flex:none}
.sug-ic .nv-ic{width:15px; height:15px}
.notif-ic .nv-ic{width:19px; height:19px}
.drop-ic .nv-ic{width:44px; height:44px; color:var(--acc2)}
.auth-logo .nv-ic{width:30px; height:30px; display:inline-block; vertical-align:-6px; margin-inline-end:4px}
#bottomnav .nav-fab .nav-ic{
  width:50px; height:50px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; margin-top:-20px; padding:0;
  box-shadow:var(--sh-glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s var(--spring);
}
#bottomnav .nav-fab:active .nav-ic{transform:scale(.92)}

/* ---------- مینی‌پلیر ---------- */
#miniPlayer{
  position:fixed; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  right:12px; left:12px; max-width:616px; margin:0 auto; z-index:39;
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:color-mix(in srgb, var(--card2) 86%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--sh-lg);
  cursor:pointer; overflow:hidden; animation:fadeUp .3s var(--ease);
}
.mp-progress{position:absolute; top:0; right:0; left:0; height:3px; background:var(--line)}
#mpProgFill{height:100%; width:0; background:var(--grad); box-shadow:0 0 8px rgba(217,70,239,.7); transition:width .3s linear}
#miniPlayer img{width:46px; height:46px; border-radius:var(--r-sm); object-fit:cover; box-shadow:var(--sh-sm)}
.mp-meta{flex:1; min-width:0; display:flex; flex-direction:column}
.mp-meta b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mp-meta span{font-size:11px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mp-play{background:var(--grad); color:#fff; border-radius:50%; width:46px; height:46px; box-shadow:var(--sh-glow)}
.mp-play:hover{background:var(--grad)}

/* ---------- کارت پست ---------- */
.post{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden;
  box-shadow:var(--sh-sm); transition:box-shadow var(--dur) var(--ease), border-color var(--dur)}
@media (hover:hover){.post:hover{box-shadow:var(--sh); border-color:var(--line2)}}
.post-head{display:flex; align-items:center; gap:10px; padding:12px 14px}
.avatar{width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:inset 0 0 0 1px var(--line)}
.avatar.sm{width:32px; height:32px}
.avatar.lg{width:56px; height:56px}
.ph-meta{flex:1; min-width:0}
.ph-meta b{font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ph-meta span{font-size:11px; color:var(--mut)}
.verified{color:var(--acc2); font-size:13px; display:inline-flex}
.post-cover{position:relative; aspect-ratio:1; background:var(--card2); cursor:pointer}
.post-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease)}
@media (hover:hover){.post:hover .post-cover img{transform:scale(1.025)}}
.post-cover::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.38)); opacity:.85}
.cover-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:64px; background:linear-gradient(135deg,#2a2140,#3b1d4e)}
.eq{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; background:rgba(0,0,0,.35); opacity:0; transition:.25s; z-index:2}
.post.playing .eq{opacity:1}
.eq i{width:5px; border-radius:3px; background:#fff; animation:eq 1s ease-in-out infinite; box-shadow:0 0 10px rgba(255,255,255,.6)}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:12px}50%{height:34px}}
.post-playbtn{position:absolute; bottom:14px; inset-inline-start:14px; width:54px; height:54px; border-radius:50%; z-index:3;
  background:var(--grad); color:#fff; border:none; font-size:22px; cursor:pointer;
  box-shadow:var(--sh-glow), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s var(--spring), box-shadow var(--dur)}
.post-playbtn:hover{transform:scale(1.08)}
.post-playbtn:active{transform:scale(.94)}
.post-body{padding:12px 14px}
.track-title{font-size:16px; font-weight:800; margin:0 0 2px; letter-spacing:-.2px}
.track-artist{color:var(--mut); font-size:13px; margin:0 0 8px}
.post-audio{width:100%; margin:4px 0 8px; accent-color:var(--acc)}
.post-actions{display:flex; align-items:center; gap:2px; padding:2px 8px 8px}
.post-actions .icon-btn{font-size:21px}
.post-actions .count{font-size:12px; color:var(--mut); margin-inline-end:6px; min-width:14px; font-variant-numeric:tabular-nums}
.post-actions .spacer{flex:1}
.action-on{color:var(--acc2)!important}
.like-on{color:var(--rose)!important}
.like-on .nv-ic{animation:pop .38s var(--spring)}
.post-caption{padding:0 14px 4px; font-size:13.5px; line-height:1.9}
.post-caption .uname{font-weight:700}
.hashtag{color:var(--acc2); cursor:pointer; font-weight:600}
.hashtag:hover{text-decoration:underline}
.post-tags{display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px}
/* جلسه ۱۴: هدف لمسی چیپ‌ها ۳۶px → ۴۴px (استاندارد لمسی موبایل؛ CSS خالص، بدون تغییر JS) */
.chip{font-size:11.5px; padding:8px 14px; min-height:44px; display:inline-flex; align-items:center; border-radius:var(--r-full); background:var(--card2); border:1px solid var(--line); color:var(--mut); cursor:pointer;
  transition:all var(--dur) var(--ease); font-weight:600}
.chip:hover{border-color:var(--acc); color:var(--txt); transform:translateY(-1px)}
.chip:active{transform:scale(.96)}
.chip.sel{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--sh-glow)}
.post-time{padding:0 14px 14px; font-size:11px; color:var(--mut2)}

/* ---------- دکمه‌ها و فرم ---------- */
.btn{
  border:none; cursor:pointer; border-radius:var(--r-sm); padding:13px 22px; font-size:15px; font-weight:700;
  background:var(--grad); color:#fff; width:100%;
  box-shadow:var(--sh-glow), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .16s var(--ease), box-shadow var(--dur), opacity var(--dur), background var(--dur);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn .nv-ic{width:18px; height:18px}
@media (hover:hover){.btn:hover{transform:translateY(-1px); box-shadow:0 12px 36px rgba(168,85,247,.45), inset 0 1px 0 rgba(255,255,255,.3)}}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--card2); color:var(--txt); border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{border-color:var(--line2); background:var(--card3)}
.btn.small{padding:var(--sp-2) var(--sp-4); font-size:13px; width:auto; border-radius:var(--r-sm)}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f43f5e); box-shadow:0 8px 26px rgba(244,63,94,.32)}
.btn:disabled{opacity:.5; pointer-events:none}
.field{margin-bottom:var(--sp-3)}
.field label{display:block; font-size:13px; font-weight:600; color:var(--mut); margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; color:var(--txt); font-size:15px; outline:none;
  transition:border-color var(--dur), box-shadow var(--dur);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acc); box-shadow:var(--ring)}
.field textarea{resize:vertical; min-height:90px; line-height:1.9}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-4); margin-bottom:var(--sp-3); box-shadow:var(--sh-sm)}
.page-title{font-size:21px; font-weight:900; margin:6px 2px 16px; letter-spacing:-.3px; display:flex; align-items:center; gap:8px}
.section-title{font-size:15px; font-weight:800; margin:var(--sp-5) 2px var(--sp-3); display:flex; align-items:center; justify-content:space-between}
/* جلسه ۱۶: هدف لمسی لینک «همه» در تیتر بخش‌ها ۴۴px (با حاشیه منفی تا ارتفاع ردیف مثل قبل بماند) */
.section-title a{display:inline-flex; align-items:center; min-height:44px; padding-inline:10px; margin-inline:-10px; margin-block:-13px; font-size:12px; color:var(--acc2); font-weight:600}
.section-title a:hover{text-decoration:underline}
.section-title a:active{transform:scale(.96)}
/* جلسه ۱۸: هدف لمسی دکمه‌های .link.small در تیتر بخش‌ها ۴۴px (با حاشیه منفی تا ارتفاع ردیف مثل قبل بماند؛ فقط داخل .section-title تا دکمه درون‌خطی پرونده نظارت و «خواندن همه» اعلان‌ها دست نخورند) */
.section-title .link.small{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding-inline:10px; margin-inline:-10px; margin-block:-13px; font-size:12px; color:var(--acc2); font-weight:600}
.section-title .link.small .ic-in{margin-inline-end:0}
.section-title .link.small:hover{text-decoration:underline}
.section-title .link.small:active{transform:scale(.96)}
/* جلسه ۱۹: هدف لمسی «خواندن همه» اعلان‌ها ۴۴px (فقط #markAll یکتا تا دکمه درون‌خطی «مشاهده پست» پرونده نظارت و .row.mb کتابخانه دست نخورند؛ margin-block ‎-13px همان ریاضی جلسات ۱۶/۱۸ تا ارتفاع ردیف مثل قبل بماند) */
#markAll{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding-inline:10px; margin-inline:-10px; margin-block:-13px; font-size:12px; color:var(--acc2); font-weight:600}
#markAll .nv-ic{width:16px; height:16px; flex:none}
#markAll:hover{text-decoration:underline}
#markAll:active{transform:scale(.96)}
.feed-sub{font-size:11px; color:var(--mut); font-weight:600}
.why-row{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--acc2);
  background:color-mix(in srgb, var(--acc) 12%, transparent); border:1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  padding:4px 10px; border-radius:var(--r-full); margin:16px 2px 2px}
.why-row .nv-ic{width:13px; height:13px; flex:none}
.err-msg{color:var(--red); font-size:13px; text-align:center; min-height:18px; line-height:1.9}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* ---------- اسکلت لودینگ ---------- */
.sk{position:relative; overflow:hidden; background:var(--card2); border-radius:var(--r-sm)}
.sk::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation:sh 1.4s infinite}
[data-theme="light"] .sk::after{background:linear-gradient(90deg,transparent,rgba(20,16,50,.06),transparent)}
@keyframes sh{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.sk-line{height:12px; margin-bottom:8px}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
.sk-circle{border-radius:50%; flex:none}
.sk-row{display:flex; gap:10px; align-items:center; padding:10px 4px}
.sk-grid-card{border-radius:var(--r-sm); overflow:hidden; background:var(--card); border:1px solid var(--line)}

/* ---------- گرید ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.gcard{border-radius:var(--r); overflow:hidden; background:var(--card); border:1px solid var(--line); cursor:pointer; text-align:start; padding:0;
  box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur)}
.gcard:active{transform:scale(.98)}
@media (hover:hover){.gcard:hover{transform:translateY(-3px); box-shadow:var(--sh)}}
.gcard img{width:100%; aspect-ratio:1; object-fit:cover; display:block; transition:transform .5s var(--ease)}
@media (hover:hover){.gcard:hover img{transform:scale(1.05)}}
.gcard .t{padding:9px 11px}
.gcard .t b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gcard .t span{font-size:11px; color:var(--mut)}
.gcard.featured{grid-column:span 2}
.gcard.featured img{aspect-ratio:2/1}
.rank-num{font-size:22px; font-weight:900; font-style:italic; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex:none; min-width:30px; text-align:center}
.hscroll{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px; scrollbar-width:none; scroll-snap-type:x proximity}
.hscroll::-webkit-scrollbar{display:none}
.hcard{flex:0 0 148px; border-radius:var(--r); overflow:hidden; background:var(--card); border:1px solid var(--line); cursor:pointer; padding:0; text-align:start;
  box-shadow:var(--sh-sm); scroll-snap-align:start; transition:transform var(--dur) var(--ease), box-shadow var(--dur)}
.hcard:active{transform:scale(.97)}
@media (hover:hover){.hcard:hover{transform:translateY(-3px); box-shadow:var(--sh)}}
.hcard img{width:148px; height:148px; object-fit:cover; display:block}
.hcard .t{padding:8px 10px}
.hcard .t b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hcard .t span{font-size:11px; color:var(--mut)}

/* ---------- ژانر / حال‌وهوا ---------- */
.genre-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.genre-card{border:none; border-radius:var(--r); padding:18px 14px; color:#fff; font-weight:800; font-size:15px;
  cursor:pointer; text-align:start; min-height:88px; display:flex; align-items:flex-end; position:relative; overflow:hidden;
  box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur); text-shadow:0 1px 8px rgba(0,0,0,.35)}
.genre-card::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 45%,rgba(0,0,0,.38))}
.genre-card::after{content:''; position:absolute; top:-30%; inset-inline-end:-12%; width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.14); filter:blur(2px)}
.genre-card:active{transform:scale(.97)}
@media (hover:hover){.genre-card:hover{transform:translateY(-3px); box-shadow:var(--sh)}}
.genre-card span{position:relative; z-index:1}
[data-theme="light"] .genre-card::before{background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 38%,rgba(0,0,0,.55))}
[data-theme="light"] .genre-card{text-shadow:0 1px 10px rgba(0,0,0,.55)}
.genre-card .gp{position:absolute; inset:0; z-index:0; opacity:.17; color:#fff; pointer-events:none}
.genre-card .gp svg{width:100%; height:100%; display:block}
.genre-hero{position:relative; overflow:hidden}
.genre-hero .gp{position:absolute; inset:0; z-index:0; opacity:.16; pointer-events:none}
.genre-hero .gp svg{width:100%; height:100%; display:block}
.genre-hero h2,.genre-hero p{position:relative; z-index:1}
.mood-row,.chip-row{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; scrollbar-width:none}
.mood-row::-webkit-scrollbar,.chip-row::-webkit-scrollbar{display:none}
.chip-row{position:sticky; top:var(--top-h); z-index:15; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px)}

/* ---------- پروفایل ---------- */
.pf-cover{height:160px; border-radius:var(--r-lg); background:linear-gradient(120deg,#3b2d5e,#5e2d5e 55%,#2d3a5e); overflow:hidden; margin:-4px -4px 0; position:relative; box-shadow:var(--sh-sm)}
.pf-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.35))}
.pf-cover img{width:100%; height:100%; object-fit:cover}
.pf-head{display:flex; gap:14px; align-items:flex-end; margin-top:-38px; padding:0 10px; position:relative; z-index:2}
.pf-head .avatar{width:88px; height:88px; border:4px solid var(--bg); box-shadow:var(--sh)}
.pf-name{font-size:20px; font-weight:900; margin:12px 2px 0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.3px}
.pf-uname{color:var(--mut); font-size:13px; margin:0 2px; direction:ltr; text-align:end; unicode-bidi:embed}
.pf-bio{font-size:13.5px; line-height:1.95; margin:8px 2px; color:var(--txt)}
.pf-stats{display:flex; gap:8px; margin:14px 0}
.pf-stats button{flex:1; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; text-align:center; padding:10px 4px;
  transition:border-color var(--dur), transform .15s var(--ease); box-shadow:var(--sh-sm)}
.pf-stats button:active{transform:scale(.96)}
.pf-stats button:hover{border-color:var(--line2)}
.pf-stats b{display:block; font-size:16px; font-variant-numeric:tabular-nums}
.pf-stats span{font-size:12px; color:var(--mut)}
.pf-actions{display:flex; gap:8px; margin:6px 2px 14px}
.pf-actions .btn{width:auto; flex:1}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px; position:sticky; top:var(--top-h); z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px)}
/* جلسه ۲۱: هدف لمسی تب‌ها ۴۴px (فقط min-height روی .tabs button؛ با box-sizing سراسری کف ارتفاع تضمین می‌شود و تب‌های بالای ۴۴ دست نمی‌خورند؛ بدون حاشیه منفی چون تب ردیف مستقل خودش است؛ فقط ارتفاع، نه عرض — عرض تب ۷تایی زیر ~۳۵۶px همچنان زیر ۴۴ می‌ماند و اسکرول افقی خارج از اسکوپ این جلسه است) */
.tabs button{flex:1; background:none; border:none; min-height:44px; padding:12px 4px; color:var(--mut); font-size:13px; font-weight:700; cursor:pointer;
  border-bottom:2.5px solid transparent; transition:color var(--dur), border-color var(--dur)}
.tabs button.active{color:var(--txt); border-bottom-color:var(--acc2)}
.sim-why{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.pl-hero{border-radius:var(--r-lg); padding:22px 18px; color:#fff; margin-bottom:14px; position:relative; overflow:hidden; box-shadow:var(--sh)}
.pl-hero::before{content:''; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,.22),transparent 50%,rgba(0,0,0,.32))}
.pl-hero>*{position:relative; z-index:1}
.pl-hero h2{margin:0 0 4px; font-size:21px; font-weight:900; text-shadow:0 2px 12px rgba(0,0,0,.3)}
.pl-hero p{margin:0; font-size:12.5px; opacity:.88; line-height:1.9}

/* ---------- لیست‌ها ---------- */
.urow{display:flex; align-items:center; gap:10px; padding:10px 6px; border-radius:var(--r-sm); border-bottom:1px solid var(--line);
  transition:background var(--dur); cursor:pointer}
.urow:hover{background:color-mix(in srgb, var(--txt) 4%, transparent)}
.urow .meta{flex:1; min-width:0}
.urow .meta b{font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.urow .meta span{font-size:12px; color:var(--mut); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.empty{text-align:center; color:var(--mut); padding:52px 20px; font-size:14px; line-height:2}
.empty .big{font-size:48px; display:block; margin-bottom:12px}
.empty .empty-badge{width:96px; height:96px; margin:0 auto 16px; border-radius:50%;
  background:var(--grad-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 8px color-mix(in srgb, var(--bg) 55%, transparent)}
.empty p{margin:0 0 14px}
.empty .btn{margin-top:4px}

/* ---------- کامنت ---------- */
.comment{display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); animation:fadeUp .3s var(--ease)}
.comment .cbody{flex:1; min-width:0}
.comment .cbody b{font-size:13px}
.comment .cbody p{margin:4px 0; font-size:13.5px; line-height:1.9}
.comment .cmeta{font-size:11px; color:var(--mut2); display:flex; gap:14px; align-items:center; margin-top:4px}
.comment .cmeta button{background:none; border:none; color:var(--mut); font-size:11px; cursor:pointer; font-weight:600; padding:7px 6px}
/* جلسه ۲۵: هدف لمسی دکمه‌های متا کامنت ۴۴px؛ بدون حاشیه منفی چون .cmeta ردیف مستقل خودش است و ~۱۵px رشد ارتفاع، هم‌پوشانی ندارد */
.comment .cmeta button{display:inline-flex; align-items:center; min-height:44px; padding-inline:10px}
.comment .cmeta button:hover{text-decoration:underline}
.comment .cmeta button:active{transform:scale(.96)}
.c-act{display:inline-flex; align-items:center; gap:4px; background:none; border:none; color:var(--mut); font-size:11px; cursor:pointer; font-weight:600; padding:7px 8px; transition:color var(--dur)}
.c-act.on{color:var(--rose)}
.c-act.on .nv-ic{animation:pop .38s var(--spring)}
.comment .children{margin-inline-start:18px; border-inline-start:2px solid var(--line); padding-inline-start:12px}

/* ---------- شیت پایین ---------- */
#sheetRoot .sheet-bg{position:fixed; inset:0; background:rgba(4,4,10,.62); backdrop-filter:blur(4px); z-index:90; animation:fade .22s}
#sheetRoot .sheet{position:fixed; bottom:0; right:0; left:0; z-index:91; background:var(--bg2);
  border:1px solid var(--line); border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:85dvh; overflow-y:auto; padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  animation:up .32s var(--ease); max-width:640px; margin:0 auto; box-shadow:var(--sh-lg)}
@keyframes up{from{transform:translateY(56px); opacity:0}}
@keyframes fade{from{opacity:0}}
.sheet-handle{width:44px; height:5px; border-radius:3px; background:var(--line2); margin:4px auto 14px}
.sheet-opt{display:flex; align-items:center; gap:12px; width:100%; background:none; border:none; border-radius:var(--r-sm);
  padding:14px 10px; font-size:15px; font-weight:600; cursor:pointer; border-bottom:1px solid var(--line); text-align:start;
  transition:background var(--dur)}
.sheet-opt:hover{background:color-mix(in srgb, var(--txt) 5%, transparent)}
.sheet-opt:active{background:color-mix(in srgb, var(--txt) 9%, transparent)}
.sheet-opt:last-child{border-bottom:none}
.sheet-opt .danger{color:var(--red)}

/* ---------- تست ---------- */
#toastRoot{position:fixed; bottom:calc(var(--nav-h) + 84px); right:0; left:0; z-index:80; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px}
.toast{background:color-mix(in srgb, #22222e 88%, transparent); backdrop-filter:blur(14px); color:#fff; padding:12px 22px; border-radius:var(--r-full); font-size:14px; font-weight:600;
  box-shadow:var(--sh-lg); animation:up .28s var(--spring); border:1px solid var(--line2);
  display:flex; align-items:center; gap:8px; max-width:100%}
.toast .nv-ic{width:17px; height:17px; color:var(--acc2); flex:none}
.toast.t-ok{border-color:color-mix(in srgb, var(--ok) 45%, transparent)}
.toast.t-ok .nv-ic{color:var(--ok)}
.toast.t-err{border-color:color-mix(in srgb, var(--red) 50%, transparent)}
.toast.t-err .nv-ic{color:var(--red)}
[data-theme="light"] .toast{background:color-mix(in srgb, #1c1c28 92%, transparent)}

/* ---------- پلیر تمام‌صفحه ---------- */
#fullPlayer{position:fixed; inset:0; z-index:70}
.fp-bg{position:absolute; inset:0; background:rgba(5,5,10,.92); backdrop-filter:blur(30px)}
.fp-sheet{position:absolute; inset:0; max-width:520px; margin:0 auto; display:flex; flex-direction:column; overflow-y:auto; padding:calc(10px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); animation:up .34s var(--ease)}
.fp-handle{width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:0 auto 8px; cursor:pointer}
#fullPlayer{--mut:#c9c9d6; --mut2:#a5a5b8}
#fullPlayer .icon-btn:hover{background:rgba(255,255,255,.14)}
.fp-top{display:flex; align-items:center; justify-content:space-between; color:#fff; margin-bottom:18px}
.fp-top span{font-size:12px; color:var(--mut); font-weight:700; letter-spacing:.4px}
#fpCover{width:min(78vw,340px,38dvh); aspect-ratio:1; border-radius:var(--r-xl); object-fit:cover; margin:6px auto 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.65), 0 0 90px rgba(139,92,246,.35)}
.fp-title{text-align:center; margin-bottom:16px}
.fp-title b{display:block; font-size:22px; font-weight:900; color:#fff; letter-spacing:-.3px}
.fp-title span{color:var(--mut); font-size:14px}
.fp-seek{display:flex; align-items:center; gap:10px; color:var(--mut); font-size:12px; margin-bottom:8px; font-variant-numeric:tabular-nums}
.fp-seek input{flex:1; direction:ltr}
.fp-controls{display:flex; align-items:center; justify-content:center; gap:14px; margin:12px 0}
.fp-controls .icon-btn{color:#fff}
.fp-play{width:74px!important; height:74px!important; font-size:30px!important; background:var(--grad); border-radius:50%!important; color:#fff!important;
  box-shadow:0 14px 44px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.35)}
.fp-play .nv-ic{width:32px; height:32px}
.fp-actions{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px}
.fp-actions .icon-btn{color:#fff}
.fp-vol{display:flex; align-items:center; gap:6px; color:#fff; margin-inline-start:8px}
.fp-vol input{width:80px}
.icon-btn.on{color:var(--acc2)!important}
/* اسلایدرهای پلیر */
input[type=range]{-webkit-appearance:none; appearance:none; height:24px; border-radius:3px; background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) center/100% 5px no-repeat; cursor:pointer; accent-color:var(--acc2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.5); transition:transform .15s var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
input[type=range]::-moz-range-thumb{width:15px; height:15px; border:none; border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.5)}
#fpQueue{margin-top:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:8px; max-height:220px; overflow-y:auto}
.qrow{display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-sm); width:100%; background:none; border:none; color:var(--txt); cursor:pointer; text-align:start; transition:background var(--dur)}
.qrow:hover{background:color-mix(in srgb, var(--txt) 5%, transparent)}
#fullPlayer .qrow{color:#fff}
#fullPlayer .qrow:hover{background:rgba(255,255,255,.06)}
.qrow.cur{background:linear-gradient(135deg, rgba(139,92,246,.35), rgba(217,70,239,.25))}
.qrow img{width:40px; height:40px; border-radius:10px; object-fit:cover}
.qrow .m{flex:1; min-width:0}
.qrow .m b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qrow .m span{font-size:11px; color:var(--mut)}

/* ---------- احراز هویت ---------- */
.auth-wrap{min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:24px; max-width:440px; margin:0 auto}
.auth-card{background:color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 24px 26px; box-shadow:var(--sh-lg);
  animation:fadeUp .45s var(--ease)}
.auth-logo{font-size:42px; font-weight:900; text-align:center; margin-bottom:6px; letter-spacing:-.5px;
  display:flex; align-items:center; justify-content:center; gap:2px}
.auth-logo .logo-txt{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.auth-logo .nv-ic{color:var(--acc2)}
.auth-sub{text-align:center; color:var(--mut); margin-bottom:30px; font-size:14px; line-height:2}
.otp-box{display:flex; gap:8px; justify-content:center; margin:20px 0; direction:ltr}
/* جلسه ۲۳: باکس‌های OTP روی گوشی‌های باریک سرریز می‌کردند (۶×۵۰+۵×۸=۳۴۰px در برابر فضای داخلی ۲۶۴px در ۳۶۰px)؛
   با flex:1 1 0 + min-width:0 + سقف ۵۰px در ۳۶۰px هر باکس ≈۳۷px و از ۴۳۶px به بالا دقیقاً همان ۵۰px امروز؛ بقیه قانون دست‌نخورده */
.otp-box input{flex:1 1 0; min-width:0; max-width:50px; width:auto; height:60px; text-align:center; font-size:24px; font-weight:800; background:var(--card2);
  border:1.5px solid var(--line); border-radius:var(--r); color:var(--txt); outline:none; caret-color:var(--acc2);
  transition:border-color var(--dur), box-shadow var(--dur), transform .15s var(--ease)}
.otp-box input:focus{border-color:var(--acc); box-shadow:var(--ring); transform:translateY(-2px)}
.phone-row{display:flex; gap:8px; direction:ltr}
.phone-row input{flex:1; text-align:left}
.genre-pick{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 20px}
.genre-pick .chip{padding:9px 16px; font-size:13px}
.step-dots{display:flex; gap:6px; justify-content:center; margin-bottom:26px}
.step-dots i{width:8px; height:8px; border-radius:var(--r-full); background:var(--line2); transition:all .35s var(--ease)}
.step-dots i.on{width:26px; background:var(--grad)}

/* ---------- آپلود ---------- */
.drop{border:2px dashed var(--line2); border-radius:var(--r-lg); padding:32px 16px; text-align:center; cursor:pointer; background:var(--card);
  transition:border-color var(--dur), background var(--dur), transform var(--dur)}
.drop:hover,.drop.drag{border-color:var(--acc); background:color-mix(in srgb, var(--acc) 7%, var(--card))}
.drop .big{font-size:40px; display:block; margin-bottom:8px}
.drop .drop-ic{display:flex; justify-content:center; margin-bottom:10px}
.drop input{display:none}
.progress{height:9px; background:var(--card2); border-radius:5px; overflow:hidden; margin-top:10px}
.progress i{display:block; height:100%; background:var(--grad); width:0; transition:width .25s var(--ease); box-shadow:0 0 12px rgba(217,70,239,.55); border-radius:5px}
.preview-audio{width:100%; margin-top:10px}

/* ---------- اعلان ---------- */
.notif{display:flex; gap:12px; padding:13px 8px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:var(--r-sm); align-items:flex-start;
  transition:background var(--dur); animation:fadeUp .3s var(--ease)}
.notif:hover{background:color-mix(in srgb, var(--txt) 4%, transparent)}
.notif.unread{background:color-mix(in srgb, var(--acc) 8%, transparent)}
.notif .nbody{flex:1; font-size:13.5px; line-height:1.85; min-width:0}
.notif .nbody b{font-weight:700}
.notif .ntime{font-size:11px; color:var(--mut2)}
.notif-ic{width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--grad-soft); color:var(--acc2); border:1px solid var(--line)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--acc2); margin-top:8px; flex-shrink:0; animation:pulse-dot 1.8s infinite}

/* ---------- پیام ---------- */
.conv{display:flex; gap:12px; padding:12px 8px; border-bottom:1px solid var(--line); cursor:pointer; align-items:center; border-radius:var(--r-sm); transition:background var(--dur)}
.conv:hover{background:color-mix(in srgb, var(--txt) 4%, transparent)}
.conv .cmeta{flex:1; min-width:0}
.conv .cmeta .t{display:flex; justify-content:space-between; align-items:center; gap:8px}
.conv .cmeta .t b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.conv .cmeta .t span{flex:none}
.conv .cmeta p{margin:2px 0 0; font-size:12.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-unread{min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--grad); color:#fff; font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--sh-glow); flex:none}
.msg-list{display:flex; flex-direction:column; gap:8px; padding:12px 4px 20px}
.msg{max-width:78%; padding:10px 14px; border-radius:var(--r-lg); font-size:14px; line-height:1.9; background:var(--card2); border:1px solid var(--line);
  animation:fadeUp .25s var(--ease); overflow-wrap:anywhere}
.msg.me{align-self:flex-end; background:var(--grad); color:#fff; border:none; border-bottom-left-radius:var(--r-xs); box-shadow:var(--sh-sm)}
.msg.them{align-self:flex-start; border-bottom-right-radius:var(--r-xs)}
.msg .mtime{display:block; font-size:10px; opacity:.7; margin-top:2px}
.msg-input{position:sticky; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); display:flex; gap:8px; padding:10px 0;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); align-items:center}
.msg-input input{flex:1; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-full); padding:12px 18px; color:var(--txt); outline:none;
  transition:border-color var(--dur), box-shadow var(--dur)}
.msg-input input:focus{border-color:var(--acc); box-shadow:var(--ring)}
.msg-input button{width:48px; height:48px; border-radius:50%; border:none; background:var(--grad); color:#fff; font-size:20px; cursor:pointer; flex:none;
  box-shadow:var(--sh-glow); display:flex; align-items:center; justify-content:center; transition:transform .16s var(--spring)}
.msg-input button:active{transform:scale(.9)}
.msg-input button .nv-ic{transform:scaleX(-1)}

/* ---------- هم‌سلیقه ---------- */
.sim-card{display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:10px;
  box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur)}
@media (hover:hover){.sim-card:hover{transform:translateY(-2px); box-shadow:var(--sh)}}
.sim-pct{width:66px; height:66px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px; color:var(--txt); background:conic-gradient(var(--acc2) calc(var(--p)*1%), var(--card2) 0)}
.sim-pct b{background:var(--card); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 2px 8px rgba(0,0,0,.25)}

/* ---------- Music DNA ---------- */
.dna-bars{display:flex; align-items:flex-end; gap:6px; height:118px; padding:10px 4px 2px}
.dna-bar{flex:1; border-radius:7px 7px 3px 3px; min-height:8px; position:relative;
  background:var(--grad); box-shadow:0 0 14px rgba(168,85,247,.25); transition:height .6s var(--ease)}
.dna-labels{display:flex; gap:6px}
.dna-labels span{flex:1; font-size:9.5px; color:var(--mut); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- ادمین ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh-sm)}
.stat .stat-ic{width:38px; height:38px; border-radius:var(--r-sm); background:var(--grad-soft); color:var(--acc2);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.stat .stat-ic .nv-ic{width:20px; height:20px}
.stat b{font-size:23px; display:block; font-variant-numeric:tabular-nums; letter-spacing:-.3px}
.stat span{font-size:12px; color:var(--mut)}
.admin-table{width:100%; font-size:13px; border-collapse:collapse}
.admin-table th{text-align:start; font-size:11.5px; color:var(--mut2); font-weight:700; padding:8px 6px; border-bottom:1px solid var(--line2)}
.admin-table td{padding:11px 6px; border-bottom:1px solid var(--line)}
.admin-table tr{transition:background var(--dur)}
.admin-table tbody tr:hover{background:color-mix(in srgb, var(--txt) 3%, transparent)}

/* ---------- متفرقه ---------- */
.divider{height:1px; background:var(--line); margin:14px 0}
.link{color:var(--acc2); cursor:pointer; background:none; border:none; font-size:inherit; padding:0; font-weight:600}
.link:hover{text-decoration:underline}
.mut{color:var(--mut)} .small{font-size:12px}
.row{display:flex; align-items:center; gap:10px}
.grow{flex:1}
.center{text-align:center}
.mt{margin-top:12px} .mb{margin-bottom:12px}
.back-btn{position:sticky; top:var(--top-h); z-index:30; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(12px); padding:10px 4px; margin-bottom:6px}
.inline-audio{width:100%; accent-color:var(--acc)}
.searchbar{display:flex; gap:8px; margin-bottom:12px; position:sticky; top:var(--top-h); z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); padding:8px 0}
.searchbar input{flex:1; background:var(--card2); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; color:var(--txt); font-size:15px; outline:none;
  transition:border-color var(--dur), box-shadow var(--dur)}
.searchbar input:focus{border-color:var(--acc); box-shadow:var(--ring)}
.suggest{position:absolute; top:100%; right:0; left:0; background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-sm); z-index:30; overflow:hidden; box-shadow:var(--sh-lg)}
.suggest button{display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; padding:12px 14px; text-align:start; cursor:pointer; font-size:14px; border-bottom:1px solid var(--line); transition:background var(--dur)}
.suggest button:hover{background:color-mix(in srgb, var(--txt) 5%, transparent)}
.suggest button:last-child{border-bottom:none}
.hist-head{display:flex; align-items:center; justify-content:space-between; margin:14px 2px 6px}
.hist-head b{font-size:13.5px}
.switch{position:relative; width:48px; height:28px; flex:none; cursor:pointer}
.switch input{opacity:0; width:0; height:0; position:absolute}
.switch i{position:absolute; inset:0; border-radius:var(--r-full); background:var(--card3); transition:background var(--dur); display:block}
.switch i::after{content:''; position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:var(--sh-sm); transition:transform var(--dur) var(--spring)}
.switch input:checked + i{background:var(--grad)}
.switch input:checked + i::after{transform:translateX(-20px)}
.set-row{display:flex; align-items:center; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line)}
.set-row .meta{flex:1; min-width:0}
.set-row .meta b{font-size:14px; display:block}
.set-row .meta span{font-size:12px; color:var(--mut); line-height:1.8; display:block}

@media (min-width:760px){
  #view{padding-top:22px}
  .grid2{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}
.sheet h3{margin:4px 4px 12px; font-size:16.5px; font-weight:800}
.sheet .sheet-sub{color:var(--mut); line-height:2; font-size:13.5px; margin:0 4px}
.msg-badge-off{font-size:10px; color:var(--mut2); font-weight:700}
.ic-in{display:inline-flex; vertical-align:-4px; margin-inline-end:5px; color:var(--acc2)}
/* ظاهر-۶: وقتی مینی‌پلیر فعال است، آخر محتوا و اینپوت پیام زیر آن نمی‌روند */
body.has-player #view{padding-bottom:calc(var(--nav-h) + 108px)}
body.has-player .msg-input{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 78px)}
/* ظاهر-۷: حالت بافرینگ — نوار پیشرفت و دکمه‌های پخش می‌تپند */
body.is-buffering #mpProgFill{animation:bufPulse 1s ease-in-out infinite}
body.is-buffering .mp-play, body.is-buffering .fp-play, body.is-buffering .post.playing .post-playbtn{animation:bufPulse 1.1s ease-in-out infinite}
@keyframes bufPulse{0%,100%{opacity:1}50%{opacity:.4}}
.ic-in .nv-ic{width:18px; height:18px}
h3 .ic-in{vertical-align:-3px}
.back-btn .nv-ic{width:22px; height:22px}
.hcard.featured{flex-basis:196px}
.hcard.featured img{width:196px;height:196px}
/* ===== فاز ۲ پنل: صف نظارت پرونده‌محور ===== */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--r-full); border:1px solid var(--line); color:var(--mut); white-space:nowrap}
.pill .nv-ic{width:13px; height:13px}
.pill.st-open{color:var(--rose); border-color:color-mix(in srgb, var(--rose) 45%, transparent)}
.pill.st-reviewing{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent)}
.pill.st-resolved{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent)}
.pill.st-dismissed{color:var(--mut2)}
.pill.sla-bad{color:#fff; background:var(--red); border-color:transparent}
.pill.sla-warn{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 55%, transparent)}
.pill.prio{color:var(--acc2); border-color:color-mix(in srgb, var(--acc) 45%, transparent)}
.case-card{cursor:pointer}
.case-card:active{transform:scale(.99)}
.case-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.case-acts .btn{min-height:44px}
.case-acts .btn.suggested{box-shadow:var(--ring); border-color:var(--acc)}
.ctx-box{background:var(--card2); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:10px 0}
.ctx-box audio{width:100%; margin-top:8px; accent-color:var(--acc)}
.thread-it{padding:7px 9px; border-radius:var(--r-sm); font-size:13px; line-height:1.9}
.thread-it.tgt{background:color-mix(in srgb, var(--acc) 13%, transparent); border:1px solid color-mix(in srgb, var(--acc) 35%, transparent)}
.cat-pick{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px}
.sanc-row{border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:10px; background:var(--card)}
.appeal-btn{margin-top:8px}
/* ===== جلسه ۱۲ — یکدست‌سازی دکمه دنبال‌کردن (گسترش الگوی جلسه ۱۰ به همه نمونه‌ها) ===== */
.post-head .btn.small,
.urow .btn.small,
.sim-card .btn.small,
.pl-hero #plFollow{
  min-height:44px; padding:6px 18px; border-radius:var(--r-full);
  box-shadow:0 6px 20px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.3);
  flex-shrink:0;
}
.post-head .btn.small:active,
.urow .btn.small:active,
.sim-card .btn.small:active,
.pl-hero #plFollow:active{transform:scale(.94)}
.post-head .btn.small.ghost,
.urow .btn.small.ghost,
.sim-card .btn.small.ghost,
.pl-hero #plFollow.ghost{
  background:color-mix(in srgb, var(--card2) 70%, transparent);
  color:var(--mut); border-color:var(--line2); box-shadow:none;
}
.post-head .btn.small .nv-ic,
.urow .btn.small .nv-ic,
.sim-card .btn.small .nv-ic{width:16px; height:16px}