.material-icons-round { vertical-align: middle; font-size: 1.1em; line-height: 1; }

:root {
  --bg-cream: #eef6ff;
  --bg-peach: #ffe2c2;
  --ink: #1f2937;
  --primary: #2563eb;
  --primary-dark: #1e3a8a;
  --accent: #ea580c;
  --leaf: #f97316;
  --card: #f8fbff;
}

html.dark {
  --bg-cream: #0f172a;
  --bg-peach: #1e293b;
  --ink: #e2e8f0;
  --primary: #60a5fa;
  --primary-dark: #93c5fd;
  --accent: #fb923c;
  --leaf: #fb923c;
  --card: #1e293b;
}

body {
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 18%, rgba(59, 130, 246, 0.22), transparent 38%),
    radial-gradient(circle at 90% 12%, rgba(249, 115, 22, 0.18), transparent 34%),
    linear-gradient(180deg, var(--bg-cream), #f8fbff 50%, #fff5ea);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

html.dark body {
  background:
    radial-gradient(circle at 8% 18%, rgba(30, 58, 138, 0.4), transparent 38%),
    radial-gradient(circle at 90% 12%, rgba(194, 65, 12, 0.22), transparent 34%),
    linear-gradient(180deg, #0f172a, #0f1e35 50%, #0f172a);
}

h1, h2, h3 {
  font-family: "Google Sans Flex", "Manrope", sans-serif;
  letter-spacing: 0.01em;
}

.header-logo {
  font-family: "Agbalumo", "Google Sans Flex", "Manrope", sans-serif;
  font-weight: 400;
}

input, textarea, select {
  width: 100%;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: white;
  color: var(--ink);
  outline: none;
  transition: box-shadow 0.15s;
}

input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 2px #93c5fd; }

html.dark input,
html.dark textarea,
html.dark select {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-rise { opacity: 0; animation: riseIn 0.6s ease-out forwards; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }

.card {
  background: var(--card);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 1.5rem;
  padding: 1.5rem;
}

html.dark .card { border-color: rgba(30, 58, 138, 0.45); }
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-white\/90 { background-color: rgba(30, 41, 59, 0.9) !important; }
html.dark .bg-white\/85 { background-color: rgba(15, 23, 42, 0.92) !important; }
html.dark .text-slate-700 { color: #94a3b8; }
html.dark .text-slate-600 { color: #94a3b8; }
html.dark .text-slate-500 { color: #64748b; }
html.dark .bg-blue-50 { background-color: #172038 !important; }
html.dark .bg-orange-50 { background-color: #2a1a0e !important; }
html.dark .ring-blue-100 { --tw-ring-color: rgba(30, 58, 138, 0.5); }
html.dark .border-blue-100 { border-color: rgba(30, 58, 138, 0.5); }
html.dark .border-blue-200\/70 { border-color: rgba(30, 58, 138, 0.4); }
html.dark .border-blue-200\/80 { border-color: rgba(30, 58, 138, 0.5); }
html.dark .from-blue-50 { --tw-gradient-from: #0f1e35; }
html.dark .to-orange-50 { --tw-gradient-to: #1a1208; }
html.dark .shadow-\[0_24px_60px_-30px_rgba\(37\,99\,235\,0\.35\)\] { box-shadow: 0 24px 60px -30px rgba(14, 30, 80, 0.7); }
html.dark .shadow-\[0_10px_30px_-20px_rgba\(30\,58\,138\,0\.35\)\] { box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6); }

.nav-bg { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); }
html.dark .nav-bg { background: rgba(15, 23, 42, 0.92); }