/* ── فونت Vazirmatn با وزن‌های کامل ──
   ظریف (300)، معمولی (400)، متوسط (500)
   نیمه‌ضخیم (600)، ضخیم (700)، خیلی ضخیم (800/900) */
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Thin.woff2') format('woff2');
  font-weight:100; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Light.woff2') format('woff2');
  font-weight:300; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight:600; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Black.woff2') format('woff2');
  font-weight:900; font-display:swap;
}

/*
══════════════════════════════════════════════════════
  سیستم رنگی روت‌نت — تم روشن پاستلی
  طراحی براساس روانشناسی رنگ

  🔵 آبی آسمانی (#4F86F7)  → اعتماد، اطمینان، حرفه‌ای‌بودن
  🟢 سبز زمردی (#10B981)   → رشد، موفقیت، درآمد، انرژی مثبت
  🟡 کهربایی گرم (#F59E0B)  → خوش‌بینی، خلاقیت، انگیزه
  🟣 بنفش ملایم (#7C3AED)  → نوآوری، خلاقیت، ارزش
  🟠 نارنجی مرجانی (#F97316) → شور و اشتیاق، ارتباط انسانی

  پس‌زمینه #F0F5FF → آبی آسمانی بسیار کمرنگ
  کارت‌ها #FFFFFF  → سفید خالص با سایه نرم
  متن اصلی #1E293B → نیلی تیره — خواناترین رنگ برای چشم
══════════════════════════════════════════════════════
*/

:root {
  /* ── پس‌زمینه‌ها ──
     #F0F5FF: آبی آسمانی کمرنگ — احساس فضا، آرامش، تازگی
     نه سفید خالص (سرد) نه خاکستری (کسل‌کننده) */
  --bg:        #EEF2FF;
  --bg2:       #F8FAFF;
  --bg3:       #FFFFFF;
  --bg-page:   #EEF2FF;

  /* ── رنگ اصلی: آبی آسمانی (#4F86F7)
     روانشناسی: اعتماد، اطمینان، حرفه‌ای‌بودن، ثبات
     بهترین رنگ برای پلتفرم‌های کسب‌وکار */
  --blue:      #4F86F7;
  --blue2:     #3B6FE8;
  --blue3:     #6B9EFF;
  --blue-lt:   #EFF6FF;
  --blue-dim:  rgba(79,134,247,.10);
  --blue-b:    rgba(79,134,247,.28);
  --blue-glow: rgba(79,134,247,.22);

  /* ── سبز زمردی (#10B981)
     روانشناسی: رشد، موفقیت، درآمد، سلامت، انرژی مثبت
     پرفکت برای کمیسیون و وضعیت موفق */
  --green:     #10B981;
  --green2:    #059669;
  --green-lt:  #ECFDF5;
  --green-dim: rgba(16,185,129,.10);
  --green-b:   rgba(16,185,129,.25);

  /* ── کهربایی گرم (#F59E0B)
     روانشناسی: خوش‌بینی، خلاقیت، گرما، انگیزه
     برای highlight و accent */
  --amber:     #F59E0B;
  --amber2:    #D97706;
  --amber-lt:  #FFFBEB;
  --amber-dim: rgba(245,158,11,.10);
  --amber-b:   rgba(245,158,11,.25);

  /* alias برای سازگاری با کد قبلی */
  --gold:      #F59E0B;
  --gold2:     #FBBF24;
  --gold-dim:  rgba(245,158,11,.10);
  --gold-b:    rgba(245,158,11,.25);

  /* ── بنفش ملایم: نوآوری، خلاقیت */
  --purple:    #7C3AED;
  --purple-lt: #F5F3FF;
  --purple-dim:rgba(124,58,237,.10);
  --purple-b:  rgba(124,58,237,.22);

  /* ── نارنجی مرجانی: ارتباط انسانی، شور */
  --orange:    #F97316;
  --orange-lt: #FFF7ED;
  --orange-dim:rgba(249,115,22,.10);
  --orange-b:  rgba(249,115,22,.22);

  /* ── قرمز: خطا، هشدار */
  --red:       #EF4444;
  --red2:      #DC2626;
  --red-lt:    #FEF2F2;
  --red-dim:   rgba(239,68,68,.09);
  --red-b:     rgba(239,68,68,.22);

  /* ── متن
     #1E293B (slate-800): خواناترین رنگ برای چشم — آرامش‌بخش
     نه مشکی خالص (#000) که تضاد آزاردهنده دارد */
  --text:      #1E293B;
  --text2:     #475569;
  --text3:     #94A3B8;
  --text4:     #CBD5E1;

  /* ── کارت و border
     سفید خالص برای کارت‌ها: پاکی، شفافیت
     border بسیار کمرنگ: عمق بدون سنگینی */
  --card:      #FFFFFF;
  --card2:     #F8FAFF;
  --card-b:    #E2E8F5;
  --card-b2:   #C7D5EE;

  /* ── سایه‌ها: نرم و طبیعی */
  --shadow-sm: 0 1px 3px rgba(79,134,247,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(79,134,247,.10), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 36px rgba(79,134,247,.14), 0 4px 12px rgba(0,0,0,.06);

  --sidebar:   240px;
  --r:         12px;
  --r2:        16px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif;
  background:var(--bg-page);
  color:var(--text);
  direction:rtl;
  overflow-x:hidden;
  line-height:1.8;
  font-size:15px;
  font-weight:400;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1,'liga' 1;
}
a { color:inherit; text-decoration:none }
input,select,textarea,button { font-family:'Vazirmatn',Tahoma,Arial,sans-serif }

::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:#EEF2FF }
::-webkit-scrollbar-thumb { background:#C7D5EE; border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:#A5B8DA }

/* ── LAYOUT ── */
.wrap { display:flex; min-height:100vh }

/* ══════════════════════════
   SIDEBAR
   سفید خالص با سایه ظریف
   border راست آبی کمرنگ
   ══════════════════════════ */
.sidebar {
  width:var(--sidebar); min-width:var(--sidebar);
  background:#FFFFFF;
  border-left:1px solid var(--card-b);
  display:flex; flex-direction:column;
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:2px 0 20px rgba(79,134,247,.07), 4px 0 8px rgba(0,0,0,.03);
}

.s-logo {
  padding:22px 18px 18px;
  border-bottom:1px solid var(--card-b);
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
}
.s-logo .dot {
  width:10px; height:10px;
  background:linear-gradient(135deg, #4F86F7, #7C3AED);
  border-radius:50%; flex-shrink:0;
  box-shadow:0 0 10px rgba(79,134,247,.4);
  animation:pdot 2.5s infinite;
}
@keyframes pdot {
  0%,100% { box-shadow:0 0 0 0 rgba(79,134,247,.5) }
  50%      { box-shadow:0 0 0 5px rgba(79,134,247,0) }
}
.s-logo strong { font-size:.95rem; font-weight:800; color:var(--text) }
.s-logo small  { display:block; font-size:.68rem; color:var(--text3); margin-top:1px }

.s-nav { flex:1; padding:12px 0; overflow-y:auto }
.s-nav a {
  display:flex; align-items:center; gap:11px;
  padding:10px 18px; font-size:.86rem; font-weight:500;
  color:var(--text2); border-right:3px solid transparent;
  transition:all .2s; border-radius:0;
}
.s-nav a:hover {
  color:var(--blue);
  background:var(--blue-lt);
}
.s-nav a.on {
  color:var(--blue2);
  background:linear-gradient(90deg, var(--blue-lt), #F8FBFF);
  border-right-color:var(--blue);
  font-weight:700;
}
.s-nav .icon { font-size:1rem; min-width:20px; text-align:center }
.s-nav .divider { height:1px; background:var(--card-b); margin:8px 18px }

.s-foot {
  padding:14px 16px;
  border-top:1px solid var(--card-b);
  background:linear-gradient(135deg, #F8FBFF, #FFFFFF);
}
.s-user { display:flex; align-items:center; gap:9px }
.s-avatar {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, #4F86F7, #7C3AED);
  display:flex; align-items:center; justify-content:center;
  font-size:.84rem; font-weight:800; color:#fff; flex-shrink:0;
  box-shadow:0 3px 10px rgba(79,134,247,.3);
}
.s-info { flex:1; min-width:0 }
.s-name { font-size:.8rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.s-code { font-size:.68rem; color:var(--text3) }
.s-logout { color:var(--text3); font-size:1rem; flex-shrink:0; padding:4px; transition:color .2s }
.s-logout:hover { color:var(--red) }

/* ── MAIN ── */
.main { margin-right:var(--sidebar); flex:1; min-width:0; display:flex; flex-direction:column }

/* ══════════════════════════
   TOPBAR
   سفید با سایه ظریف
   ══════════════════════════ */
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--card-b);
  padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:var(--shadow-sm);
}
.topbar-title { font-size:.95rem; font-weight:700; color:var(--text) }
.topbar-right { display:flex; align-items:center; gap:10px }
.mob-btn {
  display:none; width:34px; height:34px;
  background:var(--bg2); border:1px solid var(--card-b);
  border-radius:8px; cursor:pointer; font-size:1rem;
  align-items:center; justify-content:center; color:var(--text2);
}

/* ── PAGE ── */
.page { padding:24px; flex:1 }

/* ══════════════════════════
   CARDS
   سفید با سایه ملایم
   روانشناسی: پاکی و اعتماد
   ══════════════════════════ */
.card {
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:var(--r2);
  padding:22px;
  box-shadow:var(--shadow-sm);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.card:hover {
  border-color:var(--blue-b);
  box-shadow:var(--shadow);
}
.card-title {
  font-size:.72rem; font-weight:700; color:var(--text3);
  letter-spacing:1.2px; text-transform:uppercase; margin-bottom:8px;
}

/* ══════════════════════════
   STAT CARDS
   هر کارت با رنگ accent
   ══════════════════════════ */
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:14px; margin-bottom:22px }
.sc {
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:var(--r2);
  padding:18px 16px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:all .25s;
}
.sc:hover { transform:translateY(-3px); box-shadow:var(--shadow) }
.sc::before {
  content:''; position:absolute; top:0; right:0; left:0; height:3px;
  background:linear-gradient(90deg, var(--sc-c, var(--blue)), transparent);
}
.sc::after {
  content:''; position:absolute; top:-10px; left:-10px;
  width:80px; height:80px;
  background:radial-gradient(circle, var(--sc-c, var(--blue)) 0%, transparent 70%);
  opacity:.07;
}
.sc .si { font-size:1.3rem; margin-bottom:8px; position:relative; z-index:1 }
.sc .sv {
  display:block; font-size:1.45rem; font-weight:900;
  color:var(--text); line-height:1.1; margin-bottom:4px;
  position:relative; z-index:1;
}
.sc .sl { font-size:.72rem; color:var(--text2); position:relative; z-index:1 }

/* ══════════════════════════
   BUTTONS
   ══════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:9px;
  font-size:.82rem; font-weight:600;
  cursor:pointer; border:none; transition:all .2s;
  white-space:nowrap; line-height:1.4;
}
.btn-gold, .btn-blue {
  background:linear-gradient(135deg, #4F86F7 0%, #3B6FE8 100%);
  color:#fff;
  box-shadow:0 2px 10px rgba(79,134,247,.30);
}
.btn-gold:hover, .btn-blue:hover {
  background:linear-gradient(135deg, #6B9EFF 0%, #4F86F7 100%);
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(79,134,247,.40);
}
.btn-ghost {
  background:#FFFFFF;
  color:var(--text2);
  border:1px solid var(--card-b);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover {
  border-color:var(--blue-b);
  color:var(--blue);
  background:var(--blue-lt);
}
.btn-red {
  background:var(--red-lt);
  color:var(--red);
  border:1px solid var(--red-b);
}
.btn-red:hover { background:#FEE2E2 }
.btn-sm   { padding:5px 11px; font-size:.76rem; border-radius:7px }
.btn-block { width:100%; justify-content:center; padding:12px }

/* ══════════════════════════
   FORMS
   ══════════════════════════ */
.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:14px }
.fg label { font-size:.78rem; font-weight:600; color:var(--text2) }
.fg input, .fg select, .fg textarea {
  background:#FFFFFF;
  border:1.5px solid var(--card-b);
  border-radius:9px; padding:10px 13px;
  color:var(--text); font-size:.88rem;
  outline:none; direction:rtl;
  transition:all .2s; width:100%;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(79,134,247,.12), 0 1px 3px rgba(0,0,0,.04);
}
.fg input::placeholder { color:var(--text3) }
.fg select option { background:#fff; color:var(--text) }
.fg textarea { resize:vertical; min-height:90px }
.fg .hint { font-size:.72rem; color:var(--text3) }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-full { grid-column:1/-1 }
.form-check { display:flex; align-items:center; gap:8px; cursor:pointer }
.form-check input[type=checkbox] { width:16px; height:16px; accent-color:var(--blue); cursor:pointer }

/* ══════════════════════════
   TABLE
   ══════════════════════════ */
.tbl-wrap { overflow-x:auto; border-radius:var(--r2); border:1px solid var(--card-b); box-shadow:var(--shadow-sm) }
table { width:100%; border-collapse:collapse }
th {
  background:linear-gradient(180deg, #F8FAFF, #EFF4FF);
  padding:11px 13px; font-size:.73rem; font-weight:700;
  color:var(--text2); text-align:right;
  border-bottom:2px solid var(--card-b); white-space:nowrap;
}
td { padding:12px 13px; font-size:.84rem; border-bottom:1px solid var(--card-b); vertical-align:middle; color:var(--text) }
tr:last-child td { border-bottom:none }
tr:hover td { background:linear-gradient(90deg, #F5F9FF, #FAFCFF) }

/* ══════════════════════════
   BADGES
   ══════════════════════════ */
.badge { display:inline-block; padding:3px 10px; border-radius:100px; font-size:.7rem; font-weight:700 }
.badge-blue   { background:#EFF6FF; color:#2563EB; border:1px solid #BFDBFE }
.badge-yellow { background:#FFFBEB; color:#D97706; border:1px solid #FDE68A }
.badge-green  { background:#ECFDF5; color:#059669; border:1px solid #A7F3D0 }
.badge-red    { background:#FEF2F2; color:#DC2626; border:1px solid #FECACA }
.badge-gray   { background:#F8FAFC; color:#64748B; border:1px solid #E2E8F0 }

/* ══════════════════════════
   CIRCLES
   کارت‌های حوزه با رنگ اختصاصی
   ══════════════════════════ */
.circles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px }
.cc {
  background:var(--card);
  border:1.5px solid var(--card-b);
  border-radius:20px; padding:24px;
  cursor:pointer; transition:all .3s;
  position:relative; user-select:none;
  box-shadow:var(--shadow-sm);
}
.cc:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue-b) }
.cc.sel {
  border-color:var(--cc, var(--blue));
  background:linear-gradient(160deg, var(--blue-lt) 0%, #FFFFFF 60%);
  box-shadow:0 0 0 3px rgba(79,134,247,.1), var(--shadow);
}
.cc.sel::after {
  content:'✓'; position:absolute; top:13px; left:13px;
  width:24px; height:24px;
  background:linear-gradient(135deg, var(--cc, var(--blue)), var(--cc, #3B6FE8));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; color:#fff; font-weight:900;
  line-height:24px; text-align:center;
  box-shadow:0 3px 10px rgba(79,134,247,.35);
}
.cc-icon {
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.45rem; margin-bottom:14px;
}
.cc h3 { font-size:.95rem; font-weight:800; margin-bottom:5px; color:var(--text) }
.cc .cc-sub  { font-size:.74rem; color:var(--text3); margin-bottom:9px }
.cc .cc-desc { font-size:.8rem; color:var(--text2); line-height:1.65; margin-bottom:12px }
.cc-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 12px; border-radius:100px;
  font-size:.72rem; font-weight:700;
}

/* ══════════════════════════
   MODAL
   ══════════════════════════ */
.modal-bg {
  position:fixed; inset:0;
  background:rgba(30,41,59,.45);
  backdrop-filter:blur(8px);
  z-index:500; display:none;
  align-items:center; justify-content:center; padding:16px;
}
.modal-bg.open { display:flex }
.modal {
  background:#FFFFFF;
  border:1px solid var(--card-b);
  border-radius:22px; padding:30px;
  width:100%; max-width:540px;
  max-height:90vh; overflow-y:auto;
  position:relative;
  box-shadow:0 24px 64px rgba(30,41,59,.2), 0 8px 24px rgba(79,134,247,.1);
}
.modal h2 {
  font-size:1rem; font-weight:800; margin-bottom:18px; color:var(--text);
  padding-bottom:14px; border-bottom:1px solid var(--card-b);
}
.modal-close {
  position:absolute; top:14px; left:14px;
  width:28px; height:28px;
  background:var(--bg2); border:1px solid var(--card-b);
  border-radius:8px; cursor:pointer; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--text3); transition:all .2s;
}
.modal-close:hover { color:var(--red); border-color:var(--red-b); background:var(--red-lt) }

/* ══════════════════════════
   ALERTS
   ══════════════════════════ */
.alert { padding:12px 16px; border-radius:10px; font-size:.84rem; margin-bottom:14px }
.alert-ok   { background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46 }
.alert-err  { background:#FEF2F2; border:1px solid #FECACA; color:#991B1B }
.alert-info { background:#EFF6FF; border:1px solid #BFDBFE; color:#1D4ED8 }

/* ══════════════════════════
   EMPTY STATE
   ══════════════════════════ */
.empty { text-align:center; padding:52px 20px; color:var(--text3) }
.empty .ei { font-size:2.8rem; margin-bottom:14px; opacity:.7 }
.empty p { font-size:.86rem; color:var(--text2) }

/* ── PIPELINE ── */
.pipe { display:flex; align-items:center; flex-wrap:nowrap; overflow-x:auto; padding:2px 0 }
.pd { width:7px; height:7px; border-radius:50%; background:var(--card-b2); flex-shrink:0 }
.pd.done { background:var(--green) }
.pd.curr { background:var(--blue); box-shadow:0 0 0 3px rgba(79,134,247,.2) }
.pl { width:16px; height:2px; background:var(--card-b2); flex-shrink:0 }
.pl.done { background:var(--green) }

/* ── PAGINATION ── */
.pagi { display:flex; gap:6px; justify-content:center; margin-top:20px; flex-wrap:wrap }
.pagi a, .pagi span {
  display:inline-flex; width:32px; height:32px;
  align-items:center; justify-content:center;
  border-radius:8px; font-size:.8rem; font-weight:600;
  border:1px solid var(--card-b); color:var(--text2);
  background:#fff; transition:all .2s;
  box-shadow:var(--shadow-sm);
}
.pagi a:hover { border-color:var(--blue-b); color:var(--blue); background:var(--blue-lt) }
.pagi .cur { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 2px 8px rgba(79,134,247,.3) }

/* ══════════════════════════
   AUTH PAGES
   پس‌زمینه با گرادیان پاستلی
   ══════════════════════════ */
.auth-wrap {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-box { width:100%; max-width:432px }
.auth-logo { text-align:center; margin-bottom:30px }
.auth-brand {
  font-size:1.35rem; font-weight:900;
  display:flex; align-items:center; gap:9px; justify-content:center;
  color:var(--text);
}
.auth-card {
  background:#FFFFFF;
  border:1px solid var(--card-b);
  border-radius:22px; overflow:hidden;
  box-shadow:0 20px 60px rgba(79,134,247,.14), 0 4px 16px rgba(0,0,0,.06);
}
.auth-tabs { display:flex; border-bottom:2px solid var(--card-b) }
.auth-tab {
  flex:1; padding:14px; text-align:center;
  font-size:.86rem; font-weight:600; color:var(--text2);
  cursor:pointer; transition:all .2s;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
}
.auth-tab.on { color:var(--blue); border-bottom-color:var(--blue); background:var(--blue-lt) }
.auth-body { padding:26px }

/* پس‌زمینه صفحه ورود — گرادیان پاستلی رنگارنگ */
.bg-grid {
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(79,134,247,.08), transparent),
    radial-gradient(ellipse 50% 60% at 85% 80%, rgba(124,58,237,.06), transparent),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(16,185,129,.04), transparent),
    linear-gradient(160deg, #EEF2FF 0%, #F5F0FF 50%, #F0FDF4 100%);
}

/* ══════════════════════════
   WELCOME BANNER
   گرادیان آبی ملایم
   ══════════════════════════ */
.welcome {
  background:linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 60%, #ECFDF5 100%);
  border:1.5px solid var(--blue-b);
  border-radius:var(--r2); padding:24px 26px;
  margin-bottom:22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(79,134,247,.10);
}
.welcome::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:160px; height:160px;
  background:radial-gradient(circle, rgba(79,134,247,.10), transparent 70%);
  border-radius:50%;
}
.welcome h2 { color:var(--text) }
.ref-box {
  background:rgba(255,255,255,.8);
  border:1px solid var(--blue-b);
  border-radius:9px; padding:9px 13px;
  display:flex; align-items:center; gap:8px;
  margin-top:10px; direction:ltr; flex-wrap:wrap;
  backdrop-filter:blur(4px);
}
.ref-box code { color:var(--blue2); font-size:.78rem; flex:1; word-break:break-all; font-weight:600 }

/* ── QUICK ACTIONS ── */
.qa-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px }
.qa {
  background:#FFFFFF;
  border:1.5px solid var(--card-b);
  border-radius:var(--r2); padding:18px;
  text-align:center; cursor:pointer; transition:all .25s; display:block;
  box-shadow:var(--shadow-sm);
}
.qa:hover {
  border-color:var(--blue-b);
  background:var(--blue-lt);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.qa .qi { font-size:1.5rem; margin-bottom:8px }
.qa .ql { font-size:.78rem; font-weight:600; color:var(--text2) }
.qa:hover .ql { color:var(--blue2) }

/* ── NETWORK CARDS ── */
.nc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px }
.nc {
  background:var(--card); border:1.5px solid var(--card-b);
  border-radius:var(--r2); padding:18px; transition:all .25s;
  box-shadow:var(--shadow-sm);
}
.nc:hover { border-color:var(--blue-b); transform:translateY(-2px); box-shadow:var(--shadow) }
.nc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px }
.nc-name { font-size:.95rem; font-weight:700; color:var(--text) }
.nc-sector { font-size:.75rem; color:var(--text3); margin-top:2px }
.nc-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px }
.nc-tag {
  font-size:.7rem; padding:3px 9px; border-radius:100px;
  background:#F0F7FF; color:var(--blue2);
  border:1px solid #BFDBFE;
}
.nc-actions { display:flex; gap:6px; flex-shrink:0 }

/* ── SEARCH BAR ── */
.search-bar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap }
.search-bar input, .search-bar select {
  background:#FFFFFF; border:1.5px solid var(--card-b);
  border-radius:9px; padding:9px 13px;
  color:var(--text); font-size:.84rem; outline:none; direction:rtl;
  transition:border-color .2s; box-shadow:var(--shadow-sm);
}
.search-bar input { flex:1; min-width:180px }
.search-bar input:focus, .search-bar select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,134,247,.1) }
.search-bar select option { background:#fff }

/* ── GRIDS ── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.sep { height:1px; background:var(--card-b); margin:14px 0 }

/* ══════════════════════════
   ADMIN SIDEBAR
   ══════════════════════════ */
.a-wrap { display:flex; min-height:100vh }
.a-side {
  width:200px; min-width:200px;
  background:#FFFFFF;
  border-left:1px solid var(--card-b);
  position:fixed; top:0; right:0; bottom:0;
  display:flex; flex-direction:column; z-index:100;
  box-shadow:2px 0 20px rgba(79,134,247,.07);
}
.a-main { margin-right:200px; flex:1 }

/* ══════════════════════════
   RESPONSIVE
   ══════════════════════════ */
@media(max-width:768px) {
  .sidebar { transform:translateX(100%) }
  .sidebar.open { transform:translateX(0) }
  .main { margin-right:0 }
  .topbar { padding:11px 14px }
  .page { padding:14px }
  .mob-btn { display:flex }
  .form-row, .g2 { grid-template-columns:1fr }
  .qa-grid { grid-template-columns:repeat(2,1fr) }
  .stats { grid-template-columns:repeat(2,1fr) }
  .circles-grid, .nc-grid { grid-template-columns:1fr }
}
@media(max-width:480px) {
  .qa-grid { grid-template-columns:1fr 1fr }
  .stats { grid-template-columns:repeat(2,1fr) }
}

/* ══════════════════════════════════════════════════
   سیستم تایپوگرافی — اضافه‌شده برای ظاهر بهتر
   ══════════════════════════════════════════════════ */

/* ── عناوین — ضخامت و فاصله بهینه ── */
h1,h2,h3,h4,h5,h6 {
  font-family:'Vazirmatn',Tahoma,sans-serif;
  font-weight:800;
  line-height:1.35;
  color:var(--text);
  letter-spacing:-0.01em;
}

/* ── عنوان صفحه در topbar ── */
.topbar-title {
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
}

/* ── لوگو sidebar ── */
.s-logo strong {
  font-size:1rem;
  font-weight:900;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,#1E293B,#4F86F7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.s-logo small {
  font-size:.7rem;
  font-weight:500;
  color:var(--text3);
  letter-spacing:0.02em;
}

/* ── لینک‌های sidebar ── */
.s-nav a {
  font-size:.875rem;
  font-weight:500;
  letter-spacing:0.005em;
}
.s-nav a.on {
  font-weight:700;
}

/* ── اسم کاربر در sidebar ── */
.s-name { font-size:.82rem; font-weight:700; letter-spacing:-0.005em }
.s-code { font-size:.7rem; font-weight:400; letter-spacing:0.02em }

/* ── card-title — آپرکیس با فاصله حروف ── */
.card-title {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text3);
}

/* ── عدد بزرگ stat card ── */
.sc .sv {
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:-0.03em;
  color:var(--text);
}
.sc .sl {
  font-size:.72rem;
  font-weight:500;
  letter-spacing:0.01em;
}

/* ── عناوین circle card ── */
.cc h3 {
  font-size:.98rem;
  font-weight:800;
  letter-spacing:-0.01em;
}
.cc .cc-sub {
  font-size:.75rem;
  font-weight:500;
  line-height:1.5;
}
.cc .cc-desc {
  font-size:.82rem;
  font-weight:400;
  line-height:1.7;
  color:var(--text2);
}
.cc-pill {
  font-size:.73rem;
  font-weight:700;
  letter-spacing:0.01em;
}

/* ── دکمه‌ها ── */
.btn {
  font-size:.85rem;
  font-weight:600;
  letter-spacing:0.005em;
}
.btn-sm { font-size:.78rem; font-weight:600 }

/* ── فرم‌ها ── */
.fg label {
  font-size:.8rem;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--text2);
}
.fg input,
.fg select,
.fg textarea {
  font-size:.9rem;
  font-weight:400;
  line-height:1.6;
}
.fg input::placeholder,
.fg textarea::placeholder { font-weight:400; color:var(--text3) }

/* ── جدول ── */
th {
  font-size:.74rem;
  font-weight:700;
  letter-spacing:0.5px;
}
td {
  font-size:.86rem;
  font-weight:400;
  line-height:1.6;
}

/* ── badge ── */
.badge {
  font-size:.71rem;
  font-weight:700;
  letter-spacing:0.02em;
}

/* ── network card ── */
.nc-name {
  font-size:.96rem;
  font-weight:700;
  letter-spacing:-0.01em;
}
.nc-sector {
  font-size:.76rem;
  font-weight:400;
  line-height:1.5;
}
.nc-tag { font-size:.71rem; font-weight:500; letter-spacing:0.01em }

/* ── welcome banner ── */
.welcome h2 {
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:4px;
}
.welcome p { font-size:.84rem; font-weight:400 }
.ref-box code {
  font-size:.8rem;
  font-weight:600;
  letter-spacing:0.01em;
  font-family:monospace, 'Vazirmatn';
}

/* ── quick action ── */
.qa .qi { font-size:1.6rem }
.qa .ql {
  font-size:.8rem;
  font-weight:600;
  letter-spacing:0.005em;
}

/* ── auth ── */
.auth-brand {
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:-0.03em;
}
.auth-tab { font-size:.875rem; font-weight:600 }

/* ── alert ── */
.alert { font-size:.86rem; font-weight:500; line-height:1.65 }

/* ── empty state ── */
.empty p { font-size:.88rem; font-weight:400; line-height:1.7 }

/* ── pagination ── */
.pagi a, .pagi span { font-size:.8rem; font-weight:600 }

/* ── search bar ── */
.search-bar input,
.search-bar select { font-size:.86rem; font-weight:400 }

/* ── modal ── */
.modal h2 {
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-0.02em;
}

/* ── تنظیم ظریف کنتراست متن روی پس‌زمینه روشن ── */
p { line-height:1.8 }
small { font-size:.78rem; font-weight:400 }
strong { font-weight:700 }
code {
  font-family:'Courier New',monospace;
  font-size:.88em;
  letter-spacing:0.02em;
}