/* ───────────── هم‌دل · پایه: توکن‌ها، فونت، اجزای مشترک ───────────── */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --heart-poly: polygon(50.0% 23.9%,50.0% 23.6%,50.1% 22.7%,50.4% 21.3%,50.9% 19.4%,51.7% 17.1%,52.8% 14.6%,54.3% 11.9%,56.2% 9.2%,58.6% 6.7%,61.3% 4.4%,64.3% 2.5%,67.7% 1.1%,71.2% 0.2%,75.0% 0.0%,78.7% 0.4%,82.5% 1.5%,86.1% 3.1%,89.4% 5.4%,92.5% 8.2%,95.1% 11.5%,97.2% 15.1%,98.7% 19.0%,99.7% 23.1%,100.0% 27.4%,99.7% 31.7%,98.7% 36.0%,97.2% 40.3%,95.1% 44.5%,92.5% 48.6%,89.4% 52.6%,86.1% 56.5%,82.5% 60.2%,78.7% 63.9%,75.0% 67.5%,71.2% 71.0%,67.7% 74.4%,64.3% 77.8%,61.3% 81.0%,58.6% 84.1%,56.2% 87.1%,54.3% 89.8%,52.8% 92.3%,51.7% 94.6%,50.9% 96.4%,50.4% 98.0%,50.1% 99.1%,50.0% 99.8%,50.0% 100.0%,50.0% 99.8%,49.9% 99.1%,49.6% 98.0%,49.1% 96.4%,48.3% 94.6%,47.2% 92.3%,45.7% 89.8%,43.8% 87.1%,41.4% 84.1%,38.7% 81.0%,35.7% 77.8%,32.3% 74.4%,28.8% 71.0%,25.0% 67.5%,21.3% 63.9%,17.5% 60.2%,13.9% 56.5%,10.6% 52.6%,7.5% 48.6%,4.9% 44.5%,2.8% 40.3%,1.3% 36.0%,0.3% 31.7%,0.0% 27.4%,0.3% 23.1%,1.3% 19.0%,2.8% 15.1%,4.9% 11.5%,7.5% 8.2%,10.6% 5.4%,13.9% 3.1%,17.5% 1.5%,21.3% 0.4%,25.0% 0.0%,28.8% 0.2%,32.3% 1.1%,35.7% 2.5%,38.7% 4.4%,41.4% 6.7%,43.7% 9.2%,45.7% 11.9%,47.2% 14.6%,48.3% 17.1%,49.1% 19.4%,49.6% 21.3%,49.9% 22.7%,50.0% 23.6%);
  --ink: #170a22;
  --ink-2: #24113a;
  --ink-3: #35194a;
  --ember: #ff7b2e;
  --flame: #ff4f6d;
  --gold: #ffc356;
  --rose: #ff8a8f;
  --crimson: #b3121f;
  --milk: #fbf3ea;
  --milk-dim: rgba(251, 243, 234, .74);
  --milk-faint: rgba(251, 243, 234, .52);
  --glass: rgba(255, 235, 250, .09);
  --glass-2: rgba(255, 235, 250, .15);
  --line: rgba(255, 220, 240, .2);
  --ok: #7fd6a4;
  --danger: #ff6b6b;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --grad-fire: linear-gradient(135deg, #ffc356 0%, #ff7b2e 38%, #ff4f6d 72%, #d63a9a 100%);
  --violet: #8b5cf6;
  --magenta: #e0407f;
  --dusk: #3a1a58;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  color: var(--milk);
  background: var(--ink);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(255, 106, 26, .45); }
[hidden] { display: none !important; }

/* پس‌زمینه‌ی گرم مشترک */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 115%, rgba(255, 110, 60, .5) 0%, transparent 65%),
    radial-gradient(60% 45% at 100% -5%, rgba(255, 170, 70, .28) 0%, transparent 60%),
    radial-gradient(55% 45% at 0% 30%, rgba(190, 60, 170, .32) 0%, transparent 62%),
    linear-gradient(180deg, #2b1245, #170a22);
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* شیشه */
.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 50px rgba(30, 5, 50, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* لوگو */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.heart-mark {
  width: 26px; height: 24px; flex: none;
  clip-path: var(--heart-poly);
  background: radial-gradient(70% 70% at 50% 75%, #ffe58a 0%, #ff8a3d 38%, #ff4f6d 72%, #d63a9a 100%);
  filter: drop-shadow(0 0 8px rgba(255, 106, 26, .8));
  animation: mark-beat 3.4s ease-in-out infinite;
}
@keyframes mark-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } 36% { transform: scale(1.07); } 48% { transform: scale(1); } }

/* دکمه‌ها */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 26px;
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 1rem; color: #1b0804;
  background: var(--grad-fire);
  box-shadow: 0 10px 30px rgba(255, 90, 90, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s, opacity .2s;
  position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 90, 110, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; filter: saturate(.7); }
.btn.is-loading::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(27, 8, 4, .3); border-top-color: #1b0804; animation: spin .7s linear infinite;
}
.btn--ghost { color: var(--milk); background: var(--glass); border: 1px solid var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--glass-2); box-shadow: none; }
.btn--block { width: 100%; }
.btn--sm { --h: 40px; padding: 0 18px; font-size: .9rem; }
.btn--danger { background: rgba(255, 107, 107, .14); color: #ffb3b3; border: 1px solid rgba(255, 107, 107, .35); box-shadow: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* فرم */
.field { display: grid; gap: 8px; }
.field > label, .label { font-size: .9rem; color: var(--milk-dim); font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; min-height: 54px; padding: 12px 16px;
  background: rgba(30, 10, 45, .42); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--milk); font-size: 1rem; /* ۱۶px: جلوگیری از زوم iOS */
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea.input { resize: vertical; min-height: 96px; line-height: 1.8; }
.input::placeholder { color: var(--milk-faint); }
.input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255, 106, 26, .2); background: rgba(0, 0, 0, .45); }
.input[dir="ltr"] { text-align: left; letter-spacing: .06em; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--milk-dim) 50%), linear-gradient(135deg, var(--milk-dim) 50%, transparent 50%); background-position: 18px 50%, 24px 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-left: 44px; }
select.input option { color: #111; }
.hint { font-size: .82rem; color: var(--milk-faint); }
.error-text { color: #ffb0a8; font-size: .88rem; min-height: 1.4em; }

/* چیپ‌ها */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 2px 14px;
  border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: var(--glass); border: 1px solid var(--line); color: var(--milk-dim);
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
button.chip:hover { background: var(--glass-2); transform: translateY(-1px); }
.chip.is-on { background: rgba(255, 106, 26, .22); border-color: var(--ember); color: #ffe2c2; }
.chip--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--gold)); box-shadow: 0 0 10px var(--dot, var(--gold)); }

/* آواتار: هاله‌ی روحیه + عکس محو */
.avatar { --a: #ffc46b; --b: #ff6a1a; --s: 64px; position: relative; width: var(--s); height: var(--s); flex: none; }
.avatar--sm { --s: 44px; } .avatar--md { --s: 64px; } .avatar--lg { --s: 96px; } .avatar--xl { --s: min(46vw, 200px); }
.avatar__aura {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a), var(--b), var(--a));
  animation: spin 14s linear infinite; opacity: .9;
}
.avatar__aura::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink-2); }
.avatar__stack { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 25%, var(--a), var(--b) 80%); }
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.4s var(--ease), transform 1.6s var(--ease), filter 1.4s var(--ease); }
.avatar__img--blur { transform: scale(1.15); }
.avatar.is-revealed .avatar__img--blur { opacity: 0; transform: scale(1.4); filter: blur(10px); }
.avatar__initial { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: calc(var(--s) * .42); color: rgba(20, 6, 3, .78); }
.avatar__lock {
  position: absolute; bottom: -2px; inset-inline-start: -2px; width: calc(var(--s) * .32); height: calc(var(--s) * .32); min-width: 18px; min-height: 18px;
  display: grid; place-items: center; border-radius: 50%; background: var(--ink-2); border: 1px solid var(--line); font-size: 10px; z-index: 2;
}
.avatar.is-revealed .avatar__lock { display: none; }

/* توست */
.toasts { position: fixed; z-index: 100; inset-inline: 16px; bottom: calc(86px + var(--safe-b)); display: grid; gap: 10px; justify-items: center; pointer-events: none; }
.toast {
  max-width: 440px; padding: 12px 18px; border-radius: 16px; font-size: .94rem; font-weight: 600;
  background: rgba(30, 12, 8, .92); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: toast-in .4s var(--ease);
}
.toast--err { border-color: rgba(255, 107, 107, .5); color: #ffd0cb; }
.toast--ok { border-color: rgba(127, 214, 164, .5); }
.toast.is-out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* مودال */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(5, 2, 1, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s; }
.modal__box { width: min(100%, 440px); max-height: 90dvh; overflow: auto; padding: 26px 22px; animation: pop .35s var(--ease); }
.modal__box h3 { font-size: 1.2rem; margin-bottom: 10px; }
.modal__box p { color: var(--milk-dim); font-size: .96rem; margin-bottom: 18px; }
.modal__actions { display: grid; gap: 10px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.96); } }

/* نشان «رایگان» */
.free-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 800; color: #1b0804; white-space: nowrap;
  background: linear-gradient(110deg, #ffd27a, #ff8a3d 40%, #ffd27a 80%); background-size: 200% 100%;
  animation: shimmer 4s linear infinite; box-shadow: 0 6px 22px rgba(255, 138, 61, .4);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@keyframes beat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.06); } 20% { transform: scale(1); } 30% { transform: scale(1.04); } 42% { transform: scale(1); } }

/* اعلان سراسری از داشبورد Boss */
.announce { position: relative; z-index: 60; padding: 9px 16px; text-align: center; font-size: .86rem; font-weight: 600; color: #2a0f06; background: linear-gradient(90deg, #ffc15a, #ff8a4c, #ff6f8e); }