@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================
   1. BASE VARIABLES & TEXT COLOR FIX
   ========================================= */
body[data-md-color-scheme="default"] {
    --md-default-bg-color: #F8FAFC;
    --md-default-fg-color: #1B1D22 !important;
    --md-primary-color: transparent !important; 
    --md-primary-fg-color: #1B1D22 !important;
}
body[data-md-color-scheme="slate"] {
    --md-default-bg-color: #0B1220; 
    --md-default-fg-color: #F5F7FA !important;
    --md-primary-color: transparent !important; 
    --md-primary-fg-color: #F5F7FA !important;
}

/* STRIP BACKGROUNDS ONLY - DO NOT ALTER FLEX OR POSITIONING */
html, body, .md-container, .md-main, .md-main__inner, .md-tabs {
    background: transparent !important;
    background-color: transparent !important;
}

body {
    font-family: 'Inter', -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    margin: 0 !important;
}

/* =========================================
   GLOBAL TOC HIDE
   ========================================= */
/* Permanently hides the right sidebar on all chapter pages */
html body .md-sidebar--secondary { display: none !important; }

/* =========================================
   2. DYNAMIC MESH BACKGROUNDS
   ========================================= */
html[data-md-color-scheme="default"], body[data-md-color-scheme="default"] {
    background: linear-gradient(-45deg, #F8FAFC, #F1F5FF, #E2EBFF, #F0F5FF) !important;
    background-size: 300% 300% !important;
    background-attachment: fixed !important;
    animation: meshGradient 18s ease infinite !important;
    color: #1B1D22 !important;
}

html[data-md-color-scheme="slate"], body[data-md-color-scheme="slate"] {
    background: linear-gradient(-45deg, #0B1220, #111C32, #162444, #0A101C) !important;
    background-size: 300% 300% !important;
    background-attachment: fixed !important;
    animation: meshGradient 18s ease infinite !important;
    color: #F5F7FA !important;
}

@keyframes meshGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-md-color-scheme], body[data-md-color-scheme] { animation: none !important; }
    .book-box, .md-footer__link, .md-content details { transition: none !important; }
}

/* =========================================
   3. HEADER
   ========================================= */
.md-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.md-header::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; pointer-events: none;
}
body[data-md-color-scheme="default"] .md-header::before {
    background: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid rgba(79, 124, 243, 0.15) !important;
}
body[data-md-color-scheme="slate"] .md-header::before {
    background: rgba(18, 24, 38, 0.55) !important;
    backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid rgba(122, 167, 255, 0.15) !important;
}

body[data-md-color-scheme="default"] .md-header__title, 
body[data-md-color-scheme="default"] .md-header__title a, 
body[data-md-color-scheme="default"] .md-header__button { pointer-events: auto !important; color: #1B1D22 !important; }
body[data-md-color-scheme="slate"] .md-header__title, 
body[data-md-color-scheme="slate"] .md-header__title a, 
body[data-md-color-scheme="slate"] .md-header__button { pointer-events: auto !important; color: #F5F7FA !important; }

/* =========================================
   4. HOMEPAGE ISOLATION FIX
   ========================================= */
body:has(.hero-intro) h1 { display: none !important; }

/* OLD CSS STRUCTURE: Safely center homepage content and hide desktop sidebar */
@media screen and (min-width: 1221px) {
    body:has(.hero-intro) .md-sidebar--primary { display: none !important; }
    body:has(.hero-intro) .md-main__inner {
        display: block !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
    }
}

/* =========================================
   5. HOMEPAGE HERO & TEXT
   ========================================= */
.hero-intro { text-align: center; max-width: 650px; margin: 1.5rem auto 1rem auto; padding: 0 1rem; }
.hero-title { font-size: 1.6rem !important; font-weight: 800 !important; line-height: 1.2 !important; margin-bottom: 0.8rem !important; letter-spacing: -0.02em !important; }

body[data-md-color-scheme="default"] .hero-title,
body[data-md-color-scheme="default"] .premium-section-title h2 {
    background: linear-gradient(135deg, #1B1D22 0%, #5A74B8 100%) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}

body[data-md-color-scheme="slate"] .hero-title,
body[data-md-color-scheme="slate"] .premium-section-title h2 {
    background: linear-gradient(135deg, #F5F7FA 0%, #AFC4F8 100%) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}

.md-typeset .hero-intro p { font-size: 0.95rem !important; line-height: 1.5 !important; margin-bottom: 0.6rem !important; text-align: justify !important; hyphens: auto !important; }
body[data-md-color-scheme="default"] .hero-intro p { color: #4A5565 !important; }
body[data-md-color-scheme="slate"] .hero-intro p { color: #CBD5E1 !important; }

.premium-section-title { text-align: center; margin: 2rem 0 1rem 0; }
.premium-section-title h2 { font-size: 1.05rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.15em !important; margin: 0 0 0.6rem 0 !important; }
.premium-section-title .accent-line { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(79, 124, 243, 0.18), transparent); }

/* =========================================
   6. BOOK GRID & FROSTED GLASS CARDS
   ========================================= */
.md-content { max-width: none !important; }

.book-grid {
    display: grid; 
    grid-template-columns: repeat(4, 195px);
    gap: 1.25rem; 
    margin: 1.5rem auto 3rem auto !important;
    max-width: none !important;
    justify-content: center !important;
}

@media screen and (max-width: 1000px) {
    .book-grid { grid-template-columns: repeat(3, 195px); }
}

@media screen and (max-width: 700px) {
    .book-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

.book-box {
    padding: 1.5rem 1rem; text-align: center; text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 18px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    min-height: 120px; position: relative; overflow: hidden;
    backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

body[data-md-color-scheme="default"] .book-box { background: rgba(255, 255, 255, 0.60) !important; border: 1px solid rgba(79, 124, 243, 0.15) !important; box-shadow: 0 8px 32px 0 rgba(79, 124, 243, 0.08) !important; }
body[data-md-color-scheme="slate"] .book-box { background: rgba(18, 24, 38, 0.55) !important; border: 1px solid rgba(122, 167, 255, 0.15) !important; box-shadow: 0 8px 32px 0 rgba(11, 18, 32, 0.5) !important; }

a.book-box .book-icon { font-size: 28px; margin-bottom: 1rem; transition: all 0.4s ease; }
body[data-md-color-scheme="default"] a.book-box .book-icon { background: linear-gradient(135deg, #1B1D22 0%, #5A74B8 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
body[data-md-color-scheme="slate"] a.book-box .book-icon { background: linear-gradient(135deg, #F5F7FA 0%, #AFC4F8 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }

a.book-box h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--md-default-fg-color) !important; }

body[data-md-color-scheme="default"] a.book-box:hover { transform: translateY(-6px) scale(1.03); background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(79, 124, 243, 0.18) !important; box-shadow: 0 15px 35px rgba(79, 124, 243, 0.12), 0 5px 15px rgba(79, 124, 243, 0.08) !important; }
body[data-md-color-scheme="slate"] a.book-box:hover { transform: translateY(-6px) scale(1.03); background: rgba(30, 42, 65, 0.65) !important; border: 1px solid rgba(122, 167, 255, 0.3) !important; box-shadow: 0 15px 35px rgba(11, 18, 32, 0.6), 0 5px 15px rgba(11, 18, 32, 0.7) !important; }
a.book-box:hover .book-icon { transform: scale(1.15); }
body[data-md-color-scheme="default"] a.book-box:hover .book-icon { filter: drop-shadow(0px 4px 8px rgba(79, 124, 243, 0.3)) !important; }
body[data-md-color-scheme="slate"] a.book-box:hover .book-icon { filter: drop-shadow(0px 4px 8px rgba(122, 167, 255, 0.3)) !important; }

.book-box.locked { opacity: 0.55; filter: grayscale(60%); cursor: default; }
.book-box.locked .book-icon { font-size: 24px; margin-bottom: 0.8rem; background: #7C96D9 !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.book-box.locked h3 { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: inherit; }
.book-box.locked:hover { transform: translateY(-2px); opacity: 0.8; filter: grayscale(20%); }

/* =========================================
   7. Q&A ACCORDIONS & TYPOGRAPHY
   ========================================= */
.md-content .md-typeset { font-size: 15px !important; }
.md-content .md-typeset p, .md-content .md-typeset blockquote { text-align: justify !important; hyphens: auto !important; }
.md-content details { border-radius: 12px; padding: 0; margin-bottom: 1.2rem; overflow: hidden; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; transition: all 0.3s ease; }

body[data-md-color-scheme="default"] .md-content details { 
    background: rgba(255, 255, 255, 0.68) !important; 
    border: 1px solid rgba(79, 124, 243, 0.18) !important; 
    box-shadow: 0 10px 30px rgba(79, 124, 243, 0.10), 0 2px 8px rgba(79, 124, 243, 0.05) !important; 
}
body[data-md-color-scheme="default"] .md-content summary { color: #1B1D22 !important; }
body[data-md-color-scheme="default"] .md-content details p { color: #4A5565 !important; }

body[data-md-color-scheme="slate"] .md-content details { 
    background: rgba(18, 24, 38, 0.60) !important; 
    border: 1px solid rgba(122, 167, 255, 0.18) !important; 
    box-shadow: 0 10px 30px rgba(11, 18, 32, 0.6), 0 2px 8px rgba(11, 18, 32, 0.3) !important; 
}
body[data-md-color-scheme="slate"] .md-content summary { color: #F5F7FA !important; }
body[data-md-color-scheme="slate"] .md-content details p { color: #CBD5E1 !important; }

html body .md-content details summary::before, html body .md-content details[open] summary::before { display: none !important; }
.md-content summary { font-size: 15px !important; font-weight: 600 !important; line-height: 1.5 !important; cursor: pointer; padding: 1rem 2.5rem 1rem 1.2rem !important; position: relative !important; }
.md-content summary::after { right: 1.2rem !important; }
.md-content details p { font-size: 13.5px !important; line-height: 1.75 !important; padding: 0 1.2rem !important; margin: 0 0 0.8rem 0 !important; }
.md-content details > p:last-child { margin-bottom: 1.2rem !important; }

.md-content blockquote { padding: 0.8rem 1.2rem !important; margin: 0.8rem 0 1rem 0 !important; border-radius: 0 8px 8px 0 !important; font-size: 14px !important; line-height: 1.7 !important; font-style: normal !important; }
body[data-md-color-scheme="default"] .md-content blockquote { border-left: 4px solid rgba(79, 124, 243, 0.4) !important; background: rgba(79, 124, 243, 0.04) !important; color: #1B1D22 !important; }
body[data-md-color-scheme="slate"] .md-content blockquote { border-left: 4px solid rgba(122, 167, 255, 0.4) !important; background: rgba(122, 167, 255, 0.08) !important; color: #F5F7FA !important; }


/* =========================================
   8. DESKTOP SIDEBAR MENU (REVERTED TO OLD STABLE STRUCTURE + NEW COLORS)
   ========================================= */
@media screen and (min-width: 1221px) {
    .md-sidebar--primary .md-nav__title, .md-sidebar--primary .md-nav__title::before { background: transparent !important; box-shadow: none !important; border: none !important; }
    .md-sidebar--primary { position: sticky !important; top: 1.5rem !important; align-self: flex-start !important; }
    .md-sidebar--primary .md-sidebar__scrollwrap { height: auto !important; overflow-y: visible !important; }
    .md-sidebar--primary .md-sidebar__inner { backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; border-radius: 16px; padding: 1rem 0.5rem; }
    
    /* NEW CSS Colors */
    body[data-md-color-scheme="default"] .md-sidebar--primary .md-sidebar__inner { background: rgba(255, 255, 255, 0.60) !important; border: 1px solid rgba(79, 124, 243, 0.15) !important; box-shadow: 0 8px 32px 0 rgba(79, 124, 243, 0.08) !important; }
    body[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__inner { background: rgba(18, 24, 38, 0.55) !important; border: 1px solid rgba(122, 167, 255, 0.15) !important; box-shadow: 0 8px 32px 0 rgba(11, 18, 32, 0.5) !important; }
}

/* NEW Active Item Highlight Colors */
.md-nav__item--active > .md-nav__link { 
    background: rgba(79, 124, 243, 0.15) !important; 
    border-radius: 8px !important; 
    font-weight: 700 !important; 
    color: #4F7CF3 !important; 
}
body[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
    color: #7AA7FF !important;
}

html body .md-sidebar .md-nav__item .md-nav__link:hover, 
html body .md-sidebar .md-nav__item .md-nav__link--active:hover {
    background: rgba(79, 124, 243, 0.12) !important; 
    transition: background 0.3s ease; 
    border-radius: 8px !important;
}

/* =========================================
   9. MOBILE FIXES & DRAWER GLASS UI (REVERTED TO OLD STABLE STRUCTURE + NEW COLORS)
   ========================================= */
@media screen and (max-width: 1220px) {
    .md-header .md-header__button.md-logo { display: flex !important; }
    .md-header__button { color: var(--md-default-fg-color) !important; }
    .md-header__button svg { fill: currentColor !important; }
    
    html body .md-drawer__inner { backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; overflow-y: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; }
    html body .md-drawer__inner::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
    
    /* NEW CSS Drawer Colors */
    body[data-md-color-scheme="default"] .md-drawer__inner { background: rgba(248, 250, 252, 0.90) !important; border-right: 1px solid rgba(79, 124, 243, 0.2) !important; box-shadow: 10px 0 40px rgba(0,0,0,0.08) !important; }
    body[data-md-color-scheme="slate"] .md-drawer__inner { background: rgba(11, 18, 32, 0.90) !important; border-right: 1px solid rgba(122, 167, 255, 0.15) !important; box-shadow: 10px 0 40px rgba(0,0,0,0.45) !important; }
    
    html body .md-nav--primary .md-nav__link { color: var(--md-default-fg-color) !important; }
    html body .md-nav--primary .md-nav__link:hover { background: rgba(79, 124, 243, 0.12) !important; border-radius: 8px !important; }
    
    /* NEW CSS Active Mobile Drawer Highlights */
    html body .md-nav--primary .md-nav__item--active > .md-nav__link { background: rgba(79, 124, 243, 0.15) !important; color: #4F7CF3 !important; font-weight: 700 !important; border-radius: 8px !important; }
    body[data-md-color-scheme="slate"] html body .md-nav--primary .md-nav__item--active > .md-nav__link { color: #7AA7FF !important; }

    html body .md-nav--primary, html body .md-nav--primary .md-nav__list, html body .md-nav--primary .md-nav__scrollwrap { scrollbar-width: none !important; -ms-overflow-style: none !important; }
    html body .md-nav--primary::-webkit-scrollbar, html body .md-nav--primary .md-nav__list::-webkit-scrollbar, html body .md-nav--primary .md-nav__scrollwrap::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
}

@media screen and (max-width: 768px) {
    .md-content blockquote { padding: 0.8rem 0.8rem !important; font-size: 13px !important; border-left: 3px solid rgba(79, 124, 243, 0.4) !important; }
    body[data-md-color-scheme="slate"] .md-content blockquote { border-left: 3px solid rgba(122, 167, 255, 0.4) !important; }
    .md-header__topic .md-ellipsis { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; display: block !important; }
    .md-search__outer { background: var(--md-default-bg-color) !important; }
}

/* =========================================
   10. SEARCH FIX
   ========================================= */
html body .md-search__form { background: rgba(79, 124, 243, 0.12) !important; border: 1px solid rgba(79, 124, 243, 0.15) !important; border-radius: 8px !important; }
html body .md-search__input, html body .md-search__icon { color: inherit !important; }
.md-search-result__article p { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; }

@media screen and (max-width: 768px) {
    .md-search__output, .md-search-result__scrollwrap, .md-search-result__dialog { background-color: var(--md-default-bg-color) !important; }
    .md-search__output { --md-text-color: var(--md-default-fg-color) !important; --md-typeset-color: var(--md-default-fg-color) !important; --md-typeset-a-color: var(--md-default-fg-color) !important; }
    .md-search-result__title, .md-search-result__teaser, .md-search-result__meta, .md-search-result__article, .md-search-result__item, .md-search-result__link { color: var(--md-default-fg-color) !important; }
    body[data-md-color-scheme="default"] .md-search-result__article mark { background-color: #CDAA5D !important; color: #1B1D22 !important; }
    body[data-md-color-scheme="slate"] .md-search-result__article mark { background-color: #D6B86E !important; color: #0B1220 !important; }
}

/* =========================================
   11. THE SAFE SVG LOGO FIX
   ========================================= */
html body .md-header .md-header__button.md-logo { display: flex !important; }
.md-header__button.md-logo svg, .md-header__button.md-logo img, .md-nav__source .md-logo svg, .md-nav__source .md-logo img { height: 24px !important; width: 24px !important; max-height: 24px !important; max-width: 24px !important; }

/* =========================================
   12. PREMIUM APPLE-STYLE "THE CRUX" BOXES
   ========================================= */
html body .md-content .admonition.tip { --md-admonition-bg-color: transparent !important; --md-admonition-fg-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 12px !important; margin: 1.2rem !important; }
body[data-md-color-scheme="default"] .md-content .admonition.tip { background: rgba(79, 124, 243, 0.05) !important; border: 1px solid rgba(79, 124, 243, 0.15) !important; box-shadow: inset 0 2px 5px rgba(79, 124, 243, 0.04) !important; }
body[data-md-color-scheme="slate"] .md-content .admonition.tip { background: rgba(122, 167, 255, 0.08) !important; border: 1px solid rgba(122, 167, 255, 0.15) !important; box-shadow: inset 0 2px 5px rgba(11, 18, 32, 0.4) !important; }
html body .md-content .admonition.tip .admonition-title { display: flex !important; align-items: center !important; gap: 10px !important; background: transparent !important; background-color: transparent !important; border-bottom: 1px solid rgba(122, 167, 255, 0.2) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 0.95em !important; letter-spacing: 0.5px; padding: 0.5rem 1.2rem !important; color: var(--md-default-fg-color) !important; }
html body .md-content .admonition.tip .admonition-title::before { position: static !important; display: inline-block !important; margin: 0 !important; width: 18px !important; height: 18px !important; background-color: currentColor !important; flex-shrink: 0 !important; }
html body .md-content .admonition.tip p { font-size: 14px !important; text-align: justify !important; hyphens: manual !important; padding: 0 1.2rem !important; margin-top: 0.6rem !important; margin-bottom: 0.6rem !important; opacity: 0.9; line-height: 1.6 !important; }

/* =========================================
   13. FIX MICRO-HEADINGS (####) OUTDENT & ICONS
   ========================================= */
.md-content details h4 { margin-left: 1.2rem !important; margin-right: 1.2rem !important; margin-top: 1rem !important; margin-bottom: 0.4rem !important; display: flex !important; align-items: center !important; gap: 8px !important; font-weight: 700 !important; font-size: 15px !important; color: var(--md-default-fg-color) !important; }
.md-content details h4 i { color: inherit !important; font-size: 15px !important; }

/* =========================================
   14. TRUE GLOBAL SCROLLBAR OVERRIDE
   ========================================= */
html body ::-webkit-scrollbar { width: 14px !important; background-color: transparent !important; }
html body ::-webkit-scrollbar-track { background-color: transparent !important; border: none !important; }
html body ::-webkit-scrollbar-thumb { background-color: rgba(79, 124, 243, 0.18) !important; border-radius: 10px !important; border: 4px solid transparent !important; background-clip: padding-box !important; }
html body ::-webkit-scrollbar-thumb:hover { background-color: rgba(79, 124, 243, 0.4) !important; }
html[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb { background-color: rgba(122, 167, 255, 0.3) !important; }
html[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(122, 167, 255, 0.5) !important; }

/* Keep the desktop sidebar perfectly clean without scrollbars */
@media screen and (min-width: 1221px) {
    html body .md-sidebar .md-sidebar__scrollwrap { scrollbar-width: none !important; -ms-overflow-style: none !important; }
    html body .md-sidebar .md-sidebar__scrollwrap::-webkit-scrollbar, html body .md-sidebar .md-sidebar__scrollwrap:hover::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
}

/* =========================================
   15. MOBILE BALANCED READING & TYPOGRAPHY
   ========================================= */
@media screen and (max-width: 768px) {
    html body .md-content .md-typeset p, html body .md-content .md-typeset blockquote, html body .md-content details p, html body .md-content .admonition.tip p, html body .hero-intro p { text-align: left !important; text-wrap: pretty !important; hyphens: none !important; word-spacing: normal !important; }
    .hero-intro { margin-top: 0.8rem !important; padding: 0 1.1rem !important; }
    .hero-title { font-size: 1.15rem !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; margin-bottom: 0.8rem !important; }
    .md-typeset .hero-intro p { font-size: 0.78rem !important; line-height: 1.65 !important; letter-spacing: 0 !important; margin-bottom: 0.8rem !important; }
    .md-content .md-typeset { font-size: 15px !important; }
    .md-content .md-typeset p { line-height: 1.75 !important; margin-bottom: 1rem !important; }
    .md-content details p, .md-content .admonition.tip p { font-size: 14px !important; line-height: 1.75 !important; }
    .premium-section-title h2 { font-size: 1rem !important; }
}

/* =========================================
   16. COMPACT GLASS FOOTER NAVIGATION (PREV/NEXT)
   ========================================= */
html body .md-footer, 
html body .md-footer-meta, 
html body .md-footer__meta { 
    background: transparent !important; 
    background-color: transparent !important; 
    border: none !important; 
}

body:has(.hero-intro) nav.md-footer__inner { 
    display: none !important; 
}

html body nav.md-footer__inner { 
    display: flex !important; 
    justify-content: flex-end !important; 
    gap: 14px !important; 
    padding-top: 1.5rem !important; 
}

html body .md-footer__title,
html body .md-footer__direction { 
    display: none !important; 
}

html body .md-footer__link { 
    display: inline-flex !important; align-items: center !important; justify-content: center !important; 
    width: 48px !important; max-width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; 
    border-radius: 50% !important; 
    backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; 
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}

html body .md-footer__button { 
    margin: 0 !important; padding: 0 !important; display: flex !important; 
    align-items: center !important; justify-content: center !important; width: auto !important; 
}
html body .md-footer__link svg { width: 22px !important; height: 22px !important; display: block !important; fill: currentColor !important; }

body[data-md-color-scheme="default"] .md-footer__link { background: rgba(255, 255, 255, 0.60) !important; border: 1px solid rgba(79, 124, 243, 0.18) !important; box-shadow: 0 8px 24px 0 rgba(79, 124, 243, 0.08) !important; color: #1B1D22 !important; }
body[data-md-color-scheme="slate"] .md-footer__link { background: rgba(18, 24, 38, 0.55) !important; border: 1px solid rgba(122, 167, 255, 0.15) !important; box-shadow: 0 8px 24px 0 rgba(11, 18, 32, 0.5) !important; color: #F5F7FA !important; }

html body .md-footer__link:hover { transform: translateY(-3px) scale(1.05) !important; }
body[data-md-color-scheme="default"] .md-footer__link:hover { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(79, 124, 243, 0.3) !important; box-shadow: 0 15px 35px rgba(79, 124, 243, 0.12), 0 5px 15px rgba(79, 124, 243, 0.08) !important; }
body[data-md-color-scheme="slate"] .md-footer__link:hover { background: rgba(30, 42, 65, 0.8) !important; border: 1px solid rgba(122, 167, 255, 0.4) !important; box-shadow: 0 15px 35px rgba(11, 18, 32, 0.6), 0 5px 15px rgba(11, 18, 32, 0.7) !important; }

.md-copyright { font-size: 0 !important; color: transparent !important; padding: 0 !important; width: 100% !important; text-align: center !important; }
.md-copyright__highlight { opacity: 0.6 !important; font-size: 12px !important; display: block !important; margin: 0 auto !important; color: var(--md-default-fg-color) !important; text-align: center !important; }
html body .md-copyright a { display: none !important; pointer-events: none !important; }

@media screen and (max-width: 768px) {
    html body nav.md-footer__inner { justify-content: center !important; padding: 1rem 0 2rem !important; }
    html body .md-footer__link { width: 46px !important; height: 46px !important; }
}

/* =========================================
   17. NEUTRAL TITANIUM SIDEBAR HIGHLIGHTS
   ========================================= */
/* Kills the weird blue and replaces it with bold dark gray/white */

/* Light Mode: Bold Dark Gray + Soft Titanium Background */
html body .md-nav__item--active > .md-nav__link,
html body .md-nav--primary .md-nav__item--active > .md-nav__link { 
    background: rgba(120, 120, 130, 0.15) !important; 
    color: #1B1D22 !important; 
    font-weight: 700 !important; 
}

/* Dark Mode: Bold White + Soft Silver Background */
body[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link,
body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--active > .md-nav__link {
    background: rgba(200, 200, 200, 0.15) !important;
    color: #F5F7FA !important;
}

/* Hover States (Slightly lighter gray so it feels responsive) */
html body .md-sidebar .md-nav__item .md-nav__link:hover, 
html body .md-sidebar .md-nav__item .md-nav__link--active:hover,
html body .md-nav--primary .md-nav__link:hover {
    background: rgba(120, 120, 130, 0.08) !important; 
}

body[data-md-color-scheme="slate"] .md-sidebar .md-nav__item .md-nav__link:hover, 
body[data-md-color-scheme="slate"] .md-sidebar .md-nav__item .md-nav__link--active:hover,
body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link:hover {
    background: rgba(200, 200, 200, 0.08) !important; 
}