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

  /* Mobile Viewport Fixes */
  html {
      overflow-x: hidden;
      width: 100%;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  }

  /* Mobile Menu Button Fixes */
  #sidebarToggle {
      display: flex !important;
      /* Ensure it's a flex container */
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--text-dark);
      cursor: pointer;
      transition: all 0.3s ease;
  }

  /* Hamburger to X animation */
  #sidebarToggle .icon-bar {
      /* Add this block for hamburger icon styling */
      display: block;
      width: 22px;
      height: 2px;
      background-color: var(--text-dark);
      border-radius: 1px;
      transition: all 0.3s ease-in-out;
  }

  #sidebarToggle .icon-bar+.icon-bar {
      margin-top: 4px;
  }

  .sidebar.open~.navbar #sidebarToggle .icon-bar:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
  }

  .sidebar.open~.navbar #sidebarToggle .icon-bar:nth-child(2) {
      opacity: 0;
  }

  .sidebar.open~.navbar #sidebarToggle .icon-bar:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
  }

  .dark-mode #sidebarToggle .icon-bar {
      background-color: var(--text-light);
  }


  .dark-mode #sidebarToggle {
      color: var(--text-light);
  }

  #sidebarToggle:hover {
      background: rgba(0, 0, 0, 0.1);
  }

  .dark-mode #sidebarToggle:hover {
      background: rgba(255, 255, 255, 0.1);
  }

  /* Sidebar toggle open state (mobile) */
  #sidebarToggle.open {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-light);
  }

  /* Ensure overlay active shows above content on mobile */
  .sidebar-overlay.active {
      display: block !important;
      opacity: 1 !important;
      transition: opacity 0.25s ease-in-out !important;
  }

  /* Support overlay when overlay is placed before sidebar in DOM: use body flag */
  body.sidebar-open .sidebar-overlay {
      display: block !important;
      opacity: 1 !important;
  }

  body {
      overflow-x: hidden;
      width: 100%;
      position: relative;
  }

  /* Prevent horizontal scroll on mobile */
  .app-container,
  .main-container,
  .content,
  .page {
      max-width: 100vw;
      overflow-x: hidden;
  }

  :root {
      --sidebar-width: 280px;
      --primary-color: #2563eb;
      --secondary-color: #1e40af;
      --success-color: #10b981;
      --warning-color: #f59e0b;
      --danger-color: #ef4444;
      --dark-bg: #0f172a;
      --dark-secondary: #1e293b;
      --dark-tertiary: #334155;
      --light-bg: #ffffff;
      --light-secondary: #f8fafc;
      --light-tertiary: #e2e8f0;
      --text-dark: #0f172a;
      --text-light: #f8fafc;
      --border-light: #e2e8f0;
      --border-dark: #475569;
  }

  body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
      transition: all 0.3s ease;
  }

  body.light-mode {
      background: var(--light-bg);
      color: var(--text-dark);
  }

  body.dark-mode {
      background: var(--dark-bg);
      color: var(--text-light);
  }




  /* =============== LOGIN PAGE ANIMATIONS =============== */
  .login-page {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      opacity: 0;
      /* Initially hidden */
      visibility: hidden;
      /* Initially hidden */
      transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
  }

  .login-page.active-animated {
      opacity: 1;
      visibility: visible;
      animation: fadeInScale 1s ease-out forwards;
  }

  .login-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(-45deg, #000000, #1a1a1a, #333333, #000000);
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
  }

  .login-background::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: starField 20s linear infinite;
  }

  @keyframes gradientShift {
      0% {
          background-position: 0% 50%;
      }

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

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

  @keyframes starField {
      0% {
          transform: translateY(0px) rotate(0deg);
      }

      100% {
          transform: translateY(-100px) rotate(360deg);
      }
  }

  .login-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      position: relative;
      /* Add perspective for 3D flip effect */
      perspective: 1000px;
  }

  .login-panel,
  #testReviewPopup {
      backface-visibility: hidden;
      /* Prevents flickering during 3D transform */
  }

  /* Mobile Login Page Enhancements */
  @media (max-width: 768px) {
      .login-container {
          padding: 15px;
          flex-direction: column;
          /* Use flex-start to prevent vertical centering from pushing content off-screen */
          justify-content: flex-start;
          padding-top: 5vh;
          /* Add some space at the top */
          padding-bottom: 5vh;
          /* Add space at the bottom */
          min-height: 100%;
          /* Ensure it can scroll if content overflows */
          align-items: center;
          justify-content: center;
          padding-top: 2vh;
      }

      .login-panel {
          width: 100%;
          margin: 0;
          /* Remove any top/bottom margin that might push it down */
          max-width: 100%;
      }

      .mission-title {
          font-size: 1.5rem;
          text-align: center;
      }

      .mission-subtitle {
          font-size: 0.85rem;
          text-align: center;
      }

      .access-form {
          margin-top: 20px;
      }

      .input-wrapper {
          margin-bottom: 15px;
      }

      .input-wrapper i {
          font-size: 1.1rem;
      }

      .input-wrapper input {
          font-size: 1rem;
          padding: 12px 12px 12px 40px;
      }

      .system-status {
          flex-direction: column;
          gap: 8px;
          text-align: center;
      }

      .status-item {
          font-size: 0.85rem;
      }
  }

  /* Login Page Flip Animation (All Devices) */
  .login-panel {
      /* Use absolute positioning to stack panels */
      position: absolute;
      /* Initially hide login panel */
      opacity: 0;
      transform: rotateY(-90deg) scale(0.9);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      pointer-events: none;
      /* Prevent interaction when hidden */
  }

  .login-panel.show-panel {
      opacity: 1;
      transform: rotateY(0deg) scale(1);
      pointer-events: auto;
      /* Allow interaction when shown */
  }

  #testReviewPopup.hide-popup {
      /* Use absolute positioning to stack panels */
      position: absolute;
      opacity: 0;
      transform: rotateY(90deg) scale(0.9);
      transition: opacity 0.6s ease-in, transform 0.6s ease-in;
      pointer-events: none;
  }

  @media (max-width: 768px) {
      .login-container {
          padding: 15px;
          flex-direction: column;
          /* Use flex-start to prevent vertical centering from pushing content off-screen */
          justify-content: flex-start;
          padding-top: 5vh;
          /* Add some space at the top */
          padding-bottom: 5vh;
          /* Add space at the bottom */
          min-height: 100%;
          /* Ensure it can scroll if content overflows */
          align-items: center;
          justify-content: center;
          padding-top: 2vh;
      }

      .login-panel {
          width: 100%;
          margin: 0;
      }
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  .form-group {
      margin-bottom: 25px;
      position: relative;
      z-index: 1;
      animation: fadeInUp 1s ease-out 0.7s both;
  }

  .form-group input {
      width: 100%;
      padding: 15px 20px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      color: white;
      font-size: 16px;
      transition: all 0.3s ease;
  }

  .form-group input::placeholder {
      color: rgba(255, 255, 255, 0.6);
  }

  .form-group input:focus {
      outline: none;
      border-color: var(--primary-color);
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
  }

  .login-btn {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      border: none;
      border-radius: 10px;
      color: white;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      animation: fadeInUp 1s ease-out 0.9s both;
      position: relative;
      overflow: hidden;
  }

  .login-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s;
  }

  .login-btn:hover::before {
      left: 100%;
  }

  .login-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
  }

  /* =============== DASHBOARD LAYOUT =============== */
  .app-container {
      display: none;
      min-height: 100vh;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }

  .app-container.active {
      display: flex;
      flex-direction: column;
      opacity: 1;
      visibility: visible;
  }

  .navbar {
      height: 70px;
      /* Desktop: subtle frosted backdrop; disabled on mobile/sidebar-open to avoid full-screen blur */
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background: linear-gradient(90deg, var(--light-bg), var(--light-secondary), var(--light-bg));
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      animation: slideDown 0.8s ease-out;
      width: 100%;
      box-sizing: border-box;
  }

  .dark-mode .navbar {
      background: linear-gradient(90deg, #2c3e50, #3498db, #2c3e50);
      border-bottom-color: var(--border-dark);
      color: var(--text-light);
  }

  /* Fix dark mode visibility for mobile */
  @media (max-width: 768px) {

      /* Disable navbar backdrop blur on small screens but don't force a dark background.
         Background should follow the active theme (.dark-mode or .light-mode). */
      .navbar {
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
      }

      /* Mobile: theme-specific navbar backgrounds */
      .dark-mode .navbar {
          background: var(--dark-secondary);
      }

      .light-mode .navbar {
          background: linear-gradient(90deg, var(--light-bg), var(--light-secondary), var(--light-bg));
      }

      .dark-mode .sidebar {
          background: var(--dark-secondary);
          border-right-color: var(--border-dark);
      }

      .dark-mode .content {
          background: var(--dark-bg);
          color: var(--text-light);
      }

      .dark-mode .alert-card {
          background: var(--dark-secondary);
          border-color: var(--border-dark);
          color: var(--text-light);
      }

      .dark-mode .map-container,
      .dark-mode .alerts-panel,
      .dark-mode .chart-container {
          background: var(--dark-secondary);
          border-color: var(--border-dark);
          color: var(--text-light);
      }
  }

  @keyframes slideDown {
      from {
          opacity: 0;
          transform: translateY(-70px);
      }

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

  .navbar-left {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;
  }

  /* Hide sidebar toggle on desktop */
  @media (min-width: 769px) {
      #sidebarToggle {
          display: none;
      }
  }

  .logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-color);
      animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {

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

      50% {
          transform: scale(1.05);
      }
  }

  .navbar-right {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-left: auto;
  }

  .theme-toggle {
      background: none;
      border: none;
      padding: 8px;
      border-radius: 8px;
      cursor: pointer;
      color: var(--text-dark);
      transition: all 0.3s ease;
      animation: rotateIn 1s ease-out;
  }

  .dark-mode .theme-toggle {
      color: var(--text-light);
  }

  @keyframes rotateIn {
      from {
          opacity: 0;
          transform: rotate(-180deg);
      }

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

  .theme-toggle:hover {
      background: var(--light-secondary);
      transform: scale(1.1);
  }

  .dark-mode .theme-toggle:hover {
      background: var(--dark-tertiary);
  }

  .logout-btn {
      padding: 8px 16px;
      background: var(--danger-color);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      animation: bounceIn 1s ease-out 0.5s both;
  }

  @keyframes bounceIn {
      0% {
          opacity: 0;
          transform: scale(0.3);
      }

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

      70% {
          transform: scale(0.9);
      }

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

  .logout-btn:hover {
      background: #dc2626;
      transform: translateY(-2px);
  }

  .main-container {
      display: grid;
      grid-template-columns: var(--sidebar-width) 1fr;
      min-height: calc(100vh - 70px);
      margin-top: 70px;
  }

  .sidebar {
      background: var(--light-secondary);
      border-right: 1px solid var(--border-light);
      padding: 30px 0;
      animation: slideInLeft 0.8s ease-out;
      position: relative;
      overflow: hidden;
  }

  .dark-mode .sidebar {
      background: var(--dark-secondary);
      border-right-color: var(--border-dark);
  }

  /* Remove any background effects from sidebar */
  .sidebar::before,
  .sidebar::after {
      display: none;
  }

  @keyframes slideInLeft {
      from {
          opacity: 0;
          transform: translateX(-250px);
      }

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

  .nav-item {
      display: flex;
      align-items: center;
      padding: 18px 25px;
      color: var(--text-dark);
      text-decoration: none;
      transition: all 0.3s ease;
      border-left: 4px solid transparent;
      animation: fadeInUp 0.5s ease-out;
      margin: 2px 0;
      font-weight: 500;
      font-size: 0.95rem;
  }

  .dark-mode .nav-item {
      color: var(--text-light);
  }

  .nav-item:hover {
      background: rgba(37, 99, 235, 0.1);
      color: var(--primary-color);
      border-left-width: 8px;
      border-left-color: var(--primary-color);
      padding-left: 21px;
      /* 25px - 4px */
  }

  .nav-item.active {
      background: var(--primary-color);
      color: white;
      border-left-width: 8px;
      border-left-color: var(--secondary-color);
      padding-left: 21px;
      /* 25px - 4px */
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }

  .nav-item i {
      margin-right: 15px;
      width: 20px;
      text-align: center;
      font-size: 1.1rem;
  }

  /* Sidebar header */
  .sidebar-header {
      padding: 0 25px 25px 25px;
      border-bottom: 1px solid var(--border-light);
      margin-bottom: 20px;
  }

  .dark-mode .sidebar-header {
      border-bottom-color: var(--border-dark);
  }

  .sidebar-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-dark);
      margin: 0;
  }

  .dark-mode .sidebar-title {
      color: var(--text-light);
  }

  .content {
      padding: 20px;
      background: var(--light-bg);
      animation: fadeIn 1s ease-out;
  }

  .dark-mode .content {
      background: var(--dark-bg);
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .page {
      display: none;
      animation: slideInUp 0.6s ease-out;
  }

  .page.active {
      display: block;
  }

  @keyframes slideInUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

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

  .page-header {
      margin-bottom: 30px;
      animation: fadeInDown 0.8s ease-out;
  }

  @keyframes fadeInDown {
      from {
          opacity: 0;
          transform: translateY(-20px);
      }

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

  .page-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 8px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .page-subtitle {
      color: #6b7280;
      font-size: 1rem;
  }

  /* =============== DASHBOARD SPECIFIC STYLES =============== */
  .dashboard-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
  }

  /* Mobile and Tablet Dashboard Optimizations */
  @media (max-width: 1024px) {

      .analytics-layout {
          grid-template-columns: 1fr;
      }

      .analytics-left-column {
          grid-column: span 1;
      }

      .dashboard-grid {
          grid-template-columns: 1fr;
      }

      .content {
          margin-left: 0;
          width: 100%;
      }
  }

  .map-container {
      background: var(--light-bg);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-light);
      animation: zoomIn 0.8s ease-out;
  }

  .dark-mode .map-container {
      background: var(--dark-secondary);
      border-color: var(--border-dark);
  }

  @keyframes zoomIn {
      from {
          opacity: 0;
          transform: scale(0.8);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  #map {
      height: 400px;
      border-radius: 8px;
      animation: mapLoad 1s ease-out 0.5s both;
  }

  @keyframes mapLoad {
      from {
          opacity: 0;
          filter: blur(5px);
      }

      to {
          opacity: 1;
          filter: blur(0);
      }
  }

  .alerts-panel {
      background: var(--light-bg);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-light);
      animation: slideInRight 0.8s ease-out;
  }

  .dark-mode .alerts-panel {
      background: var(--dark-secondary);
      border-color: var(--border-dark);
  }

  @keyframes slideInRight {
      from {
          opacity: 0;
          transform: translateX(50px);
      }

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

  .alert-item {
      padding: 12px;
      margin-bottom: 12px;
      border-radius: 8px;
      border-left: 4px solid;
      transition: all 0.3s ease;
      animation: alertPop 0.5s ease-out;
  }

  @keyframes alertPop {
      0% {
          opacity: 0;
          transform: translateX(20px) scale(0.9);
      }

      50% {
          transform: scale(1.02);
      }

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

  .alert-item:hover {
      transform: translateX(5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .alert-critical {
      background: rgba(239, 68, 68, 0.1);
      border-left-color: var(--danger-color);
  }

  .alert-warning {
      background: rgba(245, 158, 11, 0.1);
      border-left-color: var(--warning-color);
  }

  .alert-info {
      background: rgba(37, 99, 235, 0.1);
      border-left-color: var(--primary-color);
  }

  .charts-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 20px;
  }

  .chart-container {
      background: var(--light-bg);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-light);
      animation: chartSlide 0.8s ease-out;
  }

  .dark-mode .chart-container {
      background: var(--dark-secondary);
      border-color: var(--border-dark);
  }

  @keyframes chartSlide {
      from {
          opacity: 0;
          transform: translateY(40px);
      }

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

  .status-indicators {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      animation: statusFade 1s ease-out 0.3s both;
  }

  @keyframes statusFade {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  .status-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 500;
      transition: all 0.3s ease;
  }

  .status-indicator:hover {
      transform: scale(1.05);
  }

  .status-safe {
      background: rgba(16, 185, 129, 0.2);
      color: var(--success-color);
  }

  .status-warning {
      background: rgba(245, 158, 11, 0.2);
      color: var(--warning-color);
  }

  .status-critical {
      background: rgba(239, 68, 68, 0.2);
      color: var(--danger-color);
  }

  .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      animation: statusPulse 2s ease-in-out infinite;
  }

  @keyframes statusPulse {

      0%,
      100% {
          opacity: 1;
      }

      50% {
          opacity: 0.5;
      }
  }

  /* =============== ANALYTICS PAGE =============== */
  .alerts-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
  }

  /* Mobile Alert Section Fixes */
  @media (max-width: 768px) {
      .alerts-grid {
          grid-template-columns: 1fr;
          gap: 15px;
          padding: 0;
          width: 100%;
      }

      .alert-card {
          width: 100%;
          padding: 16px;
          margin-bottom: 12px;
          box-sizing: border-box;
          overflow: hidden;
      }

      .alert-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
      }

      .alert-header h3 {
          font-size: 1.1rem;
          margin: 0;
      }

      .detection-result {
          padding: 10px 12px;
          font-size: 0.9rem;
          margin-bottom: 12px;
      }

      .alert-actions {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          gap: 10px;
          width: 100%;
          margin-top: 12px;
          min-height: 48px;
          /* Ensure container has height */
      }

      .alert-btn {
          width: 100%;
          padding: 12px 16px;
          font-size: 0.95rem;
          justify-content: center;
          min-height: 48px;
          display: flex;
          align-items: center;
          gap: 8px;
          grid-column: 1;
          grid-row: 1;
          transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      }

      .alert-btn[id*="stop"] {
          transform: rotateY(180deg);
          opacity: 0;
      }

      .alert-btn i {
          margin-right: 6px;
      }

      /* Alert History Container Mobile */
      .history-container {
          padding: 15px;
      }

      .history-item {
          padding: 12px;
          flex-direction: column;
          gap: 8px;
      }

      .history-item>div {
          width: 100%;
      }

      .history-item strong {
          font-size: 0.95rem;
      }

      .history-item p {
          font-size: 0.85rem;
          margin-top: 4px;
      }

      .history-item span {
          font-size: 0.8rem;
          align-self: flex-start;
      }
  }

  @media (max-width: 480px) {
      .alert-card {
          padding: 14px;
      }

      .alert-header h3 {
          font-size: 1rem;
      }

      .alert-btn {
          padding: 10px 14px;
          font-size: 0.9rem;
      }

      .detection-result {
          font-size: 0.85rem;
      }
  }

  .analytics-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 30px;
  }

  .metric-card {
      background: var(--light-bg);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-light);
      text-align: center;
      transition: all 0.3s ease;
      animation: cardFloat 0.8s ease-out;
  }

  .dark-mode .metric-card {
      background: var(--dark-secondary);
      border-color: var(--border-dark);
  }

  @keyframes cardFloat {
      from {
          opacity: 0;
          transform: translateY(40px) rotateX(10deg);
      }

      to {
          opacity: 1;
          transform: translateY(0) rotateX(0);
      }
  }

  .analytics-table-container {
      overflow-x: auto;
      background: var(--light-bg);
      border-radius: 8px;
      border: 1px solid var(--border-light);
  }

  .dark-mode .analytics-table-container {
      background: var(--dark-secondary);
      border-color: var(--border-dark);
  }

  .analytics-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
  }

  .analytics-table thead tr {
      background: var(--light-secondary);
  }

  .dark-mode .analytics-table thead tr {
      background: var(--dark-tertiary);
  }

  .analytics-table th {
      text-align: left;
      padding: 10px;
      border-bottom: 1px solid var(--border-light);
      color: var(--text-dark);
      font-weight: 600;
  }

  .dark-mode .analytics-table th {
      border-bottom-color: var(--border-dark);
      color: var(--text-light);
  }

  .analytics-table tbody tr {
      border-bottom: 1px solid var(--border-light);
  }

  .analytics-table tbody tr:last-child {
      border-bottom: none;
  }

  .dark-mode .analytics-table tbody tr {
      border-bottom-color: var(--border-dark);
  }

  .analytics-table td {
      padding: 10px;
      color: var(--text-dark);
  }

  .dark-mode .analytics-table td {
      color: var(--text-light);
  }

  .analytics-table .zone-id-cell {
      font-weight: 600;
  }

  .analytics-table .timestamp-cell {
      font-size: 0.85rem;
      color: #6b7280;
  }

  .dark-mode .analytics-table .timestamp-cell {
      color: #9ca3af;
  }

  .metric-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .metric-value {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 8px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: countUp 2s ease-out;
  }

  @keyframes countUp {
      from {
          opacity: 0;
          transform: scale(0.5);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  .metric-label {
      color: #6b7280;
      font-size: 0.9rem;
  }

  /* =============== ANALYTICS LAYOUT =============== */
  .analytics-layout {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      align-items: start;
  }

  .analytics-left-column {
      grid-column: span 2;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .analytics-right-column .chart-container {
      /* keep this selector non-empty to avoid empty-ruleset lint errors */
      min-height: 0;
      /* height: 100%; This can cause layout issues, better to let content define height */
  }

  @media (max-width: 1024px) {
      .analytics-layout {
          grid-template-columns: 1fr;
      }
  }

  .analytics-right-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  /* =============== SETTINGS PAGE =============== */
  .settings-section {
      background: var(--light-bg);
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-light);
      animation: settingsSlide 0.6s ease-out;
  }

  .dark-mode .settings-section {
      background: var(--dark-secondary);
      border-color: var(--border-dark);
  }

  @keyframes settingsSlide {
      from {
          opacity: 0;
          transform: translateX(-30px);
      }

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

  .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid var(--border-light);
      animation: settingFade 0.5s ease-out;
  }

  .dark-mode .setting-item {
      border-bottom-color: var(--border-dark);
  }

  @keyframes settingFade {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

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

  .setting-item:last-child {
      border-bottom: none;
  }

  .toggle-switch {
      position: relative;
      width: 50px;
      height: 25px;
      background: #ccc;
      border-radius: 25px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .toggle-switch.active {
      background: var(--primary-color);
  }

  .toggle-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 21px;
      height: 21px;
      background: white;
      border-radius: 50%;
      transition: all 0.3s ease;
      animation: toggleBounce 0.3s ease-out;
  }

  .toggle-switch.active::after {
      left: 27px;
  }

  @keyframes toggleBounce {
      0% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.2);
      }

      100% {
          transform: scale(1);
      }
  }

  /* =============== RESPONSIVE DESIGN =============== */
  @media (max-width: 768px) {

      /* Navbar Mobile */
      .navbar {
          height: 60px;
          padding: 0 12px;
      }

      .navbar-left {
          gap: 10px;
      }

      .navbar-right {
          gap: 8px;
      }

      .logo {
          font-size: 1.1rem;
      }

      /* Main Layout */
      .main-container {
          grid-template-columns: 1fr;
          margin-top: 60px;
      }

      /* Sidebar Mobile Optimization */
      .sidebar {
          position: fixed;
          left: -100%;
          top: 60px;
          /* Match navbar height */
          height: calc(100vh - 60px);
          width: 280px;
          /* Fixed width for mobile */
          z-index: 1001;
          transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
          overflow-y: auto;
          /* Allow scrolling on smaller screens */
          -webkit-overflow-scrolling: touch;
      }

      .sidebar.open {
          left: 0;
      }

      .dark-mode .sidebar {
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          background: rgba(30, 41, 59, 0.85);
      }

      /* Mobile: light-mode sidebar background so theme toggle affects sidebar on mobile */
      .light-mode .sidebar {
          background: rgba(248, 250, 252, 0.98); /* var(--light-secondary) with slight opacity */
          border-right-color: var(--border-light);
      }


      /* Navbar Mobile Optimization - Remove duplicate */
      .theme-toggle {
          padding: 8px;
          font-size: 1.1rem;
          min-width: 40px;
          min-height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .logout-btn {
          padding: 8px 14px;
          font-size: 0.9rem;
          white-space: nowrap;
      }

      .logout-btn i {
          margin-right: 4px;
      }

      /* Dashboard Grid Mobile */
      .dashboard-grid {
          grid-template-columns: 1fr;
          gap: 15px;
      }

      /* Charts Section Mobile */
      .charts-section {
          grid-template-columns: 1fr;
          gap: 15px;
      }

      /* Alerts Grid Mobile */
      .alerts-grid {
          grid-template-columns: 1fr;
          gap: 15px;
      }

      .analytics-grid {
          grid-template-columns: 1fr;
          gap: 15px;
      }

      /* Alert Cards Mobile */
      .alert-card {
          padding: 15px;
          margin-bottom: 12px;
      }

      .alert-card h3 {
          font-size: 1.1rem;
      }

      .alert-actions {
          display: flex;
          flex-direction: column;
          position: relative;
          min-height: auto;
      }

      .alert-btn[id*="stop"] {
          transform: none;
          gap: 8px;
      }

      .alert-btn {
          width: 100%;
          justify-content: center;
      }

      /* Map Mobile */
      #map {
          height: 300px;
      }

      .map-controls {
          flex-direction: column;
          gap: 8px;
      }

      .map-controls button {
          width: 100%;
      }

      /* Status Indicators Mobile */
      .status-indicators {
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
      }

      .status-indicator {
          flex: 1 1 calc(50% - 8px);
          min-width: 140px;
          justify-content: center;
          font-size: 0.85rem;
          padding: 6px 12px;
      }

      /* Content Padding Mobile */
      .content {
          padding: 12px;
          /* margin-top: 60px; This is handled by main-container now */
      }

      /* Page Header Mobile */
      .page-header {
          margin-bottom: 20px;
      }

      .page-title {
          font-size: 1.5rem;
      }

      .page-subtitle {
          font-size: 0.9rem;
      }

      /* Camera Controls Mobile */
      .camera-controls {
          grid-template-columns: 1fr;
          gap: 8px;
      }

      .camera-btn {
          width: 100%;
          min-width: auto;
      }

      /* Heatmap Summary Mobile */
      .heatmap-summary-section {
          padding: 12px;
      }

      .summary-grid {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .heatmap-controls {
          flex-direction: column;
          gap: 8px;
      }

      .heatmap-controls button {
          width: 100%;
      }

      /* Settings Mobile */
      .settings-section {
          padding: 15px;
      }

      .setting-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
      }

      /* Analytics Layout Mobile */
      .analytics-layout {
          grid-template-columns: 1fr;
      }

      .analytics-left-column {
          grid-column: span 1;
      }

      /* Modal Mobile */
      .modal {
          width: 95%;
          max-width: none;
          padding: 20px;
          margin: 10px;
      }

      .modal-header {
          padding: 15px;
      }

      .modal-title {
          font-size: 1.2rem;
      }

      .modal-body {
          padding: 15px;
      }

      /* Form Groups Mobile */
      .form-group input,
      .form-group select,
      .form-group textarea {
          font-size: 1rem;
          /* Prevents zoom on iOS */
      }
  }

  @media (max-width: 480px) {
      .login-container {
          padding: 10px;
          justify-content: flex-start;
          padding-top: 5vh;
      }

      .mission-title {
          font-size: 1.3rem;
      }

      .mission-subtitle {
          font-size: 0.8rem;
      }

      .login-panel {
          padding: 25px 15px;
          margin: 0;
      }

      .input-wrapper input {
          font-size: 1rem;
          padding: 12px 12px 12px 40px;
      }

      /* Extra small mobile fixes */
      .navbar {
          height: 56px;
          padding: 0 10px;
      }

      .sidebar {
          top: 56px;
          height: calc(100vh - 56px);
      }

      .content {
          margin-top: 56px;
      }

      .main-container {
          margin-top: 56px;
      }

      .login-btn {
          padding: 12px;
          font-size: 15px;
      }

      /* Welcome Page Mobile */
      .welcome-container {
          padding: 15px;
      }

      .welcome-title {
          font-size: 1.8rem;
      }

      .subtitle {
          font-size: 0.9rem;
      }

      .feature-grid {
          grid-template-columns: 1fr;
          gap: 12px;
      }

      .feature-item {
          padding: 12px;
      }

      .feature-title {
          font-size: 0.95rem;
      }

      .feature-desc {
          font-size: 0.8rem;
      }

      /* Navbar Extra Small */
      .navbar {
          height: 56px;
          padding: 0 10px;
      }

      .logo {
          font-size: 1.1rem;
      }

      .logout-btn span {
          display: none;
      }

      .logout-btn {
          padding: 6px 10px;
      }

      /* Content Extra Small */
      .content {
          padding: 10px;
      }

      .page-title {
          font-size: 1.3rem;
      }

      /* Alert Cards Extra Small */
      .alert-card {
          padding: 12px;
      }

      .alert-card h3 {
          font-size: 1rem;
      }

      /* Status Indicators Extra Small */
      .status-indicators {
          flex-direction: column;
          gap: 8px;
      }

      .status-indicator {
          flex: 1 1 100%;
          font-size: 0.85rem;
          padding: 8px 12px;
      }

      /* Map Extra Small */
      #map {
          height: 250px;
      }

      /* Fix map overlay controls placement for very small screens
         Ensure controls are positioned absolutely inside .map-wrapper
         (which is already position:relative in markup) so they stay
         fixed over the map and are touch-friendly. */
      .map-wrapper .map-overlay-controls {
          position: absolute !important;
          top: 8px !important;
          right: 8px !important;
          left: auto !important;
          z-index: 9999 !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          align-items: flex-end !important;
          pointer-events: auto !important;
      }

      /* Make each control group align to the right and provide larger
         touch targets on mobile */
      .map-wrapper .map-overlay-controls>div {
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
          align-items: center !important;
      }

      .map-wrapper .map-overlay-controls button {
          width: 48px !important;
          height: 48px !important;
          min-width: 48px !important;
          min-height: 48px !important;
          font-size: 18px !important;
          border-radius: 10px !important;
          box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
      }

      /* Layer menu should open to the left of the layer button on small screens
         to avoid overflow off-screen */
      .map-wrapper .layer-controls {
          position: relative !important;
      }

      .map-wrapper .layer-controls .layer-menu {
          position: absolute !important;
          top: calc(100% + 8px) !important;
          right: 0 !important;
          left: auto !important;
          min-width: 140px !important;
          max-width: 220px !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          border-radius: 8px !important;
          box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
          padding: 8px !important;
          z-index: 10000 !important;
      }

      /* Ensure dark-mode layer menu also looks correct */
      body.dark-mode .map-wrapper .layer-controls .layer-menu {
          background: var(--dark-secondary) !important;
          border-color: var(--border-dark) !important;
          color: var(--text-light) !important;
      }

      /* Chart Container Extra Small */
      .chart-container {
          padding: 12px;
      }

      .chart-container h3 {
          font-size: 1rem;
      }

      /* Modal Extra Small */
      .modal {
          width: 98%;
          padding: 15px;
      }

      .modal-header {
          padding: 12px;
      }

      .modal-title {
          font-size: 1.1rem;
      }

      /* Settings Extra Small */
      .setting-item {
          padding: 12px 0;
      }

      .setting-item strong {
          font-size: 0.95rem;
      }

      .setting-item p {
          font-size: 0.85rem;
      }

      /* Ensure navbar and sidebar explicitly follow theme on very small screens
         Mobile browsers sometimes ignore higher-level body theme due to
         backdrop-filter or inline styles. Limit these rules to <=480px only. */
      .dark-mode .navbar, body.dark-mode .navbar {
          background: var(--dark-secondary) !important;
          color: var(--text-light) !important;
          border-bottom-color: var(--border-dark) !important;
      }

      .light-mode .navbar, body.light-mode .navbar {
          background: linear-gradient(90deg, var(--light-bg), var(--light-secondary), var(--light-bg)) !important;
          color: var(--text-dark) !important;
          border-bottom-color: var(--border-light) !important;
      }

      .dark-mode .sidebar, body.dark-mode .sidebar {
          background: rgba(30, 41, 59, 0.95) !important;
          color: var(--text-light) !important;
          border-right-color: var(--border-dark) !important;
      }

      .light-mode .sidebar, body.light-mode .sidebar {
          background: rgba(248, 250, 252, 0.98) !important;
          color: var(--text-dark) !important;
          border-right-color: var(--border-light) !important;
      }
  }

  /* Landscape Mobile Optimization */
  @media (max-width: 768px) and (orientation: landscape) {
      .navbar {
          height: 50px;
      }

      .sidebar {
          top: 50px;
          height: calc(100vh - 50px);
      }

      .content {
          margin-top: 50px;
      }

      #map {
          height: 200px;
      }

      .welcome-page,
      .login-page {
          padding: 10px;
      }

      .login-card {
          max-width: 500px;
      }
  }

  /* Device-specific styles */
  /* iPhone SE, iPhone XR, iPhone 12 Pro */
  @media only screen and (min-device-width: 320px) and (max-device-width: 428px) and (-webkit-min-device-pixel-ratio: 2) {
      .welcome-title {
          font-size: 1.4rem;
      }

      .login-panel {
          width: 90%;
          padding: 20px;
      }

      .navbar {
          padding: 0 10px;
          height: 56px;
      }

      .sidebar {
          top: 56px;
          height: calc(100vh - 56px);
      }

      .content {
          margin-top: 56px;
      }

      .nav-item {
          padding: 12px 15px;
      }

      #map {
          height: 250px;
      }

      .alert-card {
          padding: 14px;
      }

      .dashboard-grid {
          gap: 12px;
      }
  }

  /* iPad Mini, iPad Air, iPad Pro */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
      .welcome-panel {
          width: 90%;
          max-width: 700px;
      }

      .login-panel {
          width: 80%;
          max-width: 600px;
      }

      .feature-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .map-container {
          height: 500px;
      }

      #map {
          height: 400px;
      }

      .alerts-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;
      }

      .dashboard-grid {
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .navbar {
          height: 70px;
      }

      .sidebar {
          top: 70px;
          height: calc(100vh - 70px);
      }

      .content {
          margin-top: 70px;
      }
  }

  /* Surface Pro 7, Surface Duo */
  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
      .analytics-layout {
          grid-template-columns: 1fr 1fr;
      }

      .dashboard-grid {
          grid-template-columns: 3fr 2fr;
      }
  }

  /* Galaxy Fold and other foldable devices */
  @media only screen and (max-width: 320px) {
      .welcome-title {
          font-size: 1.2rem;
      }

      .navbar {
          height: 56px;
      }

      .logo {
          font-size: 1rem;
      }

      .nav-item {
          padding: 10px;
          font-size: 0.9rem;
      }
  }

  /* Touch-friendly Improvements */
  @media (hover: none) and (pointer: coarse) {

      /* Increase touch targets */
      .nav-item,
      .alert-btn,
      .camera-btn,
      .modal-btn,
      button {
          min-height: 44px;
          min-width: 44px;
      }

      /* Remove hover effects on touch devices */
      .nav-item:hover,
      .alert-btn:hover,
      .camera-btn:hover {
          transform: none;
      }

      /* Add active states for touch feedback */
      .nav-item:active,
      .alert-btn:active,
      .camera-btn:active,
      button:active {
          opacity: 0.7;
          transform: scale(0.98);
      }
  }

  /* Welcome Page Mobile Enhancements */
  @media (max-width: 768px) {
      .welcome-page {
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
      }

      .welcome-container {
          padding: 20px 15px;
      }

      .welcome-panel {
          padding: 20px 15px;
      }

      .welcome-title {
          font-size: 1.8rem;
          text-align: center;
      }

      .subtitle {
          font-size: 0.95rem;
          text-align: center;
      }

      .feature-section {
          padding: 20px 15px;
          margin-bottom: 20px;
      }

      .feature-section h2 {
          font-size: 1.3rem;
          text-align: center;
      }

      .feature-grid {
          grid-template-columns: 1fr;
          gap: 15px;
      }

      .feature-item {
          padding: 15px;
      }

      .steps-grid {
          grid-template-columns: 1fr;
          gap: 15px;
      }

      .steps-column {
          gap: 15px;
      }

      .step-item {
          padding: 15px;
      }

      .step-content-wrapper {
          flex-direction: column;
          gap: 12px;
      }

      .step-icon-container {
          align-self: center;
      }

      .start-btn {
          width: 100%;
          padding: 14px 20px;
          font-size: 1rem;
      }

      .intro-content {
          text-align: center;
      }

      .key-points {
          text-align: left;
      }
  }

  @media (max-width: 480px) {
      .welcome-title {
          font-size: 1.5rem;
      }

      .subtitle {
          font-size: 0.85rem;
      }

      .feature-section h2 {
          font-size: 1.1rem;
      }

      .feature-item {
          padding: 12px;
      }

      .feature-title {
          font-size: 0.95rem;
      }

      .feature-desc {
          font-size: 0.8rem;
      }

      .step-number {
          width: 35px;
          height: 35px;
          font-size: 1.1rem;
      }

      .step-text h3 {
          font-size: 1rem;
      }

      .step-text p {
          font-size: 0.85rem;
      }

      .input-wrapper input {
          font-size: 1rem;
          padding: 12px 12px 12px 40px;
      }

  }

  /* Sidebar Overlay for Mobile */
  .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 998;
      opacity: 0;
      /* Initially transparent */
      transition: opacity 0.3s ease-in-out;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
  }

  .sidebar.open+.sidebar-overlay {
      display: block;
      opacity: 1;
  }

  @media (max-width: 1024px) {

      /* Ensure sidebar is above overlay on mobile/tablet */
      .sidebar {
          z-index: 1001;
      }
  }

  /* Mobile Menu Animations */
  .menu-open {
      animation: slideInRight 0.3s ease-out;
  }

  .menu-close {
      animation: slideOutRight 0.3s ease-out;
  }

  @keyframes slideInRight {
      from {
          transform: translateX(-100%);
      }

      to {
          transform: translateX(0);
      }
  }

  @keyframes slideOutRight {
      from {
          transform: translateX(0);
      }

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

  /* Enhanced Touch Interactions */
  @media (hover: none) {

      .nav-item,
      .button,
      .login-btn,
      .camera-btn,
      .alert-btn {
          transition: transform 0.2s ease;
      }

      .nav-item:active,
      .button:active,
      .login-btn:active,
      .camera-btn:active,
      .alert-btn:active {
          transform: scale(0.95);
      }
  }

  /* =============== LOADING STATES =============== */
  .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }

  @keyframes spin {
      0% {
          transform: rotate(0deg);
      }

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

  .pulse-animation {
      animation: pulseGlow 2s ease-in-out infinite;
  }

  @keyframes pulseGlow {

      0%,
      100% {
          box-shadow: 0 0 5px rgba(37, 99, 235, 0.5);
      }

      50% {
          box-shadow: 0 0 20px rgba(37, 99, 235, 0.8);
      }
  }

  /* =============== UTILITY CLASSES =============== */
  .hidden {
      display: none !important;
  }

  .fade-in {
      animation: fadeIn 0.5s ease-out;
  }

  .slide-up {
      animation: slideInUp 0.6s ease-out;
  }

  .bounce-in {
      animation: bounceIn 0.8s ease-out;
  }

  /* =============== CAMERA CONTROLS =============== */
  .camera-controls {
      margin-top: 15px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
  }

  .camera-controls-row {
      display: contents;
  }

  .camera-btn:nth-child(5) {
      grid-column: span 2;
      justify-self: center;
  }

  .camera-btn {
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      color: white;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      min-width: 120px;
      justify-content: center;
      position: relative;
      overflow: hidden;
  }

  .camera-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
  }

  .camera-btn:hover::before {
      left: 100%;
  }

  .camera-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  }

  .camera-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .camera-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
  }

  .camera-btn:disabled:hover {
      transform: none;
      box-shadow: none;
  }

  .camera-btn i {
      font-size: 16px;
      transition: transform 0.3s ease;
  }

  .camera-btn:hover i {
      transform: scale(1.1);
  }

  .camera-btn.primary {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  }

  .camera-btn.primary:hover {
      background: linear-gradient(135deg, #1e40af, #1d4ed8);
  }

  .camera-btn.secondary {
      background: linear-gradient(135deg, #6b7280, #4b5563);
  }

  .camera-btn.secondary:hover {
      background: linear-gradient(135deg, #4b5563, #374151);
  }

  .camera-btn.warning {
      background: linear-gradient(135deg, var(--warning-color), #d97706);
  }

  .camera-btn.warning:hover {
      background: linear-gradient(135deg, #b45309, #92400e);
  }

  .camera-btn.danger {
      background: linear-gradient(135deg, var(--danger-color), #dc2626);
  }

  .camera-btn.danger:hover {
      background: linear-gradient(135deg, #b91c1c, #991b1b);
  }

  /* Dark mode styles for camera controls */
  .dark-mode .camera-btn {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .dark-mode .camera-btn:hover {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }

  /* Responsive design for camera controls */
  @media (max-width: 768px) {
      .camera-controls {
          grid-template-columns: 1fr;
      }

      .camera-btn {
          min-width: auto;
          width: 100%;
      }

      .camera-btn:nth-child(5) {
          grid-column: span 1;
          justify-self: stretch;
      }
  }

  /* =============== ROUTE POPUP STYLES =============== */
  @keyframes popupSlide {
      from {
          opacity: 0;
          transform: translate(-50%, -60%);
      }

      to {
          opacity: 1;
          transform: translate(-50%, -50%);
      }
  }

  .dark-mode #routePopup {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
  }

  .dark-mode #routePopup select,
  .dark-mode #routePopup input {
      background: var(--dark-tertiary) !important;
      color: var(--text-light) !important;
      border-color: var(--border-dark) !important;
  }

  .location-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--light-bg);
      border: 1px solid var(--border-light);
      border-top: none;
      border-radius: 0 0 6px 6px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .suggestion-item {
      padding: 10px 12px;
      cursor: pointer;
      border-bottom: 1px solid var(--border-light);
      transition: background 0.2s ease;
  }

  .suggestion-item:hover {
      background: rgba(37, 99, 235, 0.1);
  }

  .suggestion-item:last-child {
      border-bottom: none;
  }

  .suggestion-item i {
      color: var(--primary-color);
      margin-right: 8px;
  }

  .dark-mode .location-suggestions {
      background: var(--dark-tertiary);
      border-color: var(--border-dark);
  }

  .dark-mode .suggestion-item {
      border-bottom-color: var(--border-dark);
      color: var(--text-light);
  }

  .dark-mode .suggestion-item:hover {
      background: rgba(37, 99, 235, 0.2);
  }

  /* =============== HEATMAP SUMMARY SECTION =============== */
  .heatmap-summary {
      background-color: var(--light-secondary);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: var(--text-primary);
      animation: slideInUp 0.8s ease-out;
  }

  .heatmap-summary h2 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      font-weight: 600;
      color: var(--primary-color);
  }

  .heatmap-summary .summary-data {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
  }

  .heatmap-summary .summary-item {
      flex: 1 1 150px;
      background-color: var(--light-tertiary);
      border-radius: 8px;
      padding: 15px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
      text-align: center;
      font-weight: 500;
      font-size: 1.1rem;
      color: var(--text-secondary);
      transition: all 0.3s ease;
  }

  .heatmap-summary .summary-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .heatmap-summary .summary-item strong {
      display: block;
      font-size: 1.3rem;
      margin-bottom: 5px;
      color: var(--text-primary);
  }

  .heatmap-summary .summary-controls {
      margin-top: 20px;
      display: flex;
      gap: 15px;
      justify-content: flex-end;
      flex-wrap: wrap;
  }

  .heatmap-summary .summary-controls button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 18px;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .heatmap-summary .summary-controls button:hover {
      background-color: var(--secondary-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .heatmap-summary .summary-controls button:disabled {
      background-color: var(--gray-light);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
  }

  .heatmap-summary .summary-controls button i {
      font-size: 1rem;
  }

  /* Dark mode styles for heatmap summary */
  .dark-mode .heatmap-summary {
      background-color: var(--dark-secondary);
      color: var(--text-light);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  .dark-mode .heatmap-summary .summary-item {
      background-color: var(--dark-tertiary);
      color: var(--text-light);
      box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
  }

  .dark-mode .heatmap-summary .summary-item strong {
      color: var(--text-light);
  }

  .dark-mode .heatmap-summary .summary-controls button {
      background-color: var(--primary-color);
  }

  .dark-mode .heatmap-summary .summary-controls button:hover {
      background-color: var(--secondary-color);
  }

  /* Responsive design for heatmap summary */
  @media (max-width: 768px) {
      .heatmap-summary .summary-data {
          flex-direction: column;
      }

      .heatmap-summary .summary-item {
          flex: 1 1 auto;
      }

      .heatmap-summary .summary-controls {
          justify-content: center;
      }

      .heatmap-summary .summary-controls button {
          flex: 1;
          justify-content: center;
      }
  }

  /* =============== SAFE ROUTES MODAL =============== */
  .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: modalFadeIn 0.3s ease-out;
  }

  @keyframes modalFadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .modal {
      background: var(--light-bg);
      border-radius: 16px;
      padding: 30px;
      max-width: 500px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: modalSlideIn 0.4s ease-out;
      position: relative;
  }

  .dark-mode .modal {
      background: var(--dark-secondary);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  }

  @keyframes modalSlideIn {
      from {
          opacity: 0;
          transform: translateY(-50px) scale(0.9);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

  .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-light);
  }

  .dark-mode .modal-header {
      border-bottom-color: var(--border-dark);
  }

  .modal-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-dark);
      margin: 0;
  }

  .dark-mode .modal-title {
      color: var(--text-light);
  }

  .modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--text-dark);
      padding: 5px;
      border-radius: 50%;
      transition: all 0.3s ease;
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .dark-mode .modal-close {
      color: var(--text-light);
  }

  .modal-close:hover {
      background: var(--light-secondary);
      transform: scale(1.1);
  }

  .dark-mode .modal-close:hover {
      background: var(--dark-tertiary);
  }

  .modal-body {
      margin-bottom: 25px;
  }

  .form-group {
      margin-bottom: 20px;
  }

  .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--text-dark);
      font-size: 0.95rem;
  }

  .dark-mode .form-group label {
      color: var(--text-light);
  }

  .form-group input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--border-light);
      border-radius: 8px;
      font-size: 1rem;
      transition: all 0.3s ease;
      background: var(--light-bg);
      color: var(--text-dark);
  }

  .dark-mode .form-group input {
      background: var(--dark-bg);
      border-color: var(--border-dark);
      color: var(--text-light);
  }

  .form-group input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }

  .dark-mode .form-group input:focus {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  }

  .form-group input::placeholder {
      color: #9ca3af;
  }

  .modal-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 25px;
  }

  .modal-btn {
      padding: 12px 20px;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      min-height: 44px;
  }

  .modal-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .modal-btn:active {
      transform: translateY(0);
  }

  .modal-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
  }

  .modal-btn.primary {
      background: var(--primary-color);
      color: white;
  }

  .modal-btn.primary:hover:not(:disabled) {
      background: var(--secondary-color);
  }

  .modal-btn.secondary {
      background: var(--light-secondary);
      color: var(--text-dark);
      border: 1px solid var(--border-light);
  }

  .dark-mode .modal-btn.secondary {
      background: var(--dark-tertiary);
      color: var(--text-light);
      border-color: var(--border-dark);
  }

  .modal-btn.secondary:hover:not(:disabled) {
      background: var(--light-tertiary);
  }

  .dark-mode .modal-btn.secondary:hover:not(:disabled) {
      background: var(--dark-bg);
  }

  .modal-btn.success {
      background: var(--success-color);
      color: white;
  }

  .modal-btn.success:hover:not(:disabled) {
      background: #059669;
  }

  .modal-btn.danger {
      background: var(--danger-color);
      color: white;
  }

  .modal-btn.danger:hover:not(:disabled) {
      background: #dc2626;
  }

  /* Responsive design for modal */
  @media (max-width: 768px) {
      .modal {
          margin: 20px;
          padding: 20px;
          max-width: none;
          width: calc(100% - 40px);
      }

      .modal-header {
          margin-bottom: 20px;
          padding-bottom: 10px;
      }

      .modal-title {
          font-size: 1.3rem;
      }

      .modal-actions {
          grid-template-columns: 1fr;
      }

      .modal-btn {
          min-height: 48px;
          font-size: 1rem;
      }
  }

  @media (max-width: 480px) {
      .modal {
          margin: 10px;
          padding: 15px;
          width: calc(100% - 20px);
      }

      .modal-title {
          font-size: 1.2rem;
      }
  }

  /* =============== DYNAMIC ROUTE EFFECTS =============== */
  .location-label {
      pointer-events: none;
  }

  .location-label div {
      transform: translate(-50%, -100%);
      margin-top: -5px;
  }

  .city-label {
      pointer-events: none;
      font-size: 14px !important;
      font-weight: bold !important;
  }

  .area-label {
      pointer-events: none;
      font-size: 11px !important;
  }

  .road-label {
      pointer-events: none;
      font-size: 10px !important;
      font-style: italic;
  }

  /* Route Animation Effects */
  .animated-route-drawing {
      animation: routePulse 1s ease-in-out infinite;
  }

  .animated-route-final {
      animation: routeGlow 2s ease-in-out;
  }

  @keyframes routePulse {

      0%,
      100% {
          opacity: 0.8;
      }

      50% {
          opacity: 1;
      }
  }

  @keyframes routeGlow {
      0% {
          filter: drop-shadow(0 0 5px #10b981);
      }

      50% {
          filter: drop-shadow(0 0 15px #10b981);
      }

      100% {
          filter: drop-shadow(0 0 5px #10b981);
      }
  }

  @keyframes popupSlide {
      from {
          opacity: 0;
          transform: translateY(-10px) scale(0.9);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

  /* Route Selection Modal Effects */
  .modal {
      animation: modalBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  @keyframes modalBounce {
      0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.7);
      }

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

  .input-actions input:focus {
      animation: inputGlow 0.3s ease-out;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  }

  @keyframes inputGlow {
      0% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
      }

      100% {
          box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
      }
  }

  .btn:hover {
      transform: translateY(-2px);
      transition: all 0.2s ease;
  }

  .btn:active {
      transform: translateY(0);
      transition: all 0.1s ease;
  }

  /* Enhanced Route Popup Styling */
  #routePopup {
      animation: modalBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  #routePopup input {
      padding: 12px;
      border: 2px solid var(--border-light);
      border-radius: 8px;
      transition: all 0.3s ease;
  }

  #routePopup input:focus {
      border-color: var(--primary-color);
      animation: inputGlow 0.3s ease-out;
  }

  #routePopup button {
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  #routePopup button:hover {
      transform: translateY(-2px);
  }

  #routePopup .location-arrow:hover {
      transform: scale(1.1);
  }

  /* Location Badge Styles */
  .location-badge {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      font-weight: 600;
      text-transform: uppercase;
  }

  .badge-highway {
      background: #3b82f6;
      color: white;
  }

  .badge-transport {
      background: #10b981;
      color: white;
  }

  .badge-education {
      background: #8b5cf6;
      color: white;
  }

  .badge-religious {
      background: #f59e0b;
      color: white;
  }

  .badge-tourist {
      background: #06b6d4;
      color: white;
  }

  .badge-industrial {
      background: #6b7280;
      color: white;
  }

  .badge-military {
      background: #ef4444;
      color: white;
  }

  .badge-popular {
      background: #ec4899;
      color: white;
  }

  .badge-area {
      background: #84cc16;
      color: white;
  }

  .badge-default {
      background: #64748b;
      color: white;
  }

  /* =============== DASHBOARD BACKGROUND EFFECTS =============== */
  .content {
      position: relative;
      overflow: hidden;
  }

  .content::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(-45deg, rgba(37, 99, 235, 0.03), rgba(16, 185, 129, 0.03), rgba(245, 158, 11, 0.03), rgba(37, 99, 235, 0.03));
      background-size: 400% 400%;
      animation: gradientShift 20s ease infinite;
      z-index: -2;
      pointer-events: none;
  }

  .content::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
      background-size: 80px 80px;
      animation: floatingDots 30s linear infinite;
      z-index: -1;
      pointer-events: none;
  }

  .dark-mode .content::before {
      background: linear-gradient(-45deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08), rgba(245, 158, 11, 0.08), rgba(37, 99, 235, 0.08));
  }

  .dark-mode .content::after {
      background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  }

  @keyframes floatingDots {
      0% {
          transform: translateY(0px) rotate(0deg);
      }

      100% {
          transform: translateY(-80px) rotate(360deg);
      }
  }

  /* Modal Background Effects */
  .modal-overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.1), rgba(0, 0, 0, 0.1));
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
      z-index: -1;
  }

  /* Card Shimmer Effects */
  .map-container::before,
  .alerts-panel::before,
  .chart-container::before,
  .metric-card::before,
  .settings-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
      animation: shimmer 8s linear infinite;
      z-index: 0;
      pointer-events: none;
  }

  .dark-mode .map-container::before,
  .dark-mode .alerts-panel::before,
  .dark-mode .chart-container::before,
  .dark-mode .metric-card::before,
  .dark-mode .settings-section::before {
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.02), transparent);
  }

  /* Ensure content stays above shimmer */
  .map-container>*,
  .alerts-panel>*,
  .chart-container>*,
  .metric-card>*,
  .settings-section>* {
      position: relative;
      z-index: 1;
  }

  /* Responsive design for heatmap summary */
  @media (max-width: 768px) {
      .heatmap-summary .summary-data {
          flex-direction: column;
      }

      .heatmap-summary .summary-item {
          flex: 1 1 auto;
      }

      .heatmap-summary .summary-controls {
          justify-content: center;
      }

      .heatmap-summary .summary-controls button {
          flex: 1;
          justify-content: center;
      }
  }

  /* =============== SAFE ROUTES MODAL =============== */
  .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: modalFadeIn 0.3s ease-out;
  }

  @keyframes modalFadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .modal {
      background: var(--light-bg);
      border-radius: 16px;
      padding: 30px;
      max-width: 500px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: modalSlideIn 0.4s ease-out;
      position: relative;
  }

  .dark-mode .modal {
      background: var(--dark-secondary);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  }

  @keyframes modalSlideIn {
      from {
          opacity: 0;
          transform: translateY(-50px) scale(0.9);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

  .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-light);
  }

  .dark-mode .modal-header {
      border-bottom-color: var(--border-dark);
  }

  .modal-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-dark);
      margin: 0;
  }

  .dark-mode .modal-title {
      color: var(--text-light);
  }

  .modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--text-dark);
      padding: 5px;
      border-radius: 50%;
      transition: all 0.3s ease;
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .dark-mode .modal-close {
      color: var(--text-light);
  }

  .modal-close:hover {
      background: var(--light-secondary);
      transform: scale(1.1);
  }

  .dark-mode .modal-close:hover {
      background: var(--dark-tertiary);
  }

  .modal-body {
      margin-bottom: 25px;
  }

  .form-group {
      margin-bottom: 20px;
  }

  .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--text-dark);
      font-size: 0.95rem;
  }

  .dark-mode .form-group label {
      color: var(--text-light);
  }

  .form-group input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--border-light);
      border-radius: 8px;
      font-size: 1rem;
      transition: all 0.3s ease;
      background: var(--light-bg);
      color: var(--text-dark);
  }

  .dark-mode .form-group input {
      background: var(--dark-bg);
      border-color: var(--border-dark);
      color: var(--text-light);
  }

  .form-group input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }

  .dark-mode .form-group input:focus {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  }

  .form-group input::placeholder {
      color: #9ca3af;
  }

  .modal-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 25px;
  }

  .modal-btn {
      padding: 12px 20px;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      min-height: 44px;
  }

  .modal-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .modal-btn:active {
      transform: translateY(0);
  }

  .modal-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
  }

  .modal-btn.primary {
      background: var(--primary-color);
      color: white;
  }

  .modal-btn.primary:hover:not(:disabled) {
      background: var(--secondary-color);
  }

  .modal-btn.secondary {
      background: var(--light-secondary);
      color: var(--text-dark);
      border: 1px solid var(--border-light);
  }

  .dark-mode .modal-btn.secondary {
      background: var(--dark-tertiary);
      color: var(--text-light);
      border-color: var(--border-dark);
  }

  .modal-btn.secondary:hover:not(:disabled) {
      background: var(--light-tertiary);
  }

  .dark-mode .modal-btn.secondary:hover:not(:disabled) {
      background: var(--dark-bg);
  }

  .modal-btn.success {
      background: var(--success-color);
      color: white;
  }

  .modal-btn.success:hover:not(:disabled) {
      background: #059669;
  }

  .modal-btn.danger {
      background: var(--danger-color);
      color: white;
  }

  .modal-btn.danger:hover:not(:disabled) {
      background: #dc2626;
  }

  /* Responsive design for modal */
  @media (max-width: 768px) {
      .modal {
          margin: 20px;
          padding: 20px;
          max-width: none;
          width: calc(100% - 40px);
      }

      .modal-header {
          margin-bottom: 20px;
          padding-bottom: 10px;
      }

      .modal-title {
          font-size: 1.3rem;
      }

      .modal-actions {
          grid-template-columns: 1fr;
      }

      .modal-btn {
          min-height: 48px;
          font-size: 1rem;
      }
  }

  @media (max-width: 480px) {
      .modal {
          margin: 10px;
          padding: 15px;
          width: calc(100% - 20px);
      }

      .modal-title {
          font-size: 1.2rem;
      }
  }

  /* =============== DYNAMIC ROUTE EFFECTS =============== */
  .location-label {
      pointer-events: none;
  }

  .location-label div {
      transform: translate(-50%, -100%);
      margin-top: -5px;
  }

  .city-label {
      pointer-events: none;
      font-size: 14px !important;
      font-weight: bold !important;
  }

  .area-label {
      pointer-events: none;
      font-size: 11px !important;
  }

  .road-label {
      pointer-events: none;
      font-size: 10px !important;
      font-style: italic;
  }

  /* Route Animation Effects */
  .animated-route-drawing {
      animation: routePulse 1s ease-in-out infinite;
  }

  .animated-route-final {
      animation: routeGlow 2s ease-in-out;
  }

  @keyframes routePulse {

      0%,
      100% {
          opacity: 0.8;
      }

      50% {
          opacity: 1;
      }
  }

  @keyframes routeGlow {
      0% {
          filter: drop-shadow(0 0 5px #10b981);
      }

      50% {
          filter: drop-shadow(0 0 15px #10b981);
      }

      100% {
          filter: drop-shadow(0 0 5px #10b981);
      }
  }

  @keyframes popupSlide {
      from {
          opacity: 0;
          transform: translateY(-10px) scale(0.9);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

  /* Route Selection Modal Effects */
  .modal {
      animation: modalBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  @keyframes modalBounce {
      0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.7);
      }

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

  .input-actions input:focus {
      animation: inputGlow 0.3s ease-out;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  }

  @keyframes inputGlow {
      0% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
      }

      100% {
          box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
      }
  }

  .btn:hover {
      transform: translateY(-2px);
      transition: all 0.2s ease;
  }

  .btn:active {
      transform: translateY(0);
      transition: all 0.1s ease;
  }

  /* Enhanced Route Popup Styling */
  #routePopup {
      animation: modalBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  #routePopup input {
      padding: 12px;
      border: 2px solid var(--border-light);
      border-radius: 8px;
      transition: all 0.3s ease;
  }

  #routePopup input:focus {
      border-color: var(--primary-color);
      animation: inputGlow 0.3s ease-out;
  }

  #routePopup button {
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  #routePopup button:hover {
      transform: translateY(-2px);
  }

  #routePopup .location-arrow:hover {
      transform: scale(1.1);
  }

  /* Location Badge Styles */
  .location-badge {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      font-weight: 600;
      text-transform: uppercase;
  }

  .badge-highway {
      background: #3b82f6;
      color: white;
  }

  .badge-transport {
      background: #10b981;
      color: white;
  }

  .badge-education {
      background: #8b5cf6;
      color: white;
  }

  .badge-religious {
      background: #f59e0b;
      color: white;
  }

  .badge-tourist {
      background: #06b6d4;
      color: white;
  }

  .badge-industrial {
      background: #6b7280;
      color: white;
  }

  .badge-military {
      background: #ef4444;
      color: white;
  }

  .badge-popular {
      background: #ec4899;
      color: white;
  }

  .badge-area {
      background: #84cc16;
      color: white;
  }

  .badge-default {
      background: #64748b;
      color: white;
  }

  /* =============== DASHBOARD BACKGROUND EFFECTS =============== */
  .content {
      position: relative;
      overflow: hidden;
  }

  .content::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(-45deg, rgba(37, 99, 235, 0.03), rgba(16, 185, 129, 0.03), rgba(245, 158, 11, 0.03), rgba(37, 99, 235, 0.03));
      background-size: 400% 400%;
      animation: gradientShift 20s ease infinite;
      z-index: -2;
      pointer-events: none;
  }

  .content::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
      background-size: 80px 80px;
      animation: floatingDots 30s linear infinite;
      z-index: -1;
      pointer-events: none;
  }

  .dark-mode .content::before {
      background: linear-gradient(-45deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08), rgba(245, 158, 11, 0.08), rgba(37, 99, 235, 0.08));
  }

  .dark-mode .content::after {
      background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  }

  @keyframes floatingDots {
      0% {
          transform: translateY(0px) rotate(0deg);
      }

      100% {
          transform: translateY(-80px) rotate(360deg);
      }
  }

  /* Modal Background Effects */
  .modal-overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.1), rgba(0, 0, 0, 0.1));
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
      z-index: -1;
  }

  /* Card Shimmer Effects */
  .map-container::before,
  .alerts-panel::before,
  .chart-container::before,
  .metric-card::before,
  .settings-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
      animation: shimmer 8s linear infinite;
      z-index: 0;
      pointer-events: none;
  }

  .dark-mode .map-container::before,
  .dark-mode .alerts-panel::before,
  .dark-mode .chart-container::before,
  .dark-mode .metric-card::before,
  .dark-mode .settings-section::before {
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.02), transparent);
  }

  /* Ensure content stays above shimmer */
  .map-container>*,
  .alerts-panel>*,
  .chart-container>*,
  .metric-card>*,
  .settings-section>* {
      position: relative;
      z-index: 1;
  }

  /* =============== DARK MODE FOR CAMERA FEED & HEATMAP =============== */

  /* Camera Feed Dark Mode */
  #cameraFeed {
      border-radius: 8px;
      transition: all 0.3s ease;
  }

  /* Login Page Animation */
  .login-page.show-animation {
      animation: fadeInScale 1s ease-out forwards, glitchEffect 0.5s infinite alternate;
  }

  @keyframes fadeInScale {
      from {
          opacity: 0;
          transform: scale(0.9);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  @keyframes glitchEffect {
      0% {
          transform: translate(0);
      }

      20% {
          transform: translate(-2px, 2px);
      }

      40% {
          transform: translate(-2px, -2px);
      }

      60% {
          transform: translate(2px, 2px);
      }

      80% {
          transform: translate(2px, -2px);
      }

      100% {
          transform: translate(0);
      }
  }

  .dark-mode #cameraFeed {
      border: 2px solid var(--border-dark);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  #peopleCountDisplay {
      padding: 10px;
      border-radius: 6px;
      font-weight: 600;
      text-align: center;
      margin-top: 10px;
      transition: all 0.3s ease;
  }

  .dark-mode #peopleCountDisplay {
      background: var(--dark-tertiary);
      color: var(--text-light);
      border: 1px solid var(--border-dark);
  }

  /* Heatmap Summary Dark Mode */
  .dark-mode .heatmap-summary {
      background: var(--dark-secondary);
      color: var(--text-light);
      border: 1px solid var(--border-dark);
  }

  .dark-mode .heatmap-summary h2 {
      color: var(--primary-color);
  }

  .dark-mode .heatmap-summary .summary-item {
      background: var(--dark-tertiary);
      color: var(--text-light);
      border: 1px solid var(--border-dark);
  }

  .dark-mode .heatmap-summary .summary-item strong {
      color: var(--text-light);
  }

  /* Map Controls Dark Mode */
  .map-controls {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
      flex-wrap: wrap;
  }

  .dark-mode .map-controls button {
      background: var(--dark-tertiary);
      color: var(--text-light);
      border: 1px solid var(--border-dark);
  }

  .dark-mode .map-controls button:hover {
      background: var(--dark-bg);
      border-color: var(--primary-color);
  }

  /* Alert Cards Dark Mode */
  .alert-card {
      background: var(--light-bg);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      transition: all 0.3s ease;
  }

  .dark-mode .alert-card {
      background: var(--dark-secondary);
      border-color: var(--border-dark);
      color: var(--text-light);
  }

  .alert-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
  }

  .dark-mode .alert-header h3 {
      color: var(--text-light);
  }

  /* Status Indicators Dark Mode */
  .dark-mode .status-indicator {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-dark);
  }

  /* Chart Containers Dark Mode */
  .dark-mode canvas {
      filter: brightness(0.9);
  }

  /* Video Element Dark Mode */
  .dark-mode video {
      border: 2px solid var(--border-dark);
      border-radius: 8px;
  }

  /* Map Legend Dark Mode */
  .dark-mode .leaflet-control {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .leaflet-control-zoom a {
      background: var(--dark-tertiary) !important;
      color: var(--text-light) !important;
      border-color: var(--border-dark) !important;
  }

  .dark-mode .leaflet-control-zoom a:hover {
      background: var(--dark-bg) !important;
  }

  /* Popup Dark Mode */
  .dark-mode .leaflet-popup-content-wrapper {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .leaflet-popup-tip {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
  }

  /* =============== ENHANCED DARK MODE FOR CAMERA & HEATMAP =============== */

  /* Camera Feed Container Dark Mode */
  .dark-mode .alerts-panel,
  .dark-mode .map-container {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .alerts-panel h3,
  .dark-mode .map-container h3 {
      color: var(--text-light) !important;
  }

  /* Camera Feed Video Element */
  .dark-mode #cameraFeed {
      border: 2px solid var(--border-dark) !important;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  }

  /* People Count Display */
  .dark-mode #peopleCountDisplay {
      background: var(--dark-tertiary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  /* Camera Controls Dark Mode */
  .dark-mode .camera-controls .camera-btn {
      background: var(--dark-tertiary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .camera-controls .camera-btn:hover {
      background: var(--dark-bg) !important;
      border-color: var(--primary-color) !important;
  }

  /* Heatmap Summary Enhanced Dark Mode */
  .dark-mode .heatmap-summary {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  }

  .dark-mode .heatmap-summary h2,
  .dark-mode .heatmap-summary h3 {
      color: var(--text-light) !important;
  }

  .dark-mode .heatmap-summary .summary-data .summary-item {
      background: var(--dark-tertiary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .heatmap-summary .summary-item strong {
      color: var(--text-light) !important;
  }

  .dark-mode .heatmap-summary .summary-controls button {
      background: var(--primary-color) !important;
      color: white !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .heatmap-summary .summary-controls button:hover {
      background: var(--secondary-color) !important;
  }

  /* Status Indicators Enhanced */
  .dark-mode .status-indicators .status-indicator {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  /* Map Controls Enhanced */
  .dark-mode .map-controls button {
      background: var(--dark-tertiary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .map-controls button:hover {
      background: var(--dark-bg) !important;
      border-color: var(--primary-color) !important;
  }

  /* Alert Cards Enhanced */
  .dark-mode .alert-card {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .alert-card .alert-header h3 {
      color: var(--text-light) !important;
  }

  .dark-mode .alert-card p {
      color: var(--text-light) !important;
  }

  /* Chart Containers Enhanced */
  .dark-mode .chart-container {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .chart-container h3 {
      color: var(--text-light) !important;
  }

  /* Ensure all text elements are visible in dark mode */
  .dark-mode .page-subtitle,
  .dark-mode .metric-label,
  .dark-mode small {
      color: #9ca3af !important;
  }

  /* Force dark mode on specific elements */
  .dark-mode * {
      scrollbar-color: var(--border-dark) var(--dark-tertiary);
  }

  .dark-mode ::-webkit-scrollbar {
      background: var(--dark-tertiary);
  }

  .dark-mode ::-webkit-scrollbar-thumb {
      background: var(--border-dark);
      border-radius: 4px;
  }

  .dark-mode ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
  }

  /* =============== CAMERA FEED & HEATMAP DARK MODE FIX =============== */

  /* Fix camera feed black background in dark mode */
  .dark-mode #cameraFeed {
      background: var(--dark-tertiary) !important;
      border: 2px solid var(--border-dark) !important;
  }

  .dark-mode video {
      background: var(--dark-tertiary) !important;
  }

  /* Fix heatmap summary visibility in dark mode */
  .dark-mode .heatmap-summary {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .heatmap-summary h2,
  .dark-mode .heatmap-summary h3,
  .dark-mode .heatmap-summary p,
  .dark-mode .heatmap-summary span,
  .dark-mode .heatmap-summary div {
      color: var(--text-light) !important;
  }

  .dark-mode .heatmap-summary .summary-item {
      background: var(--dark-tertiary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .heatmap-summary .summary-item strong {
      color: var(--text-light) !important;
  }

  /* Fix alerts panel in dark mode */
  .dark-mode .alerts-panel {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .alerts-panel h3,
  .dark-mode .alerts-panel p,
  .dark-mode .alerts-panel div {
      color: var(--text-light) !important;
  }

  /* =============== COMPLETE DASHBOARD DARK MODE FIX =============== */

  /* Panel Box Dark Mode */
  .dark-mode .panel-box {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  /* Heatmap Summary Section Dark Mode */
  .dark-mode .heatmap-summary-section {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .heatmap-summary-section h3 {
      color: var(--text-light) !important;
  }

  .dark-mode .summary-item {
      color: var(--text-light) !important;
  }

  .dark-mode .summary-item strong {
      color: var(--text-light) !important;
  }

  /* Alert Cards Dark Mode */
  .dark-mode .alert-card {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode .alert-card h3 {
      color: var(--text-light) !important;
  }

  .dark-mode .alert-card p {
      color: var(--text-light) !important;
  }

  /* History Container Dark Mode */
  .dark-mode .history-container {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .history-item {
      border-bottom: 1px solid var(--border-dark) !important;
  }

  .dark-mode .history-item strong {
      color: var(--text-light) !important;
  }

  /* Settings Form Elements Dark Mode */
  .dark-mode input[type="number"],
  .dark-mode input[type="url"],
  .dark-mode select {
      background: var(--dark-tertiary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .setting-item strong {
      color: var(--text-light) !important;
  }

  .dark-mode .setting-item p {
      color: #9ca3af !important;
  }

  /* Fix inline styles in dark mode */
  .dark-mode [style*="color: #6b7280"] {
      color: #a0aec0 !important;
      /* Lighter gray for better contrast */
  }

  .dark-mode [style*="color: var(--text-dark)"] {
      color: #e2e8f0 !important;
      /* Slightly softer white */
  }

  /* =============== CHART.JS DARK MODE SUPPORT =============== */

  /* Chart text colors in dark mode */
  .dark-mode canvas {
      filter: none !important;
  }

  /* Chart container text in dark mode */
  .dark-mode .chart-container h3 {
      color: var(--text-light) !important;
  }

  .dark-mode .chart-container small {
      color: #9ca3af !important;
  }

  /* Chart legend and axis text colors will be handled via JavaScript */
  .dark-mode .chartjs-tooltip {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  /* Metric cards in dark mode */
  .dark-mode .metric-card {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .metric-value {
      color: var(--text-light) !important;
  }

  .dark-mode .metric-label {
      color: #9ca3af !important;
  }

  /* =============== DATABASE SCANNING INFORMATION =============== */
  .dark-mode #scanning-info-container {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
      transition: all 0.3s ease;
  }

  .dark-mode #scanning-info-container:hover {
      border-color: var(--primary-color);
      box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
  }

  .dark-mode #scanning-info-container h3 {
      color: var(--text-light) !important;
  }

  .scan-status {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 15px;
  }

  .scan-light {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #6b7280;
      transition: background 0.3s ease;
  }

  .scan-light.scanning {
      background: #f59e0b;
      animation: pulse 1.5s infinite;
  }

  .scan-light.complete {
      background: #10b981;
  }

  .scan-light.failed {
      background: #ef4444;
  }

  .scan-results {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      font-size: 0.9rem;
      margin-bottom: 15px;
  }

  .scan-result-item {
      background: var(--light-bg);
      padding: 8px 12px;
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
  }

  .dark-mode .scan-result-item {
      background: var(--dark-tertiary);
  }

  .scan-progress-bar {
      width: 100%;
      height: 6px;
      background: var(--light-secondary);
      border-radius: 3px;
      overflow: hidden;
  }

  .dark-mode .scan-progress-bar {
      background: var(--dark-tertiary);
  }

  .scan-progress {
      width: 0;
      height: 100%;
      background: var(--primary-color);
      border-radius: 3px;
      transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* =============== CAMERA MAXIMIZE/MINIMIZE CONTROLS =============== */

  .view-control-btn {
      background: rgba(37, 99, 235, 0.1);
      border: 1px solid var(--primary-color);
      color: var(--primary-color);
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-left: 8px;
      font-size: 14px;
  }

  .view-control-btn:hover {
      background: var(--primary-color);
      color: white;
      transform: scale(1.05);
  }

  .dark-mode .view-control-btn {
      background: rgba(37, 99, 235, 0.2);
      border-color: var(--primary-color);
      color: var(--primary-color);
  }

  .camera-container {
      position: relative;
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .camera-container.maximized {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: cameraMaximize 0.5s ease-out;
  }

  .camera-container.maximized video {
      width: 90vw;
      height: 90vh;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  }

  @keyframes cameraMaximize {
      from {
          opacity: 0;
          transform: scale(0.8);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  .camera-container.minimizing {
      animation: cameraMinimize 0.5s ease-out;
  }

  @keyframes cameraMinimize {
      from {
          opacity: 1;
          transform: scale(1);
      }

      to {
          opacity: 0;
          transform: scale(0.8);
      }
  }

  /* =============== MAXIMIZED CAMERA MINIMIZE BUTTON =============== */

  .maximized-minimize-btn {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.3);
      padding: 12px 20px;
      border-radius: 25px;
      cursor: pointer;
      font-size: 16px;
      z-index: 10001;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      gap: 8px;
      animation: minimizeBtnFadeIn 0.5s ease-out 0.3s both;
  }

  .maximized-minimize-btn:hover {
      background: rgba(239, 68, 68, 0.9);
      border-color: rgba(255, 255, 255, 0.6);
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
  }

  @keyframes minimizeBtnFadeIn {
      from {
          opacity: 0;
          transform: translateX(-50%) translateY(-20px);
      }

      to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }
  }

  /* =============== MOBILE CAMERA CONTROLS =============== */

  @media (max-width: 768px) {
      .maximized-minimize-btn {
          top: 15px;
          padding: 15px 25px;
          font-size: 18px;
          border-radius: 30px;
          touch-action: manipulation;
      }

      .camera-container.maximized {
          touch-action: pan-y;
      }

      .mobile-swipe-hint {
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 10px 20px;
          border-radius: 20px;
          font-size: 14px;
          z-index: 10001;
          animation: swipeHintPulse 2s ease-in-out infinite;
          backdrop-filter: blur(10px);
      }

      @keyframes swipeHintPulse {

          0%,
          100% {
              opacity: 0.7;
          }

          50% {
              opacity: 1;
          }
      }
  }

  /* =============== ALERT MONITORING EFFECTS =============== */

  .alert-card.monitoring {
      animation: monitoringPulse 2s ease-in-out infinite;
      border: 2px solid;
      position: relative;
      overflow: hidden;
  }

  .alert-card.monitoring::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: scanEffect 3s linear infinite;
  }

  .alert-card.fire-monitoring {
      border-color: var(--danger-color);
      box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  }

  .alert-card.overcrowding-monitoring {
      border-color: var(--warning-color);
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
  }

  .alert-card.medical-monitoring {
      border-color: var(--primary-color);
      box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
  }

  .alert-card.stampede-monitoring {
      border-color: var(--danger-color);
      box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  }

  @keyframes monitoringPulse {

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

      50% {
          transform: scale(1.02);
      }
  }

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

      100% {
          left: 100%;
      }
  }

  .monitoring-status {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      font-weight: 600;
      animation: statusFadeIn 0.5s ease-out;
  }

  .status-active {
      background: rgba(16, 185, 129, 0.1);
      color: var(--success-color);
  }

  .status-scanning {
      background: rgba(245, 158, 11, 0.1);
      color: var(--warning-color);
  }

  .status-alert {
      background: rgba(239, 68, 68, 0.1);
      color: var(--danger-color);
  }

  @keyframes statusFadeIn {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

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

  /* =============== UNIFIED ALERT MONITORING STYLES =============== */

  .detection-result {
      padding: 12px 16px;
      border-radius: 8px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 15px;
      animation: resultFadeIn 0.5s ease-out;
      border: 2px solid;
      background: rgba(255, 255, 255, 0.05);
  }

  .dark-mode .detection-result {
      background: rgba(0, 0, 0, 0.2);
  }

  @keyframes resultFadeIn {
      from {
          opacity: 0;
          transform: translateY(-10px) scale(0.95);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

  .alert-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
  }

  .alert-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .alert-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
  }

  .alert-btn i {
      font-size: 14px;
  }

  /* Stop button styles */
  .alert-btn[id*="stop"] {
      background: #6b7280;
      color: white;
  }

  .alert-btn[id*="stop"]:hover {
      background: #4b5563;
  }

  /* Monitor button styles */
  .alert-btn[id*="monitor"] {
      color: white;
  }

  /* Alert-specific colors */
  #monitorFireBtn,
  #stopFireBtn {
      background: var(--danger-color);
  }

  #monitorFireBtn:hover,
  #stopFireBtn:hover {
      background: #dc2626;
  }

  #monitorOvercrowdingBtn,
  #stopOvercrowdingBtn {
      background: var(--warning-color);
  }

  #monitorOvercrowdingBtn:hover,
  #stopOvercrowdingBtn:hover {
      background: #d97706;
  }

  #monitorMedicalBtn,
  #stopMedicalBtn {
      background: var(--primary-color);
  }

  #monitorMedicalBtn:hover,
  #stopMedicalBtn:hover {
      background: var(--secondary-color);
  }

  #monitorStampedeBtn,
  #stopStampedeBtn {
      background: var(--danger-color);
  }

  #monitorStampedeBtn:hover,
  #stopStampedeBtn:hover {
      background: #dc2626;
  }

  /* Dark mode alert button styles */
  .dark-mode .alert-btn {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .dark-mode .alert-btn:hover {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }

  /* =============== FULL HISTORY MODAL STYLES =============== */

  @keyframes modalSlideIn {
      from {
          opacity: 0;
          transform: scale(0.7) translateY(-50px);
      }

      to {
          opacity: 1;
          transform: scale(1) translateY(0);
      }
  }

  @keyframes pulse {

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

      50% {
          transform: scale(1.1);
      }
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  /* Full History Modal Dark Mode */
  .dark-mode #fullHistoryModal .modal {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
      border: 1px solid var(--border-dark) !important;
  }

  .dark-mode #fullHistoryModal .modal-header {
      background: linear-gradient(135deg, var(--primary-color), var(--success-color)) !important;
      color: white !important;
  }

  .dark-mode #fullHistoryModal .modal-body {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryModal .modal-footer {
      background: var(--dark-secondary) !important;
      border-top: 1px solid var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent {
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent div,
  .dark-mode #fullHistoryContent p {
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent h4 {
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent p {
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent div {
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent strong {
      color: var(--text-light) !important;
  }

  /* Modal close button hover effect */
  #fullHistoryClose:hover {
      background: rgba(255, 255, 255, 0.3) !important;
      transform: scale(1.1) rotate(90deg);
  }

  /* Refresh button animation */
  #refreshHistoryBtn:hover {
      transform: translateY(-2px);
  }

  #refreshHistoryBtn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
  }

  /* Scrollbar styling for modal */
  #fullHistoryContent::-webkit-scrollbar {
      width: 8px;
  }

  #fullHistoryContent::-webkit-scrollbar-track {
      background: var(--light-secondary);
      border-radius: 4px;
  }

  .dark-mode #fullHistoryContent::-webkit-scrollbar-track {
      background: var(--dark-tertiary);
  }

  #fullHistoryContent::-webkit-scrollbar-thumb {
      background: var(--border-light);
      border-radius: 4px;
  }

  .dark-mode #fullHistoryContent::-webkit-scrollbar-thumb {
      background: var(--border-dark);
  }

  #fullHistoryContent::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
  }

  /* Modal content visibility fix */
  .dark-mode #fullHistoryContent,
  .dark-mode #fullHistoryContent * {
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent [style*="color: var(--text-dark)"] {
      color: var(--text-light) !important;
  }

  .dark-mode #fullHistoryContent [style*="background: var(--light-bg)"] {
      background: var(--dark-tertiary) !important;
  }

  /* Force Analytics visibility in dark mode */
  .dark-mode #analytics * {
      color: var(--text-light) !important;
  }

  .dark-mode #analytics .chart-container {
      background: var(--dark-secondary) !important;
      border: 1px solid var(--border-dark) !important;
  }

  /* Chart glow effect */
  .dark-mode canvas {
      filter: brightness(1.3) contrast(1.2) !important;
      animation: chartPulse 2s ease-in-out infinite alternate !important;
  }

  @keyframes chartPulse {
      0% {
          filter: brightness(1.3) contrast(1.2) drop-shadow(0 0 10px rgba(37, 99, 235, 0.5));
      }

      100% {
          filter: brightness(1.5) contrast(1.3) drop-shadow(0 0 20px rgba(37, 99, 235, 0.8));
      }
  }

  /* Quick Actions Section */
  .quick-actions-section {
      margin: 10px 0;
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
      padding: 10px 0;
  }

  .dark-mode .quick-actions-section {
      border-color: var(--border-dark);
  }

  .quick-actions-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 25px;
      cursor: pointer;
      color: var(--text-dark);
      font-weight: 600;
      transition: all 0.3s ease;
  }

  .dark-mode .quick-actions-header {
      color: var(--text-light);
  }

  .quick-actions-header:hover {
      background: rgba(37, 99, 235, 0.1);
      color: var(--primary-color);
  }

  .toggle-icon {
      transition: transform 0.3s ease;
  }

  .quick-actions-header.active .toggle-icon {
      transform: rotate(180deg);
  }

  @media (max-width: 768px) {
      .quick-actions-header {
          padding: 14px 20px;
      }

      .quick-actions-content {
          padding: 15px 20px;
          flex-direction: row;
          justify-content: space-around;
      }

      .panic-dispatch-btn {
          width: 50px;
          height: 50px;
          font-size: 20px;
      }

      .mass-notification-btn {
          padding: 10px 16px;
          font-size: 14px;
      }

      .risk-radar {
          position: relative;
          bottom: auto;
          left: auto;
          margin: 20px auto;
      }
  }

  .quick-actions-content {
      display: none;
      padding: 15px 25px;
      gap: 15px;
      flex-direction: column;
      animation: slideDown 0.3s ease-out;
  }

  .quick-actions-content.active {
      display: flex;
  }

  @keyframes slideDown {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }

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

  .login-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      padding: 40px;
      width: 100%;
      max-width: 400px;
      animation: slideUpFade 1s ease-out;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
      position: relative;
      overflow: hidden;
  }

  .login-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      animation: shimmer 3s linear infinite;
  }

  @keyframes slideUpFade {
      from {
          opacity: 0;
          transform: translateY(50px) scale(0.9);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

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

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

  .login-header {
      text-align: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
  }

  .login-header h1 {
      color: white;
      font-size: 2.2rem;
      margin-bottom: 10px;
      animation: glow 2s ease-in-out infinite alternate;
      font-weight: 700;
  }

  @keyframes glow {
      from {
          text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
      }

      to {
          text-shadow: 0 0 25px rgba(37, 99, 235, 0.8), 0 0 35px rgba(37, 99, 235, 0.6);
      }
  }

  .login-header p {
      color: rgba(255, 255, 255, 0.8);
      font-size: 1rem;
      animation: fadeInUp 1s ease-out 0.5s both;
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  /* Panic Dispatch Button */
  .panic-dispatch-btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border: 3px solid #ef4444;
      color: white;
      font-size: 24px;
      cursor: pointer;
      position: relative;
      animation: panicPulse 2s infinite;
      transition: all 0.3s ease;
      align-self: center;
  }

  .panic-dispatch-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
  }

  @keyframes panicPulse {

      0%,
      100% {
          border-color: #ef4444;
          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
      }

      50% {
          border-color: #fca5a5;
          box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
      }
  }

  /* Mass Notification Button */
  .mass-notification-btn {
      padding: 12px 20px;
      border-radius: 25px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      border: 3px solid #f59e0b;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      animation: panicPulse 2s infinite;
      position: relative;
  }

  .mass-notification-btn:hover {
      transform: translateY(-2px) scale(1.1);
      box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
  }

  /* Risk Radar */
  .risk-radar {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 60px;
      height: 60px;
      cursor: pointer;
      z-index: 1001;
  }

  .radar-circle {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.8));
      border: 2px solid #10b981;
      position: relative;
      overflow: hidden;
      animation: radarGlow 3s ease-in-out infinite;
  }

  @keyframes radarGlow {

      0%,
      100% {
          box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
      }

      50% {
          box-shadow: 0 0 25px rgba(16, 185, 129, 0.8);
      }
  }

  .radar-sweep {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 50%;
      background: linear-gradient(to bottom, #10b981, transparent);
      transform-origin: bottom center;
      animation: radarSweep 2s linear infinite;
  }

  @keyframes radarSweep {
      0% {
          transform: translate(-50%, -100%) rotate(0deg);
      }

      100% {
          transform: translate(-50%, -100%) rotate(360deg);
      }
  }

  .radar-dot {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #10b981;
      border-radius: 50%;
      animation: radarPulse 2s ease-in-out infinite;
  }

  .dot-1 {
      top: 20%;
      left: 30%;
      animation-delay: 0s;
  }

  .dot-2 {
      top: 60%;
      right: 25%;
      animation-delay: 0.7s;
  }

  .dot-3 {
      bottom: 25%;
      left: 50%;
      animation-delay: 1.4s;
  }

  @keyframes radarPulse {

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

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

  /* Responsive Design */
  @media (max-width: 768px) {
      .risk-radar {
          bottom: 15px;
          left: 15px;
          width: 50px;
          height: 50px;
      }

      .panic-dispatch-btn {
          width: 50px;
          height: 50px;
          font-size: 20px;
      }

      .mass-notification-btn {
          padding: 10px 16px;
          font-size: 14px;
      }
  }

  /* =============== ENHANCED EMERGENCY DISPATCH MODAL =============== */

  .emergency-modal {
      animation: emergencyModalFadeIn 0.4s ease-out;
  }

  @keyframes emergencyModalFadeIn {
      from {
          opacity: 0;
          background: rgba(0, 0, 0, 0);
      }

      to {
          opacity: 1;
          background: rgba(0, 0, 0, 0.9);
      }
  }

  .emergency-dispatch-modal {
      animation: emergencyModalBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      border: 3px solid #ef4444;
  }

  @keyframes emergencyModalBounce {
      0% {
          opacity: 0;
          transform: scale(0.3) rotate(-10deg);
      }

      50% {
          opacity: 1;
          transform: scale(1.05) rotate(2deg);
      }

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

  .emergency-header {
      position: relative;
      overflow: hidden;
  }

  .emergency-icon-bg {
      position: absolute;
      top: -50%;
      right: -20%;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      animation: emergencyIconRotate 8s linear infinite;
  }

  @keyframes emergencyIconRotate {
      0% {
          transform: rotate(0deg) scale(1);
      }

      50% {
          transform: rotate(180deg) scale(1.1);
      }

      100% {
          transform: rotate(360deg) scale(1);
      }
  }

  .emergency-icon {
      animation: emergencyIconPulse 1.5s ease-in-out infinite;
      font-size: 1.2rem;
      margin-right: 10px;
  }

  @keyframes emergencyIconPulse {

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

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

  .emergency-warning {
      animation: warningPulse 2s ease-in-out infinite;
  }

  @keyframes warningPulse {

      0%,
      100% {
          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
      }

      50% {
          box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
      }
  }

  .countdown-timer {
      font-size: 4rem;
      font-weight: 900;
      color: #ef4444;
      text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
      animation: countdownPulse 1s ease-in-out infinite;
      margin-bottom: 15px;
  }

  @keyframes countdownPulse {

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

      50% {
          transform: scale(1.2);
          color: #dc2626;
      }
  }

  .countdown-text {
      font-size: 1.1rem;
      color: var(--text-dark);
      margin: 0;
  }

  .cancel-btn {
      background: #6b7280;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .cancel-btn:hover {
      background: #4b5563;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
  }

  .dispatch-btn {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      animation: dispatchBtnPulse 2s ease-in-out infinite;
  }

  @keyframes dispatchBtnPulse {

      0%,
      100% {
          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
      }

      50% {
          box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
      }
  }

  .dispatch-btn:hover {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
  }

  /* Dark mode for emergency modal */
  .dark-mode .emergency-body {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .emergency-warning {
      background: rgba(239, 68, 68, 0.2) !important;
      border-color: rgba(239, 68, 68, 0.5) !important;
  }

  .dark-mode .emergency-warning p {
      color: var(--text-light) !important;
  }

  .dark-mode .countdown-text {
      color: var(--text-light) !important;
  }

  .dark-mode .emergency-footer {
      background: var(--dark-tertiary) !important;
  }

  /* =============== ENHANCED MASS NOTIFICATION MODAL =============== */

  .notification-modal {
      animation: notificationModalFadeIn 0.4s ease-out;
  }

  @keyframes notificationModalFadeIn {
      from {
          opacity: 0;
          background: rgba(0, 0, 0, 0);
      }

      to {
          opacity: 1;
          background: rgba(0, 0, 0, 0.8);
      }
  }

  .mass-notification-modal {
      animation: notificationModalSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      border: 2px solid #f59e0b;
  }

  @keyframes notificationModalSlide {
      0% {
          opacity: 0;
          transform: translateY(-100px) scale(0.8);
      }

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

  .notification-header {
      position: relative;
      overflow: hidden;
  }

  .notification-icon-bg {
      position: absolute;
      top: -30%;
      left: -20%;
      width: 150px;
      height: 150px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      animation: notificationIconFloat 6s ease-in-out infinite;
  }

  @keyframes notificationIconFloat {

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

      50% {
          transform: translateY(-20px) rotate(180deg);
      }
  }

  .notification-icon {
      animation: notificationIconPulse 2s ease-in-out infinite;
      font-size: 1.2rem;
      margin-right: 10px;
  }

  @keyframes notificationIconPulse {

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

      50% {
          transform: scale(1.1);
      }
  }

  .notification-close {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .notification-close:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1) rotate(90deg);
  }

  .section-label {
      display: block;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 15px;
      font-size: 1rem;
  }

  .section-label i {
      margin-right: 8px;
      color: var(--primary-color);
  }

  .template-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 10px;
  }

  .template-btn {
      padding: 15px;
      border: 2px solid transparent;
      border-radius: 12px;
      color: white;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
  }

  .template-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s;
  }

  .template-btn:hover::before {
      left: 100%;
  }

  .template-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
  }

  .template-btn i {
      font-size: 1.5rem;
      margin-bottom: 5px;
  }

  .fire-template {
      background: linear-gradient(135deg, #ef4444, #dc2626);
  }

  .crowd-template {
      background: linear-gradient(135deg, #f59e0b, #d97706);
  }

  .medical-template {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
  }

  .stampede-template {
      background: linear-gradient(135deg, #ef4444, #b91c1c);
  }

  .message-input-container {
      position: relative;
  }

  .notification-textarea {
      width: 100%;
      height: 120px;
      padding: 15px;
      border: 2px solid var(--border-light);
      border-radius: 12px;
      font-size: 1rem;
      font-family: inherit;
      resize: vertical;
      transition: all 0.3s ease;
      background: var(--light-bg);
      color: var(--text-dark);
  }

  .notification-textarea:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
      background: rgba(37, 99, 235, 0.02);
  }

  .character-count {
      position: absolute;
      bottom: 10px;
      right: 15px;
      font-size: 0.8rem;
      color: #6b7280;
      background: rgba(255, 255, 255, 0.9);
      padding: 2px 6px;
      border-radius: 4px;
  }

  .recipient-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #6b7280;
      font-size: 0.9rem;
      font-weight: 600;
  }

  .recipient-info i {
      color: var(--primary-color);
  }

  .action-buttons {
      display: flex;
      gap: 12px;
  }

  .send-btn {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .send-btn:hover {
      background: linear-gradient(135deg, #d97706, #b45309);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
  }

  /* Dark mode for notification modal */
  .dark-mode .notification-body {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .section-label {
      color: var(--text-light) !important;
  }

  .dark-mode .notification-textarea {
      background: var(--dark-tertiary) !important;
      border-color: var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .notification-textarea:focus {
      background: var(--dark-bg) !important;
      border-color: var(--primary-color) !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  }

  .dark-mode .character-count {
      background: rgba(0, 0, 0, 0.8) !important;
      color: #9ca3af !important;
  }

  .dark-mode .recipient-info {
      color: var(--text-light) !important;
  }

  .dark-mode .notification-footer {
      background: var(--dark-tertiary) !important;
  }

  /* =============== RESPONSIVE DESIGN FOR ENHANCED MODALS =============== */

  @media (max-width: 768px) {

      .emergency-dispatch-modal,
      .mass-notification-modal {
          margin: 20px;
          max-width: none;
          width: calc(100% - 40px);
      }

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

      .countdown-timer {
          font-size: 3rem;
      }

      .action-buttons {
          flex-direction: column;
          width: 100%;
      }

      .modal-footer.notification-footer {
          flex-direction: column;
          gap: 15px;
          align-items: stretch;
      }

      .recipient-info {
          justify-content: center;
      }
  }

  @media (max-width: 480px) {

      .emergency-dispatch-modal,
      .mass-notification-modal {
          margin: 10px;
          width: calc(100% - 20px);
      }

      .modal-header.emergency-header,
      .modal-header.notification-header {
          padding: 20px;
      }

      .modal-body.emergency-body,
      .modal-body.notification-body {
          padding: 20px;
      }

      .countdown-timer {
          font-size: 2.5rem;
      }

      .template-btn {
          padding: 12px;
      }

      .template-btn i {
          font-size: 1.2rem;
      }
  }

  /* =============== MODAL ANIMATION IMPROVEMENTS =============== */

  .modal-btn {
      position: relative;
      overflow: hidden;
  }

  .modal-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
  }

  .modal-btn:hover::before {
      left: 100%;
  }

  .modal-btn:active {
      transform: scale(0.98);
  }

  /* Enhanced focus states for accessibility */
  .modal-btn:focus,
  .template-btn:focus,
  .notification-textarea:focus {
      outline: 2px solid var(--primary-color);
      outline-offset: 2px;
  }

  /* Loading state for send button */
  .send-btn.loading {
      pointer-events: none;
      opacity: 0.7;
  }

  .send-btn.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2px solid transparent;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }

  /* =============== TEMPLATE BUTTON SELECTION EFFECT =============== */

  .template-btn.selected {
      transform: translateY(-3px) scale(1.05);
      border-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
      animation: templateSelected 0.6s ease-out;
  }

  @keyframes templateSelected {
      0% {
          transform: translateY(-3px) scale(1.05);
      }

      50% {
          transform: translateY(-5px) scale(1.1);
      }

      100% {
          transform: translateY(-3px) scale(1.05);
      }
  }

  /* =============== ENHANCED BUTTON INTERACTIONS =============== */

  .template-btn:active {
      transform: translateY(-1px) scale(0.98);
  }

  .modal-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
  }

  .modal-btn:disabled:hover {
      transform: none;
      box-shadow: none;
  }

  /* =============== IMPROVED ACCESSIBILITY =============== */

  .template-btn:focus-visible,
  .modal-btn:focus-visible {
      outline: 3px solid var(--primary-color);
      outline-offset: 2px;
  }

  .notification-textarea:focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 1px;
  }

  /* =============== ENHANCED DARK MODE SUPPORT =============== */

  .dark-mode .template-btn.selected {
      border-color: rgba(255, 255, 255, 0.6);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  }

  .dark-mode .notification-textarea::placeholder {
      color: #9ca3af;
  }

  /* =============== SOCIAL MODAL LIGHT MODE FIXES =============== */

  body.light-mode .social-modal {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      border-color: rgba(var(--platform-color-rgb), 0.5);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  body.light-mode .social-modal-header {
      border-bottom-color: rgba(var(--platform-color-rgb), 0.3);
  }

  body.light-mode .social-modal-header .modal-title {
      text-shadow: none;
  }

  body.light-mode .social-account-item {
      background: rgba(var(--platform-color-rgb), 0.08);
      border-color: rgba(var(--platform-color-rgb), 0.3);
  }

  body.light-mode .social-account-item:hover {
      background: rgba(var(--platform-color-rgb), 0.15);
      border-color: rgba(var(--platform-color-rgb), 0.5);
  }

  body.light-mode .social-account-item .login-btn {
      background: rgba(var(--platform-color-rgb), 0.2);
  }

  body.light-mode .social-account-item .handle-text {
      color: #4b5563;
      /* Darker text for light background */
  }

  .dark-mode .modal-close.notification-close {
      background: rgba(255, 255, 255, 0.1);
  }

  .dark-mode .modal-close.notification-close:hover {
      background: rgba(255, 255, 255, 0.2);
  }

  /* =============== ANIMATION PERFORMANCE OPTIMIZATIONS =============== */

  .template-btn,
  .modal-btn,
  .countdown-timer,
  .emergency-icon,
  .notification-icon {
      will-change: transform;
  }

  .emergency-icon-bg,
  .notification-icon-bg {
      will-change: transform, opacity;
  }

  /* =============== PRINT STYLES (HIDE MODALS) =============== */

  @media print {
      .modal-overlay {
          display: none !important;
      }
  }

  /* =============== HIGH CONTRAST MODE SUPPORT =============== */

  @media (prefers-contrast: high) {
      .template-btn {
          border: 3px solid white;
      }

      .modal-btn {
          border: 2px solid white;
      }

      .notification-textarea {
          border: 2px solid var(--text-dark);
      }

      .dark-mode .notification-textarea {
          border: 2px solid var(--text-light);
      }
  }

  /* =============== REDUCED MOTION SUPPORT =============== */

  @media (prefers-reduced-motion: reduce) {

      .emergency-dispatch-modal,
      .mass-notification-modal {
          animation: none;
      }

      .countdown-timer,
      .emergency-icon,
      .notification-icon,
      .emergency-icon-bg,
      .notification-icon-bg {
          animation: none;
      }

      .template-btn:hover,
      .modal-btn:hover {
          transform: none;
      }

      .template-btn.selected {
          animation: none;
          transform: scale(1.02);
      }
  }



  /* =============== MODAL LAYOUT FIXES =============== */

  .emergency-dispatch-modal {
      max-width: 450px;
      width: 90%;
      max-height: 90vh;
      text-align: center;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(239, 68, 68, 0.5);
      border: 3px solid #ef4444;
      display: flex;
      flex-direction: column;
  }

  .mass-notification-modal {
      max-width: 550px;
      width: 90%;
      max-height: 90vh;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(245, 158, 11, 0.4);
      border: 2px solid #f59e0b;
      display: flex;
      flex-direction: column;
  }

  .emergency-header {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      padding: 25px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
  }

  .notification-header {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: white;
      padding: 25px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
  }

  .notification-close-top-left {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 35px;
      height: 35px;
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      color: white;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 10;
      animation: crossButtonPulse 2s infinite;
  }

  .notification-close-top-left:hover {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
      transform: scale(1.1) rotate(90deg);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  .notification-close-top-left:active {
      transform: scale(0.95) rotate(180deg);
  }

  @keyframes crossButtonPulse {

      0%,
      100% {
          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      }

      50% {
          box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
      }
  }

  .emergency-body,
  .notification-body {
      padding: 30px;
      background: var(--light-bg);
      flex: 1;
      overflow-y: auto;
  }

  .emergency-footer,
  .notification-footer {
      padding: 20px 30px;
      background: var(--light-secondary);
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-shrink: 0;
      border-top: 1px solid var(--border-light);
  }

  .notification-footer {
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
  }

  .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 2;
  }

  .emergency-warning {
      background: rgba(239, 68, 68, 0.1);
      border: 2px solid rgba(239, 68, 68, 0.3);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 25px;
  }

  .template-section {
      margin-bottom: 25px;
  }

  .notification-textarea {
      width: 100%;
      min-height: 120px;
      max-height: 200px;
      padding: 15px;
      border: 2px solid var(--border-light);
      border-radius: 12px;
      font-size: 1rem;
      font-family: inherit;
      resize: vertical;
      transition: all 0.3s ease;
      background: var(--light-bg);
      color: var(--text-dark);
      box-sizing: border-box;
      overflow-y: auto;
  }

  /* Scrollbar styles */
  .emergency-body::-webkit-scrollbar,
  .notification-body::-webkit-scrollbar,
  .notification-textarea::-webkit-scrollbar {
      width: 8px;
  }

  .emergency-body::-webkit-scrollbar-track,
  .notification-body::-webkit-scrollbar-track,
  .notification-textarea::-webkit-scrollbar-track {
      background: var(--light-secondary);
      border-radius: 4px;
  }

  .emergency-body::-webkit-scrollbar-thumb,
  .notification-body::-webkit-scrollbar-thumb,
  .notification-textarea::-webkit-scrollbar-thumb {
      background: var(--border-light);
      border-radius: 4px;
  }

  .emergency-body::-webkit-scrollbar-thumb:hover,
  .notification-body::-webkit-scrollbar-thumb:hover,
  .notification-textarea::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
  }

  /* Dark mode fixes */
  .dark-mode .emergency-body,
  .dark-mode .notification-body {
      background: var(--dark-secondary) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .emergency-footer,
  .dark-mode .notification-footer {
      background: var(--dark-tertiary) !important;
      border-top-color: var(--border-dark) !important;
  }

  .dark-mode .emergency-warning p,
  .dark-mode .section-label,
  .dark-mode .countdown-text,
  .dark-mode .recipient-info {
      color: var(--text-light) !important;
  }

  .dark-mode .notification-textarea {
      background: var(--dark-tertiary) !important;
      border-color: var(--border-dark) !important;
      color: var(--text-light) !important;
  }

  .dark-mode .emergency-body::-webkit-scrollbar-track,
  .dark-mode .notification-body::-webkit-scrollbar-track,
  .dark-mode .notification-textarea::-webkit-scrollbar-track {
      background: var(--dark-tertiary);
  }

  .dark-mode .emergency-body::-webkit-scrollbar-thumb,
  .dark-mode .notification-body::-webkit-scrollbar-thumb,
  .dark-mode .notification-textarea::-webkit-scrollbar-thumb {
      background: var(--border-dark);
  }

  /* Responsive fixes */
  @media (max-width: 768px) {

      .emergency-dispatch-modal,
      .mass-notification-modal {
          width: 95%;
          max-height: 95vh;
      }

      .emergency-header,
      .notification-header {
          padding: 20px;
      }

      .emergency-body,
      .notification-body {
          padding: 20px;
      }

      .emergency-footer,
      .notification-footer {
          padding: 15px 20px;
          flex-direction: column;
          gap: 15px;
          align-items: stretch;
      }

      .template-grid {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .action-buttons {
          display: flex;
          gap: 10px;
      }

      .recipient-info {
          justify-content: center;
          order: -1;
      }
  }

  @media (max-width: 480px) {

      .emergency-dispatch-modal,
      .mass-notification-modal {
          width: 98%;
          max-height: 98vh;
      }

      .emergency-header,
      .notification-header {
          padding: 15px;
      }

      .emergency-body,
      .notification-body {
          padding: 15px;
      }

      .emergency-footer,
      .notification-footer {
          padding: 15px;
      }

      .action-buttons {
          flex-direction: column;
      }

      .notification-textarea {
          min-height: 80px;
          max-height: 120px;
          font-size: 0.9rem;
      }
  }

  /* =============== ENHANCED MOBILE-FIRST RESPONSIVE DESIGN =============== */

  /* Mobile First - Base styles for mobile devices */
  @media (max-width: 480px) {

      /* Performance optimizations for mobile */
      * {
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
          -webkit-touch-callout: default;
          -webkit-user-select: text;
          -moz-user-select: text;
          -ms-user-select: text;
          user-select: text;
      }

      button,
      a,
      .nav-item,
      .alert-btn {
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
      }

      /* Reduce animations on mobile for better performance */
      .welcome-panel::before,
      .scan-line,
      .heatmap-pulse,
      .route-path,
      .alert-ring,
      .chart-line,
      .message-dots,
      .scanning-line,
      .radar-rings,
      .signal-waves,
      .monitor-pulse,
      .alert-waves,
      .emergency-lights {
          animation: none !important;
      }

      /* Optimize backdrop-filter usage on mobile */
      .welcome-panel,
      .login-panel,
      .modal {
          backdrop-filter: blur(5px) !important;
          -webkit-backdrop-filter: blur(5px) !important;
      }

      /* Test Review Information popup - Mobile optimized */
      #testReviewPopup {
          position: fixed !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
          width: calc(100% - 30px) !important;
          max-width: 350px !important;
          padding: 20px !important;
          max-height: 80vh !important;
          overflow-y: auto !important;
          box-sizing: border-box !important;
          margin: 0 !important;
          z-index: 10001 !important;
          background: rgba(15, 23, 42, 0.98) !important;
          backdrop-filter: blur(10px) !important;
          border: 2px solid #00FF88 !important;
          border-radius: 16px !important;
          box-shadow: 0 20px 60px rgba(0, 255, 136, 0.3) !important;
      }

      #testReviewPopup h2 {
          font-size: 1.3rem !important;
          margin-bottom: 15px !important;
          color: #00FF88 !important;
          text-align: center !important;
      }

      #testReviewPopup p {
          font-size: 0.95rem !important;
          line-height: 1.6 !important;
          margin-bottom: 12px !important;
          color: #fff !important;
      }

      #testReviewPopup strong {
          color: #00FF88 !important;
          font-weight: 700 !important;
      }

      #testReviewPopup .popup-row {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
      }

      #testReviewPopup .popup-row>* {
          width: 100% !important;
      }

      /* Welcome Page Mobile Optimizations */
      .welcome-container {
          padding: 15px !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
      }

      .welcome-panel {
          padding: 20px 15px !important;
          border-radius: 12px !important;
          max-height: calc(100vh - 30px) !important;
          overflow-y: auto !important;
          box-sizing: border-box !important;
          width: 100% !important;
          margin: 0 !important;
      }

      .welcome-title {
          font-size: 24px !important;
          margin-bottom: 20px !important;
          padding-bottom: 15px !important;
          text-align: center !important;
          line-height: 1.2 !important;
      }

      .welcome-title .subtitle {
          font-size: 14px !important;
      }

      /* Feature Section Mobile - Simplified Layout */
      .feature-section {
          margin-bottom: 20px !important;
          padding: 20px 15px !important;
          border-radius: 12px !important;
      }

      .feature-section h2 {
          font-size: 1.3rem !important;
          text-align: center !important;
          margin-bottom: 20px !important;
      }

      .intro-content .main-description {
          font-size: 0.95rem !important;
          line-height: 1.5 !important;
          text-align: center !important;
          margin-bottom: 15px !important;
      }

      .key-points {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          margin-top: 15px !important;
      }

      .point {
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
          font-size: 0.9rem !important;
          padding: 8px !important;
          border-radius: 8px !important;
          background: rgba(0, 255, 136, 0.05) !important;
      }

      .point i {
          color: #00FF88 !important;
          font-size: 1rem !important;
          flex-shrink: 0 !important;
      }

      /* Feature Grid Mobile - Enhanced Flexbox */
      .feature-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          margin-top: 20px !important;
          width: 100% !important;
      }

      .feature-item {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          gap: 15px !important;
          padding: 15px !important;
          border-radius: 12px !important;
          text-align: left !important;
          width: 100% !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
          transition: all 0.3s ease !important;
          min-height: 60px !important;
      }

      .feature-icon {
          width: 50px !important;
          height: 50px !important;
          margin: 0 !important;
          flex-shrink: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          border-radius: 12px !important;
      }

      .feature-details {
          flex: 1 !important;
          text-align: left !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 5px !important;
      }

      .feature-title {
          font-size: 1rem !important;
          margin-bottom: 0 !important;
          font-weight: 600 !important;
          line-height: 1.3 !important;
      }

      .feature-desc {
          font-size: 0.85rem !important;
          color: rgba(255, 255, 255, 0.8) !important;
          line-height: 1.4 !important;
      }

      /* Steps Grid Mobile */
      .steps-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          width: 100% !important;
      }

      .steps-column {
          width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
      }

      .step-item {
          padding: 20px 15px !important;
          border-radius: 12px !important;
          text-align: left !important;
          position: relative !important;
          width: 100% !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
          min-height: 80px !important;
      }

      .step-content-wrapper {
          display: flex !important;
          align-items: center !important;
          gap: 15px !important;
          width: 100% !important;
      }

      .step-content {
          flex: 1 !important;
          padding-right: 0 !important;
      }

      .step-number {
          width: 40px !important;
          height: 40px !important;
          font-size: 18px !important;
          margin-bottom: 0 !important;
          flex-shrink: 0 !important;
      }

      .step-text h3 {
          font-size: 1.1rem !important;
          margin-bottom: 8px !important;
          line-height: 1.3 !important;
      }

      .step-text p {
          font-size: 0.9rem !important;
          line-height: 1.4 !important;
          margin: 0 !important;
      }

      .step-icon-container {
          flex-shrink: 0 !important;
      }

      .step-icon-container .feature-icon {
          width: 50px !important;
          height: 50px !important;
          position: static !important;
          transform: none !important;
      }

      /* Steps Grid Mobile - Stack columns */
      .steps-grid {
          flex-direction: column !important;
          gap: 15px !important;
          width: 100% !important;
      }

      .start-btn {
          max-width: 100% !important;
          padding: 15px 20px !important;
          font-size: 16px !important;
          margin-top: 20px !important;
          min-height: 48px !important;
          width: 100% !important;
          border-radius: 8px !important;
      }

      /* Login Page Mobile - Enhanced */
      .login-container {
          padding: 15px !important;
          min-height: 100vh !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          box-sizing: border-box !important;
      }

      .login-panel {
          padding: 25px 20px !important;
          margin: 15px !important;
          max-width: calc(100vw - 30px) !important;
          border-radius: 12px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
          box-sizing: border-box !important;
      }

      .mission-title {
          font-size: 22px !important;
          margin-bottom: 8px !important;
          text-align: center !important;
          line-height: 1.2 !important;
      }

      .mission-subtitle {
          font-size: 12px !important;
          margin-bottom: 25px !important;
          text-align: center !important;
      }

      .form-group {
          margin-bottom: 20px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
      }

      .input-wrapper {
          position: relative !important;
          width: 100% !important;
      }

      .input-wrapper input {
          width: 100%;
          padding: 15px 15px 15px 45px !important;
          text-indent: 20px !important;
          font-size: 16px !important;
          min-height: 50px !important;
          border-radius: 8px !important;
          border: 1px solid rgba(0, 255, 136, 0.2) !important;
          background: rgba(0, 255, 136, 0.05) !important;
          color: #fff !important;
          transition: all 0.3s ease !important;
          box-sizing: border-box !important;
      }

      .input-wrapper input::placeholder {
          text-indent: 20px;
          transition: text-indent 0.3s ease;
      }


      .input-wrapper i {
          position: absolute !important;
          left: 15px !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          color: #00FF88 !important;
          z-index: 1 !important;
          font-size: 18px !important;
      }

      .input-line {
          position: absolute !important;
          bottom: 0 !important;
          left: 0 !important;
          width: 0 !important;
          height: 2px !important;
          background: #00FF88 !important;
          transition: width 0.3s ease !important;
      }

      .login-btn {
          width: 100% !important;
          min-height: 50px !important;
          font-size: 16px !important;
          padding: 15px !important;
          border-radius: 8px !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          margin-top: 10px !important;
      }

      .login-btn-content {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
      }

      /* Test Review Info on Login Page - Mobile */
      .test-review-info {
          background-color: #2a2a2a;
          border: 1px solid #00FF88;
          padding: 15px;
          border-radius: 10px;
          color: #fff;
          text-align: center;
          margin-bottom: 20px;
          box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
      }

      .test-review-info h2 {
          margin-top: 0;
          color: #00FF88;
          font-size: 1.1rem;
      }

      .test-review-info p {
          margin-bottom: 8px;
      }

      /* Root Vars */
      :root {
          --navbar-height: 60px;
          --sidebar-width: 85%;
          --sidebar-max-width: 320px;
      }

      /* Navbar */
      .navbar {
          height: var(--navbar-height) !important;
          padding: 0 12px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          z-index: 1300 !important;
          /* topmost layer */
          background: var(--dark-bg) !important;
          border-bottom: 1px solid var(--border-dark) !important;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
          box-sizing: border-box !important;
      }

      /* Overlay (below navbar, below sidebar) */
      .sidebar-overlay {
          display: none !important;
          position: fixed !important;
          top: var(--navbar-height) !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          background: rgba(0, 0, 0, 0.55) !important;
          z-index: 1200 !important;
          /* below sidebar, above content */
          opacity: 0 !important;
          transition: opacity 0.3s ease-in-out !important;
          pointer-events: none !important;
      }

      body.sidebar-open .sidebar-overlay {
          display: block !important;
          opacity: 1 !important;
          pointer-events: auto !important;
      }

      /* Sidebar */
      .sidebar {
          position: fixed !important;
          top: var(--navbar-height) !important;
          left: -100% !important;
          height: calc(100vh - var(--navbar-height)) !important;
          width: var(--sidebar-width) !important;
          max-width: var(--sidebar-max-width) !important;
          z-index: 1250 !important;
          /* above overlay, below navbar */
          background: var(--dark-bg) !important;
          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
          overflow-y: auto !important;
          transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
          padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 20px) !important;
          -webkit-overflow-scrolling: touch !important;
      }

      .sidebar.open {
          left: 0 !important;
      }

      /* Sidebar Navigation Items */
      .sidebar nav {
          display: block !important;
          width: 100% !important;
      }

      .sidebar nav a.nav-item {
          display: block !important;
          width: 100% !important;
          min-height: 56px !important;
          line-height: 56px !important;
          padding: 0 20px !important;
          margin: 6px 12px !important;
          border-radius: 8px !important;
          font-size: 1.05rem !important;
          color: inherit !important;
          text-decoration: none !important;
          cursor: pointer !important;
          background: transparent !important;
          transition: background 0.2s ease-in-out !important;
          pointer-events: auto !important;
          /* clickable */
          position: relative !important;
          z-index: 1301 !important;
          /* higher than overlay */
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06) !important;
      }

      .sidebar nav a.nav-item:hover {
          background: rgba(255, 255, 255, 0.05) !important;
      }

      .sidebar nav a.nav-item:active,
      .sidebar nav a.nav-item:focus {
          background: rgba(37, 99, 235, 0.12) !important;
          outline: none !important;
      }

      /* Icon + label structure */
      .sidebar nav a.nav-item .nav-content {
          display: flex !important;
          align-items: center !important;
          gap: 12px !important;
      }

      .sidebar nav a.nav-item i,
      .sidebar nav a.nav-item .nav-label {
          pointer-events: none !important;
      }

      .sidebar nav a.nav-item i {
          width: 36px !important;
          text-align: center !important;
          font-size: 1.2rem !important;
          flex-shrink: 0 !important;
      }

      /* Quick Actions Section */
      .quick-actions-section {
          margin: 15px 0 !important;
          border-top: 1px solid var(--border-dark) !important;
          border-bottom: 1px solid var(--border-dark) !important;
          padding: 12px 0 !important;
      }

      .quick-actions-header {
          padding: 14px 20px !important;
          font-size: 1rem !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          transition: all 0.3s ease !important;
      }

      .quick-actions-header:active {
          background: rgba(37, 99, 235, 0.1) !important;
      }

      /* Navbar + sidebar when open */
      body.sidebar-open .navbar {
          box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12) !important;
          transition: box-shadow 0.25s ease-in-out !important;
      }

       /* Disable navbar backdrop blur on small screens but don't force a dark background.
         Background should follow the active theme (.dark-mode or .light-mode). */
      .navbar {
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
      }

      /* Mobile: theme-specific navbar backgrounds */
      .dark-mode .navbar {
          background: var(--dark-secondary);
      }

      .light-mode .navbar {
          background: linear-gradient(90deg, var(--light-bg), var(--light-secondary), var(--light-bg));
      }

      .light-mode .sidebar {
          background: var(--light-bg);
          border-right-color: var(--border-light);
      }

      .light-mode .siderbar  nav a.nav-item{
            color: var(--text-dark);
      }

      .logo {
          font-size: 1.2rem !important;
          font-weight: 600 !important;
          color: #00FF88 !important;
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
      }

      .theme-toggle,
      .logout-btn {
          padding: 10px !important;
          font-size: 14px !important;
          min-height: 44px !important;
          min-width: 44px !important;
          border-radius: 8px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
      }

      .logout-btn {
          padding: 8px 12px !important;
          display: flex !important;
          align-items: center !important;
          gap: 5px !important;
      }

      /* Main Container Mobile - Enhanced */
      .main-container {
          display: flex !important;
          flex-direction: column !important;
          margin-top: 60px !important;
          min-height: calc(100vh - 60px) !important;
          width: 100% !important;
          box-sizing: border-box !important;
      }


      /* Content Mobile - Enhanced */
      .content {
          flex: 1 !important;
          padding: 15px !important;
          min-height: calc(100vh - 60px) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          box-sizing: border-box !important;
      }

      .page-header {
          margin-bottom: 20px !important;
          text-align: center !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 5px !important;
      }

      .page-title {
          font-size: 1.5rem !important;
          margin-bottom: 5px !important;
          line-height: 1.2 !important;
      }

      .page-subtitle {
          font-size: 0.9rem !important;
          line-height: 1.3 !important;
      }

      /* Dashboard Mobile - Enhanced */
      .dashboard-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
      }

      .map-container,
      .alerts-panel {
          padding: 20px 15px !important;
          border-radius: 12px !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          box-sizing: border-box !important;
      }

      #map {
          height: 250px !important;
          border-radius: 8px !important;
          width: 100% !important;
      }

      /* Status Indicators Mobile - Enhanced Grid */
      .status-indicators {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 15px !important;
          margin-bottom: 20px !important;
          width: 100% !important;
      }

      .status-indicator {
          padding: 15px !important;
          font-size: 0.9rem !important;
          border-radius: 12px !important;
          text-align: left !important;
          min-height: 60px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important;
          flex-direction: row !important;
          gap: 12px !important;
          width: 100% !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
          transition: all 0.3s ease !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          box-sizing: border-box !important;
      }

      .status-indicator:hover {
          transform: translateY(-2px) !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      }

      /* Charts Mobile - Enhanced */
      .charts-section {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          margin-top: 20px !important;
          width: 100% !important;
      }

      .chart-container {
          padding: 20px 15px !important;
          border-radius: 12px !important;
          width: 100% !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
          margin-bottom: 0 !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          box-sizing: border-box !important;
      }

      .chart-container h3 {
          font-size: 1.2rem !important;
          margin-bottom: 15px !important;
          text-align: center !important;
          font-weight: 600 !important;
          color: var(--text-dark) !important;
      }

      .status-dot {
          width: 12px !important;
          height: 12px !important;
          border-radius: 50% !important;
          flex-shrink: 0 !important;
      }

      .status-indicator span {
          font-weight: 600 !important;
          font-size: 1rem !important;
          color: var(--text-light) !important;
      }

      .light-mode .status-indicator span {
          color: var(--text-dark) !important;
      }

      .chart-container canvas {
          max-width: 100% !important;
          height: auto !important;
          min-height: 200px !important;
      }

      /* Alerts Mobile - Enhanced */
      .alerts-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
      }

      .alert-card {
          padding: 20px 15px !important;
          border-radius: 12px !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          transition: all 0.3s ease !important;
          width: 100% !important;
          box-sizing: border-box !important;
      }

      .alert-card:hover {
          transform: translateY(-2px) !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      }

      .alert-header {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
      }

      .alert-header h3 {
          font-size: 1.1rem !important;
          margin: 0 !important;
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          color: var(--text-dark) !important;
          font-weight: 600 !important;
      }

      .alert-btn {
          padding: 10px 15px !important;
          font-size: 14px !important;
          min-height: 44px !important;
          border-radius: 8px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
      }

      /* Analytics Mobile - Enhanced */
      .analytics-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
      }

      .metric-card {
          padding: 20px 15px !important;
          border-radius: 12px !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 10px !important;
          transition: all 0.3s ease !important;
          box-sizing: border-box !important;
      }

      .metric-value {
          font-size: 2rem !important;
          color: #00FF88 !important;
          font-weight: 700 !important;
      }

      /* Settings Mobile - Enhanced */
      .settings-section {
          padding: 20px 15px !important;
          margin-bottom: 15px !important;
          border-radius: 12px !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          box-sizing: border-box !important;
      }

      .setting-item {
          padding: 15px 0 !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: stretch !important;
          gap: 8px !important;
      }

      .toggle-switch {
          align-self: flex-end !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
      }

      /* Camera Controls Mobile - Enhanced */
      .camera-controls {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          width: 100% !important;
      }

      .camera-controls-row {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          width: 100% !important;
      }

      .camera-btn {
          flex: 1 !important;
          min-width: auto !important;
          width: 100% !important;
          padding: 15px 20px !important;
          font-size: 14px !important;
          min-height: 48px !important;
          border-radius: 8px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          font-weight: 600 !important;
      }

      /* Map Controls Mobile - Enhanced */
      .map-controls {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 10px !important;
          justify-content: center !important;
      }

      .map-controls button {
          flex: 1 !important;
          min-width: 100px !important;
          padding: 12px 15px !important;
          font-size: 14px !important;
          min-height: 48px !important;
          border-radius: 8px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          font-weight: 600 !important;
      }

      /* Modal Mobile - Enhanced */
      .modal {
          margin: 15px !important;
          padding: 25px 20px !important;
          max-width: calc(100vw - 30px) !important;
          max-height: calc(100vh - 30px) !important;
          border-radius: 16px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          overflow: hidden !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          box-sizing: border-box !important;
      }

      .modal-header {
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          flex-shrink: 0 !important;
          padding-bottom: 15px !important;
          border-bottom: 1px solid var(--border-light) !important;
      }

      .modal-title {
          font-size: 1.3rem !important;
          margin: 0 !important;
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
          color: var(--text-dark) !important;
          font-weight: 600 !important;
      }

      .modal-close {
          align-self: flex-end !important;
          margin-top: -10px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 32px !important;
          height: 32px !important;
          border-radius: 50% !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
      }

      .modal-body {
          flex: 1 !important;
          overflow-y: auto !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          padding: 0 5px !important;
      }

      .modal-footer {
          flex-shrink: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          padding-top: 15px !important;
          border-top: 1px solid var(--border-light) !important;
      }

      .modal-actions {
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
      }

      .modal-btn {
          flex: 1 !important;
          min-height: 50px !important;
          font-size: 16px !important;
          padding: 15px 20px !important;
          border-radius: 10px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          font-weight: 600 !important;
      }

      /* Form Elements Mobile - Enhanced */
      .form-group {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          margin-bottom: 20px !important;
      }

      .form-group input,
      .form-group select {
          width: 100% !important;
          padding: 15px 18px !important;
          font-size: 16px !important;
          border-radius: 10px !important;
          min-height: 50px !important;
          border: 1px solid var(--border-light) !important;
          background: var(--light-bg) !important;
          color: var(--text-dark) !important;
          transition: all 0.3s ease !important;
          box-sizing: border-box !important;
      }

      .form-group label {
          font-weight: 600 !important;
          color: var(--text-dark) !important;
          font-size: 0.95rem !important;
          margin-bottom: 5px !important;
      }

      /* Heatmap Summary Mobile - Enhanced */
      .heatmap-summary-section {
          padding: 20px !important;
          border-radius: 12px !important;
          background: var(--light-bg) !important;
          border: 1px solid var(--border-light) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
      }

      .summary-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
          width: 100% !important;
      }

      .summary-item {
          padding: 12px !important;
          text-align: center !important;
          border-radius: 10px !important;
          background: rgba(0, 255, 136, 0.05) !important;
          border: 1px solid rgba(0, 255, 136, 0.1) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
          transition: all 0.3s ease !important;
      }

      .heatmap-controls {
          display: flex !important;
          flex-direction: column !important;
          gap: 10px !important;
          width: 100% !important;
      }

      .heatmap-controls button {
          flex: 1 !important;
          width: 100% !important;
          min-height: 48px !important;
          border-radius: 10px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          font-weight: 600 !important;
      }

      /* Google Maps Style Controls Mobile - Enhanced */
      .map-overlay-controls {
          top: 5px !important;
          left: 5px !important;
          right: 5px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
      }

      .map-search-box {
          position: relative !important;
          display: flex !important;
          align-items: center !important;
          width: 100% !important;
      }

      .map-search-box input {
          width: 100% !important;
          max-width: calc(100% - 50px) !important;
          font-size: 16px !important;
          padding: 12px 40px 12px 15px !important;
          border-radius: 10px !important;
          border: 1px solid var(--border-light) !important;
          background: var(--light-bg) !important;
          color: var(--text-dark) !important;
          transition: all 0.3s ease !important;
          min-height: 48px !important;
          box-sizing: border-box !important;
      }

      .map-search-box button {
          position: absolute !important;
          right: 8px !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          background: #00FF88 !important;
          border: none !important;
          border-radius: 8px !important;
          width: 40px !important;
          height: 40px !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          transition: all 0.3s ease !important;
          font-size: 16px !important;
      }

      .zoom-controls,
      .layer-controls,
      .location-controls,
      .fullscreen-controls,
      .streetview-controls {
          right: 8px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
      }

      .zoom-controls button,
      .layer-controls button,
      .location-controls button,
      .fullscreen-controls button,
      .streetview-controls button {
          width: 40px !important;
          height: 40px !important;
          font-size: 16px !important;
          border-radius: 8px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-weight: 600 !important;
      }

      .traffic-controls {
          left: 8px !important;
          bottom: 8px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
      }

      .traffic-btn,
      .transit-btn {
          padding: 10px 15px !important;
          font-size: 14px !important;
          min-height: 40px !important;
          border-radius: 8px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          font-weight: 600 !important;
      }

      /* Touch-friendly improvements - Enhanced */
      button,
      .nav-item,
      .alert-btn,
      .camera-btn {
          min-height: 48px !important;
          min-width: 48px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          border-radius: 10px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          font-weight: 600 !important;
      }

      .nav-item {
          padding: 12px 18px !important;
          text-decoration: none !important;
          color: inherit !important;
          font-weight: 600 !important;
      }

      /* Prevent horizontal scroll */
      body {
          overflow-x: hidden !important;
      }

      /* Quick Actions Mobile - Enhanced */
      .quick-actions-content {
          padding: 15px 20px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
          width: 100% !important;
      }

      .panic-dispatch-btn {
          width: 60px !important;
          height: 60px !important;
          font-size: 24px !important;
          border-radius: 50% !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-weight: 600 !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
      }

      .mass-notification-btn {
          padding: 15px 20px !important;
          font-size: 16px !important;
          min-height: 50px !important;
          border-radius: 10px !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          font-weight: 600 !important;
      }

      /* Risk Radar Mobile - Enhanced */
      .risk-radar {
          bottom: 20px !important;
          left: 20px !important;
          width: 60px !important;
          height: 60px !important;
          border-radius: 50% !important;
          border: none !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
          font-size: 20px !important;
          font-weight: 600 !important;
      }

      /* Footer Mobile - Enhanced */
      .footer-theme {
          padding: 40px 20px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 25px !important;
          text-align: center !important;
      }

      .footer-theme h3 {
          font-size: 1.6rem !important;
          margin: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 12px !important;
          font-weight: 600 !important;
      }

      .footer-theme .fab {
          font-size: 2rem !important;
          margin: 0 10px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          transition: all 0.3s ease !important;
      }

      .footer-theme p {
          font-size: 0.95rem !important;
          margin: 0 !important;
          line-height: 1.5 !important;
      }

      /* Social Modal Mobile Fixes */
      .social-modal {
          padding: 20px 15px !important;
          max-width: calc(100vw - 30px) !important;
      }

      .social-modal-header .modal-title {
          font-size: 1.2rem !important;
      }

      .social-account-item {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 12px !important;
          padding: 15px !important;
      }

      .social-account-item .login-btn {
          width: 100% !important;
          justify-content: center !important;
          padding: 12px !important;
          font-size: 1rem !important;
      }

      .social-account-item>div:first-child {
          width: 100% !important;
      }

      .social-account-item .feature-icon {
          width: 40px !important;
          height: 40px !important;
          font-size: 1rem !important;
      }
  }

  /* Analytics mobile/tablet sizing fixes */
  @media (max-width: 480px) {

      /* Equalize analytics charts and scan card heights on mobile */
      #analytics .chart-container canvas,
      #zoneChart,
      #hourlyChart,
      #predictionChart {
          max-width: 100% !important;
          height: auto !important;
          min-height: 200px !important;
          display: block !important;
      }

      /* MySQL Database Scan container should match chart height */
      #scanning-info-container {
          min-height: 200px !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 10px !important;
          width: 100% !important;
          box-sizing: border-box !important;
      }

      #scanning-info-container .scan-status {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          flex-wrap: wrap !important;
          text-align: center !important;
      }

      #scanning-info-container h3 {
          text-align: center !important;
          width: 100% !important;
      }

      /* Ensure zone details wrap and don't overflow on small screens */
      #zoneDistributionDetails {
          width: 100% !important;
          word-wrap: break-word !important;
      }
  }

  @media (min-width: 481px) and (max-width: 1024px) {

      /* Equalize analytics charts and scan card heights on tablets */
      #analytics .chart-container canvas,
      #zoneChart,
      #hourlyChart,
      #predictionChart {
          width: 100% !important;
          height: auto !important;
          min-height: 280px !important;
          display: block !important;
      }

      #scanning-info-container {
          min-height: 280px !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 12px !important;
          width: 100% !important;
          box-sizing: border-box !important;
      }

      #scanning-info-container .scan-status {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 12px !important;
          flex-wrap: wrap !important;
          text-align: center !important;
      }
  }

  /* Tablet styles (481px to 1024px) */
  @media (min-width: 481px) and (max-width: 1024px) {

      /* Test Review Information popup - Tablet optimized */
      #testReviewPopup {
          position: relative;
          top: 5px;
          right: 0;
          transform: none;
          width: 100%;
          max-width: 450px;
          padding: 20px;
          max-height: none;
          overflow-y: visible;
          box-sizing: border-box;
          margin: 0 auto 20px auto;
      }

      .login-container {
          align-items: flex-start !important;
          padding-top: 40vh !important;
      }

      #testReviewPopup .popup-row {
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
      }

      #testReviewPopup .popup-row>* {
          width: 100% !important;
      }

      /* Welcome Page Tablet */
      .welcome-panel {
          padding: 25px !important;
          max-width: 800px !important;
          margin: 20px auto !important;
      }

      .welcome-title {
          font-size: 32px !important;
      }

      .feature-grid {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 20px !important;
      }

      /* Steps Grid Tablet - Stack columns */
      .steps-grid {
          flex-direction: column !important;
          gap: 20px !important;
      }

      .steps-grid {
          gap: 25px !important;
      }

      /* Login Page Tablet */
      .login-panel {
          padding: 35px 30px !important;
          max-width: 450px !important;
      }

      .mission-title {
          font-size: 26px !important;
      }

      /* Navigation Tablet */
      .navbar {
          height: 65px !important;
          padding: 0 15px !important;
      }

      .main-container {
          grid-template-columns: 1fr !important;
      }

      .sidebar {
          position: fixed !important;
          left: -280px !important;
          top: 65px !important;
          height: calc(100vh - 65px) !important;
          width: 280px !important;
          z-index: 1000 !important;
          transition: left 0.3s ease !important;
          box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2) !important;
      }

      .sidebar.open {
          left: 0 !important;
      }

      /* Dashboard Tablet - Fixed Vertical Layout */
      .dashboard-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
      }

      .charts-section {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
      }

      .alerts-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
      }

      .analytics-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
          width: 100% !important;
      }

      #map {
          height: 350px !important;
      }

      .status-indicators {
          display: flex !important;
          flex-direction: column !important;
          gap: 15px !important;
          width: 100% !important;
      }

      .modal {
          margin: 20px !important;
          max-width: calc(100vw - 40px) !important;
      }

      .summary-grid {
          grid-template-columns: repeat(2, 1fr) !important;
      }
  }

  /* Dark mode specific mobile adjustments */
  @media (max-width: 480px) {
      .dark-mode .sidebar {
          background: var(--dark-bg) !important;
          border-right: 1px solid var(--border-dark) !important;
      }

      .dark-mode .modal {
          background: var(--dark-secondary) !important;
          border: 1px solid var(--border-dark) !important;
      }

      .dark-mode .form-group input {
          background: var(--dark-tertiary) !important;
          border: 1px solid var(--border-dark) !important;
          color: var(--text-light) !important;
      }
  }

  /* Touch and gesture improvements */
  @media (hover: none) and (pointer: coarse) {
      .nav-item:hover {
          background: rgba(37, 99, 235, 0.2) !important;
      }

      .alert-btn:hover,
      .camera-btn:hover,
      .modal-btn:hover {
          transform: none !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
      }

      .feature-item:hover {
          transform: none !important;
          background: rgba(0, 255, 136, 0.1) !important;
      }
  }

  /* iOS Safari specific fixes */
  @supports (-webkit-touch-callout: none) {

      .login-card,
      .welcome-panel,
      .modal {
          -webkit-overflow-scrolling: touch !important;
      }

      .form-group input {
          appearance: none !important;
          -webkit-appearance: none !important;
          border-radius: 8px !important;
      }

      .login-btn,
      .modal-btn,
      .camera-btn {
          appearance: none !important;
          -webkit-appearance: none !important;
          border-radius: 8px !important;
      }
  }

  /* Android Chrome specific fixes */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
      .form-group input:focus {
          outline: none !important;
          border-color: var(--primary-color) !important;
          box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
      }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {

      .login-card,
      .welcome-panel,
      .modal,
      .alert-card {
          border-width: 2px !important;
      }

      .status-indicator,
      .metric-card {
          border-width: 2px !important;
      }

      button {
          border-width: 2px !important;
      }
  }

  /* Reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
      * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
      }

      .welcome-page,
      .login-page {
          animation: none !important;
      }
  }

  /* PWA and fullscreen support */
  @media (display-mode: standalone) {
      .navbar {
          padding-top: env(safe-area-inset-top) !important;
          height: calc(60px + env(safe-area-inset-top)) !important;
      }

      .main-container {
          margin-top: calc(60px + env(safe-area-inset-top)) !important;
      }

      .sidebar {
          top: calc(60px + env(safe-area-inset-top)) !important;
          height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
      }
  }

  /* Notch and safe area support */
  @supports (padding: max(0px)) {
      .navbar {
          padding-left: max(10px, env(safe-area-inset-left)) !important;
          padding-right: max(10px, env(safe-area-inset-right)) !important;
      }

      .content {
          padding-left: max(10px, env(safe-area-inset-left)) !important;
          padding-right: max(10px, env(safe-area-inset-right)) !important;
          padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
      }
  }

  /* Wow.css - Add some wow factor to the UI */

  /* Smooth transitions for all elements */
  * {
      transition: all 0.3s ease-in-out;
  }

  /* Pulse animation for live indicators */
  @keyframes pulse-live {
      0% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
      }

      70% {
          transform: scale(1.05);
          box-shadow: 0 0 10px 20px rgba(255, 82, 82, 0);
      }

      100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
      }
  }

  .status-critical .status-dot {
      animation: pulse-live 2s infinite;
  }

  /* Glowing effect for buttons on hover */
  .login-btn:hover,
  .camera-btn:hover,
  .alert-btn:hover {
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  }

  /* 3D effect for cards on hover */
  .card:hover,
  .panel-box:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }

  /* Gradient animation for the navbar */
  .navbar {
      background: linear-gradient(90deg, #2c3e50, #3498db, #2c3e50);
      background-size: 200% 200%;
      animation: gradient-animation 10s ease infinite;
  }

  @keyframes gradient-animation {
      0% {
          background-position: 0% 50%;
      }

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

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

  /* =============== RISK FORECAST PANEL STYLES =============== */

  /* Light Mode Styles (Default) */
  .risk-forecast-panel {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      color: #1f2937;
  }

  .risk-header {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 12px 12px 0 0;
  }

  .risk-header h4 {
      margin: 0;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      gap: 8px;
      color: white;
  }

  .close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease;
  }

  .close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
  }

  .risk-content {
      padding: 15px;
      max-height: 400px;
      overflow-y: auto;
      color: #1f2937;
  }

  .loading-section,
  .error-section {
      text-align: center;
      padding: 30px 15px;
      color: #1f2937;
  }

  .loading-section i {
      font-size: 1.5rem;
      color: #3b82f6;
      margin-bottom: 10px;
      animation: spin 1s linear infinite;
  }

  .error-section i {
      font-size: 1.5rem;
      color: #ef4444;
      margin-bottom: 10px;
  }

  .retry-btn {
      background: #3b82f6;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: background 0.3s ease;
  }

  .retry-btn:hover {
      background: #2563eb;
  }

  .forecast-section,
  .incidents-section,
  .stats-section {
      margin-bottom: 20px;
  }

  .forecast-section h5,
  .incidents-section h5,
  .stats-section h5 {
      margin: 0 0 10px 0;
      font-size: 0.95rem;
      font-weight: 600;
      color: #1f2937;
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 5px;
  }

  .risk-bars {
      display: flex;
      gap: 5px;
      height: 40px;
      align-items: end;
      background: #f9fafb;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #e5e7eb;
  }

  .risk-bar {
      width: 20px;
      border-radius: 2px;
      transition: all 0.3s ease;
      cursor: pointer;
      min-height: 10px;
  }

  .risk-bar:hover {
      transform: scaleY(1.1);
      opacity: 0.8;
  }

  .incidents-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .incident-item {
      padding: 10px;
      border-radius: 6px;
      border-left: 3px solid;
      font-size: 0.9rem;
      line-height: 1.4;
  }

  .incident-item.critical {
      background: rgba(239, 68, 68, 0.1);
      border-left-color: #ef4444;
      color: #991b1b;
  }

  .incident-item.warning {
      background: rgba(245, 158, 11, 0.1);
      border-left-color: #f59e0b;
      color: #92400e;
  }

  .incident-item.info {
      background: rgba(59, 130, 246, 0.1);
      border-left-color: #3b82f6;
      color: #1e40af;
  }

  .no-predictions {
      text-align: center;
      padding: 20px;
      color: #059669;
      font-style: italic;
      background: rgba(16, 185, 129, 0.1);
      border-radius: 6px;
      border: 1px solid rgba(16, 185, 129, 0.2);
  }

  .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
  }

  .stat-item {
      text-align: center;
      padding: 12px;
      background: #f9fafb;
      border-radius: 6px;
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;
  }

  .stat-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .stat-value {
      display: block;
      font-size: 1.5rem;
      font-weight: 700;
      color: #3b82f6;
      margin-bottom: 4px;
  }

  .stat-label {
      font-size: 0.8rem;
      color: #6b7280;
      opacity: 0.8;
  }

  .deploy-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s ease;
      margin-top: 15px;
  }

  .deploy-btn:hover {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  /* Dark Mode Styles */
  body.dark-mode .risk-forecast-panel {
      background: #1f2937;
      border: 1px solid #374151;
      color: #f9fafb;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  body.dark-mode .risk-header {
      background: linear-gradient(135deg, #059669, #047857);
  }

  body.dark-mode .risk-content {
      color: #f9fafb;
  }

  body.dark-mode .loading-section,
  body.dark-mode .error-section {
      color: #f9fafb;
  }

  body.dark-mode .loading-section i {
      color: #60a5fa;
  }

  body.dark-mode .error-section i {
      color: #f87171;
  }

  body.dark-mode .retry-btn {
      background: #60a5fa;
  }

  body.dark-mode .retry-btn:hover {
      background: #3b82f6;
  }

  body.dark-mode .forecast-section h5,
  body.dark-mode .incidents-section h5,
  body.dark-mode .stats-section h5 {
      color: #f9fafb;
      border-bottom-color: #4b5563;
  }

  body.dark-mode .risk-bars {
      background: #374151;
      border-color: #4b5563;
  }

  body.dark-mode .incident-item.critical {
      background: rgba(239, 68, 68, 0.2);
      color: #fca5a5;
  }

  body.dark-mode .incident-item.warning {
      background: rgba(245, 158, 11, 0.2);
      color: #fcd34d;
  }

  body.dark-mode .incident-item.info {
      background: rgba(59, 130, 246, 0.2);
      color: #93c5fd;
  }

  body.dark-mode .no-predictions {
      color: #34d399;
      background: rgba(16, 185, 129, 0.2);
      border-color: rgba(16, 185, 129, 0.3);
  }

  body.dark-mode .stat-item {
      background: #374151;
      border-color: #4b5563;
  }

  body.dark-mode .stat-value {
      color: #60a5fa;
  }

  body.dark-mode .stat-label {
      color: #9ca3af;
  }

  /* Enhanced visibility for risk levels */
  .risk-level-low {
      color: #10b981;
  }

  .risk-level-medium {
      color: #f59e0b;
  }

  .risk-level-high {
      color: #ef4444;
  }

  .risk-level-critical {
      color: #dc2626;
      animation: pulse 2s infinite;
  }

  body.dark-mode .risk-level-low {
      color: #34d399;
      text-shadow: 0 0 4px rgba(52, 211, 153, 0.3);
  }

  body.dark-mode .risk-level-medium {
      color: #fbbf24;
      text-shadow: 0 0 4px rgba(251, 191, 36, 0.3);
  }

  body.dark-mode .risk-level-high {
      color: #f87171;
      text-shadow: 0 0 4px rgba(248, 113, 113, 0.3);
  }

  body.dark-mode .risk-level-critical {
      color: #ef4444;
      text-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
  }

  /* Scrollbar styling */
  .risk-content::-webkit-scrollbar {
      width: 6px;
  }

  .risk-content::-webkit-scrollbar-track {
      background: #f3f4f6;
      border-radius: 3px;
  }

  .risk-content::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 3px;
      transition: background 0.3s ease;
  }

  .risk-content::-webkit-scrollbar-thumb:hover {
      background: #3b82f6;
  }

  body.dark-mode .risk-content::-webkit-scrollbar-track {
      background: #374151;
  }

  body.dark-mode .risk-content::-webkit-scrollbar-thumb {
      background: #4b5563;
  }

  body.dark-mode .risk-content::-webkit-scrollbar-thumb:hover {
      background: #60a5fa;
  }

  /* Animations */
  @keyframes spin {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  @keyframes pulse {

      0%,
      100% {
          opacity: 1;
      }

      50% {
          opacity: 0.7;
      }
  }

  @keyframes slideUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  /* Responsive design */
  @media (max-width: 768px) {
      .risk-forecast-panel {
          left: 10px !important;
          width: calc(100vw - 20px) !important;
          max-width: 350px !important;
          bottom: 70px !important;
      }

      .stats-grid {
          grid-template-columns: 1fr;
      }

      .risk-bars {
          padding: 8px;
      }

      .risk-bar {
          width: 15px;
      }

      .risk-header h4 {
          font-size: 1rem;
      }

      .stat-value {
          font-size: 1.3rem;
      }
  }


  /* Welcome Page Styles */
  .welcome-page {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: var(--dark-bg);
      z-index: 10001;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .welcome-page.active {
      opacity: 1;
      visibility: visible;
  }

  .welcome-container {
      width: 100%;
      max-width: 1200px;
      height: 100vh;
      padding: 20px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .welcome-container::-webkit-scrollbar {
      width: 8px;
  }

  .welcome-container::-webkit-scrollbar-track {
      background: rgba(0, 255, 136, 0.05);
      border-radius: 4px;
  }

  .welcome-container::-webkit-scrollbar-thumb {
      background: rgba(0, 255, 136, 0.2);
      border-radius: 4px;
  }

  .welcome-container::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 255, 136, 0.3);
  }

  .welcome-panel {
      background: rgba(10, 10, 10, 0.9);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(0, 255, 136, 0.3);
      border-radius: 20px;
      padding: 30px;
      animation: panelGlow 3s infinite alternate;
      position: relative;
      z-index: 2;
      box-shadow: 0 0 40px rgba(0, 255, 136, 0.15);
      width: 90%;
      max-width: 900px;
      margin: auto;
      height: auto;
      min-height: 200px;
      max-height: calc(100vh - 40px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .welcome-content {
      flex: 1;
      overflow-y: auto;
      padding-right: 10px;
      margin-right: -10px;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 255, 136, 0.2) transparent;
  }

  .welcome-content::-webkit-scrollbar {
      width: 6px;
  }

  .welcome-content::-webkit-scrollbar-track {
      background: transparent;
  }

  .welcome-content::-webkit-scrollbar-thumb {
      background: rgba(0, 255, 136, 0.2);
      border-radius: 3px;
  }

  .welcome-panel::-webkit-scrollbar {
      width: 8px;
  }

  .welcome-panel::-webkit-scrollbar-track {
      background: rgba(0, 255, 136, 0.05);
      border-radius: 4px;
  }

  .welcome-panel::-webkit-scrollbar-thumb {
      background: rgba(0, 255, 136, 0.2);
      border-radius: 4px;
  }

  .welcome-panel::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 255, 136, 0.3);
  }

  .welcome-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #00FF88, transparent);
  }

  .welcome-title {
      color: #00FF88;
      font-size: 36px;
      text-align: center;
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(0, 255, 136, 0.2);
      position: relative;
  }

  .welcome-title .subtitle {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      text-transform: none;
      font-weight: 400;
      margin-top: 10px;
      letter-spacing: 1px;
  }

  .pulse-icon {
      animation: iconPulse 2s infinite;
  }

  .rotating-icon {
      animation: iconRotate 4s linear infinite;
  }

  @keyframes iconPulse {

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

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

  @keyframes iconRotate {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  .system-status-banner {
      margin: 20px 0;
      padding: 15px;
      background: rgba(0, 255, 136, 0.05);
      border-radius: 12px;
      border: 1px solid rgba(0, 255, 136, 0.2);
  }

  .status-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
  }

  .status-divider {
      width: 1px;
      height: 30px;
      background: rgba(0, 255, 136, 0.2);
  }

  .status-icon {
      font-size: 1.2rem;
      color: #00FF88;
      margin-right: 10px;
      animation: iconFloat 2s ease-in-out infinite;
  }

  .status-dot {
      font-size: 8px;
      margin-right: 6px;
      animation: pulse 2s ease-in-out infinite;
  }

  @keyframes iconFloat {

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

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

  .status-item {
      display: flex;
      align-items: center;
      padding: 8px 15px;
      background: rgba(0, 255, 136, 0.03);
      border-radius: 8px;
      transition: all 0.3s ease;
  }

  .status-label {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      margin-right: 8px;
  }

  .status-text {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
  }

  .status-item:hover {
      background: rgba(0, 255, 136, 0.08);
      transform: translateY(-2px);
  }

  .status-text {
      font-weight: 600;
  }

  .status-text.online {
      color: #00FF88;
  }

  .status-text.connected {
      color: #00FF88;
  }

  .feature-section {
      margin-bottom: 30px;
      padding: 25px;
      background: rgba(0, 255, 136, 0.05);
      border-radius: 15px;
      border: 1px solid rgba(0, 255, 136, 0.1);
      transition: transform 0.3s ease;
  }

  .feature-section:hover {
      transform: translateY(-5px);
      background: rgba(0, 255, 136, 0.07);
  }

  .feature-section h2 {
      color: #00FF88;
      font-size: 20px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 20px;
  }

  @media (max-width: 900px) {
      .feature-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 600px) {
      .feature-grid {
          grid-template-columns: 1fr;
      }
  }

  .feature-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px;
      background: rgba(0, 255, 136, 0.05);
      border-radius: 12px;
      border: 1px solid rgba(0, 255, 136, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
  }

  .feature-icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 255, 136, 0.1);
      border-radius: 15px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .icon-animation {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .scan-line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: rgba(0, 255, 136, 0.5);
      top: 0;
      animation: scanAnimation 2s linear infinite;
  }

  .heatmap-pulse {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 15px;
      background: radial-gradient(circle, rgba(255, 59, 59, 0.2), rgba(0, 255, 136, 0.2));
      animation: pulseAnimation 2s infinite;
  }

  .route-path {
      position: absolute;
      width: 0;
      height: 2px;
      background: #00FF88;
      bottom: 15px;
      left: 10px;
      animation: pathAnimation 3s infinite;
  }

  .alert-ring {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px solid rgba(0, 255, 136, 0.3);
      border-radius: 15px;
      animation: ringAnimation 1.5s infinite;
  }

  .chart-line {
      position: absolute;
      width: 0;
      height: 2px;
      background: #00FF88;
      bottom: 20px;
      left: 10px;
      animation: chartAnimation 3s infinite;
      transform-origin: left;
  }

  .message-dots {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: messageAnimation 2s infinite;
  }

  @keyframes scanAnimation {
      0% {
          top: 0;
          opacity: 1;
      }

      100% {
          top: 100%;
          opacity: 0;
      }
  }

  @keyframes pulseAnimation {
      0% {
          transform: scale(0.8);
          opacity: 0.5;
      }

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

      100% {
          transform: scale(0.8);
          opacity: 0.5;
      }
  }

  @keyframes pathAnimation {
      0% {
          width: 0;
          opacity: 1;
      }

      50% {
          width: 80%;
          opacity: 1;
      }

      100% {
          width: 0;
          opacity: 0;
      }
  }

  @keyframes ringAnimation {
      0% {
          transform: scale(0.8);
          opacity: 1;
      }

      100% {
          transform: scale(1.5);
          opacity: 0;
      }
  }

  @keyframes chartAnimation {
      0% {
          width: 0;
          transform: skewY(0deg);
      }

      50% {
          width: 80%;
          transform: skewY(-10deg);
      }

      100% {
          width: 0;
          transform: skewY(0deg);
      }
  }

  @keyframes messageAnimation {

      0%,
      100% {
          box-shadow:
              -15px 0 0 -3px rgba(0, 255, 136, 0.8),
              0 0 0 -3px rgba(0, 255, 136, 0.8),
              15px 0 0 -3px rgba(0, 255, 136, 0.8);
      }

      50% {
          box-shadow:
              -15px 0 0 0 rgba(0, 255, 136, 0.8),
              0 0 0 0 rgba(0, 255, 136, 0.8),
              15px 0 0 -3px rgba(0, 255, 136, 0.8);
      }
  }

  .camera-monitoring {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .scanning-line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: rgba(0, 255, 136, 0.5);
      top: 0;
      animation: scanLine 2s linear infinite;
  }

  .radar-rings {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px solid rgba(0, 255, 136, 0.3);
      border-radius: 15px;
      animation: radarPulse 2s infinite;
  }

  @keyframes scanLine {
      0% {
          top: 0;
      }

      100% {
          top: 100%;
      }
  }

  @keyframes radarPulse {
      0% {
          transform: scale(0.8);
          opacity: 1;
      }

      100% {
          transform: scale(1.2);
          opacity: 0;
      }
  }

  .icon-animation {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .signal-waves {
      position: absolute;
      border: 2px solid rgba(0, 255, 136, 0.3);
      width: 100%;
      height: 100%;
      border-radius: 15px;
      animation: signalWave 2s infinite;
      opacity: 0;
  }

  .feature-item:hover .signal-waves {
      opacity: 1;
  }

  @keyframes signalWave {
      0% {
          transform: scale(0.8);
          opacity: 1;
      }

      100% {
          transform: scale(1.5);
          opacity: 0;
      }
  }

  .feature-details {
      flex: 1;
  }

  .feature-title {
      display: block;
      color: #00FF88;
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 5px;
  }

  .feature-desc {
      display: block;
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
  }

  .feature-item:hover {
      transform: translateY(-3px);
      background: rgba(0, 255, 136, 0.1);
      border-color: rgba(0, 255, 136, 0.3);
      box-shadow: 0 5px 15px rgba(0, 255, 136, 0.2);
  }

  .feature-item:hover .feature-icon i {
      animation: iconSpin 0.8s ease-in-out;
  }

  @keyframes iconSpin {
      0% {
          transform: rotate(0deg) scale(1);
      }

      50% {
          transform: rotate(180deg) scale(1.2);
      }

      100% {
          transform: rotate(360deg) scale(1);
      }
  }

  .feature-item:hover .feature-icon {
      background: rgba(0, 255, 136, 0.2);
      transform: scale(1.1);
  }

  .feature-item:hover {
      transform: translateY(-2px);
      background: rgba(0, 255, 136, 0.1);
  }

  .feature-item i {
      color: #00FF88;
      font-size: 20px;
  }

  .feature-item span {
      color: rgba(255, 255, 255, 0.9);
  }

  .steps-grid {
      display: flex;
      gap: 30px;
      margin-top: 20px;
      width: 100%;
  }

  .steps-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .steps-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .step-content {
      position: relative;
      padding-right: 40px;
  }

  .step-content h3 {
      color: #00FF88;
      font-size: 18px;
      margin-bottom: 8px;
  }

  .step-item {
      text-align: left;
      padding: 20px;
      background: rgba(0, 255, 136, 0.05);
      border-radius: 10px;
      border: 1px solid rgba(0, 255, 136, 0.1);
      position: relative;
      transition: all 0.3s ease;
      margin-bottom: 15px;
      overflow: hidden;
  }

  .step-item:last-child {
      margin-bottom: 0;
  }

  .steps-column {
      display: flex;
      flex-direction: column;
      gap: 15px;
  }

  .step-item:hover {
      transform: translateY(-2px);
      background: rgba(0, 255, 136, 0.08);
      border-color: rgba(0, 255, 136, 0.2);
  }

  .step-item .feature-icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
  }

  .step-item:hover .feature-icon {
      transform: translateY(-50%) scale(1.1);
  }

  .step-item:hover .icon-animation i {
      animation: iconSpin 0.8s ease-in-out;
  }

  .step-item .icon-animation i {
      font-size: 20px;
      color: #00FF88;
  }

  /* Monitoring Animation */
  .monitor-pulse {
      position: absolute;
      width: 100%;
      height: 2px;
      background: rgba(0, 255, 136, 0.5);
      opacity: 0;
  }

  .monitor-icon:hover .monitor-pulse {
      animation: monitorScan 2s infinite;
  }

  .monitor-icon:hover .step-icon {
      animation: chartRise 2s infinite;
  }

  /* Alert Animation */
  .alert-waves {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px solid rgba(0, 255, 136, 0.3);
      border-radius: 50%;
      opacity: 0;
  }

  .alert-icon:hover .alert-waves {
      animation: alertWave 1.5s infinite;
  }

  .alert-icon:hover .step-icon {
      animation: bellRing 1s infinite;
  }

  /* Emergency Response Animation */
  .emergency-lights {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
  }

  .emergency-icon:hover .emergency-lights {
      animation: emergencyFlash 1s infinite;
  }

  .emergency-icon:hover .step-icon {
      animation: ambulanceDrive 2s infinite;
  }



  .step-item:hover .step-icon {
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
  }

  @keyframes stepIconAnimation {
      0% {
          transform: translateY(-50%) scale(1);
      }

      100% {
          transform: translateY(-50%) scale(1.2);
      }
  }

  .step-item:hover .step-icon {
      transform: translateY(-50%) scale(1.2);
      opacity: 1;
  }

  .step-item {
      text-align: center;
      padding: 20px;
      background: rgba(0, 255, 136, 0.05);
      border-radius: 10px;
      border: 1px solid rgba(0, 255, 136, 0.1);
  }

  .step-number {
      width: 28px;
      height: 28px;
      background: rgba(0, 255, 136, 0.1);
      color: #00FF88;
      border: 1px solid rgba(0, 255, 136, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
  }

  .step-item p {
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.5;
  }

  .start-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 300px;
      margin: 30px auto 0;
      padding: 15px 30px;
      background: linear-gradient(45deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.4));
      border: 1px solid rgba(0, 255, 136, 0.3);
      border-radius: 8px;
      color: #00FF88;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .start-btn:hover {
      background: linear-gradient(45deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 136, 0.5));
      transform: translateY(-2px);
  }

  .start-btn::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(0, 255, 136, 0.2), transparent);
      transform: rotate(45deg);
      animation: shine 2s infinite;
  }

  /* Futuristic Login Theme */
  .login-page {
      min-height: 100vh;
      width: 100%;
      background: #0A0A0A;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 9999;
      transition: opacity 0.5s ease-in-out;
  }

  .login-background {
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, rgba(0, 255, 136, 0.1), rgba(255, 59, 59, 0.1));
  }

  .radar-grid {
      position: absolute;
      inset: 0;
      background:
          linear-gradient(90deg, rgba(0, 255, 136, 0.1) 1px, transparent 1px),
          linear-gradient(0deg, rgba(0, 255, 136, 0.1) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: gridRotate 20s linear infinite;
  }

  .heatmap-zone {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      filter: blur(50px);
      opacity: 0.5;
      animation: pulse 3s infinite;
  }

  .heatmap-zone.danger {
      background: rgba(255, 59, 59, 0.3);
  }

  .heatmap-zone.safe {
      background: rgba(0, 255, 136, 0.3);
  }

  .heatmap-zone.warning {
      background: rgba(255, 165, 0, 0.3);
  }

  .login-container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 500px;
      padding: 20px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }

  .login-panel {
      background: rgba(10, 10, 10, 0.8);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 255, 136, 0.2);
      border-radius: 15px;
      padding: 40px;
      width: 100%;
      max-width: 460px;
      box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
      animation: panelGlow 3s infinite alternate;
      margin: 20px auto;
      position: relative;
      z-index: 2;
      transform: translateY(0);
      transition: transform 0.3s ease-in-out;
  }

  .login-panel:hover {
      transform: translateY(-5px);
  }

  .mission-title {
      color: #00FF88;
      font-size: 28px;
      text-align: center;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  }

  .mission-subtitle {
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      font-size: 14px;
      margin-bottom: 30px;
      animation: fade-in-up 1s ease-out 0.5s both;
  }

  .input-wrapper {
      position: relative;
      margin-bottom: 20px;
  }

  .input-wrapper i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #00FF88;
  }

  .input-wrapper input {
      width: 100%;
      background: rgba(0, 255, 136, 0.05);
      border: 1px solid rgba(0, 255, 136, 0.2);
      border-radius: 8px;
      padding: 12px 15px 12px 45px;
      color: #fff;
      font-size: 16px;
      transition: all 0.3s ease;
  }

  .input-wrapper input:focus {
      background: rgba(0, 255, 136, 0.1);
      border-color: #00FF88;
      box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
  }

  .input-line {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: #00FF88;
      transition: width 0.3s ease;
  }

  .input-wrapper input:focus~.input-line {
      width: 100%;
  }

  .login-btn {
      width: 100%;
      background: linear-gradient(45deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.4));
      border: 1px solid rgba(0, 255, 136, 0.3);
      border-radius: 8px;
      padding: 12px;
      color: #00FF88;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
  }

  .login-btn:hover {
      background: linear-gradient(45deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 136, 0.5));
      box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
  }

  .login-btn::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(0, 255, 136, 0.2), transparent);
      transform: rotate(45deg);
      animation: shine 2s infinite;
  }

  .login-status {
      text-align: center;
      margin: 15px 0;
      padding: 10px;
      border-radius: 6px;
      font-weight: 500;
      display: none;
  }

  .login-status.success {
      background: rgba(0, 255, 136, 0.2);
      color: #00FF88;
      border: 1px solid rgba(0, 255, 136, 0.3);
  }

  .login-status.error {
      background: rgba(255, 59, 59, 0.2);
      color: #FF3B3B;
      border: 1px solid rgba(255, 59, 59, 0.3);
      animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
  }

  .radar-sweep {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #00FF88;
      display: inline-block;
      position: relative;
      margin-right: 10px;
  }

  .radar-sweep::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 50%;
      background: #00FF88;
      transform-origin: 0 0;
      animation: sweep 2s linear infinite;
  }

  @keyframes gridRotate {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  @keyframes pulse {

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

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

  @keyframes panelGlow {

      0%,
      100% {
          box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
      }

      50% {
          box-shadow: 0 0 50px rgba(0, 255, 136, 0.4);
      }
  }

  @keyframes fade-in-up {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  @keyframes shine {
      0% {
          transform: rotate(45deg) translateX(-200%);
      }

      100% {
          transform: rotate(45deg) translateX(200%);
      }
  }

  @keyframes shake {

      10%,
      90% {
          transform: translateX(-1px);
      }

      20%,
      80% {
          transform: translateX(2px);
      }

      30%,
      50%,
      70% {
          transform: translateX(-4px);
      }

      40%,
      60% {
          transform: translateX(4px);
      }
  }

  @keyframes sweep {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  .system-status {
      margin-top: 20px;
      padding: 15px;
      background: rgba(0, 255, 136, 0.05);
      border: 1px solid rgba(0, 255, 136, 0.2);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.7);
  }

  .status-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 14px;
  }

  .status-item:last-child {
      margin-bottom: 0;
  }

  .status-item i {
      color: #00FF88;
  }

  .status-text {
      color: #00FF88;
      font-weight: 600;
  }

  .shake {
      animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
  }

  .login-btn-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
  }

  #loginLoading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
  }

  /* Google Maps Style Controls */
  .map-wrapper {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .map-overlay-controls {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      z-index: 1000;
      pointer-events: none;
  }

  .map-overlay-controls>div {
      pointer-events: auto;
  }

  .map-search-box {
      position: relative;
      margin-bottom: 10px;
  }

  .map-search-box input {
      width: 100%;
      max-width: 400px;
      padding: 12px 35px 12px 16px;
      border: none;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      font-size: 14px;
      color: #333;
  }

  .clear-search-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border: none;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      cursor: pointer;
      font-size: 14px;
      color: #666;
      display: none;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 10;
  }

  .clear-search-btn:hover {
      background: rgba(0, 0, 0, 0.2);
      color: #333;
  }

  .clear-search-btn.show {
      display: flex !important;
  }

  .search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      max-width: 400px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      max-height: 300px;
      overflow-y: auto;
      display: none;
  }

  .search-result-item {
      padding: 12px 16px;
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      color: #333;
  }

  .search-result-item:hover {
      background: rgba(37, 99, 235, 0.1);
  }

  .zoom-controls {
      position: absolute;
      right: 10px;
      top: 60px;
      display: flex;
      flex-direction: column;
  }

  .zoom-controls button {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.2s;
  }

  .zoom-controls button:first-child {
      border-radius: 8px 8px 0 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .zoom-controls button:last-child {
      border-radius: 0 0 8px 8px;
  }

  .zoom-controls button:hover {
      background: rgba(255, 255, 255, 1);
      transform: scale(1.05);
  }

  .layer-controls {
      position: absolute;
      right: 10px;
      top: 150px;
  }

  .layer-controls button {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      color: #333;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.2s;
  }

  .layer-controls button:hover {
      background: rgba(255, 255, 255, 1);
      transform: scale(1.05);
  }

  .layer-menu {
      position: absolute;
      right: 50px;
      top: 0;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      min-width: 150px;
      overflow: hidden;
  }

  .layer-option {
      padding: 12px 16px;
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      color: #333;
  }

  .layer-option:hover {
      background: rgba(37, 99, 235, 0.1);
  }

  .layer-option.active {
      background: rgba(37, 99, 235, 0.2);
      color: #2563eb;
      font-weight: 600;
  }

  .location-controls {
      position: absolute;
      right: 10px;
      top: 200px;
  }

  .fullscreen-controls {
      position: absolute;
      right: 10px;
      top: 250px;
  }

  .streetview-controls {
      position: absolute;
      right: 10px;
      top: 300px;
  }

  .location-controls button,
  .fullscreen-controls button,
  .streetview-controls button {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      color: #333;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.2s;
      margin-bottom: 5px;
  }

  .location-controls button:hover,
  .fullscreen-controls button:hover,
  .streetview-controls button:hover {
      background: rgba(255, 255, 255, 1);
      transform: scale(1.05);
  }

  .traffic-controls {
      position: absolute;
      bottom: 10px;
      left: 10px;
      display: flex;
      gap: 10px;
  }

  .traffic-btn,
  .transit-btn {
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 20px;
      cursor: pointer;
      color: #333;
      font-size: 12px;
      font-weight: 500;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.2s;
  }

  .traffic-btn:hover,
  .transit-btn:hover {
      background: rgba(255, 255, 255, 1);
      transform: translateY(-1px);
  }

  .traffic-btn.active {
      background: #ef4444;
      color: white;
  }

  .transit-btn.active {
      background: #3b82f6;
      color: white;
  }

  .hidden {
      display: none !important;
  }

  /* Responsive adjustments */
  @media screen and (max-height: 800px) {
      .welcome-panel {
          padding: 20px;
          max-height: calc(100vh - 20px);
      }

      .feature-section {
          padding: 15px;
          margin-bottom: 15px;
      }

      .welcome-title {
          font-size: 28px;
          margin-bottom: 20px;
          padding-bottom: 15px;
      }

      .feature-item {
          padding: 15px;
      }
  }

  @media (max-width: 768px) {
      .map-search-box input {
          max-width: calc(100% - 60px);
      }

      .zoom-controls,
      .layer-controls,
      .location-controls,
      .fullscreen-controls,
      .streetview-controls {
          right: 5px;
      }

      .traffic-controls {
          left: 5px;
          bottom: 5px;
      }
  }

  .smart-features-info {
      background: var(--light-bg);
      border: 1px solid var(--border-light);
      border-radius: 10px;
      padding: 15px;
      margin-top: 15px;
  }

  .smart-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-dark);
  }

  .dark-mode .smart-features-info {
      background: var(--dark-secondary);
      border-color: #4b5563;
  }

  .dark-mode .smart-features-grid {
      color: #f8fafc;
  }


  .test-review-popup {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: #2a2a2a;
      border: 1px solid #00FF88;
      padding: 20px;
      z-index: 10002;
      box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
      border-radius: 10px;
      color: #fff;
      text-align: center;
      animation: panelGlow 3s infinite alternate;
      opacity: 0;
      transform: translateY(-20px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
      visibility: hidden;
      /* Default styles for desktop */
      position: fixed;
      top: 20px;
      right: 20px;
  }

  .test-review-popup.visible {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
  }

  .test-review-popup h2 {
      margin-top: 0;
      color: #00FF88;
  }

  .test-review-popup p {
      margin-bottom: 10px;
  }

  @media (max-width: 768px) {
      .test-review-popup {
          position: relative;
          /* Changed from fixed */
          top: 0;
          right: 0;
          width: 100%;
          max-width: 100%;
          margin-bottom: 20px;
          order: -1;
          /* Place it before the login panel */
      }
  }

  /* Welcome Page Styles */
  .welcome-page {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: var(--dark-bg);
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }


  /* login Page */

  .radar-sweep {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #00FF88;
      display: inline-block;
      position: relative;
      margin-right: 10px;
  }

  .radar-sweep::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 50%;
      background: #00FF88;
      transform-origin: 0 0;
      animation: sweep 2s linear infinite;
  }

  .social-modal {
      max-width: 500px;
      width: 95%;
      border-radius: 15px;
      border: 1px solid rgba(var(--platform-color-rgb, 0, 255, 136), 0.4);
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      animation: socialModal-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 0 30px rgba(var(--platform-color-rgb, 0, 255, 136), 0.2);
  }

  .social-modal-header {
      border-bottom-color: rgba(var(--platform-color-rgb, 0, 255, 136), 0.3);
  }

  .social-modal-header .modal-title {
      color: var(--platform-color, #00FF88);
      text-shadow: 0 0 10px rgba(var(--platform-color-rgb, 0, 255, 136), 0.5);
  }

  .social-account-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 12px 15px;
      margin: 10px 0;
      background: rgba(var(--platform-color-rgb, 0, 255, 136), 0.05);
      border: 1px solid rgba(var(--platform-color-rgb, 0, 255, 136), 0.2);
      border-radius: 10px;
      animation: socialItem-enter 0.5s ease-out forwards;
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.3s ease;
  }

  .social-account-item:hover {
      background: rgba(var(--platform-color-rgb, 0, 255, 136), 0.1);
      border-color: rgba(var(--platform-color-rgb, 0, 255, 136), 0.4);
      transform: translateY(-2px) translateX(0);
  }

  .social-account-item .login-btn {
      background: rgba(var(--platform-color-rgb, 0, 255, 136), 0.2);
      color: var(--platform-color, #00FF88);
      border: 1px solid rgba(var(--platform-color-rgb, 0, 255, 136), 0.3);
  }

  .social-modal {
      max-width: 500px;
      width: 95%;
      border-radius: 15px;
      border: 1px solid rgba(var(--platform-color-rgb), 0.4);
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      animation: socialModal-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 0 30px rgba(var(--platform-color-rgb), 0.2);
  }

  .social-modal-header .modal-title {
      color: var(--platform-color);
      text-shadow: 0 0 10px rgba(var(--platform-color-rgb), 0.5);
  }

  .social-account-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 12px 15px;
      margin: 10px 0;
      background: rgba(var(--platform-color-rgb), 0.05);
      border: 1px solid rgba(var(--platform-color-rgb), 0.2);
      border-radius: 10px;
      animation: socialItem-enter 0.5s ease-out forwards;
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.3s ease;
  }

  .social-account-item:hover {
      background: rgba(var(--platform-color-rgb), 0.1);
      border-color: rgba(var(--platform-color-rgb), 0.4);
      transform: translateY(-2px) translateX(0);
  }

  .social-account-item .login-btn {
      background: rgba(var(--platform-color-rgb), 0.2);
      color: var(--platform-color);
      border: 1px solid rgba(var(--platform-color-rgb), 0.3);
  }

  .social-modal {
      max-width: 550px;
      width: 95%;
      border-radius: 15px;
      border: 1px solid rgba(0, 255, 136, 0.3);
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      animation: socialModal-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .social-modal-header {
      border-bottom: 1px solid rgba(0, 255, 136, 0.2);
  }

  .social-account-item {
      animation: socialItem-enter 0.5s ease-out forwards;
      opacity: 0;
      transform: translateX(-20px);
  }

  @keyframes socialModal-enter {
      from {
          opacity: 0;
          transform: scale(0.8) translateY(50px);
      }

      to {
          opacity: 1;
          transform: scale(1) translateY(0);
      }
  }

  @keyframes socialItem-enter {
      from {
          opacity: 0;
          transform: translateX(-20px);
      }

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

  /* Responsive adjustments for the social modal */
  @media (max-width: 600px) {
      .social-modal {
          width: 95%;
      }
  }

  .account-item {
      display: flex;
      align-items: center;
      padding: 15px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-dark);
      border-radius: 10px;
      transition: all 0.3s ease;
  }

  .account-item:hover {
      transform: translateY(-3px);
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  .account-item a {
      text-decoration: none;
      color: var(--text-light);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 12px;
  }

  @keyframes footerGlow {
      0% {
          opacity: 0.4;
          transform: scale(1);
      }

      100% {
          opacity: 0.8;
          transform: scale(1.02);
      }
  }

  @keyframes footerSlideUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

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

  @keyframes titleShimmer {

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

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

  @keyframes subtitleFade {
      0% {
          opacity: 0.7;
      }

      100% {
          opacity: 1;
      }
  }

  @keyframes socialFloat {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  @keyframes copyrightSlide {
      from {
          opacity: 0;
          transform: translateX(-30px);
      }

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

  @keyframes copyrightGlow {
      0% {
          background-position: 0% 50%;
      }

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

  @keyframes iconRotate {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  @keyframes patternMove {
      from {
          transform: translateX(0);
      }

      to {
          transform: translateX(20px);
      }
  }

  @keyframes floatingOrb1 {

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

      50% {
          transform: translate(30px, -20px) scale(1.1);
      }
  }

  @keyframes floatingOrb2 {

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

      50% {
          transform: translate(-25px, 15px) scale(0.9);
      }
  }

  /* Footer Theme Styles */
  .footer-theme {
      background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
      color: white;
  }

  body:not(.dark-mode) .footer-theme {
      background: linear-gradient(135deg, #f8fafc, #e2e8f0, #cbd5e1);
      color: #1e293b;
  }

  body:not(.dark-mode) .footer-theme .fab {
      color: #4b5563 !important;
  }

  body:not(.dark-mode) .footer-theme .fab:hover {
      color: #10b981 !important;
  }

  body:not(.dark-mode) .footer-theme p {
      color: #475569 !important;
  }

  /* Cursor Trail Styles */
  #cursorTrail {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9999;
  }

  .cursor-dot {
      position: absolute;
      width: 6px;
      height: 6px;
      background: radial-gradient(circle, rgba(16, 185, 129, 0.8) 0%, rgba(16, 185, 129, 0.4) 70%, transparent 100%);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
      transition: opacity 0.3s ease;
  }

  .dot-effects::before,
  .dot-effects::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background: #10b981;
      border-radius: 50%;
      animation: dotFloat 2s ease-in-out infinite;
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
  }

  .dot-effects::before {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
  }

  .dot-effects::after {
      top: 60%;
      right: 15%;
      animation-delay: 0.5s;
  }

  .dot-effects {
      background-image: radial-gradient(circle at 30% 40%, rgba(16, 185, 129, 0.6) 2px, transparent 2px),
          radial-gradient(circle at 70% 20%, rgba(16, 185, 129, 0.4) 3px, transparent 3px),
          radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.5) 2px, transparent 2px),
          radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.3) 4px, transparent 4px),
          radial-gradient(circle at 60% 90%, rgba(16, 185, 129, 0.6) 2px, transparent 2px);
      background-size: 100px 100px, 150px 150px, 120px 120px, 180px 180px, 90px 90px;
      animation: dotPattern 4s linear infinite;
  }

  @keyframes dotFloat {

      0%,
      100% {
          transform: translateY(0px) scale(1);
          opacity: 0.8;
      }

      50% {
          transform: translateY(-15px) scale(1.2);
          opacity: 1;
      }
  }

  @keyframes dotPattern {
      0% {
          background-position: 0% 0%,
              0% 0%,
              0% 0%,
              0% 0%,
              0% 0%;
      }

      100% {
          background-position: 100px 100px,
              -150px 150px,
              120px -120px,
              -180px -180px,
              90px 90px;
      }
  }

  .footer-dot-effects::before,
  .footer-dot-effects::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      background: #10b981;
      border-radius: 50%;
      animation: dotFloat 2s ease-in-out infinite;
      box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
  }

  .footer-dot-effects::before {
      top: 15%;
      left: 8%;
      animation-delay: 0s;
  }

  .footer-dot-effects::after {
      top: 70%;
      right: 12%;
      animation-delay: 1s;
  }

  .footer-dot-effects {
      background-image: radial-gradient(circle at 20% 25%, rgba(16, 185, 129, 0.4) 2px, transparent 2px),
          radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.3) 3px, transparent 3px),
          radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.4) 2px, transparent 2px);
      background-size: 200px 200px, 250px 250px, 180px 180px;
      animation: dotPattern 8s linear infinite;
  }

  .template-btn:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .fire-btn:hover {
      background: #fee2e2 !important;
  }

  .medical-btn:hover {
      background: #ecfdf5 !important;
  }

  .crowd-btn:hover {
      background: #fef3c7 !important;
  }

  .stampede-btn:hover {
      background: #fed7aa !important;
  }

  .template-btn.selected {
      animation: templatePulse 0.6s ease-in-out;
      transform: scale(1.1);
  }

  @keyframes templatePulse {
      0% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.15);
          box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
      }

      100% {
          transform: scale(1.1);
      }
  }

  /* Safe Routes Modal Enhancements */
  #safeRoutesModal select:focus {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
      outline: none;
  }

  #safeRoutesModal .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  #srFind:hover {
      background: linear-gradient(135deg, #059669, #047857) !important;
      box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4) !important;
  }

  #srClear:hover {
      background: #d97706 !important;
  }

  #srCancel:hover {
      background: #4b5563 !important;
  }

  @keyframes modalSlideIn {
      from {
          opacity: 0;
          transform: scale(0.7) translateY(-50px);
      }

      to {
          opacity: 1;
          transform: scale(1) translateY(0);
      }
  }

  .suggestion-item:hover {
      background: #4b5563 !important;
  }

  .suggestions-dropdown {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }