body {
  font-family: "Inter", sans-serif;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

/* Light Mode Background - Multi-layer Gradient */
.light .gemini-gradient {
  background:
    radial-gradient(circle at 10% 20%,
      rgba(28, 184, 126, 0.15) 0%,
      transparent 40%),
    radial-gradient(circle at 90% 10%,
      rgba(59, 130, 246, 0.12) 0%,
      transparent 40%),
    radial-gradient(circle at 50% 80%,
      rgba(139, 92, 246, 0.1) 0%,
      transparent 50%), linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdf4 100%);
  background-attachment: fixed;
}

/* Dark Mode Background - Multi-layer Gradient */
.dark .gemini-gradient {
  background:
    radial-gradient(circle at 10% 20%,
      rgba(28, 184, 126, 0.25) 0%,
      transparent 40%),
    radial-gradient(circle at 90% 10%,
      rgba(59, 130, 246, 0.2) 0%,
      transparent 40%),
    radial-gradient(circle at 50% 80%,
      rgba(139, 92, 246, 0.15) 0%,
      transparent 50%), linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #064e3b 100%);
  background-attachment: fixed;
}

/* Animated Background Orbs */
.glass-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  animation: float 20s infinite ease-in-out;
  opacity: 0.6;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(28, 184, 126, 0.4);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(59, 130, 246, 0.3);
  top: 50%;
  right: -100px;
  animation-delay: -5s;
}

.orb-3 {
  width: 350px;
  height: 350px;
  background: rgba(139, 92, 246, 0.3);
  bottom: -100px;
  left: 30%;
  animation-delay: -10s;
}

@keyframes float {

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

  25% {
    transform: translate(50px, 30px) scale(1.1);
  }

  50% {
    transform: translate(-30px, 60px) scale(0.95);
  }

  75% {
    transform: translate(40px, -40px) scale(1.05);
  }
}

.dark .glass-orb {
  opacity: 0.8;
  filter: blur(100px);
}

/* Header/Top Bar */
.light .top-bar {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
}

.dark .top-bar {
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

/* Glassmorphism Card */
.light .glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.dark .glass-card {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Search Pill */
.light .search-pill {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.dark .search-pill {
  background: rgba(31, 41, 55, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.search-pill:focus-within {
  box-shadow:
    0 10px 25px -5px rgba(28, 184, 126, 0.25),
    0 0 0 3px rgba(28, 184, 126, 0.1);
  transform: translateY(-1px);
  border-color: rgba(28, 184, 126, 0.5);
}

.dark .search-pill:focus-within {
  box-shadow:
    0 10px 25px -5px rgba(28, 184, 126, 0.4),
    0 0 0 3px rgba(28, 184, 126, 0.2);
  border-color: rgba(46, 216, 154, 0.7);
}

/* Input Fields */
.light input {
  background: rgba(255, 255, 255, 0.5);
}

.light input:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(28, 184, 126, 0.5);
}

.dark input {
  background: rgba(31, 41, 55, 0.5);
  color: #f1f5f9;
}

.dark input::placeholder {
  color: #94a3b8;
}

.dark input:focus {
  background: rgba(31, 41, 55, 0.8);
  border-color: rgba(46, 216, 154, 0.6);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.light ::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 10px;
}

/* Logo */
.logo-container {
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: none !important;
}

.light .logo-text {
  color: #1e293b;
}

.dark .logo-text {
  color: #f1f5f9;
}

/* Buttons */
.light .theme-toggle {
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid rgba(226, 232, 240, 0.5);
  color: #475569;
}

.light .theme-toggle:hover {
  background: rgba(226, 232, 240, 0.7);
  border-color: rgba(203, 213, 225, 0.7);
}

.dark .theme-toggle {
  background: rgba(51, 65, 85, 0.4);
  border: 1px solid rgba(75, 85, 99, 0.4);
  color: #cbd5e1;
}

.dark .theme-toggle:hover {
  background: rgba(71, 85, 99, 0.6);
  border-color: rgba(100, 116, 139, 0.5);
}

.light .sign-out-btn {
  color: #64748b;
}

.light .sign-out-btn:hover {
  color: #e11d48;
}

.dark .sign-out-btn {
  color: #94a3b8;
}

.dark .sign-out-btn:hover {
  color: #fb7185;
}

.theme-transition {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.light .btn-primary {
  background: linear-gradient(135deg, #1cb87e 0%, #149a68 100%);
}

.light .btn-primary:hover {
  background: linear-gradient(135deg, #2ed89a 0%, #1cb87e 100%);
}

.dark .btn-primary {
  background: linear-gradient(135deg, #2ed89a 0%, #1cb87e 100%);
}

.dark .btn-primary:hover {
  background: linear-gradient(135deg, #34d399 0%, #2ed89a 100%);
}

.light .btn-secondary {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.dark .btn-secondary {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
}