/* Modern Layout & Components (v1) */
body.modern-v2 button {
    border-radius: 12px !important;
    border: 1px solid rgba(146, 189, 240, 0.45) !important;
    background: linear-gradient(145deg, #1b2d46, #102238) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.34) !important;
    transition: transform 130ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

body.modern-v2 button:hover,
body.modern-v2 button:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.38) !important;
}

body.modern-v2 button:active {
    transform: translateY(0) scale(0.99);
}

body.modern-v2 .modern-play-btn,
body.modern-v2 .big-play-btn,
body.modern-v2 #dash-start-btn,
body.modern-v2 #btn-practice-mistakes,
body.modern-v2 #btn-practice-learned {
    background: linear-gradient(130deg, #2a8dff, #2ed9ff 46%, #44efb5) !important;
    border: 1px solid rgba(188, 241, 255, 0.65) !important;
    color: #001627 !important;
    font-weight: 800;
}

body.modern-v2 .modern-play-btn .btn-text,
body.modern-v2 .modern-play-btn .btn-text span,
body.modern-v2 .modern-play-btn .btn-text small,
body.modern-v2 .modern-play-btn .btn-icon,
body.modern-v2 .big-play-btn,
body.modern-v2 #dash-start-btn {
    color: #041b2b !important;
}

body.modern-v2 .modern-text-btn,
body.modern-v2 .btn-secondary,
body.modern-v2 #home-btn,
body.modern-v2 #gameover-dashboard-btn {
    background: linear-gradient(145deg, #172439, #0e192a) !important;
    border-color: rgba(146, 189, 240, 0.38) !important;
    color: var(--mx-text) !important;
}

body.modern-v2 #resume-btn {
    background: linear-gradient(145deg, #1b4938, #133629) !important;
    border-color: rgba(126, 243, 188, 0.45) !important;
}

body.modern-v2 .dashboard-content {
    width: min(960px, 94vw);
    margin: 0 auto;
    padding-bottom: 90px;
}

body.modern-v2 .dashboard-header {
    width: min(960px, 94vw);
    margin: 14px auto 10px;
}

body.modern-v2 .account-card {
    border-radius: var(--mx-radius-lg) !important;
}

body.modern-v2 .profile-avatar-glow {
    background: conic-gradient(from 40deg, #41d2ff, #7bf0c6, #ffc96c, #41d2ff);
    padding: 4px;
}

body.modern-v2 .profile-avatar {
    background: radial-gradient(circle at 30% 25%, #4dd4ff, #1a83d8 68%, #115ca3);
    color: #eaf6ff !important;
}

body.modern-v2 .level-badge {
    background: rgba(74, 201, 255, 0.18) !important;
    border: 1px solid rgba(125, 216, 255, 0.5) !important;
    color: #dff3ff !important;
}

body.modern-v2 .modern-stats-grid .m-stat-card {
    border-left: 3px solid rgba(70, 212, 255, 0.54);
}

body.modern-v2 .mission-chip {
    transition: transform 140ms ease, border-color 140ms ease;
}

body.modern-v2 .mission-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(147, 221, 255, 0.58) !important;
}

body.modern-v2 .category-card {
    cursor: pointer;
    transition: transform 130ms ease, border-color 130ms ease, box-shadow 150ms ease;
}

body.modern-v2 .category-card:hover {
    transform: translateY(-1px);
    border-color: rgba(130, 214, 255, 0.54) !important;
}

body.modern-v2 .category-card.active,
body.modern-v2 .l-modern-card.active {
    background: linear-gradient(145deg, rgba(70, 212, 255, 0.34), rgba(52, 239, 176, 0.24)) !important;
    border-color: rgba(153, 227, 255, 0.72) !important;
    box-shadow: 0 0 0 1px rgba(146, 225, 255, 0.4), 0 14px 24px rgba(0, 0, 0, 0.36) !important;
}

body.modern-v2 .screen-header {
    background: linear-gradient(180deg, rgba(18, 31, 48, 0.92), rgba(12, 21, 34, 0.75));
    border-bottom: 1px solid rgba(132, 182, 240, 0.28);
}

body.modern-v2 #bottom-nav {
    background: linear-gradient(150deg, rgba(9, 17, 28, 0.98), rgba(5, 10, 18, 0.99)) !important;
    border-top: 1px solid rgba(127, 173, 229, 0.32) !important;
    box-shadow: 0 -14px 28px rgba(0, 0, 0, 0.48) !important;
}

body.modern-v2 .nav-item {
    color: #95acc9 !important;
}

body.modern-v2 .nav-item.active {
    color: #e8f6ff !important;
    background: linear-gradient(145deg, rgba(70, 212, 255, 0.24), rgba(52, 239, 176, 0.2)) !important;
    border-radius: 12px;
}

body.modern-v2 .nav-item.active i {
    color: #dbf4ff !important;
    text-shadow: 0 0 10px rgba(112, 220, 255, 0.48);
}

body.modern-v2 .history-practice-btn {
    position: sticky;
    bottom: 10px;
    z-index: 12;
}

body.modern-v2 .history-summary-card {
    overflow: hidden;
}

body.modern-v2 .history-summary-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 40%);
    pointer-events: none;
}

@media (max-width: 720px) {
    body.modern-v2 .dashboard-content,
    body.modern-v2 .dashboard-header {
        width: 96vw;
    }

    body.modern-v2 .modern-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}