:root { font-family: system-ui, sans-serif; color: var(--bs-body-color, #17202a); background: var(--bs-body-bg, #f7f9fb); }
* { box-sizing: border-box; }
body { margin: 0; }
.app-shell { min-height: 100vh; }
.app-shell main { height: auto; overflow: visible; }
.app-header { min-height: 4rem; display: flex; align-items: center; gap: 2rem; padding: 0 1.5rem; background: var(--mathesio-header-bg, var(--bs-body-bg, #fff)); color: var(--mathesio-nav-text, var(--bs-body-color)); border-bottom: 1px solid var(--bs-border-color, #dde3ea); }
.app-brand { color: inherit; font-weight: 700; text-decoration: none; }
.app-nav a, .app-nav .app-nav-button { color: var(--mathesio-nav-text, var(--bs-body-color, #38506a)); text-decoration: none; }
.app-content, .error-page { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: 3rem 0; }
.welcome { max-width: 42rem; }
.eyebrow { color: var(--bs-primary, #476d96); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; padding: .75rem 1rem; background: #fff3cd; color: #5f4300; }
:root[data-bs-theme="dark"] { color-scheme: dark; }
[data-bs-theme="dark"] .app-header { background: #212529; border-bottom-color: #495057; }
[data-bs-theme="dark"] .app-nav a { color: #dee2e6; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8bb9fe; --bs-btn-border-color: #8bb9fe; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #adb5bd; --bs-btn-border-color: #adb5bd; }