/* ==========================================================================
   Utilix — Dark Mode Theme
   ========================================================================== */

[data-theme="dark"] {
    --bg: #0F172A;
    --bg-section: #1E293B;
    --border: #334155;
    --heading: #F1F5F9;
    --text: #94A3B8;
    --text-light: #64748B;
    --footer-bg: #020617;
    --footer-text: #94A3B8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 16px 48px rgba(37, 99, 235, 0.2);

    --blue-bg: rgba(37, 99, 235, 0.15);   --blue-fg: #60A5FA;
    --green-bg: rgba(5, 150, 105, 0.15);  --green-fg: #34D399;
    --red-bg: rgba(220, 38, 38, 0.15);    --red-fg: #F87171;
    --purple-bg: rgba(124, 58, 237, 0.15);--purple-fg: #A78BFA;
    --orange-bg: rgba(234, 88, 12, 0.15); --orange-fg: #FB923C;
    --cyan-bg: rgba(8, 145, 178, 0.15);   --cyan-fg: #22D3EE;
    --teal-bg: rgba(13, 148, 136, 0.15);  --teal-fg: #2DD4BF;
    --pink-bg: rgba(219, 39, 119, 0.15);  --pink-fg: #F472B6;
    --indigo-bg: rgba(79, 70, 229, 0.15); --indigo-fg: #818CF8;
    --slate-bg: rgba(71, 85, 105, 0.2);   --slate-fg: #94A3B8;
}

[data-theme="dark"] .landing-header {
    background: rgba(15, 23, 42, 0.92);
    border-bottom-color: transparent;
}

[data-theme="dark"] .landing-header.is-scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-section);
    border-color: var(--border);
    color: var(--heading);
}

[data-theme="dark"] .btn-secondary:hover {
    background: #334155;
    border-color: #475569;
}

[data-theme="dark"] .hero__bg {
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37, 99, 235, 0.15) 0%, transparent 60%);
}

[data-theme="dark"] .hero__search-inner,
[data-theme="dark"] .search-overlay__form,
[data-theme="dark"] .category-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .article-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .notice-box,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .error-card {
    background: var(--bg-section);
    border-color: var(--border);
}

[data-theme="dark"] .hero__search-inner input,
[data-theme="dark"] .search-overlay__form input,
[data-theme="dark"] .newsletter-form input,
[data-theme="dark"] .cat-newsletter__form input {
    background: var(--bg);
    color: var(--heading);
    border-color: var(--border);
}

[data-theme="dark"] .cat-hero {
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
}

[data-theme="dark"] .cat-toolbar,
[data-theme="dark"] .cat-hero__illus,
[data-theme="dark"] .jf-tool,
[data-theme="dark"] .jt-tool,
[data-theme="dark"] .b64-tool,
[data-theme="dark"] .ht-tool,
[data-theme="dark"] .ct-tool,
[data-theme="dark"] .jst-tool,
[data-theme="dark"] .sqlt-tool,
[data-theme="dark"] .jf-card,
[data-theme="dark"] .jt-card,
[data-theme="dark"] .b64-card,
[data-theme="dark"] .ht-card,
[data-theme="dark"] .ct-card,
[data-theme="dark"] .jst-card,
[data-theme="dark"] .sqlt-card,
[data-theme="dark"] .bmi-card,
[data-theme="dark"] .bmi-side-card,
[data-theme="dark"] .bmi-chart-card,
[data-theme="dark"] .bmi-article-card,
[data-theme="dark"] .jf-article-card,
[data-theme="dark"] .cat-guide-card,
[data-theme="dark"] .cat-faq-item {
    background: var(--bg-section);
    border-color: var(--border);
}

[data-theme="dark"] .jf-editor,
[data-theme="dark"] .jt-editor,
[data-theme="dark"] .ht-editor,
[data-theme="dark"] .ct-editor,
[data-theme="dark"] .jst-editor,
[data-theme="dark"] .sqlt-editor,
[data-theme="dark"] .jf-select,
[data-theme="dark"] .jt-select,
[data-theme="dark"] .ht-select,
[data-theme="dark"] .ct-select,
[data-theme="dark"] .jst-select,
[data-theme="dark"] .sqlt-select,
[data-theme="dark"] .bmi-input-wrap {
    background: var(--bg);
    color: var(--heading);
}

[data-theme="dark"] .jf-pane__header,
[data-theme="dark"] .jt-pane__header,
[data-theme="dark"] .ht-pane__header,
[data-theme="dark"] .ct-pane__header,
[data-theme="dark"] .jst-pane__header,
[data-theme="dark"] .sqlt-pane__header,
[data-theme="dark"] .jf-toolbar,
[data-theme="dark"] .jt-toolbar,
[data-theme="dark"] .jf-options,
[data-theme="dark"] .jt-options,
[data-theme="dark"] .ht-options,
[data-theme="dark"] .ct-options,
[data-theme="dark"] .jst-options,
[data-theme="dark"] .sqlt-options,
[data-theme="dark"] .jf-line-numbers,
[data-theme="dark"] .jt-line-numbers,
[data-theme="dark"] .ht-line-numbers,
[data-theme="dark"] .ct-line-numbers,
[data-theme="dark"] .jst-line-numbers,
[data-theme="dark"] .sqlt-line-numbers {
    background: #1a2332;
}

[data-theme="dark"] .cat-newsletter__inner,
[data-theme="dark"] .bmi-newsletter .cat-newsletter__inner {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E293B 100%);
    border-color: #334155;
}

[data-theme="dark"] .jf-tips__inner {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.3);
    color: #FDE68A;
}

[data-theme="dark"] .jf-about,
[data-theme="dark"] .bmi-about,
[data-theme="dark"] .bmi-related-tools,
[data-theme="dark"] .section--alt {
    background: var(--bg-section);
}

[data-theme="dark"] .page-hero {
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
}

/* Header prefs: theme + language */
.header-prefs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-icon { width: 20px; height: 20px; }

.btn-icon .theme-icon--light,
[data-theme-toggle] .theme-icon--light {
    display: none;
}

.btn-icon.is-dark .theme-icon--dark,
[data-theme-toggle].is-dark .theme-icon--dark,
html[data-theme="dark"] [data-theme-toggle] .theme-icon--dark {
    display: none;
}

.btn-icon.is-dark .theme-icon--light,
[data-theme-toggle].is-dark .theme-icon--light,
html[data-theme="dark"] [data-theme-toggle] .theme-icon--light {
    display: block;
}

.lang-switcher {
    position: relative;
}

.lang-switcher__toggle {
    width: auto !important;
    padding: 0 10px !important;
    gap: 4px !important;
}

.lang-switcher__code {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 100;
}

.lang-switcher.is-open .lang-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher__menu a {
    display: block;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    border-radius: 8px;
    transition: background var(--transition), color var(--transition);
}

.lang-switcher__menu a:hover,
.lang-switcher__menu a.is-active {
    background: var(--bg-section);
    color: var(--primary);
}

.lang-switcher__menu a.is-active { font-weight: 600; }

@media (max-width: 900px) {
    .header-prefs {
        order: -1;
    }

    .lang-switcher__code {
        display: none;
    }
}