/* ==========================================================================
   Joyno v3: core: base, layout, decoration and the shared component library.
   Colours come from tokens.css (generated by design/palette_v3.py).
   A family class (.f-violet, .f-pink, …) sets --c50…--c900, --cs, --con, --cg, --cglow.
   ========================================================================== */

/* فونت سایت (نسخه‌ی ۵): کوک (KookFaNum) از پوشه‌ی Fonts در روت پروژه؛ دو وزن معمولی و ضخیم.
   همه‌ی وزن‌های ۱۰۰ تا ۵۵۰ به «معمولی» و ۵۵۰ تا ۹۰۰ به «ضخیم» می‌رسند. */
/* متریک عمودی: جعبه‌ی خط دور بدنه‌ی حروف فارسی متمرکز می‌شود تا متن در برچسب‌ها و دکمه‌ها وسط بنشیند؛ عددهای تنها (حباب شمارنده و حلقه) جداگانه کمی پایین آورده شده‌اند */
@font-face {
  font-family: "Kook";
  src: url("../../Fonts/KookFaNum-Regular.woff2") format("woff2"), url("../../Fonts/KookFaNum-Regular.woff") format("woff");
  ascent-override: 96%;
  descent-override: 59%;
  line-gap-override: 0%;
  font-weight: 100 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kook";
  src: url("../../Fonts/KookFaNum-Bold.woff2") format("woff2"), url("../../Fonts/KookFaNum-Bold.woff") format("woff");
  ascent-override: 96%;
  descent-override: 59%;
  line-gap-override: 0%;
  font-weight: 551 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Kook", Tahoma, sans-serif;
  /* کوک رقم‌های لاتین را هم فارسی می‌کشد؛ کد سفارش، ایمیل و آدرس‌ها با فونت لاتین سیستم نمایش داده می‌شوند */
  --font-latin: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* قانون گوشه‌ها (v4.5): دکمه و ورودی ۱۲ تا ۲۰ (بسته به اندازه)، برچسب و نشان کامل‌گرد (pill)،
     خانه‌های داخل کارت --r-s/--r-m، کارت‌ها --r-l، بلوک‌های بزرگ و بخش‌ها --r-xl. هر چیز داخلی گوشه‌ی تنگ‌تری از ظرفش دارد. */
  --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 22px; --r-xl: 30px;
  /* لایه‌ها (v4.5): فقط این اعداد؛ هیچ z-index دلخواه دیگری در لایه‌های سراسری نیست */
  --z-below: -1; --z-base: 0; --z-raised: 1; --z-float: 3; --z-sticky: 60; --z-scrim: 65; --z-pop: 80; --z-tabbar: 90;
  --z-drawer: 120; --z-toast: 150; --z-skip: 200; --z-modal: 200; --z-tip: 300; --z-fx: 400; --z-grain: 500;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --top: 84px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* neutral and white families for states that carry no hue */
.f-gray { --c50: var(--s1); --c100: var(--s2); --c200: var(--line); --c300: var(--line-2); --c400: #b9b6cc; --c500: #8f8ba6; --c600: #6f6b88; --c700: var(--text-2); --c800: var(--ink-2); --c900: var(--ink); --cs: #6f6b88; --con: #fff; --cglow: rgb(24 22 45 / .18); --ca12: rgb(24 22 45 / .06); --cg: linear-gradient(135deg, #b9b6cc, #6f6b88); }
.f-white { color: #fff; }

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.8; font-size-adjust: .5; color: var(--text); background: var(--white);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: 1.35; font-weight: 850; letter-spacing: -.2px; }
::selection { background: var(--violet-200); color: var(--ink); }
:focus-visible { outline: 3px solid var(--violet-300); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: var(--z-skip); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ltr { direction: ltr; text-align: left; unicode-bidi: plaintext; }
.ltr, [dir="ltr"], input[type="email"], input[type="url"] { font-family: var(--font-latin); }
code, kbd { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.strong { font-weight: 800; }
.nowrap { white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.glyph { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
.ico { flex: none; }

/* ---------- layout ---------- */
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(1240px, 100% - 56px); } }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: var(--gap, 12px); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 8px); align-items: center; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: var(--gap, 20px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap, 18px); }
.s-2 { grid-column: span 2; } .s-3 { grid-column: span 3; } .s-4 { grid-column: span 4; } .s-5 { grid-column: span 5; } .s-6 { grid-column: span 6; }
.s-7 { grid-column: span 7; } .s-8 { grid-column: span 8; } .s-9 { grid-column: span 9; } .s-12 { grid-column: span 12; }
.r-2 { grid-row: span 2; }
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > [class*="s-"] { grid-column: span 6; }
  .bento > .t-12 { grid-column: span 12; }
  .bento > .t-4 { grid-column: span 4; }
  .r-2 { grid-row: auto; }
}
@media (max-width: 680px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .g-4.m-2, .g-3.m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > [class*="s-"], .bento > .t-4 { grid-column: span 12; }
  .bento > .m-6 { grid-column: span 6; }
}
.hide-m { }
@media (max-width: 760px) { .hide-m { display: none !important; } }
@media (min-width: 761px) { .only-m { display: none !important; } }

/* ---------- decoration ---------- */
/* v4.5: بافت دانه‌ای فقط یک لایه‌ی ثابت و غیرقابل‌کلیک روی کل صفحه است (نه روی تک‌تک کارت‌های در حال اسکرول).
   کلاس .grain فقط برای لایه‌بندی محتوای کارت‌های رنگی می‌ماند. */
body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; background-image: var(--grain); opacity: .045; }
.grain { position: relative; isolation: isolate; }
.grain > * { position: relative; z-index: var(--z-raised); }
.dots-bg { background-image: radial-gradient(var(--line-2) 1.1px, transparent 1.3px); background-size: 18px 18px; }
.blob { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .5; pointer-events: none; z-index: 0; }
.blob--violet { background: var(--violet-300); } .blob--pink { background: var(--pink-300); } .blob--orange { background: var(--orange-300); }
.blob--sun { background: var(--sun-300); } .blob--cyan { background: var(--cyan-300); } .blob--mint { background: var(--mint-300); } .blob--blue { background: var(--blue-300); }
.gtext { background: var(--g-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gtext--lagoon { background-image: var(--g-lagoon); }
.mark { background: linear-gradient(transparent 58%, var(--sun-200) 58%, var(--sun-200) 92%, transparent 92%); padding-inline: 4px; }
.sparkle { position: absolute; width: var(--sz, 22px); height: var(--sz, 22px); color: var(--c, var(--sun-400)); pointer-events: none; animation: twinkle 3.2s var(--ease) infinite; }
.squiggle { position: absolute; pointer-events: none; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--c700, var(--violet-700)); letter-spacing: .2px; }
.kicker::before { content: ""; width: 18px; height: 6px; border-radius: 6px; background: var(--c500, var(--violet-500)); }
.divider { height: 1px; background: repeating-linear-gradient(to left, var(--line-2) 0 6px, transparent 6px 12px); border: 0; margin: 16px 0; }

/* ---------- buttons ---------- */
.btn {
  --h: 46px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 18px;
  border-radius: 14px; border: 1px solid transparent; background: var(--s2); color: var(--text); font-weight: 750; font-size: 14.5px; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s; overflow: hidden; isolation: isolate;
}
.btn .glyph { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%); transform: translateX(120%); transition: transform .7s var(--ease); z-index: -1; pointer-events: none; }
.btn:hover::after { transform: translateX(-120%); }
.btn--primary { background: var(--g-sunset); color: #fff; box-shadow: 0 10px 24px -10px var(--pink-glow), inset 0 1px 0 rgb(255 255 255 / .25); }
.btn--primary:hover { box-shadow: 0 16px 30px -12px var(--pink-glow), inset 0 1px 0 rgb(255 255 255 / .3); }
.btn--lagoon { background: var(--g-lagoon); color: #fff; box-shadow: 0 10px 24px -10px var(--blue-glow); }
.btn--dark { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px var(--sh-ink); }
.btn--solid { background: var(--cs); color: var(--con); box-shadow: 0 10px 22px -12px var(--cglow); }
.btn--soft { background: var(--c100); color: var(--c800); }
.btn--soft:hover { background: var(--c200); }
/* v4.5: بازخورد فشردن برای کارت‌ها و کنترل‌های قابل‌کلیک (حس دکمه‌ی واقعی) */
.ev:active, .cat:active, .deal:active, .hb--next:active, .chip:active, .tabs [role="tab"]:active, .qz-opt:active, a.tag:active, .drawer__tile:active, .store:active, .ct-card:active { transform: translateY(1px) scale(.985); transition-duration: .08s; }
.btn--white { background: #fff; border-color: var(--line); color: var(--text); box-shadow: var(--sh-1); }
.btn--white:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--s2); color: var(--text); }
.btn--glass { background: rgb(255 255 255 / .16); color: #fff; border-color: rgb(255 255 255 / .38); backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgb(255 255 255 / .26); }
.btn--danger { background: var(--bad-bg); color: var(--bad-text); border-color: var(--bad-line); }
.btn--sm { --h: 36px; padding: 0 12px; font-size: 13px; border-radius: 11px; gap: 6px; }
.btn--sm .glyph { width: 15px; height: 15px; }
.btn--lg { --h: 54px; padding: 0 24px; font-size: 16px; border-radius: 17px; }
.btn--xl { --h: 62px; padding: 0 30px; font-size: 17px; border-radius: 20px; }
.btn--block { width: 100%; }
.btn--icon { width: var(--h); padding: 0; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .5); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn--white.is-loading::before, .btn--soft.is-loading::before, .btn--ghost.is-loading::before { border-color: var(--line-2); border-top-color: var(--violet-600); }
.inline-form { display: inline; }
.link { color: var(--violet-700); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { color: var(--pink-600); }
.link .glyph { transition: transform .2s var(--ease); }
.link:hover .glyph { transform: translateX(-3px); }

/* ---------- tags, badges, counts, hints ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--c100); color: var(--c800); font-size: 12.5px; font-weight: 650; white-space: nowrap; line-height: 1; }
.tag .glyph { width: 13px; height: 13px; color: var(--c600); }
.tag--solid { background: var(--cs); color: var(--con); }
.tag--solid .glyph { color: inherit; }
.tag--outline { background: #fff; color: var(--c700); box-shadow: inset 0 0 0 1px var(--c200); }
.tag--cat { height: 28px; padding: 0 11px 0 9px; background: var(--c50); color: var(--c800); box-shadow: inset 0 0 0 1px var(--c200); font-weight: 750; }
.tag--cat .ico { width: 18px; height: 18px; flex: none; }
.metaline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.metaline > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.metaline .glyph { width: 14px; height: 14px; color: var(--c500, var(--text-3)); flex: none; }
.nil { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: currentColor; opacity: .3; vertical-align: middle; }
.tag--glass { background: rgb(255 255 255 / .78); backdrop-filter: blur(8px); color: var(--c800); }
.tag--lg { height: 32px; padding: 0 14px; font-size: 13.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 10px; border-radius: 999px; background: var(--c50); color: var(--c700); box-shadow: inset 0 0 0 1px var(--c200); font-size: 12.5px; font-weight: 750; white-space: nowrap; line-height: 1; }
.badge .glyph { width: 14px; height: 14px; color: var(--c600); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c400, var(--mint-400)); animation: ping 1.8s var(--ease) infinite; }
.badge--pulse .glyph { animation: wiggle 2.4s ease-in-out 3; }
.badge--solid { background: var(--cs); color: var(--con); box-shadow: 0 6px 14px -8px var(--cglow); }
.badge--solid .glyph { color: inherit; }
.badge--white { background: #fff; box-shadow: var(--sh-1); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: .1em 6px 0; border-radius: 999px; background: var(--cs); color: var(--con); font-size: 11px; font-weight: 800; line-height: 1; }
.live-dot { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mint-500); flex: none; }
.hint { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--s2); color: var(--text-3); cursor: help; }
.hint .glyph { width: 12px; height: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; transition: .2s var(--ease); }
.chip:hover { border-color: var(--c300, var(--violet-300)); color: var(--text); transform: translateY(-1px); }
.chip.is-on, .chip[aria-current] { background: var(--c600, var(--violet-600)); border-color: transparent; color: #fff; box-shadow: 0 10px 20px -12px var(--cglow, var(--violet-glow)); }
.chip .ico { width: 24px; height: 24px; }

/* ---------- plates, avatars ---------- */
.plate { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(145deg, var(--c50), var(--c200)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 8px 18px -12px var(--cglow); flex: none; }
.plate--xs { width: 30px; height: 30px; border-radius: 10px; }
.plate--s { width: 40px; height: 40px; border-radius: 12px; }
.plate--l { width: 72px; height: 72px; border-radius: 22px; }
.plate--xl { width: 96px; height: 96px; border-radius: 28px; }
.avatar { --sz: 40px; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); border-radius: 50%; background: linear-gradient(140deg, var(--c300), var(--c600)); color: #fff; font-weight: 800; font-size: calc(var(--sz) * .36); flex: none; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .08); text-shadow: 0 1px 1px rgb(0 0 0 / .15); }
.avatar--xs { --sz: 26px; } .avatar--s { --sz: 32px; } .avatar--l { --sz: 56px; } .avatar--xl { --sz: 84px; }
.avatar--more { background: var(--s2); color: var(--text-2); text-shadow: none; font-size: 11px; }
.avatars { display: inline-flex; flex-direction: row; }
.avatars .avatar { box-shadow: 0 0 0 2.5px #fff; }
.avatars .avatar + .avatar { margin-inline-start: -9px; }

/* ---------- cards ---------- */
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); min-width: 0; }
.card--pad { padding: 20px; }
.card--lift { transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.card--tint { background: var(--c50); border-color: var(--c100); box-shadow: none; }
.card--color { background: var(--cg); color: #fff; border: 0; box-shadow: 0 18px 36px -20px var(--cglow); }
.card--sunset { background: var(--g-sunset); color: #fff; border: 0; }
.card--lagoon { background: var(--g-lagoon); color: #fff; border: 0; }
.card--aurora { background: var(--g-aurora); color: #fff; border: 0; }
.card--citrus { background: var(--g-citrus); color: var(--ink); border: 0; }
.card--berry { background: var(--g-berry); color: #fff; border: 0; }
.card--meadow { background: var(--g-meadow); color: var(--ink); border: 0; }
.card--night { background: var(--g-night); color: #fff; border: 0; box-shadow: 0 24px 50px -24px rgb(24 22 45 / .55); }
.card--glass { background: rgb(255 255 255 / .62); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgb(255 255 255 / .75); box-shadow: 0 10px 34px -14px rgb(24 22 45 / .28); }
.card--gb { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--g-sunset) border-box; }
.card--gb-lagoon { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--g-lagoon) border-box; }
.card--dashed { border: 2px dashed var(--line-2); box-shadow: none; background: var(--s1); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; flex-wrap: wrap; }
.card__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 850; }
.card__title .ico { width: 28px; height: 28px; }
.card__sub { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.card__body { padding: 16px 20px 20px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px dashed var(--line-2); }
.card--color .card__sub, .card--sunset .card__sub, .card--night .card__sub, .card--lagoon .card__sub, .card--aurora .card__sub, .card--berry .card__sub { color: rgb(255 255 255 / .78); }
.card .corner-art { position: absolute; inset-inline-end: -8px; bottom: -8px; opacity: .95; pointer-events: none; transform: rotate(-8deg); }

/* ---------- meters, seats, rings ---------- */
.meter { position: relative; height: 10px; border-radius: 999px; background: var(--c100); overflow: hidden; }
.meter > span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(to left, var(--c400), var(--c600)); box-shadow: 0 0 14px var(--cglow); animation: grow 1.1s var(--ease) both; }
.meter--thin { height: 6px; }
.meter--fat { height: 14px; }
.meter--stripes > span { background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / .22) 0 6px, transparent 6px 12px), linear-gradient(to left, var(--c400), var(--c600)); background-size: 24px 24px, auto; animation: grow 1.1s var(--ease) both, stripes 1.2s linear infinite; }
.seats { display: flex; flex-wrap: wrap; gap: 3px; max-width: 200px; }
.seats i { width: 9px; height: 9px; border-radius: 3px; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line); }
.seats i.is-on { background: var(--c500); box-shadow: none; }
.seats i.is-hold { background: repeating-linear-gradient(45deg, var(--c400) 0 2px, var(--c100) 2px 4px); box-shadow: inset 0 0 0 1px var(--c300); }
/* حلقه‌ی پیشرفت: ضخامت و اندازه‌ی عدد از اندازه‌ی حلقه می‌آید؛ مقدار عنصر اختصاصی دارد تا هیچ قاعده‌ی «.کارت b» به آن نرسد */
.ring { --s: 64px; --t: max(5px, calc(var(--s) * .11)); position: relative; display: inline-block; width: var(--s); height: var(--s); min-width: var(--s); border-radius: 50%; background: conic-gradient(var(--c500) calc(var(--p) * 1%), var(--c100) 0); flex: none; vertical-align: middle; }
.ring > .ring__v { position: absolute; inset: var(--t); display: flex; align-items: center; justify-content: center; gap: 1px; border-radius: 50%; background: #fff; color: var(--ink); font-family: var(--font); font-size: calc(var(--s) * var(--fs, .24)); font-weight: 900; line-height: 1; letter-spacing: 0; white-space: nowrap; overflow: hidden; padding-top: .1em; font-variant-numeric: tabular-nums; }
.ring__v small { font-size: .6em; font-weight: 800; }

/* ---------- stat tiles ---------- */
.stat { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; min-width: 0; isolation: isolate; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.stat:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.stat::after { content: ""; position: absolute; width: 130px; height: 130px; inset-inline-end: -46px; top: -56px; border-radius: 50%; background: var(--c100); opacity: .7; z-index: -1; }
.stat__top { display: flex; align-items: center; gap: 10px; }
.stat__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -8px var(--cglow), inset 0 0 0 1px var(--c100); flex: none; }
.stat__label { font-size: 13px; color: var(--text-2); font-weight: 650; flex: 1; }
.stat__value { font-size: 30px; font-weight: 900; letter-spacing: -.6px; line-height: 1.15; }
.stat__mag { font-size: .55em; font-weight: 800; letter-spacing: 0; }
.stat__value small { font-size: 13px; font-weight: 650; color: var(--text-3); margin-inline-start: 6px; letter-spacing: 0; }
.stat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.stat__spark { margin-top: auto; margin-inline: -18px; margin-bottom: -16px; height: 40px; }
.stat__spark .spark { width: 100%; height: 40px; }
.stat--color { background: var(--cg); border: 0; color: #fff; box-shadow: 0 18px 36px -20px var(--cglow); }
.stat--color::after, .stat--ink::after { background: rgb(255 255 255 / .14); }
.stat--color .stat__label, .stat--color .stat__foot, .stat--color .stat__value small, .stat--ink .stat__label, .stat--ink .stat__foot, .stat--ink .stat__value small { color: rgb(255 255 255 / .82); }
.stat--color .stat__icon, .stat--ink .stat__icon { background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.stat--ink { background: var(--g-night); border: 0; color: #fff; }
.stat--tint { background: var(--c50); border-color: var(--c100); box-shadow: none; }
.stat--tint::after { background: var(--c200); opacity: .45; }
.stat--glass { background: rgb(255 255 255 / .6); backdrop-filter: blur(16px); border-color: rgb(255 255 255 / .8); }
.stat--hero .stat__value { font-size: 44px; }
.delta { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.delta .glyph { width: 13px; height: 13px; }
.delta--good { background: var(--good-bg); color: var(--good-text); }
.delta--bad { background: var(--bad-bg); color: var(--bad-text); }
.stat--color .delta, .stat--ink .delta { background: rgb(255 255 255 / .22); color: #fff; }

/* ---------- charts ---------- */
.chart { margin: 0; overflow-x: auto; scrollbar-width: thin; }
.ch { width: 100%; min-width: 440px; height: auto; overflow: visible; color: var(--c500); }
.ch text { font-family: var(--font); }
.ch__grid line { stroke: var(--line); stroke-width: 1; }
.ch__ylab, .ch__xlab { font-size: 11.5px; fill: var(--text-3); }
.ch__xlab { text-anchor: middle; }
.ch__line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.6s var(--ease) .1s forwards; }
.ch__peak { fill: var(--sun-400); stroke: #fff; stroke-width: 2.5; }
.ch__end { fill: currentColor; stroke: #fff; stroke-width: 2.5; }
.ch__hit { fill: transparent; cursor: crosshair; }
.ch__cross { stroke: var(--text-3); stroke-width: 1; opacity: 0; pointer-events: none; }
.ch__dot { fill: currentColor; stroke: #fff; stroke-width: 2.5; opacity: 0; pointer-events: none; }
.chart.is-hover .ch__cross, .chart.is-hover .ch__dot { opacity: 1; }
.ch__bar { cursor: pointer; outline: none; }
.ch__bar path { fill: var(--c300); transition: fill .2s; transform-box: fill-box; transform-origin: bottom; animation: rise .9s var(--ease) both; }
.ch__bar.is-peak path { fill: var(--c500); }
.ch__bar:hover path, .ch__bar:focus path { fill: var(--c700); }
.chart__table { margin-top: 8px; font-size: 12.5px; }
.chart__table summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-3); font-weight: 650; list-style: none; }
.chart__table summary::-webkit-details-marker { display: none; }
.chart__table table { margin-top: 8px; width: 100%; border-collapse: collapse; }
.chart__table th, .chart__table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: start; font-weight: 500; }
.tipbox { position: fixed; z-index: var(--z-tip); max-width: 260px; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.6; pointer-events: none; box-shadow: 0 12px 26px -12px rgb(0 0 0 / .45); transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .12s; }
.tipbox.is-on { opacity: 1; }
.tipbox::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.donut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut__ring { position: relative; width: var(--s); height: var(--s); flex: none; }
.donut__ring svg { width: 100%; height: 100%; overflow: visible; }
.donut__ring circle[data-tip] { transition: stroke-width .2s; cursor: pointer; outline: none; }
.donut__ring circle[data-tip]:hover, .donut__ring circle[data-tip]:focus { stroke-width: 16; }
.donut__track { stroke: var(--s2); }
.donut__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut__c b { font-size: 24px; font-weight: 900; line-height: 1.2; }
.donut__c small { font-size: 11.5px; color: var(--text-3); }
.legend { display: grid; gap: 8px; flex: 1; min-width: 180px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; }
.legend li i { width: 12px; height: 12px; border-radius: 4px; }
.legend li b { font-weight: 800; }
.legend li small { color: var(--text-3); min-width: 34px; text-align: end; }
.legend li.is-zero { opacity: .5; }
.hbars { display: grid; gap: 14px; }
.hbars li { display: flex; align-items: center; gap: 12px; }
.hbars__body { flex: 1; min-width: 0; }
.hbars__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.hbars__top b { font-weight: 850; }
.hbars__track { height: 8px; border-radius: 999px; background: var(--c100); overflow: hidden; }
.hbars__track span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(to left, var(--c400), var(--c600)); animation: grow 1s var(--ease) both; }
.hbars small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.hbars--bare .hbars__track { height: 6px; background: none; }
.hbars--bare .hbars__track span { background: var(--c500); }
.hbars--bare li > .ico, .hbars--bare li::before { flex: none; }
.heat { display: grid; grid-template-columns: auto repeat(var(--cols), minmax(0, 1fr)); gap: 5px; align-items: center; font-size: 11.5px; color: var(--text-3); }
.heat__h { text-align: center; white-space: nowrap; font-size: 10.5px; }
.heat__d { padding-inline-end: 6px; white-space: nowrap; }
.heat__c { display: block; height: 26px; border-radius: 7px; background: var(--c50); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); cursor: pointer; transition: transform .15s; outline: none; }
.heat__c:hover, .heat__c:focus { transform: scale(1.12); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c400); }
.heat__c.l1 { background: var(--c100); } .heat__c.l2 { background: var(--c200); } .heat__c.l3 { background: var(--c300); } .heat__c.l4 { background: var(--c400); } .heat__c.l5 { background: var(--c500); } .heat__c.l6 { background: var(--c700); }
.heat__legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 11px; color: var(--text-3); justify-content: flex-end; }
.heat__legend .heat__c { width: 18px; height: 12px; border-radius: 4px; }
.spark { color: var(--c500); overflow: visible; }
.spark.f-white { color: #fff; }

/* ---------- date badge, price, event card ---------- */
.dbadge { display: inline-block; width: 58px; border-radius: 15px; background: #fff; text-align: center; overflow: hidden; box-shadow: 0 10px 22px -10px rgb(24 22 45 / .35); line-height: 1.2; flex: none; }
.dbadge__m { display: block; padding: 3px 0 2px; background: var(--cs); color: var(--con); font-size: 11px; font-weight: 800; }
.dbadge b { display: block; padding-top: 3px; font-size: 23px; font-weight: 900; color: var(--ink); }
.dbadge__w { display: block; padding-bottom: 5px; font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.price { display: flex; flex-direction: column; line-height: 1.25; }
.price__now { display: inline-flex; align-items: baseline; gap: 5px; }
.price__now b { font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.price__now small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.price__was { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.price__off { display: inline-grid; place-items: center; height: 19px; padding: 0 6px; border-radius: 7px; background: var(--pink-500); color: #fff; font-size: 11px; font-weight: 800; }
.price--l .price__now b { font-size: 30px; }
.price--l .price__was { font-size: 14px; }
.ev { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; min-width: 0; }
.ev:hover { transform: translateY(-5px); border-color: var(--c200); box-shadow: 0 26px 44px -22px var(--cglow), var(--sh-2); }
.ev__cover { position: relative; height: 158px; overflow: hidden; background: radial-gradient(circle at 18% 22%, rgb(255 255 255 / .6), transparent 34%), radial-gradient(circle at 90% 110%, var(--c500), transparent 55%), linear-gradient(135deg, var(--c100), var(--c300)); }
.ev__cover::before { content: ""; position: absolute; inset: 0; 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 20%, transparent 75%); mask-image: linear-gradient(200deg, #000 20%, transparent 75%); }
.ev__cover::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; inset-inline-end: -40px; bottom: -70px; border: 18px solid rgb(255 255 255 / .25); }
/* v4.5: روی عکس هیچ برچسبی نمی‌نشیند؛ نشان‌ها و تاریخ در بدنه‌ی کارت‌اند */
.ev__art { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; filter: drop-shadow(0 14px 14px rgb(24 22 45 / .22)); transform: rotate(-6deg); transition: transform .5s var(--bounce); }
.ev:hover .ev__art { transform: rotate(4deg) translateY(-6px) scale(1.06); }
.ev__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ev__badges:empty { display: none; }
.ev__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.ev__headtxt { display: grid; gap: 8px; min-width: 0; }
.ev__head .dbadge { margin-top: 2px; box-shadow: 0 10px 22px -12px var(--cglow), inset 0 0 0 1px var(--c100); }
.ev__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 12px; flex: 1; }
.ev__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev__rate { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.ev__rate .glyph { width: 14px; height: 14px; color: var(--sun-400); }
.ev__title { font-size: 17px; font-weight: 850; line-height: 1.55; }
.ev__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ev__link:focus-visible { outline: none; }
.ev:has(.ev__link:focus-visible) { outline: 3px solid var(--violet-300); outline-offset: 2px; }
.ev__summary { color: var(--text-2); font-size: 13.5px; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev__facts { display: grid; gap: 5px; }
.ev__facts li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); min-width: 0; }
.ev__facts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev__facts .glyph { width: 16px; height: 16px; color: var(--c500); }
.ev__hl { display: flex; flex-wrap: wrap; gap: 6px; }
.ev__seats { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.ev__left { font-size: 12px; color: var(--text-3); font-weight: 650; white-space: nowrap; }
.ev__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 16px; border-top: 1.5px dashed var(--line-2); }
.ev__foot::before, .ev__foot::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--page, #fff); border: 1px solid var(--line); }
.ev__foot::before { right: -10px; clip-path: inset(0 50% 0 0); }
.ev__foot::after { left: -10px; clip-path: inset(0 0 0 50%); }
.ev__go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--c100); color: var(--c700); transition: .25s var(--ease); }
.ev__go .glyph { width: 20px; height: 20px; }
.ev:hover .ev__go { background: var(--cs); color: var(--con); transform: translateX(-4px); box-shadow: 0 10px 20px -10px var(--cglow); }
.ev--feature .ev__cover { height: 230px; }
.ev--feature .ev__title { font-size: 22px; }
.ev--mini .ev__cover { height: 96px; }
.ev--mini .ev__head .dbadge { width: 50px; }
.ev--mini .ev__head .dbadge b { font-size: 19px; }
.ev--mini .ev__body { padding: 12px 14px 8px; gap: 8px; }
.ev--mini .ev__title { font-size: 15px; }
.ev--mini .ev__foot { padding: 10px 14px 12px; }
.ev--row { flex-direction: row; }
.ev--row .ev__cover { width: 210px; height: auto; min-height: 190px; flex: none; }
.ev--row .ev__foot { flex-direction: column; justify-content: center; align-items: flex-start; border-top: 0; border-inline-start: 1.5px dashed var(--line-2); min-width: 170px; }
.ev--row .ev__foot::before, .ev--row .ev__foot::after { display: none; }
@media (max-width: 720px) {
  .ev--row { flex-direction: column; }
  .ev--row .ev__cover { width: auto; min-height: 140px; height: 140px; }
  .ev--row .ev__foot { flex-direction: row; align-items: center; border-inline-start: 0; border-top: 1.5px dashed var(--line-2); min-width: 0; }
}
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ev-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 300px); gap: 18px; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ev-scroll > * { scroll-snap-align: start; }

/* ---------- forms ---------- */
.form-stack { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .form-row, .form-row--3 { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field__label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 750; }
.field__hint { font-size: 12px; color: var(--text-3); font-weight: 500; }
.input, .select, .textarea { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 15px; background: #fff; color: var(--text); transition: border-color .2s, box-shadow .2s, background .2s; appearance: none; -webkit-appearance: none; }
.textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.8; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: .8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--violet-200); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 4px var(--violet-a12); }
[aria-invalid="true"] { border-color: var(--bad) !important; background: var(--bad-bg) !important; }
.field__error { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--bad-text); font-weight: 650; }
.field__error .glyph { width: 15px; height: 15px; }
.input-wrap { position: relative; display: block; }
.input-wrap__ico { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; width: 19px; height: 19px; color: var(--text-3); pointer-events: none; }
.input-wrap .input { padding-inline-start: 44px; }
.input-wrap__suf { position: absolute; inset-inline-end: 14px; top: 50%; translate: 0 -50%; font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.input-wrap:focus-within .input-wrap__ico { color: var(--violet-500); }
.pw .input { padding-inline-end: 48px; }
.pw__toggle { position: absolute; inset-inline-end: 6px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border: 0; border-radius: 11px; background: transparent; color: var(--text-3); display: grid; place-items: center; }
.pw__toggle:hover { background: var(--s2); color: var(--text); }
.select-wrap { position: relative; display: block; }
.select { padding-inline-end: 40px; cursor: pointer; }
.select-wrap__ico { position: absolute; inset-inline-end: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 5px; align-items: center; }
.strength i { height: 5px; border-radius: 4px; background: var(--s3); transition: background .3s; }
.strength b { font-size: 11.5px; color: var(--text-3); font-weight: 650; min-width: 50px; text-align: end; }
.strength[data-level="1"] i:nth-child(-n+1) { background: var(--bad); }
.strength[data-level="2"] i:nth-child(-n+2) { background: var(--orange-400); }
.strength[data-level="3"] i:nth-child(-n+3) { background: var(--sun-400); }
.strength[data-level="4"] i:nth-child(-n+4) { background: var(--mint-500); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; line-height: 1.7; }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; flex: none; transition: .15s; cursor: pointer; }
.check input:checked { background: var(--violet-600); border-color: var(--violet-600); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__ui { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line-2); transition: .25s var(--ease); flex: none; }
.switch__ui::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--sh-2); transition: .3s var(--bounce); }
.switch input:checked + .switch__ui { background: var(--g-sunset); box-shadow: none; }
.switch input:checked + .switch__ui::after { inset-inline-start: 23px; }
.switch input:focus-visible + .switch__ui { outline: 3px solid var(--violet-300); outline-offset: 2px; }
.switch__text { display: flex; flex-direction: column; line-height: 1.5; }
.switch__text small { color: var(--text-3); font-size: 12px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 15px; background: var(--s2); flex-wrap: wrap; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 11px; font-size: 13px; font-weight: 750; color: var(--text-2); transition: .2s; white-space: nowrap; }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: var(--sh-2); }
.seg input:focus-visible + span { outline: 3px solid var(--violet-300); }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick label { cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 10px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); font-size: 13.5px; font-weight: 700; transition: .2s var(--ease); }
.pick span .ico { width: 26px; height: 26px; }
.pick input:checked + span { background: var(--c50); border-color: var(--c400); color: var(--c800); box-shadow: 0 8px 18px -12px var(--cglow); }
.pick input:focus-visible + span { outline: 3px solid var(--violet-300); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; box-shadow: var(--sh-1); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th { position: sticky; top: 0; z-index: 1; padding: 12px 14px; background: var(--s1); border-bottom: 1px solid var(--line); text-align: start; font-size: 12px; font-weight: 750; color: var(--text-3); white-space: nowrap; }
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: var(--s1); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .td-end { text-align: end; }
.tbl .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tbl .who b { display: block; font-weight: 750; white-space: nowrap; }
.tbl .who small { display: block; color: var(--text-3); font-size: 12px; }
.tbl .code { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .3px; direction: ltr; unicode-bidi: plaintext; background: var(--s2); padding: 2px 7px; border-radius: 7px; white-space: nowrap; }
.th-sort a { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.th-sort .glyph { width: 13px; height: 13px; opacity: .45; }
.th-sort.is-active, .th-sort.is-active a { color: var(--violet-700); }
.th-sort.is-active .glyph { opacity: 1; }
.th-sort a:hover { color: var(--text); }
@media (max-width: 760px) {
  .table-wrap:has(.tbl--cards) { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .tbl--cards thead { display: none; }
  .tbl--cards, .tbl--cards tbody { display: block; }
  .tbl--cards tr { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 10px 14px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh-1); }
  .tbl--cards td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl--cards td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--text-3); font-weight: 650; margin-bottom: 2px; }
  .tbl--cards td.td-main, .tbl--cards td.td-wide { grid-column: 1 / -1; }
  .tbl--cards td.td-act { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--line-2); }
  .tbl--cards .td-end { text-align: start; }
  .tbl--peek tbody tr:nth-child(n+5) { display: none; }
}

/* ---------- tabs, pager, toolbar ---------- */
.tabs { display: flex; gap: 4px; padding: 5px; border-radius: 17px; background: var(--s2); overflow-x: auto; scrollbar-width: none; width: max-content; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 13px; background: transparent; font-weight: 750; font-size: 13.5px; color: var(--text-2); white-space: nowrap; transition: .2s; }
.tabs a:hover, .tabs button:hover { color: var(--text); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--sh-2); }
.tabs .glyph { width: 17px; height: 17px; }
.tabs .count { background: var(--s3); color: var(--text-2); }
.tabs [aria-current="page"] .count, .tabs [aria-selected="true"] .count { background: var(--violet-600); color: #fff; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.pager__info { font-size: 12.5px; color: var(--text-3); }
.pager__nums { display: flex; gap: 6px; flex-wrap: wrap; }
.pager__nums a, .pager__nums span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 13px; border: 1px solid var(--line); background: #fff; font-weight: 750; font-size: 13.5px; transition: .2s; }
.pager__nums a:hover { border-color: var(--violet-300); color: var(--violet-700); }
.pager__nums [aria-current] { background: var(--g-sunset); color: #fff; border-color: transparent; box-shadow: 0 10px 20px -10px var(--pink-glow); }
.pager__nums .is-off { opacity: .4; }
.pager__nums .pager__gap { border: 0; background: transparent; min-width: 20px; }
.pager .glyph { width: 16px; height: 16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px; border-radius: var(--r-l); background: rgb(255 255 255 / .8); border: 1px solid var(--line); box-shadow: var(--sh-1); backdrop-filter: blur(12px); }
.filterbar .field { flex: 1 1 160px; }
.filterbar .field--q { flex: 2 1 240px; }
.filterbar .input, .filterbar .select { height: 44px; border-radius: 13px; }

/* ---------- notices, toasts, empty, skeletons ---------- */
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 17px; border: 1px solid; font-size: 13.5px; }
.notice__ico { width: 24px; height: 24px; margin-top: 1px; }
.notice__body { flex: 1; min-width: 0; }
.notice__body b { display: block; font-weight: 850; }
.notice__body p { color: inherit; opacity: .88; margin-top: 2px; line-height: 1.8; }
.notice__act { flex: none; align-self: center; }
.notice--success { background: var(--good-bg); border-color: var(--good-line); color: var(--good-text); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.notice--error { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-text); }
.notice--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-text); }
.toast { position: fixed; z-index: var(--z-toast); top: 18px; left: 50%; translate: -50% 0; display: flex; align-items: flex-start; gap: 12px; width: min(440px, calc(100vw - 32px)); padding: 14px 16px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-4); overflow: hidden; animation: toast-in .5s var(--bounce) both; }
.toast.is-out { animation: toast-out .35s var(--ease) forwards; }
.toast > div { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.7; }
.toast b { font-weight: 850; }
.toast__ico { width: 26px; height: 26px; }
.toast--success .toast__ico { color: var(--good); } .toast--error .toast__ico { color: var(--bad); } .toast--warn .toast__ico { color: var(--warn); } .toast--info .toast__ico { color: var(--info); }
.toast__close { width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--s2); color: var(--text-2); display: grid; place-items: center; flex: none; }
.toast__bar { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--g-sunset); transform-origin: right; animation: shrink 6s linear forwards; }
.empty { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; border: 2px dashed var(--c200); border-radius: var(--r-l); background: radial-gradient(circle at 50% 0, var(--c100), transparent 60%), var(--c50); }
.empty__art { position: relative; display: grid; place-items: center; width: 108px; height: 108px; margin-bottom: 6px; border-radius: 36px; background: #fff; box-shadow: 0 18px 36px -18px var(--cglow); animation: float 4s ease-in-out infinite; }
.empty h3 { font-size: 18px; }
.empty p { color: var(--text-2); font-size: 14px; max-width: 420px; }
.empty__act { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sk { border-radius: 20px; background: #fff; border: 1px solid var(--line); padding: 14px; }
.sk i { display: block; border-radius: 9px; background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 40%, var(--s2) 60%); background-size: 300% 100%; animation: shimmer 1.3s linear infinite; }
.sk__img { height: 130px; border-radius: 16px !important; }
.sk__l { height: 12px; margin-top: 12px; }
.sk__l--s { width: 62%; } .sk__l--xs { width: 36%; }
.sk__v { height: 30px; width: 50%; margin-top: 12px; }
.sk__c { width: 44px; height: 44px; border-radius: 50% !important; flex: none; }
.sk--row { display: flex; align-items: center; gap: 12px; }
.sk--row > div { flex: 1; }
.sk--row .sk__l { margin-top: 6px; }
.loadable { position: relative; }
.loadable__sk { display: none; }
.loadable.is-loading > .loadable__content { display: none; }
.loadable.is-loading > .loadable__sk { display: grid; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--violet-600); animation: spin .7s linear infinite; }

/* ---------- timeline, feed, lists ---------- */
.tl { position: relative; display: grid; gap: 4px; }
.tl::before { content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 18px; width: 2px; background: linear-gradient(var(--line-2), var(--line-2)) top / 2px 100% no-repeat; }
.tl__item { position: relative; display: flex; gap: 14px; padding-bottom: 14px; }
.tl__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: var(--c100); color: var(--c700); box-shadow: 0 0 0 4px #fff; flex: none; }
.tl__dot .glyph { width: 18px; height: 18px; }
.tl__item.is-future .tl__dot { background: #fff; border: 1.5px dashed var(--c400); }
.tl__body { padding-top: 6px; min-width: 0; }
.tl__body b { font-weight: 800; font-size: 14px; }
.tl__body p { font-size: 13px; color: var(--text-2); }
.tl__body time { font-size: 11.5px; color: var(--text-3); }
.feed { display: grid; }
.feed li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-2); }
.feed li:last-child { border-bottom: 0; }
.feed__ico { position: relative; }
.feed__ico .badge-ico { position: absolute; bottom: -4px; inset-inline-end: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cs); color: var(--con); box-shadow: 0 0 0 2px #fff; }
.feed__ico .badge-ico .glyph { width: 11px; height: 11px; }
.feed__body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.75; }
.feed__body b { font-weight: 800; }
.feed__body small { display: block; font-size: 11.5px; color: var(--text-3); }
.feed__amt { font-weight: 850; font-size: 13px; white-space: nowrap; }
.list-rows > * + * { border-top: 1px dashed var(--line-2); }
.mini-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.mini-row__body { flex: 1; min-width: 0; }
.mini-row__body b { display: block; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-row__body small { display: block; color: var(--text-3); font-size: 12px; }
.kv { display: grid; gap: 10px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.kv dt, .kv > div > span:first-child { color: var(--text-2); }
.kv dd, .kv > div > b { font-weight: 800; text-align: end; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fact { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--c50); border: 1px solid var(--c100); }
.fact .ico { width: 34px; height: 34px; }
.fact small { display: block; font-size: 11.5px; color: var(--text-3); }
.fact b { display: block; font-size: 14px; font-weight: 850; line-height: 1.5; }

/* ---------- section head ---------- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 18px; margin-bottom: 24px; flex-wrap: wrap; }
.shead__txt { flex: 1 1 420px; min-width: 0; }
.shead--ico { align-items: center; }
.shead__ico { display: grid; place-items: center; flex: none; width: 68px; height: 68px; border-radius: var(--r-l); background: linear-gradient(150deg, var(--c50), var(--c200)); box-shadow: inset 0 0 0 1px var(--c200), 0 14px 26px -16px var(--cglow); rotate: -5deg; }
.shead--ico h2 { margin-top: 0; }
.ink { color: var(--c600, var(--violet-600)); }
.shead__k { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--c50); color: var(--c700); font-size: 12.5px; font-weight: 800; box-shadow: inset 0 0 0 1px var(--c100); }
.shead__k b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cs); color: var(--con); font-size: 11px; }
.shead h2 { margin-top: 10px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; letter-spacing: -.6px; line-height: 1.3; text-wrap: balance; }
.shead p { margin-top: 6px; color: var(--text-2); font-size: 15px; max-width: 60ch; text-wrap: pretty; }
.shead__k:empty { display: none; }

/* ---------- animation ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes grow { from { width: 0; } }
@keyframes rise { from { transform: scaleY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes stripes { to { background-position: -24px 0, 0 0; } }
@keyframes float { 50% { transform: translateY(-9px); } }
@keyframes float-r { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(0); } }
@keyframes marquee { to { transform: translateX(50%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px) scale(.97); } }
@keyframes shrink { to { transform: scaleX(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.float { animation: float 5s ease-in-out infinite; }
.float-r { animation: float-r 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   اسکرول شخصی‌سازی‌شده (نسخه‌ی ۶٫۳): نوار اسکرول رنگی، نوار پیشرفت بالای صفحه
   و دکمه‌ی «بالای صفحه» با حلقه‌ی پیشرفت. همه بدون کتابخانه و فقط با transform.
   ========================================================================== */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 14px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--s2); }
  html::-webkit-scrollbar-track { background: linear-gradient(180deg, var(--pink-50), var(--violet-50) 50%, var(--cyan-50)); border-inline-start: 1px solid var(--line); }
  ::-webkit-scrollbar-thumb { min-height: 56px; border: 3px solid transparent; border-radius: 99px; background: linear-gradient(180deg, var(--pink-400), var(--violet-500) 55%, var(--cyan-500)) padding-box; }
  ::-webkit-scrollbar-thumb:hover { border-width: 2px; background: linear-gradient(180deg, var(--pink-500), var(--violet-600) 55%, var(--cyan-600)) padding-box; }
  ::-webkit-scrollbar-corner { background: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--violet-500) var(--violet-50); }
}
.scrollbar { position: fixed; z-index: var(--z-tip); inset: 0 0 auto; height: 4px; pointer-events: none; transform-origin: 100% 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(270deg, var(--pink-500), var(--sun-400) 35%, var(--violet-500) 70%, var(--cyan-500)); box-shadow: 0 1px 8px var(--violet-glow, rgb(157 125 255 / .4)); }
.totop { position: fixed; z-index: var(--z-pop); left: max(20px, env(safe-area-inset-left)); bottom: 24px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: #fff; color: var(--violet-700); box-shadow: 0 10px 26px -10px rgb(24 22 45 / .45), inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--bounce); }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--pink-600); transform: translateY(-3px); }
.totop:active { transform: scale(.94); }
.totop:focus-visible { outline: 3px solid var(--violet-500); outline-offset: 3px; }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__ring circle { fill: none; stroke-width: 4; }
.totop__ring .bg { stroke: var(--violet-50); }
.totop__ring .fg { stroke: url(#totop-g); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--sp, 0))); }
.totop .glyph { width: 22px; height: 22px; transition: transform .3s var(--bounce); }
.totop:hover .glyph { transform: translateY(-3px); }
.page-dash .totop { left: auto; right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 1000px) { .totop { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); width: 46px; height: 46px; } }
@media print { .scrollbar, .totop { display: none; } }