*,
::before,
::after,
::backdrop {
    border-color: var(--border);
}

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

.border,
.border-x,
.border-y,
.border-t,
.border-r,
.border-b,
.border-l {
    border-color: var(--border);
}
/* Update your existing block */
body {
    background-color: var(--background);
    color: var(--foreground);
    margin: 0;
    font-family: var(--font-sans, system-ui, sans-serif);
    transition: background-color 0.3s, color 0.3s;
}

.loading-progress {
    position: fixed;
    inset: 50% auto auto 50%;
    width: 5rem;
    height: 5rem;
    margin: -2.5rem 0 0 -2.5rem;
    display: block;
    transform: rotate(-90deg);
}

.loading-progress circle {
    fill: none;
    stroke-width: 0.4rem;
    transform-origin: 50% 50%;
}

.loading-progress circle:first-child {
    stroke: color-mix(in oklch, var(--foreground), transparent 80%);
}

.loading-progress circle:last-child {
    stroke: var(--primary);
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: calc(283px * var(--blazor-load-percentage, 1));
    transition: stroke-dashoffset 0.2s ease;
}

.loading-progress-text {
    position: fixed;
    inset: calc(50% + 3.5rem) 0 auto;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.95rem;
    font-weight: 500;
}

.loading-progress-text::after {
    content: "Loading...";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in oklch, var(--destructive), transparent 55%);
    border-radius: 8px;
    background: color-mix(in oklch, var(--card), var(--destructive) 12%);
    color: var(--card-foreground);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    margin-left: 0.75rem;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    text-decoration: none;
}

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 8px;
    background: color-mix(in oklch, var(--card), var(--destructive) 14%);
    color: var(--card-foreground);
}

.nav-bg {
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(5px);
    position: fixed;
    z-index:1000;
}

.blur-bg {
    backdrop-filter: blur(5px);
    background-color: color-mix(in oklch, var(--card), transparent 45%);
}