/* ============================================================
   Bale Bot SaaS — Brand: ای باهوشم (ibahoosham.ir)
   Color system: Emerald + warm cream
   Version: v7.2
   ============================================================ */

/* Fonts — Vazirmatn (loaded from local assets/fonts/) */
@font-face {
    font-family: 'Vazirmatn';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    font-weight: 900;
    font-style: normal;
    src: url('../fonts/Vazirmatn-Black.woff2') format('woff2');
    font-display: swap;
}

/* ===== Variables (Brand "ای باهوشم") ===== */
:root {
    --bg: #f7f5f0;
    --bg-soft: #f1eee5;
    --surface: #ffffff;
    --surface-2: #fbfaf6;
    --text: #17221e;
    --text-soft: #4c5a54;
    --muted: #7b8a83;
    --border: #e4e0d4;
    --border-strong: #d5d0bf;
    --primary: #047857;
    --primary-hover: #03664a;
    --primary-soft: #d9f2e5;
    --primary-softer: #eefaf2;
    --on-primary: #ffffff;
    --accent: #b45309;
    --accent-soft: #fdeecd;
    --danger: #b91c1c;
    --danger-soft: #fee2e2;
    --success: #047857;
    --success-soft: #d9f2e5;
    --info: #52645b;
    --info-soft: #e4eae5;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }
code { font-family: 'Courier New', monospace; background: var(--bg-soft); padding: 2px 8px; border-radius: 6px; direction: ltr; display: inline-block; }

/* ===== Layout ===== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }
main { flex: 1; padding: 32px 0; }

/* ===== Header ===== */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.92);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
}
.logo svg { color: var(--primary); }
.logo:hover { color: var(--primary); }
/* v7.4 — زیرعنوان برند: «ربات هوشمند مدیریت کانال بله» */
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.logo-sub {
    font-size: .62rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .2px;
}
@media (max-width: 560px) {
    .logo-sub { display: none; }
}
nav {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nav-link {
    color: var(--text-soft);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all .15s;
}
.nav-link:hover { color: var(--primary); background: var(--primary-softer); }
.nav-link.logout { color: var(--danger); }
.balance-badge {
    background: var(--primary-soft);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { opacity: 0.9; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { padding: 6px 14px; font-size: 0.85rem; border-radius: 10px; }
.btn-lg { padding: 14px 32px; font-size: 1.1rem; }

/* ===== Cards ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow); }
.card-lg { padding: 32px; border-radius: var(--radius-lg); }
.card-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.card-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.card-desc { font-size: 0.9rem; color: var(--muted); margin-top: 4px; }

/* ===== Forms ===== */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--text-soft);
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-hint { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

/* ===== Alerts ===== */
.alert {
    padding: 12px 18px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.alert-success { background: var(--success-soft); color: var(--success); border-color: var(--primary-soft); }
.alert-error, .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.alert-warning { background: var(--accent-soft); color: var(--accent); }

/* ===== Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--accent-soft); color: var(--accent); }
.badge-muted   { background: var(--bg-soft); color: var(--muted); }

/* ===== Stats Grid ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

/* ===== Tables ===== */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
thead { background: var(--bg-soft); }
th, td {
    padding: 12px 16px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
th { font-weight: 600; color: var(--text-soft); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* ===== Tabs ===== */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
}
.tab {
    padding: 10px 20px;
    font-weight: 500;
    color: var(--muted);
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all .15s;
}
.tab:hover { color: var(--text-soft); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ===== Toggle switch ===== */
.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; right: 0; bottom: 0; left: 0;
    background: var(--border-strong);
    border-radius: 999px;
    transition: .2s;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    right: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: .2s;
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider:before { transform: translateX(-20px); }

/* ===== Empty state ===== */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
}
.empty-state svg { width: 56px; height: 56px; color: var(--border-strong); margin-bottom: 12px; }

/* ===== Footer ===== */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 20px 0;
    margin-top: auto;
}
.site-footer p { text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ===== Utilities ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

/* ===== Page hero ===== */
.page-hero {
    background: linear-gradient(135deg, var(--primary-softer), var(--surface));
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--primary-soft);
}
.page-hero h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.page-hero p { color: var(--text-soft); }

/* ===== Toast notifications ===== */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    padding: 14px 20px;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    animation: slideIn .3s ease;
    font-size: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
}
.toast.success { background: var(--success-soft); color: var(--success); border-color: var(--primary-soft); }
.toast.error   { background: var(--danger-soft); color: var(--danger); }
.toast.warning { background: var(--accent-soft); color: var(--accent); }

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   v6.5 — قلم وزیرمتن (CDN به‌عنوان پشتیبان فونت‌های محلی)
   ============================================================ */
@font-face {
    font-family: 'Vazirmatn';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-display: swap;
}

/* ============================================================
   v6.5 — اسکرول‌بار سفارشی (scroll-area-thin قبلاً تعریف نشده بود)
   ============================================================ */
.scroll-area-thin { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll-area-thin::-webkit-scrollbar { width: 7px; height: 7px; }
.scroll-area-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-area-thin::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.scroll-area-thin::-webkit-scrollbar-thumb:hover { background: var(--muted); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ============================================================
   v6.5 — فوکوس و دسترس‌پذیری
   ============================================================ */
:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; border-radius: 6px; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled], .btn.busy { opacity: 0.65; cursor: not-allowed; }

/* ============================================================
   v6.5 — منوی موبایل (همبرگری)
   ============================================================ */
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text);
    font-size: 1.2rem;
    line-height: 1;
}
@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; align-items: center; }
    .site-header nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 20px 16px;
        gap: 4px;
        animation: navDrop .2s ease;
    }
    .site-header nav.open { display: flex; }
    .site-header .container { position: relative; flex-wrap: wrap; }
    .nav-link { padding: 11px 14px; }
    .balance-badge { align-self: center; margin: 6px 0; }
}
@keyframes navDrop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* هایلایت لینک فعال منو */
.nav-link.active { color: var(--primary); background: var(--primary-softer); font-weight: 700; }

/* ============================================================
   v6.5 — نمودار SVG
   ============================================================ */
.chart-wrap { padding: 8px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-wrap.chart-scroll { overflow-x: auto; }
.chart-svg { display: block; min-width: 100%; }
.chart-svg .chart-gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-svg .chart-lbl { font-size: 9.5px; fill: var(--muted); font-family: inherit; }
.chart-svg .chart-val { font-size: 9.5px; font-weight: 700; fill: var(--text-soft); font-family: inherit; }
.chart-bar { animation: chartRise .5s cubic-bezier(.2,.8,.3,1) backwards; transform-box: fill-box; transform-origin: bottom; }
.chart-bar:hover { filter: brightness(1.08); cursor: pointer; }
@keyframes chartRise {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
.chart-legend { display: flex; gap: 16px; margin-bottom: 10px; font-size: .8rem; color: var(--text-soft); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 5px; vertical-align: -1px; }
.chart-empty { text-align: center; color: var(--muted); padding: 40px; font-size: .9rem; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); }

/* ============================================================
   v6.5 — مودال (پیش‌نمایش صف و …)
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 34, 30, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .18s ease;
}
.modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 620px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    animation: modalPop .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-title { font-weight: 700; font-size: 1rem; }
.modal-close {
    background: var(--bg-soft);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-soft);
    transition: all .15s;
}
.modal-close:hover { background: var(--danger-soft); color: var(--danger); }
.modal-body { padding: 22px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop {
    from { opacity: 0; transform: scale(.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   v6.5 — پیش‌نمایش رسانه صف
   ============================================================ */
.q-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s, box-shadow .15s;
}
.q-thumb:hover { transform: scale(1.06); box-shadow: var(--shadow); }
.q-thumb-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.q-caption { font-size: .85rem; color: var(--text-soft); line-height: 1.8; margin-top: 6px; }
.q-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.preview-media { max-width: 100%; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 14px; max-height: 380px; }

/* ============================================================
   v6.5 — نوار پیشرفت (اشتراک/سهمیه)
   ============================================================ */
.progress {
    height: 10px;
    background: var(--bg-soft);
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #059669);
    border-radius: 99px;
    transition: width .6s cubic-bezier(.2,.8,.3,1);
    position: relative;
    overflow: hidden;
}
.progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: shimmer 2.2s infinite;
}
@keyframes shimmer {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}
.progress-bar.warn { background: linear-gradient(90deg, var(--accent), #d97706); }

/* ============================================================
   v6.5 — بهبود toast و جدول
   ============================================================ */
.toast { border-right: 4px solid var(--border-strong); min-width: 220px; }
.toast.success { border-right-color: var(--success); }
.toast.error   { border-right-color: var(--danger); }
.toast.warning { border-right-color: var(--accent); }

tbody tr { transition: background .12s; }
table { box-shadow: none; border: 1px solid var(--border); }
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.table-wrap table { border: none; }

/* اسکلتون لودینگ */
.skeleton {
    background: linear-gradient(90deg, var(--bg-soft) 25%, var(--surface-2) 50%, var(--bg-soft) 75%);
    background-size: 200% 100%;
    animation: skel 1.4s infinite;
    border-radius: 8px;
}
@keyframes skel {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================
   v6.5 — کارت‌های آمار صفحه آمار
   ============================================================ */
.mini-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.mini-stat .ms-value { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.mini-stat .ms-label { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .8rem;
    font-weight: 700;
}

/* ============================================================
   v6.6 — حالت شب (Dark Mode)
   فعال‌سازی: html[data-theme="dark"] — انتخاب کاربر در localStorage
   ============================================================ */
html { background: var(--bg); }
body { transition: background .25s ease, color .25s ease; }

html[data-theme="dark"] {
    --bg: #0e1412;
    --bg-soft: #16201c;
    --surface: #17211d;
    --surface-2: #1b2622;
    --text: #e7efe9;
    --text-soft: #b3c4bb;
    --muted: #7f948a;
    --border: #243430;
    --border-strong: #33463f;
    --primary: #34d399;
    --primary-hover: #6ee7b7;
    --primary-soft: rgba(52, 211, 153, 0.16);
    --primary-softer: rgba(52, 211, 153, 0.08);
    --on-primary: #04241a;
    --accent: #fbbf24;
    --accent-soft: rgba(251, 191, 36, 0.14);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.16);
    --info: #a3bfb1;
    --info-soft: rgba(163, 191, 177, 0.15);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow: 0 4px 10px -2px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 24px -6px rgba(0,0,0,0.55);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .site-header { background: rgba(14,20,18,0.9); }
html[data-theme="dark"] code { background: var(--bg-soft); color: #a7f3d0; }
html[data-theme="dark"] .toast { background: var(--surface-2); }
html[data-theme="dark"] .btn { background: var(--surface-2); }
html[data-theme="dark"] .btn:hover { background: var(--bg-soft); }
html[data-theme="dark"] .btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
html[data-theme="dark"] .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
html[data-theme="dark"] .btn-danger { background: var(--danger); color: #2a0a0a; border-color: var(--danger); }
html[data-theme="dark"] thead { background: var(--bg-soft); }
html[data-theme="dark"] tbody tr:hover { background: var(--surface-2); }
html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.65); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-soft); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-color: var(--bg-soft); }
html[data-theme="dark"] .chart-empty { background: var(--surface-2); }
html[data-theme="dark"] .progress { background: var(--bg-soft); }
html[data-theme="dark"] .progress-bar { background: linear-gradient(90deg, var(--primary), #10b981); }
html[data-theme="dark"] .mini-stat { background: var(--surface-2); }

/* دکمه تغییر تم */
.theme-toggle {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s;
    flex-shrink: 0;
}
.theme-toggle:hover { transform: rotate(15deg) scale(1.08); background: var(--primary-soft); }

/* دکمه تم در صفحات ورود/ثبت‌نام (گوشه ثابت) */
.theme-toggle.floating {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 999;
    box-shadow: var(--shadow);
}

/* ============================================================
   v6.6 — پروفایل
   ============================================================ */
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #059669);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--bg-soft);
    font-size: .92rem;
}
.info-row:last-child { border-bottom: none; }
.info-row .info-label { color: var(--muted); }
.info-row .info-value { font-weight: 500; }

/* ============================================================
   v6.6 — تنظیمات رنگ سیستم و انتخاب متن
   ============================================================ */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

::selection { background: var(--primary); color: var(--on-primary); }
html[data-theme="dark"] ::selection { background: var(--primary); color: #04241a; }

/* ============================================================
   v6.6 — جدول‌ها: زبرا + اعداد tabular + هدر چسبان + هاور بهتر
   ============================================================ */
table { font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: var(--primary-softer); }
html[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(52, 211, 153, 0.04); }
tbody tr:hover { background: var(--primary-soft); }
html[data-theme="dark"] tbody tr:hover { background: rgba(52, 211, 153, 0.08); }
tbody td { border-bottom: 1px solid var(--bg-soft); }
tbody tr:last-child td { border-bottom: none; }
.table-wrap thead th {
    position: sticky;
    top: 0;
    background: var(--bg-soft);
    z-index: 1;
}
th { font-weight: 700; font-size: .82rem; color: var(--text-soft); white-space: nowrap; }
td { vertical-align: middle; }

/* ============================================================
   v6.6 — نشانگر نقطه روی badgeها
   ============================================================ */
.badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
    flex-shrink: 0;
}

/* ============================================================
   v6.6 — Empty state غنی‌تر
   ============================================================ */
.empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    margin: 12px;
    background: var(--surface-2);
}
.empty-state .es-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.empty-state h3 { font-size: 1rem; font-weight: 700; color: var(--text-soft); margin-bottom: 4px; }
.empty-state p { font-size: .85rem; }

/* ============================================================
   v6.6 — نوار فیلتر (صفحه لاگ‌ها)
   ============================================================ */
.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}
@media (max-width: 700px) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar > * { min-width: 0 !important; }
}

/* ============================================================
   v6.6 — صفحه‌بندی
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--bg-soft);
    margin-top: 8px;
}
.page-link {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: .88rem;
    font-weight: 500;
    transition: all .15s;
}
.page-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-softer);
    text-decoration: none;
}
.page-info { font-size: .82rem; color: var(--muted); }

/* ============================================================
   v6.6 — صفحه پروفایل
   ============================================================ */
.profile-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr; }
}
.profile-identity-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.profile-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-soft);
}
@media (max-width: 480px) {
    .profile-mini-stats { grid-template-columns: repeat(2, 1fr); }
}
.profile-forms { display: flex; flex-direction: column; gap: 20px; }

/* آواتار در حالت شب: گرادیان روشن‌تر */
html[data-theme="dark"] .profile-avatar {
    background: linear-gradient(135deg, var(--primary), #059669);
    color: #04241a;
}

/* ============================================================
   v6.6 — فرم‌ها در حالت شب (پس‌زمینه input)
   ============================================================ */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border-strong);
}
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
html[data-theme="dark"] .empty-state { background: var(--surface-2); }
html[data-theme="dark"] .page-hero { background: linear-gradient(135deg, rgba(52,211,153,.08), var(--surface)); }
html[data-theme="dark"] .alert-success { background: rgba(52, 211, 153, 0.12); }
html[data-theme="dark"] .alert-error, html[data-theme="dark"] .alert-danger { background: rgba(248, 113, 113, 0.12); }
html[data-theme="dark"] .alert-warning { background: rgba(251, 191, 36, 0.10); }
html[data-theme="dark"] .site-footer { background: var(--surface); }

/* ============================================================
   v6.6 — احترام به تنظیم reduce-motion کاربر
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   v6.6 — استایل چاپ
   ============================================================ */
@media print {
    .site-header, .site-footer, .nav-toggle, .theme-toggle,
    .btn, .toast-container, .tabs, .filter-bar, .pagination,
    .page-hero, .stats-grid, .card-header .card-desc { display: none !important; }
    body { background: #fff; color: #000; }
    .container { max-width: 100%; padding: 0; }
    .card, .table-wrap { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    table { font-size: 11px; }
    a { color: #000; text-decoration: none; }
    main { padding: 0 !important; }
}

/* ============================================================
   v6.7 — زمان‌بندی انتشار و بازطراحی صف
   ============================================================ */

/* --- تب‌های فیلتر وضعیت با شمارنده --- */
.filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ftab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-size: .85rem;
    font-weight: 500;
    transition: all .18s ease;
}
.ftab:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-softer); transform: translateY(-1px); }
.ftab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 3px 10px -2px rgba(4, 120, 87, 0.35);
}
.ftab-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--muted);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    transition: inherit;
}
.ftab.active .ftab-n { background: rgba(255,255,255,0.22); color: inherit; }
.ftab-warn .ftab-n { background: var(--danger-soft); color: var(--danger); font-weight: 700; }

/* --- نوار ابزار عملیات گروهی --- */
.queue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.queue-toolbar-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.toolbar-hint {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: .78rem;
    color: var(--muted);
}
@media (max-width: 640px) {
    .queue-toolbar { flex-direction: column; align-items: stretch; }
    .queue-toolbar-btns > .btn { flex: 1 1 45%; }
}

/* --- ردیف‌های صف: چیدمان و هاور --- */
.q-list { max-height: 560px; overflow-y: auto; padding-inline: 2px; }
.q-row { padding: 12px 16px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.q-row:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px -6px rgba(4, 120, 87, 0.22);
    transform: translateY(-1px);
}
.q-row-inner { display: flex; align-items: flex-start; gap: 12px; }
.q-main { flex: 1; min-width: 0; }
.q-caption-line {
    font-size: .85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.q-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .q-row-inner { flex-wrap: wrap; }
    .q-actions { flex-direction: row; width: 100%; flex-wrap: wrap; }
    .q-actions .btn { flex: 1 1 auto; }
}

/* --- نشان و متن زمان‌بندی --- */
.badge-sched { background: var(--info-soft); color: var(--info); }
.sched-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--info);
    background: var(--info-soft);
    padding: 1px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.sched-due-soon {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    animation: duePulse 1.6s ease-in-out infinite;
}
@keyframes duePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}
.q-due-soon { border-color: var(--accent); }

/* --- دکمه‌های کمکی صف --- */
.btn-sched {
    border-color: var(--info);
    color: var(--info);
    background: var(--info-soft);
}
.btn-sched:hover { background: var(--info); color: #fff; border-color: var(--info); }
html[data-theme="dark"] .btn-sched:hover { color: var(--bg); }
.btn-ghost-danger {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
}
.btn-ghost-danger:hover { background: var(--danger-soft); border-color: var(--danger-soft); }

/* --- مودال زمان‌بندی --- */
.modal-sched { max-width: 430px; }
.sched-desc { font-size: .86rem; color: var(--text-soft); margin-bottom: 14px; }
.sched-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}
.sched-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-soft);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.sched-chip:hover {
    border-color: var(--primary);
    background: var(--primary-softer);
    color: var(--primary);
    transform: translateY(-1px);
}
.sched-chip:active { transform: translateY(0) scale(.97); }
.sched-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 6px;
}
.sched-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sched-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.sched-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
.sched-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
html[data-theme="dark"] .sched-input { color-scheme: dark; background: var(--surface-2); }
html[data-theme="dark"] .sched-input::-webkit-calendar-picker-indicator { filter: invert(1); }
.sched-flash { animation: schedFlash .4s ease; }
@keyframes schedFlash {
    0% { box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--primary); }
    100% { box-shadow: none; }
}
.sched-hint {
    margin-top: 8px;
    font-size: .75rem;
    color: var(--muted);
}
.sched-btns {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.sched-btns .btn-primary { flex: 1; }

/* --- دسترس‌پذیری فوکوس برای فیلترها --- */
.ftab:focus-visible, .sched-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- حالت شب: ردیف‌ها و تب‌ها --- */
html[data-theme="dark"] .ftab { background: var(--surface-2); }
html[data-theme="dark"] .ftab.active { box-shadow: 0 3px 12px -2px rgba(52, 211, 153, 0.35); }
html[data-theme="dark"] .q-row:hover { box-shadow: 0 6px 18px -8px rgba(52, 211, 153, 0.25); }
html[data-theme="dark"] .btn-sched { background: var(--info-soft); }

/* ============================================================
   v6.8 — تقویم شمسی + ترتیب دستی صف (Drag & Drop) + ریز-تعامل‌ها
   ============================================================ */

/* --- تقویم: نوار ماه و فیلتر --- */
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; }
.cal-title .btn { min-width: 42px; }
.cal-filter { display: flex; align-items: center; gap: 8px; }
.cal-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.cal-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* --- تقویم: شبکه ماه --- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.cal-wd { text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-wd.fri { color: var(--danger); }
@keyframes calIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.cal-day {
    min-height: 86px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 8px;
    position: relative;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    animation: calIn .35s ease backwards;
}
.cal-day.fri { background: var(--surface-2); }
.cal-day.empty { background: transparent; border-style: dashed; border-color: var(--bg-soft); animation: none; }
.cal-day.has-items {
    border-color: var(--primary);
    background: linear-gradient(180deg, var(--primary-softer), var(--surface) 70%);
}
button.cal-day { cursor: pointer; width: 100%; text-align: right; font-family: inherit; font-size: inherit; color: inherit; }
button.cal-day:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.cal-day.today { border: 2px solid var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cal-daynum { display: block; font-size: .85rem; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cal-today-badge {
    position: absolute; top: 6px; left: 6px;
    font-size: .6rem; font-weight: 700;
    background: var(--primary); color: var(--on-primary);
    padding: 1px 7px; border-radius: 99px;
}
.cal-chips { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.cal-chip {
    font-size: .68rem; line-height: 1.6;
    background: var(--primary-soft); color: var(--primary);
    border-radius: 6px; padding: 0 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip.over { background: var(--danger-soft); color: var(--danger); }
.cal-more { font-size: .65rem; color: var(--muted); }

/* --- تقویم: راهنما و مودال روز --- */
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .75rem; color: var(--text-soft); margin-top: 14px; }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 5px; vertical-align: middle; }
.cal-modal-list { display: flex; flex-direction: column; gap: 8px; }
.cal-modal-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 12px;
    transition: border-color .15s;
}
.cal-modal-row:hover { border-color: var(--primary); }
.cal-time-pill {
    font-size: .75rem; font-weight: 700;
    color: var(--primary); background: var(--primary-soft);
    padding: 2px 9px; border-radius: 99px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cal-time-pill.over { color: var(--danger); background: var(--danger-soft); }
.cal-row-cap { flex: 1; min-width: 0; font-size: .85rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .cal-day { min-height: 62px; padding: 4px 5px; border-radius: 9px; }
    .cal-chips { gap: 2px; margin-top: 3px; }
    .cal-chip { font-size: .58rem; padding: 0 4px; }
    .cal-day .cal-chip:nth-of-type(n+2), .cal-day .cal-more { display: none; }
    .cal-daynum { font-size: .72rem; }
    .cal-today-badge { display: none; }
    .cal-title { font-size: .95rem; }
}

/* --- ترتیب دستی صف: دستگیره و حالت کشیدن --- */
.q-row { position: relative; }
.q-drag-handle {
    background: none; border: none; padding: 2px 5px;
    color: var(--muted); font-size: 1.05rem; line-height: 1;
    cursor: grab; border-radius: 6px; flex-shrink: 0;
    transition: color .15s, background .15s;
    touch-action: none;
    user-select: none;
}
.q-drag-handle:hover { color: var(--primary); background: var(--primary-softer); }
.q-row.q-draggable { cursor: grab; }
.q-row.q-draggable:active { cursor: grabbing; }
.q-row.dragging { opacity: .45; border-style: dashed; transform: scale(.995); }
@keyframes dropPulse { 50% { opacity: .35; } }
.q-row.drop-target::before,
.q-row.drop-below::after {
    content: '';
    position: absolute; right: 12px; left: 12px; height: 4px;
    border-radius: 99px;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(4, 120, 87, .5);
    animation: dropPulse 1s ease infinite;
}
.q-row.drop-target::before { top: -9px; }
.q-row.drop-below::after { bottom: -9px; }

/* --- دکمه‌های جابه‌جایی ▲▼ --- */
.q-move-btns { display: flex; gap: 4px; }
.btn.btn-icon { padding: 5px 9px; font-size: .68rem; line-height: 1; min-width: 36px; justify-content: center; }

/* --- ریز-تعامل‌های v6.8 --- */
.btn { will-change: transform; }
.btn-primary:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25); }
.stat-card .stat-icon { transition: transform .25s ease; }
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-4deg); }
.toast.success::before { content: '✓ '; font-weight: 900; }
.toast.error::before { content: '✕ '; font-weight: 900; }

/* --- فوکوس و حرکت کم‌تر --- */
.cal-day:focus-visible, .q-drag-handle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .cal-day { animation: none; }
    .q-row.drop-target::before, .q-row.drop-below::after { animation: none; }
    .q-row, .stat-card, .btn, .stat-card .stat-icon { transition: none; }
}

/* --- حالت شب v6.8 --- */
html[data-theme="dark"] .cal-day { background: var(--surface-2); }
html[data-theme="dark"] .cal-day.fri { background: rgba(255, 255, 255, .02); }
html[data-theme="dark"] .cal-day.empty { background: transparent; }
html[data-theme="dark"] .cal-day.has-items { background: linear-gradient(180deg, rgba(52, 211, 153, .1), var(--surface-2) 70%); }
html[data-theme="dark"] .cal-chip { background: rgba(52, 211, 153, .14); }
html[data-theme="dark"] .cal-chip.over { background: rgba(248, 113, 113, .16); }
html[data-theme="dark"] .cal-modal-row { background: var(--surface-2); }
html[data-theme="dark"] .q-row.drop-target::before,
html[data-theme="dark"] .q-row.drop-below::after { background: var(--primary); box-shadow: 0 0 8px rgba(52, 211, 153, .5); }

/* ============================================================
   v6.9 — نوار اطلاعیه مدیر + ورود دو مرحله‌ای + خروجی ICS
   ============================================================ */

/* ===== نوار اطلاعیه مدیر (بالای محتوا — بعد از هدر) ===== */
.announce-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 1100px;
    width: calc(100% - 40px);
    margin: 18px auto -10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-soft), var(--surface) 65%);
    border: 1px solid var(--primary);
    border-right-width: 4px;
    box-shadow: var(--shadow-sm);
    animation: announceIn .45s cubic-bezier(.2, .9, .3, 1.2) both;
    position: relative;
    overflow: hidden;
}
.announce-bar::after {
    /* خط نور متحرک ظریف */
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 46%;
    background: linear-gradient(90deg, transparent, rgba(4, 120, 87, .06), transparent);
    animation: announceShine 5s ease-in-out infinite;
    pointer-events: none;
}
.announce-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    font-size: 1.05rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(4, 120, 87, .35);
}
.announce-text {
    flex: 1;
    font-size: .92rem;
    line-height: 1.9;
    color: var(--text);
    min-width: 0;
    word-break: break-word;
}
.announce-close {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: .85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.announce-close:hover { background: var(--danger-soft); color: var(--danger); transform: rotate(90deg); }
.announce-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.announce-bar.is-hiding { animation: announceOut .3s ease forwards; }

@keyframes announceIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes announceOut {
    to { opacity: 0; transform: translateY(-14px); margin-top: -60px; }
}
@keyframes announceShine {
    0%, 100% { transform: translateX(120%); }
    50%      { transform: translateX(160%); }
}

/* ===== ورود دو مرحله‌ای — صفحه مدیریت ===== */
.otp-card { max-width: 680px; margin-inline: auto; }

.otp-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    margin-bottom: 4px;
}
.otp-status-icon { font-size: 1.9rem; line-height: 1; }
.otp-on {
    background: linear-gradient(135deg, var(--success-soft), transparent 80%);
    border: 1px solid var(--success);
}
.otp-pending {
    background: linear-gradient(135deg, var(--accent-soft), transparent 80%);
    border: 1px solid var(--accent);
}

.otp-divider { height: 1px; background: var(--border); margin: 20px 0; }

/* گام‌های راه‌اندازی */
.otp-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.otp-step {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}
.otp-step:last-child { border-bottom: none; }
.otp-step-num {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 800;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--primary-soft);
    transition: transform .25s ease;
}
.otp-step:hover .otp-step-num { transform: scale(1.12) rotate(-6deg); }
.otp-step-body { flex: 1; min-width: 0; }
.otp-step-body b { display: block; margin-bottom: 4px; }
.otp-step-body p { font-size: .87rem; margin-bottom: 10px; }

/* کلید مخفی */
.otp-secret-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.otp-secret {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 2px;
    background: var(--bg-soft);
    border: 1px dashed var(--border-strong);
    padding: 9px 14px;
    border-radius: 10px;
    user-select: all;
}

/* لینک otpauth */
.otp-uri-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-softer);
    border: 1px solid var(--primary-soft);
    transition: transform .15s ease, box-shadow .15s ease;
}
.otp-uri-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* فرم تأیید کد */
.otp-verify-form { display: flex; gap: 10px; flex-wrap: wrap; }
.otp-code-input {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
    max-width: 220px;
    direction: ltr;
}
.otp-code-lg { max-width: 100%; font-size: 1.5rem; margin: 0 auto; display: block; }

/* فرم غیرفعال‌سازی (رمز + دکمه در یک ردیف) */
.otp-inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.otp-inline-form .form-input { max-width: 260px; }

/* شمارنده تلاش در صفحه تأیید */
.otp-tries {
    text-align: center;
    font-size: .82rem;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 12px;
}
.otp-verify-card { text-align: center; }
.otp-verify-foot {
    margin-top: 14px;
    font-size: .78rem;
    color: var(--muted);
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}

/* سؤالات پرتکرار */
.otp-info-card { max-width: 680px; margin-inline: auto; }
.otp-faq details {
    border-bottom: 1px dashed var(--border);
    padding: 4px 0;
}
.otp-faq details:last-child { border-bottom: none; }
.otp-faq summary {
    cursor: pointer;
    font-weight: 600;
    padding: 8px 4px;
    border-radius: 8px;
    transition: color .15s ease;
    list-style-position: inside;
}
.otp-faq summary:hover { color: var(--primary); }
.otp-faq details[open] summary { color: var(--primary); }
.otp-faq details p {
    padding: 4px 12px 12px;
    font-size: .87rem;
    color: var(--text-soft);
}

/* لیبل چک‌باکس (اطلاعیه ادمین) */
.otp-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .9rem;
    user-select: none;
}
.otp-switch-label input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ===== خروجی ICS (تقویم) ===== */
.btn-ics {
    background: var(--primary-softer);
    border: 1px solid var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}
.btn-ics:hover {
    background: var(--primary-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.cal-ics-hint {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: .82rem;
    color: var(--text-soft);
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
}

/* ===== حالت شب v6.9 ===== */
html[data-theme="dark"] .announce-bar {
    background: linear-gradient(135deg, rgba(52, 211, 153, .12), var(--surface) 65%);
    border-color: rgba(52, 211, 153, .5);
}
html[data-theme="dark"] .announce-close:hover { background: rgba(248, 113, 113, .15); }
html[data-theme="dark"] .otp-secret { background: var(--bg-soft); border-color: var(--border-strong); }
html[data-theme="dark"] .otp-uri-btn { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .3); }
html[data-theme="dark"] .otp-step { border-bottom-color: var(--border); }
html[data-theme="dark"] .otp-divider { background: var(--border); }
html[data-theme="dark"] .otp-faq summary:hover,
html[data-theme="dark"] .otp-faq details[open] summary { color: #34d399; }
html[data-theme="dark"] .cal-ics-hint { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-soft); }
html[data-theme="dark"] .btn-ics { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .3); color: #34d399; }

/* ===== واکنش‌گرا v6.9 ===== */
@media (max-width: 640px) {
    .announce-bar { flex-wrap: nowrap; padding: 10px 12px; margin: 12px auto -8px; }
    .announce-icon { width: 28px; height: 28px; font-size: .9rem; }
    .announce-text { font-size: .85rem; }
    .otp-step { flex-direction: column; gap: 8px; }
    .otp-step-num { width: 30px; height: 30px; font-size: .9rem; }
    .otp-code-input { letter-spacing: 5px; }
    .otp-inline-form .form-input { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .announce-bar, .announce-bar::after { animation: none; }
    .announce-close, .otp-step-num, .btn-ics, .otp-uri-btn { transition: none; }
}

/* ============================================================
   v7.0 — گزارش خطاها (errors.php) + QR دومرحله‌ای + جزئیات ظاهری
   ============================================================ */

/* ---------- نشان بدون نقطه (رفع نکته v6.6: نقطه اضافی روی badgeهای متنی) ---------- */
.badge-plain::before { display: none; }

/* ---------- ردیف خطای پرتکرار ---------- */
.err-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--bg-soft);
    transition: background .15s ease;
}
.err-top-row:last-child { border-bottom: none; }
.err-top-row:hover { background: var(--primary-softer); }
.err-top-msg {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    color: var(--text-soft);
}

/* ---------- برچسب نوع خطا ---------- */
.err-kind {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.err-kind-err  { background: var(--danger-soft); color: var(--danger); }
.err-kind-warn { background: var(--accent-soft); color: var(--accent); }

/* ---------- جدول خطاها ---------- */
.err-row { transition: background .12s ease; }
.err-row:hover { background: var(--danger-softer, #fef7f7); }
.err-cell { display: flex; align-items: center; gap: 8px; max-width: 420px; }
.err-msg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    direction: ltr;
    text-align: left;
    color: var(--text-soft);
}

/* ---------- QR Code ورود دومرحله‌ای ---------- */
.otp-scan-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--border-strong, var(--border));
    border-radius: 14px;
    background: var(--surface-2, var(--bg-soft));
}
.qr-box {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(4, 120, 87, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-box svg { width: 100%; height: 100%; display: block; animation: qrIn .35s ease both; }
@keyframes qrIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.qr-hint { font-size: .8rem; line-height: 1.9; }
.qr-fallback { font-size: .78rem; text-align: center; padding: 8px; }

/* ---------- میکروتعامل‌ها ---------- */
.stat-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(4, 120, 87, .10);
    border-color: var(--primary-soft);
}
.site-header { position: sticky; top: 0; z-index: 50; transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(4, 120, 87, .10); }
.nav-link { position: relative; }
.nav-link::after {
    content: "";
    position: absolute;
    bottom: 3px;
    inset-inline: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s ease;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.page-hero h1 { position: relative; padding-bottom: 4px; }

/* ---------- حالت شب v7.0 ---------- */
html[data-theme="dark"] .err-row:hover { background: rgba(248, 113, 113, .07); }
html[data-theme="dark"] .err-top-row:hover { background: rgba(52, 211, 153, .06); }
html[data-theme="dark"] .otp-scan-row { background: var(--surface-2, #0d1512); border-color: var(--border); }
html[data-theme="dark"] .qr-box { box-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .stat-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .45); }

/* ---------- واکنش‌گرا v7.0 ---------- */
@media (max-width: 640px) {
    .otp-scan-row { flex-direction: column; align-items: center; text-align: center; }
    .qr-box { width: 160px; height: 160px; }
    .err-cell { max-width: 100%; flex-wrap: wrap; }
    .err-top-msg { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .stat-card, .stat-card:hover { transition: none; transform: none; }
    .nav-link::after { transition: none; }
    .qr-box svg { animation: none; }
}

/* ---------- چاپ v7.0 ---------- */
@media print {
    .filter-bar, .pagination, .btn { display: none !important; }
    .err-msg { white-space: normal; }
}

/* ============================================================
   v7.1 — یادآور زمان‌بندی + ارسال آزمایشی + جزئیات ظاهری
   ============================================================ */

/* ---------- دکمه ارسال آزمایشی (outline کهربایی) ---------- */
.btn-test {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent-soft);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-test:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-test:active { transform: translateY(1px); }

/* ---------- دکمه outline خنثی (ابزارهای ادمین) ---------- */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary-soft);
    transition: background .2s ease, border-color .2s ease;
}
.btn-outline:hover { background: var(--primary-softer); border-color: var(--primary); }

/* ---------- راهنمای یادآور بله‌ای در مودال زمان‌بندی ---------- */
.sched-hint-bell {
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    border-radius: 8px;
    padding: 7px 10px;
    line-height: 1.7;
}

/* ---------- نوار شمارش معکوس توست (۴ ثانیه، هماهنگ با app.js) ---------- */
.toast { position: relative; overflow: hidden; }
.toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: .3;
    transform-origin: right;
    animation: toastTimer 4s linear forwards;
    pointer-events: none;
}
@keyframes toastTimer {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ---------- نوار گرادیانی بالای مودال ---------- */
.modal-box { position: relative; overflow: hidden; }
.modal-box::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: .85;
    z-index: 3;
}

/* ---------- چرخش دکمه بستن مودال هنگام هاور ---------- */
.modal-close { transition: transform .25s ease, background .2s ease, color .2s ease; }
.modal-close:hover { transform: rotate(90deg); }

/* ---------- خط گرادیانی بالای کارت آماری هنگام هاور ---------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s ease;
}
.stat-card:hover::before { transform: scaleX(1); }

/* ---------- حاشیه شروعِ ردیف جدول هنگام هاور (RTL: سمت راست) ---------- */
table tbody tr { transition: background .15s ease, box-shadow .15s ease; }
table tbody tr:hover { box-shadow: inset -3px 0 0 0 var(--primary); }

/* ---------- چیپ‌های legend نمودار ---------- */
.chart-legend span {
    display: inline-flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
}

/* ---------- فوکوس واضح‌تر روی عناصر تعاملی ---------- */
.btn:focus-visible,
.nav-link:focus-visible,
.form-input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

/* ---------- هاور ظریف کارت‌ها ---------- */
.card { transition: box-shadow .25s ease; }
.card:hover { box-shadow: 0 3px 14px rgba(4, 120, 87, .07); }

/* ---------- حالت شب v7.1 ---------- */
html[data-theme="dark"] .btn-test { color: var(--accent); border-color: rgba(217, 119, 6, .35); }
html[data-theme="dark"] .btn-test:hover { background: rgba(217, 119, 6, .12); }
html[data-theme="dark"] .btn-outline { border-color: rgba(4, 120, 87, .4); }
html[data-theme="dark"] .btn-outline:hover { background: rgba(4, 120, 87, .12); }
html[data-theme="dark"] .sched-hint-bell { background: rgba(217, 119, 6, .1); }
html[data-theme="dark"] .toast::after { opacity: .22; }
html[data-theme="dark"] .card:hover { box-shadow: 0 3px 14px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .modal-box::before { opacity: .7; }
html[data-theme="dark"] table tbody tr:hover { box-shadow: inset -3px 0 0 0 var(--primary); }
html[data-theme="dark"] .chart-legend span { background: var(--surface-2, #0d1512); }

/* ---------- واکنش‌گرا v7.1 ---------- */
@media (max-width: 640px) {
    .toast-container { left: 12px; right: 12px; bottom: 14px; }
    .toast { width: 100%; }
    .sched-hint-bell { font-size: .72rem; }
}

/* ---------- حرکت کاهش‌یافته v7.1 ---------- */
@media (prefers-reduced-motion: reduce) {
    .toast::after { animation: none; opacity: .2; }
    .stat-card::before, .modal-close, .btn-test, .btn-outline { transition: none; }
}

/* ---------- چاپ v7.1 ---------- */
@media print {
    .sched-hint-bell, .toast-container, .btn-test, .btn-outline { display: none !important; }
    .modal-box::before, .stat-card::before { display: none; }
}

/* ============================================================
   v7.2 — ناوبری زیرمنو دار (خلوت‌سازی هدر)
   ============================================================ */
.nav-item { position: relative; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 4px; font-family: inherit; cursor: pointer; border: none; background: transparent; }
.dd-arrow { font-size: .68rem; opacity: .65; transition: transform .18s ease; }
.nav-item.open .dd-arrow, .nav-item:hover .dd-arrow, .nav-item:focus-within .dd-arrow { transform: rotate(180deg); }

.nav-dd-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 210;
    animation: ddIn .16s ease;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-item:hover > .nav-dd-menu,
.nav-item:focus-within > .nav-dd-menu,
.nav-item.open > .nav-dd-menu { display: flex; }

.nav-dd-link {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--text-soft);
    font-size: .86rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .13s, color .13s;
}
.nav-dd-link:hover { background: var(--primary-softer); color: var(--primary); }
.nav-dd-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.nav-dd-link.active::before { content: '●'; font-size: .55rem; }

/* هایلایت والد وقتی فرزند فعال است */
.nav-item.has-child-active > .nav-dd-toggle { color: var(--primary); background: var(--primary-softer); }

/* فلش اشاره‌گر زیرمنو */
.nav-dd-menu::before {
    content: '';
    position: absolute;
    top: -5px; right: 20px;
    width: 9px; height: 9px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}

/* موبایل: زیرمنو به‌صورت باز و تودرتو */
@media (max-width: 860px) {
    nav .nav-item { width: 100%; }
    nav .nav-dd-menu {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-radius: 8px;
        background: var(--bg-soft);
        margin: 2px 0 4px 0;
        padding: 4px 6px;
        animation: none;
    }
    nav .nav-dd-menu::before { display: none; }
    nav .nav-item.open > .nav-dd-menu { display: flex; }
    nav .nav-item:hover > .nav-dd-menu:not(.no-hover) { display: flex; }
    .nav-dd-link { padding: 8px 12px; }
}

/* ============================================================
   v7.2 — کارت بانکی زیبا (پرداخت کارت به کارت)
   ============================================================ */
.bank-card {
    position: relative;
    width: 340px;
    max-width: 100%;
    aspect-ratio: 1.586;
    border-radius: 18px;
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(135deg, #064e3b 0%, #047857 55%, #059669 100%);
    box-shadow: 0 16px 36px rgba(4, 120, 87, .35), inset 0 1px 0 rgba(255,255,255,.18);
    overflow: hidden;
    direction: ltr;
    text-align: left;
    user-select: none;
    margin: 0 auto;
}
.bank-card::before {
    /* درخشش هندسی */
    content: '';
    position: absolute;
    top: -55%; left: -25%;
    width: 75%; height: 130%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 65%);
    transform: rotate(18deg);
    pointer-events: none;
}
.bank-card::after {
    content: '';
    position: absolute;
    bottom: -70px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.bank-card .bc-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    position: relative; z-index: 1;
}
.bank-card .bc-bank { font-size: .82rem; font-weight: 700; letter-spacing: .3px; opacity: .95; direction: rtl; }
.bank-card .bc-brand { font-size: .72rem; font-style: italic; font-weight: 600; opacity: .85; letter-spacing: .5px; }
.bank-card .bc-chip {
    position: relative; z-index: 1;
    width: 44px; height: 33px;
    margin: 14px 0 10px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f7d774, #e8b64c 60%, #d9a441);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 -6px 0 rgba(0,0,0,.08);
    position: relative;
}
.bank-card .bc-chip::before {
    content: '';
    position: absolute; inset: 6px 8px;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 4px;
    background:
        linear-gradient(to bottom, transparent 46%, rgba(0,0,0,.22) 46%, rgba(0,0,0,.22) 54%, transparent 54%),
        linear-gradient(to right, transparent 30%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.14) 38%, transparent 38%, transparent 62%, rgba(0,0,0,.14) 62%, rgba(0,0,0,.14) 70%, transparent 70%);
}
.bank-card .bc-num {
    position: relative; z-index: 1;
    font-family: 'Vazirmatn', ui-monospace, monospace;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    white-space: nowrap;
}
.bank-card .bc-num span { opacity: .35; }
.bank-card .bc-foot {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: 14px;
    font-size: .68rem;
}
.bank-card .bc-label { opacity: .6; font-size: .56rem; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 2px; }
.bank-card .bc-holder { font-weight: 600; direction: rtl; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* حالت شب کارت */
html[data-theme="dark"] .bank-card {
    background: linear-gradient(135deg, #022c22 0%, #065f46 60%, #047857 100%);
    box-shadow: 0 16px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
}

/* دکمه کپی شماره کارت */
.btn-copy-card { position: relative; }
.btn-copy-card.copied::after {
    content: 'کپی شد ✓';
    position: absolute;
    top: -30px; left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--on-primary);
    font-size: .7rem;
    padding: 3px 10px;
    border-radius: 999px;
    animation: ddIn .2s ease;
}

/* ============================================================
   v7.2 — انتخاب روش پرداخت (کیف پول)
   ============================================================ */
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.pay-method {
    position: relative;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 16px 14px;
    cursor: pointer;
    text-align: center;
    transition: all .16s ease;
}
.pay-method:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.pay-method.selected { border-color: var(--primary); background: var(--primary-softer); box-shadow: 0 0 0 3px var(--primary-soft); }
.pay-method .pm-ico { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.pay-method .pm-name { font-weight: 700; font-size: .92rem; }
.pay-method .pm-desc { font-size: .74rem; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.pay-method.selected::after {
    content: '✓';
    position: absolute;
    top: -9px; left: -9px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: .78rem;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(4,120,87,.4);
}
.pay-method.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
@media (max-width: 480px) { .pay-methods { grid-template-columns: 1fr; } }

/* بخش کارت به کارت */
.card-pay-wrap { border: 1px dashed var(--primary); border-radius: 16px; padding: 20px; background: var(--primary-softer); margin: 16px 0; }
.card-pay-steps { text-align: right; font-size: .84rem; color: var(--text-soft); line-height: 2; padding-right: 18px; }

/* ردیف روش پرداخت در جدول ادمین */
.method-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.method-bale { background: var(--primary-soft); color: var(--primary); }
.method-card { background: var(--accent-soft); color: var(--accent); }

/* وضعیت کرون‌ها در داشبورد ادمین */
.cron-status-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: .84rem; }
.cron-status-row:last-child { border-bottom: none; }
.cron-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cron-dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.cron-dot.warn { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cron-dot.err { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ============================================================
   v7.5 — جدول‌های واکنش‌گرا (رفع «جدول‌ها به هم ریخته است و
   اسکرول افقی می‌خورد»)
   - همه‌جا: متن‌های بلند (URL/کد تراکنش) می‌شکنند — بیرون نمی‌زنند
   - موبایل ≤ 768px: هر ردیف → یک کارت با برچسب سرستون (data-label
     که app.js به‌صورت خودکار از thead پر می‌کند) — بدون اسکرول افقی
   ============================================================ */

/* شکستن محتوای بلند LTR داخل سلول‌ها و کدها (همه عرض‌ها) */
td code, td[dir="ltr"], .table-wrap code {
    overflow-wrap: anywhere;
    word-break: break-word;
}
code { overflow-wrap: anywhere; }

/* سلول‌های اکشن: دکمه‌ها بپیچند نه اینکه جدول را عریض کنند */
td .btn { white-space: nowrap; }
td { max-width: 340px; }

/* ───────────── موبایل: کارت‌شدن ردیف‌ها ───────────── */
@media (max-width: 768px) {
    .table-wrap {
        overflow-x: visible;
        border: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
    .table-wrap table,
    table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .table-wrap thead,
    thead { display: none; }
    .table-wrap tbody,
    tbody { display: block; }

    .table-wrap tbody tr,
    tbody tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        margin: 0 0 12px;
        padding: 6px 0;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .table-wrap tbody tr:hover,
    tbody tr:hover { background: var(--surface); transform: none; }

    /* زبرا و حالت شب روی کارت‌ها معنا ندارد — حذف می‌شود */
    .table-wrap tbody tr:nth-child(even),
    tbody tr:nth-child(even) { background: var(--surface); }
    html[data-theme="dark"] .table-wrap tbody tr,
    html[data-theme="dark"] tbody tr { background: var(--surface); }
    html[data-theme="dark"] .table-wrap tbody tr:nth-child(even),
    html[data-theme="dark"] tbody tr:nth-child(even) { background: var(--surface); }

    .table-wrap tbody td,
    tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 16px;
        border-bottom: 1px dashed var(--border);
        text-align: left;
        font-size: .84rem;
        max-width: none;
        min-height: 34px;
    }
    .table-wrap tbody td:last-child,
    tbody td:last-child { border-bottom: none; }

    /* برچسب سرستون — سمت راست کارت */
    .table-wrap tbody td::before,
    tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .74rem;
        color: var(--text-soft);
        white-space: nowrap;
        flex-shrink: 0;
        padding-top: 2px;
    }
    /* مقدار — سمت چپ کارت، قابل شکستن */
    .table-wrap tbody td > *,
    tbody td > * { text-align: left; }

    /* سلول‌های خاص: اکشن‌ها/بدون برچسب */
    .table-wrap tbody td[colspan],
    tbody td[colspan] {
        display: block;
        text-align: center;
    }
    .table-wrap tbody td[colspan]::before,
    tbody td[colspan]::before { content: none; }

    /* سلول اکشن‌ها: دکمه‌ها در راستای عرض کارت پخش شوند */
    .table-wrap tbody td .btn,
    tbody td .btn { flex: 0 0 auto; }
    .table-wrap tbody td > div,
    tbody td > div { flex: 1 1 auto; min-width: 0; }

    /* اعداد/متن LTR داخل کارت راست‌چین ادراک نشود */
    .table-wrap tbody td[dir="ltr"],
    tbody td[dir="ltr"] { direction: ltr; text-align: left; }
}

/* در عرض‌های میان‌حد (۷۶۹ تا ۱۰۲۴) جدول‌های خیلی عریض هنوز اسکرول
   افقی دارند اما با هدر چسبان و سایه لبه — عمدی و خوانا */
@media (min-width: 769px) {
    .table-wrap {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}


/* ============================================================
   v7.6 — ضد اسکرول افقی سراسری
   رفع «همه صفحه‌ها در موبایل اسکرول افقی می‌خورند»:
   - هیچ صفحه‌ای دیگر به‌صورت افقی اسکرول نمی‌شود (حتی اگر عنصری
     عریض باشد) — منشاها خودشان می‌شکنند یا کارت می‌شوند
   - sticky هدر حفظ می‌شود (overflow-x:clip روی html، hidden روی body)
   ============================================================ */
html { overflow-x: clip; }
body { overflow-x: hidden; overflow-wrap: break-word; min-width: 0; }
@supports not (overflow-x: clip) {
    html { overflow-x: hidden; }
}
img, video, canvas, iframe { max-width: 100%; }
svg { max-width: 100%; }
main, .container, .card, .card-lg, .stats-grid, .page-hero,
.filter-bar, .grid-2, .site-header .container { min-width: 0; }
.site-header .container { flex-wrap: wrap; }

/* ============================================================
   v7.7 — (۱) رفع پرش زیرمنو در دسکتاپ  (۲) آیکون برند
   ============================================================
   ریشه باگ: منوی زیرمنو ۸px پایین‌تر از دکمه بود (top: calc(100% + 8px))
   و موس هنگام عبور از این فاصله، هاور را از دست می‌داد → منو می‌پرید
   و رسیدن به زیرشاخه‌ها ممکن نبود.
   راه‌حل دو لایه:
     ۱) پل نامرئی روی فاصله ۸px (پس‌زنده هاور هنگام عبور موس)
     ۲) بسته‌شدن با تأخیر ~۳۵۰ms (تحمل مسیر مورب موس) + باز شدن نرم
   ============================================================ */

/* --- آیکون برند (هدر / فوتر / صفحات ورود) --- */
.logo-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none;
    display: block;
    box-shadow: 0 2px 8px rgba(4, 120, 87, .25);
}
.logo-icon:hover { transform: scale(1.06) rotate(-3deg); }
.logo { transition: color .15s; }
.logo .logo-icon { transition: transform .25s ease; }
.site-footer .footer-brand { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.site-footer .footer-brand .logo-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: none;
    opacity: .92;
}

@media (min-width: 861px) {
    /* پل هاور: نوار نامرئی بین دکمه و منو — هاور قطع نمی‌شود */
    .nav-item.has-dd::after {
        content: '';
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        height: 10px;
        z-index: 209;
    }

    /* منوی دسکتاپ: به‌جای display:none، با opacity/visibility
       تا بسته‌شدن با تأخیر ممکن باشد (پرش و چشمک حذف می‌شود) */
    nav .nav-dd-menu {
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        animation: none;
        transition:
            opacity .16s ease .02s,
            transform .16s ease .02s,
            visibility 0s linear .38s;
    }
    .nav-item:hover > .nav-dd-menu,
    .nav-item:focus-within > .nav-dd-menu,
    .nav-item.open > .nav-dd-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav .nav-dd-menu { transition: none; }
}

/* ═══ v7.19 — نوار وضعیت زمان‌بندی صف (queue.php) ═══ */
.sched-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* v7.21 — چیپ ضربان در موبایل به خط بعد برود */
    gap: 8px 12px;
    background: linear-gradient(135deg, var(--primary-soft, #eef4f1), var(--info-soft, #e4eae5));
    border: 1px solid var(--primary-soft, #dfe9e4);
    border-right: 4px solid var(--primary, #2f6f4f);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 14px;
    line-height: 1.9;
}
.sched-bar .sched-ico { font-size: 1.35rem; flex-shrink: 0; }
.sched-bar .sched-text { flex: 1; font-size: .92rem; color: var(--text, #1f2937); }
.sched-bar .sched-text b { color: var(--primary, #2f6f4f); }
.sched-bar .sched-text .sched-wait { color: var(--warning, #b45309); }
.sched-bar .sched-text .sched-ready { color: var(--success, #1e7d4f); }
.sched-bar .sched-text small { display: block; color: var(--muted, #6b7280); font-size: .78rem; }
html[data-theme="dark"] .sched-bar {
    background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .sched-bar .sched-text { color: var(--text, #e5e7eb); }
html[data-theme="dark"] .sched-bar .sched-text small { color: var(--muted, #9ca3af); }

/* ═══ v7.21 — چیپ ضربان «ارسال خودکار» (queue.php sched-bar) ═══ */
.hb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: .74rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: normal;
    line-height: 1.7;
}
.hb-chip.hb-ok {
    background: rgba(16, 185, 129, .12);
    color: #0f766e;
    border: 1px solid rgba(16, 185, 129, .35);
}
.hb-chip.hb-heal {
    background: rgba(245, 158, 11, .12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, .4);
}
.hb-chip.hb-stale {
    background: rgba(239, 68, 68, .1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, .35);
}
html[data-theme="dark"] .hb-chip.hb-ok   { color: #6ee7b7; }
html[data-theme="dark"] .hb-chip.hb-heal { color: #fcd34d; }
html[data-theme="dark"] .hb-chip.hb-stale { color: #fca5a5; }

/* ═══ v7.19 — ردیف تشخیصی ساعت دیتابیس (ادمین) ═══ */
.cron-tz-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px 2px;
    margin-top: 8px;
    border-top: 1px dashed var(--border, #e5e7eb);
    font-size: .82rem;
    color: var(--muted, #6b7280);
}
.cron-tz-row b { color: var(--text, #1f2937); }