:root {
    --color-primary: #012918;
    --color-primary-600: #012918;
    --color-primary-50: #ecfdf5;
    --color-secondary: #012918;
    --color-secondary-50: #f0fdf4;
    --color-success: #012918;
    --color-success-50: #f0fdf4;
    --color-warning: #d97706;
    --color-warning-50: #fffbeb;
    --color-danger: #dc2626;
    --color-danger-50: #fef2f2;
    --color-info: #012918;
    --color-info-50: #ecfdf5;
    --color-text: #111827;
    --color-muted: #6b7280;
    --color-soft: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-soft: #f3f4f6;
    --radius-xs: .5rem;
    --radius-sm: .75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, .07);
    --shadow-md: 0 16px 42px rgba(15, 23, 42, .10);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, .14);
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --container: 1180px;
    --container-width: 1180px;
    --header-height: 72px;
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 420ms cubic-bezier(.2, .8, .2, 1);
    --font-family: "IRANSansX", sans-serif;
    color-scheme: light;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .08), transparent 32rem),
        linear-gradient(180deg, #ffffff 0%, var(--color-bg) 45%, #ffffff 100%);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: .96rem;
    line-height: 1.85;
    direction: rtl;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img, svg, video { max-width: 100%; display: block; }

input, textarea, select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--color-text);
    padding: .75rem .9rem;
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

input:focus, textarea:focus, select:focus {
    border-color: rgba(1, 41, 24, .70);
    box-shadow: 0 0 0 4px rgba(1, 41, 24, .12);
}
textarea { resize: vertical; }

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.45; letter-spacing: -.025em; }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); line-height: 1.5; letter-spacing: -.015em; }
h3 { font-size: 1.05rem; line-height: 1.6; }
p { color: var(--color-muted); }

.app-container, .container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

.site-main { padding-block: var(--space-8) var(--space-16); }
.section, .ui-page { padding-block: var(--space-16); }
.section--muted { background: linear-gradient(180deg, rgba(248, 250, 252, .72), rgba(255,255,255,.85)), var(--color-bg); }
.section-head, .section-header, .section-heading, .data-card__head, .panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.section-head h2, .section-header h2, .section-heading h2, .data-card__head h2, .panel-head h1 { margin-bottom: 0; }
.section-title { margin-bottom: 0; }

.eyebrow, .glass-kicker, .page-kicker, .mega-menu__kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .4rem;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 900;
}
.eyebrow::before, .glass-kicker::before, .page-kicker::before, .mega-menu__kicker::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.muted { color: var(--color-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.link-more, .section-link, .auth-link { color: var(--color-primary); font-size: .9rem; font-weight: 850; }

.btn, button.btn, a.btn {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: .7rem 1.1rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary, .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 14px 32px rgba(1, 41, 24, .24);
}
.btn--primary:hover, .btn-primary:hover { box-shadow: 0 18px 42px rgba(1, 41, 24, .32); }
.btn--outline, .btn--ghost, .btn--glass, .btn:not(.btn--primary):not(.btn-primary) {
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn--outline:hover, .btn--ghost:hover, .btn--glass:hover, .btn:not(.btn--primary):not(.btn-primary):hover {
    border-color: rgba(1, 41, 24, .36);
    background: var(--color-primary-50);
}
.btn--lg { min-height: 3.2rem; padding-inline: 1.4rem; }
.btn--sm { min-height: 2.35rem; padding: .55rem .9rem; font-size: .85rem; }
.btn--xs { min-height: 2rem; padding: .45rem .75rem; font-size: .78rem; }
.btn--block { width: 100%; }
.btn[disabled], button[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.badge, .neon-pill, .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: var(--radius-pill);
    padding: .25rem .65rem;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.4;
    background: var(--color-surface-soft);
    color: var(--color-muted);
}
.badge--success, .status-pill--success, .status-pill--paid, .status-pill--active, .neon-pill--success { background: var(--color-success-50); color: var(--color-success); }
.badge--warning, .status-pill--pending, .neon-pill--warning { background: var(--color-warning-50); color: var(--color-warning); }
.badge--danger, .status-pill--danger, .status-pill--failed, .neon-pill--discount { background: var(--color-danger-50); color: var(--color-danger); }
.badge--info, .neon-pill { background: var(--color-info-50); color: var(--color-info); }
.badge--neutral, .badge--lock, .status-pill--neutral { background: var(--color-surface-soft); color: var(--color-muted); }

.alert, .validation-message, .field-error {
    border-radius: var(--radius-md);
    padding: .65rem .85rem;
    font-size: .84rem;
    font-weight: 800;
}
.alert--error, .validation-message, .field-error { background: var(--color-danger-50); color: var(--color-danger); }
.alert--success { background: var(--color-success-50); color: var(--color-success); }
.alert--warning { background: var(--color-warning-50); color: var(--color-warning); }

.glass-card, .glass-panel, .content-card, .checkout-card, .order-summary, .auth-card, .data-card, .panel-card, .manage-card, .blog-detail, .page-hero, .state-card, .not-found-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.data-card, .content-card, .checkout-card, .order-summary, .auth-card, .panel-card, .manage-card, .blog-detail, .state-card, .not-found-card { padding: var(--space-5); }

.form-group, .form-field, .modern-field, .checkout-field {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.form-group > label, .form-field > label, .modern-field > label, .checkout-field > label, .form-label, .auth-form label, .comment-form label {
    color: var(--color-text);
    font-size: .86rem;
    font-weight: 900;
}

.responsive-table, .table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 42rem; border-collapse: separate; border-spacing: 0; }
th, td { border-bottom: 1px solid var(--color-border); padding: .85rem; text-align: right; white-space: nowrap; }
th { color: var(--color-muted); font-size: .78rem; font-weight: 950; }
td { font-size: .86rem; font-weight: 750; }
tr.is-selected td { background: var(--color-primary-50); }

.site-toast, .admin-toast {
    --toast-bg: #ecfdf5;
    --toast-border: rgba(1, 41, 24, .22);
    --toast-text: #012918;
    --toast-icon-bg: #012918;
    --toast-shadow: rgba(1, 41, 24, .16);
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: min(92vw, 27rem);
    max-width: min(92vw, 36rem);
    min-height: 4.35rem;
    align-items: center;
    gap: .85rem;
    transform: translateX(-50%);
    border: 1px solid var(--toast-border);
    border-radius: var(--radius-xl);
    background: var(--toast-bg);
    box-shadow: 0 22px 60px var(--toast-shadow), 0 10px 24px rgba(15, 23, 42, .12);
    padding: .95rem 1.05rem;
    color: var(--toast-text);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.8;
    animation: toast-in 360ms ease both;
}

.site-toast__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .85rem;
    background: var(--toast-icon-bg);
    color: #fff;
    font-size: .9rem;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}

.site-toast__message {
    color: var(--toast-text);
}

.site-toast__close {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .55);
    color: var(--toast-text);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 950;
    line-height: 1;
    transition: background var(--transition-base), transform var(--transition-base);
}

.site-toast__close:hover {
    background: rgba(255, 255, 255, .86);
    transform: translateY(-1px);
}

.site-toast--success {
    --toast-bg: #ecfdf5;
    --toast-border: rgba(16, 185, 129, .25);
    --toast-text: #012918;
    --toast-icon-bg: #012918;
    --toast-shadow: rgba(16, 185, 129, .16);
}

.site-toast--danger,
.site-toast--error {
    --toast-bg: #fef2f2;
    --toast-border: rgba(239, 68, 68, .28);
    --toast-text: #991b1b;
    --toast-icon-bg: #ef4444;
    --toast-shadow: rgba(239, 68, 68, .15);
}

.site-toast--warning {
    --toast-bg: #fffbeb;
    --toast-border: rgba(245, 158, 11, .3);
    --toast-text: #92400e;
    --toast-icon-bg: #f59e0b;
    --toast-shadow: rgba(245, 158, 11, .16);
}

.site-toast--info,
.admin-toast--info {
    --toast-bg: #ecfdf5;
    --toast-border: rgba(1, 41, 24, .26);
    --toast-text: #012918;
    --toast-icon-bg: #012918;
    --toast-shadow: rgba(1, 41, 24, .16);
}

@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }


.button-spinner, .spinner, .loader-orb {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2px solid rgba(1, 41, 24, .18);
    border-top-color: var(--color-primary);
    animation: spin 780ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
    margin-top: var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: #fff;
    padding: var(--space-8);
    text-align: center;
}
.empty-state p { margin-bottom: 0; }

@media (min-width: 480px) {
    .app-container, .container { width: min(100% - 2.5rem, var(--container)); }
}

@media (max-width: 767.98px) {
    .section, .ui-page { padding-block: var(--space-10); }
    .section-head, .section-header, .section-heading, .data-card__head, .panel-head { align-items: start; flex-direction: column; margin-bottom: var(--space-6); }
    .site-toast { top: .75rem; width: calc(100vw - 1.5rem); justify-content: center; border-radius: var(--radius-lg); }
    body { padding-bottom: 4.6rem; }
}

/* Shared user panel shell/navigation styles
   Used by /user-panel and /user-panel/support to keep the panel UI identical. */
.user-panel-page {
    padding-block: clamp(1rem, 2vw, 1.75rem) var(--space-16);
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .07), transparent 30rem),
        linear-gradient(180deg, rgba(248, 250, 252, .92), #fff 58%);
}

.user-panel-page .container {
    width: min(100% - 2rem, 1480px);
}

.user-shell {
    display: grid;
    gap: var(--space-5);
}

.user-sidebar {
    display: none;
}

.user-main {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.user-hero,
.user-card,
.user-state-card,
.user-sidebar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-sm);
}

.user-hero {
    display: grid;
    gap: var(--space-4);
    padding: clamp(1rem, 2.2vw, 1.5rem);
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .10), transparent 24rem),
        linear-gradient(135deg, #fff, rgba(239, 246, 255, .86));
}

.user-hero h1,
.user-hero p,
.user-card h2,
.user-card p {
    margin-bottom: 0;
}

.user-hero__content p {
    max-width: 58rem;
    font-size: .92rem;
}

.user-hero__actions,
.user-action-row,
.user-chip-row,
.user-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.user-kpi-grid {
    display: grid;
    gap: var(--space-4);
}

.user-kpi-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}

.user-kpi-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    right: 0;
    width: .28rem;
    background: var(--color-primary);
}

.user-kpi-card--success::before { background: var(--color-success); }
.user-kpi-card--warning::before { background: var(--color-warning); }
.user-kpi-card--info::before { background: var(--color-info); }

.user-kpi-card span,
.user-kpi-card small {
    display: block;
    color: var(--color-muted);
    font-size: .8rem;
    font-weight: 850;
}

.user-kpi-card strong {
    display: block;
    margin-block: .35rem;
    color: var(--color-text);
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 950;
    line-height: 1.2;
}

.user-dashboard-grid,
.user-account-grid {
    display: grid;
    gap: var(--space-5);
}

.user-card {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.user-card--wide {
    min-width: 0;
}

.user-card--soft {
    background:
        radial-gradient(circle at top left, rgba(1, 41, 24, .08), transparent 20rem),
        #fff;
}

.user-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.user-card__head h2 {
    margin-bottom: .2rem;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.user-card__head p {
    color: var(--color-muted);
    font-size: .88rem;
}

.user-enrollment-grid {
    display: grid;
    gap: var(--space-4);
}

.user-enrollment-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.user-enrollment-card:hover {
    transform: translateY(-2px);
    border-color: rgba(1, 41, 24, .28);
    box-shadow: var(--shadow-sm);
}

.user-course-thumb {
    display: grid;
    min-height: 8.2rem;
    place-items: center;
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .18), transparent 12rem),
        linear-gradient(135deg, #eef2ff, #f8fafc);
    background-position: center;
    background-size: cover;
    color: var(--color-primary);
    font-size: 1.35rem;
    font-weight: 950;
}

.user-enrollment-card__body {
    display: grid;
    gap: .8rem;
    padding: var(--space-4);
}

.user-enrollment-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.user-enrollment-card h3 {
    margin: .1rem 0 0;
    color: var(--color-text);
    font-size: .98rem;
    font-weight: 950;
    line-height: 1.75;
}

.user-course-category {
    color: var(--color-primary);
    font-size: .74rem;
    font-weight: 900;
}

.user-chip-row span {
    border-radius: var(--radius-pill);
    background: var(--color-surface-soft);
    color: var(--color-muted);
    padding: .28rem .65rem;
    font-size: .74rem;
    font-weight: 850;
}

.user-enrollment-progress {
    overflow: hidden;
    height: .42rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-soft);
}

.user-enrollment-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.user-enrollment-hint {
    margin: 0;
    color: var(--color-muted);
    font-size: .82rem;
    line-height: 1.9;
}

.user-action-row .btn {
    min-height: 2.1rem;
}

.user-transaction-list {
    display: grid;
    gap: var(--space-3);
}

.user-transaction-card {
    display: grid;
    gap: .8rem;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: var(--space-4);
}

.user-transaction-card div {
    display: grid;
    gap: .2rem;
}

.user-transaction-card strong {
    color: var(--color-text);
    font-weight: 950;
}

.user-transaction-card span,
.user-transaction-card small {
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 800;
}

.user-filter-pills {
    margin-bottom: var(--space-4);
}

.user-filter-pills button {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-muted);
    padding: .5rem .85rem;
    font-size: .8rem;
    font-weight: 900;
}

.user-filter-pills button.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.user-profile-mini {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.user-profile-mini span,
.user-sidebar__brand span {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 950;
}

.user-profile-mini strong,
.user-sidebar__brand strong {
    display: block;
    color: var(--color-text);
}

.user-profile-mini small,
.user-sidebar__brand small {
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 750;
}

.user-profile-list {
    display: grid;
    gap: .65rem;
    margin-bottom: var(--space-4);
}

.user-profile-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    padding: .7rem .85rem;
}

.user-profile-list span {
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 850;
}

.user-profile-list strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: .82rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-form {
    display: grid;
    gap: var(--space-4);
}

.user-form label {
    display: grid;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: .86rem;
    font-weight: 900;
}

.user-empty-card,
.user-state-card {
    display: grid;
    gap: .5rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface-soft);
    padding: var(--space-6);
    text-align: center;
}

.user-empty-card span,
.user-state-card span {
    color: var(--color-muted);
    font-size: .9rem;
}

.user-bottom-nav {
    position: fixed;
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    z-index: 820;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-md);
    padding: .4rem;
    backdrop-filter: blur(14px);
}

.user-bottom-nav button,
.user-bottom-nav a {
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-muted);
    padding: .6rem .35rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 900;
}

.user-bottom-nav button.is-active,
.user-bottom-nav a:hover,
.user-bottom-nav a.active,
.user-bottom-nav a.is-active {
    background: var(--color-primary);
    color: #fff;
}

@media (min-width: 560px) {
    .user-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-transaction-card {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
}

@media (min-width: 840px) {
    .user-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

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

    .user-account-grid {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr);
        align-items: start;
    }
}

@media (min-width: 1120px) {
    .user-shell {
        grid-template-columns: 14.5rem minmax(0, 1fr);
        align-items: start;
    }

    .user-sidebar {
        position: sticky;
        top: calc(var(--header-height) + 1rem);
        display: grid;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .user-sidebar__brand {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .user-sidebar__brand span {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--radius-md);
    }

    .user-sidebar__nav {
        display: grid;
        gap: .35rem;
    }

    .user-sidebar__nav button,
    .user-sidebar__nav a,
    .user-support-link {
        display: flex;
        width: 100%;
        align-items: center;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-muted);
        padding: .75rem .85rem;
        text-align: right;
        font-size: .86rem;
        font-weight: 900;
    }

    .user-sidebar__nav button:hover,
    .user-sidebar__nav button.is-active,
    .user-sidebar__nav a:hover,
    .user-sidebar__nav a.active,
    .user-sidebar__nav a.is-active,
    .user-support-link:hover,
    .user-support-link.active {
        background: var(--color-primary-50);
        color: var(--color-primary);
    }

    .user-bottom-nav {
        display: none;
    }

    .user-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .user-dashboard-grid {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
        align-items: start;
    }

    .user-dashboard-grid .user-card--wide {
        grid-column: span 1;
    }

    .user-dashboard-grid .user-card--wide:last-child {
        grid-column: 1 / -1;
    }

    .user-enrollment-grid:not(.user-enrollment-grid--compact) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1380px) {
    .user-enrollment-grid:not(.user-enrollment-grid--compact) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .user-panel-page .container {
        width: min(100% - 1.25rem, 100%);
    }

    .user-main > .user-hero {
        order: -10;
    }

    .user-main > .user-kpi-grid {
        order: 30;
    }

    .user-main > .identity-alert-card {
        order: 20;
    }

    .user-card__head,
    .user-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .user-course-thumb {
        min-height: 7rem;
    }
}


/* JalaliDateInput is a fully offline Blazor component. Its styling lives in Components/Shared/JalaliDateInput.razor.css. */


/* Site Toast redesign patch */
.site-toast,
.admin-toast,
.iq-toast {
    --toast-bg: #012918;
    --toast-text: #ffffff;
    --toast-border: rgba(255, 255, 255, 0.18);
    --toast-shadow: rgba(1, 41, 24, 0.28);
    position: fixed !important;
    top: 1.15rem !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5000 !important;
    width: min(calc(100vw - 2rem), 40rem) !important;
    min-height: 5rem !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.9rem !important;
    border: 1px solid var(--toast-border) !important;
    border-radius: 1.1rem !important;
    background: var(--toast-bg) !important;
    color: var(--toast-text) !important;
    box-shadow: 0 26px 70px var(--toast-shadow), 0 12px 28px rgba(15, 23, 42, 0.18) !important;
    padding: 1rem 1.1rem !important;
    font-size: 0.94rem !important;
    font-weight: 900 !important;
    line-height: 1.9 !important;
    animation: toast-in 360ms ease both !important;
}

.site-toast__message,
.admin-toast > span,
.iq-toast > span {
    color: var(--toast-text) !important;
}

.site-toast__icon,
.iq-toast__icon {
    width: 2.35rem !important;
    height: 2.35rem !important;
    border-radius: 0.85rem !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.site-toast__close,
.admin-toast button,
.iq-toast__close {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.85rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.site-toast__close:hover,
.admin-toast button:hover,
.iq-toast__close:hover {
    background: rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
}

.site-toast--success,
.admin-toast--success,
.iq-toast--success {
    --toast-bg: linear-gradient(135deg, #012918, #012918);
    --toast-shadow: rgba(1, 41, 24, 0.3);
}

.site-toast--danger,
.site-toast--error,
.admin-toast--danger,
.admin-toast--error,
.iq-toast--danger,
.iq-toast--error {
    --toast-bg: linear-gradient(135deg, #dc2626, #b91c1c);
    --toast-shadow: rgba(220, 38, 38, 0.3);
}

.site-toast--warning,
.admin-toast--warning,
.iq-toast--warning {
    --toast-bg: linear-gradient(135deg, #d97706, #b45309);
    --toast-shadow: rgba(217, 119, 6, 0.3);
}

.site-toast--info,
.admin-toast--info,
.iq-toast--info {
    --toast-bg: linear-gradient(135deg, #012918, #012918);
    --toast-shadow: rgba(2, 132, 199, 0.3);
}

.admin-toast::before,
.iq-toast::before {
    display: none !important;
}

@media (max-width: 767.98px) {
    .site-toast,
    .admin-toast,
    .iq-toast {
        top: 0.75rem !important;
        width: calc(100vw - 1rem) !important;
        border-radius: 1rem !important;
    }
}

/* Polished informational action cards */
.info-action-card,
.comment-auth-state,
.checkout-state {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .85rem;
    min-height: 11rem;
    overflow: hidden;
    border: 1px solid rgba(1, 41, 24, .16);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at top right, rgba(1, 41, 24, .10), transparent 16rem),
        linear-gradient(135deg, #fff, rgba(248, 250, 252, .94));
    box-shadow: var(--shadow-sm);
    padding: clamp(1.2rem, 3vw, 2rem);
    text-align: center;
}

.info-action-card::before,
.comment-auth-state::before,
.checkout-state::before {
    content: "i";
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 1.05rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-size: 1.2rem;
    font-weight: 950;
    box-shadow: 0 16px 36px rgba(1, 41, 24, .24);
}

.info-action-card--warning::before,
.state-card--warning.checkout-state::before {
    content: "!";
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 16px 36px rgba(217, 119, 6, .22);
}

.info-action-card--muted::before {
    content: "×";
    background: linear-gradient(135deg, #64748b, #334155);
    box-shadow: 0 16px 36px rgba(51, 65, 85, .18);
}

.info-action-card strong,
.comment-auth-state strong,
.checkout-state strong {
    color: var(--color-text);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 950;
}

.info-action-card p,
.comment-auth-state p,
.checkout-state p {
    max-width: 34rem;
    margin: 0;
    color: var(--color-muted);
    font-size: .92rem;
}

.info-action-card .btn,
.comment-auth-state .btn,
.checkout-state .btn {
    margin-top: .15rem;
}

/* Final toast viewport/alignment patch */
.site-toast {
    direction: rtl !important;
    justify-content: flex-start !important;
}

.site-toast__icon {
    order: 1 !important;
    flex: 0 0 auto !important;
}

.site-toast__message {
    order: 2 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
}

.site-toast__close {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    border: 0 !important;
}

.admin-toast,
.iq-toast {
    direction: rtl !important;
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 1.15rem !important;
    left: 50% !important;
    z-index: 7000 !important;
    transform: translateX(-50%) !important;
    justify-content: flex-start !important;
    animation: toast-admin-rise 360ms cubic-bezier(.2, .8, .2, 1) both !important;
}

.iq-toast__icon {
    order: 1 !important;
    flex: 0 0 auto !important;
}

.iq-toast > span,
.admin-toast > span {
    order: 2 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
}

.iq-toast__close,
.admin-toast button {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    border: 0 !important;
}

@keyframes toast-admin-rise {
    from {
        opacity: 0;
        transform: translate(-50%, 18px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@media (max-width: 767.98px) {
    .site-toast,
    .admin-toast,
    .iq-toast {
        width: calc(100vw - 1.25rem) !important;
        min-height: 4.4rem !important;
        border-radius: 1rem !important;
        padding: .85rem .9rem !important;
    }
}