:root {
    color-scheme: light;
    --color-page: #f5f7fb;
    --color-surface: #ffffff;
    --color-surface-raised: #fbfcfe;
    --color-border: #d9e0ea;
    --color-border-strong: #bdc8d8;
    --color-text: #1f2937;
    --color-heading: #172033;
    --color-muted: #667085;
    --color-subtle: #8a97a8;
    --color-brand: #0f766e;
    --color-brand-strong: #115e59;
    --color-brand-soft: #d8f3ef;
    --color-info: #2563eb;
    --color-info-soft: #dbeafe;
    --color-success: #16803c;
    --color-success-soft: #dcfce7;
    --color-warning: #b45309;
    --color-warning-soft: #fef3c7;
    --color-critical: #b42318;
    --color-critical-strong: #912018;
    --color-critical-soft: #fee4e2;
    --workspace-bg: #191b20;
    --workspace-bg-deep: #0b0d11;
    --workspace-panel: #1c1f25;
    --workspace-panel-raised: #22262d;
    --workspace-border: rgba(148, 163, 184, 0.22);
    --workspace-text: #e5e7eb;
    --workspace-muted: #aeb7c5;
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.08);
    --radius-card: 8px;
    --radius-control: 6px;
    --sidebar-bg: #14161a;
    --sidebar-bg-deep: #050609;
    --sidebar-border: rgba(229, 231, 235, 0.16);
    --sidebar-text: #f4f4f5;
    --sidebar-muted: #c6c8ce;
    --sidebar-subtle: #8f949d;
    --sidebar-accent: #f05a54;
    --sidebar-active: rgba(240, 90, 84, 0.16);
    --font-sans: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-page);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
}

a {
    color: var(--color-brand-strong);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

h1:focus {
    outline: none;
}

.page-stack {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem 1.25rem 2rem;
}

.page-header {
    display: grid;
    gap: 0.55rem;
    padding: 0.25rem 0 0.75rem;
}

.page-header h1 {
    margin: 0;
    max-width: 820px;
    color: var(--color-heading);
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.page-header p {
    margin: 0;
    max-width: 780px;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.58;
}

.eyebrow {
    margin: 0;
    color: var(--color-brand-strong);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-critical);
}

.validation-message {
    color: var(--color-critical);
}

.blazor-error-boundary {
    border: 1px solid var(--color-critical);
    border-radius: var(--radius-card);
    background: var(--color-critical-soft);
    padding: 1rem;
    color: var(--color-text);
}

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

.darker-border-checkbox.form-check-input {
    border-color: var(--color-subtle);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}