html, body {
    font-family : Arial, sans-serif;
    margin      : 0;
    padding     : 0;
    height      : 100%;
    overflow-x  : hidden;
    max-width   : 100vw;
    background  : #F0F4F9;
    color       : #2C3E58;
}

#blazor-error-ui {
    background  : #F9EAEA;
    color       : #8B1A1A;
    bottom      : 0;
    box-shadow  : 0 -4px 8px rgba(44, 62, 88, 0.2);
    display     : none;
    left        : 0;
    padding     : 1rem 2rem;
    position    : fixed;
    width       : calc(100% - 4rem);
    z-index     : 9999;
    font-weight : 600;
    font-size   : 14px;
    border-top  : 3px solid #8B1A1A;
}

#blazor-error-ui::before {
    content     : "⚠ ";
    font-size   : 16px;
    margin-right: 8px;
}

#blazor-error-ui .dismiss {
    cursor       : pointer;
    position     : absolute;
    right        : 1rem;
    top          : 50%;
    transform    : translateY(-50%);
    background   : rgba(139, 26, 26, 0.1);
    border       : 1px solid rgba(139, 26, 26, 0.3);
    border-radius: 4px;
    padding      : 4px 8px;
    color        : #8B1A1A;
    font-weight  : bold;
}

#blazor-error-ui .dismiss:hover {
    background : rgba(139, 26, 26, 0.2);
}

#blazor-error-ui .reload {
    color           : #B85C00;
    text-decoration : underline;
    font-weight     : bold;
    margin-left     : 12px;
}

#blazor-error-ui .reload:hover {
    color : #8B1A1A;
}