@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

 :root {
     --mars-orange: #FF6B35;
     --mars-red: #E63946;
     --mars-yellow: #FFB627;
     --space-dark: #0A0A0A;
     --space-blue: #1E3A8A;
     --neon-cyan: #00FFFF;
     --neon-green: #39FF14;
     --neon-pink: #FF007F;
     --earth-blue: #4FC3F7;
     --earth-green: #81C784;
     --glass-bg: rgba(255, 255, 255, 0.05);
     --glass-border: rgba(255, 255, 255, 0.1);
     --glass-blur: 25px;
 }

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

 body {
     font-family: 'Rajdhani', sans-serif;
     background: #000;
     color: white;
     overflow-x: hidden;
     min-height: 100vh;
     position: relative;
     perspective: 1000px;
 }


 .space-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -10;
     background: radial-gradient(circle at 20% 50%, #1a1a2e 0%, #16213e 25%, #0f0f0f 100%);
 }

 .command-center-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -9;
     background:
         repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.02), rgba(0, 255, 255, 0.02) 1px, transparent 1px, transparent 40px),
         repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.02), rgba(0, 255, 255, 0.02) 1px, transparent 1px, transparent 40px);
     animation: overlayScan 15s infinite linear;
     opacity: 0.3;
 }

 @keyframes overlayScan {
     0% {
         background-position: 0 0;
     }

     100% {
         background-position: 40px 40px;
     }
 }


 .stars {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -8;
     pointer-events: none;
 }

 .star {
     position: absolute;
     width: 2px;
     height: 2px;
     background: white;
     border-radius: 50%;
     animation: twinkle 3s infinite ease-in-out;
     box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
 }

 @keyframes twinkle {

     0%,
     100% {
         opacity: 0.3;
         transform: scale(1);
     }

     50% {
         opacity: 1;
         transform: scale(1.2);
     }
 }


 .planet-system {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -7;
     pointer-events: none;
 }

 .mars-planet {
     position: absolute;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: radial-gradient(circle at 30% 30%, #FF8C42, #E63946, #A91B2D);
     top: 15%;
     right: 8%;
     animation: marsRotate 20s infinite linear, marsFloat 8s infinite ease-in-out;
     box-shadow:
         0 0 80px rgba(255, 107, 53, 0.8),
         inset -20px -20px 40px rgba(0, 0, 0, 0.3);
     transform-style: preserve-3d;
 }

 .mars-planet::before {
     content: '';
     position: absolute;
     width: 20px;
     height: 20px;
     background: rgba(139, 69, 19, 0.8);
     border-radius: 50%;
     top: 40%;
     left: 30%;
     box-shadow:
         30px 20px 0 8px rgba(160, 82, 45, 0.6),
         -10px 50px 0 5px rgba(139, 69, 19, 0.7);
     transform: translateZ(10px);
     /* For 3D effect */
 }

 .earth-planet {
     position: absolute;
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background: radial-gradient(circle at 25% 25%, #87CEEB, #4FC3F7, #1976D2);
     bottom: 20%;
     left: 5%;
     animation: earthRotate 15s infinite linear, earthFloat 6s infinite ease-in-out;
     box-shadow:
         0 0 60px rgba(79, 195, 247, 0.6),
         inset -15px -15px 30px rgba(0, 0, 0, 0.2);
     transform-style: preserve-3d;
 }

 .earth-planet::before {
     content: '';
     position: absolute;
     width: 25px;
     height: 15px;
     background: rgba(129, 199, 132, 0.9);
     border-radius: 50%;
     top: 35%;
     left: 20%;
     box-shadow:
         20px -10px 0 8px rgba(129, 199, 132, 0.8),
         -5px 35px 0 12px rgba(129, 199, 132, 0.7);
     transform: translateZ(8px);
     /* For 3D effect */
 }

 /* @keyframes marsRotate {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        @keyframes earthRotate {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(-360deg); }
        } */

 @keyframes marsFloat {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes earthFloat {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(10px);
     }
 }

 .rocket {
     position: absolute;
     width: 60px;
     height: 120px;
     top: 60%;
     right: 25%;
     z-index: -7;
     animation: rocketFly 25s infinite linear;
 }

 .rocket::before {
     content: '🚀';
     font-size: 60px;
     position: absolute;
     transform: rotate(45deg);
     filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
 }

 .rocket::after {
     content: '';
     position: absolute;
     width: 4px;
     height: 80px;
     background: linear-gradient(180deg, #FF6B35, #FFB627, transparent);
     left: 28px;
     top: 120px;
     border-radius: 2px;
     box-shadow: 0 0 20px #FF6B35;
 }

 @keyframes rocketFly {
     0% {
         transform: translate(0, 0) rotate(45deg);
     }

     25% {
         transform: translate(-200px, -100px) rotate(15deg);
     }

     50% {
         transform: translate(-400px, -50px) rotate(-15deg);
     }

     75% {
         transform: translate(-200px, 50px) rotate(30deg);
     }

     100% {
         transform: translate(0, 0) rotate(45deg);
     }
 }


 .nebula {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -6;
     background:
         radial-gradient(ellipse at 70% 20%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
         radial-gradient(ellipse at 20% 80%, rgba(79, 195, 247, 0.1) 0%, transparent 50%),
         radial-gradient(ellipse at 80% 60%, rgba(57, 255, 20, 0.08) 0%, transparent 50%);
     animation: nebulaFlow 30s infinite ease-in-out;
 }

 @keyframes nebulaFlow {

     0%,
     100% {
         opacity: 0.7;
         transform: scale(1) rotate(0deg);
     }

     33% {
         opacity: 1;
         transform: scale(1.1) rotate(120deg);
     }

     66% {
         opacity: 0.8;
         transform: scale(0.9) rotate(240deg);
     }
 }


 .glass-card {
     background: var(--glass-bg);
     backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--glass-border);
     border-radius: 25px;
     padding: 2rem;
     margin-bottom: 2rem;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 .glass-card::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03), transparent);
     transform: rotate(45deg);
     transition: all 0.6s ease;
     opacity: 0;
 }

 .glass-card:hover::before {
     animation: shimmer 1.5s ease-in-out;
 }

 .glass-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow:
         0 25px 50px rgba(0, 255, 255, 0.2),
         0 0 100px rgba(255, 107, 53, 0.1);
     border-color: rgba(0, 255, 255, 0.3);
 }

 @keyframes shimmer {
     0% {
         opacity: 0;
         transform: translateX(-100%) translateY(-100%) rotate(45deg);
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0;
         transform: translateX(100%) translateY(100%) rotate(45deg);
     }
 }


 .command-header {
     background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(10, 10, 10, 0.8));
     backdrop-filter: blur(20px);
     border-bottom: 3px solid;
     border-image: linear-gradient(90deg, #FF6B35, #00FFFF, #39FF14, #FF007F) 1;
     padding: 2rem 0;
     position: relative;
     overflow: hidden;
 }

 .command-header::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
     animation: headerScan 4s infinite;
 }

 @keyframes headerScan {
     0% {
         left: -100%;
     }

     100% {
         left: 100%;
     }
 }

 .command-title {
     font-family: 'Orbitron', monospace;
     font-weight: 900;
     font-size: 3.5rem;
     background: linear-gradient(45deg, #FF6B35, #00FFFF, #39FF14, #FF007F, #FF6B35);
     background-size: 300% 300%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-align: center;
     animation: gradientShift 3s ease-in-out infinite;
     text-shadow: 0 0 50px rgba(0, 255, 255, 0.5);
     margin-bottom: 1rem;
 }

 @keyframes gradientShift {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 .mission-status {
     display: flex;
     justify-content: center;
     gap: 3rem;
     flex-wrap: wrap;
     margin-top: 1rem;
 }

 .status-panel {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1rem 2rem;
     background: rgba(0, 0, 0, 0.4);
     border: 1px solid rgba(0, 255, 255, 0.3);
     border-radius: 50px;
     backdrop-filter: blur(15px);
     transition: all 0.3s ease;
 }

 .status-panel:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
 }

 .status-indicator {
     width: 15px;
     height: 15px;
     border-radius: 50%;
     animation: statusPulse 2s infinite;
 }

 .online {
     background: radial-gradient(circle, #39FF14, #00FF00);
 }

 .warning {
     background: radial-gradient(circle, #FFB627, #FF6B35);
 }

 .critical {
     background: radial-gradient(circle, #FF007F, #E63946);
 }

 @keyframes statusPulse {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
         box-shadow: 0 0 20px currentColor;
     }

     50% {
         opacity: 0.7;
         transform: scale(1.2);
         box-shadow: 0 0 40px currentColor;
     }
 }

 /* Weather Display */
 .weather-showcase {
     text-align: center;
     position: relative;
     padding: 3rem;
 }

 .weather-icon-display {
     font-size: 5rem;
     margin-bottom: 2rem;
     position: relative;
     display: inline-block;
 }

 .weather-icon-display i {
     color: var(--mars-orange);
     filter: drop-shadow(0 0 30px var(--mars-orange));
     animation: weatherIconFloat 4s ease-in-out infinite;
 }

 @keyframes weatherIconFloat {

     0%,
     100% {
         transform: translateY(0) rotate(0deg);
     }

     25% {
         transform: translateY(-10px) rotate(5deg);
     }

     50% {
         transform: translateY(0) rotate(0deg);
     }

     75% {
         transform: translateY(-5px) rotate(-5deg);
     }
 }

 .temperature-massive {
     font-family: 'Orbitron', monospace;
     font-size: 6rem;
     font-weight: 900;
     background: linear-gradient(45deg, var(--mars-orange), var(--mars-yellow));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-shadow: 0 0 100px var(--mars-orange);
     margin: 2rem 0;
     position: relative;
 }

 .temperature-massive::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     width: 100px;
     height: 4px;
     background: linear-gradient(90deg, transparent, var(--mars-orange), transparent);
     transform: translateX(-50%);
     animation: tempUnderline 3s ease-in-out infinite;
 }

 @keyframes tempUnderline {

     0%,
     100% {
         width: 100px;
         opacity: 0.5;
     }

     50% {
         width: 200px;
         opacity: 1;
     }
 }

 .data-matrix {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin-top: 2rem;
 }

 .data-pod {
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.02));
     border: 1px solid rgba(0, 255, 255, 0.2);
     border-radius: 20px;
     padding: 2rem;
     position: relative;
     overflow: hidden;
     transition: all 0.4s ease;
 }

 .data-pod::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
     animation: dataScan 3s infinite;
 }

 @keyframes dataScan {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(100%);
     }
 }

 .data-pod:hover {
     transform: translateY(-5px);
     border-color: var(--neon-cyan);
     box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
 }

 .data-label {
     font-size: 1rem;
     color: #AAA;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .data-value {
     font-family: 'Orbitron', monospace;
     font-size: 2.2rem;
     font-weight: 700;
     color: var(--neon-green);
     text-shadow: 0 0 20px var(--neon-green);
 }

 .data-trend {
     font-size: 0.9rem;
     margin-top: 0.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .trend-up {
     color: var(--neon-green);
 }

 .trend-down {
     color: var(--mars-orange);
 }

 /* Planet Comparison */
 .planet-arena {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3rem;
     margin-top: 3rem;
     position: relative;
 }

 .planet-arena::before {
     content: 'VS';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 3rem;
     font-weight: 900;
     color: var(--neon-pink);
     text-shadow: 0 0 50px var(--neon-pink);
     z-index: 10;
     animation: vsPulse 2s infinite ease-in-out;
 }

 @keyframes vsPulse {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
     }

     50% {
         transform: translate(-50%, -50%) scale(1.1);
         opacity: 0.8;
     }
 }

 .planet-display {
     text-align: center;
     padding: 3rem;
     border-radius: 30px;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(20px);
     transition: all 0.5s ease;
 }

 .mars-display {
     background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(230, 57, 70, 0.05));
     border: 2px solid rgba(255, 107, 53, 0.3);
 }

 .earth-display {
     background: linear-gradient(135deg, rgba(79, 195, 247, 0.1), rgba(129, 199, 132, 0.05));
     border: 2px solid rgba(79, 195, 247, 0.3);
 }

 .planet-display:hover {
     transform: scale(1.05);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }

 .planet-visual {
     width: 150px;
     height: 150px;
     margin: 0 auto 2rem;
     border-radius: 50%;
     position: relative;
     /* animation: planetSpin 20s infinite linear; */
     box-shadow: 0 0 80px rgba(255, 107, 53, 0.6);
     /* Default for Mars */
 }

 .mars-visual {
     background: radial-gradient(circle at 30% 30%, #FF8C42, #E63946, #A91B2D);
     box-shadow: 0 0 80px rgba(255, 107, 53, 0.6);
 }

 .earth-visual {
     background: radial-gradient(circle at 25% 25%, #87CEEB, #4FC3F7, #1976D2);
     box-shadow: 0 0 80px rgba(79, 195, 247, 0.6);
 }

 @keyframes planetSpin {
     0% {
         transform: rotateY(0deg);
     }

     100% {
         transform: rotateY(360deg);
     }
 }

 .comparison-data {
     margin-top: 1.5rem;
     font-size: 1.1rem;
     line-height: 1.8;
 }

 .comparison-data strong {
     color: var(--neon-green);
     font-family: 'Orbitron', monospace;
 }

 .comparison-data span {
     color: #AAA;
 }

 .chart-wrapper {
     position: relative;
     height: 400px;
     margin-top: 2rem;
     padding: 1rem;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 20px;
     border: 1px solid rgba(0, 255, 255, 0.2);
     box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.1);
 }

 .chart-wrapper canvas {
     background-color: transparent !important;
 }

 @media (max-width: 768px) {
     .command-title {
         font-size: 2.5rem;
     }

     .temperature-massive {
         font-size: 4rem;
     }

     .planet-arena {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .mission-status {
         gap: 1rem;
     }

     .data-matrix {
         grid-template-columns: 1fr;
     }

     .mars-planet,
     .earth-planet,
     .rocket {
         display: none;
     }

     /* Hide for smaller screens */
     .command-center-overlay {
         display: none;
     }
 }

 .loading-wave {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100px;
     margin: 2rem auto;
 }

 .loading-wave div {
     display: inline-block;
     width: 6px;
     height: 40px;
     background-color: var(--neon-cyan);
     margin: 1px;
     border-radius: 3px;
     animation: loadingWave 1s ease-in-out infinite;
 }

 .loading-wave div:nth-child(1) {
     animation-delay: 0s;
 }

 .loading-wave div:nth-child(2) {
     animation-delay: 0.1s;
 }

 .loading-wave div:nth-child(3) {
     animation-delay: 0.2s;
 }

 .loading-wave div:nth-child(4) {
     animation-delay: 0.3s;
 }

 .loading-wave div:nth-child(5) {
     animation-delay: 0.4s;
 }

 @keyframes loadingWave {

     0%,
     40%,
     100% {
         transform: scaleY(0.4);
     }

     20% {
         transform: scaleY(1);
     }
 }

 .alert-system {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 1000;
     max-width: 400px;
 }

 .alert-panel {
     background: linear-gradient(135deg, rgba(230, 57, 70, 0.9), rgba(255, 107, 53, 0.9));
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 15px;
     padding: 1rem;
     margin-bottom: 1rem;
     animation: alertSlide 0.5s ease-out;
     box-shadow: 0 10px 30px rgba(230, 57, 70, 0.4);
     color: white;
     font-family: 'Rajdhani', sans-serif;
     font-weight: 500;
 }

 .alert-panel.success {
     background: linear-gradient(135deg, rgba(57, 255, 20, 0.9), rgba(0, 255, 0, 0.9));
     box-shadow: 0 10px 30px rgba(57, 255, 20, 0.4);
 }

 .alert-panel.warning {
     background: linear-gradient(135deg, rgba(255, 182, 39, 0.9), rgba(255, 107, 53, 0.9));
     box-shadow: 0 10px 30px rgba(255, 182, 39, 0.4);
 }

 @keyframes alertSlide {
     from {
         transform: translateX(100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }