:root {
    --page-bg: #07111f;
    --page-fg: #e5eefc;
    --accent: #41c8c6;
    --surface: color-mix(in srgb, var(--page-bg) 94%, var(--page-fg));
    --raised: color-mix(in srgb, var(--page-bg) 87%, var(--page-fg));
    --muted: color-mix(in srgb, var(--page-fg) 75%, var(--page-bg));
    --line: color-mix(in srgb, var(--page-fg) 28%, var(--page-bg));
}
body { background: var(--page-bg); color: var(--page-fg); }
.nav-link-item, .search-box, .autocomplete-item, .card-header h3,
.link-title, .component-model, .component-group-label, .device-type-section h4 { color: var(--page-fg); }
.logo, .nav-icon, .search-icon, .stats-bar span, .nav-account { color: var(--accent); }
.logo { text-shadow: none; }
.logo-sub, .stats-bar, .autocomplete-item .meta, .no-match-item,
.link-url, .link-phone, .component-name, .component-detail, .reset-btn,
.search-box::placeholder, .text-muted { color: var(--muted) !important; }
.search-box-wrapper, .autocomplete-list, #result-card, .card-header,
.link-card, .device-type-section, .component-notes, .bg-light { background: var(--surface) !important; color: var(--page-fg); }
.search-box-wrapper, .autocomplete-list, .nav-account { border-color: var(--accent); }
.autocomplete-item:hover, .nav-tabs, .component-item, .model-tag { background: var(--raised); color: var(--page-fg); }
.nav-tabs .nav-link { color: var(--muted); }
.nav-tabs .nav-link.active { background: var(--surface); color: var(--page-fg); border-top-color: var(--accent); }
.nav-tabs .nav-link:hover:not(.active) { color: var(--page-fg); }
.datasheet-table th, .datasheet-table td,
.datasheet-table tr:nth-child(even) td, .datasheet-table tr:nth-child(even) th {
    background: var(--surface); color: var(--page-fg); border-color: var(--line);
}
.datasheet-table th, .datasheet-table tr:nth-child(even) th { background: var(--raised); }
.datasheet-container { border-color: var(--line); }
.datasheet-header { background: var(--raised); color: var(--page-fg); }
.card-header, .link-card, .component-notes, .device-type-section { border-color: var(--line); }
#result-card a:not(.btn), .appearance-dialog a { color: var(--accent); }
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-color: var(--page-bg); }
.settings-trigger { background: transparent; border: 1px solid var(--line); border-radius: 20px; padding: 5px 15px; }
.appearance-dialog { width: min(420px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--surface); color: var(--page-fg); box-shadow: 0 20px 70px #0008; }
.appearance-dialog::backdrop { background: #0008; }
.appearance-dialog h2 { font-size: 1.4rem; margin: 0 0 18px; }
.appearance-dialog label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; }
.appearance-dialog select { padding: 8px; border-radius: 6px; }
.appearance-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.appearance-actions button { background: #f8fafc; color: #172b45; border: 1px solid #8393a5; border-radius: 8px; padding: 8px 14px; }
@media(max-width: 520px) { .navbar-custom { padding: 12px; } .nav-links { gap: 10px; } .settings-trigger { padding: 5px 9px; } }

:root[data-theme="light"] { color-scheme: light; --page-bg: #eef4fb; --page-fg: #172233; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-accent="teal"] { --accent: #41c8c6; }
:root[data-accent="blue"] { --accent: #4b82ff; }
:root[data-accent="emerald"] { --accent: #22c98b; }
:root[data-accent="rose"] { --accent: #ef648d; }
:root[data-accent="amber"] { --accent: #e9a931; }
/* Darker equivalents preserve readable link contrast on the light theme. */
:root[data-theme="light"][data-accent="teal"] { --accent: #087975; }
:root[data-theme="light"][data-accent="blue"] { --accent: #285bc3; }
:root[data-theme="light"][data-accent="emerald"] { --accent: #08774f; }
:root[data-theme="light"][data-accent="rose"] { --accent: #b52d58; }
:root[data-theme="light"][data-accent="amber"] { --accent: #875908; }
.appearance-section-title { font-size: 1rem; margin: 20px 0 10px; }
.theme-mode-controls { display: flex; gap: 8px; }
.theme-mode-controls button, .accent-swatch { background: var(--raised); color: var(--page-fg); border: 2px solid var(--line); border-radius: 10px; padding: 10px; }
.theme-mode-controls button { flex: 1; }
.accent-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.accent-swatch { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .9rem; }
.accent-swatch span { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.accent-swatch[data-accent="teal"] span { background: #41c8c6; }
.accent-swatch[data-accent="blue"] span { background: #4b82ff; }
.accent-swatch[data-accent="emerald"] span { background: #22c98b; }
.accent-swatch[data-accent="rose"] span { background: #ef648d; }
.accent-swatch[data-accent="amber"] span { background: #e9a931; }
.appearance-dialog button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.appearance-dialog button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }