:root {
    color-scheme: light;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    --background: #f6f2f8;
    --surface: #ffffff;
    --surface-alt: #eee5f3;
    --text: #251c2b;
    --text-muted: #675b6c;
    --border: #d8cedd;
    --input-border: #776687;
    --primary: #9d6be8;
    --primary-text: #160d20;
    --link: #6b35ad;
    --danger: #733b48;
    --danger-text: #ffffff;
    --danger-link: #a1263e;
    --error: #a1263e;
    --success: #167445;
    --warning: #9a5317;
    --focus: #7d46c5;
    --disabled: #c8becd;
    --disabled-text: #655d69;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #17131d;
    --surface: #241d2d;
    --surface-alt: #382d44;
    --text: #f5efff;
    --text-muted: #b9acbf;
    --border: #50435f;
    --input-border: #776687;
    --primary: #9d6be8;
    --primary-text: #160d20;
    --link: #cfaaff;
    --danger: #733b48;
    --danger-text: #ffffff;
    --danger-link: #ffaca8;
    --error: #ffaca8;
    --success: #86e1aa;
    --warning: #ffbf86;
    --focus: #c89cff;
    --disabled: #4b4351;
    --disabled-text: #a69dab;
}

body { margin: 0; background: var(--background); color: var(--text); }
.container { width: min(92%, 48rem); margin: 0 auto; padding: 2rem 0 4rem; }
.container.wide { width: min(94%, 68rem); }
.container.narrow { width: min(92%, 34rem); }
header { margin: 2rem 0; }
h1 { margin-bottom: .25rem; font-size: clamp(2rem, 8vw, 3.5rem); }
h2 { margin-top: 0; }
.card { padding: 1.25rem; margin: 1rem 0; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
label { display: block; margin-bottom: .4rem; font-weight: 650; }
input, textarea, select { box-sizing: border-box; width: 100%; margin-bottom: .75rem; padding: .75rem; border: 1px solid var(--input-border); border-radius: .4rem; background: var(--surface); color: var(--text); font: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .85; }
button { margin-top: 1rem; padding: .7rem 1.1rem; border: 0; border-radius: .4rem; background: var(--primary); color: var(--primary-text); font: inherit; font-weight: 700; cursor: pointer; }
button:disabled, input:disabled, textarea:disabled, select:disabled { color: var(--disabled-text); cursor: not-allowed; }
button:disabled { background: var(--disabled); }
input:disabled, textarea:disabled, select:disabled { border-color: var(--disabled); background: var(--surface-alt); }
a { color: var(--link); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.error { color: var(--error); }
.hidden { display: none !important; }
.live-status { color: var(--success); font-size: .9rem; }
.live-status.offline { color: var(--warning); }
.player-status { margin-bottom: 1rem; }
.waiting-callout { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; padding: .9rem; border-radius: .5rem; background: var(--surface-alt); }
.big-position { font-size: 1.45rem; }
.queue-panel h3 { margin-bottom: .4rem; }
.hint, .count { color: var(--text-muted); }
.hint { margin-top: -.5rem; font-size: .9rem; }
.top-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-navigation { margin-top: 1.25rem; }
.page-navigation .back { margin-top: 0; }
.inline { display: inline; }
.inline button, .actions button { margin-top: 0; }
.secondary { background: var(--border); color: var(--text); }
.danger { background: var(--danger); color: var(--danger-text); }
.link-button { padding: .25rem 0; background: transparent; color: var(--link); text-decoration: underline; }
.link-button.danger { color: var(--danger-link); }
.eyebrow { margin-bottom: -.75rem; color: var(--link); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.campaign-list, .queue { padding-left: 1.5rem; }
.campaign-list li, .queue li { margin: .65rem 0; }
.campaign-list a { display: flex; justify-content: space-between; gap: 1rem; }
code { padding: .15rem .35rem; border-radius: .25rem; background: var(--surface-alt); }
.join-code { font-size: 1.2em; letter-spacing: .12em; }
.queue li { padding-left: .5rem; }
.queue li.own { padding: .5rem; border-radius: .35rem; background: var(--surface-alt); }
.queue li div { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
time { color: var(--text-muted); font-size: .9rem; }
.back { display: inline-block; margin-top: 1rem; }
.dm-queue { display: grid; gap: .75rem; }
.queue-entry { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: .6rem; }
.position { font-size: 1.5rem; font-weight: 800; text-align: center; }
.entry-content { display: grid; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.actions form { margin: 0; }
.actions button { padding: .5rem .7rem; }
.actions .compact { min-width: 2.25rem; }
.player-list { padding: 0; list-style: none; }
.player-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.player-list form, .danger-zone form { margin: 0; }
.player-list button { margin: 0; padding: .5rem .7rem; }
.player-summary { display: grid; min-width: 0; }
.player-waiting-status { margin: 0; }
.danger-zone { border-color: var(--danger); }
.danger-zone p { max-width: 42rem; }
.status-message { padding: .75rem 1rem; border: 1px solid var(--success); border-radius: .5rem; color: var(--success); }
.error-card { margin-top: 4rem; }

.ui-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2rem; margin-bottom: -1rem; }
.toolbar-brand { color: var(--text); font-size: .875rem; font-weight: 700; text-decoration: none; }
.toolbar-controls { display: flex; align-items: center; gap: .6rem; }
.locale-switcher { display: flex; align-items: center; gap: .3rem; color: var(--text-muted); font-size: .8rem; }
.locale-switcher a { color: var(--text-muted); text-decoration: none; }
.locale-switcher a.active { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: .15rem; }
.theme-select { width: auto; min-width: 5.8rem; margin: 0; padding: .3rem 1.4rem .3rem .45rem; font-size: .8rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --background: #17131d;
        --surface: #241d2d;
        --surface-alt: #382d44;
        --text: #f5efff;
        --text-muted: #b9acbf;
        --border: #50435f;
        --input-border: #776687;
        --primary: #9d6be8;
        --primary-text: #160d20;
        --link: #cfaaff;
        --danger: #733b48;
        --danger-text: #ffffff;
        --danger-link: #ffaca8;
        --error: #ffaca8;
        --success: #86e1aa;
        --warning: #ffbf86;
        --focus: #c89cff;
        --disabled: #4b4351;
        --disabled-text: #a69dab;
    }
}

@media (max-width: 42rem) {
    .ui-toolbar { align-items: flex-start; }
    .toolbar-controls { gap: .4rem; }
    .theme-select { min-width: 5.3rem; }
    .queue-entry { grid-template-columns: 2rem 1fr; }
    .actions { grid-column: 1 / -1; justify-content: flex-start; }
    .player-list li { align-items: flex-start; }
}