*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--font-size); line-height: 1.4; color: var(--c-text); background: var(--c-bg); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-2); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--c-border); background: var(--c-surface); border-radius: var(--radius); padding: var(--space-2) var(--space-3); min-height: 40px; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--c-primary); color: var(--c-primary-text); border-color: var(--c-primary); }
button.danger { color: var(--c-down); }
button.icon-button { min-width: 40px; padding: var(--space-1); }
button.link-button { border: none; background: none; text-decoration: underline; min-height: auto; padding: 0; }
input, select { border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-2); background: var(--c-surface); min-height: 40px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.up { color: var(--c-up); }
.down { color: var(--c-down); }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.loading { padding: var(--space-6); text-align: center; color: var(--c-muted); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: var(--space-3); background: var(--c-warning-bg); z-index: 100; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }