.app-boot {
    position: fixed;
    z-index: 5;
    inset: 0;
    display: grid;
    place-content: center;
    gap: .5rem;
    padding: 1rem;
    background: var(--color-bg, #f7f7fc);
    color: var(--color-text, #1d1b20);
    text-align: center;
}

.app-boot strong { color: var(--color-brand, #5757cc); font-size: 1.5rem; }
.app-boot span { color: var(--color-text-muted, #686572); }
.app-boot img { width: 6rem; margin-inline: auto; border-radius: 1.5rem; }

#blazor-error-ui {
    position: fixed;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    z-index: 1000;
    display: none;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border-radius: 1.5rem;
    background: var(--color-danger, #892f3e);
    color: white;
    box-shadow: var(--shadow-md, 0 8px 30px rgb(0 0 0 / 20%));
}

#blazor-error-ui .reload {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: .75rem;
    color: white;
    font-weight: 700;
}

#blazor-error-ui .dismiss {
    display: inline-grid;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    margin-inline-start: auto;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    background: transparent;
    color: white;
    cursor: pointer;
}

#blazor-error-ui.is-minimized {
    inset-inline-start: auto;
    padding: .25rem;
}

#blazor-error-ui.is-minimized :is(.error-message-text, .reload) { display: none; }
#blazor-error-ui :is(.reload, .dismiss):focus-visible { outline: .2rem solid white; outline-offset: .1rem; }

.blazor-error-boundary {
    padding: 1rem;
    border-inline-start: .3rem solid #a93647;
}