/* ═══════════════════════════════════════════════════════════════
   app.css — آزمون‌یار
   تمام استایل‌های پروژه + پشتیبانی Dark Mode
   ═══════════════════════════════════════════════════════════════ */

html, body {
    font-family: 'Vazirmatn','IRANSans','Tahoma',sans-serif;
    background: var(--mud-palette-background, #F8FAFC);
    color: var(--mud-palette-text-primary, #0F172A);
    margin: 0;
}

/* ── MudBlazor theme-aware overrides ── */
/* Cards & Papers — use MudBlazor surface variable */
.mud-card, .mud-paper {
    background: var(--mud-palette-surface) !important;
}

/* These dark-mode overrides are needed because MudBlazor
   components sometimes render inline styles that bypass variables */
.mud-dark .mud-card, .mud-dark .mud-paper,
.mud-dark .mud-card .mud-text, .mud-dark .mud-paper .mud-text {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Typography — let MudBlazor handle it */
.mud-dark .mud-typography-body1,
.mud-dark .mud-typography-body2,
.mud-dark .mud-typography-h6,
.mud-dark .mud-typography-caption,
.mud-dark .mud-text { color: var(--mud-palette-text-primary) !important; }

/* Dividers */
.mud-dark .mud-divider { border-color: var(--mud-palette-divider) !important; }

/* Inputs */
.mud-dark .mud-input { color: var(--mud-palette-text-primary) !important; }
.mud-dark .mud-input-outlined-border { border-color: var(--mud-palette-lines-inputs) !important; }
.mud-dark .mud-input-label { color: var(--mud-palette-text-secondary) !important; }

/* Main background */
.mud-dark .main-content-custom,
.mud-dark html, .mud-dark body { background: var(--mud-palette-background) !important; }

/* Sidebar/Drawer */
.mud-dark .mud-drawer { background: var(--mud-palette-background) !important; }

/* ── AppBar — matching sidebar premium purple ── */
.appbar-custom {
    background: linear-gradient(135deg, #5B2EFF 0%, #6A35FF 35%, #4B1DFF 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(91,46,255,0.15) !important;
}
.appbar-custom .mud-icon-button { color: rgba(255,255,255,0.9) !important; }
.appbar-logo-text { font-size: 1.25rem; font-weight: 900; color: #FFFFFF; }
.appbar-greeting { color: rgba(255,255,255,0.85); }

/* ── Drawer / Sidebar (premium purple design) ── */
.drawer-nav { padding: 0; height: 100%; display: flex; flex-direction: column; overflow-y: auto; }

/* Profile Header — sticky at top */
.dheader {
    background: linear-gradient(135deg, #5B2EFF 0%, #6A35FF 35%, #4B1DFF 100%);
    padding: 28px 20px 20px; text-align: center; flex-shrink: 0;
    border-radius: 0 0 24px 24px; margin-bottom: 4px;
    position: sticky; top: 0; z-index: 5;
}
.davatar {
    margin: 0 auto 10px; width: 72px !important; height: 72px !important;
    border: 3px solid rgba(255,255,255,0.6); box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.dname { font-size: 1.05rem; font-weight: 800; color: #FFFFFF; margin-bottom: 2px; }
.dphone { font-size: 0.78rem; color: rgba(255,255,255,0.7); display: inline-block; }
.dlevel {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px; padding: 3px 12px;
    background: rgba(255,255,255,0.15); border-radius: 20px;
    font-size: 0.72rem; font-weight: 600; color: #FFD700;
}
.dlevel-icon { color: #FFD700 !important; font-size: 14px !important; }
.droles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 8px; }
.drole-badge {
    font-size: 0.65rem; font-weight: 600; padding: 2px 10px;
    border-radius: 12px; background: rgba(255,255,255,0.2); color: #FFFFFF;
}
.dswitch { margin-top: 10px; }
.dswitch-select .mud-input { color: #FFFFFF !important; background: rgba(255,255,255,0.1); border-radius: 8px; }
.dswitch-select .mud-input-label { color: rgba(255,255,255,0.7) !important; }

/* Category Headers */
.dcat-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; cursor: pointer; user-select: none;
    transition: background 0.15s;
}
.dcat-header:hover { background: rgba(95,50,255,0.04); }
.dcat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mud-palette-primary); flex-shrink: 0; }
.dcat-label { flex: 1; font-size: 0.78rem; font-weight: 700; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.dcat-chev { color: var(--mud-palette-text-secondary) !important; }

/* Divider between categories */
.ddivider { border-color: var(--mud-palette-divider) !important; }

/* Active nav link — purple bg + right indicator */
.drawer-nav .mud-nav-link.active {
    background: var(--mud-palette-primary-hover-light) !important; color: var(--mud-palette-primary) !important;
    border-radius: 22px !important; font-weight: 700 !important;
    margin: 2px 10px !important; padding-right: 14px !important;
}
.drawer-nav .mud-nav-link {
    margin: 2px 10px; border-radius: 22px;
    color: var(--mud-palette-text-secondary); font-size: 0.85rem;
}
.drawer-nav .mud-nav-link:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }

/* ── Drawer Dark Mode ── */
.mud-dark .drawer-nav .mud-nav-link { color: var(--mud-palette-text-primary); }
.mud-dark .drawer-nav .mud-nav-link:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }
.mud-dark .drawer-nav .mud-nav-link.active {
    background: var(--mud-palette-primary-hover-light) !important; color: var(--mud-palette-primary) !important;
}
.mud-dark .dcat-label { color: var(--mud-palette-text-secondary); }
.mud-dark .dcat-dot { background: var(--mud-palette-primary); }
.mud-dark .dcat-chev { color: var(--mud-palette-text-secondary) !important; }
.mud-dark .dcat-header:hover { background: var(--mud-palette-action-default-hover); }
.mud-dark .ddivider { border-color: var(--mud-palette-divider) !important; }
.mud-dark .dlogout-area {
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
}

/* ══════════════════════════════════════════════════
   Dark Mode — Theme-Aware Fixes (MudBlazor variables)
   این بخش override های ضروری دارک مد است که از
   متغیرهای MudBlazor استفاده می‌کنند تا با تم حرکت کنند
   ══════════════════════════════════════════════════ */

/* ── Cards & Papers ── */
.mud-dark .mud-card,
.mud-dark .mud-paper { color: var(--mud-palette-text-primary) !important; }

/* ── Profile Page ── */
.mud-dark .view-name { color: var(--mud-palette-text-primary); }
.mud-dark .view-phone { color: var(--mud-palette-text-secondary); }
.mud-dark .view-email { color: var(--mud-palette-primary); }
.mud-dark .detail-item .mud-text { color: var(--mud-palette-text-primary) !important; }
.mud-dark .prof-header .mud-text { color: var(--mud-palette-text-primary) !important; }

/* ── Profile Picture Upload ── */
.mud-dark .picture-preview { border-color: var(--mud-palette-divider); }
.mud-dark .pic-camera-btn { background: var(--mud-palette-primary); color: #FFF; }

/* ── Role chips ── */
.mud-dark .roles-row .mud-chip-outlined { border-color: var(--mud-palette-divider); color: var(--mud-palette-text-primary); }

/* ── Auth Pages / Login ── */
.mud-dark .divider-text .line { background: var(--mud-palette-divider); }
.mud-dark .divider-text .label { color: var(--mud-palette-text-secondary); }
.mud-dark .feat-circle { background: var(--mud-palette-surface); }
.mud-dark .feat-icon { color: var(--mud-palette-primary) !important; }
.mud-dark .feat-label { color: var(--mud-palette-text-secondary); }

/* ── Gradient Buttons (brand colors — keep as-is) ── */
.mud-dark .gradient-btn {
    background: linear-gradient(135deg, var(--mud-palette-primary), #7C4DFF) !important;
    color: #FFF !important;
}

/* ── Premium Card (drawer) ── */
.mud-dark .dprem-btn { background: var(--mud-palette-surface) !important; color: var(--mud-palette-primary) !important; }

/* ── KPI Cards (fn-) ── */
.mud-dark .fn-kpi { background: var(--mud-palette-surface); border-color: var(--mud-palette-divider); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.mud-dark .fn-kpi-lbl { color: var(--mud-palette-text-secondary); }
.mud-dark .fn-kpi-val { color: var(--mud-palette-text-primary); }
.mud-dark .fn-kpi-gold { background: linear-gradient(135deg, #3D2E00, #5C4500); }
.mud-dark .fn-kpi-blue { background: linear-gradient(135deg, #0D2137, #1A3A5C); }
.mud-dark .fn-kpi-green { background: linear-gradient(135deg, #0D2818, #1A4A2E); }
.mud-dark .fn-kpi-purple { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.08)); }

/* ── Chart / Distribution Cards ── */
.mud-dark .fn-chart-card,
.mud-dark .fn-dist-card,
.mud-dark .fn-table-card { background: var(--mud-palette-surface); border-color: var(--mud-palette-divider); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.mud-dark .fn-sec-title { color: var(--mud-palette-text-primary); }
.mud-dark .fn-dist-pct { color: var(--mud-palette-text-primary); }
.mud-dark .fn-dist-bar { background: var(--mud-palette-divider); }

/* ── Banner ── */
.mud-dark .fn-banner { background: linear-gradient(135deg, rgba(34,164,71,0.15), rgba(34,164,71,0.05)); border-color: #1B5E20; }
.mud-dark .fn-banner-text { color: #81C784; }
.mud-dark .fn-banner-title { color: #A5D6A7; }

/* ── Table ── */
.mud-dark .fn-table th { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-divider); }
.mud-dark .fn-table td { border-bottom-color: var(--mud-palette-divider); color: var(--mud-palette-text-primary); }
.mud-dark .fn-td-date { color: var(--mud-palette-text-secondary); }
.mud-dark .fn-status { background: var(--mud-palette-action-default-hover); }
.mud-dark .fn-st-ok { background: rgba(34,164,71,0.2); color: #4ADE80; }
.mud-dark .fn-st-pend { background: rgba(245,182,47,0.2); color: #FBBF24; }

/* ── Global Subjects (gs-) ── */
.mud-dark .gs-tree-panel,
.mud-dark .gs-card { background: var(--mud-palette-surface); border-color: var(--mud-palette-divider); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.mud-dark .gs-tree-hdr { color: var(--mud-palette-text-primary); border-bottom-color: var(--mud-palette-divider); }
.mud-dark .gs-tree-hdr-icon { color: var(--mud-palette-primary) !important; }
.mud-dark .gs-node:hover { background: var(--mud-palette-action-default-hover); }
.mud-dark .gs-node-name { color: var(--mud-palette-text-primary); }
.mud-dark .gs-nact { color: var(--mud-palette-text-secondary); border-color: var(--mud-palette-divider); background: var(--mud-palette-surface); }
.mud-dark .gs-nact:hover { background: var(--mud-palette-primary-hover-light); color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.mud-dark .gs-nact-del { color: #FCA5A5; border-color: #7F1D1D; }
.mud-dark .gs-nact-del:hover { background: rgba(239,68,68,0.15); border-color: #EF4444; }
.mud-dark .gs-dlbl { color: var(--mud-palette-text-secondary); }
.mud-dark .gs-dval { color: var(--mud-palette-text-primary); }
.mud-dark .gs-des-role { color: var(--mud-palette-text-secondary); }
.mud-dark .gs-card-ticon { color: var(--mud-palette-primary) !important; }
.mud-dark .gs-ic-folder { background: #3D2E00; }
.mud-dark .gs-danger-card { border-color: #7F1D1D !important; }

/* ── User Management Table (um-) ── */
.mud-dark .um-table th { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-divider); }
.mud-dark .um-table td { border-bottom-color: var(--mud-palette-divider); }
.mud-dark .um-uemail { color: var(--mud-palette-text-secondary); }
.mud-dark .um-td-date { color: var(--mud-palette-text-secondary); }

/* ── Chart Header Icons ── */
.mud-dark .chart-header-icon { color: var(--mud-palette-primary) !important; }

/* ── Success Alert ── */
.mud-dark .an-success-alert { background: linear-gradient(135deg, rgba(34,164,71,0.15), rgba(34,164,71,0.05)); border-color: #1B5E20; }
.mud-dark .success-title { color: #A5D6A7; }
.mud-dark .success-text { color: #81C784; }

/* ── Insight Banner ── */
.mud-dark .an-insight-banner { background: linear-gradient(135deg, rgba(77,141,255,0.12), rgba(45,108,255,0.05)); border-color: #1A3A6C; }
.mud-dark .insight-title { color: #90CAF9; }
.mud-dark .insight-desc { color: #64B5F6; }
.mud-dark .insight-btn { background: linear-gradient(90deg, #3B6CFF, #2D5AEE); }

/* ── Heatmap / Analytics Cards ── */
.mud-dark .an-heatmap-card { background: var(--mud-palette-surface); }
.mud-dark .an-kpi-card { background: var(--mud-palette-surface); border-color: var(--mud-palette-divider); }

/* ── Responsive dark mode adjustments ── */
.mud-dark .profile-loading .mud-text { color: var(--mud-palette-text-secondary); }

/* ── Dropdown selects in dark drawer ── */
.mud-dark .dswitch-select .mud-input { color: var(--mud-palette-text-primary) !important; background: var(--mud-palette-action-default-hover); }

/* ── General dark mode text fixes ── */
.mud-dark .mud-text-secondary { color: var(--mud-palette-text-secondary) !important; }

/* ── Table borders & rows (global) ── */
.mud-dark .fn-table td { border-bottom-color: var(--mud-palette-divider) !important; }
.mud-dark .gs-node:hover { background: var(--mud-palette-action-default-hover) !important; }
.mud-dark .wl-table td { border-bottom-color: var(--mud-palette-divider) !important; color: var(--mud-palette-text-primary) !important; }
.mud-dark .wl-table th { color: var(--mud-palette-primary) !important; border-bottom-color: var(--mud-palette-divider) !important; }
.mud-dark .sp-table td { border-bottom-color: var(--mud-palette-divider) !important; }
.mud-dark .sp-table th { color: var(--mud-palette-primary) !important; border-bottom-color: var(--mud-palette-divider) !important; }
.mud-dark .sm-tree-node:hover { background: var(--mud-palette-action-default-hover) !important; }
.mud-dark .hlp-faq-open { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; }

/* ── Any residual light backgrounds ── */
.mud-dark .an-kpi-card { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; }
.mud-dark .an-heatmap-card { background: var(--mud-palette-surface) !important; }
.mud-dark .fn-kpi { background: var(--mud-palette-surface) !important; }
.mud-dark .fn-chart-card,
.mud-dark .fn-dist-card,
.mud-dark .fn-table-card { background: var(--mud-palette-surface) !important; }
.mud-dark .gs-tree-panel,
.mud-dark .gs-card { background: var(--mud-palette-surface) !important; }
.mud-dark .an-success-alert { background: linear-gradient(135deg, rgba(34,164,71,0.12), rgba(34,164,71,0.04)) !important; border-color: #1B5E20 !important; }
.mud-dark .an-insight-banner { background: linear-gradient(135deg, rgba(77,141,255,0.1), rgba(45,108,255,0.04)) !important; border-color: #1A3A6C !important; }
.mud-dark .fn-banner { background: linear-gradient(135deg, rgba(34,164,71,0.12), rgba(34,164,71,0.04)) !important; border-color: #1B5E20 !important; }

/* ── White/light icons on gradient backgrounds stay visible ── */
.mud-dark .gs-ic-folder { background: #3D2E00 !important; }
.mud-dark .gs-ic-leaf { background: rgba(34,164,71,0.15) !important; }
.mud-dark .gs-des-avatar { color: #FFF !important; }

/* ── Section headers and title text ── */
.mud-dark .fn-sec-title,
.mud-dark .gs-card-title,
.mud-dark .an-header-title { color: var(--mud-palette-text-primary) !important; }

/* Premium Card */
.dprem-card {
    margin: 12px 12px 0; padding: 16px; border-radius: 20px;
    background: linear-gradient(135deg, #5B2EFF, #7C4DFF);
    text-align: center; flex-shrink: 0;
    box-shadow: 0 8px 30px rgba(91,46,255,0.3);
}
.dprem-icon {
    color: #FFD700 !important; font-size: 32px !important; margin-bottom: 6px;
}
.dprem-title {
    display: block; font-size: 0.82rem; font-weight: 700;
    color: #FFFFFF; margin-bottom: 10px;
}
.dprem-btn {
    background: var(--mud-palette-surface) !important; color: var(--mud-palette-primary) !important;
    font-weight: 700 !important; border-radius: 12px !important;
    font-size: 0.78rem !important; text-transform: none !important;
}

/* Logout — sticky at bottom */
.dlogout-area {
    margin-top: 8px; padding: 8px 12px 12px; flex-shrink: 0;
    position: sticky; bottom: 0; z-index: 5;
    background: var(--mud-palette-surface);
}

/* ── Main Content ── */
.main-content-custom { background: var(--mud-palette-background); min-height: 100vh; }
.layout-body { padding: 24px 28px; }

/* ── Auth Pages: styled inside LoginLayout + LoginContainer components ── */

/* ── Login Layout (LoginLayout.razor) ── */
.login-layout {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-background) 0%, var(--mud-palette-background-grey) 100%);
    font-family: 'Vazirmatn','IRANSans','Tahoma',sans-serif;
    position: relative; transition: background 0.3s;
}
.login-layout.login-dark {
    background: linear-gradient(135deg, var(--mud-palette-background) 0%, #0F172A 100%);
}
.login-theme-toggle { position: absolute; top: 12px; left: 12px; z-index: 10; }

/* ── Login Container — Premium split-panel card ── */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
    background: var(--mud-palette-surface); border-radius: 28px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(90,65,150,0.1), 0 4px 12px rgba(0,0,0,0.04);
    max-width: 960px; width: 100%;
}
.login-form-panel {
    padding: 48px 40px 32px; display: flex; flex-direction: column;
    background: var(--mud-palette-surface);
}
.lang-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.form-zone { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Features strip */
.features-strip { margin-top: 32px; }
.divider-text { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.divider-text .line { flex: 1; height: 1px; background: var(--mud-palette-divider); }
.divider-text .label { font-size: 0.75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; font-weight: 500; }
.features-row { display: flex; justify-content: center; gap: 20px; }
.feat-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.feat-circle {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--mud-palette-background-grey); display: flex; align-items: center; justify-content: center;
}
.feat-icon { color: var(--mud-palette-primary) !important; font-size: 20px !important; }
.feat-label { font-size: 0.7rem; color: var(--mud-palette-text-secondary); font-weight: 500; }

/* Brand (purple) panel */
.login-brand {
    background: linear-gradient(135deg, #5B2EFF 0%, #6A35FF 35%, #4B1DFF 100%);
    padding: 48px 40px; display: flex; flex-direction: column; justify-content: center;
    color: #FFFFFF;
}
.brand-logo { text-align: center; margin-bottom: 24px; }
.brand-hero { margin-bottom: 24px; text-align: center; }
.brand-divider { height: 1px; background: rgba(255,255,255,0.2); margin-bottom: 24px; }
.stats-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.stat-box { text-align: center; }
.stat-num { display: block; font-size: 1.2rem; font-weight: 800; color: #FFD700; }
.stat-lbl { display: block; font-size: 0.65rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.stat-sep { color: rgba(255,255,255,0.3); }
.brand-why { text-align: center; }
.why-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.why-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: rgba(255,255,255,0.85); }
.why-icon { color: #FFD700 !important; font-size: 16px !important; }

/* Dark mode login */
.login-dark .login-card { background: var(--mud-palette-background); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.login-dark .login-form-panel { background: var(--mud-palette-background); }
.login-dark .features-strip .line { background: var(--mud-palette-divider); }
.login-dark .features-strip .label { color: var(--mud-palette-text-secondary); }
.login-dark .feat-circle { background: var(--mud-palette-surface); }
.login-dark .feat-icon { color: var(--mud-palette-primary) !important; }
.login-dark .feat-label { color: var(--mud-palette-text-secondary); }
.login-dark .divider-text .line { background: var(--mud-palette-divider); }

/* ── Buttons ── */
.gradient-btn {
    background: linear-gradient(135deg, #5B2EFF, #6A35FF) !important;
    color: #FFFFFF !important; font-weight: 700 !important;
    border-radius: 12px !important;
}

/* ── Profile Page ── */
.profile-page { max-width: 600px; margin: 0 auto; }
.profile-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }
.prof-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.prof-card {
    padding: 24px; border-radius: 16px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}
.view-row { display: flex; align-items: center; gap: 20px; }
.view-info { display: flex; flex-direction: column; gap: 4px; }
.view-name { font-size: 1.25rem; font-weight: 800; margin: 0; }
.view-phone { font-size: 0.85rem; color: var(--mud-palette-text-secondary); text-align: right; }
.view-email { font-size: 0.85rem; color: var(--mud-palette-primary); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.edit-fields { display: flex; flex-direction: column; gap: 12px; }
.edit-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.roles-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Profile Picture Upload ── */
.picture-upload-section { margin-bottom: 4px; }
.picture-preview-wrapper {
    position: relative; display: inline-block;
    cursor: pointer; user-select: none;
}
.picture-preview-wrapper:hover .pic-camera-btn { transform: scale(1.12); background: var(--mud-palette-primary-darken); }
.pic-disabled { pointer-events: none; opacity: 0.7; cursor: not-allowed; }
.picture-preview {
    width: 100px; height: 100px; border-radius: 50%;
    border: 2px dashed var(--mud-palette-divider);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; flex-shrink: 0;
    transition: border-color 0.2s, opacity 0.2s;
}
.picture-preview-wrapper:hover .picture-preview { border-color: var(--mud-palette-primary); }
.picture-preview-uploading { opacity: 0.5; }
.picture-preview-img { width: 100%; height: 100%; object-fit: cover; }
.picture-preview-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.picture-upload-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}

/* ── دکمه دایره‌ای دوربین — پایین سمت چپ تصویر ── */
.pic-camera-btn {
    position: absolute; bottom: 0; left: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #FFFFFF; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: transform 0.2s, background 0.2s;
    border: 2px solid var(--mud-palette-surface);
    z-index: 2;
}

/* ── پراگرس بار آپلود ── */
.upload-progress-bar { border-radius: 6px; height: 6px !important; }

/* ── File input hidden ── */
.file-input-hidden { display: none !important; width: 0; height: 0; position: absolute; }

/* ── Loading ── */
.auth-loading { display: flex; align-items: center; justify-content: center; min-height: 60vh; flex-direction: column; gap: 12px; }

/* ── Responsive ── */
@media (max-width: 960px) { .layout-body { padding: 16px 12px; } }


/* ═══════════ Extracted from Razor files ═══════════ */
/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Components\AuthGuard.razor ── */
.auth-guard-loading {
        display: flex; align-items: center; justify-content: center;
        min-height: 100vh;
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Components\ProfileCard.razor ── */
/* ================================================================
       FONT IMPORT
       ================================================================ */
    /* ================================================================
       CONTAINER — 3-column Flexbox, RTL
       ================================================================ */
    .profile-row {
        display: flex;
        gap: 18px;
        font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    }

    /* ================================================================
       SHARED CARD
       ================================================================ */
    .pr-card {
        background: var(--mud-palette-surface);
        border-radius: 14px;
        padding: 18px 20px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
    }

    /* ================================================================
       1. PROFILE CARD  (rightmost, flex: 1.4)
       ================================================================ */
    .pr-card-profile {
        flex: 1.4;
        min-width: 0;
    }

    .pr-avatar-wrapper {
        flex-shrink: 0;
        margin-left: 14px;
    }

    .pr-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6C5CE7, #9B59B6);
        color: #FFFFFF;
        font-size: 1.7rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pr-profile-body {
        flex: 1;
        min-width: 0;
    }

    .pr-name-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .pr-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        white-space: nowrap;
    }

    .pr-level-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--mud-palette-primary-hover, #F0EFFF);
        color: var(--mud-palette-primary, #6C5CE7);
        font-size: 0.72rem;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .pr-badge-star {
        flex-shrink: 0;
    }

    .pr-xp-label {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
        margin-bottom: 7px;
    }

    .pr-xp-track {
        width: 100%;
        height: 9px;
        background: var(--mud-palette-divider);
        border-radius: 5px;
        overflow: hidden;
    }

    .pr-xp-fill {
        height: 100%;
        width: 62%;
        border-radius: 5px;
        background: linear-gradient(90deg, #6C5CE7 0%, #4A90E2 100%);
        transition: width 0.5s ease;
    }

    /* ================================================================
       2. STATS CARD  (center, flex: 0.8)
       ================================================================ */
    .pr-card-stats {
        flex: 0.8;
        justify-content: space-evenly;
    }

    .pr-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .pr-stat-icon {
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pr-stat-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        white-space: nowrap;
    }

    .pr-stat-label {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        white-space: nowrap;
    }

    .pr-stat-divider {
        width: 1px;
        height: 52px;
        background: var(--mud-palette-divider);
        flex-shrink: 0;
    }

    /* ================================================================
       3. ACHIEVEMENTS CARD  (leftmost, flex: 1)
       ================================================================ */
    .pr-card-achievements {
        flex: 1;
        flex-direction: column;
        align-items: stretch;
    }

    .pr-achv-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .pr-achv-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .pr-achv-link {
        font-size: 0.75rem;
        color: var(--mud-palette-primary, #6C5CE7);
        text-decoration: none;
        font-weight: 500;
    }

    .pr-achv-link:hover {
        text-decoration: underline;
    }

    /* --- Medals row --- */
    .pr-achv-medals {
        display: flex;
        justify-content: center;
        gap: 18px;
    }

    .pr-medal-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
    }

    /* --- Hexagon base --- */
    .pr-medal-hex {
        width: 54px;
        height: 54px;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .pr-medal-hex:hover {
        transform: scale(1.08);
    }

    /* --- Hexagon colour variants --- */
    .pr-hex-purple {
        background: linear-gradient(135deg, #6C5CE7 0%, #9B59B6 100%);
    }

    .pr-hex-orange {
        background: linear-gradient(135deg, #E74C3C 0%, #F39C12 100%);
    }

    .pr-hex-blue {
        background: linear-gradient(135deg, #3498DB 0%, #00B4D8 100%);
    }

    /* --- Medal labels --- */
    .pr-medal-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        text-align: center;
        white-space: nowrap;
    }

    /* ================================================================
       RESPONSIVE
       ================================================================ */
    @@media (max-width: 1024px) {
        .profile-row {
            flex-wrap: wrap;
        }
        .pr-card-profile {
            flex: 1 1 100%;
        }
        .pr-card-stats {
            flex: 1 1 45%;
        }
        .pr-card-achievements {
            flex: 1 1 45%;
        }
    }

    @@media (max-width: 640px) {
        .profile-row {
            flex-direction: column;
            gap: 10px;
        }
        .pr-card {
            padding: 14px;
        }
        .pr-card-stats,
        .pr-card-achievements {
            flex: 1 1 auto;
        }
        .pr-achv-medals {
            gap: 12px;
        }
        .pr-medal-hex {
            width: 44px;
            height: 44px;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Layout\LoginLayout.razor ── */
.login-layout {
        min-height: 100vh;
        background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%);
        font-family: 'Vazirmatn','IRANSans','Tahoma',sans-serif;
        position: relative; transition: background 0.3s ease;
    }
    .login-layout.login-dark {
        background: linear-gradient(135deg, #020617 0%, #0F172A 100%);
    }
    .login-theme-toggle { position: absolute; top: 12px; left: 12px; z-index: 10; }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Layout\NavMenu.razor ── */
/* ===== Sidebar Container ===== */
    .sidebar-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: var(--mud-palette-surface);
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* ===== Logo ===== */
    .sidebar-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 24px 20px 16px 20px;
        flex-shrink: 0;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .logo-text {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        white-space: nowrap;
    }

    /* ===== Navigation ===== */
    .sidebar-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #D1D5DB transparent;
    }

    .sidebar-nav::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background-color: #D1D5DB;
        border-radius: 4px;
    }

    /* ===== Nav Items ===== */
    .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 10px;
        text-decoration: none;
        color: var(--mud-palette-text-primary);
        font-size: 0.95rem;
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
        position: relative;
        white-space: nowrap;
        cursor: pointer;
    }

    .nav-item:hover {
        background-color: #F0EFFF;
        color: var(--mud-palette-primary, #6C5CE7);
    }

    .nav-item:hover .nav-icon {
        color: var(--mud-palette-primary, #6C5CE7);
    }

    .nav-item.active {
        background-color: var(--mud-palette-primary, #6C5CE7);
        color: #FFFFFF;
        box-shadow: 0 2px 8px rgba(108, 92, 231, 0.35);
    }

    .nav-item.active .nav-icon {
        color: #FFFFFF;
    }

    .nav-item.active .nav-badge {
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-primary, #6C5CE7);
    }

    /* ===== Nav Icon ===== */
    .nav-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        color: #666666;
        transition: color 0.2s ease;
    }

    /* ===== Nav Label ===== */
    .nav-label {
        flex: 1;
        line-height: 1.4;
    }

    /* ===== Notification Badge ===== */
    .nav-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 11px;
        background-color: var(--mud-palette-primary, #6C5CE7);
        color: #FFFFFF;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        flex-shrink: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* ===== Footer / Bottom Card ===== */
    .sidebar-footer {
        flex-shrink: 0;
        padding: 12px;
    }

    .motivation-card {
        position: relative;
        background-color: #F0F3FF;
        border-radius: 14px;
        padding: 20px 16px 24px 16px;
        text-align: center;
        overflow: hidden;
    }

    .motivation-stars-top {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }

    .motivation-text {
        color: var(--mud-palette-primary, #6C5CE7);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.6;
        margin: 0 0 12px 0;
    }

    .motivation-stars-bottom {
        display: flex;
        justify-content: flex-start;
        padding-left: 4px;
    }

    /* ===== Responsive ===== */
    @@media (max-width: 640px) {
        .sidebar-container {
            height: auto;
        }

        .sidebar-logo {
            padding: 16px;
        }

        .nav-item {
            padding: 10px 12px;
            font-size: 0.85rem;
        }

        .motivation-card {
            padding: 16px 12px 20px 12px;
        }
    }

    @@media (min-width: 641px) {
        .sidebar-container {
            min-width: 260px;
            max-width: 260px;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Admin\Analytics.razor ── */
.analytics-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1050px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .analytics-page *, .analytics-page *::before, .analytics-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .an-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .an-header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .an-header-icon-wrap {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .an-header-icon {
        color: #6A35FF !important;
        font-size: 26px !important;
    }

    .an-header-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .an-header-title {
        font-size: 1.35rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .an-header-sub {
        font-size: 0.84rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
    }

    .an-header-right {
        display: flex;
        align-items: center;
    }

    .an-date-range {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 12px;
        padding: 8px 16px;
        font-size: 0.8rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .an-date-icon {
        color: var(--mud-palette-text-secondary) !important;
    }

    /* ═══════════ کارت‌های KPI ═══════════ */
    .an-kpi-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 22px;
    }

    .an-kpi-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .kpi-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kpi-icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
    }

    .kpi-icon-xp { background: linear-gradient(135deg, #6A35FF, #7A4DFF); }
    .kpi-icon-badge { background: linear-gradient(135deg, #FDBB11, #F59E0B); }
    .kpi-icon-streak { background: linear-gradient(135deg, #FF7A2D, #FF5A5A); }

    .kpi-growth {
        font-size: 0.78rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 12px;
    }

    .kpi-growth.up {
        color: var(--mud-palette-success);
        background: rgba(46,190,79,0.1);
    }

    .kpi-value {
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        line-height: 1;
    }

    .kpi-total {
        font-size: 1rem;
        color: var(--mud-palette-text-disabled);
        font-weight: 600;
    }

    .kpi-label {
        font-size: 0.8rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .kpi-mini-bar {
        height: 6px;
        background: #ECE7FF;
        border-radius: 3px;
        overflow: hidden;
    }

    .kpi-mini-fill {
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #6A35FF, #7A4DFF);
    }

    .badge-fill {
        background: linear-gradient(90deg, #FDBB11, #F59E0B) !important;
    }

    .kpi-streak-dots {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }

    .streak-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .streak-filled { background: #FF7A2D; }
    .streak-empty { background: var(--mud-palette-divider); }

    /* ═══════════ نمودارها ═══════════ */
    .an-charts-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 22px;
    }

    .an-chart-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .chart-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 20px 0;
    }

    .chart-header-icon {
        color: #6A35FF !important;
    }

    .chart-title {
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .chart-body {
        padding: 10px 8px 16px;
    }

    .xp-chart-svg {
        width: 100%;
        height: auto;
    }

    .radar-chart-svg {
        width: 100%;
        height: auto;
        max-height: 320px;
    }

    .heatmap-legend {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-right: auto;
    }

    .legend-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-disabled);
    }

    .legend-cell {
        width: 12px;
        height: 12px;
        border-radius: 3px;
    }

    /* ═══════════ هشدار موفقیت ═══════════ */
    .an-success-alert {
        background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9);
        border-radius: 20px;
        border: 1px solid #A5D6A7;
        padding: 16px 22px;
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 22px;
    }

    .success-icon-wrap {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--mud-palette-success);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .success-icon {
        color: #FFFFFF !important;
    }

    .success-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }

    .success-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: #1B5E20;
    }

    .success-text {
        font-size: 0.82rem;
        color: #2E7D32;
        font-weight: 500;
    }

    .success-celebrate {
        color: #FDBB11 !important;
    }

    /* ═══════════ بنر اشتراک ═══════════ */
    .an-insight-banner {
        background: linear-gradient(135deg, var(--mud-palette-info-light), #BBDEFB);
        border-radius: 20px;
        border: 1px solid #90CAF9;
        padding: 18px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 22px;
    }

    .insight-left {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1;
        min-width: 0;
    }

    .insight-icon-wrap {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4D8DFF, #2D6CFF);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .insight-diamond {
        color: #FFFFFF !important;
    }

    .insight-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .insight-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: #0D47A1;
    }

    .insight-desc {
        font-size: 0.78rem;
        color: #1565C0;
        line-height: 1.6;
    }

    .insight-btn {
        background: linear-gradient(90deg, #4D8DFF, #2D6CFF);
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.2s;
    }

    .insight-btn:hover { opacity: 0.9; }

    /* ═══════════ Heatmap ═══════════ */
    .an-heatmap-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 16px 20px 20px;
        margin-bottom: 22px;
    }

    .an-heatmap-card .chart-card-header {
        padding: 0 0 14px;
    }

    .heatmap-grid {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .heatmap-row-labels {
        display: grid;
        grid-template-columns: 60px repeat(7, 1fr);
        gap: 4px;
        text-align: center;
        font-size: 0.7rem;
        color: var(--mud-palette-text-disabled);
        font-weight: 500;
        padding-right: 0;
    }

    .heatmap-week {
        display: grid;
        grid-template-columns: 60px repeat(7, 1fr);
        gap: 4px;
        align-items: center;
    }

    .heatmap-week-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
        text-align: right;
        padding-left: 6px;
    }

    .heatmap-cell {
        aspect-ratio: 1;
        border-radius: 5px;
        transition: transform 0.15s;
    }

    .heatmap-cell:hover {
        transform: scale(1.2);
        outline: 1.5px solid #6A35FF;
    }

    .hm-0 { background: var(--mud-palette-primary-hover, #F5F2FD); }
    .hm-1 { background: rgba(139,92,246,0.15); }
    .hm-2 { background: #A084E0; }
    .hm-3 { background: #7A4DFF; }
    .hm-4 { background: #5E2FFF; }

    /* ═══════════ CTA پایین ═══════════ */
    .an-bottom-cta {
        position: sticky;
        bottom: 16px;
        z-index: 10;
    }

    .an-cta-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        border-radius: 20px;
        padding: 16px 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .an-cta-inner:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(94,47,255,0.35);
    }

    .an-cta-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .an-cta-icon {
        color: #FFFFFF !important;
        font-size: 32px !important;
    }

    .an-cta-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .an-cta-title {
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 700;
    }

    .an-cta-sub {
        color: rgba(255,255,255,0.7);
        font-size: 0.76rem;
    }

    .an-cta-arrow {
        color: rgba(255,255,255,0.8) !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .an-kpi-row {
            grid-template-columns: repeat(2, 1fr);
        }

        .an-charts-row {
            grid-template-columns: 1fr;
        }

        .an-kpi-card {
            padding: 16px 18px;
        }

        .kpi-value {
            font-size: 1.4rem;
        }

        .heatmap-grid {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .an-insight-banner {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .insight-left {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .insight-btn {
            align-self: center;
        }
    }

    @@media (max-width: 600px) {
        .an-kpi-row {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .an-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .an-header-title {
            font-size: 1.15rem;
        }

        .an-success-alert {
            flex-direction: column;
            text-align: center;
            padding: 14px 16px;
        }

        .an-cta-inner {
            padding: 14px 18px;
            border-radius: 16px;
        }

        .an-cta-title {
            font-size: 0.88rem;
        }

        .heatmap-cell {
            border-radius: 3px;
        }

        .heatmap-row-labels,
        .heatmap-week {
            grid-template-columns: 45px repeat(7, 1fr);
            gap: 2px;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Admin\Financial.razor ── */
.fn-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .fn-page *,.fn-page *::before,.fn-page *::after{box-sizing:border-box}

    .fn-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .fn-top-left{display:flex;align-items:center;gap:14px}
    .fn-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .fn-top-svg{color:#FFF!important}
    .fn-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.fn-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}

    .fn-segmented{display:flex;gap:0;border: 1px solid var(--mud-palette-divider);border-radius:16px;overflow:hidden}
    .fn-seg-btn{padding:9px 20px;border:none;background: var(--mud-palette-surface);font-family:inherit;font-size:.82rem;font-weight:600;color: var(--mud-palette-text-secondary);cursor:pointer}.fn-seg-btn:hover{background:#F5F2FD}
    .fn-seg-on{background:linear-gradient(135deg,#6D3BFF,#4A3DFF)!important;color:#FFF!important}

    /* KPI */
    .fn-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
    .fn-kpi{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:18px 20px;display:flex;align-items:center;gap:14px}
    .fn-kpi-icon{width:44px;height:44px;min-width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .fn-kpi-purple{background:linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))}.fn-kpi-purple .mud-icon-root{color:#6D3BFF!important}
    .fn-kpi-gold{background:linear-gradient(135deg,#FFF8E1,#FFE082)}.fn-kpi-gold .mud-icon-root{color:#F5B62F!important}
    .fn-kpi-blue{background:linear-gradient(135deg,var(--mud-palette-info-light),#BBDEFB)}.fn-kpi-blue .mud-icon-root{color:#3792FF!important}
    .fn-kpi-green{background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)}.fn-kpi-green .mud-icon-root{color:#22A447!important}
    .fn-kpi>div{flex:1;display:flex;flex-direction:column;gap:2px}.fn-kpi-lbl{font-size:.72rem;color:#7B7B96}.fn-kpi-val{font-size:1.1rem;font-weight:900;color:#1B1B1F}.fn-kpi-val small{font-size:.66rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .fn-kpi-chg{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px}.fn-kpi-chg.up{color:#22A447;background:rgba(34,164,71,.1)}

    /* ردیف میانی */
    .fn-mid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
    .fn-chart-card,.fn-dist-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .fn-sec-title{font-size:.9rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 16px}
    .fn-chart-svg{width:100%;height:auto}
    .fn-chart-labels{display:flex;justify-content:space-around;margin-top:6px;font-size:.68rem;color:var(--mud-palette-text-disabled)}

    .fn-dist-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.8rem}.fn-dist-left{display:flex;align-items:center;gap:8px}.fn-dist-dot{width:10px;height:10px;border-radius:50%}.fn-dist-pct{font-weight:700;color:#1B1B1F}
    .fn-dist-bar{height:8px;background: var(--mud-palette-divider);border-radius:4px;overflow:hidden;margin-bottom:14px}.fn-dist-bar:last-child{margin-bottom:0}
    .fn-dist-fill{height:100%;border-radius:4px}

    /* بنر */
    .fn-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9);border-radius:20px;padding:16px 22px;margin-bottom:20px;border:1px solid #A5D6A7}
    .fn-banner-icon{color:#22A447!important}.fn-banner-text{display:flex;flex-direction:column;gap:2px;font-size:.82rem;color:#2E7D32}
    .fn-banner-title{font-weight:800;font-size:.9rem}

    /* جدول */
    .fn-table-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .fn-tbl-scroll{overflow-x:auto}.fn-table{width:100%;min-width:500px;border-collapse:collapse}
    .fn-table th{text-align:right;padding:12px 16px;font-size:.72rem;font-weight:700;color:#6D3BFF;border-bottom:1px solid #F0ECFA}
    .fn-table td{padding:12px 16px;font-size:.8rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F8F6FC}
    .fn-td-date{font-size:.74rem;color:#7B7B96}.fn-td-desc{font-weight:600}
    .fn-td-amt{font-weight:700}.fn-amt-in{color:#22A447}.fn-amt-out{color:var(--mud-palette-error)}
    .fn-status{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .fn-st-ok{background:var(--mud-palette-success-light);color:#22A447}.fn-st-pend{background:var(--mud-palette-warning-light);color:#F5B62F}.fn-st-fail{background:var(--mud-palette-error-light);color:var(--mud-palette-error)}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.fn-kpi-row{grid-template-columns:repeat(2,1fr)}.fn-mid{grid-template-columns:1fr}}
    @@media(max-width:600px){.fn-kpi-row{grid-template-columns:1fr}.fn-top{flex-direction:column;align-items:flex-start}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Admin\GlobalSubjects.razor ── */
.gs-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1150px;margin:0 auto;padding:0 4px 40px}
    .gs-page *,.gs-page *::before,.gs-page *::after{box-sizing:border-box}
    .mobile-only{display:none}

    .gs-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
    .gs-top-left{display:flex;align-items:center;gap:14px}
    .gs-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .gs-top-svg{color:#FFF!important}
    .gs-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.gs-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .gs-btn-primary{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}

    .gs-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}

    /* درخت */
    .gs-tree-panel{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);overflow:hidden}
    .gs-tree-hdr{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom: 1px solid var(--mud-palette-divider);font-size:.88rem;font-weight:700;color:#1B1B1F}
    .gs-tree-hdr-icon{color:#6D3BFF!important}.gs-tree-stats{font-size:.7rem;color: var(--mud-palette-text-secondary);font-weight:500;margin-right:auto;display:flex;align-items:center;gap:8px}.gs-dot{width:4px;height:4px;border-radius:50%;background:var(--mud-palette-text-disabled)}
    .gs-tree{padding:8px 0}
    .gs-node{display:flex;align-items:center;gap:8px;padding:9px 20px;cursor:pointer;transition:background .15s;position:relative}.gs-node:hover{background:#F8F6FC}
    .gs-conn{position:absolute;right:14px;top:50%;width:12px;border-top:1.5px dashed var(--mud-palette-divider)}
    .gs-exp{width:24px;height:24px;border-radius:6px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-background);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:transform .2s;flex-shrink:0}.gs-exp-on{transform:rotate(-90deg)}.gs-exp:disabled{opacity:.25;cursor:default}
    .gs-exp-spc{width:24px;height:24px;flex-shrink:0}
    .gs-node-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .gs-ic-folder{background:#FFF8E1}.gs-ic-folder .mud-icon-root{color:#F5B62F!important}
    .gs-ic-leaf{background:var(--mud-palette-success-light)}.gs-ic-leaf .mud-icon-root{color:#22A447!important}
    .gs-node-name{font-size:.84rem;font-weight:600;color: var(--mud-palette-text-primary);flex:1}
    .gs-node-cnt{font-size:.68rem;color:var(--mud-palette-text-disabled);font-weight:600;min-width:30px;text-align:center}
    .gs-node-acts{display:flex;gap:4px}
    .gs-nact{width:28px;height:28px;border-radius:7px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}.gs-nact:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:#6D3BFF;border-color:#6D3BFF}
    .gs-nact-del{color:#FF4D4F;border-color:#FFCDD2}.gs-nact-del:hover{background:var(--mud-palette-error-light);border-color:#FF4D4F}

    /* کارت‌های راست */
    .gs-right-col{display:flex;flex-direction:column;gap:14px;position:sticky;top:24px}
    .gs-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .gs-card-title{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 14px}
    .gs-card-ticon{color:#6D3BFF!important}

    .gs-detail-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom: 1px solid var(--mud-palette-divider);font-size:.8rem}
    .gs-detail-item:last-child{border-bottom:none}.gs-dlbl{color:#7B7B96}.gs-dval{font-weight:600;color:#1B1B1F}

    /* طراحان */
    .gs-des-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom: 1px solid var(--mud-palette-divider);cursor:pointer}.gs-des-row:last-child{border-bottom:none}
    .gs-chk{width:18px;height:18px;accent-color:#6D3BFF;cursor:pointer}
    .gs-des-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:.68rem;font-weight:700;flex-shrink:0}
    .gs-des-name{font-size:.82rem;font-weight:600;color: var(--mud-palette-text-primary);flex:1}.gs-des-role{font-size:.7rem;color:#7B7B96}

    /* خطر */
    .gs-danger-card{border-color:#FFCDD2!important}
    .gs-danger-icon{color:#FF4D4F!important}
    .gs-danger-desc{font-size:.76rem;color: var(--mud-palette-text-secondary);line-height:1.6;margin:0 0 12px}
    .gs-btn-danger{background:#FF4D4F;color:#FFF;border:none;border-radius:14px;padding:10px 20px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;width:100%}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){
        .gs-body{grid-template-columns:1fr}.gs-right-col{position:static}
        .mobile-only{display:flex;align-items:center;gap:6px;position:fixed;bottom:24px;left:24px;z-index:100;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:50px;padding:14px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(109,59,255,.3)}
    }
    @@media(max-width:600px){.gs-node{padding:8px 12px;gap:6px}.gs-node-name{font-size:.78rem}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Admin\Revenue.razor ── */
.rv-page{
        font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width:1050px;margin:0 auto;padding:0 4px 40px;
    }
    .rv-page *,.rv-page *::before,.rv-page *::after{box-sizing:border-box}

    /* ─── هدر ─── */
    .rv-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
    .rv-header-left{display:flex;align-items:center;gap:14px}
    .rv-coin-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#FFF8E1,#FFE082);display:flex;align-items:center;justify-content:center}
    .rv-coin-svg{color:#F59E0B!important}
    .rv-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}
    .rv-sub{font-size:.82rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .rv-export-btn{display:flex;align-items:center;gap:6px;background:#D9EDFF;color:#1B6BA0;border:none;border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
    .rv-exp-icon{color:#1B6BA0!important}

    /* ─── KPI ─── */
    .rv-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
    .rv-kpi-card{background: var(--mud-palette-surface);border-radius:28px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 24px;display:flex;flex-direction:column;gap:14px}
    .kpi-icon-bg{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .kpi-bg-purple{background:linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))}.kpi-bg-purple .kpi-icn{color:#5B2EFF!important}
    .kpi-bg-green{background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)}.kpi-bg-green .kpi-icn{color:var(--mud-palette-success)!important}
    .kpi-bg-blue{background:linear-gradient(135deg,var(--mud-palette-info-light),#BBDEFB)}.kpi-bg-blue .kpi-icn{color:var(--mud-palette-info)!important}
    .kpi-info{display:flex;flex-direction:column;gap:4px}
    .kpi-lbl{font-size:.76rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .kpi-val{font-size:1.2rem;font-weight:900;color:#1B1B1F}
    .kpi-val small{font-size:.68rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .kpi-growth{font-size:.72rem;font-weight:700}.kpi-growth.up{color:var(--mud-palette-success)}
    .rv-withdraw-btn{background:linear-gradient(135deg,#6C3BFF,#4D1FFF);color:#FFF;border:none;border-radius:14px;padding:11px 20px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;align-self:flex-start;box-shadow:0 6px 16px rgba(91,46,255,.2)}

    /* ─── نمودار ─── */
    .rv-chart-card{background: var(--mud-palette-surface);border-radius:28px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px;margin-bottom:20px}
    .rv-section-title{font-size:.95rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 18px}
    .rv-bars-wrap{display:flex;align-items:flex-end;justify-content:space-around;height:180px;gap:20px;padding-top:18px}
    .rv-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
    .rv-bar-val{font-size:.68rem;color: var(--mud-palette-text-secondary);font-weight:600}
    .rv-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
    .rv-bar-fill{width:80%;max-width:52px;border-radius:12px 12px 0 0;min-height:6px}
    .rv-bar-lbl{font-size:.7rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .rv-chart-grid-lines{display:flex;flex-direction:column;position:absolute;left:10px;top:40px;gap:36px;font-size:.64rem;color:var(--mud-palette-divider)}

    /* ─── جدول ─── */
    .rv-table-card{background: var(--mud-palette-surface);border-radius:28px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .rv-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
    .rv-table{width:100%;min-width:700px;border-collapse:collapse}
    .rv-table th{text-align:right;padding:14px 16px;font-size:.74rem;font-weight:700;color: var(--mud-palette-primary, #5B2EFF);border-bottom:1px solid var(--mud-palette-divider);white-space:nowrap}
    .rv-table td{padding:14px 16px;font-size:.82rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F5F2FD}
    .rv-table tbody tr:hover{background:var(--mud-palette-background-hover)}
    .td-date{font-size:.76rem;color:#7B7B96}.td-exam{font-weight:600}.td-amount{font-weight:700}
    .amount-in{color:var(--mud-palette-success)}.amount-out{color:var(--mud-palette-error)}
    .rv-type-tag{display:inline-block;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px}
    .type-in{background:var(--mud-palette-success-light);color:var(--mud-palette-success)}.type-out{background:var(--mud-palette-error-light);color:var(--mud-palette-error)}
    .rv-row-act{background: var(--mud-palette-surface);color: var(--mud-palette-primary, #5B2EFF);border:1px solid var(--mud-palette-divider);border-radius:10px;padding:5px 14px;font-family:inherit;font-size:.74rem;font-weight:600;cursor:pointer}
    .rv-row-act:hover{background:#F5F2FD}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:850px){
        .rv-kpi-row{grid-template-columns:1fr}
        .rv-header{flex-direction:column;align-items:flex-start}
        .rv-export-btn{align-self:flex-start}
    }
    @@media(max-width:600px){
        .rv-title{font-size:1.05rem}
        .rv-kpi-card{padding:16px 18px;border-radius:22px}
        .rv-table-card{padding:16px 14px}
        .rv-bars-wrap{gap:10px;height:140px}
        .rv-bar-fill{max-width:36px}
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Admin\Users.razor ── */
.um-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1150px;margin:0 auto;padding:0 4px 40px}
    .um-page *,.um-page *::before,.um-page *::after{box-sizing:border-box}

    .um-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
    .um-top-left{display:flex;align-items:center;gap:14px}
    .um-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .um-top-svg{color:#FFF!important}
    .um-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.um-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .um-btn-primary{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}
    .um-btn-sm{font-size:.76rem!important;padding:8px 16px!important;border-radius:12px!important}
    .um-btn-outline{display:flex;align-items:center;gap:6px;background: var(--mud-palette-surface);color:#6D3BFF;border:1px solid var(--mud-palette-divider);border-radius:12px;padding:8px 16px;font-family:inherit;font-size:.76rem;font-weight:600;cursor:pointer}

    /* فیلترها */
    .um-filters{display:flex;gap:10px;margin-bottom:18px}
    .um-search-wrap{flex:1;position:relative}.um-search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;z-index:2}
    .um-search{width:100%;height:48px;background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:16px;padding:0 42px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none}.um-search:focus{border-color:#6D3BFF}
    .um-sel-wrap{position:relative;min-width:150px}.um-select{width:100%;height:48px;background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:16px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none;appearance:none;cursor:pointer}.um-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}

    /* بدنه */
    .um-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
    .um-table-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);overflow:hidden}
    .um-tbl-scroll{overflow-x:auto}
    .um-table{width:100%;min-width:600px;border-collapse:collapse}
    .um-table th{text-align:right;padding:14px 16px;font-size:.72rem;font-weight:700;color:#6D3BFF;background: var(--mud-palette-background);border-bottom:1px solid #F0ECFA}
    .um-table td{padding:12px 16px;font-size:.82rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F5F2FD}
    .um-table tbody tr{cursor:pointer;transition:background .15s}.um-table tbody tr:hover{background:var(--mud-palette-background-hover)}
    .um-row-sel{background:var(--mud-palette-primary-hover-light)!important}

    .um-user-cell{display:flex;align-items:center;gap:10px}
    .um-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:.8rem;font-weight:800;flex-shrink:0}
    .um-uname{display:block;font-weight:600;font-size:.84rem}.um-uemail{display:block;font-size:.7rem;color:#7B7B96}
    .um-role,.um-status{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .role-student{background:var(--mud-palette-info-light);color:#3792FF}.role-teacher{background: var(--mud-palette-divider, var(--mud-palette-divider-light));color:#6D3BFF}.role-admin{background:var(--mud-palette-warning-light);color:#F5B62F}
    .status-active{background:var(--mud-palette-success-light);color:#22A447}.status-inactive{background:var(--mud-palette-error-light);color:#F04444}
    .um-td-date{font-size:.74rem;color: var(--mud-palette-text-secondary);white-space:nowrap}
    .um-td-acts{display:flex;gap:4px}
    .um-act{width:32px;height:32px;border-radius:8px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}.um-act:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:#6D3BFF;border-color:#6D3BFF}
    .um-act-del{color:#F04444;border-color:#FFCDD2}.um-act-del:hover{background:var(--mud-palette-error-light);border-color:#F04444}

    /* صفحه‌بندی */
    .um-pag{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid #F0ECFA;flex-wrap:wrap;gap:8px}
    .um-pag-info{font-size:.74rem;color:#7B7B96}.um-pag-btns{display:flex;gap:6px}
    .um-pag-btn{background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:10px;padding:6px 14px;font-family:inherit;font-size:.76rem;font-weight:600;color:#6D3BFF;cursor:pointer}.um-pag-btn:disabled{opacity:.35;cursor:not-allowed}
    .um-pag-num{width:34px;height:34px;border-radius:10px;border: 1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.78rem;font-weight:700;color: var(--mud-palette-text-secondary);cursor:pointer}.pag-on{background:linear-gradient(135deg,#6D3BFF,#4A3DFF)!important;color:#FFF!important;border-color:transparent!important}

    /* جزئیات */
    .um-detail-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:24px}
    .um-detail-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:1.5rem;font-weight:800}
    .um-detail-name{font-size:1.05rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0}
    .um-detail-info{display:flex;flex-direction:column;gap:10px;width:100%}
    .um-detail-row{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#7B7B96}.um-detail-row .mud-icon-root{color:var(--mud-palette-text-secondary)!important}
    .um-detail-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.um-body{grid-template-columns:1fr}.um-detail-card{position:static}}
    @@media(max-width:600px){.um-filters{flex-direction:column}.um-sel-wrap{min-width:unset}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Dashboard\CreatorDashboard.razor ── */
.creator-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .creator-page *, .creator-page *::before, .creator-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .cr-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
    }

    .cr-header-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .cr-title {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .cr-subtitle {
        font-size: 0.88rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        font-weight: 500;
    }

    .cr-header-right {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
    }

    .cr-notif-btn {
        color: #6A35FF !important;
    }

    .cr-header-badge-dot {
        position: absolute;
        top: 8px;
        right: 52px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #FF4D4D;
        border: 2px solid #F7F5FC;
        z-index: 1;
    }

    .cr-avatar-mini {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
    }

    /* ═══════════ KPI گرید ═══════════ */
    .cr-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 22px;
    }

    .cr-kpi-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .cr-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .kpi-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kpi-icon-bg {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kpi-icon-exams { background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2)); }
    .kpi-icon-questions { background: linear-gradient(135deg, var(--mud-palette-info-light), #BBDEFB); }
    .kpi-icon-students { background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9); }
    .kpi-icon-avg { background: linear-gradient(135deg, var(--mud-palette-warning-light), #FFE0B2); }

    .kpi-icon-exams .kpi-icon { color: #6A35FF !important; }
    .kpi-icon-questions .kpi-icon { color: #4D8DFF !important; }
    .kpi-icon-students .kpi-icon { color: var(--mud-palette-success) !important; }
    .kpi-icon-avg .kpi-icon { color: var(--mud-palette-warning) !important; }

    .kpi-growth-badge {
        font-size: 0.72rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
    }

    .kpi-growth-badge.up {
        background: rgba(46,190,79,0.1);
        color: var(--mud-palette-success);
    }

    .kpi-number {
        font-size: 1.6rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        line-height: 1;
    }

    .kpi-label-text {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .kpi-bottom-bar {
        height: 5px;
        background: var(--mud-palette-divider);
        border-radius: 3px;
        overflow: hidden;
    }

    .kpi-bottom-fill {
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
    }

    /* ═══════════ ردیف میانی: کیف پول + نمودار ═══════════ */
    .cr-mid-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 22px;
    }

    .cr-wallet-card,
    .cr-chart-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 24px;
    }

    .cr-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0 0 16px;
    }

    .section-title-icon {
        color: #6A35FF !important;
    }

    /* کیف پول */
    .wallet-cards-row {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
    }

    .wallet-mini-card {
        flex: 1;
        background: var(--mud-palette-background);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border: 1px solid var(--mud-palette-divider);
    }

    .wallet-mini-card.accent {
        background: linear-gradient(135deg, var(--mud-palette-divider-light), #F5F0FF);
    }

    .wallet-mini-label {
        font-size: 0.74rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .wallet-mini-amount {
        font-size: 1rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .wallet-mini-amount small {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .wallet-btns-row {
        display: flex;
        gap: 10px;
    }

    .wallet-btn {
        flex: 1;
        border: none;
        border-radius: 14px;
        padding: 12px 16px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        transition: opacity 0.2s;
    }

    .wallet-btn:hover {
        opacity: 0.9;
    }

    .withdraw-btn {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
    }

    .details-btn {
        background: #D9EDFF;
        color: #1B6BA0;
    }

    /* نمودار میله‌ای */
    .bar-chart-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 180px;
        gap: 12px;
        padding-top: 20px;
    }

    .bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        height: 100%;
    }

    .bar-val-tag {
        font-size: 0.64rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
        white-space: nowrap;
    }

    .bar-fill-wrap {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .bar-fill {
        width: 80%;
        max-width: 48px;
        border-radius: 10px 10px 0 0;
        min-height: 8px;
        transition: height 0.4s ease;
    }

    .bar-month-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    /* ═══════════ جدول ═══════════ */
    .cr-table-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 24px;
        margin-bottom: 22px;
    }

    .cr-table-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .cr-table-header-row .cr-section-title {
        margin-bottom: 0;
    }

    .cr-table-view-all {
        font-size: 0.78rem;
        color: var(--mud-palette-primary, #6A35FF);
        text-decoration: none;
        font-weight: 600;
    }

    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }

    .cr-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cr-table {
        width: 100%;
        border-collapse: collapse;
    }

    .cr-table th {
        text-align: right;
        padding: 14px 16px;
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
        border-bottom: 1px solid var(--mud-palette-divider);
        white-space: nowrap;
    }

    .cr-table td {
        padding: 14px 16px;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        border-bottom: 1px solid var(--mud-palette-divider);
        white-space: nowrap;
    }

    .cr-table tbody tr:hover {
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .td-title {
        font-weight: 600;
    }

    .td-income {
        font-weight: 700;
        color: var(--mud-palette-success);
    }

    .score-badge {
        display: inline-block;
        font-size: 0.76rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
    }

    .score-high {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .score-mid {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .score-low {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error);
    }

    .table-action-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary, #6A35FF);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
        padding: 6px 16px;
        font-family: inherit;
        font-size: 0.76rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .table-action-btn:hover {
        background: var(--mud-palette-primary-hover, #F5F2FD);
        border-color: var(--mud-palette-primary, #6A35FF);
    }

    /* ═══════════ CTA پایین ═══════════ */
    .cr-bottom-ctas {
        display: flex;
        gap: 14px;
    }

    .cta-primary-btn,
    .cta-secondary-btn,
    .cta-outline-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 24px;
        border-radius: 18px;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        flex: 1;
    }

    .cta-primary-btn {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        box-shadow: 0 6px 18px rgba(94,47,255,0.2);
    }

    .cta-primary-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(94,47,255,0.3);
    }

    .cta-secondary-btn {
        background: #D9EDFF;
        color: #1B6BA0;
    }

    .cta-secondary-btn:hover {
        background: #C4E2FF;
    }

    .cta-outline-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary, #6A35FF);
        border: 1px solid var(--mud-palette-divider);
    }

    .cta-outline-btn:hover {
        background: var(--mud-palette-primary-hover, #F5F2FD);
    }

    .cta-btn-icon {
        font-size: 18px !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .cr-kpi-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .cr-mid-row {
            grid-template-columns: 1fr;
        }

        .desktop-only {
            display: none !important;
        }

        .mobile-only {
            display: block;
        }

        .cr-bottom-ctas {
            flex-direction: column;
        }
    }

    @@media (max-width: 600px) {
        .cr-kpi-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .cr-kpi-card {
            padding: 14px;
            border-radius: 22px;
        }

        .kpi-number {
            font-size: 1.3rem;
        }

        .cr-title {
            font-size: 1.2rem;
        }

        .cr-table-card {
            padding: 16px 14px;
        }

        .wallet-cards-row {
            flex-direction: column;
        }

        .bar-chart-wrap {
            height: 140px;
            gap: 8px;
        }

        .bar-fill {
            max-width: 36px;
        }
    }

    /* ═══════════ نسخه موبایل جدول ═══════════ */
    .cr-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-exam-item {
        background: var(--mud-palette-background);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: 1px solid var(--mud-palette-divider);
    }

    .mob-exam-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mob-exam-title {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .mob-exam-meta {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        font-size: 0.74rem;
        color: var(--mud-palette-text-secondary);
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Dashboard\Dashboard.razor ── */
.dashboard {
        font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
        background: var(--mud-palette-background);
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px 20px;
        min-height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .dashboard *, .dashboard *::before, .dashboard *::after { box-sizing: border-box; }
    .dash-card { background: var(--mud-palette-surface); border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    .dash-stack { display: flex; flex-direction: column; gap: 20px; height: 100%; }
    .card-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .card-title-icon { color: var(--mud-palette-primary, #6C5CE7); font-size: 16px; width: 20px; text-align: center; }
    .card-heading { font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .btn { border: none; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
    .btn:hover { opacity: 0.9; }
    .btn-gradient { background: linear-gradient(135deg, #6C5CE7, #00B4D8); color: #FFFFFF; padding: 9px 24px; font-size: 0.85rem; width: fit-content; }
    .btn-purple-sm { background: #6C5CE7; color: #FFFFFF; padding: 5px 16px; font-size: 0.72rem; border-radius: 6px; }
    .btn-review-start { background: linear-gradient(135deg, #6C5CE7, #00B4D8); color: #FFFFFF; padding: 9px 24px; font-size: 0.85rem; width: 100%; border: none; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
    .btn-review-start:hover { opacity: 0.9; }

    .dash-top-card { display: flex; align-items: stretch; gap: 0; min-height: 130px; }
    .top-sec { display: flex; align-items: center; }
    .top-sec-profile { flex: 1.5; gap: 14px; padding-left: 20px; border-left: 1px solid #E9ECEF; min-width: 0; }
    .top-avatar { width: 70px; height: 70px; min-width: 70px; border-radius: 50%; background: #6C5CE7; color: #FFFFFF; font-size: 2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .top-profile-info { flex: 1; min-width: 0; }
    .top-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .top-name { font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .top-badge { display: inline-flex; align-items: center; gap: 5px; background: #6C5CE7; color: #FFFFFF; font-size: 0.68rem; font-weight: 600; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }
    .top-badge-star { color: #F4B400; font-size: 9px; }
    .top-xp-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 0.78rem; color: var(--mud-palette-primary, #6C5CE7); font-weight: 500; }
    .top-xp-pct { font-weight: 700; }
    .top-xp-track { height: 8px; background: var(--mud-palette-divider); border-radius: 4px; overflow: hidden; }
    .top-xp-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6C5CE7, #4A90E2); transition: width 0.5s ease; }
    .top-sec-stats { flex: 0.8; justify-content: space-evenly; padding: 0 14px; }
    .top-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .top-stat-num { font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary); margin-top: 4px; }
    .top-stat-lbl { font-size: 0.68rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
    .top-stat-divider { width: 1px; height: 54px; background: var(--mud-palette-divider); flex-shrink: 0; }
    .top-sec-achv { flex: 1.1; flex-direction: column; align-items: stretch; padding-right: 20px; border-right: 1px solid #E9ECEF; }
    .top-achv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; width: 100%; }
    .top-achv-title { font-size: 0.9rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .top-achv-link { font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; font-weight: 500; }
    .top-achv-link:hover { text-decoration: underline; }
    .top-achv-medals { display: flex; justify-content: center; gap: 18px; }
    .top-medal-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .top-medal-hex { width: 52px; height: 52px; clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s; }
    .top-medal-hex:hover { transform: scale(1.08); }
    .top-hex-purple { background: linear-gradient(135deg, #6C5CE7, #9B59B6); }
    .top-hex-orange { background: linear-gradient(135deg, #E74C3C, #F39C12); }
    .top-hex-blue   { background: linear-gradient(135deg, #3498DB, #00B4D8); }
    .top-medal-lbl { font-size: 0.65rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

    .dash-card-mission { display: flex; flex-direction: column; gap: 10px; }
    .mission-desc { font-size: 0.88rem; color: var(--mud-palette-text-primary); margin: 0; }
    .mission-xp-line { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
    .dash-card-review { display: flex; flex-direction: column; gap: 10px; }
    .review-count-row { display: flex; align-items: baseline; gap: 10px; }
    .review-big-num { font-size: 3rem; font-weight: 800; color: var(--mud-palette-primary, #6C5CE7); line-height: 1; }
    .review-sub { font-size: 0.85rem; color: var(--mud-palette-text-secondary); font-weight: 500; }
    .review-list { display: flex; flex-direction: column; gap: 8px; }
    .review-box { display: flex; align-items: center; gap: 10px; background: var(--mud-palette-background); border-radius: 8px; padding: 9px 14px; }
    .review-box-text { font-size: 0.82rem; color: var(--mud-palette-primary, #6C5CE7); font-weight: 500; }
    .r-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

    .dash-card-weak { display: flex; flex-direction: column; }
    .weak-grid { display: flex; gap: 10px; flex: 1; }
    .weak-box { flex: 1; background: var(--mud-palette-background); border-radius: 8px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
    .weak-close { position: absolute; top: 6px; left: 8px; cursor: pointer; color: #999; font-size: 11px; }
    .weak-subject { font-size: 0.82rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .weak-bar-track { width: 90%; height: 5px; background: var(--mud-palette-divider); border-radius: 3px; overflow: hidden; }
    .weak-bar-fill { height: 100%; width: 35%; border-radius: 3px; background: #FF8C00; }
    .weak-pct { font-size: 0.68rem; color: var(--mud-palette-text-secondary); }

    .dash-card-msgs { display: flex; flex-direction: column; }
    .msg-view-all { margin-right: auto; font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; font-weight: 500; white-space: nowrap; }
    .msg-view-all:hover { text-decoration: underline; }
    .msg-list { display: flex; flex-direction: column; gap: 18px; flex: 1; }
    .msg-item { display: flex; gap: 10px; }
    .msg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
    .msg-body { display: flex; flex-direction: column; gap: 5px; }
    .msg-text { font-size: 0.84rem; color: var(--mud-palette-text-primary); line-height: 1.7; }
    .msg-time { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

    .dash-card-progress { display: flex; flex-direction: column; }
    .prog-label { font-size: 0.9rem; font-weight: 700; color: var(--mud-palette-text-primary); margin-bottom: 8px; }
    .prog-track { height: 8px; background: var(--mud-palette-divider); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
    .prog-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6C5CE7, #4A90E2); transition: width 0.5s ease; }
    .prog-pct { font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-primary, #6C5CE7); text-align: left; }

    .dash-card-lb { display: flex; flex-direction: column; }
    .lb-full-link { font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; margin-bottom: 12px; display: flex; align-items: center; gap: 4px; }
    .lb-full-link:hover { text-decoration: underline; }
    .lb-items { display: flex; flex-direction: column; gap: 8px; }
    .lb-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--mud-palette-divider); border-radius: 8px; }
    .lb-rank-circle { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: #6C5CE7; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
    .lb-name { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--mud-palette-text-primary); }
    .lb-xp-val { font-size: 0.75rem; font-weight: 700; color: var(--mud-palette-primary, #6C5CE7); white-space: nowrap; }

    .dash-card-cal { display: flex; flex-direction: column; }
    .cal-view-all { font-size: 0.7rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; margin-bottom: 8px; }
    .cal-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
    .cal-arrow { background: none; border: 1px solid #D1D5DB; border-radius: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: var(--mud-palette-text-secondary); font-family: 'Vazirmatn', sans-serif; }
    .cal-month { font-size: 0.82rem; font-weight: 600; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin-bottom: 12px; }
    .cal-hdr { font-size: 0.7rem; color: #999; padding: 4px 0; }
    .cal-grid > span { font-size: 0.75rem; padding: 5px 0; border-radius: 6px; }
    .cal-today { background: #6C5CE7; color: #FFFFFF; font-weight: 700; }
    .cal-events { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
    .cal-ev-title { font-size: 0.78rem; font-weight: 700; color: var(--mud-palette-text-primary); margin-bottom: 2px; }
    .cal-ev-item { display: flex; gap: 8px; align-items: flex-start; }
    .cal-ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
    .cal-ev-name { font-size: 0.75rem; color: var(--mud-palette-text-primary); }
    .cal-ev-time { font-size: 0.68rem; color: #999; }
    .cal-all-link { font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; }
    .cal-all-link:hover { text-decoration: underline; }

    @@media (max-width: 768px) {
        .dash-top-card { flex-wrap: wrap; }
        .top-sec-profile { flex: 1 1 100%; border-left: none; padding-left: 0; border-bottom: 1px solid var(--mud-palette-divider); padding-bottom: 12px; }
        .top-sec-stats { flex: 1 1 100%; padding: 12px 0; }
        .top-sec-achv { flex: 1 1 100%; border-right: none; padding-right: 0; border-top: 1px solid #E9ECEF; padding-top: 12px; }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Dashboard\PremiumDashboard.razor ── */
/* ═══════════ بیس صفحه داشبورد ═══════════ */
    .dashboard-page-content {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
    }

    .dashboard-page-content *, .dashboard-page-content *::before, .dashboard-page-content *::after {
        box-sizing: border-box;
    }

    .premium-container {
        padding: 0 4px 80px;
    }

    /* ─── کارت هدر پروفایل ─── */
    .profile-header-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        padding: 28px 32px;
        display: flex;
        align-items: center;
        gap: 28px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        margin-bottom: 24px;
        border: 1px solid var(--mud-palette-divider);
    }

    .profile-left-section {
        display: flex;
        align-items: center;
        gap: 18px;
        flex: 2;
        min-width: 0;
    }

    .profile-avatar-circle {
        width: 64px;
        height: 64px;
        min-width: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7A3FF2 0%, #5825E8 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(122,63,242,0.3);
    }

    .avatar-inner-text {
        font-size: 1.6rem;
        font-weight: 800;
        color: #FFFFFF;
    }

    .profile-info-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

    .profile-name-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .profile-display-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .profile-level-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: linear-gradient(135deg, var(--mud-palette-primary-hover, #F5F2FD), var(--mud-palette-divider, var(--mud-palette-divider-light)));
        color: var(--mud-palette-primary, #6A35FF);
        padding: 3px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .level-star {
        color: #FFBE0B !important;
        font-size: 14px !important;
    }

    .xp-section-wrap {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .xp-label-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .xp-label-pct {
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
    }

    .xp-track {
        height: 8px;
        background: #E8E4FF;
        border-radius: 10px;
        overflow: hidden;
    }

    .xp-fill-bar {
        height: 100%;
        width: 62%;
        border-radius: 10px;
        background: linear-gradient(90deg, #612BFF 0%, #3EA6FF 100%);
    }

    /* بخش آمار وسط */
    .profile-stats-section {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1;
        justify-content: center;
    }

    .stat-mini-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .stat-mini-num {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .stat-mini-lbl {
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
    }

    .stat-flame-icon .flame-glow {
        color: #FF5A5A !important;
    }

    .medal-gold-icon {
        color: #FFBE0B !important;
    }

    .stat-divider-vert {
        width: 1px;
        height: 48px;
        background: #E8E4FF;
        flex-shrink: 0;
    }

    /* بخش دستاوردها */
    .profile-achievements-section {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .achv-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .achv-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .achv-view-all {
        font-size: 0.75rem;
        color: var(--mud-palette-primary, #6A35FF);
        text-decoration: none;
        font-weight: 600;
    }

    .achv-hexagons {
        display: flex;
        gap: 16px;
        justify-content: center;
    }

    /* مدال‌های شش‌ضلعی */
    .hex-badge {
        width: 52px;
        height: 52px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        transition: transform 0.25s ease;
    }

    .hex-badge:hover {
        transform: translateY(-3px);
    }

    .hex-gold {
        background: linear-gradient(180deg, #FFCE54 0%, #F59E0B 100%);
    }

    .hex-fire {
        background: linear-gradient(180deg, #FF914D 0%, #FF4D4D 100%);
    }

    .hex-blue {
        background: linear-gradient(180deg, #44B8FF 0%, #2D7CFF 100%);
    }

    .hex-inner-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ کارت‌های پریمیوم ═══════════ */
    .cards-col-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .premium-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: 1px solid var(--mud-palette-divider);
        overflow: hidden;
    }

    .premium-card-inner {
        padding: 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .card-top-icon-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .card-icon-circle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
    }

    .icon-circle-purple {
        background: linear-gradient(135deg, #7A3FF2, #5825E8);
    }

    .icon-circle-pink {
        background: linear-gradient(135deg, #FF5A7A, #E04070);
    }

    .icon-circle-orange {
        background: linear-gradient(135deg, var(--mud-palette-warning), #E07030);
    }

    .icon-circle-blue {
        background: linear-gradient(135deg, #44B8FF, #2D7CFF);
    }

    .icon-circle-green {
        background: linear-gradient(135deg, #38D9A9, #20B88A);
    }

    .card-section-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    /* ─── ماموریت روزانه ─── */
    .mission-card-desc {
        font-size: 0.84rem;
        color: #4A4A5A;
        line-height: 1.7;
        margin: 0;
    }

    .mission-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mission-xp-bonus {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        background: var(--mud-palette-primary-hover, #F5F2FD);
        padding: 3px 10px;
        border-radius: 8px;
    }

    .btn-cta-blue {
        background: linear-gradient(90deg, #3EA6FF, #2D7CFF);
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 12px 20px;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
        text-align: center;
    }

    .btn-cta-blue:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    /* ─── مرور هوشمند ─── */
    .review-big-number-area {
        display: flex;
        align-items: baseline;
        gap: 14px;
    }

    .review-huge-num {
        font-size: 3.5rem;
        font-weight: 900;
        background: linear-gradient(135deg, #6A35FF, #7E4CFF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }

    .review-sub-text {
        font-size: 0.85rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .review-topic-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .review-topic-row {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--mud-palette-background);
        padding: 10px 14px;
        border-radius: 12px;
    }

    .review-topic-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .review-topic-name {
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        flex: 1;
        font-weight: 500;
    }

    .review-topic-chip {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        background: #EAE8F0;
        padding: 3px 10px;
        border-radius: 8px;
        font-weight: 500;
        white-space: nowrap;
    }

    .btn-cta-review {
        background: linear-gradient(90deg, #6A35FF, #7E4CFF);
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 12px 20px;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
        text-align: center;
    }

    .btn-cta-review:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    /* ─── نقاط ضعف ─── */
    .weak-mini-cards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .weak-mini-item {
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: relative;
    }

    .weak-mini-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .weak-mini-subject {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .weak-close-btn {
        background: none;
        border: none;
        color: var(--mud-palette-text-disabled);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 2px;
    }

    .weak-mini-pct {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .weak-mini-bar {
        height: 5px;
        background: #EAE6F5;
        border-radius: 3px;
        overflow: hidden;
    }

    .weak-mini-fill {
        height: 100%;
        border-radius: 3px;
    }

    .btn-weak-practice {
        background: #6A35FF;
        color: #FFFFFF;
        border: none;
        border-radius: 8px;
        padding: 6px 14px;
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
        align-self: flex-start;
        transition: opacity 0.2s;
    }

    .btn-weak-practice:hover {
        opacity: 0.9;
    }

    /* ─── پیام‌های سیستمی ─── */
    .msg-timeline {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .msg-timeline-item {
        display: flex;
        gap: 10px;
    }

    .msg-timeline-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 5px;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
    }

    .msg-timeline-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .msg-timeline-text {
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        line-height: 1.7;
        margin: 0;
    }

    .msg-timeline-time {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
    }

    /* ─── تقویم ─── */
    .cal-nav-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .cal-arrow-btn {
        color: var(--mud-palette-text-secondary) !important;
    }

    .cal-month-label {
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        min-width: 80px;
        text-align: center;
    }

    .cal-mini-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        text-align: center;
    }

    .cal-mini-hdr {
        font-size: 0.68rem;
        color: var(--mud-palette-text-disabled);
        padding: 3px 0;
        font-weight: 500;
    }

    .cal-mini-day {
        font-size: 0.73rem;
        color: var(--mud-palette-text-primary);
        padding: 6px 0;
        border-radius: 8px;
    }

    .cal-mini-today {
        background: linear-gradient(135deg, #6A35FF, #7E4CFF);
        color: #FFFFFF;
        font-weight: 700;
    }

    .cal-events-mini {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cal-events-mini-title {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .cal-event-mini-row {
        display: flex;
        gap: 8px;
    }

    .cal-event-mini-strip {
        width: 3px;
        min-width: 3px;
        border-radius: 2px;
    }

    .cal-event-mini-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .cal-event-mini-name {
        font-size: 0.76rem;
        color: var(--mud-palette-text-primary);
        font-weight: 500;
    }

    .cal-event-mini-time {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
    }

    .cal-view-all-link {
        font-size: 0.72rem;
        color: var(--mud-palette-primary, #6A35FF);
        text-decoration: none;
        font-weight: 600;
    }

    /* ─── پیشرفت هفتگی ─── */
    .progress-big-pct {
        font-size: 2.4rem;
        font-weight: 900;
        background: linear-gradient(135deg, #6A35FF, #3EA6FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }

    .progress-track-wide {
        height: 10px;
        background: #E8E4FF;
        border-radius: 10px;
        overflow: hidden;
    }

    .progress-fill-gradient {
        height: 100%;
        width: 72%;
        border-radius: 10px;
        background: linear-gradient(90deg, #612BFF 0%, #3EA6FF 100%);
    }

    .progress-caption {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    /* ─── رقبا ─── */
    .lb-mini-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .lb-mini-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 12px;
    }

    .lb-mini-rank {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7A3FF2, #5825E8);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .lb-mini-name {
        flex: 1;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .lb-mini-xp {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        white-space: nowrap;
    }

    .btn-cta-outline {
        background: transparent;
        color: var(--mud-palette-primary, #6A35FF);
        border: 1.5px solid #D4C8F0;
        border-radius: 12px;
        padding: 10px 20px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
    }

    .btn-cta-outline:hover {
        background: var(--mud-palette-primary-hover, #F5F2FD);
        border-color: var(--mud-palette-primary, #6A35FF);
    }

    /* ═══════════ دکمه CTA پایین ═══════════ */
    .bottom-cta-bar {
        position: sticky;
        bottom: 20px;
        margin: 20px 20px 20px;
        z-index: 20;
    }

    .bottom-cta-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: linear-gradient(90deg, #5A1FE8 0%, #6D2BFF 50%, #7A3EFF 100%);
        border-radius: 18px;
        padding: 16px 28px;
        box-shadow: 0 10px 30px rgba(92,45,255,0.25);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .bottom-cta-inner:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(92,45,255,0.35);
    }

    .cta-play-icon {
        color: #FFFFFF !important;
        font-size: 28px !important;
    }

    .cta-bar-text {
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 700;
    }

    .cta-arrow {
        color: rgba(255,255,255,0.8) !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .profile-header-card {
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
            padding: 20px;
        }

        .profile-stats-section {
            flex-direction: row;
            justify-content: center;
            gap: 24px;
        }

        .stat-divider-vert {
            width: 1px;
            height: 40px;
        }
    }

    @@media (max-width: 600px) {
        .premium-container {
            padding: 0 2px 60px;
        }

        .profile-header-card {
            border-radius: 20px;
        }

        .premium-card {
            border-radius: 20px;
        }

        .bottom-cta-bar {
            margin: 12px 8px 12px;
        }

        .bottom-cta-inner {
            border-radius: 14px;
            padding: 14px 20px;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Dashboard\UserDashboard.razor ── */
/* ─── فونت + بک‌گراند کلی ─── */
    .dashboard-layout {
        font-family: 'Vazirmatn', 'IRANSans', 'Tahoma', 'Roboto', sans-serif;
        background-color: #F4F7FC;
        min-height: 100vh;
        position: relative;
    }

    .dashboard-main {
        background-color: #F4F7FC;
        min-height: 100vh;
        padding-bottom: 80px;
    }

    .dashboard-container {
        padding-top: 20px;
        padding-bottom: 16px;
    }

    /* ─── دکمه همبرگری (فقط موبایل) ─── */
    .hamburger-btn {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 1400;
        background: var(--mud-palette-surface);
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        border-radius: 8px;
    }

    /* ──────────────────────────────────────────
        سایدبار (MudDrawer)
       ────────────────────────────────────────── */
    .dashboard-sidebar {
        background-color: #FFFFFF !important;
        border-right: none !important;
        box-shadow: 0 0 20px rgba(0,0,0,0.04);
    }

    .dashboard-sidebar .mud-drawer-content {
        background-color: var(--mud-palette-surface);
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 10px 10px;
    }

    .sidebar-logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .logo-text {
        color: #6A35C0 !important;
        font-weight: 800 !important;
        font-size: 1.5rem !important;
        margin: 0;
    }

    .sidebar-nav {
        padding: 8px 12px;
        gap: 2px;
    }

    /* ─── آیتم فعال منو ─── */
    .sidebar-nav .mud-nav-link.active,
    .sidebar-nav .nav-link-active.active {
        background-color: #6A3E9D !important;
        color: #FFFFFF !important;
        border-radius: 10px;
    }

    .sidebar-nav .mud-nav-link.active .mud-nav-link-icon,
    .sidebar-nav .nav-link-active.active .mud-nav-link-icon {
        color: #FFFFFF !important;
    }

    /* ─── آیتم‌های غیرفعال ─── */
    .sidebar-nav .mud-nav-link {
        color: #757575 !important;
        border-radius: 10px;
        margin-bottom: 2px;
        transition: background-color 0.2s;
    }

    .sidebar-nav .mud-nav-link:hover:not(.active) {
        background-color: #F5F0FA;
    }

    .sidebar-nav .mud-nav-link .mud-nav-link-icon {
        color: #9E9E9E !important;
    }

    /* ─── نشانگر پیام‌ها ─── */
    .nav-item-with-badge {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .msg-badge .mud-badge {
        background-color: #6A35C0 !important;
        min-width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    /* ──────────────────────────────────────────
        استایل عمومی کارت‌ها
       ────────────────────────────────────────── */
    .dash-card {
        border-radius: 16px !important;
        background-color: #FFFFFF !important;
        margin-bottom: 16px;
    }

    .dash-card .mud-card-content {
        padding: 20px !important;
    }

    .card-header-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
    }

    .card-title {
        font-weight: 700;
        color: #212121;
    }

    .stack-column {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* ──────────────────────────────────────────
        کارت وضعیت کاربر (گرادیانت بنفش)
       ────────────────────────────────────────── */
    .profile-card {
        border-radius: 16px !important;
        background: linear-gradient(135deg, #8A3FFC 0%, #5A1C99 100%) !important;
        color: #FFFFFF !important;
    }

    .profile-card .mud-card-content {
        padding: 24px !important;
    }

    .profile-card-content {
        padding: 0;
    }

    .profile-main {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* آواتار در قاب سفید */
    .profile-avatar-frame {
        width: 80px;
        height: 80px;
        min-width: 80px;
        border-radius: 50%;
        background: rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
    }

    .profile-avatar {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: #6A35C0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid #FFFFFF;
    }

    .avatar-text {
        font-size: 1.8rem;
        font-weight: 700;
        color: #FFFFFF;
    }

    .profile-info {
        flex: 1;
        min-width: 0;
    }

    .profile-name-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .profile-name {
        color: #FFFFFF !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    /* نشان استریک */
    .streak-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: rgba(255,255,255,0.2);
        padding: 2px 10px;
        border-radius: 12px;
    }

    .streak-num {
        color: #FF9800;
        font-weight: 700;
        font-size: 0.85rem;
    }

    /* نشان مدال */
    .medal-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(255,255,255,0.2);
        padding: 2px 10px;
        border-radius: 12px;
    }

    .medal-num {
        color: #FFFFFF;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* بخش XP */
    .xp-section {
        margin-top: 4px;
    }

    .xp-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .xp-text {
        color: rgba(255,255,255,0.9);
        font-size: 0.82rem;
        font-weight: 500;
    }

    .xp-pct {
        color: rgba(255,255,255,0.8);
        font-size: 0.8rem;
        font-weight: 600;
    }

    .xp-progress-bar {
        border-radius: 10px !important;
        background: rgba(255,255,255,0.25) !important;
    }

    .xp-progress-bar .mud-progress-linear-bar {
        background-color: #FFFFFF !important;
        border-radius: 10px !important;
    }

    /* ──────────────────────────────────────────
        کارت دستاوردها
       ────────────────────────────────────────── */
    .achievements-card {
        border-radius: 16px !important;
        height: 100%;
    }

    .medals-row {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin-top: 8px;
    }

    /* مدال‌های شش‌ضلعی */
    .hex-medal {
        width: 56px;
        height: 56px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: transform 0.2s ease;
    }

    .hex-medal:hover {
        transform: scale(1.1);
    }

    .hex-orange {
        background: linear-gradient(135deg, #FFB800, #FF8C00);
    }

    .hex-red {
        background: linear-gradient(135deg, var(--mud-palette-error), #C62828);
    }

    .hex-blue {
        background: linear-gradient(135deg, #1E88E5, #1565C0);
    }

    .hex-icon {
        color: #FFFFFF !important;
    }

    /* ──────────────────────────────────────────
        کارت ماموریت امروز
       ────────────────────────────────────────── */
    .mission-desc {
        color: #212121;
        margin: 8px 0 12px 0;
        font-weight: 500;
    }

    .mission-rating {
        margin-bottom: 16px;
    }

    .btn-mission-start {
        background-color: #7C4DFF !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────
        کارت مرور امروز
       ────────────────────────────────────────── */
    .review-big-number {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin: 8px 0 14px 0;
    }

    .review-count {
        font-size: 3.5rem !important;
        font-weight: 800 !important;
        color: #6A35C0 !important;
        line-height: 1 !important;
    }

    .review-subtitle {
        font-size: 0.85rem !important;
    }

    .review-list {
        margin-bottom: 12px;
    }

    .review-list-item {
        padding: 4px 0 !important;
    }

    .review-item-content {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .review-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .review-title {
        font-size: 0.84rem;
        color: #212121;
        flex: 1;
    }

    .review-chip {
        background-color: #F0F0F0 !important;
        font-size: 0.7rem !important;
        height: 24px !important;
        white-space: nowrap;
    }

    .btn-review-start {
        border-radius: 10px !important;
        background: linear-gradient(135deg, #6C5CE7, #00B4D8) !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────
        کارت نقاط ضعف
       ────────────────────────────────────────── */
    .weak-points-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .weak-point-item {
        background: var(--mud-palette-background);
        border-radius: 10px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .weak-point-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .weak-subject {
        font-weight: 600 !important;
        color: #212121 !important;
    }

    .weak-pct-text {
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .weak-progress {
        border-radius: 6px !important;
        background-color: #E9ECEF !important;
    }

    .weak-progress .mud-progress-linear-bar {
        border-radius: 6px !important;
    }

    .btn-weak-practice {
        background-color: #6A3E9D !important;
        color: #FFFFFF !important;
        border-radius: 8px !important;
        font-size: 0.72rem !important;
        align-self: flex-start;
    }

    /* ──────────────────────────────────────────
        کارت پیام‌های سیستمی
       ────────────────────────────────────────── */
    .system-messages {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .msg-item {
        display: flex;
        gap: 10px;
    }

    .msg-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 6px;
    }

    .msg-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .msg-body-text {
        color: #212121 !important;
        line-height: 1.6 !important;
        font-size: 0.84rem !important;
    }

    /* ──────────────────────────────────────────
        کارت تقویم
       ────────────────────────────────────────── */
    .cal-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin-bottom: 10px;
    }

    .cal-nav-btn {
        color: #757575 !important;
    }

    .cal-month-title {
        font-weight: 700 !important;
        color: #212121 !important;
        min-width: 90px;
        text-align: center;
    }

    .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        text-align: center;
        margin-bottom: 14px;
    }

    .cal-day-header {
        font-size: 0.7rem;
        color: #9E9E9E;
        padding: 4px 0;
        font-weight: 500;
    }

    .cal-day-cell {
        font-size: 0.75rem;
        color: #212121;
        padding: 5px 0;
        border-radius: 6px;
    }

    .cal-today-avatar {
        margin: 0 auto;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
        background-color: #6A35C0 !important;
    }

    .cal-events-title {
        font-weight: 700 !important;
        color: #212121 !important;
        margin-bottom: 8px !important;
    }

    .cal-events {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }

    .cal-event-item {
        display: flex;
        gap: 8px;
    }

    .cal-event-line {
        width: 3px;
        min-width: 3px;
        border-radius: 2px;
    }

    .cal-event-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cal-event-name {
        color: #212121 !important;
        font-weight: 500 !important;
    }

    /* ──────────────────────────────────────────
        کارت رقبای بالای سر
       ────────────────────────────────────────── */
    .rivals-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .rival-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
    }

    .rival-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .rival-avatar-circle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #6A35C0;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .rival-name {
        font-size: 0.88rem;
        font-weight: 600;
        color: #212121;
    }

    .rival-xp {
        font-size: 0.78rem;
        font-weight: 700;
        color: #6A35C0;
        white-space: nowrap;
    }

    .btn-rivals-table {
        border-radius: 10px !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────
        فوتر بنفش
       ────────────────────────────────────────── */
    .dashboard-footer {
        background-color: #6200EA !important;
        border-radius: 0 !important;
        position: relative;
        width: 100%;
        margin-top: auto;
    }

    .footer-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 12px 24px;
    }

    .footer-text {
        color: #FFFFFF !important;
        font-weight: 600 !important;
    }

    .footer-play-btn {
        color: #FFFFFF !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
    }

    /* ──────────────────────────────────────────
        دکمه شناور (FAB) موبایل
       ────────────────────────────────────────── */
    .mobile-fab {
        position: fixed !important;
        bottom: 24px !important;
        left: 24px !important;
        z-index: 1300 !important;
        background-color: #6A35C0 !important;
        box-shadow: 0 4px 16px rgba(106,53,192,0.4) !important;
    }

    /* ──────────────────────────────────────────
        ریسپانسیو (موبایل)
       ────────────────────────────────────────── */
    @@media (max-width: 959px) {
        .profile-main {
            flex-direction: column;
            text-align: center;
        }

        .profile-name-row {
            justify-content: center;
        }

        .profile-avatar-frame {
            margin-bottom: 8px;
        }

        .dashboard-container {
            padding: 12px 8px;
        }

        .hex-medal {
            width: 48px;
            height: 48px;
        }

        .review-count {
            font-size: 2.8rem !important;
        }
    }

    @@media (max-width: 600px) {
        .profile-main {
            gap: 12px;
        }

        .medals-row {
            gap: 12px;
        }

        .hex-medal {
            width: 40px;
            height: 40px;
        }

        .cal-grid {
            gap: 2px;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\AiGenerate.razor ── */
.ai-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.48);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
    }

        .ai-overlay *, .ai-overlay *::before, .ai-overlay *::after {
            box-sizing: border-box;
        }

    .ai-modal {
        width: 100%;
        max-width: 800px;
        max-height: 92vh;
        background: var(--mud-palette-surface);
        border-radius: 34px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 24px 80px rgba(91,63,255,0.16);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ─── هدر ─── */
    .ai-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 28px 14px;
        flex-shrink: 0;
    }

    .ai-close {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--mud-palette-divider);
        background: var(--mud-palette-background);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.2s;
    }

        .ai-close:hover {
            background: var(--mud-palette-background-grey);
            color: var(--mud-palette-primary, #6A35FF);
            border-color: var(--mud-palette-divider);
        }

    .ai-header-center {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ai-sparkle-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7C3AED, #6D28D9);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(124,58,237,0.3);
    }

    .ai-sparkle-svg {
        color: #FFFFFF !important;
    }

    .ai-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .ai-header-spacer {
        width: 40px;
    }

    /* ─── بدنه ─── */
    .ai-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 28px 10px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* ─── کارت تنظیمات ─── */
    .ai-settings-card {
        background: var(--mud-palette-background);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ai-settings-row {
        display: flex;
        gap: 14px;
    }

    .ai-field {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .ai-field-narrow {
        flex: 0 0 140px;
    }

    .ai-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .ai-select-wrap {
        position: relative;
    }

    .ai-select {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: 0.86rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer;
    }

        .ai-select:focus {
            border-color: #7C3AED;
        }

    .ai-select-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    .ai-stepper {
        display: flex;
        align-items: center;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        height: 48px;
        overflow: hidden;
    }

    .ai-step-btn {
        width: 44px;
        height: 100%;
        border: none;
        background: transparent;
        font-size: 1.1rem;
        color: #7C3AED;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
    }

        .ai-step-btn:hover {
            background: var(--mud-palette-background-grey);
        }

    .ai-step-val {
        flex: 1;
        text-align: center;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .ai-segmented {
        display: flex;
        gap: 0;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        overflow: hidden;
    }

    .ai-seg-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 11px 10px;
        border: none;
        background: transparent;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        transition: all 0.15s;
    }

        .ai-seg-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    .seg-on {
        background: #7C3AED !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(124,58,237,0.25);
        position: relative;
        z-index: 1;
    }

    .ai-text-input {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 0 16px;
        font-family: inherit;
        font-size: 0.86rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

        .ai-text-input:focus {
            border-color: #7C3AED;
        }

        .ai-text-input::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .ai-generate-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, #7C3AED, #5B3FFF, #6D28D9);
        color: #FFFFFF;
        border: none;
        border-radius: 16px;
        padding: 14px 24px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 22px rgba(124,58,237,0.25);
        transition: transform 0.15s;
    }

        .ai-generate-btn:hover {
            transform: translateY(-2px);
        }

    .ai-gen-icon {
        color: #FFFFFF !important;
    }

    /* ─── سوالات پیشنهادی ─── */
    .ai-suggestions-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ai-bulb-icon {
        color: #FDBB11 !important;
    }

    .ai-sugg-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .ai-questions-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .ai-q-card {
        background: var(--mud-palette-surface);
        border-radius: 22px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 16px rgba(0,0,0,0.04);
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: border-color 0.2s;
    }

    .q-card-sel {
        border-color: #7C3AED;
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .q-card-top {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .q-num-bubble {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7C3AED, #6D28D9);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .q-card-meta {
        display: flex;
        gap: 6px;
        flex: 1;
    }

    .q-add-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--mud-palette-surface);
        color: #7C3AED;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 12px;
        padding: 7px 16px;
        font-family: inherit;
        font-size: 0.76rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

        .q-add-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    .q-added {
        background: #16A34A !important;
        color: #FFFFFF !important;
        border-color: #16A34A !important;
    }

    .q-text {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.7;
    }

    /* گزینه‌ها */
    .q-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .q-opt {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--mud-palette-background);
        border-radius: 14px;
        padding: 10px 14px;
        border: 1px solid var(--mud-palette-divider);
    }

    .opt-correct {
        background: var(--mud-palette-success-light);
        border-color: var(--mud-palette-success-light);
    }

    .q-opt-letter {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-size: 0.78rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .opt-correct .q-opt-letter {
        background: #16A34A;
        color: #FFFFFF;
    }

    .q-opt-val {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        flex: 1;
    }

    .opt-check-icon {
        color: #16A34A !important;
        flex-shrink: 0;
    }

    .q-explanation {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        background: #FFFBEB;
        border-radius: 12px;
        padding: 10px 14px;
        border: 1px solid #FDE68A;
        font-size: 0.78rem;
        color: #92400E;
        line-height: 1.6;
    }

    .q-expl-icon {
        color: #F59E0B !important;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* ─── تگ‌ها ─── */
    .sq-tag {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .tag-math {
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        color: #7C3AED;
    }

    .tag-geometry {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error-darken);
    }

    .tag-physics {
        background: var(--mud-palette-info-light);
        color: var(--mud-palette-info);
    }

    .tag-chemistry {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .tag-stats {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .tag-easy {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .tag-mid {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .tag-hard {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error);
    }

    /* ─── دکمه پایین ─── */
    .ai-bottom-bar {
        padding: 16px 28px 22px;
        border-top: 1px solid #F0ECFA;
        flex-shrink: 0;
    }

    .ai-add-all-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        background: linear-gradient(135deg, #7C3AED, #5B3FFF, #6D28D9);
        color: #FFFFFF;
        border: none;
        border-radius: 18px;
        padding: 15px 24px;
        font-family: inherit;
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 10px 26px rgba(124,58,237,0.28);
        transition: transform 0.15s;
    }

        .ai-add-all-btn:hover {
            transform: translateY(-2px);
        }

    .ai-addall-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ موبایل ═══════════ */
    @@media (max-width: 768px) {
        .ai-overlay {
            padding: 0;
            align-items: stretch;
        }

        .ai-modal {
            max-width: 100%;
            max-height: 100vh;
            border-radius: 0;
        }

        .ai-header {
            padding: 14px 16px 10px;
        }

        .ai-title {
            font-size: 0.9rem;
        }

        .ai-body {
            padding: 0 16px 8px;
            gap: 14px;
        }

        .ai-settings-row {
            flex-direction: column;
        }

        .ai-field-narrow {
            flex: unset;
        }

        .q-options {
            grid-template-columns: 1fr;
        }

        .ai-bottom-bar {
            padding: 12px 16px 18px;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\CreateQuestion.razor ── */
.cq-overlay {
        position: fixed;
        inset: 0;
        background: rgba(20,20,35,0.45);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
    }

        .cq-overlay *, .cq-overlay *::before, .cq-overlay *::after {
            box-sizing: border-box;
        }

    .cq-modal {
        width: 100%;
        max-width: 1050px;
        max-height: 93vh;
        background: var(--mud-palette-surface);
        border-radius: 32px;
        border: 1px solid #ECEBFF;
        box-shadow: 0 20px 60px rgba(91,61,245,0.10);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ─── هدر ─── */
    .cq-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px 12px;
        flex-shrink: 0;
    }

    .cq-close-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid #ECEBFF;
        background: var(--mud-palette-background);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.2s;
    }

        .cq-close-btn:hover {
            background: var(--mud-palette-background-grey);
            color: #6D3EFF;
        }

    .cq-header-center {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cq-pencil-icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cq-pencil-svg {
        color: #FFFFFF !important;
    }

    .cq-title {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    /* ─── بدنه دوستونه ─── */
    .cq-body {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    /* ─── پنل چپ: AI ─── */
    .cq-left-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 20px 16px;
        border-left: 1px solid #ECEBFF;
        min-width: 0;
    }

    .cq-panel-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .cq-panel-icon {
        color: #6D3EFF !important;
    }

    .cq-panel-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .cq-panel-sub {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
        margin: 0 0 12px;
    }

    /* چت */
    .cq-chat-area {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 8px;
    }

    .cq-chat-msg {
        display: flex;
        gap: 10px;
    }

    .user-msg {
        justify-content: flex-end;
    }

    .cq-bot-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cq-bot-icon {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

    .cq-bubble {
        max-width: 85%;
        border-radius: 18px;
        padding: 10px 14px;
    }

    .bot-bubble {
        background: var(--mud-palette-surface);
        border: 1px solid #ECEBFF;
        border-top-right-radius: 6px;
    }

    .user-bubble {
        background: linear-gradient(135deg, #6D3EFF 0%, #5B3DF5 100%);
        border-top-left-radius: 6px;
    }

        .user-bubble p {
            color: #FFFFFF;
        }

    .cq-bubble p {
        font-size: 0.8rem;
        margin: 0;
        line-height: 1.6;
    }

    /* کارت پیشنهادی */
    .cq-suggest-card {
        background: var(--mud-palette-surface);
        border: 1px solid #ECEBFF;
        border-radius: 20px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    }

    .cq-suggest-badge {
        font-size: 0.68rem;
        font-weight: 700;
        color: #6D3EFF;
        background: var(--mud-palette-background-grey);
        padding: 3px 10px;
        border-radius: 999px;
        align-self: flex-start;
    }

    .cq-suggest-q {
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .cq-suggest-opts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .cq-suggest-opt {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--mud-palette-background);
        border-radius: 12px;
        padding: 8px 12px;
        border: 1px solid #ECEBFF;
        font-size: 0.78rem;
        color: var(--mud-palette-text-primary);
    }

    .sug-correct {
        background: var(--mud-palette-success-light);
        border-color: var(--mud-palette-success-light);
    }

    .cq-sug-letter {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-size: 0.72rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .sug-letter-green {
        background: #16A34A;
        color: #FFFFFF;
    }

    .cq-sug-check {
        color: #16A34A !important;
        flex-shrink: 0;
    }

    .cq-suggest-expl {
        font-size: 0.74rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        line-height: 1.5;
    }

    .cq-suggest-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .cq-sug-act-btn {
        font-size: 0.7rem;
        font-weight: 600;
        color: #6D3EFF;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
        padding: 7px 12px;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s;
    }

        .cq-sug-act-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    /* ورودی چت */
    .cq-chat-input-row {
        display: flex;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid #F0ECFA;
    }

    .cq-chat-input {
        flex: 1;
        height: 44px;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        padding: 0 14px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

        .cq-chat-input:focus {
            border-color: #6D3EFF;
        }

        .cq-chat-input::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .cq-send-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .cq-send-icon {
        color: #FFFFFF !important;
    }

    /* ─── پنل راست: فرم ─── */
    .cq-right-panel {
        flex: 1;
        padding: 0 20px 16px;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .cq-form {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cq-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cq-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .cq-textarea {
        width: 100%;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 16px;
        padding: 12px 16px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        resize: none;
        transition: border-color 0.2s;
    }

        .cq-textarea:focus {
            border-color: #6D3EFF;
        }

        .cq-textarea::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .cq-opts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .cq-opt-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cq-radio-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
    }

    .cq-radio {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .cq-radio-custom {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid var(--mud-palette-divider);
        background: var(--mud-palette-surface);
        display: inline-block;
        transition: all 0.15s;
    }

    .cq-radio:checked + .cq-radio-custom {
        border-color: #6D3EFF;
        background: #6D3EFF;
        box-shadow: 0 0 0 3px rgba(109,62,255,0.15), inset 0 0 0 4px #FFFFFF;
    }

    .cq-opt-letter-label {
        font-size: 0.82rem;
        font-weight: 800;
        color: var(--mud-palette-text-secondary);
        min-width: 22px;
    }

    .cq-opt-input {
        flex: 1;
        height: 42px;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 12px;
        padding: 0 12px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

        .cq-opt-input:focus {
            border-color: #6D3EFF;
        }

        .cq-opt-input::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .cq-field-row {
        display: flex;
        gap: 14px;
    }

    .cq-field-half {
        flex: 1;
    }

    .cq-segmented {
        display: flex;
        gap: 0;
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        overflow: hidden;
    }

    .cq-seg-btn {
        flex: 1;
        padding: 10px;
        border: none;
        background: var(--mud-palette-surface);
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
    }

        .cq-seg-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    .seg-active {
        background: #6D3EFF !important;
        color: #FFFFFF !important;
    }

    .cq-select-wrap {
        position: relative;
    }

    .cq-select {
        width: 100%;
        height: 44px;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer;
    }

        .cq-select:focus {
            border-color: #6D3EFF;
        }

    .cq-sel-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    .cq-form-btns {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    .cq-cancel-form-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        padding: 11px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
    }

    .cq-save-form-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        color: #FFFFFF;
        border: none;
        border-radius: 14px;
        padding: 11px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(109,62,255,0.22);
    }

    .cq-save-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 850px) {
        .cq-overlay {
            padding: 0;
            align-items: stretch;
        }

        .cq-modal {
            max-width: 100%;
            max-height: 100vh;
            border-radius: 0;
        }

        .cq-header {
            padding: 14px 14px 8px;
        }

        .cq-title {
            font-size: 0.95rem;
        }

        .cq-body {
            flex-direction: column;
            overflow-y: auto;
        }

        .cq-left-panel {
            border-left: none;
            border-bottom: 1px solid #ECEBFF;
            padding-bottom: 14px;
        }

        .cq-right-panel {
            padding-top: 8px;
        }

        .cq-opts-grid {
            grid-template-columns: 1fr;
        }

        .cq-suggest-opts {
            grid-template-columns: 1fr;
        }

        .cq-field-row {
            flex-direction: column;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\Exam.razor ── */
.exam-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .exam-page *, .exam-page *::before, .exam-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ چیدمان دوستونه ═══════════ */
    .exam-layout {
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: 20px;
        align-items: start;
    }

    /* ═══════════ سایدبار همراه هوشمند ═══════════ */
    .ai-tutor-sidebar {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        height: calc(100vh - 140px);
        min-height: 600px;
        position: sticky;
        top: 24px;
    }

    .tutor-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 20px;
        border-bottom: 1px solid #EEEAFB;
    }

    .tutor-avatar-wrap {
        position: relative;
    }

    .tutor-robot-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(106,53,255,0.25);
    }

    .robot-icon {
        color: #FFFFFF !important;
    }

    .tutor-status-dot {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--mud-palette-success);
        border: 2px solid #FFFFFF;
    }

    .tutor-title-block {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .tutor-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .tutor-subtitle {
        font-size: 0.72rem;
        color: var(--mud-palette-success);
        font-weight: 500;
    }

    .tutor-more-btn {
        color: var(--mud-palette-text-disabled) !important;
    }

    /* ═══════════ تاریخچه چت ═══════════ */
    .tutor-chat-area {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .chat-msg {
        display: flex;
        gap: 10px;
    }

    .user-msg {
        justify-content: flex-end;
    }

    .msg-avatar {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mini-robot {
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
    }

    .mini-robot-icon {
        color: #6A35FF !important;
        font-size: 16px !important;
    }

    .msg-bubble {
        max-width: 82%;
        border-radius: 18px;
        padding: 12px 16px;
    }

    .ai-bubble {
        background: #F7F5FC;
        border: 1px solid #ECE8FA;
        border-top-right-radius: 6px;
    }

    .ai-success-bubble {
        background: #EAFBF1;
        border: 1px solid #BDE8CA;
        border-top-right-radius: 6px;
    }

    .user-bubble {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        border-top-left-radius: 6px;
    }

    .user-bubble .msg-text {
        color: #FFFFFF;
    }

    .msg-text {
        font-size: 0.8rem;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.7;
    }

    .ai-math-hint {
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 10px;
        padding: 8px 14px;
        margin: 8px 0;
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        text-align: center;
    }

    .last-solved-section {
        margin-top: 8px;
    }

    .last-solved-label {
        font-size: 0.7rem;
        color: var(--mud-palette-text-disabled);
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
    }

    .last-solved-card {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #F7F5FC;
        border-radius: 12px;
        padding: 10px 14px;
        border: 1px solid #ECE8FA;
    }

    .last-solved-check {
        color: var(--mud-palette-success) !important;
    }

    .last-solved-text {
        font-size: 0.78rem;
        color: var(--mud-palette-text-primary);
        font-weight: 500;
    }

    /* ═══════════ ورودی چت ═══════════ */
    .tutor-input-area {
        padding: 14px 16px;
        border-top: 1px solid #EEEAFB;
    }

    .tutor-input-row {
        display: flex;
        gap: 8px;
    }

    .tutor-chat-input {
        flex: 1;
        border: 1px solid #ECE8FA;
        border-radius: 14px;
        padding: 10px 16px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        background: #FBFBFF;
        transition: border-color 0.2s;
    }

    .tutor-chat-input:focus {
        border-color: var(--mud-palette-primary, #6A35FF);
    }

    .tutor-chat-input::placeholder {
        color: var(--mud-palette-text-disabled);
    }

    .tutor-send-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .tutor-send-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .tutor-send-btn:hover:not(:disabled) {
        opacity: 0.85;
    }

    .send-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ محوطه آزمون ═══════════ */
    .exam-main-area {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .exam-top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .exam-header-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .exam-icon-wrap {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .exam-header-icon {
        color: #6A35FF !important;
    }

    .exam-title-block {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .exam-title {
        font-size: 1.2rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
    }

    .exam-subtitle {
        font-size: 0.82rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .exam-analytics-btn {
        color: var(--mud-palette-text-secondary) !important;
    }

    /* نوار پیشرفت */
    .exam-progress-bar-wrap {
        padding: 0 2px;
    }

    .exam-progress-bar {
        height: 8px;
        background: #ECE7FF;
        border-radius: 10px;
        overflow: hidden;
    }

    .exam-progress-fill {
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg, #5E2FFF, #7A4DFF);
        transition: width 0.4s ease;
    }

    /* ═══════════ کارت سوال ═══════════ */
    .exam-question-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        padding: 28px 30px;
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .adaptive-insight {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #FFF8E1;
        border: 1px solid #FFE082;
        border-radius: 14px;
        padding: 10px 16px;
        font-size: 0.8rem;
        color: #C79100;
        font-weight: 600;
    }

    .insight-icon {
        color: var(--mud-palette-warning) !important;
    }

    .question-text-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .question-number {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .question-body {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.7;
    }

    /* گزینه‌ها */
    .answer-options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .answer-option {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 22px;
        padding: 18px 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
        text-align: right;
    }

    .answer-option:hover {
        border-color: var(--mud-palette-divider);
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .option-selected {
        border-color: #6A35FF !important;
        background: #F8F5FF !important;
        box-shadow: 0 4px 14px rgba(106,53,255,0.12);
    }

    .option-indicator {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;
        background: var(--mud-palette-divider);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .indicator-active {
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        box-shadow: 0 4px 12px rgba(106,53,255,0.3);
    }

    .option-letter {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .indicator-active .option-letter {
        color: #FFFFFF;
    }

    .option-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        flex: 1;
    }

    .option-check {
        color: #6A35FF !important;
    }

    /* دکمه تایید */
    .confirm-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: rgba(139,92,246,0.15);
        color: #FFFFFF;
        border: none;
        border-radius: 18px;
        padding: 16px 28px;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
    }

    .confirm-btn:disabled {
        cursor: not-allowed;
    }

    .confirm-ready {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        box-shadow: 0 8px 24px rgba(94,47,255,0.3);
    }

    .confirm-ready:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(94,47,255,0.4);
    }

    .confirm-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ وضعیت موفقیت ═══════════ */
    .success-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
        position: relative;
        overflow: hidden;
        padding: 20px 0;
    }

    .success-confetti-area {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        pointer-events: none;
    }

    .confetti {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        animation: confetti-fall 2s ease-out infinite;
    }

    .c1 { background: #6A35FF; left: 15%; animation-delay: 0s; }
    .c2 { background: #FDBB11; left: 30%; animation-delay: 0.3s; }
    .c3 { background: var(--mud-palette-success); left: 50%; animation-delay: 0.6s; }
    .c4 { background: #FF5A5A; left: 65%; animation-delay: 0.2s; }
    .c5 { background: #4D8DFF; left: 80%; animation-delay: 0.5s; }
    .c6 { background: var(--mud-palette-warning); left: 90%; animation-delay: 0.8s; }

    @@keyframes confetti-fall {
        0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
        100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
    }

    .success-check-wrap {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: success-pop 0.5s ease;
    }

    @@keyframes success-pop {
        0% { transform: scale(0); }
        50% { transform: scale(1.15); }
        100% { transform: scale(1); }
    }

    .success-big-check {
        color: var(--mud-palette-success) !important;
        font-size: 44px !important;
    }

    .success-title {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
        animation: fade-up 0.6s ease;
    }

    .success-detail {
        font-size: 0.9rem;
        color: var(--mud-palette-success);
        font-weight: 700;
        margin: 0;
    }

    @@keyframes fade-up {
        0% { transform: translateY(10px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    .success-stats-row {
        display: flex;
        gap: 24px;
    }

    .success-stat {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .stat-icon {
        color: #6A35FF !important;
    }

    .stat-icon.gold {
        color: #FDBB11 !important;
    }

    .next-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        border: none;
        border-radius: 16px;
        padding: 14px 32px;
        font-family: inherit;
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        transition: transform 0.2s;
    }

    .next-btn:hover {
        transform: translateY(-2px);
    }

    .next-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .exam-layout {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .ai-tutor-sidebar {
            position: relative;
            top: 0;
            height: auto;
            min-height: 400px;
            max-height: 500px;
        }

        .answer-options-grid {
            grid-template-columns: 1fr;
        }

        .exam-question-card {
            padding: 20px 18px;
        }

        .question-body {
            font-size: 1.1rem;
        }
    }

    @@media (max-width: 600px) {
        .exam-question-card {
            border-radius: 20px;
            padding: 16px 14px;
            gap: 16px;
        }

        .answer-option {
            padding: 14px 16px;
            border-radius: 16px;
        }

        .option-value {
            font-size: 0.95rem;
        }

        .confirm-btn {
            padding: 14px 20px;
            font-size: 0.88rem;
        }

        .success-title {
            font-size: 1.05rem;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\ExamResults.razor ── */
.er-page {
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4px 40px
    }

        .er-page *, .er-page *::before, .er-page *::after {
            box-sizing: border-box
        }

    .er-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px
    }

    .er-top-left {
        display: flex;
        align-items: center;
        gap: 14px
    }

    .er-top-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg,#6D3BFF,#4A3DFF);
        display: flex;
        align-items: center;
        justify-content: center
    }

    .er-top-svg {
        color: #FFF !important
    }

    .er-title {
        font-size: 1.25rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0
    }

    .er-sub {
        font-size: .8rem;
        color: var(--mud-palette-text-secondary);
        margin: 2px 0 0
    }

    .er-top-right {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .er-select-wrap {
        position: relative
    }

    .er-select {
        height: 44px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: .84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer
    }

    .er-sel-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none
    }

    .er-export-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: #D9EDFF;
        color: #1B6BA0;
        border: none;
        border-radius: 14px;
        padding: 10px 20px;
        font-family: inherit;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer
    }

    /* KPI */
    .er-kpi-row {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 14px;
        margin-bottom: 20px
    }

    .er-kpi-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.05);
        padding: 18px 20px;
        display: flex;
        align-items: center;
        gap: 14px
    }

    .er-kpi-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .er-kpi-purple {
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))
    }

        .er-kpi-purple .mud-icon-root {
            color: #6D3BFF !important
        }

    .er-kpi-blue {
        background: linear-gradient(135deg,var(--mud-palette-info-light),#BBDEFB)
    }

        .er-kpi-blue .mud-icon-root {
            color: #3792FF !important
        }

    .er-kpi-green {
        background: linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)
    }

        .er-kpi-green .mud-icon-root {
            color: #22A447 !important
        }

    .er-kpi-orange {
        background: linear-gradient(135deg,var(--mud-palette-warning-light),#FFE0B2)
    }

        .er-kpi-orange .mud-icon-root {
            color: #F5B62F !important
        }

    .er-kpi-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px
    }

    .er-kpi-lbl {
        font-size: .72rem;
        color: #7B7B96
    }

    .er-kpi-val {
        font-size: 1.2rem;
        font-weight: 900;
        color: #1B1B1F
    }

    .er-kpi-chg {
        font-size: .7rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px
    }

        .er-kpi-chg.up {
            color: #22A447;
            background: rgba(34,164,71,.1)
        }

        .er-kpi-chg.down {
            color: var(--mud-palette-error);
            background: rgba(229,57,53,.1)
        }

    /* ردیف میانی */
    .er-mid-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .er-chart-card, .er-table-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.05);
        padding: 20px 22px
    }

    .er-sec-title {
        font-size: .9rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0 0 16px
    }

    /* نمودار */
    .er-bars-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 170px;
        gap: 14px;
        padding-top: 14px
    }

    .er-bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: 100%
    }

    .er-bar-val {
        font-size: .66rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600
    }

    .er-bar-track {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center
    }

    .er-bar-fill {
        width: 80%;
        max-width: 50px;
        border-radius: 10px 10px 0 0;
        min-height: 6px;
        background: linear-gradient(180deg,#A98BFF,#5C3FFF)
    }

    .er-bar-lbl {
        font-size: .66rem;
        color: #7B7B96
    }

    /* جدول */
    .er-tbl-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .er-table {
        width: 100%;
        min-width: 400px;
        border-collapse: collapse
    }

        .er-table th {
            text-align: right;
            padding: 12px 14px;
            font-size: .72rem;
            font-weight: 700;
            color: #6D3BFF;
            border-bottom: 1px solid #F0ECFA
        }

        .er-table td {
            padding: 12px 14px;
            font-size: .8rem;
            color: var(--mud-palette-text-primary);
            border-bottom: 1px solid #F8F6FC
        }

        .er-table tbody tr:hover {
            background: var(--mud-palette-background-hover)
        }

    .er-td-name {
        font-weight: 600
    }

    .er-td-score {
        font-weight: 700;
        color: #6D3BFF
    }

    .er-td-date {
        font-size: .72rem;
        color: #7B7B96
    }

    .er-status {
        display: inline-block;
        font-size: .68rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px
    }

    .st-pass {
        background: var(--mud-palette-success-light);
        color: #22A447
    }

    .st-fail {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error)
    }

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px) {
        .er-kpi-row {
            grid-template-columns: repeat(2,1fr)
        }

        .er-mid-row {
            grid-template-columns: 1fr
        }
    }

    @@media(max-width:600px) {
        .er-kpi-row {
            grid-template-columns: 1fr
        }

        .er-kpi-card {
            padding: 14px 16px
        }

        .er-top {
            flex-direction: column;
            align-items: flex-start
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\ExamsList.razor ── */
.exams-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .exams-page *, .exams-page *::before, .exams-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .exams-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .exams-header-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .exams-title {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .exams-sub {
        font-size: 0.84rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
    }

    .exams-count-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 9px 18px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .count-icon {
        color: #6A35FF !important;
    }

    /* ═══════════ جستجو ═══════════ */
    .search-bar-wrap {
        display: flex;
        align-items: center;
        background: var(--mud-palette-background-grey);
        border-radius: 14px;
        padding: 0 16px;
        margin-bottom: 18px;
        border: 1px solid transparent;
        transition: border-color 0.2s;
    }

    .search-bar-wrap:focus-within {
        border-color: var(--mud-palette-primary, #6A35FF);
        background: var(--mud-palette-surface);
    }

    .search-icon {
        color: #6A35FF !important;
        flex-shrink: 0;
    }

    .search-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 14px 12px;
        font-family: inherit;
        font-size: 0.86rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

    .search-input::placeholder {
        color: var(--mud-palette-text-secondary);
    }

    .search-clear-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--mud-palette-text-disabled);
        padding: 4px;
    }

    /* ═══════════ فیلترها ═══════════ */
    .filter-pills-scroll {
        display: flex;
        gap: 8px;
        margin-bottom: 22px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .filter-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 50px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .filter-pill:hover {
        border-color: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
    }

    .pill-active {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }

    .pill-active .pill-icon {
        color: #FFFFFF !important;
    }

    .pill-active .pill-count {
        background: rgba(255,255,255,0.2);
    }

    .pill-icon {
        color: var(--mud-palette-text-secondary);
    }

    .pill-count {
        background: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
        font-size: 0.7rem;
        padding: 1px 8px;
        border-radius: 10px;
        font-weight: 700;
        min-width: 22px;
        text-align: center;
    }

    /* ═══════════ گرید آزمون‌ها ═══════════ */
    .exams-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 28px;
    }

    .exam-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 26px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .exam-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

    .exam-card-top {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .exam-subject-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-math { background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2)); }
    .icon-physics { background: linear-gradient(135deg, var(--mud-palette-info-light), #BBDEFB); }
    .icon-chemistry { background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9); }
    .icon-literature { background: linear-gradient(135deg, var(--mud-palette-warning-light), #FFE0B2); }
    .icon-geometry { background: linear-gradient(135deg, var(--mud-palette-error-light), #F8BBD0); }
    .icon-biology { background: linear-gradient(135deg, #E0F7FA, #B2EBF2); }

    .subject-icon {
        color: #6A35FF !important;
    }

    .icon-physics .subject-icon { color: #1E88E5 !important; }
    .icon-chemistry .subject-icon { color: var(--mud-palette-success) !important; }
    .icon-literature .subject-icon { color: var(--mud-palette-warning) !important; }
    .icon-geometry .subject-icon { color: #E04070 !important; }
    .icon-biology .subject-icon { color: #00ACC1 !important; }

    .exam-card-header {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .exam-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.3;
    }

    .exam-badges-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .exam-type-badge {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 12px;
        border-radius: 8px;
    }

    .badge-free {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .badge-paid {
        background: #FFF8E1;
        color: #C79100;
    }

    .badge-subscription {
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        color: var(--mud-palette-primary, #6A35FF);
    }

    .exam-difficulty {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 8px;
    }

    .diff-easy {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .diff-medium {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .diff-hard {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error);
    }

    .exam-desc {
        font-size: 0.82rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        line-height: 1.6;
    }

    /* متا دیتا */
    .exam-meta-row {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .exam-meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
    }

    .meta-icon {
        color: var(--mud-palette-text-disabled) !important;
        font-size: 16px !important;
    }

    /* قیمت + دکمه */
    .exam-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 4px;
    }

    .exam-price {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }

    .price-free {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-success);
    }

    .price-value {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .price-unit {
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .exam-cta-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        border: none;
        border-radius: 14px;
        padding: 10px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
    }

    .exam-cta-btn:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    .cta-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ صفحه‌بندی ═══════════ */
    .pagination-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .page-nav-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 12px;
        padding: 9px 16px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-primary, #6A35FF);
        cursor: pointer;
        transition: all 0.2s;
    }

    .page-nav-btn:hover:not(:disabled) {
        background: var(--mud-palette-primary-hover, #F5F2FD);
    }

    .page-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        color: var(--mud-palette-text-disabled);
    }

    .page-numbers {
        display: flex;
        gap: 6px;
    }

    .page-num {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .page-num:hover {
        border-color: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
    }

    .page-active {
        background: #6A35FF !important;
        color: #FFFFFF !important;
        border-color: #6A35FF !important;
        box-shadow: 0 4px 12px rgba(106,53,255,0.25);
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .exam-card {
            padding: 18px 20px;
            border-radius: 22px;
        }

        .exam-card-top {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .exam-badges-row {
            justify-content: center;
        }

        .exam-card-bottom {
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        .exam-cta-btn {
            width: 100%;
            justify-content: center;
        }

        .exam-meta-row {
            justify-content: center;
        }
    }

    @@media (max-width: 600px) {
        .exams-title {
            font-size: 1.15rem;
        }

        .exam-card {
            padding: 14px 16px;
            border-radius: 18px;
            gap: 10px;
        }

        .exam-card-title {
            font-size: 0.95rem;
        }

        .exam-subject-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
        }

        .filter-pill {
            padding: 8px 16px;
            font-size: 0.78rem;
        }

        .page-num {
            width: 34px;
            height: 34px;
            font-size: 0.76rem;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\MyExams.razor ── */
.me-page {
        font-family: 'Vazirmatn','Peyda','Yekan Bakh','Dana','IRANSans','Tahoma',sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }
    .me-page *, .me-page *::before, .me-page *::after { box-sizing: border-box; }

    /* ─── هدر ─── */
    .me-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
        flex-wrap: wrap;
        gap: 14px;
    }
    .me-top-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .me-title-icon {
        width: 50px; height: 50px;
        border-radius: 50%;
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .me-title-icon-svg { color: #6A35FF !important; }
    .me-title-block { display: flex; flex-direction: column; gap: 3px; }
    .me-title { font-size: 1.5rem; font-weight: 900; color: #151521; margin: 0; }
    .me-subtitle { font-size: 0.84rem; color: var(--mud-palette-text-secondary); margin: 0; }

    .me-create-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        border: none;
        border-radius: 18px;
        height: 56px;
        padding: 0 28px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(94,47,255,0.22);
        transition: transform 0.15s, box-shadow 0.15s;
        white-space: nowrap;
    }
    .me-create-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(94,47,255,0.3); }
    .me-create-icon { color: #FFFFFF !important; }

    /* ─── فیلترها ─── */
    .me-filters-row {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
    }
    .me-search-wrap {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }
    .me-search-icon {
        position: absolute;
        right: 16px;
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
        z-index: 2;
    }
    .me-search-input {
        width: 100%;
        height: 64px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 20px;
        padding: 0 46px 0 20px;
        font-family: inherit;
        font-size: 0.88rem;
        color: #151521;
        outline: none;
        transition: border-color 0.2s;
    }
    .me-search-input:focus { border-color: var(--mud-palette-primary, #6A35FF); }
    .me-search-input::placeholder { color: var(--mud-palette-text-disabled); }

    .me-select-wrap {
        position: relative;
        min-width: 180px;
    }
    .me-select {
        width: 100%;
        height: 64px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 20px;
        padding: 0 42px 0 20px;
        font-family: inherit;
        font-size: 0.88rem;
        color: #151521;
        outline: none;
        appearance: none;
        cursor: pointer;
    }
    .me-select:focus { border-color: var(--mud-palette-primary, #6A35FF); }
    .me-select-arrow {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    /* ─── پنهان/نمایش ─── */
    .desktop-only { display: block; }
    .mobile-only { display: none; }

    /* ─── جدول ─── */
    .me-table-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        overflow: hidden;
        margin-bottom: 20px;
    }
    .me-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .me-table {
        width: 100%;
        min-width: 950px;
        border-collapse: collapse;
    }
    .me-table thead {
        background: var(--mud-palette-primary-hover, var(--mud-palette-primary-hover-light));
    }
    .me-table th {
        text-align: right;
        padding: 16px 18px;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        white-space: nowrap;
    }
    .me-table td {
        padding: 16px 18px;
        font-size: 0.84rem;
        color: #151521;
        border-bottom: 1px solid var(--mud-palette-divider);
        white-space: nowrap;
    }
    .me-table tbody tr:hover { background: var(--mud-palette-background-hover, var(--mud-palette-background-hover)); }
    .td-num { text-align: center; }

    .exam-title-cell {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .exam-status-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .dot-active { background: var(--mud-palette-success); }
    .dot-inactive { background: var(--mud-palette-text-disabled); }

    .exam-title-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .exam-name { font-weight: 600; }
    .exam-date { font-size: 0.7rem; color: var(--mud-palette-text-secondary); }

    /* ─── نشان‌ها ─── */
    .me-badge {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 999px;
    }
    .badge-math { background: var(--mud-palette-divider, var(--mud-palette-divider-light)); color: var(--mud-palette-primary, #6A35FF); }
    .badge-physics { background: var(--mud-palette-info-light); color: var(--mud-palette-info); }
    .badge-chemistry { background: var(--mud-palette-error-light); color: var(--mud-palette-error-darken); }

    .badge-easy { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .badge-mid { background: var(--mud-palette-warning-light); color: var(--mud-palette-warning); }
    .badge-hard { background: var(--mud-palette-error-light); color: var(--mud-palette-error); }

    .badge-free { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .badge-sub { background: var(--mud-palette-info-light); color: var(--mud-palette-info); }
    .badge-paid { background: #FFF8E1; color: #C79100; }

    /* ─── دکمه‌های اقدام ─── */
    .td-actions {
        display: flex;
        gap: 6px;
    }
    .me-action-btn {
        width: 34px; height: 34px;
        border-radius: 12px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.15s;
    }
    .me-action-btn:hover { background: var(--mud-palette-primary-hover, #F5F2FD); color: var(--mud-palette-primary, #6A35FF); border-color: var(--mud-palette-primary, #6A35FF); }
    .delete-btn { border-color: #FFCDD2; color: var(--mud-palette-error); }
    .delete-btn:hover { background: var(--mud-palette-error-light); border-color: #FF4D4F; }

    /* ─── صفحه‌بندی ─── */
    .me-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    .me-page-btn {
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 14px;
        padding: 9px 18px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-primary, #6A35FF);
        cursor: pointer;
    }
    .me-page-btn:disabled { opacity: 0.35; cursor: not-allowed; color: var(--mud-palette-text-disabled); }
    .me-page-num {
        width: 40px; height: 40px;
        border-radius: 12px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
    }
    .page-on {
        background: linear-gradient(90deg, #5E2FFF, #7A4DFF) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }

    /* ─── نوک پاورقی ─── */
    .me-footer-tip {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        border-radius: 18px;
        padding: 14px 20px;
        font-size: 0.82rem;
        color: var(--mud-palette-primary, #6A35FF);
        font-weight: 500;
    }
    .me-tip-icon { color: #6A35FF !important; flex-shrink: 0; }

    /* ═══════════ نسخه موبایل ═══════════ */
    @@media (max-width: 959px) {
        .desktop-only { display: none !important; }
        .mobile-only { display: block; }

        .me-filters-row {
            flex-direction: column;
        }
        .me-select-wrap {
            min-width: unset;
        }

        .me-mobile-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 20px;
        }
        .me-mob-card {
            background: var(--mud-palette-surface);
            border-radius: 22px;
            border: 1px solid var(--mud-palette-divider);
            box-shadow: 0 4px 18px rgba(0,0,0,0.04);
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .mob-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .mob-card-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mob-card-name { font-size: 0.9rem; font-weight: 700; color: #151521; }
        .mob-card-date { font-size: 0.7rem; color: var(--mud-palette-text-secondary); }
        .mob-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
        .mob-card-stats {
            display: flex;
            gap: 14px;
            font-size: 0.76rem;
            color: var(--mud-palette-text-secondary);
        }
        .mob-card-actions {
            display: flex;
            gap: 6px;
            justify-content: flex-end;
        }
    }

    @@media (max-width: 600px) {
        .me-title { font-size: 1.15rem; }
        .me-create-btn { height: 48px; padding: 0 20px; font-size: 0.82rem; border-radius: 14px; }
        .me-search-input, .me-select { height: 52px; border-radius: 16px; }
        .me-table-card { border-radius: 20px; }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\QuestionBank.razor ── */
.qb-page {
        font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width:1200px;margin:0 auto;padding:0 4px 40px;
    }
    .qb-page *,.qb-page *::before,.qb-page *::after{box-sizing:border-box}

    /* ─── هدر ─── */
    .qb-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .qb-top-left{display:flex;align-items:center;gap:14px}
    .qb-title-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);display:flex;align-items:center;justify-content:center}
    .qb-title-svg{color:#FFFFFF!important}
    .qb-title{font-size:1.3rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}
    .qb-top-right{display:flex;align-items:center;gap:10px}
    .qb-reports-btn{background: var(--mud-palette-surface);color:var(--mud-palette-primary);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
    .qb-new-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);color:#FFF;border:none;border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(111,65,255,.22)}
    .qb-new-icon{color:#FFF!important}

    /* ─── فیلترها ─── */
    .qb-filter-card{background: var(--mud-palette-surface);border-radius:22px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 16px rgba(0,0,0,0.04);padding:16px 20px;display:flex;gap:10px;margin-bottom:18px;align-items:center}
    .qb-ai-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--mud-palette-background-grey),var(--mud-palette-divider-light));color:var(--mud-palette-primary);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 18px;height:48px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
    .qb-ai-icon{color:var(--mud-palette-primary)!important}
    .qb-search-wrap{flex:1;position:relative;display:flex;align-items:center}
    .qb-search-icon{position:absolute;right:14px;color:var(--mud-palette-text-secondary)!important;pointer-events:none;z-index:2}
    .qb-search-input{width:100%;height:48px;background:var(--mud-palette-background);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 42px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none}
    .qb-search-input:focus{border-color:var(--mud-palette-primary)}
    .qb-search-input::placeholder{color:var(--mud-palette-text-disabled)}
    .qb-select-wrap{position:relative;min-width:150px}
    .qb-select{width:100%;height:48px;background:var(--mud-palette-background);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none;appearance:none;cursor:pointer}
    .qb-select:focus{border-color:var(--mud-palette-primary)}
    .qb-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}

    /* ─── جدول ─── */
    .desktop-only{display:block}.mobile-only{display:none}
    .qb-table-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 16px rgba(0,0,0,0.04);overflow:hidden;margin-bottom:18px}
    .qb-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .qb-table{width:100%;min-width:1000px;border-collapse:collapse}
    .qb-table thead{background:var(--mud-palette-background-grey)}
    .qb-table th{text-align:right;padding:14px 16px;font-size:.74rem;font-weight:700;color:var(--mud-palette-primary);white-space:nowrap}
    .th-chk{width:44px;text-align:center}.th-num{width:40px;text-align:center}
    .qb-table td{padding:14px 16px;font-size:.82rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F5F2FD}
    .qb-table tbody tr:hover{background:var(--mud-palette-background-hover)}
    .td-chk{text-align:center}.td-num{text-align:center;font-weight:600}.td-text{line-height:1.5}.td-date{font-size:.74rem;color: var(--mud-palette-text-secondary);white-space:nowrap}
    .qb-master-chk,.qb-row-chk{width:18px;height:18px;accent-color:var(--mud-palette-primary);cursor:pointer}
    .td-acts{display:flex;gap:4px}
    .qb-act{width:34px;height:34px;border-radius:10px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:all .15s}
    .qb-act:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:var(--mud-palette-primary);border-color:var(--mud-palette-primary)}
    .act-del{color:var(--mud-palette-error);border-color:#FFCDD2}.act-del:hover{background:var(--mud-palette-error-light);border-color:var(--mud-palette-error)}

    /* تگ‌ها */
    .qb-tag{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
    .tag-math{background: var(--mud-palette-divider, var(--mud-palette-divider-light));color:var(--mud-palette-primary)}.tag-geom{background:var(--mud-palette-error-light);color:var(--mud-palette-error-darken)}
    .tag-physics{background:var(--mud-palette-info-light);color:var(--mud-palette-info)}.tag-chem{background:var(--mud-palette-warning-light);color:var(--mud-palette-warning)}
    .tag-easy{background:var(--mud-palette-success-light);color:var(--mud-palette-success)}.tag-mid{background:var(--mud-palette-warning-light);color:var(--mud-palette-warning)}.tag-hard{background:var(--mud-palette-error-light);color:var(--mud-palette-error)}

    /* ─── صفحه‌بندی ─── */
    .qb-pag{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
    .qb-pag-btn{background: var(--mud-palette-surface);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:9px 18px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--mud-palette-primary);cursor:pointer}
    .qb-pag-btn:disabled{opacity:.35;cursor:not-allowed;color:var(--mud-palette-text-disabled)}
    .qb-pag-num{width:40px;height:40px;border-radius:12px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.84rem;font-weight:700;color: var(--mud-palette-text-secondary);cursor:pointer}
    .pag-on{background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5)!important;color:#FFF!important;border-color:transparent!important;box-shadow:0 4px 12px rgba(111,65,255,.25)}

    /* ─── FAB ─── */
    .qb-fab{display:none}

    /* ═══════════ موبایل ═══════════ */
    @@media(max-width:850px){
        .desktop-only{display:none!important}.mobile-only{display:block}
        .qb-filter-card{flex-wrap:wrap}.qb-select-wrap{min-width:unset;flex:1}
        .qb-mob-list{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
        .qb-mob-card{background: var(--mud-palette-surface);border-radius:20px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 16px rgba(0,0,0,0.04);padding:16px;display:flex;flex-direction:column;gap:10px}
        .mob-top{display:flex;align-items:center;gap:8px}
        .mob-num{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800}
        .mob-text{font-size:.84rem;color: var(--mud-palette-text-primary);line-height:1.6;margin:0}
        .mob-meta{display:flex;gap:14px;font-size:.74rem;color:#7B7B96}
        .mob-acts{display:flex;gap:6px;justify-content:flex-end}
        .qb-fab{display:flex;align-items:center;gap:8px;position:fixed;bottom:24px;left:24px;z-index:100;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);color:#FFF;border:none;border-radius:50px;padding:15px 24px;font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(111,65,255,.35)}
        .qb-fab:hover{transform:translateY(-2px)}
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Exam\SelectQuestions.razor ── */
.sq-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,10,30,0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
    }

    .sq-overlay *, .sq-overlay *::before, .sq-overlay *::after { box-sizing: border-box; }

    .sq-modal {
        width: 100%;
        max-width: 960px;
        max-height: 90vh;
        background: var(--mud-palette-surface);
        border-radius: 32px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 20px 60px rgba(91,63,255,0.12);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ─── هدر ─── */
    .sq-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 28px 16px;
        flex-shrink: 0;
    }
    .sq-close-btn {
        width: 40px; height: 40px;
        border-radius: 50%;
        border: 1px solid var(--mud-palette-divider);
        background: var(--mud-palette-background);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.2s;
    }
    .sq-close-btn:hover { background: var(--mud-palette-background-grey); color: var(--mud-palette-primary, #6A35FF); border-color: var(--mud-palette-divider); }

    .sq-header-center {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .sq-header-icon {
        width: 46px; height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7C3AED, #6D28D9);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sq-header-icon-svg { color: #FFFFFF !important; }

    .sq-header-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }
    .sq-header-spacer { width: 40px; }

    /* ─── فیلترها ─── */
    .sq-filters {
        display: flex;
        gap: 10px;
        padding: 0 28px 16px;
        flex-shrink: 0;
    }
    .sq-search-wrap {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }
    .sq-search-icon {
        position: absolute;
        right: 14px;
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
        z-index: 2;
    }
    .sq-search-input {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-background);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 0 42px 0 16px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .sq-search-input:focus {
        border-color: #7C3AED;
        box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
    }
    .sq-search-input::placeholder { color: var(--mud-palette-text-disabled); }

    .sq-select-wrap {
        position: relative;
        min-width: 150px;
    }
    .sq-select {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-background);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer;
    }
    .sq-select:focus { border-color: #7C3AED; }
    .sq-select-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    /* ─── جدول (دسکتاپ) ─── */
    .desktop-only { display: block; }
    .mobile-only { display: none; }

    .sq-table-wrap {
        flex: 1;
        overflow: hidden;
        margin: 0 28px;
        border-radius: 20px;
        border: 1px solid var(--mud-palette-divider);
    }
    .sq-table-scroll {
        max-height: 360px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sq-table {
        width: 100%;
        border-collapse: collapse;
    }
    .sq-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--mud-palette-background-grey);
    }
    .sq-table th {
        text-align: right;
        padding: 14px 16px;
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        white-space: nowrap;
    }
    .th-check { width: 52px; text-align: center; }
    .sq-table td {
        padding: 14px 16px;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        border-bottom: 1px solid var(--mud-palette-divider);
    }
    .sq-table tbody tr {
        cursor: pointer;
        transition: background 0.15s;
    }
    .sq-table tbody tr:hover { background: var(--mud-palette-background-hover, var(--mud-palette-background-hover)); }
    .row-selected { background: var(--mud-palette-background-grey) !important; }

    .td-check {
        text-align: center;
        vertical-align: middle;
    }
    .td-date { font-size: 0.76rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
    .td-text { line-height: 1.6; }

    /* ─── چک‌باکس گرد ─── */
    .sq-checkbox {
        width: 26px; height: 26px;
        border-radius: 50%;
        border: 2px solid var(--mud-palette-divider);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .sq-checkbox.checked {
        background: #7C3AED;
        border-color: #7C3AED;
        box-shadow: 0 3px 10px rgba(124,58,237,0.3);
    }
    .check-icon { color: #FFFFFF !important; font-size: 16px !important; }

    /* ─── تگ‌ها ─── */
    .sq-tag {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .tag-math { background: var(--mud-palette-divider, var(--mud-palette-divider-light)); color: #7C3AED; }
    .tag-geometry { background: var(--mud-palette-error-light); color: var(--mud-palette-error-darken); }
    .tag-physics { background: var(--mud-palette-info-light); color: var(--mud-palette-info); }
    .tag-chemistry { background: var(--mud-palette-warning-light); color: var(--mud-palette-warning); }
    .tag-stats { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .tag-easy { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .tag-mid { background: var(--mud-palette-warning-light); color: var(--mud-palette-warning); }
    .tag-hard { background: var(--mud-palette-error-light); color: var(--mud-palette-error); }

    /* ─── دکمه‌های پایین ─── */
    .sq-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 28px 22px;
        border-top: 1px solid #F0ECFA;
        flex-shrink: 0;
    }
    .sq-cancel-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 13px 28px;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    .sq-cancel-btn:hover { background: var(--mud-palette-primary-hover, #F5F2FD); color: var(--mud-palette-primary, #6A35FF); border-color: var(--mud-palette-divider); }

    .sq-confirm-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #7C3AED, #5B3FFF, #6D28D9);
        color: #FFFFFF;
        border: none;
        border-radius: 16px;
        padding: 13px 28px;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 22px rgba(124,58,237,0.25);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .sq-confirm-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(124,58,237,0.35);
    }
    .sq-confirm-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }
    .sq-confirm-icon { color: #FFFFFF !important; }

    /* ═══════════ موبایل ═══════════ */
    @@media (max-width: 768px) {
        .sq-overlay { padding: 0; align-items: stretch; }
        .sq-modal {
            max-width: 100%;
            max-height: 100vh;
            border-radius: 0;
        }
        .sq-header { padding: 16px 18px 12px; }
        .sq-header-title { font-size: 1rem; }
        .sq-filters {
            flex-direction: column;
            padding: 0 18px 12px;
        }
        .sq-select-wrap { min-width: unset; }

        .desktop-only { display: none !important; }
        .mobile-only { display: block; }

        .sq-table-wrap { margin: 0 18px; }

        .sq-mobile-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 18px 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .sq-mob-card {
            background: var(--mud-palette-surface);
            border: 1px solid var(--mud-palette-divider);
            border-radius: 18px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mob-card-sel {
            background: var(--mud-palette-background-grey);
            border-color: #7C3AED;
        }
        .mob-card-top {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .mob-card-date { font-size: 0.7rem; color: var(--mud-palette-text-secondary); margin-right: auto; }
        .mob-card-text { font-size: 0.84rem; color: var(--mud-palette-text-primary); line-height: 1.6; margin: 0; }
        .sq-mob-card .sq-checkbox { align-self: flex-end; }

        .sq-bottom-bar {
            padding: 14px 18px 18px;
            flex-direction: column;
        }
        .sq-cancel-btn, .sq-confirm-btn { width: 100%; justify-content: center; }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Profile\Achievements.razor ── */
.achievements-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .achievements-page *, .achievements-page *::before, .achievements-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ کارت هدر ═══════════ */
    .achv-header-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 28px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .achv-header-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .achv-trophy-wrap {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FFF3D6, #FFE4A0);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(253,187,17,0.2);
    }

    .achv-trophy-icon {
        color: #FDBB11 !important;
        font-size: 32px !important;
    }

    .achv-header-info {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .achv-header-title {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.2;
    }

    .achv-header-sub {
        font-size: 0.88rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        font-weight: 500;
    }

    .achv-header-right {
        display: flex;
        align-items: center;
    }

    .achv-progress-ring-wrap {
        position: relative;
        width: 80px;
        height: 80px;
    }

    .achv-progress-ring {
        width: 80px;
        height: 80px;
        transform: rotate(-90deg);
    }

    .ring-bg {
        fill: none;
        stroke: #ECE7FF;
        stroke-width: 8;
    }

    .ring-fill {
        fill: none;
        stroke: url(#ringGradient);
        stroke-width: 8;
        stroke-linecap: round;
        stroke-dasharray: 264;
        stroke-dashoffset: 174;
        transition: stroke-dashoffset 0.8s ease;
    }

    .ring-pct {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1rem;
        font-weight: 800;
        color: var(--mud-palette-primary, #6A35FF);
    }

    /* ═══════════ تب‌های فیلتر ═══════════ */
    .achv-filter-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .filter-tab {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 50px;
        border: 1px solid var(--mud-palette-divider);
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .filter-tab:hover {
        background: #F7F5FC;
        border-color: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
    }

    .filter-tab-active {
        background: linear-gradient(90deg, #6A35FF 0%, #7B4FFF 100%) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(106,53,255,0.25);
    }

    .filter-tab-active .filter-tab-icon {
        color: #FFFFFF !important;
    }

    .filter-tab-icon {
        color: var(--mud-palette-text-secondary);
    }

    /* ═══════════ گرید دستاوردها ═══════════ */
    .achv-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-bottom: 32px;
    }

    .achv-badge-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 24px 18px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .achv-badge-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

    /* وضعیت قفل */
    .badge-locked {
        opacity: 0.55;
        filter: grayscale(0.4);
    }

    .badge-locked .badge-hexagon {
        filter: grayscale(0.6);
    }

    /* نشان وضعیت شناور */
    .badge-status-float {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 2;
    }

    .badge-check-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--mud-palette-success);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(46,190,79,0.3);
    }

    .badge-status-icon.locked {
        color: var(--mud-palette-text-disabled) !important;
    }

    .badge-status-icon.unlocked {
        color: #FFFFFF !important;
    }

    /* نشان ویژه */
    .badge-rare-star {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 2;
    }

    .rare-star-icon {
        color: #FDBB11 !important;
        filter: drop-shadow(0 2px 4px rgba(253,187,17,0.3));
    }

    /* آیکون شش‌ضلعی */
    .badge-hex-wrap {
        margin-top: 8px;
    }

    .badge-hexagon {
        width: 72px;
        height: 72px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

    .hex-pink {
        background: linear-gradient(180deg, #FF80AB, #E04070);
    }

    .hex-fire {
        background: linear-gradient(180deg, var(--mud-palette-warning), var(--mud-palette-error));
    }

    .hex-yellow {
        background: linear-gradient(180deg, #FFD54F, #FDBB11);
    }

    .hex-blue {
        background: linear-gradient(180deg, #44B8FF, #1E6DE0);
    }

    .hex-green {
        background: linear-gradient(180deg, #69F0AE, var(--mud-palette-success));
    }

    .hex-purple {
        background: linear-gradient(180deg, #B388FF, #6A35FF);
    }

    .badge-hex-icon {
        color: #FFFFFF !important;
    }

    .badge-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
        text-align: center;
    }

    .badge-date {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .locked-text {
        color: var(--mud-palette-text-disabled) !important;
    }

    /* ═══════════ نشان‌های پین‌شده ═══════════ */
    .pinned-section {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 24px 28px;
        margin-bottom: 24px;
    }

    .pinned-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .pin-header-icon {
        color: #FF5A5A !important;
    }

    .pinned-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
        flex: 1;
    }

    .pinned-count {
        font-size: 0.8rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .pinned-cards-row {
        display: flex;
        gap: 16px;
    }

    .pinned-mini-card {
        flex: 1;
        background: var(--mud-palette-background);
        border-radius: 16px;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--mud-palette-divider);
        transition: background 0.2s;
    }

    .pinned-mini-card:hover {
        background: var(--mud-palette-divider);
    }

    .pinned-mini-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pinned-mini-hex {
        width: 40px;
        height: 40px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pinned-mini-icon {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

    .pinned-mini-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pinned-mini-name {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .pinned-mini-date {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
    }

    .pinned-red-icon {
        color: #FF5A5A !important;
        flex-shrink: 0;
    }

    /* ═══════════ پیام انگیزشی ═══════════ */
    .bottom-motivation {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 20px 24px;
        background: linear-gradient(135deg, var(--mud-palette-background, #F8F5FF), var(--mud-palette-divider, var(--mud-palette-divider-light)));
        border-radius: 20px;
        border: 1px solid var(--mud-palette-divider);
    }

    .motivation-icon {
        color: #FDBB11 !important;
    }

    .motivation-text {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        margin: 0;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .achv-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .achv-header-card {
            flex-direction: column;
            gap: 16px;
            text-align: center;
            padding: 22px 20px;
        }

        .achv-header-left {
            flex-direction: column;
        }

        .pinned-cards-row {
            flex-direction: column;
        }

        .achv-filter-tabs {
            gap: 8px;
        }

        .filter-tab {
            padding: 8px 16px;
            font-size: 0.78rem;
        }
    }

    @@media (max-width: 600px) {
        .achv-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .achv-badge-card {
            padding: 16px 12px 14px;
            border-radius: 18px;
        }

        .badge-hexagon {
            width: 56px;
            height: 56px;
        }

        .badge-title {
            font-size: 0.8rem;
        }

        .pinned-section {
            padding: 18px 16px;
        }

        .bottom-motivation {
            padding: 16px 18px;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Profile\Profile.razor ── */
.profile-page {
        max-width: 600px; margin: 0 auto;
        font-family: 'Vazirmatn','IRANSans','Tahoma',sans-serif;
    }
    .profile-loading {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; min-height: 300px;
    }
    .prof-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 20px;
    }
    .prof-card {
        padding: 24px; border-radius: 16px;
        border: 1px solid var(--mud-palette-divider, #E2E8F0);
        background: var(--mud-palette-surface, #FFFFFF);
    }
    .view-row { display: flex; align-items: center; gap: 20px; }
    .view-info { display: flex; flex-direction: column; gap: 4px; }
    .view-name {
        font-size: 1.25rem; font-weight: 800; margin: 0;
        color: var(--mud-palette-text-primary, #0F172A);
    }
    .view-phone {
        font-size: 0.85rem; color: var(--mud-palette-text-secondary, #64748B); text-align: right;
    }
    .view-email { font-size: 0.85rem; color: var(--mud-palette-primary, #4F46E5); }
    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .detail-item { display: flex; flex-direction: column; gap: 2px; }
    .edit-fields { display: flex; flex-direction: column; gap: 12px; }
    .edit-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
    .roles-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .mt-4 { margin-top: 16px; }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Profile\Settings.razor ── */
.st-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .st-page *,.st-page *::before,.st-page *::after{box-sizing:border-box}

    .st-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
    .st-header-left{display:flex;align-items:center;gap:14px}
    .st-header-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .st-header-svg{color:#FFF!important}
    .st-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.st-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}

    /* تب‌ها */
    .st-tabs-scroll{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
    .st-tab{display:flex;align-items:center;gap:6px;padding:10px 20px;border-radius:14px;border: 1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.84rem;font-weight:600;color: var(--mud-palette-text-secondary);cursor:pointer;white-space:nowrap}
    .st-tab:hover{border-color:var(--mud-palette-divider);color:#6D3BFF}.st-tab-on{background:linear-gradient(135deg,#6D3BFF,#4A3DFF)!important;color:#FFF!important;border-color:transparent!important}

    .st-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}

    /* فرم */
    .st-form-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:24px 26px;display:flex;flex-direction:column;gap:24px}
    .st-form-section{display:flex;flex-direction:column;gap:16px}
    .st-sec-title{font-size:.9rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0;display:flex;align-items:center;gap:8px}
    .st-stat-icn{color:#6D3BFF!important}

    .st-field{display:flex;flex-direction:column;gap:6px;flex:1}
    .st-lbl{font-size:.78rem;font-weight:700;color:#7B7B96}
    .st-input{height:46px;background: var(--mud-palette-surface);border:1px solid #E7EBF3;border-radius:14px;padding:0 16px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none}.st-input:focus{border-color:#6D3BFF;box-shadow:0 0 0 3px rgba(109,59,255,.08)}
    .st-textarea{background: var(--mud-palette-surface);border:1px solid #E7EBF3;border-radius:14px;padding:12px 16px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none;resize:none}.st-textarea:focus{border-color:#6D3BFF}
    .st-hint{font-size:.7rem;color:var(--mud-palette-text-disabled)}
    .st-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

    .st-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}.st-toggle-lbl{font-size:.84rem;font-weight:600;color:#1B1B1F}
    .st-switch{position:relative;display:inline-block;width:48px;height:26px}.st-switch input{opacity:0;width:0;height:0}.st-switch-slider{position:absolute;cursor:pointer;inset:0;background: rgba(139,92,246,0.15);border-radius:26px;transition:.25s}.st-switch-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background: var(--mud-palette-surface);border-radius:50%;transition:.25s}.st-switch input:checked+.st-switch-slider{background:#22A447}.st-switch input:checked+.st-switch-slider::before{transform:translateX(22px)}

    /* دکمه‌ها */
    .st-form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:8px;border-top:1px solid #F0ECFA}
    .st-btn-reset{background: var(--mud-palette-surface);color:var(--mud-palette-error);border:1px solid #FFCDD2;border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
    .st-btn-save{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:14px;padding:10px 26px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}

    /* وضعیت */
    .st-status-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px;display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}
    .st-stat-grid{display:flex;flex-direction:column;gap:12px}
    .st-stat-item{display:flex;align-items:center;gap:12px}
    .st-stat-dot{width:10px;height:10px;border-radius:50%}.st-stat-dot.ok{background:#22A447;box-shadow:0 0 0 4px rgba(34,164,71,.15)}
    .st-stat-item>div{display:flex;flex-direction:column;gap:1px}.st-stat-name{font-size:.78rem;color:#7B7B96}.st-stat-val{font-size:.84rem;font-weight:700;color:#22A447}
    .st-stat-meta{display:flex;justify-content:space-between;font-size:.68rem;color:var(--mud-palette-text-disabled)}
    .st-success-box{display:flex;align-items:center;gap:8px;background:var(--mud-palette-success-light);border-radius:14px;padding:12px 16px;font-size:.78rem;font-weight:600;color:#22A447}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.st-body{grid-template-columns:1fr}.st-status-card{position:static}.st-row-2{grid-template-columns:1fr}}
    @@media(max-width:600px){.st-form-card{padding:16px 14px}.st-form-actions{flex-direction:column}.st-btn-save,.st-btn-reset{width:100%;justify-content:center}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Profile\Wallet.razor ── */
.wl-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:950px;margin:0 auto;padding:0 4px 40px}
    .wl-page *,.wl-page *::before,.wl-page *::after{box-sizing:border-box}

    /* کارت موجودی */
    .wl-balance-card{background:linear-gradient(135deg,#5B2EFF,#7B3FFF);border-radius:28px;padding:28px 30px;color:#FFF;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:18px;box-shadow:0 12px 40px rgba(91,46,255,.25)}
    .wl-balance-top{display:flex;align-items:center;gap:16px}
    .wl-balance-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
    .wl-balance-svg{color:#FFF!important;font-size:30px!important}
    .wl-balance-lbl{font-size:.82rem;opacity:.8;display:block}.wl-balance-row{display:flex;align-items:baseline;gap:8px;margin-top:4px}
    .wl-balance-val{font-size:1.8rem;font-weight:900}.wl-balance-unit{font-size:.82rem;opacity:.7}
    .wl-quick-acts{display:flex;gap:10px}
    .wl-act-btn{display:flex;align-items:center;gap:6px;padding:12px 24px;border-radius:16px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;border:none}
    .wl-act-deposit{background: var(--mud-palette-surface);color:#5B2EFF}.wl-act-withdraw{background:rgba(255,255,255,.15);color:#FFF;border:1px solid rgba(255,255,255,.25)}

    /* فرم‌ها */
    .wl-forms-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
    .wl-form-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .wl-form-title{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;color:#17153B;margin:0 0 16px}.wl-form-icn{color:#5B2EFF!important}
    .wl-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.wl-field label{font-size:.76rem;font-weight:700;color:#7B7B96}
    .wl-input{height:46px;background:#FAFAFE;border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 16px;font-family:inherit;font-size:.84rem;color:#17153B;outline:none}.wl-input:focus{border-color:#5B2EFF}
    .wl-sel-wrap{position:relative}.wl-select{width:100%;height:46px;background:#FAFAFE;border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color:#17153B;outline:none;appearance:none;cursor:pointer}.wl-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}
    .wl-submit{width:100%;background:linear-gradient(90deg,#5B2EFF,#7B3FFF);color:#FFF;border:none;border-radius:14px;padding:12px 20px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(91,46,255,.2)}
    .wl-submit-out{background: var(--mud-palette-surface);color: var(--mud-palette-primary, #5B2EFF);border:1px solid var(--mud-palette-divider);box-shadow:none}

    /* جدول */
    .wl-table-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .wl-sec-title{font-size:.9rem;font-weight:800;color:#17153B;margin:0 0 16px}
    .wl-tbl-scroll{overflow-x:auto}.wl-table{width:100%;min-width:550px;border-collapse:collapse}
    .wl-table th{text-align:right;padding:12px 16px;font-size:.72rem;font-weight:700;color: var(--mud-palette-primary, #5B2EFF);border-bottom:1px solid #F0ECFA}
    .wl-table td{padding:12px 16px;font-size:.8rem;color:#17153B;border-bottom:1px solid #F8F6FC}
    .wl-td-date{font-size:.74rem;color: var(--mud-palette-text-secondary);white-space:nowrap}.wl-td-desc{font-weight:500}.wl-td-amt{font-weight:700;white-space:nowrap}
    .wl-amt-in{color:#24A148}.wl-amt-out{color:#FF4B4B}
    .wl-txn-type,.wl-status{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .wl-txn-type.wl-tt-in{background:var(--mud-palette-success-light);color:#24A148}.wl-txn-type.wl-tt-out{background:var(--mud-palette-error-light);color:#FF4B4B}
    .wl-status.wl-st-ok{background:var(--mud-palette-success-light);color:#24A148}.wl-status.wl-st-pend{background:var(--mud-palette-warning-light);color:#D38B00}.wl-status.wl-st-fail{background:var(--mud-palette-error-light);color:#FF4B4B}

    .wl-pag{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:.74rem;color: var(--mud-palette-text-secondary);flex-wrap:wrap;gap:8px}
    .wl-pag-btns{display:flex;gap:6px}.wl-pag-btn{padding:6px 14px;border-radius:10px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.76rem;font-weight:600;color: var(--mud-palette-primary, #5B2EFF);cursor:pointer}.wl-pag-btn:disabled{opacity:.35;cursor:not-allowed}
    .wl-pag-num{width:34px;height:34px;border-radius:10px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.76rem;font-weight:700;color: var(--mud-palette-text-secondary);cursor:pointer}.wl-pag-on{background:linear-gradient(90deg,#5B2EFF,#7B3FFF)!important;color:#FFF!important;border-color:transparent!important}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:750px){.wl-forms-row{grid-template-columns:1fr}.wl-balance-card{flex-direction:column;align-items:flex-start;padding:22px 20px}.wl-balance-val{font-size:1.4rem}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Student\Leaderboard.razor ── */
.leaderboard-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .leaderboard-page *, .leaderboard-page *::before, .leaderboard-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .lb-header-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 24px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .lb-header-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .lb-podium-wrap {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lb-podium-icon {
        color: #6A35FF !important;
        font-size: 28px !important;
    }

    .lb-header-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .lb-header-title {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .lb-header-sub {
        font-size: 0.84rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        font-weight: 500;
    }

    .lb-header-right {
        display: flex;
        align-items: center;
    }

    .lb-league-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #FFF8E1, #FFE082);
        padding: 8px 18px;
        border-radius: 50px;
        border: 1px solid #FFE082;
    }

    .lb-league-icon {
        color: #FDBB11 !important;
    }

    .lb-league-text {
        font-size: 0.84rem;
        font-weight: 700;
        color: #C79100;
    }

    /* ═══════════ تب‌های فیلتر ═══════════ */
    .lb-filter-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .lb-filter-tab {
        padding: 10px 22px;
        border-radius: 50px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .lb-filter-tab:hover {
        background: #F7F5FC;
        color: var(--mud-palette-primary, #6A35FF);
        border-color: var(--mud-palette-divider);
    }

    .lb-filter-active {
        background: linear-gradient(90deg, #6A35FF 0%, #7A4DFF 100%) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(106,53,255,0.25);
    }

    /* ═══════════ سکوی سه‌نفره ═══════════ */
    .lb-podium {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 16px;
        margin-bottom: 28px;
        padding: 0 10px;
    }

    .podium-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 8px 24px rgba(106,53,255,0.08);
        padding: 24px 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex: 1;
        max-width: 240px;
        position: relative;
        transition: transform 0.2s;
    }

    .podium-card:hover {
        transform: translateY(-4px);
    }

    .podium-gold {
        flex: 1.25;
        max-width: 280px;
        padding: 32px 24px 24px;
    }

    .winner {
        border-color: #FDBB11;
        box-shadow: 0 8px 28px rgba(253,187,17,0.18), 0 0 0 3px rgba(253,187,17,0.1);
    }

    .winner-crown {
        position: absolute;
        top: -16px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FDBB11, #F59E0B);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(253,187,17,0.3);
    }

    .crown-icon {
        color: #FFFFFF !important;
    }

    .podium-rank-badge {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 800;
        color: #FFFFFF;
    }

    .podium-rank-badge.gold { background: #FDBB11; }
    .podium-rank-badge.silver { background: #B8C1D6; }
    .podium-rank-badge.bronze { background: #D1844F; }

    .podium-medal-wrap {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gold-medal { background: rgba(253,187,17,0.15); }
    .silver-medal { background: rgba(184,193,214,0.15); }
    .bronze-medal { background: rgba(209,132,79,0.15); }

    .podium-medal-icon.gold-icon { color: #FDBB11 !important; font-size: 30px !important; }
    .podium-medal-icon.silver-icon { color: #B8C1D6 !important; font-size: 28px !important; }
    .podium-medal-icon.bronze-icon { color: #D1844F !important; font-size: 28px !important; }

    .podium-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .winner-avatar {
        width: 72px;
        height: 72px;
        font-size: 1.5rem;
        box-shadow: 0 6px 18px rgba(106,53,255,0.3);
    }

    .podium-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .podium-xp {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
    }

    .winner-xp {
        font-size: 0.9rem;
    }

    .podium-badges {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .podium-fire {
        color: var(--mud-palette-warning) !important;
    }

    .podium-change {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 20px;
    }

    .podium-change.up {
        color: var(--mud-palette-success);
        background: rgba(46,190,79,0.1);
    }

    .podium-change.down {
        color: #FF4D4D;
        background: rgba(255,77,77,0.1);
    }

    /* ═══════════ جدول رتبه‌بندی ═══════════ */
    .lb-table-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        overflow: hidden;
        margin-bottom: 24px;
    }

    .lb-table-header {
        display: grid;
        grid-template-columns: 60px 1fr 90px 70px 70px;
        gap: 8px;
        align-items: center;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        padding: 14px 20px;
        color: #FFFFFF;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .th-rank, .th-user, .th-xp, .th-badge {
        text-align: center;
    }

    .th-user { text-align: right; }

    .lb-table-body {
        display: flex;
        flex-direction: column;
    }

    .lb-table-row {
        display: grid;
        grid-template-columns: 60px 1fr 90px 70px 70px;
        gap: 8px;
        align-items: center;
        padding: 14px 20px;
        border-bottom: 1px solid var(--mud-palette-divider);
        transition: background 0.15s;
    }

    .lb-table-row:hover {
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .lb-table-row:last-child {
        border-bottom: none;
    }

    .lb-current-user-row {
        background: #F8F5FF;
        border-right: 4px solid #6A35FF;
    }

    .lb-current-user-row:hover {
        background: #F3EDFF;
    }

    .td-rank {
        display: flex;
        justify-content: center;
    }

    .rank-num {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .you-badge {
        background: linear-gradient(90deg, #6A35FF, #7A4DFF);
        color: #FFFFFF;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 12px;
    }

    .td-user {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-avatar-mini {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .user-name {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .td-xp {
        text-align: center;
    }

    .xp-val {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
    }

    .td-badges {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    .badge-fire-icon {
        color: var(--mud-palette-warning) !important;
        font-size: 16px !important;
    }

    .badge-count {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .td-change {
        display: flex;
        justify-content: center;
    }

    .change-badge {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 12px;
    }

    .change-badge.up {
        color: var(--mud-palette-success);
        background: rgba(46,190,79,0.1);
    }

    .change-badge.down {
        color: #FF4D4D;
        background: rgba(255,77,77,0.1);
    }

    .change-badge.neutral {
        color: var(--mud-palette-text-disabled);
    }

    /* ═══════════ کارت پیشرفت پایین ═══════════ */
    .lb-bottom-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .lb-bottom-left {
        flex: 1;
    }

    .lb-xp-next {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .lb-xp-next-text {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .lb-xp-track {
        height: 10px;
        background: #ECE7FF;
        border-radius: 8px;
        overflow: hidden;
    }

    .lb-xp-fill {
        height: 100%;
        width: 68%;
        border-radius: 8px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
    }

    .lb-xp-sub {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
    }

    .lb-bottom-right {
        display: flex;
        align-items: center;
    }

    .lb-share-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(180deg, #B9E7FF 0%, #8FD2FF 100%);
        color: #1B6BA0;
        border: none;
        border-radius: 14px;
        padding: 12px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        white-space: nowrap;
    }

    .lb-share-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(143,210,255,0.35);
    }

    .share-icon {
        color: #1B6BA0 !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .lb-podium {
            gap: 10px;
        }

        .podium-card {
            max-width: 200px;
            padding: 18px 14px 16px;
            border-radius: 22px;
        }

        .podium-gold {
            max-width: 220px;
            padding: 24px 16px 20px;
        }

        .winner-avatar {
            width: 56px;
            height: 56px;
            font-size: 1.2rem;
        }

        .podium-avatar {
            width: 44px;
            height: 44px;
            font-size: 1rem;
        }

        .lb-table-header,
        .lb-table-row {
            grid-template-columns: 50px 1fr 75px 60px 60px;
            padding: 12px 14px;
            gap: 4px;
        }

        .lb-bottom-card {
            flex-direction: column;
            align-items: stretch;
            padding: 18px 20px;
        }

        .lb-share-btn {
            justify-content: center;
        }
    }

    @@media (max-width: 600px) {
        .lb-header-card {
            flex-direction: column;
            gap: 14px;
            text-align: center;
            padding: 18px 16px;
        }

        .lb-header-left {
            flex-direction: column;
        }

        .lb-podium {
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .podium-card,
        .podium-gold {
            max-width: 100%;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            padding: 18px 16px;
        }

        .winner {
            order: -1;
        }

        .winner-crown {
            top: -14px;
        }

        .lb-table-header,
        .lb-table-row {
            grid-template-columns: 45px 1fr 65px 55px 50px;
            padding: 10px 10px;
            gap: 2px;
            font-size: 0.7rem;
        }

        .lb-table-header {
            font-size: 0.7rem;
        }

        .xp-val {
            font-size: 0.72rem;
        }

        .user-name {
            font-size: 0.76rem;
        }

        .lb-filter-tabs {
            gap: 6px;
        }

        .lb-filter-tab {
            padding: 8px 16px;
            font-size: 0.76rem;
        }
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Student\StudentPerformance.razor ── */
.sp-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .sp-page *,.sp-page *::before,.sp-page *::after{box-sizing:border-box}

    .sp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .sp-top-left{display:flex;align-items:center;gap:14px}
    .sp-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .sp-top-svg{color:#FFF!important}.sp-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.sp-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .sp-top-right{display:flex;gap:8px}.sp-sel-wrap{position:relative}.sp-select{height:44px;background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.82rem;color: var(--mud-palette-text-primary);outline:none;appearance:none;cursor:pointer}.sp-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}
    .sp-btn-export{display:flex;align-items:center;gap:4px;background:#D9EDFF;color:#1B6BA0;border:none;border-radius:14px;padding:10px 18px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer}

    /* KPI */
    .sp-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
    .sp-kpi{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:18px 20px;display:flex;align-items:center;gap:14px}
    .sp-kpi-icn{width:44px;height:44px;min-width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .sp-icn-purple{background:linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))}.sp-icn-purple .mud-icon-root{color:#6D3BFF!important}
    .sp-icn-green{background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)}.sp-icn-green .mud-icon-root{color:#22A447!important}
    .sp-icn-gold{background:linear-gradient(135deg,#FFF8E1,#FFE082)}.sp-icn-gold .mud-icon-root{color:#F5B62F!important}
    .sp-icn-orange{background:linear-gradient(135deg,var(--mud-palette-warning-light),#FFE0B2)}.sp-icn-orange .mud-icon-root{color:#FF8C32!important}
    .sp-kpi>div{flex:1;display:flex;flex-direction:column;gap:2px}.sp-kpi-lbl{font-size:.72rem;color:#7B7B96}.sp-kpi-val{font-size:1.3rem;font-weight:900;color:#1B1B1F}

    /* ردیف میانی */
    .sp-mid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .sp-chart-card,.sp-table-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .sp-sec-title{font-size:.9rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 16px}

    .sp-bars{display:flex;align-items:flex-end;justify-content:space-around;height:170px;gap:12px;padding-top:14px}
    .sp-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}.sp-bar-cnt{font-size:.66rem;color: var(--mud-palette-text-secondary);font-weight:600}
    .sp-bar-trk{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
    .sp-bar-fill{width:80%;max-width:50px;border-radius:10px 10px 0 0;min-height:6px;background:linear-gradient(180deg,#BDAEFF,#5B43FF)}.sp-bar-rng{font-size:.64rem;color:#7B7B96}

    .sp-tbl-scroll{overflow-x:auto}.sp-table{width:100%;min-width:400px;border-collapse:collapse}
    .sp-table th{text-align:right;padding:12px 14px;font-size:.72rem;font-weight:700;color:#6D3BFF;border-bottom:1px solid #F0ECFA}
    .sp-table td{padding:12px 14px;font-size:.8rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F8F6FC}
    .sp-td-rank{text-align:center;font-weight:700;color: var(--mud-palette-text-secondary);width:30px}
    .sp-st-cell{display:flex;align-items:center;gap:8px}.sp-st-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:.66rem;font-weight:700}
    .sp-td-score{font-weight:700;color:#6D3BFF}
    .sp-chg{font-size:.72rem;font-weight:700}.sp-chg-up{color:#22A447}.sp-chg-down{color:#FF4D4F}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.sp-kpi-row{grid-template-columns:repeat(2,1fr)}.sp-mid{grid-template-columns:1fr}}
    @@media(max-width:600px){.sp-kpi-row{grid-template-columns:1fr}.sp-top{flex-direction:column;align-items:flex-start}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Student\Subjects.razor ── */
.sm-page{
        font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width:1150px;margin:0 auto;padding:0 4px 40px;
    }
    .sm-page *,.sm-page *::before,.sm-page *::after{box-sizing:border-box}

    /* ─── هدر ─── */
    .sm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .sm-top-left{display:flex;align-items:center;gap:14px}
    .sm-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .sm-top-svg{color:#FFF!important}
    .sm-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.sm-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .sm-top-acts{display:flex;gap:8px}
    .sm-btn-primary{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}
    .sm-btn-primary:hover{transform:translateY(-1px)}
    .sm-btn-outline{display:flex;align-items:center;gap:6px;background: var(--mud-palette-surface);color:#6D3BFF;border:1px solid var(--mud-palette-divider);border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
    .sm-btn-sm{font-size:.76rem!important;padding:8px 16px!important;border-radius:12px!important}

    /* ─── بدنه ─── */
    .sm-body{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}

    /* ─── پنل درخت ─── */
    .sm-tree-panel{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 10px 35px rgba(60,72,88,.08);overflow:hidden}
    .sm-tree-header{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom: 1px solid var(--mud-palette-divider);font-size:.88rem;font-weight:700;color:#1B1B1F}
    .sm-tree-hdr-icon{color:#6D3BFF!important}.sm-tree-count{font-size:.72rem;color: var(--mud-palette-text-secondary);font-weight:500;margin-right:auto}

    .sm-tree{padding:10px 0}
    .sm-tree-node{display:flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;transition:background .15s;position:relative}
    .sm-tree-node:hover{background:#F8F6FC}
    .sm-connector{position:absolute;right:14px;top:50%;width:12px;height:0;border-top:1.5px dashed var(--mud-palette-divider)}
    .sm-expand-btn{width:24px;height:24px;border-radius:6px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-background);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:transform .2s;flex-shrink:0}
    .sm-expand-btn.expanded{transform:rotate(-90deg)}
    .sm-expand-spacer{width:24px;height:24px;flex-shrink:0}
    .sm-node-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .icon-folder{background:#FFF8E1}.icon-folder .mud-icon-root{color:#F5B62F!important}
    .icon-leaf{background:var(--mud-palette-success-light)}.icon-leaf .mud-icon-root{color:#67C23A!important}
    .sm-node-name{font-size:.84rem;font-weight:600;color: var(--mud-palette-text-primary);flex:1}
    .sm-node-count{font-size:.7rem;color:var(--mud-palette-text-disabled);font-weight:600;min-width:30px;text-align:center}
    .sm-node-acts{display:flex;gap:4px}
    .sm-node-act{width:30px;height:30px;border-radius:8px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:all .15s}
    .sm-node-act:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:#6D3BFF;border-color:#6D3BFF}
    .act-del{color:var(--mud-palette-error);border-color:#FFCDD2}.act-del:hover{background:var(--mud-palette-error-light);border-color:var(--mud-palette-error)}

    /* ─── پنل جزئیات ─── */
    .sm-detail-panel{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 10px 35px rgba(60,72,88,.08);padding:28px 24px;position:sticky;top:24px}
    .sm-detail-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
    .sm-detail-illust{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#FFF8E1,#FFE082);display:flex;align-items:center;justify-content:center}
    .sm-detail-folder{color:#F5B62F!important;font-size:40px!important}
    .sm-detail-name{font-size:1.1rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0}
    .sm-detail-stats{display:flex;gap:24px}
    .sm-stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}
    .sm-stat-num{font-size:1.1rem;font-weight:800;color:#6D3BFF}.sm-stat-lbl{font-size:.7rem;color:#7B7B96}
    .sm-detail-desc{font-size:.8rem;color: var(--mud-palette-text-secondary);line-height:1.6;margin:0}
    .sm-detail-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){
        .sm-body{grid-template-columns:1fr}
        .sm-detail-panel{position:static}
    }
    @@media(max-width:600px){
        .sm-title{font-size:1.05rem}
        .sm-tree-node{padding:8px 12px;gap:6px}
        .sm-node-name{font-size:.78rem}
        .sm-node-acts .sm-node-act{width:26px;height:26px}
    }

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Support\Help.razor ── */
.hlp-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .hlp-page *,.hlp-page *::before,.hlp-page *::after{box-sizing:border-box}

    .hlp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px}
    .hlp-header-left{display:flex;align-items:center;gap:14px}
    .hlp-header-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .hlp-header-svg{color:#FFF!important}.hlp-title{font-size:1.25rem;font-weight:900;color:#1F2350;margin:0}.hlp-sub{font-size:.8rem;color:#55607A;margin:2px 0 0}
    .hlp-search-wrap{position:relative}.hlp-search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;z-index:2}
    .hlp-search{width:280px;height:46px;background: var(--mud-palette-surface);border:1px solid #EAEFFC;border-radius:16px;padding:0 42px 0 14px;font-family:inherit;font-size:.84rem;color:#1F2350;outline:none}.hlp-search:focus{border-color:#5B43FF}

    .hlp-body{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
    .hlp-main{display:flex;flex-direction:column;gap:16px}
    .hlp-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}

    .hlp-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid #EAEFFC;box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .hlp-sec-title{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:800;color:#1F2350;margin:0 0 16px}.hlp-sec-icn{color:#5B43FF!important}

    /* FAQ */
    .hlp-faq-item{border:1px solid #EAEFFC;border-radius:18px;overflow:hidden;margin-bottom:8px;transition:background .2s}
    .hlp-faq-open{background:#F8F6FF;border-color:var(--mud-palette-divider)}
    .hlp-faq-item:last-child{margin-bottom:0}
    .hlp-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:none;border:none;font-family:inherit;font-size:.84rem;font-weight:700;color:#1F2350;cursor:pointer;text-align:right}
    .hlp-faq-arrow{color: var(--mud-palette-text-secondary);transition:transform .25s}.hlp-faq-open .hlp-faq-arrow{transform:rotate(180deg);color:#5B43FF}
    .hlp-faq-a{padding:0 18px 14px}.hlp-faq-a p{font-size:.8rem;color:#55607A;line-height:1.7;margin:0}

    /* تایم‌لاین */
    .hlp-smart-timeline{display:flex;flex-direction:column;gap:0}
    .hlp-step{display:flex;gap:16px;position:relative}
    .hlp-step:not(:last-child) .hlp-step-dot-wrap::after{content:"";position:absolute;top:16px;right:7px;width:2px;height:calc(100% + 4px);background:#EAEFFC}
    .hlp-step-dot-wrap{position:relative;flex-shrink:0;padding-top:14px}
    .hlp-step-dot{width:16px;height:16px;border-radius:50%;background:#5B43FF;box-shadow:0 0 0 4px rgba(91,67,255,.12)}
    .hlp-step-card{flex:1;display:flex;align-items:flex-start;gap:14px;background:#FBFBFF;border:1px solid #EAEFFC;border-radius:16px;padding:14px 16px;margin-bottom:14px}
    .hlp-step-icon{width:36px;height:36px;min-width:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF}.hlp-step-title{font-size:.82rem;font-weight:700;color:#1F2350;display:block}.hlp-step-desc{font-size:.74rem;color:#55607A;margin:4px 0 0;line-height:1.5}

    /* راه‌های ارتباطی */
    .hlp-contact-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
    .hlp-contact-item{display:flex;align-items:center;gap:12px}
    .hlp-contact-icon{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF}.hlp-ci-purple{background:var(--mud-palette-divider-light)}.hlp-ci-purple .mud-icon-root{color:#6D3BFF!important}.hlp-ci-blue{background:var(--mud-palette-info-light)}.hlp-ci-blue .mud-icon-root{color:#3BA6FF!important}.hlp-ci-green{background:var(--mud-palette-success-light)}.hlp-ci-green .mud-icon-root{color:#22A447!important}
    .hlp-contact-item>div{display:flex;flex-direction:column;gap:1px}.hlp-contact-lbl{font-size:.72rem;color:#55607A}.hlp-contact-val{font-size:.82rem;font-weight:600;color:#1F2350}

    .hlp-online-badge{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:#22A447;background:var(--mud-palette-success-light);border-radius:12px;padding:10px 16px}.hlp-online-dot{width:10px;height:10px;border-radius:50%;background:#22A447;box-shadow:0 0 0 3px rgba(34,164,71,.15)}

    /* بنر */
    .hlp-banner{background:linear-gradient(135deg,#6D3BFF,#4A3DFF);border-radius:24px;padding:24px 22px;color:#FFF;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
    .hlp-banner-icon{font-size:36px!important}.hlp-banner-title{font-size:.95rem;font-weight:800}.hlp-banner-desc{font-size:.78rem;opacity:.85;margin:0;line-height:1.6}
    .hlp-banner-btn{background: var(--mud-palette-surface);color:#6D3BFF;border:none;border-radius:14px;padding:10px 24px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.15)}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.hlp-body{grid-template-columns:1fr}.hlp-side{position:static}.hlp-search{width:100%}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Support\Support.razor ── */
.sup-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .sup-page *,.sup-page *::before,.sup-page *::after{box-sizing:border-box}

    .sup-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
    .sup-top-left{display:flex;align-items:center;gap:14px}
    .sup-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#5B2EFF,#7B4EFF);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(91,46,255,.2)}
    .sup-top-svg{color:#FFF!important}.sup-title{font-size:1.25rem;font-weight:900;color:#1B174F;margin:0}.sup-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}

    .sup-body{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
    .sup-main{display:flex;flex-direction:column;gap:16px}

    .sup-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid #E9E7F8;box-shadow:0 4px 20px rgba(0,0,0,0.05);padding:22px 24px}
    .sup-sec-title{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:800;color:#1B174F;margin:0 0 16px}.sup-sec-icn{color:#5B2EFF!important}

    /* فرم */
    .sup-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.sup-field label{font-size:.76rem;font-weight:700;color:#7B7B96}
    .sup-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .sup-input{height:46px;background:#FAFAFE;border:1px solid #E9E7F8;border-radius:14px;padding:0 16px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none}.sup-input:focus{border-color:#5B2EFF}
    .sup-sel-wrap{position:relative}.sup-select{width:100%;height:46px;background:#FAFAFE;border:1px solid #E9E7F8;border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none;appearance:none;cursor:pointer}.sup-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}
    .sup-textarea{background:#FAFAFE;border:1px solid #E9E7F8;border-radius:14px;padding:12px 16px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none;resize:none}.sup-textarea:focus{border-color:#5B2EFF}

    .sup-upload-area{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px;border:2px dashed var(--mud-palette-divider);border-radius:18px;background:#FBFAFF;margin-bottom:14px;cursor:pointer;transition:border-color .2s}.sup-upload-area:hover{border-color:#5B2EFF}.sup-upload-icon{color:#5B2EFF!important;font-size:32px!important}
    .sup-upload-area>span{font-size:.82rem;color:#1B174F;font-weight:600}.sup-upload-hint{font-size:.7rem!important;color:var(--mud-palette-text-disabled)!important;font-weight:400!important}

    .sup-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(90deg,#5B2EFF,#7B4EFF);color:#FFF;border:none;border-radius:16px;padding:14px 20px;font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(91,46,255,.25)}
    .sup-submit:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(91,46,255,.35)}
    .sup-notice{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:.74rem;color: var(--mud-palette-text-secondary);justify-content:center}.sup-notice .mud-icon-root{color:var(--mud-palette-text-secondary)!important}

    /* FAQ */
    .sup-faq{border:1px solid #E9E7F8;border-radius:16px;overflow:hidden;margin-bottom:8px}.sup-faq:last-child{margin-bottom:0}.sup-faq-open{background:#F2EEFF;border-color:var(--mud-palette-divider)}
    .sup-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:none;border:none;font-family:inherit;font-size:.82rem;font-weight:700;color:#1B174F;cursor:pointer;text-align:right}
    .sup-faq-arr{color: var(--mud-palette-text-secondary);transition:transform .25s}.sup-faq-open .sup-faq-arr{transform:rotate(180deg);color:#5B2EFF}
    .sup-faq-a{padding:0 16px 14px}.sup-faq-a p{font-size:.78rem;color:#55607A;line-height:1.7;margin:0}

    /* تیکت‌ها */
    .sup-side{display:flex;flex-direction:column;gap:10px;position:sticky;top:24px}
    .sup-ticket-card{background: var(--mud-palette-surface);border-radius:20px;border:1px solid #E9E7F8;padding:16px 18px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s}.sup-ticket-card:hover{box-shadow:0 4px 14px rgba(0,0,0,0.06)}
    .sup-ticket-top{display:flex;justify-content:space-between;align-items:center}.sup-ticket-title{font-size:.84rem;font-weight:700;color:#1B174F}.sup-ticket-date{font-size:.7rem;color:var(--mud-palette-text-disabled)}
    .sup-ticket-meta{display:flex;gap:8px}
    .sup-priority,.sup-status{display:inline-block;font-size:.66rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .prio-normal{background:var(--mud-palette-success-light);color:#24A148}.prio-important{background:var(--mud-palette-warning-light);color:#D38B00}.prio-urgent{background:var(--mud-palette-error-light);color:#FF4B4B}
    .st-open{background:var(--mud-palette-info-light);color:#3BA6FF}.st-progress{background:var(--mud-palette-warning-light);color:#D38B00}.st-closed{background:var(--mud-palette-success-light);color:#24A148}

    @@media(max-width:900px){.sup-body{grid-template-columns:1fr}.sup-side{position:static}}
    @@media(max-width:600px){.sup-row-2{grid-template-columns:1fr}.sup-card{padding:16px 14px}}

/* ── E:\Projects\Farup\farup\FarUp.LMS\Farup.LMS.Frontend\Farup.LMS.Frontend.Client\Pages\Support\SupportChat.razor ── */
.sc-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:750px;margin:0 auto;padding:0 4px 40px;display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:600px}
    .sc-page *,.sc-page *::before,.sc-page *::after{box-sizing:border-box}

    /* هدر */
    .sc-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background: var(--mud-palette-surface);border-radius:24px 24px 0 0;border:1px solid #E9E7F8;border-bottom:none}
    .sc-top-left{display:flex;align-items:center;gap:14px}
    .sc-back-btn{width:38px;height:38px;border-radius:50%;border:1px solid #E9E7F8;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}
    .sc-agent-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#5B2EFF,#7B4EFF);display:flex;align-items:center;justify-content:center;position:relative}
    .sc-agent-svg{color:#FFF!important}.sc-online-dot{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#24A148;border:2px solid #FFF}
    .sc-title{font-size:1.05rem;font-weight:800;color:#1B174F;margin:0}.sc-sub{font-size:.74rem;color: var(--mud-palette-text-secondary);margin:1px 0 0}
    .sc-close-btn{width:38px;height:38px;border-radius:50%;border:1px solid #E9E7F8;display:flex;align-items:center;justify-content:center;background: var(--mud-palette-surface);cursor:pointer;color:#7B7B96}

    /* بدنه چت */
    .sc-chat-body{flex:1;overflow-y:auto;padding:16px 20px;background:#FBFAFF;border:1px solid #E9E7F8;border-top:none;border-bottom:none;display:flex;flex-direction:column;gap:16px}
    .sc-date-divider{text-align:center}.sc-date-divider span{font-size:.7rem;color:var(--mud-palette-text-disabled);background:#FBFAFF;padding:0 14px}

    .sc-msg{display:flex;gap:10px;max-width:85%}.sc-msg-agent{align-self:flex-start}.sc-msg-user{align-self:flex-end;flex-direction:row-reverse}
    .sc-msg-avatar{width:34px;height:34px;min-width:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;align-self:flex-end}
    .sc-msg-bubble{padding:12px 16px;border-radius:20px;position:relative}
    .sc-bubble-agent{background: var(--mud-palette-surface);border:1px solid #E9E7F8;border-bottom-right-radius:6px}
    .sc-bubble-user{background:linear-gradient(90deg,#5B2EFF,#7B4EFF);color:#FFF;border-bottom-left-radius:6px}
    .sc-bubble-user p{color:#FFF}.sc-msg-bubble p{font-size:.82rem;line-height:1.7;margin:0 0 14px}.sc-msg-bubble p:last-child{margin-bottom:0}
    .sc-msg-time{font-size:.64rem;color:var(--mud-palette-text-secondary);display:block;text-align:left;margin-top:6px}.sc-bubble-user .sc-msg-time{color:rgba(255,255,255,.6)}

    .sc-quick-links{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
    .sc-quick-link{background:#F2EEFF;color: var(--mud-palette-primary, #5B2EFF);border:1px solid var(--mud-palette-divider);border-radius:12px;padding:9px 14px;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;text-align:right}

    /* تایپ */
    .sc-typing-indicator{display:flex;align-items:flex-end;gap:10px;align-self:flex-start}
    .sc-typing-dots{display:flex;gap:5px;padding:12px 16px;background: var(--mud-palette-surface);border:1px solid #E9E7F8;border-radius:20px;border-bottom-right-radius:6px}
    .sc-typing-dots span{width:8px;height:8px;border-radius:50%;background: rgba(139,92,246,0.15);animation:sc-bounce 1.4s infinite ease-in-out}.sc-typing-dots span:nth-child(1){animation-delay:0s}.sc-typing-dots span:nth-child(2){animation-delay:.2s}.sc-typing-dots span:nth-child(3){animation-delay:.4s}
    @@keyframes sc-bounce{0%,80%,100%{transform:scale(.6)}40%{transform:scale(1)}}

    /* امتیازدهی */
    .sc-rating-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background: var(--mud-palette-surface);border:1px solid #E9E7F8;border-top:none;font-size:.8rem;color:#7B7B96}
    .sc-rating-emojis{display:flex;gap:6px}.sc-rating-emojis button{width:38px;height:38px;border-radius:50%;border:1px solid #E9E7F8;background: var(--mud-palette-surface);font-size:1.1rem;cursor:pointer;transition:all .15s}
    .sc-rating-emojis button:hover,.sc-emoji-sel{background:#F2EEFF!important;border-color:#5B2EFF!important;transform:scale(1.1)}

    /* ورودی */
    .sc-input-bar{display:flex;align-items:center;gap:8px;padding:12px 20px;background: var(--mud-palette-surface);border-radius:0 0 24px 24px;border:1px solid #E9E7F8;border-top:none}
    .sc-attach-btn{width:40px;height:40px;min-width:40px;border-radius:50%;border:1px solid #E9E7F8;background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}
    .sc-chat-input{flex:1;height:44px;background:#FAFAFE;border:1px solid #E9E7F8;border-radius:22px;padding:0 18px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none}.sc-chat-input:focus{border-color:#5B2EFF}
    .sc-send-btn{width:44px;height:44px;min-width:44px;border-radius:50%;background:linear-gradient(90deg,#5B2EFF,#7B4EFF);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#FFF;box-shadow:0 4px 14px rgba(91,46,255,.25)}

    @@media(max-width:600px){.sc-page{height:calc(100vh - 80px);border-radius:0}.sc-top{border-radius:0}}



/* ═══════════ Extracted from Razor files (31 blocks) ═══════════ */
/* $fileRel */
.auth-guard-loading {
        display: flex; align-items: center; justify-content: center;
        min-height: 100vh;
    }

/* $fileRel */
/* ================================================================
       FONT IMPORT
       ================================================================ */
    /* ================================================================
       CONTAINER — 3-column Flexbox, RTL
       ================================================================ */
    .profile-row {
        display: flex;
        gap: 18px;
        font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    }

    /* ================================================================
       SHARED CARD
       ================================================================ */
    .pr-card {
        background: var(--mud-palette-surface);
        border-radius: 14px;
        padding: 18px 20px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
    }

    /* ================================================================
       1. PROFILE CARD  (rightmost, flex: 1.4)
       ================================================================ */
    .pr-card-profile {
        flex: 1.4;
        min-width: 0;
    }

    .pr-avatar-wrapper {
        flex-shrink: 0;
        margin-left: 14px;
    }

    .pr-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6C5CE7, #9B59B6);
        color: #FFFFFF;
        font-size: 1.7rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pr-profile-body {
        flex: 1;
        min-width: 0;
    }

    .pr-name-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .pr-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        white-space: nowrap;
    }

    .pr-level-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--mud-palette-primary-hover, #F0EFFF);
        color: var(--mud-palette-primary, #6C5CE7);
        font-size: 0.72rem;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .pr-badge-star {
        flex-shrink: 0;
    }

    .pr-xp-label {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
        margin-bottom: 7px;
    }

    .pr-xp-track {
        width: 100%;
        height: 9px;
        background: var(--mud-palette-divider);
        border-radius: 5px;
        overflow: hidden;
    }

    .pr-xp-fill {
        height: 100%;
        width: 62%;
        border-radius: 5px;
        background: linear-gradient(90deg, #6C5CE7 0%, #4A90E2 100%);
        transition: width 0.5s ease;
    }

    /* ================================================================
       2. STATS CARD  (center, flex: 0.8)
       ================================================================ */
    .pr-card-stats {
        flex: 0.8;
        justify-content: space-evenly;
    }

    .pr-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .pr-stat-icon {
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pr-stat-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        white-space: nowrap;
    }

    .pr-stat-label {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        white-space: nowrap;
    }

    .pr-stat-divider {
        width: 1px;
        height: 52px;
        background: var(--mud-palette-divider);
        flex-shrink: 0;
    }

    /* ================================================================
       3. ACHIEVEMENTS CARD  (leftmost, flex: 1)
       ================================================================ */
    .pr-card-achievements {
        flex: 1;
        flex-direction: column;
        align-items: stretch;
    }

    .pr-achv-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .pr-achv-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .pr-achv-link {
        font-size: 0.75rem;
        color: var(--mud-palette-primary, #6C5CE7);
        text-decoration: none;
        font-weight: 500;
    }

    .pr-achv-link:hover {
        text-decoration: underline;
    }

    /* --- Medals row --- */
    .pr-achv-medals {
        display: flex;
        justify-content: center;
        gap: 18px;
    }

    .pr-medal-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
    }

    /* --- Hexagon base --- */
    .pr-medal-hex {
        width: 54px;
        height: 54px;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .pr-medal-hex:hover {
        transform: scale(1.08);
    }

    /* --- Hexagon colour variants --- */
    .pr-hex-purple {
        background: linear-gradient(135deg, #6C5CE7 0%, #9B59B6 100%);
    }

    .pr-hex-orange {
        background: linear-gradient(135deg, #E74C3C 0%, #F39C12 100%);
    }

    .pr-hex-blue {
        background: linear-gradient(135deg, #3498DB 0%, #00B4D8 100%);
    }

    /* --- Medal labels --- */
    .pr-medal-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        text-align: center;
        white-space: nowrap;
    }

    /* ================================================================
       RESPONSIVE
       ================================================================ */
    @@media (max-width: 1024px) {
        .profile-row {
            flex-wrap: wrap;
        }
        .pr-card-profile {
            flex: 1 1 100%;
        }
        .pr-card-stats {
            flex: 1 1 45%;
        }
        .pr-card-achievements {
            flex: 1 1 45%;
        }
    }

    @@media (max-width: 640px) {
        .profile-row {
            flex-direction: column;
            gap: 10px;
        }
        .pr-card {
            padding: 14px;
        }
        .pr-card-stats,
        .pr-card-achievements {
            flex: 1 1 auto;
        }
        .pr-achv-medals {
            gap: 12px;
        }
        .pr-medal-hex {
            width: 44px;
            height: 44px;
        }
    }

/* $fileRel */
.login-layout {
        min-height: 100vh;
        background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%);
        font-family: 'Vazirmatn','IRANSans','Tahoma',sans-serif;
        position: relative; transition: background 0.3s ease;
    }
    .login-layout.login-dark {
        background: linear-gradient(135deg, #020617 0%, #0F172A 100%);
    }
    .login-theme-toggle { position: absolute; top: 12px; left: 12px; z-index: 10; }

/* $fileRel */
/* ===== Sidebar Container ===== */
    .sidebar-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: var(--mud-palette-surface);
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* ===== Logo ===== */
    .sidebar-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 24px 20px 16px 20px;
        flex-shrink: 0;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .logo-text {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        white-space: nowrap;
    }

    /* ===== Navigation ===== */
    .sidebar-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #D1D5DB transparent;
    }

    .sidebar-nav::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background-color: #D1D5DB;
        border-radius: 4px;
    }

    /* ===== Nav Items ===== */
    .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 10px;
        text-decoration: none;
        color: var(--mud-palette-text-primary);
        font-size: 0.95rem;
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
        position: relative;
        white-space: nowrap;
        cursor: pointer;
    }

    .nav-item:hover {
        background-color: #F0EFFF;
        color: var(--mud-palette-primary, #6C5CE7);
    }

    .nav-item:hover .nav-icon {
        color: var(--mud-palette-primary, #6C5CE7);
    }

    .nav-item.active {
        background-color: var(--mud-palette-primary, #6C5CE7);
        color: #FFFFFF;
        box-shadow: 0 2px 8px rgba(108, 92, 231, 0.35);
    }

    .nav-item.active .nav-icon {
        color: #FFFFFF;
    }

    .nav-item.active .nav-badge {
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-primary, #6C5CE7);
    }

    /* ===== Nav Icon ===== */
    .nav-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        color: #666666;
        transition: color 0.2s ease;
    }

    /* ===== Nav Label ===== */
    .nav-label {
        flex: 1;
        line-height: 1.4;
    }

    /* ===== Notification Badge ===== */
    .nav-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 11px;
        background-color: var(--mud-palette-primary, #6C5CE7);
        color: #FFFFFF;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        flex-shrink: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* ===== Footer / Bottom Card ===== */
    .sidebar-footer {
        flex-shrink: 0;
        padding: 12px;
    }

    .motivation-card {
        position: relative;
        background-color: #F0F3FF;
        border-radius: 14px;
        padding: 20px 16px 24px 16px;
        text-align: center;
        overflow: hidden;
    }

    .motivation-stars-top {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }

    .motivation-text {
        color: var(--mud-palette-primary, #6C5CE7);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.6;
        margin: 0 0 12px 0;
    }

    .motivation-stars-bottom {
        display: flex;
        justify-content: flex-start;
        padding-left: 4px;
    }

    /* ===== Responsive ===== */
    @@media (max-width: 640px) {
        .sidebar-container {
            height: auto;
        }

        .sidebar-logo {
            padding: 16px;
        }

        .nav-item {
            padding: 10px 12px;
            font-size: 0.85rem;
        }

        .motivation-card {
            padding: 16px 12px 20px 12px;
        }
    }

    @@media (min-width: 641px) {
        .sidebar-container {
            min-width: 260px;
            max-width: 260px;
        }
    }

/* $fileRel */
.analytics-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1050px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .analytics-page *, .analytics-page *::before, .analytics-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .an-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .an-header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .an-header-icon-wrap {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .an-header-icon {
        color: #6A35FF !important;
        font-size: 26px !important;
    }

    .an-header-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .an-header-title {
        font-size: 1.35rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .an-header-sub {
        font-size: 0.84rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
    }

    .an-header-right {
        display: flex;
        align-items: center;
    }

    .an-date-range {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 12px;
        padding: 8px 16px;
        font-size: 0.8rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .an-date-icon {
        color: var(--mud-palette-text-secondary) !important;
    }

    /* ═══════════ کارت‌های KPI ═══════════ */
    .an-kpi-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 22px;
    }

    .an-kpi-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .kpi-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kpi-icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
    }

    .kpi-icon-xp { background: linear-gradient(135deg, #6A35FF, #7A4DFF); }
    .kpi-icon-badge { background: linear-gradient(135deg, #FDBB11, #F59E0B); }
    .kpi-icon-streak { background: linear-gradient(135deg, #FF7A2D, #FF5A5A); }

    .kpi-growth {
        font-size: 0.78rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 12px;
    }

    .kpi-growth.up {
        color: var(--mud-palette-success);
        background: rgba(46,190,79,0.1);
    }

    .kpi-value {
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        line-height: 1;
    }

    .kpi-total {
        font-size: 1rem;
        color: var(--mud-palette-text-disabled);
        font-weight: 600;
    }

    .kpi-label {
        font-size: 0.8rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .kpi-mini-bar {
        height: 6px;
        background: #ECE7FF;
        border-radius: 3px;
        overflow: hidden;
    }

    .kpi-mini-fill {
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #6A35FF, #7A4DFF);
    }

    .badge-fill {
        background: linear-gradient(90deg, #FDBB11, #F59E0B) !important;
    }

    .kpi-streak-dots {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }

    .streak-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .streak-filled { background: #FF7A2D; }
    .streak-empty { background: var(--mud-palette-divider); }

    /* ═══════════ نمودارها ═══════════ */
    .an-charts-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 22px;
    }

    .an-chart-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .chart-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 20px 0;
    }

    .chart-header-icon {
        color: #6A35FF !important;
    }

    .chart-title {
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .chart-body {
        padding: 10px 8px 16px;
    }

    .xp-chart-svg {
        width: 100%;
        height: auto;
    }

    .radar-chart-svg {
        width: 100%;
        height: auto;
        max-height: 320px;
    }

    .heatmap-legend {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-right: auto;
    }

    .legend-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-disabled);
    }

    .legend-cell {
        width: 12px;
        height: 12px;
        border-radius: 3px;
    }

    /* ═══════════ هشدار موفقیت ═══════════ */
    .an-success-alert {
        background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9);
        border-radius: 20px;
        border: 1px solid #A5D6A7;
        padding: 16px 22px;
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 22px;
    }

    .success-icon-wrap {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--mud-palette-success);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .success-icon {
        color: #FFFFFF !important;
    }

    .success-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }

    .success-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: #1B5E20;
    }

    .success-text {
        font-size: 0.82rem;
        color: #2E7D32;
        font-weight: 500;
    }

    .success-celebrate {
        color: #FDBB11 !important;
    }

    /* ═══════════ بنر اشتراک ═══════════ */
    .an-insight-banner {
        background: linear-gradient(135deg, var(--mud-palette-info-light), #BBDEFB);
        border-radius: 20px;
        border: 1px solid #90CAF9;
        padding: 18px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 22px;
    }

    .insight-left {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1;
        min-width: 0;
    }

    .insight-icon-wrap {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4D8DFF, #2D6CFF);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .insight-diamond {
        color: #FFFFFF !important;
    }

    .insight-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .insight-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: #0D47A1;
    }

    .insight-desc {
        font-size: 0.78rem;
        color: #1565C0;
        line-height: 1.6;
    }

    .insight-btn {
        background: linear-gradient(90deg, #4D8DFF, #2D6CFF);
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.2s;
    }

    .insight-btn:hover { opacity: 0.9; }

    /* ═══════════ Heatmap ═══════════ */
    .an-heatmap-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 16px 20px 20px;
        margin-bottom: 22px;
    }

    .an-heatmap-card .chart-card-header {
        padding: 0 0 14px;
    }

    .heatmap-grid {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .heatmap-row-labels {
        display: grid;
        grid-template-columns: 60px repeat(7, 1fr);
        gap: 4px;
        text-align: center;
        font-size: 0.7rem;
        color: var(--mud-palette-text-disabled);
        font-weight: 500;
        padding-right: 0;
    }

    .heatmap-week {
        display: grid;
        grid-template-columns: 60px repeat(7, 1fr);
        gap: 4px;
        align-items: center;
    }

    .heatmap-week-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
        text-align: right;
        padding-left: 6px;
    }

    .heatmap-cell {
        aspect-ratio: 1;
        border-radius: 5px;
        transition: transform 0.15s;
    }

    .heatmap-cell:hover {
        transform: scale(1.2);
        outline: 1.5px solid #6A35FF;
    }

    .hm-0 { background: var(--mud-palette-primary-hover, #F5F2FD); }
    .hm-1 { background: rgba(139,92,246,0.15); }
    .hm-2 { background: #A084E0; }
    .hm-3 { background: #7A4DFF; }
    .hm-4 { background: #5E2FFF; }

    /* ═══════════ CTA پایین ═══════════ */
    .an-bottom-cta {
        position: sticky;
        bottom: 16px;
        z-index: 10;
    }

    .an-cta-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        border-radius: 20px;
        padding: 16px 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .an-cta-inner:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(94,47,255,0.35);
    }

    .an-cta-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .an-cta-icon {
        color: #FFFFFF !important;
        font-size: 32px !important;
    }

    .an-cta-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .an-cta-title {
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 700;
    }

    .an-cta-sub {
        color: rgba(255,255,255,0.7);
        font-size: 0.76rem;
    }

    .an-cta-arrow {
        color: rgba(255,255,255,0.8) !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .an-kpi-row {
            grid-template-columns: repeat(2, 1fr);
        }

        .an-charts-row {
            grid-template-columns: 1fr;
        }

        .an-kpi-card {
            padding: 16px 18px;
        }

        .kpi-value {
            font-size: 1.4rem;
        }

        .heatmap-grid {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .an-insight-banner {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .insight-left {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .insight-btn {
            align-self: center;
        }
    }

    @@media (max-width: 600px) {
        .an-kpi-row {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .an-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .an-header-title {
            font-size: 1.15rem;
        }

        .an-success-alert {
            flex-direction: column;
            text-align: center;
            padding: 14px 16px;
        }

        .an-cta-inner {
            padding: 14px 18px;
            border-radius: 16px;
        }

        .an-cta-title {
            font-size: 0.88rem;
        }

        .heatmap-cell {
            border-radius: 3px;
        }

        .heatmap-row-labels,
        .heatmap-week {
            grid-template-columns: 45px repeat(7, 1fr);
            gap: 2px;
        }
    }

/* $fileRel */
.fn-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .fn-page *,.fn-page *::before,.fn-page *::after{box-sizing:border-box}

    .fn-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .fn-top-left{display:flex;align-items:center;gap:14px}
    .fn-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .fn-top-svg{color:#FFF!important}
    .fn-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.fn-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}

    .fn-segmented{display:flex;gap:0;border: 1px solid var(--mud-palette-divider);border-radius:16px;overflow:hidden}
    .fn-seg-btn{padding:9px 20px;border:none;background: var(--mud-palette-surface);font-family:inherit;font-size:.82rem;font-weight:600;color: var(--mud-palette-text-secondary);cursor:pointer}.fn-seg-btn:hover{background:#F5F2FD}
    .fn-seg-on{background:linear-gradient(135deg,#6D3BFF,#4A3DFF)!important;color:#FFF!important}

    /* KPI */
    .fn-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
    .fn-kpi{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:18px 20px;display:flex;align-items:center;gap:14px}
    .fn-kpi-icon{width:44px;height:44px;min-width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .fn-kpi-purple{background:linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))}.fn-kpi-purple .mud-icon-root{color:#6D3BFF!important}
    .fn-kpi-gold{background:linear-gradient(135deg,#FFF8E1,#FFE082)}.fn-kpi-gold .mud-icon-root{color:#F5B62F!important}
    .fn-kpi-blue{background:linear-gradient(135deg,var(--mud-palette-info-light),#BBDEFB)}.fn-kpi-blue .mud-icon-root{color:#3792FF!important}
    .fn-kpi-green{background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)}.fn-kpi-green .mud-icon-root{color:#22A447!important}
    .fn-kpi>div{flex:1;display:flex;flex-direction:column;gap:2px}.fn-kpi-lbl{font-size:.72rem;color:#7B7B96}.fn-kpi-val{font-size:1.1rem;font-weight:900;color:#1B1B1F}.fn-kpi-val small{font-size:.66rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .fn-kpi-chg{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px}.fn-kpi-chg.up{color:#22A447;background:rgba(34,164,71,.1)}

    /* ردیف میانی */
    .fn-mid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
    .fn-chart-card,.fn-dist-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .fn-sec-title{font-size:.9rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 16px}
    .fn-chart-svg{width:100%;height:auto}
    .fn-chart-labels{display:flex;justify-content:space-around;margin-top:6px;font-size:.68rem;color:var(--mud-palette-text-disabled)}

    .fn-dist-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.8rem}.fn-dist-left{display:flex;align-items:center;gap:8px}.fn-dist-dot{width:10px;height:10px;border-radius:50%}.fn-dist-pct{font-weight:700;color:#1B1B1F}
    .fn-dist-bar{height:8px;background: var(--mud-palette-divider);border-radius:4px;overflow:hidden;margin-bottom:14px}.fn-dist-bar:last-child{margin-bottom:0}
    .fn-dist-fill{height:100%;border-radius:4px}

    /* بنر */
    .fn-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9);border-radius:20px;padding:16px 22px;margin-bottom:20px;border:1px solid #A5D6A7}
    .fn-banner-icon{color:#22A447!important}.fn-banner-text{display:flex;flex-direction:column;gap:2px;font-size:.82rem;color:#2E7D32}
    .fn-banner-title{font-weight:800;font-size:.9rem}

    /* جدول */
    .fn-table-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .fn-tbl-scroll{overflow-x:auto}.fn-table{width:100%;min-width:500px;border-collapse:collapse}
    .fn-table th{text-align:right;padding:12px 16px;font-size:.72rem;font-weight:700;color:#6D3BFF;border-bottom:1px solid #F0ECFA}
    .fn-table td{padding:12px 16px;font-size:.8rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F8F6FC}
    .fn-td-date{font-size:.74rem;color:#7B7B96}.fn-td-desc{font-weight:600}
    .fn-td-amt{font-weight:700}.fn-amt-in{color:#22A447}.fn-amt-out{color:var(--mud-palette-error)}
    .fn-status{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .fn-st-ok{background:var(--mud-palette-success-light);color:#22A447}.fn-st-pend{background:var(--mud-palette-warning-light);color:#F5B62F}.fn-st-fail{background:var(--mud-palette-error-light);color:var(--mud-palette-error)}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.fn-kpi-row{grid-template-columns:repeat(2,1fr)}.fn-mid{grid-template-columns:1fr}}
    @@media(max-width:600px){.fn-kpi-row{grid-template-columns:1fr}.fn-top{flex-direction:column;align-items:flex-start}}

/* $fileRel */
.gs-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1150px;margin:0 auto;padding:0 4px 40px}
    .gs-page *,.gs-page *::before,.gs-page *::after{box-sizing:border-box}
    .mobile-only{display:none}

    .gs-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
    .gs-top-left{display:flex;align-items:center;gap:14px}
    .gs-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .gs-top-svg{color:#FFF!important}
    .gs-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.gs-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .gs-btn-primary{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}

    .gs-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}

    /* درخت */
    .gs-tree-panel{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);overflow:hidden}
    .gs-tree-hdr{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom: 1px solid var(--mud-palette-divider);font-size:.88rem;font-weight:700;color:#1B1B1F}
    .gs-tree-hdr-icon{color:#6D3BFF!important}.gs-tree-stats{font-size:.7rem;color: var(--mud-palette-text-secondary);font-weight:500;margin-right:auto;display:flex;align-items:center;gap:8px}.gs-dot{width:4px;height:4px;border-radius:50%;background:var(--mud-palette-text-disabled)}
    .gs-tree{padding:8px 0}
    .gs-node{display:flex;align-items:center;gap:8px;padding:9px 20px;cursor:pointer;transition:background .15s;position:relative}.gs-node:hover{background:#F8F6FC}
    .gs-conn{position:absolute;right:14px;top:50%;width:12px;border-top:1.5px dashed var(--mud-palette-divider)}
    .gs-exp{width:24px;height:24px;border-radius:6px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-background);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:transform .2s;flex-shrink:0}.gs-exp-on{transform:rotate(-90deg)}.gs-exp:disabled{opacity:.25;cursor:default}
    .gs-exp-spc{width:24px;height:24px;flex-shrink:0}
    .gs-node-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .gs-ic-folder{background:#FFF8E1}.gs-ic-folder .mud-icon-root{color:#F5B62F!important}
    .gs-ic-leaf{background:var(--mud-palette-success-light)}.gs-ic-leaf .mud-icon-root{color:#22A447!important}
    .gs-node-name{font-size:.84rem;font-weight:600;color: var(--mud-palette-text-primary);flex:1}
    .gs-node-cnt{font-size:.68rem;color:var(--mud-palette-text-disabled);font-weight:600;min-width:30px;text-align:center}
    .gs-node-acts{display:flex;gap:4px}
    .gs-nact{width:28px;height:28px;border-radius:7px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}.gs-nact:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:#6D3BFF;border-color:#6D3BFF}
    .gs-nact-del{color:#FF4D4F;border-color:#FFCDD2}.gs-nact-del:hover{background:var(--mud-palette-error-light);border-color:#FF4D4F}

    /* کارت‌های راست */
    .gs-right-col{display:flex;flex-direction:column;gap:14px;position:sticky;top:24px}
    .gs-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .gs-card-title{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 14px}
    .gs-card-ticon{color:#6D3BFF!important}

    .gs-detail-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom: 1px solid var(--mud-palette-divider);font-size:.8rem}
    .gs-detail-item:last-child{border-bottom:none}.gs-dlbl{color:#7B7B96}.gs-dval{font-weight:600;color:#1B1B1F}

    /* طراحان */
    .gs-des-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom: 1px solid var(--mud-palette-divider);cursor:pointer}.gs-des-row:last-child{border-bottom:none}
    .gs-chk{width:18px;height:18px;accent-color:#6D3BFF;cursor:pointer}
    .gs-des-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:.68rem;font-weight:700;flex-shrink:0}
    .gs-des-name{font-size:.82rem;font-weight:600;color: var(--mud-palette-text-primary);flex:1}.gs-des-role{font-size:.7rem;color:#7B7B96}

    /* خطر */
    .gs-danger-card{border-color:#FFCDD2!important}
    .gs-danger-icon{color:#FF4D4F!important}
    .gs-danger-desc{font-size:.76rem;color: var(--mud-palette-text-secondary);line-height:1.6;margin:0 0 12px}
    .gs-btn-danger{background:#FF4D4F;color:#FFF;border:none;border-radius:14px;padding:10px 20px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;width:100%}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){
        .gs-body{grid-template-columns:1fr}.gs-right-col{position:static}
        .mobile-only{display:flex;align-items:center;gap:6px;position:fixed;bottom:24px;left:24px;z-index:100;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:50px;padding:14px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(109,59,255,.3)}
    }
    @@media(max-width:600px){.gs-node{padding:8px 12px;gap:6px}.gs-node-name{font-size:.78rem}}

/* $fileRel */
.rv-page{
        font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width:1050px;margin:0 auto;padding:0 4px 40px;
    }
    .rv-page *,.rv-page *::before,.rv-page *::after{box-sizing:border-box}

    /* ─── هدر ─── */
    .rv-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
    .rv-header-left{display:flex;align-items:center;gap:14px}
    .rv-coin-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#FFF8E1,#FFE082);display:flex;align-items:center;justify-content:center}
    .rv-coin-svg{color:#F59E0B!important}
    .rv-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}
    .rv-sub{font-size:.82rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .rv-export-btn{display:flex;align-items:center;gap:6px;background:#D9EDFF;color:#1B6BA0;border:none;border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
    .rv-exp-icon{color:#1B6BA0!important}

    /* ─── KPI ─── */
    .rv-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
    .rv-kpi-card{background: var(--mud-palette-surface);border-radius:28px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 24px;display:flex;flex-direction:column;gap:14px}
    .kpi-icon-bg{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .kpi-bg-purple{background:linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))}.kpi-bg-purple .kpi-icn{color:#5B2EFF!important}
    .kpi-bg-green{background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)}.kpi-bg-green .kpi-icn{color:var(--mud-palette-success)!important}
    .kpi-bg-blue{background:linear-gradient(135deg,var(--mud-palette-info-light),#BBDEFB)}.kpi-bg-blue .kpi-icn{color:var(--mud-palette-info)!important}
    .kpi-info{display:flex;flex-direction:column;gap:4px}
    .kpi-lbl{font-size:.76rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .kpi-val{font-size:1.2rem;font-weight:900;color:#1B1B1F}
    .kpi-val small{font-size:.68rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .kpi-growth{font-size:.72rem;font-weight:700}.kpi-growth.up{color:var(--mud-palette-success)}
    .rv-withdraw-btn{background:linear-gradient(135deg,#6C3BFF,#4D1FFF);color:#FFF;border:none;border-radius:14px;padding:11px 20px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;align-self:flex-start;box-shadow:0 6px 16px rgba(91,46,255,.2)}

    /* ─── نمودار ─── */
    .rv-chart-card{background: var(--mud-palette-surface);border-radius:28px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px;margin-bottom:20px}
    .rv-section-title{font-size:.95rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 18px}
    .rv-bars-wrap{display:flex;align-items:flex-end;justify-content:space-around;height:180px;gap:20px;padding-top:18px}
    .rv-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
    .rv-bar-val{font-size:.68rem;color: var(--mud-palette-text-secondary);font-weight:600}
    .rv-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
    .rv-bar-fill{width:80%;max-width:52px;border-radius:12px 12px 0 0;min-height:6px}
    .rv-bar-lbl{font-size:.7rem;color: var(--mud-palette-text-secondary);font-weight:500}
    .rv-chart-grid-lines{display:flex;flex-direction:column;position:absolute;left:10px;top:40px;gap:36px;font-size:.64rem;color:var(--mud-palette-divider)}

    /* ─── جدول ─── */
    .rv-table-card{background: var(--mud-palette-surface);border-radius:28px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .rv-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
    .rv-table{width:100%;min-width:700px;border-collapse:collapse}
    .rv-table th{text-align:right;padding:14px 16px;font-size:.74rem;font-weight:700;color: var(--mud-palette-primary, #5B2EFF);border-bottom:1px solid var(--mud-palette-divider);white-space:nowrap}
    .rv-table td{padding:14px 16px;font-size:.82rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F5F2FD}
    .rv-table tbody tr:hover{background:var(--mud-palette-background-hover)}
    .td-date{font-size:.76rem;color:#7B7B96}.td-exam{font-weight:600}.td-amount{font-weight:700}
    .amount-in{color:var(--mud-palette-success)}.amount-out{color:var(--mud-palette-error)}
    .rv-type-tag{display:inline-block;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px}
    .type-in{background:var(--mud-palette-success-light);color:var(--mud-palette-success)}.type-out{background:var(--mud-palette-error-light);color:var(--mud-palette-error)}
    .rv-row-act{background: var(--mud-palette-surface);color: var(--mud-palette-primary, #5B2EFF);border:1px solid var(--mud-palette-divider);border-radius:10px;padding:5px 14px;font-family:inherit;font-size:.74rem;font-weight:600;cursor:pointer}
    .rv-row-act:hover{background:#F5F2FD}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:850px){
        .rv-kpi-row{grid-template-columns:1fr}
        .rv-header{flex-direction:column;align-items:flex-start}
        .rv-export-btn{align-self:flex-start}
    }
    @@media(max-width:600px){
        .rv-title{font-size:1.05rem}
        .rv-kpi-card{padding:16px 18px;border-radius:22px}
        .rv-table-card{padding:16px 14px}
        .rv-bars-wrap{gap:10px;height:140px}
        .rv-bar-fill{max-width:36px}
    }

/* $fileRel */
.um-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1150px;margin:0 auto;padding:0 4px 40px}
    .um-page *,.um-page *::before,.um-page *::after{box-sizing:border-box}

    .um-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
    .um-top-left{display:flex;align-items:center;gap:14px}
    .um-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .um-top-svg{color:#FFF!important}
    .um-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.um-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .um-btn-primary{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}
    .um-btn-sm{font-size:.76rem!important;padding:8px 16px!important;border-radius:12px!important}
    .um-btn-outline{display:flex;align-items:center;gap:6px;background: var(--mud-palette-surface);color:#6D3BFF;border:1px solid var(--mud-palette-divider);border-radius:12px;padding:8px 16px;font-family:inherit;font-size:.76rem;font-weight:600;cursor:pointer}

    /* فیلترها */
    .um-filters{display:flex;gap:10px;margin-bottom:18px}
    .um-search-wrap{flex:1;position:relative}.um-search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;z-index:2}
    .um-search{width:100%;height:48px;background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:16px;padding:0 42px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none}.um-search:focus{border-color:#6D3BFF}
    .um-sel-wrap{position:relative;min-width:150px}.um-select{width:100%;height:48px;background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:16px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none;appearance:none;cursor:pointer}.um-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}

    /* بدنه */
    .um-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
    .um-table-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);overflow:hidden}
    .um-tbl-scroll{overflow-x:auto}
    .um-table{width:100%;min-width:600px;border-collapse:collapse}
    .um-table th{text-align:right;padding:14px 16px;font-size:.72rem;font-weight:700;color:#6D3BFF;background: var(--mud-palette-background);border-bottom:1px solid #F0ECFA}
    .um-table td{padding:12px 16px;font-size:.82rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F5F2FD}
    .um-table tbody tr{cursor:pointer;transition:background .15s}.um-table tbody tr:hover{background:var(--mud-palette-background-hover)}
    .um-row-sel{background:var(--mud-palette-primary-hover-light)!important}

    .um-user-cell{display:flex;align-items:center;gap:10px}
    .um-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:.8rem;font-weight:800;flex-shrink:0}
    .um-uname{display:block;font-weight:600;font-size:.84rem}.um-uemail{display:block;font-size:.7rem;color:#7B7B96}
    .um-role,.um-status{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .role-student{background:var(--mud-palette-info-light);color:#3792FF}.role-teacher{background: var(--mud-palette-divider, var(--mud-palette-divider-light));color:#6D3BFF}.role-admin{background:var(--mud-palette-warning-light);color:#F5B62F}
    .status-active{background:var(--mud-palette-success-light);color:#22A447}.status-inactive{background:var(--mud-palette-error-light);color:#F04444}
    .um-td-date{font-size:.74rem;color: var(--mud-palette-text-secondary);white-space:nowrap}
    .um-td-acts{display:flex;gap:4px}
    .um-act{width:32px;height:32px;border-radius:8px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}.um-act:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:#6D3BFF;border-color:#6D3BFF}
    .um-act-del{color:#F04444;border-color:#FFCDD2}.um-act-del:hover{background:var(--mud-palette-error-light);border-color:#F04444}

    /* صفحه‌بندی */
    .um-pag{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid #F0ECFA;flex-wrap:wrap;gap:8px}
    .um-pag-info{font-size:.74rem;color:#7B7B96}.um-pag-btns{display:flex;gap:6px}
    .um-pag-btn{background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:10px;padding:6px 14px;font-family:inherit;font-size:.76rem;font-weight:600;color:#6D3BFF;cursor:pointer}.um-pag-btn:disabled{opacity:.35;cursor:not-allowed}
    .um-pag-num{width:34px;height:34px;border-radius:10px;border: 1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.78rem;font-weight:700;color: var(--mud-palette-text-secondary);cursor:pointer}.pag-on{background:linear-gradient(135deg,#6D3BFF,#4A3DFF)!important;color:#FFF!important;border-color:transparent!important}

    /* جزئیات */
    .um-detail-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:24px}
    .um-detail-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:1.5rem;font-weight:800}
    .um-detail-name{font-size:1.05rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0}
    .um-detail-info{display:flex;flex-direction:column;gap:10px;width:100%}
    .um-detail-row{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#7B7B96}.um-detail-row .mud-icon-root{color:var(--mud-palette-text-secondary)!important}
    .um-detail-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.um-body{grid-template-columns:1fr}.um-detail-card{position:static}}
    @@media(max-width:600px){.um-filters{flex-direction:column}.um-sel-wrap{min-width:unset}}

/* $fileRel */
.creator-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .creator-page *, .creator-page *::before, .creator-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .cr-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
    }

    .cr-header-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .cr-title {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .cr-subtitle {
        font-size: 0.88rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        font-weight: 500;
    }

    .cr-header-right {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
    }

    .cr-notif-btn {
        color: #6A35FF !important;
    }

    .cr-header-badge-dot {
        position: absolute;
        top: 8px;
        right: 52px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #FF4D4D;
        border: 2px solid #F7F5FC;
        z-index: 1;
    }

    .cr-avatar-mini {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
    }

    /* ═══════════ KPI گرید ═══════════ */
    .cr-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 22px;
    }

    .cr-kpi-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .cr-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .kpi-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kpi-icon-bg {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kpi-icon-exams { background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2)); }
    .kpi-icon-questions { background: linear-gradient(135deg, var(--mud-palette-info-light), #BBDEFB); }
    .kpi-icon-students { background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9); }
    .kpi-icon-avg { background: linear-gradient(135deg, var(--mud-palette-warning-light), #FFE0B2); }

    .kpi-icon-exams .kpi-icon { color: #6A35FF !important; }
    .kpi-icon-questions .kpi-icon { color: #4D8DFF !important; }
    .kpi-icon-students .kpi-icon { color: var(--mud-palette-success) !important; }
    .kpi-icon-avg .kpi-icon { color: var(--mud-palette-warning) !important; }

    .kpi-growth-badge {
        font-size: 0.72rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
    }

    .kpi-growth-badge.up {
        background: rgba(46,190,79,0.1);
        color: var(--mud-palette-success);
    }

    .kpi-number {
        font-size: 1.6rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        line-height: 1;
    }

    .kpi-label-text {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .kpi-bottom-bar {
        height: 5px;
        background: var(--mud-palette-divider);
        border-radius: 3px;
        overflow: hidden;
    }

    .kpi-bottom-fill {
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
    }

    /* ═══════════ ردیف میانی: کیف پول + نمودار ═══════════ */
    .cr-mid-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 22px;
    }

    .cr-wallet-card,
    .cr-chart-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 24px;
    }

    .cr-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0 0 16px;
    }

    .section-title-icon {
        color: #6A35FF !important;
    }

    /* کیف پول */
    .wallet-cards-row {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
    }

    .wallet-mini-card {
        flex: 1;
        background: var(--mud-palette-background);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border: 1px solid var(--mud-palette-divider);
    }

    .wallet-mini-card.accent {
        background: linear-gradient(135deg, var(--mud-palette-divider-light), #F5F0FF);
    }

    .wallet-mini-label {
        font-size: 0.74rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .wallet-mini-amount {
        font-size: 1rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .wallet-mini-amount small {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .wallet-btns-row {
        display: flex;
        gap: 10px;
    }

    .wallet-btn {
        flex: 1;
        border: none;
        border-radius: 14px;
        padding: 12px 16px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        transition: opacity 0.2s;
    }

    .wallet-btn:hover {
        opacity: 0.9;
    }

    .withdraw-btn {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
    }

    .details-btn {
        background: #D9EDFF;
        color: #1B6BA0;
    }

    /* نمودار میله‌ای */
    .bar-chart-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 180px;
        gap: 12px;
        padding-top: 20px;
    }

    .bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        height: 100%;
    }

    .bar-val-tag {
        font-size: 0.64rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
        white-space: nowrap;
    }

    .bar-fill-wrap {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .bar-fill {
        width: 80%;
        max-width: 48px;
        border-radius: 10px 10px 0 0;
        min-height: 8px;
        transition: height 0.4s ease;
    }

    .bar-month-label {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    /* ═══════════ جدول ═══════════ */
    .cr-table-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 24px;
        margin-bottom: 22px;
    }

    .cr-table-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .cr-table-header-row .cr-section-title {
        margin-bottom: 0;
    }

    .cr-table-view-all {
        font-size: 0.78rem;
        color: var(--mud-palette-primary, #6A35FF);
        text-decoration: none;
        font-weight: 600;
    }

    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }

    .cr-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cr-table {
        width: 100%;
        border-collapse: collapse;
    }

    .cr-table th {
        text-align: right;
        padding: 14px 16px;
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
        border-bottom: 1px solid var(--mud-palette-divider);
        white-space: nowrap;
    }

    .cr-table td {
        padding: 14px 16px;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        border-bottom: 1px solid var(--mud-palette-divider);
        white-space: nowrap;
    }

    .cr-table tbody tr:hover {
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .td-title {
        font-weight: 600;
    }

    .td-income {
        font-weight: 700;
        color: var(--mud-palette-success);
    }

    .score-badge {
        display: inline-block;
        font-size: 0.76rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
    }

    .score-high {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .score-mid {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .score-low {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error);
    }

    .table-action-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary, #6A35FF);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
        padding: 6px 16px;
        font-family: inherit;
        font-size: 0.76rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .table-action-btn:hover {
        background: var(--mud-palette-primary-hover, #F5F2FD);
        border-color: var(--mud-palette-primary, #6A35FF);
    }

    /* ═══════════ CTA پایین ═══════════ */
    .cr-bottom-ctas {
        display: flex;
        gap: 14px;
    }

    .cta-primary-btn,
    .cta-secondary-btn,
    .cta-outline-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 24px;
        border-radius: 18px;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        flex: 1;
    }

    .cta-primary-btn {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        box-shadow: 0 6px 18px rgba(94,47,255,0.2);
    }

    .cta-primary-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(94,47,255,0.3);
    }

    .cta-secondary-btn {
        background: #D9EDFF;
        color: #1B6BA0;
    }

    .cta-secondary-btn:hover {
        background: #C4E2FF;
    }

    .cta-outline-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary, #6A35FF);
        border: 1px solid var(--mud-palette-divider);
    }

    .cta-outline-btn:hover {
        background: var(--mud-palette-primary-hover, #F5F2FD);
    }

    .cta-btn-icon {
        font-size: 18px !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .cr-kpi-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .cr-mid-row {
            grid-template-columns: 1fr;
        }

        .desktop-only {
            display: none !important;
        }

        .mobile-only {
            display: block;
        }

        .cr-bottom-ctas {
            flex-direction: column;
        }
    }

    @@media (max-width: 600px) {
        .cr-kpi-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .cr-kpi-card {
            padding: 14px;
            border-radius: 22px;
        }

        .kpi-number {
            font-size: 1.3rem;
        }

        .cr-title {
            font-size: 1.2rem;
        }

        .cr-table-card {
            padding: 16px 14px;
        }

        .wallet-cards-row {
            flex-direction: column;
        }

        .bar-chart-wrap {
            height: 140px;
            gap: 8px;
        }

        .bar-fill {
            max-width: 36px;
        }
    }

    /* ═══════════ نسخه موبایل جدول ═══════════ */
    .cr-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-exam-item {
        background: var(--mud-palette-background);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: 1px solid var(--mud-palette-divider);
    }

    .mob-exam-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mob-exam-title {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .mob-exam-meta {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        font-size: 0.74rem;
        color: var(--mud-palette-text-secondary);
    }

/* $fileRel */
.dashboard {
        font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
        background: var(--mud-palette-background);
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px 20px;
        min-height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .dashboard *, .dashboard *::before, .dashboard *::after { box-sizing: border-box; }
    .dash-card { background: var(--mud-palette-surface); border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    .dash-stack { display: flex; flex-direction: column; gap: 20px; height: 100%; }
    .card-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .card-title-icon { color: var(--mud-palette-primary, #6C5CE7); font-size: 16px; width: 20px; text-align: center; }
    .card-heading { font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .btn { border: none; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
    .btn:hover { opacity: 0.9; }
    .btn-gradient { background: linear-gradient(135deg, #6C5CE7, #00B4D8); color: #FFFFFF; padding: 9px 24px; font-size: 0.85rem; width: fit-content; }
    .btn-purple-sm { background: #6C5CE7; color: #FFFFFF; padding: 5px 16px; font-size: 0.72rem; border-radius: 6px; }
    .btn-review-start { background: linear-gradient(135deg, #6C5CE7, #00B4D8); color: #FFFFFF; padding: 9px 24px; font-size: 0.85rem; width: 100%; border: none; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
    .btn-review-start:hover { opacity: 0.9; }

    .dash-top-card { display: flex; align-items: stretch; gap: 0; min-height: 130px; }
    .top-sec { display: flex; align-items: center; }
    .top-sec-profile { flex: 1.5; gap: 14px; padding-left: 20px; border-left: 1px solid #E9ECEF; min-width: 0; }
    .top-avatar { width: 70px; height: 70px; min-width: 70px; border-radius: 50%; background: #6C5CE7; color: #FFFFFF; font-size: 2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .top-profile-info { flex: 1; min-width: 0; }
    .top-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .top-name { font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .top-badge { display: inline-flex; align-items: center; gap: 5px; background: #6C5CE7; color: #FFFFFF; font-size: 0.68rem; font-weight: 600; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }
    .top-badge-star { color: #F4B400; font-size: 9px; }
    .top-xp-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 0.78rem; color: var(--mud-palette-primary, #6C5CE7); font-weight: 500; }
    .top-xp-pct { font-weight: 700; }
    .top-xp-track { height: 8px; background: var(--mud-palette-divider); border-radius: 4px; overflow: hidden; }
    .top-xp-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6C5CE7, #4A90E2); transition: width 0.5s ease; }
    .top-sec-stats { flex: 0.8; justify-content: space-evenly; padding: 0 14px; }
    .top-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .top-stat-num { font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary); margin-top: 4px; }
    .top-stat-lbl { font-size: 0.68rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
    .top-stat-divider { width: 1px; height: 54px; background: var(--mud-palette-divider); flex-shrink: 0; }
    .top-sec-achv { flex: 1.1; flex-direction: column; align-items: stretch; padding-right: 20px; border-right: 1px solid #E9ECEF; }
    .top-achv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; width: 100%; }
    .top-achv-title { font-size: 0.9rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .top-achv-link { font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; font-weight: 500; }
    .top-achv-link:hover { text-decoration: underline; }
    .top-achv-medals { display: flex; justify-content: center; gap: 18px; }
    .top-medal-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .top-medal-hex { width: 52px; height: 52px; clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s; }
    .top-medal-hex:hover { transform: scale(1.08); }
    .top-hex-purple { background: linear-gradient(135deg, #6C5CE7, #9B59B6); }
    .top-hex-orange { background: linear-gradient(135deg, #E74C3C, #F39C12); }
    .top-hex-blue   { background: linear-gradient(135deg, #3498DB, #00B4D8); }
    .top-medal-lbl { font-size: 0.65rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

    .dash-card-mission { display: flex; flex-direction: column; gap: 10px; }
    .mission-desc { font-size: 0.88rem; color: var(--mud-palette-text-primary); margin: 0; }
    .mission-xp-line { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
    .dash-card-review { display: flex; flex-direction: column; gap: 10px; }
    .review-count-row { display: flex; align-items: baseline; gap: 10px; }
    .review-big-num { font-size: 3rem; font-weight: 800; color: var(--mud-palette-primary, #6C5CE7); line-height: 1; }
    .review-sub { font-size: 0.85rem; color: var(--mud-palette-text-secondary); font-weight: 500; }
    .review-list { display: flex; flex-direction: column; gap: 8px; }
    .review-box { display: flex; align-items: center; gap: 10px; background: var(--mud-palette-background); border-radius: 8px; padding: 9px 14px; }
    .review-box-text { font-size: 0.82rem; color: var(--mud-palette-primary, #6C5CE7); font-weight: 500; }
    .r-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

    .dash-card-weak { display: flex; flex-direction: column; }
    .weak-grid { display: flex; gap: 10px; flex: 1; }
    .weak-box { flex: 1; background: var(--mud-palette-background); border-radius: 8px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
    .weak-close { position: absolute; top: 6px; left: 8px; cursor: pointer; color: #999; font-size: 11px; }
    .weak-subject { font-size: 0.82rem; font-weight: 700; color: var(--mud-palette-text-primary); }
    .weak-bar-track { width: 90%; height: 5px; background: var(--mud-palette-divider); border-radius: 3px; overflow: hidden; }
    .weak-bar-fill { height: 100%; width: 35%; border-radius: 3px; background: #FF8C00; }
    .weak-pct { font-size: 0.68rem; color: var(--mud-palette-text-secondary); }

    .dash-card-msgs { display: flex; flex-direction: column; }
    .msg-view-all { margin-right: auto; font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; font-weight: 500; white-space: nowrap; }
    .msg-view-all:hover { text-decoration: underline; }
    .msg-list { display: flex; flex-direction: column; gap: 18px; flex: 1; }
    .msg-item { display: flex; gap: 10px; }
    .msg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
    .msg-body { display: flex; flex-direction: column; gap: 5px; }
    .msg-text { font-size: 0.84rem; color: var(--mud-palette-text-primary); line-height: 1.7; }
    .msg-time { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

    .dash-card-progress { display: flex; flex-direction: column; }
    .prog-label { font-size: 0.9rem; font-weight: 700; color: var(--mud-palette-text-primary); margin-bottom: 8px; }
    .prog-track { height: 8px; background: var(--mud-palette-divider); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
    .prog-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6C5CE7, #4A90E2); transition: width 0.5s ease; }
    .prog-pct { font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-primary, #6C5CE7); text-align: left; }

    .dash-card-lb { display: flex; flex-direction: column; }
    .lb-full-link { font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; margin-bottom: 12px; display: flex; align-items: center; gap: 4px; }
    .lb-full-link:hover { text-decoration: underline; }
    .lb-items { display: flex; flex-direction: column; gap: 8px; }
    .lb-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--mud-palette-divider); border-radius: 8px; }
    .lb-rank-circle { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: #6C5CE7; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
    .lb-name { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--mud-palette-text-primary); }
    .lb-xp-val { font-size: 0.75rem; font-weight: 700; color: var(--mud-palette-primary, #6C5CE7); white-space: nowrap; }

    .dash-card-cal { display: flex; flex-direction: column; }
    .cal-view-all { font-size: 0.7rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; margin-bottom: 8px; }
    .cal-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
    .cal-arrow { background: none; border: 1px solid #D1D5DB; border-radius: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: var(--mud-palette-text-secondary); font-family: 'Vazirmatn', sans-serif; }
    .cal-month { font-size: 0.82rem; font-weight: 600; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin-bottom: 12px; }
    .cal-hdr { font-size: 0.7rem; color: #999; padding: 4px 0; }
    .cal-grid > span { font-size: 0.75rem; padding: 5px 0; border-radius: 6px; }
    .cal-today { background: #6C5CE7; color: #FFFFFF; font-weight: 700; }
    .cal-events { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
    .cal-ev-title { font-size: 0.78rem; font-weight: 700; color: var(--mud-palette-text-primary); margin-bottom: 2px; }
    .cal-ev-item { display: flex; gap: 8px; align-items: flex-start; }
    .cal-ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
    .cal-ev-name { font-size: 0.75rem; color: var(--mud-palette-text-primary); }
    .cal-ev-time { font-size: 0.68rem; color: #999; }
    .cal-all-link { font-size: 0.72rem; color: var(--mud-palette-primary, #6C5CE7); text-decoration: none; }
    .cal-all-link:hover { text-decoration: underline; }

    @@media (max-width: 768px) {
        .dash-top-card { flex-wrap: wrap; }
        .top-sec-profile { flex: 1 1 100%; border-left: none; padding-left: 0; border-bottom: 1px solid var(--mud-palette-divider); padding-bottom: 12px; }
        .top-sec-stats { flex: 1 1 100%; padding: 12px 0; }
        .top-sec-achv { flex: 1 1 100%; border-right: none; padding-right: 0; border-top: 1px solid #E9ECEF; padding-top: 12px; }
    }

/* $fileRel */
/* ═══════════ بیس صفحه داشبورد ═══════════ */
    .dashboard-page-content {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
    }

    .dashboard-page-content *, .dashboard-page-content *::before, .dashboard-page-content *::after {
        box-sizing: border-box;
    }

    .premium-container {
        padding: 0 4px 80px;
    }

    /* ─── کارت هدر پروفایل ─── */
    .profile-header-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        padding: 28px 32px;
        display: flex;
        align-items: center;
        gap: 28px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        margin-bottom: 24px;
        border: 1px solid var(--mud-palette-divider);
    }

    .profile-left-section {
        display: flex;
        align-items: center;
        gap: 18px;
        flex: 2;
        min-width: 0;
    }

    .profile-avatar-circle {
        width: 64px;
        height: 64px;
        min-width: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7A3FF2 0%, #5825E8 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(122,63,242,0.3);
    }

    .avatar-inner-text {
        font-size: 1.6rem;
        font-weight: 800;
        color: #FFFFFF;
    }

    .profile-info-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

    .profile-name-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .profile-display-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .profile-level-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: linear-gradient(135deg, var(--mud-palette-primary-hover, #F5F2FD), var(--mud-palette-divider, var(--mud-palette-divider-light)));
        color: var(--mud-palette-primary, #6A35FF);
        padding: 3px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .level-star {
        color: #FFBE0B !important;
        font-size: 14px !important;
    }

    .xp-section-wrap {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .xp-label-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .xp-label-pct {
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
    }

    .xp-track {
        height: 8px;
        background: #E8E4FF;
        border-radius: 10px;
        overflow: hidden;
    }

    .xp-fill-bar {
        height: 100%;
        width: 62%;
        border-radius: 10px;
        background: linear-gradient(90deg, #612BFF 0%, #3EA6FF 100%);
    }

    /* بخش آمار وسط */
    .profile-stats-section {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1;
        justify-content: center;
    }

    .stat-mini-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .stat-mini-num {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .stat-mini-lbl {
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
    }

    .stat-flame-icon .flame-glow {
        color: #FF5A5A !important;
    }

    .medal-gold-icon {
        color: #FFBE0B !important;
    }

    .stat-divider-vert {
        width: 1px;
        height: 48px;
        background: #E8E4FF;
        flex-shrink: 0;
    }

    /* بخش دستاوردها */
    .profile-achievements-section {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .achv-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .achv-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .achv-view-all {
        font-size: 0.75rem;
        color: var(--mud-palette-primary, #6A35FF);
        text-decoration: none;
        font-weight: 600;
    }

    .achv-hexagons {
        display: flex;
        gap: 16px;
        justify-content: center;
    }

    /* مدال‌های شش‌ضلعی */
    .hex-badge {
        width: 52px;
        height: 52px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        transition: transform 0.25s ease;
    }

    .hex-badge:hover {
        transform: translateY(-3px);
    }

    .hex-gold {
        background: linear-gradient(180deg, #FFCE54 0%, #F59E0B 100%);
    }

    .hex-fire {
        background: linear-gradient(180deg, #FF914D 0%, #FF4D4D 100%);
    }

    .hex-blue {
        background: linear-gradient(180deg, #44B8FF 0%, #2D7CFF 100%);
    }

    .hex-inner-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ کارت‌های پریمیوم ═══════════ */
    .cards-col-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .premium-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: 1px solid var(--mud-palette-divider);
        overflow: hidden;
    }

    .premium-card-inner {
        padding: 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .card-top-icon-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .card-icon-circle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
    }

    .icon-circle-purple {
        background: linear-gradient(135deg, #7A3FF2, #5825E8);
    }

    .icon-circle-pink {
        background: linear-gradient(135deg, #FF5A7A, #E04070);
    }

    .icon-circle-orange {
        background: linear-gradient(135deg, var(--mud-palette-warning), #E07030);
    }

    .icon-circle-blue {
        background: linear-gradient(135deg, #44B8FF, #2D7CFF);
    }

    .icon-circle-green {
        background: linear-gradient(135deg, #38D9A9, #20B88A);
    }

    .card-section-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    /* ─── ماموریت روزانه ─── */
    .mission-card-desc {
        font-size: 0.84rem;
        color: #4A4A5A;
        line-height: 1.7;
        margin: 0;
    }

    .mission-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mission-xp-bonus {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        background: var(--mud-palette-primary-hover, #F5F2FD);
        padding: 3px 10px;
        border-radius: 8px;
    }

    .btn-cta-blue {
        background: linear-gradient(90deg, #3EA6FF, #2D7CFF);
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 12px 20px;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
        text-align: center;
    }

    .btn-cta-blue:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    /* ─── مرور هوشمند ─── */
    .review-big-number-area {
        display: flex;
        align-items: baseline;
        gap: 14px;
    }

    .review-huge-num {
        font-size: 3.5rem;
        font-weight: 900;
        background: linear-gradient(135deg, #6A35FF, #7E4CFF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }

    .review-sub-text {
        font-size: 0.85rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .review-topic-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .review-topic-row {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--mud-palette-background);
        padding: 10px 14px;
        border-radius: 12px;
    }

    .review-topic-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .review-topic-name {
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        flex: 1;
        font-weight: 500;
    }

    .review-topic-chip {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        background: #EAE8F0;
        padding: 3px 10px;
        border-radius: 8px;
        font-weight: 500;
        white-space: nowrap;
    }

    .btn-cta-review {
        background: linear-gradient(90deg, #6A35FF, #7E4CFF);
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 12px 20px;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
        text-align: center;
    }

    .btn-cta-review:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    /* ─── نقاط ضعف ─── */
    .weak-mini-cards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .weak-mini-item {
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: relative;
    }

    .weak-mini-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .weak-mini-subject {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .weak-close-btn {
        background: none;
        border: none;
        color: var(--mud-palette-text-disabled);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 2px;
    }

    .weak-mini-pct {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .weak-mini-bar {
        height: 5px;
        background: #EAE6F5;
        border-radius: 3px;
        overflow: hidden;
    }

    .weak-mini-fill {
        height: 100%;
        border-radius: 3px;
    }

    .btn-weak-practice {
        background: #6A35FF;
        color: #FFFFFF;
        border: none;
        border-radius: 8px;
        padding: 6px 14px;
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
        align-self: flex-start;
        transition: opacity 0.2s;
    }

    .btn-weak-practice:hover {
        opacity: 0.9;
    }

    /* ─── پیام‌های سیستمی ─── */
    .msg-timeline {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .msg-timeline-item {
        display: flex;
        gap: 10px;
    }

    .msg-timeline-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 5px;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
    }

    .msg-timeline-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .msg-timeline-text {
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        line-height: 1.7;
        margin: 0;
    }

    .msg-timeline-time {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
    }

    /* ─── تقویم ─── */
    .cal-nav-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .cal-arrow-btn {
        color: var(--mud-palette-text-secondary) !important;
    }

    .cal-month-label {
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        min-width: 80px;
        text-align: center;
    }

    .cal-mini-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        text-align: center;
    }

    .cal-mini-hdr {
        font-size: 0.68rem;
        color: var(--mud-palette-text-disabled);
        padding: 3px 0;
        font-weight: 500;
    }

    .cal-mini-day {
        font-size: 0.73rem;
        color: var(--mud-palette-text-primary);
        padding: 6px 0;
        border-radius: 8px;
    }

    .cal-mini-today {
        background: linear-gradient(135deg, #6A35FF, #7E4CFF);
        color: #FFFFFF;
        font-weight: 700;
    }

    .cal-events-mini {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cal-events-mini-title {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .cal-event-mini-row {
        display: flex;
        gap: 8px;
    }

    .cal-event-mini-strip {
        width: 3px;
        min-width: 3px;
        border-radius: 2px;
    }

    .cal-event-mini-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .cal-event-mini-name {
        font-size: 0.76rem;
        color: var(--mud-palette-text-primary);
        font-weight: 500;
    }

    .cal-event-mini-time {
        font-size: 0.68rem;
        color: var(--mud-palette-text-secondary);
    }

    .cal-view-all-link {
        font-size: 0.72rem;
        color: var(--mud-palette-primary, #6A35FF);
        text-decoration: none;
        font-weight: 600;
    }

    /* ─── پیشرفت هفتگی ─── */
    .progress-big-pct {
        font-size: 2.4rem;
        font-weight: 900;
        background: linear-gradient(135deg, #6A35FF, #3EA6FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }

    .progress-track-wide {
        height: 10px;
        background: #E8E4FF;
        border-radius: 10px;
        overflow: hidden;
    }

    .progress-fill-gradient {
        height: 100%;
        width: 72%;
        border-radius: 10px;
        background: linear-gradient(90deg, #612BFF 0%, #3EA6FF 100%);
    }

    .progress-caption {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    /* ─── رقبا ─── */
    .lb-mini-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .lb-mini-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 12px;
    }

    .lb-mini-rank {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7A3FF2, #5825E8);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .lb-mini-name {
        flex: 1;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .lb-mini-xp {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        white-space: nowrap;
    }

    .btn-cta-outline {
        background: transparent;
        color: var(--mud-palette-primary, #6A35FF);
        border: 1.5px solid #D4C8F0;
        border-radius: 12px;
        padding: 10px 20px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
    }

    .btn-cta-outline:hover {
        background: var(--mud-palette-primary-hover, #F5F2FD);
        border-color: var(--mud-palette-primary, #6A35FF);
    }

    /* ═══════════ دکمه CTA پایین ═══════════ */
    .bottom-cta-bar {
        position: sticky;
        bottom: 20px;
        margin: 20px 20px 20px;
        z-index: 20;
    }

    .bottom-cta-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: linear-gradient(90deg, #5A1FE8 0%, #6D2BFF 50%, #7A3EFF 100%);
        border-radius: 18px;
        padding: 16px 28px;
        box-shadow: 0 10px 30px rgba(92,45,255,0.25);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .bottom-cta-inner:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(92,45,255,0.35);
    }

    .cta-play-icon {
        color: #FFFFFF !important;
        font-size: 28px !important;
    }

    .cta-bar-text {
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 700;
    }

    .cta-arrow {
        color: rgba(255,255,255,0.8) !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .profile-header-card {
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
            padding: 20px;
        }

        .profile-stats-section {
            flex-direction: row;
            justify-content: center;
            gap: 24px;
        }

        .stat-divider-vert {
            width: 1px;
            height: 40px;
        }
    }

    @@media (max-width: 600px) {
        .premium-container {
            padding: 0 2px 60px;
        }

        .profile-header-card {
            border-radius: 20px;
        }

        .premium-card {
            border-radius: 20px;
        }

        .bottom-cta-bar {
            margin: 12px 8px 12px;
        }

        .bottom-cta-inner {
            border-radius: 14px;
            padding: 14px 20px;
        }
    }

/* $fileRel */
/* ─── فونت + بک‌گراند کلی ─── */
    .dashboard-layout {
        font-family: 'Vazirmatn', 'IRANSans', 'Tahoma', 'Roboto', sans-serif;
        background-color: #F4F7FC;
        min-height: 100vh;
        position: relative;
    }

    .dashboard-main {
        background-color: #F4F7FC;
        min-height: 100vh;
        padding-bottom: 80px;
    }

    .dashboard-container {
        padding-top: 20px;
        padding-bottom: 16px;
    }

    /* ─── دکمه همبرگری (فقط موبایل) ─── */
    .hamburger-btn {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 1400;
        background: var(--mud-palette-surface);
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        border-radius: 8px;
    }

    /* ──────────────────────────────────────────
        سایدبار (MudDrawer)
       ────────────────────────────────────────── */
    .dashboard-sidebar {
        background-color: #FFFFFF !important;
        border-right: none !important;
        box-shadow: 0 0 20px rgba(0,0,0,0.04);
    }

    .dashboard-sidebar .mud-drawer-content {
        background-color: var(--mud-palette-surface);
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 10px 10px;
    }

    .sidebar-logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .logo-text {
        color: #6A35C0 !important;
        font-weight: 800 !important;
        font-size: 1.5rem !important;
        margin: 0;
    }

    .sidebar-nav {
        padding: 8px 12px;
        gap: 2px;
    }

    /* ─── آیتم فعال منو ─── */
    .sidebar-nav .mud-nav-link.active,
    .sidebar-nav .nav-link-active.active {
        background-color: #6A3E9D !important;
        color: #FFFFFF !important;
        border-radius: 10px;
    }

    .sidebar-nav .mud-nav-link.active .mud-nav-link-icon,
    .sidebar-nav .nav-link-active.active .mud-nav-link-icon {
        color: #FFFFFF !important;
    }

    /* ─── آیتم‌های غیرفعال ─── */
    .sidebar-nav .mud-nav-link {
        color: #757575 !important;
        border-radius: 10px;
        margin-bottom: 2px;
        transition: background-color 0.2s;
    }

    .sidebar-nav .mud-nav-link:hover:not(.active) {
        background-color: #F5F0FA;
    }

    .sidebar-nav .mud-nav-link .mud-nav-link-icon {
        color: #9E9E9E !important;
    }

    /* ─── نشانگر پیام‌ها ─── */
    .nav-item-with-badge {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .msg-badge .mud-badge {
        background-color: #6A35C0 !important;
        min-width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    /* ──────────────────────────────────────────
        استایل عمومی کارت‌ها
       ────────────────────────────────────────── */
    .dash-card {
        border-radius: 16px !important;
        background-color: #FFFFFF !important;
        margin-bottom: 16px;
    }

    .dash-card .mud-card-content {
        padding: 20px !important;
    }

    .card-header-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
    }

    .card-title {
        font-weight: 700;
        color: #212121;
    }

    .stack-column {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* ──────────────────────────────────────────
        کارت وضعیت کاربر (گرادیانت بنفش)
       ────────────────────────────────────────── */
    .profile-card {
        border-radius: 16px !important;
        background: linear-gradient(135deg, #8A3FFC 0%, #5A1C99 100%) !important;
        color: #FFFFFF !important;
    }

    .profile-card .mud-card-content {
        padding: 24px !important;
    }

    .profile-card-content {
        padding: 0;
    }

    .profile-main {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* آواتار در قاب سفید */
    .profile-avatar-frame {
        width: 80px;
        height: 80px;
        min-width: 80px;
        border-radius: 50%;
        background: rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
    }

    .profile-avatar {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: #6A35C0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid #FFFFFF;
    }

    .avatar-text {
        font-size: 1.8rem;
        font-weight: 700;
        color: #FFFFFF;
    }

    .profile-info {
        flex: 1;
        min-width: 0;
    }

    .profile-name-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .profile-name {
        color: #FFFFFF !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    /* نشان استریک */
    .streak-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: rgba(255,255,255,0.2);
        padding: 2px 10px;
        border-radius: 12px;
    }

    .streak-num {
        color: #FF9800;
        font-weight: 700;
        font-size: 0.85rem;
    }

    /* نشان مدال */
    .medal-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(255,255,255,0.2);
        padding: 2px 10px;
        border-radius: 12px;
    }

    .medal-num {
        color: #FFFFFF;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* بخش XP */
    .xp-section {
        margin-top: 4px;
    }

    .xp-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .xp-text {
        color: rgba(255,255,255,0.9);
        font-size: 0.82rem;
        font-weight: 500;
    }

    .xp-pct {
        color: rgba(255,255,255,0.8);
        font-size: 0.8rem;
        font-weight: 600;
    }

    .xp-progress-bar {
        border-radius: 10px !important;
        background: rgba(255,255,255,0.25) !important;
    }

    .xp-progress-bar .mud-progress-linear-bar {
        background-color: #FFFFFF !important;
        border-radius: 10px !important;
    }

    /* ──────────────────────────────────────────
        کارت دستاوردها
       ────────────────────────────────────────── */
    .achievements-card {
        border-radius: 16px !important;
        height: 100%;
    }

    .medals-row {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin-top: 8px;
    }

    /* مدال‌های شش‌ضلعی */
    .hex-medal {
        width: 56px;
        height: 56px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: transform 0.2s ease;
    }

    .hex-medal:hover {
        transform: scale(1.1);
    }

    .hex-orange {
        background: linear-gradient(135deg, #FFB800, #FF8C00);
    }

    .hex-red {
        background: linear-gradient(135deg, var(--mud-palette-error), #C62828);
    }

    .hex-blue {
        background: linear-gradient(135deg, #1E88E5, #1565C0);
    }

    .hex-icon {
        color: #FFFFFF !important;
    }

    /* ──────────────────────────────────────────
        کارت ماموریت امروز
       ────────────────────────────────────────── */
    .mission-desc {
        color: #212121;
        margin: 8px 0 12px 0;
        font-weight: 500;
    }

    .mission-rating {
        margin-bottom: 16px;
    }

    .btn-mission-start {
        background-color: #7C4DFF !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────
        کارت مرور امروز
       ────────────────────────────────────────── */
    .review-big-number {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin: 8px 0 14px 0;
    }

    .review-count {
        font-size: 3.5rem !important;
        font-weight: 800 !important;
        color: #6A35C0 !important;
        line-height: 1 !important;
    }

    .review-subtitle {
        font-size: 0.85rem !important;
    }

    .review-list {
        margin-bottom: 12px;
    }

    .review-list-item {
        padding: 4px 0 !important;
    }

    .review-item-content {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .review-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .review-title {
        font-size: 0.84rem;
        color: #212121;
        flex: 1;
    }

    .review-chip {
        background-color: #F0F0F0 !important;
        font-size: 0.7rem !important;
        height: 24px !important;
        white-space: nowrap;
    }

    .btn-review-start {
        border-radius: 10px !important;
        background: linear-gradient(135deg, #6C5CE7, #00B4D8) !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────
        کارت نقاط ضعف
       ────────────────────────────────────────── */
    .weak-points-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .weak-point-item {
        background: var(--mud-palette-background);
        border-radius: 10px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .weak-point-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .weak-subject {
        font-weight: 600 !important;
        color: #212121 !important;
    }

    .weak-pct-text {
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .weak-progress {
        border-radius: 6px !important;
        background-color: #E9ECEF !important;
    }

    .weak-progress .mud-progress-linear-bar {
        border-radius: 6px !important;
    }

    .btn-weak-practice {
        background-color: #6A3E9D !important;
        color: #FFFFFF !important;
        border-radius: 8px !important;
        font-size: 0.72rem !important;
        align-self: flex-start;
    }

    /* ──────────────────────────────────────────
        کارت پیام‌های سیستمی
       ────────────────────────────────────────── */
    .system-messages {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .msg-item {
        display: flex;
        gap: 10px;
    }

    .msg-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 6px;
    }

    .msg-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .msg-body-text {
        color: #212121 !important;
        line-height: 1.6 !important;
        font-size: 0.84rem !important;
    }

    /* ──────────────────────────────────────────
        کارت تقویم
       ────────────────────────────────────────── */
    .cal-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin-bottom: 10px;
    }

    .cal-nav-btn {
        color: #757575 !important;
    }

    .cal-month-title {
        font-weight: 700 !important;
        color: #212121 !important;
        min-width: 90px;
        text-align: center;
    }

    .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        text-align: center;
        margin-bottom: 14px;
    }

    .cal-day-header {
        font-size: 0.7rem;
        color: #9E9E9E;
        padding: 4px 0;
        font-weight: 500;
    }

    .cal-day-cell {
        font-size: 0.75rem;
        color: #212121;
        padding: 5px 0;
        border-radius: 6px;
    }

    .cal-today-avatar {
        margin: 0 auto;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
        background-color: #6A35C0 !important;
    }

    .cal-events-title {
        font-weight: 700 !important;
        color: #212121 !important;
        margin-bottom: 8px !important;
    }

    .cal-events {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }

    .cal-event-item {
        display: flex;
        gap: 8px;
    }

    .cal-event-line {
        width: 3px;
        min-width: 3px;
        border-radius: 2px;
    }

    .cal-event-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cal-event-name {
        color: #212121 !important;
        font-weight: 500 !important;
    }

    /* ──────────────────────────────────────────
        کارت رقبای بالای سر
       ────────────────────────────────────────── */
    .rivals-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .rival-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
    }

    .rival-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .rival-avatar-circle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #6A35C0;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .rival-name {
        font-size: 0.88rem;
        font-weight: 600;
        color: #212121;
    }

    .rival-xp {
        font-size: 0.78rem;
        font-weight: 700;
        color: #6A35C0;
        white-space: nowrap;
    }

    .btn-rivals-table {
        border-radius: 10px !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────
        فوتر بنفش
       ────────────────────────────────────────── */
    .dashboard-footer {
        background-color: #6200EA !important;
        border-radius: 0 !important;
        position: relative;
        width: 100%;
        margin-top: auto;
    }

    .footer-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 12px 24px;
    }

    .footer-text {
        color: #FFFFFF !important;
        font-weight: 600 !important;
    }

    .footer-play-btn {
        color: #FFFFFF !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
    }

    /* ──────────────────────────────────────────
        دکمه شناور (FAB) موبایل
       ────────────────────────────────────────── */
    .mobile-fab {
        position: fixed !important;
        bottom: 24px !important;
        left: 24px !important;
        z-index: 1300 !important;
        background-color: #6A35C0 !important;
        box-shadow: 0 4px 16px rgba(106,53,192,0.4) !important;
    }

    /* ──────────────────────────────────────────
        ریسپانسیو (موبایل)
       ────────────────────────────────────────── */
    @@media (max-width: 959px) {
        .profile-main {
            flex-direction: column;
            text-align: center;
        }

        .profile-name-row {
            justify-content: center;
        }

        .profile-avatar-frame {
            margin-bottom: 8px;
        }

        .dashboard-container {
            padding: 12px 8px;
        }

        .hex-medal {
            width: 48px;
            height: 48px;
        }

        .review-count {
            font-size: 2.8rem !important;
        }
    }

    @@media (max-width: 600px) {
        .profile-main {
            gap: 12px;
        }

        .medals-row {
            gap: 12px;
        }

        .hex-medal {
            width: 40px;
            height: 40px;
        }

        .cal-grid {
            gap: 2px;
        }
    }

/* $fileRel */
.ai-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.48);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
    }

        .ai-overlay *, .ai-overlay *::before, .ai-overlay *::after {
            box-sizing: border-box;
        }

    .ai-modal {
        width: 100%;
        max-width: 800px;
        max-height: 92vh;
        background: var(--mud-palette-surface);
        border-radius: 34px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 24px 80px rgba(91,63,255,0.16);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ─── هدر ─── */
    .ai-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 28px 14px;
        flex-shrink: 0;
    }

    .ai-close {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--mud-palette-divider);
        background: var(--mud-palette-background);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.2s;
    }

        .ai-close:hover {
            background: var(--mud-palette-background-grey);
            color: var(--mud-palette-primary, #6A35FF);
            border-color: var(--mud-palette-divider);
        }

    .ai-header-center {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ai-sparkle-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7C3AED, #6D28D9);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(124,58,237,0.3);
    }

    .ai-sparkle-svg {
        color: #FFFFFF !important;
    }

    .ai-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .ai-header-spacer {
        width: 40px;
    }

    /* ─── بدنه ─── */
    .ai-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 28px 10px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* ─── کارت تنظیمات ─── */
    .ai-settings-card {
        background: var(--mud-palette-background);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ai-settings-row {
        display: flex;
        gap: 14px;
    }

    .ai-field {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .ai-field-narrow {
        flex: 0 0 140px;
    }

    .ai-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .ai-select-wrap {
        position: relative;
    }

    .ai-select {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: 0.86rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer;
    }

        .ai-select:focus {
            border-color: #7C3AED;
        }

    .ai-select-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    .ai-stepper {
        display: flex;
        align-items: center;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        height: 48px;
        overflow: hidden;
    }

    .ai-step-btn {
        width: 44px;
        height: 100%;
        border: none;
        background: transparent;
        font-size: 1.1rem;
        color: #7C3AED;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s;
    }

        .ai-step-btn:hover {
            background: var(--mud-palette-background-grey);
        }

    .ai-step-val {
        flex: 1;
        text-align: center;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .ai-segmented {
        display: flex;
        gap: 0;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        overflow: hidden;
    }

    .ai-seg-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 11px 10px;
        border: none;
        background: transparent;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        transition: all 0.15s;
    }

        .ai-seg-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    .seg-on {
        background: #7C3AED !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(124,58,237,0.25);
        position: relative;
        z-index: 1;
    }

    .ai-text-input {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 0 16px;
        font-family: inherit;
        font-size: 0.86rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

        .ai-text-input:focus {
            border-color: #7C3AED;
        }

        .ai-text-input::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .ai-generate-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, #7C3AED, #5B3FFF, #6D28D9);
        color: #FFFFFF;
        border: none;
        border-radius: 16px;
        padding: 14px 24px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 22px rgba(124,58,237,0.25);
        transition: transform 0.15s;
    }

        .ai-generate-btn:hover {
            transform: translateY(-2px);
        }

    .ai-gen-icon {
        color: #FFFFFF !important;
    }

    /* ─── سوالات پیشنهادی ─── */
    .ai-suggestions-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ai-bulb-icon {
        color: #FDBB11 !important;
    }

    .ai-sugg-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .ai-questions-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .ai-q-card {
        background: var(--mud-palette-surface);
        border-radius: 22px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 16px rgba(0,0,0,0.04);
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: border-color 0.2s;
    }

    .q-card-sel {
        border-color: #7C3AED;
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .q-card-top {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .q-num-bubble {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7C3AED, #6D28D9);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .q-card-meta {
        display: flex;
        gap: 6px;
        flex: 1;
    }

    .q-add-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--mud-palette-surface);
        color: #7C3AED;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 12px;
        padding: 7px 16px;
        font-family: inherit;
        font-size: 0.76rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

        .q-add-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    .q-added {
        background: #16A34A !important;
        color: #FFFFFF !important;
        border-color: #16A34A !important;
    }

    .q-text {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.7;
    }

    /* گزینه‌ها */
    .q-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .q-opt {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--mud-palette-background);
        border-radius: 14px;
        padding: 10px 14px;
        border: 1px solid var(--mud-palette-divider);
    }

    .opt-correct {
        background: var(--mud-palette-success-light);
        border-color: var(--mud-palette-success-light);
    }

    .q-opt-letter {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-size: 0.78rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .opt-correct .q-opt-letter {
        background: #16A34A;
        color: #FFFFFF;
    }

    .q-opt-val {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        flex: 1;
    }

    .opt-check-icon {
        color: #16A34A !important;
        flex-shrink: 0;
    }

    .q-explanation {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        background: #FFFBEB;
        border-radius: 12px;
        padding: 10px 14px;
        border: 1px solid #FDE68A;
        font-size: 0.78rem;
        color: #92400E;
        line-height: 1.6;
    }

    .q-expl-icon {
        color: #F59E0B !important;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* ─── تگ‌ها ─── */
    .sq-tag {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .tag-math {
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        color: #7C3AED;
    }

    .tag-geometry {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error-darken);
    }

    .tag-physics {
        background: var(--mud-palette-info-light);
        color: var(--mud-palette-info);
    }

    .tag-chemistry {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .tag-stats {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .tag-easy {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .tag-mid {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .tag-hard {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error);
    }

    /* ─── دکمه پایین ─── */
    .ai-bottom-bar {
        padding: 16px 28px 22px;
        border-top: 1px solid #F0ECFA;
        flex-shrink: 0;
    }

    .ai-add-all-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        background: linear-gradient(135deg, #7C3AED, #5B3FFF, #6D28D9);
        color: #FFFFFF;
        border: none;
        border-radius: 18px;
        padding: 15px 24px;
        font-family: inherit;
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 10px 26px rgba(124,58,237,0.28);
        transition: transform 0.15s;
    }

        .ai-add-all-btn:hover {
            transform: translateY(-2px);
        }

    .ai-addall-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ موبایل ═══════════ */
    @@media (max-width: 768px) {
        .ai-overlay {
            padding: 0;
            align-items: stretch;
        }

        .ai-modal {
            max-width: 100%;
            max-height: 100vh;
            border-radius: 0;
        }

        .ai-header {
            padding: 14px 16px 10px;
        }

        .ai-title {
            font-size: 0.9rem;
        }

        .ai-body {
            padding: 0 16px 8px;
            gap: 14px;
        }

        .ai-settings-row {
            flex-direction: column;
        }

        .ai-field-narrow {
            flex: unset;
        }

        .q-options {
            grid-template-columns: 1fr;
        }

        .ai-bottom-bar {
            padding: 12px 16px 18px;
        }
    }

/* $fileRel */
.cq-overlay {
        position: fixed;
        inset: 0;
        background: rgba(20,20,35,0.45);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
    }

        .cq-overlay *, .cq-overlay *::before, .cq-overlay *::after {
            box-sizing: border-box;
        }

    .cq-modal {
        width: 100%;
        max-width: 1050px;
        max-height: 93vh;
        background: var(--mud-palette-surface);
        border-radius: 32px;
        border: 1px solid #ECEBFF;
        box-shadow: 0 20px 60px rgba(91,61,245,0.10);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ─── هدر ─── */
    .cq-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px 12px;
        flex-shrink: 0;
    }

    .cq-close-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid #ECEBFF;
        background: var(--mud-palette-background);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.2s;
    }

        .cq-close-btn:hover {
            background: var(--mud-palette-background-grey);
            color: #6D3EFF;
        }

    .cq-header-center {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cq-pencil-icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cq-pencil-svg {
        color: #FFFFFF !important;
    }

    .cq-title {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    /* ─── بدنه دوستونه ─── */
    .cq-body {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    /* ─── پنل چپ: AI ─── */
    .cq-left-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 20px 16px;
        border-left: 1px solid #ECEBFF;
        min-width: 0;
    }

    .cq-panel-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .cq-panel-icon {
        color: #6D3EFF !important;
    }

    .cq-panel-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .cq-panel-sub {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
        margin: 0 0 12px;
    }

    /* چت */
    .cq-chat-area {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 8px;
    }

    .cq-chat-msg {
        display: flex;
        gap: 10px;
    }

    .user-msg {
        justify-content: flex-end;
    }

    .cq-bot-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cq-bot-icon {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

    .cq-bubble {
        max-width: 85%;
        border-radius: 18px;
        padding: 10px 14px;
    }

    .bot-bubble {
        background: var(--mud-palette-surface);
        border: 1px solid #ECEBFF;
        border-top-right-radius: 6px;
    }

    .user-bubble {
        background: linear-gradient(135deg, #6D3EFF 0%, #5B3DF5 100%);
        border-top-left-radius: 6px;
    }

        .user-bubble p {
            color: #FFFFFF;
        }

    .cq-bubble p {
        font-size: 0.8rem;
        margin: 0;
        line-height: 1.6;
    }

    /* کارت پیشنهادی */
    .cq-suggest-card {
        background: var(--mud-palette-surface);
        border: 1px solid #ECEBFF;
        border-radius: 20px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    }

    .cq-suggest-badge {
        font-size: 0.68rem;
        font-weight: 700;
        color: #6D3EFF;
        background: var(--mud-palette-background-grey);
        padding: 3px 10px;
        border-radius: 999px;
        align-self: flex-start;
    }

    .cq-suggest-q {
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .cq-suggest-opts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .cq-suggest-opt {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--mud-palette-background);
        border-radius: 12px;
        padding: 8px 12px;
        border: 1px solid #ECEBFF;
        font-size: 0.78rem;
        color: var(--mud-palette-text-primary);
    }

    .sug-correct {
        background: var(--mud-palette-success-light);
        border-color: var(--mud-palette-success-light);
    }

    .cq-sug-letter {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-size: 0.72rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .sug-letter-green {
        background: #16A34A;
        color: #FFFFFF;
    }

    .cq-sug-check {
        color: #16A34A !important;
        flex-shrink: 0;
    }

    .cq-suggest-expl {
        font-size: 0.74rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        line-height: 1.5;
    }

    .cq-suggest-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .cq-sug-act-btn {
        font-size: 0.7rem;
        font-weight: 600;
        color: #6D3EFF;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
        padding: 7px 12px;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s;
    }

        .cq-sug-act-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    /* ورودی چت */
    .cq-chat-input-row {
        display: flex;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid #F0ECFA;
    }

    .cq-chat-input {
        flex: 1;
        height: 44px;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        padding: 0 14px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

        .cq-chat-input:focus {
            border-color: #6D3EFF;
        }

        .cq-chat-input::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .cq-send-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .cq-send-icon {
        color: #FFFFFF !important;
    }

    /* ─── پنل راست: فرم ─── */
    .cq-right-panel {
        flex: 1;
        padding: 0 20px 16px;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .cq-form {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cq-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cq-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .cq-textarea {
        width: 100%;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 16px;
        padding: 12px 16px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        resize: none;
        transition: border-color 0.2s;
    }

        .cq-textarea:focus {
            border-color: #6D3EFF;
        }

        .cq-textarea::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .cq-opts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .cq-opt-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cq-radio-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
    }

    .cq-radio {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .cq-radio-custom {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid var(--mud-palette-divider);
        background: var(--mud-palette-surface);
        display: inline-block;
        transition: all 0.15s;
    }

    .cq-radio:checked + .cq-radio-custom {
        border-color: #6D3EFF;
        background: #6D3EFF;
        box-shadow: 0 0 0 3px rgba(109,62,255,0.15), inset 0 0 0 4px #FFFFFF;
    }

    .cq-opt-letter-label {
        font-size: 0.82rem;
        font-weight: 800;
        color: var(--mud-palette-text-secondary);
        min-width: 22px;
    }

    .cq-opt-input {
        flex: 1;
        height: 42px;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 12px;
        padding: 0 12px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

        .cq-opt-input:focus {
            border-color: #6D3EFF;
        }

        .cq-opt-input::placeholder {
            color: var(--mud-palette-text-disabled);
        }

    .cq-field-row {
        display: flex;
        gap: 14px;
    }

    .cq-field-half {
        flex: 1;
    }

    .cq-segmented {
        display: flex;
        gap: 0;
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        overflow: hidden;
    }

    .cq-seg-btn {
        flex: 1;
        padding: 10px;
        border: none;
        background: var(--mud-palette-surface);
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
    }

        .cq-seg-btn:hover {
            background: var(--mud-palette-primary-hover, #F5F2FD);
        }

    .seg-active {
        background: #6D3EFF !important;
        color: #FFFFFF !important;
    }

    .cq-select-wrap {
        position: relative;
    }

    .cq-select {
        width: 100%;
        height: 44px;
        background: var(--mud-palette-background);
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer;
    }

        .cq-select:focus {
            border-color: #6D3EFF;
        }

    .cq-sel-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    .cq-form-btns {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    .cq-cancel-form-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        border: 1px solid #ECEBFF;
        border-radius: 14px;
        padding: 11px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
    }

    .cq-save-form-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #6D3EFF, #5B3DF5);
        color: #FFFFFF;
        border: none;
        border-radius: 14px;
        padding: 11px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(109,62,255,0.22);
    }

    .cq-save-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 850px) {
        .cq-overlay {
            padding: 0;
            align-items: stretch;
        }

        .cq-modal {
            max-width: 100%;
            max-height: 100vh;
            border-radius: 0;
        }

        .cq-header {
            padding: 14px 14px 8px;
        }

        .cq-title {
            font-size: 0.95rem;
        }

        .cq-body {
            flex-direction: column;
            overflow-y: auto;
        }

        .cq-left-panel {
            border-left: none;
            border-bottom: 1px solid #ECEBFF;
            padding-bottom: 14px;
        }

        .cq-right-panel {
            padding-top: 8px;
        }

        .cq-opts-grid {
            grid-template-columns: 1fr;
        }

        .cq-suggest-opts {
            grid-template-columns: 1fr;
        }

        .cq-field-row {
            flex-direction: column;
        }
    }

/* $fileRel */
.exam-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .exam-page *, .exam-page *::before, .exam-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ چیدمان دوستونه ═══════════ */
    .exam-layout {
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: 20px;
        align-items: start;
    }

    /* ═══════════ سایدبار همراه هوشمند ═══════════ */
    .ai-tutor-sidebar {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        height: calc(100vh - 140px);
        min-height: 600px;
        position: sticky;
        top: 24px;
    }

    .tutor-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 20px;
        border-bottom: 1px solid #EEEAFB;
    }

    .tutor-avatar-wrap {
        position: relative;
    }

    .tutor-robot-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(106,53,255,0.25);
    }

    .robot-icon {
        color: #FFFFFF !important;
    }

    .tutor-status-dot {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--mud-palette-success);
        border: 2px solid #FFFFFF;
    }

    .tutor-title-block {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .tutor-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .tutor-subtitle {
        font-size: 0.72rem;
        color: var(--mud-palette-success);
        font-weight: 500;
    }

    .tutor-more-btn {
        color: var(--mud-palette-text-disabled) !important;
    }

    /* ═══════════ تاریخچه چت ═══════════ */
    .tutor-chat-area {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .chat-msg {
        display: flex;
        gap: 10px;
    }

    .user-msg {
        justify-content: flex-end;
    }

    .msg-avatar {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mini-robot {
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
    }

    .mini-robot-icon {
        color: #6A35FF !important;
        font-size: 16px !important;
    }

    .msg-bubble {
        max-width: 82%;
        border-radius: 18px;
        padding: 12px 16px;
    }

    .ai-bubble {
        background: #F7F5FC;
        border: 1px solid #ECE8FA;
        border-top-right-radius: 6px;
    }

    .ai-success-bubble {
        background: #EAFBF1;
        border: 1px solid #BDE8CA;
        border-top-right-radius: 6px;
    }

    .user-bubble {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        border-top-left-radius: 6px;
    }

    .user-bubble .msg-text {
        color: #FFFFFF;
    }

    .msg-text {
        font-size: 0.8rem;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.7;
    }

    .ai-math-hint {
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 10px;
        padding: 8px 14px;
        margin: 8px 0;
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        text-align: center;
    }

    .last-solved-section {
        margin-top: 8px;
    }

    .last-solved-label {
        font-size: 0.7rem;
        color: var(--mud-palette-text-disabled);
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
    }

    .last-solved-card {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #F7F5FC;
        border-radius: 12px;
        padding: 10px 14px;
        border: 1px solid #ECE8FA;
    }

    .last-solved-check {
        color: var(--mud-palette-success) !important;
    }

    .last-solved-text {
        font-size: 0.78rem;
        color: var(--mud-palette-text-primary);
        font-weight: 500;
    }

    /* ═══════════ ورودی چت ═══════════ */
    .tutor-input-area {
        padding: 14px 16px;
        border-top: 1px solid #EEEAFB;
    }

    .tutor-input-row {
        display: flex;
        gap: 8px;
    }

    .tutor-chat-input {
        flex: 1;
        border: 1px solid #ECE8FA;
        border-radius: 14px;
        padding: 10px 16px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        background: #FBFBFF;
        transition: border-color 0.2s;
    }

    .tutor-chat-input:focus {
        border-color: var(--mud-palette-primary, #6A35FF);
    }

    .tutor-chat-input::placeholder {
        color: var(--mud-palette-text-disabled);
    }

    .tutor-send-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .tutor-send-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .tutor-send-btn:hover:not(:disabled) {
        opacity: 0.85;
    }

    .send-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ محوطه آزمون ═══════════ */
    .exam-main-area {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .exam-top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .exam-header-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .exam-icon-wrap {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .exam-header-icon {
        color: #6A35FF !important;
    }

    .exam-title-block {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .exam-title {
        font-size: 1.2rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
    }

    .exam-subtitle {
        font-size: 0.82rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .exam-analytics-btn {
        color: var(--mud-palette-text-secondary) !important;
    }

    /* نوار پیشرفت */
    .exam-progress-bar-wrap {
        padding: 0 2px;
    }

    .exam-progress-bar {
        height: 8px;
        background: #ECE7FF;
        border-radius: 10px;
        overflow: hidden;
    }

    .exam-progress-fill {
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg, #5E2FFF, #7A4DFF);
        transition: width 0.4s ease;
    }

    /* ═══════════ کارت سوال ═══════════ */
    .exam-question-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        padding: 28px 30px;
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .adaptive-insight {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #FFF8E1;
        border: 1px solid #FFE082;
        border-radius: 14px;
        padding: 10px 16px;
        font-size: 0.8rem;
        color: #C79100;
        font-weight: 600;
    }

    .insight-icon {
        color: var(--mud-palette-warning) !important;
    }

    .question-text-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .question-number {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .question-body {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.7;
    }

    /* گزینه‌ها */
    .answer-options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .answer-option {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 22px;
        padding: 18px 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
        text-align: right;
    }

    .answer-option:hover {
        border-color: var(--mud-palette-divider);
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .option-selected {
        border-color: #6A35FF !important;
        background: #F8F5FF !important;
        box-shadow: 0 4px 14px rgba(106,53,255,0.12);
    }

    .option-indicator {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;
        background: var(--mud-palette-divider);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .indicator-active {
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        box-shadow: 0 4px 12px rgba(106,53,255,0.3);
    }

    .option-letter {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .indicator-active .option-letter {
        color: #FFFFFF;
    }

    .option-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        flex: 1;
    }

    .option-check {
        color: #6A35FF !important;
    }

    /* دکمه تایید */
    .confirm-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: rgba(139,92,246,0.15);
        color: #FFFFFF;
        border: none;
        border-radius: 18px;
        padding: 16px 28px;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
    }

    .confirm-btn:disabled {
        cursor: not-allowed;
    }

    .confirm-ready {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        box-shadow: 0 8px 24px rgba(94,47,255,0.3);
    }

    .confirm-ready:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(94,47,255,0.4);
    }

    .confirm-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ وضعیت موفقیت ═══════════ */
    .success-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
        position: relative;
        overflow: hidden;
        padding: 20px 0;
    }

    .success-confetti-area {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        pointer-events: none;
    }

    .confetti {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        animation: confetti-fall 2s ease-out infinite;
    }

    .c1 { background: #6A35FF; left: 15%; animation-delay: 0s; }
    .c2 { background: #FDBB11; left: 30%; animation-delay: 0.3s; }
    .c3 { background: var(--mud-palette-success); left: 50%; animation-delay: 0.6s; }
    .c4 { background: #FF5A5A; left: 65%; animation-delay: 0.2s; }
    .c5 { background: #4D8DFF; left: 80%; animation-delay: 0.5s; }
    .c6 { background: var(--mud-palette-warning); left: 90%; animation-delay: 0.8s; }

    @@keyframes confetti-fall {
        0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
        100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
    }

    .success-check-wrap {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: success-pop 0.5s ease;
    }

    @@keyframes success-pop {
        0% { transform: scale(0); }
        50% { transform: scale(1.15); }
        100% { transform: scale(1); }
    }

    .success-big-check {
        color: var(--mud-palette-success) !important;
        font-size: 44px !important;
    }

    .success-title {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
        animation: fade-up 0.6s ease;
    }

    .success-detail {
        font-size: 0.9rem;
        color: var(--mud-palette-success);
        font-weight: 700;
        margin: 0;
    }

    @@keyframes fade-up {
        0% { transform: translateY(10px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    .success-stats-row {
        display: flex;
        gap: 24px;
    }

    .success-stat {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .stat-icon {
        color: #6A35FF !important;
    }

    .stat-icon.gold {
        color: #FDBB11 !important;
    }

    .next-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        border: none;
        border-radius: 16px;
        padding: 14px 32px;
        font-family: inherit;
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        transition: transform 0.2s;
    }

    .next-btn:hover {
        transform: translateY(-2px);
    }

    .next-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .exam-layout {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .ai-tutor-sidebar {
            position: relative;
            top: 0;
            height: auto;
            min-height: 400px;
            max-height: 500px;
        }

        .answer-options-grid {
            grid-template-columns: 1fr;
        }

        .exam-question-card {
            padding: 20px 18px;
        }

        .question-body {
            font-size: 1.1rem;
        }
    }

    @@media (max-width: 600px) {
        .exam-question-card {
            border-radius: 20px;
            padding: 16px 14px;
            gap: 16px;
        }

        .answer-option {
            padding: 14px 16px;
            border-radius: 16px;
        }

        .option-value {
            font-size: 0.95rem;
        }

        .confirm-btn {
            padding: 14px 20px;
            font-size: 0.88rem;
        }

        .success-title {
            font-size: 1.05rem;
        }
    }

/* $fileRel */
.er-page {
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4px 40px
    }

        .er-page *, .er-page *::before, .er-page *::after {
            box-sizing: border-box
        }

    .er-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px
    }

    .er-top-left {
        display: flex;
        align-items: center;
        gap: 14px
    }

    .er-top-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg,#6D3BFF,#4A3DFF);
        display: flex;
        align-items: center;
        justify-content: center
    }

    .er-top-svg {
        color: #FFF !important
    }

    .er-title {
        font-size: 1.25rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0
    }

    .er-sub {
        font-size: .8rem;
        color: var(--mud-palette-text-secondary);
        margin: 2px 0 0
    }

    .er-top-right {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .er-select-wrap {
        position: relative
    }

    .er-select {
        height: 44px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: .84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer
    }

    .er-sel-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none
    }

    .er-export-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: #D9EDFF;
        color: #1B6BA0;
        border: none;
        border-radius: 14px;
        padding: 10px 20px;
        font-family: inherit;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer
    }

    /* KPI */
    .er-kpi-row {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 14px;
        margin-bottom: 20px
    }

    .er-kpi-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.05);
        padding: 18px 20px;
        display: flex;
        align-items: center;
        gap: 14px
    }

    .er-kpi-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .er-kpi-purple {
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))
    }

        .er-kpi-purple .mud-icon-root {
            color: #6D3BFF !important
        }

    .er-kpi-blue {
        background: linear-gradient(135deg,var(--mud-palette-info-light),#BBDEFB)
    }

        .er-kpi-blue .mud-icon-root {
            color: #3792FF !important
        }

    .er-kpi-green {
        background: linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)
    }

        .er-kpi-green .mud-icon-root {
            color: #22A447 !important
        }

    .er-kpi-orange {
        background: linear-gradient(135deg,var(--mud-palette-warning-light),#FFE0B2)
    }

        .er-kpi-orange .mud-icon-root {
            color: #F5B62F !important
        }

    .er-kpi-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px
    }

    .er-kpi-lbl {
        font-size: .72rem;
        color: #7B7B96
    }

    .er-kpi-val {
        font-size: 1.2rem;
        font-weight: 900;
        color: #1B1B1F
    }

    .er-kpi-chg {
        font-size: .7rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px
    }

        .er-kpi-chg.up {
            color: #22A447;
            background: rgba(34,164,71,.1)
        }

        .er-kpi-chg.down {
            color: var(--mud-palette-error);
            background: rgba(229,57,53,.1)
        }

    /* ردیف میانی */
    .er-mid-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .er-chart-card, .er-table-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.05);
        padding: 20px 22px
    }

    .er-sec-title {
        font-size: .9rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0 0 16px
    }

    /* نمودار */
    .er-bars-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 170px;
        gap: 14px;
        padding-top: 14px
    }

    .er-bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: 100%
    }

    .er-bar-val {
        font-size: .66rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600
    }

    .er-bar-track {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center
    }

    .er-bar-fill {
        width: 80%;
        max-width: 50px;
        border-radius: 10px 10px 0 0;
        min-height: 6px;
        background: linear-gradient(180deg,#A98BFF,#5C3FFF)
    }

    .er-bar-lbl {
        font-size: .66rem;
        color: #7B7B96
    }

    /* جدول */
    .er-tbl-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .er-table {
        width: 100%;
        min-width: 400px;
        border-collapse: collapse
    }

        .er-table th {
            text-align: right;
            padding: 12px 14px;
            font-size: .72rem;
            font-weight: 700;
            color: #6D3BFF;
            border-bottom: 1px solid #F0ECFA
        }

        .er-table td {
            padding: 12px 14px;
            font-size: .8rem;
            color: var(--mud-palette-text-primary);
            border-bottom: 1px solid #F8F6FC
        }

        .er-table tbody tr:hover {
            background: var(--mud-palette-background-hover)
        }

    .er-td-name {
        font-weight: 600
    }

    .er-td-score {
        font-weight: 700;
        color: #6D3BFF
    }

    .er-td-date {
        font-size: .72rem;
        color: #7B7B96
    }

    .er-status {
        display: inline-block;
        font-size: .68rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px
    }

    .st-pass {
        background: var(--mud-palette-success-light);
        color: #22A447
    }

    .st-fail {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error)
    }

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px) {
        .er-kpi-row {
            grid-template-columns: repeat(2,1fr)
        }

        .er-mid-row {
            grid-template-columns: 1fr
        }
    }

    @@media(max-width:600px) {
        .er-kpi-row {
            grid-template-columns: 1fr
        }

        .er-kpi-card {
            padding: 14px 16px
        }

        .er-top {
            flex-direction: column;
            align-items: flex-start
        }
    }

/* $fileRel */
.exams-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .exams-page *, .exams-page *::before, .exams-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .exams-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .exams-header-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .exams-title {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .exams-sub {
        font-size: 0.84rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
    }

    .exams-count-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 14px;
        padding: 9px 18px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .count-icon {
        color: #6A35FF !important;
    }

    /* ═══════════ جستجو ═══════════ */
    .search-bar-wrap {
        display: flex;
        align-items: center;
        background: var(--mud-palette-background-grey);
        border-radius: 14px;
        padding: 0 16px;
        margin-bottom: 18px;
        border: 1px solid transparent;
        transition: border-color 0.2s;
    }

    .search-bar-wrap:focus-within {
        border-color: var(--mud-palette-primary, #6A35FF);
        background: var(--mud-palette-surface);
    }

    .search-icon {
        color: #6A35FF !important;
        flex-shrink: 0;
    }

    .search-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 14px 12px;
        font-family: inherit;
        font-size: 0.86rem;
        color: var(--mud-palette-text-primary);
        outline: none;
    }

    .search-input::placeholder {
        color: var(--mud-palette-text-secondary);
    }

    .search-clear-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--mud-palette-text-disabled);
        padding: 4px;
    }

    /* ═══════════ فیلترها ═══════════ */
    .filter-pills-scroll {
        display: flex;
        gap: 8px;
        margin-bottom: 22px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .filter-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 50px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .filter-pill:hover {
        border-color: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
    }

    .pill-active {
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }

    .pill-active .pill-icon {
        color: #FFFFFF !important;
    }

    .pill-active .pill-count {
        background: rgba(255,255,255,0.2);
    }

    .pill-icon {
        color: var(--mud-palette-text-secondary);
    }

    .pill-count {
        background: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
        font-size: 0.7rem;
        padding: 1px 8px;
        border-radius: 10px;
        font-weight: 700;
        min-width: 22px;
        text-align: center;
    }

    /* ═══════════ گرید آزمون‌ها ═══════════ */
    .exams-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 28px;
    }

    .exam-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 26px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .exam-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

    .exam-card-top {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .exam-subject-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-math { background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2)); }
    .icon-physics { background: linear-gradient(135deg, var(--mud-palette-info-light), #BBDEFB); }
    .icon-chemistry { background: linear-gradient(135deg, var(--mud-palette-success-light), #C8E6C9); }
    .icon-literature { background: linear-gradient(135deg, var(--mud-palette-warning-light), #FFE0B2); }
    .icon-geometry { background: linear-gradient(135deg, var(--mud-palette-error-light), #F8BBD0); }
    .icon-biology { background: linear-gradient(135deg, #E0F7FA, #B2EBF2); }

    .subject-icon {
        color: #6A35FF !important;
    }

    .icon-physics .subject-icon { color: #1E88E5 !important; }
    .icon-chemistry .subject-icon { color: var(--mud-palette-success) !important; }
    .icon-literature .subject-icon { color: var(--mud-palette-warning) !important; }
    .icon-geometry .subject-icon { color: #E04070 !important; }
    .icon-biology .subject-icon { color: #00ACC1 !important; }

    .exam-card-header {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .exam-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.3;
    }

    .exam-badges-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .exam-type-badge {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 12px;
        border-radius: 8px;
    }

    .badge-free {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .badge-paid {
        background: #FFF8E1;
        color: #C79100;
    }

    .badge-subscription {
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        color: var(--mud-palette-primary, #6A35FF);
    }

    .exam-difficulty {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 8px;
    }

    .diff-easy {
        background: var(--mud-palette-success-light);
        color: var(--mud-palette-success);
    }

    .diff-medium {
        background: var(--mud-palette-warning-light);
        color: var(--mud-palette-warning);
    }

    .diff-hard {
        background: var(--mud-palette-error-light);
        color: var(--mud-palette-error);
    }

    .exam-desc {
        font-size: 0.82rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        line-height: 1.6;
    }

    /* متا دیتا */
    .exam-meta-row {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .exam-meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
    }

    .meta-icon {
        color: var(--mud-palette-text-disabled) !important;
        font-size: 16px !important;
    }

    /* قیمت + دکمه */
    .exam-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 4px;
    }

    .exam-price {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }

    .price-free {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mud-palette-success);
    }

    .price-value {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
    }

    .price-unit {
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .exam-cta-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        border: none;
        border-radius: 14px;
        padding: 10px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.15s;
    }

    .exam-cta-btn:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    .cta-icon {
        color: #FFFFFF !important;
    }

    /* ═══════════ صفحه‌بندی ═══════════ */
    .pagination-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .page-nav-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 12px;
        padding: 9px 16px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-primary, #6A35FF);
        cursor: pointer;
        transition: all 0.2s;
    }

    .page-nav-btn:hover:not(:disabled) {
        background: var(--mud-palette-primary-hover, #F5F2FD);
    }

    .page-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        color: var(--mud-palette-text-disabled);
    }

    .page-numbers {
        display: flex;
        gap: 6px;
    }

    .page-num {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .page-num:hover {
        border-color: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
    }

    .page-active {
        background: #6A35FF !important;
        color: #FFFFFF !important;
        border-color: #6A35FF !important;
        box-shadow: 0 4px 12px rgba(106,53,255,0.25);
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .exam-card {
            padding: 18px 20px;
            border-radius: 22px;
        }

        .exam-card-top {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .exam-badges-row {
            justify-content: center;
        }

        .exam-card-bottom {
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        .exam-cta-btn {
            width: 100%;
            justify-content: center;
        }

        .exam-meta-row {
            justify-content: center;
        }
    }

    @@media (max-width: 600px) {
        .exams-title {
            font-size: 1.15rem;
        }

        .exam-card {
            padding: 14px 16px;
            border-radius: 18px;
            gap: 10px;
        }

        .exam-card-title {
            font-size: 0.95rem;
        }

        .exam-subject-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
        }

        .filter-pill {
            padding: 8px 16px;
            font-size: 0.78rem;
        }

        .page-num {
            width: 34px;
            height: 34px;
            font-size: 0.76rem;
        }
    }

/* $fileRel */
.me-page {
        font-family: 'Vazirmatn','Peyda','Yekan Bakh','Dana','IRANSans','Tahoma',sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }
    .me-page *, .me-page *::before, .me-page *::after { box-sizing: border-box; }

    /* ─── هدر ─── */
    .me-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
        flex-wrap: wrap;
        gap: 14px;
    }
    .me-top-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .me-title-icon {
        width: 50px; height: 50px;
        border-radius: 50%;
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .me-title-icon-svg { color: #6A35FF !important; }
    .me-title-block { display: flex; flex-direction: column; gap: 3px; }
    .me-title { font-size: 1.5rem; font-weight: 900; color: #151521; margin: 0; }
    .me-subtitle { font-size: 0.84rem; color: var(--mud-palette-text-secondary); margin: 0; }

    .me-create-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        color: #FFFFFF;
        border: none;
        border-radius: 18px;
        height: 56px;
        padding: 0 28px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(94,47,255,0.22);
        transition: transform 0.15s, box-shadow 0.15s;
        white-space: nowrap;
    }
    .me-create-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(94,47,255,0.3); }
    .me-create-icon { color: #FFFFFF !important; }

    /* ─── فیلترها ─── */
    .me-filters-row {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
    }
    .me-search-wrap {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }
    .me-search-icon {
        position: absolute;
        right: 16px;
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
        z-index: 2;
    }
    .me-search-input {
        width: 100%;
        height: 64px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 20px;
        padding: 0 46px 0 20px;
        font-family: inherit;
        font-size: 0.88rem;
        color: #151521;
        outline: none;
        transition: border-color 0.2s;
    }
    .me-search-input:focus { border-color: var(--mud-palette-primary, #6A35FF); }
    .me-search-input::placeholder { color: var(--mud-palette-text-disabled); }

    .me-select-wrap {
        position: relative;
        min-width: 180px;
    }
    .me-select {
        width: 100%;
        height: 64px;
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 20px;
        padding: 0 42px 0 20px;
        font-family: inherit;
        font-size: 0.88rem;
        color: #151521;
        outline: none;
        appearance: none;
        cursor: pointer;
    }
    .me-select:focus { border-color: var(--mud-palette-primary, #6A35FF); }
    .me-select-arrow {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    /* ─── پنهان/نمایش ─── */
    .desktop-only { display: block; }
    .mobile-only { display: none; }

    /* ─── جدول ─── */
    .me-table-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        overflow: hidden;
        margin-bottom: 20px;
    }
    .me-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .me-table {
        width: 100%;
        min-width: 950px;
        border-collapse: collapse;
    }
    .me-table thead {
        background: var(--mud-palette-primary-hover, var(--mud-palette-primary-hover-light));
    }
    .me-table th {
        text-align: right;
        padding: 16px 18px;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        white-space: nowrap;
    }
    .me-table td {
        padding: 16px 18px;
        font-size: 0.84rem;
        color: #151521;
        border-bottom: 1px solid var(--mud-palette-divider);
        white-space: nowrap;
    }
    .me-table tbody tr:hover { background: var(--mud-palette-background-hover, var(--mud-palette-background-hover)); }
    .td-num { text-align: center; }

    .exam-title-cell {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .exam-status-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .dot-active { background: var(--mud-palette-success); }
    .dot-inactive { background: var(--mud-palette-text-disabled); }

    .exam-title-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .exam-name { font-weight: 600; }
    .exam-date { font-size: 0.7rem; color: var(--mud-palette-text-secondary); }

    /* ─── نشان‌ها ─── */
    .me-badge {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 999px;
    }
    .badge-math { background: var(--mud-palette-divider, var(--mud-palette-divider-light)); color: var(--mud-palette-primary, #6A35FF); }
    .badge-physics { background: var(--mud-palette-info-light); color: var(--mud-palette-info); }
    .badge-chemistry { background: var(--mud-palette-error-light); color: var(--mud-palette-error-darken); }

    .badge-easy { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .badge-mid { background: var(--mud-palette-warning-light); color: var(--mud-palette-warning); }
    .badge-hard { background: var(--mud-palette-error-light); color: var(--mud-palette-error); }

    .badge-free { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .badge-sub { background: var(--mud-palette-info-light); color: var(--mud-palette-info); }
    .badge-paid { background: #FFF8E1; color: #C79100; }

    /* ─── دکمه‌های اقدام ─── */
    .td-actions {
        display: flex;
        gap: 6px;
    }
    .me-action-btn {
        width: 34px; height: 34px;
        border-radius: 12px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.15s;
    }
    .me-action-btn:hover { background: var(--mud-palette-primary-hover, #F5F2FD); color: var(--mud-palette-primary, #6A35FF); border-color: var(--mud-palette-primary, #6A35FF); }
    .delete-btn { border-color: #FFCDD2; color: var(--mud-palette-error); }
    .delete-btn:hover { background: var(--mud-palette-error-light); border-color: #FF4D4F; }

    /* ─── صفحه‌بندی ─── */
    .me-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    .me-page-btn {
        background: var(--mud-palette-surface);
        border: 1px solid #ECE8FA;
        border-radius: 14px;
        padding: 9px 18px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mud-palette-primary, #6A35FF);
        cursor: pointer;
    }
    .me-page-btn:disabled { opacity: 0.35; cursor: not-allowed; color: var(--mud-palette-text-disabled); }
    .me-page-num {
        width: 40px; height: 40px;
        border-radius: 12px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
        cursor: pointer;
    }
    .page-on {
        background: linear-gradient(90deg, #5E2FFF, #7A4DFF) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }

    /* ─── نوک پاورقی ─── */
    .me-footer-tip {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--mud-palette-divider, var(--mud-palette-divider-light));
        border-radius: 18px;
        padding: 14px 20px;
        font-size: 0.82rem;
        color: var(--mud-palette-primary, #6A35FF);
        font-weight: 500;
    }
    .me-tip-icon { color: #6A35FF !important; flex-shrink: 0; }

    /* ═══════════ نسخه موبایل ═══════════ */
    @@media (max-width: 959px) {
        .desktop-only { display: none !important; }
        .mobile-only { display: block; }

        .me-filters-row {
            flex-direction: column;
        }
        .me-select-wrap {
            min-width: unset;
        }

        .me-mobile-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 20px;
        }
        .me-mob-card {
            background: var(--mud-palette-surface);
            border-radius: 22px;
            border: 1px solid var(--mud-palette-divider);
            box-shadow: 0 4px 18px rgba(0,0,0,0.04);
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .mob-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .mob-card-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mob-card-name { font-size: 0.9rem; font-weight: 700; color: #151521; }
        .mob-card-date { font-size: 0.7rem; color: var(--mud-palette-text-secondary); }
        .mob-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
        .mob-card-stats {
            display: flex;
            gap: 14px;
            font-size: 0.76rem;
            color: var(--mud-palette-text-secondary);
        }
        .mob-card-actions {
            display: flex;
            gap: 6px;
            justify-content: flex-end;
        }
    }

    @@media (max-width: 600px) {
        .me-title { font-size: 1.15rem; }
        .me-create-btn { height: 48px; padding: 0 20px; font-size: 0.82rem; border-radius: 14px; }
        .me-search-input, .me-select { height: 52px; border-radius: 16px; }
        .me-table-card { border-radius: 20px; }
    }

/* $fileRel */
.qb-page {
        font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width:1200px;margin:0 auto;padding:0 4px 40px;
    }
    .qb-page *,.qb-page *::before,.qb-page *::after{box-sizing:border-box}

    /* ─── هدر ─── */
    .qb-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .qb-top-left{display:flex;align-items:center;gap:14px}
    .qb-title-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);display:flex;align-items:center;justify-content:center}
    .qb-title-svg{color:#FFFFFF!important}
    .qb-title{font-size:1.3rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}
    .qb-top-right{display:flex;align-items:center;gap:10px}
    .qb-reports-btn{background: var(--mud-palette-surface);color:var(--mud-palette-primary);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
    .qb-new-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);color:#FFF;border:none;border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(111,65,255,.22)}
    .qb-new-icon{color:#FFF!important}

    /* ─── فیلترها ─── */
    .qb-filter-card{background: var(--mud-palette-surface);border-radius:22px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 16px rgba(0,0,0,0.04);padding:16px 20px;display:flex;gap:10px;margin-bottom:18px;align-items:center}
    .qb-ai-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--mud-palette-background-grey),var(--mud-palette-divider-light));color:var(--mud-palette-primary);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 18px;height:48px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
    .qb-ai-icon{color:var(--mud-palette-primary)!important}
    .qb-search-wrap{flex:1;position:relative;display:flex;align-items:center}
    .qb-search-icon{position:absolute;right:14px;color:var(--mud-palette-text-secondary)!important;pointer-events:none;z-index:2}
    .qb-search-input{width:100%;height:48px;background:var(--mud-palette-background);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 42px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none}
    .qb-search-input:focus{border-color:var(--mud-palette-primary)}
    .qb-search-input::placeholder{color:var(--mud-palette-text-disabled)}
    .qb-select-wrap{position:relative;min-width:150px}
    .qb-select{width:100%;height:48px;background:var(--mud-palette-background);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none;appearance:none;cursor:pointer}
    .qb-select:focus{border-color:var(--mud-palette-primary)}
    .qb-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}

    /* ─── جدول ─── */
    .desktop-only{display:block}.mobile-only{display:none}
    .qb-table-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 16px rgba(0,0,0,0.04);overflow:hidden;margin-bottom:18px}
    .qb-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .qb-table{width:100%;min-width:1000px;border-collapse:collapse}
    .qb-table thead{background:var(--mud-palette-background-grey)}
    .qb-table th{text-align:right;padding:14px 16px;font-size:.74rem;font-weight:700;color:var(--mud-palette-primary);white-space:nowrap}
    .th-chk{width:44px;text-align:center}.th-num{width:40px;text-align:center}
    .qb-table td{padding:14px 16px;font-size:.82rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F5F2FD}
    .qb-table tbody tr:hover{background:var(--mud-palette-background-hover)}
    .td-chk{text-align:center}.td-num{text-align:center;font-weight:600}.td-text{line-height:1.5}.td-date{font-size:.74rem;color: var(--mud-palette-text-secondary);white-space:nowrap}
    .qb-master-chk,.qb-row-chk{width:18px;height:18px;accent-color:var(--mud-palette-primary);cursor:pointer}
    .td-acts{display:flex;gap:4px}
    .qb-act{width:34px;height:34px;border-radius:10px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:all .15s}
    .qb-act:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:var(--mud-palette-primary);border-color:var(--mud-palette-primary)}
    .act-del{color:var(--mud-palette-error);border-color:#FFCDD2}.act-del:hover{background:var(--mud-palette-error-light);border-color:var(--mud-palette-error)}

    /* تگ‌ها */
    .qb-tag{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
    .tag-math{background: var(--mud-palette-divider, var(--mud-palette-divider-light));color:var(--mud-palette-primary)}.tag-geom{background:var(--mud-palette-error-light);color:var(--mud-palette-error-darken)}
    .tag-physics{background:var(--mud-palette-info-light);color:var(--mud-palette-info)}.tag-chem{background:var(--mud-palette-warning-light);color:var(--mud-palette-warning)}
    .tag-easy{background:var(--mud-palette-success-light);color:var(--mud-palette-success)}.tag-mid{background:var(--mud-palette-warning-light);color:var(--mud-palette-warning)}.tag-hard{background:var(--mud-palette-error-light);color:var(--mud-palette-error)}

    /* ─── صفحه‌بندی ─── */
    .qb-pag{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
    .qb-pag-btn{background: var(--mud-palette-surface);border:1px solid var(--mud-palette-divider);border-radius:14px;padding:9px 18px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--mud-palette-primary);cursor:pointer}
    .qb-pag-btn:disabled{opacity:.35;cursor:not-allowed;color:var(--mud-palette-text-disabled)}
    .qb-pag-num{width:40px;height:40px;border-radius:12px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.84rem;font-weight:700;color: var(--mud-palette-text-secondary);cursor:pointer}
    .pag-on{background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5)!important;color:#FFF!important;border-color:transparent!important;box-shadow:0 4px 12px rgba(111,65,255,.25)}

    /* ─── FAB ─── */
    .qb-fab{display:none}

    /* ═══════════ موبایل ═══════════ */
    @@media(max-width:850px){
        .desktop-only{display:none!important}.mobile-only{display:block}
        .qb-filter-card{flex-wrap:wrap}.qb-select-wrap{min-width:unset;flex:1}
        .qb-mob-list{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
        .qb-mob-card{background: var(--mud-palette-surface);border-radius:20px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 16px rgba(0,0,0,0.04);padding:16px;display:flex;flex-direction:column;gap:10px}
        .mob-top{display:flex;align-items:center;gap:8px}
        .mob-num{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800}
        .mob-text{font-size:.84rem;color: var(--mud-palette-text-primary);line-height:1.6;margin:0}
        .mob-meta{display:flex;gap:14px;font-size:.74rem;color:#7B7B96}
        .mob-acts{display:flex;gap:6px;justify-content:flex-end}
        .qb-fab{display:flex;align-items:center;gap:8px;position:fixed;bottom:24px;left:24px;z-index:100;background:linear-gradient(135deg,var(--mud-palette-primary),#5B3DF5);color:#FFF;border:none;border-radius:50px;padding:15px 24px;font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(111,65,255,.35)}
        .qb-fab:hover{transform:translateY(-2px)}
    }

/* $fileRel */
.sq-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,10,30,0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        font-family: 'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
    }

    .sq-overlay *, .sq-overlay *::before, .sq-overlay *::after { box-sizing: border-box; }

    .sq-modal {
        width: 100%;
        max-width: 960px;
        max-height: 90vh;
        background: var(--mud-palette-surface);
        border-radius: 32px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 20px 60px rgba(91,63,255,0.12);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ─── هدر ─── */
    .sq-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 28px 16px;
        flex-shrink: 0;
    }
    .sq-close-btn {
        width: 40px; height: 40px;
        border-radius: 50%;
        border: 1px solid var(--mud-palette-divider);
        background: var(--mud-palette-background);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--mud-palette-text-secondary);
        transition: all 0.2s;
    }
    .sq-close-btn:hover { background: var(--mud-palette-background-grey); color: var(--mud-palette-primary, #6A35FF); border-color: var(--mud-palette-divider); }

    .sq-header-center {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .sq-header-icon {
        width: 46px; height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7C3AED, #6D28D9);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sq-header-icon-svg { color: #FFFFFF !important; }

    .sq-header-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }
    .sq-header-spacer { width: 40px; }

    /* ─── فیلترها ─── */
    .sq-filters {
        display: flex;
        gap: 10px;
        padding: 0 28px 16px;
        flex-shrink: 0;
    }
    .sq-search-wrap {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }
    .sq-search-icon {
        position: absolute;
        right: 14px;
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
        z-index: 2;
    }
    .sq-search-input {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-background);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 0 42px 0 16px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .sq-search-input:focus {
        border-color: #7C3AED;
        box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
    }
    .sq-search-input::placeholder { color: var(--mud-palette-text-disabled); }

    .sq-select-wrap {
        position: relative;
        min-width: 150px;
    }
    .sq-select {
        width: 100%;
        height: 48px;
        background: var(--mud-palette-background);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 0 38px 0 14px;
        font-family: inherit;
        font-size: 0.84rem;
        color: var(--mud-palette-text-primary);
        outline: none;
        appearance: none;
        cursor: pointer;
    }
    .sq-select:focus { border-color: #7C3AED; }
    .sq-select-arrow {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mud-palette-text-secondary) !important;
        pointer-events: none;
    }

    /* ─── جدول (دسکتاپ) ─── */
    .desktop-only { display: block; }
    .mobile-only { display: none; }

    .sq-table-wrap {
        flex: 1;
        overflow: hidden;
        margin: 0 28px;
        border-radius: 20px;
        border: 1px solid var(--mud-palette-divider);
    }
    .sq-table-scroll {
        max-height: 360px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sq-table {
        width: 100%;
        border-collapse: collapse;
    }
    .sq-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--mud-palette-background-grey);
    }
    .sq-table th {
        text-align: right;
        padding: 14px 16px;
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        white-space: nowrap;
    }
    .th-check { width: 52px; text-align: center; }
    .sq-table td {
        padding: 14px 16px;
        font-size: 0.82rem;
        color: var(--mud-palette-text-primary);
        border-bottom: 1px solid var(--mud-palette-divider);
    }
    .sq-table tbody tr {
        cursor: pointer;
        transition: background 0.15s;
    }
    .sq-table tbody tr:hover { background: var(--mud-palette-background-hover, var(--mud-palette-background-hover)); }
    .row-selected { background: var(--mud-palette-background-grey) !important; }

    .td-check {
        text-align: center;
        vertical-align: middle;
    }
    .td-date { font-size: 0.76rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
    .td-text { line-height: 1.6; }

    /* ─── چک‌باکس گرد ─── */
    .sq-checkbox {
        width: 26px; height: 26px;
        border-radius: 50%;
        border: 2px solid var(--mud-palette-divider);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .sq-checkbox.checked {
        background: #7C3AED;
        border-color: #7C3AED;
        box-shadow: 0 3px 10px rgba(124,58,237,0.3);
    }
    .check-icon { color: #FFFFFF !important; font-size: 16px !important; }

    /* ─── تگ‌ها ─── */
    .sq-tag {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .tag-math { background: var(--mud-palette-divider, var(--mud-palette-divider-light)); color: #7C3AED; }
    .tag-geometry { background: var(--mud-palette-error-light); color: var(--mud-palette-error-darken); }
    .tag-physics { background: var(--mud-palette-info-light); color: var(--mud-palette-info); }
    .tag-chemistry { background: var(--mud-palette-warning-light); color: var(--mud-palette-warning); }
    .tag-stats { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .tag-easy { background: var(--mud-palette-success-light); color: var(--mud-palette-success); }
    .tag-mid { background: var(--mud-palette-warning-light); color: var(--mud-palette-warning); }
    .tag-hard { background: var(--mud-palette-error-light); color: var(--mud-palette-error); }

    /* ─── دکمه‌های پایین ─── */
    .sq-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 28px 22px;
        border-top: 1px solid #F0ECFA;
        flex-shrink: 0;
    }
    .sq-cancel-btn {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        border: 1px solid var(--mud-palette-divider);
        border-radius: 16px;
        padding: 13px 28px;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    .sq-cancel-btn:hover { background: var(--mud-palette-primary-hover, #F5F2FD); color: var(--mud-palette-primary, #6A35FF); border-color: var(--mud-palette-divider); }

    .sq-confirm-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #7C3AED, #5B3FFF, #6D28D9);
        color: #FFFFFF;
        border: none;
        border-radius: 16px;
        padding: 13px 28px;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 22px rgba(124,58,237,0.25);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .sq-confirm-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(124,58,237,0.35);
    }
    .sq-confirm-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }
    .sq-confirm-icon { color: #FFFFFF !important; }

    /* ═══════════ موبایل ═══════════ */
    @@media (max-width: 768px) {
        .sq-overlay { padding: 0; align-items: stretch; }
        .sq-modal {
            max-width: 100%;
            max-height: 100vh;
            border-radius: 0;
        }
        .sq-header { padding: 16px 18px 12px; }
        .sq-header-title { font-size: 1rem; }
        .sq-filters {
            flex-direction: column;
            padding: 0 18px 12px;
        }
        .sq-select-wrap { min-width: unset; }

        .desktop-only { display: none !important; }
        .mobile-only { display: block; }

        .sq-table-wrap { margin: 0 18px; }

        .sq-mobile-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 18px 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .sq-mob-card {
            background: var(--mud-palette-surface);
            border: 1px solid var(--mud-palette-divider);
            border-radius: 18px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .mob-card-sel {
            background: var(--mud-palette-background-grey);
            border-color: #7C3AED;
        }
        .mob-card-top {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .mob-card-date { font-size: 0.7rem; color: var(--mud-palette-text-secondary); margin-right: auto; }
        .mob-card-text { font-size: 0.84rem; color: var(--mud-palette-text-primary); line-height: 1.6; margin: 0; }
        .sq-mob-card .sq-checkbox { align-self: flex-end; }

        .sq-bottom-bar {
            padding: 14px 18px 18px;
            flex-direction: column;
        }
        .sq-cancel-btn, .sq-confirm-btn { width: 100%; justify-content: center; }
    }

/* $fileRel */
.achievements-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .achievements-page *, .achievements-page *::before, .achievements-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ کارت هدر ═══════════ */
    .achv-header-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 28px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .achv-header-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .achv-trophy-wrap {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FFF3D6, #FFE4A0);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(253,187,17,0.2);
    }

    .achv-trophy-icon {
        color: #FDBB11 !important;
        font-size: 32px !important;
    }

    .achv-header-info {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .achv-header-title {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
        line-height: 1.2;
    }

    .achv-header-sub {
        font-size: 0.88rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        font-weight: 500;
    }

    .achv-header-right {
        display: flex;
        align-items: center;
    }

    .achv-progress-ring-wrap {
        position: relative;
        width: 80px;
        height: 80px;
    }

    .achv-progress-ring {
        width: 80px;
        height: 80px;
        transform: rotate(-90deg);
    }

    .ring-bg {
        fill: none;
        stroke: #ECE7FF;
        stroke-width: 8;
    }

    .ring-fill {
        fill: none;
        stroke: url(#ringGradient);
        stroke-width: 8;
        stroke-linecap: round;
        stroke-dasharray: 264;
        stroke-dashoffset: 174;
        transition: stroke-dashoffset 0.8s ease;
    }

    .ring-pct {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1rem;
        font-weight: 800;
        color: var(--mud-palette-primary, #6A35FF);
    }

    /* ═══════════ تب‌های فیلتر ═══════════ */
    .achv-filter-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .filter-tab {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 50px;
        border: 1px solid var(--mud-palette-divider);
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .filter-tab:hover {
        background: #F7F5FC;
        border-color: var(--mud-palette-divider);
        color: var(--mud-palette-primary, #6A35FF);
    }

    .filter-tab-active {
        background: linear-gradient(90deg, #6A35FF 0%, #7B4FFF 100%) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(106,53,255,0.25);
    }

    .filter-tab-active .filter-tab-icon {
        color: #FFFFFF !important;
    }

    .filter-tab-icon {
        color: var(--mud-palette-text-secondary);
    }

    /* ═══════════ گرید دستاوردها ═══════════ */
    .achv-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-bottom: 32px;
    }

    .achv-badge-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 24px 18px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .achv-badge-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

    /* وضعیت قفل */
    .badge-locked {
        opacity: 0.55;
        filter: grayscale(0.4);
    }

    .badge-locked .badge-hexagon {
        filter: grayscale(0.6);
    }

    /* نشان وضعیت شناور */
    .badge-status-float {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 2;
    }

    .badge-check-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--mud-palette-success);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(46,190,79,0.3);
    }

    .badge-status-icon.locked {
        color: var(--mud-palette-text-disabled) !important;
    }

    .badge-status-icon.unlocked {
        color: #FFFFFF !important;
    }

    /* نشان ویژه */
    .badge-rare-star {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 2;
    }

    .rare-star-icon {
        color: #FDBB11 !important;
        filter: drop-shadow(0 2px 4px rgba(253,187,17,0.3));
    }

    /* آیکون شش‌ضلعی */
    .badge-hex-wrap {
        margin-top: 8px;
    }

    .badge-hexagon {
        width: 72px;
        height: 72px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

    .hex-pink {
        background: linear-gradient(180deg, #FF80AB, #E04070);
    }

    .hex-fire {
        background: linear-gradient(180deg, var(--mud-palette-warning), var(--mud-palette-error));
    }

    .hex-yellow {
        background: linear-gradient(180deg, #FFD54F, #FDBB11);
    }

    .hex-blue {
        background: linear-gradient(180deg, #44B8FF, #1E6DE0);
    }

    .hex-green {
        background: linear-gradient(180deg, #69F0AE, var(--mud-palette-success));
    }

    .hex-purple {
        background: linear-gradient(180deg, #B388FF, #6A35FF);
    }

    .badge-hex-icon {
        color: #FFFFFF !important;
    }

    .badge-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
        text-align: center;
    }

    .badge-date {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .locked-text {
        color: var(--mud-palette-text-disabled) !important;
    }

    /* ═══════════ نشان‌های پین‌شده ═══════════ */
    .pinned-section {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid var(--mud-palette-divider);
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 24px 28px;
        margin-bottom: 24px;
    }

    .pinned-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .pin-header-icon {
        color: #FF5A5A !important;
    }

    .pinned-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        margin: 0;
        flex: 1;
    }

    .pinned-count {
        font-size: 0.8rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 500;
    }

    .pinned-cards-row {
        display: flex;
        gap: 16px;
    }

    .pinned-mini-card {
        flex: 1;
        background: var(--mud-palette-background);
        border-radius: 16px;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--mud-palette-divider);
        transition: background 0.2s;
    }

    .pinned-mini-card:hover {
        background: var(--mud-palette-divider);
    }

    .pinned-mini-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pinned-mini-hex {
        width: 40px;
        height: 40px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pinned-mini-icon {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

    .pinned-mini-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pinned-mini-name {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .pinned-mini-date {
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
    }

    .pinned-red-icon {
        color: #FF5A5A !important;
        flex-shrink: 0;
    }

    /* ═══════════ پیام انگیزشی ═══════════ */
    .bottom-motivation {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 20px 24px;
        background: linear-gradient(135deg, var(--mud-palette-background, #F8F5FF), var(--mud-palette-divider, var(--mud-palette-divider-light)));
        border-radius: 20px;
        border: 1px solid var(--mud-palette-divider);
    }

    .motivation-icon {
        color: #FDBB11 !important;
    }

    .motivation-text {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
        margin: 0;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .achv-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .achv-header-card {
            flex-direction: column;
            gap: 16px;
            text-align: center;
            padding: 22px 20px;
        }

        .achv-header-left {
            flex-direction: column;
        }

        .pinned-cards-row {
            flex-direction: column;
        }

        .achv-filter-tabs {
            gap: 8px;
        }

        .filter-tab {
            padding: 8px 16px;
            font-size: 0.78rem;
        }
    }

    @@media (max-width: 600px) {
        .achv-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .achv-badge-card {
            padding: 16px 12px 14px;
            border-radius: 18px;
        }

        .badge-hexagon {
            width: 56px;
            height: 56px;
        }

        .badge-title {
            font-size: 0.8rem;
        }

        .pinned-section {
            padding: 18px 16px;
        }

        .bottom-motivation {
            padding: 16px 18px;
        }
    }

/* $fileRel */
.profile-page {
        max-width: 600px; margin: 0 auto;
        font-family: 'Vazirmatn','IRANSans','Tahoma',sans-serif;
    }
    .profile-loading {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; min-height: 300px;
    }
    .prof-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 20px;
    }
    .prof-card {
        padding: 24px; border-radius: 16px;
        border: 1px solid var(--mud-palette-divider, #E2E8F0);
        background: var(--mud-palette-surface, #FFFFFF);
    }
    .view-row { display: flex; align-items: center; gap: 20px; }
    .view-info { display: flex; flex-direction: column; gap: 4px; }
    .view-name {
        font-size: 1.25rem; font-weight: 800; margin: 0;
        color: var(--mud-palette-text-primary, #0F172A);
    }
    .view-phone {
        font-size: 0.85rem; color: var(--mud-palette-text-secondary, #64748B); text-align: right;
    }
    .view-email { font-size: 0.85rem; color: var(--mud-palette-primary, #4F46E5); }
    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .detail-item { display: flex; flex-direction: column; gap: 2px; }
    .edit-fields { display: flex; flex-direction: column; gap: 12px; }
    .edit-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
    .roles-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .mt-4 { margin-top: 16px; }

/* $fileRel */
.st-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .st-page *,.st-page *::before,.st-page *::after{box-sizing:border-box}

    .st-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
    .st-header-left{display:flex;align-items:center;gap:14px}
    .st-header-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .st-header-svg{color:#FFF!important}
    .st-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.st-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}

    /* تب‌ها */
    .st-tabs-scroll{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
    .st-tab{display:flex;align-items:center;gap:6px;padding:10px 20px;border-radius:14px;border: 1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.84rem;font-weight:600;color: var(--mud-palette-text-secondary);cursor:pointer;white-space:nowrap}
    .st-tab:hover{border-color:var(--mud-palette-divider);color:#6D3BFF}.st-tab-on{background:linear-gradient(135deg,#6D3BFF,#4A3DFF)!important;color:#FFF!important;border-color:transparent!important}

    .st-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}

    /* فرم */
    .st-form-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:24px 26px;display:flex;flex-direction:column;gap:24px}
    .st-form-section{display:flex;flex-direction:column;gap:16px}
    .st-sec-title{font-size:.9rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0;display:flex;align-items:center;gap:8px}
    .st-stat-icn{color:#6D3BFF!important}

    .st-field{display:flex;flex-direction:column;gap:6px;flex:1}
    .st-lbl{font-size:.78rem;font-weight:700;color:#7B7B96}
    .st-input{height:46px;background: var(--mud-palette-surface);border:1px solid #E7EBF3;border-radius:14px;padding:0 16px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none}.st-input:focus{border-color:#6D3BFF;box-shadow:0 0 0 3px rgba(109,59,255,.08)}
    .st-textarea{background: var(--mud-palette-surface);border:1px solid #E7EBF3;border-radius:14px;padding:12px 16px;font-family:inherit;font-size:.84rem;color: var(--mud-palette-text-primary);outline:none;resize:none}.st-textarea:focus{border-color:#6D3BFF}
    .st-hint{font-size:.7rem;color:var(--mud-palette-text-disabled)}
    .st-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

    .st-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}.st-toggle-lbl{font-size:.84rem;font-weight:600;color:#1B1B1F}
    .st-switch{position:relative;display:inline-block;width:48px;height:26px}.st-switch input{opacity:0;width:0;height:0}.st-switch-slider{position:absolute;cursor:pointer;inset:0;background: rgba(139,92,246,0.15);border-radius:26px;transition:.25s}.st-switch-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background: var(--mud-palette-surface);border-radius:50%;transition:.25s}.st-switch input:checked+.st-switch-slider{background:#22A447}.st-switch input:checked+.st-switch-slider::before{transform:translateX(22px)}

    /* دکمه‌ها */
    .st-form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:8px;border-top:1px solid #F0ECFA}
    .st-btn-reset{background: var(--mud-palette-surface);color:var(--mud-palette-error);border:1px solid #FFCDD2;border-radius:14px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
    .st-btn-save{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:14px;padding:10px 26px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}

    /* وضعیت */
    .st-status-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px;display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}
    .st-stat-grid{display:flex;flex-direction:column;gap:12px}
    .st-stat-item{display:flex;align-items:center;gap:12px}
    .st-stat-dot{width:10px;height:10px;border-radius:50%}.st-stat-dot.ok{background:#22A447;box-shadow:0 0 0 4px rgba(34,164,71,.15)}
    .st-stat-item>div{display:flex;flex-direction:column;gap:1px}.st-stat-name{font-size:.78rem;color:#7B7B96}.st-stat-val{font-size:.84rem;font-weight:700;color:#22A447}
    .st-stat-meta{display:flex;justify-content:space-between;font-size:.68rem;color:var(--mud-palette-text-disabled)}
    .st-success-box{display:flex;align-items:center;gap:8px;background:var(--mud-palette-success-light);border-radius:14px;padding:12px 16px;font-size:.78rem;font-weight:600;color:#22A447}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.st-body{grid-template-columns:1fr}.st-status-card{position:static}.st-row-2{grid-template-columns:1fr}}
    @@media(max-width:600px){.st-form-card{padding:16px 14px}.st-form-actions{flex-direction:column}.st-btn-save,.st-btn-reset{width:100%;justify-content:center}}

/* $fileRel */
.wl-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:950px;margin:0 auto;padding:0 4px 40px}
    .wl-page *,.wl-page *::before,.wl-page *::after{box-sizing:border-box}

    /* کارت موجودی */
    .wl-balance-card{background:linear-gradient(135deg,#5B2EFF,#7B3FFF);border-radius:28px;padding:28px 30px;color:#FFF;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:18px;box-shadow:0 12px 40px rgba(91,46,255,.25)}
    .wl-balance-top{display:flex;align-items:center;gap:16px}
    .wl-balance-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
    .wl-balance-svg{color:#FFF!important;font-size:30px!important}
    .wl-balance-lbl{font-size:.82rem;opacity:.8;display:block}.wl-balance-row{display:flex;align-items:baseline;gap:8px;margin-top:4px}
    .wl-balance-val{font-size:1.8rem;font-weight:900}.wl-balance-unit{font-size:.82rem;opacity:.7}
    .wl-quick-acts{display:flex;gap:10px}
    .wl-act-btn{display:flex;align-items:center;gap:6px;padding:12px 24px;border-radius:16px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;border:none}
    .wl-act-deposit{background: var(--mud-palette-surface);color:#5B2EFF}.wl-act-withdraw{background:rgba(255,255,255,.15);color:#FFF;border:1px solid rgba(255,255,255,.25)}

    /* فرم‌ها */
    .wl-forms-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
    .wl-form-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .wl-form-title{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;color:#17153B;margin:0 0 16px}.wl-form-icn{color:#5B2EFF!important}
    .wl-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.wl-field label{font-size:.76rem;font-weight:700;color:#7B7B96}
    .wl-input{height:46px;background:#FAFAFE;border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 16px;font-family:inherit;font-size:.84rem;color:#17153B;outline:none}.wl-input:focus{border-color:#5B2EFF}
    .wl-sel-wrap{position:relative}.wl-select{width:100%;height:46px;background:#FAFAFE;border:1px solid var(--mud-palette-divider);border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color:#17153B;outline:none;appearance:none;cursor:pointer}.wl-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}
    .wl-submit{width:100%;background:linear-gradient(90deg,#5B2EFF,#7B3FFF);color:#FFF;border:none;border-radius:14px;padding:12px 20px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(91,46,255,.2)}
    .wl-submit-out{background: var(--mud-palette-surface);color: var(--mud-palette-primary, #5B2EFF);border:1px solid var(--mud-palette-divider);box-shadow:none}

    /* جدول */
    .wl-table-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .wl-sec-title{font-size:.9rem;font-weight:800;color:#17153B;margin:0 0 16px}
    .wl-tbl-scroll{overflow-x:auto}.wl-table{width:100%;min-width:550px;border-collapse:collapse}
    .wl-table th{text-align:right;padding:12px 16px;font-size:.72rem;font-weight:700;color: var(--mud-palette-primary, #5B2EFF);border-bottom:1px solid #F0ECFA}
    .wl-table td{padding:12px 16px;font-size:.8rem;color:#17153B;border-bottom:1px solid #F8F6FC}
    .wl-td-date{font-size:.74rem;color: var(--mud-palette-text-secondary);white-space:nowrap}.wl-td-desc{font-weight:500}.wl-td-amt{font-weight:700;white-space:nowrap}
    .wl-amt-in{color:#24A148}.wl-amt-out{color:#FF4B4B}
    .wl-txn-type,.wl-status{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .wl-txn-type.wl-tt-in{background:var(--mud-palette-success-light);color:#24A148}.wl-txn-type.wl-tt-out{background:var(--mud-palette-error-light);color:#FF4B4B}
    .wl-status.wl-st-ok{background:var(--mud-palette-success-light);color:#24A148}.wl-status.wl-st-pend{background:var(--mud-palette-warning-light);color:#D38B00}.wl-status.wl-st-fail{background:var(--mud-palette-error-light);color:#FF4B4B}

    .wl-pag{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:.74rem;color: var(--mud-palette-text-secondary);flex-wrap:wrap;gap:8px}
    .wl-pag-btns{display:flex;gap:6px}.wl-pag-btn{padding:6px 14px;border-radius:10px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.76rem;font-weight:600;color: var(--mud-palette-primary, #5B2EFF);cursor:pointer}.wl-pag-btn:disabled{opacity:.35;cursor:not-allowed}
    .wl-pag-num{width:34px;height:34px;border-radius:10px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);font-family:inherit;font-size:.76rem;font-weight:700;color: var(--mud-palette-text-secondary);cursor:pointer}.wl-pag-on{background:linear-gradient(90deg,#5B2EFF,#7B3FFF)!important;color:#FFF!important;border-color:transparent!important}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:750px){.wl-forms-row{grid-template-columns:1fr}.wl-balance-card{flex-direction:column;align-items:flex-start;padding:22px 20px}.wl-balance-val{font-size:1.4rem}}

/* $fileRel */
.leaderboard-page {
        font-family: 'Vazirmatn', 'Peyda', 'Yekan Bakh', 'Dana', 'IRANSans', 'Tahoma', sans-serif;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 4px 40px;
    }

    .leaderboard-page *, .leaderboard-page *::before, .leaderboard-page *::after {
        box-sizing: border-box;
    }

    /* ═══════════ هدر ═══════════ */
    .lb-header-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 24px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .lb-header-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .lb-podium-wrap {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lb-podium-icon {
        color: #6A35FF !important;
        font-size: 28px !important;
    }

    .lb-header-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .lb-header-title {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .lb-header-sub {
        font-size: 0.84rem;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        font-weight: 500;
    }

    .lb-header-right {
        display: flex;
        align-items: center;
    }

    .lb-league-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #FFF8E1, #FFE082);
        padding: 8px 18px;
        border-radius: 50px;
        border: 1px solid #FFE082;
    }

    .lb-league-icon {
        color: #FDBB11 !important;
    }

    .lb-league-text {
        font-size: 0.84rem;
        font-weight: 700;
        color: #C79100;
    }

    /* ═══════════ تب‌های فیلتر ═══════════ */
    .lb-filter-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .lb-filter-tab {
        padding: 10px 22px;
        border-radius: 50px;
        border: 1px solid #ECE8FA;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-secondary);
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .lb-filter-tab:hover {
        background: #F7F5FC;
        color: var(--mud-palette-primary, #6A35FF);
        border-color: var(--mud-palette-divider);
    }

    .lb-filter-active {
        background: linear-gradient(90deg, #6A35FF 0%, #7A4DFF 100%) !important;
        color: #FFFFFF !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(106,53,255,0.25);
    }

    /* ═══════════ سکوی سه‌نفره ═══════════ */
    .lb-podium {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 16px;
        margin-bottom: 28px;
        padding: 0 10px;
    }

    .podium-card {
        background: var(--mud-palette-surface);
        border-radius: 28px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 8px 24px rgba(106,53,255,0.08);
        padding: 24px 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex: 1;
        max-width: 240px;
        position: relative;
        transition: transform 0.2s;
    }

    .podium-card:hover {
        transform: translateY(-4px);
    }

    .podium-gold {
        flex: 1.25;
        max-width: 280px;
        padding: 32px 24px 24px;
    }

    .winner {
        border-color: #FDBB11;
        box-shadow: 0 8px 28px rgba(253,187,17,0.18), 0 0 0 3px rgba(253,187,17,0.1);
    }

    .winner-crown {
        position: absolute;
        top: -16px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FDBB11, #F59E0B);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(253,187,17,0.3);
    }

    .crown-icon {
        color: #FFFFFF !important;
    }

    .podium-rank-badge {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 800;
        color: #FFFFFF;
    }

    .podium-rank-badge.gold { background: #FDBB11; }
    .podium-rank-badge.silver { background: #B8C1D6; }
    .podium-rank-badge.bronze { background: #D1844F; }

    .podium-medal-wrap {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gold-medal { background: rgba(253,187,17,0.15); }
    .silver-medal { background: rgba(184,193,214,0.15); }
    .bronze-medal { background: rgba(209,132,79,0.15); }

    .podium-medal-icon.gold-icon { color: #FDBB11 !important; font-size: 30px !important; }
    .podium-medal-icon.silver-icon { color: #B8C1D6 !important; font-size: 28px !important; }
    .podium-medal-icon.bronze-icon { color: #D1844F !important; font-size: 28px !important; }

    .podium-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6A35FF, #7A4DFF);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .winner-avatar {
        width: 72px;
        height: 72px;
        font-size: 1.5rem;
        box-shadow: 0 6px 18px rgba(106,53,255,0.3);
    }

    .podium-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin: 0;
    }

    .podium-xp {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
    }

    .winner-xp {
        font-size: 0.9rem;
    }

    .podium-badges {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .podium-fire {
        color: var(--mud-palette-warning) !important;
    }

    .podium-change {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 20px;
    }

    .podium-change.up {
        color: var(--mud-palette-success);
        background: rgba(46,190,79,0.1);
    }

    .podium-change.down {
        color: #FF4D4D;
        background: rgba(255,77,77,0.1);
    }

    /* ═══════════ جدول رتبه‌بندی ═══════════ */
    .lb-table-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        overflow: hidden;
        margin-bottom: 24px;
    }

    .lb-table-header {
        display: grid;
        grid-template-columns: 60px 1fr 90px 70px 70px;
        gap: 8px;
        align-items: center;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
        padding: 14px 20px;
        color: #FFFFFF;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .th-rank, .th-user, .th-xp, .th-badge {
        text-align: center;
    }

    .th-user { text-align: right; }

    .lb-table-body {
        display: flex;
        flex-direction: column;
    }

    .lb-table-row {
        display: grid;
        grid-template-columns: 60px 1fr 90px 70px 70px;
        gap: 8px;
        align-items: center;
        padding: 14px 20px;
        border-bottom: 1px solid var(--mud-palette-divider);
        transition: background 0.15s;
    }

    .lb-table-row:hover {
        background: var(--mud-palette-background-hover, var(--mud-palette-background-hover));
    }

    .lb-table-row:last-child {
        border-bottom: none;
    }

    .lb-current-user-row {
        background: #F8F5FF;
        border-right: 4px solid #6A35FF;
    }

    .lb-current-user-row:hover {
        background: #F3EDFF;
    }

    .td-rank {
        display: flex;
        justify-content: center;
    }

    .rank-num {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
    }

    .you-badge {
        background: linear-gradient(90deg, #6A35FF, #7A4DFF);
        color: #FFFFFF;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 12px;
    }

    .td-user {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-avatar-mini {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .user-name {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .td-xp {
        text-align: center;
    }

    .xp-val {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--mud-palette-primary, #6A35FF);
    }

    .td-badges {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    .badge-fire-icon {
        color: var(--mud-palette-warning) !important;
        font-size: 16px !important;
    }

    .badge-count {
        font-size: 0.78rem;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .td-change {
        display: flex;
        justify-content: center;
    }

    .change-badge {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 12px;
    }

    .change-badge.up {
        color: var(--mud-palette-success);
        background: rgba(46,190,79,0.1);
    }

    .change-badge.down {
        color: #FF4D4D;
        background: rgba(255,77,77,0.1);
    }

    .change-badge.neutral {
        color: var(--mud-palette-text-disabled);
    }

    /* ═══════════ کارت پیشرفت پایین ═══════════ */
    .lb-bottom-card {
        background: var(--mud-palette-surface);
        border-radius: 24px;
        border: 1px solid #ECE8FA;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        padding: 22px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .lb-bottom-left {
        flex: 1;
    }

    .lb-xp-next {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .lb-xp-next-text {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
    }

    .lb-xp-track {
        height: 10px;
        background: #ECE7FF;
        border-radius: 8px;
        overflow: hidden;
    }

    .lb-xp-fill {
        height: 100%;
        width: 68%;
        border-radius: 8px;
        background: linear-gradient(90deg, #5E2FFF 0%, #7A4DFF 100%);
    }

    .lb-xp-sub {
        font-size: 0.76rem;
        color: var(--mud-palette-text-secondary);
    }

    .lb-bottom-right {
        display: flex;
        align-items: center;
    }

    .lb-share-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(180deg, #B9E7FF 0%, #8FD2FF 100%);
        color: #1B6BA0;
        border: none;
        border-radius: 14px;
        padding: 12px 24px;
        font-family: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        white-space: nowrap;
    }

    .lb-share-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(143,210,255,0.35);
    }

    .share-icon {
        color: #1B6BA0 !important;
    }

    /* ═══════════ ریسپانسیو ═══════════ */
    @@media (max-width: 959px) {
        .lb-podium {
            gap: 10px;
        }

        .podium-card {
            max-width: 200px;
            padding: 18px 14px 16px;
            border-radius: 22px;
        }

        .podium-gold {
            max-width: 220px;
            padding: 24px 16px 20px;
        }

        .winner-avatar {
            width: 56px;
            height: 56px;
            font-size: 1.2rem;
        }

        .podium-avatar {
            width: 44px;
            height: 44px;
            font-size: 1rem;
        }

        .lb-table-header,
        .lb-table-row {
            grid-template-columns: 50px 1fr 75px 60px 60px;
            padding: 12px 14px;
            gap: 4px;
        }

        .lb-bottom-card {
            flex-direction: column;
            align-items: stretch;
            padding: 18px 20px;
        }

        .lb-share-btn {
            justify-content: center;
        }
    }

    @@media (max-width: 600px) {
        .lb-header-card {
            flex-direction: column;
            gap: 14px;
            text-align: center;
            padding: 18px 16px;
        }

        .lb-header-left {
            flex-direction: column;
        }

        .lb-podium {
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .podium-card,
        .podium-gold {
            max-width: 100%;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            padding: 18px 16px;
        }

        .winner {
            order: -1;
        }

        .winner-crown {
            top: -14px;
        }

        .lb-table-header,
        .lb-table-row {
            grid-template-columns: 45px 1fr 65px 55px 50px;
            padding: 10px 10px;
            gap: 2px;
            font-size: 0.7rem;
        }

        .lb-table-header {
            font-size: 0.7rem;
        }

        .xp-val {
            font-size: 0.72rem;
        }

        .user-name {
            font-size: 0.76rem;
        }

        .lb-filter-tabs {
            gap: 6px;
        }

        .lb-filter-tab {
            padding: 8px 16px;
            font-size: 0.76rem;
        }
    }

/* $fileRel */
.sp-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .sp-page *,.sp-page *::before,.sp-page *::after{box-sizing:border-box}

    .sp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .sp-top-left{display:flex;align-items:center;gap:14px}
    .sp-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .sp-top-svg{color:#FFF!important}.sp-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.sp-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .sp-top-right{display:flex;gap:8px}.sp-sel-wrap{position:relative}.sp-select{height:44px;background: var(--mud-palette-surface);border: 1px solid var(--mud-palette-divider);border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.82rem;color: var(--mud-palette-text-primary);outline:none;appearance:none;cursor:pointer}.sp-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}
    .sp-btn-export{display:flex;align-items:center;gap:4px;background:#D9EDFF;color:#1B6BA0;border:none;border-radius:14px;padding:10px 18px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer}

    /* KPI */
    .sp-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
    .sp-kpi{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:18px 20px;display:flex;align-items:center;gap:14px}
    .sp-kpi-icn{width:44px;height:44px;min-width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .sp-icn-purple{background:linear-gradient(135deg, var(--mud-palette-divider, var(--mud-palette-divider-light)), rgba(139,92,246,0.2))}.sp-icn-purple .mud-icon-root{color:#6D3BFF!important}
    .sp-icn-green{background:linear-gradient(135deg,var(--mud-palette-success-light),#C8E6C9)}.sp-icn-green .mud-icon-root{color:#22A447!important}
    .sp-icn-gold{background:linear-gradient(135deg,#FFF8E1,#FFE082)}.sp-icn-gold .mud-icon-root{color:#F5B62F!important}
    .sp-icn-orange{background:linear-gradient(135deg,var(--mud-palette-warning-light),#FFE0B2)}.sp-icn-orange .mud-icon-root{color:#FF8C32!important}
    .sp-kpi>div{flex:1;display:flex;flex-direction:column;gap:2px}.sp-kpi-lbl{font-size:.72rem;color:#7B7B96}.sp-kpi-val{font-size:1.3rem;font-weight:900;color:#1B1B1F}

    /* ردیف میانی */
    .sp-mid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .sp-chart-card,.sp-table-card{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:20px 22px}
    .sp-sec-title{font-size:.9rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0 0 16px}

    .sp-bars{display:flex;align-items:flex-end;justify-content:space-around;height:170px;gap:12px;padding-top:14px}
    .sp-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}.sp-bar-cnt{font-size:.66rem;color: var(--mud-palette-text-secondary);font-weight:600}
    .sp-bar-trk{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
    .sp-bar-fill{width:80%;max-width:50px;border-radius:10px 10px 0 0;min-height:6px;background:linear-gradient(180deg,#BDAEFF,#5B43FF)}.sp-bar-rng{font-size:.64rem;color:#7B7B96}

    .sp-tbl-scroll{overflow-x:auto}.sp-table{width:100%;min-width:400px;border-collapse:collapse}
    .sp-table th{text-align:right;padding:12px 14px;font-size:.72rem;font-weight:700;color:#6D3BFF;border-bottom:1px solid #F0ECFA}
    .sp-table td{padding:12px 14px;font-size:.8rem;color: var(--mud-palette-text-primary);border-bottom:1px solid #F8F6FC}
    .sp-td-rank{text-align:center;font-weight:700;color: var(--mud-palette-text-secondary);width:30px}
    .sp-st-cell{display:flex;align-items:center;gap:8px}.sp-st-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:.66rem;font-weight:700}
    .sp-td-score{font-weight:700;color:#6D3BFF}
    .sp-chg{font-size:.72rem;font-weight:700}.sp-chg-up{color:#22A447}.sp-chg-down{color:#FF4D4F}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.sp-kpi-row{grid-template-columns:repeat(2,1fr)}.sp-mid{grid-template-columns:1fr}}
    @@media(max-width:600px){.sp-kpi-row{grid-template-columns:1fr}.sp-top{flex-direction:column;align-items:flex-start}}

/* $fileRel */
.sm-page{
        font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;
        max-width:1150px;margin:0 auto;padding:0 4px 40px;
    }
    .sm-page *,.sm-page *::before,.sm-page *::after{box-sizing:border-box}

    /* ─── هدر ─── */
    .sm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
    .sm-top-left{display:flex;align-items:center;gap:14px}
    .sm-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .sm-top-svg{color:#FFF!important}
    .sm-title{font-size:1.25rem;font-weight:900;color: var(--mud-palette-text-primary);margin:0}.sm-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}
    .sm-top-acts{display:flex;gap:8px}
    .sm-btn-primary{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);color:#FFF;border:none;border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(109,59,255,.2)}
    .sm-btn-primary:hover{transform:translateY(-1px)}
    .sm-btn-outline{display:flex;align-items:center;gap:6px;background: var(--mud-palette-surface);color:#6D3BFF;border:1px solid var(--mud-palette-divider);border-radius:16px;padding:10px 22px;font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
    .sm-btn-sm{font-size:.76rem!important;padding:8px 16px!important;border-radius:12px!important}

    /* ─── بدنه ─── */
    .sm-body{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}

    /* ─── پنل درخت ─── */
    .sm-tree-panel{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 10px 35px rgba(60,72,88,.08);overflow:hidden}
    .sm-tree-header{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom: 1px solid var(--mud-palette-divider);font-size:.88rem;font-weight:700;color:#1B1B1F}
    .sm-tree-hdr-icon{color:#6D3BFF!important}.sm-tree-count{font-size:.72rem;color: var(--mud-palette-text-secondary);font-weight:500;margin-right:auto}

    .sm-tree{padding:10px 0}
    .sm-tree-node{display:flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;transition:background .15s;position:relative}
    .sm-tree-node:hover{background:#F8F6FC}
    .sm-connector{position:absolute;right:14px;top:50%;width:12px;height:0;border-top:1.5px dashed var(--mud-palette-divider)}
    .sm-expand-btn{width:24px;height:24px;border-radius:6px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-background);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:transform .2s;flex-shrink:0}
    .sm-expand-btn.expanded{transform:rotate(-90deg)}
    .sm-expand-spacer{width:24px;height:24px;flex-shrink:0}
    .sm-node-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .icon-folder{background:#FFF8E1}.icon-folder .mud-icon-root{color:#F5B62F!important}
    .icon-leaf{background:var(--mud-palette-success-light)}.icon-leaf .mud-icon-root{color:#67C23A!important}
    .sm-node-name{font-size:.84rem;font-weight:600;color: var(--mud-palette-text-primary);flex:1}
    .sm-node-count{font-size:.7rem;color:var(--mud-palette-text-disabled);font-weight:600;min-width:30px;text-align:center}
    .sm-node-acts{display:flex;gap:4px}
    .sm-node-act{width:30px;height:30px;border-radius:8px;border:1px solid var(--mud-palette-divider);background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color: var(--mud-palette-text-secondary);transition:all .15s}
    .sm-node-act:hover{background: var(--mud-palette-primary-hover, #F5F2FD);color:#6D3BFF;border-color:#6D3BFF}
    .act-del{color:var(--mud-palette-error);border-color:#FFCDD2}.act-del:hover{background:var(--mud-palette-error-light);border-color:var(--mud-palette-error)}

    /* ─── پنل جزئیات ─── */
    .sm-detail-panel{background: var(--mud-palette-surface);border-radius:24px;border: 1px solid var(--mud-palette-divider);box-shadow:0 10px 35px rgba(60,72,88,.08);padding:28px 24px;position:sticky;top:24px}
    .sm-detail-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
    .sm-detail-illust{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#FFF8E1,#FFE082);display:flex;align-items:center;justify-content:center}
    .sm-detail-folder{color:#F5B62F!important;font-size:40px!important}
    .sm-detail-name{font-size:1.1rem;font-weight:800;color: var(--mud-palette-text-primary);margin:0}
    .sm-detail-stats{display:flex;gap:24px}
    .sm-stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}
    .sm-stat-num{font-size:1.1rem;font-weight:800;color:#6D3BFF}.sm-stat-lbl{font-size:.7rem;color:#7B7B96}
    .sm-detail-desc{font-size:.8rem;color: var(--mud-palette-text-secondary);line-height:1.6;margin:0}
    .sm-detail-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){
        .sm-body{grid-template-columns:1fr}
        .sm-detail-panel{position:static}
    }
    @@media(max-width:600px){
        .sm-title{font-size:1.05rem}
        .sm-tree-node{padding:8px 12px;gap:6px}
        .sm-node-name{font-size:.78rem}
        .sm-node-acts .sm-node-act{width:26px;height:26px}
    }

/* $fileRel */
.hlp-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .hlp-page *,.hlp-page *::before,.hlp-page *::after{box-sizing:border-box}

    .hlp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px}
    .hlp-header-left{display:flex;align-items:center;gap:14px}
    .hlp-header-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6D3BFF,#4A3DFF);display:flex;align-items:center;justify-content:center}
    .hlp-header-svg{color:#FFF!important}.hlp-title{font-size:1.25rem;font-weight:900;color:#1F2350;margin:0}.hlp-sub{font-size:.8rem;color:#55607A;margin:2px 0 0}
    .hlp-search-wrap{position:relative}.hlp-search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;z-index:2}
    .hlp-search{width:280px;height:46px;background: var(--mud-palette-surface);border:1px solid #EAEFFC;border-radius:16px;padding:0 42px 0 14px;font-family:inherit;font-size:.84rem;color:#1F2350;outline:none}.hlp-search:focus{border-color:#5B43FF}

    .hlp-body{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
    .hlp-main{display:flex;flex-direction:column;gap:16px}
    .hlp-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}

    .hlp-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid #EAEFFC;box-shadow:0 4px 18px rgba(0,0,0,0.05);padding:22px 24px}
    .hlp-sec-title{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:800;color:#1F2350;margin:0 0 16px}.hlp-sec-icn{color:#5B43FF!important}

    /* FAQ */
    .hlp-faq-item{border:1px solid #EAEFFC;border-radius:18px;overflow:hidden;margin-bottom:8px;transition:background .2s}
    .hlp-faq-open{background:#F8F6FF;border-color:var(--mud-palette-divider)}
    .hlp-faq-item:last-child{margin-bottom:0}
    .hlp-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:none;border:none;font-family:inherit;font-size:.84rem;font-weight:700;color:#1F2350;cursor:pointer;text-align:right}
    .hlp-faq-arrow{color: var(--mud-palette-text-secondary);transition:transform .25s}.hlp-faq-open .hlp-faq-arrow{transform:rotate(180deg);color:#5B43FF}
    .hlp-faq-a{padding:0 18px 14px}.hlp-faq-a p{font-size:.8rem;color:#55607A;line-height:1.7;margin:0}

    /* تایم‌لاین */
    .hlp-smart-timeline{display:flex;flex-direction:column;gap:0}
    .hlp-step{display:flex;gap:16px;position:relative}
    .hlp-step:not(:last-child) .hlp-step-dot-wrap::after{content:"";position:absolute;top:16px;right:7px;width:2px;height:calc(100% + 4px);background:#EAEFFC}
    .hlp-step-dot-wrap{position:relative;flex-shrink:0;padding-top:14px}
    .hlp-step-dot{width:16px;height:16px;border-radius:50%;background:#5B43FF;box-shadow:0 0 0 4px rgba(91,67,255,.12)}
    .hlp-step-card{flex:1;display:flex;align-items:flex-start;gap:14px;background:#FBFBFF;border:1px solid #EAEFFC;border-radius:16px;padding:14px 16px;margin-bottom:14px}
    .hlp-step-icon{width:36px;height:36px;min-width:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF}.hlp-step-title{font-size:.82rem;font-weight:700;color:#1F2350;display:block}.hlp-step-desc{font-size:.74rem;color:#55607A;margin:4px 0 0;line-height:1.5}

    /* راه‌های ارتباطی */
    .hlp-contact-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
    .hlp-contact-item{display:flex;align-items:center;gap:12px}
    .hlp-contact-icon{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF}.hlp-ci-purple{background:var(--mud-palette-divider-light)}.hlp-ci-purple .mud-icon-root{color:#6D3BFF!important}.hlp-ci-blue{background:var(--mud-palette-info-light)}.hlp-ci-blue .mud-icon-root{color:#3BA6FF!important}.hlp-ci-green{background:var(--mud-palette-success-light)}.hlp-ci-green .mud-icon-root{color:#22A447!important}
    .hlp-contact-item>div{display:flex;flex-direction:column;gap:1px}.hlp-contact-lbl{font-size:.72rem;color:#55607A}.hlp-contact-val{font-size:.82rem;font-weight:600;color:#1F2350}

    .hlp-online-badge{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:#22A447;background:var(--mud-palette-success-light);border-radius:12px;padding:10px 16px}.hlp-online-dot{width:10px;height:10px;border-radius:50%;background:#22A447;box-shadow:0 0 0 3px rgba(34,164,71,.15)}

    /* بنر */
    .hlp-banner{background:linear-gradient(135deg,#6D3BFF,#4A3DFF);border-radius:24px;padding:24px 22px;color:#FFF;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
    .hlp-banner-icon{font-size:36px!important}.hlp-banner-title{font-size:.95rem;font-weight:800}.hlp-banner-desc{font-size:.78rem;opacity:.85;margin:0;line-height:1.6}
    .hlp-banner-btn{background: var(--mud-palette-surface);color:#6D3BFF;border:none;border-radius:14px;padding:10px 24px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.15)}

    /* ─── ریسپانسیو ─── */
    @@media(max-width:900px){.hlp-body{grid-template-columns:1fr}.hlp-side{position:static}.hlp-search{width:100%}}

/* $fileRel */
.sup-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:1100px;margin:0 auto;padding:0 4px 40px}
    .sup-page *,.sup-page *::before,.sup-page *::after{box-sizing:border-box}

    .sup-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
    .sup-top-left{display:flex;align-items:center;gap:14px}
    .sup-top-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#5B2EFF,#7B4EFF);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(91,46,255,.2)}
    .sup-top-svg{color:#FFF!important}.sup-title{font-size:1.25rem;font-weight:900;color:#1B174F;margin:0}.sup-sub{font-size:.8rem;color: var(--mud-palette-text-secondary);margin:2px 0 0}

    .sup-body{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
    .sup-main{display:flex;flex-direction:column;gap:16px}

    .sup-card{background: var(--mud-palette-surface);border-radius:24px;border:1px solid #E9E7F8;box-shadow:0 4px 20px rgba(0,0,0,0.05);padding:22px 24px}
    .sup-sec-title{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:800;color:#1B174F;margin:0 0 16px}.sup-sec-icn{color:#5B2EFF!important}

    /* فرم */
    .sup-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.sup-field label{font-size:.76rem;font-weight:700;color:#7B7B96}
    .sup-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .sup-input{height:46px;background:#FAFAFE;border:1px solid #E9E7F8;border-radius:14px;padding:0 16px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none}.sup-input:focus{border-color:#5B2EFF}
    .sup-sel-wrap{position:relative}.sup-select{width:100%;height:46px;background:#FAFAFE;border:1px solid #E9E7F8;border-radius:14px;padding:0 38px 0 14px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none;appearance:none;cursor:pointer}.sup-sel-arrow{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mud-palette-text-secondary)!important;pointer-events:none}
    .sup-textarea{background:#FAFAFE;border:1px solid #E9E7F8;border-radius:14px;padding:12px 16px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none;resize:none}.sup-textarea:focus{border-color:#5B2EFF}

    .sup-upload-area{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px;border:2px dashed var(--mud-palette-divider);border-radius:18px;background:#FBFAFF;margin-bottom:14px;cursor:pointer;transition:border-color .2s}.sup-upload-area:hover{border-color:#5B2EFF}.sup-upload-icon{color:#5B2EFF!important;font-size:32px!important}
    .sup-upload-area>span{font-size:.82rem;color:#1B174F;font-weight:600}.sup-upload-hint{font-size:.7rem!important;color:var(--mud-palette-text-disabled)!important;font-weight:400!important}

    .sup-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(90deg,#5B2EFF,#7B4EFF);color:#FFF;border:none;border-radius:16px;padding:14px 20px;font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(91,46,255,.25)}
    .sup-submit:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(91,46,255,.35)}
    .sup-notice{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:.74rem;color: var(--mud-palette-text-secondary);justify-content:center}.sup-notice .mud-icon-root{color:var(--mud-palette-text-secondary)!important}

    /* FAQ */
    .sup-faq{border:1px solid #E9E7F8;border-radius:16px;overflow:hidden;margin-bottom:8px}.sup-faq:last-child{margin-bottom:0}.sup-faq-open{background:#F2EEFF;border-color:var(--mud-palette-divider)}
    .sup-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:none;border:none;font-family:inherit;font-size:.82rem;font-weight:700;color:#1B174F;cursor:pointer;text-align:right}
    .sup-faq-arr{color: var(--mud-palette-text-secondary);transition:transform .25s}.sup-faq-open .sup-faq-arr{transform:rotate(180deg);color:#5B2EFF}
    .sup-faq-a{padding:0 16px 14px}.sup-faq-a p{font-size:.78rem;color:#55607A;line-height:1.7;margin:0}

    /* تیکت‌ها */
    .sup-side{display:flex;flex-direction:column;gap:10px;position:sticky;top:24px}
    .sup-ticket-card{background: var(--mud-palette-surface);border-radius:20px;border:1px solid #E9E7F8;padding:16px 18px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s}.sup-ticket-card:hover{box-shadow:0 4px 14px rgba(0,0,0,0.06)}
    .sup-ticket-top{display:flex;justify-content:space-between;align-items:center}.sup-ticket-title{font-size:.84rem;font-weight:700;color:#1B174F}.sup-ticket-date{font-size:.7rem;color:var(--mud-palette-text-disabled)}
    .sup-ticket-meta{display:flex;gap:8px}
    .sup-priority,.sup-status{display:inline-block;font-size:.66rem;font-weight:700;padding:3px 10px;border-radius:999px}
    .prio-normal{background:var(--mud-palette-success-light);color:#24A148}.prio-important{background:var(--mud-palette-warning-light);color:#D38B00}.prio-urgent{background:var(--mud-palette-error-light);color:#FF4B4B}
    .st-open{background:var(--mud-palette-info-light);color:#3BA6FF}.st-progress{background:var(--mud-palette-warning-light);color:#D38B00}.st-closed{background:var(--mud-palette-success-light);color:#24A148}

    @@media(max-width:900px){.sup-body{grid-template-columns:1fr}.sup-side{position:static}}
    @@media(max-width:600px){.sup-row-2{grid-template-columns:1fr}.sup-card{padding:16px 14px}}

/* $fileRel */
.sc-page{font-family:'Vazirmatn','Yekan Bakh','Peyda','Dana','IRANSans','Tahoma',sans-serif;max-width:750px;margin:0 auto;padding:0 4px 40px;display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:600px}
    .sc-page *,.sc-page *::before,.sc-page *::after{box-sizing:border-box}

    /* هدر */
    .sc-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background: var(--mud-palette-surface);border-radius:24px 24px 0 0;border:1px solid #E9E7F8;border-bottom:none}
    .sc-top-left{display:flex;align-items:center;gap:14px}
    .sc-back-btn{width:38px;height:38px;border-radius:50%;border:1px solid #E9E7F8;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}
    .sc-agent-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#5B2EFF,#7B4EFF);display:flex;align-items:center;justify-content:center;position:relative}
    .sc-agent-svg{color:#FFF!important}.sc-online-dot{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#24A148;border:2px solid #FFF}
    .sc-title{font-size:1.05rem;font-weight:800;color:#1B174F;margin:0}.sc-sub{font-size:.74rem;color: var(--mud-palette-text-secondary);margin:1px 0 0}
    .sc-close-btn{width:38px;height:38px;border-radius:50%;border:1px solid #E9E7F8;display:flex;align-items:center;justify-content:center;background: var(--mud-palette-surface);cursor:pointer;color:#7B7B96}

    /* بدنه چت */
    .sc-chat-body{flex:1;overflow-y:auto;padding:16px 20px;background:#FBFAFF;border:1px solid #E9E7F8;border-top:none;border-bottom:none;display:flex;flex-direction:column;gap:16px}
    .sc-date-divider{text-align:center}.sc-date-divider span{font-size:.7rem;color:var(--mud-palette-text-disabled);background:#FBFAFF;padding:0 14px}

    .sc-msg{display:flex;gap:10px;max-width:85%}.sc-msg-agent{align-self:flex-start}.sc-msg-user{align-self:flex-end;flex-direction:row-reverse}
    .sc-msg-avatar{width:34px;height:34px;min-width:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;align-self:flex-end}
    .sc-msg-bubble{padding:12px 16px;border-radius:20px;position:relative}
    .sc-bubble-agent{background: var(--mud-palette-surface);border:1px solid #E9E7F8;border-bottom-right-radius:6px}
    .sc-bubble-user{background:linear-gradient(90deg,#5B2EFF,#7B4EFF);color:#FFF;border-bottom-left-radius:6px}
    .sc-bubble-user p{color:#FFF}.sc-msg-bubble p{font-size:.82rem;line-height:1.7;margin:0 0 14px}.sc-msg-bubble p:last-child{margin-bottom:0}
    .sc-msg-time{font-size:.64rem;color:var(--mud-palette-text-secondary);display:block;text-align:left;margin-top:6px}.sc-bubble-user .sc-msg-time{color:rgba(255,255,255,.6)}

    .sc-quick-links{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
    .sc-quick-link{background:#F2EEFF;color: var(--mud-palette-primary, #5B2EFF);border:1px solid var(--mud-palette-divider);border-radius:12px;padding:9px 14px;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;text-align:right}

    /* تایپ */
    .sc-typing-indicator{display:flex;align-items:flex-end;gap:10px;align-self:flex-start}
    .sc-typing-dots{display:flex;gap:5px;padding:12px 16px;background: var(--mud-palette-surface);border:1px solid #E9E7F8;border-radius:20px;border-bottom-right-radius:6px}
    .sc-typing-dots span{width:8px;height:8px;border-radius:50%;background: rgba(139,92,246,0.15);animation:sc-bounce 1.4s infinite ease-in-out}.sc-typing-dots span:nth-child(1){animation-delay:0s}.sc-typing-dots span:nth-child(2){animation-delay:.2s}.sc-typing-dots span:nth-child(3){animation-delay:.4s}
    @@keyframes sc-bounce{0%,80%,100%{transform:scale(.6)}40%{transform:scale(1)}}

    /* امتیازدهی */
    .sc-rating-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background: var(--mud-palette-surface);border:1px solid #E9E7F8;border-top:none;font-size:.8rem;color:#7B7B96}
    .sc-rating-emojis{display:flex;gap:6px}.sc-rating-emojis button{width:38px;height:38px;border-radius:50%;border:1px solid #E9E7F8;background: var(--mud-palette-surface);font-size:1.1rem;cursor:pointer;transition:all .15s}
    .sc-rating-emojis button:hover,.sc-emoji-sel{background:#F2EEFF!important;border-color:#5B2EFF!important;transform:scale(1.1)}

    /* ورودی */
    .sc-input-bar{display:flex;align-items:center;gap:8px;padding:12px 20px;background: var(--mud-palette-surface);border-radius:0 0 24px 24px;border:1px solid #E9E7F8;border-top:none}
    .sc-attach-btn{width:40px;height:40px;min-width:40px;border-radius:50%;border:1px solid #E9E7F8;background: var(--mud-palette-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7B7B96}
    .sc-chat-input{flex:1;height:44px;background:#FAFAFE;border:1px solid #E9E7F8;border-radius:22px;padding:0 18px;font-family:inherit;font-size:.84rem;color:#1B174F;outline:none}.sc-chat-input:focus{border-color:#5B2EFF}
    .sc-send-btn{width:44px;height:44px;min-width:44px;border-radius:50%;background:linear-gradient(90deg,#5B2EFF,#7B4EFF);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#FFF;box-shadow:0 4px 14px rgba(91,46,255,.25)}

    @@media(max-width:600px){.sc-page{height:calc(100vh - 80px);border-radius:0}.sc-top{border-radius:0}}









/* ═══════════════════════════════════════════════════════════════
   GLOBAL MUD VARIABLE OVERRIDES
   جایگزینی تمام رنگ‌های سخت‌کد شده با متغیرهای MudBlazor
   این block در انتهای فایل قرار دارد تا تمام بخش‌های قبلی
   (شامل بخش‌های minified) را override کند.
   ═══════════════════════════════════════════════════════════════ */

/* ── Text colors → MudBlazor variables ── */
.fn-kpi-lbl, .gs-dlbl, .gs-des-role, .um-uemail, .um-td-date,
.fn-td-date, .gs-nact, .sc-rating-bar, .sc-attach-btn { color: var(--mud-palette-text-secondary) !important; }
.fn-kpi-val, .gs-dval, .gs-tree-hdr, .gs-node-name, .fn-sec-title,
.gs-card-title, .an-header-title { color: var(--mud-palette-text-primary) !important; }

/* ── Background colors → MudBlazor variables ── */
.fn-kpi, .fn-chart-card, .fn-dist-card, .fn-table-card,
.gs-tree-panel, .gs-card, .an-heatmap-card, .an-kpi-card { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; }
.gs-nact { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; }
.gs-node:hover, .sm-tree-node:hover { background: var(--mud-palette-action-default-hover) !important; }
.sc-quick-link { background: var(--mud-palette-primary-hover) !important; color: var(--mud-palette-primary) !important; }
.hlp-faq-open { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; }
.sc-typing-dots { border-color: var(--mud-palette-divider) !important; }
.sc-chat-input { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; color: var(--mud-palette-text-primary) !important; }
.sc-attach-btn { border-color: var(--mud-palette-divider) !important; background: var(--mud-palette-surface) !important; }
.sc-rating-bar, .sc-input-bar { border-color: var(--mud-palette-divider) !important; }
.sc-rating-emojis button { border-color: var(--mud-palette-divider) !important; background: var(--mud-palette-surface) !important; }
.sc-rating-emojis button:hover, .sc-emoji-sel { background: var(--mud-palette-primary-hover) !important; border-color: var(--mud-palette-primary) !important; }

/* ── Table headers → MudBlazor primary ── */
.fn-table th, .um-table th, .wl-table th, .sp-table th { color: var(--mud-palette-primary) !important; border-bottom-color: var(--mud-palette-divider) !important; }

/* ── Table cells → MudBlazor variables ── */
.fn-table td, .um-table td, .wl-table td, .sp-table td { border-bottom-color: var(--mud-palette-divider) !important; color: var(--mud-palette-text-primary) !important; }

/* ── Icons → MudBlazor primary ── */
.gs-tree-hdr-icon, .gs-card-ticon, .chart-header-icon,
.gs-nact:hover { color: var(--mud-palette-primary) !important; }
.gs-nact:hover { border-color: var(--mud-palette-primary) !important; }
.feat-icon { color: var(--mud-palette-primary) !important; }

/* ── Delete / Danger actions ── */
.gs-nact-del { color: var(--mud-palette-error) !important; border-color: var(--mud-palette-error) !important; }
.gs-danger-card { border-color: var(--mud-palette-error) !important; }

/* ── Avatar gradients → MudBlazor variables ── */
.pr-avatar { background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary)) !important; }
.pr-hex-purple { background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary)) !important; }
.pr-hex-orange { background: linear-gradient(135deg, var(--mud-palette-error), #F39C12) !important; }
.pr-hex-blue { background: linear-gradient(135deg, var(--mud-palette-info), #00B4D8) !important; }
.pr-xp-fill { background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-info)) !important; }
.pr-level-badge { background: var(--mud-palette-primary-hover) !important; color: var(--mud-palette-primary) !important; }
.pr-achv-link { color: var(--mud-palette-primary) !important; }

/* ── SC (Smart Chat) specific ── */
.sc-chat-input:focus { border-color: var(--mud-palette-primary) !important; }

/* ── Status badges ── */
.fn-st-ok { background: var(--mud-palette-success) !important; color: #FFF !important; }
.fn-st-pend { background: var(--mud-palette-warning) !important; color: #1B1B1F !important; }
.fn-st-fail { background: var(--mud-palette-error) !important; color: #FFF !important; }
.fn-amt-in { color: var(--mud-palette-success) !important; }
.fn-amt-out { color: var(--mud-palette-error) !important; }
.status-inactive { color: var(--mud-palette-error) !important; }

/* ── Misc ── */
.fn-dist-pct { color: var(--mud-palette-text-primary) !important; }
.fn-dist-bar { background: var(--mud-palette-divider) !important; }
.gs-tree-hdr { border-bottom-color: var(--mud-palette-divider) !important; }
.gs-des-avatar { color: #FFF !important; }

/* ── Dark mode: SC (Smart Chat) ── */
.mud-dark .sc-quick-link { background: var(--mud-palette-primary-hover) !important; }
.mud-dark .sc-typing-dots { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; }
.mud-dark .sc-typing-dots span { background: var(--mud-palette-primary) !important; }
.mud-dark .sc-rating-bar, .mud-dark .sc-input-bar { border-color: var(--mud-palette-divider) !important; }
.mud-dark .sc-rating-emojis button { border-color: var(--mud-palette-divider) !important; }
.mud-dark .sc-rating-emojis button:hover, .mud-dark .sc-emoji-sel { background: var(--mud-palette-primary-hover) !important; border-color: var(--mud-palette-primary) !important; }
.mud-dark .sc-chat-input { background: var(--mud-palette-surface) !important; border-color: var(--mud-palette-divider) !important; color: var(--mud-palette-text-primary) !important; }
.mud-dark .sc-chat-input:focus { border-color: var(--mud-palette-primary) !important; }
.mud-dark .sc-attach-btn { color: var(--mud-palette-text-secondary) !important; border-color: var(--mud-palette-divider) !important; }

/* ══════════════════════════════════════════════════════════════
   CreateQuestion AI + Excel styles (override duplicate cq- blocks)
   ══════════════════════════════════════════════════════════════ */
.cq-ai-form { display:flex; flex-direction:column; gap:10px; }
.cq-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cq-ai-results { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.cq-ai-results-header { display:flex; align-items:center; justify-content:space-between; font-size:0.78rem; color:var(--mud-palette-text-secondary); }
.cq-ai-qitem { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:10px; cursor:pointer; border:1px solid var(--mud-palette-divider); transition:all 0.15s; }
.cq-ai-qitem:hover, .cq-ai-qitem.selected { border-color:#6D3EFF; background:var(--mud-palette-primary-hover, #F8F7FF); }
.cq-ai-qbody { flex:1; min-width:0; }
.cq-ai-qtext { font-size:0.8rem; font-weight:500; line-height:1.4; margin-bottom:4px; }
.cq-ai-qopts { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:4px; }
.cq-ai-opt { font-size:0.7rem; padding:2px 7px; border-radius:4px; background:var(--mud-palette-background-grey, #F3F4F6); color:var(--mud-palette-text-secondary); }
.cq-ai-opt.correct { background:#ECFDF5; color:#059669; font-weight:600; }
.cq-ai-qexpl { font-size:0.7rem; color:#D97706; line-height:1.4; }
.cq-excel-section { display:flex; flex-direction:column; gap:8px; }


/* ═══════════════════════════════════════════════════════════════
   Shopping Cart — AppBar Dropdown
   ═══════════════════════════════════════════════════════════════ */
.appbar-cart-btn {
    position: relative;
}
.appbar-cart-has-items::after {
    content: attr(data-count);
    position: absolute;
    top: 4px;
    right: 4px;
    background: #EF4444;
    color: #FFF;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.appbar-cart-menu .mud-popover {
    max-width: 380px !important;
    min-width: 320px !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden;
}

.appbar-cart-popover {
    padding: 0;
}
.appbar-cart-popover-header {
    padding: 14px 16px 10px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-lighten));
    color: #FFF;
    border-radius: 0;
}
.appbar-cart-popover-header .mud-text { color: #FFF !important; }

.appbar-cart-popover-items {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 8px;
}
.appbar-cart-popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.15s;
}
.appbar-cart-popover-item:hover {
    background: var(--mud-palette-action-default-hover);
}
.appbar-cart-popover-item-info {
    flex: 1;
    min-width: 0;
}
.appbar-cart-popover-item-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appbar-cart-popover-item-price {
    display: block;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}
.appbar-cart-popover-remove {
    flex-shrink: 0;
}
.appbar-cart-popover-footer {
    padding: 10px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.appbar-cart-checkout-btn {
    border-radius: 10px !important;
    font-size: 0.78rem !important;
}

.appbar-cart-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.appbar-cart-empty-icon {
    font-size: 48px !important;
    opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════════
   Shopping Cart — AppBar Dropdown
   ═══════════════════════════════════════════════════════════════ */
.appbar-cart-btn {
    position: relative;
}
.appbar-cart-has-items::after {
    content: attr(data-count);
    position: absolute;
    top: 4px;
    right: 4px;
    background: #EF4444;
    color: #FFF;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.appbar-cart-menu .mud-popover {
    max-width: 380px !important;
    min-width: 320px !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden;
}

.appbar-cart-popover {
    padding: 0;
}
.appbar-cart-popover-header {
    padding: 14px 16px 10px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-lighten));
    color: #FFF;
    border-radius: 0;
}
.appbar-cart-popover-header .mud-text { color: #FFF !important; }

.appbar-cart-popover-items {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 8px;
}
.appbar-cart-popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.15s;
}
.appbar-cart-popover-item:hover {
    background: var(--mud-palette-action-default-hover);
}
.appbar-cart-popover-item-info {
    flex: 1;
    min-width: 0;
}
.appbar-cart-popover-item-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appbar-cart-popover-item-price {
    display: block;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}
.appbar-cart-popover-remove {
    flex-shrink: 0;
}
.appbar-cart-popover-footer {
    padding: 10px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.appbar-cart-checkout-btn {
    border-radius: 10px !important;
    font-size: 0.78rem !important;
}

.appbar-cart-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.appbar-cart-empty-icon {
    font-size: 48px !important;
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   Checkout Page (chk-)
   ═══════════════════════════════════════════════════════════════ */
.chk-page {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Vazirmatn','IRANSans','Tahoma',sans-serif;
}

/* Header */
.chk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.chk-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chk-back-btn {
    color: var(--mud-palette-text-secondary);
}
.chk-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

/* Empty State */
.chk-empty {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.chk-empty-illustration {
    margin-bottom: 8px;
}
.chk-empty-svg {
    width: 200px;
    height: 160px;
}
.chk-empty-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0;
}
.chk-empty-sub {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    max-width: 420px;
    line-height: 1.8;
    margin: 0;
}
.chk-empty-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* Grid Layout */
.chk-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .chk-grid {
        grid-template-columns: 1fr;
    }
}

/* Card shared */
.chk-card {
    border-radius: 16px !important;
    overflow: hidden;
    background: var(--mud-palette-surface);
    margin-bottom: 16px;
}
.chk-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.chk-card-icon {
    color: var(--mud-palette-primary) !important;
    flex-shrink: 0;
}

/* Items Card */
.chk-items-list {
    padding: 8px 12px;
}

.chk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    transition: background 0.15s, transform 0.15s;
    margin-bottom: 4px;
}
.chk-item:hover {
    background: var(--mud-palette-action-default-hover);
    transform: translateX(-4px);
}
.chk-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFF;
}
.chk-color-1 { background: linear-gradient(135deg, #5B2EFF, #7C4DFF); }
.chk-color-2 { background: linear-gradient(135deg, #E74C3C, #F39C12); }
.chk-color-3 { background: linear-gradient(135deg, #3498DB, #00B4D8); }
.chk-color-4 { background: linear-gradient(135deg, #10B981, #34D399); }
.chk-color-5 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.chk-color-6 { background: linear-gradient(135deg, #EC4899, #F472B6); }

.chk-item-body {
    flex: 1;
    min-width: 0;
}
.chk-item-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chk-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    flex-wrap: wrap;
}
.chk-item-meta-icon {
    font-size: 14px !important;
    margin-left: 2px;
    vertical-align: middle;
}
.chk-item-rating {
    color: #F59E0B;
    font-weight: 600;
}
.chk-item-tags {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.chk-item-tag {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--mud-palette-primary-hover-light);
    color: var(--mud-palette-primary);
    font-weight: 500;
}
.chk-item-price-col {
    text-align: left;
    flex-shrink: 0;
    min-width: 70px;
}
.chk-item-price {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
}
.chk-item-price-unit {
    display: block;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}
.chk-item-remove {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.chk-item:hover .chk-item-remove {
    opacity: 1;
}

/* Items Summary */
.chk-items-summary {
    padding: 14px 20px;
}
.chk-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}
.chk-summary-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--mud-palette-divider);
}
.chk-total-price {
    color: var(--mud-palette-primary);
    font-size: 1.1rem;
}

/* Wallet Card */
.chk-wallet-card .chk-wallet-content {
    padding: 16px 20px 20px;
}
.chk-wallet-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--mud-palette-primary-hover-light), transparent);
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
}
.chk-wallet-label {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}
.chk-wallet-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
}

/* Pay Button */
.chk-pay-btn {
    border-radius: 14px !important;
    font-weight: 700 !important;
    height: 52px !important;
    font-size: 1rem !important;
    margin-top: 4px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.chk-pay-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(91,46,255,0.3);
}

/* AI Chat */
.chk-ai-card {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}
.chk-ai-header {
    flex-shrink: 0;
}
.chk-ai-chat {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    max-height: 400px;
}

.chk-ai-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: chk-ai-fade-in 0.3s ease;
}
@keyframes chk-ai-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.chk-ai-msg-user {
    flex-direction: row-reverse;
}
.chk-ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-primary-hover-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.chk-ai-avatar-user {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-lighten));
}
.chk-ai-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.8rem;
    line-height: 1.7;
}
.chk-ai-msg-bot .chk-ai-bubble {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    border-bottom-right-radius: 4px;
}
.chk-ai-msg-user .chk-ai-bubble {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-lighten));
    color: #FFF;
    border-bottom-left-radius: 4px;
}
.chk-ai-bubble p { margin: 0 0 6px; }
.chk-ai-bubble p:last-child { margin-bottom: 0; }
.chk-ai-bubble ul { margin: 4px 0; padding-right: 16px; }
.chk-ai-bubble li { margin-bottom: 2px; font-size: 0.78rem; }

/* Typing dots */
.chk-ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
}
.chk-ai-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
    animation: chk-ai-bounce 1.4s infinite ease-in-out both;
}
.chk-ai-dot:nth-child(1) { animation-delay: -0.32s; }
.chk-ai-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes chk-ai-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.chk-ai-input-row {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}
.chk-ai-input .mud-input-outlined-border {
    border-radius: 14px !important;
}

/* Dark mode AI overrides */
.mud-dark .chk-ai-msg-bot .chk-ai-bubble {
    background: var(--mud-palette-surface);
}
.mud-dark .chk-wallet-balance {
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.04));
}

/* ═══════════════════════════════════════════════════════════════
   Cart Item Detail Dialog (cid-)
   ═══════════════════════════════════════════════════════════════ */
.cid-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}
.cid-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFF;
}
.cid-color-1 { background: linear-gradient(135deg, #5B2EFF, #7C4DFF); }
.cid-color-2 { background: linear-gradient(135deg, #E74C3C, #F39C12); }
.cid-color-3 { background: linear-gradient(135deg, #3498DB, #00B4D8); }
.cid-color-4 { background: linear-gradient(135deg, #10B981, #34D399); }
.cid-color-5 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.cid-color-6 { background: linear-gradient(135deg, #EC4899, #F472B6); }
.cid-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 4px;
}
.cid-creator {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}
.cid-desc {
    line-height: 1.8;
    color: var(--mud-palette-text-secondary);
}
.cid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cid-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--mud-palette-background);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-divider);
}
.cid-stat-icon {
    color: var(--mud-palette-primary) !important;
    flex-shrink: 0;
}
.cid-stat-val {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.cid-stat-lbl {
    display: block;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}
.cid-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Dark mode */
.mud-dark .cid-stat {
    background: var(--mud-palette-surface);
}
.appbar-cart-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #EF4444;
    color: #FFF;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    border: 2px solid #5B2EFF;
}
.appbar-cart-count-badge { position: absolute; top: 2px; right: 2px; background: #EF4444; color: #FFF; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; pointer-events: none; z-index: 2; border: 2px solid #5B2EFF; }
.appbar-cart-wrapper { position: relative; display: inline-flex; } .appbar-cart-popover-panel { min-width: 340px !important; max-width: 380px !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important; margin-top: 4px !important; } .mud-dark .appbar-cart-popover-panel { box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important; }
.sidebar-cart-badge { display: inline-flex; align-items: center; justify-content: center; background: #EF4444; color: #FFF; font-size: 0.6rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } .appbar-cart-count-badge { position: absolute !important; top: 0 !important; right: -2px !important; background: #EF4444 !important; color: #FFF !important; font-size: 0.55rem !important; font-weight: 700 !important; min-width: 14px !important; height: 14px !important; border-radius: 7px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 3px !important; line-height: 1 !important; pointer-events: none !important; z-index: 3 !important; border: 1.5px solid #FFF !important; }