:root { --font-sans: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; --font-mono: 'Cascadia Mono', 'SFMono-Regular', ui-monospace, monospace; color: #172019; font-family: var(--font-sans); font-synthesis: none; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #f3f5f1; }
body { line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #75a52c; outline-offset: 3px; }
h1:focus { outline: none; }
h1, h2, p { margin-top: 0; }
.eyebrow { color: #718077; font: 500 10px/1.2 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.page-heading h1 { margin: 10px 0 8px; color: #172019; font-size: clamp(36px, 5vw, 58px); line-height: 1; letter-spacing: -.055em; }
.page-heading p { max-width: 630px; margin-bottom: 0; color: #657168; font-size: 14px; }
.primary-action { min-height: 43px; padding: 0 18px; color: #172019; background: #bbf451; border: 0; border-radius: 8px; font-weight: 750; box-shadow: 0 7px 18px rgba(90, 124, 37, .14); }
.primary-action:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .48; }
.empty-panel { min-height: 260px; display: flex; align-items: flex-start; gap: 28px; padding: clamp(28px, 5vw, 54px); background: #fff; border: 1px solid #dce2dc; border-radius: 14px; box-shadow: 0 14px 45px rgba(22, 36, 26, .045); }
.empty-index { color: #9caa9f; font: 500 11px/1 var(--font-mono); }
.empty-panel h2 { margin-bottom: 10px; font-size: 21px; letter-spacing: -.025em; }
.empty-panel p { max-width: 540px; color: #6c786f; font-size: 14px; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #56a719; }
.invalid { outline: 1px solid #c55047; }
.validation-message { color: #a5352d; }
.blazor-error-boundary { padding: 1rem; color: #fff; background: #8d241b; border-radius: 8px; }
.blazor-error-boundary::after { content: 'An error has occurred.'; }
@media (max-width: 640px) {
    .page-heading { align-items: stretch; flex-direction: column; margin-bottom: 28px; }
    .empty-panel { min-height: 220px; gap: 16px; }
}