/* Register --hue as an animatable number so the WHOLE app (every accent,
     gradient, glow + the ambient mesh) morphs smoothly when a new song's
     real cover colour is applied. */
  @property --hue { syntax: '<number>'; inherits: true; initial-value: 265; }
  /* ⚠ اینجا `transition: --hue .9s` بود و ریشهٔ چشمک و پرشِ صفحه.
     --hue یک custom property ثبت‌شده و ارث‌بر است؛ انیمیت‌کردنش یعنی
     مرورگر در هر فریمِ ۰٫۹ ثانیه باید استایلِ کلِ درخت را دوباره حساب کند.
     اندازه‌گیریِ زنده: بی‌کار ۱۲۱fps با بدترین فریم ۹ms، ولی حینِ ترانزیشن
     ۵۹fps با فریمِ ۵۸ms — یعنی نصفِ فریم‌ها می‌افتاد، آن هم روی هر تعویضِ
     آهنگ. همان تغییرِ رنگ بدونِ ترانزیشن: ۱۲۰fps.
     حالا مقدارِ CSS یک‌باره می‌پرد (یک recalc) و نرمیِ رنگ را بومِ محیطی
     می‌دهد که در _setHue با JS نرم می‌شود و ذاتاً هر فریم رندر می‌شود. */
  /* ═══════════════════════════════════════════════════════════════
     شب‌تاب — SHABTĀB v1.0 · زبانِ طراحیِ هارمونیا
     خویشاوندِ شبانهٔ Dawn Veil (گریتیوا).

     اصلِ واحد: رابط، خودش نور ندارد. تنها منبعِ نور، خودِ موسیقی است.
     یعنی کروم کاملاً بی‌رنگ است و هر رنگی که دیده می‌شود از --hue
     می‌آید، و --hue از کاورِ آهنگِ در حالِ پخش استخراج می‌شود.
     رنگِ ثابتِ برند وجود ندارد.
     ═══════════════════════════════════════════════════════════════ */
  :root{
    --hue:174;

    /* زمین: خاکستریِ خنثای واقعی. عمداً سرمه‌ای/بنفش نیست. */
    --void:#08090B; --bg:#0B0D10; --surface:#14171C; --raised:#1B1F26; --raised-2:#232833;

    /* مرکب: سفیدِ گرمِ کاغذی — تنها ژنِ به‌ارث‌رسیده از Dawn Veil */
    --ink:#EFE9DC; --muted:#96938C; --muted2:#63656B;

    /* تابش: تنها کروماییِ مجاز */
    --accent:hsl(var(--hue) 78% 64%); --accent-d:hsl(var(--hue) 70% 46%);
    --emit-veil:hsl(var(--hue) 60% 50% / .10);
    --emit-glow:hsl(var(--hue) 80% 55% / .22);

    /* معنایی: مستقل از --hue، چون وضعیت نباید با کاور عوض شود */
    --live:#4FB477;
    --gold:#D8A13A; --gold-line:rgba(216,161,58,.28); --gold-dim:rgba(216,161,58,.14);

    /* سطح‌های شیشه‌ای حالا خنثی‌اند، نه کرمِ گرم */
    --glass:rgba(255,255,255,.035); --glass-line:#242932;
    --card:var(--surface); --fg:var(--ink);

    /* زبانِ فرم — سه شعاع، هرکدام یک معنا. ترکیبشان ممنوع:
       slab=داده · card=محتوا · pill=کنش. مقیاسِ قدیم برای سازگاری می‌ماند. */
    --r-slab:4px; --r-card:18px;
    --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;

    --shadow-card:0 10px 30px rgba(0,0,0,.34); --shadow-pop:0 18px 50px rgba(0,0,0,.5);
    --shadow-glow:0 12px 34px hsl(var(--hue) 70% 50% / .16);

    --rail-w:238px; --bar-h:86px;
    /* لاله‌زار حذف شد (حسِ پوسترِ بازاری). وزیرمتن تا وزنِ ۷۰۰ self-host
       است؛ نمایش با ۷۰۰ + tracking تنگ‌تر ساخته می‌شود، نه ۸۰۰. */
    --serif:'Vazirmatn',system-ui,sans-serif;
    --display:'Vazirmatn',system-ui,sans-serif;
    --mono:ui-monospace,'SF Mono',Menlo,monospace;
  }
  html[lang="fa"]{--serif:'Vazirmatn',system-ui,sans-serif;}
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  body{font-family:'Inter','Vazirmatn',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);
    overflow:hidden;-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none;} button{font-family:inherit;color:inherit;}
  ::-webkit-scrollbar{width:10px;} ::-webkit-scrollbar-thumb{background:#ffffff16;border-radius:8px;border:3px solid transparent;background-clip:content-box;}
  ::-webkit-scrollbar-thumb:hover{background:#ffffff2e;background-clip:content-box;}

  #ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.9;transition:opacity .6s;}
  .veil{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(7,5,9,.5) 78%, var(--bg) 100%);}

  .shell{position:relative;z-index:2;display:grid;grid-template-columns:var(--rail-w) 1fr;height:100vh;height:100dvh;}

  /* ---- left rail ---- */
  .rail{display:flex;flex-direction:column;gap:6px;padding:18px 12px 14px;min-height:0;
    background:linear-gradient(180deg,rgba(13,10,18,.55),rgba(8,6,11,.25));border-right:1px solid var(--glass-line);}
  .brand2{display:flex;align-items:center;gap:11px;padding:6px 8px 14px;}
  .glyph{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:none;
    background:conic-gradient(from .25turn, hsl(var(--hue) 85% 65%), hsl(calc(var(--hue) + 60) 85% 62%), hsl(var(--hue) 85% 65%));
    box-shadow:0 6px 22px hsl(var(--hue) 80% 50% / .5);color:var(--void);font-weight:800;font-size:18px;animation:spin 26s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .brandname{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.3px;}
  .nav2{display:flex;flex-direction:column;gap:2px;}
  .navitem{display:flex;align-items:center;gap:15px;width:100%;background:none;border:none;color:var(--muted);
    font-size:15px;font-weight:700;padding:10px 12px;border-radius:9px;cursor:pointer;transition:.15s;text-align:left;}
  .navitem:hover{color:var(--ink);background:rgba(255,255,255,.05);} .navitem.on{color:var(--ink);background:rgba(255,255,255,.07);}
  .navitem .ic{width:22px;text-align:center;font-size:18px;}
  .libpanel{margin-top:14px;flex:1;min-height:0;display:flex;flex-direction:column;background:rgba(255,255,255,.018);
    border:1px solid var(--glass-line);border-radius:12px;overflow:hidden;}
  .libhead{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px;color:var(--muted);font-weight:700;font-size:13px;}
  .libadd{background:none;border:none;color:var(--muted2);font-size:18px;cursor:pointer;line-height:1;} .libadd:hover{color:var(--ink);}
  .liblist{overflow-y:auto;flex:1;padding:0 6px 8px;}
  .libhint{color:var(--muted2);font-size:13px;line-height:1.5;padding:10px 10px 16px;}
  .librow{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:.12s;}
  .librow:hover{background:var(--glass);}
  .libic{width:44px;height:44px;border-radius:7px;flex:none;display:grid;place-items:center;font-weight:800;color:rgba(255,255,255,.92);font-size:16px;overflow:hidden;}
  .libtx{min-width:0;} .libtx .libnm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .libtx .libsub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rail .me{margin-top:12px;padding:0 4px;}
  .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-weight:800;font-size:15px;
    background:conic-gradient(from 0deg, hsl(var(--hue) 80% 62%), hsl(calc(var(--hue) + 80) 80% 60%));color:var(--void);border:none;}

  /* ---- main scroll ---- */
  .main{position:relative;overflow:hidden;}
  .topbar{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;gap:14px;padding:18px 34px;
    transition:.25s;pointer-events:none;}
  .topbar>*{pointer-events:auto;}
  .topbar.solid{background:rgba(8,6,11,.62);backdrop-filter:blur(18px);border-bottom:1px solid var(--glass-line);}
  .searchwrap{position:relative;display:flex;align-items:center;gap:6px;width:min(46vw,560px);
    background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;
    padding:5px 6px 5px 42px;backdrop-filter:blur(10px);transition:.18s;}
  .searchwrap:focus-within{border-color:hsl(var(--hue) 70% 60% / .6);background:rgba(255,255,255,.07);}
  .searchwrap .si{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted2);}
  .search{flex:1;min-width:0;background:none;border:none;border-radius:0;
    padding:7px 4px;color:var(--ink);font-size:14px;outline:none;}
  .search::placeholder{color:var(--muted2);}
  .s-clear{flex:none;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.10);color:var(--muted);font-size:12px;line-height:1;}
  .s-clear:hover{color:var(--ink);background:rgba(255,255,255,.18);}
  .topbar .sp{flex:1;}
  .upbtn{background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);border-radius:999px;padding:10px 18px;
    font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(10px);transition:.16s;white-space:nowrap;}
  .upbtn:hover{border-color:hsl(var(--hue) 60% 55% / .6);background:rgba(255,255,255,.08);}

  .scroll{height:100vh;height:100dvh;overflow-y:auto;padding:0 0 150px;
  /* نوارِ جستجو position:absolute روی همین ناحیه است؛ بدونِ این فضا، بالای
     هر نما دائماً زیرش می‌ماند و هرچه با اسکرول از زیرش رد شود دیده نمی‌شود. */
  padding-top:78px;scroll-padding-top:78px;}

  /* ---- HERO STAGE ---- */
  /* the topbar is absolutely positioned (~76px tall) over this scroller — the
     hero must clear it or the greeting/kicker line sits under the search box */
  .stage{display:flex;align-items:center;padding:96px 56px 8px;position:relative;}
  .p-icon.on{color:hsl(var(--hue) 85% 70%);}
  /* acoustic readout (BPM / Camelot / key) + DJ mix-mode chips */
  .np-aco{font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;
    color:hsl(var(--hue) 70% 72%);opacity:.92;margin:2px 0 6px;min-height:14px;}
  .np-psyche{max-width:520px;}
  .ps-card{background:hsl(var(--hue) 45% 20% / .3);border:1px solid hsl(var(--hue) 50% 55% / .22);border-radius:14px;padding:12px 14px;margin:4px 0 8px;text-align:start;animation:fadeUp .5s;}
  .ps-feel{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:5px;}
  .ps-vibe{font-size:13px;line-height:1.65;color:var(--muted);}
  .ps-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
  .ps-tag{font-size:11px;font-weight:700;color:hsl(var(--hue) 85% 78%);background:hsl(var(--hue) 60% 50% / .16);border:1px solid hsl(var(--hue) 60% 55% / .3);border-radius:999px;padding:3px 9px;}
  .ps-when{font-size:11.5px;color:var(--muted2);margin-top:8px;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .mixmodes{display:inline-flex;gap:4px;align-items:center;}
  .mixmodes .mm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--muted);
    border-radius:999px;padding:3px 9px;font-size:11px;cursor:pointer;transition:.15s;}
  .mixmodes .mm:hover{color:var(--ink);}
  .mixmodes .mm.on{background:hsl(var(--hue) 80% 60% / .22);border-color:hsl(var(--hue) 80% 65% / .5);color:hsl(var(--hue) 90% 82%);}
  .stage-idle{max-width:980px;width:100%;}
  /* uppercase + wide tracking are Latin typographic devices — they do nothing
     for Persian except break the letter joins, so only apply them in EN */
  .stage-idle .kicker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;margin-bottom:12px;}
  html[lang="en"] .stage-idle .kicker{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;}
  .stage-idle .kicker .dot{width:7px;height:7px;border-radius:50%;background:#42e29b;box-shadow:0 0 10px #42e29b;}
  .stage-idle h1,.stage-idle h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:1;margin:0;
    letter-spacing:-1px;}
  .stage-idle h1 em{font-style:italic;font-weight:500;
    background:linear-gradient(100deg,hsl(var(--hue) 90% 78%),hsl(calc(var(--hue) + 70) 88% 72%));
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  .stage-idle .sub{display:none;}
  .aibar{display:flex;align-items:center;gap:10px;max-width:760px;margin:20px 0 12px;padding:6px 6px 6px 16px;
    background:rgba(255,255,255,.05);border:1px solid hsl(var(--hue) 60% 60% / .35);border-radius:999px;
    box-shadow:0 0 0 4px hsl(var(--hue) 80% 50% / .08), 0 14px 40px rgba(0,0,0,.4);backdrop-filter:blur(12px);}
  .ai-spark{color:var(--accent);font-size:16px;}
  .ai-input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:15px;}
  .ai-input::placeholder{color:var(--muted2);}
  .ai-go{border:none;cursor:pointer;border-radius:999px;padding:10px 20px;font-weight:700;font-size:14px;color:var(--void);
    background:linear-gradient(135deg,hsl(var(--hue) 90% 72%),hsl(calc(var(--hue) + 50) 86% 66%));}
  .ai-go:hover{filter:brightness(1.08);}
  .ai-radio{border:1px solid var(--glass-line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;
    border-radius:999px;padding:10px 16px;font-weight:600;font-size:13px;white-space:nowrap;}
  .ai-radio:hover{border-color:hsl(var(--hue) 60% 55% / .6);}
  .ai-result{max-width:620px;font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.5;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .ai-result b{color:var(--ink);} .ai-result .save{border:1px solid var(--glass-line);background:none;color:var(--accent);
    cursor:pointer;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;}
  .ai-result .save:hover{background:hsl(var(--hue) 60% 50% / .12);}
  @media(max-width:560px){ .aibar{flex-wrap:wrap;border-radius:18px;} .ai-radio{flex:1;} }
  .moodbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:820px;margin:0 0 18px;}
  .mood-lbl{color:var(--muted2);font-size:13px;margin-right:4px;}
  .mchip{border:1px solid var(--glass-line);background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer;
    border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;transition:all .2s;}
  .mchip:hover{border-color:hsl(var(--hue) 60% 60% / .6);background:hsl(var(--hue) 60% 50% / .12);}
  .mchip.on{background:hsl(var(--hue) 70% 55%);color:var(--void);border-color:transparent;box-shadow:0 4px 16px hsl(var(--hue) 70% 50% / .4);}
  .smart-toggle{margin-left:auto;border:1px solid hsl(var(--hue) 55% 55% / .45);background:hsl(var(--hue) 60% 50% / .12);
    color:var(--ink);cursor:pointer;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700;transition:all .2s;}
  .smart-toggle.on{background:hsl(var(--hue) 70% 55%);color:var(--void);border-color:transparent;box-shadow:0 4px 16px hsl(var(--hue) 70% 50% / .4);}
  /* margin-right در RTL فاصله را سمتِ اشتباه می‌گذارد و نقطه به متن می‌چسبد */
  .smart-toggle::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-inline-end:7px;vertical-align:middle;opacity:.85;}
  @media(max-width:560px){ .moodbar{gap:6px;} .smart-toggle{margin-left:0;} }
  :focus-visible{ outline:2px solid hsl(var(--hue) 85% 66%); outline-offset:2px; border-radius:7px; }
  *:focus:not(:focus-visible){ outline:none; }
  .statline{display:flex;gap:30px;}
  .statline .st b{font-family:var(--serif);font-size:30px;font-weight:600;display:block;}
  .statline .st span{color:var(--muted2);font-size:12px;letter-spacing:1px;text-transform:uppercase;}

  /* (.stage-live / .stage.playing removed — see the note in the markup) */
  .disc-wrap{position:relative;flex:none;width:300px;height:300px;}
  #disc{position:absolute;inset:34px;border-radius:50%;box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
    animation:spin 18s linear infinite;}
  .stage.paused #disc{animation-play-state:paused;}
  #viz{position:absolute;inset:0;width:300px;height:300px;}
  .live-meta{min-width:0;flex:1;}
  .live-meta .now{color:var(--accent);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px;
    display:flex;align-items:center;gap:9px;}
  .live-meta .now .eq{display:inline-flex;gap:2px;align-items:flex-end;height:13px;}
  .live-meta .now .eq i{width:3px;background:var(--accent);border-radius:2px;animation:eqb .9s ease-in-out infinite;}
  .live-meta .now .eq i:nth-child(2){animation-delay:-.45s;} .live-meta .now .eq i:nth-child(3){animation-delay:-.2s;}
  @keyframes eqb{0%,100%{height:3px;}50%{height:13px;}}
  @keyframes eq{0%,100%{height:3px;}50%{height:14px;}}
  .stage.paused .eq i{animation-play-state:paused;}
  .live-meta h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,60px);line-height:1;margin:0 0 14px;letter-spacing:-1px;}
  .live-meta .by{font-size:18px;color:var(--muted);margin-bottom:26px;}
  .live-meta .by b{color:var(--ink);font-weight:600;cursor:pointer;} .live-meta .by b:hover{color:var(--accent);}
  .transport{display:flex;align-items:center;gap:22px;margin-bottom:20px;}
  .transport button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:19px;transition:.16s;display:grid;place-items:center;}
  .transport button:hover{color:var(--ink);transform:scale(1.08);} .transport .tog.on{color:var(--accent);}
  .transport .big{width:62px;height:62px;border-radius:50%;font-size:23px;color:var(--void);
    background:linear-gradient(135deg,hsl(var(--hue) 90% 72%),hsl(calc(var(--hue) + 50) 86% 66%));
    box-shadow:0 12px 34px hsl(var(--hue) 85% 50% / .5);}
  .transport .big:hover{transform:scale(1.06);}
  .seekrow{display:flex;align-items:center;gap:14px;max-width:560px;}
  .seekrow .t{font-size:12px;color:var(--muted2);width:42px;font-variant-numeric:tabular-nums;}
  .bar{flex:1;height:6px;background:rgba(255,255,255,.13);border-radius:4px;position:relative;cursor:pointer;}
  .bar .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;background:linear-gradient(90deg,var(--accent-d),var(--accent));}
  .bar .knob{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);
    opacity:0;transition:.15s;box-shadow:0 2px 8px rgba(0,0,0,.5);} .bar:hover .knob{opacity:1;}
  .live-extra{display:flex;align-items:center;gap:18px;margin-top:22px;color:var(--muted2);font-size:13px;}
  .live-extra button{background:none;border:1px solid var(--glass-line);color:var(--muted);border-radius:999px;padding:8px 16px;
    cursor:pointer;font-size:13px;font-weight:600;transition:.16s;display:inline-flex;align-items:center;gap:7px;}
  .live-extra button:hover{color:var(--ink);border-color:hsl(var(--hue) 60% 55% / .6);}
  .live-extra button.on{color:var(--accent);border-color:hsl(var(--hue) 70% 60% / .5);}
  .vol{width:108px;height:5px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.16);border-radius:3px;outline:none;cursor:pointer;}
  .vol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;}
  .vol::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:#fff;}

  /* ---- shelves ---- */
  .section{padding:8px 56px;}
  .sec-h{display:flex;align-items:baseline;gap:14px;margin:34px 0 4px;}
  .sec-h h3{font-family:var(--serif);font-weight:600;font-size:27px;margin:0;letter-spacing:-.4px;}
  .sec-h .meta{color:var(--muted2);font-size:13px;}
  .shelf{display:grid;grid-auto-flow:column;grid-auto-columns:188px;gap:22px;overflow-x:auto;padding:18px 0 8px;scroll-snap-type:x proximity;
  /* یک ردیفِ کارت را از قبل رزرو کن: قفسه با «هنوز چیزی نیست» ۱۰۲ پیکسل بود و
     پر که می‌شد ۲۸۴ — یعنی هر بار همهٔ صفحه ۱۸۲ پیکسل می‌پرید. قفسه‌های واقعاً
     خالی از قبل display:none می‌شوند، پس این رزرو جای هدر نمی‌دهد. */
  min-height:284px;}
  .shelf::-webkit-scrollbar{height:8px;}
  .card{cursor:pointer;scroll-snap-align:start;transition:.2s;}
  .card .frame{position:relative;width:188px;height:188px;border-radius:16px;overflow:hidden;
    box-shadow:0 16px 40px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
  .card:hover .frame{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px hsl(var(--hue) 70% 60% / .25),0 18px 50px hsl(var(--hue) 80% 45% / .28);}
  .card .frame img{width:100%;height:100%;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
  .card:hover .frame img{transform:scale(1.07);}
  .card:hover .ct{color:hsl(var(--hue) 70% 82%);}
  /* روی موبایل hover وجود ندارد، پس دکمه‌های کارت آنجا همیشه دیده می‌شوند
     (کم‌رنگ‌تر) — وگرنه ۷۵٪ مخاطب که اندروید است هیچ‌وقت آن‌ها را نمی‌بیند. */
  .card .add{position:absolute;right:66px;bottom:12px;width:38px;height:38px;border-radius:50%;cursor:pointer;
    background:rgba(12,12,20,.72);border:1px solid var(--glass-line);color:var(--ink);font-size:17px;backdrop-filter:blur(8px);
    display:grid;place-items:center;opacity:0;transform:translateY(10px) scale(.9);transition:.22s;}
  .card:hover .add{opacity:1;transform:translateY(0) scale(1);}
  .fs-keep{display:flex;gap:10px;justify-content:center;margin-top:14px;}
  .fs-keep button{background:var(--glass);border:1px solid var(--glass-line);color:var(--muted);cursor:pointer;
    border-radius:999px;padding:9px 18px;font-family:inherit;font-size:13.5px;font-weight:600;transition:.16s;}
  .fs-keep button:hover{color:var(--ink);border-color:hsl(var(--hue) 60% 58% / .55);transform:translateY(-1px);}
  .fs-keep button.on{color:var(--void);border-color:transparent;
    background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));}
  .card .pin{position:absolute;right:12px;bottom:12px;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));color:var(--void);font-size:17px;
    display:grid;place-items:center;opacity:0;transform:translateY(10px) scale(.9);transition:.22s;box-shadow:0 10px 24px rgba(0,0,0,.5);}
  .card:hover .pin{opacity:1;transform:translateY(0) scale(1);}
  /* بعد از قانونِ hover، نه قبلش: با اولویتِ برابر، قانونِ بعدی برنده است.
     روی لمس hover وجود ندارد، پس دکمه‌ها باید همیشه دیده شوند. */
  @media(hover:none){ .card .pin{opacity:.92;transform:none;} .card .add{opacity:.85;transform:none;} }
  .card .rk{position:absolute;left:12px;top:10px;font-family:var(--serif);font-size:40px;font-weight:700;line-height:1;
    background:linear-gradient(155deg,#fff 32%,hsl(var(--hue) 88% 72%));-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 3px 12px rgba(0,0,0,.75));opacity:.97;}
  .card .ct{font-weight:600;font-size:15px;margin-top:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .card .ca{color:var(--muted);font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .shelf .empty{color:var(--muted2);font-size:14px;align-self:center;}

  /* ---- list ---- */
  .list{margin-top:10px;}
  .lrow{display:grid;grid-template-columns:28px 52px 1fr 120px 88px 132px;gap:16px;align-items:center;
    padding:8px 14px;border-radius:10px;transition:.14s;cursor:default;}
  .lrow:hover{background:var(--glass);}
  /* declutter: rating + add/reviews reveal on hover; like/plays/duration always shown */
  .lrow .rate,.lrow .end .more{opacity:0;transition:opacity .14s;}
  .lrow:hover .rate,.lrow:hover .end .more,.lrow.playing .rate{opacity:1;}
  .lrow .n{color:var(--muted2);font-size:14px;text-align:center;position:relative;font-variant-numeric:tabular-nums;}
  /* دکمهٔ واقعی، نه یک ▶ متنیِ کم‌رنگ — همان زبانِ بصریِ pin کارت‌ها */
  .lrow .n .p{position:absolute;inset:0;margin:auto;width:32px;height:32px;border-radius:50%;display:none;place-items:center;
    cursor:pointer;font-size:12px;color:var(--void);background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));
    box-shadow:0 6px 16px rgba(0,0,0,.5);}
  .lrow:hover .n .num{opacity:0;} .lrow:hover .n .p{display:grid;}
  .lrow .th{width:52px;height:52px;border-radius:10px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.4);}
  .lrow .th img{width:100%;height:100%;display:block;}
  .lrow .ti{min-width:0;}
  .lrow .ti .t{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lrow .ti .a{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lrow .ti .a .al{cursor:pointer;} .lrow .ti .a .al:hover{color:var(--ink);text-decoration:underline;}
  .lrow .album{color:var(--muted2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lrow .rate{display:flex;align-items:center;gap:9px;}
  .stars{display:flex;gap:1px;} .star{cursor:pointer;color:#ffffff20;font-size:14px;transition:.1s;} .star:hover{transform:scale(1.3);} .star.on{color:hsl(45 90% 62%);}
  .lrow .end{display:flex;align-items:center;justify-content:flex-end;gap:13px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;}
  .like{background:none;border:none;cursor:pointer;font-size:16px;color:var(--muted2);transition:.16s;} .like:hover{color:var(--ink);transform:scale(1.2);} .like.on{color:hsl(var(--hue) 85% 70%);}
  .end .more{background:none;border:none;cursor:pointer;color:var(--muted2);font-size:15px;} .end .more:hover{color:var(--ink);}
  .lrow.playing .t{color:var(--accent);} .lrow.playing .n .num{display:none;}
  .lrow .n .eq{display:none;gap:2px;align-items:flex-end;height:14px;justify-content:center;}
  .lrow.playing .n .eq{display:flex;} .lrow.playing:hover .n .eq{display:none;}
  .lrow .n .eq i{width:3px;background:var(--accent);border-radius:2px;animation:eq .9s ease-in-out infinite;}
  .lrow .n .eq i:nth-child(2){animation-delay:-.45s;}
  .noaudio{opacity:.45;}
  .empty{color:var(--muted2);font-size:14px;padding:16px 14px;}
  footer{color:var(--muted2);font-size:12px;text-align:center;padding:46px 0 10px;line-height:1.8;}
  footer .fw{font-family:var(--serif);color:var(--muted);font-size:15px;}

  /* ---- mini player ---- */
  /* persistent bottom player (Spotify-style 3-zone) */
  .player{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-template-columns:1fr minmax(380px,600px) 1fr;
    align-items:center;gap:18px;height:var(--bar-h);padding:0 18px;background:rgba(10,8,14,.86);backdrop-filter:blur(28px);
    border-top:1px solid var(--glass-line);}
  body:not(.no-player) .player.show{display:grid;}
  .p-left{display:flex;align-items:center;gap:13px;min-width:0;}
  .p-art{width:56px;height:56px;border-radius:9px;overflow:hidden;flex:none;background:#1a1626;box-shadow:0 6px 18px rgba(0,0,0,.4);}
  .p-art img{width:100%;height:100%;display:block;}
  .p-meta{min-width:0;} .p-meta .p-t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .p-meta .p-a{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
  .p-meta .p-a:hover{color:var(--ink);text-decoration:underline;}
  .p-center{display:flex;flex-direction:column;align-items:center;gap:8px;}
  .p-ctrls{display:flex;align-items:center;gap:20px;}
  .p-icon{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;transition:.15s;display:grid;place-items:center;line-height:1;}
  .p-icon:hover{color:var(--ink);transform:scale(1.1);} .p-icon.tog.on{color:var(--accent);}
  .p-play{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--void);font-size:15px;border:none;cursor:pointer;display:grid;place-items:center;transition:.12s;}
  .p-play:hover{transform:scale(1.07);}
  .p-seek{display:flex;align-items:center;gap:11px;width:100%;}
  .p-time{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums;width:34px;text-align:center;}
  .p-bar{flex:1;height:5px;background:rgba(255,255,255,.16);border-radius:3px;position:relative;cursor:pointer;}
  .p-bar:hover{height:7px;} .p-bar .p-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--ink);}
  .p-bar:hover .p-fill{background:var(--accent);}
  .p-bar .p-knob{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);left:0;opacity:0;transition:opacity .12s;}
  .p-bar:hover .p-knob{opacity:1;}
  .p-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;}
  .p-vol{width:90px;height:5px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.16);border-radius:3px;outline:none;cursor:pointer;}
  .p-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;}
  .p-vol::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#fff;}

  /* ---- mobile bottom nav ---- */
  .mobnav{display:none;}
  /* ---- micro-interactions ---- */
  .section{animation:vfade .32s ease both;}
  @keyframes vfade{from{opacity:0;transform:translateY(8px);}}
  button{transition:transform .1s;} button:active{transform:scale(.94);}
  .card .frame,.p-play,.ai-go,.btn{will-change:transform;}
  @media (prefers-reduced-motion: reduce){ .section{animation:none;} *{transition:none!important;} }

  /* ---- modals ---- */
  .modal{position:fixed;inset:0;z-index:100;background:rgba(4,3,7,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;}
  .modal.hidden{display:none;}
  .mcard{position:relative;width:400px;max-width:100%;background:rgba(20,16,28,.94);border:1px solid var(--glass-line);
    border-radius:22px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
  .mcard.wide{width:480px;}
  .mtitle{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:18px;letter-spacing:-.4px;}
  .fld{width:100%;margin-bottom:12px;padding:13px 15px;border-radius:12px;border:1px solid var(--glass-line);background:#0c0a12;color:var(--ink);font-size:14px;outline:none;}
  .fld:focus{border-color:hsl(var(--hue) 65% 58%);}
  .btn{border:none;cursor:pointer;border-radius:999px;padding:13px;font-weight:700;font-size:14px;color:var(--void);width:100%;
    background:linear-gradient(135deg,hsl(var(--hue) 88% 72%),hsl(calc(var(--hue) + 50) 86% 66%));transition:.14s;}
  .btn:hover{filter:brightness(1.07);} .btn:active{transform:scale(.98);}
  .authbtn{border:none;cursor:pointer;border-radius:999px;padding:9px 18px;font-weight:700;font-size:13px;color:var(--void);background:#fff;}
  .err{color:hsl(350 90% 70%);font-size:12px;min-height:15px;margin-bottom:4px;}
  .authsub{color:var(--muted);font-size:13.5px;line-height:1.6;margin:-8px 0 16px;}
  .authsub:empty{display:none;}
  .fld[dir="ltr"]{text-align:left;}
  /* کلاسِ پنهان‌سازیِ عمومی. عمداً `.hidden` نیست: آن کلاس اینجا معنایش
     وابسته به المان است (`.fs.hidden` فقط محو می‌کند و باید در DOM بماند)، و
     یک قاعدهٔ سراسری آن انیمیشن‌ها را می‌شکست. */
  .u-hide{display:none !important;}
  .switch{text-align:center;font-size:13px;color:var(--muted);margin-top:15px;} .switch a{color:var(--accent);cursor:pointer;font-weight:600;}
  /* .mx was used on the comments and compose sheets and had NO rule at all —
     an unstyled inline button sitting in the card flow, effectively invisible.
     Both close affordances now share one look, and both are real tap targets. */
  .mclose,.mx{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:34px;height:34px;
    display:grid;place-items:center;border:1px solid var(--glass-line);background:rgba(255,255,255,.05);
    color:var(--muted);font-size:17px;line-height:1;border-radius:50%;cursor:pointer;transition:.15s;}
  .mclose:hover,.mx:hover{color:var(--ink);background:rgba(255,255,255,.12);}
  .who{display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:5px 6px 5px 14px;}
  .who .nm{font-weight:600;font-size:13px;} .who .out{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:16px;padding:0 6px;} .who .out:hover{color:var(--ink);}
  .rev-row{padding:12px 0;border-bottom:1px solid var(--glass-line);} .rev-row:last-child{border-bottom:none;}
  .rev-row .ru{font-weight:600;font-size:13px;} .rev-row .rb{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.5;}
  .alist .arow{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:10px;cursor:pointer;}
  .alist .arow:hover{background:var(--glass);} .alist .arow .th{width:46px;height:46px;border-radius:9px;overflow:hidden;} .alist .arow .th img{width:100%;height:100%;}
  .alist .arow .t{font-weight:600;font-size:14px;} .alist .arow .s{color:var(--muted);font-size:12px;}

  /* ---- waveform seek ---- */
  .wave{flex:1;position:relative;height:38px;cursor:pointer;}
  .wlayer{position:absolute;inset:0;display:flex;align-items:center;gap:2px;}
  .wlayer.fill{clip-path:inset(0 100% 0 0);}
  .wbar{flex:1;min-width:2px;border-radius:2px;background:rgba(255,255,255,.16);}
  .wlayer.fill .wbar{background:linear-gradient(180deg,var(--accent),var(--accent-d));}
  .wave:hover .wlayer.base .wbar{background:rgba(255,255,255,.24);}

  /* ---- fullscreen immersive ---- */
  .fs{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
    background:#05040a;overflow:hidden;opacity:1;transition:opacity .4s;}
  .fs.hidden{opacity:0;pointer-events:none;}
  /* Stage: a soft spotlight from above, tinted by the song's colour */
  .fs::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(58% 52% at 50% -4%, hsl(var(--hue) 75% 62% / .26), transparent 66%);}
  #fs-bg{position:absolute;inset:-12% -12% -12% -12%;width:124%;height:124%;object-fit:cover;filter:blur(90px) saturate(1.4);opacity:.5;transform:scale(1.1);}
  #fs-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .8s;pointer-events:none;}
  .fs.gl-on #fs-gl{opacity:1;} .fs.gl-on #fs-viz{opacity:0;}
  .fs-scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(74% 64% at 50% 38%, transparent 28%, rgba(4,3,9,.55) 72%, rgba(4,3,9,.9) 100%);}
  .fs-close{position:absolute;top:26px;right:30px;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-line);
    background:rgba(255,255,255,.06);color:var(--ink);font-size:18px;cursor:pointer;backdrop-filter:blur(10px);}
  .fs-close:hover{background:rgba(255,255,255,.13);}
  .fs-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:30px;width:min(620px,86vw);text-align:center;}
  .fs-stage{position:relative;width:440px;height:440px;max-width:78vw;}
  .fs-stage .fs-disc-wrap{position:absolute;inset:0;transition:opacity .35s;}
  .fs-pane{position:absolute;inset:0;border-radius:20px;overflow-y:auto;padding:16px;text-align:left;
    background:linear-gradient(180deg,hsl(var(--hue) 40% 14% / .55),rgba(8,6,12,.82));backdrop-filter:blur(16px);
    border:1px solid var(--glass-line);opacity:0;pointer-events:none;transition:opacity .35s;}
  .fs.tab-queue .fs-disc-wrap,.fs.tab-lyrics .fs-disc-wrap{opacity:0;pointer-events:none;}
  .fs.tab-queue #fs-queue,.fs.tab-lyrics #fs-lrc{opacity:1;pointer-events:auto;}
  .fs-pane-h{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin:2px 4px 12px;}
  #fs-lrc-lines{text-align:center;padding:26% 4px 40%;}
  #fs-lrc-lines .lrc-line{font-size:19px;line-height:1.7;}
  .fs-tabs{display:flex;gap:8px;justify-content:center;}
  .fs-tab{background:var(--glass);border:1px solid var(--glass-line);color:var(--muted);padding:8px 18px;border-radius:999px;
    cursor:pointer;font-size:13px;font-weight:600;transition:.18s;}
  .fs-tab:hover{color:var(--ink);}
  .fs-tab.on{color:var(--void);border-color:transparent;background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));}
  .fs-disc-wrap{position:relative;width:440px;height:440px;max-width:78vw;}
  #fs-disc{position:absolute;inset:40px;width:360px;height:360px;border-radius:50%;animation:spin 20s linear infinite;
    box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.07),0 0 90px hsl(var(--hue) 85% 55% / .45);}
  .fs.paused #fs-disc{animation-play-state:paused;}
  #fs-viz{position:absolute;inset:0;width:440px;height:440px;}
  .fs-meta{width:100%;}
  .fs-now{color:var(--accent);font-size:12px;letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;}
  .fs-meta h1,.fs-meta h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5.5vw,58px);line-height:1.02;margin:0 0 10px;letter-spacing:-1px;}
  .fs-meta .by{color:var(--muted);font-size:17px;margin-bottom:26px;}
  .fs-meta .by b{color:var(--ink);cursor:pointer;} .fs-meta .by b:hover{color:var(--accent);}
  .fs-times{display:flex;justify-content:space-between;font-size:12px;color:var(--muted2);margin:8px 2px 22px;font-variant-numeric:tabular-nums;}
  .fs .transport{justify-content:center;}
  @media(max-width:560px){ .fs-disc-wrap{width:300px;height:300px;} #fs-disc{inset:30px;width:240px;height:240px;} #fs-viz{width:300px;height:300px;} }

  /* ---- toasts ---- */
  .toasts{position:fixed;left:50%;bottom:108px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
  .toast{background:rgba(22,17,30,.94);border:1px solid var(--glass-line);border-radius:999px;padding:11px 22px;font-size:13px;font-weight:600;
    box-shadow:0 12px 34px rgba(0,0,0,.55);display:flex;align-items:center;gap:9px;animation:toastIn .3s ease, toastOut .35s 2.3s forwards;}
  .toast .ic{color:var(--accent);}
  @keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96);}} @keyframes toastOut{to{opacity:0;transform:translateY(8px);}}

  /* ---- entrance ---- */
  @keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  .lrow{animation:rise .45s both;}
  .expand{background:none;border:1px solid var(--glass-line);color:var(--muted);border-radius:999px;padding:8px 16px;cursor:pointer;font-size:13px;font-weight:600;transition:.16s;display:inline-flex;align-items:center;gap:7px;}
  .expand:hover{color:var(--ink);border-color:hsl(var(--hue) 60% 55% / .6);}
  .disc-wrap{cursor:pointer;}

  /* ---- skeleton loaders ---- */
  .skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));
    background-size:200% 100%;animation:shim 1.3s linear infinite;border-radius:8px;}
  @keyframes shim{to{background-position:-200% 0;}}

  /* real album artwork layered over the generative gradient — if the proxy 404s
     the <img> removes itself and the gradient + initial stays as the fallback */
  .albimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

  /* ---- AI mix card cover (4-up collage) ---- */
  .mixframe{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
  .mixframe img{width:100%;height:100%;display:block;object-fit:cover;}
  .mixframe .solid{background:linear-gradient(135deg,hsl(var(--hue) 60% 45%),hsl(calc(var(--hue) + 50) 60% 34%));}

  /* ---- genre chips + tags ---- */
  .genre-chips{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 6px;}
  .gchip{border:1px solid var(--glass-line);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;
    border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;transition:.15s;white-space:nowrap;}
  .gchip:hover{color:var(--ink);border-color:hsl(var(--hue) 55% 55% / .5);}
  .gchip.on{color:var(--void);background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));border-color:transparent;}
  .gtag{display:inline-block;font-size:11px;color:var(--muted2);border:1px solid var(--glass-line);border-radius:999px;padding:2px 9px;}

  /* ---- up-next queue ---- */
  .queue{position:fixed;top:0;right:0;bottom:0;width:344px;max-width:88vw;z-index:90;background:rgba(13,10,18,.92);
    backdrop-filter:blur(28px);border-left:1px solid var(--glass-line);transform:translateX(100%);
    transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;}
  .queue.show{transform:none;box-shadow:-24px 0 70px rgba(0,0,0,.55);}
  .qhead{display:flex;align-items:center;justify-content:space-between;padding:26px 22px 12px;}
  .qhead h3{font-family:var(--serif);font-size:23px;margin:0;letter-spacing:-.4px;}
  .qhead .x{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;} .qhead .x:hover{color:var(--ink);}
  .qlabel{color:var(--muted2);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;padding:16px 12px 6px;}
  .qlist{overflow-y:auto;flex:1;padding:0 12px 24px;}
  .qrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:11px;cursor:pointer;transition:.12s;}
  .qrow:hover{background:var(--glass);} .qrow.cur{background:hsl(var(--hue) 55% 32% / .26);}
  .qrow .qth{width:44px;height:44px;border-radius:9px;overflow:hidden;flex:none;} .qrow .qth img{width:100%;height:100%;}
  .qrow .qm{min-width:0;} .qrow .qm .t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .qrow.cur .qm .t{color:var(--accent);} .qrow .qm .a{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---- library view + liked hero ---- */
  .liked-hero{display:flex;align-items:flex-end;gap:26px;padding:96px 56px 14px;}
  /* موبایل: ردیفِ کاور+متن در ۳۷۵px فقط ~۳۷px برای متن می‌گذاشت — عنوان حرف‌به‌حرف
     عمودی می‌شکست و دکمه‌ها لهِ ستون می‌شدند. زیرِ ۶۴۰px ستونی و وسط‌چین می‌شود.
     (این هیرو مالِ ۴ صفحه است: کانال/محبوب‌ها/آلبوم/خواننده — همه با هم درست می‌شوند) */
  @media(max-width:640px){
    .liked-hero{flex-direction:column;align-items:center;text-align:center;gap:16px;padding:18px 16px 6px;}
    .liked-cover{width:172px;height:172px;}
    .liked-info{width:100%;}
    .liked-info h1,.liked-info h2{font-size:clamp(24px,8vw,34px);margin:6px 0 8px;}
    .liked-info>div{justify-content:center;}
  }
  .liked-cover{width:200px;height:200px;border-radius:18px;flex:none;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
    box-shadow:0 26px 64px rgba(0,0,0,.55);}
  .liked-cover img{width:100%;height:100%;display:block;} .liked-cover .solid{background:linear-gradient(135deg,hsl(var(--hue) 70% 55%),hsl(calc(var(--hue) + 60) 70% 42%));}
  .liked-info .kk{color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;}
  /* 82px swallowed the page on long album titles («Neither Angel Nor Devil (Na
     Fereshte am Na Sheytan)» ran three lines and pushed the cover off-balance) */
  .liked-info{min-width:0;}
  .liked-info h1,.liked-info h2{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.6vw,58px);margin:8px 0 12px;
    letter-spacing:-1px;line-height:1.04;overflow-wrap:anywhere;}
  .liked-info .cnt{color:var(--muted);font-size:14px;}
  .liked-empty{padding:60px 56px;color:var(--muted);font-size:16px;}
  .liked-empty button{margin-top:16px;}

  /* ---- profile ---- */
  .prof-hero{display:flex;align-items:flex-end;gap:26px;padding:96px 0 18px;}
  /* the initial had no centring at all — it sat in the corner of the circle,
     which in RTL put it half outside the avatar */
  .prof-av{width:140px;height:140px;border-radius:50%;flex:none;font-size:54px;font-weight:800;
    display:grid;place-items:center;overflow:hidden;line-height:1;
    background:conic-gradient(from .2turn,hsl(var(--hue) 80% 62%),hsl(calc(var(--hue) + 80) 80% 60%),hsl(var(--hue) 80% 62%));
    color:var(--void);box-shadow:0 20px 60px hsl(var(--hue) 70% 45% / .4);}
  .prof-id .kk{color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;}
  .prof-id h1,.prof-id h2{font-family:var(--serif);font-weight:700;font-size:clamp(40px,7vw,76px);margin:8px 0 8px;letter-spacing:-1.5px;line-height:.95;}
  .prof-since{color:var(--muted);font-size:14px;}
  .prof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin:18px 0 8px;}
  .pstat{background:var(--card);border-radius:14px;padding:18px;text-align:center;}
  .pstat b{font-family:var(--serif);font-size:30px;font-weight:600;display:block;}
  .pstat span{color:var(--muted2);font-size:12px;letter-spacing:.5px;}
  html[lang="en"] .pstat span{text-transform:uppercase;}
  /* five 130px-tall tiles at two-per-row filled two whole phone screens before
     you reached anything about your actual taste */
  @media(max-width:880px){
    /* موبایل: بلورهای زندهٔ همیشه-روشن (نوارِ پخش/تاپ‌بار) روی GPUهای ضعیف پرش می‌سازند —
       شیشه با آلفای پرتر، بدونِ بلور */
    .player{backdrop-filter:none;background:rgba(10,8,14,.95);}
    .topbar.solid{backdrop-filter:none;background:rgba(8,6,11,.9);}
    .prof-hero{gap:16px;align-items:center;}
    .prof-av{width:88px;height:88px;font-size:34px;}
    .prof-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px;}
    .pstat{padding:11px 6px;border-radius:12px;}
    .pstat b{font-size:20px;} .pstat span{font-size:10.5px;letter-spacing:0;}
  }
  .vibe-card{margin:26px 0;border-radius:20px;padding:30px;border:1px solid hsl(var(--hue) 55% 55% / .3);
    background:linear-gradient(135deg,hsl(var(--hue) 60% 16% / .5),rgba(20,16,28,.6));backdrop-filter:blur(10px);
    box-shadow:0 0 0 4px hsl(var(--hue) 80% 50% / .06);}
  #vibe-empty{text-align:center;} .vibe-spark{font-size:30px;color:var(--accent);margin-bottom:10px;}
  .vibe-pitch{font-size:16px;color:var(--muted);max-width:480px;margin:0 auto;line-height:1.5;}
  .vibe-arch{font-family:var(--serif);font-weight:700;font-size:clamp(30px,5vw,48px);letter-spacing:-.6px;
    background:linear-gradient(100deg,hsl(var(--hue) 90% 78%),hsl(calc(var(--hue) + 70) 88% 72%));
    -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px;}
  .vibe-blurb{font-size:16px;color:var(--ink);line-height:1.6;max-width:560px;margin-bottom:16px;}
  .vibe-traits{display:flex;flex-wrap:wrap;gap:9px;}
  .vibe-traits .tr{border:1px solid hsl(var(--hue) 55% 55% / .4);background:hsl(var(--hue) 60% 50% / .12);color:var(--ink);
    border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;}
  .vibe-mood{color:var(--muted);font-size:13px;margin-top:14px;}
  .vibe-sec{margin-top:20px;} .vibe-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:10px;}
  /* ── روان‌نگاره ── */
  .psych-sec{background:linear-gradient(180deg,hsl(var(--hue) 45% 14% / .38),hsl(var(--hue) 35% 9% / .2));border:1px solid hsl(var(--hue) 45% 45% / .16);border-radius:20px;padding:18px 18px 20px;}
  .psych-mood{font-size:15.5px;color:var(--ink);line-height:1.7;background:hsl(var(--hue) 60% 55% / .08);border-inline-start:3px solid hsl(var(--hue) 70% 60% / .6);border-radius:10px;padding:11px 14px;margin-bottom:18px;}
  .pinf{font-size:10px;color:var(--muted2);font-weight:500;text-transform:none;letter-spacing:0;}
  .pdims{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 20px;}
  .pdim-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
  .pdim-l{font-size:13.5px;font-weight:700;color:var(--ink);} .pdim-v{font-size:12px;font-weight:800;color:hsl(var(--hue) 85% 76%);}
  .pdim-t{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;}
  .pdim-t i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,hsl(var(--hue) 75% 55%),hsl(calc(var(--hue) + 45) 78% 60%));transition:width .8s cubic-bezier(.4,0,.2,1);}
  .pdim-s{font-size:11px;color:var(--muted2);margin-top:4px;}
  .psych-blk{margin-top:18px;} .psych-growth{margin-top:16px;font-size:14.5px;color:var(--ink);line-height:1.7;background:hsl(140 45% 45% / .1);border:1px solid hsl(140 45% 45% / .22);border-radius:12px;padding:11px 14px;}
  .mrow{display:flex;align-items:center;gap:12px;margin:7px 0;max-width:460px;}
  .mrow .mn{width:96px;font-size:13px;color:var(--ink);text-transform:capitalize;}
  .mrow .mbar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;}
  .mrow .mbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,hsl(var(--hue) 70% 55%),hsl(calc(var(--hue) + 40) 70% 60%));}
  .vibe-facets{display:flex;flex-wrap:wrap;gap:24px;margin-top:18px;}
  .facet{min-width:160px;}
  .top-genres{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px;max-width:560px;}
  .gbar{display:flex;align-items:center;gap:12px;}
  .gbar .gn{width:110px;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gbar .gt{flex:1;height:10px;background:#ffffff10;border-radius:6px;overflow:hidden;}
  .gbar .gt i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-d),var(--accent));}
  .gbar .gc{color:var(--muted2);font-size:12px;width:24px;text-align:right;}

  /* ---- rail now-playing dot ---- */
  .rib.np-on{position:relative;} .rib.np-on::after{content:'';position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}

  /* ---- synced lyrics ---- */
  .lyrics-view{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
    background:radial-gradient(120% 90% at 50% 0%, hsl(var(--hue) 45% 16% / .97), rgba(7,5,9,.99));
    animation:vfade .3s ease both;}  /* بلورِ ۳۴px پشتِ بک‌گراندِ مات نامرئی بود ولی هر فریم رندر می‌شد (پرش/چشمک موبایل) */
  .lyrics-view.hidden{display:none;}
  .lv-top{display:flex;align-items:center;justify-content:space-between;padding:22px 30px 8px;}
  .lv-title{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:-.3px;}
  .lv-artist{color:var(--muted);font-size:14px;margin-top:2px;}
  .lv-close{background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:16px;}
  .lv-scroll{flex:1;overflow-y:auto;padding:14vh 30px 28vh;scroll-behavior:smooth;}
  .lv-lines{max-width:760px;margin:0 auto;text-align:center;}
  .lrc-line{font-size:25px;line-height:1.65;font-weight:600;color:var(--muted2);opacity:.45;
    padding:5px 8px;border-radius:10px;cursor:pointer;transition:color .25s,opacity .25s,transform .25s;}
  .lrc-line:hover{opacity:.8;}
  .lrc-line .lt{display:inline-block;}
  .lrc-line .lx{display:block;font-size:.7em;font-weight:500;color:hsl(var(--hue) 35% 74%);opacity:.95;margin-top:5px;unicode-bidi:plaintext;}
  .lrc-line.on{opacity:1;transform:scale(1.04);filter:drop-shadow(0 2px 26px hsl(var(--hue) 80% 60% / .45));}
  /* word-level karaoke: each word lights in the cover hue as it's sung */
  .lrc-line.on .lt{color:var(--ink);}
  .lrc-line .lt .w{transition:color .16s ease, opacity .16s ease;}
  .lrc-line.on .lt .w{color:var(--muted2);opacity:.5;}
  .lrc-line.on .lt .w.lit{color:hsl(var(--hue) 96% 74%);opacity:1;text-shadow:0 1px 16px hsl(var(--hue) 90% 60% / .5);}
  /* fallback line-wipe when a line has no word spans */
  .lrc-line.on .lt:not(:has(.w)){
    background:linear-gradient(90deg,hsl(var(--hue) 95% 72%) var(--p,0%),var(--ink) var(--p,0%));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .lrc-line.on .lx{opacity:1;color:var(--muted2);}
  .lrc-line.plain{cursor:default;font-size:19px;font-weight:500;opacity:.7;color:var(--muted);}
  .lrc-tools{display:flex;gap:8px;justify-content:center;padding:6px 0 2px;}
  .lrc-tools .lt-chip{background:var(--glass);border:1px solid var(--glass-line);color:var(--muted);
    font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;transition:.18s;}
  .lrc-tools .lt-chip:hover{color:var(--ink);}
  .lrc-tools .lt-chip.on{background:hsl(var(--hue) 70% 55% / .22);border-color:hsl(var(--hue) 70% 60% / .5);color:var(--ink);}

  /* ---- conversational concierge ---- */
  .concierge{position:fixed;inset:0;z-index:62;display:flex;flex-direction:column;
    background:radial-gradient(120% 90% at 50% 0%, hsl(var(--hue) 45% 16% / .98), rgba(7,5,9,.995));
    animation:vfade .3s ease both;}  /* همان قصهٔ lyrics-view — بلورِ زندهٔ تمام‌صفحه حذف شد */
  .concierge.hidden{display:none;}
  .cg-top{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 10px;max-width:820px;width:100%;margin:0 auto;}
  .cg-title{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.3px;}
  .cg-sub{color:var(--muted);font-size:13px;margin-top:2px;}
  .cg-scroll{flex:1;overflow-y:auto;padding:10px 20px 16px;max-width:820px;width:100%;margin:0 auto;}
  .cg-msg{margin:10px 0;display:flex;}
  .cg-msg.me{justify-content:flex-end;}
  .cg-bub{max-width:80%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;}
  .cg-msg.me .cg-bub{background:hsl(var(--hue) 70% 55% / .22);border:1px solid hsl(var(--hue) 70% 60% / .42);color:var(--ink);border-bottom-right-radius:5px;}
  .cg-msg.ai .cg-bub{background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);border-bottom-left-radius:5px;}
  .cg-mix{margin-top:11px;display:flex;flex-direction:column;gap:6px;}
  .cg-play{align-self:flex-start;border:none;cursor:pointer;border-radius:999px;padding:9px 17px;font-weight:700;font-size:13px;color:var(--void);margin-bottom:4px;
    background:linear-gradient(135deg,hsl(var(--hue) 85% 66%),hsl(calc(var(--hue) + 40) 85% 62%));}
  .cg-play:hover{filter:brightness(1.08);}
  .cg-trk{font-size:12.5px;color:var(--muted);padding:1px 0;}
  .cg-input{display:flex;gap:10px;padding:14px 20px 22px;max-width:820px;width:100%;margin:0 auto;}
  .cg-input input{flex:1;background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:13px 18px;color:var(--ink);font-size:15px;outline:none;}
  .cg-input input:focus{border-color:hsl(var(--hue) 60% 55% / .6);}
  .cg-send{border:none;cursor:pointer;border-radius:999px;padding:0 22px;font-weight:700;color:var(--void);
    background:linear-gradient(135deg,hsl(var(--hue) 85% 66%),hsl(calc(var(--hue) + 40) 85% 62%));}
  .cg-typing{display:flex;gap:5px;padding:10px 4px;align-items:center;}
  .cg-typing span{width:7px;height:7px;border-radius:50%;background:hsl(var(--hue) 70% 65%);opacity:.5;animation:cgblink 1.2s infinite both;}
  .cg-typing span:nth-child(2){animation-delay:.2s;} .cg-typing span:nth-child(3){animation-delay:.4s;}
  @keyframes cgblink{0%,80%,100%{opacity:.3;transform:scale(.8);}40%{opacity:1;transform:scale(1.1);}}
  /* rich track cards inside a reply */
  .cg-cards{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .cg-card{background:rgba(255,255,255,.03);border:1px solid var(--glass-line);border-radius:14px;padding:8px;transition:.18s;}
  .cg-card:hover{border-color:hsl(var(--hue) 60% 55% / .5);background:rgba(255,255,255,.05);}
  .cg-cart{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1;}
  .cg-cart img,.cg-cart canvas,.cg-cart .thumb{width:100%;height:100%;object-fit:cover;display:block;}
  .cg-cplay{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:#fff;opacity:0;background:rgba(6,4,10,.34);transition:.18s;text-shadow:0 2px 14px rgba(0,0,0,.6);}
  .cg-cart:hover .cg-cplay{opacity:1;}
  .cg-cmeta{margin-top:7px;}
  .cg-ct{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cg-ca{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cg-cacts{display:flex;gap:6px;margin-top:7px;}
  .cg-cacts button{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--glass-line);color:var(--muted);border-radius:8px;padding:5px 0;cursor:pointer;font-size:12px;transition:.15s;}
  .cg-cacts button:hover{color:var(--ink);border-color:hsl(var(--hue) 60% 55% / .55);}
  .cg-status{font-size:12px;color:var(--dim,#8b8ba3);padding:6px 12px;font-style:italic;}
  .cg-note{align-self:center;color:hsl(var(--hue) 80% 72%);font-size:12.5px;font-weight:600;text-align:center;padding:7px 0;letter-spacing:.2px;}
  .cg-chips{display:flex;gap:8px;flex-wrap:wrap;padding:4px 20px 0;max-width:820px;width:100%;margin:0 auto;}
  .cg-chip{background:var(--glass);border:1px solid var(--glass-line);color:var(--muted);font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s;}
  .cg-chip:hover{color:var(--ink);border-color:hsl(var(--hue) 60% 55% / .6);}
  .cg-mic{flex:0 0 auto;width:46px;border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);border-radius:999px;cursor:pointer;font-size:16px;transition:.15s;}
  .cg-mic:hover{border-color:hsl(var(--hue) 60% 55% / .6);}
  .cg-mic.rec{background:hsl(0 75% 55% / .25);border-color:hsl(0 80% 60%);animation:cgrec 1s infinite;}
  @keyframes cgrec{0%,100%{box-shadow:0 0 0 0 hsl(0 80% 55% / .5);}50%{box-shadow:0 0 0 7px hsl(0 80% 55% / 0);}}

  /* ---- Auto-DJ pill ---- */
  .dj-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:104px;z-index:55;display:flex;align-items:center;gap:9px;
    background:rgba(12,9,18,.86);border:1px solid hsl(var(--hue) 70% 60% / .45);border-radius:999px;padding:8px 9px 8px 15px;
    backdrop-filter:blur(16px);box-shadow:0 8px 34px hsl(var(--hue) 80% 30% / .4);font-size:13px;color:var(--ink);}
  .dj-pill b{font-weight:700;letter-spacing:.2px;}
  .dj-pill .dj-x{color:var(--muted2);font-size:12px;}
  .dj-pill .dj-dot{width:8px;height:8px;border-radius:50%;background:hsl(var(--hue) 90% 62%);box-shadow:0 0 10px hsl(var(--hue) 90% 60%);animation:djpulse 1.4s ease-in-out infinite;}
  @keyframes djpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.7);}}
  /* the 28px circle is for the bare-emoji buttons of the Auto-DJ pill only —
     without the :not() it also squashed the radio menu's labelled rows into
     28px discs and every label overlapped the next */
  .dj-pill button:not(.rp-chip):not(.pm-i){background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:13px;}
  .dj-pill button:not(.rp-chip):not(.pm-i):hover{border-color:hsl(var(--hue) 70% 60% / .6);}
  /* radio pill: one labelled chip that opens a worded menu */
  .rp{padding:0;border-radius:999px;}
  .rp .rp-chip{display:flex;align-items:center;gap:7px;width:auto;height:auto;border-radius:999px;border:none;
    background:none;padding:8px 14px;font-family:inherit;font-size:13px;color:var(--ink);max-width:62vw;}
  .rp .rp-chip b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rp .rp-car{color:var(--muted2);font-size:14px;line-height:1;transition:transform .16s;}
  .rp.open .rp-car{transform:rotate(180deg);}
  .rp-menu{position:absolute;bottom:calc(100% + 10px);inset-inline-end:0;min-width:232px;
    background:rgba(14,10,20,.97);backdrop-filter:blur(22px);border:1px solid hsl(var(--hue) 60% 60% / .3);
    border-radius:16px;box-shadow:0 16px 55px rgba(0,0,0,.6);padding:7px;animation:pmdrop .18s;}
  .rp-h{color:var(--muted2);font-size:11px;letter-spacing:.4px;padding:6px 13px 7px;}
  .rp-menu .pm-i i{font-style:normal;}
  .rp-off{border-top:1px solid rgba(255,255,255,.08);margin-top:4px;padding-top:12px;border-radius:0 0 11px 11px;}
  .p-icon.on{color:hsl(var(--hue) 90% 70%);text-shadow:0 0 12px hsl(var(--hue) 90% 60% / .6);}
  .lv-empty{color:var(--muted2);text-align:center;font-size:16px;padding:30px;}
  .lv-src{text-align:center;color:var(--muted2);font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:10px 0 16px;}
  .p-icon.active{color:var(--accent);}

  /* ---- Browse / The Library page ---- */
  .browse-teaser{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;margin:6px 0 4px;
    padding:20px 24px;border-radius:16px;background:linear-gradient(120deg,hsl(var(--hue) 45% 18% / .5),var(--glass));
    border:1px solid var(--glass-line);font-size:16px;font-weight:600;transition:.2s;}
  .browse-teaser:hover{border-color:hsl(var(--hue) 60% 55% / .5);transform:translateY(-2px);box-shadow:0 16px 40px hsl(var(--hue) 80% 40% / .25);}
  .browse-teaser .bt-go{color:var(--accent);font-size:14px;}
  .browse-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding:26px 26px 22px;border-radius:20px;margin-bottom:16px;
    background:linear-gradient(135deg,hsl(var(--hue) 50% 20% / .55),hsl(calc(var(--hue) + 50) 45% 16% / .35),rgba(8,6,14,.6));
    border:1px solid var(--glass-line);backdrop-filter:blur(18px);}
  .browse-head .kk{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
  .browse-h1{font-family:var(--serif);font-size:clamp(30px,4vw,46px);line-height:1;margin:0;letter-spacing:-1px;}
  .browse-head .cnt{color:var(--muted);font-size:14px;margin-top:10px;}
  .browse-tools{display:flex;align-items:center;gap:10px;}
  .browse-search{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid var(--glass-line);
    border-radius:999px;padding:10px 16px;min-width:230px;}
  .browse-search span{color:var(--muted2);} .browse-search input{background:none;border:none;outline:none;color:var(--ink);font-size:14px;width:100%;}
  .bview{width:42px;height:42px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);color:var(--muted);font-size:16px;cursor:pointer;transition:.16s;}
  .bview:hover{color:var(--ink);} .bview.on{color:var(--void);border-color:transparent;background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));}
  .bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:6px 0 10px;}
  .bcard{cursor:pointer;}
  .bframe{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;box-shadow:0 14px 36px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
  .bframe img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
  .bcard:hover .bframe{transform:translateY(-7px);box-shadow:0 28px 56px rgba(0,0,0,.6),0 14px 44px hsl(var(--hue) 80% 45% / .3);}
  .bcard:hover .bframe img{transform:scale(1.07);}
  .bcard.noaudio .bframe{opacity:.5;}
  .bframe .pin{position:absolute;right:10px;bottom:10px;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));color:var(--void);font-size:16px;
    display:grid;place-items:center;opacity:0;transform:translateY(10px) scale(.9);transition:.22s;box-shadow:0 10px 24px rgba(0,0,0,.5);}
  .bcard:hover .bframe .pin{opacity:1;transform:translateY(0) scale(1);}
  .bct{font-weight:600;font-size:14px;margin-top:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bca{color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bcard:hover .bct{color:hsl(var(--hue) 70% 82%);}
  @media(max-width:880px){ .browse-hero{padding:18px;} .bgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;} .browse-search{min-width:150px;} }

  /* ---- Cosmos home hero (every song is a world) ---- */
  #cosmos{position:relative;margin:2px 0 30px;}
  .cosmos-stage{position:relative;height:min(72dvh,760px);min-height:460px;max-width:1080px;margin:0 auto;}
  .cosmos-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
    border:1px dashed hsl(var(--hue) 60% 60% / .14);pointer-events:none;transition:border-color 1.2s;}
 /* ── omnibox ── */
  .omni-ai{border:none;border-radius:999px;padding:7px 14px;flex:none;white-space:nowrap;cursor:pointer;font-size:12.5px;
    background:linear-gradient(120deg,hsl(var(--hue) 80% 58%),hsl(calc(var(--hue) + 60) 75% 55%));color:#fff;font-weight:600;
    box-shadow:0 4px 16px hsl(var(--hue) 80% 50% / .35);transition:transform .15s;}
  .omni-ai:hover{transform:translateY(-1px);}
  .omni-ai.ghost{background:rgba(255,255,255,.07);color:var(--muted);box-shadow:none;border:1px solid rgba(255,255,255,.1);}
  /* ── listen-together party ── */
  .party-panel{position:fixed;inset-inline-end:14px;bottom:110px;width:min(330px,92vw);max-height:min(64dvh,560px);z-index:60;
    display:flex;flex-direction:column;background:rgba(14,10,20,.92);backdrop-filter:blur(22px);
    border:1px solid hsl(var(--hue) 60% 60% / .25);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.55);overflow:hidden;}
  .pp-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07);}
  .pp-title{font-size:13.5px;} .pp-title b{font-weight:700;}
  .pp-code{margin-inline-start:7px;font-size:11px;letter-spacing:.12em;background:hsl(var(--hue) 70% 55% / .18);
    border:1px solid hsl(var(--hue) 70% 60% / .4);color:hsl(var(--hue) 80% 78%);border-radius:7px;padding:2px 8px;cursor:pointer;}
  .pp-x{background:none;border:none;color:var(--muted2);font-size:15px;cursor:pointer;}
  .pp-menu{border-bottom:1px solid rgba(255,255,255,.07);padding:5px;background:rgba(255,255,255,.025);}
  .pp-menu .pm-i{padding:9px 12px;font-size:12.5px;}
  .pm-i.danger{color:#ff8ba1;}
  .pp-members{display:flex;gap:6px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);}
  .pp-m{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);border-radius:999px;padding:3px 10px 3px 6px;font-size:11.5px;color:var(--ink);}
  .pp-m .av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#fff;}
  .pp-m .mkdj{background:none;border:1px solid rgba(255,255,255,.18);border-radius:6px;font-size:10px;cursor:pointer;
    padding:1px 4px;margin-inline-start:4px;opacity:.55;transition:.13s;}
  .pp-m .mkdj:hover{opacity:1;border-color:hsl(var(--hue) 70% 60% / .7);transform:scale(1.15);}
  .pp-chat{flex:1;overflow-y:auto;padding:10px 13px;display:flex;flex-direction:column;gap:7px;min-height:120px;}
  .pp-line{font-size:12.5px;line-height:1.5;word-break:break-word;}
  .pp-line .who{font-weight:700;color:hsl(var(--hue) 80% 74%);margin-inline-end:5px;}
  .pp-line.sys{color:var(--muted2);font-size:11.5px;text-align:center;}
  .pp-t{color:var(--muted2);font-size:10px;margin-inline-start:6px;direction:ltr;display:inline-block;
    background:rgba(255,255,255,.06);border-radius:6px;padding:1px 6px;vertical-align:1px;}
  .pp-em{font-size:17px;vertical-align:-2px;}
  .pp-reacts{display:flex;gap:3px;padding:6px 10px;border-top:1px solid rgba(255,255,255,.06);justify-content:center;}
  .pp-reacts button{background:none;border:none;font-size:17px;cursor:pointer;border-radius:8px;padding:3px 5px;transition:.12s;}
  .pp-reacts button:hover{transform:scale(1.3);background:rgba(255,255,255,.08);}
  .pp-inputrow{display:flex;gap:6px;padding:8px 10px 10px;}
  .pp-inputrow input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;
    padding:8px 14px;color:var(--ink);font-size:12.5px;outline:none;font-family:inherit;}
  .pp-send{border:none;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:15px;color:#fff;
    background:linear-gradient(120deg,hsl(var(--hue) 80% 58%),hsl(calc(var(--hue) + 60) 75% 55%));}
  .party-fab{position:fixed;inset-inline-end:16px;bottom:112px;z-index:59;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
    font-size:21px;background:linear-gradient(135deg,hsl(var(--hue) 80% 55%),hsl(calc(var(--hue) + 50) 75% 50%));
    box-shadow:0 8px 26px hsl(var(--hue) 80% 50% / .5);transition:.15s;}
  .party-fab:hover{transform:scale(1.08);}
  .pf-badge{position:absolute;top:-3px;inset-inline-end:-3px;background:#ff3b6b;color:#fff;font-size:9.5px;font-weight:800;
    border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
  .react-layer{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden;}
  .mom-dots{position:absolute;inset:0;pointer-events:none;}
  .mom-dot{position:absolute;top:-11px;transform:translateX(-50%);font-size:10px;opacity:.85;pointer-events:auto;cursor:default;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));transition:.15s;}
  .mom-dot:hover{transform:translateX(-50%) scale(1.6);opacity:1;}
  .react-fly.mini{font-size:19px;bottom:96px;animation-duration:2.2s;opacity:.9;}
  .upd-pill{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:95;border:none;border-radius:999px;
    padding:9px 18px;cursor:pointer;font-size:12.5px;font-weight:700;color:#fff;font-family:inherit;
    background:linear-gradient(120deg,hsl(var(--hue) 80% 55%),hsl(calc(var(--hue) + 60) 75% 50%));
    box-shadow:0 8px 30px hsl(var(--hue) 80% 50% / .55);animation:updrop .5s cubic-bezier(.2,1.4,.4,1);}
  @keyframes updrop{0%{transform:translate(-50%,-60px);opacity:0;}100%{transform:translate(-50%,0);opacity:1;}}
  .react-fly{position:absolute;bottom:120px;font-size:30px;animation:rfly 2.8s ease-out forwards;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));}
  .react-fly .rn{font-size:9.5px;display:block;text-align:center;color:#fff;opacity:.75;font-weight:700;}
  @keyframes rfly{0%{transform:translateY(0) scale(.6);opacity:0;}12%{opacity:1;transform:translateY(-40px) scale(1.15);}
    100%{transform:translateY(-52vh) scale(.9) rotate(8deg);opacity:0;}}
  .pp-suggestwrap{position:relative;padding:7px 10px 0;}
  .pp-suggestwrap input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:10px;
    padding:7px 12px;color:var(--ink);font-size:12px;outline:none;font-family:inherit;}
  .pp-sres{position:absolute;inset-inline:10px;top:100%;z-index:5;background:rgba(20,14,28,.98);border:1px solid rgba(255,255,255,.12);
    border-radius:10px;overflow:hidden;max-height:180px;overflow-y:auto;}
  .pp-sres:empty{display:none;}
  .pp-sr{display:flex;justify-content:space-between;gap:8px;padding:7px 11px;font-size:12px;cursor:pointer;}
  .pp-sr:hover{background:rgba(255,255,255,.08);}
  .pp-sr .a{color:var(--muted2);font-size:11px;}
  .pp-sug{background:hsl(var(--hue) 60% 50% / .12);border:1px solid hsl(var(--hue) 60% 60% / .3);border-radius:11px;
    padding:8px 11px;font-size:12px;display:flex;align-items:center;gap:8px;justify-content:space-between;}
  .pp-sug button{border:none;border-radius:8px;padding:4px 10px;cursor:pointer;font-size:11.5px;font-family:inherit;}
  .pp-sug .ok{background:hsl(150 60% 40%);color:#fff;} .pp-sug .no{background:rgba(255,255,255,.1);color:var(--muted);}
  .lp-row{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;}
  .lp-card{min-width:210px;background:linear-gradient(135deg,hsl(var(--hue) 50% 22% / .55),rgba(255,255,255,.04));
    border:1px solid hsl(var(--hue) 60% 60% / .25);border-radius:16px;padding:14px 16px;cursor:pointer;transition:.18s;}
  .lp-card:hover{transform:translateY(-3px);border-color:hsl(var(--hue) 70% 65% / .55);}
  .lp-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#ff5b7f;font-weight:800;letter-spacing:.08em;}
  .lp-live i{width:7px;height:7px;border-radius:50%;background:#ff3b6b;animation:lppulse 1.4s infinite;}
  @keyframes lppulse{0%,100%{opacity:1;}50%{opacity:.35;}}
  .lp-host{font-weight:700;font-size:13.5px;margin:6px 0 2px;}
  .lp-meta{color:var(--muted);font-size:11.5px;}
  .party-join{position:fixed;inset:0;z-index:90;background:rgba(5,3,9,.78);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;}
  /* ── public profile ── */
  .uprof-card{position:relative;width:min(400px,92vw);text-align:center;}
  .up-av{width:74px;height:74px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
    font-size:30px;font-weight:800;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.45);}
  .up-name{font-size:20px;font-weight:800;}
  .up-since{color:var(--muted2);font-size:11.5px;margin:3px 0 12px;}
  .up-stats{display:flex;justify-content:center;gap:18px;font-size:12.5px;color:var(--muted);margin-bottom:14px;}
  .up-stats b{color:var(--ink);font-size:15px;display:block;}
  .up-likes-h{font-size:12px;color:var(--muted);margin:16px 0 8px;text-align:start;}
  .up-likes{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
  .up-likes .ul{min-width:74px;cursor:pointer;text-align:center;}
  .up-likes .ul img{width:74px;height:74px;border-radius:10px;object-fit:cover;}
  .up-likes .ul div{font-size:10px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:74px;}
  .pj-go.unfollow{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.15);}
  .who{cursor:pointer;} .pp-m{cursor:pointer;}
  .u-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px;}
  .u-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
    border-radius:999px;padding:5px 14px 5px 6px;cursor:pointer;font-size:12.5px;transition:.15s;}
  .u-chip:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);}
  .u-chip .av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
  .priv-row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:13px;
    padding:12px 16px;margin:12px 0 18px;font-size:13px;}
  .priv-lbl{display:flex;align-items:center;gap:10px;cursor:pointer;}
  .priv-lbl input{width:17px;height:17px;accent-color:hsl(var(--hue) 75% 55%);cursor:pointer;}
  .priv-hint{display:block;color:var(--muted2);font-size:11px;margin-top:5px;margin-inline-start:27px;}
  .bell{position:relative;background:var(--glass);border:1px solid var(--glass-line);border-radius:50%;width:40px;height:40px;
    font-size:16px;cursor:pointer;backdrop-filter:blur(10px);transition:.15s;margin-inline-end:10px;}
  .bell:hover{border-color:hsl(var(--hue) 60% 55% / .6);}
  .notifs{position:fixed;top:64px;inset-inline-end:16px;width:min(340px,92vw);max-height:min(60dvh,480px);overflow-y:auto;z-index:75;
    background:rgba(14,10,20,.96);backdrop-filter:blur(22px);border:1px solid hsl(var(--hue) 60% 60% / .25);
    border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.55);padding:8px;}
  .ntf{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:12.5px;line-height:1.5;transition:.13s;}
  .ntf:hover{background:rgba(255,255,255,.07);}
  .ntf.unread{background:hsl(var(--hue) 60% 50% / .1);}
  .ntf .ni{width:38px;height:38px;min-width:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;}
  .ntf .nt{flex:1;min-width:0;} .ntf.unread .nt{font-weight:600;}
  .ntf .na{color:var(--muted2);font-size:10.5px;margin-top:1px;}
  .ntf .ngo{color:var(--accent);font-size:17px;opacity:.85;}
  .ntf-empty{color:var(--muted2);text-align:center;padding:30px 16px;font-size:12.5px;line-height:1.8;}
  .ntf-empty .nee{font-size:30px;display:block;margin-bottom:8px;opacity:.7;}
  .cmt-pop{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:76;display:flex;gap:7px;width:min(420px,92vw);
    background:rgba(16,11,24,.97);border:1px solid hsl(var(--hue) 60% 60% / .35);border-radius:999px;padding:7px 8px 7px 16px;
    box-shadow:0 14px 50px rgba(0,0,0,.55);}
  .cmt-pop input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-size:13px;font-family:inherit;}
  .cmt-pop button{border:none;border-radius:999px;padding:7px 16px;cursor:pointer;font-size:12px;font-weight:700;color:#fff;font-family:inherit;
    background:linear-gradient(120deg,hsl(var(--hue) 80% 58%),hsl(calc(var(--hue) + 60) 75% 55%));}
  .pmenu{position:fixed;bottom:96px;inset-inline-end:14px;z-index:74;min-width:250px;
    background:rgba(14,10,20,.97);backdrop-filter:blur(22px);border:1px solid hsl(var(--hue) 60% 60% / .3);
    border-radius:16px;box-shadow:0 16px 55px rgba(0,0,0,.6);padding:7px;animation:pmdrop .18s;}
  @keyframes pmdrop{0%{transform:translateY(8px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
  .pm-i{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--ink);
    font-size:13px;font-family:inherit;padding:11px 13px;border-radius:11px;cursor:pointer;text-align:start;transition:.13s;}
  .pm-i:hover{background:rgba(255,255,255,.08);}
  .pm-i span{font-size:17px;width:22px;text-align:center;}
  .pm-i.on{background:hsl(var(--hue) 60% 50% / .18);}
  .pm-mix{border-top:1px solid rgba(255,255,255,.08);margin-top:6px;padding:10px 13px 4px;}
  .pm-mix-h{display:block;font-size:11px;color:var(--muted2);margin-bottom:7px;}
  .pm-mix .mixmodes{display:flex;flex-wrap:wrap;gap:5px;}
  /* ── timeline ── */
  .tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:6px;}
  .tl-pl{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;
    padding:12px;cursor:pointer;transition:.18s;}
  .tl-pl:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);border-color:hsl(var(--hue) 60% 60% / .4);}
  .tl-cov{display:grid;gap:2px;border-radius:11px;overflow:hidden;aspect-ratio:1;margin-bottom:9px;background:rgba(255,255,255,.04);}
  .tl-cov img{width:100%;height:100%;object-fit:cover;}
  .tl-cov.c1{grid-template-columns:1fr;} .tl-cov.c2{grid-template-columns:1fr 1fr;}
  .tl-cov.c3,.tl-cov.c4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
  .tl-cov.c3 img:first-child{grid-row:span 2;}
  .tl-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tl-by{color:var(--muted);font-size:11.5px;margin-top:3px;}
  .tl-pl .pin{position:absolute;top:calc(50% - 40px);inset-inline-end:20px;opacity:0;transition:.18s;}
  .tl-pl:hover .pin{opacity:1;}
  .pj-card{width:min(360px,90vw);background:rgba(18,12,26,.96);border:1px solid hsl(var(--hue) 60% 60% / .3);border-radius:22px;
    padding:28px 26px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.6);}
  .pj-h{font-size:20px;font-weight:800;margin-bottom:8px;}
  .pj-sub{color:var(--muted);font-size:13px;margin-bottom:18px;}
  .pj-card input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;
    padding:11px 14px;color:var(--ink);font-size:14px;outline:none;text-align:center;margin-bottom:12px;font-family:inherit;}
  .pj-go{width:100%;border:none;border-radius:999px;padding:12px;cursor:pointer;font-size:15px;font-weight:700;color:#fff;font-family:inherit;
    background:linear-gradient(120deg,hsl(var(--hue) 80% 58%),hsl(calc(var(--hue) + 60) 75% 55%));box-shadow:0 8px 26px hsl(var(--hue) 80% 50% / .4);}
  @media (max-width:640px){ .party-panel{inset-inline-end:8px;bottom:128px;} .party-fab{bottom:130px;} }
  /* ── sidebar: dashboard-grade ── */
  .rail{border-inline-end:1px solid rgba(255,255,255,.05);}
  .navitem{border-radius:10px;margin:1px 8px;padding:9px 13px;font-size:13.5px;position:relative;}
  .navitem.on{background:linear-gradient(90deg,hsl(var(--hue) 70% 55% / .16),transparent);color:var(--ink);}
  .navitem.on::before{content:'';position:absolute;inset-inline-start:-8px;top:20%;bottom:20%;width:3px;border-radius:3px;
    background:hsl(var(--hue) 85% 60%);}
  .libhead{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.05);
    font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);}
  .rfam{grid-column:1/-1;margin-top:10px;}
  .rfam-h{font-size:13px;color:var(--muted);letter-spacing:.5px;margin:4px 2px 10px;}
  .rfam-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .cosmos-meta{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
  .cosmos-chip{font-size:11.5px;letter-spacing:.4px;padding:4px 11px;border-radius:999px;color:var(--muted);
    border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);backdrop-filter:blur(6px);}
  .cosmos-chip b{color:hsl(var(--hue) 85% 72%);font-weight:600;}
  .cosmos-worlds{position:absolute;inset:0;}
  /* anchored at the stage centre; the orbit lives entirely in `transform`
     (see cosmosPlace) so the per-frame animation never touches layout */
  .world{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;transform:translate(-50%,-50%);
    border:1px solid rgba(255,255,255,.16);overflow:hidden;cursor:pointer;background:#16121f;padding:0;
    box-shadow:0 10px 26px rgba(0,0,0,.55);transition:box-shadow .25s,width .4s,height .4s;will-change:transform;}
  .world img{width:100%;height:100%;object-fit:cover;display:block;}
  .world:hover{width:78px !important;height:78px !important;box-shadow:0 12px 32px hsl(var(--hue) 80% 50% / .6);z-index:4;}
  @keyframes bob{0%,100%{margin-top:0;}50%{margin-top:-9px;}}
  .cosmos-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:3;}
  .cosmos-orb{position:relative;width:min(26dvh,248px);height:min(26dvh,248px);border-radius:50%;border:none;cursor:pointer;padding:0;background:var(--void);overflow:hidden;
    box-shadow:0 0 90px hsl(var(--hue) 85% 55% / .5),0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .6s;transform:scale(calc(1 + var(--beat,0)*0.05));will-change:transform;}
  .cosmos-orb-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s;}
  .cosmos-orb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 36% 30%,transparent 42%,rgba(5,3,10,.55));}
  .cosmos-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:40px;opacity:0;transition:.22s;z-index:2;text-shadow:0 3px 22px rgba(0,0,0,.7);}
  .cosmos-orb:hover .cosmos-play{opacity:1;} .cosmos-orb:hover .cosmos-orb-cover{transform:scale(1.06);}
  .cosmos-title{font-family:var(--serif);font-size:27px;margin-top:20px;letter-spacing:-.3px;}
  .cosmos-artist{color:var(--muted);font-size:14px;margin-top:5px;}
  @media(max-width:880px){ .cosmos-stage{height:min(58dvh,520px);min-height:400px;} .cosmos-orb{width:160px;height:160px;} .world{width:50px;height:50px;} .cosmos-title{font-size:22px;}
    .rchan{min-height:96px;padding:11px 13px 12px;} .rchan .rc-name{font-size:17px;} }
  /* lazy covers shimmer only while EMPTY — stops the moment content lands */
  .card .frame:empty,.tile:empty{background-image:linear-gradient(110deg,rgba(240,230,205,.03) 30%,rgba(240,230,205,.09) 50%,rgba(240,230,205,.03) 70%);
    background-size:220% 100%;animation:shimmer 1.6s linear infinite;}
  @keyframes shimmer{from{background-position:200% 0}to{background-position:-20% 0}}
  @media(prefers-reduced-motion:reduce){ .cosmos-orb{transform:none !important;} }
  .world{touch-action:none;}
  /* ---- فارسی: تایپوگرافی و RTL ---- */
  html[lang="fa"]{--serif:'Vazirmatn','Fraunces',Georgia,serif;}
  html[lang="fa"] body{font-family:'Vazirmatn','Inter',-apple-system,'Segoe UI',Tahoma,sans-serif;}
  /* mixed-script lines (Persian UI + Latin titles) render each run by its own
     direction — kills the «2857 آهنگ · Iranian pop» bidi soup everywhere */
  .ct,.ca,.sub,.meta,.rc-name,.rc-sub,.t,.empty,.toast,.sec-h h3,.cosmos-title,.cosmos-artist,
  .lrow .ti .a,.lrow .ti .a .al,.lrow .album,.cnt,.qrow .qm .a,.up-since,.prof-since,
  #fs-title,#fs-artist,.p-t,.p-a,.qm .t,.qm .a,.bct,.bca,.libnm,.libsub,.tl-name,.tl-by,
  .cg-ct,.cg-ca,.mc-t,.ma-card .t,.ma-card .a,.lrc-line,.cg-bub,.st-name,.st-desc,
  .ld-name,#ld-name,#album-title,#va-name,#np-title,#np-artist,#lv-title,#lv-artist{unicode-bidi:plaintext;}
  /* audio timelines + transport stay physically LTR in RTL mode (time flows →,
     and the progress fill is physically left-anchored) — otherwise the elapsed
     label lands on the right while the bar fills from the left. */
  [dir="rtl"] input[type="range"],[dir="rtl"] .p-seek,[dir="rtl"] .p-bar,[dir="rtl"] .p-ctrls,
  [dir="rtl"] .seekrow,[dir="rtl"] .bar,[dir="rtl"] .wave,[dir="rtl"] .fs-times,
  [dir="rtl"] .transport{direction:ltr;}
  [dir="rtl"] .queue{right:auto;left:0;border-left:none;border-right:1px solid rgba(255,255,255,.08);transform:translateX(-100%);}
  [dir="rtl"] .queue.show{transform:none;}
  /* ---- هویت بصری: کاشی و لاله‌زار ---- */
  .sec-h h3{font-family:var(--display);font-weight:400;letter-spacing:0;font-size:24px;}
  .sec-h h3::before{content:'';display:inline-block;width:9px;height:9px;margin-inline-end:10px;
    background:var(--accent);transform:rotate(45deg);box-shadow:0 0 0 3px var(--gold-dim);vertical-align:2px;}
  .mtitle,.cosmos-title{font-family:var(--display);font-weight:400;}
  .stage h1,.hero-h,.bignum{font-family:var(--display);}
  .card,.tile{border:1px solid var(--glass-line);border-radius:12px;}
  .card:hover,.tile:hover{border-color:var(--gold-line);}
  .rchan,.rc{border:1px solid var(--glass-line);}
  .rchan:hover{border-color:var(--gold-line);}
  /* chips: goshvareh cut-corners (tilework), not the default pill */
  .gchip,.mchip,.ob-chip{clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);
    border-radius:0;padding-inline:18px;}
  .gchip.on,.ob-chip.on{background:linear-gradient(120deg,hsl(var(--hue) 60% 40%),hsl(var(--hue) 72% 52%));color:var(--void);font-weight:700;}
  /* player: saffron hairline crown */
  .player{border-top:1px solid var(--gold-line);}
  .topbar.solid{border-bottom:1px solid var(--gold-line);}
  /* Every view scrolls under the absolutely-positioned topbar. This used to be
     patched per-hero (.liked-hero / .prof-hero / .browse-hero each carried their
     own 96px), so any view whose first child was a back button or a section
     header — album, artist, library, search — started hidden underneath it.
     One rule owns the clearance now; the heroes keep only their own rhythm. */
  /* (#view-home is exempt — the .stage above it already clears the topbar) */
  #view-library,#view-profile,#view-album,#view-artist,#view-channel,
  #view-search,#view-browse,#view-timeline,#view-map,#view-social{padding-top:92px;}
  .liked-hero{padding-top:14px;} .prof-hero{padding-top:18px;} .browse-hero{padding-top:26px;}
  #view-browse .stage,#view-browse h1,#view-browse h2{scroll-margin-top:90px;}
  @media(max-width:880px){
    #view-library,#view-profile,#view-album,#view-artist,#view-channel,
    #view-search,#view-browse,#view-timeline,#view-map,#view-social{padding-top:84px;}
  }
  /* ---- کپسول‌ها: ریل شناور + پلیر شناور ---- */
  @media(min-width:881px){
    .shell{grid-template-columns:calc(var(--rail-w) + 22px) 1fr;}
    .rail{margin:14px 14px calc(var(--bar-h) + 26px) 8px;border-radius:26px;
      background:linear-gradient(165deg,rgba(240,230,205,.055),rgba(240,230,205,.015));
      border:1px solid var(--glass-line);box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(240,230,205,.06);
      backdrop-filter:blur(22px);border-inline-end:1px solid var(--glass-line)!important;}
    .rail:hover{border-color:var(--gold-line);}
    .player{left:max(18px, calc(50% - 620px));right:max(18px, calc(50% - 620px));bottom:14px;
      border-radius:26px;border:1px solid var(--gold-line);
      background:linear-gradient(165deg,rgba(20,26,44,.92),rgba(10,14,26,.94));
      backdrop-filter:blur(26px);box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(233,180,76,.12);
      border-top:1px solid var(--gold-line);}
  }
  /* ---- تایل کانال‌ها: قاب گوشواره + کاشی زنده ---- */
  .rchan{border-radius:4px;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
    border:1px solid var(--glass-line);}
  .rchan::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.14;z-index:-1;
    background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(240,230,205,.5) 14px 15px),
               repeating-linear-gradient(-45deg,transparent 0 14px,rgba(240,230,205,.35) 14px 15px);}
  .rchan:hover{border-color:var(--gold-line);transform:translateY(-3px);transition:transform .25s,border-color .25s;}
  /* (was .rc-title — a class the markup never had, so the Lalezar display face
     never reached the channel tiles; the real class is .rc-name, styled below) */
  .rchan::before{content:'';position:absolute;top:10px;inset-inline-start:12px;width:7px;height:7px;
    background:var(--gold);transform:rotate(45deg);opacity:.75;box-shadow:0 0 0 3px var(--gold-dim);}
  /* ---- فول‌اسکرین: امضای شب ایرانی ---- */
  #fs-title{font-family:var(--display);font-weight:400;}
  .fs-tab{clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);border-radius:0;padding-inline:22px;}
  .fs-tab.on{background:linear-gradient(120deg,hsl(var(--hue) 60% 40%),hsl(var(--hue) 72% 52%));color:var(--void);font-weight:700;}
  .fs-disc-wrap::after{content:'';position:absolute;inset:-10px;border-radius:50%;pointer-events:none;
    border:1px solid var(--gold-line);box-shadow:0 0 0 8px rgba(233,180,76,.04);}
  /* ---- کاوش: ردیف کانال‌ها (تاکسونومی اصلی) ---- */
  .bchan-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;}
  .bchan-row::-webkit-scrollbar{display:none;}
  .bchan{flex:0 0 auto;font-size:13.5px;padding:9px 20px;cursor:pointer;color:var(--ink);white-space:nowrap;
    background:linear-gradient(140deg,hsl(var(--ch,174) 45% 26% / .55),hsl(var(--ch,174) 55% 16% / .6));
    border:1px solid var(--glass-line);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);}
  .bchan:hover{border-color:var(--gold-line);}
  .bchan b{font-weight:400;font-family:var(--display);margin-inline-end:6px;}
  .bchan span{color:var(--muted);font-size:11.5px;}
  /* ---- موبایل: ناوبری و پلیر کپسولی ---- */
  @media(max-width:880px){
    .mobnav.mobnav{left:10px;right:10px;bottom:10px;height:62px;border-radius:22px;
      background:rgba(11,15,28,.97);border:1px solid var(--glass-line);
      box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(240,230,205,.05);}
    .mobnav .mn.on{color:var(--accent);position:relative;}
    .mobnav .mn.on::after{content:'';position:absolute;top:7px;width:5px;height:5px;
      background:var(--gold);transform:rotate(45deg);}
    .player.player{left:8px;right:8px;bottom:80px;border-radius:20px;border:1px solid var(--gold-line);
      background:rgba(13,17,30,.98);box-shadow:0 18px 50px rgba(0,0,0,.6);}
    .scroll{padding-bottom:190px;}
  }



  .world.pull{transition:transform .5s cubic-bezier(.3,0,.15,1),
    width .5s,height .5s,opacity .45s;z-index:6;width:120px !important;height:120px !important;opacity:0;}
  .world.drag{z-index:6;box-shadow:0 16px 44px hsl(var(--hue) 85% 55% / .55);cursor:grabbing;}
  .stage-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:14px 0 4px;}
  .stage-pill{font-size:12.5px;padding:8px 16px;border-radius:999px;cursor:pointer;color:var(--fg);
    border:1px solid rgba(255,255,255,.12);background:rgba(18,12,26,.45);backdrop-filter:blur(14px);
    transition:border-color .25s,background .25s;}
  .stage-pill:hover{border-color:hsl(var(--hue) 80% 60% / .6);background:rgba(30,20,44,.6);}
  .stage-hint{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);font-size:11px;
    color:var(--muted);opacity:.55;pointer-events:none;z-index:4;}
  @media(max-width:880px){ .stage-hint{display:none;} }

  /* ---- onboarding ---- */
  .ob-kicker{color:var(--accent);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
  .ob-sub{color:var(--muted);font-size:14px;margin:6px 0 18px;line-height:1.5;}
  .ob-chips{display:flex;flex-wrap:wrap;gap:10px;max-height:46vh;overflow:auto;margin-bottom:22px;}
  .ob-chip{background:var(--glass);border:1px solid var(--glass-line);color:var(--muted);padding:9px 17px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;transition:.16s;}
  .ob-chip:hover{color:var(--ink);border-color:hsl(var(--hue) 55% 55% / .55);transform:translateY(-1px);}
  .ob-chip.on{color:var(--void);border-color:transparent;background:linear-gradient(135deg,hsl(var(--hue) 88% 70%),hsl(calc(var(--hue) + 50) 86% 64%));}
  .ob-actions{display:flex;align-items:center;gap:14px;}

  /* نوارِ کناری زیرِ ۸۸۰ پیکسل پنهان می‌شود و با آن، تنها راهِ رسیدن به
     کپی‌رایت/قوانین/بازخورد هم می‌رفت. این پانویس دقیقاً همان‌جا برمی‌گردد. */
  .app-foot{display:none;}
  .app-foot a{color:var(--muted2);text-decoration:none;}
  .app-foot a:hover{color:var(--ink);}

  @media(max-width:880px){
    :root{--rail-w:0px;}
    .app-foot{display:block;padding:26px 18px 34px;text-align:center;font-size:12px;color:var(--muted2);}
    .lv-scroll{padding:12vh 18px 26vh;} .lrc-line{font-size:21px;}
    .rail{display:none;} .shell{grid-template-columns:1fr;}
    .stage{padding:88px 18px 8px;} .section{padding:8px 18px;}
    /* The first screen used to be pure chrome: title, THREE wrapped rows of mood
       chips and a 72px stats band pushed the first thing you can actually play
       (the cosmos orb) to 60% down a 812px phone. One scrollable chip row and a
       compact stat line give ~120px back. */
    .stage-idle h1,.stage-idle h2{font-size:clamp(24px,7.4vw,34px);}
    .moodbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding-bottom:2px;}
    .moodbar::-webkit-scrollbar{display:none;}
    .moodbar .mchip,.moodbar .smart-toggle,.mood-lbl{flex:0 0 auto;}
    .moodbar .smart-toggle{margin-left:0;margin-inline-start:2px;}
    .statline{gap:20px;} .statline .st b{font-size:19px;}
    .statline .st span{font-size:9.5px;letter-spacing:.4px;}
    .lrow{grid-template-columns:26px 46px 1fr 70px;} .lrow .album,.lrow .rate{display:none;}
    .scroll{padding-bottom:160px;}
    /* نقشه: راهنما زیرِ بوم بیاید (روی موبایل روی محتوا نیفتد) و هدر عمودی بچیند */
    .map-hero{flex-direction:column;align-items:stretch;}
    .map-legend{position:static;inset-inline-start:auto;bottom:auto;margin-top:10px;background:transparent;border:none;padding:2px 0;backdrop-filter:none;}
    /* minmax(0,1fr): a plain 1fr refuses to shrink below its content, so the
       transport squeezed the title column down to ~30px («Teenage Dream» → «…am») */
    .player{left:0;right:0;bottom:58px;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;height:64px;border-radius:0;}
    /* keep the essential transport on mobile (play/next); drop the seek bar + shuffle/repeat */
    .player .p-center{display:flex;flex-direction:row;gap:2px;}
    .player .p-ctrls{gap:10px;}
    .player .p-ctrls .tog{display:none;} .player .p-seek{display:none;}
    .player .p-vol{display:none;} .player .p-art{width:44px;height:44px;}
    /* one clean row: art+title | ▶ ⏭ | ⋯ — everything else lives in the menu/immersive view */
    .player{padding:0 10px;gap:6px;}
    .player .p-left{gap:9px;min-width:0;} .player .p-meta{min-width:0;flex:1 1 auto;}
    /* id, not [title]: the i18n walker rewrites title attributes, which silently
       killed the old button[title="Previous"] selector */
    .player .p-ctrls #m-prev{display:none;}
    .player .p-right{gap:2px;}
    .player .p-right .p-icon{display:none;}
    .player .p-right #m-more{display:inline-block;font-size:21px;padding:8px 10px;}

    /* mobile bottom nav */
    .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:58px;
      background:rgba(8,6,11,.95);backdrop-filter:blur(20px);border-top:1px solid var(--glass-line);}
    .mobnav .mn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
      background:none;border:none;color:var(--muted2);font-size:10px;font-weight:600;cursor:pointer;}
    .mobnav .mn .mi{font-size:19px;} .mobnav .mn.on{color:var(--ink);}
    .topbar{padding:14px 18px;} .searchwrap{width:100%;max-width:none;} .upbtn{display:none;}
    /* backdrop-filter eats mobile GPU memory — solid glass instead */
    *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
    .player{background:rgba(10,8,14,.97);} .party-panel{background:rgba(14,10,20,.985);}
    .topbar.solid{background:rgba(8,6,11,.96);} .notifs{background:rgba(14,10,20,.99);}
    .pmenu{background:rgba(14,10,20,.99);} .searchwrap{background:rgba(20,16,28,.9);}
    /* party panel becomes a bottom sheet */
    .party-panel{inset-inline:0;bottom:0;width:100%;max-height:58dvh;border-radius:20px 20px 0 0;
      border-left:none;border-right:none;border-bottom:none;z-index:70;}
    .party-panel::before{content:'';display:block;width:44px;height:4px;border-radius:4px;
      background:rgba(255,255,255,.22);margin:8px auto 0;}
    .party-fab{bottom:186px;inset-inline-end:12px;}
    /* fat-finger friendly */
    .p-icon{font-size:19px;padding:8px;} .p-play{width:46px;height:46px;}
    .gchip{padding:8px 15px;font-size:12.5px;}
    .pp-reacts button{font-size:21px;padding:5px 7px;}
    .uprof-card{max-height:82dvh;overflow-y:auto;}
    .tl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
    .lp-card{min-width:180px;}
  }
  /* عرضِ میانی: پیش از فروپاشیِ کاملِ موبایل، ستون‌های آلبوم/امتیاز حذف تا عنوان له نشود */
  @media(min-width:881px) and (max-width:1080px){
    .lrow{grid-template-columns:28px 52px 1fr 88px 132px;} .lrow .album{display:none;}
  }
  .pulse{animation:pl .7s;} @keyframes pl{0%{color:var(--accent);}100%{}}

.rn-hero{margin:16px 0 6px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#1b1430,#2c1742);border:1px solid rgba(255,255,255,.08);display:flex;min-height:150px}
.rn-cov{display:flex;width:38%;max-width:300px}.rn-cov img{width:20%;object-fit:cover;filter:saturate(1.15)}
.rn-body{padding:18px 22px;flex:1;display:flex;flex-direction:column;justify-content:center}
.rn-mood{font-size:11px;letter-spacing:.1em;color:#c9a8ff;text-transform:uppercase;margin-bottom:4px}
.rn-name{font-size:25px;font-weight:800}.rn-desc{color:#b9b2c8;font-size:13px;margin:5px 0 14px}
.rn-play{align-self:flex-start;background:#fff;color:#160c22;border:0;border-radius:30px;padding:9px 26px;font-weight:700;cursor:pointer}
.personas{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;margin-top:8px}
.persona{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:11px;cursor:pointer;transition:.2s}
.persona:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.persona .pc{display:flex;gap:2px;margin-bottom:8px;border-radius:9px;overflow:hidden}
.persona .pc img{width:25%;height:52px;object-fit:cover}
.persona .pn{font-weight:700;font-size:14px}.persona .pd{color:#a89fbb;font-size:11.5px;margin-top:3px;line-height:1.45}
.persona .pmeta{margin-top:6px;font-size:10.5px;color:#867e9c}
/* بنرِ مناسبت — گرادیانِ رنگِ خودِ مناسبت (--ch)، کاورهای واقعیِ استخر */
.dance-sec{margin:18px 0}
.dj-hero{padding:6px 0 12px}
.dj-hero-t{font-size:24px;font-weight:800;margin-bottom:6px}
.dj-hero-s{font-size:12.5px;opacity:.62;line-height:1.9;max-width:640px}
.au-btn{background:hsla(var(--hue),80%,60%,.22);border:1px solid hsla(var(--hue),80%,65%,.5);color:inherit;
  border-radius:11px;padding:9px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;width:100%;margin-bottom:6px}
.au-btn.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);font-weight:600}
.au-btn.sm{padding:6px 10px;font-size:11.5px;margin-bottom:0}
.au-me{display:flex;align-items:center;gap:9px;background:none;border:0;color:inherit;font:inherit;
  cursor:pointer;padding:4px 2px;width:100%;margin-bottom:4px}
.au-nm{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.btn.sm{padding:8px 12px;font-size:12px}
.navitem.dj-nav .ic{filter:saturate(1.3)}
.mobnav .mn.mn-dj .mi{filter:saturate(1.35)}
.dance-styles{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.dchip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:inherit;
  border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;cursor:pointer;display:flex;gap:6px;align-items:center}
.dchip i{font-style:normal;opacity:.55;font-size:11px}
.dchip.on{background:hsla(var(--hue),80%,60%,.22);border-color:hsla(var(--hue),80%,65%,.55)}
.dance-go{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.dance-list{display:grid;gap:2px}
.drow{display:flex;gap:10px;align-items:center;padding:6px;border-radius:10px;cursor:pointer}
.drow:hover{background:rgba(255,255,255,.06)}
.drow img{width:38px;height:38px;border-radius:7px;object-fit:cover;flex:none}
.drow .dn{width:20px;text-align:center;opacity:.45;font-size:12px;flex:none}
.drow .dt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.drow .dt b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .dt span{font-size:11.5px;opacity:.6}
.drow .dmeta{font-size:11.5px;opacity:.55;flex:none}
.drow{position:relative}
.drow[draggable=true]{cursor:grab}
.drm{background:none;border:0;color:inherit;opacity:.35;font-size:13px;cursor:pointer;padding:2px 6px;flex:none}
.drm:hover{opacity:.9}
.occ-banner{display:flex;align-items:center;gap:18px;margin:6px 0 20px;padding:16px 18px;cursor:pointer;
  border-radius:22px;border:1px solid hsl(var(--ch) 70% 60% / .4);
  background:linear-gradient(120deg,hsl(var(--ch) 65% 22% / .85),hsl(var(--ch) 45% 12% / .6));
  box-shadow:0 14px 44px hsl(var(--ch) 80% 25% / .35);transition:transform .18s ease;}
.occ-banner:hover{transform:translateY(-2px);}
.occ-covers{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:96px;height:96px;flex:none;
  border-radius:16px;overflow:hidden;background:rgba(0,0,0,.3);}
.occ-covers img{width:100%;height:100%;object-fit:cover;}
.occ-kk{color:hsl(var(--ch) 80% 78%);font-size:11px;letter-spacing:.5px;font-weight:700;}
.occ-name{font-size:21px;font-weight:900;margin:3px 0 2px;}
.occ-desc{color:var(--muted);font-size:13px;}
.occ-go{display:inline-block;margin-top:9px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:800;
  background:hsl(var(--ch) 70% 55% / .25);border:1px solid hsl(var(--ch) 70% 60% / .55);color:hsl(var(--ch) 85% 82%);}
@media(max-width:560px){ .occ-banner{gap:13px;padding:13px;} .occ-covers{width:74px;height:74px;} .occ-name{font-size:17px;} }
.radio-sec{margin:10px 0 18px;}
.radio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px;}
/* «جلد وینیل زنده»: کاور محو تمام‌قد + دوتونِ رنگ کانال + بادبزن کاورهای واقعی */
.rchan{position:relative;border-radius:18px;padding:14px 16px 15px;min-height:126px;cursor:pointer;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid hsl(var(--ch,280) 55% 55% / .22);
  background:linear-gradient(135deg,hsl(var(--ch,280) 55% 17%),hsl(var(--ch,280) 62% 8%));
  transition:transform .2s,box-shadow .25s,border-color .2s;}
.rchan:hover{transform:translateY(-4px);border-color:hsl(var(--ch,280) 78% 64% / .6);box-shadow:0 18px 44px hsl(var(--ch,280) 75% 22% / .6);}
.rchan::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  transform:translateX(-140%);transition:transform .65s;}
.rchan:hover::after{transform:translateX(140%);}
.rc-bg{position:absolute;inset:0;z-index:-2;}
.rc-bg img{width:100%;height:100%;object-fit:cover;filter:blur(16px) saturate(1.4);opacity:.5;transform:scale(1.3);}
.rc-duo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,hsl(var(--ch,280) 65% 11% / .96) 16%,hsl(var(--ch,280) 60% 17% / .6) 52%,hsl(var(--ch,280) 55% 26% / .16));}
.rc-fan{position:absolute;inset-inline-end:12px;top:12px;width:100px;height:72px;pointer-events:none;z-index:0;}
.rc-fan img{position:absolute;width:56px;height:56px;border-radius:10px;object-fit:cover;border:2px solid rgba(0,0,0,.4);
  box-shadow:0 6px 18px rgba(0,0,0,.5);inset-inline-end:calc(var(--i)*22px);top:calc(var(--i)*4px);
  transform:rotate(calc(7deg - var(--i)*8deg));transition:transform .25s;}
.rchan:hover .rc-fan img{transform:rotate(calc(11deg - var(--i)*13deg)) translateY(-3px);}
.rc-emoji{position:absolute;top:12px;inset-inline-start:14px;font-size:19px;line-height:1;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.65));}
.rchan .rc-name{position:relative;z-index:1;font-family:var(--display);font-weight:400;font-size:20px;color:#fff;letter-spacing:0;text-shadow:0 2px 12px rgba(0,0,0,.85);}
.rchan .rc-sub{position:relative;z-index:1;font-size:11px;color:rgba(255,255,255,.8);margin-top:3px;line-height:1.4;text-shadow:0 1px 8px rgba(0,0,0,.75);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rchan .rc-play{position:absolute;inset-inline-end:12px;bottom:12px;z-index:3;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;
  background:hsl(var(--ch,280) 80% 56%);box-shadow:0 6px 20px hsl(var(--ch,280) 80% 40% / .65);
  opacity:0;transform:translateY(6px);transition:.2s;}
.rchan:hover .rc-play{opacity:1;transform:none;}
.rchan.me{grid-column:span 2;border-color:hsl(var(--ch,280) 80% 60% / .45);}
@media(max-width:560px){ .rchan.me{grid-column:span 1;} .radio-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));}
  .rc-bg img{filter:none;opacity:.3;} .rchan .rc-play{opacity:.92;transform:none;} .rc-fan{width:78px;} .rc-fan img{width:46px;height:46px;} }
.station{margin:16px 0}.st-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.st-collage{position:relative;display:grid;grid-template-columns:1fr 1fr;width:62px;height:62px;border-radius:11px;overflow:hidden;cursor:pointer;flex:0 0 auto}
.st-collage img{width:31px;height:31px;object-fit:cover}
.st-play{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;opacity:0;transition:.2s;cursor:pointer;font-size:12px}
.st-collage:hover .st-play{opacity:1}.st-name{font-weight:700;font-size:16px}.st-desc{color:#a89fbb;font-size:12px}
.dna{display:flex;gap:14px;flex-wrap:wrap}.dna .di{background:rgba(255,255,255,.04);border-radius:12px;padding:9px 16px;text-align:center}
.dna .dv{font-weight:800;font-size:17px}.dna .dl{font-size:10.5px;color:#9a91ad;margin-top:2px}
/* ══ پولیشِ سراسری (حسِ حرفه‌ای، ریزتعامل‌ها، حالت‌ها) ══ */
::selection{background:hsl(var(--hue) 80% 60% / .32);color:#fff;}
:focus-visible{outline:2px solid hsl(var(--hue) 80% 62% / .8);outline-offset:2px;border-radius:8px;}
:focus:not(:focus-visible){outline:none;}
/* حسِ لمس: فشارِ ملایمِ دکمه‌ها و کارت‌ها */
button,.card,.bcard,.rchan,.lp-card,.tl-pl,.ma-card,.u-chip,.mf,.map-vis,.soc-new,.navitem{transition:transform .12s cubic-bezier(.34,1.4,.5,1),background .18s,border-color .18s,box-shadow .2s,color .15s;}
button:active,.card:active,.bcard:active,.lp-card:active,.tl-pl:active,.ma-card:active,.u-chip:active,.mf:active,.map-vis:active,.soc-new:active{transform:scale(.96);}
/* لودِ محوِ همهٔ کاورها و تصاویر */
img{transition:opacity .35s ease;}
img[loading]:not([src]){opacity:0;}
/* شیمرِ اسکلتون یک‌دست‌تر */
@keyframes shimmerGlow{0%,100%{opacity:.5;}50%{opacity:.85;}}
.skel,.skeleton,.sk{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 70%);background-size:200% 100%;animation:skelSlide 1.4s ease-in-out infinite;border-radius:12px;}
@keyframes skelSlide{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* ورودِ نرمِ بخش‌ها هنگامِ نمایش */
.section:not([style*="display:none"]) .sec-h{animation:polishRise .5s cubic-bezier(.2,.7,.2,1) both;}
@keyframes polishRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* اسکرول‌بارِ ظریف‌تر + رفتارِ نرم */
html{scroll-behavior:smooth;}
::-webkit-scrollbar-thumb{transition:background .2s;}
/* دکمه‌های دیزیبل واضح‌تر */
button:disabled{opacity:.45;cursor:not-allowed;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.06s!important;scroll-behavior:auto!important;}
}
.rail-foot{padding:10px 14px 6px;font-size:11px;color:var(--muted2);}
.rail-foot a{color:var(--muted2);}
.rail-foot a:hover{color:var(--ink);}
/* ── نصبِ PWA (توزیعِ بدونِ فروشگاه) ── */
.pwa-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:104px;z-index:210;display:flex;align-items:center;gap:11px;
  max-width:min(94vw,430px);background:rgba(20,23,28,.94);backdrop-filter:blur(16px);border:1px solid var(--edge,#242932);
  border-radius:16px;padding:11px 12px;box-shadow:0 18px 50px rgba(0,0,0,.55);animation:pwaRise .4s cubic-bezier(.2,.8,.2,1);}
.pwa-ic{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  background:hsl(var(--hue) 78% 62% / .14);border:1px solid hsl(var(--hue) 78% 62% / .28);}
.pwa-txt{flex:1;min-width:0;line-height:1.35;}
.pwa-txt b{display:block;font-size:13px;font-weight:700;color:var(--ink,#EFE9DC);}
.pwa-txt small{display:block;font-size:11px;color:var(--muted,#96938C);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@keyframes pwaRise{from{opacity:0;transform:translate(-50%,14px);}to{opacity:1;transform:translate(-50%,0);}}
.pwa-go{flex:0 0 auto;background:hsl(var(--hue) 78% 62%);color:var(--void,#08090B);border:none;border-radius:999px;
  padding:8px 15px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.pwa-x{background:none;border:none;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;padding:2px 4px;}
.upbtn.pwa-top{background:linear-gradient(135deg,hsl(var(--hue) 82% 56% / .22),hsl(var(--hue) 70% 46% / .14));border-color:hsl(var(--hue) 70% 60% / .5);color:hsl(var(--hue) 88% 80%);font-weight:800;}
.upbtn.pwa-top:hover{background:linear-gradient(135deg,hsl(var(--hue) 82% 56% / .34),hsl(var(--hue) 70% 46% / .2));}
/* ── معرفی‌شده / Promoted (اجارهٔ صفحهٔ اول) ── */
.promo-tag{position:absolute;top:10px;inset-inline-start:10px;z-index:2;background:rgba(10,8,18,.72);backdrop-filter:blur(6px);color:hsl(var(--hue) 88% 80%);font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;border:1px solid hsl(var(--hue) 70% 62% / .4);letter-spacing:.2px;}
.promo-card .frame{box-shadow:0 0 0 1px hsl(var(--hue) 70% 60% / .32),0 18px 46px hsl(var(--hue) 80% 45% / .24)!important;}
.promo-card:hover .frame{box-shadow:0 0 0 1px hsl(var(--hue) 75% 65% / .5),0 26px 60px hsl(var(--hue) 80% 48% / .34)!important;}
/* ── «برای تو» — دسته‌های شخصی‌شده از سلیقهٔ کاربر ── */
.mycats{display:flex;flex-direction:column;gap:14px;}
.mc-cat{background:linear-gradient(180deg,hsl(var(--hue) 40% 12% / .45),hsl(var(--hue) 30% 8% / .25));border:1px solid hsl(var(--hue) 40% 40% / .16);border-radius:18px;padding:13px 14px 15px;cursor:pointer;transition:border-color .22s,transform .16s,box-shadow .22s;}
.mc-cat:hover{border-color:hsl(var(--hue) 60% 55% / .38);box-shadow:0 16px 44px hsl(var(--hue) 70% 30% / .22);}
.mc-cat:active{transform:scale(.992);}
.mc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px;}
.mc-name{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.1px;}
.mc-sub{font-size:11px;color:var(--muted2);font-weight:600;}
.mc-go{font-size:12px;font-weight:800;color:hsl(var(--hue) 85% 76%);white-space:nowrap;opacity:.9;}
.mc-row{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.mc-row::-webkit-scrollbar{display:none;}
.mc-cover{flex:0 0 auto;width:74px;position:relative;}
.mc-cover img{width:74px;height:74px;border-radius:11px;object-fit:cover;display:block;box-shadow:0 6px 16px rgba(0,0,0,.34);transition:transform .16s;background:hsl(var(--hue) 30% 14%);}
.mc-cover:hover img{transform:translateY(-2px) scale(1.03);}
.mc-cover .mc-t{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.25;max-height:26px;overflow:hidden;text-align:center;}
/* ── دسته‌های سرچ (مود/ژانر) ── */
.cat-chips{display:flex;flex-wrap:wrap;gap:9px;}
.cat-chip{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,hsl(var(--hue) 55% 40% / .22),hsl(var(--hue) 45% 24% / .16));border:1px solid hsl(var(--hue) 60% 55% / .34);color:var(--ink);font-size:14px;font-weight:800;padding:9px 15px;border-radius:999px;cursor:pointer;transition:transform .14s,border-color .2s,box-shadow .2s;}
.cat-chip:hover{border-color:hsl(var(--hue) 75% 62% / .6);box-shadow:0 8px 24px hsl(var(--hue) 70% 40% / .3);transform:translateY(-1px);}
.cat-chip:active{transform:scale(.97);}
.cat-chip .cc-go{font-size:11px;font-weight:800;color:hsl(var(--hue) 85% 78%);opacity:.9;}
/* ── نقشهٔ زندهٔ موسیقی (نسخهٔ حرفه‌ای) ── */
.map-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.map-hero h3{margin:0 0 4px;font-size:20px;}
.map-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.map-stats b{color:var(--ink);font-weight:800;}
.map-stats .mst-dim{color:var(--muted2);}
.map-stats .mst-live::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ad6a0;margin-inline-end:5px;box-shadow:0 0 0 3px rgba(58,214,160,.22);animation:mkpulse 2s infinite;}
.map-vis{border:1px solid hsl(var(--hue) 60% 55% / .5);background:rgba(255,255,255,.04);color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:800;font-size:13px;cursor:pointer;transition:.18s;font-family:inherit;white-space:nowrap;}
.map-vis:hover{background:rgba(255,255,255,.09);}
.map-vis.on{background:linear-gradient(135deg,hsl(var(--hue) 80% 55%),hsl(var(--hue) 70% 45%));border-color:transparent;color:var(--void);box-shadow:0 8px 22px hsl(var(--hue) 80% 50% / .35);}
.map-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.map-filters .mf{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.15s;}
.map-filters .mf:hover{background:rgba(255,255,255,.09);}
.map-filters .mf.on{background:hsl(var(--hue) 70% 55% / .9);border-color:transparent;color:var(--void);}
.map-filters .mf-ic{padding:7px 11px;font-size:14px;}
.map-filters .mf-sep{flex:1;}
.map-mood-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;}
.map-mood-row .mm{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--ink);font-family:inherit;}
.map-mood-row .mm.on{background:hsl(var(--hue) 75% 55%);color:var(--void);border-color:transparent;font-weight:800;}
.map-wrap{position:relative;margin-bottom:12px;}
#map-canvas{height:min(62vh,600px);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--void);box-shadow:0 24px 60px rgba(0,0,0,.4);}
.leaflet-container{background:var(--void);font-family:inherit;}
.leaflet-control-attribution{background:rgba(10,8,18,.6)!important;color:#6b6480!important;}
.leaflet-control-attribution a{color:#8a82a0!important;}
.map-legend{position:absolute;bottom:12px;inset-inline-start:12px;z-index:500;display:flex;gap:12px;flex-wrap:wrap;color:#cfc9dd;font-size:11px;background:rgba(12,10,20,.72);backdrop-filter:blur(8px);padding:7px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.08);}
.map-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:4px;vertical-align:middle;}
.map-legend .lg-you{background:#3ad6a0;box-shadow:0 0 0 3px rgba(58,214,160,.25);}
.map-legend .lg-user{background:hsl(var(--hue) 80% 60%);}
.map-legend .lg-tribe{background:var(--alert,#C4564F);}
.map-legend .lg-live{background:#ff7ac6;}
/* markers — album-cover pins */
.mk{position:relative;width:44px;height:44px;transform:translate(-50%,-50%);cursor:pointer;}
.mk .cover{position:absolute;inset:0;border-radius:50%;background-size:cover;background-position:center;border:2.5px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.55);overflow:hidden;}
.mk .dot{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-size:17px;border:2.5px solid rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.5);}
.mk .badge{position:absolute;bottom:-3px;inset-inline-end:-3px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--surface);border:1.5px solid rgba(255,255,255,.85);}
.mk.u .cover,.mk.u .dot{border-color:hsl(var(--hue) 85% 62%);}
.mk.u .dot{background:hsl(var(--hue) 80% 55%);}
.mk.me .cover,.mk.me .dot{border-color:#3ad6a0;}
.mk.me .dot{background:#3ad6a0;}
.mk.t .dot{background:linear-gradient(135deg,#e5484d,#ff7a59);}
.mk.l .dot{background:linear-gradient(135deg,#ff7ac6,#c86bff);}
.mk .ring{position:absolute;inset:-7px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:mkpulse 2.2s ease-out infinite;}
.mk.me{color:#3ad6a0;}.mk.u{color:hsl(var(--hue) 85% 62%);}.mk.t{color:#e5484d;}.mk.l{color:#ff7ac6;}
.mk.playing .ring{animation-duration:1.6s;}
@keyframes mkpulse{0%{transform:scale(.55);opacity:.55;}100%{transform:scale(1.6);opacity:0;}}
.mk .tcount{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--alert,#C4564F);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:1.5px solid var(--bg);}
.mk-cluster{width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,hsl(var(--hue) 80% 55% / .95),hsl(var(--hue) 70% 42% / .95));display:grid;place-items:center;color:var(--void);font-weight:900;font-size:14px;border:2.5px solid rgba(255,255,255,.85);box-shadow:0 4px 16px rgba(0,0,0,.5);cursor:pointer;}
/* sound of your area */
.map-area{margin:2px 0 14px;}
.map-area .ma-h{font-weight:800;font-size:14px;margin-bottom:8px;display:flex;align-items:center;gap:7px;}
.map-area .ma-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;}
.map-area .ma-row::-webkit-scrollbar{display:none;}
.map-area .ma-card{flex:0 0 auto;width:112px;cursor:pointer;}
.map-area .ma-card img{width:112px;height:112px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08);}
.map-area .ma-card .t{font-size:12px;font-weight:700;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.map-area .ma-card .a{font-size:11px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* pin card */
.map-panel{position:relative;background:rgba(18,14,28,.97);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;margin-bottom:24px;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.map-panel .mp-x{position:absolute;top:10px;inset-inline-end:12px;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;}
.map-panel .mp-top{display:flex;align-items:center;gap:12px;}
.map-panel .mp-av{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;color:var(--void);flex:0 0 auto;background-size:cover;background-position:center;font-size:20px;}
.map-panel .mp-name{font-weight:800;font-size:16px;}
.map-panel .mp-sub{color:var(--muted2);font-size:12.5px;margin-top:3px;line-height:1.5;}
.map-panel .mp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.map-panel .mp-acts button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--ink);border-radius:12px;padding:9px 13px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.15s;}
.map-panel .mp-acts button:hover{background:rgba(255,255,255,.11);}
.map-panel .mp-acts button.primary{background:linear-gradient(135deg,hsl(var(--hue) 80% 55%),hsl(var(--hue) 70% 45%));border-color:transparent;color:var(--void);}
/* ── سوشال ── */
.soc-new{margin-inline-start:8px;border:1px solid hsl(var(--hue) 60% 55% / .5);background:rgba(255,255,255,.04);color:var(--ink);border-radius:999px;padding:6px 13px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.soc-new:hover{background:rgba(255,255,255,.09);}
.soc-stories{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 16px;scrollbar-width:none;}
.soc-stories::-webkit-scrollbar{display:none;}
.st-item{flex:0 0 auto;width:72px;text-align:center;cursor:pointer;}
.st-ring{width:66px;height:66px;border-radius:50%;padding:3px;margin:0 auto;background:conic-gradient(from 210deg,hsl(var(--hue) 85% 60%),#e5484d,#ff7ac6,hsl(var(--hue) 85% 60%));display:grid;place-items:center;}
.st-ring.seen{background:rgba(255,255,255,.18);}
.st-ring.mine{background:rgba(255,255,255,.14);}
.st-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--card);display:grid;place-items:center;border:2px solid var(--bg);}
.st-inner img{width:100%;height:100%;object-fit:cover;}
.st-inner .ph{font-weight:800;font-size:22px;color:hsl(var(--hue) 70% 60%);}
.st-add{position:relative;}
.st-add .plus{position:absolute;bottom:-2px;inset-inline-end:2px;width:20px;height:20px;border-radius:50%;background:hsl(var(--hue) 80% 55%);color:var(--void);display:grid;place-items:center;font-weight:900;font-size:14px;border:2px solid var(--bg);}
.st-lbl{font-size:11px;color:var(--muted2);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.soc-feed{display:flex;flex-direction:column;gap:18px;max-width:540px;margin:6px auto 40px;}
.post{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;}
.post-h{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.post-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--void);cursor:pointer;flex:0 0 auto;}
.post-u{font-weight:800;font-size:14px;cursor:pointer;}
.post-sub{color:var(--muted2);font-size:11.5px;}
.post-media img,.post-media video{width:100%;max-height:520px;object-fit:cover;display:block;background:#000;}
.post-cap{padding:10px 14px 4px;font-size:14px;line-height:1.6;}
.post-song{margin:6px 14px 0;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border-radius:10px;padding:6px 10px;font-size:12.5px;color:var(--ink);cursor:pointer;}
.post-acts{display:flex;align-items:center;gap:16px;padding:10px 14px 14px;color:var(--muted);}
.post-acts button{background:none;border:0;color:inherit;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit;}
.post-acts .lk.on{color:#e5484d;}
.post-del{margin-inline-start:auto;color:var(--muted2)!important;}
/* story viewer */
.story-viewer{position:fixed;inset:0;z-index:400;background:rgba(6,4,12,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.sv-bars{position:absolute;top:12px;inset-inline:14px;display:flex;gap:5px;z-index:3;}
.sv-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;}
.sv-bars i b{display:block;height:100%;width:0;background:#fff;}
.sv-bars i.done b{width:100%;}
.sv-bars i.cur b{animation:svfill 5s linear forwards;}
@keyframes svfill{from{width:0}to{width:100%}}
.sv-head{position:absolute;top:24px;inset-inline:16px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff;}
.sv-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--void);font-size:14px;}
.sv-name{font-weight:800;font-size:14px;}.sv-time{color:rgba(255,255,255,.6);font-size:12px;}
.sv-x{margin-inline-start:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;}
.sv-img{max-width:min(460px,96vw);max-height:82vh;border-radius:14px;object-fit:contain;}
.sv-cap{position:absolute;bottom:40px;inset-inline:24px;text-align:center;color:#fff;font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.8);}
.sv-nav{position:absolute;top:0;bottom:0;width:40%;background:none;border:0;cursor:pointer;z-index:2;}
.sv-prev{inset-inline-start:0;}.sv-next{inset-inline-end:0;}
/* compose */
.sc-drop{display:block;cursor:pointer;margin:12px 0;}
.sc-preview{border:2px dashed rgba(255,255,255,.18);border-radius:14px;min-height:200px;display:grid;place-items:center;color:var(--muted2);overflow:hidden;}
.sc-preview img,.sc-preview video{width:100%;max-height:340px;object-fit:contain;border-radius:12px;}
.sc-cap,.sc-place{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--ink);padding:11px 13px;font-family:inherit;font-size:14px;margin-bottom:10px;box-sizing:border-box;}
.sc-go{width:100%;border:0;border-radius:12px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;background:linear-gradient(135deg,hsl(var(--hue) 80% 55%),hsl(var(--hue) 70% 45%));color:var(--void);font-family:inherit;}
.sc-go:disabled{opacity:.5;cursor:default;}
.cm-list{max-height:50vh;overflow-y:auto;margin:10px 0;display:flex;flex-direction:column;gap:10px;}
.cm-row{display:flex;gap:9px;align-items:flex-start;}
.cm-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--void);font-size:12px;flex:0 0 auto;}
.cm-b .cu{font-weight:800;font-size:12.5px;}.cm-b .ct{font-size:13.5px;color:var(--ink);}
.cm-input{display:flex;gap:8px;}
.cm-input input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--ink);padding:10px 13px;font-family:inherit;}
.cm-input button{border:0;border-radius:12px;padding:0 16px;font-weight:800;background:hsl(var(--hue) 80% 55%);color:var(--void);cursor:pointer;font-family:inherit;}

/* ── سوشال‌هاب + پیام‌ها ── */
.soc-hub{display:flex;gap:10px;margin:4px 0 14px;flex-wrap:wrap}
.soc-hub-b{position:relative;display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--tx);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.soc-hub-b:hover{background:rgba(255,255,255,.11)}
.dm-badge{position:static;background:linear-gradient(135deg,#e94560,#ff8a5c);color:#fff;border-radius:9px;font-size:10.5px;font-weight:900;padding:2px 7px}
.soc-req{display:flex;align-items:center;gap:10px;background:color-mix(in srgb, var(--accent) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.soc-req b{flex:1}
.soc-req .ok{background:linear-gradient(135deg,var(--accent),#7c5cff);color:#fff;border:0;border-radius:12px;padding:9px 16px;font:inherit;font-weight:800;cursor:pointer}
.soc-req .no{background:rgba(255,255,255,.07);color:var(--tx);border:0;border-radius:12px;padding:9px 14px;font:inherit;cursor:pointer}
.dm-card{max-width:430px;width:min(94vw,430px);max-height:76vh;display:flex;flex-direction:column;text-align:start}
.dm-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dm-head h3{margin:0;font-size:16px}
.dm-back{background:rgba(255,255,255,.08);border:0;border-radius:10px;color:var(--tx);width:32px;height:32px;font-size:16px;cursor:pointer}
.dm-list{overflow-y:auto;flex:1;min-height:120px}
.dm-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:12px;cursor:pointer}
.dm-row:hover{background:rgba(255,255,255,.05)}
.dm-row .nm{font-weight:800}
.dm-row .lst{color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.dm-row .un{margin-inline-start:auto;background:linear-gradient(135deg,#e94560,#ff8a5c);color:#fff;border-radius:9px;font-size:10.5px;font-weight:900;padding:2px 7px}
.dm-thread{overflow-y:auto;flex:1;min-height:180px;max-height:48vh;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.dm-b{max-width:78%;padding:9px 13px;border-radius:15px;font-size:13.5px;line-height:1.7;width:fit-content}
.dm-b.me{align-self:flex-start;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#000 5%),#7c5cff);color:#fff;border-end-start-radius:5px}
.dm-b.them{align-self:flex-end;background:rgba(255,255,255,.08);border-end-end-radius:5px}
.dm-b .tm{display:block;font-size:9.5px;opacity:.65;margin-top:3px}
.dm-inputrow{display:flex;gap:8px;margin-top:10px}
.dm-inputrow input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:11px 14px;color:var(--tx);font:inherit}
.dm-send{padding:10px 18px !important;width:auto !important}
.soc-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
@media(min-width:1020px){.soc-cols{grid-template-columns:minmax(0,1fr) 330px}
  .soc-side{position:sticky;top:12px}}
.soc-side>div:not(:empty){background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:14px 16px;margin-bottom:14px}
.soc-side .sec-h{margin:0 0 10px}
.soc-side .sec-h h3{font-size:14px}
.soc-side .lp-row{flex-direction:column;overflow:visible}
.soc-side .lp-card{min-width:0}
.soc-side .soc-sug{background:none;border:0;padding:0;margin:0}
.soc-feed .post{max-width:560px;margin-inline:auto}
.soc-stories{margin-bottom:16px}
.up-actrow{display:flex;gap:8px;justify-content:center;margin-top:10px}
.soc-sug{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;margin-top:14px}
.soc-sug h4{margin:0 0 12px;font-size:14px}
.soc-sug-row{display:flex;align-items:center;gap:10px;padding:8px 4px}
.soc-sug-row .nm{flex:1;font-weight:700}
.soc-sug-row .meta2{color:var(--mut);font-size:11.5px}
.soc-sug-row .fw{background:linear-gradient(135deg,var(--accent),#7c5cff);color:#fff;border:0;border-radius:11px;padding:8px 14px;font:inherit;font-weight:800;cursor:pointer}

/* ست آیکونِ شب‌تاب — mask-image تا رنگ از currentColor بیاید */
.hi{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;
  background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;flex:none;}
.hi-bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%201%200-12%200c0%206-2%207-2%207h16s-2-1-2-7%22%2F%3E%3Cpath%20d%3D%22M10.5%2020a2%202%200%200%200%203%200%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%201%200-12%200c0%206-2%207-2%207h16s-2-1-2-7%22%2F%3E%3Cpath%20d%3D%22M10.5%2020a2%202%200%200%200%203%200%22%2F%3E%3C%2Fsvg%3E");}
.hi-block{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m5.6%205.6%2012.8%2012.8%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m5.6%205.6%2012.8%2012.8%22%2F%3E%3C%2Fsvg%3E");}
.hi-bolt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%204%2014h6l-1%208%209-12h-6z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%204%2014h6l-1%208%209-12h-6z%22%2F%3E%3C%2Fsvg%3E");}
.hi-camera{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%227%22%20width%3D%2213%22%20height%3D%2210%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22m16.5%2011%205-3v8l-5-3z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%227%22%20width%3D%2213%22%20height%3D%2210%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22m16.5%2011%205-3v8l-5-3z%22%2F%3E%3C%2Fsvg%3E");}
.hi-chat{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-8%208H7l-4%203%201-5.5A8%208%200%201%201%2021%2012z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-8%208H7l-4%203%201-5.5A8%208%200%201%201%2021%2012z%22%2F%3E%3C%2Fsvg%3E");}
.hi-dj{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015V9M8%2018V6M12%2016V8M16%2019V5M20%2014v-4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015V9M8%2018V6M12%2016V8M16%2019V5M20%2014v-4%22%2F%3E%3C%2Fsvg%3E");}
.hi-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M12%203a15%2015%200%200%201%200%2018a15%2015%200%200%201%200-18z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M12%203a15%2015%200%200%201%200%2018a15%2015%200%200%201%200-18z%22%2F%3E%3C%2Fsvg%3E");}
.hi-headphones{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015v-3a8%208%200%200%201%2016%200v3%22%2F%3E%3Crect%20x%3D%222.5%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2217.5%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015v-3a8%208%200%200%201%2016%200v3%22%2F%3E%3Crect%20x%3D%222.5%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2217.5%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");}
.hi-map{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%206%206-2%206%202%206-2v14l-6%202-6-2-6%202z%22%2F%3E%3Cpath%20d%3D%22M9%204v16M15%206v16%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%206%206-2%206%202%206-2v14l-6%202-6-2-6%202z%22%2F%3E%3Cpath%20d%3D%22M9%204v16M15%206v16%22%2F%3E%3C%2Fsvg%3E");}
.hi-masks{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h7v7a3.5%203.5%200%200%201-7%200z%22%2F%3E%3Cpath%20d%3D%22M13%208h7v7a3.5%203.5%200%200%201-7%200z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h7v7a3.5%203.5%200%200%201-7%200z%22%2F%3E%3Cpath%20d%3D%22M13%208h7v7a3.5%203.5%200%200%201-7%200z%22%2F%3E%3C%2Fsvg%3E");}
.hi-mic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2014%200%22%2F%3E%3Cpath%20d%3D%22M12%2018v3%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2014%200%22%2F%3E%3Cpath%20d%3D%22M12%2018v3%22%2F%3E%3C%2Fsvg%3E");}
.hi-micoff{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206a3%203%200%200%201%206%200v5%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2011%205.5%22%2F%3E%3Cpath%20d%3D%22M12%2018v3%22%2F%3E%3Cpath%20d%3D%22m4%204%2016%2016%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206a3%203%200%200%201%206%200v5%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2011%205.5%22%2F%3E%3Cpath%20d%3D%22M12%2018v3%22%2F%3E%3Cpath%20d%3D%22m4%204%2016%2016%22%2F%3E%3C%2Fsvg%3E");}
.hi-moon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2014.5A8.5%208.5%200%200%201%209.5%204a8.5%208.5%200%201%200%2010.5%2010.5z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2014.5A8.5%208.5%200%200%201%209.5%204a8.5%208.5%200%201%200%2010.5%2010.5z%22%2F%3E%3C%2Fsvg%3E");}
.hi-party{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2020%206-14%208%208z%22%2F%3E%3Cpath%20d%3D%22M15%204v2M19%208h2M17.5%203.5%2019%205%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2020%206-14%208%208z%22%2F%3E%3Cpath%20d%3D%22M15%204v2M19%208h2M17.5%203.5%2019%205%22%2F%3E%3C%2Fsvg%3E");}
.hi-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6.2%207-11a7%207%200%201%200-14%200c0%204.8%207%2011%207%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6.2%207-11a7%207%200%201%200-14%200c0%204.8%207%2011%207%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E");}
.hi-radio{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M6.5%208.5a7.5%207.5%200%200%200%200%2011M17.5%208.5a7.5%207.5%200%200%201%200%2011%22%2F%3E%3Cpath%20d%3D%22M18%203%208%206.5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M6.5%208.5a7.5%207.5%200%200%200%200%2011M17.5%208.5a7.5%207.5%200%200%201%200%2011%22%2F%3E%3Cpath%20d%3D%22M18%203%208%206.5%22%2F%3E%3C%2Fsvg%3E");}
.hi-sparkle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202%206%206%202-6%202-2%206-2-6-6-2%206-2z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202%206%206%202-6%202-2%206-2-6-6-2%206-2z%22%2F%3E%3C%2Fsvg%3E");}
.hi-target{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3%22%2F%3E%3C%2Fsvg%3E");}
.hi-volume{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%205%206.5%209H3v6h3.5L11%2019z%22%2F%3E%3Cpath%20d%3D%22M15.5%209.5a3.5%203.5%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M18%207a7%207%200%200%201%200%2010%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%205%206.5%209H3v6h3.5L11%2019z%22%2F%3E%3Cpath%20d%3D%22M15.5%209.5a3.5%203.5%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M18%207a7%207%200%200%201%200%2010%22%2F%3E%3C%2Fsvg%3E");}
.hi-wheel{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%203v7M12%2014v7M3%2012h7M14%2012h7%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%203v7M12%2014v7M3%2012h7M14%2012h7%22%2F%3E%3C%2Fsvg%3E");}

/* ═══════════════════════════════════════════════════════════════════════
   لایهٔ شب‌تاب — بازتعریفِ ساختارها روی کلاس‌های موجود.
   عمداً انتهای شیوه‌نامه است تا تخصصِ برابر به نفعِ این لایه تمام شود.
   ═══════════════════════════════════════════════════════════════════════ */

:root{ --alert:#C4564F; }

/* ── نور و زمینه: پرده‌های بنفشِ قدیمی برداشته می‌شوند ───────────────── */
body{ font-family:var(--serif); }
.veil{ background:radial-gradient(120% 80% at 50% -10%, transparent 42%,
        rgba(8,9,11,.55) 76%, var(--bg) 100%) !important; }
#ambient{ opacity:.42; }

/* ── ریل ─────────────────────────────────────────────────────────────
   لبهٔ رو به محتوا در ریلِ راست inline-END است. inline-start در RTL
   روی لبهٔ صفحه می‌نشیند و اصلاً دیده نمی‌شود. */
.rail{ background:var(--void);
  border-inline-end:1px solid var(--glass-line); border-inline-start:0;
  border-right:0; border-left:0; }
html[dir="rtl"] .rail{ border-inline-end:1px solid var(--glass-line); }

.brand2 .brandname{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; }
.glyph{ animation:none !important; border-radius:10px;
  background:var(--accent) !important; color:var(--void) !important;
  box-shadow:0 6px 18px var(--emit-glow) !important; }

.navitem{ border-radius:10px; font-weight:600; font-size:14.5px; position:relative;
  padding:10px 11px; gap:12px; }
.navitem:hover{ background:var(--raised); }
.navitem.on{ background:var(--raised); color:var(--ink); }
.navitem.on::before{ content:''; position:absolute; inset-inline-end:-11px; top:50%;
  transform:translateY(-50%); width:3px; height:18px; border-radius:2px; background:var(--accent); }
.navitem .ic{ color:var(--muted); display:grid; place-items:center; width:22px; }
.navitem.on .ic{ color:var(--accent); }
.navitem .ic svg{ width:19px; height:19px; display:block; }
.glyph svg{ width:19px; height:19px; }
/* مقصدهای بازنشسته: در DOM می‌مانند تا JS نشکند، ولی دیده نمی‌شوند. */
.navitem.is-retired{ display:none !important; }

.libpanel{ background:transparent; border:0; border-radius:0; }
.libhead{ font:600 10.5px/1 var(--mono); letter-spacing:.14em; color:var(--muted2); }

/* ── تاپ‌بار و جست‌وجو ───────────────────────────────────────────────── */
.topbar.solid{ background:rgba(11,13,16,.72); border-bottom:1px solid var(--glass-line); }
.searchwrap{ background:var(--surface); border:1px solid var(--glass-line);
  border-radius:var(--r-pill); }
.searchwrap:focus-within{ border-color:var(--accent);
  background:var(--surface); box-shadow:0 0 0 4px var(--emit-veil); }
.upbtn{ background:var(--surface); border:1px solid var(--glass-line); border-radius:var(--r-pill); }
.upbtn:hover{ background:var(--raised); border-color:var(--muted2); }

/* ── تیتر و مقیاسِ تایپ ──────────────────────────────────────────────── */
.stage-idle h1,.stage-idle h2,.live-meta h2,.fs-meta h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em; }
.stage-idle h1 em,.live-meta h2 em{
  font-style:normal; background:none; -webkit-text-fill-color:currentColor;
  color:var(--accent); }
/* ── سرصفحهٔ بخش ─────────────────────────────────────────────────────
   لوزیِ چرخانِ طلایی برداشته شد. در شب‌تاب سلسله‌مراتب را خطِ افقی
   می‌سازد، نه یک نشانِ تزئینی. تیتر هم از ۲۷px/۶۰۰ به مقیاسِ واقعی آمد. */
.sec-h{ font-family:var(--serif); font-weight:700; letter-spacing:-.015em;
  align-items:baseline; gap:12px; margin:30px 0 14px; }
.sec-h h3{ font-family:var(--serif) !important; font-weight:700 !important;
  font-size:18px !important; letter-spacing:-.015em !important; }
.sec-h h3::before{ display:none !important; }
.sec-h::after{ content:''; flex:1; height:1px; background:var(--glass-line); }
.sec-h .meta{ font:500 10.5px/1 var(--mono); letter-spacing:.1em; color:var(--muted2); }
.mtitle,.cosmos-title{ font-family:var(--serif); font-weight:700; letter-spacing:-.02em; }

/* ── ریل: پنلِ چسبیده به لبه، نه کارتِ شناور ────────────────────────
   کارتِ شناورِ گِرد + خطِ جداکننده با هم بی‌معنی‌اند؛ یکی را باید انتخاب کرد. */
@media (min-width:901px){
  .shell{ grid-template-columns:var(--rail-w) 1fr !important; }
  .rail{ margin:0 !important; border-radius:0 !important;
    background:var(--void) !important; box-shadow:none !important;
    border:0 !important; border-inline-end:1px solid var(--glass-line) !important; }
}

/* عدد همیشه در رجیسترِ داده: تک‌فاصله و هم‌عرض */
.statline .st b,.np-aco,.p-time,.fs-times,.dur,.mono{
  font-family:var(--mono); font-variant-numeric:tabular-nums; }
.statline .st b{ font-size:19px; font-weight:600; }
.statline .st span{ font:500 10px/1.8 var(--mono); letter-spacing:.14em; color:var(--muted2); }

/* ── چیپ‌ها: کپسول فقط برای کنش ─────────────────────────────────────── */
.mchip,.gtag,.lt-chip,.u-chip{ border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--glass-line); color:var(--muted);
  font-weight:600; }
.mchip:hover,.gtag:hover{ color:var(--ink); border-color:var(--muted2); background:var(--surface); }
.mchip.on,.gtag.on{ background:var(--accent); color:var(--void);
  border-color:transparent; box-shadow:none; font-weight:700; }

/* ── کارت و قفسه: شعاعِ «محتوا» ─────────────────────────────────────── */
.card,.mcard,.scard,.album{ border-radius:var(--r-card); background:var(--surface);
  border:1px solid var(--glass-line); }
.shelf .art,.frame,.ca{ border-radius:12px; }

/* ── دکمه ───────────────────────────────────────────────────────────── */
.btn{ border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--glass-line); color:var(--ink); font-weight:600; }
.btn:hover{ background:var(--raised); border-color:var(--muted2); }
.btn.primary,.btn-primary{ background:var(--accent); color:var(--void);
  border-color:transparent; font-weight:700; box-shadow:0 7px 20px var(--emit-glow); }

/* ── پخش‌کننده ──────────────────────────────────────────────────────── */
.player{ background:var(--surface); border-top:1px solid var(--glass-line);
  backdrop-filter:none; }
.p-art{ border-radius:9px; box-shadow:0 8px 20px rgba(0,0,0,.4),
  inset 0 0 0 1px rgba(255,255,255,.1); }
.p-play{ background:var(--accent) !important; color:var(--void) !important;
  box-shadow:0 7px 18px var(--emit-glow); }
.p-icon.on{ color:var(--accent); }
.p-bar{ background:var(--accent); }
.p-seek{ background:var(--glass-line); }

/* ── تمام‌صفحه ──────────────────────────────────────────────────────── */
.fs{ background:var(--bg); }
.fs-tab.on{ background:var(--raised); color:var(--ink); }
.fs-tab.on::after{ background:var(--accent); }
#fs-disc{ animation:none !important; border-radius:20px !important; }
.fs-disc-wrap::after{ content:''; position:absolute; inset:6% -5% -12% -5%;
  background:var(--accent); filter:blur(52px); opacity:.42; border-radius:50%; z-index:0; }
.fs-disc-wrap > *{ position:relative; z-index:1; }

/* ── مودال ──────────────────────────────────────────────────────────── */
.modal{ background:var(--surface); border:1px solid var(--glass-line);
  border-radius:var(--r-card); }
/* گرادیان‌های هاردکدِ بنفش/آبی با --hue می‌جنگیدند */
#auth-sso,.sso-btn{
  background:var(--accent) !important; color:var(--void) !important; border:0 !important; }
/* دکمهٔ «دنبال» در فهرستِ پیشنهادها تکرار می‌شود؛ اگر پُررنگ باشد هشت
   دکمهٔ فریادزن کنارِ هم می‌نشیند. تابشِ پُر فقط برای کنشِ اصلیِ صفحه. */
.soc-sug-row .fw{
  background:transparent !important; color:var(--accent) !important;
  border:1px solid var(--glass-line) !important; font-weight:600 !important; }
.soc-sug-row .fw:hover{ background:var(--raised) !important;
  border-color:var(--accent) !important; }

/* ── ناوبریِ موبایل ─────────────────────────────────────────────────── */
.mobnav{ background:var(--surface); border-top:1px solid var(--glass-line);
  backdrop-filter:none; }
.mobnav .on{ color:var(--accent); }

/* ── حالتِ خالی و دروازه ────────────────────────────────────────────── */
.empty,.lv-empty{ border:1px dashed var(--glass-line); border-radius:var(--r-card);
  background:var(--surface); color:var(--muted); }

/* ── کارتِ کانال و بنرِ مناسبت ────────────────────────────────────────
   هر کانال --ch خودش را داشت و کلِ کارت را پر می‌کرد؛ نتیجه یک سالادِ
   رنگی بود که مستقیم با اصلِ شب‌تاب می‌جنگید. قاعدهٔ اشباع: کروماییِ
   بالا فقط روی سطحِ کوچک (نشان، لبهٔ هاور، متنِ فرعی). سطحِ بزرگ نزدیکِ
   بی‌رنگ می‌ماند و رنگِ واقعی را کاور می‌آورد. */
.rchan{
  background:
    linear-gradient(135deg, hsl(var(--ch,280) 38% 30% / .16), transparent 62%),
    var(--surface) !important;
  border:1px solid var(--glass-line) !important;
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
}
.rchan:hover{
  border-color:hsl(var(--ch,280) 60% 60% / .45) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.4) !important;
}
/* پردهٔ روی کاور: خنثی، تا کاور تنها منبعِ رنگ بماند */
.rchan .rc-duo{
  background:linear-gradient(110deg, rgba(20,23,28,.96) 16%,
    rgba(20,23,28,.72) 52%, rgba(20,23,28,.12)) !important; }
/* نشانِ ایموجیِ گوشهٔ کارت — جایش را به خودِ کاور می‌دهد */
.rchan .rc-emoji{ display:none !important; }
/* دکمهٔ پخش: تنها جای مجاز برای کروماییِ بالا روی این کارت */
.rchan .rc-play{ background:var(--accent) !important; color:var(--void) !important;
  box-shadow:0 6px 18px var(--emit-glow) !important; }
/* لوزیِ طلاییِ تزئینی — طلا در شب‌تاب فقط نشانهٔ نقطهٔ گذارِ دی‌جی است */
.rchan::before{ display:none !important; }

/* ── هیرو: ۹۶ پیکسل فاصلهٔ بالا یک نوارِ مردهٔ تمام‌عرض می‌ساخت ─────── */
.stage{ padding-block-start:40px !important; }
.occ-banner{
  background:
    linear-gradient(120deg, hsl(var(--ch,280) 38% 30% / .16), transparent 62%),
    var(--surface) !important;
  border:1px solid var(--glass-line) !important;
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
}

/* ── نوارِ رادیوی بی‌وقفه ─────────────────────────────────────────────
   «حالِ الانم» (میدانِ دوبعدی) برداشته شد — گیج‌کننده بود. چیپ‌های حال هم
   در DOM می‌مانند چون pickMood با .mchip کار می‌کند، ولی دیده نمی‌شوند. */
.moodbar{ display:none !important; }
.smartbar{ display:flex; align-items:center; margin:14px 0 2px; }
.moodfield-wrap{ display:flex; align-items:flex-end; gap:18px; margin:0 0 20px; flex-wrap:wrap; }
.moodfield{ position:relative; width:210px; aspect-ratio:16/11; flex:none; cursor:crosshair;
  touch-action:none; overflow:hidden; border:1px solid var(--glass-line);
  border-radius:var(--r-card);
  background:radial-gradient(70% 70% at 76% 24%, var(--emit-veil), transparent 70%), var(--surface); }
.mf-gh{ position:absolute; inset-inline:0; top:50%; height:1px; background:var(--edge-soft,rgba(255,255,255,.05)); }
.mf-gv{ position:absolute; inset-block:0; inset-inline-start:50%; width:1px; background:var(--edge-soft,rgba(255,255,255,.05)); }
.mf-puck{ position:absolute; width:22px; height:22px; border-radius:50%; background:var(--accent);
  transform:translate(50%,-50%); pointer-events:none; transition:inset-inline-start .08s linear, top .08s linear;
  box-shadow:0 0 0 5px var(--emit-veil), 0 6px 18px var(--emit-glow); }
.mf-l{ position:absolute; font:600 9.5px/1 var(--mono); letter-spacing:.1em; color:var(--muted2); }
.mf-l.t{ top:9px; inset-inline:0; text-align:center; }
.mf-l.b{ bottom:9px; inset-inline:0; text-align:center; }
.mf-l.s{ inset-inline-start:9px; top:50%; transform:translateY(-50%); }
.mf-l.e{ inset-inline-end:9px; top:50%; transform:translateY(-50%); }
.moodfield-side{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding-block-end:2px; }
.moodfield-side .mood-lbl{ font:500 10.5px/1 var(--mono); letter-spacing:.12em; color:var(--muted2); }
.moodfield-side #mf-name{ font-size:21px; font-weight:700; letter-spacing:-.02em; }
@media (prefers-reduced-motion:reduce){ .mf-puck{ transition:none; } }

/* ── تبِ دی‌جی در تمام‌صفحه ───────────────────────────────────────────── */
.fs.tab-dj .fs-disc-wrap{ opacity:0; pointer-events:none; }
.fs.tab-dj #fs-dj{ opacity:1; pointer-events:auto; }
#fs-dj{ opacity:0; pointer-events:none; }
.dj-pair{ display:flex; flex-direction:column; gap:2px; }
.dj-side{ display:flex; align-items:center; gap:11px; padding:10px;
  border:1px solid var(--glass-line); border-radius:12px; background:var(--raised); }
.dj-side .dj-th{ width:42px; height:42px; border-radius:7px; overflow:hidden; flex:none; }
.dj-side .dj-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.dj-side .dj-tx{ min-width:0; }
.dj-side .dj-tx .t{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dj-side .dj-tx .a{ font-size:11.5px; color:var(--muted2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dj-arrow{ text-align:center; color:var(--muted2); font-size:16px; padding-block:5px; }
.dj-plan{ margin-block-start:13px; padding:11px 12px; border:1px solid var(--glass-line);
  border-radius:12px; background:var(--raised); }
.dj-line{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-block:8px; border-block-start:1px solid var(--edge-soft,rgba(255,255,255,.05)); font-size:12.5px; }
.dj-line:first-child{ border-block-start:0; }
.dj-line b{ font:600 11.5px/1 var(--mono); color:var(--accent); font-variant-numeric:tabular-nums; }

/* ── دروازهٔ «جمع»: پیش‌نمایش، نه دیوار ───────────────────────────────── */
.soc-gate{ position:relative; overflow:hidden; min-height:250px; margin-top:14px;
  border:1px solid var(--glass-line); border-radius:var(--r-card); background:var(--surface); }
.sg-peek{ padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:11px; filter:blur(3px); opacity:.4; align-content:start; min-height:250px; }
.sg-card{ display:flex; align-items:center; gap:11px; padding:9px;
  border:1px solid var(--glass-line); border-radius:14px; background:var(--raised); }
.sg-av{ width:40px; height:40px; border-radius:50%; flex:none; background:var(--raised-2); }
.sg-tx{ flex:1; min-width:0; }
.sg-t{ height:10px; border-radius:3px; background:var(--raised-2); margin-block-end:7px; width:70%; }
.sg-s{ height:8px; border-radius:3px; background:var(--raised-2); width:45%; }
.sg-msg{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; text-align:center; padding:22px;
  background:linear-gradient(180deg, transparent, var(--surface) 60%); }
.sg-msg h3{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.02em; }
.sg-msg p{ margin:0; font-size:13.5px; color:var(--muted); max-width:44ch; line-height:1.75; }

/* ═══ کامپوننت‌های اختصاصیِ شب‌تاب ═════════════════════════════════════
   اینها را فقط هارمونیا می‌تواند داشته باشد، چون روی دادهٔ لایهٔ هوشِ
   موسیقی سوارند: تمپو، کلیدِ کملوت، انرژی، گذار.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ۱. نوارِ آکوستیک ──────────────────────────────────────────────── */
#cosmos{ display:none !important; }     /* منظومه: نمودارِ مداریِ بی‌کار */
.np-aco{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font:600 11px/1 var(--mono) !important; letter-spacing:.08em;
  color:var(--muted2); font-variant-numeric:tabular-nums; }
.np-aco .ac-i{ display:inline-flex; align-items:center; gap:5px; }
.np-aco .ac-i i{ font-style:normal; color:var(--accent); font-weight:700; }
.np-aco .ac-d{ width:1px; height:10px; background:var(--glass-line); }
/* گویِ کملوت: حلقهٔ کوچکی که «کلید» را به یک شیء تبدیل می‌کند، نه یک کد */
.np-aco .ac-key s{ width:9px; height:9px; border-radius:50%; text-decoration:none;
  border:1.5px solid var(--accent); opacity:.75; }
.np-aco .ac-mode{ opacity:.72; }
/* انرژی: پنج قطعه — خواندنش از عدد سریع‌تر است */
.np-aco .ac-en{ gap:2.5px; }
.np-aco .ac-en s{ width:3.5px; height:10px; border-radius:1px; text-decoration:none;
  background:var(--glass-line); }
.np-aco .ac-en s.on{ background:var(--accent); }

/* ── ۲. کارتِ قفسه ─────────────────────────────────────────────────────
   هاورِ قبلی فقط کارت را بالا می‌برد. حالا یک دکمهٔ پخشِ تابان از پایین
   می‌آید و کاور کمی جلو می‌آید — کنش دمِ دست، بدونِ شلوغیِ همیشگی. */
.card .frame{ border-radius:14px !important; }
.card:hover .frame{ box-shadow:0 26px 54px rgba(0,0,0,.55),
  0 0 0 1px hsl(var(--hue) 70% 60% / .28) !important; }
.card .frame::after{ content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top, rgba(8,9,11,.72), transparent);
  opacity:0; transition:opacity .25s var(--ease,cubic-bezier(.22,1,.36,1)); pointer-events:none; }
.card:hover .frame::after{ opacity:1; }
/* دکمهٔ پخش: گرادیانِ دو-رنگه با --hue می‌جنگید؛ حالا تابشِ خالص.
   right/left فیزیکی بودند — در راست‌به‌چپ رتبه باید اولِ خط (راست) بنشیند
   و کنش انتهای خط (چپ). */
/* ترتیب مهم است: ریستِ فیزیکی باید *قبل* از خصوصیتِ منطقی بیاید، وگرنه
   left:auto همان left‌ای را که inset-inline-end تولید کرده خنثی می‌کند و
   دکمه سرِ جای قبلی‌اش می‌ماند. */
.card .pin{ right:auto; left:auto;
  inset-inline-end:10px; bottom:10px; width:40px; height:40px;
  background:var(--accent) !important; color:var(--void) !important;
  box-shadow:0 8px 22px var(--emit-glow) !important; font-size:15px; }
.card:focus-within .pin{ opacity:1; transform:none; }
.card .rk{ left:auto; right:auto; inset-inline-start:12px;
  font-family:var(--mono) !important; font-size:30px !important; font-weight:600 !important;
  color:var(--ink); opacity:.9; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){
  .card .pin{ transition:none; } .card:hover .frame{ transform:none !important; } }

/* ── ۳. زمینهٔ محیطی ───────────────────────────────────────────────────
   پنج لکهٔ رنگیِ ضربان‌دار با اشباعِ بالا کلِ صفحه را رنگی می‌کرد و با
   قاعدهٔ «سطحِ بزرگ نزدیکِ بی‌رنگ» می‌جنگید. نور می‌ماند، غلظت نه. */
#ambient{ opacity:.14 !important; }

/* ═══ هیروِ محتوایی ════════════════════════════════════════════════════
   یک سرویسِ استریم باید با موسیقی شروع شود، نه با شعار. بزرگ‌ترین
   آرت‌ورکِ صفحه اینجاست و رنگش را خودِ کاور می‌دهد. */
.hero-feature{ display:none; }
.hero-feature.on{ display:flex; align-items:center; gap:26px; margin:14px 0 4px;
  padding:18px; border:1px solid var(--glass-line); border-radius:var(--r-card);
  background:var(--surface); position:relative; overflow:hidden; }
.hero-feature::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 150% at 88% 50%, var(--emit-veil), transparent 62%); }
.hero-feature > *{ position:relative; }
/* آرت‌ورک باید وزنِ تیتر را تاب بیاورد، وگرنه هیرو نامتوازن می‌شود */
.hf-art{ width:min(232px,24vw); aspect-ratio:1; flex:none; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 46px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
.hf-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.hf-body{ min-width:0; flex:1; }
.hf-kick{ font:600 10.5px/1 var(--mono); letter-spacing:.16em; color:var(--muted2); }
.hf-title{ margin:10px 0 0 !important; font-family:var(--serif) !important;
  font-size:clamp(26px,3.4vw,44px) !important; font-weight:700 !important;
  letter-spacing:-.03em !important; line-height:1.1 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hf-artist{ margin-block-start:6px; font-size:15px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hf-aco{ margin-block-start:11px; }
.hf-acts{ display:flex; align-items:center; gap:9px; margin-block-start:16px; flex-wrap:wrap; }
/* .btn پایه display:block است؛ به‌عنوان آیتمِ فلکس تمامِ عرض را می‌گرفت */
.hf-acts .btn{ display:inline-flex !important; width:auto !important; flex:0 0 auto; }
.hf-play{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0;
  background:var(--accent); color:var(--void); border-radius:var(--r-pill);
  padding:11px 24px; font:700 14px/1 var(--serif); box-shadow:0 8px 22px var(--emit-glow); }
.hf-play:hover{ filter:brightness(1.08); }
.hf-play svg{ width:15px; height:15px; }
@media (max-width:820px){
  .hero-feature.on{ flex-direction:column; align-items:stretch; text-align:start; gap:16px; }
  .hf-art{ width:100%; height:auto; aspect-ratio:1; max-width:260px; }
}

/* ── هیرو: شعار رفت، پس فاصله‌ها هم جمع می‌شوند ─────────────────────── */
.stage{ padding-block:22px 6px !important; min-height:0 !important; }
.stage-idle .kicker{ margin-block-end:4px; }
/* آمارِ ویترینی: «۱۵۹۲۷ آهنگ» به کاربر کمکی نمی‌کند که چه گوش بدهد */
.statline{ display:none !important; }
/* میدانِ حال یک فیلتر است، نه عنصرِ قهرمان — نوارِ باریکِ زیرِ هیرو */
.moodfield-wrap{ margin:16px 0 4px !important; gap:14px !important; }
.moodfield{ width:150px !important; }
.moodfield-side #mf-name{ font-size:17px !important; }

/* ── عرضِ هدررفته ────────────────────────────────────────────────────
   محتوا در ستونی باریک سمتِ راست جمع شده بود و ۶۰٪ صفحه سیاهِ خالی. */
.section{ padding-inline:32px !important; }
.stage{ padding-inline:32px !important; }

/* ═══ «برای تو»: از کارتِ تنگ به قفسهٔ واقعی ═══════════════════════════
   هر دسته ۱۸۸ پیکسل ارتفاع می‌گرفت تا کاورهای ۷۴ پیکسلی نشان بدهد — هفت
   دسته یعنی ۱۱۴۴ پیکسل اسکرول برای بندانگشتی. کارتِ ته‌رنگ‌دار هم یک
   پُرکردنِ بزرگ با --hue بود که با قاعدهٔ اشباع می‌جنگید. */
.mycats{ gap:26px !important; }
.mc-cat{ background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; cursor:default !important; }
.mc-cat:hover{ box-shadow:none !important; border-color:transparent !important; }
.mc-cat:active{ transform:none !important; }

/* سرصفحهٔ دسته، هم‌زبان با بقیهٔ قفسه‌ها: عنوان، خطِ مو، کنش */
.mc-h{ align-items:baseline !important; justify-content:flex-start !important;
  gap:12px !important; margin-bottom:14px !important; }
.mc-h > div:first-child{ flex:0 0 auto; order:0; }
.mc-h::after{ content:''; flex:1 1 auto; order:1; height:1px; background:var(--glass-line); }
.mc-name{ font-size:17.5px !important; font-weight:700 !important; letter-spacing:-.015em; }
.mc-sub{ font:500 10.5px/1.6 var(--mono) !important; letter-spacing:.08em; color:var(--muted2) !important; }
.mc-go{ order:2; font:600 10.5px/1 var(--mono) !important; letter-spacing:.12em;
  color:var(--muted2) !important; cursor:pointer; padding:4px; }
.mc-go:hover{ color:var(--ink) !important; }

/* کاورها در اندازهٔ واقعی، هم‌اندازهٔ بقیهٔ قفسه‌ها */
.mc-row{ gap:16px !important; padding-bottom:6px !important; scroll-snap-type:x proximity; }
.mc-cover{ width:150px !important; scroll-snap-align:start; }
.mc-cover img{ width:150px !important; height:150px !important; border-radius:12px !important;
  box-shadow:0 14px 32px rgba(0,0,0,.45) !important;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s !important; }
.mc-cover:hover img{ transform:translateY(-6px) !important;
  box-shadow:0 26px 52px rgba(0,0,0,.55), 0 0 0 1px hsl(var(--hue) 70% 60% / .28) !important; }
.mc-cover .mc-t{ font-size:12.5px !important; color:var(--ink) !important;
  text-align:start !important; margin-top:9px !important; max-height:none !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* همان کنشِ دمِ دستِ کارتِ قفسه */
.mc-cover::after{ content:'▶'; position:absolute; inset-inline-end:8px; top:112px;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--void); font-size:12px;
  box-shadow:0 8px 20px var(--emit-glow); pointer-events:none;
  opacity:0; transform:translateY(6px) scale(.9);
  transition:opacity .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.mc-cover:hover::after{ opacity:1; transform:none; }
@media (max-width:640px){
  .mc-cover,.mc-cover img{ width:124px !important; }
  .mc-cover img{ height:124px !important; }
  .mc-cover::after{ top:88px; }
}
@media (prefers-reduced-motion:reduce){
  .mc-cover:hover img{ transform:none !important; }
  .mc-cover::after{ transition:none; }
}

/* ── هزینهٔ backdrop-filter ────────────────────────────────────────────
   ۳۵ المان از backdrop-filter استفاده می‌کردند. هرکدام یعنی مرورگر باید
   هر بار که محتوای پشتشان جابه‌جا می‌شود، آن ناحیه را دوباره بلور کند —
   و ریلِ تمام‌ارتفاع و تاپ‌بار دقیقاً روی ناحیه‌ای هستند که اسکرول می‌شود.
   دو سطحِ بزرگ به رنگِ مات تبدیل شدند (ظاهر تقریباً یکی است، چون زمینه
   خودش تیره و بی‌رنگ است) و بقیه سبک‌تر شدند. */
@media (min-width:901px){
  .rail{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background:var(--void) !important; }
}
.topbar.solid{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  background:rgba(11,13,16,.94) !important; }
/* کنترل‌های کوچک: بلور سبک‌تر، هزینهٔ کمتر روی هر فریمِ اسکرول */
.searchwrap,.upbtn,.bell,.stage-pill{
  backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; }

/* ── دسترس‌پذیری ────────────────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ transition:none !important; }
}

  .gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
        background:#fff;color:#1f1f1f;font-weight:650;border:0}
  .gbtn:hover{background:#f1f3f5}
  .author{display:flex;align-items:center;gap:10px;margin:14px 0 10px;
          color:var(--dim,#8b8ba3);font-size:12px}
  .author span:first-child,.author span:last-child{flex:1;height:1px;background:currentColor;opacity:.25}
  /* شناور در پایین، نه بالای ستونِ اصلی: .topbar با position:absolute و z-index:8
     کلِ نوارِ بالا را می‌پوشاند، پس نوار آنجا پشتِ سرچ‌بار می‌افتاد و اصلاً دیده نمی‌شد. */
  .verifybar{position:fixed;z-index:75;inset-inline-end:18px;bottom:calc(var(--player-h,96px) + 18px);
             width:360px;max-width:calc(100vw - 36px);
             display:flex;align-items:center;gap:8px;flex-wrap:wrap;
             padding:14px 16px;border-radius:var(--r-card,18px);font-size:13px;line-height:1.8;
             background:rgba(224,163,62,.13);border:1px solid rgba(224,163,62,.42);color:#e8d3a8;
             box-shadow:0 20px 50px rgba(0,0,0,.5)}
  /* روی موبایل تمام‌عرض می‌شود و دقیقاً روی .pwa-pill (که bottom:104px است)
     می‌افتاد؛ بالاتر می‌نشیند تا هر دو خوانا بمانند. */
  @media (max-width:640px){ .verifybar{inset-inline:12px;width:auto;bottom:calc(var(--player-h,96px) + 76px);} }
  .verifybar a{color:#fff;text-decoration:underline;cursor:pointer;font-weight:700}
  .verifybar .x{margin-inline-start:auto;cursor:pointer;opacity:.6}
  @media (max-width:640px){ .verifybar{inset-inline:12px;width:auto;} }

/* ══════════════════════════════════════════════════════════════════════════
   HĀLE — mobile layer.  Appended last on purpose: it wins on equal
   specificity without !important, and nothing above it is rewritten.
   ══════════════════════════════════════════════════════════════════════════ */
.hi-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011%2012%204.2%2020%2011%22%2F%3E%3Cpath%20d%3D%22M6.5%209.3V19.8h11V9.3%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011%2012%204.2%2020%2011%22%2F%3E%3Cpath%20d%3D%22M6.5%209.3V19.8h11V9.3%22%2F%3E%3C%2Fsvg%3E");}
.hi-compass{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.4%22%2F%3E%3Cpath%20d%3D%22M15.3%208.7%2013.6%2013.6%208.7%2015.3%2010.4%2010.4Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.4%22%2F%3E%3Cpath%20d%3D%22M15.3%208.7%2013.6%2013.6%208.7%2015.3%2010.4%2010.4Z%22%2F%3E%3C%2Fsvg%3E");}
.hi-library{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204.6v14.8M9.7%204.6v14.8%22%2F%3E%3Cpath%20d%3D%22m14.3%205.5%204.5%2013.1%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204.6v14.8M9.7%204.6v14.8%22%2F%3E%3Cpath%20d%3D%22m14.3%205.5%204.5%2013.1%22%2F%3E%3C%2Fsvg%3E");}
.hi-people{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%228.6%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M3.5%2019.4c0-3.2%202.5-5%205.7-5s5.7%201.8%205.7%205%22%2F%3E%3Cpath%20d%3D%22M16.4%206.3a3.2%203.2%200%200%201%200%206%22%2F%3E%3Cpath%20d%3D%22M17.6%2014.8c2.2.5%203.6%202.1%203.6%204.6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%228.6%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M3.5%2019.4c0-3.2%202.5-5%205.7-5s5.7%201.8%205.7%205%22%2F%3E%3Cpath%20d%3D%22M16.4%206.3a3.2%203.2%200%200%201%200%206%22%2F%3E%3Cpath%20d%3D%22M17.6%2014.8c2.2.5%203.6%202.1%203.6%204.6%22%2F%3E%3C%2Fsvg%3E");}

@media (max-width:880px){
  /* ── 1. safe areas. This file had ZERO uses of env() before this. ───────── */
  .topbar{padding-top:calc(env(safe-area-inset-top,0px) + 14px);}

  /* The search field was width:100%, which shoved the bell off the left edge
     (it rendered at x = −25). Let the field take what is left instead. */
  .topbar{flex-wrap:nowrap;gap:6px;padding-inline:12px;}
  .topbar .searchwrap{flex:1 1 auto;min-width:0;width:auto;max-width:none;}
  .topbar .bell{flex:0 0 auto;}

  /* ── 2. the dock: mini player flush above a flush nav bar ───────────────
     Triple class beats the existing `.mobnav.mobnav` floating-capsule rule
     without reaching for !important. The capsule sat at bottom:10px, i.e.
     underneath the iPhone home indicator. */
  .mobnav.mobnav.mobnav{
    left:0;right:0;bottom:0;height:auto;min-height:56px;border-radius:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:#0A0B0D;border:0;border-top:1px solid var(--glass-line);box-shadow:none;}
  .mobnav .mn{min-height:56px;padding:7px 0 9px;font-size:11px;gap:5px;}
  .mobnav .mn .mi{font-size:23px;line-height:1;}
  .mobnav .mn.on::after{display:none;}
  /* 6 destinations → 4. Hidden, never deleted — setView() still syncs
     `.on` off data-v, and deleting a nav node is what killed Escape once. */
  .mobnav .mn[data-v="map"],.mobnav .mn[data-v="profile"]{display:none;}
  /* DOM order is home · browse · social · map · library · profile, so hiding
     two leaves «جمع» sitting before «کتابخانه». Reorder visually rather than
     move the nodes — setView() and the id contract both key off the markup. */
  .mobnav .mn[data-v="home"]{order:1;}
  .mobnav .mn[data-v="browse"]{order:2;}
  .mobnav .mn[data-v="library"]{order:3;}
  .mobnav .mn[data-v="social"]{order:4;}

  .player.player.player{
    left:8px;right:8px;height:58px;border-radius:17px;
    bottom:calc(56px + env(safe-area-inset-bottom,0px) + 6px);}

  /* content clears the dock instead of hiding under it */
  .scroll{padding-bottom:calc(178px + env(safe-area-inset-bottom,0px));}

  /* ── 3. one side margin, no exceptions ─────────────────────────────────── */
  .section{padding-inline:22px;}
  .stage{padding-inline:22px;}
  .shelf{padding-inline:22px;}

  /* ── 4. density: fewer, larger. 188px covers left 1.9 per screen at 375. ─ */
  .card .frame{width:158px;height:158px;}
  /* the 284px reserve exists to stop an empty shelf collapsing (that fix took
     CLS 0.96 → 0.065). Keep the reserve, just retune it to the new height. */
  .shelf{min-height:214px;gap:13px;}

  /* ── 5. 44px is a floor, never a starting point for flex-shrink ────────── */
  .card .add,.card .pin{width:44px;height:44px;}
  .card .add{right:auto;inset-inline-end:60px;}
  /* NOT .mobnav .mn — those must stay flex:1 to fill their quarter, and
     pinning them to auto collapsed each one to ~24px wide. */
  .topbar button{flex:0 0 auto;}
  .mobnav .mn{flex:1;}

  /* ── 6. 44px is a floor for every control that is actually on screen ───── */
  .bell,.omni-ai,.smart-toggle,.lt-chip,.pwa-go,.pwa-x,.tog,
  .fs-ctrls button,.pmenu button,.x{min-height:44px;min-width:44px;}
  .x,.pwa-x{display:grid;place-items:center;}
  .feedback-link,a[onclick]{min-height:44px;display:inline-flex;align-items:center;}

  /* channel cards → a compact two-column field. 45 × 126px was seven screens
     of scrolling; at 64px in two columns it is roughly one and a half. */
  .radio-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .rchan{min-height:64px;padding:11px 13px;justify-content:center;border-radius:14px;}
  .rchan .rc-fan,.rchan .rc-emoji{display:none;}
  .rchan .rc-name{font-size:15px;}
  .rchan .rc-sub{font-size:12px;margin-top:2px;}
  .rchan:hover{transform:none;}
  /* browse: reclaim the space above the first cover */
  .browse-hero{padding-top:6px;}
  .bchan-row{padding:2px 0 6px;}
  /* 25 genre chips wrapped into 363px — over a third of everything above the
     first cover. One scrolling row costs 44. Raising the chips to the 44px
     floor would otherwise have made this screen TALLER, not shorter. */
  #genre-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  #genre-chips::-webkit-scrollbar{display:none;}
  #genre-chips .gchip{flex:0 0 auto;}

  /* ── the hero: 484px of the first screen for ONE track ────────────────
     The 820px rule stacked it into a column with art up to 260px wide, so a
     single song owned the whole opening screen. Keeping it a ROW with 104px
     art costs ~150px instead. The show/hide mechanism (display:none → .on)
     is untouched, so the CLS behaviour is unchanged — measured, not assumed. */
  .hero-feature.on{flex-direction:row;align-items:center;gap:14px;
    padding:12px;margin:10px 0 4px;}
  .hf-art{width:104px;max-width:104px;flex:none;border-radius:12px;}
  .hf-title{font-size:clamp(19px,5.4vw,25px) !important;}
  .hf-artist{margin-block-start:4px;font-size:13px;}
  /* the acoustic strip is BPM/key data — it belongs backstage, not on the
     opening screen. It stays in the fullscreen player. */
  .hf-aco{display:none;}
  .hf-acts{margin-block-start:11px;gap:8px;}
  .hf-play{padding:11px 18px;}

  /* the content hero only renders when the catalogue answers, so local
     testing against half-reachable backends never produced it — these two
     were caught on production. */
  .hf-play{min-height:44px;}
  .hf-kick{font-size:11px;}

  /* the type floor now lives in the shared layer — 9.5px is bad on any screen */

  /* ── 7. the artwork is the only colour. Kill the leftover chroma. ──────── */
  .card:hover .frame{box-shadow:0 16px 40px rgba(0,0,0,.45);transform:none;}

  /* ── 8. every control inside the fullscreen player clears 44 ──────────── */
  #fs button{min-height:44px;min-width:44px;}
  .fs-keep button{padding-inline:14px;}

}

/* ── 8. continuous corners. A circular arc jumps curvature from 0 to 1/r and
   the eye reads the seam as a cut; a superellipse ramps it in. Applied by JS
   because CSS has no such shape. ─────────────────────────────────────────── */
.hale-sq{border-radius:0 !important;}


/* ══════════════════════════════════════════════════════════════════════════
   HĀLE — shared layer. Everything here is true at EVERY width.
   Keeping the player's colour field and the artwork shape mobile-only is what
   created the split this redesign exists to close: one product, one language.
   ══════════════════════════════════════════════════════════════════════════ */

/* the player wears the song's colour. #fs-bg (the blurred cover) and the
   --hue spotlight already existed and were spent timidly: a .5-opacity cover
   sitting under a scrim that darkened it straight back down. */
#fs-bg{opacity:.72;filter:blur(64px) saturate(1.55);}
.fs::before{background:radial-gradient(124% 78% at 72% 0%,
   hsl(var(--hue) 62% 52% / .5), transparent 62%);}
.fs-scrim{background:linear-gradient(180deg,
   rgba(4,3,9,.10) 0%, rgba(4,3,9,.50) 60%, rgba(4,3,9,.88) 100%);}
/* the title is the graphic, not a caption. plaintext so a Latin title
   truncates from its own end instead of eating its first letters. */
#fs-title{font-size:clamp(30px,4.2vw,46px);font-weight:800;letter-spacing:-.03em;
  line-height:1.12;unicode-bidi:plaintext;}

/* two type registers, at every width: a display size and a tracked micro
   label, with nothing drifting into the gap between them. */
.sec-h b,.sec-h h2{font-size:clamp(17px,1.5vw,22px);font-weight:800;letter-spacing:-.02em;}
.sec-h .meta.meta{letter-spacing:.14em;text-transform:uppercase;font-weight:700;}

/* every truncating title takes its own direction from its first strong
   character — otherwise a Latin name in an RTL box loses its first letters */
.ct,.ca,.lrow .t,.lrow .a,.rc-name{unicode-bidi:plaintext;}

@media (min-width:881px){
  /* ── desktop: the same language, given more room ───────────────────────── */
  .section{padding-inline:40px;}
  .card .frame{width:188px;height:188px;}
  .shelf{gap:16px;}
  /* the artwork is the only colour: drop the leftover hue-tinted hover glow */
  .card:hover .frame{box-shadow:0 24px 54px rgba(0,0,0,.55);}
}


/* the account entry point. The rail's #authbox — which holds profile, log out
   and log in — is inside <aside class="rail">, and the rail is display:none
   below 880px. Hiding the profile tab without this would have made all three
   unreachable on a phone. showProfile() calls requireLogin(), so this is the
   log-in path for signed-out visitors too. */
.hi-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M5%2020c0-3.7%203.1-5.7%207-5.7s7%202%207%205.7%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M5%2020c0-3.7%203.1-5.7%207-5.7s7%202%207%205.7%22%2F%3E%3C%2Fsvg%3E");}
.acct{display:none;}
@media (max-width:880px){
  .acct{display:grid;place-items:center;flex:0 0 auto;
    width:44px;height:44px;min-width:44px;min-height:44px;border-radius:999px;
    background:none;border:0;color:var(--ink);font-size:20px;cursor:pointer;}
  .acct:active{background:var(--glass);}
}


/* the footer is where rail-only affordances come back on a phone */
.app-foot .foot-lang{display:block;margin:12px auto 0;min-height:44px;padding:0 18px;
  background:none;border:1px solid var(--glass-line);border-radius:999px;
  color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.app-foot .foot-lang:active{background:var(--glass);color:var(--ink);}


/* ══ HĀLE — type floor, at every width ═════════════════════════════════════
   These were mobile-only, which left desktop sitting at 9.5px. Doubled class
   names because the single-class versions lose to context selectors like
   `.sec-h .meta` that already exist above. */
.rc-sub.rc-sub,.meta.meta,.mm.mm,.rail-foot.rail-foot,.priv-hint.priv-hint,
.brand2.brand2,.p-time.p-time,.mc-sub.mc-sub,.mc-go.mc-go,
.card .ca,.lrow .a{font-size:12px;}
.st.st span,.libhead.libhead span{font-size:11px;}
/* tracked uppercase labels — the one place the system allows going below 12 */
.pf-badge.pf-badge,.fs-pane-h.fs-pane-h,.pm-mix-h.pm-mix-h,.rp-h.rp-h,
.lang-toggle.lang-toggle,.hf-kick.hf-kick{font-size:11px;}

/* ══ every control on browse clears the 44px floor ═════════════════════════
   Measured on a phone: .bchan 42, .gchip 38, .pin 38, .bview 38 wide, and the
   filter input 18px tall. Browse is the screen people tap most. */
.bchan{min-height:44px;}
.gchip{min-height:44px;}
.bview{min-width:44px;min-height:44px;}
.browse-search{min-height:44px;}
/* the play pin also lives in .bframe on browse, which the .card/.frame
   selectors missed — and it carries transform:scale(.9), so a 42px box
   measures 38 on screen. Neutralise the scale rather than chase the number. */
.pin{min-width:44px;min-height:44px;}
.bframe .pin,.card .pin,.frame .pin{transform:none;}
/* the top-bar search input itself was 30px tall on every single view */
#search{min-height:44px;}
.browse-search input{min-height:44px;}

/* ══ browse: the worst remaining screen ════════════════════════════════════
   It opened 84px below an 84px-tall topbar and then spent another 266px on a
   hero before the first cover — measured first cover at y=827 on a phone. */
.browse-hero{padding-top:10px;}
.browse-h1{font-size:clamp(21px,2.6vw,30px) !important;margin:6px 0 0 !important;}
.browse-head .cnt{margin-top:4px;}
.browse-tools{margin-top:12px;}
/* 37×42 — under the 44 floor on the one screen people tap most */
.bview{width:44px;height:44px;}
.browse-search{min-height:44px;}

/* ⚠️ The channel-card compaction is MOBILE ONLY, and must stay that way.
   Releasing min-height globally shrank the desktop card to 82px while its
   72px cover fan and emoji were still inside it — the card collapsed into a
   jumble. The fan is only hidden below 880px, so the height may only be
   released below 880px too. */

/* ══ HALE-DESIGN-LAYER ══ */
/* ══════════════════════════════════════════════════════════════════════════
   HĀLE — the design layer.

   Every component rule is prefixed `html.hale`. That is specificity (0,2,1),
   which beats the two-class rules this file is full of (`.radio-grid .rchan`,
   `.rchan .rc-play`) without a single !important — and being last in the
   sheet it wins ties as well. One uniform prefix instead of hand-tuning
   dozens of selectors, and it stays true when rules above it change.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── a note on !important ──────────────────────────────────────────────────
   An earlier design layer in this file (~line 1560-1960) locks 109 declarations
   with !important. Specificity cannot reach past that, so the properties below
   carry the same weight — and only those properties, verified one by one
   against that layer. Nothing here escalates a declaration that was not already
   escalated upstream. */
/* ── ground ────────────────────────────────────────────────────────────────
   The ground was a true neutral grey (#0B0D10). A neutral dark reads as
   nobody chose it, and gives the artwork's colour nothing to sit against.
   HĀLE biases it plum, under 12% saturation: felt, not seen. The hue does NOT
   follow the cover here — browsing stays quiet, and only the player and the
   halo around artwork wear the song's colour. */
:root{
  --void:#0A080E; --bg:#0E0B13; --surface:#16121D; --raised:#1E1927; --raised-2:#282133;

  /* ── the text ladder ─────────────────────────────────────────────────
     Measured on --surface, not guessed. --muted2 was #63656B = 3.34:1, under
     the 4.5:1 floor — and it is what every section subtitle on the home page
     is painted with. All three tiers that carry meaning now clear AA; --ghost
     is the one tier allowed below it, for marks nobody needs to read. */
  --ink:#ECE9F1;      /* 15.4:1 on --surface */
  --muted:#A8A3B4;    /*  7.6:1 */
  --muted2:#837E90;   /*  4.8:1 */
  --ghost:rgba(236,233,241,.30);

  --glass:rgba(255,255,255,.04); --glass-line:rgba(255,255,255,.075);
  --hale-ez:cubic-bezier(.4,0,.2,1);
}
html.hale body,html.hale #scroll{background:var(--bg);}
/* the atmosphere: one soft bloom behind everything — what makes a ground feel
   like air rather than paint. Fixed, so it never scrolls and never repaints. */
html.hale body::before{content:"";position:fixed;left:50%;top:-16%;width:min(150%,1000px);
  aspect-ratio:1;transform:translateX(-50%);pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(circle,hsl(278 42% 54% / .15) 0%,hsl(278 34% 44% / .055) 42%,transparent 68%);
  filter:blur(64px);}
html.hale #scroll{position:relative;z-index:1;}

/* ── type ──────────────────────────────────────────────────────────────────
   The old scale shouted: 800-weight heads, tight tracking. HĀLE speaks at 500
   and lets size and space carry the hierarchy. */
html.hale .sec-h b,html.hale .sec-h h2,html.hale .sec-h h3{
  font-family:inherit !important;font-size:clamp(17px,1.5vw,21px) !important;
  font-weight:500 !important;letter-spacing:-.012em !important;color:var(--ink);}
/* ── the mono bug ──────────────────────────────────────────────────────────
   Every one of the 16 section subtitles on the home page is Persian prose set
   in ui-monospace. A Latin monospace has no Arabic shaping, so the letters
   never join: «بزن به موج» renders as «ب ز ن  ب ه  م و ج». It reads as broken
   text, and it is the most-read secondary copy on the site.

   Monospace is right where it was meant to be — durations, timers, ranks,
   counters — so it stays there. It comes off the labels that carry words.
   Letter-spacing goes with it: Persian letters connect, and tracking pulls the
   joins apart. There is also no upper case to transform to. */
html.hale .sec-h .meta,html.hale .libhead,html.hale .mc-sub,html.hale .hf-kick,
html.hale .statline .st span,html.hale .mf-l,html.hale .moodfield-side .m,
html.hale .np-aco{
  font-family:'Vazirmatn',system-ui,sans-serif !important;
  letter-spacing:0 !important;text-transform:none !important;}
html.hale .sec-h .meta{font-size:12px !important;font-weight:400 !important;color:var(--muted2);}
html.hale .libhead{font-size:11.5px !important;font-weight:500 !important;}
html.hale .mc-sub{font-size:12px !important;font-weight:400 !important;}
html.hale .hf-kick{font-size:11.5px !important;font-weight:500 !important;color:var(--muted2);}
/* digits keep the monospace they were given — that is what it is for */
html.hale .dur,html.hale .p-time,html.hale .fs-times,html.hale .card .rk,
html.hale .statline .st b,html.hale .dj-line b{
  font-family:var(--mono) !important;font-variant-numeric:tabular-nums;}

/* ── artwork ───────────────────────────────────────────────────────────────
   Continuous corners already ship (hale-sq writes the superellipse path).
   What was missing is the halo: art with a hard edge sits ON the page, art
   with a halo sits IN it. */
html.hale .card .frame,html.hale .hf-art{
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.045);}
html.hale .card:hover .frame{box-shadow:0 22px 52px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.08);}
html.hale .card .ct{font-weight:500;letter-spacing:-.006em;color:var(--ink);}
html.hale .card .ca{color:var(--muted2);}

/* the emoji tile goes at every width: the one ornament in the system that
   carried no information and could not be styled. */
html.hale .rc-emoji{display:none;}

/* ── the play affordance ───────────────────────────────────────────────────
   A glowing mint pill on every card made the page read as a control panel.
   The mark stays legible and stops shouting: a quiet disc that fills in on
   touch. The glyph clears 12:1 against the disc in both states. */
html.hale .rchan .rc-play,html.hale .card .pin{
  background:rgba(236,233,241,.15) !important;color:var(--ink) !important;
  box-shadow:none !important;border:0;text-shadow:none;
  backdrop-filter:blur(10px);
  transition:background .22s var(--hale-ez),color .22s var(--hale-ez);}
html.hale .rchan:hover .rc-play,html.hale .rchan:active .rc-play,
html.hale .card:hover .pin,html.hale .card:active .pin{
  background:var(--ink) !important;color:var(--void) !important;}

/* ── hero ──────────────────────────────────────────────────────────────────
   Circular artwork is the shape the whole reference is built on, and the one
   shape this app never used. Height is unchanged on purpose: the CLS reserve
   in the second stylesheet is keyed to it. */
html.hale .hero-feature{
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid var(--glass-line);box-shadow:none;}
html.hale .hero-feature .hf-art{border-radius:50% !important;clip-path:none !important;
  box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);}
html.hale .hf-title{font-size:clamp(21px,4vw,30px) !important;
  font-weight:500;letter-spacing:-.02em;unicode-bidi:plaintext;}
html.hale .hf-kick{color:var(--muted2);letter-spacing:.16em;}

/* ── bottom nav ────────────────────────────────────────────────────────────
   It carried a mint underline and a filled icon for the active tab. One
   signal is enough: the active tab is the one that is lit. */
@media (max-width:880px){
  html.hale .mobnav{background:rgba(14,11,19,.88);backdrop-filter:blur(20px) saturate(1.2);
    border-top:1px solid var(--glass-line);}
  html.hale .mobnav .mn{color:var(--muted2);}
  html.hale .mobnav .mn.on{color:var(--ink);}
}

/* ── the server document ───────────────────────────────────────────────────
   This is the only prose on the site and the only thing a search engine can
   read without running the app. It ran the full column width, so a Persian
   line could reach 1,200px — about three times a comfortable measure. */
html.hale .ssr-doc{max-width:66ch;}
html.hale .ssr-doc h1{font-family:inherit;font-weight:400;letter-spacing:-.025em;}
html.hale .ssr-doc h2{font-family:inherit;font-weight:500;letter-spacing:-.012em;
  border-top-color:var(--glass-line);}
html.hale .ssr-doc p,html.hale .ssr-doc li{color:var(--muted);}
html.hale .ssr-doc dd{color:var(--ink);}
html.hale .ssr-doc dt{color:var(--muted2);}
/* سندِ خانه زیرِ قفسه‌ها: فشرده و کم‌صدا، نه یک مقالهٔ ۶۶ch */
html.hale #seo-ssr.ssr-home{max-width:none;margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);}
html.hale #seo-ssr.ssr-home h1{font-size:20px !important;margin:0 0 6px !important;}
html.hale #seo-ssr.ssr-home h2{font-size:14px !important;margin:22px 0 8px !important;padding-top:0 !important;}
html.hale #seo-ssr.ssr-home ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;}
html.hale #seo-ssr.ssr-home li,html.hale #seo-ssr.ssr-home p{font-size:13px;line-height:1.7;}
html.hale #seo-ssr.ssr-home a{color:var(--muted);text-decoration:none;}
html.hale #seo-ssr.ssr-home a:hover{color:var(--ink);}
html.hale .ssr-play{background:var(--ink);color:var(--void);font-weight:500;}
html.hale .ssr-btn{border-color:var(--glass-line);color:var(--muted);}

/* ── the accent ────────────────────────────────────────────────────────────
   The rule HĀLE adds to the existing hue system: chrome is neutral, and the
   only colour on a browsing page comes from the artwork itself. A neon pill
   with a glow under it on every surface is what made the home page read as a
   control panel rather than a place to listen.

   The primary action stays the brightest thing on the page — that hierarchy
   was right — but it is light on a dark ground instead of neon on dark. It
   also measures better: 15.4:1 against 11.8:1, and no glow to bloom on an
   OLED. --accent keeps its meaning and its job inside the player. */
html.hale .hf-play,html.hale .smart-toggle.on,html.hale .btn.primary,
html.hale .ssr-play{
  background:var(--ink) !important;color:var(--void) !important;
  box-shadow:none !important;text-shadow:none;font-weight:500;}
html.hale .hf-play:hover,html.hale .smart-toggle.on:hover{
  background:#fff !important;}
html.hale .smart-toggle{box-shadow:none !important;}
/* the install prompt was a tinted gradient with an emoji in the label */
html.hale .upbtn.pwa-top{background:var(--glass) !important;background-image:none !important;
  color:var(--muted) !important;border:1px solid var(--glass-line) !important;}

/* ── hero proportions ──────────────────────────────────────────────────────
   The artwork is the subject; at 104px beside a 157px text column it was the
   smaller half. A circle reads smaller than a square of the same box, so it
   takes the space back. Total height is unchanged — the CLS reserve depends
   on it. */
@media (max-width:880px){
  /* a max-width of 104px was capping it; aspect-ratio then lost to the
     explicit height and the circle came out an oval. */
  html.hale .hero-feature .hf-art{width:132px !important;max-width:132px !important;
    height:auto !important;aspect-ratio:1 !important;align-self:center;}
  html.hale .hero-feature{padding:16px !important;gap:16px !important;}
  html.hale .hf-acts{gap:8px;}
  html.hale .hf-acts .hf-play,html.hale .hf-acts .btn{min-height:44px;}
}

/* ── the one remaining loud surface ────────────────────────────────────────
   A teal-to-blue gradient with a coloured glow, sitting inside the search
   field. Two hues that belong to no artwork, on the smallest control on the
   page. It is a real destination, so it keeps its weight — as light on dark,
   like every other primary action. */
html.hale .omni-ai:not(.ghost){background:var(--ink) !important;background-image:none !important;
  color:var(--void) !important;box-shadow:none !important;font-weight:500;}
html.hale .omni-ai:not(.ghost):hover{background:#fff !important;}
/* .ghost is the secondary of the pair. Painting both alike put two white
   blobs side by side inside one search field and lost the distinction. */
html.hale .omni-ai.ghost{background:var(--glass) !important;background-image:none !important;
  color:var(--muted) !important;box-shadow:none !important;
  border:1px solid var(--glass-line) !important;}

/* the sign-in pair in the rail kept a mint tint — the last chrome surface
   still painted with a colour that belongs to no artwork. */
html.hale .au-btn{background:var(--glass) !important;border:1px solid var(--glass-line) !important;
  color:var(--ink) !important;box-shadow:none !important;}
html.hale .au-btn:hover{background:rgba(255,255,255,.08) !important;}
html.hale .au-btn.primary,html.hale .au-btn:first-child{
  background:var(--ink) !important;color:var(--void) !important;border-color:transparent !important;}

/* ── icons ─────────────────────────────────────────────────────────────────
   Navigation icons were painted with the accent, which made five mint marks
   sit down the left edge of every page. Under the rule above they are chrome:
   quiet by default, lit when they are where you are. Colour is reserved for
   the artwork and the player. */
html.hale .navitem .ic,html.hale .navitem .ic svg,html.hale .glyph svg,
html.hale .mn .mi{color:var(--muted2) !important;}
html.hale .navitem.on .ic,html.hale .navitem.on .ic svg{color:var(--ink) !important;}
html.hale .navitem.on::before{background:var(--ink) !important;}
html.hale .bt-go{color:var(--muted) !important;}
html.hale .bt-go:hover{color:var(--ink) !important;}

/* the install prompt: the last mint surface, and an icon tile that is now
   empty because the platform glyph it held was an emoji. */
html.hale .pwa-go{background:var(--ink) !important;color:var(--void) !important;
  box-shadow:none !important;font-weight:500;}
html.hale .pwa-ic:empty{display:none !important;}
html.hale .pwa-pill{background:rgba(22,18,29,.94) !important;backdrop-filter:blur(20px);
  border:1px solid var(--glass-line) !important;box-shadow:0 18px 44px rgba(0,0,0,.5) !important;}

/* ── the hero, at desktop width ────────────────────────────────────────────
   It was a flex row: artwork at the start, everything else clustered beside
   it, and 414px of dead space at the far end of a 943px band. Three columns
   instead — artwork · what it is · what you can do — each asking for the
   width it needs, the title taking the slack. Padding now reads 34/34 on both
   sides instead of 34 and 414.

   `.hf-acts` lives inside `.hf-body`, so a third column would have stayed
   empty. `display:contents` on the body promotes its children to grid items
   of the hero itself — the only way to reach this composition without
   touching markup the JS depends on. */
@media (min-width:881px){
  html.hale .hero-feature{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto auto auto auto;
    align-items:center;align-content:center;
    column-gap:clamp(24px,3vw,48px);row-gap:0;
    padding:clamp(22px,2.2vw,34px) !important;
    min-height:288px;}
  html.hale .hero-feature .hf-body{display:contents;}
  html.hale .hero-feature .hf-art{
    grid-column:1;grid-row:1/-1;
    width:clamp(190px,18vw,236px) !important;max-width:none !important;
    height:auto !important;aspect-ratio:1 !important;}
  html.hale .hero-feature .hf-kick{grid-column:2;grid-row:1;margin:0 0 12px;align-self:end;}
  html.hale .hero-feature .hf-title{grid-column:2;grid-row:2;margin:0;
    font-size:clamp(28px,3.2vw,44px) !important;line-height:1.1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.hale .hero-feature .hf-artist{grid-column:2;grid-row:3;margin:10px 0 0;
    font-size:16px;color:var(--muted);}
  html.hale .hero-feature .hf-aco{grid-column:2;grid-row:4;margin:16px 0 0 !important;align-self:start;}
  html.hale .hero-feature .hf-acts{grid-column:3;grid-row:1/-1;
    flex-direction:column;align-items:stretch;gap:10px !important;
    min-width:180px;margin:0 !important;}
  html.hale .hero-feature .hf-acts .hf-play,
  html.hale .hero-feature .hf-acts .btn{width:100% !important;min-height:48px;justify-content:center;}
}

/* ── the top bar, at desktop width ─────────────────────────────────────────
   Three actions at three heights (40, 43, 44) in three shapes, trailing the
   search field with a spacer div between them and 161px of nothing at the end
   of the row. One height, one shape, grouped at the far end; the two controls
   inside the field share a height of their own. */
@media (min-width:881px){
  html.hale .topbar{align-items:center;gap:10px !important;
    padding:16px clamp(24px,2.6vw,34px) !important;}
  html.hale .topbar .searchwrap{flex:0 1 620px;height:48px;min-width:0;}
  html.hale .topbar .sp{display:none !important;}
  html.hale .topbar .bell{margin-inline-start:auto !important;width:40px !important;padding:0 !important;}
  html.hale .topbar .bell,html.hale .topbar .upbtn{
    height:40px !important;min-height:40px;border-radius:999px !important;
    background:var(--glass) !important;background-image:none !important;
    border:1px solid var(--glass-line) !important;
    color:var(--muted) !important;box-shadow:none !important;
    display:inline-flex !important;align-items:center;justify-content:center;
    padding:0 16px !important;font-size:13px;font-weight:500;
    transition:background .2s,color .2s;}
  html.hale .topbar .bell:hover,html.hale .topbar .upbtn:hover{
    background:rgba(255,255,255,.09) !important;color:var(--ink) !important;}
  html.hale .searchwrap .omni-ai{height:36px !important;min-height:36px;
    border-radius:999px !important;display:inline-flex !important;
    align-items:center;justify-content:center;}
  html.hale .searchwrap .omni-ai.ghost{width:36px !important;padding:0 !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   HĀLE — the components from the design system, ported.

   Up to here this file re-toned the components production already had. This
   block replaces them with the ones we actually designed. The CSS is the
   prototype's, carried over unchanged wherever possible; only the token names
   are bridged, so there is no room for a translation to drift.
   ══════════════════════════════════════════════════════════════════════════ */
html.hale{
  /* the bridge: the design system's names, mapped onto production's */
  --H:var(--hue); --S:24;
  --mut:var(--muted); --dim:var(--muted2);
  --f1:rgba(255,255,255,.045);--f2:rgba(255,255,255,.085);--f3:rgba(255,255,255,.14);
  --ez:cubic-bezier(.4,0,.2,1);
}
@keyframes hale-spin{to{transform:rotate(360deg);}}
@keyframes hale-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.82);}}

/* ── the station card ──────────────────────────────────────────────────────
   Was: a tile of three rotated covers under an opaque veil, an emoji badge,
   and a mint play chip. Is: a disc carrying the artwork with a slow conic
   sweep, the name, one line of meta behind a live dot, a quiet control, and
   the station's own waveform along the bottom edge. */
/* The row card was the rejected pattern wearing new paint: a 56px thumbnail
   beside two lines of dense type on a neutral-white tint. The direction the
   user settled on is the opposite of that — large CIRCULAR artwork with a
   halo, a TINTED plum ground (#1A1520–#221A28, never neutral black), LIGHT
   type at size, low contrast, spacious. So the card stands up: artwork on
   top, name under it, one quiet line of meta, and the waveform ribbon along
   its own bottom edge as the signature element. */
html.hale .rchan{
  /* the base rule stacks it: flex-direction:column, justify-content:flex-end,
     min-height:126px. This card sets its own. */
  display:flex !important;flex-direction:column !important;
  justify-content:flex-start !important;align-items:center !important;
  gap:0 !important;padding:20px 14px 26px !important;
  border-radius:22px !important;text-align:center !important;
  background:linear-gradient(168deg,#221A28 0%,#1A1520 62%,#171220 100%) !important;
  border:1px solid rgba(255,255,255,.055) !important;box-shadow:none !important;
  position:relative;overflow:visible;cursor:pointer;isolation:isolate;
  transition:background .25s var(--ez),border-color .25s var(--ez);
  min-height:0 !important;height:auto !important;}
html.hale .rchan:hover{
  background:linear-gradient(168deg,#2A2033 0%,#201826 62%,#1B1526 100%) !important;
  border-color:rgba(255,255,255,.10) !important;box-shadow:none !important;}

/* the artwork is the subject, and it carries the station's own colour */
html.hale .rchan{--rc:var(--ch,var(--hue));}
html.hale .rchan .disc{
  width:92px;height:92px;margin-bottom:15px;flex:0 0 auto;position:relative;order:1;}
html.hale .rchan .disc::after{
  content:'';position:absolute;inset:-22%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle, hsl(var(--rc) 55% 62% / .30) 0%, transparent 66%);}
html.hale .rchan .disc img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.07);}
html.hale .rchan .disc.empty{border-radius:50%;
  background:linear-gradient(150deg,var(--raised),var(--surface));
  box-shadow:0 0 0 1px rgba(255,255,255,.06);}
html.hale .rchan .spin{position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 74%,hsl(var(--rc) 60% 68% / .55) 86%,transparent 100%);
  animation:hale-spin 7s linear infinite;}

html.hale .rchan .m{order:2;min-width:0;width:100%;flex:0 0 auto !important;}
html.hale .rchan .m b{display:block;font-size:16px;font-weight:300;letter-spacing:.005em;
  line-height:1.4;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  /* `plaintext` takes the paragraph direction from the first strong character,
     so a station called «Popِ آخرهفته» was laid out left-to-right on the
     strength of its «P» — the Latin word jumped to the far side and the ezāfe
     was stranded. `isolate` keeps the card's own RTL and still lets a Latin
     run inside a name («رادیو Black Cats») read the right way. */
  unicode-bidi:isolate;}
/* two reserved lines, so every card in a row is the same height and a long
   station description is never cut mid-word */
html.hale .rchan .live{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  margin-top:6px;min-height:2.6em;overflow:hidden;
  font-size:11.5px;line-height:1.65;color:var(--muted2);
  white-space:normal;text-align:center;}
html.hale .rchan .dot{width:5px;height:5px;border-radius:50%;background:hsl(var(--rc) 62% 68%);
  display:inline-block;vertical-align:middle;margin-inline-end:6px;flex:0 0 auto;
  animation:hale-pulse 2.4s ease-in-out infinite;}

/* the control sits on the artwork, where the eye already is, and stays out of
   the way until asked — except on touch, where there is no hover to ask with */
html.hale .rchan .rc-play{
  order:0;position:absolute !important;top:20px !important;
  left:50% !important;transform:translateX(-50%) !important;inset-inline:auto !important;
  width:92px;height:92px;margin:0 !important;border:0;padding:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;z-index:2;
  background:rgba(10,8,14,.52) !important;color:var(--ink) !important;
  box-shadow:none !important;opacity:0;
  transition:opacity .22s var(--ez),background .22s var(--ez);}
html.hale .rchan:hover .rc-play,html.hale .rchan:focus-within .rc-play{opacity:1;}
@media (hover:none){
  html.hale .rchan .rc-play{opacity:.9;background:rgba(10,8,14,.34) !important;}
}
html.hale .rchan .rc-play svg{width:22px;height:22px;display:block;}

/* the ribbon: faded at both ends so it reads as a signature, not a border */
html.hale .rchan .ln{order:3;position:absolute;inset-inline:0;bottom:0;height:22px;opacity:.26;
  pointer-events:none;line-height:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
html.hale .rchan .ln .wave{width:100%;height:100%;}

@media (max-width:880px){
  html.hale .rchan{padding:16px 10px 22px !important;border-radius:20px !important;}
  html.hale .rchan .disc{width:68px;height:68px;margin-bottom:12px;}
  html.hale .rchan .rc-play{width:68px;height:68px;top:16px !important;}
  html.hale .rchan .m b{font-size:14.5px;}
  html.hale .rchan .live{font-size:11px;}
  html.hale .rchan .ln{height:18px;}
}

/* ── the waveform ──────────────────────────────────────────────────────────
   A real beat grid: downbeat tallest, backbeat next, off-beats quiet, an
   envelope over the phrase, drawn as a Catmull-Rom spline. Seeded by id, so
   a station or a song always draws the same line. */
html.hale .wave{position:relative;line-height:0;direction:ltr;display:block;}
html.hale .wave[role="slider"]{cursor:pointer;}
html.hale .wave svg{width:100%;height:100%;display:block;overflow:visible;}
html.hale .wave .bgp{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;}
html.hale .wave .fgp{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
html.hale .wave .fill{fill:hsl(var(--H) 50% 62% / .10);stroke:none;}
html.hale .wave .knob{fill:#fff;}
html.hale .wave.rib .bgp{stroke:hsl(var(--rc,var(--hue)) 52% 72%);stroke-width:1.2;}
html.hale .wave.rib .fgp,html.hale .wave.rib .fill{display:none;}

/* the fan, the veil, the emoji badge and the tile's sheen overlay are what
   this card replaced. ::after was a 105deg gloss at z-index 2 painting over
   the whole card, artwork included. */
html.hale .rc-fan,html.hale .rc-bg,html.hale .rc-duo,html.hale .rc-emoji{display:none !important;}
html.hale .rchan::after,html.hale .rchan::before{display:none !important;content:none !important;}

@media (prefers-reduced-motion:reduce){
  html.hale .rchan .spin,html.hale .rchan .dot{animation:none;}
}

/* ── how the stations are laid out ─────────────────────────────────────────
   The card is now a wide row, so it wants a column, not a four-across grid of
   tiles. Two columns on desktop, one on a phone. The families keep the shelf
   idiom the rest of the page uses — they had overflow:visible, so a family of
   ten wrapped into three rows instead of scrolling, which is what made the
   radio section 1,821px tall and pushed the first song three screens down. */
/* minmax(0,1fr), never 1fr. `1fr` is `minmax(auto,1fr)`, and a grid item's
   automatic minimum is its min-content — which for `white-space:nowrap` text is
   the entire string. On a 301px phone that resolved the column to 3090px and
   pushed 579 elements off the screen. */
html.hale #radio-grid{
  display:grid !important;gap:12px !important;
  /* 136, not 150: two columns of 150 plus the gap needs 314px and the phone
     column is 301 — the same thirteen-pixel miss that flattened the category
     rows. An explicit minimum also keeps the `1fr` from ever consulting
     min-content, which is what blew this grid up to 3,090px once. */
  grid-template-columns:repeat(auto-fill,minmax(136px,1fr)) !important;}
html.hale .rchan{min-width:0 !important;}
/* Two hardcoded columns was an over-correction for the min-content blowup
   below. On a 1,744px container that is 867px per card — a row card holding a
   56px disc and two short lines, stretched across 700px of nothing. The
   explicit 300px minimum keeps the trap shut (the `1fr` never has to consult
   min-content) while letting the count follow the width: five columns here,
   three at 1,200px, two at 900px. */
@media (min-width:881px){
  html.hale #radio-grid{
    grid-template-columns:repeat(auto-fill,minmax(184px,1fr)) !important;
    gap:16px !important;}
  html.hale #radio-grid .rchan.me{grid-column:auto !important;}
}
/* on a phone the card has ~180px for two lines of text once the disc and the
   control are taken out; a smaller disc and a tighter gap buy back 25 of it */
@media (max-width:880px){
  html.hale .rchan{gap:12px;padding:11px 12px !important;}
  html.hale .rchan .disc{width:52px;height:52px;}
  html.hale .rchan .rc-play{width:44px;height:44px;min-width:44px;min-height:44px;}
}
html.hale .rfam{grid-column:1 / -1;margin-block:8px;}
html.hale .rfam-h{font-size:12px;color:var(--muted2);margin:4px 2px 10px;
  letter-spacing:0 !important;text-transform:none !important;
  font-family:'Vazirmatn',system-ui,sans-serif !important;}
html.hale .rfam-row{
  display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  gap:10px;padding-bottom:6px;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
html.hale .rfam-row::-webkit-scrollbar{display:none;}
html.hale .rfam-row .rchan{flex:0 0 300px;min-width:0 !important;scroll-snap-align:start;}

/* ── the shelf card ────────────────────────────────────────────────────────
   Production's markup already matches the design's: artwork, title, artist.
   What differed was everything measurable — the size, the corner, the type,
   and two controls sitting permanently on top of the artwork. In the design
   the controls are quiet until you reach for them, the way the category
   card's chevron is. They stay in the DOM and stay operable: this is a
   reveal, not a removal, and both keep a 44px target. */
/* :not(.art) matters — the artist card is the same .card with a circular
   frame set inline, and an !important radius here would beat that inline
   declaration and turn every artist into a rounded square. */
html.hale .card .frame:not(.art){border-radius:14px !important;overflow:hidden;}
html.hale .card .ct{font-size:14px;font-weight:500;margin-top:13px;letter-spacing:-.004em;
  unicode-bidi:plaintext;text-align:start;}
html.hale .card .ca{font-size:12.5px;color:var(--mut);margin-top:3px;
  unicode-bidi:plaintext;text-align:start;}
html.hale .card{transition:transform .32s var(--ez);}
html.hale .card:hover{transform:translateY(-4px);}
html.hale .card .pin,html.hale .card .add{
  opacity:0;transform:scale(.86);
  transition:opacity .28s var(--ez),transform .32s var(--ez),background .22s,color .22s;}
html.hale .card:hover .pin,html.hale .card:hover .add,
html.hale .card:focus-within .pin,html.hale .card:focus-within .add{opacity:1;transform:scale(1);}
@media (hover:none){
  /* nothing to reveal on a touch screen — the controls simply stay */
  html.hale .card .pin,html.hale .card .add{opacity:1;transform:none;}
}

/* ── the hero artwork ──────────────────────────────────────────────────────
   A circle with a hard edge sits ON the page. The design gives it a halo and
   two concentric rings so it sits IN it — the single detail that makes the
   artwork read as the subject rather than as a thumbnail. The rings live
   outside the image, so the box can no longer clip. */
html.hale .hero-feature .hf-art{overflow:visible !important;background:none !important;}
html.hale .hero-feature .hf-art>img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 32px 84px hsl(var(--H) calc(var(--S)*1.4%) 5% / .8),
             0 0 0 1px rgba(255,255,255,.06);}
html.hale .hero-feature .hf-art::before,
html.hale .hero-feature .hf-art::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  border:1px solid hsl(var(--H) 40% 70% / .055);display:block !important;}
html.hale .hero-feature .hf-art::before{inset:-7%;}
html.hale .hero-feature .hf-art::after{inset:-15%;}

/* ── the track row ─────────────────────────────────────────────────────────
   The design's row is index · artwork · title/artist · duration, at 60px with
   a soft hover. Production's row carries more than the prototype ever had —
   a star rating, a like, a download, a menu — and those are real features, so
   this brings the language across rather than the markup: the same type, the
   same rhythm, the same 40px artwork at a 9px corner, and everything beyond
   the four essentials made quiet and revealed on approach.

   Nothing is removed. Every control stays in the DOM, stays keyboard
   reachable, and stays visible on a touch screen where there is no hover. */
html.hale .lrow{
  min-height:60px !important;padding:5px 10px !important;gap:14px !important;
  border-radius:12px !important;border:0 !important;
  background:none !important;box-shadow:none !important;
  transition:background .22s var(--ez);align-items:center !important;}
html.hale .lrow:hover{background:var(--f1) !important;}
html.hale .lrow .n .num{color:var(--dim);font-size:13px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;}
html.hale .lrow .th,html.hale .lrow .th img,html.hale .lrow .th .art{
  width:40px !important;height:40px !important;border-radius:9px !important;}
html.hale .lrow .ti .t{font-size:14px;font-weight:500;letter-spacing:-.004em;
  color:var(--ink);unicode-bidi:plaintext;}
html.hale .lrow .ti .a,html.hale .lrow .ti .a .al{font-size:12.5px;color:var(--mut);
  margin-top:2px;unicode-bidi:plaintext;}
html.hale .lrow .album{font-size:12.5px;color:var(--dim);}
html.hale .lrow .gtag{background:var(--f1);border:0;color:var(--mut);
  font-size:11.5px;border-radius:999px;padding:3px 10px;}
/* the secondary controls step back until you reach for them */
html.hale .lrow .rate,html.hale .lrow .end{
  opacity:.28;transition:opacity .25s var(--ez);}
html.hale .lrow:hover .rate,html.hale .lrow:hover .end,
html.hale .lrow:focus-within .rate,html.hale .lrow:focus-within .end{opacity:1;}
@media (hover:none){
  html.hale .lrow .rate,html.hale .lrow .end{opacity:1;}
}
/* the playing indicator is the design's three-bar equaliser, on the beat */
html.hale .lrow .eq{display:flex;align-items:flex-end;gap:2.5px;height:13px;
  width:40px;justify-content:center;flex:0 0 auto;}
html.hale .lrow .eq i{width:2.5px;border-radius:1px;
  background:hsl(var(--hue) 56% 74%);
  animation:hale-eq var(--beat,.6s) ease-in-out infinite alternate;}
html.hale .lrow .eq i:nth-child(1){height:40%;animation-delay:-.1s;}
html.hale .lrow .eq i:nth-child(2){height:88%;animation-delay:-.31s;}
html.hale .lrow .eq i:nth-child(3){height:56%;animation-delay:-.2s;}
@keyframes hale-eq{from{transform:scaleY(.3);}to{transform:scaleY(1);}}
@media (prefers-reduced-motion:reduce){html.hale .lrow .eq i{animation:none;}}

/* ── the browse card ───────────────────────────────────────────────────────
   Same component as the shelf card under a different name, so it gets the
   same treatment: the design's corner, type and hover reveal. */
html.hale .bframe{border-radius:14px !important;overflow:hidden;}
html.hale .bct{font-size:14px;font-weight:500;margin-top:12px;letter-spacing:-.004em;
  unicode-bidi:plaintext;text-align:start;color:var(--ink);}
html.hale .bca{font-size:12.5px;color:var(--mut);margin-top:3px;
  unicode-bidi:plaintext;text-align:start;}
html.hale .bcard{transition:transform .32s var(--ez);}
html.hale .bcard:hover{transform:translateY(-4px);}
html.hale .bcard .pin{opacity:0;transform:scale(.86);
  transition:opacity .28s var(--ez),transform .32s var(--ez),background .22s,color .22s;
  background:rgba(236,233,241,.15) !important;color:var(--ink) !important;
  box-shadow:none !important;}
html.hale .bcard:hover .pin,html.hale .bcard:focus-within .pin{opacity:1;transform:scale(1);}
html.hale .bcard:hover .pin{background:var(--ink) !important;color:var(--void) !important;}
@media (hover:none){html.hale .bcard .pin{opacity:1;transform:none;}}

/* ── the ribbon ────────────────────────────────────────────────────────────
   The design closes the home page with a ribbon: a label, the song's own
   waveform running across the middle, and a quiet way in. Production had the
   same idea as a bare two-word teaser bar. Same element, the designed shape. */
html.hale .browse-teaser{
  display:flex;align-items:center;gap:20px;padding:17px 22px;border-radius:20px;
  background:var(--f1) !important;border:0 !important;box-shadow:none !important;
  cursor:pointer;transition:background .25s var(--ez);}
html.hale .browse-teaser:hover{background:var(--f2) !important;}
html.hale .browse-teaser>span:first-child{
  flex:0 0 auto;font-size:14px;font-weight:500;color:var(--ink);}
html.hale .browse-teaser .bt-go{
  flex:0 0 auto;margin-inline-start:auto;display:flex;align-items:center;gap:8px;
  color:var(--dim) !important;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;}
html.hale .browse-teaser:hover .bt-go{color:var(--ink) !important;}

/* ── the mini player ───────────────────────────────────────────────────────
   The bar that is on screen more than any other surface. Circular artwork,
   the design's type, and controls that stop competing with the music. */
html.hale #mini .p-art{border-radius:50% !important;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07);}
html.hale #mini .p-art img{border-radius:50% !important;}
html.hale #mini .p-t{font-size:14px;font-weight:500;color:var(--ink);
  unicode-bidi:plaintext;letter-spacing:-.004em;}
html.hale #mini .p-a{font-size:12.5px;color:var(--mut);unicode-bidi:plaintext;margin-top:2px;}
html.hale #mini .p-icon{color:var(--mut);background:none;border:0;
  transition:color .2s var(--ez);}
html.hale #mini .p-icon:hover,html.hale #mini .p-icon.on{color:var(--ink);}
html.hale #mini .p-time,html.hale #mini .p-times{color:var(--dim);
  font-family:var(--mono);font-variant-numeric:tabular-nums;}
html.hale .browse-teaser .bt-wave{flex:1;min-width:0;height:34px;line-height:0;
  opacity:.55;pointer-events:none;}
html.hale .browse-teaser .bt-wave .wave{width:100%;height:100%;}

/* ── the artist ────────────────────────────────────────────────────────────
   Already a circle in production; the design gives it the rest: a hairline,
   a lift on approach, centred type, and a quiet role line underneath. */
html.hale .card .frame.art{
  border-radius:50% !important;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) !important;
  transition:transform .32s var(--ez);}
html.hale .card:hover .frame.art{transform:scale(1.035);}
html.hale .card:has(.frame.art){text-align:center;}
html.hale .card:has(.frame.art) .ct{font-weight:400;}
html.hale .card:has(.frame.art) .ca{color:var(--dim);font-size:12px;}

/* ── the page header ───────────────────────────────────────────────────────
   One component, four screens: album, artist, channel and library all open
   with `.liked-hero`. It was a 200px rounded square with a 58px 700-weight
   serif title and a tracked uppercase kicker over Persian text.

   The design opens a page the way it opens the hero: circular artwork wearing
   a halo, a quiet kicker, and a large title at 300 that lets size carry the
   emphasis instead of weight. The uppercase and the tracking come off — the
   kicker is Persian, and Persian has neither. */
html.hale .liked-hero{align-items:center;gap:clamp(24px,3vw,40px);}
html.hale .liked-cover{
  width:clamp(150px,17vw,208px) !important;height:auto !important;aspect-ratio:1;
  border-radius:50% !important;overflow:visible !important;position:relative;
  box-shadow:none !important;}
html.hale .liked-cover>img,html.hale .liked-cover>.solid{
  border-radius:50%;object-fit:cover;
  box-shadow:0 32px 84px hsl(var(--H) calc(var(--S)*1.4%) 5% / .8),
             0 0 0 1px rgba(255,255,255,.06);}
/* a four-up grid cannot be a disc, so a multi-cover header wears one circle
   with the quadrants inside it */
html.hale .liked-cover:has(img + img){overflow:hidden !important;border-radius:50% !important;}
html.hale .liked-cover:has(img + img)>img{border-radius:0;box-shadow:none;}
html.hale .liked-cover::before,html.hale .liked-cover::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  border:1px solid hsl(var(--H) 40% 70% / .055);}
html.hale .liked-cover::before{inset:-7%;}
html.hale .liked-cover::after{inset:-15%;}
html.hale .liked-info .kk{
  font-family:'Vazirmatn',system-ui,sans-serif !important;
  font-size:12px !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--muted2) !important;font-weight:400 !important;}
html.hale .liked-info h1,html.hale .liked-info h2{
  font-family:'Vazirmatn',system-ui,sans-serif !important;
  font-weight:300 !important;font-size:clamp(28px,4.2vw,52px) !important;
  letter-spacing:-.022em !important;line-height:1.06 !important;
  margin:12px 0 10px !important;unicode-bidi:plaintext;}
html.hale .liked-info .cnt{font-size:13px;color:var(--mut);}
html.hale #ld-actions .btn,html.hale #ld-actions button{min-height:46px;}

/* ── the section header ────────────────────────────────────────────────────
   The design's `.sh`: title, a quiet note beside it, and the way in pushed to
   the far end. Production draws a hairline after the title; the design lets
   the space do it. */
html.hale .sec-h::after{background:var(--glass-line) !important;opacity:.6;}
html.hale .sec-h h3::before{display:none !important;}

/* ── expand / show-more ────────────────────────────────────────────────────
   The design's `.more`: a tracked micro-label that lights on approach, not a
   button competing with the content it reveals. */
html.hale .expand{
  background:none !important;border:1px solid var(--glass-line) !important;
  color:var(--muted2) !important;border-radius:999px !important;
  min-height:44px;padding:0 22px !important;font-size:12.5px;font-weight:500;
  box-shadow:none !important;transition:color .2s var(--ez),background .2s var(--ez);}
html.hale .expand:hover{color:var(--ink) !important;background:var(--f1) !important;}

/* ── the library index ─────────────────────────────────────────────────────
   `.row.grid` was neither: `grid-template-columns` computed to `none`, so one
   card sat at 953px with a 188px cover and its title stretched the full row.
   A grid of card columns, at the same width the shelves already use. */
html.hale #lib-cards,html.hale .row.grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;
  gap:22px 18px !important;align-items:start;}
html.hale #lib-cards .card,html.hale .row.grid .card{width:auto !important;}
html.hale #lib-cards .frame,html.hale .row.grid .frame,
html.hale #lib-cards .cardart,html.hale .row.grid .cardart{
  width:100% !important;height:auto !important;aspect-ratio:1;}
html.hale #lib-cards .ct,html.hale #lib-cards .ca,
html.hale .row.grid .ct,html.hale .row.grid .ca{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* the liked-songs tile carried a fixed violet-to-pink gradient — two hues that
   belong to no artwork, on the one card in the library that is not artwork.
   The mark stays; the colour becomes the ground the rest of the app is on. */
html.hale #lib-cards .card .frame[style*="linear-gradient"],
html.hale .libic[style*="linear-gradient"]{
  background:linear-gradient(150deg,var(--raised),var(--surface)) !important;
  color:var(--ink) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important;}
html.hale .libic{border-radius:14px !important;}

/* ── touch targets in the row ──────────────────────────────────────────────
   The heart, the plus and the play glyph measured under 44px. They keep their
   look; the button grows to the floor and centres the glyph inside it.

   The artist link is inline text, so a height cannot be given to it without
   breaking the line box. It gets a vertical hit area instead — padding on an
   inline element expands what a finger can reach without moving the baseline
   or changing the row's height. */
html.hale .lrow .like,html.hale .lrow .more,html.hale .lrow .p,
html.hale .lrow .end button{
  min-width:44px;min-height:44px;padding:0 !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  background:none;border:0;color:var(--mut);
  transition:color .2s var(--ez);}
html.hale .lrow .like:hover,html.hale .lrow .more:hover,
html.hale .lrow .p:hover,html.hale .lrow .end button:hover{color:var(--ink);}
html.hale .lrow .like.on,html.hale .lrow .like[aria-pressed="true"]{color:var(--ink);}
html.hale .lrow .ti .a .al{
  padding-block:14px;margin-block:-14px;display:inline-block;
  text-decoration:none;transition:color .2s var(--ez);}
html.hale .lrow .ti .a .al:hover{color:var(--ink);}
/* the same floor wherever a pill action lives outside the top bar */
html.hale .upbtn{min-height:44px;}

/* ── the last accent gradients ─────────────────────────────────────────────
   `.gchip.on` and `.bview.on` were the only chrome left wearing a two-hue
   gradient. Under the rule the rest of the app now follows — chrome neutral,
   colour from the artwork — the selected state is light on dark, which also
   measures 13:1 instead of the gradient's unknowable value. */
html.hale .gchip.on,html.hale .bview.on,html.hale .ob-chip.on{
  background:var(--ink) !important;background-image:none !important;
  color:var(--void) !important;border-color:transparent !important;
  font-weight:500 !important;box-shadow:none !important;}

/* ── the track document ────────────────────────────────────────────────────
   The one page that is *about* a single record, and it opened with a
   breadcrumb, a headline and no artwork at all — a document, not the music
   page the rest of the app leads you to expect. The cover now leads, circular
   and wearing the halo, with the title and the actions beside it; on a phone
   the two stack and the artwork centres. */
html.hale .ssr-head{display:flex;align-items:center;gap:clamp(20px,3vw,36px);
  margin:6px 0 26px;}
html.hale .ssr-head-t{min-width:0;flex:1;}
html.hale .ssr-art{flex:0 0 auto;position:relative;
  width:clamp(132px,20vw,196px);aspect-ratio:1;}
html.hale .ssr-art img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  display:block;background:var(--surface);
  box-shadow:0 32px 84px hsl(var(--H) calc(var(--S)*1.4%) 5% / .8),
             0 0 0 1px rgba(255,255,255,.06);}
html.hale .ssr-art::before,html.hale .ssr-art::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  border:1px solid hsl(var(--H) 40% 70% / .06);}
html.hale .ssr-art::before{inset:-7%;}
html.hale .ssr-art::after{inset:-15%;}
html.hale .ssr-doc h1{margin:0 0 8px !important;}
html.hale .ssr-doc .ssr-head-t>p{margin:0 0 16px !important;}
html.hale .ssr-doc .ssr-acts{margin:0 !important;}
@media (max-width:880px){
  html.hale .ssr-head{flex-direction:column;align-items:center;text-align:center;
    gap:20px;margin-bottom:22px;}
  html.hale .ssr-head-t{width:100%;}
  html.hale .ssr-doc .ssr-acts{justify-content:center;}
  /* the prose ran at 16px/38 characters on a phone — a measure that short
     turns three sentences into a column of fragments */
  html.hale .ssr-doc p,html.hale .ssr-doc li,html.hale .ssr-doc dd{font-size:14.5px;line-height:1.85;}
  html.hale .ssr-doc h1{font-size:clamp(24px,7vw,32px) !important;}
  html.hale .ssr-doc h2{font-size:19px !important;margin-top:28px !important;}
}
/* the DJ-voice toggle was a speaker pictograph; a two-state control says its
   state in words at the size the rest of the chrome uses */
html.hale .lv-close#cg-speak{width:auto;min-width:44px;padding:0 14px;
  border-radius:999px;font-size:12.5px;font-weight:500;}

/* ── the track page's analysis ─────────────────────────────────────────────
   Eleven label/value rows stacked 402px tall, four of which were percentages
   printed as text. A measurement gets a measure; a fact stays a pair, and the
   facts sit two to a row instead of eleven deep. */
html.hale .hale-analysis{margin:0 0 22px;}
html.hale .hale-meters{display:grid;gap:14px;margin-bottom:22px;}
html.hale .hale-meter{display:grid;grid-template-columns:minmax(0,88px) minmax(0,1fr) auto;
  align-items:center;gap:14px;}
html.hale .hm-l{font-size:12.5px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html.hale .hm-t{height:4px;border-radius:999px;background:var(--f2);
  overflow:hidden;position:relative;}
html.hale .hm-t i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,hsl(var(--H) 46% 56% / .55),hsl(var(--H) 52% 68% / .95));
  transition:width .6s var(--ez);}
html.hale .hm-v{font-size:12.5px;color:var(--ink);min-width:44px;text-align:end;
  font-family:var(--mono);font-variant-numeric:tabular-nums;}
html.hale .hale-facts{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  gap:10px 16px;margin:0;align-items:baseline;}
html.hale .hale-facts dt{font-size:12.5px;color:var(--muted2);white-space:nowrap;}
html.hale .hale-facts dd{margin:0;font-size:13.5px;color:var(--ink);min-width:0;}
@media (max-width:640px){
  html.hale .hale-facts{grid-template-columns:auto minmax(0,1fr);}
  html.hale .hale-meter{grid-template-columns:minmax(0,74px) minmax(0,1fr) auto;gap:11px;}
}
@media (prefers-reduced-motion:reduce){html.hale .hm-t i{transition:none;}}

/* the song's own waveform, on the page that is about that song */
html.hale .hale-trackwave{margin:2px 0 26px;line-height:0;opacity:.9;}
html.hale .hale-trackwave .wave{width:100%;}
html.hale .hale-trackwave .bgp{stroke:hsl(var(--H) 44% 70% / .55);}

/* section rhythm — the h2s ran into the prose above them */
html.hale .ssr-doc h2{margin-top:34px !important;padding-top:22px !important;}
html.hale .ssr-doc p + h2{margin-top:38px !important;}

/* ── every non-square cover on the page was being squashed ────────────────
   `.card .frame img` sets width and height to 100% and never says
   `object-fit`, so the initial value `fill` applies: a 160×204 cover is
   stretched into a 158×158 box. Every other image container in the file —
   `.bframe img`, `.mixframe img`, `.tl-cov img`, `.world img`, `.albimg` —
   already says `cover`; this one was missed, and it is the container the
   shelves and the browse grid both use. */
html.hale .card .frame img{object-fit:cover;}

/* ── the two card controls on a touch screen ──────────────────────────────
   With no hover to reveal them they are pinned on, and two 44px discs cover
   16% of a 158px cover — on a phone that is what you look at first. 44px is
   the tap-target floor and stays: the padding shrinks only what is *drawn*
   (background-clip:content-box), so the disc reads 32px while the finger
   still gets 44. */
@media (hover:none){
  html.hale .card .pin,html.hale .card .add{
    padding:6px !important;background-clip:content-box !important;
    border-radius:50% !important;box-shadow:none !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   The category tile — the design system's `.cat`, ported.

   The station families («وایب», «موقعیت», «نسل و دهه», «نواحی») were rendering
   as horizontal shelves of row cards. On a 301px phone that is one card per
   family and a screen of empty space beneath it. A category is a place you go,
   and the design gives it a tile: a mosaic of covers from inside it, a veil so
   type can sit on top, a ghost ordinal, and the way in appearing on approach.
   ══════════════════════════════════════════════════════════════════════════ */
html.hale .cats{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));}
html.hale .cats>*{min-width:0;}
html.hale .cat{
  position:relative;height:180px;border-radius:22px;overflow:hidden;cursor:pointer;
  background:var(--surface);isolation:isolate;
  transition:transform .35s var(--ez);}
html.hale .cat:hover{transform:translateY(-4px);}
html.hale .cat:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* the mosaic adapts to how many covers the station actually has — a fixed 3×2
   with empty cells reads as a broken image, not as a design */
/* minmax(0,·) on every track, and min-width/min-height:0 on the images.
   A grid track's automatic minimum is its item's min-content, and for an <img>
   that is the intrinsic pixel size — so `1fr 1fr` opened a 164px tile to hold a
   251px cover and the mosaic spilled out of its own box. Third time this trap
   has bitten in this file: `1fr` is never what you want around content that
   has an intrinsic size. */
html.hale .cat .mos{position:absolute;inset:0;z-index:0;display:grid;gap:2px;
  overflow:hidden;}
html.hale .cat .mos img{width:100%;height:100%;min-width:0;min-height:0;
  object-fit:cover;display:block;}
html.hale .cat .mos.m0{background:linear-gradient(150deg,hsl(var(--ch,280) 30% 32%),hsl(var(--ch,280) 26% 16%));}
html.hale .cat .mos.m1{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
html.hale .cat .mos.m2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
html.hale .cat .mos.m3{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
html.hale .cat .mos.m3 img:nth-child(1){grid-row:span 2;}
html.hale .cat .mos.m4{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
html.hale .cat .mos.m4 img:nth-child(1){grid-row:span 2;}
html.hale .cat .mos.m5{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
html.hale .cat .mos.m5 img:nth-child(1){grid-row:span 2;}

/* Two veils, not one. The single diagonal wash left the title sitting on
   whatever the artwork happened to be — a bright face behind «مستی» and the
   name was unreadable. One pass darkens the reading end of the card, a second
   lays a floor under the text band, so the type clears its contrast against
   any cover the catalogue can hand it. Measured against the brightest cover in
   the set, not against a dark one. */
html.hale .cat .veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / 0) 0%,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / .06) 30%,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / .28) 52%,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / .64) 74%,
      hsl(var(--H) calc(var(--S)*1.4%) 4% / .92) 100%),
    linear-gradient(to left,
      hsl(var(--H) calc(var(--S)*1.4%) 6% / .80) 0%,
      hsl(var(--H) calc(var(--S)*1.4%) 6% / .46) 46%,
      hsl(var(--H) calc(var(--S)*1.4%) 6% / .06) 100%);}
html[dir="ltr"].hale .cat .veil{background:
    linear-gradient(to bottom,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / 0) 0%,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / .06) 30%,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / .28) 52%,
      hsl(var(--H) calc(var(--S)*1.4%) 5% / .64) 74%,
      hsl(var(--H) calc(var(--S)*1.4%) 4% / .92) 100%),
    linear-gradient(to right,
      hsl(var(--H) calc(var(--S)*1.4%) 6% / .80) 0%,
      hsl(var(--H) calc(var(--S)*1.4%) 6% / .46) 46%,
      hsl(var(--H) calc(var(--S)*1.4%) 6% / .06) 100%);}
html.hale .cat .txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;padding:20px 22px;pointer-events:none;}
html.hale .cat .txt b{text-shadow:0 1px 14px hsl(var(--H) 30% 4% / .7);font-size:24px;font-weight:300;letter-spacing:-.015em;line-height:1.15;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;}
html.hale .cat .txt>span{text-shadow:0 1px 10px hsl(var(--H) 30% 4% / .7);font-size:12.5px;color:var(--mut);margin-top:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* decoration, not content — the tile already carries a real title and subtitle */
html.hale .cat .n{position:absolute;top:18px;inset-inline-start:22px;z-index:2;
  font-size:40px;font-weight:200;letter-spacing:-.04em;line-height:1;
  color:rgba(255,255,255,.26);pointer-events:none;
  font-variant-numeric:tabular-nums;}
html.hale .cat .go{position:absolute;top:20px;inset-inline-end:20px;z-index:2;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--ink);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.8);transition:opacity .3s,transform .35s var(--ez);}
html.hale .cat:hover .go,html.hale .cat:focus-visible .go{opacity:1;transform:scale(1);}
html.hale .cat .go svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
/* on a touch screen there is no approach to reveal on, and a permanent
   chevron is just clutter over the artwork — the whole tile is the target */
@media (hover:none){html.hale .cat .go{display:none;}}
@media (max-width:880px){
  html.hale .cat{height:164px;}
  html.hale .cat .txt b{font-size:21px;}
  html.hale .cat .n{font-size:34px;top:15px;inset-inline-start:18px;}
  html.hale .cat .txt{padding:17px 18px;}
}
/* the family block becomes a grid of tiles instead of a one-card shelf */
html.hale .rfam-row.cats{display:grid !important;overflow:visible !important;
  flex-wrap:initial !important;padding-bottom:0 !important;}
/* the family header carries the way to the rest, the way the design's section
   header does — the tiles are a sample, not the whole set */
html.hale .rfam-h{display:flex;align-items:baseline;gap:12px;}
html.hale .cat-more{margin-inline-start:auto;background:none;border:0;cursor:pointer;
  font-family:inherit;color:var(--muted2);font-size:11px;font-weight:500;
  letter-spacing:.14em;min-height:44px;min-width:44px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s var(--ez);}
html.hale .cat-more:hover{color:var(--ink);}

/* ══════════════════════════════════════════════════════════════════════════
   HĀLE — the player.

   The surface someone looks at while actually listening, and the one this
   port had not touched: a 20px-cornered square where the design has a disc,
   hexagonal clip-path tabs, an accent-coloured "now playing", and a two-hue
   gradient play button with a glow under it.

   This is also the one place the rule allows colour — the player wears the
   song's own hue. It wears it in the halo and the field behind the artwork,
   not in the chrome.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the disc ──────────────────────────────────────────────────────────────
   Circular artwork is the shape the whole design is built on, and the player
   is where it should be largest. */
/* #fs-disc is a <canvas> carrying an id, not a class — a `.fs-disc` selector
   silently matches nothing, which is why the square survived a first pass. */
html.hale #fs-disc{
  border-radius:50% !important;overflow:hidden;
  box-shadow:0 42px 110px hsl(var(--hue) 44% 4% / .82),
             0 0 0 1px rgba(255,255,255,.07) !important;}
html.hale #fs-disc img,html.hale #fs-disc>*{border-radius:50% !important;}
/* the visualiser ring sits behind it and should follow the same shape */
html.hale #fs-viz{border-radius:50% !important;}
/* the two concentric rings from the design's `rec`, and the song's colour
   blooming behind the disc rather than as a gold ring around it */
html.hale .fs-disc-wrap::after{
  content:'' !important;position:absolute !important;
  inset:2% -6% -10% -6% !important;border:0 !important;
  background:radial-gradient(circle,
    hsl(var(--hue) 56% 58% / .30) 0%,
    hsl(var(--hue) 50% 50% / .10) 46%,transparent 70%) !important;
  filter:blur(58px) !important;opacity:1 !important;border-radius:50% !important;
  box-shadow:none !important;z-index:0 !important;}
html.hale .fs-disc-wrap::before{
  content:'';position:absolute;inset:-6%;border-radius:50%;pointer-events:none;
  border:1px solid hsl(var(--hue) 40% 70% / .07);z-index:0;}

/* ── the tabs ──────────────────────────────────────────────────────────────
   A clip-path polygon gave them cut corners — a shape language from nowhere
   in this design. They are a segmented control: quiet text, the current one
   lit, and the ground doing the work instead of an outline. */
html.hale .fs-tabs{gap:4px;background:var(--f1);border-radius:999px;padding:4px;}
html.hale .fs-tab{
  clip-path:none !important;border-radius:999px !important;border:0 !important;
  background:none !important;color:var(--muted2) !important;
  font-weight:500 !important;font-size:12.5px;padding:9px 16px !important;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s var(--hale-ez),background .2s var(--hale-ez);}
html.hale .fs-tab:hover{color:var(--ink) !important;}
html.hale .fs-tab.on{
  background:var(--f3) !important;color:var(--ink) !important;
  background-image:none !important;}
html.hale .fs-tab.on::after{display:none !important;}

/* ── the type ──────────────────────────────────────────────────────────────
   "در حال پخش" was accent-coloured, tracked and uppercased — three Latin
   habits on two Persian words. */
html.hale .fs-now{
  color:var(--muted2) !important;letter-spacing:0 !important;
  text-transform:none !important;font-size:12px !important;
  font-family:'Vazirmatn',system-ui,sans-serif !important;}
html.hale #fs-title{font-weight:400 !important;letter-spacing:-.025em !important;}
html.hale .fs-meta .by{color:var(--muted) !important;font-size:15px;}

/* ── the transport ─────────────────────────────────────────────────────────
   The primary control is the brightest thing here, which is right; it is
   light on dark rather than a two-hue gradient with a coloured glow. */
html.hale .transport .big{
  background:var(--ink) !important;background-image:none !important;
  color:var(--void) !important;box-shadow:none !important;
  width:64px;height:64px;}
html.hale .transport .big:hover{background:#fff !important;transform:scale(1.04);}
html.hale .transport button{color:var(--muted) !important;min-width:44px;min-height:44px;}
html.hale .transport button:hover{color:var(--ink) !important;}
html.hale .transport .tog.on{color:var(--ink) !important;}
html.hale .fs-keep button{
  background:var(--f1) !important;border:1px solid var(--glass-line) !important;
  color:var(--muted) !important;min-height:44px;border-radius:999px !important;}
html.hale .fs-keep button:hover{color:var(--ink) !important;
  border-color:var(--glass-line) !important;transform:none;}
html.hale .fs-keep button.on{
  background:var(--ink) !important;background-image:none !important;
  color:var(--void) !important;border-color:transparent !important;}

/* ── the panes and the close ───────────────────────────────────────────────*/
html.hale .fs-pane{
  background:linear-gradient(180deg,hsl(var(--hue) 26% 12% / .60),rgba(10,8,14,.86)) !important;
  border:1px solid var(--glass-line) !important;border-radius:22px !important;}
html.hale .fs-pane-h{letter-spacing:0 !important;text-transform:none !important;
  font-family:'Vazirmatn',system-ui,sans-serif !important;color:var(--muted2) !important;}
html.hale .fs-close{background:var(--f2) !important;border:0 !important;
  color:var(--ink) !important;backdrop-filter:blur(10px);}
html.hale .fs-times{color:var(--muted2) !important;}

/* the stage reserved 440px for a 300px disc, leaving a screen-height gap
   between the artwork and the tabs on a phone */
@media (max-width:880px){
  html.hale .fs-stage{height:auto !important;aspect-ratio:1;max-width:74vw !important;}
  html.hale .fs-disc-wrap{width:100% !important;height:100% !important;}
  html.hale .fs-inner{gap:22px !important;}
  html.hale .fs-meta{margin-top:2px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   HĀLE — the bar at the bottom.

   The component that is on screen more than any other, and it was the worst
   one: the title column measured **51px** on a 375px phone because two icon
   buttons ate the row; the progress bar rendered **0×0**, so there was no way
   to see or set where you were; six controls sat under the 44px floor; the
   artwork still wore the square superellipse; and the play control was the
   last mint surface left in the app.

   On a phone it now carries what a now-playing bar is for — what is playing,
   and stop or start it. Save, add, skip and the menu all live in the full
   player, one tap away, at a size a thumb can actually hit. Desktop keeps
   them, because there is room and a pointer.
   ══════════════════════════════════════════════════════════════════════════ */
html.hale #mini{
  grid-template-columns:minmax(0,1fr) auto auto !important;
  gap:12px !important;height:64px !important;padding:0 12px !important;
  background:rgba(14,11,19,.92) !important;backdrop-filter:blur(22px) saturate(1.2);
  border-top:1px solid var(--glass-line) !important;box-shadow:none !important;}
html.hale #mini .p-left{flex:1 1 auto;min-width:0;gap:12px;}
html.hale #mini .p-meta{flex:1 1 auto;min-width:0;}
html.hale #mini .p-t,html.hale #mini .p-a{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  unicode-bidi:plaintext;text-align:start;display:block;}
/* the artwork carries a superellipse path written inline by JS; a circle has
   to undo the path itself, not just the radius */
html.hale #mini .p-art{
  clip-path:none !important;border-radius:50% !important;overflow:hidden;
  width:44px !important;height:44px !important;flex:0 0 auto;
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07) !important;}
html.hale #mini .p-art img{border-radius:50% !important;width:100%;height:100%;object-fit:cover;}

/* ── the progress line ─────────────────────────────────────────────────────
   `.p-bar` computed to 0×0 — the bar told you nothing about where you were
   and could not be used to move. It becomes a hairline along the top edge of
   the whole bar, which is where a now-playing strip wants it: always visible,
   never taking a row of its own. */
html.hale #mini{position:fixed;}
/* Phones only. On a wide bar the real seek slider is present and readable, so
   pinning a second hairline to the top edge drew the same information twice —
   which is what shipped, and what the desktop block further down undoes. */
@media (max-width:880px){
  html.hale #mini .p-bar{
    position:absolute !important;inset-inline:0 !important;top:0 !important;
    height:3px !important;width:auto !important;flex:none !important;
    background:var(--f2) !important;border-radius:0 !important;cursor:pointer;
    padding:0 !important;margin:0 !important;}
  html.hale #mini .p-bar::after{content:"";position:absolute;inset:-9px 0 -3px;}
  html.hale #mini .p-knob{display:none !important;}
}
html.hale #mini .p-fill{
  height:100% !important;border-radius:inherit !important;
  background:var(--ink) !important;}

/* ── the controls ──────────────────────────────────────────────────────────*/
html.hale #mini .p-play{
  background:var(--ink) !important;background-image:none !important;
  color:var(--void) !important;box-shadow:none !important;
  width:44px !important;height:44px !important;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;}
html.hale #mini .p-play:hover{background:#fff !important;}
html.hale #mini .p-icon{
  min-width:44px;min-height:44px;width:44px;height:44px;padding:0 !important;
  display:inline-grid;place-items:center;background:none;border:0;
  color:var(--muted) !important;transition:color .2s var(--hale-ez);}
html.hale #mini .p-icon:hover,html.hale #mini .p-icon.on{color:var(--ink) !important;}

@media (max-width:880px){
  /* `.p-seek` is display:none on a phone, which is why the progress bar
     computed to 0×0. `display:contents` keeps the wrapper out of the layout
     while letting the bar itself — absolutely placed against #mini — render. */
  html.hale #mini .p-seek{display:contents !important;}
  html.hale #mini .p-time{display:none !important;}
  /* a now-playing bar answers two questions: what is this, and stop it.
     The rest is one tap away in the player, where the targets are full size. */
  html.hale #mini #m-like,html.hale #mini #m-add,
  html.hale #mini .p-right{display:none !important;}
  /* the transport took 212px of a 375px screen — five buttons — leaving the
     title 41px. Shuffle and repeat are settings, not moment-to-moment actions,
     and both are in the full player one tap away. Previous / play / next stay,
     and the name of what is playing gets the room back. */
  html.hale #mini #m-shuffle,html.hale #mini #m-repeat{display:none !important;}
  html.hale #mini .p-ctrls{gap:4px;}
  html.hale #mini .p-ctrls .p-icon{width:44px;min-width:44px;}
  html.hale #mini .p-t{font-size:13.5px;font-weight:500;}
  html.hale #mini .p-a{font-size:12px;}
}

/* the icons: real marks, sized once, taking the text colour */
html.hale #mini .mi-sv{width:19px;height:19px;display:block;}
html.hale #mini .p-play .mi-sv{width:16px;height:16px;}
html.hale #mini .p-icon.on .mi-sv{color:var(--ink);}
html.hale #mini #m-like.on{color:var(--ink) !important;}

/* ── the stack at the bottom of a phone ────────────────────────────────────
   Three fixed layers were each given a hard-coded offset and none of them
   agreed: the nav sits at 0 and is 66px tall, the now-playing bar was pinned
   at 62 (4px *under* the nav), and the install pill at 104 — which put its
   lower 22px over the bar, hiding the progress line the bar had just gained.

   Each one now clears the one below it, and the safe-area inset is added once
   at the bottom of the stack instead of being forgotten. */
@media (max-width:880px){
  html.hale #mini{
    bottom:calc(66px + env(safe-area-inset-bottom,0px)) !important;
    z-index:45 !important;}
  html.hale .pwa-pill{
    bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important;}
  /* …and further up again while something is playing */
  html.hale body:has(#mini.show) .pwa-pill{
    bottom:calc(152px + env(safe-area-inset-bottom,0px)) !important;}
}

/* ── restoring what the trim took ──────────────────────────────────────────
   Hiding `.p-right` on a phone took the ⋯ button with it — and that button is
   the only door to the overflow menu, which is where listening together,
   commenting on the moment, seeding a radio, auto-DJ, karaoke, acapella,
   lyrics, reviews and the queue all live. Nine features traded for 72px of
   width. That was the wrong trade.

   The bar now carries what it must: what is playing, save it, play it, and
   the way to everything else. Add-to-playlist and share moved *into* that
   menu, so nothing is more than one tap from the bar. The rest of `.p-right`
   — close, lyrics, queue, fullscreen, volume — is either in the menu already
   or meaningless on a touch device, so only those stay hidden. */
@media (max-width:880px){
  html.hale #mini #m-like{display:inline-grid !important;}
  html.hale #mini .p-right{display:flex !important;}
  html.hale #mini .p-right>*{display:none !important;}
  html.hale #mini .p-right #m-more{display:inline-grid !important;}
  html.hale #mini #m-add{display:none !important;}   /* now in the menu */
  /* previous / next come off too. Five 44px controls plus the artwork left the
     title 25px on a 375px screen — the bar stopped saying what was playing,
     which is its first job. Both are in the full player, and the queue is one
     item down the menu. What remains: what it is, save it, play it, and the
     door to everything else. */
  html.hale #mini #m-prev,
  html.hale #mini .p-ctrls .p-icon:not(#m-prev):not(#m-play){display:none !important;}
  html.hale #mini{grid-template-columns:minmax(0,1fr) auto auto !important;gap:8px !important;}
  html.hale #mini .p-left{gap:10px;}
}


/* ── the bar on a wide screen ──────────────────────────────────────────────
   Two things were wrong and I caused the second one.
   The original: `.p-center` measured 66px inside a 64px pill with
   `overflow:visible`, so the seek row and both timestamps hung 3px *below* the
   pill, detached from it.
   My first fix promoted `.p-center`'s children into the bar's grid with
   `display:contents` and gave the seek a full-width row of its own. That put a
   1,106px hairline hard against the pill's bottom edge — and worse, taking
   `.p-bar` out of `position` broke the containing block for `.p-fill` and
   `.p-knob`, which are absolute against it: the fill became a 0×87 full-height
   element and the knob detached and sat in the middle of the control strip as
   a stray white dot.
   A now-playing bar wants the seek directly under the transport, which is what
   the markup already describes. So `.p-center` stays a column, the bar simply
   gets the height it always needed, and `.p-bar` keeps a position. */
@media (min-width:881px){
  html.hale #mini{
    grid-template-columns:minmax(0,1fr) minmax(400px,40%) minmax(0,1fr) !important;
    column-gap:20px !important;
    height:auto !important;min-height:76px !important;
    padding:10px 18px !important;align-items:center !important;
    overflow:visible !important;}
  html.hale #mini .p-left,html.hale #mini .p-right{min-width:0 !important;}
  html.hale #mini .p-center{
    display:flex !important;flex-direction:column !important;align-items:center !important;
    gap:5px !important;width:100% !important;min-width:0 !important;}
  html.hale #mini .p-seek{
    width:100% !important;background:none !important;padding:0 !important;
    display:flex !important;align-items:center !important;gap:10px !important;}
  html.hale #mini .p-bar{
    position:relative !important;   /* ← .p-fill and .p-knob anchor here */
    flex:1 1 auto !important;min-width:0 !important;width:auto !important;
    height:5px !important;inset-inline:auto !important;top:auto !important;
    border-radius:99px !important;background:rgba(236,233,241,.18) !important;
    transition:height .16s var(--hale-ez);}
  html.hale #mini .p-seek:hover .p-bar{height:8px !important;}
  html.hale #mini .p-fill{
    position:absolute !important;inset:0 auto 0 0 !important;
    height:100% !important;border-radius:99px !important;background:var(--ink) !important;}
  html.hale #mini .p-knob{
    display:block !important;position:absolute !important;top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:12px !important;height:12px !important;border-radius:50% !important;
    background:var(--ink) !important;box-shadow:0 2px 8px rgba(0,0,0,.6) !important;
    opacity:0;transition:opacity .16s var(--hale-ez);}
  html.hale #mini .p-seek:hover .p-knob{opacity:1 !important;}
  html.hale #mini .p-time{
    color:var(--muted) !important;font-size:11.5px !important;
    font-variant-numeric:tabular-nums;flex:none !important;
    min-width:36px;text-align:center;}
}

/* ══════════════════════════════════════════════════════════════════════════
   HĀLE — social, timeline, map, DJ.

   The secondary surfaces. They had taken the token and type layer but none of
   the component work, and one measurable layout failure between them.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── a section header that also carries actions ───────────────────────────
   `.sec-h` puts the title, the note and any action buttons in one flex row.
   On a 301px phone that gave the note **46px** and wrapped it to three lines
   between the title and the buttons. The actions take their own line instead,
   and the note gets the width it needs. */
@media (max-width:880px){
  html.hale .sec-h{flex-wrap:wrap;row-gap:10px;}
  html.hale .sec-h .meta{flex:1 0 100%;order:3;margin:0;}
  html.hale .sec-h .soc-new{margin-inline-start:0;}
  html.hale .sec-h .soc-new:first-of-type{margin-inline-start:auto;}
}
/* the new-post and new-story buttons wore a mint outline — the last coloured
   border in the chrome — and stood 34px tall */
html.hale .soc-new{
  border:1px solid var(--glass-line) !important;background:var(--f1) !important;
  color:var(--muted) !important;min-height:44px;padding:0 15px !important;
  display:inline-flex;align-items:center;gap:6px;border-radius:999px !important;
  transition:color .2s var(--hale-ez),background .2s var(--hale-ez);}
html.hale .soc-new:hover{color:var(--ink) !important;background:var(--f2) !important;}
html.hale .soc-hub-b{min-height:44px;border-radius:999px !important;
  border:1px solid var(--glass-line) !important;background:var(--f1) !important;
  color:var(--muted) !important;}
html.hale .soc-hub-b:hover{color:var(--ink) !important;}
html.hale .dm-badge{background:var(--ink) !important;color:var(--void) !important;}

/* ── cards on these pages take the same language as everywhere else ───────*/
html.hale .sg-card,html.hale .lp-card,html.hale .tl-pl,html.hale .ma-card,
html.hale .u-chip,html.hale .soc-post{
  border:1px solid var(--glass-line) !important;background:var(--f1) !important;
  border-radius:18px !important;box-shadow:none !important;}
html.hale .sg-av,html.hale .u-chip img,html.hale .soc-av,html.hale .tl-av{
  border-radius:50% !important;box-shadow:0 0 0 1px rgba(255,255,255,.06) !important;}
html.hale .sg-t{font-size:14px;font-weight:500;color:var(--ink);}
html.hale .sg-s{font-size:12.5px;color:var(--mut);}

/* ── the empty states ─────────────────────────────────────────────────────
   Every view has one and they are the first thing a signed-out visitor sees. */
html.hale .empty,html.hale .libhint{
  color:var(--mut) !important;font-size:13.5px;line-height:1.85;}
html.hale .soc-gate{border:1px solid var(--glass-line) !important;
  border-radius:22px !important;background:var(--f1) !important;}

/* ── map, DJ and timeline chrome ──────────────────────────────────────────*/
html.hale .mf,html.hale .map-vis,html.hale .map-filters button{
  border:1px solid var(--glass-line) !important;background:var(--f1) !important;
  color:var(--muted) !important;min-height:44px;border-radius:999px !important;}
html.hale .mf.on,html.hale .map-vis.on{
  background:var(--ink) !important;color:var(--void) !important;
  border-color:transparent !important;background-image:none !important;}
html.hale .dj-hero-t{font-weight:400 !important;letter-spacing:-.02em;}
html.hale .dj-hero-s{color:var(--mut) !important;}

/* ── the gap at the top of ten pages ───────────────────────────────────────
   `#scroll` already reserves 78px to clear the top bar. Ten of the twelve
   views then add another 84px (92 on desktop) of their own, so every page
   except home and DJ opened **162px** down — a third of a phone's first
   screen, on every visit, spent on nothing.

   Home carries 8px and sits correctly under the same top bar, which is what
   says the rest is redundant rather than load-bearing. Measured, not guessed:
   the first element of social sat at y=192 on a phone with the bar ending at
   84.

   The rule targets the section's own padding only; nothing else moves. */
html.hale .section[id^="view-"]{padding-top:8px !important;}
@media (min-width:881px){
  html.hale .section[id^="view-"]{padding-top:10px !important;}
}

/* the mix-mode chips under the overflow menu still had a mint selected state */
html.hale .pm-mix button.on,html.hale .pm-mix .on{
  background:var(--ink) !important;background-image:none !important;
  color:var(--void) !important;border-color:transparent !important;}
html.hale .pm-i{min-height:48px;color:var(--ink);}
html.hale .pm-i:hover{background:var(--f1);}

/* ── the install pill must never cover a form ──────────────────────────────
   It carries z-index 210 against the modal's 100, so it sat over the sign-up
   sheet and covered 18px of the «ساخت حساب رایگان» button — the one control
   the sheet exists for. A promotional pill outranking a form is never right;
   it steps aside while anything modal is open. */
html.hale body:has(.modal:not(.hidden)) .pwa-pill,
html.hale body:has(#fs:not(.hidden)) .pwa-pill{display:none !important;}

/* the two links in the sign-in sheet were the last accent-coloured text */
html.hale .modal a,html.hale #authmodal a{
  color:var(--muted) !important;text-decoration:none;
  transition:color .2s var(--hale-ez);}
html.hale .modal a:hover,html.hale #authmodal a:hover{color:var(--ink) !important;}
html.hale #auth-switch-link{color:var(--ink) !important;font-weight:500;}
html.hale .modal .mtitle{font-weight:400 !important;letter-spacing:-.02em;}

/* the sheet's text links measured 21px tall. They are inline, so a height
   would break the line; padding gives the finger something to land on without
   moving the baseline. (The 6px input beside them is the honeypot — name=
   "website", tabindex=-1 — and is meant to stay unreachable.) */
html.hale .modal a{display:inline-block;padding-block:12px;margin-block:-12px;}
html.hale #auth-forgot-row{margin:10px 0;}

/* ── «بیشتر»: the overflow menu at rest ────────────────────────────────────
   Thirteen equal rows made the sheet a wall — every item shouted the same, so
   none of them read. Five stay out; the six that are genuinely occasional sit
   behind one row. Nothing lost: the two that were cut outright each keep three
   or more other doors. */
html.hale .pm-more{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:44px;padding:0 14px;margin-top:6px;
  background:none;border:0;border-top:1px solid var(--f1);border-radius:0;
  color:var(--muted2);font:inherit;font-size:12.5px;text-align:start;cursor:pointer;
  transition:color .2s var(--hale-ez);}
html.hale .pm-more:hover{color:var(--ink);background:none;}
html.hale .pm-chev{display:inline-grid;place-items:center;}
html.hale .pm-chev .hi{width:17px;height:11px;transition:transform .24s var(--hale-ez);}
html.hale .pm-more[aria-expanded="true"]{color:var(--ink);}
html.hale .pm-more[aria-expanded="true"] .pm-chev .hi{transform:rotate(180deg);}
html.hale .pm-rest[hidden]{display:none !important;}

/* ── the email-verification bar was unreadable, and the reason was not colour
   ──────────────────────────────────────────────────────────────────────────
   It measures 11:1 against the flat page ground, so a contrast check passed
   it. But its fill is rgba(224,163,62,.13) with no backdrop-filter: 87% of
   whatever is behind it comes through. It is fixed at the bottom of a page
   made of album artwork, so in practice pale cream text sat on a bright cover
   and vanished. The markup also hands its own body copy an inline opacity:.85.
   A real surface, ink that does not fade, and the call-to-action as a button
   instead of an underlined word. */
html.hale #verifybar.verifybar{
  background:var(--raised) !important;background-image:none !important;
  border:1px solid var(--f2) !important;
  border-inline-start:3px solid #E0A33E !important;
  color:var(--ink) !important;
  font-size:13.5px !important;line-height:1.85 !important;
  padding:16px 18px !important;gap:12px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.62) !important;}
html.hale #verifybar b{
  color:var(--ink) !important;font-weight:600 !important;
  font-size:14.5px !important;margin-bottom:5px !important;letter-spacing:-.01em;}
html.hale #verifybar span{opacity:1 !important;color:var(--muted) !important;}
html.hale #verifybar a{
  background:#E0A33E !important;color:#1A1206 !important;
  text-decoration:none !important;font-weight:600 !important;font-size:13px !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  min-height:44px !important;padding:0 18px !important;margin-block:0 !important;
  border-radius:999px !important;white-space:nowrap;
  transition:background .2s var(--hale-ez);}
html.hale #verifybar a:hover{background:#EFB755 !important;}

/* «your account closes in N days» outranks «install our app». The pill carries
   z-index 210 against the bar's 75, and on a phone they land on top of each
   other; the pill steps aside, the way it already does for a modal. */
html.hale body:has(#verifybar) .pwa-pill{display:none !important;}

/* the bar sat at 172px, measured against a --player-h that is never defined.
   Below it now: the nav (66px) and, when a song is on, the now-playing bar. */
@media (max-width:880px){
  html.hale #verifybar.verifybar{
    inset-inline:12px !important;width:auto !important;
    bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;}
  html.hale body:has(#mini.show) #verifybar.verifybar{
    bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HOME PAGE
   Measured on a 375px phone before this file existed: 5,379px tall, of which
   the radio section alone was 2,735px — 51% of the page, and the second thing
   a visitor met.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the hero was colliding with itself ───────────────────────────────────
   .hero-feature is a flex row: .hf-art at `flex:0 0 auto` beside .hf-body at
   `flex:1 1 0`. On a 375px phone the content column is 301px, so the body got
   301 − 32 padding − 16 gap − 132 art = 121px, and its own children were
   clipped at 119. In that 119px sat a 21px title: «Floating in Reverie»
   needed 164px and rendered as «Floating in …». The name of the song, in the
   largest element on the page, was unreadable — and the 132px artwork is a
   width I set myself in the block above.
   A phone has one axis to spend. Stacking gives the title the full 267px. */
@media (max-width:560px){
  html.hale .hero-feature{
    flex-direction:column !important;align-items:stretch !important;
    gap:14px !important;padding:18px 16px 16px !important;}
  html.hale .hero-feature .hf-art{
    width:150px !important;max-width:150px !important;align-self:center !important;}
  html.hale .hero-feature .hf-body{width:100% !important;min-width:0 !important;}
  html.hale .hf-title{
    font-size:24px !important;line-height:1.25 !important;
    white-space:normal !important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden !important;}
  /* the two actions were stacked because .btn measured 121px inside a 119px
     parent — side by side once the parent is the full width */
  html.hale .hf-acts{flex-direction:row !important;gap:10px !important;}
  html.hale .hf-acts .hf-play{flex:0 0 auto !important;}
  html.hale .hf-acts .btn{flex:1 1 auto !important;min-width:0 !important;width:auto !important;}
}

/* ── the category families, 1,544px of them ───────────────────────────────
   `.rfam-row` asks for `repeat(auto-fill,minmax(150px,1fr))`. Two columns of
   150 plus a 14px gap needs 314px; the column is 301. Thirteen pixels short,
   so every family fell to a single column and each row of two tiles stood
   342px tall instead of 164. 138px clears it with room.
   The tile's type was drawn for a 301px tile, so it comes down with the tile:
   at 21px the name «دپ و دیس‌لاو» wanted 113px of a 108px box. Trimmed
   padding, 17.5px type and two lines let every name in the catalogue render
   whole — «ماشین‌بازی و سیستم» included, which needs both lines. */
@media (max-width:560px){
  html.hale .rfam-row{grid-template-columns:repeat(auto-fill,minmax(138px,1fr)) !important;}
  html.hale .rfam-row .cat .txt{padding:13px 13px 14px !important;}
  html.hale .rfam-row .cat .txt b{
    font-size:17.5px !important;line-height:1.3 !important;white-space:normal !important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden !important;}
  html.hale .rfam-row .cat .txt>span{
    font-size:11.5px !important;line-height:1.5 !important;white-space:normal !important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden !important;}
}

/* ── the empty state, inside a reserve that has to stay ───────────────────
   `.shelf` is a column grid of 188px cards, so an empty state — one line of
   text — sits in a 214px box, and three sections can say «هنوز خالیه» at
   once. The obvious move is to collapse it. It is the wrong move: that 214px
   is `min-height` on `.shelf`, a measured CLS reserve (0.96 → 0.065), and
   collapsing it the moment the empty state is written would shift everything
   below by 160px, three times over — the exact shift the reserve was put
   there to stop. So the reserve stays and only the message changes: it reads
   across the full width instead of inside a 188px card column. */
html.hale .shelf:has(> .empty:only-child){
  display:block !important;overflow:visible !important;}
html.hale .shelf > .empty{
  width:auto !important;max-width:none !important;
  padding:14px 2px !important;color:var(--muted2) !important;
  font-size:12.5px !important;line-height:1.9 !important;}

/* ── the same starved title, one breakpoint up ────────────────────────────
   Logged in, at 2056px, the hero read «Bande Naaf Ta Kha…»: 497px of title in
   a 398px box at 44px. The desktop hero is a three-column grid, so it cannot
   stack the way the phone does — but nothing requires the title to be one
   line, and two lines cost no height the composition does not already have. */
@media (min-width:561px){
  html.hale .hf-title{
    white-space:normal !important;line-height:1.15 !important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE FULL-SCREEN PLAYER
   This surface never got the redesign — it was still the «cosmos» treatment:
   a saturated particle field over the whole viewport, a wireframe polyhedron,
   and an ellipse that ran straight through the song title. HĀLE is
   atmospheric, soft and low-contrast, with circular artwork on a tinted plum
   ground and light type carrying the page. None of that described this.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the ground ───────────────────────────────────────────────────────────
   `#fs::before` was `radial-gradient(… rgba(100,208,57,.5) …)` — a fully
   saturated lime at half opacity, computed from `--hue`. `--hue` is a global
   rotating value, not the artwork's: measured against this cover it read 103
   (lime) while the cover itself averages rgb(90,92,88), a neutral grey. The
   loudest thing on the surface was a colour the song had nothing to do with.
   The blurred cover behind it stays — that is the atmosphere — but calmed,
   under a plum wash that belongs to the palette. */
html.hale #fs{background:var(--void) !important;}
html.hale #fs #fs-gl{display:none !important;}
/* Turning the particle field off and then dimming the cover to 32% at 0.7
   brightness left an almost-black page with a small disc on it. Low-contrast
   is not the same as empty. The cover comes back up as the atmosphere — it is
   the one colour on this surface that belongs to the song — and the plum only
   tints it. */
html.hale #fs::before{
  background-image:radial-gradient(120% 78% at 66% -6%,
    rgba(126,102,158,.30), rgba(0,0,0,0) 64%) !important;}
html.hale #fs #fs-bg{
  opacity:.62 !important;
  filter:blur(76px) saturate(1.15) brightness(.92) !important;}
html.hale #fs .fs-scrim{background:
  radial-gradient(120% 62% at 50% 2%, rgba(10,8,14,0) 0%, rgba(10,8,14,.34) 48%, rgba(10,8,14,.78) 100%),
  linear-gradient(180deg, rgba(10,8,14,0) 0%, rgba(10,8,14,.30) 38%, rgba(10,8,14,.80) 74%, #0A080E 100%) !important;}
/* a soft halo, so the artwork sits on something instead of floating in black */
html.hale #fs .fs-disc-wrap::after{
  content:'' !important;position:absolute !important;inset:-14% !important;
  border-radius:50% !important;pointer-events:none;
  background:radial-gradient(circle, rgba(236,233,241,.10) 0%, rgba(236,233,241,0) 62%) !important;}

/* ── the type ─────────────────────────────────────────────────────────────
   A long title was ellipsised on one line; two lines cost nothing here. */
html.hale #fs .fs-now{
  color:var(--muted2) !important;font-size:11px !important;letter-spacing:.2em !important;}
html.hale #fs #fs-title{
  font-weight:400 !important;letter-spacing:-.025em !important;color:var(--ink) !important;
  white-space:normal !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden !important;}
html.hale #fs .by{color:var(--muted2) !important;}
/* the markup is `<span>از</span><b>Kiss</b>` with nothing between them, so it
   rendered as «ازKiss» */
html.hale #fs .by span{margin-inline-end:.4em;}
html.hale #fs #fs-artist{color:var(--ink) !important;font-weight:500 !important;}

/* ── the acoustic strip ───────────────────────────────────────────────────
   `.ac-d` is the separator between BPM, Camelot key and musical key, and it
   is an empty span: it measured 0×0, so the three values ran together as
   «129 BPM12BE major». It becomes a dot. */
html.hale #fs .np-aco{
  display:flex !important;align-items:center;justify-content:center;
  gap:11px !important;flex-wrap:wrap;
  color:var(--muted2) !important;font-size:11.5px !important;}
html.hale #fs .np-aco .ac-i{display:inline-flex !important;align-items:center;gap:6px;}
html.hale #fs .np-aco .ac-d{
  display:inline-block !important;width:3px;height:3px;flex:none;
  border-radius:50%;background:rgba(236,233,241,.3);}
/* The strip mixes two kinds of child: `<i>` carries a value (BPM, Camelot
   key) and `<s>` is a mark with no text — the five energy bars, and the key's
   dot. A single rule for both put light text on a light chip and measured
   3.47:1; they are separated by tag instead, which takes the values to 16.6
   and leaves the meter readable. */
html.hale #fs .np-aco .ac-i > *{background:none !important;color:inherit !important;}
html.hale #fs .np-aco .ac-i i{
  background:none !important;color:var(--ink) !important;
  font-style:normal !important;font-weight:600 !important;}
html.hale #fs .np-aco .ac-en s{background:rgba(236,233,241,.18) !important;}
html.hale #fs .np-aco .ac-en s.on{background:var(--ink) !important;}
html.hale #fs .np-aco .ac-key s{background:rgba(236,233,241,.18) !important;}

/* ── the mood card ────────────────────────────────────────────────────────
   `#fs-psyche` is 520px wide inside a 620px column with no auto margin, so in
   RTL it sat against the start edge — 50px off the centre everything else on
   the surface is aligned to. */
html.hale #fs #fs-psyche{margin-inline:auto !important;width:auto !important;max-width:520px !important;}
html.hale #fs .np-psyche{text-align:center !important;}
html.hale #fs .ps-card{
  display:block !important;margin-inline:0 !important;max-width:none !important;
  text-align:start !important;
  background:rgba(22,18,29,.82) !important;background-image:none !important;
  border:1px solid rgba(255,255,255,.085) !important;border-radius:18px !important;}
html.hale #fs .ps-feel{color:var(--ink) !important;font-weight:500 !important;}
html.hale #fs .ps-vibe{color:var(--muted) !important;}
html.hale #fs .ps-tags span{
  background:rgba(255,255,255,.045) !important;background-image:none !important;
  color:var(--muted) !important;border:1px solid rgba(255,255,255,.085) !important;}

/* ── tabs, waveform, times, transport ─────────────────────────────────────
   The waveform was drawn at roughly the ground's own luminance and could not
   be seen; the timestamps were dimmer than the copyright line. */
html.hale #fs .fs-tab{background:none !important;border:0 !important;color:var(--muted2) !important;}
html.hale #fs .fs-tab.on{background:rgba(255,255,255,.085) !important;color:var(--ink) !important;}
/* The svg is `viewBox="0 0 1000 h"` with `preserveAspectRatio="none"`, so in a
   620px box x is scaled 0.62 and y is not: a 1.6 stroke came out thinner
   horizontally than vertically and read as a smudge. `non-scaling-stroke`
   renders it at its real width whatever the box does. Classes only here — an
   earlier `path:not(.fgp):not(.knob)` rule outranked every class rule below
   it and quietly won. */
html.hale #fs #p-wave-fs{height:56px !important;}
html.hale #fs #p-wave-fs svg path{
  vector-effect:non-scaling-stroke !important;stroke-width:1.9 !important;}
html.hale #fs #p-wave-fs svg .bgp{stroke:rgba(236,233,241,.46) !important;}
html.hale #fs #p-wave-fs svg .fill{fill:rgba(236,233,241,.13) !important;stroke:none !important;}
html.hale #fs #p-wave-fs svg .fgp{stroke:var(--ink) !important;}
html.hale #fs #p-wave-fs svg .knob{fill:var(--ink) !important;}
html.hale #fs .fs-times{
  display:flex !important;justify-content:space-between !important;
  color:var(--muted) !important;font-size:12px !important;
  font-variant-numeric:tabular-nums;}
html.hale #fs .fs-times span{color:var(--muted) !important;opacity:1 !important;}
html.hale #fs .transport button{color:var(--muted) !important;}
html.hale #fs .transport .tog{color:var(--muted2) !important;}
html.hale #fs .transport .big{background:var(--ink) !important;color:var(--void) !important;}

/* ── the three panes behind the tabs ──────────────────────────────────────
   «بعدی‌ها», «متن آهنگ» and «دی‌جی» share one 440×440 box and had never been
   touched: they carried `linear-gradient(rgba(23,37,39,.6) …)`, the same teal
   the particle field came from, and the playing row was highlighted in
   `rgba(37,118,126,.26)`.
   They also clipped hard at both edges — 3,703px of queue inside a 438px box
   with nothing to say so. A mask fades the two edges instead. The box itself
   is left at 440: on a 1126px viewport the report link already sits 12px off
   the bottom, so there is no height to take. */
html.hale #fs .fs-pane{
  background-image:linear-gradient(rgba(22,18,29,.78), rgba(10,8,14,.92)) !important;
  border:1px solid rgba(255,255,255,.07) !important;border-radius:20px !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 24px),transparent 100%);}
html.hale #fs .fs-pane-h{color:var(--muted2) !important;letter-spacing:.16em;text-align:start !important;}
html.hale #fs #fs-queue,html.hale #fs #fs-dj{text-align:start !important;}

/* Each queue row is a flex line, and `.qm` sat at `flex:0 1 auto` — it shrank
   to 92px, so its two `nowrap` children spilled out of it and every title
   began at a different x. The list read as though it had been shaken.
   Filling the row fixes the box; `text-align:right` fixes the glyphs, which
   `start` did not — measured, every title now ends 12px from its thumbnail
   whatever its length. */
html.hale #fs .qrow{justify-content:flex-start !important;}
html.hale #fs .qrow .qm{flex:1 1 auto !important;min-width:0 !important;text-align:start !important;}
html.hale #fs .qrow .qm .t,html.hale #fs .qrow .qm .a{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right !important;}
html.hale #fs .qrow .qm .t{color:var(--ink) !important;}
html.hale #fs .qrow .qm .a{color:var(--muted2) !important;}
html.hale #fs .qrow.cur{background:rgba(255,255,255,.07) !important;}
html.hale #fs .qrow.cur .qm .t{font-weight:600 !important;}
html.hale #fs .qrow .qth img{border-radius:10px !important;}

/* the lyric body was --muted2 at 19px — the dimmest token on the largest text */
html.hale #fs #fs-lrc .lt .w{color:var(--muted) !important;}
html.hale #fs #fs-lrc .lt.on .w,
html.hale #fs #fs-lrc .lt.cur .w,
html.hale #fs #fs-lrc .lt.active .w{color:var(--ink) !important;}
html.hale #fs .lt-chip{
  background:rgba(255,255,255,.055) !important;background-image:none !important;
  border:1px solid rgba(255,255,255,.09) !important;color:var(--muted) !important;}
html.hale #fs .lt-chip.on{background:rgba(255,255,255,.12) !important;color:var(--ink) !important;}

/* On a phone the pane is 278px wide and its top-right corner lands under the
   close button (measured: ✕ at 299–345, the header's last glyphs at 305) — the
   ✕ sat on «در صفِ پخش». The heading steps aside; the button does not move,
   because its position is what every other surface here already expects. */
@media (max-width:560px){
  html.hale #fs .fs-pane-h{padding-inline-start:54px !important;}
}

/* ── the share sheet ──────────────────────────────────────────────────────
   Two sections, in the order that matters: the people already here first,
   the rest of the phone second. */
html.hale .sh-card{max-width:420px;}
html.hale .sh-head{
  display:flex;align-items:center;gap:12px;margin:2px 0 14px;}
html.hale .sh-art{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:var(--raised);box-shadow:0 0 0 1px rgba(255,255,255,.07);}
html.hale .sh-art img{width:100%;height:100%;object-fit:cover;display:block;}
html.hale .sh-meta{min-width:0;display:flex;flex-direction:column;gap:3px;}
html.hale .sh-meta b{
  font-weight:400;font-size:15px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate;}
html.hale .sh-meta span{font-size:12.5px;color:var(--muted2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html.hale .sh-note{margin-bottom:14px !important;}
html.hale .sh-sec{
  font-size:11px;color:var(--muted2);margin:0 2px 8px;}
html.hale .sh-people{
  display:flex;flex-direction:column;gap:2px;
  max-height:212px;overflow:auto;margin-bottom:16px;}
html.hale .sh-p{
  display:flex;align-items:center;gap:11px;width:100%;
  min-height:52px;padding:6px 8px;border:0;background:none;border-radius:12px;
  color:var(--ink);font:inherit;text-align:start;cursor:pointer;
  transition:background .18s var(--hale-ez);}
html.hale .sh-p:hover{background:var(--f1);}
html.hale .sh-p[disabled]{cursor:default;}
html.hale .sh-av{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:var(--raised);color:var(--muted);font-size:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);}
html.hale .sh-av img{width:100%;height:100%;object-fit:cover;display:block;}
html.hale .sh-nm{
  flex:1 1 auto;min-width:0;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate;}
html.hale .sh-ok{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--f1);color:var(--muted);
  transition:background .18s var(--hale-ez),color .18s var(--hale-ez);}
html.hale .sh-ok .hi{width:14px;height:14px;}
html.hale .sh-p:hover .sh-ok{background:var(--ink);color:var(--void);}
html.hale .sh-p.sent .sh-nm{color:var(--muted2);}
html.hale .sh-p.sent .sh-ok{background:var(--ink);color:var(--void);}
html.hale .sh-empty{
  font-size:12.5px;color:var(--muted2);line-height:1.9;padding:14px 4px;}
html.hale .sh-skel{
  height:52px;border-radius:12px;background:var(--f1);
  animation:hale-pulse 1.6s ease-in-out infinite;}
html.hale .sh-out{display:flex;gap:10px;}
html.hale .sh-o{
  flex:1 1 0;min-width:0;min-height:46px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;border:1px solid var(--f2);background:none;
  color:var(--ink);font:inherit;font-size:13px;cursor:pointer;
  transition:background .18s var(--hale-ez);}
html.hale .sh-o:hover{background:var(--f1);}
html.hale .sh-o .hi{width:15px;height:15px;flex:none;}

/* ── the notification list ────────────────────────────────────────────────
   The mark carries the kind; the colour no longer has to. */
html.hale .notifs .ni{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  display:grid !important;place-items:center;
  background:var(--f1) !important;color:var(--muted) !important;}
html.hale .notifs .ni .hi{width:16px;height:16px;}
html.hale .notifs .ntf{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:9px 12px;border-radius:14px;
  transition:background .18s var(--hale-ez);}
html.hale .notifs .ntf:hover{background:var(--f1);}
html.hale .notifs .ntf.unread .ni{background:var(--f3) !important;color:var(--ink) !important;}
html.hale .notifs .nt{font-size:13px;color:var(--ink);line-height:1.6;}
html.hale .notifs .na{font-size:11px;color:var(--muted2);margin-top:2px;}
html.hale .notifs .ngo{color:var(--muted2);}
html.hale .notifs .ntf-empty{
  font-size:12.5px;color:var(--muted2);line-height:2;text-align:center;padding:26px 16px;}
html.hale .notifs .ntf-empty .nee{
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;
  border-radius:50%;background:var(--f1);color:var(--muted2);}
html.hale .notifs .ntf-empty .nee .hi{width:19px;height:19px;}

/* ── the search field had two AI buttons in it ────────────────────────────
   «بساز» acts on what you typed — with an empty field it only focuses the
   field and toasts, so it was a control that did nothing most of the time.
   It appears when there is something to act on. The DJ chat is a place, not
   an action on the query, so it moves out to sit with the other top-bar
   buttons. */
html.hale .searchwrap:has(#search:placeholder-shown) .omni-ai:not(.ghost){display:none !important;}
html.hale .topbar .omni-ai.ghost,html.hale .omni-ai.ghost.dj-top{
  width:44px !important;height:44px !important;flex:0 0 auto;
  border-radius:50% !important;padding:0 !important;
  display:grid !important;place-items:center;
  background:var(--f1) !important;background-image:none !important;
  border:1px solid var(--glass-line,rgba(255,255,255,.07)) !important;
  color:var(--muted) !important;box-shadow:none !important;}
html.hale .omni-ai.ghost.dj-top:hover{background:var(--f2) !important;color:var(--ink) !important;}
html.hale .omni-ai.ghost.dj-top .hi{width:18px;height:18px;}
html.hale .notifs .ni{
  width:34px !important;min-width:34px !important;max-width:34px !important;
  flex:0 0 34px !important;padding:0 !important;}

/* two marks the overflow menu needed and the set did not have, drawn to the
   same 24-grid, 1.7 stroke and round joins as every other icon here */
.hi-plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205.5v13M5.5%2012h13%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205.5v13M5.5%2012h13%22%2F%3E%3C%2Fsvg%3E");}
.hi-share{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015.5V4.2%22%2F%3E%3Cpath%20d%3D%22m8%208%204-3.8L16%208%22%2F%3E%3Cpath%20d%3D%22M5.5%2013.5v4.8a1.7%201.7%200%200%200%201.7%201.7h9.6a1.7%201.7%200%200%200%201.7-1.7v-4.8%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015.5V4.2%22%2F%3E%3Cpath%20d%3D%22m8%208%204-3.8L16%208%22%2F%3E%3Cpath%20d%3D%22M5.5%2013.5v4.8a1.7%201.7%200%200%200%201.7%201.7h9.6a1.7%201.7%200%200%200%201.7-1.7v-4.8%22%2F%3E%3C%2Fsvg%3E");}

/* the trimmed overflow menu needed a chevron for «بیشتر» and a queue mark;
   the row used to carry a bare «≡» glyph. Same 24-grid and 1.7 stroke. */
.hi-chev{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2012%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2.4%203.6%207.6%206.8%207.6-6.8%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2012%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2.4%203.6%207.6%206.8%207.6-6.8%22%2F%3E%3C%2Fsvg%3E");}
.hi-queue{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206.5h13M4%2011h13M4%2015.5h6.5%22%2F%3E%3Cpath%20d%3D%22M14.6%2013.6v6.2l5.2-3.1z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206.5h13M4%2011h13M4%2015.5h6.5%22%2F%3E%3Cpath%20d%3D%22M14.6%2013.6v6.2l5.2-3.1z%22%2F%3E%3C%2Fsvg%3E");}

/* the notification list carried twelve emoji — the last cluster of them in
   the interface. These four complete the set it needs. */
.hi-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.2s-7.4-4.5-7.4-9.6A4.3%204.3%200%200%201%2012%207.6a4.3%204.3%200%200%201%207.4%203c0%205.1-7.4%209.6-7.4%209.6Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.2s-7.4-4.5-7.4-9.6A4.3%204.3%200%200%201%2012%207.6a4.3%204.3%200%200%201%207.4%203c0%205.1-7.4%209.6-7.4%209.6Z%22%2F%3E%3C%2Fsvg%3E");}
.hi-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%225.4%22%20width%3D%2217.6%22%20height%3D%2213.2%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22m4%207%208%205.6L20%207%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%225.4%22%20width%3D%2217.6%22%20height%3D%2213.2%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22m4%207%208%205.6L20%207%22%2F%3E%3C%2Fsvg%3E");}
.hi-note{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.4%2018.2V6.1l9.2-1.9v11.4%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218.2%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2216.2%22%20cy%3D%2215.6%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.4%2018.2V6.1l9.2-1.9v11.4%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218.2%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2216.2%22%20cy%3D%2215.6%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E");}
.hi-live{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.1%22%2F%3E%3Cpath%20d%3D%22M7.5%207.5a6.4%206.4%200%200%200%200%209M16.5%2016.5a6.4%206.4%200%200%200%200-9%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.1%22%2F%3E%3Cpath%20d%3D%22M7.5%207.5a6.4%206.4%200%200%200%200%209M16.5%2016.5a6.4%206.4%200%200%200%200-9%22%2F%3E%3C%2Fsvg%3E");}

.hi-link{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.2%2013.8a3.6%203.6%200%200%200%205.4.4l2.6-2.6a3.6%203.6%200%200%200-5.1-5.1l-1.5%201.5%22%2F%3E%3Cpath%20d%3D%22M13.8%2010.2a3.6%203.6%200%200%200-5.4-.4l-2.6%202.6a3.6%203.6%200%200%200%205.1%205.1l1.5-1.5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.2%2013.8a3.6%203.6%200%200%200%205.4.4l2.6-2.6a3.6%203.6%200%200%200-5.1-5.1l-1.5%201.5%22%2F%3E%3Cpath%20d%3D%22M13.8%2010.2a3.6%203.6%200%200%200-5.4-.4l-2.6%202.6a3.6%203.6%200%200%200%205.1%205.1l1.5-1.5%22%2F%3E%3C%2Fsvg%3E");}
/* ══ HALE-DESIGN-LAYER ══ */

/* --- tile action buttons: one coordinate system --- */
/* اندازه‌گیری‌شده ۲ سپتامبر ۲۰۲۶ روی سایتِ زنده — دو باگِ جدا که روی هم افتاده
   بودند و کاشی‌ها را در هر دو بریک‌پوینت به‌هم می‌ریختند:

   ۱) دو دستگاهِ مختصاتِ متضاد. `.card .add` با `right` (فیزیکی) جای‌گذاری
      می‌شد و `.card .pin` با `inset-inline-end` (منطقی). سند RTL است، پس
      inset-inline-end یعنی چپ و right یعنی راست — دو دکمه از دو لبهٔ مخالف
      شمرده می‌شدند. نتیجه: فاصلهٔ بینشان روی دسکتاپ ۳۶px و روی موبایل ۶px.

   ۲) `.pin` قاعدهٔ `min-width:44px` را می‌گرفت و `.add` نمی‌گرفت، پس روی
      دسکتاپ یکی ۴۴ و دیگری ۳۸ رندر می‌شد (بصری ۳۸ و ۳۳ بعد از scale .86).
      و `bottom` هایشان ۱۰ و ۱۲ بود — دو پیکسل ناهم‌تراز، در هر دو حالت.

   اینجا هر دو از یک قاعده تغذیه می‌شوند: فقط ویژگیِ منطقی، اندازهٔ یکسان،
   کفِ یکسان، و فاصلهٔ ثابت ۸px که با عرضِ کارت تغییر نمی‌کند. ۴۴px هم کفِ
   هدفِ لمسی است، پس موبایل چیزی از دست نمی‌دهد. */
.card .pin,
.card .add{
  position:absolute;
  top:auto; bottom:10px;
  right:auto; left:auto;
  width:44px; height:44px;
  min-width:44px; min-height:44px;
}
.card .pin{ inset-inline-end:10px; }
.card .add{ inset-inline-end:62px; }   /* 10 + 44 + 8 */

/* --- radio tile play button: restore the centring --- */
/* اندازه‌گیری‌شده ۲ سپتامبر ۲۰۲۶ روی سایتِ زنده: دکمهٔ پخشِ کاشیِ رادیو روی هر
   چهار کاشی دقیقاً ۴۶ پیکسل — نصفِ عرضِ خودش — چپ‌ترِ مرکزِ دیسک می‌نشست.

   علت یک خطای ترتیبِ اعلان است، نه یک عددِ غلط. قاعدهٔ «هاله» این‌طور است:
       left: 50% !important;
       transform: translateX(-50%) !important;
       inset-inline: auto !important;      ← بعد از left می‌آید
   و `inset-inline` شکلِ خلاصهٔ منطقیِ inset-inline-start/end است که در RTL روی
   همان left/right فیزیکی می‌نشیند. چون بعد از `left:50%` اعلام شده آن را به
   auto برمی‌گرداند؛ دکمه به جایگاهِ ایستایش می‌افتد و بعد translateX(-50%)
   نصفِ عرض جابه‌جایش می‌کند. عمودی سالم بود، فقط افقی می‌شکست.

   اینجا فقط همان left دوباره برقرار می‌شود — اندازه، رنگ و بقیهٔ طراحیِ هاله
   دست‌نخورده می‌ماند. با اندازهٔ متغیرِ دیسک (۱۰۰ تا ۱۴۳px) هم درست می‌ماند،
   چون مرکزِ کاشی و مرکزِ دیسک یکی است. */
html.hale .rchan .rc-play{
  left:50% !important;
  right:auto !important;
}

/* --- one-tap reaction while a track plays --- */
/* «کامنت روی این لحظه» تا امروز سه لایه عمق داشت: منوی پخش‌کننده ← دکمهٔ
   «بیشتر» ← آیتمِ منو. یعنی وسطِ گوش‌دادن عملاً در دسترس نبود، درحالی‌که کلِ
   ارزشِ این قابلیت به لحظه‌ای بودنش است — کامنت به ثانیهٔ همان لحظه می‌چسبد
   (`sendMomentComment(pos)`) و هر شنوندهٔ بعدی همان‌جا می‌بیندش.
   حالا در هر دو سطحِ پخش‌کننده یک دکمهٔ مستقیم است. آیتمِ منو سرِ جایش می‌ماند
   تا مسیرِ آشنا نشکند. */
.mom-btn .hi{ width:19px; height:19px; }
.transport .mom-btn{ min-width:44px; min-height:44px; }
/* نوارِ کوچک بعضی کنترل‌ها را در عرضِ کم پنهان می‌کند؛ این یکی باید بماند،
   چون موبایل دقیقاً همان‌جاست که واکنشِ سریع بیشترین معنا را دارد. */
/* (moved to .p-right — see below) */

/* دکمهٔ نظرها از پخش‌کننده برداشته شد: کنارِ «کامنت روی این لحظه» می‌نشست و
   چون هر دو همان آیکونِ hi-chat را داشتند، دو دکمهٔ ظاهراً یکسان کنارِ هم
   می‌شد و کاربر نمی‌فهمید کدام کدام است. کم‌رنگ‌تر کردنش کافی نبود.
   نظرها از دو راهِ دیگر در دسترس است: آیتمِ «نظرها دربارهٔ این آهنگ» در منوی
   پخش‌کننده، و رندرِ مستقیمشان در سندِ صفحهٔ ترک. */

/* --- moment-comment popup: a way out --- */
/* پاپ‌آپ تا امروز هیچ دکمهٔ بستنی نداشت و Escape فقط روی خودِ اینپوت کار
   می‌کرد، پس با یک کلیکِ بیرون گیر می‌کرد. × کنارِ «بفرست» می‌نشیند. */
.cmt-x{ background:transparent !important; border:1px solid var(--glass-line) !important;
  color:var(--muted) !important; font-size:17px; line-height:1; cursor:pointer;
  min-width:38px; min-height:38px; border-radius:999px; margin-inline-start:6px; }
.cmt-x:hover{ color:var(--fg) !important; }

/* --- anything the full-screen player opens must sit above the full-screen player --- */
/* اندازه‌گیری‌شده ۲ سپتامبر ۲۰۲۶: #fs روی z-index 120 است، ولی پاپ‌آپِ کامنتِ
   لحظه‌ای روی ۷۶ و مودالِ نظرها روی ۱۰۰ بودند — یعنی هر دو *باز می‌شدند* ولی
   پشتِ صفحهٔ تمام‌صفحه، و کاربر فکر می‌کرد دکمه کار نمی‌کند. هر دو از داخلِ
   همان صفحه صدا زده می‌شوند، پس باید بالای آن بنشینند. */
.cmt-pop{ z-index:130 !important; }
#revmodal{ z-index:130 !important; }

/* --- the moment button belongs with the actions, not the transport --- */
/* اندازه‌گیری‌شده ۲ سپتامبر ۲۰۲۶: گذاشتنِ این دکمه داخلِ .p-ctrls آن گروه را
   ۶۴px پهن‌تر کرد و گروهِ وسط رفت روی گروهِ راست — «بیشتر» و «درهم» با
   همپوشانیِ ۲۳px روی هم افتادند. جایش هم از اول اشتباه بود: کامنت یک کنش است
   مثلِ «افزودن به پلی‌لیست» و «ذخیره»، نه کنترلِ پخش مثلِ «بعدی» و «تکرار».
   حالا در .p-right است، که هم درست‌تر است هم گروهِ وسط را پهن نمی‌کند. */
/* دکمهٔ کامنتِ لحظه‌ای عمداً در نوارِ کوچک نیست — اندازه‌گیری‌شده ۲ سپتامبر
   ۲۰۲۶: .p-right با ۸ کنترل، ۴۹۸px محتوا در ظرفِ ۳۴۱px دارد و از قبل سرریز
   می‌کند؛ نهمین دکمه در هر دو گروه (.p-ctrls و .p-right) روی #m-shuffle
   می‌افتاد. در پخش‌کنندهٔ تمام‌صفحه جا هست و هیچ همپوشانی ندارد. */

/* --- p-right must not overflow its grid column --- */
/* اندازه‌گیری‌شده ۲ سپتامبر ۲۰۲۶ روی عرضِ ۱۲۴۰: گرید
   `1fr minmax(380px,600px) 1fr` به ستونِ وسط ۴۸۱px می‌دهد و به هر کناری ۳۴۱px،
   ولی .p-right با ۷ کنترل ۴۴۰px لازم دارد — یعنی ۱۰۱px سرریز. سرریز آخرین
   دکمه («بیشتر») را به لبه هل می‌داد، جایی که با «درهم» فقط ۹px فاصله داشت
   (بقیه ۲۰px) و ۹px هم اختلافِ ارتفاع — همان «به هم نزدیک و غیرقابلِ تشخیص».
   دو تغییرِ کوچک: ستونِ وسط سقفش پایین می‌آید تا فضا به کناری‌ها برگردد، و
   فاصلهٔ داخلیِ .p-right کمتر می‌شود. هیچ کنترلی حذف نمی‌شود. */
@media (min-width:881px){
  /* (ستون‌ها اینجا دست نمی‌خورند: یک قاعدهٔ .player بعدتر با
     `auto auto` برنده می‌شود، پس تغییرش اینجا مرده بود.) */
  .p-right{ gap:10px; }
  /* اختلافِ ۹px ارتفاع بینِ دو گروه عمدی است، نه باگ: ستونِ وسط زیرِ
     کنترل‌هایش نوارِ پیشرفت دارد، پس ردیفش بالاتر می‌نشیند. */
}

/* --- referral card --- */
.ref-card{border:1px solid var(--glass-line);border-radius:16px;padding:16px 16px 14px;margin:16px 0;}
.ref-card .ref-p{color:var(--muted);font-size:13.5px;line-height:1.9;margin:6px 0 12px}
.ref-row{display:flex;gap:8px;align-items:center}
.ref-row input{flex:1;min-width:0;background:#12101c;border:1px solid var(--glass-line);border-radius:10px;
  color:var(--fg);padding:10px 12px;font-family:inherit;font-size:13px;direction:ltr;text-align:left}
.ref-row button{background:var(--accent);color:var(--void);border:0;border-radius:10px;padding:10px 18px;
  font-weight:800;font-family:inherit;font-size:13px;cursor:pointer;min-height:44px}
/* ۴۴px کفِ هدفِ لمسی است؛ با min-height:40 و پدینگ، ۴۱ رندر می‌شد. */
.ref-row input{min-height:44px}
.ref-prog{height:6px;border-radius:999px;background:var(--glass-line);margin:14px 0 8px;overflow:hidden}
.ref-bar{height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .4s ease}
.ref-count{color:var(--muted2);font-size:12.5px}
.ref-share{display:flex;gap:10px;margin-top:12px}
.ref-share a{color:var(--muted);font-size:12.5px;text-decoration:none;border:1px solid var(--glass-line);
  border-radius:999px;padding:7px 14px;min-height:36px;display:inline-flex;align-items:center}
.ref-share a:hover{color:var(--fg)}