:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #6f8cff;
    --primary-hover: #8aa1ff;
    --bg: #0f172a;
    --card-bg: #111827;
    --surface: #111827;
    --text: #f1f5f9;
    --text-main: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --muted: #94a3b8;
    --border: #273449;
    --shadow: 0 8px 28px rgba(0, 0, 0, .28);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .22);
    --shadow-lg: 0 10px 36px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] body {
    background: var(--bg) !important;
    color: var(--text, var(--text-main)) !important;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] main {
    border-color: var(--border) !important;
    background-color: var(--card-bg, var(--surface)) !important;
    color: var(--text, var(--text-main)) !important;
}

html[data-theme="dark"] .header {
    background: rgba(17, 24, 39, .92) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border-color: var(--border) !important;
    background-color: #0b1220 !important;
    color: var(--text, var(--text-main)) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted, var(--muted)) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] tr,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .app-item,
html[data-theme="dark"] .application-item {
    border-color: var(--border) !important;
}

html[data-theme="dark"] tr:hover,
html[data-theme="dark"] .list-item:hover,
html[data-theme="dark"] .app-item:hover,
html[data-theme="dark"] .application-item:hover {
    background-color: rgba(111, 140, 255, .08) !important;
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    border-color: var(--border) !important;
    background-color: #0b1220 !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .description {
    color: var(--text-secondary, var(--text-muted)) !important;
}

html[data-theme="dark"] .important {
    border-left-color: #f59e0b !important;
    background: #30230c !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .contact,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .notice {
    border-color: var(--border) !important;
    background: rgba(111, 140, 255, .1) !important;
}


html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus,
html[data-theme="dark"] .form-group select:focus,
html[data-theme="dark"] .terms-consent,
html[data-theme="dark"] .developer-notice,
html[data-theme="dark"] .credential-card,
html[data-theme="dark"] .iti__country-list,
html[data-theme="dark"] .iti__selected-country,
html[data-theme="dark"] th,
html[data-theme="dark"] .btn-refresh,
html[data-theme="dark"] .toc-sidebar,
html[data-theme="dark"] .meta-card,
html[data-theme="dark"] .markdown-body table,
html[data-theme="dark"] .markdown-body th {
    border-color: var(--border) !important;
    background: #172033 !important;
    color: var(--text, var(--text-main)) !important;
}

html[data-theme="dark"] .nav-item a:hover,
html[data-theme="dark"] .nav-item a.active,
html[data-theme="dark"] .toolbar-button:hover,
html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .markdown-body tbody tr:hover,
html[data-theme="dark"] .iti__country.iti__highlight {
    background: rgba(111, 140, 255, .12) !important;
}

html[data-theme="dark"] .markdown-body,
html[data-theme="dark"] .markdown-body h1,
html[data-theme="dark"] .markdown-body h2,
html[data-theme="dark"] .markdown-body h3,
html[data-theme="dark"] .markdown-body strong,
html[data-theme="dark"] .markdown-body td,
html[data-theme="dark"] .meta-value {
    color: var(--text, var(--text-main)) !important;
}

html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .error { background:#3b1720 !important; color:#fecdd3 !important; border-color:#7f1d2d !important; }
html[data-theme="dark"] .alert-success { background:#0d2f25 !important; color:#bbf7d0 !important; border-color:#166534 !important; }
html[data-theme="dark"] .alert-info { background:#15264b !important; color:#bfdbfe !important; border-color:#1e40af !important; }
html[data-theme="dark"] .service-notice { background:#30230c !important; color:#fde68a !important; }
html[data-theme="dark"] .global-theme-control { background:#111827; }

.global-theme-control {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border, #e9ecef);
    border-radius: 999px;
    background: var(--card-bg, var(--surface, #fff));
    background: color-mix(in srgb, var(--card-bg, var(--surface, #fff)) 92%, transparent);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
    backdrop-filter: blur(12px);
}

.global-theme-toggle,
.global-theme-auto {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text, var(--text-main, #212529));
    cursor: pointer;
    font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.global-theme-toggle {
    min-width: 76px;
    padding: 0 12px;
}

.global-theme-auto {
    padding: 0 10px;
    color: var(--text-secondary, var(--text-muted, #6c757d));
}

.global-theme-toggle:hover,
.global-theme-auto:hover,
.global-theme-auto.is-active {
    background: rgba(67, 97, 238, .12);
    color: var(--primary, #4361ee);
}

.global-theme-toggle:focus-visible,
.global-theme-auto:focus-visible {
    outline: 2px solid var(--primary, #4361ee);
    outline-offset: 2px;
}

.top-actions .global-theme-toggle {
    display: grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid var(--border, #e9ecef);
    border-radius: 9px;
}

.top-actions .global-theme-auto {
    height: 31px;
    min-height: 31px;
    padding: 0 8px;
    border: 1px solid var(--border, #e9ecef);
    border-radius: 8px;
    font-size: 11px;
}

@media (max-width: 640px) {
    .global-theme-control { right: 12px; bottom: 12px; }
    .global-theme-toggle { min-width: 68px; padding: 0 10px; }
}