.player-shell {
    --player-bg: #f4f6fb;
    --player-surface: #ffffff;
    --player-surface-raised: #ffffff;
    --player-text: #172033;
    --player-muted: #667085;
    --player-border: #dfe4ec;
    --player-accent: #4f46e5;
    --player-accent-strong: #4338ca;
    --player-prize: #b45309;
    color: var(--player-text);
    background: var(--player-bg);
}

.player-shell[data-bs-theme="dark"] {
    --player-bg: #0f1522;
    --player-surface: #182131;
    --player-surface-raised: #202b3d;
    --player-text: #edf2f8;
    --player-muted: #a8b3c5;
    --player-border: #334155;
    --player-accent: #8b82ff;
    --player-accent-strong: #a39cff;
    --player-prize: #fbbf24;
    --bs-body-bg: var(--player-bg);
    --bs-body-color: var(--player-text);
    --bs-border-color: var(--player-border);
    --bs-secondary-color: var(--player-muted);
    --bs-tertiary-bg: #253146;
}

.player-shell .player-content { min-height: calc(100dvh - 4rem); background: var(--player-bg); }
.player-shell .player-header,
.player-shell .player-bottom-nav { background: color-mix(in srgb, var(--player-surface) 92%, transparent); border-color: var(--player-border) !important; backdrop-filter: blur(12px); }
.player-shell .card,
.player-shell .modal-content,
.player-shell .list-group-item,
.player-shell .table { --bs-card-bg: var(--player-surface); --bs-modal-bg: var(--player-surface-raised); --bs-list-group-bg: var(--player-surface); --bs-table-bg: var(--player-surface); }
.player-shell .text-body-secondary,
.player-shell .form-text { color: var(--player-muted) !important; }
.player-shell .navbar-brand,
.player-shell .nav-link:not(.active) { color: var(--player-text); }
.player-shell .brand-mark,
.player-shell .text-primary { color: var(--player-accent) !important; }
.player-shell .btn-primary { --bs-btn-bg: var(--player-accent); --bs-btn-border-color: var(--player-accent); --bs-btn-hover-bg: var(--player-accent-strong); --bs-btn-hover-border-color: var(--player-accent-strong); }
.player-shell .form-control,
.player-shell .form-select { background-color: var(--player-surface-raised); border-color: var(--player-border); color: var(--player-text); }
.player-theme-choice { cursor: pointer; }
.player-theme-choice .card { transition: border-color .15s ease, box-shadow .15s ease; }
.player-theme-choice input:checked + .card { border-color: var(--player-accent); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--player-accent) 22%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .player-theme-choice .card { transition: none; }
}