:root {
    /* Brand-color tokens below (--primary-color, --primary-hover,
       --primary-light, --primary-text, --on-primary) are overridden per
       generated site in the inline <style> tag emitted by
       render_base_layout() in generate_site.py, computed by
       color_utils.build_theme_tokens() from the user's chosen brand color.
       The values here are just the fallback if that tag is ever missing. */
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    /* Safe foreground use of the brand color (icons, badges, active nav,
       inline code) - identical to --primary-color in light mode, but
       overridden to a lightened, contrast-checked variant in dark mode so
       darker brand colors stay readable on dark surfaces. */
    --primary-text: #4f46e5;
    /* Text/icon color to place on top of a solid --primary-color fill
       (buttons, active filter chips) - white for dark/medium brand colors,
       near-black for pale/bright ones, always contrast-checked. */
    --on-primary: #ffffff;
    --secondary-color: #0ea5e9;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #475569;
    --border-color: #e2e8f0;
    --header-bg: #ffffff;
    --footer-bg: #0f172a;
    --footer-text: #cbd5e1;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
    /* A neutral, slightly cool near-black rather than the previous
       navy-black - reads as a considered dark UI instead of tinted black. */
    --bg-color: #0a0e14;
    --card-bg: #141a24;
    --text-main: #eef1f6;
    --text-muted: #9aa5b8;
    --border-color: #262e3d;
    --header-bg: #10141d;
    --footer-bg: #05070b;
    --footer-text: #b7c0d1;
    --primary-light: #1e1b4b;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 10px -2px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 14px 26px -6px rgba(0,0,0,0.6), 0 4px 10px -4px rgba(0,0,0,0.45);
}

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

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Force Bootstrap text-muted to use theme variable for high contrast */
.text-muted {
    color: var(--text-muted) !important;
}

/* Navbar */
.site-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--primary-text) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.nav-link {
    font-weight: 500;
    color: var(--text-main) !important;
    transition: color 0.2s ease;
    padding: 0.5rem 0.85rem !important;
}

.nav-link:hover {
    color: var(--primary-text) !important;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-color) 100%);
    padding: 3.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 680px;
    margin: 0 auto 1.75rem auto;
}

.search-box-wrapper {
    max-width: 540px;
    margin: 0 auto;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 0.85rem 1.25rem 0.85rem 3rem;
    border-radius: 50px;
    border: 2px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--primary-text);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.search-icon {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.15rem;
}

/* Categories Filter Bar */
.category-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1.5rem 0 1rem 0;
}

.filter-btn {
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-main);
    padding: 0.45rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: var(--on-primary) !important;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* Tool Grid Cards */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.tool-grid-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.tool-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-text);
    color: var(--text-main);
}

.tool-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background-color: var(--primary-light);
    color: var(--primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.tool-grid-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tool-grid-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.tool-grid-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-text);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Tool Page Layout */
.tool-page-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 2.25rem 0;
    margin-bottom: 2rem;
}

.breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary-text);
}

.tool-page-title {
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.tool-page-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 800px;
}

/* Tool Interactive Card */
.tool-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2.5rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.stat-box {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-text);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
}

/* Memory Card Game */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    max-width: 380px;
    margin: 0 auto;
}

.memory-card {
    height: 75px;
    background-color: var(--primary-light);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    user-select: none;
}

.memory-card:hover {
    transform: scale(1.04);
}

.memory-card.flipped {
    background-color: #ffffff;
    border-color: var(--primary-text);
}

.memory-card.matched {
    background-color: #dcfce7;
    border-color: #22c55e;
    cursor: default;
}

/* Diff Viewer */
.diff-same {
    padding: 2px 6px;
    color: var(--text-main);
}
.diff-added {
    padding: 2px 6px;
    background-color: rgba(34, 197, 94, 0.15);
    border-left: 3px solid #22c55e;
}
.diff-removed {
    padding: 2px 6px;
    background-color: rgba(239, 68, 68, 0.15);
    border-left: 3px solid #ef4444;
}

/* Educational Guide & Article Layout */
.content-section {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-sm);
}

.content-section h2 {
    font-size: 1.65rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    letter-spacing: -0.015em;
}

.content-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.5rem 0 0.75rem 0;
}

.content-section p, .content-section ul, .content-section ol {
    margin-bottom: 1rem;
    color: var(--text-main);
    line-height: 1.75;
}

.content-section ul, .content-section ol {
    padding-left: 1.5rem;
}

.content-section code {
    background-color: var(--bg-color);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--primary-text);
}

/* FAQ Accordion */
.accordion-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

.accordion-button {
    font-weight: 700;
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-text) !important;
    box-shadow: none !important;
}

.accordion-body {
    color: var(--text-main) !important;
    line-height: 1.7;
}

/* ==========================================================================
   Brand Color <-> Bootstrap Alignment
   Bootstrap's own "primary" utilities/components (.btn-primary, .text-primary,
   .bg-primary, .form-check-input:checked, range sliders, etc.) ship with
   their own hardcoded blue and never see this site's brand color - every
   tool page uses these classes constantly (Calculate/Generate buttons, stat
   values, checkboxes), so without this block the chosen --primary-color has
   almost no visible effect. Re-point them at our own contrast-checked
   tokens instead of Bootstrap's literal hex values.
   ========================================================================== */
.btn-primary {
    --bs-btn-color: var(--on-primary);
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-text);
    --bs-btn-border-color: var(--primary-text);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-disabled-color: var(--primary-text);
    --bs-btn-disabled-border-color: var(--primary-text);
}

.text-primary { color: var(--primary-text) !important; }
.bg-primary,
.badge.bg-primary,
.progress-bar.bg-primary { background-color: var(--primary-color) !important; }
.badge.bg-primary { color: var(--on-primary) !important; }
.border-primary { border-color: var(--primary-text) !important; }
.bg-primary-subtle { background-color: var(--primary-light) !important; }
.link-primary { color: var(--primary-text) !important; }
.text-bg-primary { background-color: var(--primary-color) !important; color: var(--on-primary) !important; }

.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-text) !important;
    box-shadow: 0 0 0 0.25rem var(--primary-light) !important;
}

.form-range::-webkit-slider-thumb { background-color: var(--primary-color) !important; }
.form-range::-moz-range-thumb { background-color: var(--primary-color) !important; }

/* Ad Placement Placeholders (Google AdSense Compliant) */
.ad-slot-container {
    margin: 2rem 0;
    text-align: center;
}

.ad-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    display: block;
}

.ad-placeholder {
    background-color: var(--bg-color);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Toast Notifications */
.global-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #0f172a;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.global-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    color: var(--text-main);
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cookie-banner.active {
    display: flex;
}

/* Footer Styling with High Contrast */
.site-footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    padding: 3.5rem 0 1.5rem 0;
    margin-top: auto;
}

.site-footer h5 {
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.site-footer p, 
.site-footer .text-muted, 
.site-footer .small,
.site-footer span {
    color: #cbd5e1 !important;
    line-height: 1.6;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #94a3b8 !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff !important;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.5rem;
    margin-top: 2.5rem;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom span,
.footer-bottom a {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   Comprehensive Dark Mode Overrides (Inputs, Tables, Cards, Modals)
   Built from the theme variables (not separate hardcoded hex values) so
   every surface in dark mode shares one consistent, cohesive dark palette
   instead of a patchwork of different near-black tones.
   ========================================================================== */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--primary-text) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--card-bg) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .card.bg-light {
    background-color: #1a2130 !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-main) !important;
}

[data-theme="dark"] .breadcrumb a {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .breadcrumb a:hover {
    color: var(--primary-text) !important;
}

[data-theme="dark"] #mdPreview,
[data-theme="dark"] #diffResult {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .tool-page-header {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .tool-page-header .text-muted,
[data-theme="dark"] .tool-page-header span {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .alert-info {
    background-color: #13233f !important;
    color: #bfdbfe !important;
    border-color: #1e3a5f !important;
}

[data-theme="dark"] .alert-success {
    background-color: #0f2a1c !important;
    color: #bbf7d0 !important;
    border-color: #1b4430 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: #341418 !important;
    color: #fecaca !important;
    border-color: #5c2228 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.85rem;
    }
    .tool-page-title {
        font-size: 1.65rem;
    }
    .cookie-banner {
        flex-direction: column;
        text-align: center;
    }
    .cookie-banner .btn-group {
        width: 100%;
    }
}