/* Brand tokens, type scale and base elements live in theme.css (loaded first). */

/* Navigation */
.navbar {
    background-color: var(--color-background);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
}

.navbar-web {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 51, 102, 0.08);
    box-shadow: none;
}
.header-logo--on-dark { display: none; }

.navbar-web .nav-link-menu {
    color: #334155 !important;
    font-weight: 600;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
    padding-bottom: calc(0.5rem - 2px);
}
.navbar-web .nav-link-menu:hover {
    color: var(--color-primary) !important;
}
.navbar-web .nav-link-menu.nav-link-active {
    color: var(--color-primary) !important;
    font-weight: 700;
    border-bottom-color: var(--color-highlight);
}
.navbar-web .nav-cta {
    background: var(--ll-deep-blue);
    color: #ffffff !important;
    border-radius: 999px;
    padding: 0.55rem 1.15rem !important;
    margin-left: 0.35rem;
    border-bottom: 0;
    font-weight: 700;
}
.navbar-web .nav-cta:hover {
    background: var(--ll-sky-700);
    color: #ffffff !important;
}
.theme-toggle-icon {
    font-size: 1.1rem;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-logo {
    height: 100px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .navbar-logo {
        height: 40px;
    }

    .navbar-collapse {
        background-color: var(--color-background);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-top: 0.5rem;
    }

    /* Mobile: collapse panel has light bg, so links must be dark (override text-white) */
    .navbar-collapse .nav-link,
    .navbar-collapse .nav-link-menu,
    .navbar-collapse .text-white,
    .navbar-collapse .text-white-50 {
        color: var(--color-text-primary) !important;
    }
    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link-menu:hover {
        color: var(--color-primary) !important;
    }
    .navbar-collapse .nav-link-menu.nav-link-active {
        color: var(--color-primary) !important;
        font-weight: 700;
        border-bottom-color: var(--color-highlight);
    }
    .navbar-collapse .nav-cta,
    .navbar-collapse .nav-cta:hover {
        color: #ffffff !important;
        display: inline-block;
        margin-top: 0.5rem;
    }
    .navbar-collapse .nav-theme-toggle {
        color: var(--color-text-primary) !important;
    }
    .navbar-collapse .nav-theme-toggle:hover {
        color: var(--color-primary) !important;
    }

    .nav-item {
        margin: 0.5rem 0;
    }

    .nav-item.ms-2 {
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    .btn-primary {
        display: block;
        text-align: center;
    }
}

.nav-link {
    color: var(--color-text-primary);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

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

/* Hero Section */
.hero-banner {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-text-light);
    padding: 100px 0;
}

/* Cards */
.feature-card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background-color: var(--color-background);
}

.feature-card:hover {
    transform: translateY(-5px);
}

/* Footer */
footer {
    background-color: var(--color-background-alt);
    padding: 40px 0;
}
footer.site-footer {
    background: transparent;
    padding: 0;
    margin-top: 0;
}
.footer-body {
    background: var(--ll-deep-blue);
    color: #fff;
}
.footer-crest {
    position: relative;
    height: 220px;
    pointer-events: none;
}
.footer-crest-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 220px;
    display: block;
}
.footer-robot-track {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 18px;
    width: 150px;
    height: 176px;
    transform: translateX(-50%);
}
.footer-crest-robot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 50% 82%;
    animation: robotSway 6s ease-in-out infinite;
}
@keyframes robotSway {
    0%, 100% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2.5deg); }
}
.footer-float {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 10px 18px rgba(0, 51, 102, 0.16);
    animation: footerBob 5.5s ease-in-out infinite;
}
.footer-float-a { left: 10%; top: 28px; background: var(--ll-amber); color: var(--ll-deep-blue); animation-delay: 0s; }
.footer-float-b { left: 22%; top: 58px; background: var(--ll-sky); border-radius: 50%; animation-delay: 0.4s; }
.footer-float-c { right: 11%; top: 22px; background: var(--ll-coral); border-radius: 50%; animation-delay: 0.2s; }
.footer-float-d { right: 23%; top: 62px; background: var(--ll-purple); animation-delay: 0.7s; }
@keyframes footerBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-float, .footer-crest-robot { animation: none; }
}
@media (max-width: 767.98px) {
    .footer-crest, .footer-crest-shape { height: 168px; }
    .footer-robot-track { width: 112px; height: 132px; bottom: 0; }
    .footer-float { width: 40px; height: 40px; font-size: 1rem; }
    .footer-float-b, .footer-float-d { display: none; }
}

/* Buttons and color utilities: see theme.css */

/* Dark tokens: see theme.css */

/* Navbar: dark theme uses dark bar (override inline blue gradient) */
[data-bs-theme="dark"] .navbar.navbar-expand-lg.navbar-dark {
    background: linear-gradient(135deg, var(--ll-night-900) 0%, var(--ll-night-800) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .navbar-web {
    background: var(--ll-night-900) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .header-logo--color { display: none; }
[data-bs-theme="dark"] .header-logo--on-dark { display: block; }
[data-bs-theme="dark"] .navbar-web .nav-link-menu {
    color: rgba(255, 255, 255, 0.9) !important;
}
[data-bs-theme="dark"] .navbar-web .nav-link-menu:hover {
    color: #fff !important;
}
[data-bs-theme="dark"] .navbar-web .nav-link-menu.nav-link-active {
    color: #fff !important;
    font-weight: 700;
    border-bottom-color: var(--color-highlight);
}
[data-bs-theme="dark"] .navbar-web .nav-cta {
    background: var(--ll-sky);
    color: var(--ll-deep-blue) !important;
}
[data-bs-theme="dark"] .navbar-web .nav-cta:hover {
    background: var(--ll-teal);
    color: var(--ll-deep-blue) !important;
}
[data-bs-theme="dark"] .navbar-web .nav-theme-toggle {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="dark"] body {
    color: var(--color-text-primary);
    background-color: var(--color-background);
}



[data-bs-theme="dark"] footer.site-footer {
    background: transparent !important;
    border-top: 0;
    color: rgba(255,255,255,0.9) !important;
}
[data-bs-theme="dark"] .footer-body {
    background: var(--ll-night-900);
}
[data-bs-theme="dark"] #footerCrestEnd {
    stop-color: var(--ll-night-900);
}

[data-bs-theme="dark"] footer a:hover {
    color: rgba(255,255,255,0.95) !important;
}

[data-bs-theme="dark"] footer h5 {
    color: rgba(255,255,255,0.95) !important;
}

[data-bs-theme="dark"] footer p,
[data-bs-theme="dark"] footer .text-white-75,
[data-bs-theme="dark"] footer a {
    color: rgba(255,255,255,0.8) !important;
}

[data-bs-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

[data-bs-theme="dark"] .header-logo,
[data-bs-theme="dark"] .footer-logo {
    filter: none;
}

/* Page sections with inline light backgrounds - dark overrides */
[data-bs-theme="dark"] main section.search-section,
[data-bs-theme="dark"] .search-section {
    background: linear-gradient(to bottom, var(--ll-night-900) 0%, var(--ll-night-800) 100%) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4) !important;
}

[data-bs-theme="dark"] .search-title {
    background: var(--color-text-primary) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-bs-theme="dark"] .search-subtitle {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .search-header::after {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
}

[data-bs-theme="dark"] .search-input-wrapper {
    background: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}

[data-bs-theme="dark"] .search-input-wrapper:focus-within {
    border-color: rgba(74,139,194,0.5) !important;
}

[data-bs-theme="dark"] .search-input {
    color: var(--color-text-primary) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .search-input::placeholder {
    color: var(--color-text-secondary) !important;
    opacity: 0.8 !important;
}

[data-bs-theme="dark"] .search-input:focus {
    color: var(--color-text-primary) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .autocomplete-dropdown {
    background: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

[data-bs-theme="dark"] .autocomplete-item {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

[data-bs-theme="dark"] .autocomplete-item:hover,
[data-bs-theme="dark"] .autocomplete-item.highlight {
    background: rgba(74,139,194,0.15) !important;
}

[data-bs-theme="dark"] .autocomplete-word {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .autocomplete-translation {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .autocomplete-pronunciation {
    color: var(--ll-ink-400) !important;
}

[data-bs-theme="dark"] .dictionary-browse-section,
[data-bs-theme="dark"] section.py-5 {
    background: linear-gradient(135deg, var(--ll-night-800) 0%, var(--ll-night-900) 100%) !important;
}

[data-bs-theme="dark"] .dictionary-browse-section h2,
[data-bs-theme="dark"] .dictionary-browse-section .lead,
[data-bs-theme="dark"] .dictionary-feature-card h3,
[data-bs-theme="dark"] .dictionary-feature-card p {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .dictionary-feature-card {
    background: linear-gradient(135deg, var(--ll-night-800) 0%, var(--ll-night-900) 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}

[data-bs-theme="dark"] .feature-icon {
    color: var(--color-primary) !important;
}

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

/* Hero / page-hero: dark theme uses darker gradient to match overall dark mode */
[data-bs-theme="dark"] .hero-banner,
[data-bs-theme="dark"] .page-hero {
    background: linear-gradient(135deg, var(--ll-night-900) 0%, var(--ll-night-800) 50%, var(--ll-night-700) 100%) !important;
    color: var(--color-text-light) !important;
}

[data-bs-theme="dark"] .contact-section,
[data-bs-theme="dark"] .about-content section,
[data-bs-theme="dark"] .content-section {
    background-color: var(--color-background) !important;
    color: var(--color-text-primary) !important;
}

/* About / Contact / Privacy: cards and content */
[data-bs-theme="dark"] .section-card,
[data-bs-theme="dark"] .policy-card {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .contact-card {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--color-background) 100%) !important;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .section-card h2,
[data-bs-theme="dark"] .section-card p,
[data-bs-theme="dark"] .contact-card h2,
[data-bs-theme="dark"] .contact-card h5,
[data-bs-theme="dark"] .contact-card p,
[data-bs-theme="dark"] .policy-card h2,
[data-bs-theme="dark"] .policy-card p,
[data-bs-theme="dark"] .policy-card li {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .section-card p,
[data-bs-theme="dark"] .policy-card p {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .contact-card h2 i,
[data-bs-theme="dark"] .section-card h2 i {
    color: var(--color-primary) !important;
}

/* Last updated box: dark equivalent of blue gradient */
[data-bs-theme="dark"] .last-updated {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

[data-bs-theme="dark"] .last-updated strong {
    color: var(--color-text-primary) !important;
}

/* Dictionary filters: white -> dark */
[data-bs-theme="dark"] .dictionary-filters {
    background: var(--color-background-alt) !important;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .dictionary-filters .form-control,
[data-bs-theme="dark"] .dictionary-filters .form-select,
[data-bs-theme="dark"] .dictionary-filters label {
    color: var(--color-text-primary) !important;
}

/* Icons and headings: theme-aware */
[data-bs-theme="dark"] .contact-card i,
[data-bs-theme="dark"] .section-card i,
[data-bs-theme="dark"] .policy-card i,
[data-bs-theme="dark"] .feature-card i {
    color: var(--color-primary) !important;
}

[data-bs-theme="dark"] hr {
    border-color: rgba(255,255,255,0.12) !important;
    opacity: 1;
}

[data-bs-theme="dark"] .feature-card {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--color-background) 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

[data-bs-theme="dark"] .feature-card h3,
[data-bs-theme="dark"] .feature-card p {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .info-card {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Vocabulary lists page: card body (white) -> dark */
[data-bs-theme="dark"] .vocabulary-list-card {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

[data-bs-theme="dark"] .vocabulary-list-card-footer {
    background-color: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .vocabulary-list-card-footer a,
[data-bs-theme="dark"] .vocabulary-list-card .text-muted {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .vocabulary-list-card-footer a:hover {
    color: var(--color-primary) !important;
}

[data-bs-theme="dark"] .seo-description-box,
[data-bs-theme="dark"] .search-results-info {
    background: var(--color-background-alt) !important;
    border-color: rgba(74,139,194,0.4) !important;
    color: var(--color-text-primary) !important;
}

/* Vocabulary list detail: word cards and content area */
[data-bs-theme="dark"] .word-card {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .word-card-footer,
[data-bs-theme="dark"] .word-card .text-muted {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .word-link {
    color: var(--color-primary) !important;
}

[data-bs-theme="dark"] .word-link:hover {
    color: var(--color-primary-light) !important;
}

[data-bs-theme="dark"] .vocabulary-list-header {
    background: var(--color-background-alt) !important;
    color: white !important;
}

[data-bs-theme="dark"] main .py-3,
[data-bs-theme="dark"] main .py-2 {
    background-color: var(--color-background) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--color-background-alt) !important;
}

[data-bs-theme="dark"] main section {
    background-color: var(--color-background) !important;
}

[data-bs-theme="dark"] .vocabulary-lists-content,
[data-bs-theme="dark"] .vocabulary-list-detail-content {
    background-color: var(--color-background) !important;
}

[data-bs-theme="dark"] main section[style*="background"] {
    background: var(--color-background) !important;
}

[data-bs-theme="dark"] .card {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--color-primary) !important;
    background-color: var(--color-background-alt) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] label {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .lead,
[data-bs-theme="dark"] main p {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .display-5,
[data-bs-theme="dark"] .display-6,
[data-bs-theme="dark"] .display-2,
[data-bs-theme="dark"] .display-3-md,
[data-bs-theme="dark"] .display-4-sm {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] main .fs-4,
[data-bs-theme="dark"] main .fs-5-md,
[data-bs-theme="dark"] main .fs-6-sm {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] main section h1,
[data-bs-theme="dark"] main section h2,
[data-bs-theme="dark"] main section h3 {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] main section [style*="color: var(--ll-deep-blue)"],
[data-bs-theme="dark"] main section [style*="color:var(--ll-deep-blue)"] {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] main section [style*="color: var(--ll-ink-600)"],
[data-bs-theme="dark"] main section [style*="color:var(--ll-ink-600)"] {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .app-install-banner,
[data-bs-theme="dark"] [class*="app-install"] {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .app-install-banner h3,
[data-bs-theme="dark"] .app-install-banner .fw-bold {
    color: var(--color-text-light) !important;
}

[data-bs-theme="dark"] .app-install-banner p {
    color: rgba(255,255,255,0.9) !important;
}

[data-bs-theme="dark"] .app-install-banner i {
    color: rgba(255,255,255,0.95) !important;
}

[data-bs-theme="dark"] .qr-code-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

[data-bs-theme="dark"] .qr-code-item p {
    color: var(--color-text-light) !important;
}

[data-bs-theme="dark"] .nav-theme-toggle:hover {
    color: rgba(255,255,255,0.9) !important;
}

[data-bs-theme="dark"] .dictionary-header {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

[data-bs-theme="dark"] .dictionary-header h1,
[data-bs-theme="dark"] .dictionary-header p {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .breadcrumb-nav,
[data-bs-theme="dark"] .breadcrumb-link,
[data-bs-theme="dark"] .breadcrumb-current {
    color: var(--color-text-secondary) !important;
}

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

[data-bs-theme="dark"] .filter-search-wrapper {
    background: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

[data-bs-theme="dark"] .filter-search-input {
    background: var(--color-background-alt) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

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

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.03) !important;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(74,139,194,0.12) !important;
}

[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: rgba(74,139,194,0.2) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

/* Filter select (vocabulary-lists) - dark background */
[data-bs-theme="dark"] .filter-select {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .filter-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(74,139,194,0.2) !important;
}
[data-bs-theme="dark"] .filter-label {
    color: var(--color-text-primary) !important;
}

/* Vocabulary list card header - theme in dark (not blue) */
[data-bs-theme="dark"] .vocabulary-list-card-header {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
[data-bs-theme="dark"] .vocabulary-list-card-header .vocabulary-list-title,
[data-bs-theme="dark"] .vocabulary-list-card-header .vocabulary-list-translation {
    color: var(--color-text-primary) !important;
    text-shadow: none !important;
}
[data-bs-theme="dark"] .vocabulary-list-card-header .vocabulary-list-icon-header {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: var(--color-text-primary) !important;
}

/* Word card header (dictionary / vocabulary list detail) - same as vocabulary list header in dark */
[data-bs-theme="dark"] .word-card-header {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
[data-bs-theme="dark"] .word-card-header::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 100%) !important;
}
[data-bs-theme="dark"] .word-card-header .word-title,
[data-bs-theme="dark"] .word-card-header .word-translation {
    color: var(--color-text-primary) !important;
    text-shadow: none !important;
}
[data-bs-theme="dark"] .word-card-header .word-index-badge {
    background: rgba(255,255,255,0.15) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
[data-bs-theme="dark"] .word-card-header .btn-speak-word-dict {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .word-card-header .btn-speak-word-dict:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.4) !important;
}

/* Word detail / search page - dark overrides */
[data-bs-theme="dark"] .word-examples {
    border-top-color: rgba(255,255,255,0.12) !important;
}
[data-bs-theme="dark"] .word-examples-title {
    color: var(--color-text-secondary) !important;
}
[data-bs-theme="dark"] .word-examples-title i {
    color: var(--color-text-secondary) !important;
}
[data-bs-theme="dark"] .word-example-item {
    background-color: var(--color-background-alt) !important;
    border-left-color: var(--color-primary) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .word-example-item:hover {
    background-color: rgba(255,255,255,0.06) !important;
    border-left-color: var(--color-primary-light) !important;
}
[data-bs-theme="dark"] .word-example-sentence {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .word-example-translation {
    color: var(--color-text-secondary) !important;
}

/* Word meaning & pronunciation - readable in dark */
[data-bs-theme="dark"] .word-meaning-wrapper {
    color: var(--color-text-primary);
}
[data-bs-theme="dark"] .word-meaning {
    background-color: var(--color-background-alt) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
[data-bs-theme="dark"] .word-meaning:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
[data-bs-theme="dark"] .word-meaning-label {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
    color: white !important;
    border-color: rgba(255,255,255,0.2) !important;
}
[data-bs-theme="dark"] .word-meaning-label .bilingual-german {
    color: white !important;
}
[data-bs-theme="dark"] .word-pronunciation {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, rgba(74,139,194,0.15) 100%) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
[data-bs-theme="dark"] .word-pronunciation:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
[data-bs-theme="dark"] .word-pronunciation-label {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
    color: white !important;
    border-color: rgba(255,255,255,0.2) !important;
}
[data-bs-theme="dark"] .word-pronunciation-label .bilingual-german {
    color: white !important;
}

/* Usage cards - headings and examples readable in dark */
/* Usage cards - override view's white/gradient backgrounds in dark (match section-specific selectors) */
[data-bs-theme="dark"] .usage-card,
[data-bs-theme="dark"] .usage-section.collocations .usage-card,
[data-bs-theme="dark"] .usage-section.idioms .usage-card,
[data-bs-theme="dark"] .usage-section.synonyms .usage-card,
[data-bs-theme="dark"] .usage-section.antonyms .usage-card {
    background: var(--color-background) !important;
    border-color: rgba(255,255,255,0.12) !important;
    border-left-color: var(--color-primary) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .usage-card h4,
[data-bs-theme="dark"] .usage-card h5,
[data-bs-theme="dark"] .usage-card .usage-card-title,
[data-bs-theme="dark"] .usage-card strong {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .usage-card p,
[data-bs-theme="dark"] .usage-card span,
[data-bs-theme="dark"] .usage-card .bilingual-german,
[data-bs-theme="dark"] .usage-card .example-sentence,
[data-bs-theme="dark"] .usage-card .example-translation {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .usage-card .text-muted,
[data-bs-theme="dark"] .usage-card small {
    color: var(--color-text-secondary) !important;
}
[data-bs-theme="dark"] .usage-section.collocations .usage-card:hover,
[data-bs-theme="dark"] .usage-section.idioms .usage-card:hover,
[data-bs-theme="dark"] .usage-section.synonyms .usage-card:hover,
[data-bs-theme="dark"] .usage-section.antonyms .usage-card:hover {
    background: rgba(255,255,255,0.06) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
}
[data-bs-theme="dark"] .word-header-card {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-bs-theme="dark"] .word-header-card.text-white .word-frequency-rank,
[data-bs-theme="dark"] .word-header-card .word-frequency-rank-number,
[data-bs-theme="dark"] .word-header-card.text-white * {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .word-frequency-rank {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .example-card {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .example-card .example-sentence,
[data-bs-theme="dark"] .example-card .example-translation {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .usage-section-content {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .usage-section-content::-webkit-scrollbar-thumb {
    background: rgba(74,139,194,0.4) !important;
}
[data-bs-theme="dark"] .usage-section-header {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: none !important;
}
[data-bs-theme="dark"] .usage-section-header .bilingual-german {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .usage-section-content .bilingual-german {
    color: var(--color-text-primary) !important;
}
/* Practice widget card - override view's light gradient and ::before overlay in dark */
[data-bs-theme="dark"] .practice-widget-card {
    background: var(--color-background-alt) !important;
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
[data-bs-theme="dark"] .practice-widget-card::before {
    background: radial-gradient(circle at top left, rgba(74,139,194,0.12), transparent 55%) !important;
    opacity: 0.6 !important;
}
[data-bs-theme="dark"] .practice-widget-card .card-body {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-widget-card .practice-widget-title,
[data-bs-theme="dark"] .practice-widget-card .practice-widget-description,
[data-bs-theme="dark"] .practice-widget-card p,
[data-bs-theme="dark"] .practice-widget-card * {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-widget-card .btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}
[data-bs-theme="dark"] .practice-widget-card .btn-primary:hover {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
    color: white !important;
}

/* Stats section (about page) - theme in dark */
[data-bs-theme="dark"] .stats-section {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .stats-section .stat-number,
[data-bs-theme="dark"] .stats-section .stat-label {
    color: var(--color-text-primary) !important;
}

/* Submit button - theme in dark */
[data-bs-theme="dark"] .btn-submit {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

/* Border-bottom and borders that use primary blue - use theme in dark */
[data-bs-theme="dark"] [class*="border-bottom"] {
    border-bottom-color: rgba(255,255,255,0.12) !important;
}
[data-bs-theme="dark"] .border-primary {
    border-color: var(--color-primary) !important;
}

/* Word Practice Modal - full dark theme */
[data-bs-theme="dark"] .practice-modal-content {
    background-color: var(--color-background) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
[data-bs-theme="dark"] .practice-modal-header {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-700) 100%) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
[data-bs-theme="dark"] .practice-modal-header .modal-title {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
[data-bs-theme="dark"] .practice-modal-body {
    background-color: var(--color-background) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-footer {
    background-color: var(--color-background-alt) !important;
    border-top-color: rgba(255,255,255,0.1) !important;
}
[data-bs-theme="dark"] .practice-modal-footer .btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}
[data-bs-theme="dark"] .practice-modal-body .stat-item {
    background-color: var(--color-background-alt) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .stat-label {
    color: var(--color-text-secondary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .stat-value {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .stat-percent {
    color: var(--color-text-secondary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .practice-progress-bar {
    background-color: var(--color-background-alt) !important;
}
[data-bs-theme="dark"] .practice-modal-body .progress-text {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .question-container {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .question-title,
[data-bs-theme="dark"] .practice-modal-body .question-text {
    color: var(--color-text-primary) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
[data-bs-theme="dark"] .practice-modal-body .question-text {
    background: var(--color-background) !important;
}
[data-bs-theme="dark"] .practice-modal-body .option-btn {
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .option-btn:hover:not(:disabled),
[data-bs-theme="dark"] .practice-modal-body .option-btn.selected {
    border-color: var(--color-primary) !important;
    background: rgba(74,139,194,0.2) !important;
}
[data-bs-theme="dark"] .practice-modal-body .option-number {
    background-color: var(--color-primary) !important;
    color: white !important;
}
[data-bs-theme="dark"] .practice-modal-body .practice-complete-title {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .practice-complete-stats {
    background-color: var(--color-background-alt) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .practice-modal-body .progress {
    background-color: var(--color-background-alt) !important;
}
[data-bs-theme="dark"] .practice-modal-body .progress-bar {
    background: linear-gradient(90deg, var(--color-primary) 0%, #20c997 100%) !important;
}

[data-bs-theme="dark"] .alert-info {
    background-color: rgba(74,139,194,0.2) !important;
    border-color: rgba(74,139,194,0.4) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] main a:not(.nav-link):not(.btn):not(.text-white):not(.text-white-75) {
    color: var(--color-primary) !important;
}

[data-bs-theme="dark"] main a:not(.nav-link):not(.btn):not(.text-white):not(.text-white-75):hover {
    color: var(--color-primary-light) !important;
}

[data-bs-theme="dark"] .dictionary-browse-btn {
    background: linear-gradient(135deg, var(--ll-night-800) 0%, var(--ll-night-900) 100%) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

[data-bs-theme="dark"] .app-install-title,
[data-bs-theme="dark"] .app-install-lead{
    /* Remove its own background and border */
    background: none !important;
    border: none !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .btn,
[data-bs-theme="dark"] .btn-submit,
[data-bs-theme="dark"] .search-button,
[data-bs-theme="dark"] .btn-search-submit {
    background: var(--color-primary-alt) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .btn:hover,
[data-bs-theme="dark"] .btn-submit:hover,
[data-bs-theme="dark"] .search-button:hover,
[data-bs-theme="dark"] .dictionary-browse-btn:hover,
[data-bs-theme="dark"] .btn-search-submit:hover {
    background: var(--color-primary-light) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .navbar-toggler {
    background: var(--color-background-alt) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

[data-bs-theme="dark"] .navbar-toggler-icon {
    filter: brightness(0) invert(1);
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .navbar-toggler:hover {
    background: var(--color-primary-light) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--color-text-primary) !important;
}

/* ========== Theme-aware classes (replace inline color/background styles) ========== */
.seo-description-box-hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-left: 4px solid rgba(255, 255, 255, 0.6);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 1.5rem auto 0;
}
.seo-description-box-hero .mb-0,
.seo-description-box-hero p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
}
.seo-description-box-hero .fa-info-circle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

.seo-description-box-content {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.08) 0%, rgba(0, 64, 128, 0.04) 100%);
    border-left: 4px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
}
.seo-description-box-content .mb-0,
.seo-description-box-content p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}
.seo-description-box-content .fa-info-circle,
.seo-description-box-content strong {
    color: var(--color-primary);
}
.seo-description-box-content .fa-info-circle {
    font-size: 1.1rem;
}

.seo-description-box-sm {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.seo-description-box-primary {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.05) 0%, rgba(0, 64, 128, 0.02) 100%);
    border-left: 4px solid var(--color-primary);
}
.seo-description-box-primary .mb-0,
.seo-description-box-primary p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}
.seo-description-box-primary .fa-info-circle,
.seo-description-box-primary strong {
    color: var(--color-primary);
}

.seo-description-box-green {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(56, 142, 60, 0.04) 100%);
    border-left: 4px solid var(--ll-teal);
}
.seo-description-box-green .mb-0,
.seo-description-box-green p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}
.seo-description-box-green .fa-language,
.seo-description-box-green strong {
    color: var(--ll-teal-800);
}

.seo-description-box-info {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(25, 118, 210, 0.04) 100%);
    border-left: 4px solid var(--ll-sky);
}
.seo-description-box-info .mb-0,
.seo-description-box-info p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.category-info-box {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(25, 118, 210, 0.05) 100%);
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);
}
.category-icon-box {
    background: linear-gradient(135deg, var(--ll-sky) 0%, var(--ll-deep-blue-600) 100%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}
.category-icon-box i {
    color: white;
    font-size: 1.25rem;
}
.category-info-box h4 {
    color: var(--ll-deep-blue-600);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}
.category-info-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.search-results-info-box {
    padding: 1rem 1.5rem;
    background: var(--ll-deep-blue-50);
    border-radius: 12px;
    border-left: 4px solid var(--ll-sky);
}
.search-results-info-box a.clear-search-link {
    color: var(--ll-deep-blue-600);
    text-decoration: underline;
}

.btn-speak-word-small,
.btn-speak-word-tiny {
    color: var(--color-primary);
}
.btn-speak-word-small { flex-shrink: 0; }

.conjugation-cell {
    border-color: var(--color-primary) !important;
}
.conjugation-cell strong {
    color: var(--color-primary);
    font-size: 1.1rem;
}

.word-card-fill {
    flex: 1;
}

.visually-hidden-seo {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.page-hero-description {
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
}

/* Home page sections - theme-aware (no inline styles) */
.search-section {
    background: linear-gradient(to bottom, #ffffff 0%, var(--ll-ink-50) 100%);
    padding: 5rem 0 4rem;
    margin-top: -80px;
    position: relative;
    z-index: 10;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    border-radius: 30px 30px 0 0;
}
.dictionary-browse-section {
    background: linear-gradient(135deg, var(--ll-ink-50) 0%, #ffffff 100%);
}
.dictionary-feature-card {
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.15);
    border: 2px solid rgba(0, 51, 102, 0.1);
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, var(--ll-ink-50) 100%);
}
.dictionary-browse-btn {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border: none;
    border-radius: 50px;
    padding: 1rem 2.5rem;
    color: white;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 51, 102, 0.3);
    transition: all 0.3s ease;
}
.dictionary-browse-section .display-5,
.dictionary-feature-card .feature-icon,
.dictionary-feature-card h3 {
    color: var(--color-primary);
}
.dictionary-browse-section .lead {
    color: var(--color-text-secondary);
    font-size: 1.2rem;
    line-height: 1.7;
}
.dictionary-feature-card .feature-icon { font-size: 4rem; }
.dictionary-feature-card .text-muted { font-size: 0.95rem; line-height: 1.6; }
.hero-image .img-fluid {
    max-height: 450px;
    object-fit: cover;
    border: 5px solid rgba(255,255,255,0.2);
}
.page-hero-title {
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.page-hero-lead {
    line-height: 1.7;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
section.py-5 {
    background: linear-gradient(135deg, #ffffff 0%, var(--ll-ink-50) 100%);
}

/* Home: vocabulary promo block uses section.py-5 without dictionary-browse-section — match primary heading color */
section.py-5 .display-5.fw-bold,
section.py-5 .display-5.fw-bold i {
    color: var(--color-primary);
}

/* Shared catalog UI: breadcrumbs, dictionary-style hero, filters (dictionary, vocabulary lists, conversations) */
.breadcrumb-nav {
    background: transparent;
    padding: 0;
    margin: 0;
}
.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
}
.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--ll-deep-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: transparent;
}
.breadcrumb-link i {
    font-size: 0.85rem;
    opacity: 0.8;
}
.breadcrumb-link:hover {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.1) 0%, rgba(0, 64, 128, 0.05) 100%);
    color: var(--ll-deep-blue-600);
    transform: translateX(2px);
    text-decoration: none;
}
.breadcrumb-link:hover i {
    opacity: 1;
}
.breadcrumb-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--ll-deep-blue-600);
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.1) 0%, rgba(0, 64, 128, 0.05) 100%);
    border-radius: 8px;
    border-left: 3px solid var(--ll-deep-blue);
}
.breadcrumb-current i {
    font-size: 0.85rem;
    color: var(--ll-deep-blue);
}
.breadcrumb-separator {
    display: flex;
    align-items: center;
    color: var(--ll-ink-600);
    font-size: 0.75rem;
    opacity: 0.6;
}
.breadcrumb-separator i {
    font-size: 0.7rem;
}
@media (max-width: 768px) {
    .breadcrumb-nav {
        padding: 0.75rem 0;
    }
    .breadcrumb-list {
        gap: 0.35rem;
    }
    .breadcrumb-link,
    .breadcrumb-current {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
    .breadcrumb-link span,
    .breadcrumb-current span {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media (max-width: 576px) {
    .breadcrumb-link span,
    .breadcrumb-current span {
        max-width: 100px;
    }
}

.dictionary-header {
    background: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 50%, var(--ll-deep-blue-600) 100%);
    color: white;
    padding: 4rem 0 3rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}
.dictionary-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}
.dictionary-header .container {
    position: relative;
    z-index: 1;
}
.dictionary-header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.5px;
}
.dictionary-header p {
    font-size: 1.25rem;
    opacity: 0.95;
    margin-bottom: 0;
    font-weight: 300;
}
@media (max-width: 768px) {
    .dictionary-header {
        padding: 3rem 0 2rem;
    }
    .dictionary-header h1 {
        font-size: 2rem;
    }
    .dictionary-header p {
        font-size: 1.1rem;
    }
    .dictionary-filters {
        padding: 1.5rem;
    }
}
@media (max-width: 576px) {
    .dictionary-header h1 {
        font-size: 1.75rem;
    }
}

.dictionary-filters {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.1);
    border: 1px solid rgba(0, 51, 102, 0.1);
    position: relative;
}
.filter-search-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}
.filter-search-input {
    width: 100%;
    padding: 1rem 1.5rem 1rem 3.5rem;
    padding-right: 140px;
    border: 2px solid var(--ll-ink-100);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.filter-search-input:focus {
    outline: none;
    border-color: var(--ll-deep-blue);
    box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.1);
}
.btn-search-submit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 100%);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    z-index: 2;
    will-change: transform;
}
.btn-search-submit:hover {
    background: linear-gradient(135deg, var(--ll-deep-blue-600) 0%, var(--ll-deep-blue-600) 100%);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.4);
}
.btn-search-submit:active {
    transform: translateY(-50%) scale(0.98);
}
.filter-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ll-ink-600);
    font-size: 1.1rem;
    z-index: 2;
}
.btn-clear-search {
    position: absolute;
    right: 150px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ll-ink-600);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 2;
}
.btn-clear-search:hover {
    background: var(--ll-ink-50);
    color: var(--ll-deep-blue);
}
.filter-select-wrapper {
    position: relative;
    margin-bottom: 1rem;
}
.filter-select-wrapper:last-child {
    margin-bottom: 0;
}
.filter-select {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid var(--ll-ink-100);
    border-radius: 12px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: white;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003366' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}
.filter-select:focus {
    outline: none;
    border-color: var(--ll-deep-blue);
    box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.1);
}
.filter-label {
    font-weight: 600;
    color: var(--ll-deep-blue);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    display: block;
}
@media (max-width: 576px) {
    .btn-clear-search {
        right: 120px;
    }
    .btn-search-submit {
        padding: 0.75rem 1rem;
    }
    .btn-search-submit span {
        display: none !important;
    }
}

/* Vocabulary list index cards + pagination (shared with conversations index) */
.vocabulary-lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
    contain: layout style;
}
.vocabulary-list-card {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.1);
    border: 1px solid rgba(0, 51, 102, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    contain: layout style paint;
    will-change: transform;
}
.vocabulary-list-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    will-change: transform;
    transform-origin: top;
}
.vocabulary-list-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 51, 102, 0.2);
    border-color: var(--ll-deep-blue);
    text-decoration: none;
    color: inherit;
}
.vocabulary-list-card:hover::before {
    transform: scaleY(1);
}
.vocabulary-list-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.2);
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}
.vocabulary-list-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    pointer-events: none;
    will-change: opacity;
}
.vocabulary-list-card-header > div:first-child {
    position: relative;
    z-index: 1;
    flex: 1;
}
.vocabulary-list-card .vocabulary-list-icon-header {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.35);
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    will-change: transform;
}
.vocabulary-list-card:hover .vocabulary-list-icon-header {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
}
.vocabulary-list-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    word-break: break-word;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.3px;
}
.vocabulary-list-translation {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.vocabulary-list-description {
    font-size: 0.95rem;
    color: var(--ll-ink-700);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
}
.vocabulary-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.vocabulary-list-badge {
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.vocabulary-list-badge.level {
    background: linear-gradient(135deg, var(--ll-teal-700) 0%, var(--ll-teal-700) 100%);
    color: white;
}
.vocabulary-list-badge.category {
    background: linear-gradient(135deg, var(--ll-sky-700) 0%, var(--ll-deep-blue-600) 100%);
    color: white;
}
.vocabulary-list-badge.words {
    background: linear-gradient(135deg, var(--ll-amber) 0%, var(--ll-amber) 100%);
    color: var(--ll-deep-blue);
}
.vocabulary-list-card-footer {
    margin-top: auto;
    padding-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--ll-ink-100);
    text-align: center;
}
.vocabulary-list-link {
    color: var(--ll-deep-blue);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: color 0.3s ease, gap 0.3s ease;
    text-decoration: none;
}
.vocabulary-list-link:hover {
    color: var(--ll-deep-blue-600);
    gap: 0.75rem;
    text-decoration: none;
}
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin: 3rem 0;
}
.pagination {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.pagination .page-link {
    background: white;
    border: 2px solid var(--ll-ink-100);
    color: var(--ll-deep-blue);
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    min-width: 44px;
    text-align: center;
    will-change: transform;
}
.pagination .page-link:hover {
    background: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 100%);
    color: white;
    border-color: var(--ll-deep-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 100%);
    color: white;
    border-color: var(--ll-deep-blue);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
}
.pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.pagination .page-item.disabled .page-link:hover {
    background: white;
    color: var(--ll-deep-blue);
    border-color: var(--ll-ink-100);
    transform: none;
    box-shadow: none;
}
.catalog-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--ll-ink-600);
}
.catalog-empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--ll-ink-400);
}

@media (max-width: 1200px) {
    .vocabulary-lists-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
@media (max-width: 768px) {
    .vocabulary-list-card {
        padding: 1.5rem;
    }
    .vocabulary-list-card-header {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .vocabulary-list-title {
        font-size: 1.6rem;
    }
    .vocabulary-list-translation {
        font-size: 1rem;
    }
    .vocabulary-list-card .vocabulary-list-icon-header {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }
}
@media (max-width: 576px) {
    .vocabulary-list-card {
        padding: 1.25rem;
    }
    .vocabulary-list-card-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .vocabulary-list-title {
        font-size: 1.4rem;
    }
    .vocabulary-list-translation {
        font-size: 0.95rem;
    }
    .vocabulary-list-card .vocabulary-list-icon-header {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
    }
}

/* Conversation / vocabulary detail gradient header (matches vocabulary list detail) */
.vocabulary-list-header {
    background: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 100%);
    padding: 3rem 0;
    color: white;
    border-radius: 0 0 24px 24px;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .vocabulary-list-header {
        padding: 2rem 0;
        border-radius: 0 0 16px 16px;
    }
}
.vocabulary-list-header .vocabulary-list-icon-header {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 576px) {
    .vocabulary-list-header .vocabulary-list-icon-header {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}
.vocabulary-list-title-header {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
@media (max-width: 768px) {
    .vocabulary-list-title-header {
        font-size: 2rem;
    }
}
@media (max-width: 576px) {
    .vocabulary-list-title-header {
        font-size: 1.75rem;
    }
}
.vocabulary-list-translation-header {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}
@media (max-width: 576px) {
    .vocabulary-list-translation-header {
        font-size: 1.1rem;
    }
}
.vocabulary-list-meta-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: center;
}
.vocabulary-list-badge-header {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Conversation player: primary actions match site pill CTA */
.conv-controls .btn-conv-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    padding: 0.65rem 1.75rem;
    box-shadow: 0 6px 20px rgba(0, 51, 102, 0.3);
    transition: all 0.3s ease;
}
.conv-controls .btn-conv-primary:hover {
    background: linear-gradient(135deg, var(--ll-deep-blue-600) 0%, var(--ll-deep-blue-600) 100%);
    color: #fff;
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.4);
}
.conv-controls .btn-conv-secondary {
    border: 2px solid rgba(0, 51, 102, 0.25);
    border-radius: 50px;
    color: var(--ll-deep-blue);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    background: #fff;
    transition: all 0.3s ease;
}
.conv-controls .btn-conv-secondary:hover {
    border-color: var(--ll-deep-blue);
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.06) 0%, rgba(0, 64, 128, 0.04) 100%);
    color: var(--ll-deep-blue-600);
}

/* Dark overrides for theme-aware classes */
[data-bs-theme="dark"] .seo-description-box-hero {
    background: var(--color-background) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .seo-description-box-hero .mb-0,
[data-bs-theme="dark"] .seo-description-box-hero p {
    color: rgba(255,255,255,0.95);
}
[data-bs-theme="dark"] .seo-description-box-hero .fa-info-circle {
    color: rgba(255,255,255,0.9);
}

[data-bs-theme="dark"] .seo-description-box-content,
[data-bs-theme="dark"] .seo-description-box-primary,
[data-bs-theme="dark"] .seo-description-box-green,
[data-bs-theme="dark"] .seo-description-box-info {
    background: var(--color-background-alt);
    border-left-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
[data-bs-theme="dark"] .seo-description-box-content .mb-0,
[data-bs-theme="dark"] .seo-description-box-content p,
[data-bs-theme="dark"] .seo-description-box-primary .mb-0,
[data-bs-theme="dark"] .seo-description-box-primary p,
[data-bs-theme="dark"] .seo-description-box-green .mb-0,
[data-bs-theme="dark"] .seo-description-box-green p,
[data-bs-theme="dark"] .seo-description-box-info .mb-0,
[data-bs-theme="dark"] .seo-description-box-info p {
    color: var(--color-text-primary);
}
[data-bs-theme="dark"] .seo-description-box-content .fa-info-circle,
[data-bs-theme="dark"] .seo-description-box-content strong,
[data-bs-theme="dark"] .seo-description-box-primary .fa-info-circle,
[data-bs-theme="dark"] .seo-description-box-primary strong {
    color: var(--color-primary);
}
[data-bs-theme="dark"] .seo-description-box-green .fa-language,
[data-bs-theme="dark"] .seo-description-box-green strong {
    color: var(--ll-teal);
}

[data-bs-theme="dark"] .category-info-box {
    background: rgba(33, 150, 243, 0.15);
    border-color: rgba(33, 150, 243, 0.4);
}
[data-bs-theme="dark"] .category-info-box h4 {
    color: var(--color-primary);
}
[data-bs-theme="dark"] .category-info-box p {
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .search-results-info-box {
    background: rgba(33, 150, 243, 0.15);
    border-left-color: var(--color-primary);
}
[data-bs-theme="dark"] .search-results-info-box a.clear-search-link {
    color: var(--color-primary-light);
}

[data-bs-theme="dark"] .btn-speak-word-small,
[data-bs-theme="dark"] .btn-speak-word-tiny {
    color: var(--color-primary);
}
[data-bs-theme="dark"] .conjugation-cell {
    border-color: var(--color-primary) !important;
    background-color: var(--color-background-alt) !important;
}
[data-bs-theme="dark"] .conjugation-cell strong {
    color: var(--color-primary);
}

[data-bs-theme="dark"] .vocabulary-list-icon-header[style*="background"] {
    background: rgba(255,255,255,0.25) !important;
}
[data-bs-theme="dark"] .vocabulary-list-icon-header i {
    color: rgba(255,255,255,0.95) !important;
}

.seo-description-box-content-lg {
    border-radius: 10px;
}

/* Content boxes (collocations, idioms, synonyms, antonyms) - theme-aware */
.content-box-accent {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}
.content-box-accent .fa-info-circle,
.content-box-accent strong { font-size: 0.9rem; }
.content-box-info { background: rgba(23, 162, 184, 0.12); border-left: 3px solid var(--ll-sky); }
.content-box-info .fa-info-circle, .content-box-info strong { color: var(--ll-deep-blue-600); }
.content-box-danger { background: rgba(255, 107, 107, 0.12); border-left: 3px solid var(--ll-coral); }
.content-box-danger .fa-info-circle, .content-box-danger strong { color: var(--ll-coral-700); }
.content-box-purple { background: rgba(108, 92, 231, 0.12); border-left: 3px solid var(--ll-purple); }
.content-box-purple .fa-info-circle, .content-box-purple strong { color: var(--ll-purple); }
.content-box-red { background: rgba(231, 76, 60, 0.12); border-left: 3px solid var(--ll-coral); }
.content-box-red .fa-info-circle, .content-box-red strong { color: var(--ll-coral-700); }

.seo-description-box-purple {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(123, 31, 162, 0.04) 100%);
    border-left: 4px solid var(--ll-purple);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.seo-description-box-purple .mb-0, .seo-description-box-purple p { font-size: 0.95rem; line-height: 1.7; color: var(--color-text-primary); }
.seo-description-box-purple .fa-project-diagram, .seo-description-box-purple strong { color: var(--ll-purple); }

.section-header-gradient {
    background: linear-gradient(135deg, var(--ll-ink-600) 0%, var(--ll-ink-700) 100%);
}
.btn-primary-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border: none;
    border-radius: 50px;
    padding: 0.75rem 2rem;
}
.search-cta-icon { color: var(--color-primary); }
.search-cta-title { color: var(--color-primary); }
.text-theme-primary { color: var(--color-primary); }
.page-title-primary { color: var(--color-primary); font-size: 2rem; font-weight: 700; text-align: center; }
.section-title-primary { color: var(--color-primary); font-size: 1.75rem; font-weight: 700; }
[data-bs-theme="dark"] .page-title-primary,
[data-bs-theme="dark"] .section-title-primary { color: var(--color-primary) !important; }

/* Dark overrides for content boxes and purple seo box */
[data-bs-theme="dark"] .content-box-accent {
    background: var(--color-background-alt) !important;
    border-left-color: var(--color-primary) !important;
}
[data-bs-theme="dark"] .content-box-info .fa-info-circle,
[data-bs-theme="dark"] .content-box-info strong,
[data-bs-theme="dark"] .content-box-danger .fa-info-circle,
[data-bs-theme="dark"] .content-box-danger strong,
[data-bs-theme="dark"] .content-box-purple .fa-info-circle,
[data-bs-theme="dark"] .content-box-purple strong,
[data-bs-theme="dark"] .content-box-red .fa-info-circle,
[data-bs-theme="dark"] .content-box-red strong {
    color: var(--color-primary) !important;
}
[data-bs-theme="dark"] .seo-description-box-purple {
    background: var(--color-background-alt);
    border-left-color: var(--color-primary);
}
[data-bs-theme="dark"] .seo-description-box-purple .mb-0,
[data-bs-theme="dark"] .seo-description-box-purple p { color: var(--color-text-primary); }
[data-bs-theme="dark"] .seo-description-box-purple .fa-project-diagram,
[data-bs-theme="dark"] .seo-description-box-purple strong { color: var(--color-primary); }

/* Family group & family-card - dark theme friendly (override inline styles) */
[data-bs-theme="dark"] .family-group-header {
    background: var(--color-background-alt) !important;
    background-color: var(--color-background-alt) !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: none !important;
    text-shadow: none !important;
}
[data-bs-theme="dark"] .family-group-header .bilingual-german {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .family-group-content {
    background: var(--color-background-alt) !important;
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
[data-bs-theme="dark"] .family-card {
    background: var(--color-background-alt) !important;
    background-color: var(--color-background-alt) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .family-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
[data-bs-theme="dark"] .family-card .family-word,
[data-bs-theme="dark"] .family-card .family-details,
[data-bs-theme="dark"] .family-card .family-details strong {
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .family-word {
    color: var(--color-primary) !important;
}
[data-bs-theme="dark"] .family-group-content .btn-speak-word-small {
    color: var(--color-primary) !important;
}
[data-bs-theme="dark"] .family-group-content .badge,
[data-bs-theme="dark"] .family-card .badge {
    background: rgba(74,139,194,0.25) !important;
    color: var(--color-primary) !important;
    border-color: rgba(74,139,194,0.4) !important;
}
[data-bs-theme="dark"] .family-card .badge.bg-info {
    background: rgba(74,139,194,0.3) !important;
    color: var(--color-text-primary) !important;
}
[data-bs-theme="dark"] .family-card .badge.bg-secondary {
    background: rgba(255,255,255,0.15) !important;
    color: var(--color-text-secondary) !important;
}
[data-bs-theme="dark"] .section-header-gradient {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--ll-night-800) 100%) !important;
}
[data-bs-theme="dark"] .btn-primary-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
}
[data-bs-theme="dark"] .search-cta-icon,
[data-bs-theme="dark"] .search-cta-title {
    color: var(--color-primary) !important;
}
[data-bs-theme="dark"] .text-theme-primary {
    color: var(--color-primary) !important;
}

/* Footer: theme-aware (no inline colors) */
footer .footer-text,
footer .footer-link {
    color: rgba(255,255,255,0.8);
    transition: color 0.2s;
}
footer .footer-link:hover { color: rgba(255,255,255,0.95); }
footer .footer-hr { border-color: rgba(255,255,255,0.2); }
footer .footer-muted { color: rgba(255,255,255,0.7); }
[data-bs-theme="dark"] footer .footer-text,
[data-bs-theme="dark"] footer .footer-link {
    color: rgba(255,255,255,0.8) !important;
}
[data-bs-theme="dark"] footer .footer-link:hover { color: rgba(255,255,255,0.95) !important; }
[data-bs-theme="dark"] footer .footer-hr { border-color: rgba(255,255,255,0.2) !important; }
[data-bs-theme="dark"] footer .footer-muted { color: rgba(255,255,255,0.7) !important; }

/* App install banner: theme-aware */
.app-install-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}
.app-install-banner .app-install-title { font-size: 1.5rem; color: white; }
.app-install-banner .app-install-lead { color: rgba(255,255,255,0.9); font-size: 1.05rem; }
.app-install-banner .store-badge { height: 50px; width: auto; }

/* Word practice modal stats - theme-aware */
.stat-value-correct { color: var(--ll-teal-700); }
.stat-value-wrong { color: var(--ll-coral-700); }
.stat-value-primary { color: var(--color-primary); }
[data-bs-theme="dark"] .stat-value-correct { color: var(--ll-teal) !important; }
[data-bs-theme="dark"] .stat-value-wrong { color: var(--ll-coral) !important; }
[data-bs-theme="dark"] .stat-value-primary { color: var(--color-primary) !important; }

/* Manual Google AdSense placements */
.gp-ad-in-feed {
    grid-column: 1 / -1;
}
.gp-ad-slot {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    text-align: center;
}
.gp-ad-label {
    margin: 0 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.85;
}
.gp-ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 2px dashed rgba(0, 51, 102, 0.28);
    background: repeating-linear-gradient(
        -45deg,
        rgba(0, 51, 102, 0.04),
        rgba(0, 51, 102, 0.04) 8px,
        rgba(0, 51, 102, 0.08) 8px,
        rgba(0, 51, 102, 0.08) 16px
    );
    color: var(--color-text-secondary);
    min-height: 90px;
}
.gp-ad-placeholder--horizontal {
    min-height: 100px;
    max-width: 728px;
}
.gp-ad-placeholder--rectangle {
    min-height: 250px;
    max-width: 336px;
}
.gp-ad-placeholder__badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: rgba(0, 51, 102, 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.gp-ad-placeholder__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}
.gp-ad-placeholder__meta {
    font-size: 0.75rem;
    opacity: 0.9;
}
[data-bs-theme="dark"] .gp-ad-placeholder {
    border-color: rgba(255, 255, 255, 0.2);
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.03) 8px,
        rgba(255, 255, 255, 0.07) 8px,
        rgba(255, 255, 255, 0.07) 16px
    );
}
[data-bs-theme="dark"] .gp-ad-placeholder__title {
    color: rgba(255, 255, 255, 0.92);
}

.gp-admin-ad-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    max-width: 16.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 51, 102, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.16);
    color: var(--color-text-primary, #123);
}
.gp-admin-ad-toggle__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.gp-admin-ad-toggle__hint {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary, var(--ll-ink-600));
}
[data-bs-theme="dark"] .gp-admin-ad-toggle {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(26, 35, 50, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Vocabulary landing page (/vocabulary) */
.vocabulary-landing-header {
    margin-bottom: 0;
}
.vocab-hero-cta {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.vocab-content-section {
    padding: 3rem 0;
}
.vocab-content-section--alt {
    background: var(--color-background-alt);
}
.vocab-content-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
}
.vocab-content-section h2 i {
    opacity: 0.85;
}
.vocab-level-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
@media (max-width: 992px) {
    .vocab-level-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 576px) {
    .vocab-level-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.vocab-level-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: white;
    border: 2px solid rgba(0, 51, 102, 0.12);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--color-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vocab-level-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.15);
    transform: translateY(-2px);
    color: var(--color-primary-light);
    text-decoration: none;
}
.vocab-level-card__badge {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.35rem;
}
.vocab-level-card__label {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: 1.3;
}
.vocab-level-card__count {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
}
.vocab-level-card--active {
    border-color: var(--color-primary);
    background: rgba(0, 51, 102, 0.06);
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.12);
}
.vocab-level-card--disabled {
    border-style: dashed;
    cursor: not-allowed;
    background: var(--color-background-alt);
}
.vocab-level-card--disabled .vocab-level-card__badge { color: var(--color-text-muted); }
.vocab-level-card--disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(0, 51, 102, 0.12);
}
.vocab-topics-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vocab-topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid rgba(0, 51, 102, 0.15);
    border-radius: 999px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vocab-topic-chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    text-decoration: none;
}
.vocab-topic-chip__count {
    opacity: 0.75;
    font-weight: 500;
    font-size: 0.85rem;
}
.vocab-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .vocab-feature-grid {
        grid-template-columns: 1fr;
    }
}
.vocab-feature-card {
    background: white;
    border-radius: 14px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 51, 102, 0.1);
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.06);
    height: 100%;
}
.vocab-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}
.vocab-feature-card h3 i {
    margin-right: 0.5rem;
    color: var(--color-accent);
}
.vocab-feature-card ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}
.vocab-feature-card li + li {
    margin-top: 0.35rem;
}
.vocab-de-section {
    background: white;
    border-radius: 14px;
    border-left: 4px solid var(--color-primary);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.06);
}
.vocab-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vocab-faq-item {
    background: white;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(0, 51, 102, 0.1);
}
.vocab-faq-item h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem;
}
.vocab-faq-item p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}
.vocab-cta-bar {
    text-align: center;
    padding-top: 0.5rem;
}
[data-bs-theme="dark"] .vocab-level-card,
[data-bs-theme="dark"] .vocab-topic-chip,
[data-bs-theme="dark"] .vocab-feature-card,
[data-bs-theme="dark"] .vocab-de-section,
[data-bs-theme="dark"] .vocab-faq-item {
    background: #1e2a3a;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
}
[data-bs-theme="dark"] .vocab-level-card:hover,
[data-bs-theme="dark"] .vocab-topic-chip:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: #fff;
}
[data-bs-theme="dark"] .vocab-level-card__label,
[data-bs-theme="dark"] .vocab-level-card__count,
[data-bs-theme="dark"] .vocab-topic-chip__count {
    color: rgba(255, 255, 255, 0.65);
}
[data-bs-theme="dark"] .vocab-level-card--active {
    background: rgba(0, 91, 170, 0.25);
    border-color: var(--color-primary-light);
}
[data-bs-theme="dark"] .vocab-level-card--disabled {
    background: #1a2430;
    opacity: 0.5;
}
[data-bs-theme="dark"] .vocab-content-section--alt {
    background: #151c24;
}
[data-bs-theme="dark"] .vocab-content-section h2,
[data-bs-theme="dark"] .vocab-feature-card h3,
[data-bs-theme="dark"] .vocab-faq-item h3 {
    color: rgba(255, 255, 255, 0.95);
}
[data-bs-theme="dark"] .vocab-feature-card ul,
[data-bs-theme="dark"] .vocab-faq-item p,
[data-bs-theme="dark"] .vocab-de-section p {
    color: rgba(255, 255, 255, 0.78);
}