/* ?? Base reset ?? */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #0f1117;
    color: #e2e8f0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

a { color: #818cf8; }
a:hover { color: #a5b4fc; }

.btn-primary {
    color: #fff;
    background-color: #4f46e5;
    border-color: #4338ca;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #1a1d27, 0 0 0 0.25rem #6366f1;
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #22c55e; }
.invalid { outline: 1px solid #ef4444; }
.validation-message { color: #ef4444; }

.blazor-error-boundary {
    background: #7f1d1d;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fca5a5;
}

.blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #475569; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: #dc2626;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#blazor-error-ui a { color: white; font-weight: 600; margin-left: 0.5rem; }