/* MockAttempt project-wide modernization layer.
   Additive only: visual polish without changing page structure or feature hooks. */

:root,
[data-theme="light"] {
    --ma-bg: #f6f8fb;
    --ma-surface: rgba(255, 255, 255, 0.88);
    --ma-surface-strong: #ffffff;
    --ma-surface-soft: rgba(248, 250, 252, 0.9);
    --ma-border: rgba(15, 23, 42, 0.1);
    --ma-border-strong: rgba(37, 99, 235, 0.22);
    --ma-text: #0f172a;
    --ma-muted: #475569;
    --ma-blue: #2563eb;
    --ma-violet: #7c3aed;
    --ma-teal: #0d9488;
    --ma-green: #10b981;
    --ma-amber: #f59e0b;
    --ma-red: #ef4444;
    --ma-pink: #db2777;
    --ma-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
    --ma-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.06);
    --ma-grid: rgba(37, 99, 235, 0.055);
    --ma-focus: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

[data-theme="dark"] {
    --ma-bg: #020617;
    --ma-surface: rgba(15, 23, 42, 0.78);
    --ma-surface-strong: rgba(17, 24, 39, 0.96);
    --ma-surface-soft: rgba(2, 6, 23, 0.56);
    --ma-border: rgba(226, 232, 240, 0.12);
    --ma-border-strong: rgba(96, 165, 250, 0.34);
    --ma-text: #f8fafc;
    --ma-muted: #cbd5e1;
    --ma-blue: #60a5fa;
    --ma-violet: #a78bfa;
    --ma-teal: #2dd4bf;
    --ma-green: #34d399;
    --ma-amber: #fbbf24;
    --ma-red: #f87171;
    --ma-pink: #f472b6;
    --ma-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
    --ma-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.24);
    --ma-grid: rgba(96, 165, 250, 0.075);
    --ma-focus: 0 0 0 4px rgba(96, 165, 250, 0.22);
}

html {
    scroll-padding-top: 82px;
}

body {
    background:
        linear-gradient(to right, var(--ma-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ma-grid) 1px, transparent 1px),
        var(--bg-body-gradient, var(--ma-bg)) !important;
    background-size: 48px 48px, 48px 48px, auto;
    color: var(--text-primary, var(--ma-text));
    letter-spacing: 0;
}

body::selection {
    background: rgba(37, 99, 235, 0.2);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title-header h2,
.header-title-container h2,
.nav-logo,
.left-logo-text {
    letter-spacing: 0 !important;
}

p,
li,
.text-body,
.text-secondary {
    line-height: 1.62;
}

a {
    text-underline-offset: 3px;
}

.app-wrapper,
.main-content,
.workspace,
.marketplace-layout,
.auth-split-wrapper {
    min-width: 0;
}

.workspace {
    position: relative;
    padding-bottom: clamp(32px, 4vw, 64px);
}

.navbar-header,
.nav-drawer,
.sidebar,
.sidebar-nav,
.admin-sidebar,
.admin-sidebar-nav {
    border-color: var(--ma-border) !important;
}

.navbar-header {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

[data-theme="dark"] .navbar-header {
    background: rgba(2, 6, 23, 0.78) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.sidebar,
.admin-sidebar {
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.045), transparent 32%),
        var(--bg-sidebar, var(--ma-surface)) !important;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.sidebar a,
.sidebar-link,
.nav-link,
.admin-sidebar a,
.dashboard-nav-link {
    border-radius: 8px !important;
}

.sidebar a:hover,
.sidebar-link:hover,
.admin-sidebar a:hover,
.dashboard-nav-link:hover {
    background: rgba(37, 99, 235, 0.08) !important;
}

.sidebar a.active,
.sidebar-link.active,
.admin-sidebar a.active,
.dashboard-nav-link.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(13, 148, 136, 0.1)) !important;
    color: var(--text-sidebar-active, var(--ma-blue)) !important;
    border: 1px solid var(--ma-border-strong) !important;
}

.glass-panel,
.glass-card,
.glassmorphic-card,
.dashboard-card,
.stat-card,
.analytics-card,
.exam-card,
.mock-card,
.test-card,
.battle-card,
.wallet-card,
.profile-card,
.admin-card,
.settings-card,
.market-card,
.product-card,
.cart-item-card,
.purchase-card,
.seller-card,
.review-card,
.faq-item-card,
.modal-content,
.notification-dropdown-menu,
.dropdown-menu,
.toast,
.alert,
.table-responsive,
.auth-card,
.auth-form-card,
.left-feature-card,
.left-telemetry-panel {
    border-radius: 8px !important;
    border: 1px solid var(--ma-border) !important;
    background: var(--ma-surface) !important;
    box-shadow: var(--ma-shadow-soft) !important;
}

.glass-panel:hover,
.dashboard-card:hover,
.stat-card:hover,
.exam-card:hover,
.mock-card:hover,
.product-card:hover,
.purchase-card:hover,
.seller-card:hover,
.admin-card:hover,
.left-feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--ma-border-strong) !important;
    box-shadow: var(--ma-shadow) !important;
}

.page-title-header,
.dashboard-hero,
.overview-hero,
.profile-header,
.wallet-header,
.marketplace-hero,
.admin-hero,
.section-header {
    border-radius: 8px !important;
}

.page-title-header h1,
.page-title-header h2,
.header-title-container h2,
.left-hero-title,
.hero-title {
    background: linear-gradient(90deg, var(--text-primary, var(--ma-text)) 10%, var(--ma-blue) 54%, var(--ma-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.page-title-header h1,
.page-title-header h2,
.header-title-container h2 {
    -webkit-text-fill-color: transparent;
}

.header-title-container p,
.page-title-header p,
.left-hero-desc,
.card-subtitle,
.helper-text {
    color: var(--text-secondary, var(--ma-muted)) !important;
}

button,
.btn,
a.btn,
[role="button"],
.shop-nav-btn,
.market-back-link,
.tour-tab-btn,
.exam-cat-tab,
.faq-category-btn,
.motive-tab-trigger {
    border-radius: 8px !important;
    letter-spacing: 0 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

button:hover,
.btn:hover,
a.btn:hover,
[role="button"]:hover,
.shop-nav-btn:hover,
.market-back-link:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-premium-primary,
.battle-btn-outline,
#pricing-free-cta-btn,
#btn-landing-checkout,
.auth-submit-btn,
.primary-action,
.checkout-btn,
.save-btn {
    background: linear-gradient(135deg, var(--ma-blue), var(--ma-teal)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22) !important;
}

.btn-outline,
.btn-premium-secondary,
.secondary-action,
.shop-nav-btn,
.market-back-link {
    background: var(--ma-surface-soft) !important;
    border-color: var(--ma-border) !important;
    color: var(--text-primary, var(--ma-text)) !important;
}

input,
select,
textarea,
.form-control,
.form-select,
.search-input-container input,
.marketplace-layout .form-control,
.checkout-grid .form-control {
    border-radius: 8px !important;
    border: 1px solid var(--ma-border) !important;
    background: var(--bg-input, var(--ma-surface-strong)) !important;
    color: var(--text-primary, var(--ma-text)) !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.search-input-container input:focus {
    outline: none !important;
    border-color: var(--ma-blue) !important;
    box-shadow: var(--ma-focus) !important;
}

label,
.form-label,
.input-label {
    color: var(--text-primary, var(--ma-text));
    font-weight: 700;
}

.chip,
.pill,
.status-badge,
.exam-tag,
.plan-badge,
.section-tag {
    border-radius: 999px !important;
    border: 1px solid var(--ma-border) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--ma-blue) !important;
    letter-spacing: 0 !important;
}

.badge {
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

.table,
table {
    color: var(--text-primary, var(--ma-text)) !important;
}

.table th,
table th {
    color: var(--text-secondary, var(--ma-muted)) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.table td,
table td {
    border-color: var(--ma-border) !important;
}

.table tbody tr:hover,
table tbody tr:hover {
    background: rgba(37, 99, 235, 0.055) !important;
}

.progress,
.progress-bar-wrap,
.pvp-prob-bar-wrap,
.diag-bar-wrapper,
.hero-val-progress-bar {
    border-radius: 999px !important;
    overflow: hidden;
}

.progress-bar,
.pvp-prob-bar-fill,
.diag-bar-fill,
.hero-val-progress-fill {
    background-image: linear-gradient(90deg, var(--ma-blue), var(--ma-teal));
}

.avatar,
.avatar-container,
#header-avatar,
#header-avatar-img {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.notification-bell-btn,
.sidebar-toggle-btn,
.btn-icon,
.icon-btn {
    border-radius: 8px !important;
    border: 1px solid var(--ma-border) !important;
    background: var(--ma-surface-soft) !important;
}

.auth-left-panel {
    background:
        linear-gradient(to right, var(--ma-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ma-grid) 1px, transparent 1px),
        var(--auth-bg-left) !important;
    background-size: 46px 46px, 46px 46px, auto !important;
}

.auth-left-panel::before {
    opacity: 0 !important;
}

.auth-right-panel {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.06), transparent 44%),
        var(--auth-bg-right, var(--ma-bg)) !important;
}

.auth-card,
.auth-form-card,
.login-card,
.register-card {
    max-width: 480px;
}

.left-hero-tag {
    border-radius: 999px !important;
}

.products-grid,
.exam-catalog-grid,
.mock-tests-grid,
.dashboard-grid,
.stats-grid,
.admin-grid {
    gap: clamp(14px, 2vw, 24px) !important;
}

.product-card,
.exam-cat-card,
.mock-card,
.test-card {
    overflow: hidden;
}

.product-card::before,
.exam-cat-card::before,
.mock-card::before,
.stat-card::before,
.admin-card::before {
    content: "";
    display: block;
    height: 3px;
    margin: -1px -1px 10px;
    background: linear-gradient(90deg, var(--ma-blue), var(--ma-teal), var(--ma-amber));
    opacity: 0.75;
}

.modal-content {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#global-loader {
    background:
        linear-gradient(to right, var(--ma-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ma-grid) 1px, transparent 1px),
        var(--bg-base, var(--ma-bg)) !important;
    background-size: 48px 48px, 48px 48px, auto;
}

.spinner {
    border-top-color: var(--ma-teal) !important;
}

.ma-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.48s ease, transform 0.48s ease;
}

.ma-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .ma-reveal {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    .navbar-header,
    .workspace,
    .marketplace-layout,
    .auth-right-panel,
    .auth-left-panel {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .glass-panel,
    .dashboard-card,
    .stat-card,
    .product-card,
    .exam-card,
    .mock-card,
    .admin-card {
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
    }

    .nav-user {
        gap: 8px !important;
    }

    #header-topup-wallet-btn {
        max-width: 180px;
        justify-content: center;
    }
}