/* ===================== FONTS ===================== */
@font-face {
    font-family: 'Vazir';
    src: url('/assets/fonts/Vazir-Regular-FD-WOL.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazir';
    src: url('/assets/fonts/Vazir-Medium-FD-WOL.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url('/assets/fonts/Vazir-Bold-FD-WOL.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===================== THEME ===================== */
:root {
    --bg: #f6f8fb;
    --paper: #fff;
    --ink: #11151a;
    --muted: #667085;
    --brand: #0b5fff;
    --radius: 18px;
    --container: 1200px;
    --logo-h: 44px;
    /* اندازه لوگو */
    --fs: clamp(14px, 1.15vw, 16.5px);
    --fs-lg: clamp(18px, 2.2vw, 24px);
}

/* ===================== BASE ===================== */
* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Vazir', system-ui, Segoe UI, Roboto, Arial
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--fs);
    line-height: 1.95
}

a {
    text-decoration: none;
    color: inherit
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

/* ===================== LAYOUT ===================== */
.wrap {
    max-width: var(--container);
    margin: 0 auto;
    /* مرکز صفحه */
    padding: 0 20px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid #eef0f3;
}

/* ===== HEADER & NAVBAR ===== */
.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* راست/منو/چپ */
    align-items: center;
    min-height: 68px;
    gap: 20px;
}

.logo {
    grid-column: 1/2;
    justify-self: start
}

.logo img {
    height: var(--logo-h);
    width: auto;
    object-fit: contain
}

.nav {
    grid-column: 2/3;
    justify-self: center;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.nav a {
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 12px;
    color: #1b2430;
    white-space: nowrap
}

.nav a:hover {
    background: #eef3ff;
    color: var(--brand)
}

@media (max-width:960px) {
    .nav {
        justify-content: center
    }
}

/* ===== HERO ===== */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 30px 0 20px
}

.hero-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    text-align: center
}

.hero-media {
    max-width: 1000px;
    width: 100%
}

.hero-media img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08)
}

.hero-lead {
    max-width: 1000px;
    text-align: justify;
    text-justify: inter-word;
    color: #27313a
}

/* ===== CARDS (ICON + TITLE) ===== */
.cards{
  display:flex;
  justify-content:center;   /* کل ردیف دقیقاً وسط */
  gap:24px;                 /* فاصله بین کارت‌ها */
  padding:20px 0;
  flex-wrap:nowrap;         /* یک سطر بماند */
}

.card{
  width:200px;              /* عرض کارت (کاهش/افزایش: فقط این عدد را عوض کن) */
  height:180px;             /* ارتفاع کارت؛ در صورت کمبود فضا 170/160 بگذار */
  background:var(--paper);
  border-radius:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  padding:14px;
  display:flex;
  flex-direction:column;    /* آیکن بالا، عنوان زیرش */
  align-items:center;
  justify-content:center;
  gap:8px;                  /* فاصله آیکن تا عنوان */
}

.card-ico{
  height:84px;              /* اندازه آیکن */
  width:auto;               /* کشیده نشود */
  object-fit:contain;
  margin:0;
}

/* عنوان را نشان بده و استایل بده */
.card h3{
  display:block !important; /* اگر قبلاً hidden بود، برگردان */
  margin:0;
  font-weight:700;          /* بولد (Vazir-Bold) */
  font-size:16px;
  color:#0f1720;
  text-align:center;
}

/* اگر قبلاً این خط را داشتی، حذفش کن:
   .card h3, .card p { display:none } */

/* Hover */
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  transition:.2s;
}

/* موبایل: اگر جا نشد، اجازه بده روی دو/چند خط بره */
@media (max-width:960px){
  .cards{ flex-wrap:wrap; }     /* بشکنه ولی همچنان وسط */
}


.foot {
    background: #fff;
    border-radius: 18px;
    margin: 20px 0;
    padding: 14px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
    color: var(--muted);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
    max-width: 1200px;
}

.sep {
    opacity: .45
}

/* ===== TWEAKS ===== */
@media (max-width:1100px) {
    .hero-lead {
        padding: 0 6px
    }
}
/* ====== STUDIES FORM (new) ====== */
:root {
    --line: #e6ebf2;
    --blue: #2b6cb0;
    --blue-2: #1f4f86;
    --ring: 0 0 0 3px rgba(43, 108, 176, .18);
}

/* رپّر صفحه فرم */
.form-wrap {
    max-width: 1120px;
    margin: 32px auto;
    padding: 0 16px
}

/* سربرگ */
.form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

.form-h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0
}

.form-badge {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #204b6e;
    font-size: 12px
}

/* کارت‌ها */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(14, 31, 53, .06), 0 2px 6px rgba(14, 31, 53, .04);
    padding: 18px 18px 8px;
    margin-bottom: 18px;
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0e2745
}

.section-title .num {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #e9f2ff;
    color: #1f4f86;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px
}

/* گریدها */
.grid {
    display: grid;
    gap: 14px
}

.grid-2 {
    grid-template-columns: 1fr
}

.grid-3 {
    grid-template-columns: 1fr
}

@media(min-width:780px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.inline-2 {
    display: grid;
    gap: 10px
}

@media(min-width:680px) {
    .inline-2 {
        grid-template-columns: 1fr 1fr
    }
}

/* فیلدها */
label {
    display: block;
    font-size: 13px;
    color: #283a52;
    margin: 6px 2px 6px
}

.req::after {
    content: ' *';
    color: #c53030;
    font-weight: 700
}

input[type=text],
input[type=number],
select,
textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
    color: #0d213a;
    outline: 0;
    transition: .15s;
    font-family: 'Vazir', system-ui;
}

textarea {
    min-height: 120px;
    resize: vertical
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: var(--ring)
}

input::placeholder,
textarea::placeholder {
    color: #9aa7b7
}

.help {
    font-size: 12px;
    color: #667085;
    margin-top: 6px
}

.divider {
    height: 1px;
    background: var(--line);
    margin: 10px 0
}

.hidden {
    display: none
}

/* نوار اکشن چسبان پایین */
.actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(246, 248, 251, 0), var(--bg) 38%);
    padding-top: 12px;
    margin-top: 8px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s
}

.btn-primary {
    background: var(--blue);
    color: #fff
}

.btn-primary:hover {
    background: var(--blue-2)
}

.btn-muted {
    background: #eef2f7
}
/* ===== STUDIES FORM – LEGACY COMPAT PATCH ===== */

/* ظرف کلی فرم فعلی شما */
.form-wrap {
    max-width: 1120px;
    margin: 32px auto;
    padding: 0 16px;
}

/* تیتر بالا + بج سامانه */
.form-wrap h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
}

.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #204b6e;
    font-size: 12px
}

/* جعبه‌های fieldset شما را شکیل می‌کند */
fieldset {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 16px;
    margin: 14px 0;
    box-shadow: 0 10px 22px rgba(14, 31, 53, .06), 0 2px 6px rgba(14, 31, 53, .04);
}

/* عنوان‌های بخش (h2) */
h2 {
    font-size: 16px;
    font-weight: 800;
    color: #0e2745;
    margin: 20px 0 10px;
    border-right: 4px solid #2b6cb0;
    padding-right: 8px;
}

/* گریدهای فعلی (row/row-2/row-3) */
.row {
    display: grid;
    gap: 14px
}

.row-2 {
    grid-template-columns: 1fr
}

.row-3 {
    grid-template-columns: 1fr
}

@media(min-width:780px) {
    .row-2 {
        grid-template-columns: 1fr 1fr
    }

    .row-3 {
        grid-template-columns: 1fr 1fr 1fr
    }
}

/* لیبل و فیلدها */
label {
    display: block;
    font-size: 13px;
    color: #283a52;
    margin: 6px 2px 6px
}

.req::after {
    content: " *";
    color: #c53030;
    font-weight: 700
}

input[type=text],
input[type=number],
select,
textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
    color: #0d213a;
    outline: 0;
    transition: .15s;
    font-family: 'Vazir', system-ui;
}

textarea {
    min-height: 120px;
    resize: vertical
}

input:focus,
select:focus,
textarea:focus {
    border-color: #2b6cb0;
    box-shadow: 0 0 0 3px rgba(43, 108, 176, .18)
}

input::placeholder,
textarea::placeholder {
    color: #9aa7b7
}

/* راهنمای زیر فیلد */
.subtle,
.hint,
.help {
    font-size: 12px;
    color: #667085;
    margin-top: 6px
}

/* جداکننده‌ها */
.divider {
    height: 1px;
    background: #e6ebf2;
    margin: 12px 0
}

/* «سایر» را پنهان/نمایان می‌کند */
.hidden {
    display: none
}

/* دکمه‌ها پایین */
.actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(180deg, rgba(246, 248, 251, 0), var(--bg) 38%);
    padding-top: 12px;
    margin-top: 8px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s
}

.btn-primary {
    background: #2b6cb0;
    color: #fff
}

.btn-primary:hover {
    background: #1f4f86
}

.btn-muted {
    background: #eef2f7
}

/* جلوگیری از افقی شدن اسکرول ناشی از کامپوننت‌ها */
html,
body {
    overflow-x: hidden
}
/* ===== Studies form quick overrides ===== */
.actions {
    position: static;
    background: transparent;
    margin-top: 16px;
    padding-top: 0;
}

fieldset {
    box-shadow: none;
}
/* هدر کوچک هر سکشن */
.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.section-caption {
    font-size: 11px;
    color: #9ca3af;
}

/* کارت‌های سه‌گانه‌ی بالای صفحه قبلاً هست؛ فقط کمی فاصله بیشتر */
.main-modules .card {
    min-height: 160px;
}

/* --- کارت‌های آمار اصلی (نمای کلی سامانه) --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.stats-card {
    border-radius: 16px;
    padding: 12px 14px;
    color: #0f172a;
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: "";
    position: absolute;
    inset: auto -20px -40px;
    height: 60%;
    opacity: 0.18;
    background: radial-gradient(circle at 10% 0, #fff, transparent);
}

.stats-label {
    font-size: 11px;
    color: #e5e7eb;
    position: relative;
    z-index: 1;
}

.stats-value {
    font-family: 'Vazir-Bold', 'Vazir', sans-serif;
    font-size: 22px;
    margin-top: 4px;
    display: block;
    position: relative;
    z-index: 1;
}

.stats-card--blue {
    background: #1d4ed8;
}

.stats-card--indigo {
    background: #4f46e5;
}

.stats-card--teal {
    background: #0f766e;
}

.stats-card--amber {
    background: #d97706;
}

/* --- کارت‌های "آخرین فعالیت‌ها" --- */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.activity-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    border: 1px solid #e5e7eb;
}

.activity-item h3 {
    font-size: 13px;
    margin-bottom: 6px;
}

.activity-main {
    font-size: 12px;
    margin-bottom: 4px;
}

.activity-meta {
    font-size: 11px;
    color: #6b7280;
}

.activity-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: #2563eb;
}

.activity-empty {
    color: #9ca3af;
    font-style: italic;
}

/* --- سه ستون پایین صفحه (تاریخچه، بازدیدهای انجام‌شده، پیشِ رو) --- */
.section--triples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.section--triples .column {
    background: #ffffff;
    border-radius: 16px;
    padding: 0 16px 14px;
    /* از بالا 0 شد تا نوار بچسبه به لبه کارت */
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
    border: 1px solid #e5e7eb;
}
.section--triples .section-title-sm {
    margin: 0;
    padding: 10px 16px;
    background: #e5f0ff;
    /* آبی ملایم */
    border-radius: 14px 14px 0 0;
    /* گوشه‌های بالا گرد */
    border-bottom: 1px solid #cbd5f5;
    /* خط خیلی ملایم زیر نوار */
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #1f2933;
}
.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list li {
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.list li:last-child {
    border-bottom: none;
}

.list-meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* ریسپانسیو برای تبلت و موبایل */
@media (max-width:960px) {

    .stats-grid,
    .activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section--triples {
        grid-template-columns: 1fr;
    }
}

@media (max-width:640px) {

    .stats-grid,
    .activity-grid {
        grid-template-columns: 1fr;
    }
}
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(249, 250, 251, 0.92); /* خاکستری خیلی روشن + کمی شفافیت */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e5e7eb;
}
.hero{
  text-align: center;
  padding-top: 32px;
  padding-bottom: 24px;
}

.hero-text{
  max-width: 720px;
  margin: 0 auto 16px auto;
}

.hero-title{
  font-size: 26px;          /* یک سایز درشت‌تر از قبل */
  font-weight: 700;
  margin-bottom: 8px;
}

.hero-subtitle{
  font-size: 15px;
  color: #6b7280;
}
.stats-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 18px;
  padding: 14px 12px;
  color: #0f172a;
  box-shadow: 0 10px 25px rgba(15,23,42,0.06);
}

/* رنگ‌های پاستلی‌تر */
.stats-card--blue{
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}
.stats-card--indigo{
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}
.stats-card--teal{
  background: linear-gradient(135deg, #ccfbf1, #99f6e4);
}
.stats-card--amber{
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.stats-label{
  font-size: 14px;
  color: #374151;
}

.stats-value{
  font-size: 24px;
  margin-top: 4px;
}
.activity-item{
  text-align: center;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 25px rgba(15,23,42,0.05);
}

.activity-item h3{
  font-size: 13px;
  margin-bottom: 8px;
}

.activity-main{
  font-size: 15px;
  margin-bottom: 6px;
}

.activity-meta{
  font-size: 11px;
  color: #6b7280;
}

.activity-link{
  font-size: 11px;
  margin-top: 8px;
}
/* وسط‌چین کردن کارت‌های پایینی (تاریخچه، بازدیدها، بازدیدهای پیش رو) */
.section--triples .column{
  text-align: center;
}

/* تیترهای کوچک هر کارت */
.section--triples .section-title-sm{
  text-align: center;
  margin-bottom: 10px;
}

/* آیتم‌های لیست داخل هر کارت */
.section--triples .list li{
  text-align: center;
}

/* متن متای زیر هر عنوان در لیست */
.section--triples .list-meta{
  text-align: center;
}
/* اصلاح عنوان هوم که با .wrap h1 تداخل نداشته باشد */
.hero-title{
    display: block;      /* برنده‌ی display:flex قبلی می‌شود */
    width: 100%;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}
/* ===== تیتر آبی برای کارت‌های داشبورد ===== */
.activity-item {
    position: relative;
    padding-top: 48px !important;
    /* جا برای نوار تیتر */
    border-radius: 18px;
    overflow: hidden;
}

/* نوار تیتر */
.activity-item h3 {
    margin: 0;
    background: #e0f0ff;
    /* آبی خیلی لطیف */
    color: #0d2b4d;
    /* آبی تیره حرفه‌ای */
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    border-bottom: 1px solid #d1e7ff;
}

/* متن‌های داخل کارت */
.activity-main {
    margin-top: 6px;
}
/* بولد و واضح شدن تیتر کارت‌های آماری بالا */
.stats-card .stats-label {
    font-size: 16px;
    /* یه کوچولو درشت‌تر */
    font-weight: 700;
    /* بولد */
    color: #111827;
    /* تیره‌تر از قبل برای خوانایی بهتر */
}
/* نوار تیتر برای سکشن‌ها (نمای کلی، آخرین فعالیت‌ها، ...) */
.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-bottom: 12px;
    padding: 8px 14px;

    border-radius: 16px;
    background: linear-gradient(90deg, #eff6ff, #f9fafb);
    /* نوار خیلی لطیف */
    border: 1px solid #e5e7eb;
}

/* تیتر سمت راست (نمای کلی سامانه، آخرین فعالیت‌ها، ...) */
.section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

/* کپشن سمت چپ (خلاصه وضعیت ثبت‌ها و بررسی‌ها و …) */
.section-caption {
    font-size: 11px;
    color: #6b7280;
}
/* ===== نوار تیتر داخل کارت‌های آماری بالا ===== */
.stats-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 52px 16px 18px;
    /* جا برای نوار تیتر بالا */
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    text-align: center;
}

/* پس‌زمینه نوار تیتر */
.stats-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.28);
    /* یک کم روشن‌تر از خود کارت */
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
/* --- چهار کارت نمای کلی سامانه (بالای داشبورد) --- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.statbox {
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 115px;
}

.statbox-head {
    padding: 8px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* نوارهای رنگی بالای هر کارت */
.statbox--amber .statbox-head {
    background: #fef3c7;
}

.statbox--teal .statbox-head {
    background: #ccfbf1;
}

.statbox--indigo .statbox-head {
    background: #e0e7ff;
}

.statbox--blue .statbox-head {
    background: #dbeafe;
}

.statbox-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    padding: 14px 10px 16px;
    color: #111827;
}

/* ریسپانسیو */
@media (max-width:960px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:640px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* هم‌عرض کردن ردیف آمار و ردیف آخرین فعالیت‌ها */
.stats-grid,
.activity-grid {
    max-width: 1120px;
    /* عدد دلخواه؛ می‌تونی 1200 هم بذاری، مهم یکسان بودنِ هر دو تاست */
    margin: 0 auto;
    /* وسط چین افقی */
}
.section--triples .column {
    background: #ffffff;
    border-radius: 16px;
    padding: 0 16px 14px;
    /* بالای کارت 0 که نوار بچسبد */
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
    border: 1px solid #e5e7eb;
}

/* نوار آبی تیتر داخل هر کارت */
.section--triples .section-title-sm {
    margin: 0;
    padding: 10px 16px;
    background: #e5f0ff;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid #cbd5f5;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #1f2933;
}
/* === فیکس کارت‌های ردیف سوم (تاریخچه / بازدیدها) === */

/* ظرف سه‌تایی، کاملاً داخل wrap */
.section--triples {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* خود کارت */
.section--triples .column {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
    border: 1px solid #e5e7eb;

    /* مهم: padding صفر و overflow تا تیر آبی تا لبه برود */
    padding: 0;
    overflow: hidden;
}

/* تیر آبی بالای کارت؛ هم‌عرضِ خود کارت */
.section--triples .section-title-sm {
    margin: 0;
    padding: 10px 18px;
    background: linear-gradient(135deg, #e0edff, #c7d2fe);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    border-radius: 18px 18px 0 0;
    /* هم‌راستا با خود کارت */
}

/* محتوای داخل کارت (لیست و لینک پایین) */
.section--triples .column>*:not(.section-title-sm) {
    padding: 8px 18px 14px;
}

/* خود لیست */
.section--triples .list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

/* ردیف‌های لیست */
.section--triples .list li {
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.section--triples .list li:last-child {
    border-bottom: none;
}

/* متن خاکستری زیر عنوان هر آیتم */
.section--triples .list-meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* لینک پایین کارت */
.section--triples .activity-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: #2563eb;
}
/* --- کارت‌های آمار اصلی (نمای کلی سامانه) --- */
.stats-grid {
    display: grid;
    /* به‌جای ۴ ستون ثابت، اتوماتیک تا ۵ کارت جا بده و با عرض صفحه تنظیم شود */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.stats-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 18px;
    padding: 14px 12px;
    color: #0f172a;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
}

/* تیتر داخل کارت آمار */
.stats-label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111827;
}

.stats-value {
    font-size: 26px;
    margin-top: 2px;
}

/* رنگ‌های پاستلی برای کارت‌های آمار */
.stats-card--blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.stats-card--indigo {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.stats-card--teal {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
}

.stats-card--amber {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

/* کارت جدید برای مطالعات بایگانی‌شده */
.stats-card--slate {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
}
/* فاصله بین سکشن‌های پشت سر هم (مثل نمای کلی سامانه و آخرین فعالیت‌ها) */
.section+.section {
    margin-top: 28px;
}
/* --- کارت‌های نمای کلی سامانه --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* پنج‌تا در یک ردیف دسکتاپ */
    gap: 12px;
    margin-top: 8px;
}

.stats-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 18px;
    padding: 14px 12px;
    color: #0f172a;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

/* رنگ‌های پاستلی‌تر */
.stats-card--blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.stats-card--indigo {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.stats-card--teal {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
}

.stats-card--amber {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.stats-card--slate {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
}

.stats-label {
    font-size: 14px;
    color: #374151;
}

.stats-value {
    font-size: 24px;
    margin-top: 4px;
}

/* ریسپانسیو: روی عرض‌های کمتر بشکنه ولی وسط بمونه */
@media (max-width:1200px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:960px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:640px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* نوار سفید بالای کارت‌های نمای کلی سامانه */
.stats-card {
    position: relative;
    padding-top: 44px;
    /* فضا برای نوار بالا */
}

/* خود نوار سفید (روی span.stats-label سوار می‌شود) */
.stats-card .stats-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #ffffff;
    /* نوار سفید */
    border-radius: 18px 18px 0 0;
    /* گوشه‌های بالا هم‌راستا با کارت */
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

/* مقدار عددی زیر نوار */
.stats-card .stats-value {
    margin-top: 4px;
}
.hero-tagline-en {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 500;
    /* فونت انگلیسی متفاوت */
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    color: #9ca3af;
    /* رنگ فید خاکستری */
    letter-spacing: 0.03em;
    /* کمی فاصله بین حروف برای حس حرفه‌ای‌تر */
}
/* اگر هنوز fieldset داری */