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

:root {
  --cyan: #00f2ff;
  --red: #ff3c3c;
  --glass: rgba(255, 255, 255, 0.03);
  --border: rgba(0, 242, 255, 0.15);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: #020406;
  color: #fff;
  font-family: "Rajdhani", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center; /* This centers the HUD on PC */
  align-items: center;
  padding: 20px;
}

.background-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 242, 255, 0.05),
      transparent 70%
    ),
    url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
  z-index: -1;
}

.back-btn {
  /* Change 'absolute' to 'fixed' if you want it to stay even when scrolling */
  position: fixed; 
  top: 10px;       /* Distance from the top */
  left: 50px;      /* Distance from the left */
  
  text-decoration: none;
  font-size: 11px;
  font-weight: 800; /* Max valid value is 900 */
  
  /* Use ONLY flex to align the icon and text */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  background: rgba(0, 242, 255, 0.1);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 5px 16px;
  border-radius: 8px;
  font-family: "Orbitron";
  text-transform: uppercase;
  letter-spacing: 1px;
  
  transition: all 0.3s ease;
  z-index: 10000; /* Keeps it above everything else */
  backdrop-filter: blur(4px); /* Pro look */
}

.back-btn:hover {
  background: var(--cyan);
  color: #000;
  transform: scale(1.05); /* Slight pop instead of moving left */
  box-shadow: 0 0 15px var(--cyan);
}
/* THE HUD CONTAINER - Centered & Glassy */
.viewport-container {
  display: flex;
  width: 100%;
  max-width: 1100px; /* Limits width on PC to look like a focused HUD */
  min-height: 80vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(25px); /* High-end glass effect */
  border: 1px solid var(--border);
  border-radius: 40px;
  overflow: hidden;
  box-shadow:
    0 0 50px rgba(0, 0, 0, 0.9),
    inset 0 0 20px rgba(0, 242, 255, 0.05);
}

/* LEFT SIDE: TACTICAL INFO */
.intel-box {
  flex: 1;
  padding: 50px;
  border-right: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.02), transparent);
}

.badge {
  font-family: "Orbitron";
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 4px;
  margin-bottom: 10px;
  opacity: 0.6;
}

.intel-box h1 {
  font-family: "Orbitron";
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  margin: 0 0 35px 0;
}
.intel-box h1 span {
  color: var(--cyan);
  text-shadow: 0 0 15px var(--cyan);
}

.info-group {
  margin-bottom: 25px;
}
.info-group label {
  font-family: "Orbitron";
  color: #444;
  font-size: 10px;
  display: block;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.info-group p {
  margin: 18px 0;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  border-left: 3px solid var(--cyan);
  padding-left: 15px;
}

.time-pills span {
  display: inline-block;
  background: rgba(0, 242, 255, 0.1);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 10px 30px;
  border-radius: 12px;
  font-family: "Orbitron";
  font-size: 12px;
  margin: 5px 8px 5px 0;
}

.ban-grid span {
  background: rgba(255, 60, 60, 0.1);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  margin-right: 15px;
}

/* RIGHT SIDE: THE FORM */
.form-box {
  flex: 1.2;
  padding: 50px;
}

.form-header h2 {
  font-family: "Orbitron";
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 30px;
  letter-spacing: 3px;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}
.inp label {
  font-size: 11px;
  color: #555;
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}
.inp input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222;
  padding: 15px;
  color: #fff;
  border-radius: 15px;
  font-size: 1rem;
  outline: none;
  transition: 0.3s;
}
.inp input:focus {
  border-color: var(--cyan);
  background: rgba(0, 242, 255, 0.05);
}

.p-row {
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.02);
}
.p-row span {
  font-family: "Orbitron";
  color: var(--cyan);
  font-size: 11px;
}
.p-row input {
  background: transparent;
  border: none;
  color: #fff;
  width: 100%;
  font-size: 1.1rem;
  outline: none;
}

.glow-btn {
  width: 100%;
  background: var(--cyan);
  color: #000;
  border: none;
  padding: 22px;
  font-family: "Orbitron";
  font-weight: 900;
  font-size: 1rem;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 20px;
  transition: 0.4s;
  letter-spacing: 2px;
}
.glow-btn:hover {
  background: #fff;
  box-shadow: 0 0 30px var(--cyan);
  transform: translateY(-3px);
}

/* --- TACTICAL ERROR HUD --- */

/* 1. The Pulse & Shake Animation Definitions */
@keyframes shakeHUD {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

@keyframes pulseError {
    0% { box-shadow: 0 0 5px rgba(255, 60, 60, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 60, 60, 0.5); }
    100% { box-shadow: 0 0 5px rgba(255, 60, 60, 0.2); }
}

/* 2. The Error State (Triggered by JS) */
.hud-error {
    border-color: var(--red) !important;
    background: rgba(255, 60, 60, 0.08) !important;
    color: var(--red) !important;
    animation: pulseError 1.5s infinite; /* Keeps glowing until fixed */
}

/* 3. The Row Shake (Applied to the container) */
.row-shake {
    animation: shakeHUD 0.2s ease-in-out 0s 2;
    border-left: 4px solid var(--red) !important;
}

/* 4. High-Viz Placeholder for Errors */
.hud-error::placeholder {
    color: rgba(255, 60, 60, 0.7);
    font-weight: 800;
}

/* 5. Final HUD Touch: Remove that default browser outline */
input:focus {
    outline: none;
}
/* Red Alert Glow */
.hud-error {
    border-color: var(--red) !important;
    background: rgba(255, 60, 60, 0.1) !important;
    box-shadow: 0 0 20px rgba(255, 60, 60, 0.3) !important;
}

/* Shake Animation */
@keyframes shakeHUD {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.row-shake {
    animation: shakeHUD 0.2s ease-in-out 0s 2;
    border-left: 5px solid var(--red) !important;
}

/* --- LOADING HUD ANIMATION --- */
.loader {
    width: 14px;
    height: 14px;
    border: 2px solid var(--cyan);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    animation: rotation 0.6s linear infinite;
}

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

/* Make button look "locked" while booting */
.glow-btn:disabled {
    cursor: not-allowed;
    opacity: 0.8;
    transform: none !important;
}



/* --- MOBILE STACK FIX --- */
@media (max-width: 900px) {
  body {
    padding: 10px;
  }
  .viewport-container {
    flex-direction: column;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
  }
  .intel-box {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 40px 25px;
  }
  .form-box {
    padding: 40px 20px;
  }
  .input-grid {
    grid-template-columns: 1fr;
  }
}

/* --- MOBILE OPTIMIZATION --- */
@media screen and (max-width: 768px) {
    /* 1. Dashboard Layout */
    .dashboard-wrapper {
        flex-direction: column; /* Stack sidebars vertically */
        padding: 10px;
        gap: 20px;
    }

    .massive-title {
        font-size: 2.5rem !important;
        text-align: center;
    }

    /* 2. Sidebars & Content */
    .side-panel, .main-content {
        width: 100% !important; /* Force full width */
        min-width: unset !important;
    }

    /* 3. News Feed Adjustments */
    .news-item {
        flex-direction: column; /* Date above message */
        align-items: flex-start !important;
        gap: 5px !important;
    }

    .news-item p {
        text-align: left !important;
        width: 100%;
    }

    /* 4. Navigation & Back Button */
    .back-btn {
        left: 80% !important;
        transform: translateX(-50%) !important;
        width: 30%; /* Wider for easier clicking */
        justify-content: center;
        top: 15px;
    }

    .back-btn:hover {
        transform: translateX(-50%) scale(1.05) !important;
    }

    /* 5. Hide heavy background effects to save mobile battery */
    .vignette {
        display: none;
    }

    /* 6. Inputs & Forms */
    input, textarea, button {
        font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
        padding: 12px !important;
    }
}