:root {
    --primary: #00f3ff;
    --primary-glow: rgba(0, 243, 255, 0.6);
    --secondary: #b026ff;
    --success: #00ff66;
    --danger: #ff0055;
    --bg-dark: #050505;
    --glass-bg: rgba(13, 14, 21, 0.4);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body {
    background-color: var(--bg-dark);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    margin: 0;
    min-height: 100vh;
}

.font-tech { font-family: 'Rajdhani', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Ambient Aurora Background Flow */
.ambient-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    overflow: hidden;
    background: #020205;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
    animation: float 20s infinite alternate ease-in-out;
}

.orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(0,243,255,0.15) 0%, transparent 70%); animation-delay: 0s; }
.orb-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(176,38,255,0.15) 0%, transparent 70%); animation-delay: -5s; }
.orb-3 { top: 40%; left: 40%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(0,255,102,0.1) 0%, transparent 70%); animation-delay: -10s; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, 10%) scale(1.1); }
    100% { transform: translate(-5%, -10%) scale(0.9); }
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
}

/* Subtle Inner Glow Line */
.glass-panel::before {
    content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.5), transparent);
    opacity: 0.5;
}

/* Next-Level Buttons */
.btn-premium {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-premium::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    transform: scale(0); transition: transform 0.4s;
}
.btn-premium:hover {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2), inset 0 0 15px rgba(0, 243, 255, 0.1);
    transform: translateY(-2px);
}
.btn-premium:hover::after { transform: scale(1); }

.btn-predict {
    background: linear-gradient(90deg, #001122, #002244);
    border: 1px solid var(--primary);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
    position: relative;
    overflow: hidden;
}
.btn-predict::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    animation: shine 3s infinite;
}
@keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.input-premium {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    transition: all 0.3s ease;
}
.input-premium:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
    background: rgba(0, 20, 40, 0.6);
}

/* Fake Terminal with CRT Effect */
.terminal-container {
    background: #030303;
    border: 1px solid rgba(0, 243, 255, 0.2);
    position: relative;
    overflow: hidden;
}
.terminal-container::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    opacity: 0.6;
}
.terminal-text {
    color: #0f0;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

/* View Transitions */
.view-section {
    display: none;
    opacity: 0;
    transform: scale(0.98) translateY(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.view-section.active {
    display: block;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Futuristic Radar */
.radar-complex {
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(0, 243, 255, 0.2);
    background: repeating-radial-gradient(transparent, transparent 15px, rgba(0, 243, 255, 0.1) 16px);
    position: relative;
    margin: 0 auto;
}
.radar-complex::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    transform-origin: 0% 50%;
    animation: radar-spin 1.5s linear infinite;
}
@keyframes radar-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Text Hologram Effects */
.holo-up { color: var(--success); text-shadow: 0 0 10px var(--success), 0 0 30px rgba(0, 255, 102, 0.6); }
.holo-down { color: var(--danger); text-shadow: 0 0 10px var(--danger), 0 0 30px rgba(255, 0, 85, 0.6); }

/* Hazard Warning Bar */
.hazard-stripe {
    background: repeating-linear-gradient(-45deg, #000, #000 15px, #d32f2f 15px, #d32f2f 30px);
    background-size: 42px 42px;
    animation: hazard-move 2s linear infinite;
    border-bottom: 1px solid #ff0000;
}
@keyframes hazard-move { 0% { background-position: 0 0; } 100% { background-position: 42px 0; } }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 243, 255, 0.3); border-radius: 10px; }

@keyframes progress { 0% { left: 0%; } 100% { left: 66%; } }
.animate-spin-slow { animation: spin 3s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }