/* ========== MATH-CS COMPASS: DARK THEME ENHANCEMENT ==========
 * Unifies the visual language between the compass map and main pages
 * 
 * Features:
 * - Dark atmospheric backgrounds (no more jarring white)
 * - Section-specific colors matching the knowledge map
 * - Glassmorphism effects for content containers
 * - Consistent visual depth and glow effects
 * 
 * Section Colors (from compass map):
 * I  - Linear Algebra:    #1565c0 (Deep Blue)
 * II - Calculus:          #2e7d32 (Forest Green)
 * III - Probability:      #00838f (Teal/Cyan)
 * IV - Discrete:          #6a1b9a (Deep Purple)
 * V  - Machine Learning:  #ef6c00 (Vibrant Orange)
 * ============================================================ */

/* ========== CSS VARIABLES EXTENSION ========== */
:root {
    /* Section Colors */
    
    
    
    
    
    
    /* --section-*-color/light/glow now live in styles.css :root
       (single source of truth, available in BOTH themes). */
/* Dark Theme Base */
    --dark-bg-primary: #0b0e14;
    --dark-bg-secondary: #0f1419;
    --dark-bg-tertiary: #151b24;
    --dark-bg-card: rgba(15, 20, 30, 0.7);
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-border-hover: rgba(255, 255, 255, 0.15);
    --dark-text-primary: #f1f5f9;
    --dark-text-secondary: rgba(255,255,255,0.87);
    --dark-text-muted: rgba(255, 255, 255, 0.5);
    
    /* Glassmorphism */
    --glass-bg: rgba(15, 20, 30, 0.6);
    --glass-bg-solid: rgba(20, 28, 40, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ========== BODY & GLOBAL BACKGROUND ========== */
body {
    background: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Ambient background effect - subtle radial glow */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(21, 101, 192, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(46, 125, 50, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 80%, rgba(106, 27, 154, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 30% 70%, rgba(0, 131, 143, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(239, 108, 0, 0.04) 0%, transparent 60%);
}

/* ========== MAIN CONTAINER ========== */
.container {
    background: transparent;
}

/* ========== CONTENT SECTIONS - GLASSMORPHISM ========== */

.nav-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 8px rgba(100, 180, 255, 0.3));
}

.logo-link:hover .nav-logo {
    transform: rotate(15deg) scale(1.2);
    filter: drop-shadow(0 0 15px rgba(100, 180, 255, 0.6));
}

.logo-home {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.logo-link:hover {
    background: rgba(100, 180, 255, 0.1);
}

/* ========== EXPLORE TOPICS - TWO-COLUMN GRID (PC, Homepage Only) ==========
 * Five section cards fill two columns row by row:
 *   I    II
 *   III  IV
 *   V    (empty)
 * Section V sits in the bottom-left cell as if a sixth card existed; the
 * bottom-right cell is intentionally empty. */
@media (min-width: 1200px) {
    .topic-cards.homepage-explore {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg);
        align-items: stretch;
    }
}

/* Even larger screens - more spacing (Homepage Only) */
@media (min-width: 1600px) {
    .topic-cards.homepage-explore {
        gap: var(--spacing-xl);
    }
}

/* ========== CONTENT SECTIONS - GLASSMORPHISM ========== */
.homepage-introduction,
.update-notice,
.content-sections,
.references {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 
        var(--glass-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--dark-text-primary);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Ensure Explore Topics section has proper padding */
.content-sections {
    padding: var(--spacing-lg);
}

.homepage-introduction {
    border-left: 4px solid var(--primary-color);
}

.homepage-introduction h2 {
    color: var(--dark-text-primary);
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.homepage-introduction p {
    color: var(--dark-text-secondary);
}

.homepage-introduction strong {
    color: var(--dark-text-primary);
}

/* Worlds overview box */
.worlds-overview {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-left-color: rgba(255, 255, 255, 0.3) !important;
}

.worlds-overview h4 {
    color: var(--dark-text-primary) !important;
}

.worlds-overview p,
.worlds-overview li {
    color: var(--dark-text-secondary) !important;
}

.worlds-overview strong {
    color: var(--dark-text-primary) !important;
}

/* ========== UPDATE NOTICE ========== */
.update-notice {
    border-left: 4px solid var(--accent-color);
}
 
.update-notice h2 {
    color: var(--dark-text-primary);
}
 
/* Dark theme overrides for the update log internals */
#update-log .ul-filter-label {
    color: rgba(255, 255, 255, 0.28);
}
 
#update-log .ul-fbtn {
    border-color: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.48);
}
 
#update-log .ul-fbtn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.13);
}
 
#update-log .ul-fbtn.on {
    background: rgba(255, 255, 255, 0.09);
    color: var(--dark-text-primary);
    border-color: rgba(255, 255, 255, 0.18);
}
 
#update-log .ul-sep {
    background: rgba(255, 255, 255, 0.08);
}
 
#update-log .ul-month-head {
    color: rgba(255, 255, 255, 0.25);
    border-bottom-color: rgba(255, 255, 255, 0.04);
}
 
#update-log .ul-month-n {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.35);
}
 
#update-log .ul-entry:hover {
    background: rgba(255, 255, 255, 0.025);
}
 
#update-log .ul-text {
    color: rgba(255, 255, 255, 0.85);
}
 
#update-log a.ul-entry:hover .ul-text {
    color: var(--dark-text-primary);
}
 
#update-log .ul-meta {
    color: rgba(255, 255, 255, 0.32);
}
 
#update-log .ul-arrow {
    color: rgba(255, 255, 255, 0.12);
}
 
#update-log a.ul-entry:hover .ul-arrow {
    color: rgba(255, 255, 255, 0.45);
}
 
#update-log .ul-more-btn {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
}
 
#update-log .ul-more-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.16);
}
 
#update-log .ul-empty {
    color: rgba(255, 255, 255, 0.25);
}

/* ========== SECTION HEADINGS ========== */
.content-sections h2,
.references h2 {
    color: var(--dark-text-primary);
}

h2::after {
    background: linear-gradient(to right, var(--primary-color), transparent);
}

/* ========== REFERENCES SECTION ========== */
.references h3,
.ref-group-heading {
    color: var(--dark-text-primary);
}

.references a,
.ref-text a {
    color: #64b4ff;
}

.references a:hover,
.ref-text a:hover {
    color: #a0c4ff;
}

.ref-text {
    color: var(--dark-text-secondary);
}

.ref-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ref-group-heading {
    border-bottom-color: var(--dark-border);
}

/* Controls dark theme */
.ref-view-toggle {
    background: rgba(255, 255, 255, 0.06);
}

.ref-view-btn {
    color: var(--dark-text-muted);
}

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

.ref-view-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--dark-text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.ref-filter-label {
    color: var(--dark-text-muted);
}

.ref-fbtn {
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}

.ref-fbtn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-hover);
}

.ref-fbtn.on {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-hover);
}

/* Pills in dark theme — brighter for visibility */
.ref-pill {
    background: color-mix(in srgb, var(--pill-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--pill-color) 35%, transparent);
}

/* ========== MAIN CONTENT AREA ========== */

.section-content {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-left: 5px solid var(--primary-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--glass-shadow);
    color: var(--dark-text-primary);
}

.section-content p,
.section-content li {
    color: var(--dark-text-secondary);
}

.section-content h1,
.section-content h2,
.section-content h3,
.section-content h4,
.section-content h5,
.section-content h6 {
    color: var(--dark-text-primary);
}

.section-content strong {
    color: var(--dark-text-primary);
    font-weight: 700;
}

/* ========== THEOREM BOX ========== */

.theorem {
    background: rgba(251, 146, 60, 0.05);
    border: 1px solid rgba(251, 146, 60, 0.15);
    border-left: 5px solid #d97706;
    color: var(--dark-text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.theorem-title {
    color: #f59e0b;
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: 0.3px;
}

/* ========== PROOF BOX ========== */

.proof {
    background: rgba(74, 222, 128, 0.04);
    border: 1px dashed rgba(74, 222, 128, 0.25);
    border-left: 5px dashed #4ade80;
    color: var(--dark-text-primary);
}

.proof-title {
    color: rgba(134, 239, 172, 0.85);
    font-weight: 600;
    font-style: italic;
}

/* ========== INSIGHT BOX ========== */

.insight-box {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.08) 0%, rgba(192, 132, 252, 0.02) 100%);
    border: 2px solid rgba(192, 132, 252, 0.2);
    border-left: 5px double #c084fc;
    border-radius: 0 12px 12px 0;
    color: var(--dark-text-primary);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(192, 132, 252, 0.1);
}

.insight-box h3 {
    color: #d8b4fe !important;
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: 0.3px;
}

.insight-box p,
.insight-box li {
    color: var(--dark-text-secondary);
}

.insight-box strong {
    color: var(--dark-text-primary);
}

/* ========== PSEUDOCODE ========== */
.pseudocode {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    color: var(--dark-text-primary);
}

.pseudocode-title {
    color: var(--dark-text-primary);
}

/* ========== PYTHON CODE ========== */
.python-code {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

.code-header {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.code-title {
    color: var(--dark-text-primary);
}

/* ========== PYTHON OUTPUT ========== */
.python-output {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid rgba(255, 255, 255, 0.25);
    color: var(--dark-text-primary);
}

/* ========== CODE CONTAINER ========== */
.code-container {
    background: transparent;
}

/* ========== TOC CONTAINER ========== */
.toc-container {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--glass-shadow);
}

.toc-container h2 {
    color: var(--dark-text-primary);
}

.toc-container a {
    color: var(--dark-text-secondary);
}

.toc-container a:hover {
    color: #64b4ff;
}

/* ========== TOPIC NAV ========== */
.topic-nav {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.topic-nav a {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}

.topic-nav a:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* ========== COLLAPSIBLE SECTIONS ========== */
.collapsible-section {
    background: var(--glass-bg-solid);
    border: 1px solid var(--glass-border);
}

.collapsible-header {
    background: rgba(255, 255, 255, 0.05);
    color: var(--dark-text-primary);
}

.collapsible-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.collapsible-content {
    background: transparent;
    color: var(--dark-text-secondary);
}

/* Collapsible intro fade */
.collapsible-intro.collapsed .intro-fade {
    background: linear-gradient(to bottom, rgba(30, 30, 30, 0), var(--bg-primary));
}

/* ========== TABLES ========== */
table {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

th {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-primary);
    border-color: rgba(255, 255, 255, 0.15);
}

td {
    color: var(--dark-text-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ========== INLINE CODE ========== */
code {
    background: rgba(255, 255, 255, 0.1);
    color: #c9d1d9;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* ========== MATH TABLE ========== */
.math-table-title {
    color: var(--dark-text-primary);
}

.math-table-caption {
    color: var(--dark-text-muted);
}

/* ========== GENERAL TEXT ELEMENTS ========== */
p {
    color: var(--dark-text-secondary);
}

li {
    color: var(--dark-text-secondary);
}

strong {
    color: var(--dark-text-primary);
}

em {
    color: var(--dark-text-secondary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text-primary);
}

/* ========== CONTAINER BACKGROUND ========== */
.container {
    background: transparent;
    color: var(--dark-text-primary);
}

/* ========== PC READABILITY IMPROVEMENTS ========== */

@media (min-width: 1200px) {
    .container {
        max-width: 1500px;
        padding: var(--spacing-lg) var(--spacing-xl);
    }
    
    .section-content {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.15rem;
        line-height: 1.95;
        padding: var(--spacing-xl);
    }
    
    .section-content p {
        font-size: 1.15rem;
        line-height: 1.95;
    }

    .section-content li {
        font-size: 1.15rem;
        line-height: 1.95;
        margin-bottom: 0.75rem;
    }   
    
    .section-content h2 {
        font-size: 1.8rem;
        margin-top: 2.5rem;
        margin-bottom: 1.2rem;
    }
    
    .section-content h3 {
        font-size: 1.4rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    
    /* Theorem, proof, insight boxes */
    .theorem,
    .proof,
    .insight-box {
        font-size: 1.15rem;
        line-height: 1.8;
        padding: 1.8rem;
    }
    
    /* Code blocks */
    .pseudocode,
    .python-code,
    .python-output {
        font-size: 1.05rem;
        line-height: 1.6;
        padding: 1.5rem;
    }
}

/* Even wider on very large screens */
@media (min-width: 1600px) {
    .container {
        max-width: 1700px;
    }
    
    .section-content {
        font-size: 1.2rem;
        line-height: 2;
    }
    
    .section-content p,
    .section-content li {
        line-height: 2;
        font-size: 1.2rem;
    }
    
    .section-content h2 {
        font-size: 2rem;
    }
    
    .section-content h3 {
        font-size: 1.5rem;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .container {
        max-width: 1900px;
        padding: var(--spacing-xl) 4rem;
    }
    
    .section-content {
        font-size: 1.25rem;
        padding: 3rem;
    }
    
    .section-content p,
    .section-content li {
        font-size: 1.25rem;
        line-height: 1.95;
    }
    
    .theorem,
    .proof,
    .insight-box {
        font-size: 1.25rem;
        padding: 2rem;
    }
}

/* ========== MERMAID DIAGRAM DARK THEME ========== */
.mermaid {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: var(--spacing-md);
}

.mermaid .nodeLabel {
    color: var(--dark-text-primary) !important;
}

.mermaid .flowchart-link,
.mermaid path.flowchart-link {
    stroke: rgba(255, 255, 255, 0.4) !important;
}

.mermaid .edgeLabel,
.mermaid .edgeLabel div,
.mermaid .edgeLabel span,
.mermaid .edgeLabel p,
.mermaid .edgeLabel foreignObject {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.mermaid .edgeLabel rect,
.mermaid .labelBkg {
    fill: var(--dark-bg-primary) !important;
    stroke: none !important;
    opacity: 1 !important; /* 透明化を解除 */
}

.mermaid .edgeLabel text,
.mermaid .edgeLabel .edgeText {
    fill: var(--dark-text-primary) !important;
}

.mermaid .cluster rect {
    fill: rgba(255, 255, 255, 0.03) !important;
    stroke: rgba(255, 255, 255, 0.2) !important;
}

.mermaid .cluster span {
    color: var(--dark-text-secondary) !important;
}

/* ========== TOPIC CARDS CONTAINER ========== */
.topic-cards {
    gap: var(--spacing-lg);
}

/* ========== BASE CARD DARK THEME ========== */
.card {
    background: var(--dark-bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--dark-border);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card::before {
    /* Reset the top accent line - will be customized per section */
    height: 4px;
    opacity: 0.8;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--dark-border-hover);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card:hover::before {
    opacity: 1;
    height: 5px;
}

/* Card icon base */
.card-icon {
    color: var(--primary-color);
    text-shadow: 0 0 20px currentColor;
}

.card-icon::after {
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    opacity: 0.15;
}

.card:hover .card-icon::after {
    opacity: 0.25;
}

/* Card title */
.card h3 {
    color: var(--dark-text-primary);
}

.card h3 a {
    color: var(--dark-text-primary);
}

/* Card description */
.card p {
    color: var(--dark-text-muted);
}

/* ========== SECTION-SPECIFIC CARD STYLES ========== */

/* Section I - Linear Algebra (Deep Blue) */
.card:nth-child(1) {
    --card-section-color: var(--section-i-color);
    --card-section-light: var(--section-i-light);
    --card-section-glow: var(--section-i-glow);
}

.card:nth-child(1)::before {
    background: linear-gradient(90deg, 
        var(--section-i-color) 0%, 
        var(--section-i-light) 50%,
        var(--section-i-color) 100%
    );
}

.card:nth-child(1) .card-icon {
    color: var(--section-i-light);
}

.card:nth-child(1):hover {
    border-color: rgba(21, 101, 192, 0.4);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px var(--section-i-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card:nth-child(1):hover h3 a {
    color: var(--section-i-light);
    text-shadow: 0 0 10px var(--section-i-glow);
}

/* Section II - Calculus (Forest Green) */
.card:nth-child(2) {
    --card-section-color: var(--section-ii-color);
    --card-section-light: var(--section-ii-light);
    --card-section-glow: var(--section-ii-glow);
}

.card:nth-child(2)::before {
    background: linear-gradient(90deg, 
        var(--section-ii-color) 0%, 
        var(--section-ii-light) 50%,
        var(--section-ii-color) 100%
    );
}

.card:nth-child(2) .card-icon {
    color: var(--section-ii-light);
}

.card:nth-child(2):hover {
    border-color: rgba(46, 125, 50, 0.4);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px var(--section-ii-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card:nth-child(2):hover h3 a {
    color: var(--section-ii-light);
    text-shadow: 0 0 10px var(--section-ii-glow);
}

/* Section III - Probability (Teal/Cyan) */
.card:nth-child(3) {
    --card-section-color: var(--section-iii-color);
    --card-section-light: var(--section-iii-light);
    --card-section-glow: var(--section-iii-glow);
}

.card:nth-child(3)::before {
    background: linear-gradient(90deg, 
        var(--section-iii-color) 0%, 
        var(--section-iii-light) 50%,
        var(--section-iii-color) 100%
    );
}

.card:nth-child(3) .card-icon {
    color: var(--section-iii-light);
}

.card:nth-child(3):hover {
    border-color: rgba(0, 131, 143, 0.4);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px var(--section-iii-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card:nth-child(3):hover h3 a {
    color: var(--section-iii-light);
    text-shadow: 0 0 10px var(--section-iii-glow);
}

/* Section IV - Discrete Math (Deep Purple) */
.card:nth-child(4) {
    --card-section-color: var(--section-iv-color);
    --card-section-light: var(--section-iv-light);
    --card-section-glow: var(--section-iv-glow);
}

.card:nth-child(4)::before {
    background: linear-gradient(90deg, 
        var(--section-iv-color) 0%, 
        var(--section-iv-light) 50%,
        var(--section-iv-color) 100%
    );
}

.card:nth-child(4) .card-icon {
    color: var(--section-iv-light);
}

.card:nth-child(4):hover {
    border-color: rgba(106, 27, 154, 0.4);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px var(--section-iv-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card:nth-child(4):hover h3 a {
    color: var(--section-iv-light);
    text-shadow: 0 0 10px var(--section-iv-glow);
}

/* Section V - Machine Learning (Vibrant Orange) */
.card:nth-child(5) {
    --card-section-color: var(--section-v-color);
    --card-section-light: var(--section-v-light);
    --card-section-glow: var(--section-v-glow);
}

.card:nth-child(5)::before {
    background: linear-gradient(90deg, 
        var(--section-v-color) 0%, 
        var(--section-v-light) 50%,
        var(--section-v-color) 100%
    );
}

.card:nth-child(5) .card-icon {
    color: var(--section-v-light);
}

.card:nth-child(5):hover {
    border-color: rgba(239, 108, 0, 0.4);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px var(--section-v-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card:nth-child(5):hover h3 a {
    color: var(--section-v-light);
    text-shadow: 0 0 10px var(--section-v-glow);
}

/* ========== KNOWLEDGE MAP CARD (SPECIAL) ========== */
.card-map-highlight {
    background: linear-gradient(135deg, 
        rgba(20, 35, 55, 0.9) 0%, 
        rgba(15, 25, 40, 0.95) 100%
    );
    border: 1px solid rgba(100, 180, 255, 0.3);
}

.card-map-highlight::before {
    background: linear-gradient(90deg,
        #3498db 0%,
        #64b4ff 25%,
        #2ecc71 50%,
        #64b4ff 75%,
        #3498db 100%
    );
    background-size: 200% 100%;
    animation: mapCardShimmer 3s linear infinite;
    opacity: 1;
}

@keyframes mapCardShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ========== BLOCKQUOTE DARK THEME ========== */
blockquote {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--dark-text-secondary);
}

blockquote small {
    color: var(--dark-text-muted);
}

/* ========== LINKS ========== */
a {
    color: #64b4ff;
}

a:hover {
    color: #a0c4ff;
}

/* ========== SEARCH POPUP DARK THEME ========== */
#search-popup {
    background: var(--glass-bg-solid);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.popup-result-item {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.popup-result-item:hover {
    background-color: rgba(100, 180, 255, 0.1);
    border-color: rgba(100, 180, 255, 0.2);
}

.popup-result-item h3 a {
    color: var(--dark-text-primary);
}

.popup-result-item h3 a:hover {
    color: #64b4ff;
}

.result-context {
    color: var(--dark-text-muted);
}

.no-results {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--dark-text-secondary);
}

mark {
    background-color: rgba(100, 180, 255, 0.3);
}

/* ========== KEYWORDS/TAGS DARK THEME ========== */
.keywords span,
.keyword {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--dark-text-secondary);
}

.keywords span:hover,
.keyword:hover {
    background-color: rgba(100, 180, 255, 0.15);
    border-color: rgba(100, 180, 255, 0.3);
    color: var(--dark-text-primary);
}

.keywords-more {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--dark-text-muted);
}

.keywords-more:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.keywords-more::after {
    background-color: var(--bg-footer);
}

/* ========== CARD BADGES DARK THEME ========== */

/* Code Included - subtle cool blue-gray */
.card-badge-code {
    background-color: rgba(100, 149, 237, 0.15);
    color: #a8c5f0;
    border: 1px solid rgba(100, 149, 237, 0.35);
}

/* Interactive Demo - subtle warm amber */
.card-badge-interactive {
    background-color: rgba(218, 165, 32, 0.15);
    color: #e8d08a;
    border: 1px solid rgba(218, 165, 32, 0.35);
}

/* Hide essential badge - not needed */
.card-badge-essential {
    display: none !important;
}

/* General card badge fallback */
.card-badge {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-badge:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ========== FOOTER ENHANCEMENT ========== */
footer {
    border-top: 1px solid rgba(100, 180, 255, 0.1);
}

.footer-content {
    background: transparent;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .card {
        padding: var(--spacing-md);
    }
    
    .homepage-introduction,
    .update-notice,
    .content-sections,
    .references {
        padding: var(--spacing-md);
        border-radius: 12px;
    }
}

@media (max-width: 576px) {
    .card::before {
        height: 3px;
    }
    
    .card:hover::before {
        height: 4px;
    }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .card-map-highlight::before {
        animation: none;
    }
    
    .card,
    .card:hover {
        transition: none;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    body {
        background: #fff;
        color: #000;
    }
    
    body::before {
        display: none;
    }
    
    .card {
        background: #fff;
        border: 1px solid #ddd;
        color: #000;
    }
    
    .homepage-introduction,
    .update-notice,
    .content-sections,
    .references {
        background: #fff;
        color: #000;
    }
}

/* ========== SECTION PAGE THEMING ==========
 * These styles apply to section landing pages
 * (e.g., linear_algebra.html, probability.html)
 * All cards on a section page get that section's color
 * =========================================== */

/* Section I - Linear Algebra Pages */
body[data-section="I"] .card::before,
.section-i-theme .card::before {
    background: linear-gradient(90deg, 
        var(--section-i-color) 0%, 
        var(--section-i-light) 50%,
        var(--section-i-color) 100%
    ) !important;
    opacity: 0.9;
}

body[data-section="I"] .card .card-icon,
.section-i-theme .card .card-icon {
    color: var(--section-i-light);
}

body[data-section="I"] .card:hover,
.section-i-theme .card:hover {
    border-color: rgba(21, 101, 192, 0.5) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 40px var(--section-i-glow) !important;
}

body[data-section="I"] .card:hover h3 a,
.section-i-theme .card:hover h3 a {
    color: var(--section-i-light) !important;
    text-shadow: 0 0 10px var(--section-i-glow);
}

/* Section II - Calculus Pages */
body[data-section="II"] .card::before,
.section-ii-theme .card::before {
    background: linear-gradient(90deg, 
        var(--section-ii-color) 0%, 
        var(--section-ii-light) 50%,
        var(--section-ii-color) 100%
    ) !important;
    opacity: 0.9;
}

body[data-section="II"] .card .card-icon,
.section-ii-theme .card .card-icon {
    color: var(--section-ii-light);
}

body[data-section="II"] .card:hover,
.section-ii-theme .card:hover {
    border-color: rgba(46, 125, 50, 0.5) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 40px var(--section-ii-glow) !important;
}

body[data-section="II"] .card:hover h3 a,
.section-ii-theme .card:hover h3 a {
    color: var(--section-ii-light) !important;
    text-shadow: 0 0 10px var(--section-ii-glow);
}

/* Section III - Probability Pages */
body[data-section="III"] .card::before,
.section-iii-theme .card::before {
    background: linear-gradient(90deg, 
        var(--section-iii-color) 0%, 
        var(--section-iii-light) 50%,
        var(--section-iii-color) 100%
    ) !important;
    opacity: 0.9;
}

body[data-section="III"] .card .card-icon,
.section-iii-theme .card .card-icon {
    color: var(--section-iii-light);
}

body[data-section="III"] .card:hover,
.section-iii-theme .card:hover {
    border-color: rgba(0, 131, 143, 0.5) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 40px var(--section-iii-glow) !important;
}

body[data-section="III"] .card:hover h3 a,
.section-iii-theme .card:hover h3 a {
    color: var(--section-iii-light) !important;
    text-shadow: 0 0 10px var(--section-iii-glow);
}

/* Section IV - Discrete Math Pages */
body[data-section="IV"] .card::before,
.section-iv-theme .card::before {
    background: linear-gradient(90deg, 
        var(--section-iv-color) 0%, 
        var(--section-iv-light) 50%,
        var(--section-iv-color) 100%
    ) !important;
    opacity: 0.9;
}

body[data-section="IV"] .card .card-icon,
.section-iv-theme .card .card-icon {
    color: var(--section-iv-light);
}

body[data-section="IV"] .card:hover,
.section-iv-theme .card:hover {
    border-color: rgba(106, 27, 154, 0.5) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 40px var(--section-iv-glow) !important;
}

body[data-section="IV"] .card:hover h3 a,
.section-iv-theme .card:hover h3 a {
    color: var(--section-iv-light) !important;
    text-shadow: 0 0 10px var(--section-iv-glow);
}

/* Section V - Machine Learning Pages */
body[data-section="V"] .card::before,
.section-v-theme .card::before {
    background: linear-gradient(90deg, 
        var(--section-v-color) 0%, 
        var(--section-v-light) 50%,
        var(--section-v-color) 100%
    ) !important;
    opacity: 0.9;
}

body[data-section="V"] .card .card-icon,
.section-v-theme .card .card-icon {
    color: var(--section-v-light);
}

body[data-section="V"] .card:hover,
.section-v-theme .card:hover {
    border-color: rgba(239, 108, 0, 0.5) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 40px var(--section-v-glow) !important;
}

body[data-section="V"] .card:hover h3 a,
.section-v-theme .card:hover h3 a {
    color: var(--section-v-light) !important;
    text-shadow: 0 0 10px var(--section-v-glow);
}

/* ========== FIX FOR BOLD LINKS ========== */
/* Ensures bold text inside links inherits the link color instead of turning white */
.section-content a strong,
.section-content strong a,
a strong {
    color: #64b4ff !important; /* Forces the link color */
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

/* Hover state for bold links */
.section-content a:hover strong,
.section-content strong a:hover,
a:hover strong {
    color: #a0c4ff !important; /* Lighter blue on hover */
    text-decoration-color: #a0c4ff;
}