.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: #c5d6d3;
    font-size: .72rem;
    font-weight: 750;
}

.theme-selector {
    min-height: 36px;
    width: 8.3rem;
    padding: .4rem .55rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;
    background: #102a2b;
    color: #fff;
    cursor: pointer;
    color-scheme: dark;
}

.theme-selector:hover,
.theme-selector:focus-visible {
    border-color: rgba(255, 255, 255, .55);
    outline: none;
    background: #183839;
}

.op-header .op-nav-links {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.op-header .theme-switcher {
    color: var(--op-text-muted);
}

.op-header .theme-selector {
    border-color: var(--op-surface-border);
    background: var(--op-control-bg);
    color: var(--op-text-main);
    color-scheme: normal;
}

.op-header .theme-selector:hover,
.op-header .theme-selector:focus-visible {
    border-color: var(--op-text-muted);
    background: var(--op-secondary-hover-bg);
}

.operator-map-page .theme-toggle {
    display: none;
}

html[data-theme="dark"] .operator-map-page {
    --op-accent: #6ea8fe;
    --op-accent-strong: #1d4ed8;
    --op-emerald: #34d399;
    --op-amber: #fbbf24;
    --op-rose: #fb7185;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .operator-map-page {
        --op-accent: #6ea8fe;
        --op-accent-strong: #1d4ed8;
        --op-emerald: #34d399;
        --op-amber: #fbbf24;
        --op-rose: #fb7185;
    }
}

@media (max-width: 650px) {
    .theme-switcher > span {
        display: none;
    }

    .theme-selector {
        width: 7rem;
    }
}