/* Celestia Glass/Neon Box für Suchfeld und Button */
.search_form, .search-bar, .input-group, .search-group, #search_form, #search-bar, #search_box {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(34, 211, 238, 0.03) 3px,
      rgba(34, 211, 238, 0.03) 4px
    ),
    rgba(10, 15, 30, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 15px rgba(124,58,237,0.1) !important;
  padding: 0.5rem 1.2rem !important;
  margin: 0 auto 32px auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  animation: boxGlowPulse 4s ease-in-out infinite !important;
  position: relative;
  z-index: 2;
}

@keyframes boxGlowPulse {
  0%, 100% {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 15px rgba(124,58,237,0.1);
  }
  50% {
    border-color: rgba(124, 58, 237, 0.6);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 30px rgba(124,58,237,0.2), 0 0 60px rgba(147,51,234,0.1);
  }
}
/* Entferne grauen Kasten um Suchfeld/Button */
.search_form, .search-bar, .input-group, .search-group, #search_form, #search-bar, #search_box {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Falls ein Restbalken durch flex/grid entsteht */
.search_form > *, .search-bar > *, .input-group > *, .search-group > *, #search_form > *, #search-bar > *, #search_box > * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  Celestia Search - Space Theme für SearXNG                       ║
   ║  Overrides für das Simple-Dark Theme                              ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Orbitron Font (Space/Futuristic) ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────────── */
:root {
  /* Celestia Farbpalette */
  --celestia-bg-deep: #0a0f1e;
  --celestia-bg-mid: #0d1330;
  --celestia-bg-card: #111836;
  --celestia-bg-hover: #161d42;
  --celestia-bg-input: #0e1328;
  --celestia-border: rgba(124, 58, 237, 0.25);
  --celestia-border-hover: rgba(124, 58, 237, 0.5);
  --celestia-border-focus: rgba(124, 58, 237, 0.8);

  /* Akzentfarben */
  --celestia-purple: #7c3aed;
  --celestia-purple-vivid: #9333ea;
  --celestia-indigo: #4f46e5;
  --celestia-indigo-light: #818cf8;
  --celestia-cyan: #22d3ee;
  --celestia-cyan-dim: rgba(34, 211, 238, 0.6);
  --celestia-magenta: #ee02ee;

  /* Text */
  --celestia-text: #e0e7ff;
  --celestia-text-muted: #a5b4d4;
  --celestia-text-dim: #6b7ba0;
  --celestia-link: #818cf8;
  --celestia-link-hover: #a5b4fc;
  --celestia-url: #22d3ee;

  /* Gradient */
  --celestia-gradient: linear-gradient(135deg, #00e9ff 0%, #0092ff 25%, #612fff 50%, #ab0ffd 75%, #ee02ee 100%);
  --celestia-gradient-subtle: linear-gradient(135deg, rgba(0, 233, 255, 0.1) 0%, rgba(97, 47, 255, 0.15) 50%, rgba(238, 2, 238, 0.1) 100%);

  /* Glow Effects */
  --celestia-glow-purple: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 60px rgba(124, 58, 237, 0.1);
  --celestia-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.3), 0 0 60px rgba(34, 211, 238, 0.1);
  --celestia-glow-input: 0 0 15px rgba(124, 58, 237, 0.2);

  /* Timing */
  --celestia-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Body & Global Background ──────────────────────────────────────── */
html, body {
  background: var(--celestia-bg-deep) !important;
  background-image: url('../img/wallpaper.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--celestia-text) !important;
  font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Orbitron für alle Elemente erzwingen */
*, *::before, *::after {
  font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Eingabefelder */
input, textarea, select, button {
  font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(79, 70, 229, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(34, 211, 238, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 80%, rgba(147, 51, 234, 0.06) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}



/* ── Sternenhimmel (Pseudo-Sterne über Punkte) ─────────────────────── */
#main_index::before,
#main_results::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 45% 10%, rgba(34, 211, 238, 0.5), transparent),
    radial-gradient(1px 1px at 60% 45%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 75% 20%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(129, 140, 248, 0.4), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 55% 65%, rgba(238, 2, 238, 0.3), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 5% 50%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 70% 75%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 40% 50%, rgba(34, 211, 238, 0.3), transparent),
    radial-gradient(1px 1px at 95% 35%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 50% 90%, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── Header / Navbar ───────────────────────────────────────────────── */
#header {
  background: rgba(13, 19, 48, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--celestia-border) !important;
  box-shadow: 0 1px 30px rgba(124, 58, 237, 0.1) !important;
}

#header .instance a,
#header .instance-name {
  color: var(--celestia-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* ── Suchleiste ────────────────────────────────────────────────────── */
#search_header {
  background: transparent !important;
}

@keyframes terminalCursorBlink {
  0%, 100% { border-right-color: rgba(34, 211, 238, 0.85); }
  50% { border-right-color: transparent; }
}

@keyframes searchInputGlow {
  0%, 100% {
    border-color: rgba(34, 211, 238, 0.25);
    border-left-color: rgba(147, 51, 234, 0.65);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.12), 0 0 24px rgba(124, 58, 237, 0.08);
  }
  50% {
    border-color: rgba(34, 211, 238, 0.5);
    border-left-color: rgba(34, 211, 238, 0.9);
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.25), 0 0 44px rgba(124, 58, 237, 0.14);
  }
}

#q,
.search-input,
input[type="search"],
input[name="q"] {
  background: rgba(4, 8, 20, 0.92) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  border-left: 3px solid rgba(34, 211, 238, 0.8) !important;
  border-radius: 8px !important;
  color: #22d3ee !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  padding: 12px 20px !important;
  transition: var(--celestia-transition) !important;
  caret-color: #22d3ee !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.12), 0 0 24px rgba(124, 58, 237, 0.08) !important;
  animation: searchInputGlow 4s ease-in-out infinite !important;
}

#q::placeholder,
.search-input::placeholder,
input[type="search"]::placeholder,
input[name="q"]::placeholder {
  color: rgba(34, 211, 238, 0.4) !important;
  font-style: italic !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
}

#q:focus,
.search-input:focus,
input[type="search"]:focus,
input[name="q"]:focus {
  border-color: rgba(34, 211, 238, 0.7) !important;
  border-left-color: #22d3ee !important;
  background: rgba(4, 8, 20, 0.98) !important;
  color: #e0f7ff !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.3), 0 0 40px rgba(124, 58, 237, 0.18), 0 0 0 2px rgba(34, 211, 238, 0.07) !important;
  outline: none !important;
  animation: none !important;
}

/* ── Suchbutton ────────────────────────────────────────────────────── */
#send_search,
button[type="submit"] {
  background: var(--celestia-gradient) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--celestia-transition) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

#send_search:hover,
button[type="submit"]:hover {
  filter: brightness(1.15) !important;
  box-shadow: var(--celestia-glow-purple) !important;
}

/* ── Startseite (Index) ────────────────────────────────────────────── */
#main_index {
  position: relative;
  z-index: 1;
}

/* ── Original SearXNG Branding → Celestia Styling ──────────────────── */
/* Das SearXNG-Logo wurde durch Celestia-Logo.png ersetzt (inject-theme.sh).
   Hier stylen wir das native Logo-Element des Simple-Themes. */

/* Hauptlogo auf der Startseite - größer und mit Glow */
#main_index .searxng_logo,
#main_index .searxng_logo img,
#main_index .searxng_logo svg,
#main_index .searxng_logo object,
#main_index .searxng_logo embed,
#main_index .logo,
#main_index .logo img,
#main_index .logo svg,
#main_index h1 img,
#main_index h1 svg,
#main_index h1 object,
#main_index img[src*="searxng"],
#main_index object[data*="searxng"],
#main_index embed[src*="searxng"] {
  width: 500px !important;
  min-width: 500px !important;
  max-width: 90vw !important;
  height: auto !important;
  min-height: 200px !important;
  filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.5)) drop-shadow(0 0 80px rgba(34, 211, 238, 0.2)) !important;
  transition: var(--celestia-transition) !important;
  animation: logoPulse 4s ease-in-out infinite !important;
}

/* Container muss auch breit genug sein */
#main_index .searxng_logo {
  display: block !important;
  width: 500px !important;
  min-width: 500px !important;
  height: auto !important;
  min-height: 200px !important;
  margin: 0 auto !important;
}

#main_index .searxng_logo:hover,
#main_index .searxng_logo:hover *,
#main_index .logo img:hover,
#main_index h1 img:hover {
  filter: drop-shadow(0 0 45px rgba(124, 58, 237, 0.8)) drop-shadow(0 0 120px rgba(34, 211, 238, 0.4)) !important;
  transform: scale(1.05) !important;
  animation: none !important;
}

@keyframes logoPulse {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.5)) drop-shadow(0 0 80px rgba(34, 211, 238, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(124, 58, 237, 0.7)) drop-shadow(0 0 100px rgba(34, 211, 238, 0.35));
  }
}

/* SearXNG Text-Überschrift verstecken (unser Logo ersetzt es) */
#main_index h1 {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 200px !important;
}

/* Aber Bilder/SVGs innerhalb h1 anzeigen */
#main_index h1 img,
#main_index h1 svg,
#main_index h1 object,
#main_index h1 embed,
#main_index h1 > * {
  font-size: initial !important;
  display: inline-block !important;
  width: 500px !important;
  min-width: 500px !important;
  max-width: 90vw !important;
  height: auto !important;
}

/* Header-Logo auf Ergebnis-Seiten */
#header .searxng_logo,
#header .logo img,
#header img[src*="searxng"] {
  width: 32px !important;
  height: 32px !important;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.4)) !important;
}

/* Falls noch .celestia-logo-wrapper Klassen vorhanden (Altlasten) */
.celestia-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding-top: 20px;
}

.celestia-logo {
  width: 400px;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.5)) drop-shadow(0 0 80px rgba(34, 211, 238, 0.2));
  transition: var(--celestia-transition);
  animation: logoPulse 4s ease-in-out infinite;
}

.celestia-logo:hover {
  filter: drop-shadow(0 0 45px rgba(124, 58, 237, 0.8)) drop-shadow(0 0 120px rgba(34, 211, 238, 0.4));
  transform: scale(1.05);
  animation: none;
}

.celestia-search-subtitle {
  font-family: 'Orbitron', -apple-system, sans-serif;
  font-size: 2.2rem;
  font-weight: 200;
  letter-spacing: 20px;
  text-indent: 20px;
  background: var(--celestia-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.85;
  margin-top: -4px;
  text-align: center;
}

/* Header-Logo Textklasse (Altlast) */
.celestia-header-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

.celestia-header-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.4));
}

/* ── Kategorie-Tabs ────────────────────────────────────────────────── */
#categories {
  background: transparent !important;
}

#categories label,
#categories button,
.category {
  background: var(--celestia-bg-card) !important;
  border: 1px solid var(--celestia-border) !important;
  border-radius: 8px !important;
  color: var(--celestia-text-muted) !important;
  transition: var(--celestia-transition) !important;
  margin: 2px !important;
}

#categories input[type="radio"]:checked + label,
#categories .active,
.category.active,
.category:hover {
  background: rgba(124, 58, 237, 0.2) !important;
  border-color: var(--celestia-purple) !important;
  color: var(--celestia-text) !important;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.2) !important;
}

/* ── Suchergebnisse ────────────────────────────────────────────────── */
#main_results {
  position: relative;
  z-index: 1;
}

.result,
article.result {
  background: rgba(17, 24, 54, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(124, 58, 237, 0.15) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  margin-bottom: 14px !important;
  transition: var(--celestia-transition) !important;
}

.result:hover,
article.result:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: rgba(22, 29, 66, 0.8) !important;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.1) !important;
  transform: translateY(-2px);
}

/* ── Links ─────────────────────────────────────────────────────────── */
.result h3 a,
.result-title a,
article.result h3 a {
  color: var(--celestia-link) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: var(--celestia-transition) !important;
}

.result h3 a:hover,
.result-title a:hover,
article.result h3 a:hover {
  color: var(--celestia-link-hover) !important;
  text-decoration: underline !important;
}

.result .url,
.result-url,
article.result .url {
  color: var(--celestia-url) !important;
  font-size: 0.85em !important;
  opacity: 0.8;
}

.result .content,
.result-content,
article.result .content {
  color: var(--celestia-text-muted) !important;
  line-height: 1.6 !important;
}

/* ── Sidebar / Infoboxen ───────────────────────────────────────────── */
.infobox {
  background: rgba(17, 24, 54, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--celestia-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--celestia-glow-purple) !important;
}

.infobox h2 {
  color: var(--celestia-text) !important;
  border-bottom: 1px solid var(--celestia-border) !important;
}

/* ── Pagination ────────────────────────────────────────────────────── */
#pagination {
  margin-top: 24px !important;
}

#pagination .page-number,
.pagination a,
.pagination button {
  background: var(--celestia-bg-card) !important;
  border: 1px solid var(--celestia-border) !important;
  border-radius: 8px !important;
  color: var(--celestia-text-muted) !important;
  transition: var(--celestia-transition) !important;
}

#pagination .page-number:hover,
.pagination a:hover,
.pagination button:hover {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: var(--celestia-purple) !important;
  color: var(--celestia-text) !important;
}

#pagination .active {
  background: var(--celestia-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ── Einstellungen & Formulare ─────────────────────────────────────── */
.preferences,
#settings {
  background: var(--celestia-bg-mid) !important;
}

select,
input[type="text"],
input[type="number"] {
  background: var(--celestia-bg-input) !important;
  border: 1px solid var(--celestia-border) !important;
  border-radius: 8px !important;
  color: var(--celestia-text) !important;
  transition: var(--celestia-transition) !important;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
  border-color: var(--celestia-border-focus) !important;
  box-shadow: var(--celestia-glow-input) !important;
  outline: none !important;
}

/* ── Autocomplete Dropdown ─────────────────────────────────────────── */
.autocomplete-suggestions,
#suggestions {
  background: rgba(4, 8, 20, 0.96) !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
  border-left: 3px solid rgba(34, 211, 238, 0.7) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 18px rgba(34, 211, 238, 0.1) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.autocomplete-suggestion,
.suggestion {
  color: rgba(34, 211, 238, 0.75) !important;
  padding: 10px 16px !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.3px !important;
  border-left: 3px solid transparent !important;
  transition: var(--celestia-transition) !important;
}

.autocomplete-suggestion:hover,
.suggestion:hover,
.autocomplete-suggestion.selected,
.suggestion.selected {
  background: rgba(34, 211, 238, 0.07) !important;
  color: #22d3ee !important;
  border-left-color: rgba(34, 211, 238, 0.7) !important;
}

/* ── Clear-Button (X) ──────────────────────────────────────────────── */
#clear_search,
button[name="clear"],
.clear-search,
input[type="search"]::-webkit-search-cancel-button,
#search_header .btn-sm,
.input-group .btn-outline-secondary,
.input-group button:not([type="submit"]) {
  background: rgba(4, 8, 20, 0.9) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  border-radius: 6px !important;
  color: rgba(34, 211, 238, 0.7) !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: var(--celestia-transition) !important;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.08) !important;
}

#clear_search:hover,
button[name="clear"]:hover,
.clear-search:hover,
.input-group button:not([type="submit"]):hover {
  background: rgba(34, 211, 238, 0.08) !important;
  border-color: rgba(34, 211, 238, 0.7) !important;
  color: #22d3ee !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.2) !important;
}

/* ── Footer ────────────────────────────────────────────────────────── */
#main_index footer,
footer {
  display: none !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--celestia-bg-deep);
}

::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.6);
}

/* ── Engine Favicons / Tags ────────────────────────────────────────── */
.result .engines,
.engines span {
  color: var(--celestia-text-dim) !important;
  font-size: 0.8em !important;
}

.result .engines .engine-name {
  background: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  color: var(--celestia-indigo-light) !important;
}

/* ── Bilder-Grid ───────────────────────────────────────────────────── */
.image_result {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--celestia-border) !important;
  transition: var(--celestia-transition) !important;
}

.image_result:hover {
  border-color: var(--celestia-purple) !important;
  box-shadow: var(--celestia-glow-purple) !important;
  transform: scale(1.02);
}

/* ── Holographic Glow für Suchleiste auf Startseite ────────────────── */
@keyframes holoGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 233, 255, 0.2), 0 0 30px rgba(124, 58, 237, 0.1);
  }
  33% {
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3), 0 0 30px rgba(238, 2, 238, 0.1);
  }
  66% {
    box-shadow: 0 0 15px rgba(238, 2, 238, 0.2), 0 0 30px rgba(0, 233, 255, 0.1);
  }
}

#main_index #q,
#main_index input[name="q"] {
  border-radius: 8px !important;
  font-size: 17px !important;
  padding: 16px 28px !important;
  background: rgba(4, 8, 20, 0.92) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  border-left: 3px solid rgba(34, 211, 238, 0.85) !important;
  color: #22d3ee !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), 0 0 36px rgba(124, 58, 237, 0.1) !important;
  animation: searchInputGlow 4s ease-in-out infinite !important;
}
/* Menü (Über/Einstellungen) oben rechts positionieren */
/* Trifft SearXNG Simple Theme: #toolbar, #about, #nav_about, .navbar-nav */
.nav-menu, .about-settings-menu, #about_settings_menu,
#toolbar, #nav_about, .navbar-nav,
#main_index #toolbar,
#main_index .navbar-nav {
  position: fixed !important;
  top: 20px !important;
  right: 32px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  align-items: center !important;
}

.nav-menu a, .about-settings-menu a, #about_settings_menu a,
#toolbar a, #nav_about a, .navbar-nav a,
#main_index #toolbar a {
  color: rgba(34, 211, 238, 0.75) !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  opacity: 1;
  transition: color 0.2s, text-shadow 0.2s;
  text-shadow: none;
}
.nav-menu a:hover, .about-settings-menu a:hover, #about_settings_menu a:hover,
#toolbar a:hover, #nav_about a:hover, .navbar-nav a:hover {
  color: #22d3ee !important;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5) !important;
}

/* ── Badge / Label Styling ─────────────────────────────────────────── */
.badge,
.label {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  color: var(--celestia-indigo-light) !important;
  border-radius: 6px !important;
}

/* ── Loading Animation ─────────────────────────────────────────────── */
.loading-spinner,
#loading {
  border-color: rgba(124, 58, 237, 0.2) !important;
  border-top-color: var(--celestia-cyan) !important;
}

/* ── Selection ─────────────────────────────────────────────────────── */
::selection {
  background: rgba(124, 58, 237, 0.4) !important;
  color: #fff !important;
}

/* ── Responsive: Mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #main_index h1,
  .title h1 {
    font-size: 2rem !important;
  }

  .celestia-logo {
    width: 180px;
  }

  .celestia-search-subtitle {
    font-size: 1.5rem;
    letter-spacing: 12px;
    text-indent: 12px;
  }

  .result,
  article.result {
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
  }

  #q,
  input[name="q"] {
    font-size: 16px !important;
    padding: 14px 18px !important;
  }
}