:root {
    --theme-primary: #764ba2;
    --theme-primary-dark: #5b3a89;
    --theme-accent: #667eea;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f5f7ff;
    --theme-text: #222447;
    --theme-text-muted: #6b6f94;
    --theme-border: rgba(118, 75, 162, 0.15);
    --theme-shadow: 0 20px 45px rgba(118, 75, 162, 0.15);

    --bs-primary-text-emphasis: #241c5b;
    --bs-primary-bg-subtle: #ddceff;
    --bs-body-bg: var(--theme-surface);

    .accordion {
        --bs-accordion-btn-focus-border-color: var(--theme-primary-dark);
        --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgb(172 13 253 / 25%);
    }

    /* 
    --bs-body-color: var(--theme-text);
    --bs-body-color-muted: var(--theme-text-muted); */

    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: 139,
    92,
    246;

    --bs-border-color: var(--theme-border);
    --bs-border-color-translucent: var(--theme-border-strong);

    --bs-tertiary-bg: var(--theme-surface-muted);
    --bs-secondary-bg: var(--theme-surface-elevated);
    --bs-secondary-bg-subtle: var(--theme-surface-contrast);

    /* --bs-heading-color: var(--theme-text); */
    --bs-link-color: var(--theme-accent);
    --bs-link-hover-color: color-mix(in srgb, var(--theme-accent) 80%, white);
    --bs-link-visited-color: var(--theme-primary-dark);

    --bs-highlight-bg: var(--theme-highlight);
    --bs-backdrop-bg: var(--theme-overlay);
    --bs-box-shadow: var(--theme-shadow);
    --bs-focus-ring-color: var(--theme-primary-dark);

    .list-group {
        --bs-list-group-active-bg: var(--theme-primary-dark);
        --bs-list-group-active-border-color: var(--theme-primary-dark);
    }

    .form-select:focus,
    .form-control:focus {
        border-color: var(--theme-primary-dark);
        box-shadow: 0 0 0 .25rem rgba(157, 13, 253, 0.25);
    }

    .btn-outline-primary {
        --bs-btn-color: var(--theme-primary);
        --bs-btn-border-color: var(--theme-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: color-mix(in srgb, var(--theme-primary) 80%, #000);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-primary) 80%, #000);
        --bs-btn-focus-shadow-rgb: 13, 110, 253;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: color-mix(in srgb, var(--theme-primary) 65%, #000);
        --bs-btn-active-border-color: color-mix(in srgb, var(--theme-primary) 65%, #000);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: color-mix(in srgb, var(--theme-primary) 50%, transparent);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: color-mix(in srgb, var(--theme-primary) 50%, transparent);
        --bs-gradient: none;
    }
}

select option:hover,
select option:checked {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--theme-primary-dark) !important;
    color: var(--theme-surface) !important;
}

body {
    font-family: "Vazirmatn FD", "Vazirmatn", sans-serif;
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 55%, #eef1ff 100%);
    color: var(--theme-text);
    min-height: 100vh;
}

a {
    color: var(--theme-primary);
}

a:hover,
a:focus {
    color: var(--theme-primary-dark);
}

.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--theme-shadow) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--theme-border);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    transition: color 0.25s ease;
}

.navbar-brand,
.navbar .navbar-brand:focus,
.navbar .navbar-brand:hover {
    color: var(--theme-primary-dark) !important;
}

.navbar .nav-link,
.navbar .dropdown-item,
.navbar .dropdown-item-text {
    color: var(--theme-text) !important;
    font-weight: 500;
}

.navbar .nav-link {
    transition: color 0.25s ease, transform 0.25s ease;
}

.navbar .dropdown-item,
.navbar .dropdown-item-text {
    transition: color 0.25s ease, background-color 0.25s ease;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: var(--theme-primary) !important;
}

.navbar .nav-link.active {
    background: linear-gradient(135deg, rgba(118, 75, 162, 0.18), rgba(102, 126, 234, 0.28));
    color: var(--theme-primary-dark) !important;
    border-radius: 0.75rem;
    box-shadow: 0 10px 24px rgba(118, 75, 162, 0.2);
}

.navbar .nav-link.active i {
    color: var(--theme-primary-dark) !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--theme-primary) !important;
    background-color: rgba(118, 75, 162, 0.08);
}

.navbar .dropdown-menu {
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow);
    border-radius: 0.75rem;
    padding: 0.5rem 0;
    background-color: rgba(255, 255, 255, 0.98);
}

.navbar .dropdown-item {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.navbar-dark .navbar-toggler {
    border: none;
}

.navbar-dark .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(118, 75, 162, 0.25);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(34, 36, 71, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.main-content {
    background: transparent;
}

main.bg-light,
.main-content.bg-light {
    background-color: var(--theme-surface-muted) !important;
}

.section {
    background: transparent;
}

.welcome-card {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--theme-shadow);
    border: 1px solid var(--theme-border);
    padding: 1.25rem;
    border-radius: 1.25rem;
}

.welcome-card .feature-item {
    background: rgba(118, 75, 162, 0.05);
    border: 1px solid rgba(118, 75, 162, 0.15);
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 12px 28px rgba(118, 75, 162, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.welcome-card .feature-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(118, 75, 162, 0.18);
    border-color: rgba(118, 75, 162, 0.35);
}

.welcome-card .feature-item i {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(118, 75, 162, 0.12);
}

.welcome-card .feature-item h5 {
    margin-bottom: 0;
}

.welcome-card .feature-item p {
    margin-bottom: 0;
}

.credit-status-card {
    background: var(--theme-surface);
    border: 1px solid rgba(118, 75, 162, 0.14);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 10px 28px rgba(118, 75, 162, 0.08);
}

.credit-status-card::after {
    content: none;
}

.credit-status-hero {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.credit-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    background: rgba(118, 75, 162, 0.12);
    color: var(--theme-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: none;
}

.credit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    background: rgba(118, 75, 162, 0.1);
    color: var(--theme-primary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: none;
}

.credit-status-title {
    font-weight: 700;
    color: var(--theme-primary-dark);
}

.credit-status-meta {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

.credit-progress {
    margin-top: 1.25rem;
}

.credit-progress-track {
    position: relative;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(118, 75, 162, 0.12);
    overflow: hidden;
}

.credit-progress-track::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--progress);
    background: linear-gradient(90deg, rgba(118, 75, 162, 0.85), rgba(102, 126, 234, 0.85));
    border-radius: inherit;
    transition: width 0.4s ease;
}

.credit-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-top: 0.6rem;
    font-weight: 500;
}

.credit-stat-card {
    background: var(--theme-surface-muted);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(118, 75, 162, 0.12);
    box-shadow: none;
}

.credit-status-card .row.g-3>[class*="col-"] {
    display: flex;
}

.credit-status-card .credit-stat-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.credit-stat-card.primary {
    background: rgba(118, 75, 162, 0.12);
}

.credit-stat-card.subtle {
    background: rgba(118, 75, 162, 0.05);
}

.credit-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .credit-stat-label {
        font-size: 0.8rem;
    }
}

.credit-stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0.25rem 0;
    color: var(--theme-primary-dark);
}

.credit-stat-card.primary .credit-stat-value {
    color: var(--theme-primary-dark);
}

.credit-stat-card.primary .credit-stat-label,
.credit-stat-card.primary .credit-stat-hint {
    color: var(--theme-primary-dark);
}

.credit-stat-hint {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.credit-status-footer {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
}

.credit-status-tip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--theme-text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.btn-credit-upgrade {
    border-radius: 0.75rem;
    padding-inline: 1.3rem;
    padding-block: 0.5rem;
    font-weight: 600;
    box-shadow: none;
}

.btn-credit-upgrade:hover,
.btn-credit-upgrade:focus {
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .credit-status-card {
        padding: 1.5rem;
    }

    .credit-status-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .credit-status-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .credit-status-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .credit-status-tip {
        justify-content: center;
    }

    .btn-credit-upgrade {
        width: 100%;
    }
}

.start-button {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    box-shadow: 0 16px 30px rgba(118, 75, 162, 0.35);
    border: none;
}

.start-button:hover,
.start-button:focus {
    box-shadow: 0 22px 45px rgba(118, 75, 162, 0.45);
}

.footer {
    background: linear-gradient(180deg, rgba(118, 75, 162, 0.12) 0%, rgba(102, 126, 234, 0.08) 100%);
    color: var(--theme-text);
    border-top: 1px solid var(--theme-border);
    border-radius: 1.5rem 1.5rem 0 0;
}

.footer h5 {
    font-weight: 700;
    color: var(--theme-primary-dark);
}

.footer p {
    color: var(--theme-text-muted);
}

.footer-links a {
    color: var(--theme-primary-dark) !important;
    font-weight: 600;
}

.footer-links a:hover {
    color: var(--theme-primary) !important;
    text-decoration: none;
}

.footer .social-links {
    gap: 0.75rem;
}

.footer .social-links a {
    color: var(--theme-primary);
    background: rgba(118, 75, 162, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer .social-links a:hover {
    color: var(--theme-primary-dark);
    background: rgba(118, 75, 162, 0.18);
}

.fixed-alert-box .alert {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 18px 30px rgba(118, 75, 162, 0.18);
}

.fixed-alert-box {
    max-width: calc(100vw - 2.4rem);
    width: 340px;
    bottom: 1rem;
    inset-inline: 1.2rem;
    margin-bottom: -1rem;
    z-index: 999999999;
}

.card,
.category-widget,
.related-posts .card,
.blog-card,
section .card {
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow);
}

.btn-primary {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    border: none;
    box-shadow: 0 14px 28px rgba(118, 75, 162, 0.25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary) 100%);
}

.text-muted {
    color: var(--theme-text-muted) !important;
}

.bg-light {
    background-color: var(--theme-surface-muted) !important;
}

.alert {
    border-radius: 1rem;
}

.navbar {
    padding-block: 10px 13px;
}

@media (max-width: 991.98px) {
    .navbar {
        border-radius: 0 0 1.5rem 1.5rem;
        padding-block: 8px;
    }

    .main-content {
        padding-bottom: 3rem;
    }
}

@media (max-width: 575.98px) {
    body {
        background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
    }

    .welcome-card {
        border-radius: 1.25rem;
        padding: 1rem;
    }
}

.navbar .nav-link.active {
    padding-bottom: 5px;
}

.bg-surface-muted {
    background: var(--theme-surface-muted);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .container {
        max-width: 991px;
    }
}

.vertical-divider {
    position: relative;
    width: 10px;
    margin-inline: -5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.vertical-divider::before,
.vertical-divider::after {
    content: "";
    background-color: var(--theme-border);
    width: 2px;
    height: 40%;
}

.credit-status-meta {
    display: flex;
    gap: 4px;
    align-items: center;
}

.credit-status-meta i {
    line-height: .7;
}

.home-page {
    .navbar.navbar.navbar {
        background: transparent !important;
        border-bottom: 1px solid transparent;
        box-shadow: unset !important;
        backdrop-filter: blur(0);
        position: fixed;
        width: 100vw;

        transition:
            background 0.4s ease,
            border-bottom-color 0.4s ease,
            backdrop-filter 0.4s ease;

        &.nav-scrolled {
            border-bottom: 1px solid var(--theme-border);
            background: rgb(255 255 255 / 51%) !important;
            backdrop-filter: blur(16px);
        }

        .navbar-brand {
            color: var(--theme-text) !important;
        }
    }

    .navbar .nav-link.active,
    .navbar .nav-link.active i {
        color: var(--theme-text) !important;
    }

    .navbar .nav-link.active {
        background: linear-gradient(135deg, rgba(118, 75, 162, 0.18), rgba(102, 126, 234, 0.28)) !important;
        color: var(--theme-text) !important;
        box-shadow: 0 10px 24px rgb(198 159 227 / 12%) !important;
    }

}

:root[data-bs-theme="dark"] .home-page .navbar.navbar.navbar.nav-scrolled {
    background: rgb(0 0 0 / 51%) !important;
}

.home-page-bg-1,
.home-page-bg-2 {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.home-page-bg-1 {
    background: linear-gradient(180deg, #b1c1e1 0%, var(--theme-surface) 55%, #9fb0cf 100%);
}

:root[data-bs-theme="dark"] .home-page-bg-1 {
    background: linear-gradient(180deg, #0b1220 0%, var(--theme-surface) 55%, #111c30 100%);
}

.home-page-bg-2 {
    background: radial-gradient(circle at top, rgb(139 92 246 / 31%), transparent 85%) no-repeat, linear-gradient(180deg, #b1c1e1 7%, var(--theme-surface) 67%, #9fb0cf 100%);
}

:root[data-bs-theme="dark"] .home-page-bg-2 {
    background: radial-gradient(circle at top, rgb(139 92 246 / 31%), transparent 85%) no-repeat, linear-gradient(180deg, #0b1220 7%, var(--theme-surface) 67%, #111c30 100%);
}

.home-page-grain {
    position: absolute;
    inset: 0;
    z-index: -1;

    filter: contrast(100%) brightness(250%) invert(100%);
    background:
        linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: .5;
}

@media (max-width: 320px) {
    .home-page-grain {
        opacity: .4;
    }
}

.home-hero {
    padding-top: 12rem;
    padding-bottom: 7rem;

    background: radial-gradient(circle at top, rgba(139, 92, 246, 0.16), transparent 60%) no-repeat;
}

@media (max-width: 767px) {
    .home-hero {
        padding-top: 8rem;
    }
}

:root[data-bs-theme="dark"] .main-content {
    background: radial-gradient(circle at top, rgba(139, 92, 246, 0.16), transparent 60%) no-repeat;
}

.home-page .main-content {
    background: radial-gradient(circle at top, rgb(242 236 255 / 16%), #00000000 60%) no-repeat;
}