:root {
  /* DARK THEME OVERRIDES - FLASHY NEON WARNING STYLE */
  --whoogle-dark-page-bg: #000000 !important;
  --whoogle-dark-element-bg: #ff0000 !important;
  --whoogle-dark-text: #ffff00 !important;
  --whoogle-dark-contrast-text: #00ff00 !important;
  --whoogle-dark-secondary-text: #ff00ff !important;
  --whoogle-dark-result-title: #00ffff !important;
  --whoogle-dark-result-url: #ffff00 !important;
  --whoogle-dark-result-visited: #ff00ff !important;
  --whoogle-dark-logo: #ff0000 !important;
}

/* Big blinking warning text over everything */
body::before {
  content: "⚠️ HEY! YOUR SERVER IS EXPOSED TO THE INTERNET ⚠️";
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem !important;
  font-weight: bold !important;
  color: #ffff00 !important;
  background: rgba(255, 0, 0, 0.8) !important;
  padding: 20px !important;
  border: 10px dashed #00ff00 !important;
  border-radius: 20px !important;
  text-align: center !important;
  z-index: 9999 !important;
  animation: blink 1s infinite, shake 0.5s infinite !important;
  box-shadow: 0 0 50px #ff00ff !important;
  text-shadow: 0 0 20px #00ffff !important;
}

body::after {
  content: "This port should NOT be open! Likely Docker bypassing UFW. Fix with: https://github.com/chaifeng/ufw-docker";
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem !important;
  font-weight: bold !important;
  color: #00ffff !important;
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 30px !important;
  border: 5px solid #ffff00 !important;
  border-radius: 15px !important;
  text-align: center !important;
  max-width: 90% !important;
  z-index: 9999 !important;
  box-shadow: 0 0 40px #ff0000 !important;
}

/* Hide normal Whoogle content to force attention */
#main, #search-bar, footer, header {
  opacity: 0.1 !important;
  pointer-events: none !important;
}

/* Blinking animation */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Shaking animation */
@keyframes shake {
  0% { transform: translateX(-50%) translate(5px, 5px) rotate(0deg); }
  10% { transform: translateX(-50%) translate(-5px, -10px) rotate(-5deg); }
  20% { transform: translateX(-50%) translate(-15px, 0px) rotate(5deg); }
  30% { transform: translateX(-50%) translate(15px, 10px) rotate(0deg); }
  40% { transform: translateX(-50%) translate(5px, -5px) rotate(5deg); }
  50% { transform: translateX(-50%) translate(-5px, 10px) rotate(-5deg); }
  60% { transform: translateX(-50%) translate(-15px, 5px) rotate(0deg); }
  70% { transform: translateX(-50%) translate(15px, 5px) rotate(-5deg); }
  80% { transform: translateX(-50%) translate(-5px, -5px) rotate(5deg); }
  90% { transform: translateX(-50%) translate(5px, 10px) rotate(0deg); }
  100% { transform: translateX(-50%) translate(5px, -10px) rotate(-5deg); }
}

/* Pulsing background */
body {
  animation: pulseBg 5s infinite !important;
  background: linear-gradient(45deg, #ff0000, #000000, #ff00ff) !important;
  background-size: 400% 400% !important;
}

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