/* ============================================================
   CTRL+ALT+CAREER & DSA PRACTICE TRACKER — DESIGN SYSTEM & THEMES
   Tagline: Ctrl your skills. Alt your excuses. Enter your career.
   ============================================================ */

:root {
    /* Page & Dark Surfaces */
    --bg-main: #000000;
    --bg-secondary: #06060a;
    --surface-card: #08080e;
    --surface-card-secondary: #0d0d16;
    --surface-card-elevated: #12121e;
    --surface-hover: #17131d;
    --surface-modal: #08080e;
    --surface-input: #050509;

    /* Borders & Lines */
    --border-color: rgba(239, 68, 68, 0.14);
    --border-highlight: rgba(244, 63, 94, 0.30);
    --border-purple: rgba(239, 68, 68, 0.35);

    /* Primary Accent & Glows (Crimson / Controlled Red System) */
    --primary-purple: #FF3B4F;
    --secondary-violet: #E11D48;
    --accent-violet: #FF4D5A;
    --purple-glow: rgba(255, 59, 79, 0.25);

    /* Direct Theme Tokens */
    --primary-blue: #FF3B4F;
    --soft-blue: #E11D48;
    --deep-navy: #08080e;

    /* Typography Colors */
    --text-primary: #f5f7ff;
    --text-muted: #8e8d9c;
    --text-violet: #FF4D5A;
    --text-light: #c8c8dc;
    --text-secondary: #c8c8dc;

    /* Difficulty Colors */
    --diff-easy: #10b981;
    --diff-medium: #f59e0b;
    --diff-hard: #FF3B4F;
    --diff-advanced: #8b5cf6;

    /* Contest & Platform Colors */
    --plat-leetcode: #f97316;
    --plat-gfg: #22c55e;
    --plat-codechef: #a855f7;
    --plat-codeforces: #3b82f6;
    --plat-atcoder: #ec4899;
    --plat-hackerrank: #06b6d4;

    /* Radius & Spacing */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 9999px;

    --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Card 3-D lift shadow — dark theme */
    --card-lift-shadow:
        0 10px 30px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(255, 59, 79, 0.12);
}

/* Light Theme Variables & Continuous Soft Lavender Base */
body.light-theme {
    --bg-main: #FAF9FF;
    --bg-secondary: #F7F4FF;
    --surface-card: #FFFFFF;
    --surface-card-secondary: #FAF9FF;
    --surface-card-elevated: #FFFFFF;
    --surface-hover: #F3EEFF;
    --surface-modal: #FFFFFF;
    --surface-input: #FAF9FF;

    /* Theme Tokens */
    --primary-purple: #6D3DF5;
    --deep-purple: #5B21E6;
    --violet: #7C3AED;
    --light-violet: #8B5CF6;
    --secondary-violet: #7C3AED;
    --accent-violet: #8B5CF6;

    --lavender-50: #FAF9FF;
    --lavender-100: #F5F3FF;
    --lavender-200: #EDE9FE;
    --lavender-300: #DDD6FE;

    /* Borders & Lines */
    --border-color: #EDE9FE;
    --border-highlight: #DDD6FE;
    --border-purple: rgba(109, 61, 245, 0.22);

    /* Typography Colors */
    --text-primary: #111827;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-violet: #6D3DF5;
    --text-light: #334155;

    /* Glows */
    --purple-glow: rgba(109, 61, 245, 0.18);
    --purple-glow-strong: rgba(109, 61, 245, 0.28);

    /* Continuous Soft Light Lavender & White Seamless Gradient */
    background-color: #FAF9FF !important;
    background-image:
        radial-gradient(ellipse 1100px 650px at 50% 120px, rgba(237, 233, 254, 0.40) 0%, rgba(247, 244, 255, 0.20) 50%, rgba(250, 249, 255, 0) 80%),
        radial-gradient(circle 800px at 5% 12%, rgba(221, 214, 254, 0.28) 0%, rgba(243, 238, 255, 0.12) 55%, rgba(250, 249, 255, 0) 80%),
        radial-gradient(circle 850px at 95% 15%, rgba(196, 181, 253, 0.22) 0%, rgba(237, 233, 254, 0.14) 50%, rgba(250, 249, 255, 0) 80%),
        radial-gradient(ellipse 1200px 750px at 50% 85%, rgba(237, 233, 254, 0.30) 0%, rgba(247, 244, 255, 0.12) 60%, rgba(250, 249, 255, 0) 85%),
        linear-gradient(180deg, #FFFFFF 0%, #FAF9FF 18%, #F7F4FF 45%, #F3EEFF 70%, #FAF9FF 90%, #FFFFFF 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    position: relative;

    /* Card 3-D lift shadow — light theme */
    --card-lift-shadow:
        0 8px 24px rgba(109, 61, 245, 0.07),
        0 2px 6px rgba(0, 0, 0, 0.03);
}

/* Light Theme — Disabled Pseudo Elements (Replaced by dedicated background layer) */
body.light-theme::before,
body.light-theme::after {
    display: none !important;
    content: none !important;
}

/* Reset & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

html, body {
    width: 100%;
    min-height: 100vh;
    font-family: var(--font-family);
    background-color: #000000;
    color: var(--text-primary);
    line-height: 1.5;
    background-image: none;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow: visible;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: #0d0d16;
    border: 1px solid rgba(255, 59, 79, 0.14);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-purple);
}

/* Layout Container */
.app-container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 20px 60px 20px;
}

/* Floating Navbar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 10px 24px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: sticky;
    top: 14px;
    z-index: 100;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme .navbar {
    box-shadow: 0 4px 20px rgba(109, 61, 245, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* ── Dark theme scroll glass effect ── */
body:not(.light-theme) .navbar.is-scrolled,
body:not(.light-theme) .navbar--glass {
    background: rgba(8, 8, 14, 0.75);
    border-color: rgba(255, 59, 79, 0.16);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.60),
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 0 0 1px rgba(255, 59, 79, 0.14),
        0 0 24px rgba(255, 59, 79, 0.10);
    backdrop-filter: blur(22px) saturate(160%) brightness(0.9);
    -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(0.9);
}

/* ── Light theme scroll glass effect ── */
body.light-theme .navbar.is-scrolled,
body.light-theme .navbar--glass {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(124, 58, 237, 0.16);
    box-shadow:
        0 14px 40px rgba(109, 61, 245, 0.12),
        0 4px 14px rgba(124, 58, 237, 0.07),
        0 1px 3px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 24px rgba(109, 61, 245, 0.08);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* ── Tablet (≤1024px): slightly tighter padding ── */
@media (max-width: 1024px) {
    .navbar {
        padding: 10px 16px;
        transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    -webkit-backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.3s ease;
    }
    body:not(.light-theme) .navbar.is-scrolled,
    body:not(.light-theme) .navbar--glass {
        background: rgba(8, 8, 14, 0.75);
        backdrop-filter: blur(20px) saturate(155%) brightness(0.9);
        -webkit-backdrop-filter: blur(20px) saturate(155%) brightness(0.9);
    }
    body.light-theme .navbar.is-scrolled,
    body.light-theme .navbar--glass {
        background: rgba(255, 255, 255, 0.68);
        border: 1px solid rgba(124, 58, 237, 0.16);
        box-shadow:
            0 12px 34px rgba(109, 61, 245, 0.10),
            0 3px 10px rgba(124, 58, 237, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 0 20px rgba(109, 61, 245, 0.07);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
    }
}

/* ── Mobile (≤640px): stack layout already handled; lighten blur ── */
@media (max-width: 640px) {
    .navbar {
        padding: 10px 14px;
        gap: 12px;
    }
    body:not(.light-theme) .navbar.is-scrolled,
    body:not(.light-theme) .navbar--glass {
        background: rgba(8, 8, 14, 0.78);
        border-color: rgba(255, 59, 79, 0.14);
        box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.55),
            0 1px 0 rgba(255, 255, 255, 0.05) inset,
            0 0 0 1px rgba(255, 59, 79, 0.10);
        backdrop-filter: blur(16px) saturate(145%) brightness(0.92);
        -webkit-backdrop-filter: blur(16px) saturate(145%) brightness(0.92);
    }
    body.light-theme .navbar.is-scrolled,
    body.light-theme .navbar--glass {
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(124, 58, 237, 0.15);
        box-shadow:
            0 8px 24px rgba(109, 61, 245, 0.09),
            0 2px 8px rgba(124, 58, 237, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 0 16px rgba(109, 61, 245, 0.06);
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
    }
}

/* ── Small mobile (≤390px): minimal blur for performance ── */
@media (max-width: 390px) {
    .navbar {
        padding: 8px 12px;
    }
    body:not(.light-theme) .navbar.is-scrolled,
    body:not(.light-theme) .navbar--glass {
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
    body.light-theme .navbar.is-scrolled,
    body.light-theme .navbar--glass {
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
}


.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.brand-logo .logo-icon {
    color: var(--secondary-violet);
    font-weight: 900;
}

.nav-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    padding: 4px;
    border-radius: var(--radius-pill);
}

.nav-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.nav-tab:hover {
    color: var(--text-primary);
}

.nav-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #E11D48, #FF3B4F);
    border: 1px solid rgba(255, 59, 79, 0.45);
    box-shadow: 0 0 16px rgba(255, 59, 79, 0.35);
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #FF3B4F;
    box-shadow: 0 0 8px #FF3B4F;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.icon-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-violet);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.user-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-profile-btn:hover {
    border-color: var(--border-purple);
}

.user-avatar-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
}

.user-nav-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fbbf24;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    white-space: nowrap;
}

body.light-theme .user-nav-stars {
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.28);
    color: #b45309;
}

.user-nav-stars.star-earned-pop {
    animation: starRewardPop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes starRewardPop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.3);
        box-shadow: 0 0 16px rgba(251, 191, 36, 0.7);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

/* View Sections */
.view-section {
    display: none;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.view-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   1. COMPACT CONTEST BUTTON & STARTING PAGE HEADER
   ============================================================ */
.codecal-hero {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    position: relative;
    z-index: 10;
}

.compact-contest-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 48px;
    height: 48px;
    padding: 0 13px;
    border-radius: 24px;
    background: var(--surface-card);
    border: 1px solid var(--border-purple);
    color: var(--text-primary);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 4px 16px var(--purple-glow), 0 0 10px rgba(239, 68, 68, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: width 300ms ease, background 300ms ease, box-shadow 300ms ease, border-color 300ms ease, transform 300ms ease;
}

body.light-theme .compact-contest-btn {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(109, 61, 245, 0.35);
    box-shadow: 0 4px 14px rgba(109, 61, 245, 0.08), 0 0 10px rgba(109, 61, 245, 0.08);
}

.compact-contest-btn:hover {
    width: 140px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(244, 63, 94, 0.3));
    border-color: var(--accent-violet);
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.4), 0 0 16px rgba(244, 63, 94, 0.3);
    transform: translateY(-1px);
}

body.light-theme .compact-contest-btn:hover {
    background: linear-gradient(135deg, #7C3AED, #5B21E6);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(109, 61, 245, 0.35);
}

.contest-btn-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    color: var(--accent-violet);
}

.contest-btn-text {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-left: 10px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 250ms ease, transform 250ms ease;
}

.compact-contest-btn:hover .contest-btn-text {
    opacity: 1;
    transform: translateX(0);
}

/* Stack Hero Buttons Vertically */
.hero-btns-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    position: relative;
}

.upcoming-rounds-btn-wrapper {
    position: relative;
}

.compact-contest-btn.upcoming-btn:hover {
    width: 205px;
}

/* Upcoming Rounds Dropdown Popup Menu */
.upcoming-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 175px;
    background: var(--surface-modal);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--purple-glow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}

.upcoming-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.upcoming-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.upcoming-dropdown-item:hover {
    background: linear-gradient(135deg, rgba(109, 61, 245, 0.15), rgba(124, 58, 237, 0.15));
    color: #6D3DF5;
    transform: translateX(-2px);
}

body.light-theme .upcoming-dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(109, 61, 245, 0.22);
    box-shadow: 0 10px 28px rgba(109, 61, 245, 0.10), 0 0 16px rgba(109, 61, 245, 0.06);
}

body.light-theme .upcoming-dropdown-item:hover {
    background: #F5F3FF;
    color: #6D3DF5;
}

/* Upcoming Rounds Modal Styling */
.modal-box.upcoming-rounds-modal-box {
    max-width: 660px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 28px;
}

.upcoming-filter-tabs {
    display: flex;
    gap: 8px;
    background: var(--surface-input);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-purple);
    margin-bottom: 20px;
}

.upcoming-modal-tab {
    flex: 1;
    padding: 9px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.upcoming-modal-tab.active {
    background: var(--primary-purple);
    color: #ffffff;
    box-shadow: 0 2px 10px var(--purple-glow);
}

.upcoming-modal-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 55vh;
    padding-right: 4px;
}

.upcoming-modal-list::-webkit-scrollbar {
    width: 6px;
}

.upcoming-modal-list::-webkit-scrollbar-thumb {
    background: var(--border-purple);
    border-radius: 3px;
}

/* ============================================================
   PROBLEM OF THE DAY (POTD) CARD
   ============================================================ */
.potd-container-card {
    margin: 24px auto 32px auto;
    max-width: 860px;
}

.potd-card-inner {
    background: linear-gradient(135deg, var(--surface-card), rgba(239, 68, 68, 0.10));
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-lg);
    padding: 24px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(239, 68, 68, 0.08);
    position: relative;
    overflow: hidden;
}

.potd-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.potd-badge {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: rgba(168, 85, 247, 0.18);
    color: var(--accent-violet);
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.potd-badge-done {
    background: rgba(16, 185, 129, 0.18);
    color: var(--diff-easy);
    border-color: rgba(16, 185, 129, 0.35);
}

.potd-date-tag {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-light);
}

.potd-fire-icon {
    font-size: 1.4rem;
}

.potd-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}

.potd-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.potd-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-potd-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--purple-glow);
    transition: var(--transition-fast);
}

.btn-potd-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

/* POTD Modal Box */
.potd-modal-box {
    max-width: 520px;
}

.potd-platform-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.potd-plat-option-card {
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--transition-fast);
}

.potd-plat-option-card:hover {
    border-color: var(--border-purple);
}

.potd-plat-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.potd-plat-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.potd-plat-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.potd-plat-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-contest-secondary.completed {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--diff-easy);
    color: var(--diff-easy);
}

/* Statistics Bar */
.codecal-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 36px 0;
    flex-wrap: wrap;
}

.stat-pill-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 36px;
    text-align: center;
    min-width: 170px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: var(--transition-fast);
}

.stat-pill-card:hover {
    border-color: var(--border-highlight);
    transform: translateY(-2px);
}

.stat-pill-number {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text-violet);
    line-height: 1.2;
}

.stat-pill-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Search & Filter Panel */
.challenges-filter-panel {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.contest-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.contest-search-wrapper .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.contest-search-input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition-fast);
}

.contest-search-input:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 14px var(--purple-glow);
}

.contest-platform-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contest-plat-pill {
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.contest-plat-pill:hover {
    color: var(--text-primary);
    border-color: var(--border-highlight);
}

.contest-plat-pill.active {
    background: var(--primary-purple);
    color: white;
    border-color: var(--secondary-violet);
    box-shadow: 0 0 14px var(--purple-glow);
}

.view-mode-toggles {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-input);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.view-toggle-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.view-toggle-btn:hover {
    color: var(--text-primary);
}

.view-toggle-btn.active {
    background: var(--surface-card);
    color: var(--primary-purple);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Summary Cards Grid */
.summary-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.summary-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 130px;
    transition: var(--transition-fast);
}

.summary-card:hover {
    border-color: var(--border-highlight);
    transform: translateY(-2px);
}

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.summary-badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.summary-badge.active-now {
    background: rgba(16, 185, 129, 0.15);
    color: var(--diff-easy);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.summary-badge.upcoming {
    background: rgba(168, 85, 247, 0.15);
    color: var(--accent-violet);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.summary-badge.recent {
    background: rgba(245, 158, 11, 0.15);
    color: var(--diff-medium);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.summary-badge.today {
    background: rgba(59, 130, 246, 0.15);
    color: var(--plat-codeforces);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.summary-icon {
    font-size: 1.2rem;
}

.summary-card-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.summary-card-sub {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.summary-recent-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-finish-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plat-dot {
    font-size: 0.7rem;
}
.plat-dot-leetcode { color: var(--plat-leetcode); }
.plat-dot-codechef { color: var(--plat-codechef); }
.plat-dot-codeforces { color: var(--plat-codeforces); }
.plat-dot-atcoder { color: var(--plat-atcoder); }
.plat-dot-gfg, .plat-dot-geeksforgeeks { color: var(--plat-gfg); }

/* Contest Cards & Lists */
.contests-grid-layout {
    margin-bottom: 40px;
}

.contests-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.title-icon {
    color: var(--secondary-violet);
}

.contest-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upcoming-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.contest-card {
    background: var(--surface-card);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--transition-medium);
}

.contest-card:hover {
    border-color: var(--accent-violet);
    box-shadow: 0 8px 24px var(--purple-glow);
    transform: translateY(-2px);
}

.contest-card-live {
    border-color: var(--accent-pink);
    box-shadow: 0 0 20px var(--pink-glow);
}

.contest-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.platform-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.platform-badge.plat-leetcode { background: rgba(249, 115, 22, 0.15); color: var(--plat-leetcode); border: 1px solid rgba(249, 115, 22, 0.3); }
.platform-badge.plat-codechef { background: rgba(168, 85, 247, 0.15); color: var(--plat-codechef); border: 1px solid rgba(168, 85, 247, 0.3); }
.platform-badge.plat-codeforces { background: rgba(59, 130, 246, 0.15); color: var(--plat-codeforces); border: 1px solid rgba(59, 130, 246, 0.3); }
.platform-badge.plat-atcoder { background: rgba(236, 72, 153, 0.15); color: var(--plat-atcoder); border: 1px solid rgba(236, 72, 153, 0.3); }
.platform-badge.plat-gfg, .platform-badge.plat-geeksforgeeks { background: rgba(34, 197, 94, 0.15); color: var(--plat-gfg); border: 1px solid rgba(34, 197, 94, 0.3); }

.category-badge {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.category-badge.diff-easy { background: rgba(16, 185, 129, 0.15); color: var(--diff-easy); }
.category-badge.diff-medium { background: rgba(245, 158, 11, 0.15); color: var(--diff-medium); }
.category-badge.diff-advanced { background: rgba(139, 92, 246, 0.15); color: var(--diff-advanced); }

.live-status-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-today {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-live {
    background: rgba(16, 185, 129, 0.15);
    color: var(--diff-easy);
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--diff-easy);
    box-shadow: 0 0 8px var(--diff-easy);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.badge-ended {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.contest-countdown-tag {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent-violet);
    background: rgba(239, 68, 68, 0.12);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.contest-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}

.contest-meta-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.contest-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-contest-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 12px var(--purple-glow);
}

.btn-contest-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.45);
}

.btn-contest-secondary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-contest-secondary:hover {
    border-color: var(--accent-violet);
    background: var(--surface-hover);
}

.btn-reminder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.95rem;
}

.btn-reminder:hover {
    color: var(--text-primary);
    border-color: var(--accent-violet);
}

.btn-reminder.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--diff-easy);
    color: var(--diff-easy);
}

.empty-contest-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* Calendar View Layout */
.contests-calendar-layout {
    margin-bottom: 40px;
}

.calendar-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.calendar-day-block {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.calendar-date-header {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent-violet);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-event-item {
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-purple);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.calendar-event-item:hover {
    background: var(--surface-hover);
    transform: translateX(2px);
}

.calendar-event-item.plat-border-leetcode { border-left-color: var(--plat-leetcode); }
.calendar-event-item.plat-border-codechef { border-left-color: var(--plat-codechef); }
.calendar-event-item.plat-border-codeforces { border-left-color: var(--plat-codeforces); }
.calendar-event-item.plat-border-atcoder { border-left-color: var(--plat-atcoder); }

.cal-event-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.cal-event-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Structured Footer */
.codecal-footer {
    background: rgba(8, 8, 14, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: var(--radius-xl);
    padding: 36px 40px 28px 40px;
    margin-top: 60px;
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.10);
}

.footer-badges-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.14);
    flex-wrap: wrap;
    gap: 16px;
}

.footer-badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #f5f7ff;
    background: rgba(14, 14, 22, 0.85);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(239, 68, 68, 0.20);
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-brand {
    font-size: 1.45rem;
    font-weight: 900;
    color: #f5f7ff;
    margin-bottom: 10px;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.footer-brand .logo-icon {
    color: var(--secondary-violet);
}

.footer-desc {
    font-size: 0.88rem;
    color: #aeb7d4;
    line-height: 1.6;
    margin-bottom: 14px;
}

.footer-crafted {
    font-size: 0.84rem;
    color: var(--secondary-violet);
    font-weight: 600;
    margin-bottom: 14px;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #000000;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: var(--primary-purple);
    fill: var(--primary-purple);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition-fast);
}

.social-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: inherit;
    display: block;
}

.social-icon .linkedin-logo {
    color: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.social-icon:hover {
    border-color: var(--primary-purple);
    background: var(--primary-purple);
    color: #000000;
    fill: #000000;
    box-shadow: 0 0 14px rgba(255, 59, 79, 0.45);
    transform: translateY(-2px);
}

.social-icon:hover svg,
.social-icon:hover .linkedin-logo {
    color: #000000;
    fill: #000000;
}

.footer-links-col h4 {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-violet);
    margin-bottom: 14px;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.footer-links-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links-col a {
    font-size: 0.88rem;
    color: #aeb7d4;
    text-decoration: none;
    transition: var(--transition-fast);
    font-weight: 500;
}

.footer-links-col a:hover {
    color: #f5f7ff;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    transform: translateX(2px);
}

.badge-mini {
    font-size: 0.65rem;
    font-weight: 800;
    background: var(--primary-purple);
    color: white;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    margin-left: 6px;
}

.footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid rgba(239, 68, 68, 0.14);
    font-size: 0.82rem;
    color: #aeb7d4;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copyright {
    color: #747d9b;
    font-weight: 500;
}

.footer-status-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-clock {
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--secondary-violet);
    font-weight: 700;
}

.system-status-pill {
    font-size: 0.72rem;
    font-weight: 800;
    color: #34d399;
    background: rgba(16, 185, 129, 0.18);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.back-to-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: var(--transition-fast);
}

.back-to-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.65);
}

/* Light Theme Adaptivity for Footer */
body.light-theme .codecal-footer {
    background: #FAF9FF !important;
    border-top: 1px solid rgba(109, 61, 245, 0.15) !important;
    color: #475569 !important;
}
body.light-theme .footer-brand { color: #111827; text-shadow: none; }
body.light-theme .footer-desc { color: #475569; }
body.light-theme .footer-crafted { color: #6D3DF5; }
body.light-theme .footer-badge-item { background: #F5F3FF; border-color: rgba(109, 61, 245, 0.2); color: #111827; }
body.light-theme .footer-links-col h4 { color: #6D3DF5; text-shadow: none; }
body.light-theme .footer-links-col a { color: #475569; }
body.light-theme .footer-links-col a:hover { color: #6D3DF5; text-shadow: none; }
body.light-theme .footer-bottom-row { border-top-color: #E2E8F0; color: #94A3B8; }
body.light-theme .footer-copyright { color: #94A3B8; }

/* Toast Message */
.codecal-toast-msg {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--surface-modal);
    border: 1px solid var(--border-purple);
    color: var(--text-primary);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--purple-glow);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2000;
}

.codecal-toast-msg.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* DSA Mastery Specific Styles */
.hero-banner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.hero-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-title-group h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
}

.hero-title-group p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--purple-glow);
    transition: var(--transition-fast);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-secondary:hover {
    border-color: var(--accent-violet);
    background: var(--surface-hover);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-fast);
}

.stat-card:hover {
    border-color: var(--border-highlight);
    transform: translateY(-2px);
}

.stat-card-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.stat-card-value {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 8px 0 4px 0;
}

.stat-card-sub {
    font-size: 0.8rem;
    color: var(--text-violet);
}

.filter-bar-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 46px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-fast);
}

.search-input:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 15px var(--purple-glow);
}

.filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-pills-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-pill:hover {
    color: var(--text-primary);
    border-color: var(--border-highlight);
}

.filter-pill.active {
    background: var(--primary-purple);
    color: white;
    border-color: var(--secondary-violet);
    box-shadow: 0 0 12px var(--purple-glow);
}

.filter-pill.active-easy { background: var(--diff-easy); color: white; border-color: var(--diff-easy); }
.filter-pill.active-medium { background: var(--diff-medium); color: white; border-color: var(--diff-medium); }
.filter-pill.active-hard { background: var(--diff-hard); color: white; border-color: var(--diff-hard); }

.select-dropdown {
    padding: 8px 16px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

.topics-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.topic-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-smooth);
    position: relative;
}

.topic-card-accent-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-purple);
    transition: var(--transition-fast);
}

.topic-card.completed .topic-card-accent-line {
    background: var(--diff-easy);
}

.topic-card-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 16px;
}

.topic-info-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topic-icon-box {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--border-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-violet);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.topic-title-area h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-level-badge {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(239, 68, 68, 0.12);
    color: var(--text-violet);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.topic-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.topic-progress-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.progress-circle-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle-svg {
    transform: rotate(-90deg);
    width: 44px;
    height: 44px;
}

.progress-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 4;
}

body.light-theme .progress-circle-bg {
    stroke: #EDE9FE;
}

.progress-circle-val {
    fill: none;
    stroke: var(--primary-purple);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-circle-text {
    position: absolute;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-primary);
}

.topic-fraction {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-light);
    min-width: 50px;
    text-align: right;
}

.chevron-icon {
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.topic-card.open .chevron-icon {
    transform: rotate(180deg);
}

.topic-card-body {
    display: none;
    padding: 0 24px 24px 24px;
    border-top: 1px solid var(--border-color);
}

.topic-card.open .topic-card-body {
    display: block;
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TOPIC PROGRESS INTELLIGENCE COMPONENT
   ============================================================ */
.topic-progress-intel {
    background: var(--surface-input);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 20px 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition-fast);
}

body.light-theme .topic-progress-intel {
    background: #FAF9FF;
    border-color: rgba(109, 61, 245, 0.2);
    box-shadow: 0 4px 16px rgba(109, 61, 245, 0.06);
}

.topic-intel-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.topic-intel-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topic-intel-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.topic-intel-fraction {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
    font-feature-settings: "tnum";
}

.topic-intel-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topic-intel-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
}

body.light-theme .topic-intel-bar-track {
    background: #EDE9FE;
}

.topic-intel-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-purple), var(--secondary-violet));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.topic-intel-pct {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-violet);
    min-width: 42px;
    text-align: right;
}

.topic-intel-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-theme .topic-intel-bottom {
    border-top-color: #EDE9FE;
}

.topic-intel-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.topic-intel-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
}

.topic-intel-pill.pill-easy {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.08);
    color: var(--diff-easy);
}

.topic-intel-pill.pill-medium {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
    color: var(--diff-medium);
}

.topic-intel-pill.pill-hard {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.08);
    color: var(--diff-hard);
}

.intel-pill-label {
    font-weight: 600;
}

.intel-pill-val {
    font-weight: 800;
    color: var(--text-primary);
}

.topic-intel-remaining {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.topic-intel-remaining-tag {
    color: var(--text-muted);
}

.topic-intel-complete-tag {
    color: var(--diff-easy);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .topic-intel-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.subtopic-header {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-violet);
    margin: 20px 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.subtopic-header::before {
    content: '•';
    color: var(--primary-purple);
    font-size: 1.2rem;
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.problem-card {
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    transition: var(--transition-fast);
}

.problem-card:hover {
    border-color: var(--border-highlight);
    background: var(--surface-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.problem-card-left-border {
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--border-highlight);
}

.problem-card.completed .problem-card-left-border {
    background: var(--diff-easy);
}

.problem-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.checkbox-title-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid rgba(239, 68, 68, 0.28);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    transition: var(--transition-fast);
}

body.light-theme .custom-checkbox {
    border-color: #DDD6FE;
    background: #FAF9FF;
}

.custom-checkbox:hover {
    border-color: var(--diff-easy);
}

.custom-checkbox.checked {
    background: var(--diff-easy);
    border-color: var(--diff-easy);
    color: white;
}

.custom-checkbox .check-svg {
    display: none;
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 3;
}

.custom-checkbox.checked .check-svg {
    display: block;
}

.problem-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.problem-card.completed .problem-title {
    color: var(--text-muted);
    text-decoration: line-through;
}

.star-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: var(--transition-fast);
}

.star-btn:hover, .star-btn.active {
    color: #fbbf24;
    transform: scale(1.15);
}

.problem-card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.badges-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.badge {
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-easy { background: rgba(16, 185, 129, 0.15); color: var(--diff-easy); border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-medium { background: rgba(245, 158, 11, 0.15); color: var(--diff-medium); border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-hard { background: rgba(239, 68, 68, 0.15); color: var(--diff-hard); border: 1px solid rgba(239, 68, 68, 0.3); }

.badge-platform {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-violet);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-platform.leetcode { color: var(--plat-leetcode); border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.1); }
.badge-platform.geeksforgeeks { color: var(--plat-gfg); border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.1); }
.badge-platform.codechef { color: var(--plat-codechef); border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.1); }
.badge-platform.hackerrank { color: var(--plat-hackerrank); border-color: rgba(6, 182, 212, 0.3); background: rgba(6, 182, 212, 0.1); }

.actions-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.75rem;
    transition: var(--transition-fast);
}

.action-icon-btn:hover {
    color: var(--text-primary);
    border-color: var(--secondary-violet);
    background: rgba(239, 68, 68, 0.2);
}

.action-icon-btn.has-note {
    color: #38bdf8;
    border-color: #38bdf8;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 5, 10, 0.80);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background: var(--surface-modal);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--purple-glow);
    transform: scale(0.95);
    transition: var(--transition-fast);
}

.modal-overlay.active .modal-box {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.modal-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.close-modal-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
}

.close-modal-btn:hover {
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 6px;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
}

.form-input:focus, .form-textarea:focus {
    border-color: var(--secondary-violet);
    box-shadow: 0 0 12px var(--purple-glow);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-error-msg {
    color: var(--diff-hard);
    font-size: 0.82rem;
    margin-top: 6px;
    display: none;
}

.form-error-msg.active {
    display: block;
}

/* Password Input Visibility Toggle */
.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrap .form-input,
.password-input-wrap .form-input-admin {
    padding-right: 44px !important;
    width: 100%;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
    z-index: 2;
    line-height: 1;
}

.password-toggle-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--secondary-violet, #6366f1);
    outline-offset: 2px;
}

.auth-switch-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 16px;
}

.auth-switch-link {
    color: var(--secondary-violet);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--surface-card);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px var(--purple-glow);
    animation: toastIn 0.3s ease forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .summary-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contests-two-col {
        grid-template-columns: 1fr;
    }
    .footer-main-grid {
        grid-template-columns: 1fr 1fr;
    }
    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   MOBILE HAMBURGER NAVIGATION
   ============================================================ */

/* Hamburger button — hidden on desktop */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 6px;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.mobile-menu-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent-violet);
}

.hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease, width 0.2s ease;
    transform-origin: center;
}

/* Open state — bars animate into × */
.mobile-menu-btn.is-open .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.is-open .hamburger-bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.mobile-menu-btn.is-open .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer — hidden by default on all sizes */
.mobile-nav-drawer {
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* animation controlled via .is-open class */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 10px 8px 14px 8px;
    margin-top: -16px; /* tuck under navbar margin */
    margin-bottom: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    z-index: 99;
    position: relative;
}

.mobile-nav-drawer.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 18px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.97rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mobile-nav-item:hover {
    background: var(--surface-hover);
    transform: translateX(4px);
}

.mobile-nav-item.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(244, 63, 94, 0.12));
    color: var(--accent-violet);
    border-left: 3px solid var(--primary-purple);
}

.mobile-nav-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 12px;
}

.mobile-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 2px 12px;
    flex-wrap: wrap;
}

/* Dark theme drawer glass (mirrors navbar glass on scroll) */
body:not(.light-theme) .mobile-nav-drawer {
    background: rgba(8, 8, 14, 0.94);
    border-color: rgba(239, 68, 68, 0.14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(239, 68, 68, 0.12);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* Light theme drawer */
body.light-theme .mobile-nav-drawer {
    background: rgba(255, 255, 255, 0.96);
    border-color: #EDE9FE;
    box-shadow: 0 8px 24px rgba(109, 61, 245, 0.08);
}

body.light-theme .mobile-nav-item:hover {
    background: #F5F3FF;
    color: #6D3DF5;
}

/* ── Mobile breakpoint: show hamburger, hide desktop nav ── */
@media (max-width: 768px) {
    /* Navbar: logo left + hamburger right, single row */
    .navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 10px 16px;
    }

    /* Hide desktop nav elements */
    .nav-tabs,
    .nav-actions {
        display: none !important;
    }

    /* Show hamburger */
    .mobile-menu-btn {
        display: flex;
    }

    /* Show drawer when it's in open state */
    .mobile-nav-drawer {
        display: flex;
    }

    .hero-title {
        font-size: 2.8rem;
    }
    .summary-cards-grid {
        grid-template-columns: 1fr;
    }
    .footer-main-grid {
        grid-template-columns: 1fr;
    }
    .problems-grid {
        grid-template-columns: 1fr;
    }
    .challenges-filter-panel {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 390px) {
    .mobile-nav-item {
        font-size: 0.92rem;
        padding: 12px 14px;
    }
}


/* ============================================================
   SUBTLE CONTINUOUS RUNNING DSA BACKGROUND ANIMATION
   ============================================================ */

#view-challenges {
    position: relative;
    overflow: visible;
}

#view-challenges > section {
    position: relative;
    z-index: 2;
}



/* ============================================================
   REACT BITS PRO - CIRCLES (ROTATING ORBITAL RINGS) COMPONENT
   ============================================================ */

.circles-showcase-container {
    position: relative;
    width: 100%;
    max-width: 580px;
    height: 540px;
    margin: -10px auto 10px auto;
    transform: translateY(-45px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    user-select: none;
    z-index: 5;
}

/* SVG Orbital Dashed Paths */
.circles-svg-paths {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.circles-path {
    fill: none;
    stroke: rgba(239, 68, 68, 0.22);
    stroke-dasharray: 6 6;
    stroke-width: 1.5px;
    transition: stroke 0.3s ease;
}

body.light-theme .circles-path {
    stroke: rgba(109, 61, 245, 0.34);
}

/* Central Glowing Core */
.circles-center-core {
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-purple) 0%, var(--surface-card) 85%);
    border: 2px solid var(--border-purple);
    box-shadow: 0 0 30px var(--purple-glow), 0 0 15px rgba(239, 68, 68, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circles-center-core:hover {
    transform: scale(1.08);
    box-shadow: 0 0 45px rgba(239, 68, 68, 0.5), 0 0 25px rgba(244, 63, 94, 0.5);
}

.circles-core-logo {
    font-size: 1.35rem;
    font-weight: 900;
    color: white;
}

.circles-core-text {
    font-size: 0.60rem;
    font-weight: 800;
    color: var(--accent-violet);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Icon group wrapper — stacks </>  + CodeOrbit vertically */
.circles-core-icon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-shrink: 0;
}



/* Orbital Rings */
.orbital-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

/* Ring Animations */
.ring-outer {
    width: 540px;
    height: 540px;
    animation: rotateCounterClockwise 45s linear infinite;
}

.ring-middle {
    width: 370px;
    height: 370px;
    animation: rotateClockwise 35s linear infinite;
}

.ring-inner {
    width: 220px;
    height: 220px;
    animation: rotateCounterClockwise 25s linear infinite;
}

@keyframes rotateClockwise {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateCounterClockwise {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Orbital Items */
.orbital-item {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(8, 8, 14, 0.88);
    border: 1.5px solid var(--topic-color, var(--secondary-violet));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px var(--topic-glow, rgba(239, 68, 68, 0.25)), inset 0 0 8px var(--topic-glow, rgba(239, 68, 68, 0.12));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: scale 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease, background 0.25s ease;
    z-index: 10;
}

/* Counter-rotate items so text/icons stay upright */
.ring-outer .orbital-item {
    animation: counterRotateCCW 45s linear infinite;
}

.ring-middle .orbital-item {
    animation: counterRotateCW 35s linear infinite;
}

.ring-inner .orbital-item {
    animation: counterRotateCCW 25s linear infinite;
}

@keyframes counterRotateCW {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes counterRotateCCW {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.orbital-item:hover {
    scale: 1.10;
    filter: brightness(1.25);
    border-color: var(--topic-color, var(--accent-violet));
    box-shadow: 0 0 20px var(--topic-color, var(--purple-glow)), 0 0 14px var(--topic-glow, rgba(239, 68, 68, 0.4)), inset 0 0 10px var(--topic-glow, rgba(239, 68, 68, 0.25));
    z-index: 25;
}

/* Pause orbital rotation on hover of any orbital circle */
.circles-showcase-container.orbit-paused .orbital-ring,
.circles-showcase-container.orbit-paused .orbital-item,
.circles-showcase-container:has(.orbital-item:hover) .orbital-ring,
.circles-showcase-container:has(.orbital-item:hover) .orbital-item {
    animation-play-state: paused !important;
}

/* Floating Glassmorphism Tooltip for Globe Icons */
.circles-topic-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(8, 8, 14, 0.95);
    border: 1px solid var(--topic-color, var(--border-purple));
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px var(--topic-glow, rgba(239, 68, 68, 0.25));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
}

.orbital-item:hover .circles-topic-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   DARK-THEME-ONLY ORBITAL HUD PROGRESS TOOLTIP
   ============================================================ */
.orbital-hud-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 148px;
    max-width: 176px;
    padding: 8px 12px;
    background: rgba(10, 10, 18, 0.94);
    border: 1px solid var(--hud-color, rgba(0, 240, 255, 0.35));
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 14px var(--hud-glow, rgba(0, 240, 255, 0.25));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none !important;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95) translateY(3px);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
    user-select: none;
    box-sizing: border-box;
}

.orbital-hud-tooltip.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.orbital-hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.orbital-hud-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orbital-hud-arrow {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--hud-color, #00f0ff);
    opacity: 0.9;
    flex-shrink: 0;
}

.orbital-hud-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}

.orbital-hud-track {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    margin-bottom: 5px;
}

.orbital-hud-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--hud-color, #00f0ff);
    box-shadow: 0 0 8px var(--hud-glow, rgba(0, 240, 255, 0.4));
    transition: width 0.22s ease;
    width: 0%;
}

.orbital-hud-pct {
    font-size: 0.67rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.03em;
}

/* In Dark Theme, hide the old plain tooltip in favor of the HUD progress tooltip */
body:not(.light-theme) .circles-topic-tooltip {
    display: none !important;
}

/* In Light Theme, completely disable the HUD progress tooltip */
body.light-theme .orbital-hud-tooltip {
    display: none !important;
}

@media (max-width: 640px) {
    .circles-showcase-container {
        transform: scale(0.75);
        margin: 10px auto;
    }
}



body.light-theme .circles-path {
    stroke: rgba(109, 61, 245, 0.34) !important;
}

body.light-theme .orbital-item {
    background: #FFFFFF !important;
    border: 1.5px solid #EDE9FE !important;
    box-shadow: 0 4px 12px rgba(109, 61, 245, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    color: #111827 !important;
}

body.light-theme .orbital-item:hover {
    background: #FAF9FF !important;
    border-color: #6D3DF5 !important;
    box-shadow: 0 0 20px rgba(109, 61, 245, 0.25), 0 4px 16px rgba(109, 61, 245, 0.12) !important;
    scale: 1.12;
}

body.light-theme .circles-topic-tooltip {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(109, 61, 245, 0.25);
    color: #111827;
    box-shadow: 0 6px 20px rgba(109, 61, 245, 0.12), 0 0 10px rgba(109, 61, 245, 0.15);
}

/* ============================================================
   FULL-YEAR STREAK CALENDAR SECTION (MONTH-WISE SEPARATED)
   ============================================================ */
.yearly-streak-section {
    max-width: 1280px;
    margin: 32px auto;
    padding: 0 24px;
}

.streak-card {
    background: var(--surface-card);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-lg, 16px);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 15px rgba(239, 68, 68, 0.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.light-theme .streak-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(109, 61, 245, 0.18);
    box-shadow: 0 6px 24px rgba(109, 61, 245, 0.06), 0 0 14px rgba(109, 61, 245, 0.04);
}

.streak-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.streak-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.streak-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.streak-fire-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

.streak-year-badge {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.20), rgba(244, 63, 94, 0.20));
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.streak-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.streak-stat-pill {
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.streak-pill-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.streak-pill-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-purple);
}

/* Streak Calendar Wrapper - Horizontal Scroll Container */
.streak-calendar-wrapper {
    margin-bottom: 20px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(239, 68, 68, 0.35) transparent;
}

.streak-calendar-wrapper::-webkit-scrollbar {
    height: 6px;
}

.streak-calendar-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.streak-calendar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(239, 68, 68, 0.30);
    border-radius: 4px;
}

.streak-calendar-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(244, 63, 94, 0.50);
}

.streak-calendar-grid {
    width: 100%;
    min-width: max-content;
}

/* Single Horizontal Row for all 12 Months */
.streak-months-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px 10px 4px;
    min-width: max-content;
}

/* Month Block inside single row */
.month-block {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    padding-right: 12px;
}

.month-block-divider {
    border-right: 1px solid rgba(239, 68, 68, 0.12);
}

body.light-theme .month-block-divider {
    border-right-color: #EDE9FE;
}

.month-block-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-align: center;
}

.month-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 12px);
    gap: 3px;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.month-cells-grid {
    display: grid;
    grid-template-columns: repeat(7, 12px);
    gap: 3px;
}

/* Compact Contribution Cell */
.month-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.month-cell:hover {
    transform: scale(1.08);
    z-index: 5;
    box-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
}

.month-cell.empty-placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* Activity Levels — 3 Green Intensity Levels */
.month-cell.level-0 {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.month-cell.level-1 {
    background: #DCFCE7;
    border: 1px solid #BBF7D0;
}

.month-cell.level-2 {
    background: #4ADE80;
    border: 1px solid #22C55E;
}

.month-cell.level-3 {
    background: #16A34A;
    border: 1px solid #15803D;
    box-shadow: 0 0 4px rgba(22, 163, 74, 0.35);
}

/* Light Theme Variables */
body.light-theme .month-cell.level-0 {
    background: #FAF9FF;
    border: 1px solid #EDE9FE;
}

body.light-theme .month-cell.level-1 {
    background: #DCFCE7;
    border: 1px solid #BBF7D0;
}

body.light-theme .month-cell.level-2 {
    background: #4ADE80;
    border: 1px solid #22C55E;
}

body.light-theme .month-cell.level-3 {
    background: #16A34A;
    border: 1px solid #15803D;
    box-shadow: 0 0 4px rgba(22, 163, 74, 0.25);
}

/* Today Outline */
.month-cell.is-today {
    box-shadow: 0 0 0 2px var(--accent-purple) !important;
    position: relative;
    z-index: 2;
}

/* Footer Legend */
.streak-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.streak-legend {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-box {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-box.level-0 { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.legend-box.level-1 { background: #DCFCE7; border: 1px solid #BBF7D0; }
.legend-box.level-2 { background: #4ADE80; border: 1px solid #22C55E; }
.legend-box.level-3 { background: #16A34A; border: 1px solid #15803D; }

body.light-theme .legend-box.level-0 { background: #FAF9FF; border: 1px solid #EDE9FE; }
body.light-theme .legend-box.level-1 { background: #DCFCE7; border: 1px solid #BBF7D0; }
body.light-theme .legend-box.level-2 { background: #4ADE80; border: 1px solid #22C55E; }
body.light-theme .legend-box.level-3 { background: #16A34A; border: 1px solid #15803D; }

.streak-today-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.today-box-sample {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--surface-input);
    border: 2px solid var(--accent-purple);
}

/* Floating Tooltip Disabled */
.streak-tooltip,
#streak-global-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}



/* ============================================================
   SESSION ADDITIONS — Dark Theme Navy, Light Theme Green,
   Orbital White, Center Hover Reveal Panels
   ============================================================ */

/* ── DARK THEME: Pure black (#000000) ── */
html, body {
    background-color: #000000;
    background-image: none;
    background-attachment: fixed;
}

body:not(.light-theme) {
    background-color: #000000 !important;
    background-image: none !important;
    background-size: 100% 100% !important;
    background-attachment: fixed !important;
}

html:has(body:not(.light-theme)) {
    background-color: #000000 !important;
    background-image: none !important;
}

/* ── DARK THEME: #cosmic-bg hosts background canvas layers ── */
#cosmic-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

body.light-theme #cosmic-bg { display: none !important; }



/* ── LIGHT THEME: suppress dark-mode background decorations ── */

/* ── LIGHT THEME: Complete Lavender & Purple Override System ──────────── */
body.light-theme .navbar {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(109, 61, 245, 0.12);
    box-shadow: 0 8px 30px rgba(109, 61, 245, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
body.light-theme .brand-logo .logo-icon {
    color: #7C3AED;
}
body.light-theme .nav-tabs {
    background: #F5F3FF;
    border: 1px solid #EDE9FE;
}
body.light-theme .nav-tab {
    color: #475569;
}
body.light-theme .nav-tab:hover {
    color: #111827;
    background: #EDE9FE;
}
body.light-theme .nav-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #6D3DF5, #5B21E6);
    border: 1px solid rgba(109, 61, 245, 0.5);
    box-shadow: 0 4px 18px rgba(109, 61, 245, 0.30);
}
body.light-theme .nav-tab.active::after {
    background-color: #6D3DF5;
    box-shadow: 0 0 8px #6D3DF5;
}
body.light-theme ::-webkit-scrollbar-thumb { background: rgba(109, 61, 245, 0.35); border-radius: 4px; }
body.light-theme ::-webkit-scrollbar-thumb:hover { background: rgba(109, 61, 245, 0.65); }
body.light-theme .stat-pill-number { color: #6D3DF5; }
body.light-theme .summary-badge.active-now { background: rgba(109, 61, 245, 0.12); color: #6D3DF5; border-color: rgba(109, 61, 245, 0.25); }
body.light-theme .summary-badge.upcoming { background: rgba(124, 58, 237, 0.10); color: #7C3AED; border-color: rgba(124, 58, 237, 0.2); }
body.light-theme .potd-badge { background: rgba(109, 61, 245, 0.12); color: #6D3DF5; border-color: rgba(109, 61, 245, 0.25); }
body.light-theme .btn-potd-primary {
    background: linear-gradient(135deg, #7C3AED, #5B21E6);
    box-shadow: 0 4px 18px rgba(109, 61, 245, 0.30);
}
body.light-theme .btn-potd-primary:hover {
    background: linear-gradient(135deg, #6D3DF5, #4C1D95);
    box-shadow: 0 6px 24px rgba(109, 61, 245, 0.40);
}
body.light-theme .contest-plat-pill.active {
    background: rgba(109, 61, 245, 0.15);
    color: #6D3DF5;
    border-color: rgba(109, 61, 245, 0.4);
}
body.light-theme .view-toggle-btn.active {
    background: rgba(109, 61, 245, 0.15);
    color: #6D3DF5;
    border-color: rgba(109, 61, 245, 0.3);
}
body.light-theme .upcoming-dropdown-item:hover {
    background: #F5F3FF;
    color: #6D3DF5;
}
body.light-theme .contest-card { border-color: rgba(109, 61, 245, 0.15); }
body.light-theme .contest-card:hover { border-color: rgba(109, 61, 245, 0.35); box-shadow: 0 6px 24px rgba(109, 61, 245, 0.10); }
body.light-theme .dsa-sheet-link, body.light-theme .topic-link { color: #6D3DF5; }
body.light-theme .dsa-sheet-link:hover, body.light-theme .topic-link:hover { color: #5B21E6; }

/* ── LIGHT THEME: Soft Lavender Futuristic Atmospheric Background Environment ── */
#light-theme-atmosphere {
    display: none !important;
}

body.light-theme #light-theme-atmosphere {
    display: block !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* 1. Large Soft Atmospheric Blobs with Heavy Blur */
.lt-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: multiply;
    will-change: transform, opacity;
}

/* Central Orbit Ambient Bloom — Soft gentle lavender halo behind orbital structure */
.lt-blob-orbit {
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 780px;
    height: 560px;
    background: radial-gradient(ellipse at center, rgba(196, 181, 253, 0.38) 0%, rgba(221, 214, 254, 0.20) 45%, transparent 75%);
    filter: blur(80px);
    animation: ltBlobOrbitBreath 24s ease-in-out infinite alternate;
}

/* Upper-Left Blob */
.lt-blob-tl {
    top: -100px;
    left: -120px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle at center, rgba(196, 181, 253, 0.32) 0%, rgba(221, 214, 254, 0.16) 50%, transparent 75%);
    filter: blur(85px);
    animation: ltBlobDriftA 32s ease-in-out infinite alternate;
}

/* Mid-Left Blob */
.lt-blob-ml {
    top: 42%;
    left: -150px;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle at center, rgba(233, 213, 255, 0.30) 0%, rgba(243, 232, 255, 0.14) 50%, transparent 75%);
    filter: blur(90px);
    animation: ltBlobDriftB 36s ease-in-out infinite alternate;
}

/* Upper-Right Blob */
.lt-blob-tr {
    top: -80px;
    right: -120px;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle at center, rgba(167, 139, 250, 0.25) 0%, rgba(221, 214, 254, 0.15) 45%, transparent 75%);
    filter: blur(90px);
    animation: ltBlobDriftB 30s ease-in-out infinite alternate;
}

/* Mid-Right Blob */
.lt-blob-mr {
    top: 46%;
    right: -140px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at center, rgba(196, 181, 253, 0.28) 0%, rgba(221, 214, 254, 0.14) 45%, transparent 75%);
    filter: blur(85px);
    animation: ltBlobDriftA 34s ease-in-out infinite alternate;
}

/* Lower-Left Blob */
.lt-blob-bl {
    bottom: -120px;
    left: -100px;
    width: 760px;
    height: 720px;
    background: radial-gradient(circle at center, rgba(221, 214, 254, 0.32) 0%, rgba(237, 233, 254, 0.16) 50%, transparent 75%);
    filter: blur(95px);
    animation: ltBlobDriftB 38s ease-in-out infinite alternate;
}

/* Lower-Right Blob */
.lt-blob-br {
    bottom: -120px;
    right: -100px;
    width: 740px;
    height: 700px;
    background: radial-gradient(circle at center, rgba(196, 181, 253, 0.26) 0%, rgba(221, 214, 254, 0.14) 50%, transparent 75%);
    filter: blur(90px);
    animation: ltBlobDriftA 28s ease-in-out infinite alternate;
}

/* 2. Flowing Wave & Contour Patterns */
.lt-waves {
    position: absolute;
    pointer-events: none;
    opacity: 0.70;
    will-change: transform;
}

.lt-waves-bl {
    bottom: -20px;
    left: -20px;
    width: 580px;
    height: 420px;
    animation: ltWavesSway 28s ease-in-out infinite alternate;
}

.lt-waves-br {
    bottom: -20px;
    right: -20px;
    width: 580px;
    height: 420px;
    animation: ltWavesSway 32s ease-in-out infinite alternate-reverse;
}

/* 3. Subtle Faint Peripheral Micro-Dot Lattice */
.lt-dot-lattice {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(124, 58, 237, 0.055) 1px, transparent 1px);
    background-size: 36px 36px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse 95% 85% at 50% 50%, transparent 40%, black 85%);
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 50%, transparent 40%, black 85%);
    opacity: 0.75;
}

/* 4. Delicate Floating Light Particles */
.lt-particles-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lt-dot-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.75) 0%, rgba(196, 181, 253, 0.35) 60%, transparent 100%);
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.30);
    pointer-events: none;
    will-change: transform, opacity;
}

.lt-dot-particle.p1 { width: 3px; height: 3px; top: 16%; left: 12%; animation: ltParticleFloat 24s ease-in-out infinite; }
.lt-dot-particle.p2 { width: 4px; height: 4px; top: 25%; left: 86%; animation: ltParticleFloat 29s ease-in-out infinite 3s; }
.lt-dot-particle.p3 { width: 2.5px; height: 2.5px; top: 44%; left: 18%; animation: ltParticleFloat 21s ease-in-out infinite 1s; }
.lt-dot-particle.p4 { width: 3px; height: 3px; top: 58%; left: 82%; animation: ltParticleFloat 27s ease-in-out infinite 5s; }
.lt-dot-particle.p5 { width: 3.5px; height: 3.5px; top: 72%; left: 14%; animation: ltParticleFloat 33s ease-in-out infinite 2s; }
.lt-dot-particle.p6 { width: 2.5px; height: 2.5px; top: 82%; left: 88%; animation: ltParticleFloat 26s ease-in-out infinite 4s; }
.lt-dot-particle.p7 { width: 3px; height: 3px; top: 32%; left: 48%; animation: ltParticleFloat 22s ease-in-out infinite 6s; }
.lt-dot-particle.p8 { width: 2.5px; height: 2.5px; top: 90%; left: 42%; animation: ltParticleFloat 28s ease-in-out infinite 7s; }

/* Slow & Calm Background Animations */
@keyframes ltBlobOrbitBreath {
    0% { transform: translateX(-50%) scale(1); opacity: 0.85; }
    50% { transform: translateX(-50%) scale(1.06); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.95); opacity: 0.82; }
}

@keyframes ltBlobDriftA {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(25px, 18px) scale(1.04); }
    100% { transform: translate(-18px, 28px) scale(0.96); }
}

@keyframes ltBlobDriftB {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-28px, 20px) scale(1.05); }
    100% { transform: translate(20px, -16px) scale(0.95); }
}

@keyframes ltWavesSway {
    0% { transform: translateY(0) scale(1); opacity: 0.65; }
    50% { transform: translateY(-10px) scale(1.02); opacity: 0.80; }
    100% { transform: translateY(6px) scale(0.98); opacity: 0.60; }
}

@keyframes ltParticleFloat {
    0%   { transform: translateY(0px) translateX(0px); opacity: 0.30; }
    30%  { transform: translateY(-16px) translateX(10px); opacity: 0.70; }
    60%  { transform: translateY(-28px) translateX(-8px); opacity: 0.40; }
    80%  { transform: translateY(-14px) translateX(6px); opacity: 0.60; }
    100% { transform: translateY(0px) translateX(0px); opacity: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-blob,
    .lt-waves,
    .lt-dot-particle {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .lt-blob-orbit { width: 92vw; height: 320px; filter: blur(55px); }
    .lt-blob { filter: blur(60px); opacity: 0.60; }
    .lt-waves { opacity: 0.45; width: 340px; height: 260px; }
}

/* Ensure html root is white/lavender in light mode — prevents dark base bleed-through */
html:has(body.light-theme),
html.light-theme {
    background-color: #FAF9FF !important;
    background-image: none !important;
}

/* ── LIGHT THEME: Footer ──────────────────────────────────────── */
body.light-theme footer, body.light-theme .footer {
    background: #FAF9FF !important;
    border-top: 1px solid rgba(109, 61, 245, 0.15) !important;
    color: #475569 !important;
}

/* ── LIGHT THEME: Orbital circles — WHITE backgrounds with lavender border ─── */
body.light-theme .orbital-item {
    background: #FFFFFF !important;
    border: 1.5px solid #EDE9FE !important;
    box-shadow:
        0 4px 12px rgba(109, 61, 245, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #111827 !important;
}
body.light-theme .orbital-item svg {
    stroke: #111827 !important;
    fill: none;
    opacity: 1;
}
body.light-theme .orbital-item svg text {
    fill: #111827 !important;
}
body.light-theme .orbital-item:hover {
    background: #FAF9FF !important;
    border-color: #6D3DF5 !important;
    box-shadow:
        0 0 20px rgba(109, 61, 245, 0.25),
        0 4px 16px rgba(109, 61, 245, 0.12) !important;
    scale: 1.12;
}

/* ── LIGHT THEME: Dark-variant orbital items ── */
body.light-theme .orbital-item--dark {
    background: #1e1b4b !important;
    border: 1.5px solid #312e81 !important;
    box-shadow:
        0 3px 12px rgba(109, 61, 245, 0.15),
        0 1px 4px rgba(0, 0, 0, 0.10) !important;
    color: #ffffff !important;
}
body.light-theme .orbital-item--dark svg {
    stroke: #ffffff !important;
    fill: none;
}
body.light-theme .orbital-item--dark svg text {
    fill: #ffffff !important;
}
body.light-theme .orbital-item--dark:hover {
    background: #312e81 !important;
    border-color: #6D3DF5 !important;
    box-shadow:
        0 6px 20px rgba(109, 61, 245, 0.30),
        0 2px 8px rgba(109, 61, 245, 0.18) !important;
    scale: 1.12;
}

/* ── LIGHT THEME: Orbit ring dashes ──────────────────────── */
body.light-theme .circles-path {
    stroke: rgba(109, 61, 245, 0.34) !important;
}

/* ── LIGHT THEME: Center core — clean white/lavender circle, stays circular on hover ─ */
body.light-theme .circles-center-core {
    background: #FFFFFF !important;
    border: 2px solid #EDE9FE !important;
    box-shadow:
        0 4px 20px rgba(109, 61, 245, 0.08),
        0 0 0 4px rgba(109, 61, 245, 0.04) !important;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease !important;
    overflow: hidden !important;
    z-index: 20;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Hover: subtle lavender/purple glow, purple border, subtle violet aura */
body.light-theme .circles-center-core:hover {
    border-color: rgba(109, 61, 245, 0.6) !important;
    box-shadow:
        0 6px 28px rgba(109, 61, 245, 0.22),
        0 0 0 6px rgba(109, 61, 245, 0.08) !important;
}

/* Center icon group — always visible */
body.light-theme .circles-core-icon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 1px;
    min-width: 72px;
}
body.light-theme .circles-core-logo { color: #6D3DF5 !important; font-size: 1.25rem; line-height: 1; }
body.light-theme .circles-core-text { color: #475569 !important; font-size: 0.58rem; letter-spacing: 0.8px; font-weight: 700; }

/* Ticker sides — live inside .circles-center-core, hidden by default */
body.light-theme .orbit-hover-left,
body.light-theme .orbit-hover-right {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: none;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-family: 'Inter', 'Outfit', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #374151;
    opacity: 0;
    pointer-events: none;
    flex: 1;
    transition: opacity 0.25s ease 0.2s;
}
body.light-theme .orbit-hover-left { justify-content: flex-end; padding-right: 12px; }
body.light-theme .orbit-hover-right { justify-content: flex-start; padding-left: 12px; }

/* Orbit hover panels permanently hidden — removed per design */

body.light-theme .ohv-word { color: #374151; letter-spacing: 2px; }
body.light-theme .ohv-dot { color: #9ca3af; font-weight: 400; letter-spacing: 0; }
body.light-theme .ohv-highlight { color: #6D3DF5 !important; font-weight: 800; }
body:not(.light-theme) .orbit-hover-left,
body:not(.light-theme) .orbit-hover-right { display: none !important; }

/* ── Hide keyboard info panel below 3D keyboard (dark theme) ── */
#keyboard-3d-info,
.keyboard-3d-info {
    display: none !important;
}

/* ============================================================
   DSA LEARNING MODE SELECTOR
   Placed between the hero banner and stats grid in view-mastery.
   Uses existing design tokens — no new design language introduced.
   ============================================================ */

.dsa-mode-selector-section {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
    transition: var(--transition-fast);
}

/* Header row: label + hint */
.dsa-mode-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.dsa-mode-selector-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-violet);
}

.dsa-mode-selector-label svg {
    color: var(--secondary-violet);
    flex-shrink: 0;
}

.dsa-mode-selector-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Two-card grid */
.dsa-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Individual mode card (styled as button) */
.dsa-mode-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: var(--surface-input);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
    color: var(--text-primary);
    font-family: var(--font-family);
    overflow: hidden;
}

.dsa-mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(244, 63, 94, 0.03));
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.dsa-mode-card:hover {
    border-color: var(--border-highlight);
    background: var(--surface-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.dsa-mode-card:hover::before {
    opacity: 1;
}

/* ── Active / selected state ── */
.dsa-mode-card.active {
    border-color: var(--primary-purple);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(244, 63, 94, 0.08));
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.25),
        0 4px 20px rgba(239, 68, 68, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.dsa-mode-card.active::before {
    opacity: 1;
}

.dsa-mode-card.active:hover {
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.35),
        0 6px 24px rgba(239, 68, 68, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Inner layout: badges + title + desc */
.dsa-mode-card-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.dsa-mode-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Difficulty micro-badges */
.dsa-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.dsa-mode-badge--easy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--diff-easy);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dsa-mode-badge--medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--diff-medium);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.dsa-mode-badge--hard {
    background: rgba(239, 68, 68, 0.15);
    color: var(--diff-hard);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.dsa-mode-arrow {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
    line-height: 1;
}

.dsa-mode-card-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.dsa-mode-card-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    font-weight: 500;
}

/* Active state typography boost */
.dsa-mode-card.active .dsa-mode-card-title {
    color: var(--text-violet);
}

.dsa-mode-card.active .dsa-mode-arrow {
    color: var(--accent-violet);
}

/* Checkmark shown only when active */
.dsa-mode-card-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: transparent;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.dsa-mode-card.active .dsa-mode-card-check {
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    border-color: var(--secondary-violet);
    color: #ffffff;
    box-shadow: 0 0 10px var(--purple-glow);
}

/* ── Light theme overrides ── */
body.light-theme .dsa-mode-selector-section {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-theme .dsa-mode-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-theme .dsa-mode-card:hover {
    background: #f0fdf4;
    border-color: #cbd5e1;
}

body.light-theme .dsa-mode-card.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.07), rgba(139, 92, 246, 0.04));
    border-color: var(--primary-purple);
    box-shadow:
        0 0 0 1px rgba(124, 58, 237, 0.2),
        0 4px 16px rgba(124, 58, 237, 0.12);
}

/* ── Mobile: stack cards vertically ── */
@media (max-width: 600px) {
    .dsa-mode-cards {
        grid-template-columns: 1fr;
    }

    .dsa-mode-card {
        padding: 16px 18px;
    }

    .dsa-mode-selector-section {
        padding: 16px 18px;
    }
}


/* ============================================================
   GLOBAL CARD 3-D LIFT EFFECT
   Applied only on true pointer devices (not touch).
   Integrates with all existing hover states — only adds
   box-shadow depth and smooths the transform transition.
   Normal (non-hover) appearance is completely unchanged.
   ============================================================ */

/* -- Base transition layer ---------------------------------- */
/* Add smooth transition to transform+shadow on every card    */
/* Only under hover-capable devices so mobile is unaffected   */
@media (hover: hover) and (pointer: fine) {

    /* Shared transition mixin for all card types */
    .stat-card,
    .summary-card,
    .contest-card,
    .topic-card,
    .problem-card,
    .streak-card,
    .dsa-mode-card,
    .potd-container-card {
        transition:
            transform var(--transition-fast),
            box-shadow var(--transition-fast),
            border-color var(--transition-fast),
            background var(--transition-fast);
    }

    /* -- Elevation on hover --------------------------------- */
    /* Cards that had NO existing box-shadow on hover get one  */

    .stat-card:hover {
        transform: translateY(-3px) scale(1.005);
        box-shadow: var(--card-lift-shadow);
    }

    .summary-card:hover {
        transform: translateY(-3px) scale(1.005);
        box-shadow: var(--card-lift-shadow);
    }

    .streak-card:hover {
        transform: translateY(-3px) scale(1.005);
        box-shadow: var(--card-lift-shadow);
    }

    .potd-container-card:hover {
        transform: translateY(-3px) scale(1.005);
        box-shadow: var(--card-lift-shadow);
    }

    .topic-card:hover {
        transform: translateY(-3px) scale(1.005);
        box-shadow: var(--card-lift-shadow);
    }

    /* Cards that already had box-shadow / transform on hover — */
    /* just upgrade to the richer lift shadow                   */

    .contest-card:hover {
        transform: translateY(-3px) scale(1.005);
        /* existing border-color + purple-glow shadow preserved, */
        /* we layer the lift shadow on top                       */
        box-shadow:
            var(--card-lift-shadow),
            0 0 0 1px var(--accent-violet);
    }

    .problem-card:hover {
        transform: translateY(-3px) scale(1.005);
        box-shadow:
            var(--card-lift-shadow),
            0 0 0 1px var(--border-highlight);
    }

    .dsa-mode-card:hover {
        transform: translateY(-3px) scale(1.005);
        box-shadow:
            var(--card-lift-shadow),
            0 0 0 1px var(--border-highlight);
    }

    /* Light-theme refinement — keep contest-card shadow clean  */
    body.light-theme .contest-card:hover {
        box-shadow:
            var(--card-lift-shadow),
            0 0 0 1px rgba(34, 197, 94, 0.35);
    }

    body.light-theme .problem-card:hover {
        box-shadow: var(--card-lift-shadow);
    }

    body.light-theme .dsa-mode-card:hover {
        box-shadow: var(--card-lift-shadow);
    }
}

/* -- Reduced-motion: disable transform, keep shadow fade ---- */
@media (prefers-reduced-motion: reduce) {
    .stat-card:hover,
    .summary-card:hover,
    .contest-card:hover,
    .topic-card:hover,
    .problem-card:hover,
    .streak-card:hover,
    .dsa-sheet-promo-card:hover,
    .dsa-mode-card:hover,
    .potd-container-card:hover {
        transform: none;
    }
}

/* ============================================================
   RAM'S DSA SHEET PROMO BANNER SECTION
   ============================================================ */
.dsa-sheet-promo-section {
    max-width: 1280px;
    margin: 0 auto 32px auto;
    padding: 0 24px;
}

.dsa-sheet-promo-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 36px 44px;
    border-radius: 24px;
    background: rgba(8, 8, 14, 0.78);
    border: 1px solid var(--border-purple);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(239, 68, 68, 0.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

.dsa-sheet-promo-card:hover {
    border-color: var(--accent-violet);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 32px rgba(239, 68, 68, 0.25);
    transform: translateY(-2px);
}

body.light-theme .dsa-sheet-promo-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05), 0 0 14px rgba(34, 197, 94, 0.06);
}

.dsa-promo-left {
    flex: 1.2;
    min-width: 260px;
}

.dsa-promo-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-violet);
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.dsa-promo-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

body.light-theme .dsa-promo-title {
    color: #1e1b4b;
}

.dsa-promo-subtitle {
    font-size: 0.92rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

body.light-theme .dsa-promo-subtitle {
    color: #64748b;
}

.dsa-promo-center {
    flex: 1.2;
    min-width: 240px;
    padding: 0 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme .dsa-promo-center {
    border-left-color: rgba(0, 0, 0, 0.08);
}

.dsa-promo-quote {
    font-style: italic;
    font-size: 0.98rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
    quotes: none;
}

body.light-theme .dsa-promo-quote {
    color: #64748b;
}

.dsa-promo-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 200px;
    text-align: right;
}

.dsa-promo-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 12px;
}

.dsa-promo-number {
    font-size: 2.00rem;
    font-weight: 1000;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.03em;
}

body.light-theme .dsa-promo-number {
    color: #1e1b4b;
}

.dsa-promo-label {
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

body.light-theme .dsa-promo-label {
    color: #1e1b4b;
}

.dsa-promo-sublabel {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
}

body.light-theme .dsa-promo-sublabel {
    color: #64748b;
}

.btn-start-journey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-violet) 100%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.45);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-start-journey:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.65);
}

.btn-start-journey:active {
    transform: translateY(0);
}

@media (max-width: 900px) {
    .dsa-sheet-promo-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 20px;
    }
    .dsa-promo-center {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 16px 0 0 0;
        width: 100%;
    }
    .dsa-promo-right {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
    .dsa-promo-stat {
        align-items: flex-start;
    }
    .btn-start-journey {
        width: 100%;
    }
}

/* ============================================================
   🔥 TODAY'S DAILY DSA MISSION COMPONENT
   ============================================================ */
.daily-mission-section {
    margin: 20px 0;
    width: 100%;
}

.daily-mission-card {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(239, 68, 68, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: var(--transition-smooth);
}

.daily-mission-card:hover {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 32px rgba(239, 68, 68, 0.15);
}

body.light-theme .daily-mission-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(124, 58, 237, 0.22);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08);
}

.daily-mission-accent-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f59e0b, #ef4444, #f43f5e);
    transition: var(--transition-fast);
}

.daily-mission-card.mission-all-done .daily-mission-accent-line {
    background: #10b981;
}

.daily-mission-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.daily-mission-info {
    flex: 1;
    min-width: 250px;
}

.daily-mission-tag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.daily-mission-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(239, 68, 68, 0.18));
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

.daily-mission-date-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.daily-mission-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.daily-mission-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin: 0;
}

.daily-mission-stats-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.daily-mission-fraction-box {
    display: flex;
    align-items: baseline;
    font-feature-settings: "tnum";
}

.mission-fraction-num {
    font-size: 1.85rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

body.light-theme .mission-fraction-num {
    color: #111827;
}

.mission-fraction-denom {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-left: 4px;
}

.daily-mission-pct-badge {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-violet);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 4px 10px;
    border-radius: 999px;
}

.daily-mission-chips-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.mission-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--transition-fast);
    overflow: hidden;
}

.mission-chip.chip-easy {
    border-color: rgba(16, 185, 129, 0.25);
}

.mission-chip.chip-easy.completed {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.5);
}

.mission-chip.chip-medium {
    border-color: rgba(245, 158, 11, 0.25);
}

.mission-chip.chip-medium.completed {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
}

.mission-chip.chip-hard {
    border-color: rgba(239, 68, 68, 0.25);
}

.mission-chip.chip-hard.completed {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
}

.chip-status-icon {
    font-weight: 900;
    color: var(--text-muted);
}

.mission-chip.completed .chip-status-icon {
    color: #10b981;
}

.chip-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.daily-mission-progress-bar-wrap {
    width: 100%;
    margin-bottom: 18px;
}

.daily-mission-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

body.light-theme .daily-mission-progress-track {
    background: #EDE9FE;
}

.daily-mission-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #f43f5e);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-all-done .daily-mission-progress-fill {
    background: linear-gradient(90deg, #10b981, #059669);
}

.daily-mission-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mission-celebration-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    font-size: 0.85rem;
}

.mission-remaining-text {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-muted);
}

.btn-start-mission {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.btn-start-mission:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.daily-mission-problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    animation: slideDown 0.3s ease forwards;
}

body.light-theme .daily-mission-problems-grid {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.mission-problem-card {
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: var(--transition-fast);
    position: relative;
}

.mission-problem-card.completed {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.05);
}

.mission-problem-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.mission-problem-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.mission-problem-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mission-diff-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mission-diff-tag.diff-easy { color: var(--diff-easy); }
.mission-diff-tag.diff-medium { color: var(--diff-medium); }
.mission-diff-tag.diff-hard { color: var(--diff-hard); }

.mission-topic-tag {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.mission-problem-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.35;
}

.mission-problem-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.btn-mission-toggle {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-mission-toggle.btn-done {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.btn-mission-solve {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-violet));
    color: #ffffff;
    text-decoration: none;
    transition: var(--transition-fast);
}

.btn-mission-solve:hover {
    opacity: 0.9;
}

@media (max-width: 900px) {
    .daily-mission-chips-row,
    .daily-mission-problems-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DSA MIND-MAP ROADMAP — DUAL-WING TREE DESIGN SYSTEM
   ============================================================ */

/* --- Roadmap Hero & Controls --- */
.roadmap-hero-panel {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow: var(--card-lift-shadow);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.roadmap-hero-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc, #f43f5e, #f59e0b, #10b981);
}

.roadmap-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.roadmap-title-group {
    flex: 1;
    min-width: 280px;
}

.roadmap-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--secondary-violet);
    margin-bottom: 8px;
}

.roadmap-page-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.2;
}

.roadmap-page-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 720px;
}

.roadmap-hero-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.roadmap-stat-pill {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    font-size: 0.85rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.roadmap-action-btn {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.roadmap-action-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--border-highlight);
    color: #ffffff;
    transform: translateY(-1px);
}

.roadmap-controls-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.roadmap-search-wrap {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: center;
}

.roadmap-search-icon {
    position: absolute;
    left: 14px;
    font-size: 0.9rem;
    opacity: 0.6;
    pointer-events: none;
}

.roadmap-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition-fast);
}

.roadmap-search-input:focus {
    border-color: var(--secondary-violet);
    box-shadow: 0 0 12px var(--purple-glow);
}

.roadmap-filters-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.roadmap-filter-pills {
    display: flex;
    background: var(--surface-input);
    padding: 3px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
}

/* ============================================================
   DSA CONCEPT LEARNING ROADMAP — TRUE MIND-MAP DESIGN SYSTEM
   ============================================================ */

.roadmap-hero-panel {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 22px 26px;
    margin-bottom: 24px;
    box-shadow: var(--card-lift-shadow);
}

.roadmap-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.roadmap-title-group {
    flex: 1;
    min-width: 280px;
}

.roadmap-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--secondary-violet);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.roadmap-page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.roadmap-page-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 680px;
}

.roadmap-hero-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.roadmap-stat-pill {
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.roadmap-action-btn {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.roadmap-action-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--border-highlight);
    color: #ffffff;
    transform: translateY(-1px);
}

.roadmap-controls-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.roadmap-search-wrap {
    flex: 1;
    min-width: 260px;
    position: relative;
    display: flex;
    align-items: center;
}

.roadmap-search-icon {
    position: absolute;
    left: 14px;
    font-size: 0.9rem;
    opacity: 0.6;
    pointer-events: none;
}

.roadmap-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition-fast);
}

.roadmap-search-input:focus {
    border-color: var(--secondary-violet);
    box-shadow: 0 0 12px var(--purple-glow);
}

.roadmap-filters-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.roadmap-filter-pills {
    display: flex;
    background: var(--surface-input);
    padding: 3px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    gap: 2px;
}

.roadmap-filter-pill {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.roadmap-filter-pill.active {
    background: var(--primary-purple);
    color: #ffffff;
    box-shadow: 0 2px 8px var(--purple-glow);
}

/* ============================================================
   TOPIC EXPLORER — INTERACTIVE FLOATING TRIGGER & EXPANDABLE PANELS
   ============================================================ */

.roadmap-explorer-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0 20px 0;
    position: relative;
    z-index: 50;
}

.roadmap-explorer-dropdown-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.roadmap-explorer-circle-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.4), rgba(15, 12, 28, 0.95) 80%);
    border: 2px solid rgba(168, 85, 247, 0.6);
    color: #ffffff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
    user-select: none;
}

.roadmap-explorer-circle-btn:hover,
.roadmap-explorer-circle-btn.active {
    transform: scale(1.12);
    border-color: #ec4899;
    box-shadow: 0 0 28px rgba(236, 72, 153, 0.55), 0 8px 24px rgba(0, 0, 0, 0.6);
}

.explorer-btn-core {
    position: relative;
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}

.explorer-btn-pulse {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    animation: explorerPulse 2.4s infinite ease-out;
    pointer-events: none;
}

@keyframes explorerPulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.22); opacity: 0.1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.roadmap-explorer-btn-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.roadmap-explorer-dropdown-wrap:hover .roadmap-explorer-btn-label {
    color: var(--secondary-violet);
}

/* Floating Futuristic Dropdown Menu */
.roadmap-explorer-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.95);
    min-width: 260px;
    background: rgba(12, 10, 22, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(139, 92, 246, 0.25);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.roadmap-explorer-dropdown-wrap:hover .roadmap-explorer-menu,
.roadmap-explorer-dropdown-wrap.open .roadmap-explorer-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.explorer-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.explorer-menu-item:hover,
.explorer-menu-item.active {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateX(3px);
}

.menu-item-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.menu-item-text {
    display: flex;
    flex-direction: column;
}

.menu-item-title {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.menu-item-desc {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================
   TOPIC EXPLORER EXPANDABLE INFORMATION PANEL
   ============================================================ */

.roadmap-explorer-panel-container {
    width: 100%;
    margin-bottom: 28px;
    background: radial-gradient(circle at 50% 0%, rgba(28, 20, 52, 0.85), rgba(8, 6, 16, 0.95) 85%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 24px;
    padding: 26px 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(139, 92, 246, 0.16);
    position: relative;
    z-index: 20;
    animation: panelSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes panelSlideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel Header Row */
.explorer-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}

.explorer-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.explorer-category-badge-icon {
    font-size: 2rem;
    line-height: 1;
}

.explorer-panel-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0 0 3px 0;
}

.explorer-panel-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
}

/* Header Switcher Tabs */
.explorer-header-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.explorer-header-tab {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}

.explorer-header-tab:hover {
    color: #ffffff;
}

.explorer-header-tab.active {
    background: var(--primary-purple);
    color: #ffffff;
    box-shadow: 0 2px 10px var(--purple-glow);
}

.explorer-close-btn {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.explorer-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ffffff;
    transform: scale(1.04);
}

/* Primary Items Grid */
.explorer-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.explorer-section-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.explorer-section-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.explorer-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.explorer-item-card {
    background: rgba(20, 16, 36, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.explorer-item-card:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(139, 92, 246, 0.18);
}

.explorer-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.explorer-card-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0;
}

.explorer-count-pill {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #c4b5fd;
    white-space: nowrap;
    flex-shrink: 0;
}

.explorer-card-badge {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--secondary-violet);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.explorer-card-desc {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.45;
    margin: 0;
}

.explorer-card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.explorer-card-tag {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

/* Secondary Extra Section */
.explorer-extra-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 22px;
    margin-top: 10px;
}

.explorer-extra-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.explorer-extra-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.explorer-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.explorer-extra-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px dashed rgba(251, 191, 36, 0.25);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--transition-fast);
}

.explorer-extra-card:hover {
    border-style: solid;
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.05);
    transform: translateY(-1px);
}

.explorer-extra-name {
    font-size: 0.86rem;
    font-weight: 800;
    color: #fef08a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.explorer-extra-badge {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    text-transform: uppercase;
}

.explorer-extra-desc {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

/* Light Theme Overrides for Explorer */
body.light-theme .roadmap-explorer-circle-btn {
    background: radial-gradient(circle at 50% 30%, #ede9fe, #ffffff 80%);
    border-color: #c4b5fd;
    color: #6d28d9;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.15);
}

body.light-theme .explorer-btn-core {
    color: #6d28d9;
    text-shadow: none;
}

body.light-theme .roadmap-explorer-menu {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

body.light-theme .explorer-menu-item {
    background: #f8fafc;
}

body.light-theme .explorer-menu-item:hover {
    background: #ede9fe;
}

body.light-theme .menu-item-title {
    color: #0f172a;
}

body.light-theme .roadmap-explorer-panel-container {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

body.light-theme .explorer-panel-title {
    color: #0f172a;
}

body.light-theme .explorer-item-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-theme .explorer-card-name {
    color: #0f172a;
}

body.light-theme .explorer-header-tabs {
    background: #F5F3FF;
    border: 1px solid #EDE9FE;
    box-shadow: inset 0 1px 2px rgba(109, 61, 245, 0.04);
}

body.light-theme .explorer-header-tab {
    color: #475569;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.light-theme .explorer-header-tab:hover,
body.light-theme .explorer-header-tab:focus,
body.light-theme .explorer-header-tab:focus-visible {
    background: #F3EEFF;
    color: #4C3A8F;
    border-color: rgba(109, 61, 245, 0.15);
}

body.light-theme .explorer-header-tab.active {
    background: linear-gradient(135deg, #6D3DF5, #5B21E6);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(109, 61, 245, 0.35);
}

body.light-theme .explorer-header-tab.active:hover,
body.light-theme .explorer-header-tab.active:focus,
body.light-theme .explorer-header-tab.active:focus-visible {
    background: linear-gradient(135deg, #5B21E6, #4C1D95);
    color: #FFFFFF;
}

body.light-theme .explorer-close-btn {
    background: #F5F3FF;
    border: 1px solid #EDE9FE;
    color: #475569;
}

body.light-theme .explorer-close-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #ef4444;
}

body.light-theme .explorer-extra-card {
    background: #fffbeb;
    border-color: rgba(245, 158, 11, 0.3);
}

body.light-theme .explorer-extra-name {
    color: #b45309;
}

/* ============================================================
   ALGORITHMS REFERENCE PANEL (CLEAN CATEGORY & NAME LIST)
   ============================================================ */

.algo-reference-container {
    width: 100%;
    margin-top: 18px;
}

.algo-reference-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.algo-cat-group {
    background: rgba(18, 14, 34, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.algo-cat-group:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.algo-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.algo-cat-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.algo-cat-title {
    font-size: 0.82rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.algo-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.algo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1.35;
    padding: 3px 6px;
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.algo-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(3px);
}

.algo-item-bullet {
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.9;
    flex-shrink: 0;
}

.algo-item-name {
    flex: 1;
}

/* Light Theme Overrides for Algorithms Reference */
body.light-theme .algo-cat-group {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

body.light-theme .algo-cat-title {
    color: #0f172a;
}

body.light-theme .algo-cat-header {
    border-bottom-color: #f1f5f9;
}

body.light-theme .algo-item {
    color: #334155;
}

body.light-theme .algo-item:hover {
    color: #0f172a;
    background: #f8fafc;
}

@media (max-width: 1100px) {
    .algo-reference-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .algo-reference-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DATA STRUCTURES CONCEPT-BASED ROADMAP (MIND-MAP TREE)
   ============================================================ */

.ds-roadmap-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ds-roadmap-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 18px;
}

.ds-roadmap-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ds-roadmap-badge-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.ds-roadmap-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0 0 2px 0;
}

.ds-roadmap-subtitle {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0;
}

.ds-roadmap-controls-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ds-roadmap-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(8, 8, 16, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.ds-tool-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ds-tool-btn:hover {
    background: rgba(168, 85, 247, 0.3);
    border-color: #a855f7;
    color: #ffffff;
    transform: scale(1.1);
}

.ds-zoom-level {
    font-size: 0.72rem;
    font-weight: 800;
    color: #c4b5fd;
    padding: 0 4px;
    min-width: 38px;
    text-align: center;
}

/* Infinite Mind-Map Viewport for Data Structures */
.ds-roadmap-viewport {
    position: relative;
    width: 100%;
    height: 720px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, rgba(22, 15, 45, 0.4) 0%, rgba(7, 5, 16, 0.75) 100%);
    border-radius: 24px;
    border: 1px solid rgba(168, 85, 247, 0.22);
    cursor: grab;
    user-select: none;
}

.ds-roadmap-viewport:active {
    cursor: grabbing;
}

.ds-roadmap-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    will-change: transform;
}

.ds-roadmap-svg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

.ds-connector-path {
    fill: none;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

/* Symmetrical Hierarchical Mind-Map Tree Layout */
.ds-roadmap-mindmap-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 30px 40px 60px 40px;
    width: 1300px;
    margin: 0 auto;
    z-index: 10;
}

/* Central Root Node (Level 1) */
.ds-mindmap-center-card {
    position: relative;
    width: 270px;
    background: radial-gradient(circle at 50% 25%, rgba(139, 92, 246, 0.35), rgba(12, 10, 24, 0.95) 85%);
    border: 2px solid #a855f7;
    border-radius: 24px;
    padding: 18px 20px;
    text-align: center;
    box-shadow: 0 0 35px rgba(168, 85, 247, 0.4), 0 10px 30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 15;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.ds-mindmap-center-card:hover {
    transform: scale(1.04);
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.6), 0 14px 40px rgba(0, 0, 0, 0.9);
}

.ds-center-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 2px;
}

.ds-center-tag {
    font-size: 0.65rem;
    font-weight: 900;
    color: #e9d5ff;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}

.ds-center-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.05em;
    margin: 2px 0;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.8);
}

.ds-center-stats {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* Primary Tier Row (Linear on Left, Non-Linear on Right) */
.ds-primary-tier-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    max-width: 1260px;
}

/* Category Sections */
.ds-category-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 10;
}

.ds-category-section.ds-section-full {
    flex: none;
    width: 100%;
    max-width: 1260px;
}

/* Category Header Card (Level 2) */
.ds-category-card {
    background: rgba(16, 13, 30, 0.88);
    border: 1.5px solid rgba(168, 85, 247, 0.35);
    border-radius: 18px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    z-index: 12;
}

.ds-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.ds-cat-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-cat-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.ds-cat-title {
    font-size: 0.88rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0;
}

.ds-cat-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.ds-cat-toggle-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

/* Structures Grid Layouts */
.ds-structures-grid {
    display: grid;
    gap: 14px;
    width: 100%;
}

.ds-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

.ds-grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

.ds-grid-4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Individual Data Structure Node Card (Level 3) */
.ds-struct-node {
    background: rgba(20, 16, 38, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-height: 130px;
    box-sizing: border-box;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    z-index: 11;
}

.ds-struct-node:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(139, 92, 246, 0.2);
}

.ds-struct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ds-struct-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.ds-struct-count {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #c4b5fd;
    white-space: nowrap;
    flex-shrink: 0;
}

.ds-struct-desc {
    font-size: 0.72rem;
    color: var(--text-light);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Subtypes & Variations Chips (Level 4) */
.ds-subtypes-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ds-subtype-chip {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-fast);
}

.ds-subtype-chip:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.35);
    color: #ffffff;
}

.ds-subtype-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Bottom Section for Extra Data Structures */
.ds-category-section.ds-extra-section {
    padding-top: 20px;
    border-top: 1px dashed rgba(251, 191, 36, 0.25);
}

.ds-extra-category-card {
    background: rgba(28, 20, 10, 0.65);
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.12);
}

.ds-extra-category-card .ds-cat-title {
    color: #fef08a;
}

.ds-extra-category-card .ds-cat-badge {
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.ds-extra-grid {
    display: grid;
    gap: 12px;
    width: 100%;
}

.ds-extra-struct-card {
    background: rgba(16, 13, 22, 0.75);
    border: 1px dashed rgba(251, 191, 36, 0.3);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-height: 105px;
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.ds-extra-struct-card:hover {
    border-style: solid;
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(251, 191, 36, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(251, 191, 36, 0.18);
}

.ds-extra-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ds-extra-name {
    font-size: 0.84rem;
    font-weight: 800;
    color: #fef08a;
    margin: 0;
    line-height: 1.2;
}

.ds-extra-badge {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ds-extra-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Floating Tooltip */
.ds-floating-tooltip {
    position: fixed;
    z-index: 1000;
    background: rgba(12, 10, 22, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 12px;
    padding: 10px 14px;
    max-width: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ds-floating-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.ds-tooltip-title {
    font-size: 0.84rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 2px 0;
}

.ds-tooltip-count {
    font-size: 0.68rem;
    font-weight: 800;
    color: #38bdf8;
    margin: 0 0 4px 0;
}

.ds-tooltip-desc {
    font-size: 0.72rem;
    color: var(--text-light);
    line-height: 1.35;
    margin: 0;
}

/* Light Theme Overrides for Data Structures Roadmap */
body.light-theme .ds-roadmap-title {
    color: #0f172a;
}

body.light-theme .ds-roadmap-toolbar {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.light-theme .ds-zoom-level {
    color: #6d28d9;
}

body.light-theme .ds-tool-btn {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-theme .ds-tool-btn:hover {
    background: #ede9fe;
    border-color: #8b5cf6;
    color: #6d28d9;
}

body.light-theme .ds-roadmap-viewport {
    background: radial-gradient(circle at 50% 20%, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8f0;
}

body.light-theme .ds-mindmap-center-card {
    background: radial-gradient(circle at 50% 25%, #ede9fe, #ffffff 85%);
    border-color: #8b5cf6;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
}

body.light-theme .ds-center-title {
    color: #0f172a;
    text-shadow: none;
}

body.light-theme .ds-center-tag {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #c4b5fd;
}

body.light-theme .ds-category-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

body.light-theme .ds-cat-title {
    color: #0f172a;
}

body.light-theme .ds-struct-node {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

body.light-theme .ds-struct-name {
    color: #0f172a;
}

body.light-theme .ds-subtype-chip {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

body.light-theme .ds-extra-category-card {
    background: #fffbeb;
    border-color: rgba(245, 158, 11, 0.4);
}

body.light-theme .ds-extra-category-card .ds-cat-title {
    color: #b45309;
}

body.light-theme .ds-extra-struct-card {
    background: #fffbeb;
    border-color: rgba(245, 158, 11, 0.3);
}

body.light-theme .ds-extra-name {
    color: #b45309;
}

/* Responsive layout adjustments for DS Roadmap */
@media (max-width: 1200px) {
    .ds-roadmap-mindmap-layout {
        width: 100%;
        min-width: 100%;
        padding: 24px 16px;
    }

    .ds-primary-tier-row {
        flex-direction: column;
        gap: 24px;
    }

    .ds-grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }

    .ds-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ds-roadmap-viewport {
        height: 560px;
    }

    .ds-grid-2col,
    .ds-grid-3col,
    .ds-grid-4col {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MIND-MAP INTERACTIVE INFINITE CANVAS VIEWPORT
   ============================================================ */

.roadmap-canvas-section {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Toolbar - Visually hidden as requested */
.roadmap-canvas-toolbar {
    display: none !important;
}

.canvas-tool-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.canvas-tool-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.canvas-tool-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--secondary-violet);
    color: #ffffff;
    transform: scale(1.08);
}

.canvas-zoom-indicator {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 44px;
    text-align: center;
}

.canvas-hint-pill {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 10px;
    white-space: nowrap;
}

/* Viewport & Stage — Open Mind-Map Canvas */
.roadmap-viewport {
    width: 100%;
    height: 800px;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: grab;
    user-select: none;
}

.roadmap-viewport.dragging {
    cursor: grabbing;
}

.roadmap-stage {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
    transition: none;
}

.roadmap-svg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* Mind-Map Symmetrical Layout */
.roadmap-mindmap-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
    padding: 140px 180px;
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 2;
}

/* --- Center Dominant Hub Node --- */
.mindmap-center-hub {
    flex-shrink: 0;
    width: 280px;
    z-index: 10;
    position: relative;
}

.mindmap-center-card {
    width: 100%;
    background: radial-gradient(circle at 50% 25%, #1c1432, #080611 85%);
    border: 2px solid rgba(244, 63, 94, 0.5);
    border-radius: 26px;
    padding: 24px 20px;
    text-align: center;
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.75),
        0 0 38px rgba(239, 68, 68, 0.35),
        inset 0 0 28px rgba(244, 63, 94, 0.18);
    backdrop-filter: blur(18px);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    position: relative;
}

.mindmap-center-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 52px rgba(0, 0, 0, 0.85),
        0 0 50px rgba(239, 68, 68, 0.5),
        inset 0 0 35px rgba(244, 63, 94, 0.28);
}

.center-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(244, 63, 94, 0.15));
    border: 2px solid rgba(244, 63, 94, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    box-shadow: 0 0 24px rgba(239, 68, 68, 0.4);
}

.center-road-icon {
    font-size: 1.8rem;
}

.center-hub-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.05em;
    margin: 0 0 4px 0;
    text-shadow: 0 0 14px rgba(244, 63, 94, 0.45);
}

.center-hub-subtitle {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.center-hub-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hub-pill-phase {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #ef4444, #f43f5e);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45);
}

.hub-pill-concept {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fca5a5;
}

.center-hub-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.center-hub-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-md);
    padding: 8px 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cstat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cstat-item .cstat-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.cstat-item .cstat-lbl {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.cstat-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
}

/* --- Wings & Phase Clusters --- */
.mindmap-wing {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mindmap-phase-cluster {
    display: flex;
    align-items: center;
    gap: 36px;
    position: relative;
}

.left-cluster {
    justify-content: flex-end;
}

.right-cluster {
    justify-content: flex-start;
}

/* --- Phase Nodes --- */
.mindmap-phase-node {
    width: 220px;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    position: relative;
    cursor: pointer;
    box-shadow: var(--card-lift-shadow);
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
    flex-shrink: 0;
    user-select: none;
    z-index: 5;
}

.mindmap-phase-node:hover {
    border-color: var(--phase-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px var(--phase-glow);
    transform: scale(1.03);
}

.phase-node-glow-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px;
}

.left-node .phase-node-glow-bar {
    right: 0;
}

.right-node .phase-node-glow-bar {
    left: 0;
}

.phase-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.phase-num-tag {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--phase-accent);
    letter-spacing: 0.05em;
}

.phase-tier-pill {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}

.tier-foundation {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.tier-structures {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.tier-algorithms {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.tier-advanced {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.35);
}

.phase-node-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.phase-node-icon {
    font-size: 1rem;
}

.phase-node-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.phase-node-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.phase-concept-count {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
}

.phase-expand-badge {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--surface-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.mindmap-phase-node:hover .phase-expand-badge {
    background: var(--surface-hover);
    color: #ffffff;
    border-color: var(--phase-accent);
}

/* --- Concepts Column --- */
.mindmap-concepts-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 4;
}

.mindmap-concepts-column.collapsed {
    display: none;
}

.mindmap-concept-card {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.concept-card-body {
    min-width: 175px;
    max-width: 220px;
    background: var(--surface-card-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
    z-index: 4;
}

.concept-card-body:hover {
    background: var(--surface-hover);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.concept-card-body.highlighted-concept {
    border-color: var(--primary-purple);
    box-shadow: 0 0 12px var(--purple-glow);
}

.concept-branch-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.concept-name-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.concept-count-pill {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: var(--radius-pill);
}

.concept-chevron {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* --- Subconcepts Branch --- */
.concept-subconcepts-branch {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 3;
}

.concept-subconcepts-branch.collapsed {
    display: none;
}

.subconcept-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    color: var(--text-light);
    transition: var(--transition-fast);
    white-space: nowrap;
}

.subconcept-chip:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.subconcept-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

.subconcept-text {
    line-height: 1.2;
}

.subconcept-chip.highlighted-sub {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    font-weight: 700;
}

/* --- Light Theme Overrides --- */
body.light-theme .roadmap-hero-panel {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

body.light-theme .roadmap-canvas-toolbar {
    background: rgba(255, 255, 255, 0.92);
    border-color: #e2e8f0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

body.light-theme .roadmap-viewport {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.light-theme .mindmap-center-card {
    background: linear-gradient(145deg, #FFFFFF, #FAF8FF 50%, #F5F1FF 100%);
    border: 2px solid #C4B5FD;
    box-shadow:
        0 12px 36px rgba(109, 61, 245, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.03),
        0 0 20px rgba(109, 61, 245, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.light-theme .mindmap-center-card:hover {
    transform: translateY(-3px);
    border-color: #A78BFA;
    box-shadow:
        0 18px 48px rgba(109, 61, 245, 0.14),
        0 4px 14px rgba(0, 0, 0, 0.04),
        0 0 28px rgba(124, 58, 237, 0.12);
}

body.light-theme .center-icon-badge {
    background: linear-gradient(135deg, #FAF5FF, #EDE9FE);
    border: 2px solid #A78BFA;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.2), 0 4px 12px rgba(109, 61, 245, 0.08);
}

body.light-theme .center-hub-title {
    color: #5B21B6;
    text-shadow: none;
}

body.light-theme .center-hub-subtitle {
    color: #64748B;
}

body.light-theme .hub-pill-phase {
    background: linear-gradient(135deg, #7C3AED, #6D3DF5);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(109, 61, 245, 0.35);
}

body.light-theme .hub-pill-concept {
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    color: #7C3AED;
}

body.light-theme .center-hub-tag {
    color: #64748B;
}

body.light-theme .center-hub-stats-row {
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
    border: 1px solid #DDD6FE;
}

body.light-theme .cstat-item .cstat-val {
    color: #111827;
}

body.light-theme .cstat-item .cstat-lbl {
    color: #64748B;
}

body.light-theme .cstat-divider {
    background: #DDD6FE;
}

body.light-theme .mindmap-phase-node {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

body.light-theme .concept-card-body {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-theme .subconcept-chip {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #334155;
}

/* --- Responsive Layouts --- */
@media (max-width: 1099px) {
    .roadmap-viewport {
        height: 680px;
    }

    .roadmap-mindmap-layout {
        gap: 60px;
        padding: 100px 120px;
    }

    .canvas-hint-pill {
        display: none;
    }
}

@media (max-width: 768px) {
    .roadmap-viewport {
        height: 600px;
    }

    .roadmap-mindmap-layout {
        gap: 40px;
        padding: 80px 60px;
    }

    .roadmap-canvas-toolbar {
        top: 12px;
        right: 12px;
        padding: 4px 10px;
    }

    .roadmap-hero-panel {
        padding: 16px 14px;
    }

    .roadmap-page-title {
        font-size: 1.4rem;
    }

    .roadmap-controls-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .roadmap-filters-wrap {
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* =============================================================================
   COMPETITIVE LEADERBOARD — VERTICAL RAIL & EXPANDED PANEL
   Futuristic glassmorphism design system matching CodeOrbit
   ============================================================================= */

/* =============================================================================
   COMPETITIVE LEADERBOARD — ATTACHED LEFT RAIL DRAWER
   Physical left-edge attached futuristic glassmorphism component
   ============================================================================= */

.leaderboard-rail-wrap {
    position: fixed;
    left: 0;
    top: 86px;
    height: calc(100vh - 106px);
    max-height: 760px;
    z-index: 960;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    pointer-events: auto;
    /* Collapsed assembly: Shifts panel off-screen leaving the attached 44px handle visible */
    transform: translateX(calc(-100% + 44px));
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.leaderboard-rail-wrap.expanded {
    transform: translateX(0);
}

/* --- Attached Vertical Rail Handle Tab --- */
.leaderboard-rail-collapsed {
    pointer-events: auto;
    width: 44px;
    height: 190px;
    margin-top: 24px;
    background: rgba(12, 16, 28, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: none;
    border-radius: 0 14px 14px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 12px;
    cursor: pointer;
    box-shadow: 6px 0 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(239, 68, 68, 0.18);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.leaderboard-rail-wrap:hover .leaderboard-rail-collapsed,
.leaderboard-rail-collapsed:hover {
    background: rgba(20, 26, 44, 0.98);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.7), 0 0 22px rgba(239, 68, 68, 0.3);
}

.rail-glow-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #FF3B4F, #E11D48, #BE123C);
}

.rail-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rail-trophy-icon {
    font-size: 1.15rem;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4));
    animation: lb-pulse-trophy 3s infinite ease-in-out;
}

.rail-live-pulse {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: lb-pulse-dot 2s infinite;
}

.rail-vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #f5f7ff;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.95;
}

.rail-expand-arrow {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ef4444;
    transition: transform 0.3s ease;
}

.leaderboard-rail-wrap.expanded .rail-expand-arrow {
    transform: rotate(180deg);
}

/* --- Expanded Panel (Attached to Left Edge) --- */
.leaderboard-panel-expanded {
    width: 360px;
    max-width: calc(100vw - 60px);
    height: 100%;
    background: rgba(10, 14, 24, 0.96);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: none;
    border-radius: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

.leaderboard-rail-wrap.expanded .leaderboard-panel-expanded {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 8px 0 35px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(239, 68, 68, 0.05);
}

/* --- Panel Header --- */
.lb-panel-header {
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lb-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lb-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lb-trophy-header-icon {
    font-size: 1.25rem;
}

.lb-panel-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

.lb-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.lb-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.lb-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lb-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fff;
    border-color: #ef4444;
}

/* Category Tabs */
.lb-category-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
}

.lb-category-tab {
    flex: 1;
    padding: 6px 4px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.lb-category-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.lb-category-tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(244, 63, 94, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

/* --- Panel Body (Contestants List) --- */
.lb-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lb-contestants-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lb-contestant-card {
    display: grid;
    grid-template-columns: 36px 36px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.lb-contestant-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(3px);
}

/* Rank Podium Styling */
.lb-contestant-card.rank-gold {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.03));
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: inset 0 0 15px rgba(245, 158, 11, 0.06);
}

.lb-contestant-card.rank-silver {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(255, 255, 255, 0.03));
    border-color: rgba(148, 163, 184, 0.3);
}

.lb-contestant-card.rank-bronze {
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.12), rgba(255, 255, 255, 0.03));
    border-color: rgba(217, 119, 6, 0.3);
}

.lb-contestant-card.is-current-user {
    border-color: rgba(239, 68, 68, 0.6) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
}

/* Card Rank Column */
.lb-card-rank-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.lb-rank-badge {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-muted);
}

.lb-rank-badge.rank-gold {
    font-size: 1.15rem;
}

.lb-rank-badge.rank-silver {
    font-size: 1.15rem;
}

.lb-rank-badge.rank-bronze {
    font-size: 1.15rem;
}

.lb-rank-delta {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.lb-rank-delta.delta-up {
    color: #4ade80;
}

.lb-rank-delta.delta-down {
    color: #f87171;
}

.lb-rank-delta.delta-neutral {
    color: var(--text-muted);
}

/* Card Avatar */
.lb-card-avatar-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.lb-card-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lb-card-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FF3B4F, #BE123C);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Card Info */
.lb-card-info-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lb-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lb-card-username {
    font-size: 0.84rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-you-tag {
    font-size: 0.62rem;
    font-weight: 800;
    background: #ef4444;
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.lb-card-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.lb-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Card Score */
.lb-card-score-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.lb-score-number {
    font-size: 0.98rem;
    font-weight: 800;
    color: #ef4444;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.1;
}

.lb-score-unit {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* --- Panel Footer (Current User Sticky Box) --- */
.lb-panel-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(14, 18, 30, 0.98);
    padding: 12px 14px;
}

.lb-user-rank-box {
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lb-user-rank-box.authenticated {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.lb-user-rank-box.unauthenticated {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.lb-user-rank-box.loading {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
    justify-content: center;
}

.lb-unauth-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.btn-lb-login {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-lb-login:hover {
    background: #f43f5e;
}

.lb-user-rank-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lb-user-avatar-mini {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #a855f7);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-user-rank-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lb-user-rank-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
}

.lb-user-rank-badge strong {
    color: #ef4444;
    font-weight: 800;
}

.lb-user-mini-stats {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
}

.lb-user-rank-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lb-user-score-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ef4444;
    font-family: 'JetBrains Mono', monospace;
}

.lb-user-score-lbl {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* --- Empty & Error States --- */
.lb-empty-state, .lb-error-state {
    text-align: center;
    padding: 36px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.lb-empty-icon, .lb-error-icon {
    font-size: 2.2rem;
    margin-bottom: 4px;
}

.lb-empty-title, .lb-error-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.lb-empty-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 240px;
}

.btn-lb-retry {
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-lb-retry:hover {
    background: #ef4444;
    color: #fff;
}

/* --- Skeletons --- */
.lb-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lb-skeleton-card {
    display: grid;
    grid-template-columns: 36px 36px 1fr 50px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.lb-sk-rank, .lb-sk-avatar, .lb-sk-line, .lb-sk-score {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: lb-shimmer 1.8s infinite;
    border-radius: 4px;
}

.lb-sk-rank { width: 20px; height: 20px; }
.lb-sk-avatar { width: 36px; height: 36px; border-radius: 50%; }
.lb-sk-content { display: flex; flex-direction: column; gap: 6px; }
.lb-sk-name { width: 100px; height: 12px; }
.lb-sk-stats { width: 70px; height: 10px; }
.lb-sk-score { width: 40px; height: 16px; justify-self: end; }

/* Backdrop */
.leaderboard-mobile-backdrop {
    display: none;
}

/* --- Keyframe Animations --- */
@keyframes lb-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes lb-pulse-trophy {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.3)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.6)); }
}

@keyframes lb-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

/* --- Light Theme Overrides --- */
body.light-theme .leaderboard-rail-wrap {
    filter: none;
}

body.light-theme .leaderboard-rail-collapsed {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(109, 61, 245, 0.25);
    border-left: none;
    box-shadow: 4px 0 18px rgba(109, 61, 245, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-theme .leaderboard-rail-wrap:hover .leaderboard-rail-collapsed,
body.light-theme .leaderboard-rail-collapsed:hover {
    background: #FFFFFF;
    border-color: rgba(109, 61, 245, 0.5);
    box-shadow: 6px 0 24px rgba(109, 61, 245, 0.15), 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.light-theme .rail-glow-bar {
    background: linear-gradient(180deg, #6D3DF5, #7C3AED, #A855F7);
}

body.light-theme .rail-vertical-text {
    color: #111827;
}

body.light-theme .rail-expand-arrow {
    color: #6D3DF5;
}

body.light-theme .leaderboard-panel-expanded {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(109, 61, 245, 0.2);
    border-left: none;
    box-shadow: none;
}

body.light-theme .leaderboard-rail-wrap.expanded .leaderboard-panel-expanded {
    box-shadow: 12px 0 40px rgba(109, 61, 245, 0.10), 0 0 20px rgba(109, 61, 245, 0.04);
}

body.light-theme .lb-panel-header {
    background: #FAF9FF;
    border-bottom: 1px solid #EDE9FE;
}

body.light-theme .lb-panel-title {
    color: #111827;
}

body.light-theme .lb-close-btn {
    background: #F5F3FF;
    border-color: #EDE9FE;
    color: #64748B;
}

body.light-theme .lb-close-btn:hover {
    background: rgba(109, 61, 245, 0.12);
    color: #6D3DF5;
    border-color: #6D3DF5;
}

body.light-theme .lb-category-tabs {
    background: #F5F3FF;
    border-color: #EDE9FE;
}

body.light-theme .lb-category-tab {
    color: #64748B;
}

body.light-theme .lb-category-tab:hover {
    background: #EDE9FE;
    color: #6D3DF5;
}

body.light-theme .lb-category-tab.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #7C3AED, #5B21E6);
    border: 1px solid rgba(109, 61, 245, 0.4);
    box-shadow: 0 2px 10px rgba(109, 61, 245, 0.25);
}

body.light-theme .lb-contestant-card {
    background: #FFFFFF;
    border-color: #EDE9FE;
    box-shadow: 0 1px 4px rgba(109, 61, 245, 0.04);
}

body.light-theme .lb-contestant-card:hover {
    background: #FAF9FF;
    border-color: rgba(109, 61, 245, 0.35);
    box-shadow: 0 4px 14px rgba(109, 61, 245, 0.08);
}

body.light-theme .lb-contestant-card.is-current-user {
    background: #FAF9FF;
    border-color: #6D3DF5;
    box-shadow: 0 0 12px rgba(109, 61, 245, 0.15);
}

body.light-theme .lb-card-username {
    color: #111827;
}

body.light-theme .lb-score-number {
    color: #6D3DF5;
}

body.light-theme .lb-panel-footer {
    background: #FAF9FF;
    border-top: 1px solid #EDE9FE;
}

body.light-theme .lb-user-rank-box {
    background: #FFFFFF;
    border: 1px solid rgba(109, 61, 245, 0.25);
}

body.light-theme .lb-user-rank-badge {
    color: #111827;
}

body.light-theme .lb-user-score-val {
    color: #6D3DF5;
}

body.light-theme .btn-lb-login {
    background: linear-gradient(135deg, #7C3AED, #5B21E6);
    color: #FFFFFF;
}

body.light-theme .btn-lb-login:hover {
    background: linear-gradient(135deg, #5B21E6, #4C1D95);
}

/* --- Mobile / Tablet Responsive --- */
@media (max-width: 768px) {
    .leaderboard-rail-wrap {
        top: 68px;
        height: calc(100vh - 80px);
        max-height: calc(100vh - 80px);
        transform: translateX(calc(-100% + 38px));
    }

    .leaderboard-rail-wrap.expanded {
        transform: translateX(0);
    }

    .leaderboard-rail-collapsed {
        height: 150px;
        width: 38px;
        margin-top: 16px;
        padding: 10px 0;
        border-radius: 0 12px 12px 0;
    }

    .leaderboard-panel-expanded {
        width: min(340px, calc(100vw - 44px));
        max-width: calc(100vw - 44px);
        border-radius: 0;
    }

    .leaderboard-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(4px);
        z-index: 955;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .leaderboard-mobile-backdrop.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Global Select & Option Dark Theme Support */
select option,
select optgroup {
    background-color: #0f172a;
    color: #f8fafc;
}