/* =======================================================
   ORBITALGUARD AI
   NASA-STYLE MISSION CONTROL
   styles.css (PART 1)
======================================================= */

/* ===========================
   IMPORT FONT
=========================== */

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

/* ===========================
   ROOT COLORS
=========================== */

:root {

  --background: #030712;
  --panel: #0B1220;
  --panel2: #111B2F;

  --border: #20395B;

  --primary: #00C8FF;
  --secondary: #45D9FF;

  --success: #00FF99;
  --warning: #FFC107;
  --danger: #FF4D4D;

  --text: #F4F8FF;
  --text2: #AFC6E8;

  --shadow: 0 0 25px rgba(0,200,255,.15);

}

/* ===========================
   RESET
=========================== */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

/* ===========================
   BODY
=========================== */

body {

  font-family: 'Roboto',sans-serif;

  background:

  radial-gradient(circle at top,
  #071223,
  #030712 70%);

  color: var(--text);

  overflow-x: hidden;

  min-height: 100vh;

}

/* ===========================
   STAR BACKGROUND
=========================== */

body::before {

  content: "";

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  opacity: .25;

  background-image:

  radial-gradient(white 1px, transparent 1px);

  background-size: 70px 70px;

  z-index: -1;

  animation: starsMove 120s linear infinite;

}

@keyframes starsMove {

  from {

    transform: translateY(0);

  }

  to {

    transform: translateY(-200px);

  }

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar {

  width: 10px;

}

::-webkit-scrollbar-track {

  background: #06101D;

}

::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: 20px;

}

/* ===========================
   HEADER
=========================== */

.topBar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 25px 40px;

  background: rgba(6,18,33,.90);

  backdrop-filter: blur(15px);

  border-bottom: 1px solid var(--border);

  box-shadow: var(--shadow);

  position: sticky;

  top: 0;

  z-index: 100;

}

/* ===========================
   LOGO
=========================== */

.logoArea h1 {

  font-family: 'Orbitron',sans-serif;

  font-size: 34px;

  color: var(--primary);

  letter-spacing: 2px;

  text-shadow:

  0 0 10px rgba(0,200,255,.7);

}

.logoArea p {

  margin-top: 8px;

  color: var(--text2);

  font-size: 15px;

}

/* ===========================
   STATUS
=========================== */

.missionStatus {

  display: flex;

  gap: 20px;

}

.statusCard {

  background: var(--panel2);

  padding: 18px 25px;

  border-radius: 14px;

  border: 1px solid var(--border);

  min-width: 180px;

  text-align: center;

  box-shadow: var(--shadow);

}

.statusCard h3 {

  font-size: 12px;

  color: var(--secondary);

  font-family: 'Orbitron';

  margin-bottom: 8px;

  letter-spacing: 1px;

}

.statusCard p {

  font-size: 18px;

  font-weight: 600;

  color: white;

}

/* ===========================
   HERO
=========================== */

.hero {

  width: min(1200px,92%);

  margin: 35px auto;

  padding: 35px;

  background: rgba(12,24,45,.70);

  border: 1px solid var(--border);

  border-radius: 20px;

  box-shadow: var(--shadow);

}

.hero h2 .title {

  font-family: 'Orbitron';

  color: var(--primary);

  margin-bottom: 20px;

  font-size: 30px;

}

.hero p {

  line-height: 1.9;

  font-size: 17px;

  color: var(--text2);

}

/* ===========================
   MAIN GRID
=========================== */

.missionGrid {

  width: min(1450px,95%);

  margin: auto;

  display: grid;

  grid-template-columns:

  2fr 1fr;

  gap: 25px;

}

/* ===========================
   COLUMNS
=========================== */

.leftColumn,

.rightColumn {

  display: flex;

  flex-direction: column;

  gap: 25px;

}

/* ===========================
   PANEL
=========================== */

.panel {

  background: rgba(11,18,32,.90);

  border: 1px solid var(--border);

  border-radius: 18px;

  padding: 25px;

  box-shadow: var(--shadow);

  transition: .35s;

  position: relative;

  overflow: hidden;

}

.panel:hover {

  transform: translateY(-4px);

  box-shadow:

  0 0 30px rgba(0,200,255,.28);

}

/* glowing top border */

.panel::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(

  90deg,

  transparent,

  var(--primary),

  transparent

  );

}

/* ===========================
   PANEL TITLES
=========================== */

.panel h2 {

  font-family: 'Orbitron';

  font-size: 20px;

  margin-bottom: 22px;

  color: var(--primary);

  letter-spacing: 1px;

}

/* ===========================
   LEGEND
=========================== */

.legend {

  display: flex;

  justify-content: center;

  gap: 25px;

  margin-top: 18px;

  font-weight: 600;

}

.legend .leo {

  color: #00FF99;

}

.legend .meo {

  color: #FFC107;

}

.legend .geo {

  color: #FF5555;

}

/* ===========================
   MAP
=========================== */

#map {

  width: 100%;

  height: 520px;

  border-radius: 16px;

  overflow: hidden;

  border: 1px solid var(--border);

}

/* ===========================
   3D EARTH
=========================== */

#earth3d {

  width: 100%;

  height: 620px;

  background: #000;

  border-radius: 18px;

  overflow: hidden;

  border: 2px solid rgba(0,200,255,.25);

  box-shadow:

  0 0 30px rgba(0,180,255,.25);

}
#objectInfo {

  padding: 25px;

  background: #071220;

  border: 1px solid #214063;

  border-radius: 15px;

  line-height: 1.8;

  font-size: 16px;

}

#objectInfo h3 {

  color: #00d8ff;

  margin-bottom: 12px;

  font-family: Orbitron;

}

#objectInfo hr {

  margin: 15px 0;

  border: 1px solid #18324f;

}

#objectInfo strong {

  color: #66d9ff;

}

/* ====================================================== */
/* USER GUIDE */
/* ====================================================== */

.guide-section {

  max-width: 1400px;

  margin: 60px auto;

  padding: 40px;

}

.guide-section h2 {

  text-align: center;

  margin-bottom: 20px;

  font-size: 34px;

  color: #6fdcff;

}

.guide-intro {

  text-align: center;

  font-size: 18px;

  line-height: 1.8;

  max-width: 1000px;

  margin: auto auto 40px;

  color: #d8e6f4;

}

.guide-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));

  gap: 25px;

}

.guide-card {

  background: #081b2d;

  padding: 25px;

  border-radius: 15px;

  border: 1px solid #1b4b73;

  transition: .3s;

}

.guide-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 0 25px rgba(0,180,255,.25);

}

.guide-card h3 {

  color: #59d8ff;

  margin-bottom: 15px;

}

.guide-card p {

  line-height: 1.8;

  color: #d5e2ef;

}

/* ====================================================== */
/* PROJECT VISION */
/* ====================================================== */

.vision-section {

  max-width: 1200px;

  margin: 70px auto;

  padding: 40px;

  background: #071521;

  border: 1px solid #18456d;

  border-radius: 18px;

}

.vision-section h2 {

  text-align: center;

  color: #6fdcff;

  margin-bottom: 25px;

}

.vision-section p {

  font-size: 18px;

  line-height: 1.9;

  color: #d7e5f2;

  margin-bottom: 20px;

}

/* ========================================= */
/* GUIDE TOGGLE */
/* ========================================= */

.guide-toggle {

  width: 100%;

  padding: 18px;

  font-size: 20px;

  font-weight: bold;

  background: #0a2742;

  color: white;

  border: none;

  border-radius: 12px;

  cursor: pointer;

  transition: .3s;

  margin-bottom: 15px;

}

.guide-toggle:hover {

  background: #10385f;

}

.guide-content {

  display: none;

  animation: fadeGuide .4s ease;

}

.guide-content.show {

  display: block;

}

@keyframes fadeGuide {

  from {

    opacity: 0;

    transform: translateY(-10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/* =====================================
ORBITAL ANALYTICS
===================================== */

.analyticsSection {

  margin-top: 40px;

}

.analyticsGrid {

  display: grid;

  grid-template-columns: repeat(auto-fit,minmax(340px,1fr));

  gap: 20px;

  margin-top: 20px;

}

.chartCard {

  background: #071421;

  border: 1px solid rgba(0,216,255,.25);

  border-radius: 16px;

  padding: 18px;

  box-shadow:

  0 0 20px rgba(0,216,255,.08);

  transition: .3s;

  height: 340px;

}

.chartCard:hover {

  transform: translateY(-5px);

  box-shadow:

  0 0 30px rgba(0,216,255,.25);

}

.chartCard h3 {

  margin-bottom: 15px;

  color: #00d8ff;

  text-align: center;

  font-size: 18px;

}

.chartCard canvas {

  width: 100% !important;

  height: 260px !important;

}