:root {
    /* Color Palette */
    --bg-base: #0f1115;
    --bg-surface: rgba(23, 25, 35, 0.7);
    --bg-hover: rgba(255, 255, 255, 0.05);
    
    --primary: #6366f1;
    --primary-hover: #a855f7;
    --primary-light: #818cf8;
    --primary-glow: rgba(99, 102, 241, 0.15);
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    --border: rgba(255, 255, 255, 0.1);
    
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-bg: rgba(239, 68, 68, 0.1);
    
    --success: #10b981;
    --warning: #f59e0b;
    
    /* Spacing */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 24px;
    --spacing-6: 32px;
    
    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Base scrollbar for dashboard */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Utilities */
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--text-muted); }

/* ==========================================================================
   GLOBAL HIGH-TECH PRELOADER (Zero-FOUC, Hardware-Accelerated)
   ========================================================================== */
.global-preloader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: #08090d;
    background: radial-gradient(circle at 50% 50%, #141724 0%, #08090d 100%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
    overflow: hidden;
}

.global-preloader.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.preloader-ambient-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221, 175, 49, 0.22) 0%, rgba(99, 102, 241, 0.12) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.preloader-visual-hub {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #ddaf31;
    border-right-color: #6366f1;
    animation: criticalPreloaderSpinClockwise 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    filter: drop-shadow(0 0 10px rgba(221, 175, 49, 0.55));
}

.preloader-ring-inner {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: #a855f7;
    border-left-color: #ddaf31;
    animation: criticalPreloaderSpinCounterClockwise 1s linear infinite;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}

.preloader-emblem-center {
    position: relative;
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
    border-radius: 50%;
    background: rgba(15, 17, 26, 0.9);
    border: 1px solid rgba(221, 175, 49, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(221, 175, 49, 0.3), inset 0 0 10px rgba(99, 102, 241, 0.2);
    animation: criticalEmblemPulse 2s ease-in-out infinite;
    overflow: hidden;
    box-sizing: border-box;
    padding: 6px;
    contain: strict;
}

.preloader-emblem-img {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

@keyframes criticalPreloaderSpinClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes criticalPreloaderSpinCounterClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes criticalEmblemPulse {
    0%, 100% { transform: scale(0.95); opacity: 0.92; }
    50% { transform: scale(1.06); opacity: 1; }
}