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

:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#eef1f7;
  --text:#0f1729;
  --muted:#64708a;
  --border:#e1e6ef;
  --accent:#2563eb;
  --accent-ink:#ffffff;
  --accent-soft:rgba(37,99,235,.10);
  --danger:#dc2626;
  --danger-soft:rgba(220,38,38,.10);
  --ok:#15803d;
  --ok-soft:rgba(22,163,74,.12);
  --shadow:0 1px 2px rgba(15,23,41,.05),0 10px 30px -14px rgba(15,23,41,.22);
  --radius:16px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0a0e16;
  --surface:#111827;
  --surface-2:#182032;
  --text:#e8edf6;
  --muted:#8d99b0;
  --border:#212b3d;
  --accent:#6ea2ff;
  --accent-ink:#071226;
  --accent-soft:rgba(110,162,255,.14);
  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.14);
  --ok:#4ade80;
  --ok-soft:rgba(74,222,128,.14);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
  font-size:15px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img,video,svg{max-width:100%}
a{color:var(--accent)}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{flex:none;display:block}

.wrap{width:100%;max-width:980px;margin-inline:auto;padding-inline:16px}

/* ---------- هدر ---------- */
.top{
  position:sticky;top:0;z-index:30;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.brand-mark{
  width:40px;height:40px;border-radius:13px;flex:none;
  color:var(--accent-ink);
  display:grid;place-items:center;
}
.brand b{display:block;font-size:17px;line-height:1.25;font-weight:800}
.brand small{display:block;font-size:12px;line-height:1.3;color:var(--muted)}

.icon-btn{
  width:42px;height:42px;flex:none;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .15s,border-color .15s;
}
:root[data-theme="dark"] .i-moon,
:root:not([data-theme="dark"]) .i-sun{display:none}

/* ---------- دکمه‌ها ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 18px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-weight:600;font-size:14.5px;line-height:1;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,transform .06s,opacity .15s;
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.btn-sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
@media (hover:hover){
  .icon-btn:hover,.btn:hover{border-color:var(--accent)}
  .btn-primary:hover{opacity:.92}
  .btn-danger:hover{border-color:var(--danger)}
}

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