/* Modern Theme Foundation (v1) */
:root {
    --mx-bg-0: #040810;
    --mx-bg-1: #0a1220;
    --mx-bg-2: #101b2f;
    --mx-surface-0: #121c2d;
    --mx-surface-1: #17243a;
    --mx-surface-2: #1b2b44;
    --mx-text: #f4f8ff;
    --mx-text-soft: #adc0dd;
    --mx-accent: #46d4ff;
    --mx-accent-2: #34efb0;
    --mx-accent-3: #ffbd59;
    --mx-danger: #ff6a7d;
    --mx-success: #57f3a9;
    --mx-border: rgba(140, 186, 239, 0.34);
    --mx-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
    --mx-radius-lg: 22px;
    --mx-radius-md: 14px;
    --mx-radius-sm: 10px;
}

body.modern-v2 {
    font-family: "Space Grotesk", "Poppins", sans-serif;
    color: var(--mx-text);
    background:
        radial-gradient(820px 340px at -8% -8%, rgba(70, 212, 255, 0.2), transparent 62%),
        radial-gradient(980px 340px at 108% -5%, rgba(52, 239, 176, 0.16), transparent 64%),
        linear-gradient(180deg, var(--mx-bg-0), var(--mx-bg-1) 50%, var(--mx-bg-2));
}

body.modern-v2 h1,
body.modern-v2 h2,
body.modern-v2 h3,
body.modern-v2 h4,
body.modern-v2 .onboarding-title,
body.modern-v2 .hub-title {
    font-family: "Rajdhani", "Space Grotesk", sans-serif;
    letter-spacing: 0.3px;
}

body.modern-v2 #app-container {
    background:
        linear-gradient(170deg, #0c1525, #101d31 56%, #0a1320);
    border: 1px solid var(--mx-border);
    box-shadow: 0 30px 64px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.modern-v2 #dashboard-version-label {
    border-radius: 8px;
    padding: 2px 6px;
    background: rgba(8, 16, 28, 0.68);
    color: #d9ebff;
    border: 1px solid rgba(164, 201, 246, 0.24);
}

body.modern-v2 .screen {
    background:
        radial-gradient(760px 300px at -10% -12%, rgba(70, 212, 255, 0.14), transparent 62%),
        radial-gradient(720px 300px at 112% -8%, rgba(52, 239, 176, 0.12), transparent 64%),
        linear-gradient(180deg, #0f1a2c, #0b1524 56%, #09111d);
}

body.modern-v2 .screen.active {
    animation: modernScreenIn 320ms ease-out;
}

@keyframes modernScreenIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.modern-v2 .glass-panel,
body.modern-v2 .glass-card,
body.modern-v2 .modern-card-panel,
body.modern-v2 .account-card,
body.modern-v2 .m-stat-card,
body.modern-v2 .l-modern-card,
body.modern-v2 .category-card,
body.modern-v2 .history-summary-card,
body.modern-v2 .modal-card,
body.modern-v2 .category-modal,
body.modern-v2 .word-item {
    background: linear-gradient(155deg, var(--mx-surface-1), var(--mx-surface-0)) !important;
    color: var(--mx-text);
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-radius-md);
    box-shadow: var(--mx-shadow) !important;
}

body.modern-v2 .screen-header h2,
body.modern-v2 .onboarding-desc,
body.modern-v2 .section-desc,
body.modern-v2 .lang-name,
body.modern-v2 .cat-count,
body.modern-v2 .word-meaning {
    color: var(--mx-text-soft) !important;
}

body.modern-v2 .modal-overlay {
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.48);
}

body.modern-v2 input,
body.modern-v2 textarea,
body.modern-v2 select {
    background: rgba(10, 18, 30, 0.84) !important;
    border: 1px solid rgba(145, 183, 225, 0.35) !important;
    color: var(--mx-text) !important;
    -webkit-text-fill-color: var(--mx-text) !important;
}

body.modern-v2 input::placeholder,
body.modern-v2 textarea::placeholder {
    color: rgba(173, 192, 221, 0.78) !important;
}

body.modern-v2 .close-btn,
body.modern-v2 .modal-close,
body.modern-v2 .icon-btn-plain {
    background: rgba(18, 30, 47, 0.78) !important;
    border: 1px solid rgba(160, 197, 241, 0.36) !important;
    color: var(--mx-text) !important;
}