:root {
    color-scheme: dark;
    --paper: #111715;
    --surface: #1b2420;
    --control: #26322c;
    --ink: #edf3eb;
    --muted: #acbeb2;
    --line: #3c4b42;
    --mint: #c4edda;
    --key-ink: #233a32;
    --focus: #7cd9aa;
    --error-surface: #492b28;
    font-family: 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button, select, input { accent-color: var(--mint); }
a { color: inherit; }
button:disabled, input:disabled, select:disabled { cursor: wait; opacity: .55; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.shell {
    max-width: 1120px;
    padding: 16px;
    margin: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.loading { padding: 24px; }
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    background: var(--error-surface);
    padding: 20px;
    width: 100%;
    z-index: 100;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}