/* ============================================================
   v2.4.4 — لایه‌ی گرافیکی «پلاس ۳»: شیشه‌ای‌شدن نوار پایین، درخشش طلایی، ریپل دکمه‌ها،
   حلقه‌ی دعوت، کانفتی، ورود پلکانی کارت‌ها. همه‌ی انیمیشن‌ها با reduced-motion خاموش می‌شوند.
   ============================================================ */
.tabbar { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.tabbar button { position: relative; transition: color .2s ease, transform .2s ease; }
.tabbar button.active { transform: translateY(-1px); }
.tabbar button.active::before { content: ''; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--gold), var(--success)); box-shadow: 0 2px 10px color-mix(in srgb, var(--gold) 70%, transparent); }
.tabbar button.active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 55%, transparent)); }

/* عدد اصلی با درخشش طلایی */
.hero-number { background: linear-gradient(100deg, var(--text) 0%, var(--text) 38%, var(--gold-text) 50%, var(--text) 62%, var(--text) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: p3shine 7s ease-in-out infinite; }
@keyframes p3shine { 0%, 62%, 100% { background-position: 100% 0; } 82% { background-position: 0 0; } }

.card { transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; }
.card:active { transform: scale(.992); }
.btn { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.btn--primary { background-image: linear-gradient(135deg, color-mix(in srgb, var(--gold) 100%, #fff 0%), color-mix(in srgb, var(--gold) 78%, #000 22%));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 30%, transparent); }
.btn--primary:active { transform: translateY(1px) scale(.99); box-shadow: 0 2px 8px color-mix(in srgb, var(--gold) 30%, transparent); }
.p3-rip { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .38; background: currentColor; animation: p3rip .55s ease-out forwards; }
@keyframes p3rip { to { transform: scale(2.6); opacity: 0; } }

/* ورود پلکانی کارت‌ها هنگام باز شدن هر صفحه */
.screen.active > .card, .screen.active > .stack > .card, .screen.active .kpi { animation: p3in .42s cubic-bezier(.2, .8, .2, 1) both; }
.screen.active > .card:nth-child(2), .screen.active > .stack > .card:nth-child(2) { animation-delay: .05s; }
.screen.active > .card:nth-child(3), .screen.active > .stack > .card:nth-child(3) { animation-delay: .10s; }
.screen.active > .card:nth-child(4), .screen.active > .stack > .card:nth-child(4) { animation-delay: .15s; }
.screen.active > .card:nth-child(n+5), .screen.active > .stack > .card:nth-child(n+5) { animation-delay: .20s; }
@keyframes p3in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* حلقه‌ی تعداد دعوت */
.i-n { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 19px; position: relative;
  background: conic-gradient(var(--gold) var(--p3ring, 0%), var(--divider) 0); }
.i-n::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); z-index: 0; }
.i-n { isolation: isolate; }
.i-n > * , .i-n { z-index: 1; }
.i-n::after { z-index: -1; }

/* کانفتی */
.p3-conf { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.p3-conf i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .95; animation: p3fall linear forwards; }
@keyframes p3fall { to { transform: translate3d(var(--dx), 108vh, 0) rotate(var(--rot)); opacity: .8; } }

/* بج جدید روی تب/دکمه + نبض ملایم */
.p3-pulse { animation: p3pulse 2.4s ease-in-out infinite; }
@keyframes p3pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 40%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }

@media (prefers-reduced-motion: reduce) {
  .hero-number, .screen.active > .card, .screen.active > .stack > .card, .screen.active .kpi, .p3-pulse { animation: none !important; }
  .p3-conf { display: none; }
}

/* ============================================================
   v2.4.6 — پرداخت گرافیکی: حالت‌های خالی تصویری، سرتیتر طلایی، شیشه‌ای‌شدن توست و شیت، کارت‌های KPI و سطح
   ============================================================ */
.empty { position: relative; }
.empty svg { width: 64px; height: 64px; padding: 14px; box-sizing: content-box; border-radius: 50%; opacity: 1; color: var(--gold-text);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gold) 22%, transparent), color-mix(in srgb, var(--gold) 6%, transparent) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent) inset, 0 10px 30px color-mix(in srgb, var(--gold) 14%, transparent);
  animation: p3float 4.5s ease-in-out infinite; }
@keyframes p3float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.section-title { position: relative; padding-inline-start: 12px; color: var(--text); letter-spacing: .1px; }
.section-title::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 4px; height: 14px; margin-top: -7px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold), var(--success)); }

.toast { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 10px 34px rgba(0, 0, 0, .35); }
.sheet, .sheet-card { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

.kpi { background-image: linear-gradient(160deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 55%); border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--divider)); }
.card { border: 1px solid color-mix(in srgb, var(--gold) 6%, var(--divider)); }

.lvlcard { background-image: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%);
  position: relative; overflow: hidden; }
.lvlcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .10) 50%, transparent 60%);
  transform: translateX(-100%); animation: p3sheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes p3sheen { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.xpbar > i, .pbar > i { background-image: linear-gradient(90deg, var(--gold), var(--success)); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); }

.badge2.done { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent) inset, 0 6px 20px color-mix(in srgb, var(--gold) 16%, transparent); }
.badge2.done .b-i { animation: p3pulse 3.2s ease-in-out infinite; border-radius: 50%; }

.chip { transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.chip:active { transform: scale(.94); }
.field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }

.live-dot:not(.stale) { animation: livePing 1.6s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .empty svg, .lvlcard::after, .badge2.done .b-i, .live-dot { animation: none !important; }
}

/* v2.4.7 — شفق نرم پشت کل برنامه (فقط تزئینی؛ روی کارت‌ها و متن اثری ندارد) */
body::before { content: ''; position: fixed; inset: -20% -10% auto -10%; height: 70vh; z-index: -1; pointer-events: none; opacity: .9;
  background:
    radial-gradient(40% 50% at 18% 30%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    radial-gradient(38% 46% at 82% 20%, color-mix(in srgb, var(--success) 12%, transparent), transparent 70%),
    radial-gradient(34% 40% at 55% 75%, color-mix(in srgb, #6AA8FF 9%, transparent), transparent 72%);
  filter: blur(8px); animation: p3aurora 18s ease-in-out infinite alternate; }
@keyframes p3aurora { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 3%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }