/* ─────────────────────────────────────────────────────────
   RIQX — سیستم طراحی
   مرجع: D-184 · پالت و تایپوگرافی از docs/07-PUBLIC-SITE.md
   خاکستری‌ها خنثای خالص نیستند؛ همه به سمت بنفش متمایل‌اند.
   ───────────────────────────────────────────────────────── */
:root{
  --night:#141531; --night-2:#1B1C40;
  --ground:#EAE8F6; --ground-2:#F3F2FA;
  --surface:#FFFFFF; --surface-2:#F7F6FC;
  --ink:#191A32; --ink-soft:#4A4C6E; --ink-faint:#7B7D9C;
  --line:#D6D3EC; --line-soft:#E4E2F2;
  --accent:#5B4BE8; --accent-2:#7A6DF0; --accent-ink:#3B2FBF; --accent-wash:#E5E2FB;
  --signal:#1E9FC4; --signal-wash:#DCF0F7;
  --warm:#D4762A; --warm-wash:#FAEADC;
  --gold:#C9922B; --live:#D8395B; --live-wash:#FBE3E8;
  --ok:#1E7A55; --ok-wash:#DDF3E8;
  --on-night:#EDECFA; --on-night-soft:#A9A7CE; --on-night-faint:#7B79A6;
  --night-line:#2E2F5C;
  --shadow-s:0 1px 2px rgba(25,26,50,.05), 0 4px 12px -8px rgba(25,26,50,.25);
  --shadow-m:0 2px 4px rgba(25,26,50,.04), 0 18px 40px -28px rgba(25,26,50,.45);
  --r-m:16px; --r-l:24px;
  /* متن روی زمینه‌ی accent — در تیره accent روشن است و سفید خوانا نمی‌ماند (D-699) */
  --on-accent:#fff;
  /* بنفشِ پررنگ با متنِ سفید در هر دو پوسته — دکمه‌ی اصلیِ نمونه‌ی /events/ (D-718) */
  --accent-solid:#5B4BE8; --on-accent-solid:#fff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E0F24; --ground-2:#141531; --surface:#191A3A; --surface-2:#1F2046;
    --ink:#EDECFA; --ink-soft:#B0AEDA; --ink-faint:#8482B4;
    --line:#2C2D5C; --line-soft:#232449;
    --accent:#8C81F5; --accent-2:#A79EF8; --accent-ink:#C4BEFB; --accent-wash:#221F52;
    --signal:#4FC0E4; --signal-wash:#123444;
    --warm:#E29A57; --warm-wash:#3A2617; --gold:#E0B45C;
    --live:#F07A95; --live-wash:#3C1622;
    --ok:#5FCB98; --ok-wash:#123A2A; --on-accent:#141531;
    --shadow-s:0 1px 2px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.7);
    --shadow-m:0 2px 6px rgba(0,0,0,.45), 0 22px 48px -30px rgba(0,0,0,.9);
  }
}
/* کنترل‌های بومیِ مرورگر (نوارِ لغزش، کادرِ فرم) هم هم‌پوسته شوند (D-710) */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="dark"]{
  --ground:#0E0F24; --ground-2:#141531; --surface:#191A3A; --surface-2:#1F2046;
  --ink:#EDECFA; --ink-soft:#B0AEDA; --ink-faint:#8482B4;
  --line:#2C2D5C; --line-soft:#232449;
  --accent:#8C81F5; --accent-2:#A79EF8; --accent-ink:#C4BEFB; --accent-wash:#221F52;
  --signal:#4FC0E4; --signal-wash:#123444;
  --warm:#E29A57; --warm-wash:#3A2617; --gold:#E0B45C;
  --live:#F07A95; --live-wash:#3C1622;
  --ok:#5FCB98; --ok-wash:#123A2A; --on-accent:#141531;
  /* همان سایه‌های حالتِ تیره‌ی سیستمی — انتخابِ دستیِ تیره آن‌ها را نداشت */
  --shadow-s:0 1px 2px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.7);
  --shadow-m:0 2px 6px rgba(0,0,0,.45), 0 22px 48px -30px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
/* صفت hidden باید بر هر display کلاسی بچربد؛ وگرنه دکمه‌ای که با
   hidden پنهان شده، به‌خاطر display:inline-flex کلاس .btn دیده می‌ماند. */
[hidden]{display:none!important}
body{
  margin:0;direction:rtl;text-align:right;
  background:var(--ground);color:var(--ink);
  font-family:Vazirmatn,system-ui,sans-serif;font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.mono{direction:ltr;display:inline-block;font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;width:100%}
@media (max-width:700px){.wrap{padding:0 18px}}

/* ── header ── */
.site-hd{position:sticky;top:0;z-index:40;background:rgba(20,21,49,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--night-line);color:var(--on-night)}
.hd{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-night);flex:0 0 auto}
.brand svg{width:27px;height:27px}
.brand .n{font-family:Sora,sans-serif;letter-spacing:.15em;font-size:15px;font-weight:700}
nav.main{display:flex;gap:2px;margin-inline-start:12px;flex:1 1 auto}
nav.main a{color:var(--on-night-soft);font-size:14.5px;font-weight:500;padding:8px 13px;
  border-radius:9px;transition:color .15s,background .15s}
nav.main a:hover{color:var(--on-night);background:rgba(255,255,255,.07)}
.hd-cta{display:flex;gap:9px;align-items:center;flex:0 0 auto}
.hd-cta .who{color:var(--on-night-soft);font-size:14px}
@media (max-width:860px){nav.main{display:none}}
@media (max-width:520px){.hd-cta .ghost,.hd-cta .who{display:none}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s,color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--accent);color:var(--on-accent)}
.btn-solid:hover{background:var(--accent-2)}
.btn-ghost-n{border-color:rgba(255,255,255,.24);color:var(--on-night)}
.btn-ghost-n:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-lg{padding:14px 26px;font-size:15.5px}
.btn-block{width:100%}

/* ــ سه کلاسی که قالب‌ها استفاده می‌کردند و هرگز تعریف نشده بودند ــ
   `btn-line` در ۱۲ قالب و `btn-sm` در ۱۸ قالب به کار رفته بود و
   هیچ‌کدام سبکی نداشتند: دکمه‌ها بدون قاب و هم‌اندازه‌ی دکمه‌ی اصلی
   رندر می‌شدند. خرابیِ بی‌صدا بود چون چیزی نمی‌شکست، فقط زشت بود. */
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--accent);color:var(--accent-ink);
  background:var(--accent-wash)}
.btn-sm{padding:8px 15px;font-size:13.5px}

/* دکمه‌ی شروع ضبط — تنها دکمه‌ای در پنل که رنگ «زنده» می‌گیرد،
   چون کاری می‌کند که برگشت ندارد و باید دیده شود (D-533). */
.btn-rec{background:var(--live);color:#fff}
.btn-rec:hover{filter:brightness(1.08)}
.rec-dot{width:8px;height:8px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,.28)}
@media (prefers-reduced-motion:no-preference){
  .btn-rec .rec-dot{animation:riqx-rec-pulse 1.8s ease-in-out infinite}
}
@keyframes riqx-rec-pulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

/* ── messages ── */
.msgs{padding-top:16px;display:flex;flex-direction:column;gap:8px}
.msg{padding:12px 18px;border-radius:12px;font-size:14.5px;
  background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--line-soft)}
.msg.error{background:var(--live-wash);color:var(--live);border-color:var(--live)}
.msg.success{background:var(--ok-wash);color:var(--ok);border-color:var(--ok)}
.msg.warning{background:var(--warm-wash);color:var(--warm)}

/* ── night band ── */
.night{background:var(--night);color:var(--on-night);position:relative;overflow:hidden}
.night .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 0%, rgba(91,75,232,.30), transparent 72%)}
.night > .wrap{position:relative;z-index:1}

/* ── sections ── */
main{flex:1 1 auto}
section.lt{padding:64px 0}
@media (max-width:700px){section.lt{padding:44px 0}}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:32px;flex-wrap:wrap}
.kicker{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:10px}
h1{margin:0 0 16px;font-size:clamp(29px,4.6vw,48px);line-height:1.32;font-weight:800;
  letter-spacing:-.02em;text-wrap:balance}
h2{margin:0 0 10px;font-size:clamp(23px,3.2vw,32px);line-height:1.4;font-weight:800;
  letter-spacing:-.018em;text-wrap:balance}
.sec-lede{margin:0;font-size:16px;color:var(--ink-soft);line-height:1.9}
.more{font-size:14.5px;font-weight:600;color:var(--accent-ink);white-space:nowrap}

/* ── hero ── */
.hero{padding:58px 0 64px}
.hero h1{max-width:20ch}
.hero .lede{margin:0 0 26px;font-size:16.5px;line-height:1.95;color:var(--on-night-soft);max-width:52ch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  color:var(--on-night-soft);background:rgba(255,255,255,.06);border:1px solid var(--night-line);
  border-radius:999px;padding:6px 14px 6px 10px;margin-bottom:20px}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 3px rgba(79,192,228,.2)}
.search{display:flex;gap:8px;background:rgba(255,255,255,.07);border:1px solid var(--night-line);
  border-radius:999px;padding:7px 7px 7px 18px;align-items:center;max-width:540px;margin-bottom:16px}
.search svg{width:19px;height:19px;color:var(--on-night-faint);flex:0 0 auto}
.search input{flex:1 1 auto;background:none;border:none;outline:none;color:var(--on-night);
  font-family:inherit;font-size:15px;padding:6px 0}
.search input::placeholder{color:var(--on-night-faint)}
.quick{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.quick a{border:1px solid var(--night-line);border-radius:999px;padding:4px 12px;color:var(--on-night-soft)}
.quick a:hover{border-color:var(--accent-2);color:var(--on-night)}

/* ── cards ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:940px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:24px 22px;box-shadow:var(--shadow-s);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.card h3{margin:0 0 7px;font-size:17px;font-weight:700;line-height:1.55}
.card p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.9}
.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-ink);margin-bottom:14px}
.ic svg{width:21px;height:21px}
.ic.sig{background:var(--signal-wash);color:var(--signal)}
.ic.wrm{background:var(--warm-wash);color:var(--warm)}

/* ── event cards ── */
.evs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1050px){.evs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.evs{grid-template-columns:1fr}}
.ev{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s}
.ev:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.ev .thumb{height:126px;position:relative;background:linear-gradient(140deg,#2A2670,#4A3FB0)}
.ev .badge{position:absolute;top:11px;inset-inline-start:11px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:#191A32}
.ev .badge.live{background:var(--live);color:#fff}
.ev .badge.free{background:var(--signal);color:#fff}
.ev .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1 1 auto}
.ev .cat{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.ev h3{margin:0;font-size:15.5px;font-weight:700;line-height:1.65}
.tut{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft)}
.av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--on-accent);background:var(--accent)}
.ev .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft)}
.ev .meta{display:flex;gap:12px;font-size:12.5px;color:var(--ink-faint)}
.ev .price{direction:ltr;font-size:14.5px;font-weight:700}
.ev .price.free{font-family:Vazirmatn,sans-serif;color:var(--signal)}

/* ── forms ── */
.form-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-l);
  padding:34px 32px;box-shadow:var(--shadow-m);max-width:440px;margin:0 auto}
.form-card h1{font-size:24px;margin-bottom:8px}
.form-card .sub{color:var(--ink-soft);font-size:14.5px;margin:0 0 26px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.field input{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:15.5px;outline:none;
  transition:border-color .15s}
.field input:focus{border-color:var(--accent)}
.field input.code{direction:ltr;text-align:center;
  letter-spacing:.6em;font-size:22px;padding-inline-start:.6em}
.field .hint{font-size:13px;color:var(--ink-faint);margin-top:7px}
.field .err{font-size:13.5px;color:var(--live);margin-top:7px}
.form-foot{margin-top:20px;text-align:center;font-size:14px;color:var(--ink-faint)}
.form-foot a{color:var(--accent-ink);font-weight:600}

/* ── plans ── */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:24px 22px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:13px}
.plan.hot{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash),var(--shadow-m)}
.plan .tag{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--accent-ink);
  background:var(--accent-wash);border-radius:999px;padding:4px 11px}
.plan h3{margin:0;font-size:18px;font-weight:800}
.price{direction:ltr;font-size:22px;font-weight:700;line-height:1.25}
.price .u{font-family:Vazirmatn,sans-serif;font-size:13px;font-weight:400;color:var(--ink-faint);margin-inline-start:5px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:14.2px;color:var(--ink-soft);flex:1 1 auto}
.plan li{display:flex;gap:9px;align-items:flex-start;line-height:1.75}


/* ── empty state ── */
.empty{text-align:center;padding:60px 20px;color:var(--ink-faint)}
.empty h3{margin:0 0 8px;font-size:18px;color:var(--ink)}

/* ── footer ── */
footer{background:var(--ground-2);border-top:1px solid var(--line-soft);padding:40px 0 28px;font-size:14px}
.ft{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:30px}
@media (max-width:700px){.ft{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ft{grid-template-columns:1fr}}
.ft h4{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-faint)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ft a{color:var(--ink-soft)}
.ft a:hover{color:var(--accent-ink)}
.ft .about{color:var(--ink-soft);max-width:38ch;line-height:1.9;margin:12px 0 0}
.ft-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.ft-brand svg{width:24px;height:24px}
.ft-brand .n{font-family:Sora,sans-serif;letter-spacing:.14em;font-size:14px}
.ft-bot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line-soft);
  color:var(--ink-faint);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.card:hover,.ev:hover{transform:none}
}

/* ── filters ── */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filters input,.filters select{padding:11px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:15px}
.filters input{flex:1 1 260px}

/* ── event detail ── */
.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.detail-title{font-size:clamp(24px,3.6vw,34px)}
.tut-lg{margin-bottom:18px}
.pre{white-space:pre-line}
.facts{display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.facts > div{display:flex;justify-content:space-between;gap:14px}
.facts > div > span:first-child{color:var(--ink-faint)}
.cta-slot{margin-top:20px}
.cta-slot .msg{margin:0}
.fineprint{font-size:13px;color:var(--ink-faint);margin:16px 0 0}

/* ── verify ── */
.form-card.wide{max-width:520px}
.field input.serial{direction:ltr;text-align:left}
.msg.spaced{margin-top:20px}

/* ─────────────────────────────────────────────────────────
   ارقام لاتین در متن فارسی (D-353)
   عدد لاتین کنار متن فارسی باید کمی متمایز و هم‌عرض باشد، وگرنه
   ستون‌های عددی جدول به هم می‌ریزند و مبلغ در فاکتور تراز نمی‌شود.
   ───────────────────────────────────────────────────────── */
.ev .price, .inv-row b, .inv-total b, .purse-amount,
.stat b, .ev-price b, .ev-countdown b, .rating-big,
.cert-serial b, .serial, .tbl td, .quota-meta,
.ev-fact b, .ri-sub, .plan-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* عدد در متن فارسی کمی سنگین‌تر دیده شود — مثل تصویر مرجع */
.ev-price b, .inv-total b, .purse-amount, .plan-price b {
  letter-spacing: -.01em;
}
/* ─────────────────────────────────────────────────────────
   اصلاحات: فونت اعداد، تعرفه، فیلترها
   ───────────────────────────────────────────────────────── */

/* ── ۱. اعداد با وزیرمتن، نه فونت تک‌عرض لاتین (D-364) ──
   عدد لاتین با فونت مونواسپیس در متن فارسی بیگانه دیده می‌شود.
   وزیرمتن ارقام لاتین دارد و کنار متن یکدست می‌نشیند؛ فقط
   tabular-nums را نگه می‌داریم تا ستون‌ها تراز بمانند. */
.mono, .ev .price, .price, .field input.code, .field input.serial,
.cert-serial b, .serial, .ins-score > b, .rating-big,
.plan-price b, .purse-amount, .ev-price b, .ev-countdown b,
.inv-row b, .inv-total b, .stat b, .ins-stat b {
  font-family: "Vazirmatn", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* شماره‌ی گواهی و کد ورود همچنان چپ‌به‌راست‌اند، ولی با وزیرمتن */
.field input.code, .field input.serial, .cert-serial b, .serial {
  letter-spacing: .06em;
}

/* ── ۲. تعرفه — در `plans.css` (D-699) ── */

/* ── ۳. فیلترها — بیضی و سبک (ردیفِ زمان، قیمت و ترتیبِ /events/، D-718) ── */
.evh-more select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
  font-family: "Vazirmatn", system-ui, sans-serif;
  font-size: .85rem; font-weight: 500;
  padding: 9px 16px; padding-inline-end: 34px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;

  /* پیکان ظریف به‌جای پیکان پیش‌فرض مرورگر */
  background-image: url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'\
%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237B7D9C' stroke-width='1.6'\
 stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 11px;
}
.evh-more select:hover { border-color: var(--line);
  background-color: var(--surface); color: var(--ink); }
.evh-more select:focus { outline: none; border-color: var(--accent);
  background-color: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-wash); }

@media (max-width: 900px) {
  .plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.alt-links { display:flex; justify-content:center; gap:8px; margin-top:18px; font-size:.86rem; color:var(--ink-faint); }
.alt-links a { color:var(--accent); text-decoration:none; }
.alt-links a:hover { text-decoration:underline; }

/* ── دو راه ورود در یک صفحه ── */
.login-tabs { display: flex; gap: 6px; margin: 18px 0 20px;
  padding: 5px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line-soft); }
.login-tab { flex: 1; border: 0; border-radius: 999px; cursor: pointer;
  padding: 10px 12px; font: inherit; font-size: .88rem; font-weight: 500;
  background: none; color: var(--ink-soft); transition: background .15s, color .15s; }
.login-tab:hover { color: var(--ink); }
.login-tab.on { background: var(--surface); color: var(--ink);
  font-weight: 600; box-shadow: var(--shadow-s); }
.login-note { font-size: .82rem; color: var(--ink-faint); text-align: center;
  margin: 14px 0 0; line-height: 1.8; }

/* ── White-label روی دامنه‌ی اختصاصی (D-650) ──
   برندِ سازمان جای نشانِ ریکس در سرصفحه می‌نشیند. رنگِ سازمان از
   `base.html` روی `--accent` می‌نشیند، پس دکمه‌ها و نشانه‌های همین
   صفحه‌ها خودبه‌خود همان رنگ می‌شوند. */
.rq-wl-logo{height:44px;width:auto;max-width:180px;object-fit:contain;display:block}
.rq-wl-name{font-weight:800;font-size:1.05rem;color:var(--ink)}
@media (max-width:640px){.rq-wl-logo{height:36px;max-width:140px}}

/* ── فوترِ پوسته: فاصله‌ی سرستون تا نخستین سطر (D-713) ──
   کارفرما: «فاصله‌ی سطرِ اول (خدمات و راهکارها، دسترسی سریع، امنیت و اعتماد) با سطرِ
   پایینش را استاندارد کن». `shell.css` ساخته‌شده است و `space-y-*` را ندارد، پس فاصله
   صفر بود (اندازه‌گیری در مرورگر). یک عدد برای هر سه ستون، و همان عددِ فوترِ لندینگ. */
footer.riqx-shell h4 { margin: 0 0 14px; line-height: 1.6; }
footer.riqx-shell h4 + * { margin-top: 0; }