/* ============================================================================
   جیبک — استایل مشترک صفحات فرعی (حریم خصوصی، قوانین، حساب کاربری).

   توکن‌ها و اندازه‌ها عیناً از index.html آمده‌اند — همان شعاع‌ها، همان ارتفاع
   دکمه، همان هدر شیشه‌ای. هدف این است که این صفحات ادامه‌ی سایت به‌نظر برسند،
   نه یک ضمیمه‌ی جداافتاده.
   ========================================================================== */

:root{
  --teal-50:#E8F8F4; --teal-100:#C7EEE5; --teal-200:#9FE0D2; --teal-300:#5FCDB8;
  --teal-400:#2DC5AD; --teal-500:#12A892; --teal-600:#018577; --teal-700:#016B60;
  --teal-800:#01554C; --teal-900:#01463E; --teal-950:#052E29;

  --ink-950:#0B1614; --ink-900:#0E1F1C; --ink-700:#2C3F3B; --ink-500:#4A5F5B;
  --ink-400:#6B807B; --ink-300:#93A9A4; --ink-200:#C4D4D0; --ink-100:#E2EBE8;
  --ink-50:#F4F9F7;  --white:#FFFFFF;

  --positive-light:#127438; --positive-dark:#34D399;
  --negative-light:#D92D20; --negative-dark:#FF7B72;

  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-full:999px;
  --pad:20px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

:root,
:root[data-theme="light"]{
  --bg:var(--white); --bg-subtle:var(--ink-50);
  --surface:var(--white); --surface-raised:var(--white);
  --border:var(--ink-100); --border-strong:var(--ink-200);
  --text:var(--ink-900); --text-muted:var(--ink-500); --text-inverse:var(--white);
  --primary:var(--teal-700); --primary-hover:var(--teal-800);
  --primary-text:var(--white); --primary-subtle:var(--teal-50); --primary-border:var(--teal-200);
  --focus-ring:var(--teal-500);
  --positive:var(--positive-light); --negative:var(--negative-light);
  --shadow-sm:0 1px 2px rgba(5,46,41,.08);
  --shadow-md:0 4px 12px rgba(5,46,41,.10);
  --shadow-lg:0 12px 32px rgba(5,46,41,.14);
  --scrim:rgba(255,255,255,.86);
  --chip:var(--teal-50); --chip-text:var(--teal-700);
  --logo-light:block; --logo-dark:none;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--ink-950); --bg-subtle:#101C1A;
    --surface:#131F1D; --surface-raised:#1A2825;
    --border:#22322F; --border-strong:#2E403C;
    --text:#E4EFEC; --text-muted:var(--ink-300); --text-inverse:var(--ink-950);
    --primary:var(--teal-400); --primary-hover:var(--teal-300);
    --primary-text:var(--ink-950); --primary-subtle:#10322D; --primary-border:#1C4B44;
    --focus-ring:var(--teal-300);
    --positive:var(--positive-dark); --negative:var(--negative-dark);
    --shadow-sm:0 1px 2px rgba(0,0,0,.40);
    --shadow-md:0 4px 12px rgba(0,0,0,.50);
    --shadow-lg:0 12px 32px rgba(0,0,0,.60);
    --scrim:rgba(11,22,20,.84);
    --chip:#10322D; --chip-text:var(--teal-300);
    --logo-light:none; --logo-dark:block;
  }
}

:root[data-theme="dark"]{
  --bg:var(--ink-950); --bg-subtle:#101C1A;
  --surface:#131F1D; --surface-raised:#1A2825;
  --border:#22322F; --border-strong:#2E403C;
  --text:#E4EFEC; --text-muted:var(--ink-300); --text-inverse:var(--ink-950);
  --primary:var(--teal-400); --primary-hover:var(--teal-300);
  --primary-text:var(--ink-950); --primary-subtle:#10322D; --primary-border:#1C4B44;
  --focus-ring:var(--teal-300);
  --positive:var(--positive-dark); --negative:var(--negative-dark);
  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 4px 12px rgba(0,0,0,.50);
  --shadow-lg:0 12px 32px rgba(0,0,0,.60);
  --scrim:rgba(11,22,20,.84);
  --chip:#10322D; --chip-text:var(--teal-300);
  --logo-light:none; --logo-dark:block;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Vazirmatn','IRANSansX','Segoe UI',Tahoma,system-ui,sans-serif;
  font-size:1rem; line-height:1.85;
  direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased;
}

.wrap{ width:100%; max-width:760px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:520px; }

/* ---------------- هدر ---------------- */

.top{
  position:sticky; top:0; z-index:60;
  background:var(--scrim);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.top__in{
  max-width:1140px; margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--text); font-weight:800; font-size:1.1875rem; }
.brand__mark{ width:38px; height:38px; border-radius:11px; flex:none; box-shadow:var(--shadow-sm); }
.logo-light{ display:var(--logo-light); }
.logo-dark{ display:var(--logo-dark); }
.top__back{ color:var(--text-muted); text-decoration:none; font-size:.9375rem; font-weight:600; }
.top__back:hover{ color:var(--primary); }

.foot{
  margin-top:72px; padding:26px 0 44px;
  border-top:1px solid var(--border);
  color:var(--text-muted); font-size:.8125rem;
}
.foot a{ color:var(--text-muted); }
.foot a:hover{ color:var(--primary); }

/* ---------------- تایپوگرافی ---------------- */

h1{ font-size:clamp(1.75rem,5vw,2.25rem); line-height:1.3; margin:44px 0 8px; font-weight:800; letter-spacing:-.01em; }
h2{ font-size:1.1875rem; line-height:1.5; margin:38px 0 10px; font-weight:700; }
h3{ font-size:1rem; margin:24px 0 6px; font-weight:700; }
p{ margin:0 0 14px; }
ul,ol{ margin:0 0 16px; padding-inline-start:22px; }
li{ margin-bottom:7px; }
a{ color:var(--primary); }
strong{ font-weight:700; }

.lede{ color:var(--text-muted); font-size:1.0625rem; line-height:1.8; margin-bottom:8px; }
.updated{ color:var(--text-muted); font-size:.8125rem; margin-bottom:34px; }
.muted{ color:var(--text-muted); }
.small{ font-size:.8125rem; }

/* ---------------- اجزا ---------------- */

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:26px 24px;
  margin-bottom:18px;
  box-shadow:var(--shadow-md);
}

.note{
  background:var(--primary-subtle);
  border:1px solid var(--primary-border);
  border-radius:var(--r-md);
  padding:16px 18px; margin:0 0 20px;
  font-size:.9375rem; line-height:1.8;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:58px; padding:0 24px;
  border:0; border-radius:var(--r-sm);
  font:inherit; font-size:1.0625rem; font-weight:700; line-height:1;
  cursor:pointer; text-decoration:none; text-align:center;
  transition:background-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn--primary{ background:var(--primary); color:var(--primary-text); box-shadow:var(--shadow-md); }
.btn--primary:hover{ background:var(--primary-hover); }
.btn--ghost{ background:var(--surface); color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--border-strong), var(--shadow-sm); }
.btn--ghost:hover{ background:var(--bg-subtle); }
.btn--sm{ width:auto; min-height:42px; padding:0 16px; font-size:.875rem; border-radius:12px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

label{ display:block; font-size:.9375rem; font-weight:700; margin-bottom:9px; }
.field{
  width:100%; min-height:58px; padding:0 16px;
  border-radius:var(--r-sm); font:inherit; font-size:1.0625rem;
  border:1.5px solid var(--border-strong); background:var(--bg); color:var(--text);
  transition:border-color .18s var(--ease);
}
.field:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-subtle); }
.field--code{ text-align:center; letter-spacing:.5em; direction:ltr; font-weight:700; font-size:1.375rem; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; }
.row + .row{ border-top:1px solid var(--border); }

.chip{ display:inline-block; padding:5px 13px; border-radius:var(--r-full);
  background:var(--chip); color:var(--chip-text); font-size:.75rem; font-weight:700; }
.chip--off{ background:var(--bg-subtle); color:var(--text-muted); }

.code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:clamp(1.25rem,5vw,1.625rem); font-weight:700; letter-spacing:.12em;
  direction:ltr; text-align:center;
  padding:20px 12px; border-radius:var(--r-md);
  background:var(--primary-subtle); border:1.5px dashed var(--primary-border);
  color:var(--text); user-select:all; word-break:break-all;
}

.alert{ border-radius:var(--r-md); padding:15px 18px; margin-bottom:20px;
  font-size:.9375rem; line-height:1.75; border:1.5px solid; }
.alert--ok{ background:var(--primary-subtle); border-color:var(--primary-border); color:var(--text); }
.alert--bad{ background:transparent; border-color:var(--negative); color:var(--negative); }

/* نماد اعتماد الکترونیکی — تصویرش زمینه‌ی روشن دارد، پس قاب سفید می‌گیرد تا در
   حالت تاریک بریده به‌نظر نرسد. */
.trust{ display:flex; justify-content:center; margin:34px 0 0; }
.trust a{ display:inline-flex; background:#fff; padding:8px; border-radius:12px;
  box-shadow:var(--shadow-sm); line-height:0; }
.trust img{ display:block; max-width:110px; height:auto; }

.hidden{ display:none !important; }

:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}