/* =========================================================
   DIGITAL CORTEX - STYLESHEET
   ========================================================= */

:root {
    /* CLINICAL NEON PALETTE */
    --void: #020c1b;
    --glass: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.1);

    --atlas-gold: #ffd700;
    --atlas-glow: rgba(255, 215, 0, 0.6);

    --why-cyan: #00f2ff;
    --why-glow: rgba(0, 242, 255, 0.6);

    --text-main: #e6f1ff;
    --text-mute: #8892b0;

    --font-ui: 'Inter', sans-serif;
    --font-code: 'JetBrains Mono', monospace;

    /* WHY Section Specific Variables */
    --bg-card: rgba(17, 34, 64, 0.7);
    --glass-border: rgba(100, 255, 218, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--void);
    color: var(--text-main);
    font-family: var(--font-ui);
    overflow-x: hidden;
    background: radial-gradient(circle at 50% 50%, #0a192f 0%, #020c1b 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- ANIMATIONS --- */
@keyframes spin-cw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

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

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

/* ========== ATLAS SECTION ANIMATIONS ========== */
/* Topic button press animation */
@keyframes topicPress {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}

/* Content panel slide-in animation */
@keyframes contentSlide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* Card hover glow effect */
@keyframes cardGlow {
    0% {
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }
}

/* Button press feedback */
@keyframes buttonPress {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

/* Fade in for detail content */
@keyframes detailFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- UTILITIES --- */
.view-section {
    display: none;
    padding: 20px;
    animation: fadeIn 0.4s ease-out;
    flex-grow: 1;
}

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

.badge {
    font-family: var(--font-code);
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 5px 15px;
    border: 1px solid var(--text-mute);
    border-radius: 20px;
    color: var(--text-mute);
    text-transform: uppercase;
}

/* --- LANDING PAGE --- */
#landing-view {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding: 0 0 80px 0; /* Remove top and side padding to allow full-bleed split header */
}

/* Split Hero Container */
.hero-split-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 72vh;
    min-height: 580px;
    max-height: 850px;
    position: relative;
    border-bottom: 1px solid var(--border);
    background: #020813; /* Deep premium dark background */
}

.hero-left-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 8% 80px 8%;
    background: #020813;
    position: relative;
    z-index: 2;
}

.hero-right-pane {
    height: 100%;
    aspect-ratio: 9 / 16;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    background: #020c1b;
    z-index: 1;
}

/* Video blend overlays */
.hero-right-pane::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to right, #020813 0%, transparent 15%, transparent 85%, #020c1b 100%),
                linear-gradient(to bottom, transparent 80%, #020c1b 100%);
    pointer-events: none;
}

.landing-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Do not crop the 9:16 aspect ratio video */
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

body.professional-mode .landing-bg-video {
    opacity: 0.85;
    filter: none;
}

/* System Tag & Monospace line */
.hero-sys-tag {
    font-family: var(--font-code);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #bd93f9; /* Vibrant purple */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
}

.hero-sys-tag::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 12px;
    background-color: #bd93f9;
    margin-left: 6px;
    animation: sys-caret-blink 1s infinite alternate;
}

.tag-line {
    display: inline-block;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, rgba(189, 147, 249, 0.2), #bd93f9, rgba(189, 147, 249, 0.2));
    background-size: 200% 100%;
    margin-right: 12px;
    border-radius: 1px;
    animation: tag-line-pulse 2s infinite linear;
}

@keyframes sys-caret-blink {
    0%, 40% { opacity: 0; }
    60%, 100% { opacity: 1; }
}

@keyframes tag-line-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.hero-title {
    font-size: clamp(2.2rem, 3.8vw, 3.8rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: left;
    color: #ffffff;
    margin: 15px 0 20px 0;
    background: none;
    -webkit-text-fill-color: initial;
}

.hero-subtitle {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-mute);
    max-width: 580px;
    text-align: left;
    margin: 0 0 32px 0;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
    justify-content: flex-start;
}

.hero-cta {
    font-family: var(--font-code);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cta-primary {
    background: linear-gradient(135deg, var(--atlas-gold) 0%, #ffb300 100%);
    color: #020c1b;
    border: none;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}
.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.3);
}
.cta-secondary {
    background: rgba(255, 255, 255, 0.02);
    color: var(--why-cyan);
    border: 1px solid rgba(0, 242, 255, 0.25);
    backdrop-filter: blur(8px);
}
.cta-secondary:hover {
    background: rgba(0, 242, 255, 0.04);
    border-color: var(--why-cyan);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 242, 255, 0.1);
}
.hero-cta:active {
    transform: translateY(0);
}

/* --- RESPONSIVE STATISTICS STRIP --- */
.hero-stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(10, 25, 47, 0.25);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 28px;
    border-radius: 50px;
    margin-bottom: 24px;
    max-width: 800px;
    width: 100%;
}
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}
.stat-number {
    font-family: var(--font-code);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--why-cyan);
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.2);
}
.stat-label {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-mute);
    margin-top: 2px;
}
.stat-item-divider {
    width: 1px;
    height: 25px;
    background: var(--border);
    opacity: 0.3;
}

/* --- DYNAMIC RESUME BANNER --- */
.dynamic-resume-panel {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 20px auto;
}
.resume-card {
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 242, 255, 0.15);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.4s ease-out;
}
.resume-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
}
.resume-card-body i {
    font-size: 1.4rem;
    color: var(--atlas-gold);
    filter: drop-shadow(0 0 6px var(--atlas-glow));
}
.resume-text-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
}
.resume-text-subtitle {
    font-size: 0.75rem;
    color: var(--text-mute);
    margin-top: 2px;
}
.resume-btn {
    background: var(--atlas-gold);
    color: #020c1b;
    border: none;
    font-family: var(--font-code);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.resume-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 215, 0, 0.25);
}

/* --- PORTAL GRID & CARDS TUNING FOR HOMEPAGE --- */
#landing-view .portal-grid {
    margin-top: 40px;
    gap: 24px;
    justify-content: center;
}

#landing-view .portal-card {
    position: relative;
    width: 290px;
    height: 350px; /* Dimensions from screenshot */
    background: rgba(10, 17, 32, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* Perfect vertical alignment centering */
    padding: 32px 24px !important;
    overflow: hidden !important;
    contain: content !important;
    z-index: 1 !important;
    border: none !important; /* Border is rendered by rotating conic gradient */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Premium Rotating Conic Border Glow (GPU-Accelerated) - Balanced brightness & pulsing animation */
#landing-view .portal-card::before {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 20px !important;
    background: conic-gradient(from 0deg, transparent, var(--color) 10%, rgba(255, 255, 255, 0.75) 20%, transparent 45%) !important;
    animation: spin-cw 7s linear infinite, border-glow-breath 3s ease-in-out infinite alternate !important; /* Gentle rotation + energy pulse */
    z-index: -2 !important;
    opacity: 0.73 !important; /* Reduced default brightness by 7% (from 80% to 73%) */
    will-change: transform, opacity !important;
    transition: opacity 0.3s ease, animation-duration 0.3s ease !important;
}

@keyframes border-glow-breath {
    0% {
        opacity: 0.66;
    }
    100% {
        opacity: 0.78; /* Breathe around the 73% target */
    }
}

/* Inner Card Mask to create a thin 2px border outline */
#landing-view .portal-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 1.5px !important;
    background: #040a16 !important; /* Matches deep dark landing theme */
    border-radius: 18.5px !important;
    z-index: -1 !important;
    transition: background-color 0.3s ease !important;
}

#landing-view .portal-card:hover {
    transform: translate3d(0, -8px, 0) scale(1.02) !important;
    /* Soft glowing drop shadow + elegant colored inner glow */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 30px rgba(var(--accent-rgb), 0.28), inset 0 0 15px rgba(var(--accent-rgb), 0.12) !important;
}

#landing-view .portal-card:hover::before {
    opacity: 0.93 !important; /* Reduced hover brightness by 7% (from 100% to 93%) */
    animation: spin-cw 4.5s linear infinite !important; /* Locks to a solid, faster spin on hover */
}

#landing-view .portal-card:hover::after {
    background: #060e20 !important; /* Slightly light up inner container on hover */
}

#landing-view .portal-card:active {
    transform: translate3d(0, -3px, 0) scale(1.002) !important;
}

/* Floating Clean Levitation Icon */
#landing-view .orb-icon {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    font-size: 3.5rem !important;
    margin-bottom: 20px !important; /* Tighter margins */
    color: var(--color) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 0 20px var(--glow) !important;
    transition: transform 0.3s ease, text-shadow 0.3s ease !important;
    animation: orb-levitate 4s ease-in-out infinite !important;
    will-change: transform;
    z-index: 2 !important;
}

#landing-view .portal-card:hover .orb-icon {
    transform: scale(1.08) !important;
    text-shadow: 0 0 30px var(--glow) !important;
}

/* Headline - Increased font size */
#landing-view .card-label {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 16px !important; /* Balanced spacing */
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
    transition: color 0.3s !important;
}

#landing-view .portal-card:hover .card-label {
    color: var(--color) !important;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35) !important; /* Glow shadow on title */
}

/* Features List - Increased size and brightness */
#landing-view .card-features {
    font-family: var(--font-code) !important;
    font-size: 0.85rem !important;
    color: #cbd5e1 !important; /* Brighter text color */
    text-align: center !important;
    line-height: 2.2 !important; /* Generous spacing */
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
    margin-top: 5px !important;
    transition: color 0.3s !important;
}

#landing-view .portal-card:hover .card-features {
    color: var(--text-main) !important;
}

/* Color Accent Variables for Landing cards */
#landing-view .card-atlas {
    --color: var(--atlas-gold);
    --glow: var(--atlas-glow);
    --accent-rgb: 255, 215, 0;
}
#landing-view .card-why {
    --color: var(--why-cyan);
    --glow: var(--why-glow);
    --accent-rgb: 0, 242, 255;
}
#landing-view .card-dashboard {
    --color: #bd93f9;
    --glow: rgba(189, 147, 249, 0.6);
    --accent-rgb: 189, 147, 249;
}

/* Professional Mode customizations for landing cards */
body.professional-mode #landing-view .portal-card {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(21, 101, 192, 0.12) !important;
    border-left: 5px solid var(--color) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s ease, border-left-width 0.4s ease !important;
}

body.professional-mode #landing-view .portal-card::before {
    display: none !important;
}

body.professional-mode #landing-view .portal-card::after {
    display: none !important;
}

body.professional-mode #landing-view .portal-card:hover {
    background: #ffffff !important;
    border-color: rgba(var(--accent-rgb), 0.45) !important;
    border-left-width: 8px !important;
    box-shadow: 0 15px 35px rgba(21, 101, 192, 0.1) !important;
}

body.professional-mode #landing-view .card-label {
    color: #1a202c !important;
}

body.professional-mode #landing-view .card-features {
    color: #4a5568 !important;
}

body.professional-mode #landing-view .portal-card:hover .card-features {
    color: #1a202c !important;
}

/* Professional Mode (Light Theme) Landing Page Customizations */
body.professional-mode .hero-split-container {
    background: #f8fafc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.professional-mode .hero-left-pane {
    background: #ffffff;
}
body.professional-mode .hero-right-pane {
    background: #f1f5f9;
}
body.professional-mode .hero-right-pane::before {
    background: linear-gradient(to right, #ffffff 0%, transparent 15%, transparent 85%, #f8fafc 100%),
                linear-gradient(to bottom, transparent 80%, #f8fafc 100%);
}
body.professional-mode .hero-title {
    color: #1a202c;
    background: none;
    -webkit-text-fill-color: initial;
}
body.professional-mode .hero-sys-tag {
    color: #7e57c2;
}
body.professional-mode .hero-sys-tag::after {
    background-color: #7e57c2;
}
body.professional-mode .tag-line {
    background: linear-gradient(90deg, rgba(126, 87, 194, 0.2), #7e57c2, rgba(126, 87, 194, 0.2));
    background-size: 200% 100%;
}
body.professional-mode .hero-subtitle {
    color: #455a64;
}
body.professional-mode .cta-primary {
    background: linear-gradient(135deg, var(--atlas-gold) 0%, #0d47a1 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}
body.professional-mode .cta-primary:hover {
    background: linear-gradient(135deg, #1e88e5 0%, var(--atlas-gold) 100%);
    box-shadow: 0 6px 16px rgba(21, 101, 192, 0.35);
}
body.professional-mode .cta-secondary {
    background: #ffffff;
    color: #1565c0;
    border-color: rgba(21, 101, 192, 0.3);
}
body.professional-mode .cta-secondary:hover {
    background: rgba(21, 101, 192, 0.03);
    border-color: #1565c0;
}
body.professional-mode .hero-stats-strip {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(126, 87, 194, 0.12);
}
body.professional-mode .stat-number {
    color: #7e57c2;
    text-shadow: none;
}
body.professional-mode .stat-label {
    color: #455a64;
}
body.professional-mode .resume-card {
    background: linear-gradient(135deg, rgba(21, 101, 192, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
    border-color: rgba(21, 101, 192, 0.15);
    box-shadow: 0 4px 20px rgba(126, 87, 194, 0.05);
}
body.professional-mode .resume-text-title {
    color: #263238;
}
body.professional-mode .resume-text-subtitle {
    color: #546e7a;
}
body.professional-mode .resume-btn {
    background: #7e57c2;
    color: #ffffff;
}
body.professional-mode .card-desc {
    color: #546e7a;
}
body.professional-mode .portal-card:hover .card-desc {
    color: #263238;
}

/* ================================================================
   MOBILE LAYOUT — Refined Academic App Experience
   ================================================================ */
@media (max-width: 900px) {
    .hero-split-container {
        flex-direction: column;
        height: auto;
        min-height: auto;
        max-height: none;
    }

    /* ── Hero Text Pane — Centered, compact spacing ── */
    .hero-left-pane {
        padding: 36px 24px 24px 24px;
        align-items: center;
        text-align: center;
    }
    .hero-sys-tag {
        font-size: 0.72rem;
        margin-bottom: 12px;
        justify-content: center;
        width: 100%;
    }
    .tag-line {
        width: 16px;
        margin-right: 8px;
    }
    .hero-title {
        font-size: 2rem;
        line-height: 1.15;
        text-align: center;
        width: 100%;
    }
    .hero-subtitle {
        font-size: 0.92rem;
        line-height: 1.55;
        text-align: center;
        max-width: 480px;
        margin: 0 auto 20px auto;
        width: 100%;
    }

    /* ── CTA Buttons — Side by side, centered, compact ── */
    .hero-ctas {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .hero-cta {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.82rem;
        min-width: 0;
    }

    /* ── Video Card — Small centered preview ── */
    .hero-right-pane {
        width: 180px;
        aspect-ratio: 9 / 16;
        height: auto;
        min-height: auto;
        margin: 20px auto 10px auto;
        border-top: none;
        border-radius: 18px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .hero-right-pane::before {
        display: none;
    }
    body.professional-mode .hero-right-pane {
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    }

    /* ── Stats Strip — Horizontal row ── */
    .hero-stats-strip {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        padding: 14px 16px;
        border-radius: 16px;
        width: calc(100% - 32px);
        margin: 16px 16px;
    }
    .stat-item {
        flex: 1;
        min-width: 0;
    }
    .stat-number {
        font-size: 1.1rem;
    }
    .stat-label {
        font-size: 0.6rem;
        letter-spacing: 0.3px;
    }
    .stat-item-divider {
        width: 1px;
        height: 26px;
        margin: 0 4px;
    }

    /* ── Resume Banner ── */
    .resume-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 14px;
        margin: 0 16px 16px 16px;
        width: calc(100% - 32px);
    }
    .resume-card-body {
        flex-direction: column;
        gap: 6px;
    }
    .resume-btn {
        width: 100%;
    }

    /* ── Portal Cards — Vertical stack, compact ── */
    #landing-view .portal-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px !important;
        margin-top: 30px !important;
        padding: 0 16px !important;
    }

    #landing-view .portal-card {
        width: 270px !important;
        height: 330px !important;
        min-height: auto !important;
        padding: 28px 20px !important;
    }

    #landing-view .orb-icon {
        font-size: 2.8rem !important;
        margin-bottom: 14px !important;
    }

    #landing-view .card-label {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    #landing-view .card-features {
        font-size: 0.72rem !important;
        line-height: 2 !important;
    }

    /* ── Footer — Bottom nav clearance ── */
    .footer {
        padding-bottom: calc(40px + 74px + env(safe-area-inset-bottom, 0px));
    }
}

/* Small phones (under 380px) */
@media (max-width: 380px) {
    .hero-left-pane {
        padding: 28px 18px 18px 18px;
    }
    .hero-title {
        font-size: 1.7rem;
    }
    .hero-subtitle {
        font-size: 0.85rem;
    }
    .hero-cta {
        padding: 10px 12px;
        font-size: 0.78rem;
    }
    .hero-right-pane {
        width: 160px;
    }
}

/* Staggered entrance for landing — each element slides in 80ms after the previous */
#landing-view.active .hero-sys-tag { animation: sysTagInit 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
#landing-view.active .hero-title   { animation: heroEnter .65s cubic-bezier(.4,0,.2,1)  .12s both; }
#landing-view.active .hero-subtitle { animation: heroEnter .65s cubic-bezier(.4,0,.2,1)  .18s both; }
#landing-view.active .hero-ctas     { animation: heroEnter .65s cubic-bezier(.4,0,.2,1)  .24s both; }
#landing-view.active .hero-stats-strip { animation: heroEnter .65s cubic-bezier(.4,0,.2,1)  .30s both; }
#landing-view.active .portal-grid  { animation: heroEnter .65s cubic-bezier(.4,0,.2,1)  .36s both; }
#landing-view.active .portal-card:nth-child(1) { animation: cardEnter .55s cubic-bezier(.4,0,.2,1)  .42s both; }
#landing-view.active .portal-card:nth-child(2) { animation: cardEnter .55s cubic-bezier(.4,0,.2,1)  .50s both; }
#landing-view.active .portal-card:nth-child(3) { animation: cardEnter .55s cubic-bezier(.4,0,.2,1)  .58s both; }
#landing-view.active .footer      { animation: heroEnter .6s  cubic-bezier(.4,0,.2,1)  .66s both; }

@keyframes sysTagInit {
    0% {
        opacity: 0;
        transform: translateX(-15px);
        filter: blur(2px);
    }
    15% {
        opacity: 0.8;
        transform: translateX(2px);
        filter: blur(0);
    }
    30% {
        opacity: 0.4;
        transform: translateX(-1px);
    }
    45% {
        opacity: 0.9;
        transform: translateX(1px);
    }
    60% {
        opacity: 0.7;
    }
    80%, 100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroEnter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
    #landing-view.active .hero-sys-tag,
    #landing-view.active .hero-title,
    #landing-view.active .hero-subtitle,
    #landing-view.active .hero-ctas,
    #landing-view.active .hero-stats-strip,
    #landing-view.active .portal-grid,
    #landing-view.active .portal-card,
    #landing-view.active .footer { animation: none; }
}

.portal-grid {
    display: flex;
    gap: 60px;
    margin-top: 60px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Atlas region selector — 8 cards. Restore full-size icons (looked too small),
   keep proper wrapping + bottom scroll padding so all regions are reachable. */
#atlas-selector.portal-grid {
    gap: 28px !important;
    margin-top: 30px;
    padding-bottom: 60px;
    align-content: flex-start;
}
/* The region and system grids replace one another in-place. Prevent browser
   scroll anchoring from keeping the old bottom-card position on mobile. */
#atlas-selector { overflow-anchor: none; }
/* Keep original card dimensions (icons stay big like before) */
#atlas-selector .portal-card {
    width: 280px !important;
    height: 300px !important;
}
/* No icon-shrinking rules — let .orb-icon use its default 3rem+ size */

/* Mobile: cards stack naturally in a single column, keeping the original
   look — full-size icons, yellow/cyan comet glow visible behind each card,
   and natural vertical scrolling. NO forced grid, NO disabled glow. */
@media (max-width: 700px) {
    #atlas-selector.portal-grid,
    #atlas-content .portal-grid {
        gap: 26px !important;
        margin-top: 24px;
        padding-bottom: 60px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }
    /* Cards keep their 280×300 default size — same as desktop */
    #atlas-selector .portal-card,
    #atlas-content .portal-card {
        flex-shrink: 0;
    }
}

/* --- PORTAL CARDS (THE ORBS) --- */
.portal-card {
    background: rgba(17, 34, 64, 0.4);
    backdrop-filter: blur(12px);
    width: 320px;
    height: 400px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 20px;
}

.portal-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 24px;
    background: conic-gradient(from 0deg, transparent, var(--color), transparent 30%);
    animation: spin-cw 4s linear infinite;
    z-index: -1;
    opacity: 0.7;
    /* Promote to its own GPU layer so the spin is silky-smooth */
    will-change: transform;
    transform: translateZ(0);
}

.portal-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--void);
    border-radius: 18px;
    z-index: -1;
}

/* Hover uses transform only (GPU); box-shadow set statically not animated */
.portal-card {
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
    will-change: transform;
}
.portal-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35), 0 0 24px rgba(255,215,0,0.18);
}
.portal-card:active {
    transform: translateY(-2px) scale(1.01);
    transition: transform .08s ease;
}

/* Reduced-motion users get instant transitions, no spin */
@media (prefers-reduced-motion: reduce) {
    .portal-card::before { animation: none; opacity: 0.4; }
    .portal-card, .portal-card:hover, .portal-card:active { transition: none; transform: none; }
}

.orb-icon {
    font-size: 5rem;
    margin-bottom: 30px;
    filter: drop-shadow(0 0 20px var(--glow));
    z-index: 2;
    transition: transform 0.3s, filter 0.3s;
}

.portal-card:hover .orb-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px var(--glow));
}

.card-atlas {
    --color: var(--atlas-gold);
    --glow: var(--atlas-glow);
}

.card-why {
    --color: var(--why-cyan);
    --glow: var(--why-glow);
}

.card-label {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
    z-index: 2;
    transition: color 0.3s;
}

.portal-card:hover .card-label {
    color: var(--atlas-gold);
}

.card-sub {
    font-family: var(--font-code);
    color: var(--text-mute);
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.5;
    z-index: 2;
    transition: color 0.3s;
}

.portal-card:hover .card-sub {
    color: var(--text-main);
}

/* --- NAV & LAYOUT --- */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 30px;
}

.nav-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-mute);
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-code);
    font-weight: bold;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.nav-btn:active {
    transform: scale(0.95);
}

/* --- ATLAS WORKSPACE --- */
.workspace {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    height: calc(100vh - 140px);
}

.sidebar-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.sidebar {
    background: rgba(10, 25, 47, 0.5);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* ============== READ-PROGRESS BADGE (top of sidebar) ============== */
.read-progress-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(0,242,255,0.10), rgba(80,220,150,0.06));
    border: 1px solid rgba(80,220,150,0.30);
    border-radius: 10px;
    font-family: var(--font-code);
    font-size: 0.78rem;
    color: var(--text-main);
}
.read-progress-badge .rp-text {
    display: flex; align-items: center; gap: 6px;
    color: #50dc96;
    white-space: nowrap;
    font-weight: 600;
}
.read-progress-badge .rp-bar {
    flex: 1; height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px; overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.read-progress-badge .rp-fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, #50dc96, #00f2ff);
    border-radius: 999px;
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 0 8px rgba(80,220,150,0.50);
}
.read-progress-badge .rp-pct {
    color: #ffffff; font-weight: 700; min-width: 36px; text-align: right;
}
body.professional-mode .read-progress-badge {
    background: #ffffff;
    border-color: #1565c0;
    color: #263238;
}
body.professional-mode .read-progress-badge .rp-text { color: #1b8754; }
body.professional-mode .read-progress-badge .rp-bar { background: #e0e0e0; }
body.professional-mode .read-progress-badge .rp-pct { color: #263238; }

/* ============== READ TICK ON TOPIC BUTTONS ============== */
.topic-btn .read-tick {
    color: #50dc96;
    margin-right: 4px;
    filter: drop-shadow(0 0 2px rgba(80,220,150,0.5));
}
.topic-btn.is-read {
    background: linear-gradient(90deg, rgba(80,220,150,0.10), transparent 80%);
    border-left: 3px solid #50dc96;
}
body.professional-mode .topic-btn .read-tick { color: #1b8754; filter: none; }
body.professional-mode .topic-btn.is-read {
    background: rgba(27,135,84,0.06);
    border-left-color: #1b8754;
}

.topic-btn {
    display: block;
    width: 100%;
    padding: 18px 20px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-mute);
    font-family: var(--font-code);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.topic-btn:hover {
    color: var(--atlas-gold);
    padding-left: 25px;
    background: rgba(255, 215, 0, 0.05);
}

.topic-btn.active {
    background: var(--atlas-gold);
    color: #000;
    font-weight: bold;
    animation: topicPress 0.3s ease;
}

.topic-btn:active {
    transform: scale(0.98);
}

.content-area {
    background: rgba(10, 25, 47, 0.8);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 40px;
    overflow-y: auto;
    position: relative;
    animation: contentSlide 0.4s ease-out;
}

/* --- CONTENT STYLING --- */
.h-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 5px;
    animation: detailFade 0.5s ease;
}

.h-sub {
    color: var(--atlas-gold);
    font-family: var(--font-code);
    margin-bottom: 30px;
    display: block;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    animation: detailFade 0.6s ease;
}

.desc-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-main);
    margin-bottom: 30px;
    animation: detailFade 0.7s ease;
}

.desc-text b {
    color: var(--atlas-gold);
}

.img-container {
    width: 100%;
    min-height: 300px;
    background: #000;
    border: 1px dashed var(--text-mute);
    border-radius: 8px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.img-placeholder-text {
    color: var(--text-mute);
    font-family: var(--font-code);
    text-align: center;
}

.atlas-image-placeholder {
    min-height: 300px;
    padding: 32px;
    background: rgba(0, 242, 255, 0.025);
    border-color: rgba(0, 242, 255, 0.28);
}

.atlas-image-placeholder .img-placeholder-text {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.atlas-image-placeholder .img-placeholder-text i {
    color: var(--why-cyan);
    font-size: 2rem;
    opacity: 0.72;
}

.atlas-image-placeholder .img-placeholder-text strong {
    color: var(--why-cyan);
    font-size: 0.9rem;
    letter-spacing: 1.2px;
    line-height: 1.5;
}

.atlas-image-placeholder .img-placeholder-text span {
    max-width: 460px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.65;
}

.atlas-image-frame {
    padding: 12px;
    border-style: solid;
    background: var(--void);
    min-height: 0;
    align-items: stretch;
}

.atlas-reference-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
}

.atlas-image-caption {
    margin-top: 10px;
    color: var(--text-mute);
    font-family: var(--font-code);
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.5;
}

.credits-box {
    font-size: 0.8rem;
    color: var(--text-mute);
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 10px;
    font-family: var(--font-code);
    width: 100%;
    text-align: right;
}

.comp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.02);
    animation: detailFade 0.8s ease;
}

.comp-table td {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.species-label {
    font-family: var(--font-code);
    color: var(--atlas-gold);
    font-weight: bold;
    width: 140px;
}

/* --- QUIZ OVERLAY (MODERNIZED) --- */
#quiz-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 12, 27, 0.95);
    backdrop-filter: blur(10px);
    /* Sit above the bottom nav (z=9000) so the bar can't cover the modal */
    z-index: 9700;
    display: none;
    justify-content: center;
    align-items: center;
}

.quiz-modal {
    background: var(--void);
    border: 1px solid var(--border);
    padding: 40px;
    width: 800px;
    max-width: 90%;
    height: 80vh;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

/* Quiz Menu */
.quiz-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* HARD CAP — viewport minus nav-bar + modal padding + header.
       This bypasses every flex-sizing edge case that was breaking the scroll. */
    max-height: calc(100vh - 260px);
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    align-content: start;
    padding: 4px 8px 24px 4px;
    /* Visible custom scrollbar so users see it can scroll */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,242,255,0.55) rgba(255,255,255,0.05);
    scrollbar-width: thin;
}
.quiz-menu-grid::-webkit-scrollbar { width: 10px; }
.quiz-menu-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 5px; }
.quiz-menu-grid::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.55); border-radius: 5px; }
.quiz-menu-grid::-webkit-scrollbar-thumb:hover { background: rgba(0,242,255,0.80); }

.quiz-mode-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.quiz-mode-card:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--atlas-gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.1);
}

.quiz-mode-card:active {
    transform: translateY(-2px);
    animation: buttonPress 0.2s ease;
}

/* Quiz Interface */
#quiz-active-view {
    display: none;
    height: 100%;
    flex-direction: column;
}

.progress-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-bottom: 30px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--why-cyan), var(--atlas-gold));
    width: 0%;
    transition: width 0.3s ease;
}

.quiz-question-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 30px;
    line-height: 1.4;
}

.quiz-option {
    display: block;
    width: 100%;
    padding: 18px 25px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: var(--text-mute);
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s;
    font-size: 1rem;
    position: relative;
}

.quiz-option:hover {
    border-color: var(--atlas-gold);
    background: rgba(255, 215, 0, 0.05);
    color: var(--text-main);
    transform: translateX(5px);
}

.quiz-option:active {
    transform: translateX(3px) scale(0.98);
}

.quiz-option.correct {
    border-color: #00ff9d;
    background: rgba(0, 255, 157, 0.1);
    color: #fff;
}

.quiz-option.wrong {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    color: #fff;
    opacity: 0.6;
}

/* EXAM-MODE neutral "selected" — user picked this, but no reveal of right/wrong */
.quiz-option.selected {
    border-color: var(--why-cyan, #00f2ff);
    background: rgba(0, 242, 255, 0.10);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(0,242,255,0.20);
}
.quiz-option.selected::after {
    content: "✓ Your answer";
    font-size: 0.7rem;
    color: var(--why-cyan, #00f2ff);
    margin-left: 10px;
    letter-spacing: 1px;
    opacity: 0.85;
}

.fill-input {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-family: var(--font-code);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.fill-input:focus {
    outline: none;
    border-color: var(--atlas-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

/* Feedback Box */
.feedback-panel {
    margin-top: auto;
    background: rgba(17, 34, 64, 0.8);
    border-top: 1px solid var(--atlas-gold);
    padding: 20px;
    border-radius: 12px;
    animation: slideDown 0.3s ease;
    display: none;
}

/* Stats */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
}

.stat-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    transition: transform 0.3s;
}

.stat-box:hover {
    transform: translateY(-3px);
}

.stat-val {
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
}

.stat-label {
    font-family: var(--font-code);
    color: var(--text-mute);
    font-size: 0.8rem;
}

/* --- FOOTER --- */
.footer {
    background: var(--void);
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.footer-logo-space {
    width: auto;
    height: auto;
    min-height: 110px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mute);
    font-size: 0.8rem;
    padding: 12px 24px;
}

/* The actual IVRI institutional logo image */
.footer-logo-img {
    max-height: 110px;
    max-width: 280px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(0, 242, 255, 0.18));
    transition: transform 0.4s ease, filter 0.4s ease;
    /* In dark mode, soften the white background of the logo so it blends with the dark footer */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 12px 20px;
}
.footer-logo-img:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 6px 22px rgba(255, 215, 0, 0.30));
}

/* Light/Professional mode — drop the white card since the page IS white */
body.professional-mode .footer-logo-img {
    background: transparent;
    filter: none;
    padding: 0;
}

/* Fallback hint shown if the logo file isn't uploaded yet */
.footer-logo-fallback {
    display: inline-block;
    padding: 16px 24px;
    border: 1px dashed var(--text-mute);
    border-radius: 12px;
    color: var(--text-mute);
    font-size: 0.85rem;
    font-family: var(--font-code);
    background: rgba(255, 255, 255, 0.03);
}
.footer-logo-fallback code {
    background: rgba(0, 242, 255, 0.15);
    color: var(--why-cyan);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-code);
    margin-left: 4px;
}

/* Mobile: shrink so it never crowds the credits */
@media (max-width: 600px) {
    .footer-logo-img {
        max-height: 90px;
        max-width: 220px;
    }
}

.footer-text {
    color: var(--text-mute);
    font-family: var(--font-code);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* --- TWO-COLUMN CREDITS (Scientific Staff | Platform Developer) --- */
.footer-credits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    align-items: start;
}

.credit-col {
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.credit-col:hover {
    border-color: var(--atlas-gold);
    transform: translateY(-2px);
}
.credit-col:nth-child(2):hover {
    border-color: var(--why-cyan);
}

.credit-heading {
    font-family: var(--font-code);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--atlas-gold);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.credit-col:nth-child(2) .credit-heading {
    color: var(--why-cyan);
}
.credit-heading i {
    font-size: 1rem;
    opacity: 0.85;
}

.credit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.credit-list li {
    padding: 10px 0;
    font-family: var(--font-body, var(--font-code));
    font-size: 0.95rem;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.credit-list li:last-child { border-bottom: none; }
.credit-list li b {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 600;
}

.credit-role {
    font-family: var(--font-code);
    font-size: 0.72rem;
    color: var(--text-mute);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.credit-contact {
    align-self: flex-start;
    margin-top: 5px;
    font-family: var(--font-code);
    font-size: 0.75rem;
    color: var(--why-cyan);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.credit-contact:hover,
.credit-contact:focus-visible {
    text-decoration: underline;
}
.credit-contact i {
    margin-right: 5px;
    opacity: 0.8;
}

.credit-foot {
    font-family: var(--font-code);
    font-size: 0.72rem;
    color: var(--text-mute);
    text-align: right;
    margin-top: 8px;
    opacity: 0.75;
}

/* Stack columns on small screens */
@media (max-width: 760px) {
    .footer-credits {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .credit-col { padding: 20px 22px; }
}


/* =========================================================
   PWA UPDATE BANNER + RESET CACHE BUTTON
   ========================================================= */
.update-banner {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: #14141f;
    color: #e8e8f0;
    border: 1px solid var(--why-cyan, #00f2ff);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.92rem;
    transition: transform 0.35s cubic-bezier(.2,.9,.3,1.4), opacity 0.25s ease;
    opacity: 0;
    max-width: calc(100% - 32px);
}
.update-banner.show {
    transform: translate(-50%, 0);
    opacity: 1;
}
.update-banner > i.fa-cloud-arrow-down {
    color: var(--why-cyan, #00f2ff);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.update-banner-text {
    font-weight: 500;
}
.update-btn {
    background: transparent;
    border: 1px solid var(--why-cyan, #00f2ff);
    color: var(--why-cyan, #00f2ff);
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-code, monospace);
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}
.update-btn.primary {
    background: var(--why-cyan, #00f2ff);
    color: #0a0a14;
}
.update-btn.primary:hover {
    background: #fff;
    color: #0a0a14;
}
.update-btn.dismiss {
    border-color: rgba(255, 255, 255, 0.2);
    color: #aaa;
    padding: 4px 10px;
    font-size: 1.2rem;
    line-height: 1;
}
.update-btn.dismiss:hover {
    border-color: #fff;
    color: #fff;
}

/* Stack vertically on small screens */
@media (max-width: 560px) {
    .update-banner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 10px;
        padding: 14px 16px;
    }
    .update-banner-text { width: 100%; order: 0; }
    .update-banner > i.fa-cloud-arrow-down { order: -1; }
}

/* Footer tools row (Reset App Cache button etc.) */
.footer-tools {
    margin-top: 28px;
    text-align: center;
}
.footer-tool-btn {
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    color: var(--text-mute, #888);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-code, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.footer-tool-btn:hover {
    border-color: var(--why-cyan, #00f2ff);
    color: var(--why-cyan, #00f2ff);
}

/* Professional (light) theme variants */
body.professional-mode .update-banner {
    background: #ffffff;
    color: #102a43;
    border-color: #1565c0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
body.professional-mode .update-banner > i.fa-cloud-arrow-down { color: #1565c0; }
body.professional-mode .update-btn {
    border-color: #1565c0;
    color: #1565c0;
}
body.professional-mode .update-btn.primary {
    background: #1565c0;
    color: #fff;
}
body.professional-mode .update-btn.primary:hover {
    background: #0d47a1;
    color: #fff;
}
body.professional-mode .update-btn.dismiss {
    border-color: rgba(0, 0, 0, 0.15);
    color: #607d8b;
}
body.professional-mode .footer-tool-btn {
    border-color: rgba(0, 0, 0, 0.12);
    color: #607d8b;
}
body.professional-mode .footer-tool-btn:hover {
    border-color: #1565c0;
    color: #1565c0;
}

/* Professional (light) mode tuning */
body.professional-mode .credit-col {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
body.professional-mode .credit-heading {
    color: #1565c0;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.professional-mode .credit-col:nth-child(2) .credit-heading {
    color: #00897b;
}
body.professional-mode .credit-list li {
    color: #263238;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.professional-mode .credit-list li b { color: #102a43; }
body.professional-mode .credit-role { color: #607d8b; }
body.professional-mode .credit-contact { color: #1565c0; }
body.professional-mode .credit-foot { color: #607d8b; }

/* ================= WHY SECTION STYLES ================= */
#why-view {
    background: radial-gradient(circle at 50% -20%, rgba(0, 242, 255, 0.08), transparent 60%), 
                radial-gradient(circle at 0% 100%, rgba(138, 43, 226, 0.04), transparent 50%),
                #020c1b;
    position: relative;
    overflow: visible;
}

#why-view header {
    padding: 95px 0 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#why-view header::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 50%; transform: translateX(-50%) translateZ(0);
    width: 100%; max-width: 1200px; height: 100%;
    background-image: 
        radial-gradient(rgba(0, 242, 255, 0.04) 1.2px, transparent 1.2px),
        linear-gradient(rgba(0, 242, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.015) 1px, transparent 1px) !important;
    background-size: 20px 20px, 40px 40px, 40px 40px !important;
    background-position: center center !important;
    mask-image: radial-gradient(circle at center, black 40%, transparent 90%) !important;
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%) !important;
    pointer-events: none !important;
    z-index: 0;
    opacity: 0.95;
    will-change: opacity;
}

body.professional-mode #why-view header::before {
    background-image: 
        radial-gradient(rgba(126, 87, 194, 0.08) 1.2px, transparent 1.2px),
        linear-gradient(rgba(126, 87, 194, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 87, 194, 0.025) 1px, transparent 1px) !important;
}

#why-view h1 {
    font-size: 4.2rem;
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #ffffff 15%, var(--why-cyan) 45%, #a855f7 75%, var(--atlas-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 45px rgba(0, 242, 255, 0.25);
    animation: titleGlow 4s ease-in-out infinite alternate;
    will-change: filter, text-shadow;
}

@keyframes titleGlow {
    0% { 
        text-shadow: 0 0 25px rgba(0, 242, 255, 0.15);
        filter: drop-shadow(0 0 2px rgba(0, 242, 255, 0.05));
    }
    100% { 
        text-shadow: 0 0 50px rgba(0, 242, 255, 0.45), 0 0 25px rgba(0, 242, 255, 0.2);
        filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.15));
    }
}

#why-view .subtitle {
    font-family: var(--font-code);
    color: var(--atlas-gold);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#why-view .subtitle::before {
    content: '[ Beyond // ';
    color: var(--why-cyan);
    opacity: 0.7;
    font-size: 0.75rem;
    letter-spacing: 2px;
    animation: bracketPulse 2s infinite alternate;
}

#why-view .subtitle::after {
    content: '// Textbooks ]';
    color: var(--why-cyan);
    opacity: 0.7;
    font-size: 0.75rem;
    letter-spacing: 2px;
    animation: bracketPulse 2s infinite alternate;
}

@keyframes bracketPulse {
    0% { opacity: 0.4; transform: scale(0.98) translateZ(0); }
    100% { opacity: 1; transform: scale(1.02) translateZ(0); }
}

#why-view .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#why-view .badge {
    background: rgba(0, 242, 255, 0.04) !important;
    border: 1px solid rgba(0, 242, 255, 0.3) !important;
    color: var(--why-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.25) !important;
    box-shadow: 
        0 0 15px rgba(0, 242, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    letter-spacing: 1.5px !important;
    font-size: 0.72rem !important;
    transition: all 0.3s ease !important;
}

#why-view .badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background: var(--why-cyan) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px var(--why-cyan) !important;
    animation: livePulse 2s infinite !important;
}

@keyframes livePulse {
    0% { transform: scale(0.9) translateZ(0); opacity: 0.6; }
    50% { transform: scale(1.3) translateZ(0); opacity: 1; box-shadow: 0 0 12px var(--why-cyan); }
    100% { transform: scale(0.9) translateZ(0); opacity: 0.6; }
}

body.professional-mode #why-view .badge {
    background: rgba(126, 87, 194, 0.05) !important;
    border: 1px solid rgba(126, 87, 194, 0.3) !important;
    color: var(--medical-purple) !important;
    box-shadow: 0 0 15px rgba(126, 87, 194, 0.06) !important;
    text-shadow: none !important;
}

body.professional-mode #why-view .badge::before {
    background: var(--medical-purple) !important;
    box-shadow: 0 0 8px var(--medical-purple) !important;
}

#why-view .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 45px;
    padding: 18px 32px;
    background: rgba(10, 25, 47, 0.65) !important;
    border: 1px solid rgba(0, 242, 255, 0.12) !important;
    border-radius: 30px;
    backdrop-filter: blur(25px) translateZ(0);
    -webkit-backdrop-filter: blur(25px) translateZ(0);
    position: sticky;
    top: 20px;
    z-index: 100;
    box-shadow: 
        0 20px 50px rgba(2, 12, 27, 0.5), 
        inset 0 1px 0 rgba(255, 255, 255, 0.04), 
        0 0 30px rgba(0, 242, 255, 0.03) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, border-color, box-shadow;
    transform: translate3d(0, 0, 0);
}

#why-view .controls:hover {
    border-color: rgba(0, 242, 255, 0.3) !important;
    box-shadow: 
        0 24px 55px rgba(2, 12, 27, 0.55), 
        inset 0 1px 0 rgba(255, 255, 255, 0.06), 
        0 0 35px rgba(0, 242, 255, 0.06) !important;
}

#why-view .controls.controls-hidden {
    transform: translateY(-150%) translateZ(0);
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 700px) {
    #why-view .controls {
        top: 8px;
        margin-bottom: 18px;
        padding: 12px;
        gap: 10px;
    }
    #why-view .controls .search-wrapper input { padding: 8px 12px; font-size: 0.85rem; }
    #why-view .controls .filters { gap: 6px; }
    #why-view .controls .filter-btn { padding: 6px 12px; font-size: 0.75rem; }
    #why-view .controls .ai-btn { padding: 8px 14px; font-size: 0.85rem; }
}

#why-view .search-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 400px;
}

#why-view .search-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    color: var(--why-cyan);
    font-size: 0.95rem;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#why-view .search-wrapper:focus-within i {
    color: var(--atlas-gold) !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.65) !important;
    transform: translateY(-50%) scale(1.22) translateZ(0) !important;
}

#why-view input[type="text"] {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background: rgba(10, 20, 38, 0.65) !important;
    border: 1px solid rgba(0, 242, 255, 0.15) !important;
    border-radius: 30px !important;
    color: var(--text-main);
    font-family: var(--font-code);
    font-size: 0.9rem;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, transform 0.3s ease !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3) !important;
}

#why-view input[type="text"]:focus {
    outline: none;
    border-color: var(--why-cyan) !important;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.35), inset 0 2px 4px rgba(0,0,0,0.15) !important;
    background: rgba(10, 20, 38, 0.95) !important;
    transform: scale(1.01) translateZ(0) !important;
}

#why-view .filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

#why-view .filter-btn {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--text-mute) !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    cursor: pointer;
    font-family: var(--font-code);
    font-size: 0.8rem;
    position: relative !important;
    overflow: hidden !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease !important;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

#why-view .filter-btn:hover {
    border-color: rgba(0, 242, 255, 0.4) !important;
    color: #ffffff !important;
    transform: translate3d(0, -2px, 0) !important;
    background: rgba(0, 242, 255, 0.03) !important;
    box-shadow: 0 4px 12px rgba(0, 242, 255, 0.1) !important;
}

#why-view .filter-btn.active {
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.25), rgba(0, 242, 255, 0.04)) !important;
    border-color: var(--why-cyan) !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 20px rgba(0, 242, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: scale(1.02) translate3d(0, 0, 0) !important;
}

#why-view .filter-btn.active::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 20%; width: 60% !important; height: 2px !important;
    background: var(--why-cyan) !important;
    box-shadow: 0 0 10px var(--why-cyan) !important;
    border-radius: 2px !important;
}

#why-view .ai-btn {
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.18) 0%, rgba(255, 215, 0, 0.12) 100%) !important;
    border: 1px solid var(--why-cyan) !important;
    color: var(--why-cyan) !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    cursor: pointer;
    font-family: var(--font-code);
    font-size: 0.8rem;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 18px rgba(0, 242, 255, 0.18) !important;
    animation: ai-glow-pulse 3s infinite alternate !important;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

@keyframes ai-glow-pulse {
    0% {
        border-color: var(--why-cyan);
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.15);
    }
    100% {
        border-color: var(--atlas-gold);
        box-shadow: 0 0 22px rgba(255, 215, 0, 0.35);
    }
}

#why-view .ai-btn:hover {
    background: linear-gradient(135deg, var(--why-cyan) 0%, var(--atlas-gold) 100%) !important;
    color: var(--void) !important;
    border-color: transparent !important;
    box-shadow: 
        0 0 35px rgba(0, 242, 255, 0.5), 
        0 0 25px rgba(255, 215, 0, 0.3) !important;
    transform: scale(1.06) translateY(-2.5px) translateZ(0) !important;
}

/* Active tactile spring-scale click feedback on all interactive elements in the biomechanics engine */
#why-view .filter-btn:active,
#why-view .ai-btn:active,
#why-view .quiz-chip:active,
#why-view .quiz-start-btn:active,
#why-view .sm-btn:active,
#why-view .quiz-btn:active,
#why-view .modal-close:active {
    transform: scale(0.95) translate3d(0, 0, 0) !important;
    transition: transform 0.1s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

#why-view .ai-btn.loading {
    opacity: 0.7;
    cursor: wait;
}

#why-view .ai-btn.loading i {
    animation: spin-cw 1s linear infinite;
}

#why-view .anatomy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    padding-bottom: 70px;
}

/* Premium Biomechanical Glass Card */
#why-view .card {
    background: rgba(10, 25, 47, 0.45) !important;
    border: 1px solid rgba(0, 242, 255, 0.08) !important;
    border-left: 4px solid var(--why-cyan) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) translateZ(0) !important;
    -webkit-backdrop-filter: blur(20px) translateZ(0) !important;
    padding: 28px !important;
    cursor: pointer !important;
    transition: 
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
        border-color 0.3s ease, 
        border-left-color 0.3s ease,
        background-color 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 235px !important;
    box-shadow: 0 12px 30px rgba(2, 12, 27, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    animation: whyCardEntry 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) both;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    perspective: 1000px;
    transform: translate3d(0,0,0);
}

@keyframes whyCardEntry {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* We use ::before as a hardware-promoted hover glow overlay to avoid slow box-shadow paints */
#why-view .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 15px !important;
    background: 
        radial-gradient(circle at top right, rgba(0, 242, 255, 0.08), transparent 55%),
        radial-gradient(rgba(0, 242, 255, 0.02) 1.2px, transparent 1.2px) !important;
    background-size: 100% 100%, 16px 16px !important;
    opacity: 0.65;
    transition: opacity 0.35s ease, background 0.35s ease !important;
    pointer-events: none !important;
    z-index: 0;
    will-change: opacity;
}

#why-view .card::after {
    content: '' !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(0, 242, 255, 0.02) 45%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(0, 242, 255, 0.02) 55%,
        transparent 65%
    ) !important;
    transform: skewX(-25deg) translate3d(-150%, 0, 0) !important;
    transition: transform 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    pointer-events: none !important;
    z-index: 2;
    will-change: transform;
}

#why-view .card:hover::after {
    transform: skewX(-25deg) translate3d(150%, 0, 0) !important;
}

#why-view .card:hover {
    transform: translate3d(0, -8px, 0) scale(1.02) rotateX(1.5deg) rotateY(1.5deg) !important;
    border-color: rgba(0, 242, 255, 0.35) !important;
    border-left-color: var(--why-cyan) !important;
    background-color: rgba(14, 33, 61, 0.65) !important;
    box-shadow: 
        0 20px 40px rgba(0, 242, 255, 0.15), 
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#why-view .card:hover::before {
    opacity: 0.95 !important;
}

/* Specific dynamic category glow markers for Student Mode on the GPU layer */
#why-view .card.forelimb {
    border-left: 4px solid var(--why-cyan) !important;
}
#why-view .card.forelimb:hover::before {
    background: 
        radial-gradient(circle at top right, rgba(0, 242, 255, 0.16), transparent 60%),
        radial-gradient(rgba(0, 242, 255, 0.03) 1.2px, transparent 1.2px) !important;
}
#why-view .card.forelimb:hover {
    border-color: rgba(0, 242, 255, 0.35) !important;
    border-left-color: var(--why-cyan) !important;
}

#why-view .card.hindlimb {
    border-left: 4px solid #38b6ff !important;
}
#why-view .card.hindlimb .card-category {
    color: #38b6ff !important;
    border-color: rgba(56, 182, 255, 0.3) !important;
    background: rgba(56, 182, 255, 0.08) !important;
}
#why-view .card.hindlimb:hover::before {
    background: 
        radial-gradient(circle at top right, rgba(56, 182, 255, 0.16), transparent 60%),
        radial-gradient(rgba(56, 182, 255, 0.03) 1.2px, transparent 1.2px) !important;
}
#why-view .card.hindlimb:hover {
    border-color: rgba(56, 182, 255, 0.35) !important;
    border-left-color: #38b6ff !important;
}

#why-view .card.axial {
    border-left: 4px solid var(--atlas-gold) !important;
}
#why-view .card.axial .card-category {
    color: var(--atlas-gold) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: rgba(255, 215, 0, 0.08) !important;
}
#why-view .card.axial:hover::before {
    background: 
        radial-gradient(circle at top right, rgba(255, 215, 0, 0.14), transparent 60%),
        radial-gradient(rgba(255, 215, 0, 0.03) 1.2px, transparent 1.2px) !important;
}
#why-view .card.axial:hover {
    border-color: rgba(255, 215, 0, 0.35) !important;
    border-left-color: var(--atlas-gold) !important;
}

#why-view .card.wildlife {
    border-left: 4px solid #7e57c2 !important;
}
#why-view .card.wildlife .card-category {
    color: #b388ff !important;
    border-color: rgba(179, 136, 255, 0.3) !important;
    background: rgba(179, 136, 255, 0.08) !important;
}
#why-view .card.wildlife:hover::before {
    background: 
        radial-gradient(circle at top right, rgba(126, 87, 194, 0.16), transparent 60%),
        radial-gradient(rgba(126, 87, 194, 0.03) 1.2px, transparent 1.2px) !important;
}
#why-view .card.wildlife:hover {
    border-color: rgba(179, 136, 255, 0.35) !important;
    border-left-color: #b388ff !important;
}

#why-view .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    z-index: 1;
}

#why-view .card-category {
    font-family: var(--font-code);
    font-size: 0.7rem;
    color: var(--why-cyan);
    text-transform: uppercase;
    border: 1px solid rgba(0, 242, 255, 0.3);
    background: rgba(0, 242, 255, 0.08) !important;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
}

#why-view .card-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-main);
    z-index: 1;
    letter-spacing: -0.3px;
}

#why-view .card-comparison {
    font-size: 0.85rem;
    color: var(--text-mute);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
    font-weight: 500;
}

#why-view .card-comparison i {
    color: var(--atlas-gold);
    font-size: 0.75rem;
}

#why-view .card-preview {
    font-size: 0.9rem;
    color: var(--text-mute);
    line-height: 1.6;
    z-index: 1;
    position: relative;
    max-height: 72px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0.3) 75%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0.3) 75%, transparent 100%) !important;
}

#why-view .card-footer {
    margin-top: auto;
    padding-top: 18px;
    text-align: right;
    z-index: 1;
}

#why-view .read-more {
    font-family: var(--font-code);
    font-size: 0.8rem;
    color: var(--why-cyan);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    transition: color 0.3s ease;
}

#why-view .read-more i {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: transform;
}

#why-view .card:hover .read-more {
    color: var(--atlas-gold) !important;
}

#why-view .card:hover .read-more i {
    transform: translate3d(6px, 0, 0) !important;
}

/* Modal (High-Tech Diagnostic Scanner Panel) */
#why-view .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 12, 27, 0.85);
    backdrop-filter: blur(0px) translateZ(0);
    -webkit-backdrop-filter: blur(0px) translateZ(0);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), backdrop-filter 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#why-view .modal-overlay.open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(16px) translateZ(0);
    -webkit-backdrop-filter: blur(16px) translateZ(0);
}

#why-view .modal-content {
    background: rgba(10, 20, 38, 0.97) !important;
    width: 100%;
    max-width: 980px;
    max-height: 85vh;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 242, 255, 0.18) !important;
    box-shadow: 
        0 25px 65px rgba(0, 0, 0, 0.65), 
        0 0 45px rgba(0, 242, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    overflow-y: auto;
    position: relative;
    transform: translate3d(0, 35px, 0) scale(0.97) !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.45s ease, border-color 0.4s ease !important;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    backdrop-filter: blur(20px);
    will-change: transform, opacity;
}

#why-view .modal-content::before {
    content: '' !important;
    position: absolute !important;
    top: 12px; left: 12px; width: 16px; height: 16px !important;
    border-top: 2px solid var(--why-cyan) !important;
    border-left: 2px solid var(--why-cyan) !important;
    pointer-events: none !important;
    z-index: 5;
    opacity: 0.85;
}

#why-view .modal-content::after {
    content: '' !important;
    position: absolute !important;
    bottom: 12px; right: 12px; width: 16px; height: 16px !important;
    border-bottom: 2px solid var(--why-cyan) !important;
    border-right: 2px solid var(--why-cyan) !important;
    pointer-events: none !important;
    z-index: 5;
    opacity: 0.85;
}

#why-view .modal-overlay.open .modal-content {
    transform: translate3d(0, 0, 0) scale(1) !important;
}

#why-view .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--text-mute);
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#why-view .modal-close:hover {
    background: rgba(255, 107, 107, 0.15) !important;
    border-color: #ff6b6b !important;
    color: #ff6b6b !important;
    transform: rotate(90deg) scale(1.08);
}

#why-view .modal-image-col {
    background: #020c1b radial-gradient(circle at center, rgba(0, 242, 255, 0.05), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

#why-view .modal-image-col::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(rgba(0, 242, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 242, 255, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.01) 1px, transparent 1px) !important;
    background-size: 16px 16px, 32px 32px, 32px 32px !important;
    background-position: center center !important;
    opacity: 0.8;
    pointer-events: none !important;
    z-index: 1;
}

#why-view .modal-image-col.img-loading::before {
    content: "";
    position: absolute;
    inset: 30px;
    border-radius: 8px;
    background:
        linear-gradient(90deg,
            rgba(0,242,255,0.04) 0%,
            rgba(0,242,255,0.18) 50%,
            rgba(0,242,255,0.04) 100%);
    background-size: 200% 100%;
    animation: imgShimmer 1.4s ease-in-out infinite;
}

#why-view .modal-image-col.img-loading::after {
    content: "Loading diagnostics…";
    position: absolute;
    color: var(--why-cyan);
    font-family: var(--font-code);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
}

#why-view .modal-image-col.img-error::before {
    content: "Diagnostic feed offline";
    color: #ff6b6b;
    font-family: var(--font-code);
    font-size: 0.85rem;
    text-align: center;
    opacity: 0.7;
}

#why-view .modal-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 242, 255, 0.2) !important;
    border: 1px solid rgba(0, 242, 255, 0.25) !important;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: transform, opacity;
}

#why-view .modal-img.img-loaded {
    opacity: 1;
    transform: scale(1) !important;
}

#why-view .modal-text-col {
    padding: 40px;
    display: flex;
    flex-direction: column;
}

#why-view .modal-category {
    font-family: var(--font-code);
    color: var(--why-cyan);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
    font-weight: bold;
}

#why-view .modal-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-main);
    line-height: 1.2;
}

#why-view .modal-comparison-tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(255, 215, 0, 0.1);
    color: var(--atlas-gold);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 25px;
    font-weight: bold;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    font-family: var(--font-code);
}

#why-view .modal-section {
    margin-bottom: 25px;
}

#why-view .modal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 242, 255, 0.15);
    padding-bottom: 6px;
}

#why-view .modal-section h3 {
    font-family: var(--font-code);
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    color: var(--why-cyan);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

#why-view .sm-btn {
    background: rgba(255, 215, 0, 0.04) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    color: var(--atlas-gold);
    font-size: 0.72rem;
    font-family: var(--font-code);
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    animation: btnBreathe 3s infinite alternate ease-in-out !important;
}

@keyframes btnBreathe {
    0% {
        box-shadow: 0 0 4px rgba(255, 215, 0, 0.1);
        border-color: rgba(255, 215, 0, 0.4);
    }
    100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
        border-color: var(--atlas-gold);
    }
}

#why-view .sm-btn:hover {
    background: var(--atlas-gold) !important;
    color: var(--void) !important;
    border-color: transparent !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.4) !important;
    transform: translateY(-1px);
}

#why-view .modal-desc {
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.75;
    margin: 0;
}

#why-view .modal-clinical {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.04), transparent) !important;
    border: 1px solid rgba(255, 215, 0, 0.12) !important;
    border-left: 4px solid var(--atlas-gold) !important;
    padding: 18px 22px !important;
    color: var(--text-mute) !important;
    font-size: 0.95rem !important;
    font-style: italic !important;
    border-radius: 8px !important;
    line-height: 1.65 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* Highly refined carbon grid simulation box */
#why-view .ai-response-box {
    margin-top: 24px !important;
    padding: 20px 24px !important;
    background: 
        linear-gradient(45deg, rgba(255, 255, 255, 0.01) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.01) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.01) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.01) 75%),
        radial-gradient(circle at center, rgba(0, 242, 255, 0.04) 1.2px, transparent 1.2px),
        linear-gradient(135deg, #091930 0%, #030c1b 100%) !important;
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 16px 16px, 100% 100% !important;
    border: 1px dashed rgba(0, 242, 255, 0.35) !important;
    border-left: 4px solid var(--why-cyan) !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
    line-height: 1.75 !important;
    box-shadow: 
        0 16px 40px rgba(0, 242, 255, 0.06), 
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 20px rgba(0, 242, 255, 0.03) !important;
    display: none;
    position: relative;
    overflow: hidden;
    animation: whyBoxFadeIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
    will-change: transform, opacity;
}

#why-view .ai-response-box::after {
    content: '' !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--why-cyan) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px var(--why-cyan) !important;
    animation: livePulse 1.5s infinite !important;
}

#why-view .ai-response-box strong {
    color: var(--why-cyan) !important;
    font-weight: 700 !important;
}

@keyframes whyBoxFadeIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Quiz Overlay */
#why-view .quiz-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 12, 27, 0.9) !important;
    backdrop-filter: blur(25px) !important;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#why-view .quiz-overlay.open {
    opacity: 1;
    visibility: visible;
}

#why-view .quiz-card {
    background: var(--bg-card);
    border: 1px solid var(--why-cyan);
    border-radius: 16px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 50px rgba(0, 242, 255, 0.15);
    position: relative;
}

#why-view .quiz-question {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 30px;
}

#why-view .quiz-options {
    display: grid;
    gap: 15px;
    margin-bottom: 20px;
}

#why-view .quiz-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 15px;
    border-radius: 8px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    font-size: 1rem;
    will-change: transform, box-shadow;
}

#why-view .quiz-btn:hover {
    border-color: var(--why-cyan);
    background: rgba(0, 242, 255, 0.05);
}

#why-view .quiz-btn.correct {
    background: rgba(0, 242, 255, 0.2) !important;
    border-color: var(--why-cyan) !important;
}

#why-view .quiz-btn.wrong {
    background: rgba(255, 100, 100, 0.2) !important;
    border-color: #ff6464 !important;
    opacity: 0.6;
}

#why-view .quiz-feedback {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 215, 0, 0.1);
    color: var(--atlas-gold);
    border-radius: 8px;
    display: none;
    text-align: left;
    line-height: 1.5;
}

#why-view .quiz-feedback.fb-good {
    background: rgba(0, 242, 255, 0.10);
    color: var(--why-cyan);
    border: 1px solid rgba(0, 242, 255, 0.35);
}

#why-view .quiz-feedback.fb-bad {
    background: rgba(255, 100, 100, 0.10);
    color: #ffb4b4;
    border: 1px solid rgba(255, 100, 100, 0.35);
}
#why-view .quiz-feedback strong { font-size: 1.05rem; display: inline-block; margin-bottom: 4px; }
#why-view .quiz-feedback .qf-correct { display: block; font-size: .9rem; opacity: .9; margin-top: 4px; }
#why-view .quiz-feedback .qf-explain { margin-top: 8px; font-size: .92rem; line-height: 1.55; opacity: .92; }

/* HUD score bump animation when correct */
#why-view .quiz-hud-cell .hud-bump {
    animation: hud-bump-anim .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hud-bump-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.18); filter: brightness(1.2); }
    100% { transform: scale(1); }
}

/* ===== Confetti burst on correct answer ===== */
.qz-confetti {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 100000;
    will-change: transform, opacity;
    animation: qz-confetti-fly .85s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes qz-confetti-fly {
    0%   { transform: translate(-50%, -50%) scale(1)   rotate(0deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.5) rotate(var(--rot)); opacity: 0; }
}

/* ===== Streak milestone popup ===== */
.qz-milestone {
    position: fixed;
    top: 30%; left: 50%;
    transform: translate(-50%, -50%) scale(.6);
    background: linear-gradient(135deg, #00f2ff, #ffd466);
    color: #04111a;
    font-family: var(--font-code, monospace);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 1px;
    padding: 18px 32px;
    border-radius: 999px;
    box-shadow: 0 20px 50px rgba(0,242,255,0.45), 0 0 0 4px rgba(255,255,255,0.08);
    z-index: 100001;
    pointer-events: none;
    opacity: 0;
    animation: qz-milestone-in .35s cubic-bezier(.34,1.56,.64,1) forwards;
    will-change: transform, opacity;
}
.qz-milestone.out {
    animation: qz-milestone-out .45s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes qz-milestone-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
}
@keyframes qz-milestone-out {
    to { opacity: 0; transform: translate(-50%, -80%) scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
    .qz-confetti, .qz-milestone, #why-view .quiz-hud-cell .hud-bump { animation: none !important; }
    .qz-confetti, .qz-milestone { display: none; }
}

/* ===== Engineering Challenge — Session UI (Cheerful + Professional) ===== */
#why-view .quiz-card {
    max-width: 700px;
    padding: 36px 32px 30px;
    text-align: left;
    background:
        radial-gradient(1200px 400px at 50% -120px, rgba(0,242,255,0.18), transparent 60%),
        linear-gradient(180deg, rgba(20,28,48,0.96), rgba(12,16,28,0.96));
    border: 1px solid rgba(0,242,255,0.35);
    border-radius: 18px;
    box-shadow:
        0 25px 60px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 0 80px rgba(0,242,255,0.10);
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 40px, 0) scale(0.95) !important;
    opacity: 0 !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, border-color 0.3s ease !important;
    will-change: transform, opacity;
}

#why-view .quiz-overlay.open .quiz-card {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1 !important;
}
/* subtle confetti dot pattern in background */
#why-view .quiz-card::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(0,242,255,0.18) 1.5px, transparent 2.5px),
        radial-gradient(circle at 82% 26%, rgba(255,200,80,0.18) 1.2px, transparent 2.5px),
        radial-gradient(circle at 30% 78%, rgba(120,255,200,0.18) 1.2px, transparent 2.5px),
        radial-gradient(circle at 70% 88%, rgba(220,140,255,0.18) 1.2px, transparent 2.5px);
    background-size: 320px 280px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
#why-view .quiz-card > * { position: relative; z-index: 1; }

#why-view .quiz-setup-title {
    color: var(--why-cyan);
    font-family: var(--font-code);
    font-size: .82rem; letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
#why-view .quiz-setup-title::before {
    content: "▸"; opacity: .7;
}
#why-view .quiz-chips {
    display: flex; flex-wrap: wrap; gap: 10px;
}
#why-view .quiz-chip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--text-main);
    padding: 10px 18px; border-radius: 999px;
    cursor: pointer; font-size: .9rem;
    font-weight: 500;
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
#why-view .quiz-chip:hover {
    border-color: var(--why-cyan);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,242,255,0.18);
}
#why-view .quiz-chip.active {
    background: linear-gradient(135deg, rgba(0,242,255,0.30), rgba(0,180,220,0.12));
    border-color: var(--why-cyan);
    color: #ffffff;
    box-shadow:
        0 0 0 2px rgba(0,242,255,0.28),
        0 6px 18px rgba(0,242,255,0.25);
    transform: translateY(-1px);
}
#why-view .quiz-start-btn {
    margin-top: 26px;
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, #00f2ff, #00b9d6) !important;
    color: #04111a !important;
    border: none !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 14px !important;
    box-shadow: 0 10px 30px rgba(0,242,255,0.30);
    transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease;
}
#why-view .quiz-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,242,255,0.42);
}
#why-view .ai-btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: var(--text-main) !important;
}

#why-view .quiz-hud {
    display: flex; justify-content: space-between; gap: 10px;
    margin-bottom: 12px; font-family: var(--font-code);
}
#why-view .quiz-hud-cell {
    flex: 1;
    background: linear-gradient(180deg, rgba(0,242,255,0.10), rgba(0,242,255,0.04));
    border: 1px solid rgba(0,242,255,0.25);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex; flex-direction: column; align-items: center;
    color: var(--text-main);
    transition: transform .2s ease;
}
#why-view .quiz-hud-cell:hover { transform: translateY(-2px); }
#why-view .quiz-hud-lbl {
    font-size: .68rem; letter-spacing: 2px; opacity: .75;
    text-transform: uppercase;
}
#why-view .quiz-hud-cell span:not(.quiz-hud-lbl) {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 2px;
}
#why-view .quiz-progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
#why-view .quiz-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #00f2ff, #7df9ff, #ffd466);
    background-size: 200% 100%;
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 0 10px rgba(0,242,255,0.50);
    animation: shimmerProgress 3s linear infinite;
}
@keyframes shimmerProgress {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
#why-view .quiz-topic-tag {
    display: inline-block;
    font-family: var(--font-code);
    font-size: .72rem; letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0,242,255,0.18), rgba(255,212,102,0.12));
    border: 1px solid rgba(0,242,255,0.35);
    color: var(--why-cyan);
    margin-bottom: 14px;
    text-transform: uppercase;
}
#why-view .quiz-question {
    font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 22px;
    color: #ffffff;
    font-weight: 500;
}

/* Improve quiz option buttons */
#why-view .quiz-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 14px 18px;
    border-radius: 12px;
    color: var(--text-main);
    cursor: pointer;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    font-size: .98rem;
    position: relative;
    overflow: hidden;
    will-change: transform, border-color, background-color, box-shadow;
}
#why-view .quiz-btn:hover:not(:disabled) {
    border-color: var(--why-cyan);
    background: rgba(0,242,255,0.08);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0,242,255,0.15);
}

/* Satisfying bounce select feedback for Correct selections */
#why-view .quiz-btn.correct {
    background: linear-gradient(135deg, rgba(80,220,150,0.30), rgba(0,242,255,0.18)) !important;
    border-color: #50dc96 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(80,220,150,0.35), 0 6px 20px rgba(80,220,150,0.25) !important;
    animation: quizBtnCorrect 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

@keyframes quizBtnCorrect {
    0% { transform: scale(1); }
    40% { transform: scale(1.05); }
    70% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Physical error shake feedback for Wrong selections */
#why-view .quiz-btn.wrong {
    background: rgba(255,100,100,0.18) !important;
    border-color: #ff7070 !important;
    color: #ffd0d0 !important;
    opacity: 0.85;
    box-shadow: 0 0 12px rgba(255, 112, 67, 0.25) !important;
    animation: quizBtnWrong 0.4s ease-in-out both !important;
}

@keyframes quizBtnWrong {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* Results screen */
#why-view .quiz-result-badge {
    width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,212,102,0.40), rgba(0,242,255,0.10));
    border: 2px solid var(--why-cyan);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    font-size: 2.4rem;
    color: #ffd466;
    box-shadow:
        0 0 30px rgba(0,242,255,0.40),
        0 0 60px rgba(255,212,102,0.20);
    animation: badgeBounce 0.7s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes badgeBounce {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
#why-view .quiz-result-title {
    text-align: center;
    font-family: var(--font-code);
    letter-spacing: 4px;
    opacity: .85;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: .82rem;
    color: var(--why-cyan);
}
#why-view .quiz-result-score {
    text-align: center;
    font-size: 3.2rem;
    background: linear-gradient(135deg, #00f2ff, #ffd466);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
}
#why-view .quiz-result-grade {
    text-align: center;
    font-family: var(--font-code);
    color: #ffffff;
    opacity: .9;
    margin-bottom: 22px;
    font-size: .95rem;
    letter-spacing: 1px;
}
#why-view .quiz-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
#why-view .quiz-result-stats > div {
    background: linear-gradient(180deg, rgba(0,242,255,0.10), rgba(0,242,255,0.04));
    border: 1px solid rgba(0,242,255,0.20);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    font-family: var(--font-code);
    transition: transform .15s ease;
}
#why-view .quiz-result-stats > div:hover { transform: translateY(-2px); }
#why-view .quiz-result-stats > div span:last-child {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
    display: block;
}
#why-view .quiz-result-stats span:first-child { display:block; font-size:.7rem; opacity:.65; letter-spacing: 1.5px; }
#why-view .quiz-review-box {
    max-height: 260px; overflow-y: auto;
    background: rgba(0,0,0,0.18); border-radius: 8px;
    padding: 10px;
}
#why-view .quiz-review-head {
    font-family: var(--font-code); letter-spacing: 2px;
    color: var(--why-cyan); font-size: .8rem; margin-bottom: 8px; text-align:center;
}
#why-view .quiz-review-perfect {
    text-align: center; color: var(--why-cyan); padding: 18px;
}
#why-view .quiz-review-item {
    border-left: 3px solid #ff6464;
    padding: 8px 12px; margin-bottom: 8px;
    background: rgba(255,255,255,0.03); border-radius: 4px;
}
#why-view .qri-title {
    font-size: .72rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--why-cyan); margin-bottom: 4px;
}
#why-view .qri-q { font-size: .95rem; margin-bottom: 4px; }
#why-view .qri-a { color: #00f2ff; font-size: .88rem; margin-bottom: 4px; }
#why-view .qri-exp { font-size: .82rem; opacity: .8; line-height: 1.4; }

#why-view .site-footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 60px;
    border-top: 1px solid var(--glass-border);
    color: var(--text-mute);
    font-family: var(--font-code);
    font-size: 0.85rem;
    letter-spacing: 1px;
    opacity: 0.8;
    transition: all 0.3s;
}

#why-view .site-footer:hover {
    opacity: 1;
    color: var(--why-cyan);
}

/* --- MOBILE OPTIMIZATION (Mobile-First) --- */
@media (max-width: 900px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .portal-grid {
        gap: 30px;
        margin-top: 30px;
    }

    .workspace {
        grid-template-columns: 1fr;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        height: auto;
        max-height: 200px;
        margin-bottom: 20px;
    }

    .content-area {
        padding: 20px;
        height: auto;
        min-height: 500px;
    }

    .quiz-menu-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
        max-height: 60vh;
        display: block;
    }

    .quiz-mode-card {
        margin-bottom: 15px;
    }

    .quiz-modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 20px;
    }

    .nav-bar {
        flex-direction: column;
        gap: 15px;
    }

    .badge {
        display: none;
    }

    .comp-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* WHY Section Mobile */
    #why-view h1 {
        font-size: 2.2rem;
    }

    #why-view .controls {
        flex-direction: column;
        align-items: stretch;
    }

    #why-view .search-wrapper {
        max-width: 100%;
    }

    #why-view .modal-content {
        grid-template-columns: 1fr;
    }

    #why-view .modal-image-col {
        height: 200px;
        padding: 10px;
    }

    #why-view .modal-text-col {
        padding: 25px;
    }

    #why-view .modal-title {
        font-size: 1.8rem;
    }

    #why-view .modal-img {
        max-height: 100%;
        width: auto;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .portal-card {
        width: 280px;
        height: 350px;
    }

    .orb-icon {
        font-size: 4rem;
    }

    .card-label {
        font-size: 1.5rem;
    }

    .h-title {
        font-size: 2rem;
    }

    .topic-btn {
        padding: 15px 18px;
        font-size: 0.85rem;
    }

    .quiz-option {
        padding: 15px 20px;
        font-size: 0.95rem;
    }

    .quiz-question-text {
        font-size: 1.3rem;
    }

    #why-view .card {
        min-height: 200px;
        padding: 20px;
    }

    #why-view .card-title {
        font-size: 1.1rem;
    }

    #why-view .modal-title {
        font-size: 1.5rem;
    }

    .stat-val {
        font-size: 2rem;
    }
}

/* Smooth scrolling for better mobile experience */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal overflow on mobile */
body {
    overflow-x: hidden;
}

/* Improve touch targets on mobile */
@media (max-width: 900px) {

    .topic-btn,
    .quiz-option,
    .quiz-mode-card,
    .filter-btn,
    .nav-btn {
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* ============================================================
   MOBILE NAV — compact spacing on phones so labels still fit.
   Nav-btns marked .nav-btn-keep-label (e.g. BOOKMARKS, QUIZ MODE)
   keep BOTH icon and label so new students always know what they're tapping.
   Only buttons WITHOUT that class become icon-only when space is tight.
   ============================================================ */
@media (max-width: 600px) {
    .nav-bar {
        gap: 6px !important;
        padding: 8px 10px !important;
    }
    /* Compact every nav-btn slightly so multiple buttons fit a phone row */
    .nav-bar .nav-btn {
        padding: 9px 12px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.5px;
    }
    .nav-bar .nav-btn i { font-size: 0.95rem; }
    /* Only icon-only-by-default for explicitly-marked secondary buttons
       (e.g. Elite Toggle). Keep label whenever .nav-btn-keep-label is present
       OR when it's the BACK button (first-child). */
    .nav-bar .nav-btn.nav-btn-icon-only-mobile:not(.nav-btn-keep-label) {
        padding: 10px 12px !important;
        min-width: 44px;
        font-size: 0;
    }
    .nav-bar .nav-btn.nav-btn-icon-only-mobile:not(.nav-btn-keep-label) i {
        font-size: 1.05rem;
        margin: 0;
    }
    .nav-bar .nav-btn.nav-btn-icon-only-mobile:not(.nav-btn-keep-label) span {
        display: none;
    }
    /* Crumb shrinks slightly */
    .nav-bar .badge {
        font-size: 0.68rem !important;
        padding: 5px 8px !important;
    }
}

/* On very small phones (≤380px), labels can wrap onto multiple lines
   if 4 buttons share the row. Allow flex-wrap as a graceful fallback. */
@media (max-width: 380px) {
    .nav-bar { flex-wrap: wrap !important; }
}

/* =========================================================
   PROFESSIONAL THEME OVERRIDES - ENHANCED WITH MEDICAL COLORS
   ========================================================= */

/* Theme Toggle Button */
.theme-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-family: var(--font-code);
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
    border-color: var(--atlas-gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

/* ============================================================
   AUTO-HIDE FLOATING TOGGLE WHEN ANY OVERLAY/TOOLTIP IS OPEN
   Triggers (any one of these = hide):
     • body.body-modal-open  (set by atlas quiz openMenu/close)
     • .modal-overlay.open present (WHY card modal)
     • .quiz-overlay.open present  (WHY engineering challenge)
     • a glossary tooltip is being shown via :focus / :hover on .gloss-term
   Smooth fade so it never feels jumpy, fully reversible.
   ============================================================ */
body.body-modal-open .theme-toggle-btn,
body.body-modal-open .elite-toggle-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.85);
}

/* Modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+) — :has() lets pure CSS detect open overlays */
@supports selector(:has(*)) {
    body:has(.modal-overlay.open) .theme-toggle-btn,
    body:has(.modal-overlay.open) .elite-toggle-btn,
    body:has(.quiz-overlay.open) .theme-toggle-btn,
    body:has(.quiz-overlay.open) .elite-toggle-btn,
    body:has(.gloss-term:focus) .theme-toggle-btn,
    body:has(.gloss-term:focus) .elite-toggle-btn {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px) scale(0.85);
    }
    /* On mobile (where tooltip is fixed at viewport bottom), also hide on hover */
    @media (max-width: 600px) {
        body:has(.gloss-term:hover) .theme-toggle-btn,
        body:has(.gloss-term:hover) .elite-toggle-btn {
            opacity: 0;
            pointer-events: none;
            transform: translateY(20px) scale(0.85);
        }
    }
}

/* Mobile: shrink toggle slightly so it never crowds the corner */
@media (max-width: 600px) {
    .theme-toggle-btn {
        padding: 10px 14px;
        font-size: 0.78rem;
        bottom: 14px;
        left: 14px;
    }
    .theme-toggle-btn #theme-text {
        display: none;   /* icon-only on tiny screens */
    }
}


/* Elite Toggle Button */
.elite-toggle-btn {
    display: none;
    /* Hidden by default, shown via JS in atlas */
}

.elite-toggle-btn.active {
    background: var(--atlas-gold) !important;
    color: var(--void) !important;
    border-color: var(--atlas-gold) !important;
}

/* Professional Mode - Medical Color Palette with Warmth */
body.professional-mode {
    /* Enhanced Medical Palette */
    --void: #f0f4f8;
    /* Soft blue-grey background instead of stark white */
    --glass: rgba(255, 255, 255, 0.95);
    --border: rgba(21, 101, 192, 0.15);
    /* Subtle blue borders */

    --atlas-gold: #1565c0;
    /* Primary Medical Blue */
    --atlas-glow: rgba(21, 101, 192, 0.15);

    --why-cyan: #00897b;
    /* Medical Teal - calming */
    --why-glow: rgba(0, 137, 123, 0.15);

    /* New Accent Colors for Visual Interest */
    --medical-coral: #ff7043;
    /* Warm accent for warnings/important */
    --medical-purple: #7e57c2;
    /* Secondary accent for differentiation */
    --medical-amber: #ffa726;
    /* Tertiary accent for highlights */
    --medical-sage: #66bb6a;
    /* Success/healthy indicators */

    --text-main: #263238;
    /* Dark Blue-Grey */
    --text-mute: #546e7a;
    /* Medium Grey */

    --bg-card: #ffffff;
    --glass-border: rgba(21, 101, 192, 0.2);

    /* Gradient Background instead of flat */
    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 50%, #f0f4f8 100%) !important;
    color: var(--text-main);
    font-size: 16px;
}

/* Professional Mode - Subtle Depth instead of Neon */
body.professional-mode #atlas-view {
    background-image: 
        radial-gradient(rgba(21, 101, 192, 0.035) 1.2px, transparent 1.2px),
        linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 50%, #f0f4f8 100%) !important;
    background-size: 24px 24px, 100% 100% !important;
    background-attachment: fixed !important;
}

body.professional-mode .portal-card::before {
    content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: 0 8px 30px rgba(21, 101, 192, 0.04), 0 1px 2px rgba(21, 101, 192, 0.02);
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: -1;
    will-change: opacity;
}

body.professional-mode .portal-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transform: translate3d(-100%, -100%, 0);
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    will-change: transform;
    pointer-events: none;
}

body.professional-mode .portal-card {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) translateZ(0) !important;
    -webkit-backdrop-filter: blur(16px) translateZ(0) !important;
    border: 1px solid rgba(21, 101, 192, 0.12) !important;
    border-left: 5px solid var(--region-accent, var(--atlas-gold)) !important;
    box-shadow: none !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s ease, border-left-width 0.4s ease !important;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

body.professional-mode .portal-card:hover {
    transform: translateY(-6px) scale(1.02) translateZ(0) !important;
    border-color: var(--region-accent, var(--atlas-gold)) !important;
    border-left-width: 8px !important;
    box-shadow: 0 15px 35px rgba(21, 101, 192, 0.1) !important;
}

body.professional-mode .portal-card:hover::after {
    transform: translate3d(100%, 100%, 0);
}

/* Region-Specific Color Accent Codes */
body.professional-mode .portal-card[onclick*="Introduction"] { --region-accent: var(--medical-sage); }
body.professional-mode .portal-card[onclick*="Forelimb"] { --region-accent: var(--medical-purple); }
body.professional-mode .portal-card[onclick*="Hindlimb"] { --region-accent: var(--atlas-gold); }
body.professional-mode .portal-card[onclick*="Thorax"] { --region-accent: var(--medical-coral); }
body.professional-mode .portal-card[onclick*="Abdomen"] { --region-accent: var(--why-cyan); }
body.professional-mode .portal-card[onclick*="Head"] { --region-accent: var(--medical-amber); }
body.professional-mode .portal-card[onclick*="Histology"] { --region-accent: #ab47bc; }
body.professional-mode .portal-card[onclick*="Embryology"] { --region-accent: #ec407a; }

/* Lens-Pocket Icon Frame style */
body.professional-mode .portal-card .orb-icon {
    font-size: 2.2rem !important;
    margin-bottom: 20px !important;
    color: var(--region-accent, var(--atlas-gold)) !important;
    filter: none !important;
    text-shadow: none !important;
    background: #ffffff;
    border: 1px solid rgba(21, 101, 192, 0.1);
    box-shadow: 0 4px 10px rgba(21, 101, 192, 0.04);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease;
    z-index: 2;
}

body.professional-mode .portal-card:hover .orb-icon {
    transform: scale(1.1) rotate(5deg) !important;
    background: var(--region-accent, var(--atlas-gold)) !important;
    color: #ffffff !important;
    border-color: var(--region-accent, var(--atlas-gold)) !important;
}

/* Card labels and typography */
body.professional-mode .card-label {
    color: var(--text-main) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    font-family: var(--font-ui) !important;
    transition: color 0.3s ease;
}

body.professional-mode .portal-card:hover .card-label {
    color: var(--region-accent, var(--atlas-gold)) !important;
}

body.professional-mode .card-sub {
    color: var(--text-mute) !important;
    font-size: 0.8rem !important;
    font-family: var(--font-code) !important;
    letter-spacing: 0.5px !important;
    margin-top: 4px;
}

/* Card progress bar style overrides */
body.professional-mode .card-progress-container {
    width: 80%;
    margin-top: 15px;
    z-index: 2;
}

body.professional-mode .card-progress-bar {
    height: 4px !important;
    background: rgba(21, 101, 192, 0.08) !important;
    border-radius: 2px !important;
    overflow: hidden;
}

body.professional-mode .card-progress-fill {
    background: linear-gradient(90deg, var(--region-accent, var(--atlas-gold)), var(--medical-coral, #ff7043)) !important;
    height: 100%;
    border-radius: 2px;
}

body.professional-mode .card-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem !important;
    font-family: var(--font-code) !important;
    color: var(--text-mute) !important;
    margin-top: 6px;
    font-weight: 600;
}

body.professional-mode .hero-title {
    background: linear-gradient(135deg, #1565c0 0%, #00897b 100%);
    /* Blue to Teal gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    font-weight: 800;
}

/* Professional Mode - Clean Navigation with Color Accents */
body.professional-mode .nav-bar {
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 15px 25px !important;
    border-radius: 30px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 10px 30px rgba(21, 101, 192, 0.05) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

body.professional-mode #atlas-crumb {
    font-family: var(--font-code) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: rgba(21, 101, 192, 0.05) !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    color: var(--atlas-gold) !important;
    font-weight: 700;
}

body.professional-mode .nav-btn {
    border: 1px solid rgba(21, 101, 192, 0.18) !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 5px rgba(21, 101, 192, 0.03) !important;
}

body.professional-mode .nav-btn:hover {
    background: rgba(21, 101, 192, 0.05) !important;
    border-color: var(--atlas-gold) !important;
    color: var(--atlas-gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(21, 101, 192, 0.08) !important;
}

body.professional-mode .nav-btn:active {
    transform: scale(0.95) !important;
}

/* Color thematic buttons in header */
body.professional-mode .nav-btn[onclick*="showBookmarks"] {
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #ff8f00 !important;
}
body.professional-mode .nav-btn[onclick*="showBookmarks"]:hover {
    background: #fff8e1 !important;
    border-color: #ffa000 !important;
}

body.professional-mode .nav-btn[onclick*="showHighlights"] {
    border-color: rgba(255, 112, 67, 0.3) !important;
    color: #d84315 !important;
}
body.professional-mode .nav-btn[onclick*="showHighlights"]:hover {
    background: #fbe9e7 !important;
    border-color: #ff7043 !important;
}

body.professional-mode .nav-btn[onclick*="showNotes"] {
    border-color: rgba(0, 137, 123, 0.3) !important;
    color: #00695c !important;
}
body.professional-mode .nav-btn[onclick*="showNotes"]:hover {
    background: #e0f2f1 !important;
    border-color: #00897b !important;
}

body.professional-mode .nav-btn[onclick*="quizApp"] {
    border-color: rgba(126, 87, 194, 0.3) !important;
    color: #4527a0 !important;
}
body.professional-mode .nav-btn[onclick*="quizApp"]:hover {
    background: #f3e5f5 !important;
    border-color: #7e57c2 !important;
}

/* Elite Toggle Button */
body.professional-mode .elite-toggle-btn {
    border-color: rgba(21, 101, 192, 0.3) !important;
    color: var(--atlas-gold) !important;
}
body.professional-mode .elite-toggle-btn:hover {
    background: rgba(21, 101, 192, 0.05) !important;
    border-color: var(--atlas-gold) !important;
}
body.professional-mode .elite-toggle-btn.active {
    background: var(--atlas-gold) !important;
    color: #ffffff !important;
    border-color: var(--atlas-gold) !important;
}

/* Professional Mode - Content Areas with Soft Color Coding */
body.professional-mode .workspace {
    background: transparent;
    gap: 25px;
}

body.professional-mode .sidebar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    border-top: 4px solid var(--atlas-gold) !important;
    box-shadow: 0 4px 15px rgba(21, 101, 192, 0.04) !important;
    border-radius: 16px !important;
    overflow-y: auto;
}

/* Progress Badge in Sidebar */
body.professional-mode .read-progress-badge {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    border-left: 4px solid var(--medical-sage) !important;
    color: var(--text-main) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.02) !important;
}

body.professional-mode .read-progress-badge .rp-text {
    color: #2e7d32 !important;
    font-weight: 700 !important;
}

body.professional-mode .read-progress-badge .rp-bar {
    background: rgba(21, 101, 192, 0.08) !important;
    height: 5px !important;
    border-radius: 3px !important;
}

body.professional-mode .read-progress-badge .rp-fill {
    background: linear-gradient(90deg, var(--medical-sage), #00897b) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 4px rgba(102, 187, 106, 0.3) !important;
}

body.professional-mode .read-progress-badge .rp-pct {
    color: var(--text-main) !important;
    font-weight: 700 !important;
}

body.professional-mode .topic-btn {
    border-bottom: 1px solid rgba(21, 101, 192, 0.06) !important;
    color: var(--text-mute) !important;
    font-family: var(--font-code) !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    background: transparent !important;
    border-left: 4px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body.professional-mode .topic-btn:hover {
    color: var(--atlas-gold) !important;
    background: rgba(21, 101, 192, 0.03) !important;
    border-left-color: rgba(21, 101, 192, 0.4) !important;
    padding-left: 24px !important;
}

body.professional-mode .topic-btn.active {
    background: linear-gradient(90deg, rgba(21, 101, 192, 0.06), transparent) !important;
    color: var(--atlas-gold) !important;
    border-left-color: var(--atlas-gold) !important;
    font-weight: 700 !important;
    padding-left: 24px !important;
    border-bottom-color: rgba(21, 101, 192, 0.1) !important;
}

/* Checked/Read topic indicators */
body.professional-mode .topic-btn.is-read {
    background: rgba(46, 125, 50, 0.03) !important;
    border-left-color: rgba(46, 125, 50, 0.3) !important;
}

body.professional-mode .topic-btn.is-read.active {
    background: linear-gradient(90deg, rgba(46, 125, 50, 0.06), transparent) !important;
    border-left-color: #2e7d32 !important;
}

body.professional-mode .topic-btn .read-tick {
    color: #2e7d32 !important;
    filter: none !important;
}

body.professional-mode .content-area {
    background: rgba(255, 255, 255, 0.9) !important;
    /* Filtered ancestors make position:fixed glossary definitions panel-relative.
       Keep this panel unfiltered so definitions stay beside the tapped word. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    border-top: 4px solid var(--medical-purple) !important;
    box-shadow: 0 8px 30px rgba(21, 101, 192, 0.05) !important;
    border-radius: 16px !important;
    padding: 35px !important;
}

body.professional-mode .h-title {
    color: var(--text-main) !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

body.professional-mode .h-title::after {
    display: none;
}

body.professional-mode .h-sub {
    color: var(--text-mute) !important;
    font-family: var(--font-code) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block;
}

body.professional-mode .desc-text {
    color: var(--text-main);
    line-height: 1.8;
    font-size: 1.1rem;
}

body.professional-mode .desc-text b {
    color: var(--medical-coral);
    /* Warm accent for emphasis */
    font-weight: 600;
}

/* Textbook callout block description */
body.professional-mode .feature-box {
    background: rgba(126, 87, 194, 0.025) !important;
    border: 1px solid rgba(126, 87, 194, 0.08) !important;
    border-left: 4px solid var(--medical-purple) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 25px !important;
    box-shadow: inset 0 1px 3px rgba(126, 87, 194, 0.01) !important;
}

body.professional-mode .feature-box div {
    color: var(--text-main) !important;
    line-height: 1.8 !important;
    font-size: 1.05rem !important;
}

body.professional-mode .feature-box strong {
    color: var(--medical-purple) !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Detail header actions toolbar button styling */
body.professional-mode .detail-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.professional-mode .detail-header-actions button {
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    font-family: var(--font-code) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(21, 101, 192, 0.02) !important;
}

/* textbook clinical correlation blocks */
body.professional-mode .content-area div[style*="dashed var(--why-cyan)"] {
    margin-top: 30px !important;
    border: 1px dashed rgba(255, 112, 67, 0.3) !important;
    border-left: 4px solid var(--medical-coral) !important;
    padding: 24px !important;
    border-radius: 12px !important;
    background: rgba(255, 112, 67, 0.025) !important;
    box-shadow: inset 0 1px 3px rgba(255, 112, 67, 0.01) !important;
}

body.professional-mode .content-area div[style*="dashed var(--why-cyan)"] strong {
    color: var(--medical-coral) !important;
    font-family: var(--font-code) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px;
    font-weight: 700;
}

body.professional-mode .content-area div[style*="dashed var(--why-cyan)"] p {
    color: var(--text-main) !important;
    line-height: 1.7 !important;
    margin-top: 8px !important;
}

/* 6. Medical Imaging Viewer frame */
body.professional-mode .img-container {
    background: #0f172a !important; /* viewer slate */
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    border-radius: 12px !important;
    position: relative;
    padding: 20px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

body.professional-mode .img-container::before {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 1;
}

body.professional-mode .atlas-image-caption {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: var(--font-code) !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.2px;
    margin-top: 15px !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

body.professional-mode .img-placeholder-text {
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: var(--font-code) !important;
}

body.professional-mode .img-placeholder-text i {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Enhanced Table Styling — allows horizontal scroll when content wider than viewport */
body.professional-mode .comp-table {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(21, 101, 192, 0.12) !important;
    box-shadow: 0 4px 15px rgba(21, 101, 192, 0.02) !important;
    overflow-x: auto !important;
    margin-top: 15px !important;
    display: block;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
body.professional-mode .comp-table tbody { display: table; width: 100%; min-width: 600px; }

/* Same fix for default (neon) theme — wrap any tables so they're scrollable */
.comp-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.comp-table tbody { display: table; width: 100%; min-width: 520px; }
.comp-table::-webkit-scrollbar { height: 6px; }
.comp-table::-webkit-scrollbar-thumb { background: rgba(0,242,255,0.35); border-radius: 3px; }
body.professional-mode .comp-table::-webkit-scrollbar-thumb { background: rgba(21,101,192,0.30) !important; }

body.professional-mode .comp-table tr {
    border-bottom: 1px solid rgba(21, 101, 192, 0.08) !important;
}

body.professional-mode .comp-table tr:last-child {
    border-bottom: none !important;
}

body.professional-mode .comp-table tr:nth-child(even) {
    background: rgba(21, 101, 192, 0.015) !important;
}

body.professional-mode .comp-table td {
    padding: 16px 20px !important;
    vertical-align: middle !important;
}

body.professional-mode .species-label {
    color: #1565c0 !important;
    font-weight: 700 !important;
    background: rgba(21, 101, 192, 0.06) !important;
    border: 1px solid rgba(21, 101, 192, 0.1) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    display: inline-block !important;
    text-align: center;
    width: auto !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px;
}

/* Professional Mode - Why Section with Category Colors */
body.professional-mode #why-view {
    background: radial-gradient(circle at 50% -20%, rgba(126, 87, 194, 0.06), transparent 60%), #f8fafc;
}

body.professional-mode #why-view h1 {
    font-size: 4.2rem;
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, #0f172a 20%, var(--medical-purple) 65%, var(--atlas-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(126, 87, 194, 0.08);
    position: relative;
    z-index: 1;
}

body.professional-mode #why-view .subtitle {
    font-family: var(--font-code);
    color: var(--medical-coral);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(255, 112, 67, 0.08);
}

body.professional-mode #why-view .subtitle::before {
    content: '‹ ';
    color: var(--medical-purple);
    opacity: 0.8;
}

body.professional-mode #why-view .subtitle::after {
    content: ' ›';
    color: var(--medical-purple);
    opacity: 0.8;
}

body.professional-mode #why-view .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 45px;
    padding: 18px 32px;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(126, 87, 194, 0.16) !important;
    border-left: 4px solid var(--medical-purple) !important;
    border-radius: 30px;
    backdrop-filter: blur(20px) translateZ(0) !important;
    -webkit-backdrop-filter: blur(20px) translateZ(0) !important;
    position: sticky;
    top: 20px;
    z-index: 100;
    box-shadow: 
        0 16px 40px rgba(126, 87, 194, 0.06), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

body.professional-mode #why-view .controls:hover {
    border-color: rgba(126, 87, 194, 0.28) !important;
    box-shadow: 
        0 20px 48px rgba(126, 87, 194, 0.09), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.professional-mode #why-view input[type="text"] {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background: rgba(126, 87, 194, 0.02) !important;
    border: 1px solid rgba(126, 87, 194, 0.15) !important;
    border-radius: 30px !important;
    color: #0f172a;
    font-family: var(--font-code);
    font-size: 0.9rem;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, transform 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(126, 87, 194, 0.02) !important;
}

body.professional-mode #why-view input[type="text"]:focus {
    outline: none;
    border-color: var(--medical-purple) !important;
    box-shadow: 0 0 25px rgba(126, 87, 194, 0.15), inset 0 1.5px 3px rgba(126, 87, 194, 0.05) !important;
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.01) translateZ(0) !important;
}

body.professional-mode #why-view .filter-btn {
    background: rgba(126, 87, 194, 0.02) !important;
    border: 1px solid rgba(126, 87, 194, 0.12) !important;
    color: #475569 !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    cursor: pointer;
    font-family: var(--font-code);
    font-size: 0.8rem;
    position: relative !important;
    overflow: hidden !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
    will-change: transform;
}

body.professional-mode #why-view .filter-btn:hover {
    border-color: var(--medical-purple) !important;
    color: var(--medical-purple) !important;
    transform: translateY(-2px) translateZ(0) !important;
    background: rgba(126, 87, 194, 0.03) !important;
    box-shadow: 0 4px 12px rgba(126, 87, 194, 0.08) !important;
}

body.professional-mode #why-view .filter-btn.active {
    background: linear-gradient(135deg, rgba(126, 87, 194, 0.12), rgba(126, 87, 194, 0.02)) !important;
    border-color: var(--medical-purple) !important;
    color: var(--medical-purple) !important;
    box-shadow: 
        0 4px 14px rgba(126, 87, 194, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
}

body.professional-mode #why-view .filter-btn.active::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 20%; width: 60% !important; height: 2px !important;
    background: var(--medical-purple) !important;
    box-shadow: 0 0 8px var(--medical-purple) !important;
    border-radius: 2px !important;
}

body.professional-mode #why-view .ai-btn {
    background: linear-gradient(135deg, var(--medical-purple) 0%, #9575cd 100%) !important;
    border: 1px solid var(--medical-purple) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    cursor: pointer;
    font-family: var(--font-code);
    font-size: 0.8rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(126, 87, 194, 0.2) !important;
    animation: ai-glow-pulse-prof 3s infinite alternate !important;
    will-change: transform;
}

@keyframes ai-glow-pulse-prof {
    0% {
        border-color: var(--medical-purple);
        box-shadow: 0 4px 12px rgba(126, 87, 194, 0.15);
    }
    100% {
        border-color: var(--atlas-gold);
        box-shadow: 0 4px 20px rgba(126, 87, 194, 0.3);
    }
}

body.professional-mode #why-view .ai-btn:hover {
    background: linear-gradient(135deg, var(--medical-purple) 0%, var(--atlas-gold) 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 
        0 8px 24px rgba(126, 87, 194, 0.3), 
        0 4px 12px rgba(21, 101, 192, 0.15) !important;
    transform: scale(1.06) translateY(-2.5px) translateZ(0) !important;
}

/* Premium Biomechanical Glass Card - Professional Mode */
/* Premium Biomechanical Glass Card - Professional Mode */
body.professional-mode #why-view .card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(126, 87, 194, 0.08) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 28px !important;
    cursor: pointer !important;
    transition: 
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
        box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
        border-color 0.3s ease, 
        border-left-color 0.3s ease,
        background-color 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 235px !important;
    box-shadow: 0 8px 30px rgba(126, 87, 194, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    animation: whyCardEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    perspective: 1000px;
}

body.professional-mode #why-view .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at top right, rgba(126, 87, 194, 0.03), transparent 50%),
        radial-gradient(rgba(126, 87, 194, 0.015) 1.2px, transparent 1.2px) !important;
    background-size: 100% 100%, 16px 16px !important;
    opacity: 0.85;
    transition: opacity 0.3s ease, background 0.3s ease;
    z-index: 0;
}

body.professional-mode #why-view .card::after {
    content: '' !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(126, 87, 194, 0.02) 45%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(126, 87, 194, 0.02) 55%,
        transparent 70%
    ) !important;
    transform: skewX(-25deg) translate3d(-150%, 0, 0) !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 2;
    will-change: transform;
}

body.professional-mode #why-view .card:hover::after {
    transform: skewX(-25deg) translate3d(150%, 0, 0) !important;
}

body.professional-mode #why-view .card:hover {
    transform: translate3d(0, -8px, 0) scale(1.02) rotateX(1.5deg) rotateY(1.5deg) !important;
    border-color: rgba(126, 87, 194, 0.22) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        0 20px 40px rgba(126, 87, 194, 0.08), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.professional-mode #why-view .card:hover::before {
    opacity: 0.95 !important;
}

/* Category-specific styling for Professional Mode */
body.professional-mode #why-view .card.forelimb {
    border-left: 4px solid var(--why-cyan) !important;
}
body.professional-mode #why-view .card.forelimb .card-category {
    background: rgba(0, 137, 123, 0.06) !important;
    color: #00897b !important;
    border: 1px solid rgba(0, 137, 123, 0.2) !important;
}
body.professional-mode #why-view .card.forelimb:hover {
    border-color: rgba(0, 137, 123, 0.25) !important;
    border-left-color: var(--why-cyan) !important;
    box-shadow: 
        0 20px 40px rgba(0, 137, 123, 0.06), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.professional-mode #why-view .card.hindlimb {
    border-left: 4px solid var(--atlas-gold) !important;
}
body.professional-mode #why-view .card.hindlimb .card-category {
    background: rgba(21, 101, 192, 0.06) !important;
    color: var(--atlas-gold) !important;
    border: 1px solid rgba(21, 101, 192, 0.2) !important;
}
body.professional-mode #why-view .card.hindlimb:hover {
    border-color: rgba(21, 101, 192, 0.25) !important;
    border-left-color: var(--atlas-gold) !important;
    box-shadow: 
        0 20px 40px rgba(21, 101, 192, 0.06), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.professional-mode #why-view .card.axial {
    border-left: 4px solid var(--medical-coral) !important;
}
body.professional-mode #why-view .card.axial .card-category {
    background: rgba(255, 112, 67, 0.06) !important;
    color: var(--medical-coral) !important;
    border: 1px solid rgba(255, 112, 67, 0.2) !important;
}
body.professional-mode #why-view .card.axial:hover {
    border-color: rgba(255, 112, 67, 0.25) !important;
    border-left-color: var(--medical-coral) !important;
    box-shadow: 
        0 20px 40px rgba(255, 112, 67, 0.06), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.professional-mode #why-view .card.wildlife {
    border-left: 4px solid var(--medical-purple) !important;
}
body.professional-mode #why-view .card.wildlife .card-category {
    background: rgba(126, 87, 194, 0.06) !important;
    color: var(--medical-purple) !important;
    border: 1px solid rgba(126, 87, 194, 0.2) !important;
}
body.professional-mode #why-view .card.wildlife:hover {
    border-color: rgba(126, 87, 194, 0.25) !important;
    border-left-color: var(--medical-purple) !important;
    box-shadow: 
        0 20px 40px rgba(126, 87, 194, 0.06), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.professional-mode #why-view .card-title {
    color: #0f172a;
    font-weight: 800;
}

body.professional-mode #why-view .card-comparison {
    color: var(--medical-coral);
    font-weight: 600;
}

body.professional-mode #why-view .read-more {
    color: var(--medical-purple);
    font-weight: 700;
    background: rgba(126, 87, 194, 0.06);
    padding: 6px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

body.professional-mode #why-view .card:hover .read-more {
    color: #ffffff !important;
    background: var(--medical-purple) !important;
    box-shadow: 0 4px 12px rgba(126, 87, 194, 0.2);
}

body.professional-mode #why-view .card:hover .read-more i {
    transform: translateX(6px) !important;
}

/* Modal Enhancements */
/* Modal Enhancements */
body.professional-mode #why-view .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(241, 245, 249, 0.85);
    backdrop-filter: blur(0px) translateZ(0);
    -webkit-backdrop-filter: blur(0px) translateZ(0);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), backdrop-filter 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

body.professional-mode #why-view .modal-overlay.open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(16px) translateZ(0);
    -webkit-backdrop-filter: blur(16px) translateZ(0);
}

body.professional-mode #why-view .modal-content {
    background: rgba(255, 255, 255, 0.98) !important;
    width: 100%;
    max-width: 980px;
    max-height: 85vh;
    border-radius: 16px !important;
    border: 1px solid rgba(126, 87, 194, 0.15) !important;
    box-shadow: 
        0 25px 65px rgba(126, 87, 194, 0.12), 
        0 0 45px rgba(126, 87, 194, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    overflow-y: auto;
    position: relative;
    transform: translate3d(0, 35px, 0) scale(0.97) !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.45s ease, border-color 0.4s ease !important;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    will-change: transform, opacity;
}

body.professional-mode #why-view .modal-content::before {
    content: '' !important;
    position: absolute !important;
    top: 12px; left: 12px; width: 16px; height: 16px !important;
    border-top: 2px solid var(--medical-purple) !important;
    border-left: 2px solid var(--medical-purple) !important;
    pointer-events: none !important;
    z-index: 5;
    opacity: 0.85;
}

body.professional-mode #why-view .modal-content::after {
    content: '' !important;
    position: absolute !important;
    bottom: 12px; right: 12px; width: 16px; height: 16px !important;
    border-bottom: 2px solid var(--medical-purple) !important;
    border-right: 2px solid var(--medical-purple) !important;
    pointer-events: none !important;
    z-index: 5;
    opacity: 0.85;
}

body.professional-mode #why-view .modal-overlay.open .modal-content {
    transform: translate3d(0, 0, 0) scale(1) !important;
}

body.professional-mode #why-view .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(126, 87, 194, 0.05) !important;
    border: 1px solid rgba(126, 87, 194, 0.1) !important;
    color: #64748b;
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.professional-mode #why-view .modal-close:hover {
    background: rgba(255, 112, 67, 0.15) !important;
    border-color: var(--medical-coral) !important;
    color: var(--medical-coral) !important;
    transform: rotate(90deg) scale(1.08);
}

body.professional-mode #why-view .modal-image-col {
    background: #f8fafc radial-gradient(circle at center, rgba(126, 87, 194, 0.04), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-right: 1px solid rgba(126, 87, 194, 0.08);
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

body.professional-mode #why-view .modal-image-col::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(rgba(126, 87, 194, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(126, 87, 194, 0.008) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 87, 194, 0.008) 1px, transparent 1px) !important;
    background-size: 16px 16px, 32px 32px, 32px 32px !important;
    background-position: center center !important;
    opacity: 0.85;
    pointer-events: none !important;
    z-index: 1;
}

/* Visor Scanner dynamic laser overlay removed for professional theme */

body.professional-mode #why-view .modal-text-col {
    background: white;
    padding: 40px;
}

body.professional-mode #why-view .modal-category {
    color: var(--medical-purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
}

body.professional-mode #why-view .modal-title {
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 10px;
}

body.professional-mode #why-view .modal-comparison-tag {
    background: rgba(255, 112, 67, 0.06);
    color: var(--medical-coral);
    border: 1px solid rgba(255, 112, 67, 0.18);
    font-weight: 700;
    border-radius: 20px;
    padding: 6px 14px;
}

body.professional-mode #why-view .modal-section-header {
    border-bottom: 2px solid rgba(126, 87, 194, 0.08);
}

body.professional-mode #why-view .modal-section h3 {
    color: var(--atlas-gold);
    font-weight: 700;
}

body.professional-mode #why-view .modal-clinical {
    background: rgba(255, 193, 7, 0.04);
    border-left: 4px solid var(--medical-amber);
    color: #475569;
    border-radius: 0 8px 8px 0;
    font-style: normal;
    border-top: 1px solid rgba(255, 193, 7, 0.1) !important;
    border-right: 1px solid rgba(255, 193, 7, 0.1) !important;
    border-bottom: 1px solid rgba(255, 193, 7, 0.1) !important;
}

body.professional-mode #why-view .ai-response-box {
    margin-top: 24px !important;
    padding: 20px 24px !important;
    background: 
        radial-gradient(circle at center, rgba(126, 87, 194, 0.04) 1.2px, transparent 1.2px),
        linear-gradient(135deg, #ffffff 0%, #fbfbfc 100%) !important;
    background-size: 14px 14px, 100% 100% !important;
    border: 1.5px dashed rgba(126, 87, 194, 0.35) !important;
    border-left: 5px solid var(--medical-purple) !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.75 !important;
    box-shadow: 
        0 12px 32px rgba(126, 87, 194, 0.05), 
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 15px rgba(126, 87, 194, 0.01) !important;
    display: none;
    position: relative;
    overflow: hidden;
    animation: whyBoxFadeIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
    will-change: transform, opacity;
}

body.professional-mode #why-view .ai-response-box::after {
    content: '' !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--medical-purple);
    box-shadow: 0 0 8px var(--medical-purple);
    animation: livePulse 2s infinite !important;
}

body.professional-mode #why-view .ai-response-box strong {
    color: var(--medical-purple);
    font-weight: 700;
}

/* Professional Mode - Biomechanics "Challenge Me" Session Quiz Overrides */
body.professional-mode #why-view .quiz-overlay {
    background: rgba(240, 244, 248, 0.96) !important;
    backdrop-filter: blur(25px) !important;
}

body.professional-mode #why-view .quiz-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    box-shadow: 
        0 30px 60px rgba(21, 101, 192, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 40px rgba(126, 87, 194, 0.02) !important;
    border-radius: 20px;
}

body.professional-mode #why-view .quiz-card::before {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(21, 101, 192, 0.03) 1.5px, transparent 2.5px),
        radial-gradient(circle at 82% 26%, rgba(255, 193, 7, 0.03) 1.2px, transparent 2.5px),
        radial-gradient(circle at 30% 78%, rgba(0, 150, 136, 0.03) 1.2px, transparent 2.5px),
        radial-gradient(circle at 70% 88%, rgba(255, 112, 67, 0.03) 1.2px, transparent 2.5px) !important;
}

body.professional-mode #why-view .quiz-setup-title {
    color: var(--atlas-gold) !important;
    font-weight: 700;
}

body.professional-mode #why-view .quiz-setup-title::before {
    color: var(--atlas-gold) !important;
}

body.professional-mode #why-view .quiz-chip {
    background: rgba(21, 101, 192, 0.04) !important;
    border: 1px solid rgba(21, 101, 192, 0.1) !important;
    color: #475569 !important;
    border-radius: 20px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.professional-mode #why-view .quiz-chip:hover {
    border-color: var(--atlas-gold) !important;
    background: rgba(21, 101, 192, 0.06) !important;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.06) !important;
}

body.professional-mode #why-view .quiz-chip.active {
    background: linear-gradient(135deg, rgba(21, 101, 192, 0.15), rgba(21, 101, 192, 0.05)) !important;
    border-color: var(--atlas-gold) !important;
    color: var(--atlas-gold) !important;
    box-shadow: 
        0 0 0 2px rgba(21, 101, 192, 0.15),
        0 6px 14px rgba(21, 101, 192, 0.1) !important;
}

body.professional-mode #why-view .quiz-start-btn {
    background: linear-gradient(135deg, var(--atlas-gold), #1e88e5) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(21, 101, 192, 0.2) !important;
    font-weight: 700;
}

body.professional-mode #why-view .quiz-start-btn:hover {
    box-shadow: 0 14px 30px rgba(21, 101, 192, 0.3) !important;
}

body.professional-mode #why-view .quiz-hud-cell {
    background: linear-gradient(180deg, rgba(21, 101, 192, 0.04), rgba(21, 101, 192, 0.01)) !important;
    border: 1px solid rgba(21, 101, 192, 0.12) !important;
    border-radius: 12px;
}

body.professional-mode #why-view .quiz-hud-cell span:not(.quiz-hud-lbl) {
    color: #1e293b !important;
}

body.professional-mode #why-view .quiz-progress-bar {
    background: rgba(21, 101, 192, 0.05) !important;
}

body.professional-mode #why-view .quiz-progress-fill {
    background: linear-gradient(90deg, var(--why-cyan), var(--medical-purple), var(--medical-coral)) !important;
    box-shadow: 0 0 8px rgba(126, 87, 194, 0.2) !important;
}

body.professional-mode #why-view .quiz-topic-tag {
    background: linear-gradient(135deg, rgba(126, 87, 194, 0.08), rgba(255, 215, 0, 0.04)) !important;
    border: 1px solid rgba(126, 87, 194, 0.18) !important;
    color: var(--medical-purple) !important;
}

body.professional-mode #why-view .quiz-question {
    color: #1e293b !important;
}

body.professional-mode #why-view .quiz-btn {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(21, 101, 192, 0.1) !important;
    color: #334155 !important;
    box-shadow: 0 2px 4px rgba(21, 101, 192, 0.01) !important;
    border-radius: 12px !important;
    will-change: transform, border-color, background-color, box-shadow;
}

body.professional-mode #why-view .quiz-btn:hover:not(:disabled) {
    border-color: var(--atlas-gold) !important;
    background: rgba(21, 101, 192, 0.04) !important;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.06) !important;
    transform: translateX(4px) !important;
}

/* Dynamic quiz selections in Professional Mode (emerald for correct, coral for wrong) */
body.professional-mode #why-view .quiz-btn.correct {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05)) !important;
    border-color: #4caf50 !important;
    color: #1b5e20 !important;
    box-shadow: 
        0 0 0 2px rgba(76, 175, 80, 0.2), 
        0 6px 16px rgba(76, 175, 80, 0.12) !important;
    animation: quizBtnCorrect 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

body.professional-mode #why-view .quiz-btn.wrong {
    background: rgba(244, 67, 54, 0.08) !important;
    border-color: #f44336 !important;
    color: #b71c1c !important;
    box-shadow: 0 0 12px rgba(244, 67, 54, 0.15) !important;
    animation: quizBtnWrong 0.4s ease-in-out both !important;
}

body.professional-mode #why-view .quiz-feedback {
    border-radius: 12px !important;
}

body.professional-mode #why-view .quiz-feedback.fb-good {
    background: rgba(76, 175, 80, 0.05) !important;
    border-left: 4px solid #4caf50 !important;
    color: #1b5e20 !important;
}

body.professional-mode #why-view .quiz-feedback.fb-bad {
    background: rgba(244, 67, 54, 0.05) !important;
    border-left: 4px solid #f44336 !important;
    color: #b71c1c !important;
}

body.professional-mode #why-view .quiz-feedback strong {
    color: inherit !important;
}

body.professional-mode #why-view .quiz-feedback .qf-correct {
    color: #1b5e20 !important;
}

body.professional-mode #why-view .quiz-feedback .qf-explain {
    color: #475569 !important;
}

body.professional-mode #why-view .quiz-result-badge {
    background: radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.25), rgba(21, 101, 192, 0.05)) !important;
    border: 2px solid var(--atlas-gold) !important;
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.15),
        0 0 45px rgba(21, 101, 192, 0.05) !important;
}

body.professional-mode #why-view .quiz-result-title {
    color: #1e293b !important;
}

body.professional-mode #why-view .quiz-result-score {
    color: var(--atlas-gold) !important;
    background: linear-gradient(135deg, var(--atlas-gold), var(--medical-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.professional-mode #why-view .quiz-result-grade {
    color: #475569 !important;
}

body.professional-mode #why-view .quiz-result-stats > div {
    background: linear-gradient(180deg, rgba(21, 101, 192, 0.03), rgba(21, 101, 192, 0.01)) !important;
    border: 1px solid rgba(21, 101, 192, 0.08) !important;
    border-radius: 12px;
}

body.professional-mode #why-view .quiz-result-stats > div span:last-child {
    color: #1e293b !important;
}

body.professional-mode #why-view .quiz-review-box {
    background: rgba(21, 101, 192, 0.01) !important;
    border: 1px solid rgba(21, 101, 192, 0.08) !important;
}

body.professional-mode #why-view .quiz-review-head {
    border-bottom: 1px solid rgba(21, 101, 192, 0.08) !important;
    color: var(--atlas-gold) !important;
}

body.professional-mode #why-view .quiz-review-perfect {
    color: #1b5e20 !important;
}

body.professional-mode #why-view .quiz-review-item {
    border-bottom: 1px solid rgba(21, 101, 192, 0.05) !important;
}

body.professional-mode #why-view .qri-title {
    color: #1e293b !important;
}

body.professional-mode #why-view .qri-a {
    color: var(--atlas-gold) !important;
}

body.professional-mode #why-view .ai-btn-ghost {
    border-color: rgba(21, 101, 192, 0.2) !important;
    color: #475569 !important;
}

/* Quiz Enhancements */
body.professional-mode #quiz-overlay {
    background: rgba(240, 244, 248, 0.98);
}

body.professional-mode .quiz-modal {
    background: var(--bg-card);
    border: 2px solid var(--border);
    box-shadow: 0 20px 40px rgba(21, 101, 192, 0.15);
    border-radius: 20px;
    border-top: 4px solid var(--atlas-gold);
}

body.professional-mode .quiz-mode-card {
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s;
    border-bottom: 4px solid transparent;
}

body.professional-mode .quiz-mode-card:hover {
    border-color: var(--atlas-gold);
    border-bottom-color: var(--medical-coral);
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(21, 101, 192, 0.15);
}

body.professional-mode .quiz-option {
    background: rgba(21, 101, 192, 0.02);
    border: 2px solid rgba(21, 101, 192, 0.1);
    color: var(--text-main);
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s;
}

body.professional-mode .quiz-option:hover {
    border-color: var(--atlas-gold);
    background: rgba(21, 101, 192, 0.05);
    transform: translateX(8px);
    box-shadow: 0 4px 8px rgba(21, 101, 192, 0.1);
}

body.professional-mode .quiz-option.correct {
    border-color: var(--medical-sage) !important;
    background: rgba(102, 187, 106, 0.1) !important;
    color: #2e7d32 !important;
}

body.professional-mode .quiz-option.wrong {
    border-color: #ef5350 !important;
    background: rgba(239, 83, 80, 0.1) !important;
    color: #c62828 !important;
}

body.professional-mode .fill-input {
    background: white;
    border: 2px solid rgba(21, 101, 192, 0.2);
    color: var(--text-main);
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.professional-mode .fill-input:focus {
    border-color: var(--atlas-gold);
    box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.professional-mode .progress-bar {
    background: linear-gradient(90deg, var(--why-cyan), var(--medical-coral));
    /* Teal to Coral gradient */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.professional-mode .feedback-panel {
    background: rgba(255, 243, 224, 0.95);
    /* Warm amber tint */
    border-top: 3px solid var(--medical-amber);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Stats Enhancement */
body.professional-mode .stat-box {
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
    border-left: 4px solid;
    transition: all 0.3s;
}

body.professional-mode .stat-box:nth-child(1) {
    border-left-color: var(--atlas-gold);
}

body.professional-mode .stat-box:nth-child(2) {
    border-left-color: var(--why-cyan);
}

body.professional-mode .stat-box:nth-child(3) {
    border-left-color: var(--medical-coral);
}

body.professional-mode .stat-box:nth-child(4) {
    border-left-color: var(--medical-purple);
}

body.professional-mode .stat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(21, 101, 192, 0.12);
}

body.professional-mode .stat-val {
    color: var(--atlas-gold);
    font-weight: 800;
}

/* Footer Enhancement */
body.professional-mode .footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 244, 248, 1));
    border-top: 2px solid rgba(21, 101, 192, 0.1);
    margin-top: 40px;
}

body.professional-mode .footer-logo-space {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.professional-mode .footer-text {
    color: var(--text-mute);
    font-weight: 500;
}

/* Theme Toggle in Professional Mode */
body.professional-mode .theme-toggle-btn {
    background: white;
    border: 2px solid var(--atlas-gold);
    color: var(--atlas-gold);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

body.professional-mode .theme-toggle-btn:hover {
    background: var(--atlas-gold);
    color: white;
    transform: scale(1.05) rotate(5deg);
}

/* Image Container Enhancement */
body.professional-mode .img-container {
    background: linear-gradient(135deg, #fafafa, #f5f7fa);
    border: 2px solid rgba(21, 101, 192, 0.15);
    border-radius: 12px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.professional-mode .img-placeholder-text {
    color: var(--text-mute);
    font-weight: 500;
}

body.professional-mode .atlas-image-placeholder {
    background: rgba(21, 101, 192, 0.035);
    border: 1px dashed rgba(21, 101, 192, 0.28);
    box-shadow: none;
}

body.professional-mode .atlas-image-placeholder .img-placeholder-text i,
body.professional-mode .atlas-image-placeholder .img-placeholder-text strong {
    color: var(--medical-purple) !important;
}

body.professional-mode .atlas-image-frame {
    background: #ffffff;
    border-color: rgba(21, 101, 192, 0.15);
}

body.professional-mode .credits-box {
    color: var(--medical-purple);
    font-weight: 500;
    border-top: 1px solid rgba(21, 101, 192, 0.1);
}

/* Enhanced Typography Hierarchy */
body.professional-mode {
    font-size: 16px;
    line-height: 1.6;
}

body.professional-mode .h-title {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

body.professional-mode .desc-text,
body.professional-mode .modal-desc {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #37474f;
    /* Slightly softer than pure black */
}

/* Scrollbar Styling for Professional Mode */
body.professional-mode ::-webkit-scrollbar {
    width: 10px;
}

body.professional-mode ::-webkit-scrollbar-track {
    background: rgba(21, 101, 192, 0.05);
    border-radius: 5px;
}

body.professional-mode ::-webkit-scrollbar-thumb {
    background: rgba(21, 101, 192, 0.3);
    border-radius: 5px;
    border: 2px solid white;
}

body.professional-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--atlas-gold);
}

/* Selection Colors */
body.professional-mode ::selection {
    background: rgba(21, 101, 192, 0.2);
    color: var(--atlas-gold);
}

/* Badge Enhancement */
body.professional-mode .badge {
    background: rgba(0, 137, 123, 0.1);
    border-color: var(--why-cyan);
    color: var(--why-cyan);
    font-weight: 600;
}

/* ================= DASHBOARD PORTAL CARD ================= */
.card-dashboard {
    --color: #bd93f9;
    --glow: rgba(189, 147, 249, 0.6);
}

/* ================= GLOBAL SEARCH ================= */
.search-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(17, 34, 64, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    color: var(--text-mute);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.search-toggle-btn:hover {
    color: var(--why-cyan);
    border-color: var(--why-cyan);
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.3);
    transform: scale(1.1);
}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 12, 27, 0.85);
    backdrop-filter: blur(20px);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
}

.search-container {
    width: 700px;
    max-width: 90%;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.search-header {
    margin-bottom: 0;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 20px;
    font-size: 1.2rem;
    color: var(--why-cyan);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 20px 80px 20px 55px;
    background: rgba(10, 25, 47, 0.9);
    border: 2px solid var(--border);
    border-radius: 16px;
    color: var(--text-main);
    font-size: 1.2rem;
    font-family: var(--font-ui);
    transition: all 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: var(--why-cyan);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.15), inset 0 0 20px rgba(0, 242, 255, 0.05);
}

.search-input::placeholder {
    color: var(--text-mute);
    opacity: 0.6;
}

.search-kbd {
    position: absolute;
    right: 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: var(--font-code);
    font-size: 0.75rem;
    color: var(--text-mute);
}

.search-results {
    margin-top: 12px;
    background: rgba(10, 25, 47, 0.9);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow-y: auto;
    max-height: 60vh;
    padding: 20px;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-thumb {
    background: var(--why-cyan);
    border-radius: 3px;
}

.search-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-mute);
}

.search-empty p {
    font-size: 1rem;
    line-height: 1.6;
}

.search-empty kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--font-code);
    font-size: 0.8rem;
}

.search-result-count {
    font-family: var(--font-code);
    font-size: 0.8rem;
    color: var(--text-mute);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.search-group {
    margin-bottom: 20px;
}

.search-group-title {
    font-family: var(--font-code);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.search-result-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px 18px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--why-cyan);
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(0, 242, 255, 0.1);
}

.search-result-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.search-result-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
}

.search-result-title mark {
    background: rgba(0, 242, 255, 0.25);
    color: var(--why-cyan);
    border-radius: 3px;
    padding: 0 3px;
}

.search-result-desc {
    font-size: 0.88rem;
    color: var(--text-mute);
    line-height: 1.5;
    margin-bottom: 8px;
}

.search-result-desc mark {
    background: rgba(255, 215, 0, 0.2);
    color: var(--atlas-gold);
    border-radius: 3px;
    padding: 0 2px;
}

.search-result-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.search-badge {
    font-family: var(--font-code);
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.region-badge {
    background: rgba(255, 215, 0, 0.12);
    color: var(--atlas-gold);
    border: 1px solid rgba(255, 215, 0, 0.25);
}

.system-badge {
    background: rgba(0, 242, 255, 0.12);
    color: var(--why-cyan);
    border: 1px solid rgba(0, 242, 255, 0.25);
}

.mode-badge {
    background: rgba(189, 147, 249, 0.15);
    color: #bd93f9;
    border: 1px solid rgba(189, 147, 249, 0.3);
}

@media (max-width: 768px) {
    .search-toggle-btn {
        top: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
    }

    .search-container {
        max-width: 95%;
    }

    .search-input {
        font-size: 1rem;
        padding: 16px 60px 16px 45px;
    }
}

/* =========================================================
   TOAST NOTIFICATIONS
   ========================================================= */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: rgba(17, 34, 64, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  max-width: 300px;
}

.toast.success { border-left: 3px solid #00ff9d; }
.toast.info    { border-left: 3px solid #00f2ff; }
.toast.warning { border-left: 3px solid #ffd700; }

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

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

body.professional-mode .toast {
  background: rgba(255, 255, 255, 0.97);
  color: #263238;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body.professional-mode .toast.success { border-left: 3px solid #00897b; }
body.professional-mode .toast.info    { border-left: 3px solid #1565c0; }
body.professional-mode .toast.warning { border-left: 3px solid #f57c00; }


/* =========================================================
   BOOKMARK BUTTON + STAR INDICATOR  (Fix #11)
   ========================================================= */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bm-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--text-mute, #888);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-code, monospace);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.bm-btn:hover { border-color: var(--atlas-gold, gold); color: var(--atlas-gold, gold); }
.bm-btn.active {
  background: rgba(255, 215, 0, 0.12);
  border-color: var(--atlas-gold, gold);
  color: var(--atlas-gold, gold);
}
.bm-btn.active i { color: var(--atlas-gold, gold); }

/* ============== MARK AS READ BUTTON ============== */
.detail-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.read-btn,
.share-btn,
.hl-btn {
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    color: var(--text-mute, #888);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-code, monospace);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.share-btn:hover {
    border-color: var(--why-cyan, #00f2ff);
    color: var(--why-cyan, #00f2ff);
    background: rgba(0,242,255,0.08);
}
body.professional-mode .share-btn {
    border-color: #cfd8dc;
    color: #455a64;
    background: #ffffff;
}
body.professional-mode .share-btn:hover {
    border-color: #00897b;
    color: #00897b;
    background: #e0f2f1;
}
@media (max-width: 600px) {
    .share-btn span,
    .read-btn span,
    .bm-btn span { display: none; }   /* icon-only on phones to save space */
    .share-btn, .read-btn, .bm-btn { padding: 10px 12px; }
}
.read-btn:hover {
    border-color: #50dc96;
    color: #50dc96;
    background: rgba(80,220,150,0.08);
}
.read-btn.active {
    background: linear-gradient(135deg, rgba(80,220,150,0.18), rgba(0,242,255,0.10));
    border-color: #50dc96;
    color: #50dc96;
    font-weight: 600;
}
.read-btn.active i { color: #50dc96; }
.read-btn.active::after {
    content: "✓";
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 2px;
}
body.professional-mode .read-btn {
    border-color: #cfd8dc;
    color: #455a64;
    background: #ffffff;
}
body.professional-mode .read-btn:hover {
    border-color: #1b8754;
    color: #1b8754;
    background: #e8f5ee;
}
body.professional-mode .read-btn.active {
    background: #d4edda;
    border-color: #1b8754;
    color: #1b8754;
}
body.professional-mode .read-btn.active i { color: #1b8754; }

.bm-star {
  color: var(--atlas-gold, gold);
  font-size: 0.8em;
  margin-right: 4px;
}
.bm-meta {
  display: block;
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 4px;
  font-weight: normal;
}

.bookmark-group-title {
  padding: 12px 18px 8px;
  color: var(--why-cyan);
  font-family: var(--font-code);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.quiz-bookmark-detail {
  max-width: 760px;
  margin: 0 auto;
}
.quiz-bookmark-detail .qb-kicker {
  color: var(--why-cyan);
  font-family: var(--font-code);
  font-size: .78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.quiz-bookmark-detail .qb-question {
  color: var(--text-main);
  font-size: 1.25rem;
  line-height: 1.65;
  margin-bottom: 24px;
}
.quiz-bookmark-detail .qb-answer,
.quiz-bookmark-detail .qb-explanation {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--atlas-gold);
  border-radius: 10px;
  margin-top: 14px;
  line-height: 1.6;
}
.quiz-bookmark-detail .qb-explanation { border-left-color: var(--why-cyan); }
body.professional-mode .bookmark-group-title { color: #1565c0; }
body.professional-mode .quiz-bookmark-detail .qb-answer,
body.professional-mode .quiz-bookmark-detail .qb-explanation { background: #fff; }

body.professional-mode .bm-btn {
  border-color: rgba(0,0,0,0.15);
  color: #455a64;
}
body.professional-mode .bm-btn.active {
  background: #fff8e1;
  border-color: #f9a825;
  color: #f57f17;
}


/* =========================================================
   GLOSSARY TOOLTIPS  (Fix #12)
   ========================================================= */
.gloss-term {
  border-bottom: 1px dotted var(--why-cyan, #00f2ff);
  cursor: help;
  position: relative;
  color: inherit;
}
.gloss-term:hover,
.gloss-term:focus {
  background: rgba(0, 242, 255, 0.08);
  outline: none;
}

.gloss-term::after {
  content: attr(data-def);
  /* Viewport-fixed positioning — escapes every ancestor's overflow.
     Coordinates are written by glossary._positionTooltip() at hover/focus. */
  position: fixed;
  left: var(--tt-left, 0);
  top:  var(--tt-top, 0);
  width: var(--tt-width, 320px);
  max-width: var(--tt-width, 320px);
  /* Long definitions become scrollable instead of pushing off-screen */
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 14px;
  background: #14141f;
  color: #e8e8f0;
  border: 1px solid var(--why-cyan, #00f2ff);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: normal;
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.5;
  white-space: normal;
  z-index: 10001;       /* above bottom-nav (9000) and modals up to 10000 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
}
/* Allow user to scroll the tooltip when focused (tap on mobile) */
.gloss-term:hover::after,
.gloss-term:focus::after {
  pointer-events: auto;
  opacity: 1;
}

body.professional-mode .gloss-term {
  border-bottom-color: #1565c0;
}
body.professional-mode .gloss-term:hover,
body.professional-mode .gloss-term:focus {
  background: rgba(21, 101, 192, 0.08);
}
body.professional-mode .gloss-term::after {
  background: #ffffff;
  color: #263238;
  border-color: #1565c0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

/* Mobile/small screens: keep tooltip readable but rely on the JS positioner
   above to place it within the viewport. The custom-property defaults guard
   against the first paint before JS runs. */
@media (max-width: 600px) {
  .gloss-term::after {
    max-height: 60vh;          /* never covers >60% of screen */
  }
}

/* =========================================================
   HIGHLIGHTING (textbook-marker style) — selection toolbar +
   highlight chips inside content + "My Highlights" review page
   ========================================================= */
.hl-btn:hover {
    border-color: #ffd54f;
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.08);
}
.hl-btn.active {
    background: linear-gradient(135deg, rgba(255,213,79,0.20), rgba(255,167,38,0.06));
    border-color: #ffd54f;
    color: #ffd54f;
    font-weight: 600;
}
body.professional-mode .hl-btn {
    border-color: #cfd8dc;
    color: #455a64;
    background: #ffffff;
}
body.professional-mode .hl-btn:hover {
    border-color: #f57c00;
    color: #f57c00;
    background: #fff3e0;
}
body.professional-mode .hl-btn.active {
    background: #fff8e1;
    border-color: #f57c00;
    color: #e65100;
}

/* The actual highlighted text inside the article content
   — strong background fill + thick underline so it reads clearly
   on every screen size and in both themes (matches the textbook-
   marker look the user wants). */
mark.user-hl {
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: filter .15s ease;
    color: inherit;
    border-bottom: 3px solid currentColor;
    font-weight: 500;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
mark.user-hl:hover { filter: brightness(1.15); }
mark.user-hl.hl-yellow { background: rgba(255, 213, 79, 0.55); border-bottom-color: #ffd54f; }
mark.user-hl.hl-green  { background: rgba(102, 187, 106, 0.55); border-bottom-color: #43a047; }
mark.user-hl.hl-pink   { background: rgba(244, 143, 177, 0.55); border-bottom-color: #d81b60; }
body.professional-mode mark.user-hl.hl-yellow { background: #fff59d; border-bottom-color: #f9a825; color: #263238; }
body.professional-mode mark.user-hl.hl-green  { background: #c8e6c9; border-bottom-color: #2e7d32; color: #263238; }
body.professional-mode mark.user-hl.hl-pink   { background: #f8bbd0; border-bottom-color: #ad1457; color: #263238; }

/* Floating "Pick a colour" toolbar that appears when user selects text */
.hl-popup {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 6px;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 100200;
    animation: hl-popup-in .15s ease-out;
}
.hl-popup::after {
    content: '';
    position: absolute;
    bottom: -7px; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
}
@keyframes hl-popup-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.hl-popup-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}
.hl-popup-btn:hover { transform: scale(1.18); border-color: #fff; }
.hl-popup-btn.hl-yellow { background: #ffd54f; }
.hl-popup-btn.hl-green  { background: #66bb6a; }
.hl-popup-btn.hl-pink   { background: #f48fb1; }
body.professional-mode .hl-popup {
    background: #ffffff;
    border-color: #cfd8dc;
}
body.professional-mode .hl-popup::after { border-top-color: #ffffff; }

/* "My Highlights" review page — grouped per topic */
.hl-group {
    margin-bottom: 26px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid #ffd54f;
    border-radius: 8px;
}
.hl-group-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.hl-group-title {
    font-family: var(--font-code);
    font-weight: 700; color: var(--atlas-gold);
    font-size: 1.05rem;
}
.hl-group-meta {
    font-family: var(--font-code);
    font-size: .72rem; letter-spacing: 1.5px;
    color: var(--text-mute); text-transform: uppercase;
}
.hl-group-item {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    color: var(--text-main);
    font-size: .95rem;
    line-height: 1.5;
}
.hl-group-item.hl-yellow { background: rgba(255, 213, 79, 0.30); border-left: 3px solid #ffd54f; }
.hl-group-item.hl-green  { background: rgba(102, 187, 106, 0.25); border-left: 3px solid #66bb6a; }
.hl-group-item.hl-pink   { background: rgba(244, 143, 177, 0.25); border-left: 3px solid #f48fb1; }
body.professional-mode .hl-group {
    background: #fffde7; border-left-color: #fbc02d;
}
body.professional-mode .hl-group-item.hl-yellow { background: #fff59d; color: #263238; }
body.professional-mode .hl-group-item.hl-green  { background: #c8e6c9; color: #263238; }
body.professional-mode .hl-group-item.hl-pink   { background: #f8bbd0; color: #263238; }

@media (max-width: 600px) {
    .hl-btn span { display: none; }
    .hl-btn { padding: 10px 12px; }
}

/* ============================================================
   HIGHLIGHT POPUP — follows the selected text. JavaScript sets
   its viewport-clamped position and flips it above the selection
   when there is not enough room below.
   ============================================================ */
.hl-popup.hl-popup-selection {
    position: fixed !important;
    top: 0;
    left: 0;
    transform: translateX(-50%) !important;
    z-index: 99999;
    background: #0e1424;
    border: 1px solid var(--atlas-gold);
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    gap: 6px;
    max-width: calc(100vw - 16px);
    flex-wrap: nowrap;
    animation: hl-popup-near-selection .16s ease-out;
}
.hl-popup.hl-popup-selection::after { display: none; }
@keyframes hl-popup-near-selection {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.hl-popup-label {
    font-family: var(--font-code);
    font-size: .75rem;
    color: var(--text-mute);
    padding: 0 6px 0 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.hl-popup-label i { color: var(--atlas-gold); margin-right: 4px; }
.hl-popup-btn.hl-blue   { background: #5dade2; }
.hl-popup-sep {
    width: 1px; height: 22px; background: var(--border);
    margin: 0 4px;
}
.hl-popup-action {
    background: rgba(0, 242, 255, 0.08);
    border: 1px solid var(--why-cyan);
    color: var(--why-cyan);
    border-radius: 999px;
    padding: 6px 12px;
    font-family: var(--font-code);
    font-size: .8rem;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s ease, transform .15s ease;
}
.hl-popup-action:hover { background: rgba(0, 242, 255, 0.2); transform: scale(1.03); }
.hl-popup-action.hl-close-action {
    padding: 6px 10px;
    border-color: var(--border);
    color: var(--text-mute);
    background: transparent;
}
.hl-popup-action.hl-close-action:hover { background: rgba(255,255,255,0.06); color: var(--text-main); }

@media (max-width: 600px) {
    .hl-popup.hl-popup-selection { padding: 5px 6px; gap: 4px; border-radius: 24px; }
    .hl-popup-label { display: none; }
    .hl-popup-sep   { display: none; }
    .hl-popup-btn   { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); padding: 0; }
    .hl-popup-action { padding: 5px 9px; font-size: .7rem; }
    .hl-popup-action i { font-size: .85rem; }
    .hl-popup-action.hl-note-action span,
    .hl-popup-action.hl-note-action { gap: 3px; }
}
@media (max-width: 380px) {
    .hl-popup-action.hl-note-action { padding: 5px 7px; }
    .hl-popup-action.hl-note-action::after { content: ''; }
}

/* Blue highlight colour (definition / must-memorise) */
mark.user-hl.hl-blue   { background: rgba(93, 173, 226, 0.55); border-bottom-color: #1e88e5; }
body.professional-mode mark.user-hl.hl-blue { background: #bbdefb; border-bottom-color: #1565c0; color: #102a43; }
.hl-group-item.hl-blue { background: rgba(93, 173, 226, 0.25); border-left: 3px solid #5dade2; }
body.professional-mode .hl-group-item.hl-blue { background: #bbdefb; color: #102a43; }

/* Count-badge chips on the Highlight button */
.hl-chip {
    display: inline-block;
    min-width: 18px; padding: 0 6px;
    margin: 0 2px;
    border-radius: 10px;
    font-size: .72rem;
    font-family: var(--font-code);
    color: #0c1326;
    background: #ffd54f;
    line-height: 16px;
}
.hl-chip.hl-green  { background: #66bb6a; color: #0c1326; }
.hl-chip.hl-pink   { background: #f48fb1; color: #0c1326; }
.hl-chip.hl-blue   { background: #5dade2; color: #0c1326; }

/* ============================================================
   "MY HIGHLIGHTS" toolbar — search + colour-filter chips + export
   ============================================================ */
.hl-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 12px 14px; margin-bottom: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: sticky; top: 0; z-index: 10;
}
.hl-search {
    flex: 1 1 220px; min-width: 180px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: .95rem;
}
.hl-search:focus { outline: none; border-color: var(--atlas-gold); }
.hl-filter-chips { display: flex; gap: 6px; align-items: center; }
.hl-filter {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer; padding: 0;
    transition: transform .15s ease, border-color .15s ease;
}
.hl-filter[data-c="all"] {
    width: auto; height: 28px; border-radius: 14px;
    padding: 0 12px; color: var(--text-mute);
    background: transparent; font-family: var(--font-code);
    font-size: .75rem; letter-spacing: 1px;
}
.hl-filter.hl-yellow { background: #ffd54f; }
.hl-filter.hl-green  { background: #66bb6a; }
.hl-filter.hl-pink   { background: #f48fb1; }
.hl-filter.hl-blue   { background: #5dade2; }
.hl-filter.on { border-color: #fff; transform: scale(1.12); }
.hl-export-btn {
    background: rgba(255, 213, 79, 0.08);
    border: 1px solid var(--atlas-gold);
    color: var(--atlas-gold);
    border-radius: 6px;
    padding: 8px 14px;
    font-family: var(--font-code);
    font-size: .8rem;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.hl-export-btn:hover { background: rgba(255, 213, 79, 0.18); }
.hl-group-note {
    margin-top: 6px; padding: 6px 10px;
    background: rgba(0, 242, 255, 0.08);
    border-left: 2px solid var(--why-cyan);
    border-radius: 4px;
    font-size: .85rem;
    color: var(--text-main);
    font-style: italic;
}
.hl-group-note i { color: var(--why-cyan); margin-right: 4px; }

/* Professional Mode overrides for Highlights view */
body.professional-mode .hl-toolbar {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(21, 101, 192, 0.03) !important;
}

body.professional-mode .hl-search {
    background: #ffffff !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
    border-radius: 8px !important;
    color: var(--text-main) !important;
}

body.professional-mode .hl-search:focus {
    border-color: var(--atlas-gold) !important;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.08) !important;
}

body.professional-mode .hl-filter {
    border-color: rgba(21, 101, 192, 0.15) !important;
}

body.professional-mode .hl-filter[data-c="all"] {
    background: #ffffff !important;
    color: var(--text-mute) !important;
    border: 1px solid rgba(21, 101, 192, 0.15) !important;
}

body.professional-mode .hl-filter[data-c="all"]:hover {
    color: var(--atlas-gold) !important;
    border-color: var(--atlas-gold) !important;
}

body.professional-mode .hl-filter.on {
    border-color: var(--atlas-gold) !important;
}

body.professional-mode .hl-export-btn {
    background: #ffffff !important;
    border: 1px solid rgba(21, 101, 192, 0.2) !important;
    color: var(--atlas-gold) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

body.professional-mode .hl-export-btn:hover {
    background: rgba(21, 101, 192, 0.05) !important;
    border-color: var(--atlas-gold) !important;
}

body.professional-mode .hl-group-note {
    background: rgba(255, 112, 67, 0.03) !important;
    border-left-color: var(--medical-coral) !important;
    color: var(--text-main) !important;
}

body.professional-mode .hl-group-note i {
    color: var(--medical-coral) !important;
}

/* ============================================================
   NOTE BUTTON in detail header (mirrors .hl-btn)
   ============================================================ */
.note-btn {
    background: rgba(0, 242, 255, 0.06);
    border: 1px solid var(--why-cyan);
    color: var(--why-cyan);
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--font-code);
    font-size: .85rem;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s ease, transform .15s ease;
}
.note-btn:hover { background: rgba(0, 242, 255, 0.18); transform: translateY(-1px); }
.note-btn.active { background: rgba(0, 242, 255, 0.18); }
body.professional-mode .note-btn { color: #1976d2; border-color: #1976d2; background: rgba(25,118,210,0.05); }
body.professional-mode .note-btn:hover { background: rgba(25,118,210,0.15); }
@media (max-width: 600px) {
    .note-btn span { display: none; }
    .note-btn { padding: 10px 12px; }
}

/* ============================================================
   NOTE EDITOR DIALOG (modal)
   ============================================================ */
.note-editor-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(3px);
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: detailFade .2s ease;
}
.note-editor {
    background: #0e1424;
    border: 1px solid var(--why-cyan);
    border-radius: 10px;
    width: 100%; max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
body.professional-mode .note-editor { background: #ffffff; color: #263238; }
.note-editor-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-code); color: var(--why-cyan);
    font-size: .95rem; letter-spacing: 1px; text-transform: uppercase;
}
.note-editor-head i { color: var(--atlas-gold); }
.note-editor-close {
    margin-left: auto; background: transparent; border: none;
    color: var(--text-mute); cursor: pointer; font-size: 1.1rem;
    padding: 4px 8px;
}
.note-editor-close:hover { color: var(--text-main); }
.note-editor-anchor {
    background: rgba(255, 213, 79, 0.08);
    border-left: 2px solid var(--atlas-gold);
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--text-mute);
    font-size: .85rem;
}
.note-editor-anchor em { color: var(--text-main); font-style: italic; }
#note-editor-text {
    width: 100%;
    min-height: 130px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 1rem;
    resize: vertical;
}
body.professional-mode #note-editor-text { background: #f5f7fa; color: #102a43; }
#note-editor-text:focus { outline: none; border-color: var(--why-cyan); }
.note-editor-colors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note-color-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
    transition: transform .15s ease, border-color .15s ease;
}
.note-color-swatch.hl-yellow { background: #ffd54f; }
.note-color-swatch.hl-green  { background: #66bb6a; }
.note-color-swatch.hl-pink   { background: #f48fb1; }
.note-color-swatch.hl-blue   { background: #5dade2; }
.note-color-swatch.on { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
body.professional-mode .note-color-swatch.on { border-color: #102a43; box-shadow: 0 0 0 2px rgba(0,0,0,0.2); }
.note-editor-actions {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    border-top: 1px solid var(--border); padding-top: 12px;
}
.note-btn-cancel, .note-btn-save, .note-btn-delete {
    padding: 9px 16px; border-radius: 6px;
    font-family: var(--font-code); font-size: .8rem; letter-spacing: 1px;
    cursor: pointer; border: 1px solid var(--border);
    background: transparent; color: var(--text-mute);
    transition: background .15s ease;
}
.note-btn-cancel:hover { background: rgba(255,255,255,0.06); color: var(--text-main); }
.note-btn-save {
    background: var(--why-cyan); color: #0c1326; border-color: var(--why-cyan);
    font-weight: 700;
}
.note-btn-save:hover { filter: brightness(1.1); }
.note-btn-delete {
    color: #f48fb1; border-color: #f48fb1; margin-right: auto;
}
.note-btn-delete:hover { background: rgba(244, 143, 177, 0.12); }

/* ============================================================
   NOTES BLOCK appended at the bottom of each topic detail
   ============================================================ */
.notes-section { animation: detailFade .6s ease; }
.note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.note-card {
    position: relative;
    padding: 12px 14px 36px 14px;
    border-radius: 8px;
    border-left: 4px solid #ffd54f;
    background: rgba(255, 213, 79, 0.12);
    color: var(--text-main);
    font-size: .92rem;
    line-height: 1.45;
    word-break: break-word;
}
.note-card.hl-green  { background: rgba(102, 187, 106, 0.12); border-left-color: #66bb6a; }
.note-card.hl-pink   { background: rgba(244, 143, 177, 0.12); border-left-color: #f48fb1; }
.note-card.hl-blue   { background: rgba(93, 173, 226, 0.12);  border-left-color: #5dade2; }
.note-card-body { white-space: pre-wrap; }
.note-anchor-chip {
    margin-top: 8px;
    background: rgba(255,255,255,0.05);
    padding: 5px 9px;
    border-radius: 4px;
    font-size: .78rem;
    color: var(--text-mute);
    cursor: pointer;
    transition: background .15s ease;
}
.note-anchor-chip:hover { background: rgba(255,255,255,0.12); color: var(--text-main); }
.note-anchor-chip i { color: var(--atlas-gold); margin-right: 4px; }
.note-card-foot {
    position: absolute; left: 14px; right: 14px; bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: .72rem; color: var(--text-mute); font-family: var(--font-code);
}
.note-card-btn {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-mute); padding: 2px 6px;
}
.note-card-btn:hover { color: var(--atlas-gold); }

body.professional-mode .note-card { background: #fff9c4; color: #263238; }
body.professional-mode .note-card.hl-green { background: #c8e6c9; }
body.professional-mode .note-card.hl-pink  { background: #f8bbd0; }
body.professional-mode .note-card.hl-blue  { background: #bbdefb; }

/* Tiny ✎ icon dropped after anchored text in the prose */
.note-anchored-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    margin: 0 3px;
    border-radius: 50%;
    background: var(--why-cyan);
    color: #0c1326;
    font-size: .65rem;
    cursor: pointer;
    vertical-align: middle;
    transition: transform .15s ease;
}
.note-anchored-icon:hover { transform: scale(1.18); }
.note-anchored-icon i { font-size: .65rem; }

/* Pulse effect when jumping to an anchor */
.anchor-pulse {
    animation: anchor-pulse 1.4s ease;
    border-radius: 4px;
}
@keyframes anchor-pulse {
    0%, 100% { background-color: transparent; }
    30%, 70% { background-color: rgba(0, 242, 255, 0.25); }
}

/* ============================================================
   PHASE 3: MODERN VISUAL MODERNIZATION OVERRIDES (HIGH PERFORMANCE 60FPS)
   ============================================================ */

/* Theme Variables for Bio Background glows */
:root {
    --bg-glow-start: rgba(0, 242, 255, 0.08);
    --bg-glow-end: rgba(255, 215, 0, 0.04);
    --bg-grid-color: rgba(255, 255, 255, 0.015);
    --bg-cell-color: rgba(0, 242, 255, 0.025);
}

body.professional-mode {
    --bg-glow-start: rgba(21, 101, 192, 0.06);
    --bg-glow-end: rgba(0, 137, 123, 0.04);
    --bg-grid-color: rgba(21, 101, 192, 0.02);
    --bg-cell-color: rgba(0, 137, 123, 0.02);
}

/* Background Mesh Container and Vector Nodes - Isolated compositing */
.bio-bg-container {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    contain: strict;
    will-change: transform;
}

.bio-bg-svg {
    width: 100%;
    height: 100%;
}

/* Biological background animations - Translate-only & Opacity-only (GPU composited) */
.bio-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.float-node {
    position: absolute;
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 12px 2px var(--color);
    opacity: 0.35;
    will-change: transform;
}

.floating-cell {
    position: absolute;
    width: 80px;
    height: 80px;
    will-change: transform;
}

@keyframes float-node-slow {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(10px, -15px, 0); }
}

@keyframes float-node-med {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-15px, 10px, 0); }
}

@keyframes float-cell-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(15px, -10px, 0) rotate(30deg); }
}

.float-node-1 { animation: float-node-slow 12s ease-in-out infinite; }
.float-node-2 { animation: float-node-med 15s ease-in-out infinite; }
.float-node-3 { animation: float-node-med 10s ease-in-out infinite; }
.float-node-4 { animation: float-node-slow 14s ease-in-out infinite; }

.floating-cell-1 { animation: float-cell-drift 20s ease-in-out infinite; }
.floating-cell-2 { animation: float-cell-drift 24s ease-in-out infinite; }



/* Highly Performant Glassmorphic Card Overrides (Student Dark Mode) */
.portal-card {
    background: rgba(10, 25, 47, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 20px 40px rgba(2, 12, 27, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(10px) !important; /* Optimized blur radius for high frame rates on all screens */
    border-radius: 24px !important;
    overflow: hidden;
    contain: content;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s !important;
}

.portal-card::before {
    background: conic-gradient(from 0deg, transparent, var(--color), transparent 20%) !important;
    inset: -2px !important;
}

.portal-card::after {
    background: rgba(10, 20, 38, 0.85) !important;
    inset: 1px !important;
    border-radius: 23px !important;
    backdrop-filter: blur(10px) !important; /* Matches optimized blur */
}

.portal-card:hover {
    transform: translate3d(0, -6px, 0) scale(1.02) !important; /* GPU accelerated translate3d */
    box-shadow: 0 25px 50px rgba(0, 242, 255, 0.08), 0 0 25px rgba(255, 215, 0, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.portal-card:active {
    transform: translate3d(0, -2px, 0) scale(1.002) !important;
}

/* Floating Orb-Icon - Optimized hardware-accelerated text-shadow instead of expensive filter drop-shadow */
@keyframes orb-levitate {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
}

.orb-icon {
    animation: orb-levitate 4s ease-in-out infinite !important;
    will-change: transform;
    filter: none !important; /* Avoid expensive GPU offscreen render filters */
    text-shadow: 0 0 15px var(--glow) !important; /* Blazing fast native text shadows */
}

.portal-card:hover .orb-icon {
    filter: none !important;
    text-shadow: 0 0 25px var(--glow) !important;
}

/* Horizontal Progress Indicators inside selector cards */
.card-progress-container {
    width: 85% !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 2 !important;
}

.card-progress-bar {
    width: 100% !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

.card-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--why-cyan) 0%, var(--atlas-gold) 100%) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 10px var(--why-cyan) !important;
    position: relative !important;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* GPU-friendly translation shimmer */
.card-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    animation: progress-shimmer 2s infinite linear !important;
    transform: translate3d(-100%, 0, 0) !important;
    will-change: transform;
}

@keyframes progress-shimmer {
    100% { transform: translate3d(100%, 0, 0); }
}

.card-progress-text {
    display: flex !important;
    justify-content: space-between !important;
    font-family: var(--font-code) !important;
    font-size: 0.72rem !important;
    color: var(--text-mute) !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

.card-progress-text span:last-child {
    color: var(--why-cyan) !important;
}

/* Premium Medical Glass Capsule Theme Toggle */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important; /* Optimized blur */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25), inset 0 0 12px rgba(255,255,255,0.04) !important;
    border-radius: 30px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    color: var(--text-main) !important;
}

.theme-toggle-btn i {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.theme-toggle-btn:hover {
    transform: scale(1.06) translate3d(0, -1px, 0) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 242, 255, 0.18), inset 0 0 12px rgba(255,255,255,0.08) !important;
}

.theme-toggle-btn:hover i {
    transform: rotate(360deg) !important;
    color: var(--why-cyan) !important;
}

/* ============================================================
   LIGHT MEDICAL THEME GLASSMORPHIC OVERRIDES (Professional Mode)
   ============================================================ */

body.professional-mode {
    background: linear-gradient(135deg, #f0f4f8 0%, #e3f2fd 50%, #f0f4f8 100%) !important;
}

body.professional-mode .portal-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(21, 101, 192, 0.08) !important;
    border-left: 4px solid var(--atlas-gold) !important;
    box-shadow: 0 12px 28px rgba(21, 101, 192, 0.03), 0 4px 10px rgba(0, 0, 0, 0.01), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 24px !important;
}

body.professional-mode .portal-card::before {
    display: none !important;
}

body.professional-mode .portal-card::after {
    display: none !important;
}

body.professional-mode .portal-card:hover {
    transform: translate3d(0, -6px, 0) scale(1.02) !important;
    border-color: var(--atlas-gold) !important;
    border-left-width: 6px !important;
    box-shadow: 0 15px 30px rgba(21, 101, 192, 0.12) !important;
    background: rgba(255, 255, 255, 0.85) !important;
}

body.professional-mode .card-why {
    border-left-color: var(--why-cyan) !important;
}

body.professional-mode .card-why:hover {
    border-color: var(--why-cyan) !important;
    border-left-width: 6px !important;
}

body.professional-mode .card-progress-bar {
    background: rgba(21, 101, 192, 0.06) !important;
}

body.professional-mode .card-progress-fill {
    background: linear-gradient(90deg, var(--why-cyan) 0%, var(--atlas-gold) 100%) !important;
    box-shadow: 0 0 6px rgba(0, 137, 123, 0.3) !important;
}

body.professional-mode .card-progress-text {
    color: var(--text-mute) !important;
}

body.professional-mode .card-progress-text span:last-child {
    color: var(--atlas-gold) !important;
}

body.professional-mode .orb-icon {
    animation: orb-levitate 4s ease-in-out infinite !important;
    filter: none !important;
    text-shadow: none !important;
}

body.professional-mode .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1.5px solid rgba(21, 101, 192, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(21, 101, 192, 0.08), inset 0 0 12px rgba(255,255,255,0.8) !important;
    color: #1565c0 !important;
}

body.professional-mode .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #1565c0 !important;
    box-shadow: 0 12px 40px 0 rgba(21, 101, 192, 0.18) !important;
}

body.professional-mode .theme-toggle-btn:hover i {
    color: #00897b !important;
}

/* ================================================================
   NEW NAVIGATION ARCHITECTURE (v2 — premium-mobile redesign)
   ----------------------------------------------------------------
   3-layer model:
     L1 Primary destinations  -> Bottom nav (mobile)  / Top dock (desktop)
     L2 Contextual actions    -> Inline toolbar (icon-only on mobile)
     L3 Settings + meta       -> Me tab (off the chrome entirely)

   The bottom nav is the spine. Every screen sits inside it on mobile,
   so the spatial model never breaks. On desktop the bottom bar
   reconfigures itself into a horizontal top dock (same component,
   different layout) so the navigation language is consistent across
   form factors.
   ================================================================ */

/* ---------- Bottom navigation (mobile) ---------- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10, 16, 28, 0.92);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.bn-item {
    background: transparent;
    border: 0;
    padding: 6px 4px 8px;
    color: var(--text-mute);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: .68rem;
    letter-spacing: .5px;
    cursor: pointer;
    position: relative;
    transition: color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.bn-item .bn-icon { font-size: 1.25rem; transition: transform .18s ease; }
.bn-item .bn-label { font-weight: 500; opacity: .85; }
.bn-item:active { transform: scale(.94); }
.bn-item.is-active { color: var(--atlas-gold); }
.bn-item.is-active .bn-icon { transform: translateY(-2px) scale(1.06); }
.bn-item.is-active::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    width: 28px; height: 3px;
    background: var(--atlas-gold);
    border-radius: 0 0 4px 4px;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(255, 213, 79, 0.6);
}

/* Center QUIZ slot rendered as a raised FAB — premium app-store feel.
   It anchors the bar visually and signals "primary action". */
.bn-item-primary { padding-top: 0; }
.bn-item-primary .bn-fab {
    width: 52px; height: 52px;
    margin-top: -22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--atlas-gold) 0%, #f5b800 100%);
    color: #0a0f1c;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 22px rgba(255, 213, 79, 0.35),
                0 0 0 4px rgba(10, 16, 28, 0.92);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.bn-item-primary:active .bn-fab { transform: scale(.92); }
.bn-item-primary .bn-label { color: var(--atlas-gold); font-weight: 700; }
.bn-item-primary.is-active::before { display: none; }
.bn-item-primary.is-active .bn-fab {
    transform: scale(1.04);
    box-shadow: 0 10px 28px rgba(255, 213, 79, 0.55),
                0 0 0 4px rgba(10, 16, 28, 0.92);
}

/* Hide-on-scroll behaviour: bottom nav slides down when user scrolls
   into deep content (more screen for reading), comes back on scroll-up.
   The .bn-hidden class is toggled by JS. */
.bottom-nav.bn-hidden { transform: translateY(110%); }

/* Body padding so content isn't hidden under the bar */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Desktop: same bar lives at the BOTTOM, just rendered as an
   elegant centered pill instead of a full-width strip. Consistency with
   mobile beats the old top-dock — bottom-nav is universal on desktop too. */
@media (min-width: 901px) {
    .bottom-nav {
        /* Pull the bar into a centered pill, anchored to bottom */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 18px;
        width: auto;
        height: auto;
        padding: 6px 10px;
        grid-template-columns: repeat(5, auto);
        gap: 6px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(14, 20, 36, 0.88);
        box-shadow: 0 16px 44px rgba(0,0,0,0.45);
    }
    /* Auto-hide slides DOWN (out of viewport bottom) on desktop too */
    .bottom-nav.bn-hidden { transform: translateX(-50%) translateY(160%); }
    .bn-item {
        flex-direction: row;
        padding: 10px 18px;
        gap: 8px;
        font-size: .78rem;
        border-radius: 999px;
    }
    .bn-item .bn-icon { font-size: 1.05rem; }
    .bn-item.is-active { background: rgba(255, 213, 79, 0.14); }
    /* Hide the small bar indicator on desktop — the background highlight is enough */
    .bn-item.is-active::before { display: none; }
    .bn-item-primary { padding: 6px; }
    .bn-item-primary .bn-fab {
        width: 44px; height: 44px;
        margin: 0;
        font-size: 1.05rem;
        box-shadow: 0 6px 18px rgba(255, 213, 79, 0.45);
    }
    .bn-item-primary .bn-label { display: none; }
    /* Slightly less padding-bottom on desktop since the bar is shorter */
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Professional mode — light theme */
body.professional-mode .bottom-nav {
    background: rgba(255,255,255,0.92);
    border-top-color: rgba(0,0,0,0.08);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.08);
}
body.professional-mode .bn-item { color: #5c6b80; }
body.professional-mode .bn-item.is-active { color: #1976d2; }
body.professional-mode .bn-item.is-active::before { background: #1976d2; box-shadow: 0 0 12px rgba(25,118,210,0.4); }
body.professional-mode .bn-item-primary .bn-fab {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(25, 118, 210, 0.35), 0 0 0 4px rgba(255,255,255,0.92);
}
body.professional-mode .bn-item-primary .bn-label { color: #1976d2; }

/* ---------- Mobile decluttering: hide redundant top-nav buttons ---------- */
@media (max-width: 900px) {
    .nav-btn-desktop-only { display: none !important; }
    .nav-actions { gap: 6px; }
    /* Compact the breadcrumb on mobile so the back button + elite toggle fit */
    .nav-bar .badge { font-size: .7rem; padding: 6px 10px; }
    /* Push the top-left theme toggle off mobile chrome — it lives in Me now */
    .theme-toggle-btn { display: none !important; }
    /* Same for the dashboard-view's "RESET DATA" header button — hide on mobile,
       still reachable in Me > Dashboard. Keep desktop access. */
    #dashboard-view .nav-bar .nav-btn[onclick*="clearData"] {
        font-size: .7rem; padding: 8px 10px;
    }
}

/* ---------- L2 contextual toolbar on Atlas detail page — icon-only mobile ---------- */
@media (max-width: 700px) {
    .detail-header-actions {
        gap: 6px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end;
    }
    .detail-header-actions .hl-btn,
    .detail-header-actions .note-btn,
    .detail-header-actions .share-btn,
    .detail-header-actions .read-btn,
    .detail-header-actions .bm-btn {
        padding: 9px 10px !important;
        min-width: 40px;
        font-size: 0;          /* hide text, keep icon */
        gap: 0 !important;
    }
    .detail-header-actions .hl-btn i,
    .detail-header-actions .note-btn i,
    .detail-header-actions .share-btn i,
    .detail-header-actions .read-btn i,
    .detail-header-actions .bm-btn i {
        font-size: .95rem;
        margin: 0;
    }
    /* The highlight-count chips still need to show — un-hide them */
    .detail-header-actions .hl-btn span,
    .detail-header-actions .note-btn span { font-size: .68rem; margin-left: 4px; display: inline; }
    .detail-header-actions .hl-btn span .hl-chip,
    .detail-header-actions .note-btn span { line-height: 1; }
    /* If counts are zero, fully hide the text */
    .detail-header-actions .hl-btn:not(.active) span,
    .detail-header-actions .note-btn:not(.active) span { display: none; }
}

/* ---------- LIBRARY tab bar (unified Bookmarks/Highlights/Notes) ---------- */
.library-tabs {
    display: none;
    position: relative;
    gap: 4px;
    padding: 6px;
    margin: 0 0 14px 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.library-tabs.is-open { display: flex; }
.lib-tab {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-mute);
    font-family: var(--font-code);
    font-size: .82rem;
    letter-spacing: 1px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    position: relative;
    z-index: 2;
    transition: color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.lib-tab i { font-size: .95rem; }
.lib-tab.is-active { color: var(--text-main); }
.lib-tab-indicator {
    position: absolute;
    top: 6px; bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / 3);
    background: linear-gradient(135deg, rgba(255,213,79,0.18), rgba(0,242,255,0.12));
    border: 1px solid rgba(255,213,79,0.35);
    border-radius: 8px;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1;
    pointer-events: none;
}
.library-tabs[data-active="0"] .lib-tab-indicator { transform: translateX(0); }
.library-tabs[data-active="1"] .lib-tab-indicator { transform: translateX(100%); }
.library-tabs[data-active="2"] .lib-tab-indicator { transform: translateX(200%); }
@media (max-width: 600px) {
    .lib-tab span { font-size: .7rem; }
    .lib-tab i { font-size: 1rem; }
}
body.professional-mode .library-tabs {
    background: #f5f7fa; border-color: #d0d7de;
}
body.professional-mode .lib-tab { color: #5c6b80; }
body.professional-mode .lib-tab.is-active { color: #102a43; }
body.professional-mode .lib-tab-indicator {
    background: linear-gradient(135deg, rgba(25,118,210,0.12), rgba(38,166,154,0.10));
    border-color: rgba(25,118,210,0.35);
}

/* ---------- ME / SETTINGS view ---------- */
#me-view { padding-top: 24px; }
.me-wrap { max-width: 720px; margin: 0 auto; padding: 0 20px 40px; }
.me-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 24px;
    animation: meFade .4s ease;
}
.me-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,213,79,0.18), rgba(0,242,255,0.12));
    border: 1px solid rgba(255,213,79,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--atlas-gold);
}
.me-greet { font-family: var(--font-code); font-size: 1.1rem; color: var(--text-main); letter-spacing: 1px; }
.me-sub { font-size: .85rem; color: var(--text-mute); margin-top: 2px; }

.me-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 20px;
}
.me-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: transform .2s ease;
}
.me-stat:hover { transform: translateY(-2px); }
.me-stat-num {
    display: block;
    font-family: var(--font-code);
    font-size: 1.5rem; font-weight: 700;
    color: var(--atlas-gold);
}
.me-stat-lbl {
    display: block;
    font-size: .7rem; color: var(--text-mute);
    letter-spacing: 1px; text-transform: uppercase;
    margin-top: 4px;
}

.me-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 32px;
}
@media (max-width: 480px) {
    .me-grid { grid-template-columns: 1fr; }
    .me-stats { grid-template-columns: repeat(2, 1fr); }
}
.me-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: left;
    cursor: pointer;
    color: var(--text-main);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
    animation: meFade .4s ease backwards;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 110px;
}
.me-card:nth-child(1) { animation-delay: .05s; }
.me-card:nth-child(2) { animation-delay: .10s; }
.me-card:nth-child(3) { animation-delay: .15s; }
.me-card:nth-child(4) { animation-delay: .20s; }
.me-card:nth-child(5) { animation-delay: .25s; }
.me-card:hover { transform: translateY(-3px); border-color: rgba(255,213,79,0.35); background: rgba(255,213,79,0.04); }
.me-card:active { transform: translateY(-1px) scale(.99); }
.me-card-icon { font-size: 1.5rem; }
.me-card-title { font-family: var(--font-code); font-size: 1rem; letter-spacing: .5px; color: var(--text-main); }
.me-card-desc { font-size: .82rem; color: var(--text-mute); line-height: 1.4; }
.me-card-danger { border-color: rgba(255, 107, 107, 0.25); }
.me-card-danger .me-card-icon { color: #ff8a8a; }
.me-card-danger:hover { border-color: rgba(255,107,107,0.55); background: rgba(255,107,107,0.05); }
.me-footer {
    text-align: center;
    padding: 24px 0;
    color: var(--text-mute);
    font-size: .85rem;
    border-top: 1px solid var(--border);
}
@keyframes meFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.professional-mode .me-card { background: #f5f7fa; border-color: #d0d7de; color: #102a43; }
body.professional-mode .me-card-desc { color: #5c6b80; }
body.professional-mode .me-stat { background: #f5f7fa; border-color: #d0d7de; }
body.professional-mode .me-stat-num { color: #1976d2; }
body.professional-mode .me-avatar { background: linear-gradient(135deg, rgba(25,118,210,0.12), rgba(38,166,154,0.10)); color: #1976d2; border-color: rgba(25,118,210,0.35); }

/* ---------- ABOUT modal ---------- */
.about-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: meFade .25s ease;
}
.about-card {
    background: #0e1424;
    border: 1px solid rgba(255,213,79,0.25);
    border-radius: 16px;
    max-width: 560px; width: 100%;
    max-height: 86vh; overflow-y: auto;
    padding: 28px 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    position: relative;
}
body.professional-mode .about-card { background: #ffffff; border-color: #d0d7de; color: #102a43; }
.about-close {
    position: absolute; top: 12px; right: 14px;
    background: transparent; border: 0; color: var(--text-mute);
    font-size: 1.2rem; cursor: pointer;
    padding: 6px 10px; border-radius: 6px;
}
.about-close:hover { color: var(--text-main); background: rgba(255,255,255,0.06); }
.about-hero { text-align: center; padding: 8px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.about-hero-icon { font-size: 2.2rem; color: var(--atlas-gold); margin-bottom: 8px; }
.about-hero-title { font-family: var(--font-code); font-size: 1.4rem; margin: 0; letter-spacing: 2px; color: var(--text-main); }
.about-hero-tag { font-size: .85rem; color: var(--text-mute); margin-top: 4px; letter-spacing: 1px; }
.about-section { margin-bottom: 18px; }
.about-section-head {
    font-family: var(--font-code);
    color: var(--atlas-gold);
    font-size: .85rem; letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.about-section-head i { margin-right: 6px; }
.about-section p { color: var(--text-main); line-height: 1.6; margin: 0; }
.about-list { list-style: none; padding: 0; margin: 0; }
.about-list li { padding: 4px 0; color: var(--text-main); line-height: 1.5; }
.about-list li b { color: var(--why-cyan); }
.about-contributor-name { color: var(--why-cyan); }
body.professional-mode .about-section-head { color: #1976d2; }
body.professional-mode .about-list li b { color: #00897b; }
body.professional-mode .about-contributor-name { color: #00897b; }

/* ================================================================
   ENGAGEMENT LAYER (v3) — onboarding, install banner, streak block,
   heatmap, notification toggle, audio button, Elite button polish.
   ================================================================ */

/* ---------- ELITE BUTTON polish (premium toggle feel) ---------- */
.elite-toggle-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 213, 79, 0.35) !important;
    color: var(--atlas-gold) !important;
    background: linear-gradient(135deg, rgba(255,213,79,0.05) 0%, rgba(255,167,38,0.02) 100%) !important;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    letter-spacing: 1.2px;
}
.elite-toggle-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,213,79,0.35) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width .5s ease, height .5s ease;
    pointer-events: none;
    z-index: 0;
}
.elite-toggle-btn i, .elite-toggle-btn span { position: relative; z-index: 1; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.elite-toggle-btn:hover {
    border-color: var(--atlas-gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 213, 79, 0.18);
}
.elite-toggle-btn:hover::before { width: 220%; height: 220%; }
.elite-toggle-btn:hover i { transform: rotate(-8deg) scale(1.08); }
.elite-toggle-btn:active { transform: translateY(0) scale(.97); }

/* Slow perimeter trace: makes the detailed-content control discoverable
   without a heavy glow, layout movement, or a continuous button pulse. */
.elite-border-trace {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
    color: #ffd54f;
}
.elite-border-trace rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7px;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-dasharray: 24 76;
    animation: eliteBorderTrace 4.8s linear infinite;
    opacity: .88;
}
@keyframes eliteBorderTrace {
    0%   { stroke-dashoffset: 100; opacity: .42; }
    20%  { opacity: .95; }
    80%  { opacity: .95; }
    100% { stroke-dashoffset: 0; opacity: .42; }
}

/* Active (Elite ON) state — gradient fill, glow, badge dot */
.elite-toggle-btn.active {
    background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%) !important;
    color: #1a1208 !important;
    border-color: #ffd54f !important;
    box-shadow:
        0 0 0 3px rgba(255, 213, 79, 0.15),
        0 6px 22px rgba(255, 167, 38, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.3);
    animation: eliteActivate .45s cubic-bezier(.34,1.56,.64,1);
}
.elite-toggle-btn.active i { color: #1a1208 !important; transform: rotate(0) scale(1); }
.elite-toggle-btn.active .elite-border-trace { opacity: 0; }
.elite-toggle-btn.active .elite-border-trace rect { animation: none; }
.elite-toggle-btn.active::after {
    content: '';
    position: absolute;
    top: -3px; right: -3px;
    width: 10px; height: 10px;
    background: #ff6b35;
    border-radius: 50%;
    border: 2px solid #0a0f1c;
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.6);
    animation: eliteDotPulse 2.2s ease-in-out infinite;
}
@keyframes eliteActivate {
    0%   { transform: scale(.95); }
    55%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255, 213, 79, 0.18), 0 8px 28px rgba(255,167,38,0.55); }
    100% { transform: scale(1); }
}
@keyframes eliteDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }
}
body.professional-mode .elite-toggle-btn {
    border-color: rgba(25,118,210,0.4) !important;
    color: #1565c0 !important;
    background: rgba(25,118,210,0.04) !important;
}
body.professional-mode .elite-border-trace { color: #1976d2; }
body.professional-mode .elite-toggle-btn.active {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: #ffffff !important;
    border-color: #1565c0 !important;
    box-shadow:
        0 0 0 3px rgba(25,118,210,0.15),
        0 6px 22px rgba(25,118,210,0.4);
}
body.professional-mode .elite-toggle-btn.active i { color: #ffffff !important; }

/* ---------- ONBOARDING modal (first-time visitor tour) ---------- */
.onboard-modal {
    position: fixed; inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(20,32,54,0.95), rgba(10,15,28,0.98));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: onboardFade .4s ease;
}
.onboard-card {
    background: #0e1424;
    border: 1px solid rgba(255, 213, 79, 0.25);
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    padding: 36px 28px 24px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.75);
    position: relative;
    animation: onboardSlide .45s cubic-bezier(.34,1.56,.64,1);
}
body.professional-mode .onboard-card { background: #ffffff; color: #102a43; border-color: #d0d7de; }
.onboard-skip {
    position: absolute;
    top: 14px; right: 16px;
    background: transparent;
    border: 0;
    color: var(--text-mute);
    font-family: var(--font-code);
    font-size: .75rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}
.onboard-skip:hover { color: var(--text-main); background: rgba(255,255,255,0.06); }
.onboard-icon {
    font-size: 3rem;
    margin-bottom: 18px;
    animation: onboardIconPop .55s cubic-bezier(.34,1.56,.64,1);
    filter: drop-shadow(0 4px 14px rgba(255,213,79,0.35));
}
.onboard-title {
    font-family: var(--font-code);
    font-size: 1.35rem;
    color: var(--text-main);
    margin: 0 0 12px;
    letter-spacing: 1px;
}
.onboard-body {
    color: var(--text-mute);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 24px;
    min-height: 80px;
}
.onboard-body b { color: var(--atlas-gold); font-weight: 700; }
body.professional-mode .onboard-body b { color: #1565c0; }
.onboard-dots {
    display: flex; justify-content: center; gap: 6px;
    margin-bottom: 24px;
}
.onboard-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    transition: all .3s ease;
}
.onboard-dot.on {
    background: var(--atlas-gold);
    width: 26px;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255, 213, 79, 0.45);
}
.onboard-actions {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.onboard-btn {
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--font-code);
    font-size: .82rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .2s ease;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-mute);
}
.onboard-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
.onboard-btn.primary {
    background: linear-gradient(135deg, var(--atlas-gold) 0%, #ffb300 100%);
    color: #1a1208;
    border-color: var(--atlas-gold);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(255, 213, 79, 0.35);
}
.onboard-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 213, 79, 0.45); }
.onboard-btn.ghost { border-color: var(--border); }
@keyframes onboardFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboardSlide { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes onboardIconPop { 0% { opacity: 0; transform: scale(.5) rotate(-15deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

/* ---------- INSTALL-AS-APP banner ---------- */
.install-banner {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));   /* clears bottom nav (mobile)
                                                                — desktop override below */
    z-index: 9500;
    background: linear-gradient(135deg, rgba(14,20,36,0.98), rgba(20,32,54,0.98));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,213,79,0.35);
    border-radius: 14px;
    padding: 14px 16px;
    display: none;
    align-items: center; gap: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
    max-width: 540px;
    margin: 0 auto;
}
.install-banner.install-shown { opacity: 1; transform: translateY(0); }
.install-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--atlas-gold), #ffb300);
    color: #1a1208;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(255, 213, 79, 0.4);
}
.install-msg {
    flex: 1;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--text-main);
}
.install-msg b { color: var(--atlas-gold); }
.install-btn {
    padding: 8px 14px;
    border-radius: 999px;
    border: 0;
    background: var(--atlas-gold);
    color: #1a1208;
    font-family: var(--font-code);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.install-btn:hover { transform: scale(1.04); }
.install-close {
    background: transparent;
    border: 0;
    color: var(--text-mute);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.install-close:hover { color: var(--text-main); background: rgba(255,255,255,0.06); }
@media (max-width: 480px) {
    .install-banner { padding: 12px; }
    .install-msg { font-size: .8rem; }
    .install-btn { padding: 7px 12px; font-size: .72rem; }
}
@media (min-width: 901px) {
    .install-banner { bottom: 100px; }
}
body.professional-mode .install-banner { background: linear-gradient(135deg, #ffffff, #f5f7fa); border-color: #1976d2; }
body.professional-mode .install-icon { background: linear-gradient(135deg, #1976d2, #1565c0); color: #ffffff; }
body.professional-mode .install-btn { background: #1976d2; color: #ffffff; }
body.professional-mode .install-msg { color: #102a43; }

/* ---------- STREAK BLOCK + HEATMAP ---------- */
.streak-block {
    background: linear-gradient(135deg, rgba(255,107,53,0.06), rgba(255,213,79,0.04));
    border: 1px solid rgba(255,107,53,0.2);
    border-radius: 16px;
    padding: 18px 18px 16px;
    margin-bottom: 18px;
    animation: meFade .4s ease;
    transition: border-color .3s ease, background .3s ease;
}
.streak-block.is-active {
    border-color: rgba(255,107,53,0.5);
    background: linear-gradient(135deg, rgba(255,107,53,0.10), rgba(255,213,79,0.06));
}
.streak-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.streak-flame {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff6b35, #ffb300);
    color: #1a0a02;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.4);
    flex-shrink: 0;
}
.streak-block.is-active .streak-flame {
    animation: flameFlicker 2.4s ease-in-out infinite;
}
@keyframes flameFlicker {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(255, 107, 53, 0.4); }
    50%      { transform: scale(1.06); box-shadow: 0 6px 24px rgba(255, 107, 53, 0.6); }
}
.streak-main { flex: 1; }
.streak-num {
    font-family: var(--font-code);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}
.streak-block.is-active .streak-num {
    background: linear-gradient(135deg, #ff6b35, #ffb300);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.streak-lbl {
    font-family: var(--font-code);
    font-size: .72rem;
    color: var(--text-mute);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}
.streak-side {
    display: flex; flex-direction: column; gap: 6px;
    border-left: 1px solid var(--border);
    padding-left: 14px;
    font-family: var(--font-code);
}
.streak-side-row {
    font-size: .78rem;
    color: var(--text-mute);
    display: flex; align-items: baseline; gap: 6px;
}
.streak-side-row span:first-child { color: var(--text-main); font-weight: 700; font-size: .95rem; }

.heatmap-wrap {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}
.heatmap-title {
    font-family: var(--font-code);
    font-size: .68rem;
    color: var(--text-mute);
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    direction: ltr;
}
.hm-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
    transition: transform .15s ease;
    cursor: default;
}
.hm-cell.hm-on  { background: linear-gradient(135deg, #ff6b35, #ffb300); box-shadow: 0 0 8px rgba(255, 107, 53, 0.35); }
.hm-cell.hm-out { background: transparent; }
.hm-cell:hover { transform: scale(1.4); z-index: 2; }
.heatmap-legend {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px;
    font-size: .7rem;
    color: var(--text-mute);
    font-family: var(--font-code);
    letter-spacing: 1px;
}
.hm-cell-mini { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.hm-cell-mini.hm-empty { background: rgba(255,255,255,0.08); }
.hm-cell-mini.hm-on { background: linear-gradient(135deg, #ff6b35, #ffb300); }
body.professional-mode .streak-block { background: #fff5e6; border-color: #ffb74d; }
body.professional-mode .streak-block.is-active { background: #ffe0b2; border-color: #ff7043; }
body.professional-mode .hm-cell { background: #eceff1; }
body.professional-mode .hm-cell.hm-on {
    background: linear-gradient(135deg, #f4511e, #ffb300) !important;
    border: 1px solid rgba(216, 67, 21, 0.32);
    box-shadow: 0 0 8px rgba(244, 81, 30, 0.28);
}
body.professional-mode .hm-cell.hm-out { background: transparent; }
body.professional-mode .hm-cell-mini.hm-empty { background: #cfd8dc; }
body.professional-mode .hm-cell-mini.hm-on {
    background: linear-gradient(135deg, #f4511e, #ffb300) !important;
}
body.professional-mode .streak-num { color: #102a43; }
body.professional-mode .streak-block.is-active .streak-num {
    background: linear-gradient(135deg, #d84315, #ef6c00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* The quiz renderer supplies a dark-theme inline colour for explanations.
   Override it only in Professional Mode so answer reasoning stays readable. */
body.professional-mode .feedback-panel > div:last-child,
body.professional-mode .feedback-panel > div:last-child * {
    color: #334155 !important;
}

@media (prefers-reduced-motion: reduce) {
    .elite-border-trace rect {
        animation: none;
        stroke-dasharray: 100 0;
        opacity: .55;
    }
}

/* ---------- ME TOGGLES (notifications + replay tour) ---------- */
.me-toggles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 20px;
}
.me-toggle {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    color: var(--text-main);
    text-align: left;
    width: 100%;
    transition: border-color .2s ease, background .2s ease;
    font-family: var(--font-body);
}
.me-toggle:hover { border-color: rgba(255,213,79,0.4); background: rgba(255,213,79,0.04); }
.me-reminder-setting { display: block; cursor: default; }
.me-toggle-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font-family: inherit; }
.me-toggle-main > i:first-child { font-size: 1.1rem; color: var(--why-cyan); width: 24px; text-align: center; }
.me-reminder-time-label { margin: 12px 0 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--text-mute); }
.me-reminder-time { min-height: 44px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.06); color: var(--text-main); font: inherit; color-scheme: dark; }
body.professional-mode .me-reminder-time { background: #fff; color: #102a43; color-scheme: light; border-color: #b8c2cc; }
.me-toggle > i:first-child {
    font-size: 1.1rem;
    color: var(--why-cyan);
    width: 24px; text-align: center;
}
.me-toggle-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.me-toggle-title { font-size: .92rem; color: var(--text-main); font-weight: 600; }
.me-toggle-state { font-size: .76rem; color: var(--text-mute); }
.me-toggle-chev { color: var(--text-mute); font-size: .85rem; }

/* Pill switch on the right side of the notification toggle */
.me-toggle-pill {
    width: 38px; height: 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    position: relative;
    transition: background .25s ease;
    flex-shrink: 0;
}
.me-toggle-pill::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.me-toggle-pill.on { background: var(--atlas-gold); }
.me-toggle-pill.on::after { transform: translateX(16px); }
body.professional-mode .me-toggle { background: #f5f7fa; border-color: #d0d7de; color: #102a43; }
body.professional-mode .me-toggle:hover { border-color: #1976d2; background: rgba(25,118,210,0.04); }
body.professional-mode .me-toggle-pill { background: #cfd8dc; }
body.professional-mode .me-toggle-pill.on { background: #1976d2; }
body.professional-mode .me-toggle-state { color: #5c6b80; }

/* ---------- NAV POSITION PICKER (desktop preference, lives in Me) ---------- */
.nav-pos-picker {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    animation: meFade .4s ease;
}
.nav-pos-label {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    color: var(--text-main);
    font-size: .9rem;
    line-height: 1.4;
}
.nav-pos-label > i {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255, 213, 79, 0.12);
    color: var(--atlas-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.nav-pos-label b { color: var(--text-main); }
.nav-pos-label small { color: var(--text-mute); font-size: .78rem; }

.nav-pos-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.nav-pos-option {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 8px 8px;
    cursor: pointer;
    color: var(--text-mute);
    font-family: var(--font-code);
    font-size: .7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-pos-option:hover { border-color: rgba(255,213,79,0.4); color: var(--text-main); }
.nav-pos-option:active { transform: scale(.96); }
.nav-pos-option.is-active {
    border-color: var(--atlas-gold);
    background: rgba(255,213,79,0.10);
    color: var(--atlas-gold);
    box-shadow: 0 4px 14px rgba(255,213,79,0.18);
}
/* Mini visual preview: small frame with a coloured bar in the chosen position */
.np-frame {
    width: 100%;
    aspect-ratio: 4/3;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
}
.np-bar {
    position: absolute;
    background: var(--atlas-gold);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255,213,79,0.5);
}
.np-bottom { left: 18%; right: 18%; bottom: 8%; height: 18%; border-radius: 999px; }
.np-top    { left: 18%; right: 18%; top:    8%; height: 18%; border-radius: 999px; }
.np-left   { top: 18%; bottom: 18%; left:   8%; width:  18%; border-radius: 999px; }
.np-right  { top: 18%; bottom: 18%; right:  8%; width:  18%; border-radius: 999px; }
.np-name { font-weight: 700; }

/* Pro mode */
body.professional-mode .nav-pos-picker { background: #f5f7fa; border-color: #d0d7de; }
body.professional-mode .nav-pos-label > i { background: rgba(25,118,210,0.10); color: #1565c0; }
body.professional-mode .nav-pos-option { background: #ffffff; border-color: #d0d7de; }
body.professional-mode .nav-pos-option.is-active {
    border-color: #1565c0; background: rgba(25,118,210,0.10); color: #1565c0;
    box-shadow: 0 4px 14px rgba(25,118,210,0.18);
}
body.professional-mode .np-frame { background: #eceff1; border-color: #cfd8dc; }
body.professional-mode .np-bar { background: #1565c0; box-shadow: 0 0 6px rgba(21,101,192,0.4); }

/* Tighter on small phones — but the picker still works, mobile users just
   won't see the change reflected in their view (mobile always = bottom). */
@media (max-width: 480px) {
    .nav-pos-options { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   NAV POSITION VARIANTS (desktop only — mobile stays bottom always)
   ================================================================ */
@media (min-width: 901px) {
    /* TOP: same pill, anchored to top of viewport */
    body.nav-pos-top .bottom-nav {
        top: 18px; bottom: auto;
    }
    body.nav-pos-top .bottom-nav.bn-hidden { transform: translateX(-50%) translateY(-160%); }
    body.nav-pos-top { padding-bottom: 0; padding-top: 88px; }

    /* LEFT: vertical column on the left side */
    body.nav-pos-left .bottom-nav,
    body.nav-pos-right .bottom-nav {
        top: 50%; bottom: auto;
        left: 18px; right: auto;
        transform: translateY(-50%);
        grid-template-columns: auto;     /* one column */
        grid-template-rows: repeat(5, auto);
        padding: 10px 6px;
        gap: 8px;
        border-radius: 22px;
        flex-direction: column;
    }
    body.nav-pos-left .bottom-nav.bn-hidden { transform: translateY(-50%) translateX(-180%); }
    body.nav-pos-left { padding-bottom: 0; padding-left: 92px; }
    body.nav-pos-left .bn-item {
        flex-direction: column;
        padding: 10px 8px;
        gap: 4px;
        font-size: .66rem;
        width: 64px;
        border-radius: 14px;
    }
    body.nav-pos-left .bn-item .bn-icon { font-size: 1.2rem; }
    body.nav-pos-left .bn-item-primary .bn-fab { width: 44px; height: 44px; font-size: 1.05rem; }

    /* RIGHT: same column, anchored right */
    body.nav-pos-right .bottom-nav {
        left: auto; right: 18px;
    }
    body.nav-pos-right .bottom-nav.bn-hidden { transform: translateY(-50%) translateX(180%); }
    body.nav-pos-right { padding-bottom: 0; padding-right: 92px; }
    body.nav-pos-right .bn-item {
        flex-direction: column;
        padding: 10px 8px;
        gap: 4px;
        font-size: .66rem;
        width: 64px;
        border-radius: 14px;
    }
    body.nav-pos-right .bn-item .bn-icon { font-size: 1.2rem; }
    body.nav-pos-right .bn-item-primary .bn-fab { width: 44px; height: 44px; font-size: 1.05rem; }

    /* Install banner needs to respect the new nav side. Pin it bottom-center
       regardless, just clear the bar when nav is bottom; for top/left/right
       the bottom is free so the banner can sit lower. */
    body.nav-pos-top .install-banner    { bottom: 24px; }
    body.nav-pos-left .install-banner   { bottom: 24px; left: 110px; }
    body.nav-pos-right .install-banner  { bottom: 24px; right: 110px; }
}

/* ---------- BACKUP / RESTORE cards + safety note ---------- */
.me-card-backup {
    border-color: rgba(124, 240, 124, 0.20);
    background: linear-gradient(135deg, rgba(124,240,124,0.05), rgba(93,173,226,0.04));
}
.me-card-backup:hover {
    border-color: rgba(124, 240, 124, 0.5);
    background: linear-gradient(135deg, rgba(124,240,124,0.10), rgba(93,173,226,0.06));
}
.backup-note {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px;
    margin: 0 0 28px;
    background: rgba(124, 240, 124, 0.05);
    border: 1px solid rgba(124, 240, 124, 0.18);
    border-left: 3px solid #7cf07c;
    border-radius: 12px;
    font-size: .85rem;
    color: var(--text-main);
    line-height: 1.5;
    animation: meFade .5s ease;
}
.backup-note > i {
    color: #7cf07c;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.backup-note b { color: #7cf07c; }
body.professional-mode .me-card-backup {
    background: #e8f5e9;
    border-color: #a5d6a7;
}
body.professional-mode .me-card-backup:hover {
    border-color: #66bb6a;
    background: #c8e6c9;
}
body.professional-mode .backup-note {
    background: #e8f5e9;
    border-color: #a5d6a7;
    border-left-color: #2e7d32;
    color: #102a43;
}
body.professional-mode .backup-note > i,
body.professional-mode .backup-note b { color: #2e7d32; }

/* ---------- AUDIO PRONUNCIATION button (next to topic title) ---------- */
.speak-btn {
    background: rgba(0, 242, 255, 0.08);
    border: 1px solid rgba(0, 242, 255, 0.35);
    color: var(--why-cyan);
    width: 36px; height: 36px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    margin-left: 10px;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .15s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.speak-btn:hover {
    background: rgba(0, 242, 255, 0.2);
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(0, 242, 255, 0.35);
}
.speak-btn:active { transform: scale(.94); }
.speak-btn i { font-size: .85rem; }
/* While reading aloud: solid cyan fill + soft pulsing ring */
.speak-btn.is-playing {
    background: var(--why-cyan);
    color: #0a0f1c;
    border-color: var(--why-cyan);
    animation: speakPulse 1.4s ease-in-out infinite;
}
.speak-btn.is-playing i { color: #0a0f1c; }
@keyframes speakPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 242, 255, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 242, 255, 0); }
}
body.professional-mode .speak-btn.is-playing { background: #1976d2; color: #ffffff; border-color: #1976d2; }
body.professional-mode .speak-btn.is-playing i { color: #ffffff; }
body.professional-mode .speak-btn { background: rgba(25,118,210,0.06); border-color: rgba(25,118,210,0.35); color: #1976d2; }
body.professional-mode .speak-btn:hover { background: rgba(25,118,210,0.15); box-shadow: 0 0 16px rgba(25,118,210,0.3); }
@media (max-width: 600px) {
    .speak-btn { width: 32px; height: 32px; margin-left: 6px; }
    .speak-btn i { font-size: .78rem; }
}

/* WHY motion cleanup: calm, fast interactions without scanner/game effects. */
#why-view h1,
#why-view .subtitle::before,
#why-view .subtitle::after,
#why-view .badge::before,
#why-view .ai-btn,
#why-view .sm-btn,
#why-view .ai-response-box::after,
#why-view .quiz-progress-fill,
#why-view .modal-image-col.img-loading::before {
    animation: none !important;
}

#why-view h1 {
    filter: none !important;
    text-shadow: 0 0 24px rgba(0, 242, 255, 0.14) !important;
    will-change: auto !important;
}

#why-view .subtitle::before,
#why-view .subtitle::after {
    content: none !important;
}

#why-view .badge::before,
#why-view .ai-response-box::after {
    box-shadow: none !important;
    opacity: 0.8 !important;
}

#why-view .controls,
#why-view .controls:hover {
    border-color: rgba(0, 242, 255, 0.14) !important;
    box-shadow: 0 14px 34px rgba(2, 12, 27, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    will-change: transform !important;
}

#why-view .filter-btn,
#why-view .ai-btn,
#why-view .sm-btn,
#why-view .modal-close {
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease !important;
    will-change: auto !important;
}

#why-view .filter-btn:hover,
#why-view .ai-btn:hover,
#why-view .sm-btn:hover,
#why-view .modal-close:hover {
    transform: none !important;
}

#why-view .ai-btn,
#why-view .ai-btn:hover {
    box-shadow: none !important;
}

#why-view .card,
body.professional-mode #why-view .card {
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translate3d(0, 0, 0) !important;
    transform-style: flat !important;
    perspective: none !important;
    will-change: auto !important;
    transition: transform 0.2s ease, border-color 0.2s ease, border-left-color 0.2s ease, background-color 0.2s ease !important;
}

#why-view .card::before,
body.professional-mode #why-view .card::before {
    background: radial-gradient(circle at top right, rgba(0, 242, 255, 0.055), transparent 58%) !important;
    opacity: 0.55 !important;
    transition: opacity 0.2s ease !important;
    will-change: auto !important;
}

#why-view .card::after,
body.professional-mode #why-view .card::after {
    content: none !important;
    display: none !important;
}

#why-view .card:hover,
body.professional-mode #why-view .card:hover,
body.professional-mode #why-view .card.forelimb:hover,
body.professional-mode #why-view .card.hindlimb:hover,
body.professional-mode #why-view .card.axial:hover,
body.professional-mode #why-view .card.wildlife:hover {
    transform: translate3d(0, -3px, 0) !important;
    background-color: rgba(14, 33, 61, 0.62) !important;
    box-shadow: 0 14px 28px rgba(2, 12, 27, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.professional-mode #why-view .card:hover,
body.professional-mode #why-view .card.forelimb:hover,
body.professional-mode #why-view .card.hindlimb:hover,
body.professional-mode #why-view .card.axial:hover,
body.professional-mode #why-view .card.wildlife:hover {
    background-color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(30, 41, 59, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#why-view .card:hover::before,
body.professional-mode #why-view .card:hover::before {
    opacity: 0.72 !important;
}

#why-view .card:hover .read-more i,
body.professional-mode #why-view .card:hover .read-more i {
    transform: translate3d(3px, 0, 0) !important;
}

body.professional-mode #why-view .card:hover .read-more {
    color: var(--medical-purple) !important;
    background: rgba(126, 87, 194, 0.08) !important;
    box-shadow: none !important;
}

#why-view .modal-image-progress {
    display: none;
    width: min(100%, 320px);
    min-height: 210px;
    padding: 28px;
    border: 1px dashed rgba(0, 242, 255, 0.28);
    border-radius: 14px;
    background: rgba(0, 242, 255, 0.025);
    color: var(--text-mute);
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

#why-view .modal-image-progress i {
    font-size: 2rem;
    color: var(--why-cyan);
    opacity: 0.7;
}

#why-view .modal-image-progress strong {
    font-family: var(--font-code);
    color: var(--why-cyan);
    font-size: 0.86rem;
    letter-spacing: 1.5px;
}

#why-view .modal-image-progress span {
    max-width: 240px;
    font-size: 0.82rem;
    line-height: 1.55;
}

#why-view .modal-content.no-image .modal-image-progress {
    display: flex;
}

#why-view .modal-content.no-image .modal-img {
    display: none !important;
}

body.professional-mode #why-view .modal-image-progress {
    border-color: rgba(126, 87, 194, 0.28);
    background: rgba(126, 87, 194, 0.035);
    color: #64748b;
}

body.professional-mode #why-view .modal-image-progress i,
body.professional-mode #why-view .modal-image-progress strong {
    color: var(--medical-purple);
}

/* Premium, low-cost border trace for the Bio-Engineer Analogy action. */
#why-view #simplifyBtn {
    isolation: isolate;
    min-height: 38px;
    padding: 7px 18px;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.08) !important;
    letter-spacing: 0.35px;
}

#why-view #simplifyBtn::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -90px;
    background: conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0.2) 0deg,
        rgba(255, 215, 0, 0.2) 285deg,
        #fff3a6 320deg,
        var(--atlas-gold) 342deg,
        rgba(255, 215, 0, 0.2) 360deg
    );
    animation: whyAnalogyBorderTrace 5.5s linear infinite;
    pointer-events: none;
    will-change: transform;
}

#why-view #simplifyBtn::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: 11px;
    background: linear-gradient(135deg, #141a28, #101622);
    pointer-events: none;
}

#why-view #simplifyBtn:hover,
#why-view #simplifyBtn:focus-visible {
    color: #fff2a3 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: 0 8px 22px rgba(255, 215, 0, 0.18) !important;
}

#why-view #simplifyBtn:focus-visible {
    outline: 2px solid rgba(255, 243, 166, 0.9);
    outline-offset: 3px;
}

body.professional-mode #why-view #simplifyBtn {
    color: var(--medical-purple) !important;
    box-shadow: 0 6px 18px rgba(126, 87, 194, 0.1) !important;
}

body.professional-mode #why-view #simplifyBtn::before {
    background: conic-gradient(
        from 0deg,
        rgba(126, 87, 194, 0.22) 0deg,
        rgba(126, 87, 194, 0.22) 285deg,
        #d9c8ff 320deg,
        var(--medical-purple) 342deg,
        rgba(126, 87, 194, 0.22) 360deg
    );
}

body.professional-mode #why-view #simplifyBtn::after {
    background: linear-gradient(135deg, #ffffff, #f8f7fc);
}

body.professional-mode #why-view #simplifyBtn:hover,
body.professional-mode #why-view #simplifyBtn:focus-visible {
    color: #5d3aa8 !important;
    box-shadow: 0 8px 22px rgba(126, 87, 194, 0.18) !important;
}

@keyframes whyAnalogyBorderTrace {
    to {
        transform: rotate(1turn);
    }
}

@media (max-width: 900px) {
    #why-view .modal-content,
    body.professional-mode #why-view .modal-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #why-view .modal-image-col,
    body.professional-mode #why-view .modal-image-col {
        width: 100%;
        height: auto;
        min-height: 230px;
        padding: 24px 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 242, 255, 0.1);
    }

    body.professional-mode #why-view .modal-image-col {
        border-bottom-color: rgba(126, 87, 194, 0.12);
    }

    #why-view .modal-image-progress {
        width: min(100%, 320px);
        min-height: 190px;
        padding: 22px;
    }

    #why-view .modal-text-col,
    body.professional-mode #why-view .modal-text-col {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    #why-view .modal-image-col,
    body.professional-mode #why-view .modal-image-col {
        min-height: 210px;
        padding: 18px 16px;
    }

    #why-view .modal-image-progress {
        min-height: 174px;
        padding: 18px 16px;
    }

    #why-view .modal-section-header {
        gap: 12px;
    }

    #why-view #simplifyBtn {
        flex: 0 0 auto;
        max-width: 132px;
        min-height: 44px;
        padding: 7px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #why-view .card,
    #why-view .card:hover,
    #why-view .modal-content,
    #why-view .modal-overlay.open .modal-content {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    #why-view #simplifyBtn::before {
        animation: none !important;
    }
}

.portal-card,
.topic-btn,
#why-view .card {
    color: inherit;
    text-decoration: none;
}