#blazor-error-ui {
 background: lightyellow;
 bottom: 0;
 box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
 display: none;
 left: 0;
 padding: 0.6rem 1.25rem 0.7rem 1.25rem;
 position: fixed;
 width: 100%;
 z-index: 1000;
}

#blazor-error-ui .dismiss {
 cursor: pointer;
 position: absolute;
 right: 0.75rem;
 top: 0.5rem;
}

#blazor-error-ui .reload {
 background: transparent;
 border: 0;
 color: inherit;
 cursor: pointer;
 padding: 0;
 text-decoration: underline;
}

.gixo-reconnect-overlay {
 position: fixed;
 inset: 0;
 z-index: 10000;
 align-items: center;
 justify-content: center;
 background: rgba(15, 23, 42, 0.85);
 backdrop-filter: blur(6px);
}

.gixo-reconnect-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.75rem;
 max-width: 360px;
 padding: 2.5rem 2rem;
 background: rgba(30, 41, 59, 0.95);
 border: 1px solid rgba(0, 217, 255, 0.2);
 border-radius: 18px;
 text-align: center;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.gixo-reconnect-title {
 margin: 0;
 color: #f1f5f9;
 font-size: 1.15rem;
 font-weight: 700;
}

.gixo-reconnect-body {
 margin: 0;
 color: #94a3b8;
 font-size: 0.95rem;
 line-height: 1.5;
}

.gixo-reconnect-reload {
 min-height: 2.25rem;
 padding: 0.45rem 0.9rem;
 border: 1px solid rgba(0, 217, 255, 0.35);
 border-radius: 8px;
 background: rgba(0, 217, 255, 0.12);
 color: #e0faff;
 cursor: pointer;
 font-weight: 700;
}

.gixo-reconnect-reload:hover,
.gixo-reconnect-reload:focus-visible {
 background: rgba(0, 217, 255, 0.2);
 outline: none;
}

.gixo-reconnect-spinner {
 width: 36px;
 height: 36px;
 border: 3px solid rgba(0, 217, 255, 0.15);
 border-top-color: #00d9ff;
 border-radius: 50%;
 animation: gixo-reconnect-spin 0.8s linear infinite;
}

@keyframes gixo-reconnect-spin {
 to { transform: rotate(360deg); }
}