/* ============================================
   THEME SELECTOR CSS
   ============================================ */

:root {
    --theme-bg: #000000;
    --theme-text: #ffffff;
    --theme-accent: #e5e5e5;
    --theme-btn-text: #000000;
    --theme-surface: #1a1a1a;
    --theme-text-dim: #b3b3b3;
    --theme-border: #666666;
}

#theme-selector {
    background: var(--theme-accent);
    color: var(--theme-btn-text);
    border: 2px solid var(--theme-accent);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    outline: none;
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

#theme-selector:hover {
    opacity: 0.9;
}

#theme-selector:focus {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
}

#theme-selector option {
    background: var(--theme-surface);
    color: var(--theme-text);
    padding: 8px;
}

body,
section,
input,
button,
select,
a,
.modal-content {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}