:root {
    color-scheme: light dark;
    --color-canvas: #f1f3f2;
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f8f7;
    --color-text: #000000;
    --color-muted: #626262;
    --color-border: #737b76;
    --color-border-subtle: #dedfdf;
    --color-brand: #ef2f50;
    --color-brand-text: #9c1730;
    --color-brand-action: #c9163a;
    --color-brand-action-hover: #a91231;
    --color-on-brand: #ffffff;
    --color-danger: #7d1024;
    --color-danger-surface: #fff0f2;
    --color-danger-border: #b51d38;
    --color-danger-action: #b42318;
    --color-on-danger: #ffffff;
    --color-success: #356b00;
    --color-success-surface: #edf8e8;
    --color-success-border: #5fb904;
    --color-warning: #654100;
    --color-warning-surface: #fff8e8;
    --color-warning-border: #c17b00;
    --color-link: #1a73e8;
    --color-focus: #007aff;
    --color-shadow: rgb(0 0 0 / 12%);
    --color-overlay: rgb(0 0 0 / 58%);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-canvas);
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-canvas: #000000;
        --color-surface: #23262a;
        --color-surface-subtle: #2d3035;
        --color-text: #ffffff;
        --color-muted: #bbbbbb;
        --color-border: #6f757b;
        --color-border-subtle: #4f5459;
        --color-brand-text: #ff8da1;
        --color-danger: #ffb4ab;
        --color-danger-surface: #3c1418;
        --color-danger-border: #ff7b72;
        --color-success: #b9f6a1;
        --color-success-surface: #173612;
        --color-success-border: #7cd954;
        --color-warning: #ffdda1;
        --color-warning-surface: #402c09;
        --color-warning-border: #e8a344;
        --color-link: #8ab4f8;
        --color-focus: #73b7ff;
        --color-shadow: rgb(0 0 0 / 45%);
        --color-overlay: rgb(0 0 0 / 75%);
    }
}

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

body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-text);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

button,
input {
    font: inherit;
}

a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-brand-text);
}

a[href],
button:not(:disabled) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--color-brand) 18%, transparent);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

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

.invalid {
    outline: 2px solid var(--color-danger-border);
}

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

.route-error {
    width: min(calc(100% - 2rem), 46rem);
    margin: 2rem auto;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-danger-border);
    border-radius: 0.5rem;
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.8rem calc(3.5rem + env(safe-area-inset-right)) calc(0.8rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    border-top: 1px solid var(--color-danger-border);
    background: var(--color-danger-surface);
    box-shadow: 0 -0.25rem 1rem var(--color-shadow);
    color: var(--color-danger);
}

#blazor-error-ui .reload {
    margin-left: 0.5rem;
    color: inherit;
    font-weight: 800;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.35rem;
    right: calc(0.5rem + env(safe-area-inset-right));
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentcolor;
    cursor: pointer;
    font-size: 1.5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--color-border-subtle);
    stroke-width: 0.6rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.loading-progress circle:last-child {
    stroke: var(--color-brand);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--color-muted);
    font-weight: 800;
    text-align: center;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading…");
}

@media (prefers-reduced-motion: reduce) {
    .loading-progress circle:last-child {
        transition: none;
    }
}