/* css/theme-styles.css
/* Note to Contributors:
   Please maintain a professional tone in comments.
   This file defines HOW components look using the active theme's palette
   (defined in theme-vars.css).
   Focus on using theme-agnostic aliases like var(--bg-main), var(--text-primary).
*/

/**
 * @file theme-styles.css
 * @description Contains theme-dependent styles for various UI components.
 * These rules utilize the CSS CustomProperties (variables) defined in
 * theme-vars.css to adapt component appearance based on the active theme.
 * Also includes specific styling for Neumorphism, Glassmorphism, Claymorphism, etc.
 */

/* --- GENERAL THEMED STYLES --- */
body {
    /* background-color and color are set in base.css using these vars */
    /* Specific background textures/gradients for certain themes will be applied here */
}

body.theme-sands-of-serenity {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235F4A3F' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
body.theme-moonlit-marble {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradMM' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(200,200,210,0.05);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(220,220,230,0.05);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23gradMM)'/%3E%3Cpath d='M0 40 Q50 10, 100 40 T200 40' stroke='rgba(143, 149, 158, 0.08)' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q50 50, 100 70 T200 70' stroke='rgba(143, 149, 158, 0.06)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
    background-color: var(--bg-main); /* Ensure base color shows */
}
body.theme-crystal-coral-reef {
    /* Animated wave pattern - JS would handle canvas. Static fallback: */
    background-image: linear-gradient(135deg, rgba(0, 131, 143, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 131, 143, 0.03) 50%, rgba(0, 131, 143, 0.03) 75%, transparent 75%, transparent),
                      linear-gradient(45deg, rgba(255, 111, 97, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 111, 97, 0.02) 50%, rgba(255, 111, 97, 0.02) 75%, transparent 75%, transparent);
    background-size: 80px 80px, 80px 80px;
    background-position: 0 0, 40px 40px;
}
body.theme-neon-frostbite {
    background-image: linear-gradient(to bottom, var(--bg-main-neon-frostbite) 0%, color-mix(in srgb, var(--bg-main-neon-frostbite) 80%, #09101A) 100%);
    /* Frost particle effect - JS would handle canvas */
}
body.theme-cyber-twilight-glow {
    /* Pulsing radial gradient & cyber grid */
    background-image: radial-gradient(circle at center, rgba(58, 12, 163, 0.0) 0%, rgba(58, 12, 163, 0.08) 30%, transparent 60%),
                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 1h60M1 0v60' stroke='rgba(58,12,163,0.05)' stroke-width='0.25'/%3E%3C/svg%3E");
    animation: cyberPulse 12s infinite ease-in-out;
}
@keyframes cyberPulse {
    0%, 100% { background-size: 100% 100%, 60px 60px; }
    50% { background-size: 130% 130%, 60px 60px; }
}
body.theme-midnight-circuit-pulse {
    /* Circuit traces - subtle SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpattern id='circuitMP' patternUnits='userSpaceOnUse' width='120' height='120'%3E%3Cpath d='M0 60 H40 V30 H60 V90 H80 V60 H120 M60 0 V30 M80 90 V120' stroke='rgba(0,255,127,0.05)' stroke-width='0.75' fill='none'/%3E%3Ccircle cx='40' cy='30' r='1.5' fill='rgba(0,255,127,0.07)'/%3E%3Ccircle cx='60' cy='90' r='1.5' fill='rgba(0,255,127,0.07)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23circuitMP)'/%3E%3C/svg%3E");
}


a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease,
                opacity var(--transition-speed-fast) ease;
}
a:hover {
    color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary));
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    opacity: 0.9;
}

::selection {
    background-color: var(--accent-primary);
    color: var(--accent-contrast-text); /* UPDATED to use new variable */
}
/* REMOVED: Old specific ::selection color overrides, as --accent-contrast-text should handle this.
   If specific themes still need overrides for ::selection, they can be re-added,
   but the goal is for --accent-contrast-text to cover most cases.
body.theme-light ::selection, body.theme-republic ::selection,
body.theme-sands-of-serenity ::selection, body.theme-moonlit-marble ::selection,
body.theme-crystal-coral-reef ::selection {
    color: var(--text-primary);
}
body.theme-neon-frostbite ::selection,
body.theme-cyber-twilight-glow ::selection, body.theme-midnight-circuit-pulse ::selection {
    color: #000000;
}
*/


/* Themed overlay for sidebar (when open and visible) and for Changelog modal */
body.sidebar-open.sidebar-visible::before {
    background-color: rgba(var(--rgb-bg-main), 0.7);
    opacity: 1;
    pointer-events: auto;
}
body.changelog-modal-open::before { /* NEW */
    background-color: rgba(var(--rgb-bg-main), 0.75); /* Slightly darker for modal */
    opacity: 1;
    pointer-events: auto;
}


/* --- HEADER THEMED STYLES --- */
#app-header {
    background-color: var(--bg-elements);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    /* REMOVED: backdrop-filter transition, as it's part of general element transition for theme changes */
    /* transition: backdrop-filter var(--transition-speed-normal) ease; */
}
#app-header.scrolled {
    box-shadow: 0 2px 8px var(--shadow-color); /* Default scrolled shadow */
}

/* Animated navbar glow for specific themes */
@keyframes breathing-navbar-glow {
    0%, 100% {
        box-shadow: 0 1px 3px var(--accent-primary-faded-more),
                    0 0 5px var(--accent-primary-faded-less),
                    0 0 8px var(--accent-primary-faded-even-less),
                    var(--shadow-sm);
    }
    50% {
        box-shadow: 0 2px 6px var(--accent-primary-faded-less),
                    0 0 10px var(--accent-primary-faded-even-less),
                    0 0 20px var(--accent-primary-faded-most),
                    var(--shadow-sm);
    }
}

.theme-cyber-twilight-glow #app-header,
.theme-midnight-circuit-pulse #app-header {
    --accent-primary-faded-most: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    --accent-primary-faded-even-less: color-mix(in srgb, var(--accent-primary) 25%, transparent);
    --accent-primary-faded-less: color-mix(in srgb, var(--accent-primary) 35%, transparent);
    --accent-primary-faded-more: color-mix(in srgb, var(--accent-primary) 50%, transparent);
    border-bottom-color: var(--accent-primary-faded-less);
    animation: breathing-navbar-glow 6s ease-in-out infinite alternate;
}
.theme-cyber-twilight-glow #app-header.scrolled,
.theme-midnight-circuit-pulse #app-header.scrolled {
     box-shadow: 0 2px 8px var(--shadow-color),
                 0 1px 5px var(--accent-primary-faded-less);
    animation: breathing-navbar-glow 6s ease-in-out infinite alternate;
}


#site-title-main { color: var(--text-primary); }
.site-title-wrapper.clickable-title #site-title-main:hover,
.site-title-wrapper.clickable-title #site-title-main:focus { color: var(--accent-primary); }
.site-title-wrapper.clickable-title::after { color: var(--text-secondary); }
.site-title-wrapper.clickable-title[aria-expanded="true"]::after,
.site-title-wrapper.clickable-title:hover::after { color: var(--accent-primary); }

.copyright-notice { color: var(--text-secondary); } /* Themed text color */
.copyright-notice a { color: var(--text-secondary); }
.copyright-notice a:hover { color: var(--accent-primary); text-decoration: underline; }

#custom-doc-dropdown {
    background-color: var(--bg-elements);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    /* REMOVED: backdrop-filter transition; open/close animation is in base.css */
}
/* #custom-doc-list styling handled by unified .custom-dropdown-menu rules below */


select {
    color: var(--text-primary);
    background-color: var(--bg-elements);
    border: 1px solid var(--border);
}
/* SVG arrow color adjustments for specific themes */
body.theme-dark select, body.theme-sunset select, body.theme-empire select,
body.theme-neon-frostbite select, body.theme-cyber-twilight-glow select,
body.theme-midnight-circuit-pulse select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
body.theme-crystal-coral-reef select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='var(--text-primary-crystal-coral-reef)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
body.theme-sands-of-serenity select, body.theme-moonlit-marble select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='var(--text-primary)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}


.theme-toggle-button .theme-icon { color: var(--accent-primary); }
/* Contrast fixes for theme toggle icon on hover for specific themes */
.theme-neon-frostbite .theme-toggle-button:hover .theme-icon,
.theme-cyber-twilight-glow .theme-toggle-button:hover .theme-icon,
.theme-midnight-circuit-pulse .theme-toggle-button:hover .theme-icon {
    color: #000000 !important;
}


/* --- SIDEBAR THEMED STYLES --- */
#sidebar {
    background-color: var(--bg-elements);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    /* REMOVED backdrop-filter transition from here; sidebar sliding transition in base.css */
}

.sidebar-header {
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-elements);
    /* REMOVED backdrop-filter transition */
}
.sidebar-header h3 { color: var(--text-primary); }
.toc-settings-toggle .material-symbols-outlined { color: var(--text-secondary); }
.toc-settings-toggle:hover .material-symbols-outlined { color: var(--accent-primary); }

#toc-list li a { color: var(--text-secondary); }
#toc-list li a:hover { color: var(--text-primary); background-color: var(--bg-hover); text-decoration: none; }
#toc-list li a.active {
    color: var(--accent-primary);
    background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    font-weight: 600;
}

.toc-item-toggle { color: var(--text-secondary); }
.toc-item-toggle:hover, #toc-list li a:hover .toc-item-toggle { color: var(--accent-primary); }
#toc-list li a.active .toc-item-toggle { color: var(--accent-primary); }
.toc-icon-default { color: var(--text-secondary); opacity: 0.6; }
#toc-list li a.active .toc-icon-default { color: var(--accent-primary); opacity: 0.8; }

.toc-loading, .toc-error, .toc-empty, .toc-disabled { color: var(--text-secondary); }
.toc-error { color: var(--accent-primary); }

#toc-settings-panel {
    background-color: var(--bg-subsection);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    /* REMOVED backdrop-filter transition; open/close animation handled by base.css */
}
#toc-settings-panel h4 { color: var(--text-primary); border-bottom: 1px solid var(--border); }
.setting-group label { color: var(--text-secondary); }


/* --- BUTTONS THEMED STYLES (Using new specific vars) --- */
.button-modern {
    color: var(--button-text) !important;
    background-color: var(--button-bg) !important;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 1px var(--shadow-color);
    /* REMOVED backdrop-filter transition, general transitions in base.css cover appearance */
}
.button-modern .material-symbols-outlined { color: inherit; }

.button-modern:hover:not(:disabled) {
    background-color: var(--button-hover-bg) !important;
    color: var(--button-hover-text) !important;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}
.button-modern:active:not(:disabled) {
    background-color: color-mix(in srgb, var(--button-bg) 85%, black 15%) !important;
    box-shadow: inset 0 2px 3px var(--shadow-color);
}
.button-modern:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-primary) 50%, transparent);
    outline-offset: 2px;
}
.button-modern.disabled, .button-modern:disabled {
    color: var(--text-secondary);
    background-color: var(--bg-elements);
    border-color: var(--border);
    opacity: 0.7;
}

.button-modern.icon-only .material-symbols-outlined { color: var(--accent-primary); }
.floating-sidebar-toggle .material-symbols-outlined { color: var(--accent-primary); }

.theme-neon-frostbite .button-modern.icon-only:hover:not(:disabled) .material-symbols-outlined,
.theme-cyber-twilight-glow .button-modern.icon-only:hover:not(:disabled) .material-symbols-outlined,
.theme-midnight-circuit-pulse .button-modern.icon-only:hover:not(:disabled) .material-symbols-outlined {
    color: #000000 !important;
}


.button-modern.secondary {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
    border-color: var(--border);
}
.button-modern.secondary:hover:not(:disabled) {
    background-color: var(--bg-active);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* --- UNIFIED DROPDOWN MENU STYLING (THEMED PART) --- */
.custom-dropdown-menu {
    background-color: var(--bg-elements);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    /* REMOVED transition here. Open/close animation is in base.css.
       Theme-related property changes (bg, border, shadow) will transition if those properties
       have their own transitions or inherit from a global transition. */
}

.custom-dropdown-menu li button:not(:disabled) {
    color: var(--text-primary);
}

.custom-dropdown-menu li button:hover:not(:disabled),
.custom-dropdown-menu li button:focus-visible:not(:disabled),
.custom-dropdown-menu li button[aria-current="true"]:not(:disabled),
.custom-dropdown-menu li button.active-theme-in-dropdown:not(:disabled), /* For theme switcher active item */
#custom-doc-list li.active-doc button:not(:disabled) { /* For doc switcher active item */
    background-color: var(--accent-primary);
    color: var(--accent-contrast-text); /* KEY CHANGE for contrast */
}

.custom-dropdown-menu li button:disabled {
    color: var(--text-secondary);
    opacity: 0.7;
    background-color: transparent; /* Ensure no active background on disabled items */
}
/* --- END UNIFIED DROPDOWN MENU STYLING --- */


/* --- MAIN CONTENT THEMED STYLES --- */
.content-section {
    background-color: var(--bg-section);
    box-shadow: var(--shadow-sm);
    /* REMOVED backdrop-filter transition */
}
.section-title { color: var(--text-primary); border-bottom: 1px solid var(--border); }
.section-title::before { background-color: var(--accent-primary); }

.subsection-block {
    background-color: var(--bg-subsection);
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--shadow-color) 50%, transparent);
    /* REMOVED backdrop-filter transition */
}
.subsection-title { color: var(--text-primary); border-bottom: 1px dashed var(--border); }

.content-column h3:not(.subsection-title), .content-column .subsection-block h3:not(.subsection-title),
.content-column h4, .content-column .subsection-block h4,
.content-column h5, .content-column .subsection-block h5,
.content-column h6, .content-column .subsection-block h6 {
    color: var(--text-primary);
}
.theme-neon-frostbite .content-column h1, .theme-neon-frostbite .content-column h2, .theme-neon-frostbite .content-column h3,
.theme-neon-frostbite .content-column h4, .theme-neon-frostbite .content-column h5, .theme-neon-frostbite .content-column h6,
.theme-neon-frostbite .section-title, .theme-neon-frostbite .subsection-title {
    background: linear-gradient(90deg, var(--accent-primary-neon-frostbite), var(--accent-highlight-neon-frostbite));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


.content-column h3:not(.subsection-title), .content-column .subsection-block h3:not(.subsection-title),
.content-column h4, .content-column .subsection-block h4 {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.content-column p, .content-column .subsection-block p,
.content-column li, .content-column .subsection-block li { color: var(--text-primary); }
.content-column strong, .content-column .subsection-block strong { color: var(--text-primary); }
.content-column li > strong:first-child, .content-column .subsection-block li > strong:first-child,
.content-column li > p:first-child > strong:first-child,
.content-column .subsection-block li > p:first-child > strong:first-child {
    color: var(--accent-primary);
}
.content-column em, .content-column .subsection-block em { color: var(--text-secondary); }

.content-column ul > li::before, .content-column .subsection-block ul > li::before,
.content-column li ul > li::before, .content-column .subsection-block li ul > li::before,
.content-column li ul ul > li::before, .content-column .subsection-block li ul ul > li::before,
.content-column ol > li::before, .content-column .subsection-block ol > li::before {
    color: var(--text-secondary);
}

/* --- START: BLOCKQUOTE STYLING (NEW SYSTEM) --- */
.content-column blockquote, .content-column .subsection-block blockquote {
    border-left: 4px solid var(--blockquote-border-default, var(--accent-primary));
    background-color: var(--blockquote-bg-default, var(--bg-hover));
    color: var(--blockquote-text-default, var(--text-secondary));
    border-radius: var(--border-radius-md);
}
.content-column blockquote p, .content-column .subsection-block blockquote p { color: inherit; }

.blockquote-header {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    margin-bottom: 0.5em;
    color: var(--blockquote-header-text-color, var(--text-secondary));
    display: flex;
    align-items: center;
}

.blockquote-note {
    border-left-color: var(--blockquote-accent-note);
    background-color: var(--blockquote-bg-note);
    color: var(--blockquote-text-note);
}
.blockquote-note .blockquote-header { color: var(--blockquote-accent-note); }
.blockquote-note .blockquote-header::before { content: "ℹ️"; margin-right: 0.5em; font-size: 1.1em; }

.blockquote-danger {
    border-left-color: var(--blockquote-accent-danger);
    background-color: var(--blockquote-bg-danger);
    color: var(--blockquote-text-danger);
}
.blockquote-danger .blockquote-header { color: var(--blockquote-accent-danger); }
.blockquote-danger .blockquote-header::before { content: "⚠️"; margin-right: 0.5em; font-size: 1.1em; }

.blockquote-reminder {
    border-left-color: var(--blockquote-accent-reminder);
    background-color: var(--blockquote-bg-reminder);
    color: var(--blockquote-text-reminder);
}
.blockquote-reminder .blockquote-header { color: var(--blockquote-accent-reminder); }
.blockquote-reminder .blockquote-header::before { content: "🔔"; margin-right: 0.5em; font-size: 1.1em; }

.blockquote-quote {
    border-left-color: var(--blockquote-accent-quote);
    background-color: var(--blockquote-bg-quote);
    color: var(--blockquote-text-quote);
    font-style: italic;
}
.blockquote-quote .blockquote-header { color: var(--blockquote-accent-quote); text-align: right; }
.blockquote-quote .blockquote-header::before { content: "❝"; margin-right: 0.5em; font-size: 1.5em; line-height: 0; }

.blockquote-info {
    border-left-color: var(--blockquote-accent-info);
    background-color: var(--blockquote-bg-info);
    color: var(--blockquote-text-info);
}
.blockquote-info .blockquote-header { color: var(--blockquote-accent-info); }
.blockquote-info .blockquote-header::before { content: "💡"; margin-right: 0.5em; font-size: 1.1em; }

.blockquote-news {
    border-left-color: var(--blockquote-accent-news);
    background-color: var(--blockquote-bg-news);
    color: var(--blockquote-text-news);
}
.blockquote-news .blockquote-header { color: var(--blockquote-accent-news); }
.blockquote-news .blockquote-header::before { content: "📰"; margin-right: 0.5em; font-size: 1.1em; }
/* --- END: BLOCKQUOTE STYLING (NEW SYSTEM) --- */


.content-column pre, .content-column .subsection-block pre {
    background-color: color-mix(in srgb, var(--bg-elements) 92%, black) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
body.theme-light .content-column pre, body.theme-republic .content-column pre,
body.theme-sands-of-serenity .content-column pre, body.theme-moonlit-marble .content-column pre,
body.theme-crystal-coral-reef .content-column pre {
    background-color: color-mix(in srgb, var(--bg-elements) 95%, var(--text-primary) 3%) !important;
    color: var(--text-primary) !important;
}

.inline-code {
    color: var(--accent-primary);
    background-color: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
body.theme-light .inline-code, body.theme-republic .inline-code,
body.theme-sands-of-serenity .inline-code, body.theme-moonlit-marble .inline-code,
body.theme-crystal-coral-reef .inline-code {
    color: color-mix(in srgb, var(--accent-primary) 90%, var(--text-primary));
    background-color: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-main) 10%);
    border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
}


.content-column hr, .content-column .subsection-block hr { border-top: 1px solid var(--border); }

.content-column th, .content-column td, .content-column .subsection-block th, .content-column .subsection-block td {
    border: 1px solid var(--table-border);
}
.content-column th, .content-column .subsection-block th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.toc-loading, .toc-error, .toc-empty, .toc-disabled,
.content-loading, .content-error-message { color: var(--text-secondary); }
p.content-error-message, .toc-error { color: var(--accent-primary); }


/* --- NEW: Image Styling (.image-with-caption system) --- */
.image-with-caption {
    display: block;
    margin-bottom: 1.5em;
    padding: var(--image-figure-padding, var(--spacing-sm));
    box-sizing: border-box;
    background-color: var(--image-figure-bg, var(--bg-section));
    border: 1px solid var(--image-figure-border-color, var(--border));
    border-radius: var(--image-figure-radius, var(--border-radius-md));
    overflow: hidden;
}
.image-with-caption img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
.image-caption {
    font-size: 0.85em;
    color: var(--image-figure-caption-text-color, var(--text-secondary));
    margin-top: 0.8em;
    text-align: center;
}

.image-with-caption.align-left { float: left; clear: left; }
.image-with-caption.align-right { float: right; clear: right; }
.image-with-caption.align-center { display: block; margin-left: auto; margin-right: auto; clear: both; }
.image-with-caption.align-block { display: block; width: 100%; clear: both; margin-left: 0; margin-right: 0; }

.image-with-caption.shadow-sm { box-shadow: var(--shadow-sm); }
.image-with-caption.shadow-md { box-shadow: var(--shadow-md); }
.image-with-caption.shadow-lg { box-shadow: var(--shadow-lg); }
.image-with-caption.shadow-drop { filter: drop-shadow(5px 5px 10px var(--shadow-color)); }

.image-with-caption.radius-5 { border-radius: 5px; }
.image-with-caption.radius-8 { border-radius: 8px; }
.image-with-caption.radius-10 { border-radius: 10px; }
.image-with-caption.radius-circle { border-radius: 50%; overflow: hidden; }

.image-with-caption.caption-position-above { display: flex; flex-direction: column; align-items: center; }
.image-with-caption.caption-position-above .image-caption { margin-top: 0; margin-bottom: 0.8em; }
.image-with-caption.flex-caption-layout { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.image-with-caption.flex-caption-layout .image-container { flex-shrink: 0; }
.image-with-caption.flex-caption-layout .image-caption { flex-grow: 1; text-align: left; margin: 0; }
.image-with-caption.figure-styled { 
    background-color: var(--image-figure-bg);
    border: 1px solid var(--image-figure-border-color);
}
.image-with-caption.figure-styled-subtle-border {
     background-color: var(--image-figure-bg);
     border: 1px solid color-mix(in srgb, var(--image-figure-border-color) 50%, transparent);
}
.image-with-caption.figure-promo-card-look {
    background-color: var(--bg-elements);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.image-with-caption.hero-image-styling {
    background-color: var(--bg-main);
    border: none;
}
.image-with-caption.figure-gallery-thumb-look {
    background-color: var(--bg-elements);
    border: 1px solid var(--border);
    padding: 5px;
}
.image-with-caption.figure-no-bg-border {
    background-color: transparent;
    border: none;
    padding: 0 !important;
}
.image-with-caption.figure-no-bg-border.align-left[style*="vertical-align"] {
    display: inline-block;
    float: none;
    margin-bottom: 0;
}
.image-with-caption.figure-simple-bg {
     background-color: var(--image-figure-bg);
}
.image-with-caption.figure-neumorphic-preset-look {
    border-radius: var(--neumorphic-border-radius);
    background-color: var(--bg-elements);
    box-shadow: var(--neumorphic-shadow-offset) var(--neumorphic-shadow-offset) var(--neumorphic-shadow-blur) var(--neumorphic-dark-shadow),
                calc(-1 * var(--neumorphic-shadow-offset)) calc(-1 * var(--neumorphic-shadow-offset)) var(--neumorphic-shadow-blur) var(--neumorphic-light-shadow);
    border: none !important;
}
.image-with-caption.figure-glassy-preset-look {
    background-color: var(--bg-elements) !important;
    -webkit-backdrop-filter: blur(var(--glassmorphic-blur));
    backdrop-filter: blur(var(--glassmorphic-blur));
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--glassmorphic-border-radius);
}
/* --- END: NEW Image Styling --- */


/* --- MODAL, COOKIE, VPI, SCROLLBAR, TOAST Styles --- */
.modal-overlay { background-color: rgba(var(--rgb-bg-main), 0.75); }
.modal-content {
    background-color: var(--bg-elements);
    box-shadow: var(--shadow-lg);
    /* REMOVED backdrop-filter transition */
}
#cookie-consent-banner {
    background-color: var(--bg-elements);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    /* REMOVED backdrop-filter transition */
}

#current-chapter-info {
    background-color: var(--current-chapter-info-bg);
    color: var(--current-chapter-info-text);
    box-shadow: var(--shadow-sm);
    /* REMOVED backdrop-filter transition */
}
#vertical-progress-track { background-color: var(--vertical-progress-track-color); }
#vertical-progress-bar { background-color: var(--accent-primary); }
.vertical-progress-indicator { background-color: var(--vertical-progress-indicator-color-default); }
.vertical-progress-indicator.active { background-color: var(--vertical-progress-indicator-color-active); }

#scroll-resume-toast {
    background-color: var(--bg-elements);
    color: var(--text-primary);
    /* REMOVED backdrop-filter transition */
}

::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); }
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-color); }
#sidebar .sidebar-content-wrapper::-webkit-scrollbar-thumb,
#custom-doc-list::-webkit-scrollbar-thumb,
.custom-dropdown-menu ul::-webkit-scrollbar-thumb,
#toc-settings-panel::-webkit-scrollbar-thumb,
.changelog-entries-area::-webkit-scrollbar-thumb /* NEW */
{ background-color: var(--scrollbar-thumb-color); }
#sidebar .sidebar-content-wrapper::-webkit-scrollbar-thumb:hover,
#custom-doc-list::-webkit-scrollbar-thumb:hover,
.custom-dropdown-menu ul::-webkit-scrollbar-thumb:hover,
#toc-settings-panel::-webkit-scrollbar-thumb:hover,
.changelog-entries-area::-webkit-scrollbar-thumb:hover /* NEW */
{ background-color: var(--scrollbar-thumb-hover-color); }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--bg-main); }
#sidebar .sidebar-content-wrapper, #custom-doc-list, .custom-dropdown-menu ul, #toc-settings-panel,
.changelog-entries-area /* NEW */
{
    scrollbar-color: var(--scrollbar-thumb-color) var(--bg-elements);
}


/* NEW: Changelog Modal Themed Styles */
#changelog-modal .changelog-modal-content {
    background-color: var(--bg-elements);
    box-shadow: var(--shadow-lg);
    /* Ensure backdrop-filter is applied if theme is glassmorphic, otherwise keep it clean */
}
#changelog-modal .changelog-header {
    background-color: var(--bg-elements);
    border-bottom-color: var(--border);
}
#changelog-modal .changelog-header h2 {
    color: var(--text-primary);
}
#changelog-modal .changelog-loading,
#changelog-modal .changelog-error {
    color: var(--changelog-loading-color);
}
#changelog-modal .changelog-error {
    color: var(--changelog-error-color);
}
#changelog-modal .changelog-introduction {
    background-color: var(--changelog-intro-bg);
    border-left-color: var(--changelog-intro-border);
    color: var(--changelog-intro-text);
}
#changelog-modal .changelog-introduction strong,
#changelog-modal .changelog-introduction b {
    color: var(--changelog-intro-text); /* or a slightly darker/lighter variant if needed */
}
#changelog-modal .changelog-entry {
    border-bottom-color: var(--changelog-entry-border);
}
#changelog-modal .changelog-version {
    color: var(--changelog-entry-title-color);
}
#changelog-modal .changelog-date {
    color: var(--changelog-entry-date-color);
}
#changelog-modal .changelog-changes-list li {
    color: var(--changelog-entry-text-color);
}
#changelog-modal .changelog-changes-list li::before {
    color: var(--changelog-bullet-color);
}
#changelog-modal .changelog-changes-list li strong,
#changelog-modal .changelog-changes-list li b {
    color: var(--changelog-entry-text-color); /* or a slightly darker/lighter variant if needed */
}


/* ---====================================--- */
/* --- SPECIFIC VISUAL STYLE EXTENSIONS --- */
/* ---====================================--- */

@keyframes neon-flicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 2px var(--accent-primary), 0 0 5px var(--accent-primary), 0 0 8px var(--accent-secondary); }
    50% { opacity: 0.9; text-shadow: 0 0 1px var(--accent-primary), 0 0 3px var(--accent-primary), 0 0 5px var(--accent-secondary); }
}
@keyframes neon-border-glow {
    0%, 100% { box-shadow: 0 0 3px var(--accent-primary), inset 0 0 2px var(--accent-primary), 0 0 1px var(--accent-secondary); }
    50% { box-shadow: 0 0 6px var(--accent-primary), inset 0 0 3px var(--accent-primary), 0 0 3px var(--accent-secondary); }
}
@keyframes subtle-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 4px color-mix(in srgb, var(--accent-primary) 60%, transparent), 0 0 8px color-mix(in srgb, var(--accent-secondary) 40%, transparent), inset 0 0 2px color-mix(in srgb, var(--accent-primary) 40%, transparent); }
  50% { transform: scale(1.01); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 80%, transparent), 0 0 15px color-mix(in srgb, var(--accent-secondary) 60%, transparent), inset 0 0 4px color-mix(in srgb, var(--accent-primary) 60%, transparent); }
}


/* --- 1. NEUMORPHISM STYLES --- */
.theme-sands-of-serenity, .theme-moonlit-marble {
    --neumorphic-shadow-offset: var(--neumorphic-shadow-offset-sands-of-serenity);
    --neumorphic-shadow-blur: var(--neumorphic-shadow-blur-sands-of-serenity);
}
body.theme-moonlit-marble {
    --neumorphic-shadow-offset: var(--neumorphic-shadow-offset-moonlit-marble);
    --neumorphic-shadow-blur: var(--neumorphic-shadow-blur-moonlit-marble);
}
@media (max-width: 768px) {
    .theme-sands-of-serenity, .theme-moonlit-marble {
        --neumorphic-shadow-offset: calc(var(--neumorphic-shadow-offset) * 0.6);
        --neumorphic-shadow-blur: calc(var(--neumorphic-shadow-blur) * 0.6);
    }
}
.theme-sands-of-serenity #app-header, .theme-moonlit-marble #app-header,
.theme-sands-of-serenity #sidebar, .theme-moonlit-marble #sidebar,
.theme-sands-of-serenity .button-modern, .theme-moonlit-marble .button-modern,
.theme-sands-of-serenity .content-section, .theme-moonlit-marble .content-section,
.theme-sands-of-serenity .subsection-block, .theme-moonlit-marble .subsection-block,
.theme-sands-of-serenity .custom-dropdown-menu, .theme-moonlit-marble .custom-dropdown-menu,
.theme-sands-of-serenity .modal-content, .theme-moonlit-marble .modal-content,
.theme-sands-of-serenity #cookie-consent-banner, .theme-moonlit-marble #cookie-consent-banner,
.theme-sands-of-serenity #current-chapter-info, .theme-moonlit-marble #current-chapter-info,
.theme-sands-of-serenity #scroll-resume-toast, .theme-moonlit-marble #scroll-resume-toast,
.theme-sands-of-serenity #toc-settings-panel, .theme-moonlit-marble #toc-settings-panel,
.theme-sands-of-serenity select, .theme-moonlit-marble select,
.theme-sands-of-serenity .image-with-caption, .theme-moonlit-marble .image-with-caption,
.theme-sands-of-serenity .content-column blockquote, .theme-moonlit-marble .content-column blockquote,
.theme-sands-of-serenity .changelog-modal-content, .theme-moonlit-marble .changelog-modal-content /* NEW */
{
    border-radius: var(--neumorphic-border-radius);
    border-color: transparent !important;
    background-color: var(--bg-elements);
    box-shadow: var(--neumorphic-shadow-offset) var(--neumorphic-shadow-offset) var(--neumorphic-shadow-blur) var(--neumorphic-dark-shadow),
                calc(-1 * var(--neumorphic-shadow-offset)) calc(-1 * var(--neumorphic-shadow-offset)) var(--neumorphic-shadow-blur) var(--neumorphic-light-shadow);
}
.theme-sands-of-serenity .button-modern:active:not(:disabled),
.theme-moonlit-marble .button-modern:active:not(:disabled),
.theme-sands-of-serenity select:active, .theme-moonlit-marble select:active
 {
    box-shadow: inset var(--neumorphic-shadow-offset) var(--neumorphic-shadow-offset) var(--neumorphic-shadow-blur) var(--neumorphic-dark-shadow),
                inset calc(-1 * var(--neumorphic-shadow-offset)) calc(-1 * var(--neumorphic-shadow-offset)) var(--neumorphic-shadow-blur) var(--neumorphic-light-shadow);
    transform: none;
}
.theme-sands-of-serenity .button-modern:hover:not(:disabled),
.theme-moonlit-marble .button-modern:hover:not(:disabled) {
    background-color: var(--button-hover-bg) !important;
    color: var(--button-hover-text) !important;
    transform: translateY(-1px);
    box-shadow: calc(var(--neumorphic-shadow-offset) + 2px) calc(var(--neumorphic-shadow-offset) + 2px) calc(var(--neumorphic-shadow-blur) + 4px) var(--neumorphic-dark-shadow),
                calc(-1 * (var(--neumorphic-shadow-offset) + 2px)) calc(-1 * (var(--neumorphic-shadow-offset) + 2px)) calc(var(--neumorphic-shadow-blur) + 4px) var(--neumorphic-light-shadow);
}


/* --- 2. GLASSMORPHISM STYLES --- */
.theme-crystal-coral-reef, .theme-neon-frostbite {
    --glassmorphic-blur: var(--glassmorphic-blur-crystal-coral-reef);
}
.theme-neon-frostbite { --glassmorphic-blur: var(--glassmorphic-blur-neon-frostbite); }

.theme-crystal-coral-reef #app-header, .theme-neon-frostbite #app-header,
.theme-crystal-coral-reef #sidebar, .theme-neon-frostbite #sidebar,
.theme-crystal-coral-reef .custom-dropdown-menu, .theme-neon-frostbite .custom-dropdown-menu,
.theme-crystal-coral-reef .modal-content, .theme-neon-frostbite .modal-content,
.theme-crystal-coral-reef #cookie-consent-banner, .theme-neon-frostbite #cookie-consent-banner,
.theme-crystal-coral-reef #current-chapter-info, .theme-neon-frostbite #current-chapter-info,
.theme-crystal-coral-reef #scroll-resume-toast, .theme-neon-frostbite #scroll-resume-toast,
.theme-crystal-coral-reef .button-modern, .theme-neon-frostbite .button-modern,
.theme-crystal-coral-reef #toc-settings-panel, .theme-neon-frostbite #toc-settings-panel,
.theme-crystal-coral-reef .image-with-caption, .theme-neon-frostbite .image-with-caption,
.theme-crystal-coral-reef .content-column blockquote, .theme-neon-frostbite .content-column blockquote,
.theme-crystal-coral-reef .changelog-modal-content, .theme-neon-frostbite .changelog-modal-content /* NEW */
{
    background-color: var(--bg-elements) !important;
    -webkit-backdrop-filter: blur(var(--glassmorphic-blur));
    backdrop-filter: blur(var(--glassmorphic-blur));
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--glassmorphic-border-radius);
}

.theme-neon-frostbite .button-modern:not(.icon-only) {
    background-color: var(--button-bg-neon-frostbite) !important;
    color: var(--button-text-neon-frostbite) !important;
    border: 1px solid var(--accent-primary-neon-frostbite) !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary-neon-frostbite) 50%, transparent) !important;
}
.theme-neon-frostbite .button-modern:not(.icon-only):hover:not(:disabled) {
    background-color: var(--button-hover-bg-neon-frostbite) !important;
    color: var(--button-hover-text-neon-frostbite) !important;
    border-color: var(--accent-secondary-neon-frostbite) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-secondary-neon-frostbite) 70%, transparent) !important;
}
.theme-neon-frostbite .button-modern.icon-only {
    background-color: var(--bg-elements-neon-frostbite) !important;
    border: 1px solid var(--accent-primary-neon-frostbite) !important;
}
.theme-neon-frostbite .button-modern.icon-only .material-symbols-outlined {
    color: var(--accent-primary-neon-frostbite) !important;
}
.theme-neon-frostbite .button-modern.icon-only:hover:not(:disabled) {
    background-color: var(--button-hover-bg-neon-frostbite) !important;
    border-color: var(--accent-secondary-neon-frostbite) !important;
}
.theme-neon-frostbite .button-modern.icon-only:hover:not(:disabled) .material-symbols-outlined {
    color: #000000 !important;
}


.theme-crystal-coral-reef .button-modern:hover:not(:disabled) {
    border-color: rgba(0, 131, 143, 0.2) !important;
}

.theme-crystal-coral-reef .content-section, .theme-neon-frostbite .content-section,
.theme-crystal-coral-reef .subsection-block, .theme-neon-frostbite .subsection-block
{
    background-color: var(--bg-section) !important;
    -webkit-backdrop-filter: blur(calc(var(--glassmorphic-blur) / 1.5));
    backdrop-filter: blur(calc(var(--glassmorphic-blur) / 1.5));
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--glassmorphic-border-radius);
}


/* --- 3. DARK MODE WITH NEON ACCENTS --- */
.theme-cyber-twilight-glow a, .theme-midnight-circuit-pulse a, .theme-neon-frostbite a,
.theme-cyber-twilight-glow .accent-text, .theme-midnight-circuit-pulse .accent-text, .theme-neon-frostbite .accent-text,
.theme-cyber-twilight-glow #toc-list li a.active, .theme-midnight-circuit-pulse #toc-list li a.active, .theme-neon-frostbite #toc-list li a.active,
.theme-cyber-twilight-glow .section-title::before, .theme-midnight-circuit-pulse .section-title::before, .theme-neon-frostbite .section-title::before,
.theme-cyber-twilight-glow .copyright-notice a, .theme-midnight-circuit-pulse .copyright-notice a, .theme-neon-frostbite .copyright-notice a,
.theme-cyber-twilight-glow .toc-settings-toggle:hover .material-symbols-outlined, .theme-midnight-circuit-pulse .toc-settings-toggle:hover .material-symbols-outlined, .theme-neon-frostbite .toc-settings-toggle:hover .material-symbols-outlined
{
    color: var(--accent-primary) !important;
    text-shadow: 0 0 3px var(--accent-primary), 0 0 6px var(--accent-primary), 0 0 9px var(--accent-secondary);
    animation: neon-flicker 4s infinite ease-in-out alternate;
}

.theme-cyber-twilight-glow .button-modern.icon-only .material-symbols-outlined,
.theme-midnight-circuit-pulse .button-modern.icon-only .material-symbols-outlined {
    color: var(--accent-primary) !important;
}
.theme-cyber-twilight-glow .button-modern.icon-only:hover:not(:disabled) .material-symbols-outlined,
.theme-midnight-circuit-pulse .button-modern.icon-only:hover:not(:disabled) .material-symbols-outlined {
    color: #000000 !important;
}


.theme-cyber-twilight-glow .button-modern:not(.secondary):not(:disabled),
.theme-midnight-circuit-pulse .button-modern:not(.secondary):not(:disabled) {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 5px color-mix(in srgb, var(--accent-primary) 70%, transparent),
                0 0 10px color-mix(in srgb, var(--accent-secondary) 50%, transparent),
                inset 0 0 3px color-mix(in srgb, var(--accent-primary) 50%, transparent) !important;
    animation: subtle-pulse 3s infinite ease-in-out;
}
.theme-cyber-twilight-glow .button-modern:not(.secondary):not(:disabled):hover {
    animation: neon-border-glow 1.5s infinite ease-in-out, subtle-pulse 3s infinite ease-in-out;
    text-shadow: 0 0 5px var(--button-hover-text), 0 0 10px var(--button-hover-text);
    border-color: var(--accent-secondary) !important;
}
.theme-midnight-circuit-pulse .button-modern:not(.secondary):not(:disabled) {
    background-color: transparent !important;
    color: var(--accent-primary-midnight-circuit-pulse) !important;
    border: 1px solid var(--accent-primary-midnight-circuit-pulse) !important;
    box-shadow: 0 0 8px var(--glow-highlight-midnight-circuit-pulse) !important;
}
.theme-midnight-circuit-pulse .button-modern:not(.secondary):not(:disabled):hover {
    background-color: var(--accent-primary-midnight-circuit-pulse) !important;
    color: var(--button-hover-text-midnight-circuit-pulse) !important;
    text-shadow: none;
}


.theme-cyber-twilight-glow .inline-code, .theme-midnight-circuit-pulse .inline-code,
.theme-neon-frostbite .inline-code {
    color: var(--accent-primary) !important;
    text-shadow: 0 0 2px var(--accent-primary), 0 0 4px var(--accent-secondary);
    animation: neon-flicker 5s infinite ease-in-out alternate;
    animation-delay: calc(var(--animation-order, 0) * 0.1s);
    background-color: color-mix(in srgb, var(--accent-primary) 5%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 15%, transparent) !important;
}

/* Checkbox Theming */
.styled-checkbox {
    border-color: var(--border);
    background-color: var(--bg-elements);
}
.styled-checkbox:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.styled-checkbox:checked::after {
    color: var(--accent-contrast-text); 
}

.styled-checkbox:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.styled-checkbox:disabled {
    opacity: 0.6;
    background-color: var(--bg-subsection);
}
.styled-checkbox:disabled:checked {
    background-color: color-mix(in srgb, var(--accent-primary) 50%, var(--bg-subsection));
    border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border));
}
.styled-checkbox:disabled + span {
    color: var(--text-secondary);
}
.checkbox-label {
    color: var(--text-primary);
}

/* Toast Notification Themed Styles */
.toast-notification {
    background-color: var(--bg-elements);
    color: var(--text-primary);
    /* REMOVED backdrop-filter transition */
}
.toast-message {
    color: var(--text-primary);
}
.button-text-only.toast-action {
    color: var(--accent-primary);
}
.button-text-only.toast-action:hover {
    color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary));
    text-decoration-color: var(--accent-primary);
}
.toast-dismiss.button-modern.icon-only .material-symbols-outlined {
    color: var(--text-secondary);
}
.toast-dismiss.button-modern.icon-only:hover .material-symbols-outlined {
    color: var(--accent-primary);
}
.toast-dismiss.button-modern.icon-only {
    background-color: var(--button-bg) !important;
    border-color: var(--border) !important;
}
.toast-dismiss.button-modern.icon-only:hover {
     background-color: var(--button-hover-bg) !important;
     border-color: var(--accent-primary) !important;
}


/* Divider for settings panel */
hr.settings-divider {
    border-top-color: var(--border);
}