:root {
    color-scheme: light;
    --st-body-bg: #fff6e9;
    --st-body-text: #1d1b38;
    --st-link-color: #a855f7;
    --st-link-hover-color: #7c3aed;
    --st-top-row-bg: #fde68a;
    --st-top-row-border: #f59e0b;
    --st-top-row-text: #78350f;
    --st-sidebar-bg-start: #a855f7;
    --st-sidebar-bg-end: #f97316;
    --st-nav-top-row-bg: rgba(168, 85, 247, 0.85);
    --st-nav-brand-color: #fff7ed;
    --st-nav-link-color: #fde68a;
    --st-nav-link-hover-bg: rgba(253, 224, 71, 0.3);
    --st-nav-link-active-bg: rgba(253, 224, 71, 0.5);
    --st-nav-toggle-border: rgba(253, 224, 71, 0.45);
    --st-theme-toggle-bg: rgba(236, 72, 153, 0.25);
    --st-theme-toggle-hover-bg: rgba(236, 72, 153, 0.4);
    --st-theme-toggle-color: #fff7ed;
    --st-primary-bg: #ec4899;
    --st-primary-border: #db2777;
    --st-error-bg: #f43f5e;
    /* Android WebView edge-to-edge often reports 0 for env(safe-area-inset-bottom); keep >=56px clearance for 3-button / gesture nav (48dp bar + margin). */
    --st-bottom-inset: max(env(safe-area-inset-bottom, 0px), 3.5rem);
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --st-body-bg: #0b1120;
    --st-body-text: #f8fafc;
    --st-link-color: #22d3ee;
    --st-link-hover-color: #0ea5e9;
    --st-top-row-bg: #1e1b4b;
    --st-top-row-border: #4338ca;
    --st-top-row-text: #ede9fe;
    --st-sidebar-bg-start: #1e1b4b;
    --st-sidebar-bg-end: #6d28d9;
    --st-nav-top-row-bg: rgba(30, 27, 75, 0.92);
    --st-nav-brand-color: #fdf4ff;
    --st-nav-link-color: #c4b5fd;
    --st-nav-link-hover-bg: rgba(14, 165, 233, 0.25);
    --st-nav-link-active-bg: rgba(244, 114, 182, 0.4);
    --st-nav-toggle-border: rgba(56, 189, 248, 0.4);
    --st-theme-toggle-bg: rgba(56, 189, 248, 0.25);
    --st-theme-toggle-hover-bg: rgba(244, 114, 182, 0.4);
    --st-theme-toggle-color: #fdf4ff;
    --st-primary-bg: #22d3ee;
    --st-primary-border: #0ea5e9;
    --st-error-bg: #f87171;
}

html,
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--st-body-bg);
    color: var(--st-body-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

a,
.btn-link {
    color: var(--st-link-color);
    transition: color 0.2s ease;
}

a:hover,
.btn-link:hover {
    color: var(--st-link-hover-color);
}

.btn-primary {
    color: #fff;
    background-color: var(--st-primary-bg);
    border-color: var(--st-primary-border);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: var(--st-error-bg);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

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