/* ═══════════════════════════════════════════════════════════════════════════
 *  Hartly · v96 — صفحهٔ ورود، ثبت‌نام و ساخت پروفایل
 *
 *  ظاهر از طرحی که خودت دادی برداشته شده: گرادیان صورتی به طلایی، قلب
 *  تپنده با حلقه‌های موج، لکه‌های محو پس‌زمینه، قلب‌های شناور، و کارت
 *  شیشه‌ای. منطق پشتش همان است که کار می‌کرد — فقط پوستش عوض شد.
 *
 *  یک چیز که در طرح اصلی نبود و اینجا هست: این صفحه پنج مرحله دارد،
 *  نه یکی. ورود، کد تأیید، بازیابی رمز، رمز تازه، و ساخت پروفایل.
 *  همه در همان کارت می‌نشینند و با انیمیشن جا عوض می‌کنند.
 * ═══════════════════════════════════════════════════════════════════════════ */

#hbAuth{
  --rose:#ff4d7d; --rose2:#e62e63; --amber:#ff9f43; --ink:#1b1220;
  --tx:#241a2e; --tx2:#5c4f68; --dim:#8d7f9a;
  --line:#f0e4ee; --line2:#e6d7e6;
  --grad:linear-gradient(135deg,#ff4d7d 0%,#ff7a59 55%,#ff9f43 100%);

  position:fixed; inset:0; z-index:70; display:none;
  background:#fff7f8; color:var(--tx);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:28px 18px calc(40px + env(safe-area-inset-bottom));
}
#hbAuth.on{ display:flex }
#hbAuth *{ box-sizing:border-box }

/* صفحهٔ قدیمی کنار گذاشته می‌شود. لایه‌های دیگر هنوز نمایشش را عوض
   می‌کنند، پس با important خاموشش می‌کنیم. */
body.hb96 #onb{ display:none !important }

/* ═══════════ پس‌زمینهٔ متحرک ═══════════ */
.hb96-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.hb96-blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  animation:hb96drift 14s ease-in-out infinite;
}
.hb96-b1{ width:420px; height:420px; background:#ffd3e0; top:-120px; right:-100px }
.hb96-b2{ width:380px; height:380px; background:#ffe4c2; bottom:-140px; left:-90px; animation-delay:-5s }
.hb96-b3{ width:260px; height:260px; background:#f3d9ff; top:35%; left:60%; opacity:.35; animation-delay:-9s }
@keyframes hb96drift{
  0%,100%{ transform:translate(0,0) scale(1) }
  50%{ transform:translate(-30px,26px) scale(1.07) }
}
.hb96-heart{ position:absolute; color:var(--rose); opacity:.14; animation:hb96float linear infinite }
@keyframes hb96float{
  0%{ transform:translateY(105vh) rotate(0) scale(.7); opacity:0 }
  12%{ opacity:.16 } 90%{ opacity:.12 }
  100%{ transform:translateY(-12vh) rotate(24deg) scale(1); opacity:0 }
}

/* ═══════════ کارت ═══════════ */
.hb96-card{
  position:relative; z-index:2; width:100%; max-width:420px; margin:auto;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.9); border-radius:30px;
  padding:34px 30px 26px;
  box-shadow:0 30px 80px rgba(230,46,99,.14), 0 2px 0 rgba(255,255,255,.8) inset;
  animation:hb96pop .55s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes hb96pop{
  from{ opacity:0; transform:translateY(22px) scale(.97) } to{ opacity:1; transform:none }
}

/* ═══════════ نشان ═══════════ */
.hb96-logo{ display:flex; flex-direction:column; align-items:center; gap:13px }
.hb96-mark{ position:relative; width:84px; height:84px }
.hb96-pulse{
  position:absolute; inset:-14px; border-radius:32px;
  border:2px solid rgba(255,77,125,.35); animation:hb96pulse 2.4s ease-out infinite;
}
.hb96-pulse.p2{ animation-delay:1.2s }
@keyframes hb96pulse{
  0%{ transform:scale(.8); opacity:.9 } 70%{ transform:scale(1.25); opacity:0 } 100%{ opacity:0 }
}
.hb96-core{
  position:absolute; inset:0; border-radius:26px; background:var(--grad);
  display:grid; place-items:center;
  box-shadow:0 16px 38px rgba(255,77,125,.42);
  animation:hb96beat 1.6s ease-in-out infinite;
}
@keyframes hb96beat{
  0%,100%{ transform:scale(1) } 12%{ transform:scale(1.07) } 24%{ transform:scale(1) }
  36%{ transform:scale(1.05) } 48%{ transform:scale(1) }
}
.hb96-core svg{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)) }
.hb96-brand{
  font-size:29px; font-weight:900; letter-spacing:.4px; direction:ltr;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hb96-slogan{ font-size:12.5px; color:var(--dim); font-weight:600; margin-top:-9px; letter-spacing:.2px }

/* ═══════════ سرتیتر ═══════════ */
.hb96-h1{ font-size:22px; font-weight:900; text-align:center; margin:18px 0 4px; line-height:1.6 }
.hb96-h1 em{
  font-style:normal; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hb96-sub{ text-align:center; color:var(--tx2); font-size:13px; margin:0 0 22px; line-height:1.9 }

/* ═══════════ زبانه‌ها ═══════════ */
.hb96-tabs{
  position:relative; display:flex; direction:rtl;
  background:#f6ecf3; border-radius:16px; padding:5px; margin-bottom:20px;
}
.hb96-tabs .ind{
  position:absolute; top:5px; bottom:5px; width:calc(50% - 5px); right:5px;
  border-radius:12px; background:#fff; box-shadow:0 6px 16px rgba(36,26,46,.1);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.hb96-tabs.signup .ind{ transform:translateX(-100%) }
.hb96-tabs button{
  position:relative; z-index:1; flex:1; border:0; background:none; padding:11px;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--dim);
  transition:color .2s; cursor:pointer;
}
.hb96-tabs button.on{ color:var(--rose2) }

/* ═══════════ ورودی‌ها ═══════════ */
.hb96-fld{ margin-bottom:13px }
.hb96-box{
  position:relative; display:flex; align-items:center;
  background:#fdf8fb; border:1.5px solid var(--line2); border-radius:15px; transition:.18s;
}
.hb96-box:focus-within{
  border-color:var(--rose); background:#fff; box-shadow:0 0 0 4px rgba(255,77,125,.1);
}
.hb96-box .ic{
  position:absolute; inset-inline-start:14px; color:var(--dim);
  display:grid; place-items:center; pointer-events:none;
}
.hb96-box input{
  width:100%; border:0; background:none; outline:none;
  font-family:inherit; font-size:14.5px; padding:14px 44px; color:var(--tx);
}
.hb96-box input::placeholder{ color:#b7a9c2 }
.hb96-box .eye{
  position:absolute; inset-inline-end:12px; border:0; background:none;
  color:var(--dim); cursor:pointer; display:grid; place-items:center; padding:4px;
}
.hb96-box .eye:hover{ color:var(--rose) }
.hb96-fld.err .hb96-box{ border-color:#e5484d; box-shadow:0 0 0 4px rgba(229,72,77,.09) }

/* فیلدهای فارسی پروفایل — برخلاف ایمیل و رمز، راست‌چین */
.hb96-fa input{ direction:rtl; text-align:right; padding:14px 18px }

/* قدرت رمز */
.hb96-meter{ height:4px; border-radius:3px; background:#f0e4ee; overflow:hidden; margin:0 2px 12px }
.hb96-meter i{ display:block; height:100%; width:0; border-radius:3px; transition:width .25s, background .25s }
.hb96-hint{ font-size:11.5px; font-weight:600; color:var(--dim); margin:-6px 4px 12px; line-height:1.7 }

/* ردیف «مرا به خاطر بسپار» و «رمز فراموش‌شده» */
.hb96-rowb{ display:flex; align-items:center; justify-content:space-between; margin:2px 2px 16px; gap:10px }
.hb96-chk{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--tx2); font-weight:600; cursor:pointer;
}
.hb96-chk input{ accent-color:var(--rose); width:16px; height:16px; cursor:pointer }
.hb96-link{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--rose2); font-family:inherit; font-size:12.5px; font-weight:700;
}
.hb96-link:hover{ text-decoration:underline }
.hb96-link:disabled{ color:var(--dim); cursor:default; text-decoration:none }

/* ═══════════ پیام‌ها ═══════════ */
.hb96-msg{
  display:none; align-items:flex-start; gap:8px;
  border-radius:14px; padding:11px 13px; margin-bottom:13px;
  font-size:12.5px; font-weight:600; line-height:1.85;
}
.hb96-msg.on{ display:flex }
.hb96-msg.err{ background:#fff1f2; color:#be123c }
.hb96-msg.ok{ background:#f0fdf4; color:#15803d }
.hb96-msg svg{ flex:0 0 16px; margin-top:3px }

/* ═══════════ دکمه‌ها ═══════════ */
.hb96-btn{
  width:100%; border:0; border-radius:16px; padding:15px;
  font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden; transition:.2s;
}
.hb96-primary{
  color:#fff; background:var(--grad); background-size:160% 100%;
  box-shadow:0 14px 30px rgba(255,77,125,.35);
}
.hb96-primary:hover{
  transform:translateY(-2px); background-position:100% 0;
  box-shadow:0 18px 38px rgba(255,77,125,.45);
}
.hb96-primary:active{ transform:translateY(0) scale(.99) }
/* برق نرمی که از روی دکمه رد می‌شود */
.hb96-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; right:-80px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  animation:hb96shine 3.2s ease-in-out infinite;
}
@keyframes hb96shine{ 0%,60%{ right:-80px } 100%{ right:calc(100% + 80px) } }
.hb96-btn:disabled{ opacity:.6; cursor:wait; transform:none }
.hb96-btn:disabled::after{ animation:none; display:none }

.hb96-soc{ display:flex; flex-direction:column; gap:10px }
.hb96-soc .hb96-btn{
  padding:13px; border-radius:15px; font-size:14px; font-weight:700;
  border:1.5px solid var(--line2); background:#fff; color:var(--tx); box-shadow:none;
}
.hb96-soc .hb96-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(36,26,46,.09) }
.hb96-soc .apple{ background:#0e0a12; color:#fff; border-color:#0e0a12 }
.hb96-soc .apple:hover{ box-shadow:0 8px 22px rgba(14,10,18,.25) }

/* چرخانک داخل دکمه */
.hb96-spin{
  width:16px; height:16px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:hb96rot .7s linear infinite; display:none;
}
.hb96-soc .hb96-spin{ border-color:rgba(36,26,46,.2); border-top-color:var(--rose) }
.hb96-btn.busy .hb96-spin{ display:block }
.hb96-btn.busy .hb96-txt{ opacity:.7 }
@keyframes hb96rot{ to{ transform:rotate(360deg) } }

/* ═══════════ جداکننده ═══════════ */
.hb96-div{
  display:flex; align-items:center; gap:14px; margin:20px 0 15px;
  color:var(--dim); font-size:12px; font-weight:600;
}
.hb96-div::before,.hb96-div::after{ content:""; flex:1; height:1px; background:var(--line2) }

/* ═══════════ نشان‌های اعتماد ═══════════ */
/* ═══════════ پاورقی ═══════════ */
.hb96-legal{ text-align:center; font-size:11.5px; color:var(--dim); line-height:2; margin-top:20px }
.hb96-legal a{ color:var(--rose2); font-weight:700; text-decoration:none }
.hb96-legal a:hover{ text-decoration:underline }

/* ═══════════ دکمهٔ برگشت ═══════════ */
.hb96-back{
  position:absolute; top:22px; inset-inline-start:22px;
  width:36px; height:36px; border-radius:13px; border:0;
  background:#f6ecf3; color:var(--tx2); cursor:pointer;
  display:none; align-items:center; justify-content:center; z-index:3;
}
.hb96-back.on{ display:flex }

/* ═══════════ تغییر زبان ═══════════ */
.hb96-lang{
  position:absolute; top:22px; inset-inline-end:22px; z-index:3;
  border:1px solid var(--line2); background:#fdf8fb; color:var(--tx2);
  font-family:inherit; font-size:11.5px; font-weight:800;
  padding:7px 13px; border-radius:99px; cursor:pointer; transition:.16s;
}
.hb96-lang:hover{ border-color:var(--rose); color:var(--rose2); background:#fff }

/*  مرحلهٔ پروفایل لوگو ندارد، پس تیترش می‌آمد بالا و زیر دکمهٔ زبان
    می‌نشست. این فاصله دقیقاً به اندازهٔ همان دکمه است. */
.hb96-step[data-s="profile"] .hb96-h1{ margin-top:30px }
#hb96Intro .ilang{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); left:104px; z-index:20;
  border:0; background:rgba(36,26,46,.06); color:var(--tx2);
  font-family:inherit; font-size:12px; font-weight:700; padding:7px 15px;
  border-radius:99px; cursor:pointer; transition:.15s; backdrop-filter:blur(6px);
}
#hb96Intro .ilang:hover{ background:rgba(36,26,46,.12) }
.hb96-back:hover{ background:#f0e4ee; color:var(--rose2) }

/* ═══════════ کد تأیید ═══════════ */
.hb96-code{ display:flex; gap:9px; direction:ltr; justify-content:center; margin:6px 0 18px }
.hb96-code input{
  flex:1 1 0; min-width:0; max-width:52px; height:56px; text-align:center;
  background:#fdf8fb; border:1.5px solid var(--line2); border-radius:14px;
  font-family:inherit; font-size:22px; font-weight:900; color:var(--tx);
  outline:none; transition:.16s; -moz-appearance:textfield;
}
.hb96-code input::-webkit-outer-spin-button,
.hb96-code input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.hb96-code input:focus{
  background:#fff; border-color:var(--rose); box-shadow:0 0 0 4px rgba(255,77,125,.1);
}
.hb96-code input.filled{ background:#fff; border-color:var(--line) }
.hb96-code.bad input{ border-color:#e5484d; animation:hb96shake .35s }
@keyframes hb96shake{
  0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) }
}
.hb96-mail{ font-weight:800; color:var(--tx); direction:ltr; display:inline-block }

/* ═══════════ پروفایل ═══════════ */
.hb96-photo{
  width:88px; height:88px; border-radius:50%; flex:0 0 88px;
  background:#fdf8fb center/cover no-repeat;
  border:2px dashed var(--line2); cursor:pointer;
  display:grid; place-items:center; transition:.16s; overflow:hidden;
}
.hb96-photo:hover{ border-color:var(--rose) }
.hb96-photo.has{ border-style:solid; border-color:var(--rose) }
.hb96-photo.has svg{ display:none }

.hb96-row{ display:flex; gap:10px }
.hb96-seg{ display:flex; gap:8px; margin-bottom:6px }
.hb96-seg button{
  flex:1; border:1.5px solid var(--line2); background:#fff; cursor:pointer;
  border-radius:14px; padding:12px 0;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--dim); transition:.16s;
}
.hb96-seg button.on{ background:var(--grad); border-color:transparent; color:#fff }
.hb96-tags{ display:flex; flex-wrap:wrap; gap:8px }
.hb96-tag{
  border:1.5px solid var(--line2); background:#fff; cursor:pointer;
  border-radius:99px; padding:8px 15px;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--tx2);
  transition:.16s; user-select:none;
}
.hb96-tag.on{ border-color:var(--rose); background:#fff0f5; color:var(--rose2) }
.hb96-label{ font-size:13.5px; font-weight:800; margin:20px 0 10px }

/* ═══════════ مرحله‌ها ═══════════ */
.hb96-step{ display:none }
.hb96-step.on{ display:block; animation:hb96in .3s ease-out }
@keyframes hb96in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

@media (max-width:420px){
  #hbAuth{ padding:16px 12px 30px }
  .hb96-card{ padding:28px 20px 22px; border-radius:24px }
  .hb96-brand{ font-size:26px }
  .hb96-h1{ font-size:19px }
  .hb96-code{ gap:7px }
  .hb96-code input{ height:52px; font-size:20px }
}

/*  کسانی که در تنظیمات سیستم «کاهش حرکت» را روشن کرده‌اند، معمولاً
    دلیل پزشکی دارند (سرگیجه، میگرن). قلبِ تپنده و لکه‌های شناور برای
    آن‌ها آزاردهنده است، نه دلپذیر. */
@media (prefers-reduced-motion:reduce){
  #hbAuth *{ animation:none !important; transition:none !important }
  .hb96-bg{ display:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  v96 · معرفی — شش اسلاید، قبل از صفحهٔ ورود
 *
 *  ⚠️ همهٔ قاعده‌ها زیر #hb96Intro محدود شده‌اند. طرح اصلی کلاس‌های
 *  عمومی داشت (.art، .slide، .next) و حتی h1 خالی — که داخل اپ یعنی
 *  هر تیتری در هر صفحه‌ای رنگ و اندازه‌اش عوض می‌شد. محدود کردن به
 *  یک شناسه، این نشتی را کامل می‌بندد.
 * ═══════════════════════════════════════════════════════════════════════════ */

#hb96Intro{
  --tx:#241a2e; --tx2:#5c4f68; --dim:#8d7f9a;
  --grad:linear-gradient(135deg,#ff4d7d 0%,#ff7a59 55%,#ff9f43 100%);
  position:fixed; inset:0; z-index:80; display:none; direction:rtl; text-align:center;
  background:#fff7f8; color:var(--tx);
  font-family:"Vazirmatn",system-ui,sans-serif;
}
#hb96Intro.on{ display:block }
#hb96Intro *{ box-sizing:border-box; margin:0; padding:0 }
body.hb96intro{ overflow:hidden }

#hb96Intro .stage{
  position:relative; height:100%; max-width:480px; margin:0 auto;
  display:flex; flex-direction:column; background:#fff;
  box-shadow:0 0 60px rgba(230,46,99,.08);
}
@media(min-width:520px){ #hb96Intro .stage{ border-inline:1px solid #f3e6ef } }

#hb96Intro .skip{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); left:18px; z-index:20;
  border:0; background:rgba(36,26,46,.06); color:var(--tx2);
  font-family:inherit; font-size:12px; font-weight:700; padding:7px 15px;
  border-radius:99px; cursor:pointer; transition:.15s; backdrop-filter:blur(6px);
}
#hb96Intro .skip:hover{ background:rgba(36,26,46,.12) }
#hb96Intro .brandTag{
  position:absolute; top:calc(18px + env(safe-area-inset-top)); right:20px; z-index:20;
  display:flex; align-items:center; gap:6px; font-weight:900; font-size:15px; direction:ltr;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

#hb96Intro .view{ flex:1; overflow:hidden; position:relative }
#hb96Intro .track{ display:flex; height:100%; transition:transform .55s cubic-bezier(.32,.72,.28,1) }
#hb96Intro .slide{
  flex:0 0 100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:calc(58px + env(safe-area-inset-top)) 26px 12px; user-select:none;
}

/* ── پنل تصویری ── */
#hb96Intro .art{
  position:relative; width:100%; aspect-ratio:1/1.02; max-height:44vh;
  border-radius:34px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 26px 60px rgba(36,26,46,.18);
}
#hb96Intro .glow{
  position:absolute; border-radius:50%; filter:blur(46px); opacity:.55;
  animation:hb96i-drift 9s ease-in-out infinite;
}
@keyframes hb96i-drift{
  0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(22px,-18px) scale(1.12) }
}
#hb96Intro .s1 .art{ background:linear-gradient(150deg,#ffb347 0%,#ff7a45 45%,#ff4d7d 100%) }
#hb96Intro .s1 .g1{ width:230px; height:230px; background:#ffd98a; top:-60px; inset-inline-start:-50px }
#hb96Intro .s1 .g2{ width:200px; height:200px; background:#ff86ac; bottom:-60px; inset-inline-end:-40px; animation-delay:-4s }
#hb96Intro .s2 .art{ background:linear-gradient(160deg,#241b3d 0%,#171129 60%,#2b1a3f 100%) }
#hb96Intro .s2 .g1{ width:220px; height:220px; background:#5b3fa8; top:-50px; inset-inline-end:-50px; opacity:.4 }
#hb96Intro .s2 .g2{ width:180px; height:180px; background:#f2b23e; bottom:-70px; inset-inline-start:-40px; opacity:.3; animation-delay:-3s }
#hb96Intro .s3 .art{ background:linear-gradient(150deg,#16b58a 0%,#0fa37c 55%,#0b8f70 100%) }
#hb96Intro .s3 .g1{ width:230px; height:230px; background:#5fe0bd; top:-60px; inset-inline-start:-60px; opacity:.5 }
#hb96Intro .s3 .g2{ width:190px; height:190px; background:#c8fff0; bottom:-70px; inset-inline-end:-50px; opacity:.25; animation-delay:-5s }
#hb96Intro .s4 .art{ background:linear-gradient(155deg,#2a1758 0%,#4c1d95 50%,#7c3aed 100%) }
#hb96Intro .s4 .g1{ width:240px; height:240px; background:#a855f7; top:-70px; inset-inline-start:-60px; opacity:.45 }
#hb96Intro .s4 .g2{ width:190px; height:190px; background:#f472b6; bottom:-70px; inset-inline-end:-40px; opacity:.4; animation-delay:-4s }
#hb96Intro .s5 .art{ background:linear-gradient(150deg,#38bdf8 0%,#2563eb 55%,#1d4ed8 100%) }
#hb96Intro .s5 .g1{ width:220px; height:220px; background:#7dd3fc; top:-60px; inset-inline-end:-50px; opacity:.5 }
#hb96Intro .s5 .g2{ width:190px; height:190px; background:#bfdbfe; bottom:-70px; inset-inline-start:-50px; opacity:.3; animation-delay:-5s }
#hb96Intro .s6 .art{ background:linear-gradient(150deg,#ff5e8a 0%,#e6356b 50%,#b91c5c 100%) }
#hb96Intro .s6 .g1{ width:230px; height:230px; background:#ffb3c9; top:-60px; inset-inline-start:-50px; opacity:.5 }
#hb96Intro .s6 .g2{ width:200px; height:200px; background:#ffd166; bottom:-70px; inset-inline-end:-50px; opacity:.35; animation-delay:-4s }

/* ── ۱: کارت‌های سوایپ ── */
#hb96Intro .deck{ position:absolute; inset:0; display:grid; place-items:center }
#hb96Intro .dcard{
  position:absolute; width:118px; height:156px; border-radius:22px; background:rgba(255,255,255,.94);
  box-shadow:0 16px 34px rgba(120,30,60,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
#hb96Intro .dcard .ph{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:24px; color:#fff }
#hb96Intro .dcard small{ font-size:11px; font-weight:800; color:#4a3a55 }
#hb96Intro .dcard.c1{ animation:hb96i-cardA 5.4s ease-in-out infinite }
#hb96Intro .dcard.c2{ animation:hb96i-cardB 5.4s ease-in-out infinite; animation-delay:-1.4s }
#hb96Intro .dcard.c3{ z-index:2; animation:hb96i-cardC 5.4s ease-in-out infinite; animation-delay:-2.8s }
@keyframes hb96i-cardA{ 0%,100%{ transform:rotate(-9deg) translate(-26px,6px) } 50%{ transform:rotate(-14deg) translate(-38px,-8px) } }
@keyframes hb96i-cardB{ 0%,100%{ transform:rotate(6deg) translate(24px,-4px) } 50%{ transform:rotate(11deg) translate(38px,-16px) } }
@keyframes hb96i-cardC{ 0%,100%{ transform:rotate(-2deg) translate(0,-12px) scale(1.06) } 50%{ transform:rotate(2deg) translate(0,-24px) scale(1.12) } }
#hb96Intro .loveBadge{
  position:absolute; top:14%; inset-inline-end:14%; width:56px; height:56px; border-radius:19px;
  background:var(--grad); display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(255,60,110,.5); animation:hb96i-beat 1.7s ease-in-out infinite; z-index:3;
}
@keyframes hb96i-beat{
  0%,100%{ transform:scale(1) } 14%{ transform:scale(1.14) } 28%{ transform:scale(1) }
  40%{ transform:scale(1.1) } 52%{ transform:scale(1) }
}
#hb96Intro .pctBadge{
  position:absolute; bottom:12%; inset-inline-start:12%; background:rgba(255,255,255,.94);
  border-radius:14px; padding:8px 14px; font-size:12.5px; font-weight:900; color:#c2431f;
  box-shadow:0 10px 24px rgba(120,30,60,.25); animation:hb96i-bob 3.6s ease-in-out infinite;
}
@keyframes hb96i-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* ── ۲: مچ ── */
#hb96Intro .orbit{ position:absolute; inset:0; display:grid; place-items:center }
#hb96Intro .ring{ position:absolute; border-radius:50%; border:1.5px dashed rgba(242,178,62,.35) }
#hb96Intro .ring.r1{ width:210px; height:210px; animation:hb96i-spin 26s linear infinite }
#hb96Intro .ring.r2{ width:285px; height:285px; animation:hb96i-spin 40s linear infinite reverse; border-color:rgba(255,255,255,.14) }
@keyframes hb96i-spin{ to{ transform:rotate(360deg) } }
#hb96Intro .heartL{ position:absolute; inset-inline-start:calc(50% - 62px); animation:hb96i-meetL 3.4s ease-in-out infinite }
#hb96Intro .heartR{ position:absolute; inset-inline-start:calc(50% + 6px); animation:hb96i-meetR 3.4s ease-in-out infinite }
@keyframes hb96i-meetL{ 0%,100%{ transform:translateX(-8px) } 50%{ transform:translateX(10px) } }
@keyframes hb96i-meetR{ 0%,100%{ transform:translateX(8px) } 50%{ transform:translateX(-10px) } }
#hb96Intro .spark{ position:absolute; color:#f7cd6b; animation:hb96i-twinkle 2.6s ease-in-out infinite }
@keyframes hb96i-twinkle{
  0%,100%{ opacity:.25; transform:scale(.7) rotate(0) } 50%{ opacity:1; transform:scale(1.15) rotate(20deg) }
}
#hb96Intro .matchChip{
  position:absolute; bottom:13%; right:50%; transform:translateX(50%);
  background:linear-gradient(135deg,#f2b23e,#e08e0b); color:#231300;
  font-weight:900; font-size:13px; padding:9px 20px; border-radius:99px;
  box-shadow:0 12px 30px rgba(242,178,62,.45); white-space:nowrap;
}

/* ── ۳: چت ── */
#hb96Intro .chatbox{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:12px; padding:0 13%;
}
#hb96Intro .bub{
  max-width:90%; padding:10px 15px; border-radius:18px; font-size:12.5px; font-weight:700;
  box-shadow:0 10px 24px rgba(0,60,45,.2); animation:hb96i-msg .5s both, hb96i-bob 4s ease-in-out infinite;
}
#hb96Intro .bub.b1{ background:#fff; color:#123f32; border-end-start-radius:6px; align-self:flex-start; animation-delay:.15s,0s }
#hb96Intro .bub.b2{ background:rgba(10,74,58,.85); color:#eafff7; border-end-end-radius:6px; align-self:flex-end; animation-delay:.4s,1s }
#hb96Intro .bub.b3{ background:#fff; color:#123f32; border-end-start-radius:6px; align-self:flex-start; animation-delay:.65s,2s }
@keyframes hb96i-msg{ from{ opacity:0; transform:translateY(16px) scale(.92) } to{ opacity:1; transform:none } }
#hb96Intro .lockBadge{
  position:absolute; top:12%; inset-inline-end:12%; width:52px; height:52px; border-radius:17px;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.5);
  backdrop-filter:blur(4px); display:grid; place-items:center; animation:hb96i-bob 3.8s ease-in-out infinite;
}

/* ── ۴: لایو ── */
#hb96Intro .liveTop{ position:absolute; top:8%; inset-inline-start:9%; inset-inline-end:9%; display:flex; align-items:center; gap:8px }
#hb96Intro .liveBadge{
  display:inline-flex; align-items:center; gap:6px; background:#ff2d55; color:#fff;
  font-size:11px; font-weight:900; padding:5px 12px; border-radius:99px;
  box-shadow:0 8px 20px rgba(255,45,85,.5);
}
#hb96Intro .liveBadge i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:hb96i-blink 1.1s infinite }
@keyframes hb96i-blink{ 50%{ opacity:.25 } }
#hb96Intro .viewChip{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff;
  font-size:11px; font-weight:800; padding:5px 12px; border-radius:99px; backdrop-filter:blur(4px);
}
#hb96Intro .hostWrap{
  position:absolute; top:22%; right:50%; transform:translateX(50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
#hb96Intro .hostAv{
  width:86px; height:86px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; font-size:36px; border:3.5px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 6px rgba(255,255,255,.15),0 18px 40px rgba(0,0,0,.3);
  animation:hb96i-bob 3s ease-in-out infinite;
}
#hb96Intro .hostNm{ color:#fff; font-size:12.5px; font-weight:800; background:rgba(0,0,0,.3); padding:3px 12px; border-radius:99px }
#hb96Intro .seats{ position:absolute; bottom:11%; right:0; left:0; display:flex; justify-content:center; gap:12px }
#hb96Intro .seat{
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14);
  border:2px dashed rgba(255,255,255,.4); display:grid; place-items:center; font-size:19px;
  animation:hb96i-bob 3.4s ease-in-out infinite;
}
#hb96Intro .seat.full{ background:rgba(255,255,255,.92); border-style:solid; border-color:#fff; box-shadow:0 10px 22px rgba(0,0,0,.25) }
#hb96Intro .seat:nth-child(2){ animation-delay:-.8s }
#hb96Intro .seat:nth-child(3){ animation-delay:-1.6s }
#hb96Intro .seat:nth-child(4){ animation-delay:-2.4s }
#hb96Intro .giftFly{ position:absolute; font-size:22px; animation:hb96i-fly 4.2s linear infinite; opacity:0 }
@keyframes hb96i-fly{
  0%{ transform:translateY(0) scale(.7); opacity:0 } 12%{ opacity:1 } 85%{ opacity:1 }
  100%{ transform:translateY(-190px) scale(1.15) rotate(14deg); opacity:0 }
}

/* ── ۵: فید ── */
#hb96Intro .storyRow{ position:absolute; top:9%; right:0; left:0; display:flex; justify-content:center; gap:14px }
#hb96Intro .story{ display:flex; flex-direction:column; align-items:center; gap:5px }
#hb96Intro .story .sr{
  width:54px; height:54px; border-radius:50%; padding:3px;
  background:conic-gradient(#ffe259,#ffa751,#ff5e8a,#845ec2,#ffe259);
  animation:hb96i-spin 7s linear infinite;
}
#hb96Intro .story .sr span{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#fff; font-size:22px }
#hb96Intro .story small{ color:#fff; font-size:10px; font-weight:700 }
#hb96Intro .postCard{
  position:absolute; bottom:7%; left:11%; right:11%;
  background:#fff; border-radius:20px; padding:12px 14px;
  box-shadow:0 20px 44px rgba(10,40,90,.3); animation:hb96i-bob 3.8s ease-in-out infinite;
}
#hb96Intro .postCard .ph2{ display:flex; align-items:center; gap:8px; margin-bottom:7px }
#hb96Intro .postCard .av2{ width:30px; height:30px; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-size:14px }
#hb96Intro .postCard .ph2 b{ font-size:11.5px; color:#22304a }
#hb96Intro .postCard .ph2 small{ display:block; font-size:9px; color:#8d9ab5 }
#hb96Intro .postCard .img2{
  height:56px; border-radius:13px; background:linear-gradient(135deg,#fce4ec,#e3f2fd);
  display:grid; place-items:center; font-size:24px; margin-bottom:8px;
}
#hb96Intro .postCard .acts{ display:flex; gap:13px; font-size:11px; font-weight:800; color:#4a5a75 }
#hb96Intro .postCard .acts .lk{ color:#e6356b; animation:hb96i-beat 1.7s ease-in-out infinite; display:inline-flex; gap:4px; align-items:center }

/* ── ۶: اقتصاد ── */
#hb96Intro .giftBox{ position:absolute; top:24%; right:50%; transform:translateX(50%); text-align:center }
#hb96Intro .giftBox .lid{ font-size:34px; display:block; transform-origin:80% 100%; animation:hb96i-lid 2.6s ease-in-out infinite }
@keyframes hb96i-lid{ 0%,100%{ transform:rotate(0) } 30%{ transform:rotate(-22deg) translateY(-8px) } 55%{ transform:rotate(0) } }
#hb96Intro .giftBox .base{ font-size:64px; display:block; margin-top:-16px; filter:drop-shadow(0 16px 24px rgba(90,10,40,.4)) }
#hb96Intro .coinFly{ position:absolute; font-size:19px; animation:hb96i-fly2 3.4s linear infinite; opacity:0 }
@keyframes hb96i-fly2{
  0%{ transform:translateY(0) scale(.6); opacity:0 } 15%{ opacity:1 }
  100%{ transform:translateY(-150px) scale(1.1); opacity:0 }
}
#hb96Intro .crownChip{
  position:absolute; top:11%; inset-inline-start:10%;
  background:linear-gradient(135deg,#ffd166,#f2a33e); color:#3d2400;
  font-weight:900; font-size:12px; padding:8px 15px; border-radius:14px;
  box-shadow:0 12px 26px rgba(242,163,62,.45); animation:hb96i-bob 3.2s ease-in-out infinite; white-space:nowrap;
}
#hb96Intro .entChip{
  position:absolute; bottom:12%; inset-inline-end:10%; background:rgba(255,255,255,.94);
  color:#8f1440; font-weight:900; font-size:12px; padding:8px 15px; border-radius:14px;
  box-shadow:0 12px 26px rgba(90,10,40,.3); animation:hb96i-bob 3.6s ease-in-out infinite;
  animation-delay:-1.4s; white-space:nowrap;
}
#hb96Intro .lvlBar{ position:absolute; bottom:13%; inset-inline-start:10%; width:38% }
#hb96Intro .lvlBar .lb{ background:rgba(255,255,255,.25); height:9px; border-radius:99px; overflow:hidden }
#hb96Intro .lvlBar .lb i{
  display:block; height:100%; width:0; background:linear-gradient(90deg,#ffd166,#fff);
  border-radius:99px; animation:hb96i-fill 2.6s ease-out .4s both;
}
@keyframes hb96i-fill{ to{ width:78% } }
#hb96Intro .lvlBar small{ color:#fff; font-size:10.5px; font-weight:800 }

/* ── متن ── */
#hb96Intro .txt{ text-align:center; margin-top:22px; flex:0 0 auto }
#hb96Intro .txt h2{ font-size:24px; font-weight:900; line-height:1.5 }
#hb96Intro .txt h2 em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
#hb96Intro .s2 h2 em{ background:linear-gradient(135deg,#f2b23e,#ffd76e); -webkit-background-clip:text; background-clip:text }
#hb96Intro .s3 h2 em{ background:linear-gradient(135deg,#0fa37c,#35d3a8); -webkit-background-clip:text; background-clip:text }
#hb96Intro .s4 h2 em{ background:linear-gradient(135deg,#a855f7,#d8b4fe); -webkit-background-clip:text; background-clip:text }
#hb96Intro .s5 h2 em{ background:linear-gradient(135deg,#2563eb,#60a5fa); -webkit-background-clip:text; background-clip:text }
#hb96Intro .s6 h2 em{ background:linear-gradient(135deg,#e6356b,#ff7aa0); -webkit-background-clip:text; background-clip:text }
#hb96Intro .txt p{ color:var(--tx2); font-size:13.2px; line-height:1.95; margin-top:7px; max-width:310px; margin-inline:auto }
#hb96Intro .featRow{ display:flex; justify-content:center; gap:7px; margin-top:11px; flex-wrap:wrap }
#hb96Intro .featRow span{
  font-size:10.8px; font-weight:700; color:var(--tx2);
  background:#faf2f7; border:1px solid #f3e2ee; border-radius:99px; padding:4px 11px;
}
#hb96Intro .s2 .featRow span{ background:#f5f0fb; border-color:#e8ddf5 }
#hb96Intro .s3 .featRow span{ background:#effaf6; border-color:#d5efe5 }
#hb96Intro .s4 .featRow span{ background:#f6f0fe; border-color:#e7dafb }
#hb96Intro .s5 .featRow span{ background:#eff6ff; border-color:#d8e7fb }
#hb96Intro .s6 .featRow span{ background:#fef0f4; border-color:#fbd8e3 }

/* ── پاورقی ── */
#hb96Intro .foot{ padding:12px 26px calc(20px + env(safe-area-inset-bottom)); flex:0 0 auto }
#hb96Intro .dots{ display:flex; justify-content:center; gap:7px; margin-bottom:14px }
#hb96Intro .dot{ width:8px; height:8px; border-radius:99px; background:#e8dcea; cursor:pointer; transition:.3s; border:0; padding:0 }
#hb96Intro .dot.on{ width:26px; background:var(--grad) }
#hb96Intro .next{
  width:100%; border:0; border-radius:17px; padding:16px;
  font-family:inherit; font-size:15.5px; font-weight:800; color:#fff; cursor:pointer;
  background:var(--grad); background-size:160% 100%;
  box-shadow:0 14px 32px rgba(255,77,125,.32); transition:.2s; position:relative; overflow:hidden;
}
#hb96Intro .next:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(255,77,125,.42) }
#hb96Intro .next:active{ transform:scale(.98) }
#hb96Intro .next::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; right:-80px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  animation:hb96i-shine 3.4s ease-in-out infinite;
}
@keyframes hb96i-shine{ 0%,60%{ right:-80px } 100%{ right:calc(100% + 80px) } }

@media (max-height:720px){
  #hb96Intro .art{ max-height:38vh }
  #hb96Intro .txt h2{ font-size:20px }
  #hb96Intro .txt p{ font-size:12.2px; margin-top:4px }
  #hb96Intro .featRow{ margin-top:8px }
  #hb96Intro .txt{ margin-top:16px }
}
@media (prefers-reduced-motion:reduce){
  #hb96Intro *{ animation:none !important; transition:none !important }
}

/* ═══════════ گوشی‌های باریک ═══════════
   زیر ۳۸۰ پیکسل حاشیه‌های ۳۰ پیکسلی کارت تقریباً یک‌ششم عرض صفحه را
   می‌خورند. کمشان می‌کنیم تا فیلدها نفس بکشند. */
@media (max-width:380px){
  #hbAuth{ padding:18px 12px calc(28px + env(safe-area-inset-bottom)) }
  .hb96-code{ gap:5px }
  .hb96-card{ padding:26px 18px 20px; border-radius:24px }
  .hb96-h1{ font-size:19.5px }
  .hb96-sub{ font-size:12.2px; margin-bottom:18px }
  .hb96-box input{ font-size:14px; padding:13px 40px }
  .hb96-fa input{ padding:13px 14px }
  .hb96-rowb{ gap:6px }
  .hb96-chk, .hb96-link{ font-size:11.8px }
}
@media (max-width:330px){
  .hb96-card{ padding:22px 14px 18px }
  .hb96-brand{ font-size:25px }
  .hb96-mark{ width:72px; height:72px }
}

/* ═══════════ انگلیسی (چپ‌چین) ═══════════
   بیشتر قاعده‌ها از ویژگی‌های منطقی استفاده می‌کنند و خودشان با dir
   برمی‌گردند. این‌ها استثناهایی‌اند که مختصات فیزیکی یا transform
   دارند و باید دستی قرینه شوند. */
#hbAuth[dir="ltr"] .hb96-tabs{ direction:ltr }
#hbAuth[dir="ltr"] .hb96-tabs .ind{ right:auto; left:5px }
#hbAuth[dir="ltr"] .hb96-tabs.signup .ind{ transform:translateX(100%) }
#hbAuth[dir="ltr"] .hb96-fa input{ direction:ltr; text-align:left }
#hbAuth[dir="ltr"] .hb96-back svg{ transform:scaleX(-1) }

#hb96Intro[dir="ltr"]{ direction:ltr }
#hb96Intro[dir="ltr"] .skip{ left:auto; right:18px }
#hb96Intro[dir="ltr"] .ilang{ left:auto; right:104px }
#hb96Intro[dir="ltr"] .brandTag{ right:auto; left:20px }

/*  متن‌های انگلیسی از فارسی بلندترند و در همان عرض می‌شکنند.
    کمی کوچک‌تر و جمع‌تر تا چیدمان کارت به‌هم نریزد. */
#hbAuth[dir="ltr"] .hb96-sub{ font-size:12.5px; line-height:1.75 }
#hbAuth[dir="ltr"] .hb96-legal{ line-height:1.8 }
#hb96Intro[dir="ltr"] .txt p{ line-height:1.7 }
#hb96Intro[dir="ltr"] .featRow span{ font-size:10.4px }

/* ═══════════════════════════════════════════════════════════════════════════
 *  ردیف پایین اتاق لایو — چیدمان مرتب و دکمهٔ هدیه دقیقاً وسط
 *
 *  ردیف سه بخش دارد و با justify-between پخش می‌شود. ولی دکمهٔ میکروفون
 *  فقط وقتی دیده می‌شود که کاربر روی مایک باشد — یعنی یک سمت سه دکمه
 *  دارد و سمت دیگر دو تا. نتیجه: دکمهٔ هدیه ۲۸ پیکسل از مرکز منحرف
 *  می‌شد، و هر بار که کسی روی مایک می‌نشست یا پایین می‌آمد، کل ردیف
 *  تکان می‌خورد.
 *
 *  با دادن عرض مساوی به دو سمت، هدیه همیشه دقیقاً وسط می‌ماند — مستقل
 *  از اینکه چند دکمه در هر طرف دیده می‌شود.
 * ═══════════════════════════════════════════════════════════════════════════ */
#lrBar49{
  gap:10px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important;
}
#lrBar49 > div{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center;
  justify-content:space-evenly;   /* فاصله‌ها یکنواخت، نه چسبیده به لبه */
  gap:6px;
}
#lrBar49 .lr-giftbtn61{ flex:0 0 auto; margin-inline:16px !important }

/* ═══════════════════════════════════════════════════════════════════════════
 *  کارت لایو در پیام خصوصی
 *  به‌جای یک خط متن و لینک، همان چیزی که کاربر انتظار دارد: عکس، نام،
 *  نشان LIVE، و یک ضربه تا ورود به اتاق.
 * ═══════════════════════════════════════════════════════════════════════════ */
.lc97-wrap{
  padding:0 !important; background:transparent !important;
  max-width:232px !important; box-shadow:none !important;
}
.lc97{
  width:232px; border-radius:18px; overflow:hidden; background:#fff;
  border:1px solid #efe4ee; box-shadow:0 10px 26px rgba(36,26,46,.14);
  direction:rtl; font-family:inherit;
}
.lc97.off{ filter:grayscale(1); opacity:.75 }

.lc97-top{ display:flex; align-items:center; gap:7px; padding:9px 10px }
.lc97-av{
  width:26px; height:26px; border-radius:50%; flex:0 0 26px;
  background:#f3e6ef center/cover no-repeat;
  border:1.5px solid #ff7a9a;
}
.lc97-nm{
  flex:1; min-width:0; font-size:12px; font-weight:800; color:#241a2e;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;
}
.lc97-follow{
  flex:0 0 auto; border:0; background:none; cursor:pointer;
  color:#ff2d6f; font-family:inherit; font-size:11.5px; font-weight:900; padding:2px 4px;
}
.lc97-follow.done{ color:#8d7f9a }

.lc97-cover{
  position:relative; height:250px; background:#2a1c33 center/cover no-repeat;
  cursor:pointer;
}
.lc97-cover.empty{ background:linear-gradient(150deg,#ff4d7d,#ff9f43) }
.lc97.off .lc97-cover{ cursor:default }

.lc97-badge{
  position:absolute; top:9px; left:9px;
  display:inline-flex; align-items:center; gap:3px;
  background:#ff2d6f; color:#fff; font-size:10px; font-weight:900;
  padding:3px 9px; border-radius:99px; letter-spacing:.4px;
}
/*  سه میلهٔ کوچک که مثل نوار صدا بالا و پایین می‌روند */
.lc97-badge i{
  width:2px; height:7px; background:#fff; border-radius:1px; display:inline-block;
  animation:lc97bar .9s ease-in-out infinite;
}
.lc97-badge i:nth-child(2){ animation-delay:.15s }
.lc97-badge i:nth-child(3){ animation-delay:.3s }
@keyframes lc97bar{ 0%,100%{ height:4px } 50%{ height:10px } }
.lc97.off .lc97-badge{ background:#6b6470 }
.lc97.off .lc97-badge i{ display:none }

.lc97-play{
  position:absolute; top:50%; right:50%; transform:translate(50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,.34); backdrop-filter:blur(2px);
  display:grid; place-items:center;
}
.lc97.off .lc97-play{ display:none }

@media (prefers-reduced-motion:reduce){ .lc97-badge i{ animation:none; height:7px } }

/* ═══════════════════════════════════════════════════════════════════════════
 *  v98 · پوستهٔ لایو تصویری — تصویر تمام‌صفحه، بقیه شناور روی آن
 * ═══════════════════════════════════════════════════════════════════════════ */
#liveRoom49.vs98{ background:#000 !important }

/*  ویدیو زیر همه‌چیز، تمام‌صفحه. سایر لایه‌ها آن را با display:none
    نگه می‌داشتند تا وقتی track برسد؛ اینجا وقتی رسید، می‌پوشاند. */
#liveRoom49.vs98 #lrVid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000; z-index:0;
}
#liveRoom49.vs98 #lrSeatsWrap,
#liveRoom49.vs98 #lrBar49,
#liveRoom49.vs98 #lrInputRow{ display:none !important }

/*  دو پردهٔ محو، بالا و پایین. بدون این‌ها متن سفید روی تصویر روشن
    ناخواناست — مشکلی که در هر اپ لایوی هست و با همین حل می‌شود. */
#liveRoom49.vs98::before,
#liveRoom49.vs98::after{
  content:""; position:absolute; left:0; right:0; z-index:1; pointer-events:none;
}
#liveRoom49.vs98::before{ top:0; height:160px; background:linear-gradient(#000000a8, transparent) }
#liveRoom49.vs98::after{ bottom:0; height:230px; background:linear-gradient(transparent, #000000bf) }

/* ── چیپ میزبان ── */
#liveRoom49.vs98 .lr-hostchip{
  background:rgba(0,0,0,.42) !important; backdrop-filter:blur(10px);
  border-radius:99px !important; padding:4px 10px 4px 4px !important;
  display:flex; align-items:center; gap:8px;
}
.vs98-foll{
  border:0; cursor:pointer; font-family:inherit; font-weight:900; font-size:11.5px;
  color:#fff; background:#ff2d55; border-radius:99px; padding:5px 12px;
  white-space:nowrap; flex:0 0 auto;
}
.vs98-foll.done{ background:rgba(255,255,255,.2) }

/* ── چت شناور ── */
#liveRoom49.vs98 #lrChat{
  position:relative; z-index:2;
  max-height:34vh; width:78%; overflow-y:auto;
  background:transparent !important;
  -ms-overflow-style:none; scrollbar-width:none;
}
#liveRoom49.vs98 #lrChat::-webkit-scrollbar{ display:none }
#liveRoom49.vs98 .lr-tab{ text-shadow:0 1px 3px rgba(0,0,0,.7) }

/* ── نوار پایین ── */
#vs98Bar{
  position:absolute; z-index:3; left:0; right:0;
  bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:8px; padding:0 12px;
}
.vs98-inp{
  flex:1; min-width:0; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.17); backdrop-filter:blur(8px);
  border-radius:99px; padding:7px 8px 7px 14px;
}
.vs98-field{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:#fff; font-family:inherit; font-size:14px; padding:0;
}
.vs98-field::placeholder{ color:rgba(255,255,255,.65) }
.vs98-em{
  flex:0 0 auto; width:28px; height:28px; border:0; border-radius:50%;
  background:rgba(255,255,255,.28); color:#fff;
  display:grid; place-items:center; cursor:pointer;
}
.vs98-rb{
  position:relative; flex:0 0 auto;
  width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.17); backdrop-filter:blur(8px);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:transform .14s;
}
.vs98-rb:active{ transform:scale(.88) }
.vs98-rb.rose{ color:#ff8fb1 }
.vs98-rb.gift{ color:#ffd166 }
.vs98-rb.co.hot{ background:rgba(255,45,85,.9) }

/*  نشان تعداد درخواست — میزبان باید بدون باز کردن چیزی بفهمد کسی
    منتظر است */
.vs98-bdg{
  position:absolute; top:-3px; inset-inline-end:-3px;
  min-width:17px; height:17px; padding:0 4px; border-radius:99px;
  background:#ff2d55; color:#fff; font-size:10px; font-weight:900;
  font-style:normal; display:grid; place-items:center;
  border:1.5px solid rgba(0,0,0,.35);
}

@media (max-width:360px){
  .vs98-rb{ width:36px; height:36px }
  #vs98Bar{ gap:6px; padding:0 9px }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  اتاق لایو — برداشتن شلوغی
 *
 *  این‌ها را لایه‌های مختلف روی اتاق می‌چسبانند و هیچ‌کدام کاری نمی‌کنند
 *  که جای دیگری نشود انجام داد. نتیجه‌اش صفحه‌ای بود پر از ویجت‌های
 *  کوچک که چشم را از خود لایو دور می‌کرد.
 *
 *  با display:none برداشته می‌شوند، نه با حذف از کد — یعنی هر وقت
 *  خواستی برگردند، همین چند خط را بردار.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* بالا-راست: ویجت ماه (پیشرفت مأموریت) و «ستارهٔ هفته» */
#liveRoom49 #lrTask94,
#liveRoom49 #lrEvt94,
/* پایین صفحه: واترمارک «Hartly Live · Audience ID» */
#liveRoom49 #lrWm94,
/* دکمهٔ قلب و ستون نوارهای رنگی که بازش می‌کرد */
#liveRoom49 #lrQuick94Btn,
#liveRoom49 #lrQuick94,
/*  زنگولهٔ درخواست میزبان و دکمهٔ شناور «درخواست ورود به تصویر».
    این دو کارشان به دکمهٔ 👥 نوار پایین منتقل شد، پس ماندنشان یعنی
    دو راه برای یک کار — که خودش شلوغی است. */
#liveRoom49 #reqHost65,
#liveRoom49 #reqJoin65{
  display:none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  v98 — اصلاح‌ها
 * ═══════════════════════════════════════════════════════════════════════════ */

/*  ⚠️ چرا هیچ‌کدام از دکمه‌های نوار پایین کار نمی‌کردند:
    ستونی که چت داخلش است کلاس z-10 دارد (یعنی z-index:10) و چون
    flex-1 است، تا کف اتاق کشیده می‌شود. نوار من z-index:3 داشت —
    پس یک لایهٔ کاملاً نامرئی دقیقاً روی دکمه‌ها می‌نشست و هر کلیک را
    می‌بلعید. دکمه‌ها سالم بودند؛ کلیک اصلاً به آن‌ها نمی‌رسید.

    ۲۸ انتخاب شد: بالاتر از ستون چت (۱۰) و دکمهٔ لایک (۲۳)، پایین‌تر
    از نوار متحرک هدیه (۳۰) که باید از رویش رد شود. */
#vs98Bar{ z-index:28 !important }

/*  و ستون چت نباید فضای زیر خودش را بگیرد وقتی خالی است */
#liveRoom49.vs98 #lrChat{ pointer-events:auto }

/* دکمهٔ لایک شناور — همان قلبی که ماند */
#liveRoom49 #lrLike94{ display:none !important }

/* ═══════════ بالای اتاق ═══════════
   در حالت تصویری، بالا باید مثل نمونه باشد: چیپ میزبان سمت چپ،
   بیننده‌ها و ✕ سمت راست، و یک ردیف نشان کوچک زیرش. دکمه‌های
   «مأموریت» و «اشتراک» از بالا برداشته شدند — اشتراک در نوار پایین
   هست و دو جا بودنش فقط شلوغی است. */
#liveRoom49.vs98 .lr-barbtn[onclick*="openRoomTasks68"],
#liveRoom49.vs98 .lr-barbtn[onclick*="openShareSheet69"]{ display:none !important }

/* ✕ خروج — ساده و بدون قاب، مثل نمونه */
#liveRoom49.vs98 .lr-barbtn[onclick*="openExitSheet68"]{
  background:transparent !important; border:0 !important;
  width:34px !important; height:34px !important;
}

/* نشان‌های کوچک بالا: تیره، جمع، خوانا روی هر تصویری */
#liveRoom49.vs98 .lr-pill{
  background:rgba(0,0,0,.42) !important;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14) !important;
  font-size:11px !important; padding:4px 10px !important;
  border-radius:99px !important;
}

/* نوار بیننده‌ها (عکس‌های کوچک کنار شمارنده) */
#liveRoom49.vs98 #lrVw94{
  background:rgba(0,0,0,.42) !important;
  backdrop-filter:blur(8px); border-radius:99px !important;
}

/*  ردیف دوم نشان‌ها کمی جمع‌تر تا با ردیف اول یک بلوک دیده شود */
#liveRoom49.vs98 #lrStage{ margin-top:10px !important }

/* ═══════════════════════════════════════════════════════════════════════════
 *  نوار «برای شنیدن صدا بزن»
 *
 *  این یکی برخلاف بقیه تزئینی نبود — مرورگرها پخش خودکارِ صدادار را
 *  بلاک می‌کنند و تا کاربر یک ژست نزند، صدا نمی‌آید.
 *
 *  ولی همان لایه (v72) از قبل قانون بهتری دارد: هر لمسی داخل اتاق —
 *  اسکرول، چت، هدیه، هر چیزی — صدا را باز می‌کند. پس این نوار فقط
 *  برای کسی لازم بود که وارد لایو شود و به هیچ‌جای صفحه دست نزند.
 *
 *  برداشته شد، ولی خودِ باز کردن صدا دست‌نخورده ماند: کاربر به‌محض
 *  اولین لمس صدا را می‌شنود، بدون اینکه چیزی روی صفحه‌اش بیاید.
 * ═══════════════════════════════════════════════════════════════════════════ */
#audioUnlock72{ display:none !important }

/* ═══════════════════════════════════════════════════════════════════════════
 *  بالای اتاق — استک بیننده‌ها مثل تیک‌تاک
 *
 *  لایهٔ v94 از قبل تا سه آواتار گرد به‌علاوهٔ شمارنده می‌سازد، ولی کنار
 *  پیل قدیمی «👁 تعداد» گم می‌شد و ظاهرش هم ساده بود. پیل قدیمی کنار
 *  رفت و این یکی بزرگ‌تر و خواناتر شد.
 * ═══════════════════════════════════════════════════════════════════════════ */
#liveRoom49.vs98 #lrVw94{
  display:flex; align-items:center; gap:0;
  background:rgba(0,0,0,.42) !important; backdrop-filter:blur(10px);
  border-radius:99px !important; padding:3px 3px 3px 9px;
  direction:ltr;   /* آواتارها از چپ روی هم می‌افتند، مثل نمونه */
}
#liveRoom49.vs98 #lrVw94 .v94av{
  width:29px !important; height:29px !important;
  border:2px solid rgba(255,255,255,.9) !important;
  margin-left:-10px !important; margin-right:0 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  cursor:pointer; flex:0 0 auto;
}
#liveRoom49.vs98 #lrVw94 .v94av:first-child{ margin-left:0 !important }
#liveRoom49.vs98 #lrVw94 .v94cnt{
  background:transparent !important; backdrop-filter:none;
  color:#fff !important; font-size:13px !important; font-weight:900 !important;
  padding:0 9px 0 7px !important; margin:0 !important;
}

/*  وقتی هنوز کسی نیامده، فقط عدد می‌ماند — نباید مثل یک قرص خالی
    وسط صفحه بنشیند */
#liveRoom49.vs98 #lrVw94:not(:has(.v94av)){ padding:3px 4px }

/* ═══════════════════════════════════════════════════════════════════════════
 *  v99 · حاضران، آتش، سطح ستاره، جدول اتاق‌ها
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── آتش دابل‌تپ ── */
.fire99{
  position:fixed; z-index:60; pointer-events:none;
  font-size:26px; opacity:0;
  animation:fire99up 1.4s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fire99up{
  0%{ opacity:0; transform:translateY(0) scale(.5) }
  15%{ opacity:1; transform:translateY(-14px) scale(1.15) }
  70%{ opacity:1 }
  100%{ opacity:0; transform:translateY(-150px) scale(.9) rotate(12deg) }
}
@media (prefers-reduced-motion:reduce){ .fire99{ animation-duration:.4s } }

/* ── نشان سطح ستاره ── */
#star99{
  display:inline-flex; flex:0 0 auto; align-items:center; gap:7px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:99px; padding:4px 11px 4px 7px; cursor:pointer;
  font-family:inherit; direction:rtl;
}
#star99.pop{ animation:star99pop .5s cubic-bezier(.2,.9,.3,1.4) }
@keyframes star99pop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.14) } 100%{ transform:scale(1) } }
.s99-star{ font-size:15px; color:#6b6470; line-height:1; transition:color .3s }
.s99-star.on{ color:#ffd166; text-shadow:0 0 10px rgba(255,209,102,.6) }
.s99-star.on.lv3{ color:#ff9f43 }
.s99-star.on.lv4{ color:#ff6b6b }
.s99-star.on.lv5{ color:#ff2d6f; text-shadow:0 0 14px rgba(255,45,111,.8) }
.s99-lv{ color:#fff; font-size:11px; font-weight:900; white-space:nowrap }
.s99-bar{
  width:46px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.18); overflow:hidden; flex:0 0 auto;
}
.s99-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#ffd166,#ff2d6f); transition:width .5s ease;
}
.s99-n{ color:#ffffff9e; font-size:9.5px; font-weight:800; direction:ltr; white-space:nowrap }

/* ── فهرست حاضران ── */
.rs99-row{
  display:flex; align-items:center; gap:10px; padding:9px 4px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.rs99-row:last-child{ border-bottom:0 }
.rs99-av{
  width:36px; height:36px; border-radius:50%; flex:0 0 36px; overflow:hidden;
  background:#2b2140; display:grid; place-items:center;
  color:#fff; font-size:14px; font-weight:900;
  border:1.5px solid rgba(255,255,255,.18);
}
.rs99-av.host{ border-color:#ffd166; box-shadow:0 0 0 2px rgba(255,209,102,.25) }
.rs99-av img{ width:100%; height:100%; object-fit:cover }
.rs99-nm{ flex:1; min-width:0; color:#fff; font-size:13px; font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rs99-tag{
  flex:0 0 auto; background:rgba(255,209,102,.16); color:#ffd166;
  font-size:10px; font-weight:900; padding:3px 9px; border-radius:99px;
}

/* ── جدول جهانی اتاق‌ها ── */
.tr99-row{
  display:flex; align-items:center; gap:9px; padding:9px 2px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tr99-rank{
  width:22px; flex:0 0 22px; text-align:center;
  color:#ffffff66; font-size:12px; font-weight:900; direction:ltr;
}
.tr99-rank.r1{ color:#ffd166 } .tr99-rank.r2{ color:#d7d7e0 } .tr99-rank.r3{ color:#e0a06a }
.tr99-av{
  width:38px; height:38px; border-radius:12px; flex:0 0 38px; overflow:hidden;
  background:#2b2140; display:grid; place-items:center; color:#fff; font-weight:900;
}
.tr99-av img{ width:100%; height:100%; object-fit:cover }
.tr99-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.tr99-mid b{ color:#fff; font-size:12.5px; font-weight:900;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tr99-mid small{ color:#ffffff66; font-size:10px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tr99-stat{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.tr99-stat i{ font-style:normal; font-size:10px; font-weight:900; direction:ltr }
.tr99-lv{ color:#ffd166 }
.tr99-g{ color:#ff8fb1 }

/*  ردیف دوم نشان‌ها جایش را به ستاره می‌دهد.
    ⚠️ این قانون در v99 به «.vs98» محدود شده بود، و vs98 فقط در لایو
    «تصویری» روی اتاق می‌نشیند. یعنی کاپ و الماس و قلب در لایو صوتی
    اصلاً برداشته نشده بودند — درست همان چیزی که قرار بود برود.
    حالا هر جا نشان ستاره باشد، آن ردیف قدیمی می‌رود؛ و ستاره فقط
    داخل اتاق لایو ساخته می‌شود، پس جای دیگری را خراب نمی‌کند. */
#liveRoom49 #star99 ~ .lr-pill{ display:none }

/* ═══════════════════════════════════════════════════════════════
 *  v100 · نشان آتش
 *  کنار ستاره می‌نشیند و عمداً هم‌شکل اوست، چون هر دو «حال اتاق» را
 *  می‌گویند — یکی با پول، یکی با شور مردم.
 * ═══════════════════════════════════════════════════════════════ */
#fire100{
  display:inline-flex; flex:0 0 auto; align-items:center; gap:5px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:99px; padding:4px 10px; cursor:pointer;
  font-family:inherit; direction:ltr;
}
#fire100.hit{ animation:fire100hit .35s cubic-bezier(.2,.9,.3,1.5) }
@keyframes fire100hit{
  0%{ transform:scale(1) } 40%{ transform:scale(1.16) } 100%{ transform:scale(1) }
}
.f100-i{ font-size:13px; line-height:1 }
.f100-n{ color:#fff; font-size:11px; font-weight:900; white-space:nowrap }
.f100-r{
  color:#ffb37a; font-size:9.5px; font-weight:900; white-space:nowrap;
  background:rgba(255,140,60,.16); border-radius:99px; padding:1px 6px;
}

/*  دو نشان کنار هم روی گوشی باریک جا نشوند: عددِ پیشرفت ستاره اول
    می‌رود، چون نوار رنگی همان را نشان می‌دهد. */
@media (max-width:359px){ .s99-n{ display:none } }

.hot100-hint{
  margin:0 0 10px; padding:9px 11px; border-radius:12px;
  background:rgba(255,140,60,.10); border:1px solid rgba(255,140,60,.22);
  color:#ffd0ad; font-size:11px; font-weight:800; line-height:1.75;
}
.tr99-h{ color:#ff9f43 }
.tr99-v{ color:#ffffff7a }
.tr99-row.me100{
  background:rgba(255,140,60,.10); border-radius:12px; cursor:default;
}

/* ═══════════════════════════════════════════════════════════════
 *  v101 · لایو تصویری
 * ═══════════════════════════════════════════════════════════════ */

/*  ── چت زیر نوار پایین می‌رفت ──
    در لایو صوتی، نوار دکمه‌ها (#lrBar49) داخل همان ستونی است که چت در
    آن است؛ پس چت همیشه بالای نوار تمام می‌شود. در پوستهٔ تصویری آن نوار
    پنهان است و نوار تازه (#vs98Bar) به‌صورت شناور روی پایین صفحه نشسته.
    ستون چت از این خبر نداشت و تا کف صفحه پایین می‌رفت — آخرین پیام‌ها
    دقیقاً زیر فیلد تایپ و دکمه‌ها می‌افتادند.
    حالا ستون به اندازهٔ ارتفاع نوار (۴۴ + ۱۰ فاصله + حاشیهٔ امن) از
    پایین فاصله دارد. */
#liveRoom49.vs98 > .flex-1{
  padding-bottom:calc(64px + env(safe-area-inset-bottom)) !important;
}

/* ── بالای اتاق: فقط در حالت تصویری و چندنفرهٔ تصویری ── */
#liveRoom49:not(.tb101) #hc101,
#liveRoom49:not(.tb101) #cty101{ display:none !important }

#liveRoom49.tb101 .lr-hostchip{
  background:rgba(0,0,0,.42) !important; backdrop-filter:blur(10px);
  border-radius:99px !important; padding:3px 4px 3px 4px !important;
  display:flex; align-items:center; gap:7px; max-width:62%;
}
#liveRoom49.tb101 .lr-hostchip > div:nth-child(2){ min-width:0 }
#liveRoom49.tb101 .lr-hostchip > div:nth-child(2) > p:first-child{
  max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#liveRoom49.tb101 #lrHostId{ display:none !important }
#hc101{
  margin:1px 0 0; display:flex; align-items:center; gap:3px;
  color:#fff; font-size:10.5px; line-height:1; direction:ltr; justify-content:flex-end;
}
#hc101 b{ font-weight:900 }

/*  دکمهٔ دنبال‌کردن: دایرهٔ سفید با «+»، مثل نمونه */
#liveRoom49.tb101 #lrFollow94,
#liveRoom49.tb101 .vs98-foll{
  width:30px !important; height:30px !important; min-width:30px; padding:0 !important;
  border-radius:50% !important; border:0 !important;
  background:#fff !important; display:grid !important; place-items:center;
  font-size:0 !important; box-shadow:none !important; flex:0 0 30px;
}
#liveRoom49.tb101 #lrFollow94:not(.off) svg{ display:none }
#liveRoom49.tb101 #lrFollow94:not(.off)::before,
#liveRoom49.tb101 .vs98-foll:not(.done)::before{
  content:"+"; color:#18181b; font-size:22px; font-weight:700; line-height:1; margin-top:-2px;
}
#liveRoom49.tb101 #lrFollow94.off,
#liveRoom49.tb101 .vs98-foll.done{ background:rgba(255,255,255,.18) !important }
#liveRoom49.tb101 .vs98-foll.done::before{ content:"✓"; color:#6ee7b7; font-size:14px; font-weight:900 }

/*  ✕ خروج */
#liveRoom49.tb101 .lr-barbtn[onclick*="openExitSheet68"]{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}

/*  🏆 رتبهٔ این ساعت — طلایی، مثل نمونه */
#rk101{
  display:inline-flex; flex:0 0 auto; align-items:center; gap:4px;
  background:linear-gradient(90deg,#f59e0b,#f97316 55%,#ec4899);
  border-radius:99px; padding:4px 11px 4px 8px; cursor:pointer;
  color:#fff; direction:rtl; box-shadow:0 2px 10px rgba(236,72,153,.28);
}
#rk101 b{ font-size:11.5px; font-weight:900; direction:ltr }
#rk101 span{ font-size:10.5px; font-weight:800; opacity:.95; white-space:nowrap }
#rk101.top3{ box-shadow:0 0 0 1.5px #fde68a, 0 2px 12px rgba(251,191,36,.5) }

/*  ردیف دوم در حالت تصویری: سه نشان کنار هم، بدون شکستن خط */
#liveRoom49.tb101 #star99{ padding:4px 10px 4px 7px; gap:5px }
#liveRoom49.tb101 #star99 .s99-bar{ width:34px }
#liveRoom49.tb101 #star99 .s99-n{ display:none }
#liveRoom49.tb101 #star99,
#liveRoom49.tb101 #fire100{ background:rgba(0,0,0,.42) }

/*  📍 کشور */
#cty101{ padding:6px 16px 0; display:flex }
#cty101 .c101{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.42); backdrop-filter:blur(8px);
  border-radius:99px; padding:4px 11px 4px 9px;
  color:#fff; font-size:11px;
}
#cty101 .c101 b{ font-weight:800 }

@media (max-width:359px){
  #rk101 span{ display:none }
  #liveRoom49.tb101 #star99 .s99-bar{ display:none }
}

/* ═══════════════════════════════════════════════════════════════
 *  v102 · نشان ستاره، مهمان، دنبال‌کردن
 * ═══════════════════════════════════════════════════════════════ */

/* ── ستاره: نشان واقعی، نه متن «No level» ── */
#star99 .s102{ display:inline-flex; line-height:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) }
#star99 .s102 svg{ display:block; width:24px; height:24px }
#star99 .s99-lv{ display:none }
#star99.lv1 .s102{ filter:drop-shadow(0 0 6px rgba(251,191,36,.55)) }
#star99.lv2 .s102{ filter:drop-shadow(0 0 7px rgba(249,115,22,.6)) }
#star99.lv3 .s102{ filter:drop-shadow(0 0 8px rgba(229,56,59,.65)) }
#star99.lv4 .s102{ filter:drop-shadow(0 0 9px rgba(214,31,128,.7)) }
#star99.lv5 .s102{ filter:drop-shadow(0 0 11px rgba(168,85,247,.85)); animation:s102glow 2.2s ease-in-out infinite }
@keyframes s102glow{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.1) } }
/*  نوار پیشرفت هم‌رنگ سطح */
#star99.lv0 .s99-bar i{ background:linear-gradient(90deg,#e5e7eb,#9ca3af) }
#star99.lv1 .s99-bar i{ background:linear-gradient(90deg,#fde68a,#f59e0b) }
#star99.lv2 .s99-bar i{ background:linear-gradient(90deg,#fdba74,#f97316) }
#star99.lv3 .s99-bar i{ background:linear-gradient(90deg,#fca5a5,#e5383b) }
#star99.lv4 .s99-bar i{ background:linear-gradient(90deg,#f9a8d4,#d61f80) }
#star99.lv5 .s99-bar i{ background:linear-gradient(90deg,#c4b5fd,#7c3aed) }
#star99 .s99-bar{ min-width:34px }
#star99.lv5{ border-color:rgba(196,181,253,.55) !important }
@media (prefers-reduced-motion:reduce){ #star99.lv5 .s102{ animation:none } }

/* ── کارت‌های «بیننده‌های برتر» سمت راست: شبیه مهمان بودند و گمراه‌کننده ── */
#lrCards94{ display:none !important }

/* ── کاشی مهمان: سمت راست، قابل کشیدن ── */
#lrGuestVid65.g102{
  left:auto !important; right:10px !important; top:128px;
  width:29% !important; max-width:150px; aspect-ratio:3/4;
  border-radius:16px !important; border:2px solid rgba(255,255,255,.85) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.55) !important;
  z-index:24 !important; touch-action:none; cursor:grab;
  transition:box-shadow .2s, transform .2s;
}
#lrGuestVid65.g102.drag{ cursor:grabbing; transform:scale(1.04); box-shadow:0 16px 38px rgba(0,0,0,.7) !important }
#lrGuestVid65.g102 video{ pointer-events:none }
.g102-ctl{ position:absolute; inset:0; pointer-events:none }
.g102-nm{
  position:absolute; left:0; right:0; bottom:0; padding:14px 7px 6px;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
  color:#fff; font-size:11px; font-weight:900; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.g102-ib{
  position:absolute; top:6px; pointer-events:auto;
  width:28px; height:28px; border-radius:50%; border:0; padding:0;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
}
.g102-ib svg{ width:15px; height:15px }
.g102-ib{ left:6px }
.g102-ib.x{ left:auto; right:6px; width:24px; height:24px }

/* ── دکمهٔ دنبال‌کردن: بعد از زدن، جمع می‌شود و می‌رود ── */
#lrFollow94.f102-pop, .vs98-foll.f102-pop{ animation:f102pop .35s ease }
@keyframes f102pop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.25) } 100%{ transform:scale(0) } }
#liveRoom49 #lrFollow94.f102-done:not(.f102-pop),
#liveRoom49 .vs98-foll.f102-done:not(.f102-pop){ display:none !important }

/* ── شیت مهمان برای بیننده — هم‌خانوادهٔ شیت میزبان ── */
#g102Sh{
  position:fixed; inset:0; z-index:101; background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center;
}
#g102Sh .g102-sheet{
  width:100%; max-width:430px; background:#fff; border-radius:26px 26px 0 0;
  overflow:hidden; display:flex; flex-direction:column; animation:stkUp74 .28s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.g102-body{ padding:6px 22px 26px; display:flex; flex-direction:column; align-items:center; text-align:center }
.g102-pair{ display:flex; align-items:center; gap:10px; margin:2px 0 16px }
.g102-av{
  position:relative; width:64px; height:64px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:linear-gradient(135deg,#fda4af,#fb7185);
  box-shadow:0 0 0 3px #fff, 0 6px 16px rgba(244,63,94,.28);
}
.g102-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.g102-av b{ color:#fff; font-size:24px; font-weight:900 }
.g102-av.me{ background:linear-gradient(135deg,#c4b5fd,#8b5cf6); box-shadow:0 0 0 3px #fff, 0 6px 16px rgba(139,92,246,.3) }
.g102-link{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#fb7185,#f97316); box-shadow:0 4px 12px rgba(249,115,22,.35);
}
.g102-link svg{ width:18px; height:18px }
.g102-pair.pending .g102-av.me{ animation:g102pulse 1.4s ease-in-out infinite }
.g102-pair.accepted .g102-link{ background:linear-gradient(135deg,#34d399,#16a34a) }
.g102-pair.off{ filter:grayscale(1); opacity:.55 }
@keyframes g102pulse{
  0%,100%{ box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(139,92,246,.0) }
  50%{ box-shadow:0 0 0 3px #fff, 0 0 0 9px rgba(139,92,246,.28) }
}
.g102-t{ margin:0 0 6px; font-size:16px; font-weight:900; color:#1c1917 }
.g102-s{ margin:0 0 18px; font-size:12.5px; font-weight:700; color:#78716c; line-height:1.8; max-width:320px }
.g102-btns{ display:flex; flex-direction:column; gap:9px; width:100% }
.g102-btn{
  width:100%; border:0; border-radius:16px; padding:14px 16px; cursor:pointer;
  font-family:inherit; font-weight:900; font-size:14.5px;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.g102-btn.go{ color:#fff; background:linear-gradient(135deg,#fb7185,#f97316); box-shadow:0 10px 22px rgba(249,115,22,.32) }
.g102-btn.go:active{ transform:scale(.98) }
.g102-btn.flip{ color:#fff; background:#1c1917 }
.g102-btn.ghost{ color:#e11d48; background:#fff1f2 }
.g102-btn[disabled]{ color:#a8a29e; background:#f5f5f4; cursor:default }

/* آواتار ردیف‌های شیت میزبان، با نام واقعی */
.gl75-item .av102{
  position:relative; width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:grid; place-items:center; background:linear-gradient(135deg,#fda4af,#fb7185);
}
.gl75-item .av102 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0 }
.gl75-item .av102 b{ color:#fff; font-weight:900; font-size:17px }

/* دکمهٔ چرخش دوربین میزبان در نوار پایین */
.vs98-rb.flip102 svg{ width:21px; height:21px }

/* ═══════════════════════════════════════════════════════════════
 *  v103 · دنبال‌کردن، کاپ متحرک، کاور، نوار چت صوتی
 * ═══════════════════════════════════════════════════════════════ */

/* ── یک دکمهٔ دنبال‌کردن برای همهٔ حالت‌ها؛ قدیمی‌ها کنار رفتند ── */
/*  ⚠️ باید دست‌کم هم‌وزن قانون tb101 در v101 باشد، وگرنه در لایو تصویری
    دو دکمه کنار هم می‌آمد — تست همین را گرفت. */
#liveRoom49 #lrFollow94, #liveRoom49 .vs98-foll,
#liveRoom49.tb101 #lrFollow94, #liveRoom49.tb101 .vs98-foll{ display:none !important }
#fol103{
  width:28px; height:28px; min-width:28px; flex:0 0 28px; padding:0; border:0; cursor:pointer;
  border-radius:50%; background:#fff; display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.3); transition:background .2s, transform .15s;
  margin-inline-start:2px;
}
#fol103.on{ background:rgba(255,255,255,.2); box-shadow:none }
#fol103:active{ transform:scale(.88) }
#fol103.pop{ animation:fol103pop .38s cubic-bezier(.2,.9,.3,1.5) }
@keyframes fol103pop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.3) } 100%{ transform:scale(1) } }
/*  لایو صوتی: چیپ میزبان باید جا برای دکمه داشته باشد */
#liveRoom49:not(.tb101) .lr-hostchip{ display:flex; align-items:center; gap:8px }

/* ── 🏆 کاپ «این ساعت»: متحرک، در همهٔ حالت‌ها ── */
#rk101{ position:relative; overflow:hidden; isolation:isolate }
#rk101 .rk-cup{
  display:inline-flex; font-style:normal; transform-origin:50% 88%;
  animation:rk103swing 2.6s ease-in-out infinite;
  filter:drop-shadow(0 0 3px rgba(255,246,213,.8));
}
@keyframes rk103swing{
  0%,62%,100%{ transform:rotate(0) scale(1) }
  70%{ transform:rotate(-14deg) scale(1.12) }
  78%{ transform:rotate(12deg) scale(1.12) }
  86%{ transform:rotate(-6deg) scale(1.05) }
}
/*  برق طلایی که از روی نشان رد می‌شود */
#rk101::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:rk103shine 3.2s ease-in-out infinite;
}
@keyframes rk103shine{ 0%,55%{ left:-60% } 85%,100%{ left:130% } }
#rk101.first{ animation:rk103glow 1.8s ease-in-out infinite }
@keyframes rk103glow{
  0%,100%{ box-shadow:0 0 0 1.5px #fde68a, 0 2px 12px rgba(251,191,36,.45) }
  50%{ box-shadow:0 0 0 1.5px #fff7cc, 0 2px 20px rgba(251,191,36,.85) }
}
@media (prefers-reduced-motion:reduce){
  #rk101 .rk-cup, #rk101::after, #rk101.first{ animation:none }
}

/* ── کاور در صفحهٔ شروع لایو ── */
#goLive51 .gl-cover.c103{ position:relative; cursor:pointer; overflow:hidden }
#goLive51 .gl-cover.c103 img{ width:100%; height:100%; object-fit:cover; display:block }
#goLive51 .gl-cover .c103-lab{
  position:absolute; left:0; right:0; bottom:0; padding:3px 0 4px;
  background:rgba(0,0,0,.55); color:#fff; font-size:10px; font-weight:900; text-align:center;
  pointer-events:none;
}
#goLive51 .gl-cover.busy{ opacity:.6 }
#roomSet51 .rs-cover.c103{
  display:inline-block; width:44px; height:44px; border-radius:10px; font-size:0;
  background-size:cover; background-position:center; vertical-align:middle;
}
#roomSet51 .rs-row:has(.rs-cover){ cursor:pointer }


/* ═══════════════════════════════════════════════════════════════
 *  v104 · نوار چت روشن و گرم، کاشی مهمانِ صوتی
 * ═══════════════════════════════════════════════════════════════ */

/* ── نوار چت لایو صوتی: سفید با طلایی‌نارنجی، هم‌رنگ دکمه‌های اپ ── */
#chatBar70.cb103{
  flex-wrap:wrap; column-gap:8px; row-gap:10px;
  background:#fff; border-top:0;
  border-radius:24px 24px 0 0;
  box-shadow:0 -12px 34px rgba(0,0,0,.28);
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  transition:bottom .12s ease;
}
#chatBar70.cb103::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,#fde68a,#f59e0b,#f97316,#fb7185);
}
#chatBar70.cb103 .cb-ic{
  width:40px; height:40px; border-radius:50% !important;
  background:#fff7ed !important; box-shadow:inset 0 0 0 1.5px #fed7aa;
}
#chatBar70.cb103 .cb-ic svg{ stroke:#f97316 }
#chatBar70.cb103 .cb-ic.emo-btn svg{ stroke:#f59e0b }
#chatBar70.cb103.emo .cb-ic.emo-btn{ background:#fef3c7 !important; box-shadow:inset 0 0 0 2px #f59e0b }
#chatBar70.cb103 .cb-ic:last-child{ background:#f5f5f4 !important; box-shadow:none }
#chatBar70.cb103 .cb-ic:last-child svg{ stroke:#a8a29e }
#chatBar70.cb103 .cb-in{
  flex:1 1 0; min-width:0;
  background:#fafaf9 !important; border:1.5px solid #fde68a;
  padding:10px 15px !important; transition:border-color .2s, box-shadow .2s;
}
#chatBar70.cb103 .cb-in:focus-within{ border-color:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.14) }
#chatBar70.cb103 input{ width:100%; min-width:0; color:#1c1917 !important; font-weight:700 }
#chatBar70.cb103 input::placeholder{ color:#a8a29e }
#chatBar70.cb103 .cb-send{
  width:42px; height:42px; opacity:.4; transform:scale(.92);
  background:linear-gradient(135deg,#fbbf24,#f97316) !important;
  transition:opacity .2s, transform .2s, box-shadow .2s;
}
#chatBar70.cb103 .cb-send.on{ opacity:1; transform:scale(1); box-shadow:0 6px 16px rgba(249,115,22,.4) }

/*  جعبهٔ ایموجی — از دکمهٔ 😊 باز می‌شود */
#chatBar70 .cb104-pop{
  flex:1 0 100%; display:grid; grid-template-columns:repeat(8, 1fr); gap:4px;
  max-height:150px; overflow-y:auto; padding:4px 2px 6px;
  border-bottom:1px solid #f5f5f4; animation:cb104in .2s ease;
}
@keyframes cb104in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
#chatBar70 .cb104-pop button{
  border:0; background:none; cursor:pointer; font-size:24px; line-height:1;
  height:40px; border-radius:12px; transition:background .15s, transform .12s;
}
#chatBar70 .cb104-pop button:active{ background:#fff7ed; transform:scale(.88) }
#chatBar70 .cb104-pop button.sent{ animation:cb104tap .35s ease }
@keyframes cb104tap{ 40%{ transform:scale(1.3) } }
#chatBar70 .cb103-q{ display:none !important }

/* ── کاشی مهمانِ صوتی: آواتار و حلقهٔ صحبت ── */
#lrGuestVid65.g102.aud{
  background:radial-gradient(120% 90% at 50% 30%, #3b2a5c 0%, #1a1128 70%) !important;
}
.g104-av{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.g104-ring{
  position:relative; width:62%; aspect-ratio:1; border-radius:50%; padding:3px;
  background:linear-gradient(135deg,#fbbf24,#f97316,#ec4899);
  transition:box-shadow .15s;
}
.g104-pic{
  width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:#2b2140; border:2px solid #1a1128;
}
.g104-pic img{ width:100%; height:100%; object-fit:cover }
.g104-pic b{ color:#fff; font-size:26px; font-weight:900 }
.g104-mic{
  position:absolute; left:50%; top:calc(50% + 31% - 4px); transform:translateX(-50%);
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:#22c55e; box-shadow:0 0 0 2px #1a1128;
}
#lrGuestVid65.speaking .g104-ring{ animation:g104talk .9s ease-in-out infinite }
#lrGuestVid65.speaking:not(.aud){ box-shadow:0 0 0 3px #22c55e, 0 10px 28px rgba(0,0,0,.55) !important }
@keyframes g104talk{
  0%,100%{ box-shadow:0 0 0 0 rgba(251,191,36,.55) }
  50%{ box-shadow:0 0 0 9px rgba(251,191,36,0) }
}
.g104-tools{ position:absolute; top:6px; left:6px; display:flex; gap:5px; pointer-events:auto }
.g104-tools .g102-ib{ position:static }
.g102-ib.cam.on{ background:rgba(244,63,94,.8) }
/*  نشان میکروفون روی گوشهٔ حلقه، نه روی نام */
.g104-av{ padding-bottom:18px }
.g104-mic{ left:auto; top:auto; right:-2px; bottom:-2px; transform:none }

/* ═══════════════════════════════════════════════════════════════
 *  v106 · شیت میزبان با شناسهٔ خودش، و کارت دعوت
 * ═══════════════════════════════════════════════════════════════ */

/*  شیت Guest live میزبان. همان ظاهر v75، با شناسهٔ دیگر — چون شنوندهٔ
    زندهٔ v75 هر بار که چیزی عوض می‌شد، محتوای #glPanel75 را با
    ردیف‌های بی‌نام خودش («کاربر»، «؟») بازنویسی می‌کرد. */
#glPanel102{ position:fixed; inset:0; z-index:101; background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center }
#glPanel102 .gl75-sheet{ width:100%; max-width:430px; height:64%; background:#fff;
  border-radius:26px 26px 0 0; overflow:hidden; display:flex; flex-direction:column;
  animation:stkUp74 .28s ease }
#glPanel102 .gl75-ok.inv106{ background:linear-gradient(135deg,#fbbf24,#f97316) }
#glPanel102 .gl75-ok[disabled]{ opacity:.6 }

/* ── کارت دعوت، برای کسی که دعوت شده ── */
#inv106{
  position:fixed; inset:0; z-index:102; background:rgba(0,0,0,.55);
  display:grid; place-items:center; padding:24px; animation:inv106fade .2s ease;
}
@keyframes inv106fade{ from{ opacity:0 } to{ opacity:1 } }
.inv106-card{
  width:100%; max-width:330px; background:#fff; border-radius:26px; overflow:hidden;
  padding:0 20px 18px; text-align:center; position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.45); animation:inv106pop .32s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes inv106pop{ from{ transform:scale(.85); opacity:0 } to{ transform:none; opacity:1 } }
.inv106-card::before{
  content:""; display:block; height:74px; margin:0 -20px;
  background:linear-gradient(135deg,#fb7185,#f97316);
}
.inv106-av{
  width:76px; height:76px; border-radius:50%; margin:-40px auto 10px; overflow:hidden;
  display:grid; place-items:center; background:linear-gradient(135deg,#fbbf24,#f97316);
  box-shadow:0 0 0 4px #fff, 0 8px 18px rgba(249,115,22,.35); position:relative;
  animation:inv106ring 1.6s ease-in-out infinite;
}
.inv106-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.inv106-av b{ color:#fff; font-size:28px; font-weight:900 }
@keyframes inv106ring{
  0%,100%{ box-shadow:0 0 0 4px #fff, 0 0 0 4px rgba(249,115,22,0) }
  50%{ box-shadow:0 0 0 4px #fff, 0 0 0 12px rgba(249,115,22,.22) }
}
.inv106-t{ margin:0 0 6px; font-size:16px; font-weight:900; color:#1c1917 }
.inv106-s{ margin:0 0 16px; font-size:12px; font-weight:700; color:#78716c; line-height:1.8 }
.inv106-b{ display:flex; gap:9px }
.inv106-b button{
  flex:1; border:0; border-radius:15px; padding:13px 10px; cursor:pointer;
  font-family:inherit; font-weight:900; font-size:14px;
}
.inv106-b .yes{ color:#fff; background:linear-gradient(135deg,#fbbf24,#f97316); box-shadow:0 8px 18px rgba(249,115,22,.35) }
.inv106-b .no{ color:#78716c; background:#f5f5f4 }