:root {
    
    --c-bg:           #080a0f;
    --c-surface:      #0d1117;
    --c-surface-2:    #111827;
    --c-surface-3:    #1a2233;
    --c-border:       rgba(255, 255, 255, 0.07);
    --c-border-glow:  rgba(0, 255, 102, 0.35);

    
    --neon-yellow:    #eadd62;
    --neon-yellow-dim: rgba(234, 221, 98, 0.15);
    --neon-green:     #2ee59d;
    --neon-green-dim: rgba(46, 229, 157, 0.15);
    --neon-blue:      #3db4e0;
    --neon-blue-dim:  rgba(61, 180, 224, 0.15);
    --neon-red:       #e84a5f;
    --neon-red-dim:   rgba(232, 74, 95, 0.15);
    --neon-orange:    #ffaa4d;
    --neon-purple:    #b366ff;

    
    --t-primary:   #f0f4f8;
    --t-secondary: #8b9cb5;
    --t-muted:     #4a5568;
    --t-neon:      var(--neon-green);

    
    --font-display: 'Orbitron', monospace;
    --font-body:    'Inter', sans-serif;
    --font-code:    'Fira Code', monospace;

    
    --r-sm:  3px;
    --r-md:  6px;
    --r-lg:  10px;
    --r-xl:  16px;

    
    --t-fast:   0.15s ease;
    --t-base:   0.25s ease;
    --t-slow:   0.4s ease;

    
    --shadow-neon:  0 0 20px rgba(0, 255, 102, 0.2);
    --shadow-dark:  0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.5);

    
    --rz-body-background-color:       var(--c-bg);
    --rz-text-color:                  var(--t-primary);
    --rz-text-font-family:            var(--font-body);
    --rz-primary:                     var(--neon-blue);
    --rz-primary-light:               #63c6ea;
    --rz-primary-dark:                #2a8cae;
    --rz-secondary:                   var(--neon-blue);
    --rz-danger:                      var(--neon-red);
    --rz-card-background-color:       var(--c-surface);
    --rz-border-radius:               var(--r-md);
    --rz-panel-menu-item-active-background-color:   rgba(179, 102, 255, 0.15);
    --rz-panel-menu-item-active-color:              var(--neon-purple);
    --rz-panel-menu-item-hover-background-color:    rgba(255,255,255,0.04);
    --rz-panel-menu-item-hover-color:               var(--t-primary);
    --rz-panel-menu-item-text-color:                var(--t-secondary);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, .rz-layout, .rz-body, .main-body {
    font-family: var(--font-body);
    background-color: var(--c-bg) !important;
    color: var(--t-primary) !important;
    /*line-height: 1.6;*/
    -webkit-font-smoothing: antialiased;
    
    background-image: radial-gradient(rgba(0, 255, 102, 0.04) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

html, body, .rz-layout {
    min-height: 100vh;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--t-primary);
}

a { color: var(--neon-green); text-decoration: none; }
a:hover { color: #33ff85; }

code, pre, .mono {
    font-family: var(--font-code) !important;
}




.layout-header {
    background: rgba(8, 10, 15, 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 1px 0 rgba(0,255,102,0.08) !important;
    height: 56px !important;
    padding: 0 1.5rem !important;
}

.layout-footer {
    background: rgba(8, 10, 15, 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--c-border) !important;
    box-shadow: 0 -1px 0 rgba(0,255,102,0.08) !important;
    padding: 0 1.5rem !important;
}


.brand-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.brand-icon {
    width: 32px; height: 32px;
    background: var(--neon-green-dim);
    border: 1px solid var(--c-border-glow);
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--neon-green);
    font-size: 1.1rem;
}
.brand-text {
    font-family: var(--font-display);
    font-size: 1rem !important;
    font-weight: 900;
    color: var(--neon-green) !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0,255,102,0.4);
    margin: 0 !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
}


.sidebar-toggle-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: all var(--t-fast);
    color: var(--t-secondary);
}
.sidebar-toggle-btn:hover {
    background: var(--neon-green-dim);
    border-color: var(--c-border-glow);
    color: var(--neon-green);
}

@media (min-width: 992px) {
    .sidebar-toggle-btn {
        display: none !important;
    }
}


.user-chip {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: 0.8125rem;
    color: var(--t-secondary);
    font-family: var(--font-code);
}
.user-avatar {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--neon-green-dim);
    border: 1px solid var(--c-border-glow);
    display: flex; align-items: center; justify-content: center;
    color: var(--neon-green); font-size: 0.7rem;
}


.btn-header-action {
    display: flex; align-items: center; gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-sm);
    font-size: 0.8125rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--t-fast);
    border: 1px solid;
}
.btn-header-logout {
    border-color: rgba(255,45,85,0.4);
    color: var(--neon-red);
    background: var(--neon-red-dim);
}
.btn-header-logout:hover {
    background: var(--neon-red);
    color: #000;
    box-shadow: 0 0 12px rgba(255,45,85,0.4);
}
.btn-header-login {
    border-color: var(--c-border-glow);
    color: var(--neon-green);
    background: var(--neon-green-dim);
}
.btn-header-login:hover {
    background: var(--neon-green);
    color: #000;
    box-shadow: var(--shadow-neon);
}


.lang-dropdown {
    min-width: 70px;
    height: 32px;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-sm) !important;
    font-size: 0.8rem;
    color: var(--t-secondary) !important;
}


.main-sidebar {
    background: var(--c-surface) !important;
    border-right: 1px solid var(--c-border) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
}


.sidebar-nav-header {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--c-border);
}
.sidebar-section-label {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--t-muted);
    padding: 0.75rem 1.25rem 0.25rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.sidebar-section-label::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--neon-green);
}
.sidebar-section-label.admin::before { background: var(--neon-orange); box-shadow: 0 0 6px var(--neon-orange); }
.sidebar-section-label.operator::before { background: var(--neon-blue); box-shadow: 0 0 6px var(--neon-blue); }


.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--c-border) 50%, transparent 100%);
    margin: 0.5rem 1.25rem;
}


.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    margin: 0.1rem 0.5rem;
    border-radius: var(--r-sm);
    color: var(--t-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--t-fast);
    border: 1px solid transparent;
    cursor: pointer;
}
.nav-link:hover {
    background: rgba(255,255,255,0.04);
    color: var(--t-primary);
    border-color: var(--c-border);
    padding-left: 1.5rem;
}
.nav-link.active {
    background: var(--neon-green-dim);
    color: var(--neon-green);
    border-color: var(--c-border-glow);
}
.nav-link.danger { color: var(--neon-red); }
.nav-link.danger:hover {
    background: var(--neon-red-dim);
    border-color: rgba(255,45,85,0.3);
    color: var(--neon-red);
}
.nav-link .nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }


.nav-link.operator:hover { background: var(--neon-blue-dim); color: var(--neon-blue); border-color: rgba(0,229,255,0.3); }
.nav-link.admin:hover { background: rgba(255,140,0,0.1); color: var(--neon-orange); border-color: rgba(255,140,0,0.3); }


.nav-link.cta { background: var(--neon-green-dim); color: var(--neon-green); border-color: var(--c-border-glow); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 1px; }
.nav-link.cta:hover { background: var(--neon-green); color: #000; box-shadow: var(--shadow-neon); }


.layout-body {
    background-color: transparent !important;
    min-height: calc(100vh - 56px);
    padding: 2rem 2rem 0 2rem !important;
    display: flex !important;
    flex-direction: column !important;
}


.sidebar-overlay {
    position: fixed; top: 56px; left: 0;
    width: 100vw; height: calc(100vh - 56px);
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 999;
}


.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
}


.auth-container::before {
    content: '';
    position: absolute;
    top: -20%; left: -20%;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(0,255,102,0.06) 0%, transparent 70%);
    animation: blob-float 20s ease-in-out infinite;
}
.auth-container::after {
    content: '';
    position: absolute;
    bottom: -20%; right: -20%;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(0,229,255,0.05) 0%, transparent 70%);
    animation: blob-float-alt 25s ease-in-out infinite;
}
@keyframes blob-float {
    0%, 100% { transform: translate(0,0); }
    50% { transform: translate(30px, 20px); }
}
@keyframes blob-float-alt {
    0%, 100% { transform: translate(0,0); }
    50% { transform: translate(-30px, -20px); }
}

.auth-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-top: 1px solid var(--c-border-glow);
    border-radius: var(--r-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 460px;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-dark);
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
    border-radius: 999px;
}

.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-logo-wrap {
    width: 56px; height: 56px;
    background: var(--neon-green-dim);
    border: 1px solid var(--c-border-glow);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    color: var(--neon-green);
}
.auth-title {
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    font-weight: 900;
    color: var(--t-primary) !important;
    letter-spacing: 2px;
    margin-bottom: 0.375rem;
}
.auth-subtitle {
    font-size: 0.875rem;
    color: var(--t-secondary);
    font-family: var(--font-body);
}


.form-group { margin-bottom: 1.25rem; }

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--t-secondary);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-family: var(--font-code);
    color: var(--t-primary);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    transition: all var(--t-base);
    outline: none;
}
.form-input:focus {
    border-color: var(--neon-green);
    background: rgba(0,255,102,0.02);
    box-shadow: 0 0 0 3px var(--neon-green-dim);
}
.form-input::placeholder { color: var(--t-muted); }

.form-input-code {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.75rem;
    font-family: var(--font-code);
    padding: 1rem;
    color: var(--neon-green);
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-base);
    border: 1px solid;
    text-decoration: none;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--neon-green-dim);
    border-color: var(--neon-green);
    color: var(--neon-green);
}
.btn-primary:hover:not(:disabled) {
    background: var(--neon-green);
    color: #000;
    box-shadow: var(--shadow-neon);
    transform: translateY(-1px);
}
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-secondary {
    background: transparent;
    border-color: var(--c-border);
    color: var(--t-secondary);
    margin-top: 0.75rem;
}
.btn-secondary:hover:not(:disabled) {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.15);
    color: var(--t-primary);
}

.btn-danger {
    background: var(--neon-red-dim);
    border-color: var(--neon-red);
    color: var(--neon-red);
}
.btn-danger:hover:not(:disabled) {
    background: var(--neon-red);
    color: #000;
    box-shadow: 0 0 20px rgba(255,45,85,0.3);
}


.alert {
    padding: 0.875rem 1rem;
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
    display: flex; align-items: flex-start; gap: 0.5rem;
}
.alert-success { background: rgba(0,255,102,0.07); border-color: rgba(0,255,102,0.3); color: #33ff85; }
.alert-error   { background: rgba(255,45,85,0.07);  border-color: rgba(255,45,85,0.3);  color: #ff5577; }
.alert-info    { background: rgba(0,229,255,0.07);   border-color: rgba(0,229,255,0.3);   color: var(--neon-blue); }
.alert-warning { background: rgba(255,140,0,0.07);   border-color: rgba(255,140,0,0.3);   color: var(--neon-orange); }


.arena-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--t-base);
}
.arena-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
    opacity: 0.5;
    transition: opacity var(--t-base);
}
.arena-card:hover { border-color: rgba(0,255,102,0.2); box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.arena-card:hover::before { opacity: 1; }

.arena-card-body { padding: 1.5rem; }


.stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all var(--t-base);
}
.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--neon-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
}
.stat-card:hover::after { transform: scaleX(1); }
.stat-card-value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--neon-green);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.stat-card-label {
    font-size: 0.75rem;
    font-family: var(--font-display);
    letter-spacing: 1.5px;
    color: var(--t-muted);
    text-transform: uppercase;
}


.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-sm);
    font-size: 0.7rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    border: 1px solid;
}
.badge-green   { background: rgba(0,255,102,0.1);  color: var(--neon-green); border-color: rgba(0,255,102,0.3); }
.badge-red     { background: rgba(255,45,85,0.1);   color: var(--neon-red);   border-color: rgba(255,45,85,0.3); }
.badge-blue    { background: rgba(0,229,255,0.1);   color: var(--neon-blue);  border-color: rgba(0,229,255,0.3); }
.badge-orange  { background: rgba(255,140,0,0.1);   color: var(--neon-orange);border-color: rgba(255,140,0,0.3); }
.badge-purple  { background: rgba(191,95,255,0.1);  color: var(--neon-purple);border-color: rgba(191,95,255,0.3); }
.badge-muted   { background: rgba(255,255,255,0.04); color: var(--t-muted);   border-color: var(--c-border); }


.priority-low {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(255,255,255,0.04); color: var(--t-muted); border-color: var(--c-border);
}
.priority-medium {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(0,229,255,0.1); color: var(--neon-blue); border-color: rgba(0,229,255,0.3);
}
.priority-high {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(255,140,0,0.1); color: var(--neon-orange); border-color: rgba(255,140,0,0.3);
}
.priority-critical {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(255,45,85,0.1); color: var(--neon-red); border-color: rgba(255,45,85,0.3);
}


.status-submitted {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(0,229,255,0.1); color: var(--neon-blue); border-color: rgba(0,229,255,0.3);
}
.status-process {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(255,140,0,0.1); color: var(--neon-orange); border-color: rgba(255,140,0,0.3);
}
.status-success {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(0,255,102,0.1); color: var(--neon-green); border-color: rgba(0,255,102,0.3);
}
.status-rejected {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
    font-size: 0.7rem; font-family: var(--font-display); font-weight: 700;
    letter-spacing: 0.75px; text-transform: uppercase; border: 1px solid;
    background: rgba(255,45,85,0.1); color: var(--neon-red); border-color: rgba(255,45,85,0.3);
}


/* ══════════════════════════════════════════════════
   GRID — Complete redesign (cyberpunk, readable)
══════════════════════════════════════════════════ */

/* Wrapper card */
.cyber-container {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.55) !important;
    position: relative;
}
.cyber-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--neon-green) 30%, var(--neon-blue) 70%, transparent 100%);
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
}

/* Table root — strip Radzen default junk */
.rz-data-grid,
.rz-datatable {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── COLUMN HEADERS ── */
.rz-data-grid-header,
.rz-data-grid .rz-data-grid-header {
    background: rgba(10, 14, 20, 0.9) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.rz-data-grid-header-cell {
    background: transparent !important;
    padding: 0.95rem 1.1rem !important;
    border-right: none !important;
    border-bottom: none !important;
    outline: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.rz-column-title,
.rz-data-grid-header-cell .rz-column-title {
    background: transparent !important;
    color: #c8d8e8 !important;
    font-family: var(--font-display) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    border: none !important;
    outline: none !important;
}

/* Sort icon beside column title */
.rz-data-grid-header-cell .rz-sortable-column-header-icon,
.rz-data-grid-header-cell .rz-column-sorted-indicator {
    color: var(--neon-green) !important;
    opacity: 0.7 !important;
    font-size: 0.9rem !important;
}

/* Active sorted column highlight */
.rz-data-grid-header-cell.rz-sorted {
    background: rgba(0,255,102,0.04) !important;
}
.rz-data-grid-header-cell.rz-sorted .rz-column-title {
    color: var(--neon-green) !important;
}

/* Hover on header */
.rz-data-grid-header-cell:hover:not(.rz-state-focused) {
    background: rgba(255,255,255,0.03) !important;
    cursor: pointer;
}

/* ── DATA ROWS ── */
.rz-data-grid-data td,
.rz-datatable-data td {
    background: var(--c-surface) !important;
    color: #b0c2d4 !important;
    border-bottom: 1px solid rgba(255,255,255,0.045) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 0.875rem !important;
    font-family: var(--font-body) !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Odd-row zebra stripe */
.rz-data-grid-data tr:nth-child(odd) td {
    background: rgba(255,255,255,0.018) !important;
}

/* Row hover */
.rz-data-grid-data tr:hover td,
.rz-datatable-data tr:hover td {
    background: rgba(46, 229, 157, 0.055) !important;
    color: #e8f4ff !important;
    cursor: default;
}

/* Selected row */
.rz-data-grid-data tr.rz-state-highlight td {
    background: rgba(46, 229, 157, 0.09) !important;
    color: var(--t-primary) !important;
}

/* Remove ALL focus outlines from rows/cells */
.rz-data-grid-data tr:focus,
.rz-data-grid-data td:focus,
.rz-data-grid-data tr:focus-visible,
.rz-data-grid-data td:focus-visible,
.rz-data-grid-header-cell:focus,
.rz-data-grid-header-cell:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ── FILTER ROW (if used) ── */
.rz-data-grid-filter-row td {
    background: rgba(0,0,0,0.35) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: 0.5rem 0.75rem !important;
}

/* ── EMPTY / LOADING STATE ── */
.rz-data-grid-empty-row td {
    text-align: center !important;
    color: var(--t-muted) !important;
    padding: 3rem !important;
    font-family: var(--font-display) !important;
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
}

/* ── PAGINATOR ── */
.rz-paginator {
    background: rgba(10, 14, 20, 0.9) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    color: var(--t-secondary) !important;
    padding: 0.65rem 1.1rem !important;
    font-family: var(--font-code) !important;
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.rz-paginator-page,
.rz-paginator-first,
.rz-paginator-prev,
.rz-paginator-next,
.rz-paginator-last {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    margin: 0 0.1rem !important;
    transition: all var(--t-fast) !important;
    color: var(--t-secondary) !important;
    background: transparent !important;
    font-family: var(--font-code) !important;
    font-size: 0.8rem !important;
    outline: none !important;
    box-shadow: none !important;
}

.rz-paginator-page.rz-state-active {
    background: var(--neon-green-dim) !important;
    border-color: rgba(46,229,157,0.5) !important;
    color: var(--neon-green) !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(46,229,157,0.15) !important;
    font-weight: 700 !important;
}

.rz-paginator-page:hover:not(.rz-state-active),
.rz-paginator-first:hover,
.rz-paginator-prev:hover,
.rz-paginator-next:hover,
.rz-paginator-last:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--t-primary) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.rz-paginator-page:focus,
.rz-paginator-first:focus,
.rz-paginator-prev:focus,
.rz-paginator-next:focus,
.rz-paginator-last:focus {
    outline: none !important;
    box-shadow: none !important;
}

.rz-paginator-summary {
    color: rgba(176,194,212,0.5) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.3px !important;
    margin-left: auto !important;
}

/* Rows-per-page dropdown in paginator */
.rz-paginator .rz-dropdown {
    height: 30px !important;
    min-height: 30px !important;
    border-color: rgba(255,255,255,0.1) !important;
}




.rz-button {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    border-radius: var(--r-sm) !important;
    transition: all var(--t-base) !important;
}
.rz-button-primary {
    background: rgba(0, 255, 102, 0.07) !important;
    border: 1px solid rgba(0, 255, 102, 0.45) !important;
    color: var(--neon-green) !important;
    position: relative;
    overflow: hidden;
}
.rz-button-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    pointer-events: none;
}
.rz-button-primary:hover::after {
    transform: translateX(100%);
}
.rz-button-primary:hover {
    background: rgba(0, 255, 102, 0.15) !important;
    border-color: var(--neon-green) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(0, 255, 102, 0.25) !important;
    transform: translateY(-1px);
}
.rz-button-danger {
    background: var(--neon-red-dim) !important;
    border: 1px solid var(--neon-red) !important;
    color: var(--neon-red) !important;
}
.rz-button-danger:hover {
    background: var(--neon-red) !important;
    color: #000 !important;
}
.rz-button-secondary {
    background: rgba(0, 229, 255, 0.04) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    color: rgba(0, 229, 255, 0.7) !important;
}
.rz-button-secondary:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    border-color: rgba(0, 229, 255, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15) !important;
}
.rz-button-info {
    background: rgba(0, 229, 255, 0.06) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: var(--neon-blue) !important;
}
.rz-button-info:hover {
    background: rgba(0, 229, 255, 0.14) !important;
    border-color: var(--neon-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.2) !important;
}
.rz-button-warning {
    background: rgba(255, 140, 0, 0.06) !important;
    border: 1px solid rgba(255, 140, 0, 0.35) !important;
    color: var(--neon-orange) !important;
}
.rz-button-warning:hover {
    background: rgba(255, 140, 0, 0.14) !important;
    border-color: var(--neon-orange) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(255, 140, 0, 0.2) !important;
}
.rz-button-light {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--t-muted) !important;
}
.rz-button-light:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: var(--t-secondary) !important;
}


.rz-card {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-panel) !important;
}


.rz-textbox, .rz-textarea, .rz-numeric, .rz-spinner-input {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--t-primary) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-code) !important;
    transition: all var(--t-base) !important;
}
.rz-textbox:focus, .rz-textarea:focus { border-color: var(--neon-green) !important; box-shadow: 0 0 0 3px var(--neon-green-dim) !important; }


.rz-dropdown { background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-sm) !important; }
.rz-dropdown-item:hover { background: var(--neon-green-dim) !important; color: var(--neon-green) !important; }
.rz-dropdown-item.rz-state-highlight { background: var(--neon-green-dim) !important; color: var(--neon-green) !important; }


.rz-dialog-wrapper { background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(10px); pointer-events: all !important; }
.rz-dialog { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-dark), 0 0 40px rgba(0,255,102,0.1) !important; overflow: hidden; padding: 0 !important; pointer-events: all !important; }
.rz-dialog-titlebar { 
    background: linear-gradient(90deg, rgba(0,255,102,0.1), transparent) !important; 
    border-bottom: 1px solid var(--c-border) !important; 
    border-top: 2px solid var(--neon-green) !important; 
    padding: 1.25rem 1.5rem !important; 
    display: flex; align-items: center; justify-content: space-between;
}
.rz-dialog-title { font-family: var(--font-display) !important; font-weight: 900 !important; font-size: 1.1rem !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--neon-green) !important; text-shadow: 0 0 10px rgba(0,255,102,0.3) !important; }
.rz-dialog-content { background: var(--c-surface) !important; padding: 1.5rem !important; color: var(--t-primary) !important; }
.rz-dialog-close { color: var(--t-muted) !important; transition: all 0.2s !important; cursor: pointer !important; pointer-events: all !important; }
.rz-dialog-close:hover { color: var(--neon-red) !important; text-shadow: 0 0 8px rgba(255,45,85,0.5) !important; }
.rz-dialog-close .rzi { font-family: 'Material Icons' !important; }


.rz-tabview { background: transparent !important; }
.rz-tabview-nav { background: transparent !important; border-bottom: 2px solid var(--c-border) !important; }
.rz-tabview-nav li { background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; border-bottom: none !important; border-radius: var(--r-sm) var(--r-sm) 0 0 !important; margin-right: 4px !important; }
.rz-tabview-nav li:hover { background: rgba(255,255,255,0.04) !important; }
.rz-tabview-nav li.rz-tabview-selected { background: var(--neon-green-dim) !important; border-color: var(--c-border-glow) !important; border-bottom: 2px solid var(--neon-green) !important; }
.rz-tabview-nav li .rz-tabview-title { color: var(--t-secondary) !important; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; }
.rz-tabview-nav li.rz-tabview-selected .rz-tabview-title { color: var(--neon-green) !important; }
.rz-tabview-panels { background: transparent !important; border: none !important; padding: 1.5rem 0 !important; }


/* ══════════════════════════════════════════════════
   RADZEN TOAST NOTIFICATIONS — THE ULTIMATE FIX
══════════════════════════════════════════════════ */

/* Force the container to never block clicks */
.rz-notification {
    pointer-events: none !important;
}

/* 1) Strip ALL native Radzen backgrounds and shadows from every nested element 
      This prevents the "green popup around black box" issue permanently */
.rz-notification, .rz-notification * {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2) Apply glassmorphism strictly to the outermost toast card wrapper.
      This guarantees exactly ONE styled card, regardless of Radzen's internal nesting. */
.rz-notification > div {
    pointer-events: all !important;
    background: rgba(13, 17, 23, 0.96) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.04) !important;
    color: var(--t-primary) !important;
    margin-bottom: 0.6rem !important; /* space between multiple toasts */
    font-family: var(--font-body) !important;
}

/* 3) Apply severity accents to the left border using modern :has() selectors
      This works whether Radzen puts the success class on the wrapper or an inner div! */
.rz-notification > div:has(.rz-notification-success),
.rz-notification > div.rz-notification-success,
.rz-notification > div:has(.rz-message-success),
.rz-notification > div.rz-message-success { border-left: 4px solid var(--neon-green) !important; }

.rz-notification > div:has(.rz-notification-error),
.rz-notification > div.rz-notification-error,
.rz-notification > div:has(.rz-message-error),
.rz-notification > div.rz-message-error { border-left: 4px solid var(--neon-red) !important; }

.rz-notification > div:has(.rz-notification-info),
.rz-notification > div.rz-notification-info,
.rz-notification > div:has(.rz-message-info),
.rz-notification > div.rz-message-info { border-left: 4px solid var(--neon-blue) !important; }

.rz-notification > div:has(.rz-notification-warning),
.rz-notification > div.rz-notification-warning,
.rz-notification > div:has(.rz-message-warning),
.rz-notification > div.rz-message-warning { border-left: 4px solid var(--neon-orange) !important; }


/* 4) Typography overrides for the text inside */
.rz-notification-summary, .rz-notification-message-title, .rz-message-summary {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--t-primary) !important;
}

.rz-notification-detail, .rz-notification-message-content, .rz-message-detail {
    color: var(--t-secondary) !important;
}

.rz-notification-icon, .rz-message-icon {
    font-size: 1.4rem !important;
}

/* 5) Color the icons based on severity */
.rz-notification > div:has(.rz-notification-success) i, .rz-notification > div.rz-notification-success i { color: var(--neon-green) !important; }
.rz-notification > div:has(.rz-notification-error) i, .rz-notification > div.rz-notification-error i { color: var(--neon-red) !important; }
.rz-notification > div:has(.rz-notification-info) i, .rz-notification > div.rz-notification-info i { color: var(--neon-blue) !important; }
.rz-notification > div:has(.rz-notification-warning) i, .rz-notification > div.rz-notification-warning i { color: var(--neon-orange) !important; }



.rz-form-field label { font-family: var(--font-display) !important; font-size: 0.7rem !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--t-secondary) !important; }


.upload-dropzone {
    border: 2px dashed rgba(0,255,102,0.3);
    border-radius: var(--r-lg);
    padding: 3rem 1rem;
    text-align: center;
    background: rgba(0,255,102,0.02);
    transition: all var(--t-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.upload-dropzone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,255,102,0.04) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--t-base);
}
.upload-dropzone:hover, .upload-dropzone.dragging {
    border-color: var(--neon-green);
    background: rgba(0,255,102,0.04);
    box-shadow: 0 0 30px rgba(0,255,102,0.1);
}
.upload-dropzone:hover::before, .upload-dropzone.dragging::before { opacity: 1; }
.upload-icon { font-size: 3rem; color: var(--neon-green); opacity: 0.7; }
.drop-text { margin-top: 0.75rem; color: var(--t-secondary); font-size: 0.9rem; }
.drop-subtext { font-size: 0.75rem; color: var(--t-muted); font-family: var(--font-code); margin-top: 0.25rem; }


.leaderboard-rank {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--t-muted);
    width: 40px;
}
.leaderboard-rank.rank-1 { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.5); }
.leaderboard-rank.rank-2 { color: #c0c0c0; }
.leaderboard-rank.rank-3 { color: #cd7f32; }
.leaderboard-score {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--neon-green);
}


@keyframes neon-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0,255,102,0.3); }
    50%       { box-shadow: 0 0 20px rgba(0,255,102,0.6); }
}
@keyframes scan-line {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 0.3s var(--t-base) forwards; }
.neon-pulse { animation: neon-pulse 2.5s ease-in-out infinite; }


.neon-text  { color: var(--neon-green); font-family: var(--font-display); }
.mono-text  { font-family: var(--font-code) !important; }
.text-muted { color: var(--t-muted) !important; }
.text-secondary { color: var(--t-secondary) !important; }


.badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-family: var(--font-code); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; border-radius: var(--r-sm); white-space: nowrap; }
.badge-blue { background: rgba(0, 153, 255, 0.1); color: #0099ff; border: 1px solid rgba(0, 153, 255, 0.3); }
.badge-green { background: rgba(0, 255, 102, 0.1); color: var(--neon-green); border: 1px solid rgba(0, 255, 102, 0.3); }
.badge-red { background: rgba(255, 0, 85, 0.1); color: #ff0055; border: 1px solid rgba(255, 0, 85, 0.3); }
.badge-orange { background: rgba(255, 153, 0, 0.1); color: #ff9900; border: 1px solid rgba(255, 153, 0, 0.3); }
.badge-muted { background: rgba(255, 255, 255, 0.05); color: var(--t-secondary); border: 1px solid rgba(255, 255, 255, 0.1); }

.validation-message { color: var(--neon-red); font-size: 0.8rem; margin-top: 4px; }
.invalid { outline: 1px solid var(--neon-red) !important; }


.page-header {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--c-surface-2) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid var(--c-border);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
    opacity: 0.5;
}

.btn-neon-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon-green);
    background: rgba(46, 229, 157, 0.07);
    border: 1px solid rgba(46, 229, 157, 0.45);
    border-radius: var(--r-sm);
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    box-shadow: 0 0 10px rgba(46, 229, 157, 0.1), inset 0 0 8px rgba(46, 229, 157, 0.03);
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
}
.btn-neon-action::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}
.btn-neon-action:hover::after {
    transform: translateX(100%);
}
.btn-neon-action:hover {
    background: rgba(46, 229, 157, 0.14);
    border-color: var(--neon-green);
    box-shadow: 0 0 18px rgba(46, 229, 157, 0.28), inset 0 0 12px rgba(46, 229, 157, 0.06);
    color: #fff;
    transform: translateY(-1px);
}
.btn-neon-action:active {
    transform: translateY(0);
}
.page-header h1, .page-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--t-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.page-subtitle { font-size: 0.875rem; color: var(--t-secondary); margin-top: 0.25rem; }

/* ── Admin page wrapper ── */
.admin-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* ── Loading state ── */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--t-muted);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ── Empty state ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 2rem;
    color: var(--t-muted);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}

/* ── Width utility ── */
.w-100 { width: 100% !important; }

/* ── Header action group alignment ── */
.header-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


@media (max-width: 768px) {
    .layout-body { padding: 1rem !important; }
    .auth-card { padding: 1.75rem 1.25rem; }
    .auth-title { font-size: 1.2rem !important; }
    .brand-text { display: none !important; }
    .user-name-text { display: none !important; }
    .main-sidebar { position: absolute !important; top: 56px !important; left: 0 !important; height: calc(100vh - 56px) !important; z-index: 1000 !important; }
}
@media (min-width: 769px) {
    .sidebar-overlay { display: none !important; }
}

/* ── Modal cancel ghost button ── */
.modal-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 1.4rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--t-muted);
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
}
.modal-ghost-btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.18);
    color: var(--t-secondary);
}

/* ── Modal submit button (cyberpunk, no neon) ── */
.modal-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.6rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    cursor: pointer;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
}
.modal-submit-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}
.modal-submit-btn:hover:not(:disabled)::after {
    transform: translateX(100%);
}
.modal-submit-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}
.modal-submit-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Submission card detail button ── */
.sub-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    font-family: var(--font-code);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(61, 180, 224, 0.8);
    background: rgba(61, 180, 224, 0.05);
    border: 1px solid rgba(61, 180, 224, 0.25);
    border-radius: var(--r-sm);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    cursor: pointer;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
}
.sub-detail-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}
.sub-detail-btn:hover::after {
    transform: translateX(100%);
}
.sub-detail-btn:hover {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.5);
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.15);
}
.sub-detail-icon {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* ── Audit / Inline Action Buttons ── */
.audit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    line-height: normal !important;
    font-family: var(--font-display) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: var(--r-sm) !important;
    clip-path: none !important;
    transition: all var(--t-fast) !important;
    position: relative !important;
}

.audit-btn.rz-button-primary {
    background: rgba(46, 229, 157, 0.07) !important;
    border: 1px solid rgba(46, 229, 157, 0.45) !important;
    color: var(--neon-green) !important;
    text-shadow: none !important;
    box-shadow: 0 0 10px rgba(46, 229, 157, 0.1), inset 0 0 8px rgba(46, 229, 157, 0.03) !important;
}
.audit-btn.rz-button-primary:hover {
    background: rgba(46, 229, 157, 0.14) !important;
    border-color: var(--neon-green) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(46, 229, 157, 0.28), inset 0 0 12px rgba(46, 229, 157, 0.06) !important;
}

/* Cyberpunk Cyan */
.audit-btn.rz-button-secondary {
    background: rgba(0, 229, 255, 0.1) !important;
    border: 1px solid var(--neon-blue) !important;
    color: var(--neon-blue) !important;
}
.audit-btn.rz-button-secondary:hover {
    background: var(--neon-blue) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.5) !important;
}

/* Cyberpunk Red / Info */
.audit-btn.rz-button-info {
    background: rgba(255, 45, 85, 0.1) !important;
    border: 1px solid var(--neon-red) !important;
    color: var(--neon-red) !important;
}
.audit-btn.rz-button-info:hover {
    background: var(--neon-red) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 45, 85, 0.5) !important;
}

/* Cyberpunk Danger / Deep Red */
.audit-btn.rz-button-danger {
    background: rgba(255, 45, 85, 0.08) !important;
    border: 1px solid rgba(255, 45, 85, 0.6) !important;
    color: var(--neon-red) !important;
}
.audit-btn.rz-button-danger:hover {
    background: rgba(255, 45, 85, 0.15) !important;
    box-shadow: 0 0 15px rgba(255, 45, 85, 0.3) !important;
    color: #fff !important;
}

/* Light / Muted Steel */
.audit-btn.rz-button-light {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--t-secondary) !important;
}
.audit-btn.rz-button-light:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
}



#components-reconnect-modal { display: none !important; }
 
.terminal-container { box-shadow: inset 0 0 50px rgba(0,255,0,0.1); } .hacker-glitch-layer { position: absolute; top:0; left:0; right:0; bottom:0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px); pointer-events: none; opacity: 0.5; z-index: 1; }  

.rz-dropdown-panel {
    z-index: 10000 !important;
}
.rz-popup {
    z-index: 10000 !important;
}