/* Host-level styles for the web PWA: boot screen and Blazor's error UI. */

.boot {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
.boot img { border-radius: 18px; box-shadow: 0 12px 30px rgba(17, 24, 39, 0.2); }
.boot-name { font-weight: 800; font-size: 20px; color: #111827; letter-spacing: -0.3px; }
.boot-bar { width: 160px; height: 4px; border-radius: 4px; background: #E5E7EB; overflow: hidden; }
.boot-bar span {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 10%);
    background: linear-gradient(90deg, #111827, #C9A227);
    transition: width .15s ease;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #FEF3C7;
    color: #92400E;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: system-ui, sans-serif;
}
#blazor-error-ui .reload { font-weight: 700; margin-inline-start: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.6rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Something went wrong on this screen."; }