/* THE SITE KIT STYLES (1-4-1): account area (plan/380) and landing (plan/370). Tokens follow the app (light + dark). */
@font-face { font-family: 'Vazirmatn'; font-weight: 400; font-display: swap; src: url(/fonts/vazirmatn-400-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-weight: 400; font-display: swap; src: url(/fonts/vazirmatn-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Vazirmatn'; font-weight: 700; font-display: swap; src: url(/fonts/vazirmatn-600-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Vazirmatn'; font-weight: 700; font-display: swap; src: url(/fonts/vazirmatn-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
:root { --bg: 210 20% 98%; --card: 0 0% 100%; --s2: 214 24% 94%; --fg: 215 28% 17%; --muted: 215 14% 46%;
  --border: 214 20% 88%; --border-s: 214 16% 76%; --primary: 212 88% 46%; --primary-fg: 0 0% 100%; --ok: 145 60% 32%; --destructive: 0 72% 46%; }
@media (prefers-color-scheme: dark) { :root { --bg: 222 24% 9%; --card: 222 22% 13%; --s2: 222 20% 17%; --fg: 210 20% 92%;
  --muted: 217 15% 66%; --border: 222 16% 22%; --border-s: 222 14% 32%; --primary: 212 92% 62%; --primary-fg: 222 40% 10%; --ok: 145 55% 55%; --destructive: 0 80% 64%; } }
* { box-sizing: border-box; }
body { margin: 0; background: hsl(var(--bg)); color: hsl(var(--fg)); font: 15px/1.6 'Vazirmatn', system-ui, sans-serif; }
button, input { font: inherit; color: inherit; }
.top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); }
.top b { font-size: 17px; } .grow { flex: 1; } .muted { color: hsl(var(--muted)); } .small { font-size: 13px; }
.chip { font-size: 13px; padding: 5px 12px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: none; cursor: pointer; }
main { max-width: 520px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
h1 { font-size: 20px; margin: 0; }
.card { padding: 16px; border-radius: 14px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); display: flex; flex-direction: column; gap: 10px; }
.card.accent { border: 2px solid hsl(var(--primary)); }
.card-h { display: flex; align-items: center; gap: 8px; } .card-h b { font-size: 17px; }
.badge { padding: 3px 10px; border-radius: 999px; background: hsl(var(--s2)); font-weight: 700; font-size: 13px; }
.badge.pro { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.btn { display: block; width: 100%; padding: 12px 16px; border-radius: 12px; font-weight: 700; text-align: center; cursor: pointer;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border-s)); }
.btn.primary { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); border-color: transparent; }
.btn.danger { background: none; color: hsl(var(--destructive)); border-color: hsl(var(--destructive)); }
.btn:active { transform: translateY(1px); } .btn:disabled { opacity: .6; cursor: default; }
.btn.small { display: inline-block; width: auto; padding: 6px 12px; font-size: 13px; }
.link { background: none; border: 0; padding: 0; color: hsl(var(--primary)); cursor: pointer; }
.seg { display: flex; border: 1px solid hsl(var(--border-s)); border-radius: 12px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: none; padding: 9px; cursor: pointer; } .seg button.on { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); font-weight: 700; }
/* the form-field standard */
.fld label { display: block; background: hsl(var(--s2)); border-radius: 10px 10px 0 0; border-bottom: 2px solid hsl(var(--border-s)); padding: 7px 12px 6px; }
.fld label:focus-within { border-bottom-color: hsl(var(--primary)); outline: 2px solid hsl(var(--primary)); }
.fld span { display: block; font-size: 12px; font-weight: 700; color: hsl(var(--muted)); }
.fld input { width: 100%; border: 0; background: none; font-size: 16px; padding: 2px 0; outline: none; }
.fld input.ltr { direction: ltr; text-align: right; } [dir=ltr] .fld input.ltr { text-align: left; }
.captcha { display: flex; gap: 12px; align-items: center; } .captcha img { height: 50px; border-radius: 8px; background: #fff; }
.otp { display: flex; gap: 8px; direction: ltr; justify-content: center; }
.otp input { width: 52px; height: 60px; text-align: center; font-size: 24px; font-weight: 700; border: 0; border-radius: 10px;
  background: hsl(var(--s2)); border-bottom: 2px solid hsl(var(--border-s)); outline: none; }
.otp input:focus { border-bottom-color: hsl(var(--primary)); outline: 2px solid hsl(var(--primary)); }
.dev { padding: 8px 10px; border: 1px dashed hsl(var(--border-s)); border-radius: 8px; font-size: 13px; color: hsl(var(--muted)); }
.err { color: hsl(var(--destructive)); font-size: 14px; min-height: 1em; }
.row { display: flex; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid hsl(var(--border)); }
.row > :first-child { flex: 1; min-width: 0; }
.ok { color: hsl(var(--ok)); font-weight: 700; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: hsl(var(--fg)); color: hsl(var(--bg)); padding: 10px 16px; border-radius: 10px; }