#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;
}

/* ============================================
   MODERN LIQUID GLASS THEME - COOL TONES
   Inspired by macOS - Tech-Forward Aesthetic
   ============================================ */

:root {
    font-size: var(--rz-root-font-size);
    
    /* Liquid Glass Color Palette - Cool Blues & Cyans */
    --glass-primary: rgba(59, 130, 246, 0.12);
    --glass-secondary: rgba(14, 165, 233, 0.08);
    --glass-accent: rgba(6, 182, 212, 0.15);
    --glass-border: rgba(148, 163, 184, 0.2);
    --glass-shadow: rgba(0, 0, 0, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.1);
    
    /* Glassmorphism Effects */
    --glass-blur: blur(16px);
    --glass-blur-strong: blur(24px);
    
    /* Modern Typography - Optimized for Numbers */
    --tech-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    --tech-mono-stack: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

body {
    font-family: var(--tech-font-stack), var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background: linear-gradient(135deg, 
        var(--rz-body-background-color) 0%, 
        color-mix(in srgb, var(--rz-body-background-color) 95%, #3b82f6) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
    text-decoration: none;
}

/* ============================================
   RADZEN CARD - LIQUID GLASS EFFECT
   ============================================ */

.rz-card,
.rz-dialog-content {
    background: color-mix(in srgb, var(--rz-base-background-color) 70%, transparent) !important;
    backdrop-filter: var(--glass-blur) saturate(180%);
    -webkit-backdrop-filter: var(--glass-blur) saturate(180%);
    border: 1px solid var(--glass-border) !important;
    box-shadow: 
        0 8px 32px var(--glass-shadow),
        0 1px 0 var(--glass-highlight) inset,
        0 -1px 0 rgba(0, 0, 0, 0.05) inset !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rz-card:hover {
    border-color: color-mix(in srgb, var(--glass-border) 80%, #3b82f6) !important;
    box-shadow: 
        0 12px 48px color-mix(in srgb, var(--glass-shadow) 150%, #3b82f6 20%),
        0 1px 0 var(--glass-highlight) inset !important;
    transform: translateY(-2px);
}

/* ============================================
   RADZEN BUTTONS - MODERN TECH STYLE
   ============================================ */

.rz-button {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 12px !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.rz-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 
        0 8px 24px var(--glass-shadow),
        0 0 0 1px var(--glass-highlight) inset;
}

.rz-button:not(:disabled):active {
    transform: translateY(0);
}

/* Primary Button - Cool Gradient */
.rz-button-primary,
.rz-button.rz-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
}

.rz-button-primary:hover,
.rz-button.rz-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3) !important;
}

/* Secondary Button - Cyan Accent */
.rz-button-secondary,
.rz-button.rz-secondary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

/* Success Button - Teal */
.rz-button-success,
.rz-button.rz-success {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
}

/* Light/Ghost Buttons - Glassmorphic */
.rz-button-light,
.rz-variant-flat {
    background: color-mix(in srgb, var(--rz-base-background-color) 50%, transparent) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
}

/* ============================================
   DATA GRIDS - ENHANCED READABILITY
   ============================================ */

.rz-datatable,
.rz-grid,
.rz-data-grid {
    background: color-mix(in srgb, var(--rz-base-background-color) 60%, transparent) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.rz-datatable-data td,
.rz-grid-table td {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    padding: 0.875rem 1rem !important;
}

/* Number columns - Monospace for alignment */
.rz-datatable-data td[data-type="number"],
.rz-grid-table td:has(> span[style*="text-align: right"]),
td:has(.rz-numeric) {
    font-family: var(--tech-mono-stack);
    font-size: 0.95em;
    font-weight: 500;
    text-align: right;
}

.rz-datatable-header,
.rz-grid-header {
    background: color-mix(in srgb, var(--rz-base-background-color) 80%, #3b82f6 5%) !important;
    backdrop-filter: var(--glass-blur-strong);
    border-bottom: 2px solid var(--glass-border) !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.rz-datatable-row:hover,
.rz-grid-table tbody tr:hover {
    background: color-mix(in srgb, var(--rz-base-background-color) 100%, #3b82f6 8%) !important;
    transition: background 0.15s ease;
}

/* ============================================
   FORM CONTROLS - GLASS INPUTS
   ============================================ */

.rz-textbox,
.rz-dropdown,
.rz-multiselect,
.rz-numeric,
.rz-datepicker input,
input.rz-input {
    background: color-mix(in srgb, var(--rz-base-background-color) 50%, transparent) !important;
    backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border) !important;
    border-radius: 10px !important;
    padding: 0.625rem 0.875rem !important;
    transition: all 0.2s ease;
    font-variant-numeric: tabular-nums;
}

.rz-textbox:focus,
.rz-dropdown:focus,
.rz-numeric:focus,
input.rz-input:focus {
    border-color: #3b82f6 !important;
    background: var(--rz-base-background-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none;
}

/* Numeric inputs - Enhanced formatting */
.rz-numeric input,
input[type="number"] {
    font-family: var(--tech-mono-stack);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ============================================
   BADGES & LABELS - MODERN INDICATORS
   ============================================ */

.rz-badge {
    backdrop-filter: var(--glass-blur);
    border-radius: 8px !important;
    padding: 0.25rem 0.625rem !important;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
    border: 1px solid transparent;
}

.rz-badge-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
}

.rz-badge-success {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%) !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
    color: #14b8a6 !important;
}

/* ============================================
   PANELS & CONTAINERS
   ============================================ */

.rz-panel,
.rz-fieldset {
    background: color-mix(in srgb, var(--rz-base-background-color) 65%, transparent) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
}

.rz-panel-header,
.rz-fieldset-legend {
    background: color-mix(in srgb, var(--rz-base-background-color) 80%, #3b82f6 3%) !important;
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border) !important;
    font-weight: 600;
}

/* ============================================
   SIDEBAR & HEADER - FROSTED GLASS
   ============================================ */

.rz-sidebar,
.rz-header {
    background: color-mix(in srgb, var(--rz-base-background-color) 75%, transparent) !important;
    backdrop-filter: var(--glass-blur-strong) saturate(200%);
    -webkit-backdrop-filter: var(--glass-blur-strong) saturate(200%);
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: 2px 0 24px var(--glass-shadow) !important;
}

.rz-header {
    border-right: none !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 2px 24px var(--glass-shadow) !important;
}

/* Header Enhanced Styles - Cool Blue Gradient */
.rz-header .rz-sidebar-toggle,
.rz-header .rz-sidebar-toggle .rz-button-icon,
.rz-header .rz-sidebar-toggle i {
    color: white !important;
}

.rz-header .rz-appearance-toggle,
.rz-header .rz-appearance-toggle button {
    color: white !important;
    transition: all 0.2s ease;
}

.rz-header .rz-appearance-toggle:hover,
.rz-header .rz-appearance-toggle button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05);
}

.rz-header .rz-profile-menu {
    color: white !important;
    --rz-profile-menu-top-item-background-color: transparent !important;
}

.rz-header .rz-profile-menu button,
.rz-header .rz-profile-menu-button,
.rz-header .rz-navigation-item {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px);
    border-radius: 10px !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.2s ease;
}

.rz-header .rz-profile-menu:hover button,
.rz-header .rz-profile-menu-button:hover,
.rz-header .rz-profile-menu button:hover,
.rz-header .rz-navigation-item:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.02);
}

.rz-header .rz-profile-menu .rz-text {
    color: white !important;
}

.rz-header .rz-profile-menu .rz-gravatar {
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Remove default profile menu background */
ul.rz-profile-menu {
    background-color: transparent !important;
}

.rz-header ul.rz-profile-menu .rz-navigation-item {
    background-color: transparent !important;
}

/* Ensure all icons in header are white */
.rz-header i,
.rz-header .rzi,
.rz-header .material-icons,
.rz-header svg {
    color: white !important;
    fill: white !important;
}

/* Profile menu dropdown - clean styling */
.rz-profile-menu-content,
.rz-menu.rz-profile-menu-content {
    background: var(--rz-base-background-color) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur);
    margin-top: 0.5rem;
}

.rz-profile-menu-item {
    transition: all 0.2s ease;
}

.rz-profile-menu-item:hover {
    background: color-mix(in srgb, var(--rz-base-background-color) 100%, #3b82f6 12%) !important;
}

/* Responsive adjustments for header */
@media (max-width: 768px) {
    .rz-header {
        padding: 0.5rem !important;
    }
    
    .rz-header .rz-appearance-toggle,
    .rz-header .rz-profile-menu button {
        padding: 0.375rem !important;
    }
}

@media (max-width: 576px) {
    .rz-header .rz-profile-menu .rz-text {
        display: none; /* Hide username text on small screens */
    }
    
    .rz-header .rz-gravatar {
        margin: 0 !important;
    }
}

.rz-panel-menu-item {
    border-radius: 10px !important;
    margin: 0.25rem 0.5rem !important;
    transition: all 0.2s ease;
}

.rz-panel-menu-item:hover,
.rz-panel-menu-item-active {
    background: color-mix(in srgb, var(--rz-base-background-color) 100%, #3b82f6 12%) !important;
    transform: translateX(4px);
}

/* ============================================
   MODALS & DIALOGS
   ============================================ */

.rz-dialog {
    background: color-mix(in srgb, var(--rz-base-background-color) 85%, transparent) !important;
    backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2) !important;
}

.rz-dialog-titlebar {
    background: color-mix(in srgb, var(--rz-base-background-color) 90%, #3b82f6 5%) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.25rem 1.5rem !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.rz-alert {
    backdrop-filter: var(--glass-blur);
    border-radius: 12px !important;
    border: 1px solid transparent !important;
}

.rz-alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.rz-alert-success {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(13, 148, 136, 0.1) 100%) !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
}

.rz-alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ============================================
   CHARTS & DATA VISUALIZATION
   ============================================ */

.rz-chart {
    background: color-mix(in srgb, var(--rz-base-background-color) 60%, transparent) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
}

/* ============================================
   TABS - MODERN NAVIGATION
   ============================================ */

.rz-tabview-nav {
    background: transparent !important;
    border-bottom: 2px solid var(--glass-border) !important;
}

.rz-tabview-nav li {
    margin: 0 0.25rem !important;
}

.rz-tabview-nav li a {
    background: transparent !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 0.75rem 1.25rem !important;
    transition: all 0.2s ease;
}

.rz-tabview-nav li a:hover {
    background: color-mix(in srgb, var(--rz-base-background-color) 100%, #3b82f6 8%) !important;
}

.rz-tabview-nav li.rz-tabview-selected a {
    background: color-mix(in srgb, var(--rz-base-background-color) 90%, #3b82f6 15%) !important;
    border-bottom: 3px solid #3b82f6 !important;
    font-weight: 600;
}

/* ============================================
   PROGRESS BARS & LOADERS
   ============================================ */

.rz-progressbar {
    background: var(--glass-primary) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.rz-progressbar-value {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

/* ============================================
   TOOLTIPS - SUBTLE OVERLAYS
   ============================================ */

.rz-tooltip {
    background: color-mix(in srgb, var(--rz-base-background-color) 95%, #1e293b) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem;
}

/* ============================================
   SCROLLBARS - MINIMAL & ELEGANT
   ============================================ */

.rz-datatable-scrollable-body::-webkit-scrollbar,
.rz-panel-content::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.rz-datatable-scrollable-body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: var(--glass-primary);
    border-radius: 10px;
}

.rz-datatable-scrollable-body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--glass-border) 200%, #3b82f6 30%);
    border-radius: 10px;
    border: 2px solid var(--rz-base-background-color);
}

.rz-datatable-scrollable-body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--glass-border) 250%, #3b82f6 50%);
}

/* ============================================
   TYPOGRAPHY - TECH-OPTIMIZED
   ============================================ */

h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3,
.rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Numeric display optimization */
.rz-numeric,
[data-numeric],
.numeric-value {
    font-family: var(--tech-mono-stack);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Decimal alignment helper class */
.decimal-align {
    text-align: right;
    font-family: var(--tech-mono-stack);
}

/* ============================================
   DARK MODE ENHANCEMENTS
   ============================================ */

[data-theme="dark"] {
    --glass-primary: rgba(59, 130, 246, 0.15);
    --glass-secondary: rgba(14, 165, 233, 0.12);
    --glass-border: rgba(148, 163, 184, 0.15);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    --glass-highlight: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] body {
    background: linear-gradient(135deg, 
        var(--rz-body-background-color) 0%, 
        color-mix(in srgb, var(--rz-body-background-color) 92%, #1e40af) 100%);
}

[data-theme="dark"] .rz-card,
[data-theme="dark"] .rz-dialog-content {
    background: color-mix(in srgb, var(--rz-base-background-color) 60%, transparent) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rz-dialog,
.rz-dropdown-panel,
.rz-menu {
    animation: fadeInScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth property transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.glass-card {
    background: color-mix(in srgb, var(--rz-base-background-color) 70%, transparent) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
}

.tech-text {
    font-family: var(--tech-font-stack);
}

.mono-text {
    font-family: var(--tech-mono-stack);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   ERROR BOUNDARY & LOADING STATES
   ============================================ */

.blazor-error-boundary {
    background: 
        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem,
        linear-gradient(135deg, rgba(185, 28, 28, 0.9) 0%, rgba(153, 27, 27, 0.95) 100%);
    backdrop-filter: var(--glass-blur);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 12px;
    border: 1px solid rgba(254, 202, 202, 0.3);
    box-shadow: 0 8px 32px rgba(185, 28, 28, 0.4);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
    font-weight: 600;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: color-mix(in srgb, var(--rz-base-background-color) 100%, #3b82f6 30%);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #3b82f6;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: #3b82f6;
    font-family: var(--tech-font-stack);
    letter-spacing: 0.05em;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .rz-card {
        border-radius: 12px !important;
    }
    
    .rz-dialog {
        border-radius: 16px !important;
        margin: 1rem !important;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}