/* ==========================================================================
   جوینو نسخه‌ی ۴: تصاویر واقعی، پاسپورت، ویجت‌های تعاملی و انیمیشن‌های سبک
   همه‌ی حرکت‌ها فقط transform و opacity هستند و با prefers-reduced-motion خاموش می‌شوند.
   ========================================================================== */

/* ---------- تصاویر واقعی (media/) ---------- */
.avatar.has-photo { overflow: hidden; background: var(--c200); padding: 0; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ev__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ev:hover .ev__photo { transform: scale(1.06); }
.ev__cover.has-photo::before { display: none; }
.ev__cover.has-photo::after { display: none; }
.ev--feature .ev__cover.has-photo { height: 260px; }

.ehero--photo { grid-template-columns: minmax(0, 1fr) minmax(260px, 40%); }
.ehero__shot { position: relative; z-index: 1; padding: 10px 12px 18px; }
.ehero__frame { aspect-ratio: 3 / 2; border-radius: 24px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 60px -28px rgb(24 22 45 / .55); rotate: 2deg; }
.ehero__frame img { width: 100%; height: 100%; object-fit: cover; }
.ehero__shot .dbadge { position: absolute; top: -4px; inset-inline-start: -6px; z-index: 2; rotate: -7deg; }
.ehero__sticker { position: absolute; bottom: -2px; inset-inline-end: -4px; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 26px; background: #fff; box-shadow: var(--sh-3); rotate: 9deg; animation: float-r 6s ease-in-out infinite; }
@media (max-width: 760px) { .ehero--photo { grid-template-columns: minmax(0, 1fr); } .ehero__shot { order: -1; padding: 6px 6px 14px; } .ehero__sticker { width: 62px; height: 62px; } .ehero__sticker .ico { width: 48px; height: 48px; } }
.place__map.has-photo { background: var(--s2); }
.place__map.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place__map.has-photo .place__pin { color: #fff; }

/* ---------- پاسپورت: سربرگ و دفترچه ---------- */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; align-items: stretch; }
.pp-hero__book { position: relative; display: grid; place-items: center; padding: 34px 22px; border-radius: 32px; background: var(--g-night); overflow: hidden; isolation: isolate; }
.pp-hero__book::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .05) 0 6deg, transparent 6deg 12deg); animation: spin 120s linear infinite; }
.pp-hero__book::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; inset-inline-start: -90px; bottom: -160px; z-index: -1; background: radial-gradient(circle, var(--pink-500), transparent 65%); opacity: .55; }
.booklet { --tx: 0deg; --ty: 0deg; position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 600px); aspect-ratio: 1.42; border-radius: 18px; transform: perspective(1400px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .5s var(--ease); box-shadow: 0 40px 70px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06); }
.booklet__page { position: relative; padding: 18px; overflow: hidden; color: var(--ink);
  background:
    repeating-radial-gradient(circle at 30% 120%, transparent 0 9px, rgb(131 90 232 / .06) 9px 10px),
    repeating-radial-gradient(circle at 80% -20%, transparent 0 11px, rgb(242 84 161 / .05) 11px 12px),
    linear-gradient(160deg, #fffaf0, #fdf3ff); }
.booklet__page--id { border-radius: 0 18px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.booklet__page--stamps { border-radius: 18px 0 0 18px; box-shadow: inset 18px 0 24px -18px rgb(24 22 45 / .25); }
.booklet__page--id { box-shadow: inset -18px 0 24px -18px rgb(24 22 45 / .25); }
.booklet__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; translate: -1px 0; background: linear-gradient(transparent, rgb(24 22 45 / .25), transparent); }
.bk-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1.5px dashed rgb(24 22 45 / .15); }
.bk-head span { display: grid; line-height: 1.3; }
.bk-head b { font-size: 13px; font-weight: 900; }
.bk-head small { font-size: 8.5px; letter-spacing: 2px; color: var(--violet-600); font-weight: 800; }
.bk-head__no { margin-inline-start: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--pink-600); }
.bk-id { display: grid; grid-template-columns: 38% 1fr; gap: 12px; align-items: start; }
.bk-photo { position: relative; aspect-ratio: 5 / 6; border-radius: 12px; overflow: hidden; background: var(--g-sunset); display: grid; place-items: center; color: #fff; font-size: 34px; font-weight: 950; box-shadow: 0 8px 18px -10px rgb(24 22 45 / .5); }
.bk-photo img { width: 100%; height: 100%; object-fit: cover; }
.bk-holo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .55) 45%, rgb(3 198 242 / .25) 52%, rgb(242 84 161 / .25) 58%, transparent 70%); background-size: 250% 100%; mix-blend-mode: screen; animation: holo 5s ease-in-out infinite; }
@keyframes holo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.bk-fields { display: grid; gap: 6px; margin: 0; }
.bk-fields div { display: grid; }
.bk-fields dt { font-size: 9.5px; color: var(--text-3); font-weight: 700; }
.bk-fields dd { margin: 0; font-size: 12.5px; font-weight: 850; line-height: 1.5; }
.bk-lv { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--c100); color: var(--c800); font-size: 11.5px; }
.bk-sign { width: 46%; color: var(--violet-700); opacity: .8; margin-top: auto; }
.bk-mrz { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: rgb(255 255 255 / .7); font-family: var(--font-mono); font-size: 8.6px; letter-spacing: .9px; color: var(--ink); overflow: hidden; white-space: nowrap; }
.bk-pageno { position: absolute; bottom: 10px; inset-inline-start: 14px; font-size: 11px; font-weight: 800; color: var(--text-3); }
.bk-visa { position: absolute; top: 12px; inset-inline-end: 14px; font-size: 9px; letter-spacing: 2px; font-weight: 800; color: var(--violet-400); }
.bk-stamp { position: absolute; left: var(--x); top: var(--y); width: 46%; color: var(--c600); rotate: var(--r); opacity: .88; mix-blend-mode: multiply; }
.bk-stamp .stamp__ink { width: 100%; height: auto; filter: url(#ink-rough); }
.bk-stamp__c { position: absolute; inset: 0; display: grid; place-items: center; }
.bk-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; color: var(--text-3); font-size: 13px; }
.bk-slam { position: absolute; inset: 0; pointer-events: none; }

.pp-level { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 32px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); overflow: hidden; isolation: isolate; }
.pp-level::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; inset-inline-end: -90px; top: -120px; z-index: -1; background: var(--c100); }
.pp-level__top { display: flex; align-items: center; gap: 16px; }
.pp-level h2 { font-size: 28px; font-weight: 950; letter-spacing: -.5px; line-height: 1.3; }
.pp-level p { color: var(--text-2); font-size: 13.5px; }
.pp-level p b { color: var(--ink); font-size: 15px; }
.pp-ring { --pv: 0; position: relative; display: grid; place-items: center; width: 104px; height: 104px; flex: none; border-radius: 50%; background: conic-gradient(var(--c500) calc(var(--pv) * 1%), var(--c100) 0); animation: ring-in 1.4s var(--ease) both; }
.pp-ring::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed var(--c300); animation: spin 18s linear infinite; }
.pp-ring > span { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--c100); }
@property --pv { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes ring-in { from { --pv: 0; } }
.pp-ladder { display: flex; align-items: center; gap: 6px; }
.pp-ladder span { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--s2); filter: grayscale(1); opacity: .55; transition: .3s var(--ease); }
.pp-ladder span.is-on { background: var(--c100); filter: none; opacity: 1; }
.pp-ladder span.is-now { background: var(--cg); box-shadow: 0 10px 22px -10px var(--cglow); transform: scale(1.12); }
.pp-ladder span + span::before { content: ""; position: absolute; inset-inline-end: calc(100% + 1px); width: 6px; height: 2px; background: var(--line-2); }
.pp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-stats span { display: grid; padding: 10px 12px; border-radius: 16px; background: var(--c50); border: 1px solid var(--c100); }
.pp-stats b { font-size: 22px; font-weight: 950; color: var(--c700); line-height: 1.3; }
.pp-stats small { font-size: 11.5px; color: var(--text-3); font-weight: 700; }
.pp-xpways { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-xpways span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 10px; background: var(--s2); font-size: 12px; color: var(--text-2); font-weight: 700; }
.pp-xpways .glyph { width: 14px; height: 14px; }
.pp-xpways b { color: var(--mint-700); }
@media (max-width: 1180px) { .pp-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .booklet { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .booklet__page--id { border-radius: 18px 18px 0 0; box-shadow: inset 0 -18px 24px -18px rgb(24 22 45 / .25); }
  .booklet__page--stamps { border-radius: 0 0 18px 18px; min-height: 230px; box-shadow: inset 0 18px 24px -18px rgb(24 22 45 / .25); }
  .booklet__spine { display: none; }
  .pp-hero__book { padding: 18px 12px; }
  .pp-level { padding: 18px; }
  .pp-ring { width: 84px; height: 84px; } .pp-ring > span { width: 64px; height: 64px; }
  .pp-level h2 { font-size: 22px; }
}

/* ---------- پاسپورت: مهرها ---------- */
.pp-stamps { margin-bottom: 22px; }
.pp-stamps .card__head { flex-wrap: wrap; }
.pp-stamps__bar { width: min(280px, 100%); }
.stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.stamp { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; color: var(--c600); }
.stamp__face, .stamp__back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 22px; backface-visibility: hidden; transition: transform .6s var(--ease); }
.stamp__face { background: radial-gradient(circle at 30% 25%, #fff, var(--c50)); border: 1px solid var(--c100); }
.stamp.is-on .stamp__face .stamp__ink { position: absolute; width: 86%; height: auto; rotate: var(--r); filter: url(#ink-rough); opacity: .9; }
.stamp__c, .stamp__lock { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; padding: 0 10px; }
.stamp__c b, .stamp__lock b { font-size: 12.5px; font-weight: 900; color: var(--c800); line-height: 1.45; }
.stamp__c small, .stamp__lock small { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); font-weight: 700; }
.stamp__lock small .glyph { width: 11px; height: 11px; }
.stamp.is-locked .stamp__face { background: repeating-linear-gradient(135deg, var(--s2) 0 8px, #fff 8px 16px); border: 2px dashed var(--line-2); }
.stamp.is-locked .stamp__lock .ico { filter: grayscale(1); opacity: .45; }
.stamp.is-locked .stamp__lock b { color: var(--text-3); }
.stamp__x { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 9px; background: var(--cs); color: var(--con); font-size: 12px; font-weight: 900; font-style: normal; }
.stamp__back { transform: rotateY(180deg); align-content: center; gap: 6px; padding: 14px; background: var(--cg); color: #fff; text-align: start; justify-items: start; }
.stamp__back b { font-size: 13px; font-weight: 900; }
.stamp__back small { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.5; opacity: .92; }
.stamp__back small .glyph { width: 12px; height: 12px; flex: none; }
.stamp__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px; border-radius: 9px; background: rgb(255 255 255 / .22); font-size: 11.5px; font-weight: 800; }
.stamp__go .glyph { width: 13px; height: 13px; }
.stamp.is-flipped .stamp__face { transform: rotateY(180deg); }
.stamp.is-flipped .stamp__back { transform: rotateY(360deg); }
.stamp:hover .stamp__face { box-shadow: 0 16px 30px -18px var(--cglow); }
.stamp.is-on:hover .stamp__ink { animation: wiggle .8s var(--ease); }
.stamp:focus-visible { outline: 3px solid var(--violet-300); outline-offset: 3px; border-radius: 22px; }
.pp-hint { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.pp-hint .glyph { width: 15px; height: 15px; }
@media (max-width: 1080px) { .stamps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 680px) { .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---------- پاسپورت: نقشه و سفرنامه ---------- */
.pp-mid { margin-bottom: 22px; }
.map { display: block; width: 100%; max-width: 500px; height: auto; margin: 10px auto 12px; overflow: visible; }
.map text { font-family: var(--font); }
.map__route { stroke-dashoffset: 400; animation: route 2.4s var(--ease) .3s forwards, dash-move 1.2s linear 2.7s infinite; }
@keyframes route { from { stroke-dasharray: 0 900; } to { stroke-dasharray: 6 6; stroke-dashoffset: 0; } }
@keyframes dash-move { to { stroke-dashoffset: -24; } }
.map__pulse { opacity: .35; transform-box: fill-box; transform-origin: center; animation: ping 2.2s var(--ease) infinite; }
.pp-trips { display: grid; gap: 8px; margin-top: 14px; max-height: 420px; overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; }
.pp-trips li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--c50); border: 1px solid var(--c100); animation: fade-up .5s var(--ease) both; animation-delay: calc(var(--i) * .06s); }
.pp-trips__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #fff; flex: none; box-shadow: var(--sh-1); }
.pp-trips li > div { flex: 1; min-width: 0; }
.pp-trips b { display: block; font-size: 13.5px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-trips small { font-size: 11.5px; color: var(--text-3); }
.pp-trips__rate { display: flex; color: var(--sun-400); }
.pp-trips__rate .glyph { width: 12px; height: 12px; }
.pp-trips__xp { font-size: 12px; font-weight: 900; color: var(--mint-700); background: var(--mint-100); padding: 2px 8px; border-radius: 8px; }

/* ---------- پاسپورت: نشان‌ها ---------- */
.pp-badges { margin-bottom: 26px; }
.tabs--sm button { height: 34px; font-size: 12.5px; padding: 0 12px; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 18px; }
.medal { position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 14px 14px; border-radius: 24px; background: linear-gradient(180deg, var(--c50), #fff 60%); border: 1px solid var(--c100); text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.medal:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -22px var(--cglow); }
.medal__disc { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; padding: 5px; background: conic-gradient(var(--c500) calc(var(--p) * 1%), var(--c100) 0); margin-bottom: 6px; }
.medal__disc > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: inset 0 -4px 0 var(--c100); }
.medal.is-on .medal__disc { background: conic-gradient(from 210deg, var(--c300), var(--c600), var(--c300), var(--c500), var(--c300)); box-shadow: 0 14px 26px -14px var(--cglow); }
.medal.is-on .medal__disc > span { background: radial-gradient(circle at 35% 30%, #fff, var(--c50)); }
.medal.is-on .medal__disc::before, .medal.is-on .medal__disc::after { content: ""; position: absolute; bottom: -12px; width: 18px; height: 26px; background: var(--c500); z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.medal.is-on .medal__disc::before { inset-inline-start: 22px; rotate: 18deg; }
.medal.is-on .medal__disc::after { inset-inline-end: 22px; rotate: -18deg; background: var(--c400); }
.medal--legend.is-on .medal__disc > span::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: linear-gradient(120deg, transparent 35%, rgb(255 255 255 / .8) 50%, transparent 65%); background-size: 250% 100%; animation: holo 3.5s ease-in-out infinite; }
.medal.is-locked .ico { filter: grayscale(1); opacity: .4; }
.medal b { font-size: 14px; font-weight: 900; }
.medal > small { font-size: 12px; color: var(--text-3); line-height: 1.7; min-height: 40px; }
.medal__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.medal__n { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 850; color: var(--text-2); }
.medal__n .glyph { width: 15px; height: 15px; color: var(--mint-500); }
.pp-next { margin-bottom: 10px; }

/* ---------- انیمیشن مهر زدن ---------- */
.stamp-fx { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgb(24 22 45 / .35); backdrop-filter: blur(3px); animation: fade-in .2s ease both; }
.stamp-fx[hidden] { display: none; }
.stamp-fx__mark { position: relative; display: grid; place-items: center; width: min(62vw, 320px); aspect-ratio: 1; color: var(--c600); animation: slam .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.stamp-fx__mark .stamp__ink { position: absolute; inset: 0; width: 100%; height: 100%; filter: url(#ink-rough) drop-shadow(0 0 0 #fff); }
.stamp-fx__mark .stamp__c b { font-size: 20px; color: var(--c700); }
.stamp-fx__xp { position: absolute; top: calc(50% + min(31vw, 160px) + 14px); padding: 8px 18px; border-radius: 14px; background: var(--mint-500); color: #fff; font-weight: 950; font-size: 20px; box-shadow: 0 14px 30px -12px var(--mint-glow); animation: xp-up 1.4s var(--ease) .35s both; }
.stamp-fx.is-out { animation: fade-out .35s ease both; }
@keyframes slam { 0% { transform: scale(2.6) rotate(-18deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes xp-up { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 30% { transform: translateY(0) scale(1.1); opacity: 1; } 100% { transform: translateY(-14px) scale(1); opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.shake { animation: shake .45s var(--ease); }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }

/* ==========================================================================
   صفحه‌ی اصلی نسخه‌ی ۴
   ========================================================================== */

/* ---------- فید زنده در سربرگ ---------- */
.lf { min-width: 250px; padding-top: 16px; }
.lf__live { position: absolute; top: -10px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--pink-500); color: #fff; font-size: 10.5px; font-weight: 900; box-shadow: 0 6px 14px -6px var(--pink-glow); }
.lf__live .live-dot { background: #fff; }
.lf__item { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .35s var(--ease); }
.lf__item.is-in { opacity: 1; transform: none; }
.lf__ini { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--cg); color: #fff; font-weight: 900; font-size: 14px; }

/* ---------- پولارویدها (کلاژ درباره‌ی ما) ---------- */
.hb__img { width: 100%; height: 100%; object-fit: cover; }
.pola { position: absolute; top: calc(var(--k) * 8px); inset-inline-start: calc(var(--k) * 26px); width: 92px; margin: 0; padding: 6px 6px 0; border-radius: 6px; background: #fff; box-shadow: 0 14px 26px -12px rgb(24 22 45 / .45); rotate: var(--r); transition: rotate .4s var(--bounce), translate .4s var(--bounce); }
.pola__pic { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--cg); }
.pola__pic > img:not(.ico) { width: 100%; height: 100%; object-fit: cover; }
.pola figcaption { padding: 4px 2px 6px; font-size: 9.5px; font-weight: 800; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }

/* ---------- نوار همراهان ---------- */
.partners { padding: 22px 0 6px; }
.partners__in { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.partners__k { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 850; font-size: 13.5px; color: var(--text-2); }
/* v4.5: دیوار لوگو فقط لوگوست و ثابت می‌ماند؛ تنها نوار متحرک صفحه، تیکر بالای سایت است */
.partners__grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: center; gap: 14px 28px; }
.partners__grid li { display: grid; place-items: center; }
.partners__grid img { height: 44px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.partners__grid img:hover { filter: none; opacity: 1; }
.partners__k .glyph { width: 18px; height: 18px; color: var(--pink-500); }

/* ---------- میز زنده ---------- */
.live-sec { padding-top: 34px; }
.live { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy table" "meta table"; gap: 18px 30px; align-items: center; padding: 34px; border-radius: 36px; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 85% 15%, var(--c100), transparent 45%), radial-gradient(circle at 10% 90%, var(--pink-100), transparent 45%), #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.live::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--line-2) 1.2px, transparent 1.4px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
.live__copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; align-self: end; }
.live__meta { grid-area: meta; display: flex; flex-direction: column; gap: 16px; align-self: start; min-width: 0; }
.live .lt { grid-area: table; }
.live h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 950; line-height: 1.3; letter-spacing: -.8px; }
.live p { color: var(--text-2); line-height: 2; max-width: 480px; }
.live__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.live__facts span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 12px; background: var(--c50); border: 1px solid var(--c100); font-size: 13px; font-weight: 750; }
.live__facts .glyph { width: 16px; height: 16px; color: var(--c600); }
.live__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.lt-count { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 18px; background: var(--g-citrus); color: var(--ink); box-shadow: 0 12px 24px -14px var(--orange-glow); }
.lt-count b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; font-size: 24px; font-weight: 950; }
.lt-count b.is-live { animation: count-beat 2.4s ease-in-out infinite; }
.lt-count small { font-size: 12px; font-weight: 800; line-height: 1.5; }
@keyframes count-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.lt { --seat: 62px; position: relative; width: min(100%, 500px); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.lt__live { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 850; box-shadow: var(--sh-2); }
.lt__glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, var(--c200), transparent 70%); filter: blur(20px); }
.lt__table { position: absolute; inset: 21%; display: grid; place-items: center; border-radius: 50%; border: 10px solid #fff;
  background: radial-gradient(circle at 35% 30%, #fff8e8, #f7d9b5 55%, #e9b88a); box-shadow: 0 30px 50px -26px rgb(120 70 20 / .55), inset 0 -8px 18px rgb(150 90 30 / .25); }
.lt__plate { position: absolute; left: 50%; top: 50%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .55) 45%, rgb(255 255 255 / .3) 46% 60%, transparent 61%); border: 1.5px dashed rgb(160 100 40 / .35); transform: translate(-50%, -50%) rotate(var(--a)) translateY(-275%); }
.lt__plate.is-set { border: 0; background: radial-gradient(circle, #fff 42%, #efe9f7 43% 58%, #fff 59%); box-shadow: 0 4px 8px rgb(120 70 20 / .22); }
.lt__center { position: relative; display: grid; justify-items: center; gap: 2px; max-width: 64%; text-align: center; }
.lt__center .ico { filter: drop-shadow(0 10px 10px rgb(120 70 20 / .3)); }
.lt__center b { font-size: 13px; font-weight: 900; line-height: 1.5; }
.lt__center small { font-size: 11px; font-weight: 750; color: #8a5a2b; }
.lt-seat { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 2; display: grid; place-items: center; width: var(--seat); height: var(--seat); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; }
.lt-seat:hover, .lt-seat:focus-visible, .lt-seat.is-joining { z-index: 6; }
.lt-seat .avatar { --sz: var(--seat); box-shadow: 0 0 0 4px #fff, 0 12px 22px -10px rgb(24 22 45 / .5); transition: transform .3s var(--bounce); }
.lt-seat:hover .avatar, .lt-seat:focus-visible .avatar { transform: scale(1.1); }
.lt-open { display: grid; place-items: center; width: var(--seat); height: var(--seat); border-radius: 50%; border: 2.5px dashed var(--c400); background: rgb(255 255 255 / .85); color: var(--c600); transition: .3s var(--bounce); }
.lt-open .glyph { width: 24px; height: 24px; }
.lt-seat.is-open:hover .lt-open { background: var(--cs); color: var(--con); border-style: solid; transform: scale(1.1) rotate(90deg); }
.lt-seat.is-joining .lt-open { border-style: solid; border-color: var(--pink-400); color: var(--pink-500); animation: seat-pulse 1.2s ease-in-out infinite; }
@keyframes seat-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(242 84 161 / .45); } 50% { box-shadow: 0 0 0 12px rgb(242 84 161 / 0); } }
.lt-bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 5; display: grid; gap: 4px; justify-items: center; width: max-content; max-width: 210px; padding: 10px 12px; border-radius: 16px; background: var(--ink); color: #fff; text-align: center; box-shadow: var(--sh-4);
  opacity: 0; pointer-events: none; transform: translate(-50%, 6px) scale(.92); transition: opacity .2s ease, transform .25s var(--bounce); }
.lt-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50% -1px; border: 7px solid transparent; border-top-color: var(--ink); }
.lt-bubble b { font-size: 13px; }
.lt-bubble small { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; opacity: .8; }
.lt-bubble small .glyph { width: 12px; height: 12px; }
.lt-likes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.lt-likes .tag { height: 22px; font-size: 10.5px; background: rgb(255 255 255 / .12); color: #fff; border-color: transparent; }
.lt-seat:hover .lt-bubble, .lt-seat:focus-visible .lt-bubble, .lt-seat.is-joining .lt-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }
.lt-bubble--open { background: var(--pink-500); }
.lt-bubble--open::after { border-top-color: var(--pink-500); }
.lt.in .lt-seat .avatar, .lt.in .lt-open { animation: seat-pop .55s var(--bounce) both; animation-delay: calc(var(--i) * 70ms + .25s); }
.lt.in .lt-seat.is-joining .lt-open { animation: seat-pulse 1.2s ease-in-out infinite; }
@keyframes seat-pop { from { transform: scale(0); opacity: 0; } }
/* موبایل: متن، بعد میز، بعد جزئیات و دکمه؛ میز کوچک‌تر و صندلی‌ها جمع‌وجورتر تا هیچ چیز روی عنوان نیفتد */
@media (max-width: 960px) { .live { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "table" "meta"; padding: 24px; } .live__copy, .live__meta { align-self: auto; } .live .lt { width: min(100%, 420px); } }
@media (max-width: 560px) {
  .live { gap: 16px; padding: 22px 16px 18px; border-radius: 28px; }
  .live h2 { font-size: clamp(23px, 6.6vw, 28px); letter-spacing: -.4px; }
  .live p { font-size: 14px; line-height: 1.9; }
  .live .lt { --seat: clamp(36px, 11.5vw, 46px); width: min(100%, 340px); }
  .lt__table { inset: 23%; border-width: 7px; }
  .lt__center { max-width: 70%; }
  .lt__center b { font-size: 11px; } .lt__center small { font-size: 10px; } .lt__center .ico { width: 34px; height: 34px; }
  .lt-seat .avatar { box-shadow: 0 0 0 3px #fff, 0 8px 16px -8px rgb(24 22 45 / .5); font-size: 12px; }
  .lt-open .glyph { width: 18px; height: 18px; }
  .lt-bubble { max-width: 170px; padding: 8px 10px; }
  .live__facts span { height: auto; min-height: 34px; padding-block: 6px; }
  .live__cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .live__cta .btn { min-width: 0; padding-inline: 14px; }
}

/* ---------- پسندیدن روی کارت رویداد ---------- */
.ev__like { position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; margin-inline-start: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text-3); font-size: 12px; font-weight: 800; cursor: pointer; transition: .2s var(--ease); }
.ev__like .glyph { width: 16px; height: 16px; transition: transform .35s var(--bounce); }
.ev__like:hover { color: var(--pink-500); border-color: var(--pink-200); }
.ev__like.is-on { color: var(--pink-600); background: var(--pink-50); border-color: var(--pink-200); }
.ev__like.is-on .glyph { transform: scale(1.25); animation: heart-pop .5s var(--bounce); }
@keyframes heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.45); } 100% { transform: scale(1.25); } }
.ev--mini .ev__like { display: none; }

/* ---------- بازی‌ها: تست و گردونه ---------- */
.play { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.quiz { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 32px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); overflow: hidden; isolation: isolate; }
.quiz::before { content: ""; position: absolute; width: 300px; height: 300px; inset-inline-start: -100px; top: -140px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--sun-100), transparent 70%); }
.qz-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qz-head h3 { font-size: 24px; font-weight: 950; letter-spacing: -.4px; }
.qz-badge { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border-radius: 12px; background: var(--sun-100); color: var(--sun-800); font-size: 12.5px; font-weight: 850; }
.qz-badge--glass { background: rgb(255 255 255 / .14); color: #fff; }
.qz-dots { display: flex; gap: 5px; margin-inline-start: auto; }
.qz-dots i { width: 22px; height: 8px; border-radius: 99px; background: var(--s3); transition: .35s var(--ease); }
.qz-dots i.is-on { background: var(--g-sunset); width: 30px; }
.qz-body { display: grid; flex: 1; }
.qz-step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transform: translateX(-28px); transition: opacity .3s ease, transform .4s var(--ease), visibility 0s .4s; }
.qz-step.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .05s, transform .45s var(--ease) .05s, visibility 0s; }
.qz-step.is-done { transform: translateX(28px); }
.qz-q { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; }
.qz-q span { display: grid; place-items: center; height: 28px; padding: 0 9px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 12px; }
.qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qz-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border: 1.5px solid var(--c100); border-radius: 20px; background: var(--c50); text-align: start; font-size: 14px; font-weight: 800; color: var(--ink); cursor: pointer; overflow: hidden; transition: transform .25s var(--bounce), border-color .2s, background .2s, box-shadow .25s; }
.qz-opt__ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: #fff; box-shadow: var(--sh-1); transition: transform .35s var(--bounce); }
.qz-opt:hover { transform: translateY(-3px); border-color: var(--c300); box-shadow: 0 16px 28px -18px var(--cglow); }
.qz-opt:hover .qz-opt__ico { transform: rotate(-8deg) scale(1.08); }
.qz-opt.is-picked { background: var(--cg); border-color: transparent; color: #fff; }
.qz-opt.is-picked::after { content: "✓"; position: absolute; top: 8px; inset-inline-end: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--c600); font-size: 13px; font-weight: 900; }
.qz-res { display: grid; gap: 14px; }
.qz-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 24px; background: var(--cg); color: #fff; box-shadow: 0 20px 36px -22px var(--cglow); }
.qz-card__ico { display: grid; place-items: center; width: 92px; height: 92px; flex: none; border-radius: 28px; background: rgb(255 255 255 / .92); rotate: -6deg; animation: float 5s ease-in-out infinite; }
.qz-card small { font-size: 12px; opacity: .85; font-weight: 700; }
.qz-card b { display: block; font-size: 24px; font-weight: 950; line-height: 1.4; }
.qz-card p { font-size: 13.5px; opacity: .92; line-height: 1.8; }
.qz-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qz-traits i { font-style: normal; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9px; background: rgb(255 255 255 / .2); font-size: 12px; font-weight: 800; }
.qz-match { display: grid; gap: 8px; }
.qz-match > small { font-size: 12px; color: var(--text-3); font-weight: 750; }
/* v4.5: هم‌خوانی به شکل عدد بزرگ + خط باریک بدون ریل پس‌زمینه */
.qz-match { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qz-match > small { grid-column: 1 / -1; }
.qz-bar { --w: 0%; position: relative; padding: 10px 12px 14px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--c200); }
.qz-bar i { position: absolute; bottom: 7px; inset-inline-start: 12px; width: min(var(--w), calc(100% - 24px)); height: 4px; border-radius: 4px; background: var(--c500); transition: width .9s var(--ease); }
.qz-bar span { display: flex; flex-direction: column-reverse; gap: 2px; color: var(--ink); }
.qz-bar b { font-size: 12px; font-weight: 800; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-bar small { font-size: 22px; font-weight: 950; line-height: 1.1; color: var(--c700); }
.qz-act { display: flex; flex-wrap: wrap; gap: 10px; }

.wheel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px; border-radius: 32px; color: #fff; overflow: hidden; text-align: center; }
.wheel::before { content: ""; position: absolute; inset: -30%; z-index: 0; background: repeating-conic-gradient(rgb(255 255 255 / .04) 0 10deg, transparent 10deg 20deg); animation: spin 90s linear infinite; }
.wheel > * { position: relative; z-index: 1; }
.wh-head { display: grid; justify-items: center; gap: 10px; }
.wh-head h3 { font-size: 21px; font-weight: 950; line-height: 1.5; }
.wh-stage { position: relative; width: min(100%, 290px); aspect-ratio: 1; }
.wh-disc { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 8px rgb(255 255 255 / .12), 0 26px 50px -20px rgb(0 0 0 / .6); transform-origin: 50% 50%; backface-visibility: hidden; }
.wh-pointer { position: absolute; top: -10px; left: 50%; z-index: 2; width: 34px; height: 40px; translate: -50% 0; transform-origin: 50% 8%; background: var(--g-citrus); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.wh-spin { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; translate: -50% -50%; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 950; font-size: 15px; cursor: pointer; box-shadow: 0 0 0 6px rgb(255 255 255 / .25), 0 12px 26px -8px rgb(0 0 0 / .5); transition: transform .2s var(--bounce); }
.wh-spin::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .6); animation: ping 2s var(--ease) infinite; }
.wh-spin:hover { transform: scale(1.06); }
.wh-spin:active { transform: scale(.95); }
.wh-out { display: none; width: 100%; padding: 16px; border-radius: 22px; background: #fff; color: var(--ink); text-align: start; gap: 4px; }
.wheel.has-result .wh-out { display: grid; animation: fade-up .45s var(--ease) both; }
.wh-out__k { width: max-content; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9px; background: var(--c100); color: var(--c800); font-size: 12px; font-weight: 850; }
.wh-out b { font-size: 16px; font-weight: 900; line-height: 1.5; }
.wh-out small { font-size: 12.5px; color: var(--text-2); }
.wh-out__row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 8px; font-size: 13px; font-weight: 850; }
.wh-out__left { color: var(--c700); font-size: 12px; }
.wh-out .btn { justify-self: start; background: var(--cs); color: var(--con); border-color: transparent; }
.wh-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .75; }
.wh-hint .glyph { width: 14px; height: 14px; }
@media (max-width: 1080px) { .play { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .quiz, .wheel { padding: 18px; border-radius: 26px; } .qz-opts { grid-template-columns: minmax(0, 1fr); gap: 8px; } .qz-opt { min-height: 62px; } .qz-opt__ico { width: 42px; height: 42px; } .qz-card { flex-direction: column; text-align: center; } .qz-traits { justify-content: center; } .qz-head h3 { font-size: 20px; } }

/* ---------- دیوار لحظه‌ها ---------- */
.moms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 22px; padding: 10px 6px; }
.mom { position: relative; display: flex; flex-direction: column; margin: 0; padding: 10px 10px 0; border-radius: 8px; background: #fff; box-shadow: 0 18px 34px -20px rgb(24 22 45 / .5), 0 0 0 1px var(--line); rotate: var(--r); cursor: default; transition: rotate .45s var(--bounce), transform .45s var(--bounce), box-shadow .3s; }
.mom[data-lightbox] { cursor: zoom-in; }
.mom:hover, .mom:focus-visible { rotate: 0deg; transform: scale(1.04); z-index: 3; box-shadow: 0 30px 50px -24px rgb(24 22 45 / .55), 0 0 0 1px var(--line); outline: none; }
.mom--tall { grid-row: span 2; }
.mom--wide { grid-column: span 2; }
.mom__tape { position: absolute; top: -12px; left: 50%; z-index: 2; width: 86px; height: 26px; translate: -50% 0; rotate: calc(var(--r) * -1.5); background: rgb(254 229 160 / .75); box-shadow: 0 2px 4px rgb(24 22 45 / .12); clip-path: polygon(3% 0, 97% 4%, 100% 100%, 0 96%); }
.mom__pic { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 4px; overflow: hidden; background: radial-gradient(circle at 25% 20%, rgb(255 255 255 / .55), transparent 40%), var(--cg); }
.mom__pic::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .35) 1.2px, transparent 1.4px); background-size: 14px 14px; }
.mom__pic.has-photo::before { display: none; }
.mom__pic > img:not(.ico) { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mom:hover .mom__pic > img:not(.ico) { transform: scale(1.06); }
.mom__art { position: relative; filter: drop-shadow(0 16px 16px rgb(24 22 45 / .3)); animation: float 6s ease-in-out infinite; }
.mom__people { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 850; color: var(--c700); } .mom__people .glyph { width: 13px; height: 13px; }
.mom figcaption { padding: 9px 4px 10px; display: grid; gap: 1px; }
.mom figcaption b { font-size: 13.5px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mom figcaption small { font-size: 11.5px; color: var(--text-3); }
.mom__meta { font-size: 11.5px; color: var(--text-3); gap: 2px 9px; }
.mom__meta .glyph { width: 12px; height: 12px; }
.mom__meta > span:nth-child(3) { color: var(--sun-700); font-weight: 850; }
.mom__meta > span:nth-child(3) .glyph { color: var(--sun-400); }
@media (max-width: 960px) { .moms { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 18px; } }
/* موبایل: دو ستون منظم، عکس مربع ۱:۱ با برش وسط؛ بدون قاب‌های بلند و پهن و با چرخش کم تا ردیف‌ها مرتب بمانند */
@media (max-width: 640px) {
  .moms { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px 12px; padding: 8px 0 0; }
  .mom, .mom--tall, .mom--wide { grid-row: auto; grid-column: auto; padding: 7px 7px 0; rotate: calc(var(--r) * .35); }
  .mom__pic { flex: none; aspect-ratio: 1 / 1; }
  .mom__pic > img:not(.ico) { position: absolute; inset: 0; }
  .mom__art { width: 64px; height: 64px; }
  .mom__tape { width: 58px; height: 18px; top: -8px; }
  .mom figcaption { padding: 7px 2px 8px; }
  .mom figcaption b { font-size: 12px; }
  .mom__meta { font-size: 10.5px; gap: 1px 6px; }
  .mom__people { font-size: 10.5px; }
}

/* ---------- مکان‌های همکار ---------- */
/* ---------- مکان‌ها (۵٫۱): آمار، کاشی رنگی هر مکان بدون عکس، معیارهای بررسی ---------- */
.plc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.plc-stat { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: var(--r-l); background: linear-gradient(160deg, var(--c50), #fff 80%); border: 1px solid var(--c100); }
.plc-stat .ico { flex: none; filter: drop-shadow(0 8px 10px var(--cglow)); }
.plc-stat b { display: block; font-size: 24px; font-weight: 950; line-height: 1.2; color: var(--c700); font-variant-numeric: tabular-nums; }
.plc-stat small { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); }
.plc { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.plc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 14px; }
.plc-tile { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; isolation: isolate; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.plc-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 78px; z-index: -1; background: radial-gradient(circle at 15% 20%, rgb(255 255 255 / .6), transparent 45%), linear-gradient(135deg, var(--c100), var(--c300)); }
.plc-tile::after { content: ""; position: absolute; inset: 0 0 auto; height: 78px; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .55) 1.2px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.plc-tile:hover { transform: translateY(-4px); border-color: var(--c200); box-shadow: 0 24px 40px -24px var(--cglow); }
.plc-tile__top { display: flex; align-items: flex-start; gap: 8px; min-height: 64px; }
.plc-tile__ico { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 18px; background: #fff; box-shadow: 0 10px 20px -12px var(--cglow); transition: transform .4s var(--bounce); }
.plc-tile:hover .plc-tile__ico { transform: rotate(-8deg) scale(1.06); }
.plc-tile__type { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: .1em 9px 0; border-radius: 9px; background: rgb(255 255 255 / .9); color: var(--c800); font-size: 11.5px; font-weight: 850; }
.plc-tile__type .glyph { width: 14px; height: 14px; color: var(--c600); }
.plc-tile__rate { display: inline-flex; align-items: center; gap: 3px; height: 26px; margin-inline-start: auto; padding: .1em 8px 0; border-radius: 9px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 850; }
.plc-tile__rate .glyph { width: 12px; height: 12px; color: var(--sun-300); }
.plc-tile__name { font-size: 16px; font-weight: 900; line-height: 1.5; overflow-wrap: anywhere; }
.plc-tile__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.plc-tile__next { display: flex; align-items: center; gap: 5px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 12px; font-weight: 700; color: var(--text-3); }
.plc-tile__next .glyph { flex: none; width: 14px; height: 14px; color: var(--c500); }
.plc-check { display: grid; gap: 14px; padding: 18px; border-radius: 26px; background: var(--ink); color: #fff; box-shadow: var(--sh-3); position: sticky; top: 96px; }
.plc-check__head { display: flex; align-items: center; gap: 10px; }
.plc-check__head b { display: block; font-size: 16px; font-weight: 900; }
.plc-check__head small { font-size: 12px; opacity: .7; }
.plc-check__list { display: grid; gap: 8px; }
.plc-check__list li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: rgb(255 255 255 / .07); }
.plc-check__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--c100); }
.plc-check__list li > div { display: grid; gap: 1px; flex: 1; min-width: 0; }
.plc-check__list b { font-size: 13.5px; font-weight: 850; }
.plc-check__list small { font-size: 11.5px; line-height: 1.7; opacity: .72; }
.plc-check__ok { flex: none; width: 20px; height: 20px; color: var(--mint-400); }
.plc-check__cities { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px dashed rgb(255 255 255 / .18); }
.plc-check__cities span { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: .1em 6px 0 10px; border-radius: 999px; background: rgb(255 255 255 / .1); font-size: 12px; font-weight: 750; }
.plc-check__cities .glyph { width: 13px; height: 13px; opacity: .8; }
.plc-check__cities b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: .1em 4px 0; border-radius: 999px; background: #fff; color: var(--ink); font-size: 10.5px; line-height: 1; }
@media (max-width: 1100px) { .plc { grid-template-columns: minmax(0, 1fr); } .plc-check { position: static; } .plc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .plc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plc-tile { padding: 11px; border-radius: 20px; gap: 8px; }
  .plc-tile::before, .plc-tile::after { height: 62px; }
  .plc-tile__top { flex-wrap: wrap; min-height: 0; }
  .plc-tile__ico { width: 46px; height: 46px; border-radius: 14px; }
  .plc-tile__ico .ico { width: 32px; height: 32px; }
  .plc-tile__type { order: 3; }
  .plc-tile__name { font-size: 14px; }
  .plc-tile__meta .tag { height: 24px; font-size: 11px; padding-inline: 8px; }
  .plc-tile__next { font-size: 11px; align-items: flex-start; }
  .plc-stat { padding: 12px; gap: 8px; } .plc-stat b { font-size: 20px; } .plc-stat .ico { width: 28px; height: 28px; }
}

/* ---------- نشان‌های اعتماد در فوتر ---------- */
.foot__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.foot__trust-k { display: inline-flex; align-items: center; gap: 6px; font-weight: 850; font-size: 13px; margin-inline-end: 8px; }
.foot__trust-k .glyph { width: 17px; height: 17px; color: var(--mint-500); }
.trustb { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.trustb img { width: 72px; height: 72px; object-fit: contain; }
.trustb small { font-size: 10px; color: var(--text-2); font-weight: 700; }
/* نماد اینماد: تصویر از سرور اینماد با اندازه‌ی طبیعی خودش، کنار عنوان و راهنما */
.enamad { display: flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 8px 16px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.enamad__seal { flex: none; display: grid; place-items: center; min-width: 84px; min-height: 84px; border-radius: 10px; background: var(--s2); transition: transform .2s var(--ease); }
.enamad__seal:hover { transform: translateY(-2px); }
.enamad__seal:active { transform: translateY(0) scale(.98); }
.enamad__seal img { display: block; max-width: 110px; height: auto; }
.enamad__txt { display: grid; gap: 4px; max-width: 220px; }
.enamad__k { display: inline-flex; align-items: center; gap: 6px; font-weight: 850; font-size: 13px; }
.enamad__k .glyph { width: 16px; height: 16px; color: var(--mint-500); }
.enamad__hint { font-size: 11.5px; line-height: 1.7; color: var(--text-3); text-wrap: pretty; }

/* ==========================================================================
   اجزای مشترک تعامل
   ========================================================================== */
.pop-msg { position: fixed; z-index: var(--z-tip); left: 50%; bottom: 96px; translate: -50% 0; padding: 12px 20px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: var(--sh-4); animation: pop-in .35s var(--bounce) both; }
.pop-msg.is-out { animation: fade-out .4s ease both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.burst { position: fixed; z-index: var(--z-fx); width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 3px; background: hsl(var(--h) 85% 60%); animation: burst .9s cubic-bezier(.15, .7, .3, 1) both; }
.burst--heart i { width: 12px; height: 12px; border-radius: 50% 50% 0 50%; rotate: 45deg; background: var(--pink-400); }
.burst--coin i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, var(--sun-400) 55%, var(--orange-500)); box-shadow: 0 0 0 1.5px var(--sun-600) inset; }
@keyframes burst { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(1) rotate(200deg); opacity: 0; } }
.lbox { max-width: min(92vw, 860px); padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--sh-4); overflow: hidden; }
.lbox::backdrop { background: rgb(24 22 45 / .7); backdrop-filter: blur(4px); }
.lbox[open] { animation: pop-in .35s var(--bounce); }
.lbox figure { margin: 0; }
.lbox img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: var(--ink); }
.lbox figcaption { padding: 12px 16px; font-weight: 800; font-size: 14px; }
.lbox__x { position: absolute; top: 10px; inset-inline-end: 10px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgb(255 255 255 / .9); font-size: 24px; line-height: 1; cursor: pointer; }
.react-float { position: absolute; left: 50%; bottom: 80%; translate: -50% 0; pointer-events: none; animation: float-up 1s ease-out both; font-style: normal; }
.react-float .ico { width: 26px; height: 26px; }
@keyframes float-up { to { transform: translateY(-46px) scale(1.3); opacity: 0; } }

/* نور زیر نشانگر روی کارت‌ها */
.ev, .medal, .plc-tile, .stamp, .mom { --mx: 50%; --my: 50%; }
.is-lit::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), rgb(255 255 255 / .38), transparent 60%); mix-blend-mode: soft-light; }
.ev.is-lit::after { background: radial-gradient(300px circle at var(--mx) var(--my), rgb(255 255 255 / .55), transparent 55%); mix-blend-mode: overlay; }

/* ==========================================================================
   حرکت بین صفحه‌ها و ورود با اسکرول (فقط در مرورگرهای پشتیبان)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(ev-hero) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.vt-hero { view-transition-name: ev-hero; }
.dtop, .topbar { view-transition-name: topbar; }
.side { view-transition-name: sidebar; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec .shead { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .moms .mom__pic > img:not(.ico) { animation: parallax linear both; animation-timeline: view(); }
  }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(36px); } }
@keyframes parallax { from { object-position: 50% 30%; } to { object-position: 50% 70%; } }

@media (prefers-reduced-motion: reduce) {
  .pp-hero__book::before, .wheel::before, .bk-holo, .map__route, .map__pulse, .wh-spin::before { animation: none !important; }
  .booklet { transform: none !important; }
}

/* اسکرین‌شات واقعی داخل ماکاپ گوشی */
.phone__screen--shot { padding: 0 !important; overflow: hidden; }
.phone__screen--shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* اسکرین‌شات واقعی ۹:۱۶: ارتفاع گوشی از نسبت تصویر می‌آید تا چیزی از دو طرف بریده نشود */
.phone--shot { height: auto; }
.phone--shot .phone__screen--shot { height: auto; aspect-ratio: 9 / 16; }
.appx__stage--shots { align-self: start; min-height: 0; height: 560px; }
@media (max-width: 1100px) { .appx__stage--shots { height: 520px; } }
@media (max-width: 640px) { .appx__stage--shots { height: 440px; } }

/* ==========================================================================
   پنل مدیریت ← تصاویر سایت
   ========================================================================== */
.mg-top { --gap: 20px; }
.mg-how { display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.mg-how .kicker { color: var(--sun-300); }
.mg-how .kicker::before { background: var(--sun-300); }
.mg-how h2 { font-size: 24px; font-weight: 950; }
.mg-how .tag--glass { background: rgb(255 255 255 / .12); color: #fff; border: 1px solid rgb(255 255 255 / .18); }
.mg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: mg; }
.mg-steps li { position: relative; display: grid; gap: 6px; padding: 14px; border-radius: 20px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); counter-increment: mg; }
.mg-steps li::after { content: counter(mg, persian); position: absolute; top: 10px; inset-inline-end: 12px; font-size: 28px; font-weight: 950; color: var(--c300); opacity: .7; }
.mg-steps li > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; }
.mg-steps b { font-size: 14px; }
.mg-steps small { font-size: 12px; opacity: .78; line-height: 1.8; }
.mg-steps code { background: rgb(255 255 255 / .15); padding: 1px 6px; border-radius: 6px; }
.mg-sum { display: grid; gap: 18px; align-content: center; }
.mg-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-jump a { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 11px; background: var(--c50); border: 1px solid var(--c100); font-size: 12px; font-weight: 800; color: var(--c800); transition: .2s; }
.mg-jump a:hover { background: var(--c100); transform: translateY(-2px); }
.mg-list { display: grid; gap: 28px; }
.mg-group { scroll-margin-top: 90px; }
.mg-group:not(:has(.mg-slot:not([hidden]))) { display: none; }
.mg-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mg-group__head b { display: block; font-size: 18px; font-weight: 950; }
.mg-group__head small { font-size: 12.5px; color: var(--text-3); }
.mg-group__head code { color: var(--c700); font-weight: 800; }
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.mg-slot { display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.mg-slot:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -22px var(--cglow); }
.mg-slot.is-done { border-color: var(--mint-200); }
.mg-slot--series { grid-column: span 2; }
.mg-frame { position: relative; display: grid; place-items: center; max-height: 180px; width: 100%; overflow: hidden; background: repeating-linear-gradient(135deg, var(--c50) 0 10px, #fff 10px 20px); border-bottom: 2px dashed var(--c200); }
.mg-frame > img:not(.ico) { width: 100%; height: 100%; object-fit: cover; }
.mg-slot.is-done .mg-frame { border-bottom: 0; background: var(--s2); }
.mg-dim { display: grid; justify-items: center; gap: 2px; color: var(--c700); text-align: center; }
.mg-dim b { font-size: 20px; font-weight: 950; letter-spacing: 1px; }
.mg-dim small { font-size: 12px; font-weight: 800; color: var(--text-3); }
.mg-dim .ico { opacity: .6; }
.mg-minis { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; padding: 12px; background: var(--c50); border-bottom: 1px solid var(--c100); }
.mg-mini { display: grid; place-items: center; max-height: 130px; border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(135deg, #fff 0 8px, var(--c50) 8px 16px); border: 1.5px dashed var(--c300); }
.mg-mini.is-done { border: 0; }
.mg-mini img { width: 100%; height: 100%; object-fit: cover; }
.mg-mini b { font-size: 13px; font-weight: 900; color: var(--c600); }
.mg-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.mg-body > div > b { font-size: 14.5px; font-weight: 900; }
.mg-body p { font-size: 12.5px; color: var(--text-2); line-height: 1.85; }
.mg-file { display: flex; align-items: center; gap: 6px; }
.mg-file code { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) { .mg-steps { grid-template-columns: minmax(0, 1fr); } .mg-slot--series { grid-column: auto; } }

/* ==========================================================================
   داشبورد عضو: پاسپورت کوچک، چالش امروز، حال امروز
   ========================================================================== */
.pp-mini { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--r-l); color: #fff; overflow: hidden; }
.pp-mini::after { content: ""; position: absolute; width: 220px; height: 220px; inset-inline-start: -70px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, var(--pink-500), transparent 65%); opacity: .5; }
.pp-mini > * { position: relative; z-index: 1; }
.pp-mini__top { display: flex; align-items: center; gap: 14px; }
.pp-ring--s { width: 76px; height: 76px; }
.pp-ring--s::before { border-color: rgb(255 255 255 / .3); }
.pp-ring--s > span { width: 58px; height: 58px; }
.pp-mini__k { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .8; font-weight: 700; }
.pp-mini b { display: block; font-size: 20px; font-weight: 950; line-height: 1.4; }
.pp-mini small { font-size: 12px; opacity: .8; }
.pp-mini__stamps { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.pp-dot { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .3); rotate: var(--r); }
.pp-dot .ico { opacity: .3; filter: grayscale(1); }
.pp-dot.is-on { border: 2px solid var(--c300); background: rgb(255 255 255 / .92); box-shadow: 0 6px 12px -6px var(--cglow); }
.pp-dot.is-on .ico { opacity: 1; filter: none; }
.pp-mini__foot { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; flex-wrap: wrap; }
.pp-mini__foot span { display: inline-flex; align-items: center; gap: 4px; }
.pp-mini__foot .glyph { width: 15px; height: 15px; color: var(--sun-300); }
.pp-mini__bar { width: 110px; height: 8px; border-radius: 99px; background: rgb(255 255 255 / .15); overflow: hidden; }
.pp-mini__bar i { display: block; height: 100%; border-radius: inherit; background: var(--g-citrus); }
@media (max-width: 560px) { .pp-mini__stamps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.chal { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: linear-gradient(180deg, var(--sun-50), #fff 55%); border-color: var(--sun-100); }
.chal__head { display: flex; align-items: center; gap: 10px; }
.chal__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: #fff; box-shadow: var(--sh-1); animation: wiggle 3s ease-in-out infinite; }
.chal__head > div { flex: 1; }
.chal__head b { display: block; font-size: 16px; font-weight: 950; }
.chal__head small { font-size: 12px; color: var(--text-3); }
.chal__xp { display: grid; place-items: center; height: 32px; padding: 0 10px; border-radius: 11px; background: var(--g-citrus); font-weight: 950; font-size: 14px; color: var(--ink); }
.chal__list { display: grid; gap: 6px; }
.chal__list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 13px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 750; }
.chal__list li span { flex: 1; }
.chal__list li > .glyph { width: 18px; height: 18px; color: var(--line-2); }
.chal__list li.is-ok { background: var(--mint-50); border-color: var(--mint-100); }
.chal__list li.is-ok span { text-decoration: line-through; color: var(--text-3); }
.chal__list li.is-ok > .glyph { color: var(--mint-500); }
.chal__streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.chal__streak span { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 11px; background: var(--s2); min-height: 48px; align-content: end; }
.chal__streak small { font-size: 10.5px; font-weight: 800; color: var(--text-3); }
.chal__streak .is-on { background: var(--orange-50); }
.chal__streak .is-today { background: #fff; box-shadow: inset 0 0 0 2px var(--orange-300); }
.chal.is-claimed .btn--primary, .chal [data-claim]:disabled { background: var(--mint-100); color: var(--mint-800); box-shadow: none; }
.chal.is-claimed .chal__xp { background: var(--mint-500); color: #fff; }

.mood { display: flex; flex-direction: column; gap: 12px; }
.mood__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mood__picks button { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1.5px solid var(--c100); border-radius: 16px; background: var(--c50); cursor: pointer; transition: .25s var(--bounce); }
.mood__picks button small { font-size: 12px; font-weight: 850; color: var(--c800); }
.mood__picks button:hover { transform: translateY(-2px); }
.mood__picks button[aria-selected="true"] { background: var(--cg); border-color: transparent; transform: scale(1.04); box-shadow: 0 12px 22px -14px var(--cglow); }
.mood__picks button[aria-selected="true"] small { color: #fff; }
.mood__out { min-height: 96px; }
.mood__ev { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: var(--c50); border: 1px dashed var(--c300); animation: fade-up .35s var(--ease) both; }
.mood__ev small { font-size: 11.5px; color: var(--c700); font-weight: 800; }
.mood__ev b { font-size: 14px; font-weight: 900; line-height: 1.6; }
.mood__ev a:hover b { color: var(--c700); }
.mood__ev span { font-size: 12px; color: var(--text-3); }

/* ==========================================================================
   صفحه‌ی رویداد: انتخاب صندلی، واکنش‌ها، عکس‌ها
   ========================================================================== */
.sp { display: grid; gap: 10px; padding: 14px; margin-bottom: 12px; border-radius: 20px; background: var(--c50); border: 1px solid var(--c100); }
.sp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sp__head b { font-size: 14px; font-weight: 900; }
.sp__head small { font-size: 11.5px; color: var(--c700); font-weight: 800; }
.sp__table { position: relative; width: min(100%, 250px); aspect-ratio: 1; margin: 4px auto; container-type: inline-size; }
.sp__table::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 6px solid #fff; background: radial-gradient(circle at 35% 30%, #fff8e8, #f3d3ad 60%, #e3b083); box-shadow: 0 16px 26px -16px rgb(120 70 20 / .5); }
.sp__top { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.sp-seat { position: absolute; left: var(--x, 50%); top: var(--y, 50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 2px solid var(--c300); border-radius: 50%; background: #fff; color: var(--c700); font-size: 12px; font-weight: 900; cursor: pointer;
  transform: translate(-50%, -50%); transition: background .2s, color .2s, box-shadow .25s, scale .25s var(--bounce); }
.sp-seat:hover:not(:disabled) { scale: 1.15; background: var(--c100); }
.sp-seat.is-picked { background: var(--cs); color: var(--con); border-color: transparent; scale: 1.2; box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 8px 18px -6px var(--cglow); }
.sp-seat.is-busy { background: var(--s3); border-color: transparent; color: var(--text-3); cursor: not-allowed; }
.sp-seat .glyph { width: 14px; height: 14px; }

.react { display: grid; gap: 12px; }
.react__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.react__head b { font-size: 15px; font-weight: 900; }
.react__head small { font-size: 12px; color: var(--text-3); }
.react__bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.react__bar button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; transition: transform .25s var(--bounce), border-color .2s, background .2s; }
.react__bar button:hover { transform: translateY(-3px); }
.react__bar button:hover .ico { animation: wiggle .8s var(--ease); }
.react__bar span { font-size: 11.5px; font-weight: 800; color: var(--text-2); }
.react__bar b { font-size: 13px; font-weight: 950; }
.react__bar button.is-on { border-color: var(--pink-300); background: var(--pink-50); }
.react__bar button.is-on b { color: var(--pink-600); }
@media (max-width: 560px) { .react__bar { gap: 5px; } .react__bar span { font-size: 10px; } .react__bar button { padding: 8px 2px; } }

.egal__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.egal__pic { aspect-ratio: 4 / 5; padding: 6px 6px 18px; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 12px 24px -14px rgb(24 22 45 / .5), 0 0 0 1px var(--line); rotate: var(--r); cursor: zoom-in; transition: rotate .35s var(--bounce), transform .35s var(--bounce); }
.egal__pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.egal__pic:hover { rotate: 0deg; transform: scale(1.05); }
@media (max-width: 560px) { .egal__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- ورود نمایشی ---------- */
.demo-q { display: grid; gap: 10px; margin-top: 18px; padding: 14px; border-radius: 22px; background: linear-gradient(135deg, var(--violet-50), var(--pink-50)); border: 1.5px dashed var(--violet-200); }
.demo-q__k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; color: var(--violet-800); }
.demo-q__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.demo-q__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--c100); border-radius: 16px; background: #fff; text-align: start; cursor: pointer; transition: transform .25s var(--bounce), box-shadow .25s, border-color .2s; }
.demo-q__btn:hover { transform: translateY(-2px); border-color: var(--c300); box-shadow: 0 14px 26px -16px var(--cglow); }
.demo-q__btn > span:not(.plate):not(.avatar) { flex: 1; min-width: 0; }
.demo-q__btn b { display: block; font-size: 13.5px; font-weight: 900; }
.demo-q__btn small { display: block; font-size: 11.5px; color: var(--text-3); }
.demo-q__btn > .glyph { width: 16px; height: 16px; color: var(--c500); }
@media (max-width: 560px) {
  .medals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .medal { padding: 14px 8px 10px; border-radius: 20px; }
  .medal__disc { width: 70px; height: 70px; }
  .medal__disc .ico { width: 32px; height: 32px; }
  .medal b { font-size: 13px; }
  .medal > small { font-size: 11px; min-height: 36px; }
  .medal__foot { flex-direction: column; gap: 4px; }
  .booklet__page--stamps { min-height: 260px; }
}

/* ==========================================================================
   درباره‌ی ما، تماس، قوانین
   ========================================================================== */
.ab-hero, .ct-hero, .tr-hero, .hp-hero { position: relative; padding: 46px 0 30px; overflow: hidden; isolation: isolate; }
.ab-hero .blob, .ct-hero .blob { z-index: -1; }
.ab-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ab-hero__copy { display: flex; flex-direction: column; gap: 18px; }
.ab-hero h1, .ct-hero h1, .tr-hero h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 950; line-height: 1.3; letter-spacing: -1px; text-wrap: balance; }
.ab-hero p, .ct-hero p, .tr-hero p { font-size: 16px; line-height: 2.05; color: var(--text-2); max-width: 580px; }
.ab-numbers { padding: 4px 0 0; }
.ab-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ab-stats span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 14px 16px; border-radius: var(--r-l); background: linear-gradient(160deg, var(--c50), #fff 80%); box-shadow: inset 0 0 0 1px var(--c100); }
.ab-stats .ico { grid-row: span 2; }
.ab-stats b { font-size: 28px; font-weight: 950; color: var(--c700); line-height: 1.2; }
.ab-stats small { font-size: 12px; color: var(--text-3); font-weight: 750; }
.ab-collage { position: relative; padding: 20px 30px 40px; }
.ab-collage__main { aspect-ratio: 4 / 3; border-radius: 32px; overflow: hidden; border: 8px solid #fff; box-shadow: 0 34px 60px -30px rgb(24 22 45 / .5); rotate: -2deg; }
.ab-collage__main img { width: 100%; height: 100%; object-fit: cover; }
.ab-pola { position: absolute; width: 120px; }
.ab-pola--0 { top: -6px; inset-inline-start: -4px; }
.ab-pola--1 { top: auto; bottom: 0; inset-inline-end: 0; }
.ab-why { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px; }
.ab-card--lead { grid-row: span 2; align-content: center; padding: 34px; background: linear-gradient(160deg, var(--c100), var(--c50) 50%, #fff); }
.ab-card--lead b { font-size: 26px; }
.ab-card--lead p { font-size: 15.5px; max-width: 46ch; }
.ab-card--lead .ab-card__ico { width: 120px; height: 120px; border-radius: var(--r-xl); }
.ab-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 30px; background: linear-gradient(180deg, var(--c50), #fff 70%); border: 1px solid var(--c100); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.ab-card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px var(--cglow); }
.ab-card__ico { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 26px; background: #fff; box-shadow: var(--sh-2); rotate: -6deg; }
.ab-card b { position: relative; font-size: 19px; font-weight: 950; }
.ab-card p { position: relative; font-size: 14px; color: var(--text-2); line-height: 2; }
/* v5: آنچه ساخته شده و زیر کاپوت */
.built { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.built__card { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: var(--r-xl); background: linear-gradient(165deg, var(--c50), #fff 55%); box-shadow: inset 0 0 0 1px var(--c100), var(--sh-1); }
.built__card header { display: flex; align-items: center; gap: 12px; }
.built__card header b { display: block; font-size: 18px; font-weight: 900; }
.built__card header small { font-size: 12px; font-weight: 750; color: var(--c700); }
.built__card ul { display: grid; gap: 8px; }
.built__card li { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: var(--r-s); background: #fff; box-shadow: inset 0 0 0 1px var(--c100); font-size: 13.5px; line-height: 1.8; }
.built__card li .glyph { flex: none; width: 17px; height: 17px; margin-top: 4px; color: var(--c500); }
.tech { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: 16px; }
.tech__item { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.tech__item b { font-size: 16px; font-weight: 900; }
.tech__item p { font-size: 13.5px; line-height: 1.95; color: var(--text-2); }
.tech__item--lead { grid-row: span 2; align-content: center; padding: 30px; background: linear-gradient(160deg, var(--c100), var(--c50) 50%, #fff); box-shadow: inset 0 0 0 1px var(--c200); }
.tech__item--lead b { font-size: 22px; }
.tech__item--lead p { font-size: 15px; }
@media (max-width: 960px) { .built { grid-template-columns: minmax(0, 1fr); } .tech { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tech__item--lead { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 560px) { .tech { grid-template-columns: minmax(0, 1fr); } }
.ab-values { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ab-values__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-val { display: grid; justify-items: start; gap: 6px; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ab-val b { font-size: 16px; font-weight: 900; }
.ab-val small { font-size: 12.5px; color: var(--text-3); line-height: 1.8; }
.ab-cats { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 30px; color: #fff; }
.ab-cats .kicker { color: var(--sun-300); }
.ab-cats .kicker::before { background: var(--sun-300); }
.ab-cats > b { font-size: 22px; font-weight: 950; line-height: 1.5; }
.ab-cats__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-cats__list .tag { background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .16); height: 36px; transition: .2s; }
.ab-cats__list .tag:hover { background: rgb(255 255 255 / .22); transform: translateY(-2px); }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mate { display: grid; justify-items: center; gap: 6px; padding: 18px 16px 20px; border-radius: 30px; background: #fff; border: 1px solid var(--line); text-align: center; box-shadow: var(--sh-1); transition: transform .3s var(--bounce); }
.mate:hover { transform: translateY(-6px) rotate(-1deg); }
.mate__pic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 24px; overflow: hidden; margin-bottom: 8px; background: radial-gradient(circle at 30% 25%, #fff, var(--c100) 60%, var(--c200)); }
.mate__pic > img:not(.ico) { width: 100%; height: 100%; object-fit: cover; }
.mate b { font-size: 16px; font-weight: 950; }
.mate__role { font-size: 12.5px; font-weight: 850; color: var(--c700); }
.mate small { font-size: 12.5px; color: var(--text-3); line-height: 1.8; }
.road { padding: 30px; border-radius: 34px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.road__head { display: grid; gap: 8px; margin-bottom: 22px; }
.road__head h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 950; }
.road__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.road__list::before { content: ""; position: absolute; top: 25px; inset-inline: 30px; height: 4px; border-radius: 4px; background: linear-gradient(to left, var(--mint-400) 0 38%, var(--violet-400) 38% 55%, var(--line-2) 55%); }
.road__item { position: relative; display: grid; justify-items: start; gap: 6px; }
.road__dot { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--c100); color: var(--c700); border: 4px solid #fff; box-shadow: var(--sh-2); }
.road__dot .glyph { width: 24px; height: 24px; }
.road__item.is-done .road__dot { background: var(--mint-500); color: #fff; }
.road__item.is-now .road__dot { background: var(--cg); color: #fff; animation: count-beat 2.4s ease-in-out infinite; }
.road__item b { font-size: 14.5px; font-weight: 900; line-height: 1.6; }
.road__item small { font-size: 12.5px; color: var(--text-3); line-height: 1.8; }
@media (max-width: 1080px) { .ab-hero__in, .ab-values { grid-template-columns: minmax(0, 1fr); } .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .road__list { grid-template-columns: minmax(0, 1fr); } .road__list::before { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: 25px; width: 4px; height: auto; background: linear-gradient(to bottom, var(--mint-400) 0 38%, var(--violet-400) 38% 55%, var(--line-2) 55%); } .road__item { grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; } .road__item > :not(.road__dot) { grid-column: 2; } .road__dot { grid-row: span 3; } }
@media (max-width: 1080px) { .ab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ab-why { grid-template-columns: minmax(0, 1fr); } .ab-card--lead { grid-row: auto; } .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-values__grid { grid-template-columns: minmax(0, 1fr); } .ab-pola { width: 86px; } .road { padding: 20px; } }

.ct-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.ct-hero__in > div:first-child { display: flex; flex-direction: column; gap: 16px; }
.ct-status { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--s2); color: var(--text-2); font-size: 13px; font-weight: 800; }
.ct-status .live-dot { background: var(--text-3); }
.ct-status.is-open { background: var(--mint-50); color: var(--mint-800); }
.ct-status.is-open .live-dot { background: var(--mint-500); }
.ct-cards { display: grid; gap: 12px; }
.ct-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: #fff; border: 1px solid var(--c100); box-shadow: 0 16px 30px -24px var(--cglow); transition: transform .3s var(--bounce); }
.ct-card:hover { transform: translateX(-6px); }
.ct-card__ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 19px; background: var(--c50); flex: none; }
.ct-card small { display: block; font-size: 12px; color: var(--text-3); font-weight: 700; }
.ct-card a, .ct-card b { display: block; font-size: 17px; font-weight: 900; color: var(--ink); }
.ct-card a:hover { color: var(--c700); }
.ct-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ct-topics { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ct-topics .radio-card { padding: 10px; }
.ct-topics .radio-card__ico { width: 34px; height: 34px; border-radius: 11px; }
.ct-topics .radio-card b { font-size: 12.5px; }
.ct-faq { display: grid; gap: 8px; color: #fff; }
.ct-faq .kicker { color: var(--sun-300); }
.ct-faq .kicker::before { background: var(--sun-300); }
.ct-faq > b { font-size: 18px; font-weight: 950; margin-bottom: 4px; }
.ct-faq a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .08); font-weight: 800; font-size: 13.5px; transition: .2s; }
.ct-faq a:hover { background: rgb(255 255 255 / .16); transform: translateX(-4px); }
.ct-faq .glyph { width: 18px; height: 18px; color: var(--sun-300); }
.ct-venue { display: grid; gap: 8px; justify-items: start; background: linear-gradient(180deg, var(--c50), #fff); }
.ct-venue b { font-size: 16px; font-weight: 900; }
.ct-venue small { font-size: 13px; color: var(--text-2); line-height: 1.9; }
@media (max-width: 960px) { .ct-hero__in, .ct-main { grid-template-columns: minmax(0, 1fr); } }

.tr-hero .wrap { display: grid; gap: 14px; }
.tr-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.tr-keys span { display: grid; gap: 4px; justify-items: start; padding: 16px; border-radius: 22px; background: var(--c50); border: 1px solid var(--c100); }
.tr-keys b { font-size: 18px; font-weight: 950; color: var(--c800); }
.tr-keys small { font-size: 12px; color: var(--text-3); font-weight: 700; }
.tr { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.tr-toc { position: sticky; top: 96px; display: grid; gap: 6px; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.tr-toc > b { font-size: 14px; font-weight: 950; margin-bottom: 4px; }
.tr-toc a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; font-weight: 800; color: var(--text-2); transition: .2s; }
.tr-toc a .ico { flex: none; }
.ct-faq > .tag, .ab-cats > .tag { align-self: flex-start; width: max-content; }
.tr-toc a:hover { background: var(--c50); color: var(--ink); }
.tr-body { display: grid; gap: 18px; }
.tr-sec { display: grid; gap: 14px; padding: 24px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); scroll-margin-top: 90px; }
.tr-sec header { display: flex; align-items: center; gap: 14px; }
.tr-sec header small { font-size: 12px; color: var(--c700); font-weight: 850; }
.tr-sec h2 { font-size: 21px; font-weight: 950; }
.tr-sec ul { display: grid; gap: 10px; }
.tr-sec li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 2; color: var(--text-2); }
.tr-sec li .glyph { width: 18px; height: 18px; flex: none; margin-top: 6px; color: var(--c500); }
.tr-sec:target { box-shadow: 0 0 0 3px var(--c300), var(--sh-2); }
.tr-foot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.tr-foot .glyph { width: 15px; height: 15px; }
@media (max-width: 960px) { .tr { grid-template-columns: minmax(0, 1fr); } .tr-toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-toc > b { grid-column: 1 / -1; } .tr-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- جلوه‌های سبک تکمیلی ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .gtext, .live h2 .gtext, .ab-hero h1 .gtext { background-size: 220% auto; animation: gshift 7s ease-in-out infinite; }
  .cat:hover .cat__art .ico, .ab-val:hover .plate .ico, .ct-card:hover .ct-card__ico .ico { animation: wiggle .8s var(--ease); }
  .shead__ico .ico { transition: transform .45s var(--bounce); }
  .shead:hover .shead__ico .ico { transform: rotate(-10deg) scale(1.12); }
}
@keyframes gshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* اسکرین‌شات‌های اپ در صفحه‌ی دریافت */
.app-shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 20px; overflow-x: auto; padding: 14px 6px 24px; scroll-snap-type: x mandatory; }
.app-shot { aspect-ratio: 9 / 16; padding: 8px; border: 0; border-radius: 34px; background: var(--ink); box-shadow: 0 30px 50px -28px rgb(24 22 45 / .6); rotate: var(--r); cursor: zoom-in; scroll-snap-align: center; transition: rotate .4s var(--bounce), transform .4s var(--bounce); }
.app-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; }
.app-shot:hover { rotate: 0deg; transform: translateY(-8px) scale(1.03); }


/* ==========================================================================
   نسخه‌ی ۵: راهنما (/help)
   ========================================================================== */
.hp-hero .blob { z-index: -1; }
.hp-hero__in { display: grid; justify-items: start; gap: 14px; }
.hp-hero h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 950; line-height: 1.3; letter-spacing: -1px; text-wrap: balance; }
.hp-hero p { font-size: 16px; line-height: 2; color: var(--text-2); max-width: 56ch; }
.hp-search { display: flex; align-items: center; gap: 10px; width: min(100%, 620px); height: 60px; padding: 0 16px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2), 0 18px 36px -24px var(--violet-glow); transition: box-shadow .2s; }
.hp-search:focus-within { box-shadow: inset 0 0 0 2px var(--violet-400), 0 18px 36px -20px var(--violet-glow); }
.hp-search > .glyph { width: 22px; height: 22px; color: var(--violet-500); flex: none; }
.hp-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 16px; outline: none; }
.hp-search kbd { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; background: var(--s2); color: var(--text-3); font-size: 13px; box-shadow: inset 0 -2px 0 var(--line-2); }
.flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.flow__step { position: relative; display: grid; justify-items: start; align-content: start; gap: 6px; padding: 18px 16px 16px; border-radius: var(--r-l); background: linear-gradient(170deg, var(--c50), #fff 70%); box-shadow: inset 0 0 0 1px var(--c100); }
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 44px; inset-inline-end: -12px; width: 12px; height: 2px; background: repeating-linear-gradient(to left, var(--c300) 0 4px, transparent 4px 7px); }
.flow__ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--r-m); background: #fff; box-shadow: 0 12px 22px -14px var(--cglow), inset 0 0 0 1px var(--c100); rotate: -5deg; }
.flow__step b { font-size: 15px; font-weight: 900; margin-top: 4px; }
.flow__step small { font-size: 12.5px; line-height: 1.8; color: var(--text-2); }
.flow__chip { margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--cs); color: var(--con); font-size: 12px; font-weight: 800; }
@media (max-width: 1100px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow__step:nth-child(3)::after { display: none; } }
@media (max-width: 560px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow__step::after { display: none; } }
.hp { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.hp-side { position: sticky; top: 110px; display: grid; gap: 14px; }
.hp-cats { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.hp-cat { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-m); background: none; font-size: 14px; font-weight: 800; color: var(--text-2); text-align: start; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.hp-cat .glyph { width: 20px; height: 20px; }
.hp-cat span { margin-inline-start: auto; min-width: 26px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--c100); color: var(--c800); font-size: 12px; }
.hp-cat:hover { background: var(--c50); color: var(--text); }
.hp-cat:active { transform: scale(.98); }
.hp-cat.is-on { background: linear-gradient(100deg, var(--c100), var(--c50)); color: var(--c800); box-shadow: inset 0 0 0 1.5px var(--c300); }
.hp-help { display: grid; justify-items: start; gap: 6px; padding: 20px; border-radius: var(--r-l); }
.hp-help b { font-size: 17px; font-weight: 900; }
.hp-help small { font-size: 12.5px; opacity: .8; }
.hp-help .btn { margin-top: 6px; }
.hp-list { columns: 2 300px; column-gap: 14px; }
.hp-qa { break-inside: avoid; display: grid; gap: 8px; margin-bottom: 14px; padding: 18px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); border-top: 4px solid var(--c400); scroll-margin-top: 110px; }
.hp-qa:target { box-shadow: inset 0 0 0 2px var(--c400), 0 18px 34px -22px var(--cglow); }
.hp-qa h3 { font-size: 15.5px; font-weight: 900; line-height: 1.7; }
.hp-qa p { font-size: 14px; line-height: 2; color: var(--text-2); }
.hp-qa footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.hp-qa__link { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--text-3); transition: background .2s, color .2s; }
.hp-qa__link:hover { background: var(--c50); color: var(--c700); }
.hp-qa__link .glyph { width: 16px; height: 16px; }
.hp-qa[hidden] { display: none; }
.hp-empty { column-span: all; }
.hp-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hp-doc { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-l); background: linear-gradient(160deg, var(--c50), #fff 70%); box-shadow: inset 0 0 0 1px var(--c100); transition: transform .2s var(--ease), box-shadow .2s; }
.hp-doc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--c300), 0 16px 30px -20px var(--cglow); }
.hp-doc:active { transform: translateY(0) scale(.99); }
.hp-doc > div { flex: 1; }
.hp-doc b { display: block; font-size: 15px; font-weight: 900; }
.hp-doc small { font-size: 12.5px; color: var(--text-3); }
.hp-doc > .glyph { width: 20px; height: 20px; color: var(--c600); }
@media (max-width: 900px) { .hp { grid-template-columns: minmax(0, 1fr); } .hp-side { position: static; } .hp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ct-biz__list { display: grid; gap: 8px; margin-top: 12px; }
.ct-biz__list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-s); background: var(--s1); }
.ct-biz__list span { font-size: 12px; color: var(--text-3); font-weight: 700; }
.ct-biz__list b { font-size: 14px; font-weight: 800; }


/* ---------- تقویم دو هفته (۵٫۱): نوار روزها، پنل روز، خلاصه‌ی کناری ---------- */
.agx { display: grid; gap: 16px; }
.agx__strip { display: flex; gap: 10px; overflow-x: auto; padding: 12px 10px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; overscroll-behavior-x: contain; }
.agx__sep { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 999px; background: var(--s2); font-size: 11px; font-weight: 800; color: var(--text-3); white-space: nowrap; }
.agx__sep .glyph { width: 12px; height: 12px; }
.agx-chip { position: relative; flex: 1 0 66px; min-width: 66px; display: grid; justify-items: center; gap: 1px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--text-2); cursor: pointer; scroll-snap-align: center; transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s; }
.agx-chip:hover { transform: translateY(-2px); border-color: var(--c200); }
.agx-chip__w { font-size: 11.5px; font-weight: 800; color: var(--text-3); }
.agx-chip__d { font-size: 24px; font-weight: 950; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.agx-chip__m { font-size: 11px; font-weight: 700; }
.agx-chip__dots { display: flex; gap: 3px; height: 6px; margin-top: 5px; }
.agx-chip__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c400); }
.agx-chip__n { position: absolute; z-index: 1; top: -8px; inset-inline-end: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; border: 2px solid #fff; padding: .1em 5px 0; border-radius: 999px; background: var(--cs); color: #fff; font-size: 11px; font-weight: 900; line-height: 1; box-shadow: 0 4px 10px -4px var(--cglow); }
.agx-chip.is-empty { background: var(--s1); }
.agx-chip.is-empty .agx-chip__d { color: var(--text-3); }
.agx-chip.is-today { border-color: var(--violet-300); box-shadow: inset 0 0 0 1px var(--violet-300); }
.agx-chip.is-today .agx-chip__w { color: var(--violet-600); }
.agx-chip[aria-selected="true"] { background: var(--cg); border-color: transparent; box-shadow: 0 14px 26px -14px var(--cglow); transform: translateY(-3px); }
.agx-chip.is-empty[aria-selected="true"] { background: linear-gradient(135deg, #8f8ba6, #5d5975); }
.agx-chip[aria-selected="true"] :is(.agx-chip__w, .agx-chip__d, .agx-chip__m) { color: #fff; }
.agx-chip[aria-selected="true"] .agx-chip__dots i { background: rgb(255 255 255 / .9); }
.agx-chip[aria-selected="true"] .agx-chip__n { background: #fff; color: var(--c700); box-shadow: none; }
.agx-chip:focus-visible { outline: 3px solid var(--violet-300); outline-offset: 2px; }
.agx__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.agx__days { min-width: 0; }
.agx-day { display: grid; gap: 12px; padding: 18px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.agx-day__head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.agx-day__head b { display: block; font-size: 18px; font-weight: 900; }
.agx-day__head small { font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.agx-list { display: grid; gap: 10px; }
.agx-ev { display: grid; grid-template-columns: 72px 48px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: linear-gradient(270deg, var(--c50), #fff 75%); border: 1px solid var(--c100); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.agx-ev:hover { transform: translateX(-3px); border-color: var(--c300); box-shadow: 0 14px 24px -18px var(--cglow); }
.agx-ev:active { transform: scale(.99); }
.agx-ev__time { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 14px; background: var(--cs); color: var(--con); }
.agx-ev__time b { font-size: 16px; font-weight: 950; line-height: 1.2; font-variant-numeric: tabular-nums; }
.agx-ev__time small { font-size: 10.5px; opacity: .9; }
.agx-ev__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #fff; box-shadow: var(--sh-1); }
.agx-ev__main { display: grid; gap: 3px; min-width: 0; }
.agx-ev__main > b { font-size: 14.5px; font-weight: 850; line-height: 1.5; overflow-wrap: anywhere; }
.agx-ev__main > small { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--text-3); }
.agx-ev__main > small .glyph { width: 13px; height: 13px; flex: none; color: var(--c500); }
.agx-ev__seats { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agx-ev__seats i { position: relative; flex: none; width: 70px; height: 6px; border-radius: 6px; background: var(--c100); overflow: hidden; }
.agx-ev__seats i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--f); border-radius: inherit; background: var(--c500); }
.agx-ev__seats small { font-size: 11.5px; font-weight: 750; color: var(--c700); }
.agx-ev__price { display: grid; justify-items: end; gap: 1px; text-align: end; }
.agx-ev__price b { font-size: 16px; font-weight: 950; font-variant-numeric: tabular-nums; }
.agx-ev__price small { font-size: 10.5px; color: var(--text-3); }
.agx-ev__off { padding: .1em 7px 0; border-radius: 999px; background: var(--pink-500); color: #fff; font-size: 10.5px; font-weight: 900; line-height: 1.6; }
.agx-ev__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--c100); color: var(--c700); transition: .25s var(--ease); }
.agx-ev__go .glyph { width: 18px; height: 18px; }
.agx-ev:hover .agx-ev__go { background: var(--cs); color: var(--con); }
.agx-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 16px; border-radius: 18px; background: repeating-linear-gradient(135deg, var(--s1) 0 12px, #fff 12px 24px); border: 2px dashed var(--line-2); }
.agx-empty > div { display: grid; gap: 3px; flex: 1 1 200px; }
.agx-empty b { font-weight: 850; }
.agx-empty small { font-size: 12.5px; color: var(--text-2); }
.agx__side { display: grid; gap: 10px; }
.agx-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 22px; background: var(--g-lagoon); color: #fff; box-shadow: 0 16px 30px -18px var(--blue-glow); }
.agx-sum__big b { display: block; font-size: 40px; font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; }
.agx-sum__big small { font-size: 12px; font-weight: 750; opacity: .9; }
.agx-sum__facts { display: grid; gap: 6px; }
.agx-sum__facts li { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgb(255 255 255 / .18); font-size: 12px; font-weight: 750; white-space: nowrap; }
.agx-sum__facts .glyph { width: 14px; height: 14px; }
.agx-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 4px; height: 100px; padding: 12px 12px 8px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.agx-bars__b { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 4px; height: 100%; }
.agx-bars__b i { align-self: end; width: 100%; max-width: 14px; height: var(--h); min-height: 3px; border-radius: 4px 4px 2px 2px; background: var(--blue-300); }
.agx-bars__b.is-today i { background: var(--violet-500); }
.agx-bars__b small { font-size: 9.5px; font-weight: 700; color: var(--text-3); }
.agx-pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--c100); border-radius: 18px; background: var(--c50); text-align: start; color: var(--ink); font: inherit; cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.agx-pick:hover { border-color: var(--c300); transform: translateY(-2px); }
.agx-pick > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.agx-pick small { font-size: 11.5px; font-weight: 800; color: var(--c700); }
.agx-pick b { font-size: 13px; font-weight: 850; overflow-wrap: anywhere; }
.agx-pick > .glyph { flex: none; width: 16px; height: 16px; color: var(--c600); }
.agx-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.agx-cats__i { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--c50); border: 1px solid var(--c100); font-size: 12px; font-weight: 750; }
.agx-cats__i b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: .1em 4px 0; border-radius: 999px; background: var(--cs); color: var(--con); font-size: 10.5px; line-height: 1; }
@media (max-width: 1100px) { .agx__body { grid-template-columns: minmax(0, 1fr); } .agx__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agx-cats { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .agx__strip { margin-inline: -16px; padding-inline: 18px; scroll-padding-inline: 18px; }
  .agx-chip { flex: 0 0 64px; min-width: 64px; }
  .agx-day { padding: 14px; border-radius: 22px; }
  .agx-ev { grid-template-columns: 62px minmax(0, 1fr); gap: 6px 10px; padding: 10px; }
  .agx-ev__ico, .agx-ev__go { display: none; }
  .agx-ev__time { grid-row: span 2; align-self: stretch; align-content: center; }
  .agx-ev__price { grid-column: 2; display: flex; align-items: baseline; justify-content: flex-start; gap: 5px; }
  .agx-ev__seats i { width: 54px; }
  .agx__side { grid-template-columns: minmax(0, 1fr); }
}

.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.refund { display: grid; gap: 14px; padding: 24px; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--mint-100), var(--mint-50) 45%, #fff); box-shadow: inset 0 0 0 1px var(--mint-200), 0 26px 50px -32px var(--mint-glow, var(--cglow)); }
.refund__head { display: flex; align-items: center; gap: 12px; }
.refund__head b { display: block; font-size: 18px; font-weight: 900; }
.refund__head small { font-size: 12.5px; color: var(--text-2); }
.refund__q { font-size: 15px; color: var(--text-2); }
.refund__q b { color: var(--ink); font-weight: 900; }
.refund__out { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.refund__pct { font-size: 22px; font-weight: 950; color: var(--c700); }
.refund__pct b { font-size: 64px; line-height: 1; }
.refund__amt { display: grid; padding: 10px 16px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--c100); font-weight: 800; }
.refund__amt small { font-size: 12px; color: var(--text-3); }
.refund__amt b { font-size: 22px; font-weight: 950; }
.refund__range { width: 100%; height: 28px; accent-color: var(--mint-600); cursor: pointer; }
.refund__zones { display: flex; gap: 4px; }
.refund__zones span { flex: 0 0 calc(var(--w) - 3px); display: grid; padding: 8px 10px; border-radius: var(--r-s); background: var(--c100); color: var(--c800); transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.refund__zones span.is-on { background: var(--cs); color: var(--con); box-shadow: 0 10px 20px -12px var(--cglow); transform: translateY(-2px); }
.refund__zones b { font-size: 15px; font-weight: 950; }
.refund__zones small { font-size: 11px; opacity: .85; white-space: nowrap; }
.refund__axis { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 750; color: var(--text-3); }
.refund__axis span { display: inline-flex; align-items: center; gap: 4px; }
.refund__axis .glyph { width: 13px; height: 13px; color: var(--pink-500); }
.refund__note { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.9; color: var(--text-2); }
.refund__note .glyph { flex: none; width: 15px; height: 15px; margin-top: 5px; color: var(--mint-600); }
.trust__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fact-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-l); background: linear-gradient(160deg, var(--c50), #fff 75%); box-shadow: inset 0 0 0 1px var(--c100); }
.fact-card b { display: block; font-size: 14.5px; font-weight: 900; line-height: 1.6; }
.fact-card small { font-size: 12.5px; line-height: 1.85; color: var(--text-2); }
@media (max-width: 960px) { .trust { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .trust__facts { grid-template-columns: minmax(0, 1fr); } .refund__pct b { font-size: 48px; } }

.host { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: center; padding: 30px; border-radius: var(--r-xl); overflow: hidden; }
.host__copy { display: grid; justify-items: start; gap: 12px; }
.host__art { rotate: -8deg; filter: drop-shadow(0 14px 16px rgb(120 70 20 / .3)); }
.host h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 950; line-height: 1.4; text-wrap: balance; color: var(--ink); }
.host p { font-size: 15px; line-height: 2; color: rgb(24 22 45 / .78); max-width: 48ch; }
.host__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.host__steps li { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: var(--r-l); background: rgb(255 255 255 / .82); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 12px 24px -18px rgb(120 70 20 / .45); }
.host__ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--r-m); background: var(--c100); }
.host__steps b { display: block; font-size: 14.5px; font-weight: 900; }
.host__steps small { font-size: 12.5px; line-height: 1.8; color: var(--text-2); }
@media (max-width: 900px) { .host { grid-template-columns: minmax(0, 1fr); padding: 22px; } }
@media (max-width: 520px) { .host__steps { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   نسخه‌ی ۵٫۱: پایداری موبایل و بازطراحی ویجت‌ها
   ========================================================================== */

/* ---------- زبانه‌های فیلتر با نشانگر لغزنده ---------- */
.tabs--ink { position: relative; isolation: isolate; }
.tabs--ink.has-ink [aria-selected="true"] { background: transparent; box-shadow: none; }
.tabs__ink { position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 13px; background: #fff; box-shadow: var(--sh-2); transition: transform .35s var(--ease), width .35s var(--ease); pointer-events: none; }
.tabs--ink:not(.has-ink) .tabs__ink { opacity: 0; }
.tabs [role="tab"] .count { transition: background .25s, color .25s; }
.ev-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; }
#events .ev-filter .tabs { margin-bottom: 0; }
.ev-filter__sum { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.ev-filter__sum .glyph { width: 16px; height: 16px; color: var(--pink-500); }
.is-swapping > :not([hidden]) { animation: tab-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes tab-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.ev-bento.is-filtered .ev-bento__feature { grid-row: auto; }
.ev-bento.is-filtered .ev-bento__feature .ev__cover { min-height: 0; height: 200px; flex: none; }
.tabs-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 22px; border-radius: var(--r-l); background: repeating-linear-gradient(135deg, var(--s1) 0 12px, #fff 12px 24px); border: 2px dashed var(--line-2); animation: tab-in .4s var(--ease) both; }
.tabs-empty > div { display: grid; gap: 4px; flex: 1 1 220px; }
.tabs-empty b { font-size: 15px; font-weight: 850; }
.tabs-empty small { font-size: 13px; color: var(--text-2); }
@media (max-width: 640px) {
  .ev-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ev-filter .tabs { width: auto; max-width: none; min-width: 0; margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px); border-radius: 0; background: none; scroll-padding-inline: var(--gutter, 16px); }
  .ev-filter .tabs [role="tab"] { background: var(--s2); }
  .ev-filter .tabs.has-ink [aria-selected="true"] { background: transparent; }
  .ev-filter__sum { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .tabs__ink { transition: none; } .is-swapping > * { animation: none; } }

/* ---------- کارت‌ها در نمایشگرهای باریک (و متن بزرگ‌شده‌ی گوشی) ---------- */
.ev__title, .qz-q, .qz-head h3, .wh-head h3, .deal__body b { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .ev__body { padding: 14px 14px 10px; gap: 9px; }
  .ev__foot { flex-wrap: wrap; padding: 12px 14px 14px; row-gap: 8px; }
  .ev__head { gap: 10px; }
  .ev__title { font-size: 15.5px; }
  .ev--feature .ev__title { font-size: 18px; }
  .ev--feature .ev__cover { height: 190px; }
  .ev__badges { gap: 5px; }
  .ev__badges .badge, .ev__badges .tag { height: 26px; padding-inline: 9px; font-size: 11.5px; }
  .ev__seats { flex-wrap: wrap; row-gap: 6px; }
  .ev__facts li { font-size: 12.5px; }
  .quiz, .wheel { padding: 18px 14px; border-radius: 26px; gap: 14px; }
  .qz-head h3 { font-size: 20px; }
  .qz-q { font-size: 16px; align-items: flex-start; }
  .qz-q span { flex: none; }
  .qz-opt { min-height: 62px; padding: 10px 12px; gap: 10px; font-size: 13px; border-radius: 16px; }
  .wh-head h3 { font-size: 18px; }
  .wh-spin { width: 76px; height: 76px; font-size: 13.5px; }
  .deal { padding: 18px 16px; }
}

/* ---------- گردونه: دکمه‌ی صدا و حالت چرخش ---------- */
.wh-head__row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wh-sound { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / .22); border-radius: 12px; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background .2s, transform .2s var(--bounce); }
.wh-sound:hover { background: rgb(255 255 255 / .22); }
.wh-sound:active { transform: scale(.94); }
.wh-sound .glyph { width: 18px; height: 18px; }
.wh-sound[aria-pressed="true"] .wh-sound__off, .wh-sound[aria-pressed="false"] .wh-sound__on { display: none; }
.wh-sound[aria-pressed="false"] { color: rgb(255 255 255 / .6); }
.wheel.is-spinning .wh-spin { cursor: progress; }
.wheel.is-spinning .wh-spin::before { animation: none; opacity: 0; }
.wh-spin:disabled { opacity: 1; }

/* ---------- داک شناور دسکتاپ (۵٫۱): میان‌بر بخش‌های همین صفحه، نزدیک‌ترین دورهمی، بازگشت به بالا ---------- */
.dock { position: fixed; z-index: var(--z-sticky); left: 50%; bottom: 18px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 40px); padding: 7px; border-radius: 24px; background: rgb(24 22 45 / .88); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); color: #fff; box-shadow: 0 24px 50px -20px rgb(24 22 45 / .6), inset 0 0 0 1px rgb(255 255 255 / .1); transform: translate(-50%, 150%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .3s; }
.dock.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.dock__top { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: rgb(255 255 255 / .08); color: #fff; transition: background .2s; }
.dock__top:hover { background: rgb(255 255 255 / .16); }
.dock__top .glyph { width: 18px; height: 18px; }
.dock__ring { position: absolute; inset: 2px; width: 40px; height: 40px; transform: rotate(-90deg); }
.dock__ring circle { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 3; }
.dock__ring .dock__prog { stroke: var(--sun-300); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.dock__secs { display: flex; gap: 3px; min-width: 0; }
.dock__chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: .1em 12px 0; border-radius: 15px; color: rgb(255 255 255 / .78); font-size: 13px; font-weight: 750; white-space: nowrap; transition: background .25s, color .25s; }
.dock__chip .glyph { flex: none; width: 18px; height: 18px; }
.dock__chip:hover { background: rgb(255 255 255 / .1); color: #fff; }
.dock__chip[aria-current] { background: #fff; color: var(--ink); }
.dock__chip span { display: inline-block; max-width: 110px; overflow: hidden; }
.dock__next { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 5px 12px; border-radius: 16px; background: var(--cs); color: var(--con); transition: transform .25s var(--ease), box-shadow .25s; }
.dock__next:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px var(--cglow); }
.dock__next-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: rgb(255 255 255 / .92); }
.dock__next-txt { display: grid; line-height: 1.3; }
.dock__next-txt small { font-size: 10.5px; opacity: .85; }
.dock__next-txt b { font-size: 12.5px; font-weight: 850; white-space: nowrap; }
.dock__timer { display: inline-grid; place-items: center; height: 26px; padding: .1em 9px 0; border-radius: 999px; background: rgb(0 0 0 / .2); font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock__timer.is-hot { background: var(--pink-500); }
.dock__timer .cd-d { display: inline-block; width: .78em; text-align: center; }
@media (max-width: 1280px) { .dock__next-txt small { display: none; } }
@media (max-width: 1000px) { .dock { display: none; } }
@media (prefers-reduced-motion: reduce) { .dock { transition: opacity .2s; transform: translate(-50%, 0); } }

/* ---------- نوار پایین موبایل در صفحه‌های عمومی ---------- */
.mbar { display: none; }
@media (max-width: 1000px) {
  .page-public { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mbar { display: grid; }
  .mbar .tabbar__center .glyph { background: var(--g-aurora); box-shadow: 0 12px 24px -10px var(--violet-glow), 0 0 0 5px #fff; }
}
/* وقتی کیبورد برای پر کردن فرم باز است، نوارهای پایین کنار می‌روند تا روی فیلدها نیفتند */
@media (max-width: 1000px) { body:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) :is(.mbar, .tabbar) { display: none; } }