/* ══════════════════════════════════════════════════════════════
   املاک ۲۱ — شیت استایل پورتال عمومی
   پالت از پورتال ورزشی (varzeshsanat) الگو گرفته شده است:
   بنفش #7c3aed → سرخابی #d946ef، طلایی #f2c56b، سطوح یاسی #f3ecff
   ══════════════════════════════════════════════════════════════ */

/* ── تم ۱: بنفش ورزشی (پیش‌فرض) ───────────────────────────── */
:root,
html[data-theme="violet"]{
  --p900:#4c1d95; --p700:#6d28d9; --p600:#7c3aed; --p500:#8b5cf6; --p400:#a78bfa;
  --magenta:#d946ef; --gold:#f2c56b;
  --bg:#ffffff; --bg-alt:#f7f2ff; --surface:#ffffff; --surface-2:#f3ecff;
  --border:rgba(124,58,237,.16); --border-soft:rgba(124,58,237,.09);
  --ink:#2a1750; --muted:#6e6088;
  --shadow:0 20px 48px rgba(124,58,237,.16);
  --shadow-sm:0 6px 20px rgba(124,58,237,.08);
  --shadow-xs:0 1px 2px rgba(42,23,80,.05), 0 4px 14px rgba(42,23,80,.05);
  --grad:linear-gradient(135deg,var(--p500),var(--magenta));
  --grad-deep:linear-gradient(135deg,var(--p600),var(--magenta));
  --grad-tile:linear-gradient(135deg,var(--p500),var(--magenta));
  --on-cta:#ffffff;
  --cta-shadow:0 8px 22px rgba(124,58,237,.28);
  --hero-bg:
    radial-gradient(760px 340px at 88% -20%,rgba(217,70,239,.55),transparent 62%),
    radial-gradient(620px 320px at 4% 120%,rgba(76,29,149,.72),transparent 64%),
    linear-gradient(135deg,#6d28d9 0%,#7c3aed 46%,#a21caf 100%);
  --hero-glow:rgba(255,255,255,.14);
}

/* ── تم ۲: سبز ملکی (برگرفته از بنر «املاک ۲۱») ────────────── */
html[data-theme="green"]{
  --p900:#06301f; --p700:#0a4632; --p600:#0b4e3d; --p500:#12684f; --p400:#2f8a6c;
  --magenta:#cdb060; --gold:#cdb060;
  --bg:#ffffff; --bg-alt:#f1f7f4; --surface:#ffffff; --surface-2:#e7f2ed;
  --border:rgba(11,78,61,.16); --border-soft:rgba(11,78,61,.09);
  --ink:#0d2b22; --muted:#5b7a6e;
  --shadow:0 20px 48px rgba(11,78,61,.18);
  --shadow-sm:0 6px 20px rgba(11,78,61,.09);
  --shadow-xs:0 1px 2px rgba(13,43,34,.05), 0 4px 14px rgba(13,43,34,.05);
  --grad:linear-gradient(135deg,#cdb060,#dcc178);
  --grad-deep:linear-gradient(135deg,#0b4e3d,#12684f);
  --grad-tile:linear-gradient(135deg,#0b4e3d,#12684f);
  --on-cta:#073c2c;
  --cta-shadow:0 8px 22px rgba(205,176,96,.34);
  --hero-bg:
    radial-gradient(720px 330px at 92% -18%,rgba(205,176,96,.26),transparent 62%),
    radial-gradient(640px 330px at 4% 122%,rgba(7,60,44,.92),transparent 66%),
    linear-gradient(135deg,#073c2c 0%,#0b4e3d 52%,#0f5c47 100%);
  --hero-glow:rgba(255,255,255,.07);
}

:root{
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --info:#0ea5e9;
  --radius:20px; --radius-sm:14px; --radius-xs:10px;
  --font:'Vazirmatn','IRANSansX','IRANSans',Tahoma,system-ui,sans-serif;
  --head-h:68px;
}

/* نمایش محتوای مخصوص هر تم */
[data-theme-show]{display:none !important}
html[data-theme="violet"] [data-theme-show="violet"]{display:block !important}
html[data-theme="green"]  [data-theme-show="green"]{display:block !important}
html[data-theme="green"]  [data-theme-show="green"].r21-flex{display:flex !important}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.r21-body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:15.5px; line-height:1.85; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.5}
.r21-wrap{width:min(1200px,92vw);margin-inline:auto}
.r21-main{min-height:60vh}

/* ═════════ سربرگ ═════════ */
.r21-head{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border-soft);
}
.r21-head__in{display:flex;align-items:center;gap:20px;min-height:var(--head-h)}
.r21-brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--ink)}
.r21-brand__mark{
  width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--grad-deep);color:#fff;font-size:15px;font-weight:900;
  box-shadow:0 8px 20px rgba(124,58,237,.3);
}
.r21-brand__txt b{display:block;font-size:17px;line-height:1.3}
.r21-brand__txt small{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.r21-nav{display:flex;gap:6px;margin-inline-start:auto;font-size:14.5px;font-weight:600}
.r21-nav a{padding:8px 14px;border-radius:11px;color:var(--muted);transition:.18s}
.r21-nav a:hover{background:var(--surface-2);color:var(--p700)}
.r21-nav a.is-active{background:var(--surface-2);color:var(--p700)}
.r21-head__act{display:flex;gap:9px;align-items:center;margin-inline-start:14px}
.r21-ava{
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.28);
  display:inline-grid;place-items:center;font-size:12px;font-weight:800;margin-inline-end:6px
}
.r21-burger{display:none;background:none;border:0;cursor:pointer;padding:9px;margin-inline-start:auto}
.r21-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;margin:4px 0}
.r21-mobnav{display:none;border-top:1px solid var(--border-soft);background:#fff;padding:10px 0}
.r21-mobnav a{display:block;padding:11px 22px;font-weight:600;color:var(--muted)}
.r21-mobnav a.is-active{color:var(--p700)}

/* ═════════ دکمه‌ها ═════════ */
.r21-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 22px;border-radius:12px;font-family:inherit;font-size:14.5px;font-weight:700;
  border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap
}
.r21-btn--primary{background:var(--grad);color:var(--on-cta);box-shadow:var(--cta-shadow)}
.r21-btn--primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.r21-btn--ghost{border-color:var(--border);color:var(--p700);background:#fff}
.r21-btn--ghost:hover{background:var(--surface-2)}
.r21-btn--soft{background:var(--surface-2);color:var(--p700)}
.r21-btn--soft:hover{background:#ebe0ff}
.r21-btn--danger{background:#fff;border-color:rgba(239,68,68,.3);color:#b91c1c}
.r21-btn--danger:hover{background:#fef2f2}
.r21-btn--sm{padding:8px 15px;font-size:13.5px;border-radius:10px}
.r21-btn--lg{padding:14px 32px;font-size:16px}
.r21-btn--block{width:100%}

/* ═════════ هیرو ═════════ */
.r21-hero{
  position:relative;overflow:hidden;border-radius:var(--radius);color:#fff;
  background:var(--hero-bg);
  padding:clamp(34px,5vw,58px) clamp(24px,4vw,52px);
  margin:26px 0 0; box-shadow:var(--shadow);
  transition:background .35s ease;
}
.r21-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--hero-glow) 1px,transparent 1px);
  background-size:26px 26px;
}
.r21-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:center}
.r21-hero__pill{
  display:inline-block;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:16px
}
.r21-hero h1{font-size:clamp(25px,3.6vw,41px);font-weight:900;letter-spacing:-.4px;margin-bottom:14px}
.r21-hero h1 em{font-style:normal;color:var(--gold)}
.r21-hero__lead{color:rgba(255,255,255,.9);font-size:clamp(14.5px,1.6vw,17px);max-width:620px;margin:0 0 26px}
.r21-hero__act{display:flex;gap:12px;flex-wrap:wrap}
.r21-hero .r21-btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.r21-hero .r21-btn--ghost:hover{background:rgba(255,255,255,.24)}
.r21-hero__art{text-align:center;line-height:1}
.r21-hero__emoji{
  font-size:clamp(76px,9vw,124px);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.28))
}

/* کارت نشان «شما + ما = 21» — تم سبز */
.r21-brandcard{
  border:1px solid rgba(205,176,96,.42);border-radius:22px;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(7,60,44,.35));
  padding:22px 20px;text-align:center;backdrop-filter:blur(2px)
}
.r21-brandcard__eq{font-size:clamp(15px,1.6vw,19px);font-weight:800;color:#ededeb;letter-spacing:.5px}
.r21-brandcard__eq b{color:var(--gold)}
.r21-brandcard__num{
  font-size:clamp(58px,7vw,86px);font-weight:900;color:var(--gold);line-height:1.1;
  border:2px solid rgba(205,176,96,.55);border-radius:20px;
  padding:6px 22px;display:inline-block;margin:12px 0 12px;letter-spacing:1px
}
.r21-brandcard__sub{font-size:clamp(12.5px,1.3vw,14.5px);color:rgba(237,237,235,.88);font-weight:600}

/* فهرست اعتماد — تم سبز */
.r21-trust{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;
  font-size:13px;color:rgba(237,237,235,.9)
}
.r21-trust span::before{content:"✓";color:var(--gold);font-weight:900;margin-inline-end:7px}

/* انتخاب تم */
.r21-theme{position:relative}
.r21-theme__btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--border);
  background:#fff;cursor:pointer;font-size:18px;display:grid;place-items:center;
  transition:.18s;padding:0
}
.r21-theme__btn:hover{background:var(--surface-2);transform:translateY(-1px)}
.r21-theme__menu{
  position:absolute;top:calc(100% + 9px);inset-inline-end:0;z-index:80;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-sm);padding:7px;min-width:190px;display:none
}
.r21-theme.is-open .r21-theme__menu{display:block}
.r21-theme__menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;
  background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);
  border-radius:10px;cursor:pointer;text-align:start
}
.r21-theme__menu button:hover{background:var(--surface-2)}
.r21-theme__menu button .sw{
  width:20px;height:20px;border-radius:6px;flex:0 0 auto;border:1px solid rgba(0,0,0,.08)
}
.sw--violet{background:linear-gradient(135deg,#8b5cf6,#d946ef)}
.sw--green{background:linear-gradient(135deg,#0b4e3d,#cdb060)}
.r21-theme__menu button[aria-checked="true"]::after{content:"✓";margin-inline-start:auto;color:var(--p600);font-weight:900}
.r21-theme__title{padding:7px 11px 5px;font-size:11.5px;font-weight:800;color:var(--muted)}
.r21-mobtheme{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 22px 4px;border-top:1px solid var(--border-soft);margin-top:6px
}
.r21-mobtheme>span{font-size:12.5px;color:var(--muted);font-weight:700}
.r21-mobtheme button{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;
  border:1px solid var(--border);background:#fff;font-family:inherit;font-size:13px;
  font-weight:600;color:var(--ink);cursor:pointer
}
.r21-mobtheme button[aria-checked="true"]{background:var(--surface-2);border-color:var(--p500)}

/* ═════════ بخش‌ها ═════════ */
.r21-sec{padding:clamp(44px,6vw,74px) 0}
.r21-sec--alt{background:var(--bg-alt)}
.r21-sec__head{text-align:center;max-width:660px;margin:0 auto 38px}
.r21-sec__tag{font-weight:800;font-size:13px;color:var(--p600);letter-spacing:.5px}
.r21-sec__head h2{font-size:clamp(21px,2.9vw,31px);font-weight:900;margin:8px 0 10px}
.r21-sec__head p{color:var(--muted);margin:0;font-size:15px}
.r21-sec__more{text-align:center;margin-top:30px}

/* ═════════ کارت‌های آیکونی ═════════ */
.r21-grid{display:grid;gap:18px}
.r21-grid--cards{grid-template-columns:repeat(4,1fr)}
.r21-grid--news{grid-template-columns:repeat(3,1fr)}
.r21-grid--stats{grid-template-columns:repeat(4,1fr)}

.r21-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:24px 20px;box-shadow:var(--shadow-xs);transition:.22s;display:block
}
.r21-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--border)}
.r21-card__ic{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:24px;
  margin-bottom:14px;background:var(--grad-tile);box-shadow:0 8px 18px rgba(124,58,237,.24)
}
.r21-card__ic--g{background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 8px 18px rgba(16,185,129,.24)}
.r21-card__ic--o{background:linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow:0 8px 18px rgba(245,158,11,.24)}
.r21-card__ic--c{background:linear-gradient(135deg,#0891b2,#22d3ee);box-shadow:0 8px 18px rgba(8,145,178,.24)}
.r21-card__ic--m{background:linear-gradient(135deg,#d946ef,#e879f9);box-shadow:0 8px 18px rgba(217,70,239,.24)}
.r21-card__ic--r{background:linear-gradient(135deg,#f43f5e,#fb7185);box-shadow:0 8px 18px rgba(244,63,94,.24)}
.r21-card__ic--s{background:linear-gradient(135deg,#64748b,#94a3b8);box-shadow:0 8px 18px rgba(100,116,139,.24)}
.r21-card h3{font-size:16.5px;margin-bottom:7px}
.r21-card p{margin:0;color:var(--muted);font-size:13.8px;line-height:1.85}

/* ═════════ کارت خبر ═════════ */
.r21-news{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:var(--shadow-xs);transition:.22s;display:flex;flex-direction:column
}
.r21-news:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.r21-news__ph{
  height:132px;display:grid;place-items:center;font-size:44px;
  background:linear-gradient(135deg,var(--surface-2),#fff);border-bottom:1px solid var(--border-soft)
}
.r21-news__bd{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.r21-news__cat{
  align-self:flex-start;background:var(--surface-2);color:var(--p700);
  font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:999px
}
.r21-news h3{font-size:16px;line-height:1.65}
.r21-news p{margin:0;color:var(--muted);font-size:13.5px;flex:1}
.r21-news__meta{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  color:var(--muted);font-size:12.5px;border-top:1px dashed var(--border-soft);padding-top:10px;margin-top:auto
}

/* ═════════ آمار ═════════ */
.r21-stat{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:22px 16px;text-align:center;box-shadow:var(--shadow-xs)
}
.r21-stat b{display:block;font-size:29px;font-weight:900;background:var(--grad-deep);
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.4}
.r21-stat span{color:var(--muted);font-size:13px}

/* ═════════ فرم‌ها ═════════ */
.r21-form{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-xs)}
.r21-field{margin-bottom:16px}
.r21-field label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:7px}
.r21-field .req{color:var(--danger)}
.r21-input,.r21-select,.r21-textarea{
  width:100%;padding:12px 15px;border:1px solid var(--border);border-radius:12px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--surface-2);transition:.15s
}
.r21-input::placeholder,.r21-textarea::placeholder{color:#a99cc4}
.r21-input:focus,.r21-select:focus,.r21-textarea:focus{
  outline:none;border-color:var(--p500);background:#fff;box-shadow:0 0 0 4px rgba(139,92,246,.14)
}
.r21-textarea{min-height:124px;resize:vertical;line-height:1.9}
.r21-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--p600) 50%),
  linear-gradient(135deg,var(--p600) 50%,transparent 50%);
  background-position:calc(18px) calc(50% - 2px),calc(23px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.r21-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.r21-hint{color:var(--muted);font-size:12.5px;margin:6px 0 0}

.r21-card-form{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-sm);max-width:520px;margin:44px auto
}
.r21-card-form h1{font-size:24px;text-align:center;margin-bottom:8px}
.r21-card-form .sub{text-align:center;color:var(--muted);font-size:13.8px;margin:0 0 24px}
.r21-card-form .foot{text-align:center;margin-top:20px;font-size:13.8px;color:var(--muted)}
.r21-card-form .foot a{color:var(--p700);font-weight:700}

/* ═════════ هشدارها ═════════ */
.r21-alert{padding:13px 17px;border-radius:12px;font-size:14px;margin-bottom:16px;border:1px solid transparent}
.r21-alert--ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.r21-alert--err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.r21-alert--info{background:var(--surface-2);border-color:var(--border);color:var(--p900)}

/* ═════════ داشبورد حساب ═════════ */
.r21-page-head{padding:30px 0 6px}
.r21-page-head h1{font-size:clamp(21px,2.8vw,29px);font-weight:900}
.r21-page-head p{color:var(--muted);margin:6px 0 0;font-size:14.5px}
.r21-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 30px}
.r21-tile{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:20px;box-shadow:var(--shadow-xs);display:flex;gap:14px;align-items:center;transition:.2s
}
.r21-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.r21-tile__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:21px;
  background:var(--surface-2);flex:0 0 auto}
.r21-tile b{display:block;font-size:22px;font-weight:900;line-height:1.4}
.r21-tile span{color:var(--muted);font-size:12.8px}
.r21-panel{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);overflow:hidden;margin-bottom:22px}
.r21-panel__head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 22px;border-bottom:1px solid var(--border-soft);background:linear-gradient(135deg,var(--surface-2),#fff)}
.r21-panel__head h2{font-size:16.5px;font-weight:800}
.r21-panel__bd{padding:22px}
.r21-list{list-style:none;margin:0;padding:0}
.r21-list li{display:flex;gap:14px;align-items:center;padding:15px 22px;border-bottom:1px solid var(--border-soft)}
.r21-list li:last-child{border-bottom:0}
.r21-list li:hover{background:var(--bg-alt)}
.r21-list__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);font-size:18px;flex:0 0 auto}
.r21-list__main{flex:1;min-width:0}
.r21-list__main b{display:block;font-size:14.8px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r21-list__main span{color:var(--muted);font-size:12.8px;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.r21-empty{text-align:center;padding:52px 22px;color:var(--muted)}
.r21-empty__ic{font-size:48px;margin-bottom:12px;opacity:.55}
.r21-empty h2{font-size:18px;color:var(--ink);margin-bottom:8px}
.r21-empty p{margin:0 0 20px}

/* ═════════ ورود با کد یکبارمصرف (بله) ═════════ */
.r21-tabs{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:14px;padding:5px;margin-bottom:22px}
.r21-tab{flex:1;text-align:center;padding:10px 12px;border-radius:10px;font-size:13.6px;font-weight:700;
  color:var(--muted);transition:.18s}
.r21-tab:hover{color:var(--p700)}
.r21-tab.is-active{background:#fff;color:var(--p700);box-shadow:var(--shadow-xs)}
.r21-code{letter-spacing:.42em;text-align:center;font-size:24px;font-weight:800;
  padding:14px 10px;font-family:var(--font)}
.r21-code::placeholder{letter-spacing:.42em;font-weight:600}
.r21-otp-note{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;
  padding:13px 16px;font-size:13.2px;color:var(--p900);margin-bottom:18px;line-height:1.95}
.r21-otp-note a{color:var(--p700);font-weight:700}
.r21-otp-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:12.5px;color:var(--muted);margin-top:12px;flex-wrap:wrap}
.r21-otp-meta .r21-btn{flex:0 0 auto}
@media (max-width:520px){
  .r21-code{font-size:21px;letter-spacing:.32em}
  .r21-otp-meta{justify-content:center}
}

/* ═════════ نشان‌ها ═════════ */
.r21-st{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.r21-st-new{background:#ede9fe;color:#5b21b6}
.r21-st-review{background:#fef3c7;color:#92400e}
.r21-st-answered{background:#d1fae5;color:#065f46}
.r21-st-closed{background:#f1f5f9;color:#475569}
.r21-dot{width:9px;height:9px;border-radius:50%;background:var(--magenta);display:inline-block;
  box-shadow:0 0 0 3px rgba(217,70,239,.2)}

/* ═════════ گفتگو ═════════ */
.r21-chat{padding:20px 22px;display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow-y:auto;
  background:var(--bg-alt)}
.r21-msg{max-width:78%;padding:13px 17px;border-radius:16px;font-size:14.5px;line-height:1.9;
  box-shadow:var(--shadow-xs);white-space:pre-wrap;word-break:break-word}
.r21-msg--user{align-self:flex-start;background:var(--surface);border:1px solid var(--border-soft);
  border-start-start-radius:5px}
.r21-msg--agency{align-self:flex-end;background:var(--grad);color:#fff;border-start-end-radius:5px}
.r21-msg__meta{display:block;font-size:11.5px;opacity:.72;margin-top:6px}
.r21-reply{border-top:1px solid var(--border-soft);padding:18px 22px;background:var(--surface)}

/* ═════════ جدول ═════════ */
.r21-table{width:100%;border-collapse:collapse;font-size:14px}
.r21-table th{text-align:right;padding:12px 16px;background:var(--surface-2);color:var(--p900);
  font-size:13px;font-weight:800;border-bottom:1px solid var(--border)}
.r21-table td{padding:13px 16px;border-bottom:1px solid var(--border-soft)}
.r21-table tr:last-child td{border-bottom:0}
.r21-table tr:hover td{background:var(--bg-alt)}

/* ═════════ فوتر ═════════ */
.r21-foot{background:#1a0f33;color:#c3b6d9;margin-top:60px;font-size:14px}
.r21-foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;padding:48px 0 32px}
.r21-foot h4{color:#fff;font-size:15.5px;margin-bottom:14px}
.r21-foot ul{list-style:none;margin:0;padding:0}
.r21-foot li{margin-bottom:9px}
.r21-foot a:hover{color:var(--gold)}
.r21-brand--foot{color:#fff;margin-bottom:12px}
.r21-brand--foot .r21-brand__txt small{color:#a294c4}
.r21-foot__about{margin:0;max-width:400px;color:#a294c4;font-size:13.5px}
.r21-foot__bar{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;text-align:center;
  color:#8d7fae;font-size:12.8px}

/* ═════════ واکنش‌گرا ═════════ */
@media(max-width:1000px){
  .r21-nav{display:none}
  .r21-head__act{display:none}
  .r21-burger{display:block}
  body.r21-menu-open .r21-mobnav{display:block}
  .r21-hero__in{grid-template-columns:1fr}
  .r21-hero__art{display:none}
  .r21-grid--cards{grid-template-columns:repeat(2,1fr)}
  .r21-grid--news{grid-template-columns:repeat(2,1fr)}
  .r21-grid--stats,.r21-tiles{grid-template-columns:repeat(2,1fr)}
  .r21-foot__in{grid-template-columns:1fr;gap:26px}
  .r21-msg{max-width:88%}
}
@media(max-width:640px){
  .r21-grid--cards,.r21-grid--news{grid-template-columns:1fr}
  .r21-row{grid-template-columns:1fr}
  .r21-head__in{min-height:60px}
  .r21-brand__mark{width:38px;height:38px;font-size:13px}
  .r21-hero{border-radius:16px;padding:28px 20px}
  .r21-table{font-size:13px}
  .r21-table th,.r21-table td{padding:10px 12px}
}

/* اسکرول‌بار نازک برای گفتگو */
.r21-chat::-webkit-scrollbar{width:8px}
.r21-chat::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}

/* ══════════════════════════════════════════════════════════════
   فلؤ درخواست — گام‌ها، انتخاب نوع، فرم اختصاصی، فلوچارت، پاسخ‌ها
   ══════════════════════════════════════════════════════════════ */

/* گام‌های بالای فرم */
.r21-steps{
  display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 6px;
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:12px
}
.r21-step{
  flex:1 1 190px;display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:var(--muted);padding:7px 10px;border-radius:10px
}
.r21-step span{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface-2);color:var(--p700);font-size:13px;font-weight:900
}
.r21-step.is-active{background:var(--surface-2);color:var(--p900)}
.r21-step.is-active span{background:var(--grad);color:var(--on-cta)}
.r21-step.is-done{color:var(--p600)}
.r21-step.is-done span{background:#d1fae5;color:#065f46}

/* کارت‌های انتخاب نوع درخواست */
.r21-choice{position:relative;padding-bottom:52px}
.r21-choice__go{
  position:absolute;inset-inline-start:20px;bottom:16px;
  font-size:13px;font-weight:800;color:var(--p600)
}
.r21-choice:hover .r21-choice__go{color:var(--p700)}
.r21-h1ic{font-size:1.15em}

.r21-flowlink{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:34px 0 10px
}

/* پیام خوش‌آمد هر نوع درخواست */
.r21-welcome{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:18px 22px;margin:18px 0 22px;font-size:14.5px;line-height:2;color:var(--p900);
  white-space:pre-line;border-inline-start:4px solid var(--p500)
}

/* بخش‌های فرم */
.r21-reqform{padding:0;background:transparent;border:0;box-shadow:none}
.r21-formsec{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);margin-bottom:20px;overflow:hidden
}
.r21-formsec__head{
  display:flex;align-items:center;gap:11px;padding:15px 22px;
  background:linear-gradient(135deg,var(--surface-2),#fff);border-bottom:1px solid var(--border-soft)
}
.r21-formsec__n{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--grad);color:var(--on-cta);font-size:13px;font-weight:900
}
.r21-formsec__head h2{font-size:16px;font-weight:800;margin:0}
.r21-formsec__bd{padding:20px 22px 6px}
.r21-field__note{font-size:12.5px;color:var(--muted);margin:-2px 0 8px}
.r21-reqform__submit{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin:6px 0 10px
}

/* چیپ‌های انتخاب (رادیو / چک‌باکس) */
.r21-chips{display:flex;flex-wrap:wrap;gap:9px}
.r21-chip{position:relative;cursor:pointer}
.r21-chip input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none
}
.r21-chip span{
  display:inline-block;padding:10px 18px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2);font-size:14px;font-weight:600;color:var(--ink);
  transition:.16s;user-select:none
}
.r21-chip:hover span{border-color:var(--p400);background:#fff}
.r21-chip input:checked + span{
  background:var(--grad);border-color:transparent;color:var(--on-cta);
  box-shadow:var(--cta-shadow)
}
.r21-chip input:focus-visible + span{outline:2px solid var(--p500);outline-offset:2px}
.r21-input--other{margin-top:10px}

/* ورودی با پسوند */
.r21-inputgroup{display:flex;align-items:stretch}
.r21-inputgroup .r21-input{border-start-end-radius:0;border-end-end-radius:0}
.r21-inputgroup__suf{
  display:flex;align-items:center;padding:0 14px;border:1px solid var(--border);border-inline-start:0;
  border-start-end-radius:12px;border-end-end-radius:12px;background:#eef1f8;
  font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap
}

/* فرم‌های شرطی */
[data-show-if]{display:none}
[data-show-if].is-on{display:block}

/* صفحهٔ تأیید */
.r21-card-form--wide{max-width:720px}
.r21-done{text-align:center}
.r21-done__ic{font-size:52px;line-height:1;margin-bottom:10px}
.r21-done h1{font-size:24px;margin-bottom:6px}
.r21-done__thanks{
  background:var(--surface-2);border-radius:var(--radius-sm);padding:16px 20px;
  font-size:14.5px;line-height:2;color:var(--p900);margin:20px 0;white-space:pre-line
}
.r21-codebox{
  border:2px dashed var(--p400);border-radius:var(--radius-sm);padding:16px;margin:0 0 22px;
  background:rgba(139,92,246,.05)
}
.r21-codebox span{display:block;font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:6px}
.r21-codebox b{font-size:26px;font-weight:900;color:var(--p700);letter-spacing:1.5px}
.r21-done__act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* فلوچارت */
.r21-flow{max-width:820px;margin:10px auto 0}
.r21-flow__node{
  display:flex;gap:16px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:18px 20px;
  box-shadow:var(--shadow-xs)
}
.r21-flow__badge{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto;
  font-size:23px;background:var(--grad-tile);box-shadow:0 8px 18px rgba(124,58,237,.2)
}
.r21-flow__num{font-size:11.5px;font-weight:900;color:var(--p600);letter-spacing:.4px}
.r21-flow__body h3{font-size:16px;margin:2px 0 6px}
.r21-flow__body p{margin:0;color:var(--muted);font-size:14px;line-height:1.9}
.r21-flow__arrow{display:flex;justify-content:center;height:34px}
.r21-flow__arrow span{
  width:2px;background:linear-gradient(180deg,var(--p400),var(--p500));position:relative
}
.r21-flow__arrow span::after{
  content:"";position:absolute;bottom:-2px;inset-inline-start:-4px;
  border-inline-start:5px solid transparent;border-inline-end:5px solid transparent;
  border-top:8px solid var(--p500)
}

/* نمایش پاسخ‌های ساختاریافته */
.r21-answers{margin:14px 0 0}
.r21-answers__sec{margin-bottom:14px}
.r21-answers__sec h4{
  font-size:13px;font-weight:800;color:var(--p700);margin:0 0 8px;
  padding-bottom:6px;border-bottom:1px solid var(--border-soft)
}
.r21-answers__row{
  display:flex;gap:12px;justify-content:space-between;align-items:flex-start;
  padding:7px 0;font-size:13.8px;border-bottom:1px dashed var(--border-soft)
}
.r21-answers__row:last-child{border-bottom:0}
.r21-answers__row .k{color:var(--muted);flex:0 0 auto;max-width:58%}
.r21-answers__row .v{font-weight:700;text-align:end;flex:1}

@media(max-width:640px){
  .r21-flow__node{padding:14px 15px;gap:12px}
  .r21-flow__badge{width:42px;height:42px;font-size:19px}
  .r21-formsec__bd{padding:16px 15px 4px}
  .r21-steps{flex-direction:column}
  .r21-step{flex:1 1 auto}
  .r21-codebox b{font-size:20px}
}

/* ══════════════════════════════════════════════════════════════
   تختهٔ کانبان درخواست‌ها (میز کار بنگاه)
   ══════════════════════════════════════════════════════════════ */
.r21-board{
  display:flex;gap:15px;overflow-x:auto;padding:4px 2px 16px;align-items:flex-start;
  scroll-snap-type:x proximity
}
.r21-col{
  flex:0 0 292px;scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);display:flex;flex-direction:column;
  max-height:74vh;box-shadow:var(--shadow-xs);transition:outline-color .15s;
  outline:2px solid transparent;outline-offset:-4px
}
.r21-col.is-over{outline-color:var(--p400);background:var(--surface-2)}
.r21-col__head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 16px;border-bottom:1px solid var(--border-soft);border-top:3px solid transparent
}
.r21-col[data-st="new"] .r21-col__head{border-top-color:#8b5cf6}
.r21-col[data-st="in_review"] .r21-col__head{border-top-color:#f59e0b}
.r21-col[data-st="answered"] .r21-col__head{border-top-color:#10b981}
.r21-col[data-st="closed"] .r21-col__head{border-top-color:#94a3b8}
.r21-col__head h3{font-size:14px;font-weight:800}
.r21-col__n{
  background:var(--surface-2);color:var(--p700);font-size:12px;font-weight:900;
  padding:2px 10px;border-radius:999px;min-width:26px;text-align:center
}
.r21-col__bd{
  overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;
  min-height:120px;flex:1
}
.r21-kcard{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;
  padding:13px 14px;box-shadow:var(--shadow-xs);cursor:grab;transition:.16s
}
.r21-kcard:hover{border-color:var(--border);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.r21-kcard.is-drag{opacity:.4;transform:rotate(1.5deg)}
.r21-kcard__top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:6px}
.r21-kcard__t{font-size:14px;font-weight:800;line-height:1.6;margin:0}
.r21-kcard__m{color:var(--muted);font-size:12.3px;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.r21-kcard__f{display:flex;gap:7px;align-items:center;justify-content:space-between}
.r21-kcard__f select{
  font-family:inherit;font-size:12px;padding:5px 8px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink);cursor:pointer
}
.r21-kpri{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap}
.r21-kpri--high{background:#fee2e2;color:#991b1b}
.r21-kpri--normal{background:var(--surface-2);color:var(--p700)}
.r21-kpri--low{background:#f1f5f9;color:#475569}
.r21-board__hint{
  font-size:12.5px;color:var(--muted);margin:0 0 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap
}
@media(max-width:640px){
  .r21-col{flex:0 0 84vw}
  .r21-board{gap:11px}
}

/* ═══════════════════════════════════════════════════════════════
   بنر هدیهٔ افتتاح سایت — هلدینگ ۲۰+یک
   مستقل از تم سایت؛ پالت سبز/طلایی برند
   ═══════════════════════════════════════════════════════════════ */
.r21-promo{--pg:#17402C;--pg-2:#1F5038;--pgold:#D4A94E;--pgold-2:#E8C778;
  position:relative;max-width:none;margin:8px auto 34px;padding:26px 24px 24px;
  background:linear-gradient(160deg,#1B4831 0%,var(--pg) 55%,#123422 100%);
  border:1px solid rgba(212,169,78,.55);border-radius:20px;
  box-shadow:0 18px 48px rgba(18,52,34,.28);color:#fff;text-align:center;overflow:hidden}
.r21-promo::before{content:'';position:absolute;inset:8px;border:1px solid rgba(212,169,78,.28);
  border-radius:14px;pointer-events:none}
.r21-promo__top{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;margin-bottom:18px;position:relative}
.r21-promo__brand{color:var(--pgold-2);font-size:19px;font-weight:900;letter-spacing:-.2px}
.r21-promo__meta{color:rgba(255,255,255,.82);font-weight:600}
.r21-promo__big{font-size:clamp(46px,9vw,78px);font-weight:900;line-height:1;
  color:var(--pgold-2);letter-spacing:-2px;text-shadow:0 4px 18px rgba(212,169,78,.28)}
.r21-promo__big i{font-style:normal;font-size:.62em;vertical-align:middle;margin-inline-end:6px}
.r21-promo__sub{font-size:clamp(20px,3.4vw,29px);font-weight:900;margin-top:6px;color:#fff}
.r21-promo__per{display:inline-flex;align-items:center;gap:6px;margin:16px auto 0;
  padding:9px 22px;border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);font-size:15px;font-weight:700;color:#fff}
.r21-promo__per b{color:var(--pgold-2);font-size:17px}
.r21-promo__chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 20px}
.r21-promo__chips span{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#17402C;
  border-radius:12px;padding:12px 22px;font-size:15px;font-weight:800;
  box-shadow:0 3px 10px rgba(0,0,0,.18);min-width:190px;justify-content:center}
.r21-promo__text{color:rgba(255,255,255,.9);font-size:13.8px;line-height:2.05;margin:0 auto;max-width:600px}
.r21-promo__text b{color:var(--pgold-2)}
.r21-promo__checks{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin:16px 0 20px;font-size:13px;font-weight:700;color:rgba(255,255,255,.9)}
.r21-promo__checks i{color:var(--pgold-2);font-style:normal;margin-inline-end:5px}
.r21-promo__cta{display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--pgold),var(--pgold-2));
  color:#12331F;font-weight:900;font-size:15.5px;padding:13px 34px;border-radius:12px;text-decoration:none;
  box-shadow:0 8px 22px rgba(212,169,78,.35);transition:transform .16s ease,box-shadow .16s ease}
.r21-promo__cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(212,169,78,.45)}
@media(max-width:520px){
  .r21-promo{padding:20px 16px;margin-inline:0}
  .r21-promo__top{flex-direction:column-reverse;gap:4px;text-align:center}
  .r21-promo__chips span{min-width:0;width:100%;font-size:14px;padding:11px 14px}
  .r21-promo__checks{gap:10px;font-size:12px}
}

/* ═══ هیرو + بنر، کنار هم در دسکتاپ ═══ */
.r21-topgrid{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
.r21-topgrid>.r21-hero,.r21-topgrid>.r21-promo-wrap{margin:0;min-width:0}
@media(min-width:1060px){
  .r21-topgrid{grid-template-columns:1.1fr .9fr}
  .r21-topgrid .r21-hero,
  .r21-topgrid .r21-promo{height:100%}
  /* هیرو در ستون باریک: تک‌ستونی و بدون تصویر تا کارت «۲۱» خرد نشود */
  .r21-topgrid .r21-hero__in{grid-template-columns:1fr;height:100%;align-items:center;gap:0}
  .r21-topgrid .r21-hero__art{display:none}
  .r21-topgrid .r21-hero h1{font-size:clamp(21px,2.3vw,30px);line-height:1.5}
  .r21-topgrid .r21-hero__lead{font-size:13.8px;line-height:1.95;margin-bottom:20px;max-width:none}
  .r21-topgrid .r21-hero__pill{font-size:11.5px}
  .r21-topgrid .r21-trust{gap:8px 14px;margin-top:16px;font-size:11.8px}
  /* بنر: فشرده‌تر تا فضای خالی نماند */
  .r21-topgrid .r21-promo{margin:0;padding:18px 16px;display:flex;flex-direction:column;justify-content:center}
  .r21-topgrid .r21-promo__big{font-size:clamp(38px,4.4vw,56px)}
  .r21-topgrid .r21-promo__sub{font-size:clamp(16px,1.8vw,22px)}
  .r21-topgrid .r21-promo__per{margin-top:12px;padding:7px 16px;font-size:13.5px}
  .r21-topgrid .r21-promo__per b{font-size:15px}
  .r21-topgrid .r21-promo__chips{gap:8px;margin:14px 0 14px}
  .r21-topgrid .r21-promo__chips span{min-width:0;padding:9px 12px;font-size:12.5px}
  .r21-topgrid .r21-promo__text{font-size:12.2px;line-height:1.9}
  .r21-topgrid .r21-promo__checks{font-size:11.5px;gap:10px;margin:12px 0 14px}
  .r21-topgrid .r21-promo__cta{padding:11px 22px;font-size:14px}
  .r21-topgrid .r21-promo__top{margin-bottom:12px;font-size:11.5px}
  .r21-topgrid .r21-promo__brand{font-size:16px}
}
@media(min-width:1400px){
  .r21-topgrid{grid-template-columns:1.15fr .85fr}
}

/* ═══ نوار دانلود اپ اندروید ═══ */
.r21-appdl{max-width:1200px;margin:0 auto 26px;padding:0 16px}
.r21-appdl__box{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,#0F2A1E,#16382A);border:1px solid rgba(212,169,78,.4);
  border-radius:16px;padding:16px 20px;color:#fff;box-shadow:0 10px 28px rgba(15,42,30,.22)}
.r21-appdl__ic{width:46px;height:46px;border-radius:13px;background:rgba(212,169,78,.15);
  border:1px solid rgba(212,169,78,.35);display:grid;place-items:center;font-size:22px;flex:0 0 auto}
.r21-appdl__txt{flex:1;min-width:180px;line-height:1.5}
.r21-appdl__txt b{display:block;font-size:15.5px;font-weight:800}
.r21-appdl__txt span{font-size:12.8px;color:rgba(255,255,255,.72)}
.r21-appdl__box .r21-btn{flex:0 0 auto;background:linear-gradient(135deg,#D4A94E,#E8C778);
  color:#12331F;border:0;font-weight:900}
@media(max-width:520px){
  .r21-appdl__box{flex-direction:column;text-align:center;gap:12px}
  .r21-appdl__box .r21-btn{width:100%}
}

.r21-appdl__btns{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.r21-appdl__btns .r21-btn{background:linear-gradient(135deg,#D4A94E,#E8C778);color:#12331F;border:0;font-weight:900}
.r21-appdl__btns .r21-btn--alt{background:transparent;color:#E8C778;border:1px solid rgba(212,169,78,.6)}
.r21-appdl__btns .r21-btn--alt:hover{background:rgba(212,169,78,.12)}
@media(max-width:520px){.r21-appdl__btns{width:100%;flex-direction:column}.r21-appdl__btns .r21-btn{width:100%}}