[x-cloak] { display: none !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #090d16; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }
.glow-card { box-shadow: 0 0 50px -10px rgb(16 185 129 / 10%); }
.glow-playing { box-shadow: 0 0 25px -5px rgb(16 185 129 / 15%); }
.glow-timer { text-shadow: 0 0 15px rgb(16 185 129 / 30%); }
.blur-glass { backdrop-filter: blur(12px); }
.dashboard-dialog::backdrop { background: rgb(2 6 23 / 80%); backdrop-filter: blur(4px); }
[data-queue-entry][hidden] { display: none; }
.errorlist { color: #fb7185; font-size: .75rem; margin: .4rem 0; }
fieldset input[type="text"], fieldset select { width: 100%; margin-top: .25rem; padding: .5rem; border: 1px solid #1e293b; border-radius: .5rem; background: #020617; color: #e2e8f0; }
fieldset input[type="checkbox"] { width: auto; margin-right: .35rem; accent-color: #4f46e5; }
fieldset ul { display: flex; gap: .75rem; list-style: none; padding: 0; }
.dark-field input:not([type="checkbox"]), .dark-field select { width: 100%; margin-top: .25rem; padding: .6rem; border: 1px solid #1e293b; border-radius: .5rem; background: #020617; color: #e2e8f0; }
.dark-field input[type="checkbox"] { accent-color: #4f46e5; }
select[data-player-eta] { color-scheme: dark; background-color: #020617; color: #cbd5e1; border: 1px solid #1e293b; border-radius: .375rem; padding: .25rem .5rem; font-size: .625rem; font-weight: 700; }
select[data-player-eta] option { background-color: #020617; color: #cbd5e1; }
select[data-player-eta]:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
/* Temporary legacy-page styling while the remaining approved pages are ported. */
.container { flex: 1; overflow-y: auto; padding: 1.5rem; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-heading h1 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; }
.eyebrow { color: #64748b; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.card, .narrow-card, .empty-state { background: #0f172a; border: 1px solid #1e293b; border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem; }
.narrow-card { max-width: 36rem; margin: 3rem auto; }
.stack { display: grid; gap: 1rem; }
.card h2 { font-weight: 800; text-transform: uppercase; color: #94a3b8; font-size: .8rem; margin-bottom: 1rem; }
.card input:not([type="checkbox"]), .card select, .narrow-card input:not([type="checkbox"]), .narrow-card select { background: #020617; border: 1px solid #1e293b; color: #e2e8f0; border-radius: .5rem; padding: .6rem; }
.card label, .narrow-card label { color: #94a3b8; font-size: .75rem; font-weight: 700; }
.card button, .narrow-card button, .button, .stack > button { background: #4f46e5; border-radius: .5rem; color: white; padding: .6rem 1rem; font-weight: 700; font-size: .75rem; }
.card table { width: 100%; text-align: left; font-size: .75rem; }
.card th, .card td { padding: .75rem; border-bottom: 1px solid #1e293b; }
.card a { color: #818cf8; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.stats dt { color: #64748b; font-size: .7rem; }.stats dd { font-weight: 700; }
.filter-row, .form-grid { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }