:root[data-theme="light"] {
    color-scheme: light;
    --surface-page: #f6f7f9;
    --surface-primary: #ffffff;
    --surface-secondary: #f9fafb;
    --surface-tertiary: #f1f3f5;
    --bg-color: #f6f7f9;
    --card-bg: #ffffff;
    --text-primary: #171a21;
    --text-secondary: #5f6672;
    --text-muted: #7b8491;
    --border-color: #d9dee5;
    --border-strong: #c5ccd5;
    --primary-color: #1f4f8f;
    --primary-hover: #173f74;
    --primary-text: #1f4f8f;
    --on-primary: #ffffff;
    --primary-subtle: #edf4fc;
    --accent-color: #1f4f8f;
    --accent-hover: #173f74;
    --accent-text: #1f4f8f;
    --success-color: #18794e;
    --success-subtle: #eaf7f0;
    --warning-color: #8a5a00;
    --warning-subtle: #fff8e1;
    --danger-color: #b42318;
    --danger-hover: #8f1c13;
    --danger-subtle: #fff0ee;
    --info-color: #1f4f8f;
    --focus-outline: #2f6fca;
    --player-surface: #f4f5f7;
    --player-elevated: #ffffff;
    --player-chip: #e7e9ed;
    --player-chip-border: #d7dbe1;
    --player-artwork: #dfe7f4;
    --player-artwork-border: #cbd6e8;
    --player-artwork-accent: #315f9e;
    --player-muted: #657084;
    --player-transcript: #f0edea;
    --player-transcript-muted: rgb(23 26 33 / 0.42);
    --player-control: #171a21;
    --player-control-contrast: #ffffff;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-page: #0b0d12;
    --surface-primary: #14171d;
    --surface-secondary: #191d25;
    --surface-tertiary: #202631;
    --bg-color: #0b0d12;
    --card-bg: #14171d;
    --text-primary: #f5f7fa;
    --text-secondary: #b1b8c4;
    --text-muted: #8d96a5;
    --border-color: #303742;
    --border-strong: #46505e;
    --primary-color: #2864ad;
    --primary-hover: #1f5596;
    --primary-text: #9bc1ff;
    --on-primary: #ffffff;
    --primary-subtle: #17243a;
    --accent-color: #0f766e;
    --accent-hover: #0b5f59;
    --accent-text: #76c7bf;
    --success-color: #53c995;
    --success-subtle: #102a21;
    --warning-color: #e8b84f;
    --warning-subtle: #2c2411;
    --danger-color: #ff8a80;
    --danger-hover: #ffb4ad;
    --danger-subtle: #341916;
    --info-color: #8bb8ff;
    --focus-outline: #9bc1ff;
    --player-surface: #080b12;
    --player-elevated: #151922;
    --player-chip: #202631;
    --player-chip-border: #303846;
    --player-artwork: #172033;
    --player-artwork-border: #2d374d;
    --player-artwork-accent: #8da6d5;
    --player-muted: #a5adbb;
    --player-transcript: #15110f;
    --player-transcript-muted: rgb(255 255 255 / 0.38);
    --player-control: #ffffff;
    --player-control-contrast: #080b12;
}

html,
body {
    background: var(--surface-page);
    color: var(--text-primary);
}

.app-header {
    background: color-mix(in srgb, var(--surface-primary) 96%, transparent);
    border-color: var(--border-color);
}

input,
select,
textarea {
    background-color: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

:root[data-theme="dark"] ::selection {
    color: #ffffff;
    background: #315f9e;
}

:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .auth-result,
:root[data-theme="dark"] .dashboard-panel,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .offline-service-item,
:root[data-theme="dark"] .upload-file-item,
:root[data-theme="dark"] .audit-card,
:root[data-theme="dark"] .audit-table-wrapper,
:root[data-theme="dark"] .modal-content {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] table,
:root[data-theme="dark"] th,
:root[data-theme="dark"] td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] th {
    background: var(--surface-tertiary);
}

:root[data-theme="dark"] tr:hover td {
    background: var(--surface-secondary);
}

:root[data-theme="dark"] details,
:root[data-theme="dark"] summary,
:root[data-theme="dark"] .history-item,
:root[data-theme="dark"] .transcript-media-row {
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .live-banner.offline-stream {
    background: var(--surface-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .btn-admin-link,
:root[data-theme="dark"] .btn-back,
:root[data-theme="dark"] .btn-reset-playback {
    color: var(--primary-text);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] a,
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] .tab-btn.active,
:root[data-theme="dark"] .year-title,
:root[data-theme="dark"] .sermon-row-date,
:root[data-theme="dark"] .btn-row-action {
    color: var(--primary-text);
}

:root[data-theme="dark"] .btn-row-action {
    border-color: var(--primary-text);
}

:root[data-theme="dark"] .btn-row-action.audio-btn {
    color: var(--accent-text);
    border-color: var(--accent-text);
}

.appearance-theme-options {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    border: 0;
}

.appearance-theme-options legend {
    grid-column: 1 / -1;
    margin-bottom: 0.15rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 650;
}

.appearance-theme-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 7px);
    cursor: pointer;
}

.appearance-theme-option:has(input:checked) {
    background: var(--primary-subtle);
    border-color: var(--primary-color);
}

.appearance-theme-option input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary-color);
}

body > .card {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body > .card h1,
body > .card strong {
    color: var(--text-primary) !important;
}

body > .card p,
body > .card .account-username {
    color: var(--text-secondary) !important;
}

body > .card .account-summary {
    background: var(--surface-secondary) !important;
}

body > .card .status-success {
    color: var(--success-color) !important;
    background: var(--success-subtle) !important;
    border-color: var(--success-color) !important;
}

body > .card .status-error {
    color: var(--danger-color) !important;
    background: var(--danger-subtle) !important;
    border-color: var(--danger-color) !important;
}

@media (max-width: 480px) {
    .appearance-theme-options {
        grid-template-columns: 1fr;
    }
}