/* v154 · صفحهٔ لایوها (بازطراحی به سبک ویدیو) + Hartly Rank */
#s-live.lv153on{ padding-left:0 !important; padding-right:0 !important }
#s-live.lv153on > *:not(#lv153host){ display:none !important }

.lv154{ --ink:#1F1433; color:var(--ink); max-width:680px; margin:0 auto; padding:0 10px calc(96px + env(safe-area-inset-bottom)); background:#fff; min-height:100%; position:relative }
.lv154 button{ font-family:inherit }
.lv154 [hidden]{ display:none !important }

/* ═══ سربرگ: تب‌های متنی ═══ */
.hd154{ position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:6px; margin:0 -10px; padding:6px 10px 4px; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.tbs154{ flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent); mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent) }
.tbs154::-webkit-scrollbar{ display:none }
.tbi154{ display:flex; align-items:center; gap:2px; padding:0 8px; width:max-content }
.tbi154 button{ position:relative; display:inline-flex; align-items:center; gap:2px; height:44px; padding:0 9px; border:0; background:none; cursor:pointer; white-space:nowrap;
  font-size:15px; font-weight:800; color:#A39BB3; transition:color .2s, font-size .2s }
.tbi154 button svg:not(.sw154){ width:13px; height:13px; opacity:.7 }
.tbi154 button.on{ font-size:20px; font-weight:900; color:transparent }
.tbi154 button.on span{ background:linear-gradient(90deg,#FF2D6B,#FF6A3D); -webkit-background-clip:text; background-clip:text; color:transparent }
.tbi154 button.on svg:not(.sw154){ color:#FF3D6E; opacity:1 }
.sw154{ position:absolute; left:50%; bottom:3px; width:34px; height:10px; margin-left:-6px; animation:sw154 .35s cubic-bezier(.3,1.5,.5,1) }
@keyframes sw154{ from{ transform:scaleX(0) } }
.ib154{ flex:none; width:38px; height:38px; border:0; border-radius:12px; display:grid; place-items:center; cursor:pointer; color:#1F1433; background:none }
.ib154 svg{ width:24px; height:24px }
.ib154.rk svg{ width:32px; height:32px; filter:drop-shadow(0 3px 5px rgba(245,158,11,.35)); animation:fl145 3s ease-in-out infinite }
.sr154{ display:flex; align-items:center; gap:8px; height:44px; margin:4px 0 8px; padding:0 12px; border-radius:14px; background:#F5F2FA; animation:pnIn146 .25s ease both }
.sr154 > svg{ width:18px; height:18px; color:#A39BB3; flex:none }
.sr154 input{ flex:1; min-width:0; border:0; outline:0; background:none; font-family:inherit; font-size:14px; font-weight:700; color:#1F1433 }
.sr154 input::-webkit-search-cancel-button{ display:none }
.sr154 button{ flex:none; width:28px; height:28px; border:0; border-radius:50%; display:grid; place-items:center; background:#E9E3F3; cursor:pointer }
.sr154 button svg{ width:14px; height:14px }
.pks154{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none }
.pks154 button{ flex:none; display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; border:0; border-radius:10px; cursor:pointer; font-size:12px; font-weight:800; color:#8A82A0; background:#F5F2FA }
.pks154 button svg{ width:14px; height:14px }
.pks154 button.on{ color:#fff; background:linear-gradient(90deg,#DC2626,#7C3AED); box-shadow:0 5px 12px rgba(220,38,38,.3) }

/* ═══ کارت‌ها ═══ */
.gd154{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:4px }
.sk154{ aspect-ratio:.78; border-radius:16px; background:linear-gradient(110deg,#EFEAF6 30%,#F8F5FC 50%,#EFEAF6 70%); background-size:250% 100%; animation:sk152 1.3s linear infinite }
.cd154{ position:relative; aspect-ratio:.78; border-radius:16px; cursor:pointer; isolation:isolate; animation:tlIn151 .45s ease both; animation-delay:var(--d); transition:transform .15s }
.cd154:active{ transform:scale(.97) }
.ci154{ position:absolute; inset:0; border-radius:16px; overflow:hidden; color:#fff; background:#2A1A4A; box-shadow:0 8px 20px rgba(31,20,51,.14) }
.ci154 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.np154{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(80% 60% at 50% 30%,#EDE7F7,#D9D0EA) }
.np154 em{ font-style:normal; font-size:68px; font-weight:900; color:#fff; text-shadow:0 6px 20px rgba(91,63,217,.35) }
.np154 i{ position:absolute; bottom:28%; width:26px; height:26px; color:#fff; opacity:.8 }
.np154 i svg{ width:100%; height:100% }
/* گرادیانت رنگی پایین کارت — امضای بصری */
.tn154{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgb(var(--t) / .97) 0%, rgb(var(--t) / .78) 16%, rgb(var(--t) / .32) 34%, transparent 52%), linear-gradient(180deg, rgba(0,0,0,.28), transparent 22%) }
.cd154.pt{ --t:91 63 217 } .cd154.st{ --t:37 99 235 } .cd154.mu{ --t:13 148 136 } .cd154.pk{ --t:190 18 60 } .cd154.nw{ --t:22 163 74 }
.cd154.nw .tn154{ background:linear-gradient(0deg, rgb(22 163 74 / .97) 0%, rgb(101 163 13 / .75) 16%, rgb(163 230 53 / .28) 34%, transparent 52%), linear-gradient(180deg, rgba(0,0,0,.28), transparent 22%) }
/* قاب داغ‌ترین‌ها */
.hf154{ position:absolute; inset:-3px; z-index:-1; border-radius:19px; overflow:hidden }
.hf154::before{ content:""; position:absolute; inset:-60%; animation:spin145 3.5s linear infinite }
.cd154.h1 .hf154::before{ background:conic-gradient(from 0deg,#FFF4C7,#F5C542,#B7791F,#FFF4C7,#F5C542,#B7791F,#FFF4C7) }
.cd154.h2 .hf154::before{ background:conic-gradient(from 0deg,#F8FAFC,#94A3B8,#E2E8F0,#64748B,#F8FAFC) }
.cd154.h3 .hf154::before{ background:conic-gradient(from 0deg,#FFE1D1,#FB923C,#9A3412,#FFE1D1,#FB923C) }
.cd154.h1{ box-shadow:0 0 22px rgba(245,197,66,.45); border-radius:16px }
/* نشان‌ها */
.tl154{ position:absolute; top:7px; inset-inline-start:7px; display:flex }
.tl154.b2{ top:34px }
.rl154{ position:relative; display:inline-flex; align-items:center; height:24px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) }
.rl154 svg{ width:92px; height:25px; direction:ltr }
.rl154 b{ position:absolute; left:28px; top:50%; transform:translateY(-50%); font-size:10.5px; font-weight:900; font-style:italic; letter-spacing:.2px; color:#FDE68A; white-space:nowrap; font-family:Georgia,serif }
[dir=rtl] .rl154{ direction:ltr }
.ht154{ display:inline-flex; align-items:center; gap:3px; height:24px; padding:0 9px 0 3px; border-radius:99px; font-size:10.5px; font-weight:900; font-style:italic; font-family:Georgia,serif; color:#fff; direction:ltr;
  background:linear-gradient(90deg,#4C1D95,#7C3AED); box-shadow:0 3px 10px rgba(76,29,149,.45), inset 0 0 0 1.2px rgba(253,230,138,.7) }
.ht154 svg{ width:19px; height:19px }
.ht154.r1 svg{ color:#F5C542 } .ht154.r2 svg{ color:#CBD5E1 } .ht154.r3 svg{ color:#FB923C }
.nw154{ height:22px; padding:0 9px; border-radius:99px; display:inline-flex; align-items:center; font-size:10.5px; font-weight:900; letter-spacing:.6px; color:#fff;
  background:linear-gradient(90deg,#22C55E,#84CC16,#22C55E); background-size:200% 100%; animation:gl153 2s linear infinite; box-shadow:0 3px 10px rgba(34,197,94,.45) }
.tr154{ position:absolute; top:7px; inset-inline-end:7px; display:flex; flex-direction:column; align-items:flex-end; gap:4px }
.tp154{ display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 9px 0 6px; border-radius:99px; font-size:10.5px; font-weight:900; color:#fff; direction:ltr;
  box-shadow:0 3px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.35) }
.tp154 svg{ width:12px; height:12px }
.tp154.pt{ background:linear-gradient(90deg,#60A5FA,#7C3AED) } .tp154.st{ background:linear-gradient(90deg,#22D3EE,#2563EB) } .tp154.mu{ background:linear-gradient(90deg,#34D399,#0D9488) }
.pk154{ display:inline-flex; align-items:center; gap:3px; height:20px; padding:0 7px; border-radius:6px; font-size:10px; font-weight:900; color:#fff; background:linear-gradient(90deg,#DC2626,#7C3AED); animation:hb152 1.6s ease-in-out infinite }
.pk154 svg{ width:12px; height:12px }
.lk154{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#FDE68A; background:rgba(0,0,0,.45) }
.lk154 svg{ width:12px; height:12px }
.eq154{ position:absolute; top:50%; inset-inline-end:9px; display:flex; align-items:flex-end; gap:2px; height:14px; opacity:.9 }
.eq154 i{ width:2.5px; border-radius:2px; background:#fff; transform-origin:bottom; animation:eq153 .9s ease-in-out infinite }
.eq154 i:nth-child(1){ height:40%; animation-delay:-.3s } .eq154 i:nth-child(2){ height:90%; animation-delay:-.6s } .eq154 i:nth-child(3){ height:60%; animation-delay:-.1s } .eq154 i:nth-child(4){ height:80%; animation-delay:-.45s }
.bt154{ position:absolute; left:9px; right:9px; bottom:8px; text-align:start }
.bt154 > b{ display:block; font-size:14px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 4px rgba(0,0,0,.35) }
.br154{ display:flex; align-items:center; gap:5px; margin-top:3px }
.fl154{ flex:none; font-size:14px; line-height:1 }
.ti154{ flex:1; min-width:0; font-size:11px; font-weight:700; opacity:.92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; unicode-bidi:plaintext; text-align:start }
.vw154{ flex:none; display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:900; direction:ltr }
.vw154 svg{ width:15px; height:15px }

/* ═══ بنر رویدادها ═══ */
.bn154{ grid-column:1 / -1; position:relative; overflow:hidden; border-radius:16px; box-shadow:0 8px 20px rgba(31,20,51,.12) }
.bnt154{ display:flex; transition:transform .55s cubic-bezier(.2,.8,.2,1) }
.bnc154{ position:relative; flex:none; width:100%; aspect-ratio:3.2; border:0; padding:0; cursor:pointer; overflow:hidden; color:#fff; text-align:start;
  background:radial-gradient(90% 120% at 85% 50%,color-mix(in srgb,var(--c2) 80%,#fff 0%),transparent 60%), linear-gradient(110deg,var(--c1),var(--c2)) }
.bna154{ position:absolute; inset:0; width:100%; height:100% }
.bnx154{ position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:3px; max-width:62% }
.bnx154 small{ font-size:11px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:#FDE68A; font-family:Georgia,serif; font-style:italic }
.bnx154 b{ font-size:17px; font-weight:900; line-height:1.4; text-shadow:0 2px 6px rgba(0,0,0,.3) }
.bnd154{ position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:5px }
.bnd154 i{ width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.45); cursor:pointer; transition:all .3s }
.bnd154 i.on{ width:18px; background:#fff }

/* خالی */
.em154{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 20px; text-align:center }
.em154 b{ font-size:14.5px; font-weight:900; max-width:280px; line-height:1.7 }
.em154 button{ display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 20px; border:0; border-radius:14px; cursor:pointer; font-size:14px; font-weight:900; color:#fff;
  background:linear-gradient(90deg,#FF2D6B,#FF6A3D); box-shadow:0 8px 20px rgba(255,45,107,.3) }
.em154 button svg{ width:18px; height:18px }
.em154 + .bn154{ margin-top:6px }

/* دکمه‌های شناور */
.fab154{ position:fixed; z-index:7; inset-inline-end:max(16px, calc(50% - 324px)); bottom:calc(86px + env(safe-area-inset-bottom)); width:58px; height:58px; border:0; border-radius:50%; cursor:pointer; color:#fff;
  display:grid; place-items:center; background:linear-gradient(135deg,#FF2D6B,#FF6A3D); box-shadow:0 10px 24px rgba(255,45,107,.45) }
.fab154::before{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2.5px solid rgba(255,45,107,.45); animation:ring151 2s ease-out infinite }
.fab154 span{ width:28px; height:28px }
.fab154 svg{ width:100%; height:100% }
#s-live:not(.on) .fab154, #s-live:not(.on) .top154{ display:none }
.top154{ position:fixed; z-index:7; inset-inline-end:max(22px, calc(50% - 318px)); bottom:calc(154px + env(safe-area-inset-bottom)); width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#FF2D6B; background:#FFE4EC; box-shadow:0 6px 16px rgba(255,45,107,.25); opacity:0; transform:scale(.6); pointer-events:none; transition:all .25s }
.top154.on{ opacity:1; transform:none; pointer-events:auto }
.top154 svg{ width:22px; height:22px }

/* ═══════════ Hartly Rank ═══════════ */
.rk154{ --a:#F5C542; --b:#7C4A0A; --bg1:#3A2508; --bg2:#1A1004; --pn:#8A6A3A; position:fixed; inset:0; z-index:9996; display:flex; flex-direction:column; color:#fff; overflow:hidden; animation:cbIn145 .28s ease both }
.rk154.charm{ --a:#F472B6; --b:#831843; --bg1:#5B0B3A; --bg2:#1F0414; --pn:#9D3C6B }
.rk154.room{ --a:#60A5FA; --b:#1E3A8A; --bg1:#0B2A5B; --bg2:#050E22; --pn:#3B5B9A }
.rk154.out{ animation:cbIn145 .22s ease reverse both }
.rkb154{ position:absolute; inset:0; z-index:-1; background:radial-gradient(100% 55% at 50% 20%, color-mix(in srgb,var(--a) 55%,transparent), transparent 70%), linear-gradient(180deg,var(--bg1),var(--bg2) 60%) }
.rkr154{ position:absolute; left:50%; top:24%; width:1000px; height:1000px; margin:-500px 0 0 -500px; opacity:.28;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--a) 80%,#fff) 0 5deg, transparent 5deg 15deg); animation:spin145 50s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 50%); mask:radial-gradient(circle,#000 0,transparent 50%) }
.rkp154{ position:absolute; top:6%; width:34px; height:44%; border-radius:12px 12px 0 0; background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 40%,rgba(0,0,0,.2)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.rkp154.a{ left:6% } .rkp154.b{ right:6% }
.rks154{ position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px); background-size:52px 52px; opacity:.16; animation:tw145 4s ease-in-out infinite alternate }
.rkh154{ display:flex; align-items:center; justify-content:space-between; padding:calc(8px + env(safe-area-inset-top)) 10px 4px }
.rkh154 b{ font-size:19px; font-weight:900; font-style:italic; font-family:Georgia,serif; letter-spacing:.5px; background:linear-gradient(180deg,#fff,var(--a)); -webkit-background-clip:text; background-clip:text; color:transparent }
.rkh154 button, .rkh154 > span{ width:40px; height:40px }
.rkh154 button{ border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(255,255,255,.12) }
.rkh154 button svg{ width:22px; height:22px }
[dir=rtl] .rkh154 button svg{ transform:scaleX(-1) }
.rkk154{ display:flex; width:min(300px,86%); margin:6px auto 0; padding:3px; border-radius:99px; background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 45%,transparent) }
.rkk154 button{ flex:1; height:34px; border:0; border-radius:99px; background:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:900; color:rgba(255,255,255,.7) }
.rkk154 button.on{ color:#fff; background:linear-gradient(180deg,color-mix(in srgb,var(--a) 85%,#fff),var(--b)); box-shadow:0 4px 12px rgba(0,0,0,.3) }
.rkt154{ display:flex; justify-content:center; gap:4px; margin:10px 12px 0 }
.rkt154 button{ height:30px; padding:0 12px; border:0; border-radius:99px; background:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:800; color:rgba(255,255,255,.55) }
.rkt154 button.on{ color:#fff; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 55%,transparent) }
.rkc154{ margin:8px 0 0; text-align:center; font-size:11.5px; font-weight:800; color:color-mix(in srgb,var(--a) 70%,#fff); min-height:14px }
.rksc154{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:90px }
.rkpd154{ display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:end; gap:2px; padding:10px 8px 14px; max-width:460px; margin:0 auto }
.pp154{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; cursor:pointer; animation:pdIn145 .5s cubic-bezier(.3,1.4,.5,1) both }
.pp154.r2{ animation-delay:.1s } .pp154.r3{ animation-delay:.18s }
.pa154{ position:relative; width:100%; max-width:118px; aspect-ratio:1 }
.pp154.r1 .pa154{ max-width:148px }
.pa154 > img, .pa154 > em{ position:absolute; left:23%; top:31%; width:54%; height:54%; border-radius:50%; object-fit:cover; display:grid; place-items:center; z-index:1;
  background:linear-gradient(135deg,#4C1D95,#831843); font-style:normal; font-size:22px; font-weight:900 }
.pa154 > em.q{ background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--a) 60%,#fff) 60%,var(--a)); color:var(--b); font-size:26px }
.pa154 .fr145, .pa154 .fw145{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.pa154 .fr145{ z-index:2 }
.pp154.r1 .pa154{ animation:fl145 3s ease-in-out infinite }
.pp154 > b{ max-width:100%; font-size:12.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pl154{ display:inline-flex; align-items:center; gap:3px; padding:0 6px; border-radius:5px; font-size:9px; font-weight:900; background:#F43F5E }
.pl154 i{ width:5px; height:5px; border-radius:50%; background:#fff; animation:lvP145 1.1s ease-in-out infinite }
.pv154{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px 2px 3px; border-radius:99px; background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 50%,transparent); direction:ltr }
.pv154 svg{ width:16px; height:16px }
.pv154 b{ font-size:12px; font-weight:900; color:color-mix(in srgb,var(--a) 70%,#fff) }
.pp154.ld .pa154{ animation:ldP145 1s ease-in-out infinite alternate }
.rkl154{ display:flex; flex-direction:column; gap:7px; padding:0 12px; max-width:520px; margin:0 auto }
.rr154{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:16px; cursor:pointer; background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 25%,transparent) }
.rn154{ width:26px; flex:none; text-align:center; font-size:15px; font-weight:900; font-style:italic; color:color-mix(in srgb,var(--a) 75%,#fff) }
.av154{ flex:none; width:42px; height:42px; border-radius:50%; overflow:hidden; padding:2px; box-sizing:border-box; background:linear-gradient(135deg,color-mix(in srgb,var(--a) 70%,#fff),var(--b)) }
.av154 img, .av154 em{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#2E1065; font-style:normal; font-weight:900; color:#fff }
.rt154{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:start }
.rt154 b{ font-size:13.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rlv154{ font-style:normal; font-size:9px; padding:1px 5px; border-radius:4px; background:#F43F5E; vertical-align:middle }
.rt154 > span{ display:flex; align-items:center; gap:4px; transform:scale(.88); transform-origin:0 50% }
[dir=rtl] .rt154 > span{ transform-origin:100% 50% }
.rt154 em{ font-style:normal; font-size:13px }
.ra154{ display:flex; align-items:center; gap:4px; direction:ltr }
.ra154 svg{ width:16px; height:16px }
.ra154 b{ font-size:13px; font-weight:900; color:color-mix(in srgb,var(--a) 70%,#fff) }
.rkm154{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,color-mix(in srgb,var(--b) 70%,#000),color-mix(in srgb,var(--b) 40%,#000)); box-shadow:0 -10px 30px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in srgb,var(--a) 50%,transparent) }
.mr154{ width:30px; text-align:center; font-size:15px; font-weight:900; font-style:italic; color:var(--a) }
.rkm154 > b{ flex:1; min-width:0; font-size:14px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rkm154 > em{ display:flex; align-items:center; gap:4px; font-style:normal; font-size:13px; font-weight:900; color:var(--a); direction:ltr }
.rkm154 > em svg{ width:16px; height:16px }
.rkm154 > small{ flex-basis:100%; font-size:11px; font-weight:700; opacity:.7; text-align:center }

@media (min-width:600px){ .gd154{ grid-template-columns:repeat(3,1fr) } .bnc154{ aspect-ratio:4 } }
@media (prefers-reduced-motion:reduce){ .hf154::before, .nw154, .eq154 i, .pk154, .fab154::before, .rkr154{ animation:none } }

/* ═══════════ v155 · هویت بصری اختصاصی کارت لایو Hartly ═══════════
   شفق دو‌رنگ + پلاک شیشه‌ای + نگین سطح شش‌ضلعی + تاج شعله */
.cd155{ position:relative; aspect-ratio:.78; border-radius:20px; cursor:pointer; isolation:isolate; animation:tlIn151 .45s ease both; animation-delay:var(--d); transition:transform .18s }
.cd155:active{ transform:scale(.97) }
.ci155{ position:absolute; inset:0; border-radius:20px; overflow:hidden; color:#fff; background:linear-gradient(160deg,var(--c1),var(--c2));
  box-shadow:0 10px 24px color-mix(in srgb,var(--c2) 30%,transparent), inset 0 0 0 1px rgba(255,255,255,.12) }
.bg155{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s }
.cd155:hover .bg155{ transform:scale(1.05) }
.np155{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(90% 70% at 30% 20%,rgba(255,255,255,.35),transparent 60%) }
.np155 em{ font-style:normal; font-size:72px; font-weight:900; color:rgba(255,255,255,.92); text-shadow:0 8px 24px rgba(0,0,0,.25) }
/* شفق: دو هالهٔ رنگی از دو گوشهٔ پایین که نفس می‌کشند */
.au155{ position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(85% 55% at 0% 105%, color-mix(in srgb,var(--c1) 92%,transparent), transparent 70%),
  radial-gradient(85% 55% at 100% 105%, color-mix(in srgb,var(--c2) 92%,transparent), transparent 70%),
  linear-gradient(0deg, rgba(8,4,20,.55), transparent 42%),
  linear-gradient(180deg, rgba(8,4,20,.35), transparent 24%);
  background-size:130% 100%, 130% 100%, 100% 100%, 100% 100%; animation:au155 7s ease-in-out infinite alternate }
@keyframes au155{ to{ background-position:30% 0, 70% 0, 0 0, 0 0 } }
.cd155.nw .au155{ background:
  radial-gradient(85% 55% at 0% 105%, rgba(244,114,182,.9), transparent 70%),
  radial-gradient(85% 55% at 100% 105%, rgba(34,211,238,.9), transparent 70%),
  radial-gradient(60% 40% at 50% 110%, rgba(250,204,21,.8), transparent 70%),
  linear-gradient(0deg, rgba(8,4,20,.5), transparent 42%), linear-gradient(180deg, rgba(8,4,20,.35), transparent 24%);
  background-size:140% 100%, 140% 100%, 100% 100%, 100% 100%, 100% 100%; animation:au155 3.5s ease-in-out infinite alternate, hue155 6s linear infinite }
@keyframes hue155{ to{ filter:hue-rotate(360deg) } }
/* برق مورب که گاهی از روی کارت رد می‌شود */
.sh155{ position:absolute; top:-30%; bottom:-30%; width:35%; left:-60%; transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation:sh155 6s ease-in-out infinite; animation-delay:calc(var(--d) * 3) }
@keyframes sh155{ 0%,80%{ left:-60% } 100%{ left:140% } }
/* قاب نور برای داغ‌ترین‌ها */
.hl155{ position:absolute; inset:-2.5px; z-index:-1; border-radius:22px; overflow:hidden; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c1) 60%,transparent)) }
.hl155::before{ content:""; position:absolute; inset:-60%; animation:spin145 3s linear infinite;
  background:conic-gradient(from 0deg, var(--c1), #FFF4C7, var(--c2), transparent 60%, var(--c1)) }
.cd155.h1 .hl155::before{ background:conic-gradient(from 0deg,#FFF4C7,#F5C542,#FF6B6B,#F5C542,#FFF4C7) }
/* نشان‌های بالا */
.tl155{ position:absolute; top:8px; inset-inline-start:8px; display:flex; flex-direction:column; align-items:flex-start; gap:5px }
.gm155{ display:inline-flex; align-items:center; gap:3px; height:24px; padding:0 9px 0 2px; border-radius:99px; direction:ltr;
  background:linear-gradient(90deg,color-mix(in srgb,var(--g2) 85%,#000),color-mix(in srgb,var(--g2) 55%,transparent)); box-shadow:0 3px 10px rgba(0,0,0,.3), inset 0 0 0 1px color-mix(in srgb,var(--g1) 60%,transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.gm155 svg{ width:22px; height:22px; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--g1) 80%,transparent)) }
.gm155 b{ font-size:11px; font-weight:900; color:var(--g1); letter-spacing:.3px }
.cr155{ display:inline-flex; align-items:center; gap:2px; height:24px; padding:0 9px 0 3px; border-radius:99px; direction:ltr; font-size:10.5px; font-weight:900; letter-spacing:.6px;
  background:linear-gradient(90deg,#1F1433,#3B0764); box-shadow:0 3px 10px rgba(0,0,0,.35), inset 0 0 0 1.2px rgba(255,244,199,.55) }
.cr155 svg{ width:20px; height:20px; animation:fl155 1.4s ease-in-out infinite alternate }
@keyframes fl155{ to{ transform:scale(1.12) translateY(-1px) } }
.cr155.r1{ color:#FFD166 } .cr155.r1 svg{ color:#FF7A3D } .cr155.r2{ color:#E2E8F0 } .cr155.r2 svg{ color:#A78BFA } .cr155.r3{ color:#FDBA74 } .cr155.r3 svg{ color:#F43F5E }
.cr155 b{ color:inherit }
.nw155{ height:22px; padding:0 10px; border-radius:99px; display:inline-flex; align-items:center; font-size:10.5px; font-weight:900; letter-spacing:1px; color:#fff;
  background:linear-gradient(90deg,#F472B6,#FACC15,#22D3EE,#A78BFA,#F472B6); background-size:300% 100%; animation:gl153 3s linear infinite; box-shadow:0 3px 12px rgba(244,114,182,.5), inset 0 0 0 1px rgba(255,255,255,.5); text-shadow:0 1px 2px rgba(0,0,0,.25) }
.tr155{ position:absolute; top:8px; inset-inline-end:8px; display:flex; flex-direction:column; align-items:flex-end; gap:5px }
.ch155{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px 0 7px; border-radius:99px; direction:ltr;
  background:rgba(10,6,24,.35); -webkit-backdrop-filter:blur(8px) saturate(1.4); backdrop-filter:blur(8px) saturate(1.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28) }
.ch155 > svg{ width:13px; height:13px; color:var(--c1) }
.ch155 b{ font-size:10.5px; font-weight:900; letter-spacing:.3px }
.wv155{ display:inline-flex; align-items:flex-end; gap:1.5px; height:10px; margin-inline-start:1px }
.wv155 i{ width:2px; border-radius:1px; background:var(--c1); transform-origin:bottom; animation:eq153 .8s ease-in-out infinite }
.wv155 i:nth-child(1){ height:50%; animation-delay:-.2s } .wv155 i:nth-child(2){ height:100%; animation-delay:-.5s } .wv155 i:nth-child(3){ height:70% }
.pk155{ display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 8px; border-radius:99px; font-size:10px; font-weight:900; color:#fff;
  background:linear-gradient(90deg,#FF3B30,#7F1D1D); box-shadow:0 0 12px rgba(255,59,48,.6); animation:hb152 1.4s ease-in-out infinite }
.pk155 svg{ width:12px; height:12px }
.lk155{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#FDE68A; background:rgba(10,6,24,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.lk155 svg{ width:12px; height:12px }
/* پلاک شیشه‌ای */
.gp155{ position:absolute; left:6px; right:6px; bottom:6px; display:flex; align-items:center; gap:7px; padding:6px 8px 6px 6px; border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07)); -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.18) }
.ga155{ flex:none; width:32px; height:32px; border-radius:50%; padding:2px; box-sizing:border-box; background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c1)); animation:spin145 4s linear infinite }
.ga155 img, .ga155 em{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:900; background:#2A1A4A; border:1.5px solid rgba(255,255,255,.9); box-sizing:border-box; animation:spin145 4s linear infinite reverse }
.gt155{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:start }
.gt155 b{ font-size:12.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px rgba(0,0,0,.3) }
.gt155 small{ font-size:10px; font-weight:700; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; unicode-bidi:plaintext }
.gv155{ flex:none; display:flex; flex-direction:column; align-items:center; gap:0; line-height:1 }
.gv155 svg{ width:14px; height:14px; color:var(--c1); filter:drop-shadow(0 0 3px rgba(0,0,0,.4)) }
.gv155 b{ font-size:11px; font-weight:900; direction:ltr; margin-top:2px }
@media (prefers-reduced-motion:reduce){ .au155, .sh155, .hl155::before, .ga155, .ga155 img, .ga155 em, .nw155, .pk155, .cr155 svg, .wv155 i{ animation:none } }

/* ═══════════ v156 · سربرگ بنفش‌صورتی (هم‌خانوادهٔ کاوش) + دکمهٔ Go Live داخل سربرگ ═══════════ */
.lv154{ background:linear-gradient(180deg,#F7F2FF 0,#FFFFFF 220px) }
.hd154{ margin:0 -10px 6px; padding:8px 10px 6px; background:linear-gradient(180deg,rgba(247,242,255,.97),rgba(255,255,255,.94));
  box-shadow:0 1px 0 rgba(139,92,246,.10), 0 10px 24px -18px rgba(139,92,246,.45) }
.hd154::after{ content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,61,127,.45),rgba(139,92,246,.55),transparent) }
.tbi154 button{ color:#9C93B5 }
.tbi154 button.on span{ background:linear-gradient(90deg,#FF3D7F,#8B5CF6); -webkit-background-clip:text; background-clip:text; color:transparent }
.tbi154 button.on svg:not(.sw154){ color:#8B5CF6 }
.ib154{ color:#4C1D95; background:#fff; box-shadow:0 4px 12px rgba(139,92,246,.12), inset 0 0 0 1.5px #EEE6FB; border-radius:13px }
.ib154 svg{ width:21px; height:21px }
.ib154.rk{ background:linear-gradient(145deg,#FFF8E1,#FFF); box-shadow:0 4px 12px rgba(245,158,11,.2), inset 0 0 0 1.5px #FDE68A }
.ib154.rk svg{ width:28px; height:28px }
.gl155{ position:relative; flex:none; width:40px; height:40px; border:0; border-radius:13px; display:grid; place-items:center; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#FF3D7F,#8B5CF6); box-shadow:0 6px 16px rgba(139,92,246,.38) }
.gl155::after{ content:""; position:absolute; inset:-3px; border-radius:16px; border:2px solid rgba(255,61,127,.4); animation:ring151 2.2s ease-out infinite }
.gl155 span{ width:22px; height:22px }
.gl155 svg{ width:100%; height:100% }
.pks154 button.on{ background:linear-gradient(90deg,#FF3D7F,#8B5CF6); box-shadow:0 5px 12px rgba(139,92,246,.3) }
.sr154{ background:#fff; box-shadow:0 6px 16px rgba(139,92,246,.10), inset 0 0 0 1.5px #EEE6FB }
.em154 button{ background:linear-gradient(90deg,#FF3D7F,#8B5CF6); box-shadow:0 8px 20px rgba(139,92,246,.32) }
.emi155{ position:relative; width:120px; height:120px; display:grid; place-items:center }
.emi155 i{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(139,92,246,.45); animation:rd152 2.4s ease-out infinite }
.emi155 i:nth-child(2){ animation-delay:1.2s; border-color:rgba(255,61,127,.45) }
.emi155 span{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#FF3D7F,#8B5CF6); box-shadow:0 10px 24px rgba(139,92,246,.35) }
.emi155 span svg{ width:32px; height:32px }
.fab154, .top154{ display:none !important }
@media (prefers-reduced-motion:reduce){ .gl155::after{ animation:none } }
[dir=rtl] .bna154{ transform:scaleX(-1) }
.ib154, .gl155{ width:37px; height:37px }
@media (max-width:370px){ .ib154.rk{ display:none } }

/* ═══════════ v158 · افکت کاور لایو: ضربان Hartly + لبهٔ دنباله‌دار ═══════════
   شفق رنگی و پلاک شیشه‌ای حذف شدند؛ برق مورب (sh155) دست نخورده. */
.au155{ background:linear-gradient(0deg, rgba(6,3,16,.92) 0%, rgba(6,3,16,.62) 20%, rgba(6,3,16,.18) 40%, transparent 55%), linear-gradient(180deg, rgba(6,3,16,.4), transparent 26%) !important;
  animation:none !important; filter:none !important }
/* لبهٔ دنباله‌دار: نقطهٔ نوری که دور لبهٔ کارت می‌چرخد */
.rim155{ position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none; z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; overflow:hidden }
.rim155::before{ content:""; position:absolute; left:50%; top:50%; width:170%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, transparent 0 68%, color-mix(in srgb,var(--c1) 60%,transparent) 80%, #fff 88%, var(--c2) 92%, transparent 97%);
  animation:rm155 4.2s linear infinite; animation-delay:calc(var(--d) * -4) }
@keyframes rm155{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
.ci155{ box-shadow:0 10px 24px rgba(20,10,40,.22), inset 0 0 0 1px rgba(255,255,255,.14) !important }
/* ضربان Hartly */
.pu155{ position:absolute; left:0; right:0; bottom:50px; width:100%; height:22px; overflow:visible; z-index:2; pointer-events:none }
.pu155 path{ fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.pu155 .b{ stroke:color-mix(in srgb,var(--c1) 45%,transparent); stroke-width:1.4 }
.pu155 .f{ stroke:var(--c1); stroke-width:2.4; stroke-dasharray:26 174; stroke-dashoffset:200;
  filter:drop-shadow(0 0 4px var(--c1)) drop-shadow(0 0 8px var(--c2)); animation:pu155 2.4s cubic-bezier(.45,0,.55,1) infinite; animation-delay:calc(var(--d) * 2) }
@keyframes pu155{ to{ stroke-dashoffset:0 } }
[dir=rtl] .pu155{ transform:scaleX(-1) }
.cd155.nw .pu155 .f{ stroke:#fff; filter:drop-shadow(0 0 4px #F472B6) drop-shadow(0 0 8px #22D3EE) }
/* اطلاعات مستقیم روی تصویر (بدون نوار) */
.gp155{ left:9px; right:9px; bottom:9px; padding:0; border-radius:0; background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important }
.gt155 b{ font-size:13.5px; text-shadow:0 1px 6px rgba(0,0,0,.6) }
.gt155 small{ text-shadow:0 1px 4px rgba(0,0,0,.6) }
.gv155 b{ text-shadow:0 1px 4px rgba(0,0,0,.6) }
@media (prefers-reduced-motion:reduce){ .rim155::before, .pu155 .f{ animation:none } }

/* ═══════════ v159 · تنوع کاور: استریم تکی / چندنفره / تازه‌وارد / پربیننده ═══════════ */
/* گرادیانت خیلی ملایم پایین کارت برای تازه‌وارد و پربیننده */
.gl159{ position:absolute; inset:0; pointer-events:none; z-index:1 }
.cd155.nu .gl159{ background:linear-gradient(0deg, rgba(52,211,153,.5) 0%, rgba(56,189,248,.22) 16%, transparent 36%) }
.cd155.hv .gl159{ background:linear-gradient(0deg, rgba(255,120,40,.55) 0%, rgba(255,61,90,.25) 17%, transparent 38%); animation:hvg159 2.6s ease-in-out infinite alternate }
@keyframes hvg159{ to{ opacity:.7 } }

/* استریم تکی: منظرهٔ یاب دوربین */
.vf159{ position:absolute; inset:26% 12% 32%; z-index:2; pointer-events:none }
.vf159 > i{ position:absolute; width:18px; height:18px; border-color:rgba(255,255,255,.85); border-style:solid; border-width:0; filter:drop-shadow(0 0 4px var(--c1)) }
.vf159 > i:nth-child(1){ top:0; left:0; border-top-width:2.5px; border-left-width:2.5px; border-top-left-radius:6px }
.vf159 > i:nth-child(2){ top:0; right:0; border-top-width:2.5px; border-right-width:2.5px; border-top-right-radius:6px }
.vf159 > i:nth-child(3){ bottom:0; left:0; border-bottom-width:2.5px; border-left-width:2.5px; border-bottom-left-radius:6px }
.vf159 > i:nth-child(4){ bottom:0; right:0; border-bottom-width:2.5px; border-right-width:2.5px; border-bottom-right-radius:6px }
.vf159{ animation:vfz159 3.2s ease-in-out infinite }
@keyframes vfz159{ 50%{ inset:28% 14% 34% } }
.vf159 b{ position:absolute; top:6px; left:8px; display:flex; align-items:center; gap:4px; font-size:9px; font-weight:900; letter-spacing:1.2px; color:#fff; font-family:ui-monospace,monospace; text-shadow:0 1px 3px rgba(0,0,0,.6) }
.vf159 b u{ width:7px; height:7px; border-radius:50%; background:#FF3B30; box-shadow:0 0 8px #FF3B30; animation:lvP145 1s steps(2) infinite }
.vf159 em{ position:absolute; left:4px; right:4px; height:2px; top:0; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c1) 80%,#fff),transparent); box-shadow:0 0 8px var(--c1); opacity:.7; animation:scn159 2.8s ease-in-out infinite }
@keyframes scn159{ 50%{ top:calc(100% - 2px) } }

/* چندنفره: موزاییک چهارخانه */
.mo159{ position:absolute; left:50%; bottom:58px; width:34px; height:34px; margin-left:-17px; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:3px; pointer-events:none }
.mo159 i{ border-radius:5px; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); animation:mo159 2.4s ease-in-out infinite }
.mo159 i:nth-child(2){ animation-delay:.6s } .mo159 i:nth-child(4){ animation-delay:1.2s } .mo159 i:nth-child(3){ animation-delay:1.8s }
@keyframes mo159{ 0%,60%,100%{ background:rgba(255,255,255,.18) } 20%{ background:var(--c1); box-shadow:0 0 12px var(--c1), inset 0 0 0 1px rgba(255,255,255,.8) } }

/* تازه‌وارد: جرقه‌های پاستلی رو به بالا */
.sp159, .em159{ position:absolute; left:0; right:0; bottom:0; height:62%; z-index:2; pointer-events:none; overflow:hidden }
.sp159 i{ position:absolute; bottom:-8px; width:6px; height:6px; opacity:0; animation:sp159 3.4s linear infinite;
  background:radial-gradient(circle,#fff 0 25%,transparent 60%); filter:drop-shadow(0 0 5px #34D399) }
.sp159 i::before, .sp159 i::after{ content:""; position:absolute; left:50%; top:50%; background:#fff; border-radius:1px; transform:translate(-50%,-50%) }
.sp159 i::before{ width:1.5px; height:11px } .sp159 i::after{ width:11px; height:1.5px }
.sp159 i:nth-child(2n){ filter:drop-shadow(0 0 5px #38BDF8) }
.sp159 i:nth-child(3n){ filter:drop-shadow(0 0 5px #F9A8D4) }
.sp159 i:nth-child(1){ left:10%; animation-delay:0s } .sp159 i:nth-child(2){ left:24%; animation-delay:1.1s } .sp159 i:nth-child(3){ left:38%; animation-delay:2.2s }
.sp159 i:nth-child(4){ left:52%; animation-delay:.5s } .sp159 i:nth-child(5){ left:66%; animation-delay:1.7s } .sp159 i:nth-child(6){ left:80%; animation-delay:2.8s }
.sp159 i:nth-child(7){ left:90%; animation-delay:.9s } .sp159 i:nth-child(8){ left:31%; animation-delay:3s }
@keyframes sp159{ 0%{ transform:translateY(0) scale(.4) rotate(0); opacity:0 } 15%{ opacity:1 } 70%{ opacity:.9 } 100%{ transform:translateY(-190px) scale(1) rotate(90deg); opacity:0 } }

/* پربیننده: اخگرهای آتش */
.em159 i{ position:absolute; bottom:-6px; width:5px; height:5px; border-radius:50%; opacity:0; animation:em159 2.6s ease-in infinite;
  background:radial-gradient(circle,#FFF4C7 0 30%,#FFB020 55%,transparent 72%); box-shadow:0 0 8px #FF7A1A, 0 0 14px #FF3D5A }
.em159 i:nth-child(1){ left:8%;  animation-delay:0s }   .em159 i:nth-child(2){ left:18%; animation-delay:.7s; width:4px; height:4px }
.em159 i:nth-child(3){ left:29%; animation-delay:1.5s } .em159 i:nth-child(4){ left:41%; animation-delay:.3s; width:3px; height:3px }
.em159 i:nth-child(5){ left:53%; animation-delay:1.1s } .em159 i:nth-child(6){ left:64%; animation-delay:1.9s; width:4px; height:4px }
.em159 i:nth-child(7){ left:75%; animation-delay:.5s }  .em159 i:nth-child(8){ left:86%; animation-delay:1.3s; width:3px; height:3px }
.em159 i:nth-child(9){ left:94%; animation-delay:2.2s } .em159 i:nth-child(10){ left:47%; animation-delay:2.4s }
@keyframes em159{ 0%{ transform:translate(0,0); opacity:0 } 12%{ opacity:1 } 50%{ transform:translate(8px,-90px) } 100%{ transform:translate(-6px,-200px) scale(.3); opacity:0 } }
.hv159{ display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 9px 0 6px; border-radius:99px; font-size:10.5px; font-weight:900; letter-spacing:.8px; color:#fff; direction:ltr;
  background:linear-gradient(90deg,#FFB020,#FF3D5A); box-shadow:0 3px 12px rgba(255,61,90,.5), inset 0 0 0 1px rgba(255,255,255,.4) }
.hv159 svg{ width:13px; height:13px }
.cd155.hv .hl155::before{ background:conic-gradient(from 0deg,#FFF4C7,#FFB020,#FF3D5A,#FFB020,#FFF4C7) }
@media (prefers-reduced-motion:reduce){ .vf159, .vf159 *, .mo159 i, .sp159 i, .em159 i, .gl159{ animation:none !important } }

/* ═══════════ v160 · استریم تکی: سینما / چندنفره: نوار متحرک ═══════════ */
/* نوار فیلم دو طرف کارت */
.fs160{ position:absolute; top:0; bottom:0; width:10px; z-index:2; pointer-events:none; opacity:.85;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.75) 0 1.7px, transparent 2.2px) 0 0 / 10px 12px repeat-y,
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  animation:fs160 .9s linear infinite }
.fs160.l{ left:0; box-shadow:1px 0 0 rgba(255,255,255,.15) }
.fs160.r{ right:0; box-shadow:-1px 0 0 rgba(255,255,255,.15); animation-direction:reverse }
@keyframes fs160{ to{ background-position:0 12px, 0 0 } }
/* پرتوهای نورافکن */
.bm160{ position:absolute; top:-6%; width:70%; height:95%; z-index:1; pointer-events:none; mix-blend-mode:screen; transform-origin:50% 0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--c1) 60%,#fff) 0%, color-mix(in srgb,var(--c1) 25%,transparent) 45%, transparent 80%);
  clip-path:polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity:.38; filter:blur(3px) }
.bm160.a{ left:-18%; animation:bm160a 5s ease-in-out infinite alternate }
.bm160.b{ right:-18%; animation:bm160b 5s ease-in-out infinite alternate; background:linear-gradient(180deg, color-mix(in srgb,var(--c2) 60%,#fff) 0%, color-mix(in srgb,var(--c2) 25%,transparent) 45%, transparent 80%) }
@keyframes bm160a{ from{ transform:rotate(-28deg) } to{ transform:rotate(18deg) } }
@keyframes bm160b{ from{ transform:rotate(28deg) } to{ transform:rotate(-18deg) } }
/* تابلوی نئونی ON AIR */
.oa160{ position:absolute; bottom:56px; inset-inline-start:16px; z-index:3; display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:6px; direction:ltr;
  font-size:9.5px; font-weight:900; letter-spacing:1.6px; color:#fff; font-family:ui-monospace,Menlo,monospace;
  background:rgba(20,0,6,.45); border:1.5px solid #FF3B30; box-shadow:0 0 8px rgba(255,59,48,.8), inset 0 0 6px rgba(255,59,48,.5); text-shadow:0 0 6px #FF3B30;
  animation:oa160 2.4s ease-in-out infinite }
.oa160 i{ width:6px; height:6px; border-radius:50%; background:#FF3B30; box-shadow:0 0 6px #FF3B30; animation:lvP145 1s steps(2) infinite }
@keyframes oa160{ 0%,100%{ box-shadow:0 0 8px rgba(255,59,48,.8), inset 0 0 6px rgba(255,59,48,.5) } 50%{ box-shadow:0 0 16px rgba(255,59,48,1), inset 0 0 10px rgba(255,59,48,.7) } 53%{ opacity:.6 } 56%{ opacity:1 } }
/* چندنفره: نوار متحرک سریع */
.mq160{ position:absolute; left:0; right:0; bottom:54px; height:19px; z-index:3; overflow:hidden; pointer-events:none; direction:ltr;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--c2) 70%,transparent) 15%, color-mix(in srgb,var(--c1) 65%,transparent) 85%, transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--c1) 45%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.mq160 > span{ display:inline-flex; align-items:center; gap:8px; height:100%; white-space:nowrap; animation:mq160 5s linear infinite }
.mq160 b{ font-size:9.5px; font-weight:900; letter-spacing:1.4px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35) }
.mq160 i{ font-style:normal; font-size:10px; color:#FDE68A }
@keyframes mq160{ to{ transform:translateX(-50%) } }
[dir=rtl] .mq160 > span{ animation-direction:reverse }
/* چندنفره: درخشش ملایم پایین */
.mg160{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 30% at 50% 100%, color-mix(in srgb,var(--c1) 45%,transparent), transparent 70%); animation:hvg159 2.8s ease-in-out infinite alternate }
@media (prefers-reduced-motion:reduce){ .fs160, .bm160, .oa160, .oa160 i, .mq160 > span, .mg160{ animation:none !important } }

/* ═══════════ v161 · صوتی: گرادیان + ستاره / تصویری: گرادیان + ستارهٔ دنباله‌دار ═══════════ */
.cd155.pt .gl159{ background:linear-gradient(0deg, rgba(255,107,107,.5) 0%, rgba(214,36,126,.24) 16%, transparent 36%) }
.cd155.pt .sp159 i:nth-child(2n){ filter:drop-shadow(0 0 5px #FF8FB1) }
.cd155.pt .sp159 i:nth-child(3n){ filter:drop-shadow(0 0 5px #FDE68A) }
.cd155.st .gl159{ background:linear-gradient(0deg, rgba(0,194,199,.52) 0%, rgba(67,56,202,.26) 17%, transparent 38%) }
.oa160{ display:none !important }
/* ستاره‌های دنباله‌دار مورب */
.ss161{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden }
.ss161 i{ position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 6px 1px #fff, 0 0 12px 2px var(--c1); animation:ss161 3.8s cubic-bezier(.3,.6,.6,1) infinite }
.ss161 i::before{ content:""; position:absolute; top:50%; right:50%; width:34px; height:1.5px; transform:translateY(-50%) rotate(0);
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--c1) 70%,#fff)); border-radius:2px; transform-origin:100% 50% }
.ss161 i::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:13px; transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(#fff,#fff) center/1.2px 100% no-repeat, linear-gradient(#fff,#fff) center/100% 1.2px no-repeat; animation:tw161 .7s ease-in-out infinite alternate }
.ss161 i:nth-child(1){ left:4%;  animation-delay:0s }   .ss161 i:nth-child(2){ left:22%; animation-delay:1.3s }
.ss161 i:nth-child(3){ left:40%; animation-delay:2.4s } .ss161 i:nth-child(4){ left:12%; animation-delay:.7s; width:4px; height:4px }
.ss161 i:nth-child(5){ left:55%; animation-delay:1.9s } .ss161 i:nth-child(6){ left:30%; animation-delay:3.1s; width:4px; height:4px }
.ss161 i:nth-child(7){ left:64%; animation-delay:.4s }
.ss161 i:nth-child(2n)::before{ background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--c2) 60%,#fff)) }
@keyframes ss161{ 0%{ transform:translate(0,0) rotate(-40deg) scale(.5); opacity:0 } 12%{ opacity:1 } 75%{ opacity:.95 } 100%{ transform:translate(120px,-230px) rotate(-40deg) scale(1); opacity:0 } }
@keyframes tw161{ from{ opacity:.35; transform:translate(-50%,-50%) rotate(45deg) scale(.6) } to{ opacity:1; transform:translate(-50%,-50%) rotate(45deg) scale(1.15) } }
@media (prefers-reduced-motion:reduce){ .ss161 i, .ss161 i::after{ animation:none !important } }

/* ═══════════ v162 · تازه‌وارد: ستارهٔ منشوری / تصویری: نوار نور بالا / مولتی: حلقه‌های نور ═══════════ */
.cd155.nu .gl159{ background:linear-gradient(0deg, color-mix(in srgb,var(--c1) 55%,transparent) 0%, color-mix(in srgb,var(--c2) 25%,transparent) 17%, transparent 38%) }
.cd155.st .gl159{ background:linear-gradient(0deg, color-mix(in srgb,var(--c1) 52%,transparent) 0%, color-mix(in srgb,var(--c2) 26%,transparent) 17%, transparent 38%) }

/* تازه‌وارد: حباب‌های نور */
.bk162, .pb162, .rb162{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2 }
.bk162 i{ position:absolute; bottom:-24px; width:14px; height:14px; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), color-mix(in srgb,var(--c1) 70%,transparent) 45%, transparent 72%);
  box-shadow:0 0 10px color-mix(in srgb,var(--c1) 60%,transparent); animation:bk162 5s ease-in infinite }
.bk162 i:nth-child(2n){ background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), color-mix(in srgb,var(--c2) 70%,transparent) 45%, transparent 72%); box-shadow:0 0 10px color-mix(in srgb,var(--c2) 60%,transparent) }
.bk162 i:nth-child(1){ left:6%;  animation-delay:0s;   width:10px; height:10px }
.bk162 i:nth-child(2){ left:20%; animation-delay:1.6s; width:16px; height:16px }
.bk162 i:nth-child(3){ left:36%; animation-delay:3.1s; width:8px;  height:8px }
.bk162 i:nth-child(4){ left:50%; animation-delay:.8s;  width:13px; height:13px }
.bk162 i:nth-child(5){ left:64%; animation-delay:2.4s; width:18px; height:18px }
.bk162 i:nth-child(6){ left:78%; animation-delay:4s;   width:9px;  height:9px }
.bk162 i:nth-child(7){ left:88%; animation-delay:1.2s; width:12px; height:12px }
.bk162 i:nth-child(8){ left:28%; animation-delay:3.7s; width:11px; height:11px }
.bk162 i:nth-child(9){ left:70%; animation-delay:.3s;  width:7px;  height:7px }
@keyframes bk162{ 0%{ transform:translate(0,0) scale(.5); opacity:0 } 15%{ opacity:.95 }
  50%{ transform:translate(8px,-110px) scale(1) } 100%{ transform:translate(-6px,-230px) scale(.7); opacity:0 } }
/* تازه‌وارد: ستاره‌های منشوری رنگین‌کمانی */
.pb162 i{ position:absolute; width:26px; height:26px; opacity:0; transform:scale(0);
  background:conic-gradient(from 0deg, #fff, #FDE68A, #F9A8D4, #A78BFA, #67E8F9, #86EFAC, #fff);
  clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);
  filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--c1)); animation:pb162 3.6s ease-in-out infinite }
.pb162 i::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle, #fff 0 14%, transparent 30%) }
.pb162 i:nth-child(1){ left:14%; top:30%; animation-delay:0s }
.pb162 i:nth-child(2){ left:70%; top:22%; animation-delay:.7s; width:20px; height:20px }
.pb162 i:nth-child(3){ left:46%; top:48%; animation-delay:1.4s; width:32px; height:32px }
.pb162 i:nth-child(4){ left:80%; top:58%; animation-delay:2.1s; width:18px; height:18px }
.pb162 i:nth-child(5){ left:22%; top:62%; animation-delay:2.8s; width:22px; height:22px }
@keyframes pb162{ 0%{ transform:scale(0) rotate(0); opacity:0 } 18%{ transform:scale(1.15) rotate(60deg); opacity:1 }
  32%{ transform:scale(.85) rotate(95deg); opacity:1 } 46%{ transform:scale(1) rotate(130deg); opacity:.9 } 62%, 100%{ transform:scale(0) rotate(200deg); opacity:0 } }

/* تصویری تکی: نوار نور متحرک بالای کارت */
.tb162{ position:absolute; left:0; right:0; top:0; height:3px; z-index:4; pointer-events:none; overflow:hidden;
  background:linear-gradient(90deg, color-mix(in srgb,var(--c2) 55%,transparent), color-mix(in srgb,var(--c1) 55%,transparent));
  box-shadow:0 0 10px var(--c1), 0 2px 18px color-mix(in srgb,var(--c1) 55%,transparent) }
.tb162 i{ position:absolute; top:0; left:0; width:38%; height:100%;
  background:linear-gradient(90deg, transparent, #fff 55%, color-mix(in srgb,var(--c1) 40%,#fff), transparent);
  filter:drop-shadow(0 0 4px #fff); animation:tb162 1.6s cubic-bezier(.5,0,.3,1) infinite }
@keyframes tb162{ from{ transform:translateX(-110%) } to{ transform:translateX(290%) } }
[dir=rtl] .tb162 i{ animation-direction:reverse }

/* مولتی: حلقه‌های نور توخالی که بالا می‌روند و موج می‌خورند */
.rb162 i{ position:absolute; bottom:40px; width:16px; height:16px; border-radius:50%; opacity:0;
  border:1.6px solid color-mix(in srgb,var(--c1) 80%,#fff); box-shadow:0 0 8px var(--c1), inset 0 0 6px color-mix(in srgb,var(--c1) 50%,transparent);
  animation:rb162 4.4s ease-out infinite }
.rb162 i:nth-child(2n){ border-color:color-mix(in srgb,var(--c2) 70%,#fff); box-shadow:0 0 8px var(--c2) }
.rb162 i:nth-child(1){ left:8%;  animation-delay:0s }
.rb162 i:nth-child(2){ left:26%; animation-delay:1.3s; width:11px; height:11px }
.rb162 i:nth-child(3){ left:44%; animation-delay:2.6s; width:20px; height:20px }
.rb162 i:nth-child(4){ left:60%; animation-delay:.6s;  width:12px; height:12px }
.rb162 i:nth-child(5){ left:76%; animation-delay:1.9s }
.rb162 i:nth-child(6){ left:88%; animation-delay:3.2s; width:10px; height:10px }
.rb162 i:nth-child(7){ left:36%; animation-delay:3.8s; width:14px; height:14px }
@keyframes rb162{ 0%{ transform:translate(0,0) scale(.4); opacity:0 } 15%{ opacity:1 }
  40%{ transform:translate(-7px,-70px) scale(.9) } 70%{ transform:translate(7px,-140px) scale(1.1); opacity:.8 } 100%{ transform:translate(0,-200px) scale(1.5); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .bk162 i, .pb162 i, .tb162 i, .rb162 i{ animation:none !important } }
/* v162: نوار بالا پررنگ‌تر */
.tb162{ height:5px; background:linear-gradient(90deg, var(--c2), var(--c1), var(--c2)); box-shadow:0 0 12px var(--c1), 0 4px 22px color-mix(in srgb,var(--c1) 70%,transparent) }
.tb162 i{ width:45%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.6) 40%, #fff 60%, transparent) }

/* ═══ v254 · بنرهای پنل ═══ */
.bnc154.pb254{ background:linear-gradient(120deg,var(--c1),var(--c2)) }
.pbi254{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pb254.im:not(.io)::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 82%,transparent) 0%,color-mix(in srgb,var(--c1) 45%,transparent) 48%,transparent 80%) }
[dir=rtl] .pb254.im:not(.io)::after{ background:linear-gradient(270deg,color-mix(in srgb,var(--c1) 82%,transparent) 0%,color-mix(in srgb,var(--c1) 45%,transparent) 48%,transparent 80%) }
.pb254 .bnx154{ z-index:1 }
.pbg254{ position:absolute; inset:0; overflow:hidden }
.pbg254 u{ position:absolute; border-radius:50%; background:rgba(255,255,255,.16); animation:pbg254 7s ease-in-out infinite alternate }
.pbg254 u:nth-child(1){ width:120px; height:120px; inset-inline-end:-20px; top:-40px }
.pbg254 u:nth-child(2){ width:70px; height:70px; inset-inline-end:90px; bottom:-30px; animation-delay:-2s; background:rgba(255,255,255,.12) }
.pbg254 u:nth-child(3){ width:34px; height:34px; inset-inline-end:40px; top:56%; animation-delay:-4s; background:rgba(253,230,138,.35) }
@keyframes pbg254{ to{ transform:translate(-10px,8px) scale(1.12) } }
.pbs254{ font-style:normal; font-size:11.5px; font-weight:700; opacity:.92; line-height:1.5 }
.pbc254{ align-self:flex-start; margin-top:3px; font-style:normal; font-size:10.5px; font-weight:900; padding:2px 8px; border-radius:99px; background:rgba(0,0,0,.25) }
.pbc254:empty{ display:none }
@media (prefers-reduced-motion:reduce){ .pbg254 u{ animation:none } }

/* ═══════════ v256 · سربرگ دو طبقه: «داک فرمان» + تب‌های تمام‌عرض ═══════════
   داک: جستجوی زنده (کپسول شیشه‌ای) · رتبه‌ها (کاشی طلایی با برق) · Go Live (کپسول شفق با نقطهٔ ضربان)
   با اسکرول رو به پایین داک نرم جمع می‌شود و تب‌ها چسبیده می‌مانند؛ با اسکرول رو به بالا برمی‌گردد. */
.hd256{ display:block; padding:10px 10px 0 }
.dk256{ display:flex; align-items:center; gap:8px; height:44px; overflow:hidden;
  transition:height .32s cubic-bezier(.3,.8,.3,1), opacity .22s, transform .32s cubic-bezier(.3,.8,.3,1), margin .32s }
.hd256.cp256 .dk256{ height:0; opacity:0; transform:translateY(-10px); pointer-events:none }
.hd256.sc256{ box-shadow:0 1px 0 rgba(139,92,246,.10), 0 14px 26px -18px rgba(139,92,246,.6) }

/* جستجو */
.hd256 .sq256{ flex:1; min-width:0; height:42px; margin:0; padding:0 6px 0 12px; gap:8px; border-radius:15px; animation:none; cursor:text;
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#EEE6FB,#F6EFFF) border-box; border:1.5px solid transparent;
  box-shadow:0 6px 16px -8px rgba(139,92,246,.35); transition:border-color .2s, box-shadow .25s }
[dir=rtl] .hd256 .sq256{ padding:0 12px 0 6px }
.hd256 .sq256 > svg{ width:18px; height:18px; color:#8B5CF6 }
.hd256 .sq256 input{ font-size:13.5px; font-weight:700 }
.hd256 .sq256 input::placeholder{ color:#A79DBD; font-weight:700 }
.hd256 .sq256:focus-within{ background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#FF3D7F,#8B5CF6) border-box;
  box-shadow:0 0 0 4px rgba(139,92,246,.12), 0 8px 18px -8px rgba(139,92,246,.45) }
.hd256 .sq256 button{ width:26px; height:26px; background:#F1EAFD; color:#6D28D9 }

/* رتبه‌ها */
.rk256{ position:relative; flex:none; height:42px; display:flex; align-items:center; gap:4px; padding:0 10px 0 6px; border:0; border-radius:15px; cursor:pointer; overflow:hidden;
  color:#92400E; background:linear-gradient(150deg,#FFFBEA,#FFF1C2 60%,#FFE08A); box-shadow:0 6px 16px -8px rgba(217,119,6,.6), inset 0 0 0 1.5px rgba(251,191,36,.55) }
[dir=rtl] .rk256{ padding:0 6px 0 10px }
.rk256::after{ content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); animation:sh256 3.6s ease-in-out infinite }
@keyframes sh256{ 0%,55%{ left:-60% } 85%,100%{ left:130% } }
.rki256{ width:30px; height:30px; display:grid; place-items:center; animation:fl145 3s ease-in-out infinite }
.rki256 svg{ width:30px; height:30px; filter:drop-shadow(0 3px 4px rgba(217,119,6,.35)) }
.rk256 b{ font-size:12px; font-weight:900; white-space:nowrap }

/* Go Live */
.go256{ position:relative; flex:none; height:42px; display:flex; align-items:center; gap:6px; padding:0 14px 0 10px; border:0; border-radius:15px; cursor:pointer; overflow:hidden; isolation:isolate;
  color:#fff; background:linear-gradient(120deg,#FF3D7F,#C026D3 52%,#7C3AED); background-size:200% 100%; animation:au256 5s ease-in-out infinite;
  box-shadow:0 10px 20px -8px rgba(192,38,211,.75), inset 0 1px 0 rgba(255,255,255,.35) }
[dir=rtl] .go256{ padding:0 10px 0 14px }
@keyframes au256{ 0%,100%{ background-position:0 50% } 50%{ background-position:100% 50% } }
.go256 .gr256{ position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:radial-gradient(60% 120% at 20% 0%,rgba(255,255,255,.35),transparent 60%) }
.gi256{ position:relative; width:22px; height:22px; display:grid; place-items:center }
.gi256 svg{ width:20px; height:20px }
.gi256::before{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(255,255,255,.55); animation:pl256 1.8s ease-out infinite }
@keyframes pl256{ from{ transform:scale(.6); opacity:1 } to{ transform:scale(1.35); opacity:0 } }
.go256 b{ font-size:13px; font-weight:900; white-space:nowrap; letter-spacing:.2px }
.gd256{ position:absolute; top:7px; inset-inline-end:7px; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(255,61,127,.9); animation:bl256 1.2s ease-in-out infinite }
@keyframes bl256{ 50%{ opacity:.25 } }
.go256:active, .rk256:active{ transform:scale(.96) }

/* هنگام تایپ در جستجو: رتبه‌ها و Go Live کوچک می‌شوند تا جا برای متن باز شود */
.rk256 b, .go256 b{ transition:max-width .25s, opacity .2s; max-width:80px }
.hd256.q256 .rk256 b, .hd256.q256 .go256 b{ max-width:0; opacity:0 }
.hd256.q256 .rk256, .hd256.q256 .go256{ padding:0 7px; gap:0 }

/* تب‌ها: تمام‌عرض زیر داک */
.hd256 .tbs154{ margin:2px -10px 0 }
.hd256 .tbi154{ padding:0 14px }
.hd256 .tbi154 button{ height:42px }

/* گوشی‌های خیلی باریک */
@media (max-width:360px){
  .rk256 b{ display:none } .rk256{ padding:0 6px }
  .go256{ padding:0 10px } .go256 b{ font-size:12px }
}
@media (prefers-reduced-motion:reduce){ .rk256::after, .rki256, .go256, .gi256::before, .gd256{ animation:none } .dk256{ transition:none } }
/* ظرف میانی صفحه خودش اسکرول نمی‌خورد (سند اسکرول می‌خورد)؛ برای اینکه sticky واقعاً بچسبد، روی صفحهٔ لایو ظرف را باز می‌کنیم */
.overflow-y-auto.h365-live{ overflow:visible }
.hd256{ top:var(--tb256,0px) }

/* ═══════════ v258 · نوار تب «کپسول یاس» ═══════════
   ریل مرواریدی با سایهٔ داخلی؛ نشانگر شیشه‌ای صورتی←بنفش که با فنر بین تب‌ها می‌لغزد و برق از رویش رد می‌شود؛
   آیکون اختصاصی هر تب؛ شمارندهٔ زندهٔ لایوهای هر دسته. فقط رنگ‌های تم اپ. */
.hd256 .tbs154{ margin:8px -10px 0; padding:0 10px 8px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent) }
.hd256 .tbi154{ position:relative; gap:2px; padding:4px; border-radius:17px;
  background:linear-gradient(180deg,#F3ECFF,#FBF8FF); box-shadow:inset 0 1.5px 3px rgba(91,33,182,.12), inset 0 0 0 1.5px #EADFFB, 0 1px 0 #fff }
.hd256 .tbi154 button{ position:relative; z-index:1; height:36px; padding:0 12px; gap:5px; border-radius:13px; font-size:13.5px; font-weight:800; color:#7C6A9E;
  transition:color .3s ease, transform .15s }
.hd256 .tbi154 button:active{ transform:scale(.95) }
.hd256 .tbi154 button.on{ font-size:13.5px; font-weight:900; color:#fff }
.hd256 .tbi154 button.on span{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff; text-shadow:0 1px 2px rgba(91,33,182,.35) }
.hd256 .tbi154 button svg:not(.sw154){ width:12px; height:12px; opacity:.75 }
.hd256 .tbi154 button.on svg:not(.sw154){ color:#fff; opacity:1 }
.ti258{ display:grid; place-items:center; width:16px; height:16px; color:#A78BFA; transition:color .3s, transform .35s cubic-bezier(.3,1.6,.5,1) }
.ti258 svg{ width:16px !important; height:16px !important; opacity:1 !important }
.hd256 .tbi154 button[data-tab=hot] .ti258{ color:#FF3D7F }
.hd256 .tbi154 button.on .ti258{ color:#fff; transform:scale(1.12) rotate(-6deg); filter:drop-shadow(0 1px 2px rgba(91,33,182,.4)) }
.hd256 .tbi154 button.on[data-tab=hot] .ti258 svg{ animation:fl258 1.4s ease-in-out infinite }
@keyframes fl258{ 50%{ transform:scale(1.15) translateY(-1px) } }
.tc258{ min-width:17px; height:17px; padding:0 5px; border-radius:99px; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:900; line-height:1;
  color:#7C3AED; background:#fff; box-shadow:inset 0 0 0 1.2px #E4D6FF; font-variant-numeric:tabular-nums; animation:tc258 .3s cubic-bezier(.3,1.6,.5,1) }
.hd256 .tbi154 button.on .tc258{ color:#C026D3; background:#fff; box-shadow:0 2px 6px rgba(91,33,182,.35) }
@keyframes tc258{ from{ transform:scale(.4); opacity:0 } }
.tc258[hidden]{ display:none !important }
/* نشانگر لغزان */
.in258{ position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:60px; border-radius:13px; opacity:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(120deg,#FF3D7F,#C026D3 55%,#8B5CF6); background-size:180% 100%;
  box-shadow:0 8px 18px -8px rgba(192,38,211,.8), 0 2px 6px -2px rgba(255,61,127,.6), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .45s cubic-bezier(.34,1.45,.5,1), width .45s cubic-bezier(.34,1.45,.5,1), opacity .2s; animation:au256 5s ease-in-out infinite }
.in258::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(70% 120% at 25% 0%,rgba(255,255,255,.4),transparent 60%) }
.in258::after{ content:""; position:absolute; top:0; bottom:0; width:45%; left:-60%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:sh256 3.8s ease-in-out infinite }
.hd256 .sw154{ display:none }
@media (prefers-reduced-motion:reduce){ .in258, .in258::after, .ti258 svg{ animation:none !important } .in258{ transition:none } }

/* ═══════════ v259 · بازگشت به تب‌های متنی + خط منحنی لغزان (به‌جای کپسول) ═══════════
   تب فعال: متن بزرگ با گرادیان صورتی←ارکیده←بنفش. زیرش خط منحنی درخشان که با فنر بین تب‌ها
   می‌لغزد، هنگام رسیدن از نو «کشیده» می‌شود و یک جرقهٔ نور روی آن می‌دود. */
.hd256 .tbi154{ background:none; box-shadow:none; padding:0 10px; border-radius:0; gap:2px }
.hd256 .tbs154{ margin:4px -10px 0; padding:0 0 4px }
.hd256 .tbi154 button{ height:46px; padding:0 9px 10px; border-radius:0; font-size:15px; font-weight:800; color:#A39BB3; transition:color .25s }
.hd256 .tbi154 button.on{ font-size:20px; font-weight:900; color:transparent }
.hd256 .tbi154 button.on span{ background:linear-gradient(90deg,#FF3D7F,#C026D3 55%,#8B5CF6); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; animation:au256 5s ease-in-out infinite }
.hd256 .tbi154 button.on svg:not(.sw154){ color:#8B5CF6 }
.hd256 .ti258{ display:none }
.hd256 .tc258{ position:relative; top:-7px; min-width:15px; height:15px; padding:0 4px; font-size:9px; color:#fff; background:linear-gradient(135deg,#FF3D7F,#8B5CF6); box-shadow:0 2px 6px -1px rgba(192,38,211,.6) }
.hd256 .tbi154 button.on .tc258{ color:#fff; background:linear-gradient(135deg,#FF3D7F,#8B5CF6) }
/* خط منحنی لغزان */
.hd256 .in258{ top:auto; bottom:1px; height:12px; border-radius:0; overflow:visible; background:none; box-shadow:none; animation:none }
.hd256 .in258::before, .hd256 .in258::after{ display:none }
.in258 svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.in258 .gl{ opacity:.35; filter:blur(3px) }
.in258 .ln{ stroke-dasharray:100; stroke-dashoffset:0 }
.in258.dr259 .ln{ animation:dr259 .55s cubic-bezier(.3,.9,.3,1) both }
.in258.dr259 .gl{ animation:gw259 .7s ease-out both }
@keyframes dr259{ from{ stroke-dashoffset:100 } }
@keyframes gw259{ from{ opacity:0 } 40%{ opacity:.7 } }
.sk259{ position:absolute; top:3px; left:0; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 6px 2px rgba(255,61,127,.9), 0 0 12px 4px rgba(139,92,246,.6); animation:sk259 2.8s ease-in-out infinite }
@keyframes sk259{ 0%{ left:0; top:2px; opacity:0 } 10%{ opacity:1 } 50%{ top:6px } 90%{ opacity:1 } 100%{ left:calc(100% - 6px); top:0; opacity:0 } }
@media (prefers-reduced-motion:reduce){ .sk259, .in258 .ln, .in258 .gl{ animation:none !important } }
.fl260{ font-style:normal; font-size:15px; line-height:1 } .hd256 .tbi154 button.on .fl260{ font-size:18px }