/***********************************************************
 * 1) MODERN GLOBAL & TYPOGRAPHY - UPDATED
 ***********************************************************/
:root {
    /* --- NEW READABLE COLOR SCHEME --- */
    --color-primary: #1A73E8; /* Vibrant Blue (Google/Material inspired) */
    --color-secondary: #004D40; /* Deep Teal/Dark Green (For Fixed Nav Background) */
    --color-background: #FFFFFF; /* Pure White Background for Max Readability */
    --color-text: #333333; /* Soft Dark Grey Text */
    --color-accent-red: #D32F2F; /* High Contrast Dark Red (for Quit button) */

    --font-heading: 'Arial Black', sans-serif;
    --font-body: 'Arial', sans-serif;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-heavy: 0 8px 20px rgba(0, 0, 0, 0.15);
    --mobile-menu-height: 60px;
}
html, body {
    height: 100%;
}

body {
    background-color: #008080 !important; /* Win98 Teal */
    background-image:
        linear-gradient(
            45deg,
            rgba(255,255,255,0.04) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255,0.04) 50%,
            rgba(255,255,255,0.04) 75%,
            transparent 75%,
            transparent
        ) !important;
    background-size: 4px 4px !important;
    background-attachment: fixed;
}
/* =====================================================
   WINDOWS 98 CORE TEXT & CONTAINER FIX (FORCE)
   ===================================================== */

/* --- Global Win98 Font Reset --- */
.container-fluid,
.container,
header,
p,
h1, h2, h3, h4, h5,
a,
button {
    font-family: "Arial", "MS Sans Serif", sans-serif !important;
    color: #000 !important;
}

/* --- Main Content Panel (Win98 Dialog Look) --- */
.content-wrapper > div {
    background-color: #C0C0C0;
    padding: 25px;
    border: 2px solid;
    border-color: #FFF #000 #000 #FFF;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
}

/* --- Headings (Classic Bold, No Modern Effects) --- */
h1, h2 {
    font-family: "Arial Black", "Arial", sans-serif !important;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* --- Paragraphs (Readable CRT Style) --- */
p {
    font-size: 14px;
    line-height: 1.4;
}

/* --- Muted Text (Win98 Grey) --- */
.text-muted,
.small {
    color: #333 !important;
}

/* --- Buttons: Force 90s Bevel --- */
.btn {
    border-radius: 0 !important;
    border-width: 2px !important;
    border-style: solid !important;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- Primary Button (Win98 Blue) --- */
.btn-primary {
    background-color: #1A73E8 !important;
    border-color: #62A4F3 #0A3D7E #0A3D7E #62A4F3 !important;
    color: #fff !important;
}

/* --- Warning Button (Win98 Yellow) --- */
.btn-warning {
    background-color: #FFC107 !important;
    border-color: #FFECB3 #A55500 #A55500 #FFECB3 !important;
    color: #000 !important;
}

/* --- Button Active (Pressed) --- */
.btn:active {
    border-color: #000 #FFF #FFF #000 !important;
    transform: translate(1px, 1px);
}

/* --- Links --- */
a {
    text-decoration: underline;
}

/* --- Remove modern smoothness --- */
* {
    border-radius: 0 !important;
}


.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}
a:hover {
    opacity: 0.8;
}

/***********************************************************
 * 2) HEADER & NAVIGATION (Mobile-First Fixed Menu) - UPDATED
 ***********************************************************/

/* Primary Header */
header {
    
    padding: 20px 0;
   
}

header h1.fw-bold {
    font-size: 2rem;
    color: var(--color-primary); /* Use Primary Blue for main title */
    margin-bottom: 0.25rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

header p.lead {
    font-size: 1rem;
    color: #6c757d;
}

/* --- Fixed Mobile Navigation Bar --- */
.mobile-nav-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: none;
    background-color: var(--color-secondary); /* Deep Teal/Dark Green */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    padding: 0;
    height: var(--mobile-menu-height);
}

/* Show fixed navigation on small screens */
@media (max-width: 768px) {
    .mobile-nav-fixed {
        display: block;
    }
    body {
        padding-bottom: var(--mobile-menu-height); 
    }
}

/* Menu Links inside the fixed bar */
.menu-bar-modern {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.menu-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    color: #A3E4D7; /* Light accent color on the dark background */
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    gap: 3px;
    transition: background-color 0.2s;
}

.menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white hover */
    color: #fff; 
}

.menu-btn.active {
    color: #fff; /* White text for active */
    background-color: var(--color-primary); /* Primary Blue background for active */
}

.menu-btn i {
    font-size: 1.2rem;
}

/***********************************************************
 * 3) CARD & TOPIC STRUCTURE - MINOR ADJUSTMENTS
 ***********************************************************/

.topic-with-subtopics {
    background-color: #fff;
    border-radius: 8px;
    margin: 15px 0;
    box-shadow: var(--shadow-light);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.topic-with-subtopics:hover {
    box-shadow: var(--shadow-heavy);
    transform: translateY(-2px);
}

.main-topic-header {
    cursor: pointer;
    user-select: none;
    padding: 1rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-topic-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text); /* Use standard text color */
    margin: 0;
}

.expand-icon {
    display: none; /* Keep this hidden as per your request */
}

.collapsed .subtopic-buttons {
    display: none;
}

/***********************************************************
 * 4) QUIZ BUTTONS (SUBTOPIC LINKS) - UPDATED
 ***********************************************************/

.subtopic-buttons {
    padding: 10px 10px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subtopic-buttons .btn,
.btn-modern-primary {
    display: inline-block;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
    user-select: none;
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary); /* Primary Blue background */
    color: #fff; /* High-contrast white text on blue */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subtopic-buttons .btn:hover,
.btn-modern-primary:hover {
    background-color: #4285F4; /* Slightly lighter blue for hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.subtopic-buttons .btn:active,
.btn-modern-primary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Quiz/Option Buttons (Larger, High Contrast) */
.option-label {
    display: block;
    cursor: pointer;
    padding: 14px 18px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.2s;
}

.option-label:hover {
    background-color: #F0F0F0;
    border-color: var(--color-primary);
    box-shadow: 0 0 5px rgba(26, 115, 232, 0.4); /* Blue glow on hover */
}


/***********************************************************
 * 5) QUIZ SPECIFIC ELEMENTS - MINOR ADJUSTMENTS
 ***********************************************************/

.progress-container {
    width: 90%;
    max-width: 400px;
    margin: 15px auto;
}

.progress-info {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--color-text);
    margin-bottom: 4px;
    text-align: center;
}

.progress-bar-modern {
    height: 25px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff; /* White text for contrast on the blue bar */
}

.question-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary); /* Deep Teal for separation */
    text-align: center;
    padding: 10px 15px;
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--color-primary);
    text-transform: uppercase;
}

.question-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: var(--shadow-light);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.quit-btn-container {
    margin-top: 20px;
    text-align: center;
}

.btn-quit {
    background-color: var(--color-accent-red); /* Darker Red */
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 3px 0 #9A1F1F; /* Slightly darker shade of the new red */
}

.btn-quit:hover {
    background-color: #E53935;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 #9A1F1F;
}


/***********************************************************
 * 6) MOBILE RESPONSIVENESS (Adjustments) - UNCHANGED
 ***********************************************************/

/* Small Mobile Phones */
@media (max-width: 480px) {
    header h1.fw-bold {
        font-size: 1.6rem;
    }
    header p.lead {
        font-size: 0.9rem;
    }
    .main-topic-title {
        font-size: 1rem;
    }
    .subtopic-buttons .btn {
        flex-grow: 1;
        font-size: 0.9rem;
        padding: 12px 10px;
        margin: 4px 0;
    }
    .question-text {
        font-size: 1.1rem;
        padding: 12px;
    }
    .option-label {
        font-size: 1rem;
        padding: 12px;
    }
}
/***********************************************************
 * 7) RETRO 90s MENU STYLE (Enhanced for Bevel/Depth)
 ***********************************************************/

/* --- Base Container for the 90s Menu (The Dialog Box) --- */
.menu-bar-90s {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Slightly larger gap */
    padding: 30px;
    margin: 20px 0;
    
    /* Classic 90s Panel Look */
    background-color: #C0C0C0; /* Light Gray Panel Background */
    border-style: solid;
    border-width: 2px;
    border-color: #FFF #000 #000 #FFF; /* Light top/left, Dark bottom/right for inset effect */
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); /* Softened outer shadow */
}

/* --- Base Button Styles (The Beveled Button) --- */
.menu-bar-90s .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    min-width: 180px;
    
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    
    /* 90s Style Bevel Border */
    border-style: solid;
    border-width: 3px;
    
    /* Smooth transition for "push" effect */
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

/* --- 1. Primary Solid Button: .btn-90s (Gradient Blue) --- */
.btn-90s {
    /* Subtle vertical gradient for digital sheen */
    background: linear-gradient(180deg, var(--color-primary), #0D56B4); 
    color: #fff;
    
    /* Bevel: Highlight on top/left, Shadow on bottom/right */
    border-color: #62A4F3 #0A3D7E #0A3D7E #62A4F3;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.btn-90s:hover {
    filter: brightness(1.1);
}
/* Active/Click State: Pushed in effect */
.btn-90s:active {
    /* Switch the border colors to simulate the button being pressed down (inset) */
    border-color: #0A3D7E #62A4F3 #62A4F3 #0A3D7E;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #0D56B4, var(--color-primary)); /* Invert gradient */
}

/* --- 2. Outline Button: .btn-90s-outline (Classic OS Button) --- */
.btn-90s-outline {
    background-color: #C0C0C0; /* Match panel background */
    color: var(--color-text);
    
    /* Bevel: Classic OS style */
    border-color: #FFF #808080 #808080 #FFF;
}
.btn-90s-outline:hover {
    background-color: #E0E0E0;
    color: #000;
}
.btn-90s-outline:active {
    /* Pushed in state */
    border-color: #808080 #FFF #FFF #808080;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- 3. Highlighted/Start Button: .btn-90s-start (The "Launch" Button) --- */
.btn-90s-start {
    /* High contrast accent */
    background: linear-gradient(180deg, #FFC107, #FF8F00); /* Warm Yellow/Orange Gradient */
    color: #000;
    border-color: #FFECB3 #A55500 #A55500 #FFECB3;
    box-shadow: 0 4px 6px rgba(255, 143, 0, 0.4); /* Stronger glow/shadow */
}
.btn-90s-start:hover {
    filter: brightness(1.15);
}
.btn-90s-start:active {
    border-color: #A55500 #FFECB3 #FFECB3 #A55500;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #FF8F00, #FFC107);
}


/* --- Mobile Adjustments --- */
@media (max-width: 600px) {
    .menu-bar-90s {
        gap: 10px;
        padding: 20px;
    }
    .menu-bar-90s .menu-btn {
        flex-grow: 1;
        min-width: unset;
        font-size: 0.85rem;
        padding: 10px 10px;
    }
}/***********************************************************
 * 7) RETRO 90s MENU STYLE (Enhanced for Bevel/Depth)
 * Applies to: .menu-bar-90s
 ***********************************************************/

/* --- Base Container for the 90s Menu (The Dialog Box) --- */
.menu-bar-90s {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Slightly larger gap */
    padding: 30px;
    margin: 20px 0;
    
    /* Classic 90s Panel Look */
    background-color: #C0C0C0; /* Light Gray Panel Background */
    border-style: solid;
    border-width: 2px;
    border-color: #FFF #000 #000 #FFF; /* Light top/left, Dark bottom/right for inset effect */
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); /* Softened outer shadow */
}

/* --- Base Button Styles (The Beveled Button) --- */
.menu-bar-90s a { /* Targeting all links inside the menu bar */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    min-width: 180px;
    
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    
    /* 90s Style Bevel Border */
    border-style: solid;
    border-width: 3px;
    
    /* Smooth transition for "push" effect */
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

/* --- 1. Primary Solid Button: .btn-90s (Gradient Blue) --- */
.btn-90s {
    /* Subtle vertical gradient for digital sheen */
    background: linear-gradient(180deg, var(--color-primary), #0D56B4); 
    color: #fff;
    
    /* Bevel: Highlight on top/left, Shadow on bottom/right */
    border-color: #62A4F3 #0A3D7E #0A3D7E #62A4F3;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.btn-90s:hover {
    filter: brightness(1.1);
}
/* Active/Click State: Pushed in effect */
.btn-90s:active {
    /* Switch the border colors to simulate the button being pressed down (inset) */
    border-color: #0A3D7E #62A4F3 #62A4F3 #0A3D7E;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #0D56B4, var(--color-primary)); /* Invert gradient */
}

/* --- 2. Outline Button: .btn-90s-outline (Classic OS Button) --- */
.btn-90s-outline {
    background-color: #C0C0C0; /* Match panel background */
    color: var(--color-text);
    
    /* Bevel: Classic OS style */
    border-color: #FFF #808080 #808080 #FFF;
}
.btn-90s-outline:hover {
    background-color: #E0E0E0;
    color: #000;
}
.btn-90s-outline:active {
    /* Pushed in state */
    border-color: #808080 #FFF #FFF #808080;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- 3. Highlighted/Start Button: .btn-90s-start (The "Launch" Button) --- */
.btn-90s-start {
    /* High contrast accent */
    background: linear-gradient(180deg, #FFC107, #FF8F00); /* Warm Yellow/Orange Gradient */
    color: #000;
    border-color: #FFECB3 #A55500 #A55500 #FFECB3;
    box-shadow: 0 4px 6px rgba(255, 143, 0, 0.4); /* Stronger glow/shadow */
}
.btn-90s-start:hover {
    filter: brightness(1.15);
}
.btn-90s-start:active {
    border-color: #A55500 #FFECB3 #FFECB3 #A55500;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #FF8F00, #FFC107);
}


/* --- Mobile Adjustments --- */
@media (max-width: 600px) {
    .menu-bar-90s {
        gap: 10px;
        padding: 20px;
    }
    .menu-bar-90s a {
        flex-grow: 1;
        min-width: unset;
        font-size: 0.85rem;
        padding: 10px 10px;
    }
}
/* --- 90s Button Base Style (Applies to all .btn-90s-* classes) --- */
.mt-5 a { /* Targeting all links in the main button container */
    /* Shared Base Properties */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    min-width: 180px;
    font-family: var(--font-heading, 'Arial Black', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    
    /* 90s Style Bevel Border */
    border-style: solid;
    border-width: 3px;
    
    /* Smooth transition for "push" effect */
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

/* --- 1. Primary Solid Button: .btn-90s (Gradient Blue, for Restart) --- */
.btn-90s {
    /* Subtle vertical gradient for digital sheen (using assumed variables) */
    background: linear-gradient(180deg, #1A73E8, #0D56B4); /* Using your primary blue */ 
    color: #fff;
    
    /* Bevel: Highlight on top/left, Shadow on bottom/right */
    border-color: #62A4F3 #0A3D7E #0A3D7E #62A4F3;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.btn-90s:hover {
    filter: brightness(1.1);
}
/* Active/Click State: Pushed in effect */
.btn-90s:active {
    /* Switch the border colors to simulate the button being pressed down (inset) */
    border-color: #0A3D7E #62A4F3 #62A4F3 #0A3D7E;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #0D56B4, #1A73E8); /* Invert gradient */
}

/* --- 2. Outline Button: .btn-90s-outline (Classic OS Button, for Navigation) --- */
.btn-90s-outline {
    background-color: #C0C0C0; /* Light Gray Panel Background */
    color: #333333; /* Dark Text */
    
    /* Bevel: Classic OS style */
    border-color: #FFF #808080 #808080 #FFF;
}
.btn-90s-outline:hover {
    background-color: #E0E0E0;
    color: #000;
}
.btn-90s-outline:active {
    /* Pushed in state */
    border-color: #808080 #FFF #FFF #808080;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- 3. Top Button: .btn-90s-top (Similar to Primary, but may be smaller) --- */
.btn-90s-top {
    /* Use the same style as the outline button, but slightly smaller/less emphasis */
    background-color: #C0C0C0; 
    color: #333333; 
    border-color: #FFF #808080 #808080 #FFF;
    padding: 10px 18px; /* Slightly smaller padding */
    min-width: unset; /* Allow it to shrink */
    font-size: 0.9rem;
}
.btn-90s-top:hover {
    background-color: #E0E0E0;
}
.btn-90s-top:active {
    border-color: #808080 #FFF #FFF #808080;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Language Button Container Adjustment --- */
.lang-btns button {
    /* Add a small vertical margin to separate them from the result box */
    margin-bottom: 10px; 
}
/***********************************************************
 * 8) CONSISTENCY STYLING FOR TOPIC LIST (FINAL OVERRIDES)
 ***********************************************************/

/* --- A. Main Page Header Consistency (Title) --- */
.container header h1.fw-bold {
    /* Enforce retro font and high-contrast title look */
    font-family: var(--font-heading, 'Arial Black', sans-serif);
    font-size: 2.2rem;
    color: var(--color-secondary, #004D40); /* Deep Teal/Dark Green */
    text-transform: uppercase;
    border-bottom: 4px solid var(--color-primary, #1A73E8); /* Primary Blue underline */
    padding-bottom: 10px;
    margin-bottom: 30px !important;
    display: inline-block;
}

/* --- B. Card Container (The "Panel" Look) --- */
.row-cols-1 .col .card.shadow-sm.h-100 {
    /* 1. Reset and Apply 90s Panel Look */
    box-shadow: none !important;
    border: none !important;
    border-radius: 0;
    
    /* 90s Panel Background and Bevel */
    background-color: #C0C0C0 !important; /* Light Gray Panel Background */
    border-style: solid;
    border-width: 2px;
    /* Create the 'lifted' 3D effect: Light top/left, Dark bottom/right */
    border-color: #FFF #000 #000 #FFF; 
}

/* --- C. Topic Card Header (The Accordion Toggle Button) --- */
.card-header.main-topic-header {
    /* 1. Reset conflicting Bootstrap styles */
    border: none !important;
    border-radius: 0 !important;
    
    /* 2. Apply 90s Button Colors/Bevel */
    background-color: var(--color-primary, #1A73E8) !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Arial Black', sans-serif);
    font-weight: 700;
    
    /* Classic Bevel Look */
    border-style: solid;
    border-width: 3px;
    border-color: #62A4F3 #0A3D7E #0A3D7E #62A4F3; /* Light top/left, Dark bottom/right */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

/* Ensure the title inside the header uses the white text color */
.card-header.main-topic-header h5 {
    color: inherit !important; 
}

/* Apply push-down effect on click/active */
.card-header.main-topic-header:active {
    border-color: #0A3D7E #62A4F3 #62A4F3 #0A3D7E;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Ensure the expand icon uses the high-contrast color */
.card-header.main-topic-header .expand-icon {
    color: #FFECB3 !important; /* Light accent color for visibility */
}

/* --- D. Subtopic Buttons Container (The collapsible body) --- */
.card-body.subtopic-buttons {
    padding: 15px;
    /* Match the panel background or slightly darker inset look */
    background-color: #D0D0D0 !important; 
    border-radius: 0 !important;
    border-top: 1px solid #808080 !important; /* Subtle internal separation line */
}

/* --- E. Individual Subtopic Buttons --- */
.subtopic-buttons .btn.btn-outline-primary {
    /* Reset and Apply 90s Outline Button style */
    background-color: #C0C0C0 !important; 
    color: var(--color-text, #333333) !important; 
    
    border-radius: 0 !important;
    border-width: 3px !important;
    
    /* Classic OS Button Bevel */
    border-color: #FFF #808080 #808080 #FFF !important;
    
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    text-align: left !important;
    font-family: var(--font-body, 'Arial', sans-serif); /* Use body font for readability */
    transition: all 0.1s;
}

.subtopic-buttons .btn.btn-outline-primary:hover {
    background-color: #E0E0E0 !important;
    color: #000 !important;
}

/* Active/Push state for sub-topic buttons */
.subtopic-buttons .btn.btn-outline-primary:active {
    border-color: #808080 #FFF #FFF #808080 !important;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}