/* ==========================================
   NEXUS OPERATIONAL UI SYSTEM (v2.0 Premium)
   ========================================== */

:root {
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    /* Core Color Tokens */
    --color-bg: #030712;
    --color-surface: rgba(10, 15, 30, 0.45);
    --color-surface-hover: rgba(17, 24, 39, 0.55);
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-hover: rgba(255, 255, 255, 0.12);
    
    /* Neon Glows */
    --glow-indigo: rgba(99, 102, 241, 0.15);
    --glow-teal: rgba(20, 184, 166, 0.15);
    --glow-rose: rgba(244, 63, 94, 0.15);
    
    /* Brand Accent Colors */
    --accent-indigo: #6366f1;
    --accent-indigo-hover: #4f46e5;
    --accent-teal: #14b8a6;
    --accent-teal-hover: #0d9488;
    --accent-rose: #f43f5e;
}

/* Base Body Styling */
body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

/* Heading Typography */
h1, h2, h3, h4, .font-tech {
    font-family: var(--font-heading);
}

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Advanced Glassmorphism Panel */
.glass-panel {
    background: var(--color-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-hover:hover {
    border-color: var(--color-border-hover);
    background: var(--color-surface-hover);
    box-shadow: 0 25px 50px -12px var(--glow-indigo);
    transform: translateY(-2px);
}

/* Shifting Background Nebula */
.nebula-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
    animation: nebula-float 30s infinite alternate ease-in-out;
}

@keyframes nebula-float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(80px, -100px) scale(1.2);
    }
    100% {
        transform: translate(-40px, 60px) scale(0.85);
    }
}

/* Shifting Mesh Backgrounds */
.mesh-active {
    background: radial-gradient(circle at 10% 20%, rgba(20, 184, 166, 0.12) 0%, transparent 45%),
                radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
                var(--color-surface);
}

.mesh-inactive {
    background: radial-gradient(circle at 10% 20%, rgba(244, 63, 94, 0.08) 0%, transparent 45%),
                var(--color-surface);
}

/* Active Status Indicators */
.status-glow-active {
    box-shadow: 0 0 12px var(--accent-teal);
}

.status-glow-inactive {
    box-shadow: 0 0 12px var(--accent-rose);
}

/* View transition fades */
.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typing bounce loader */
.typing-bubble span {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-bubble span:nth-child(1) { animation-delay: -0.32s; }
.typing-bubble span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Custom CSS helper utilities */
.input-premium {
    background: rgba(10, 15, 30, 0.6);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.input-premium:focus {
    border-color: var(--accent-indigo);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: rgba(17, 24, 39, 0.8);
}