/* ================================================================
   Axomate — Axolotl Lake Theme
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --lake-950: #071c26; --lake-900: #0a2d3f; --lake-800: #0e3d52;
  --lake-700: #0e5261; --lake-600: #156e7a; --lake-500: #1d8a9a;
  --lake-400: #2da6b4; --lake-300: #5bbec8; --lake-200: #9dd5da;
  --lake-100: #c8e9ec; --lake-50:  #edf6f7;
  --axo-600: #c95448; --axo-500: #e8796b; --axo-400: #f4a090;
  --axo-300: #fdddd4; --axo-200: #feeee9;
  --glass-bg: rgba(237,246,247,0.9);
  --glass-border: rgba(157,213,218,0.3);
  /* dark-mode surface colours */
  --dm-base:    #060f17;
  --dm-surface: #0a1f2e;
  --dm-raised:  #0e2a3d;
  --dm-border:  rgba(91,190,200,0.15);
  --dm-text:    #d4edf0;
  --dm-muted:   #6fb8c4;
}

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: 'Nunito', system-ui, sans-serif; scroll-behavior: smooth; }

body {
  background-color: #f4fbfc;
  background-image:
    radial-gradient(ellipse 70% 40% at 70% -5%, rgba(45,166,180,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 30% at 10% 110%, rgba(10,45,63,0.04) 0%, transparent 55%);
  color: var(--lake-900);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--lake-50); }
::-webkit-scrollbar-thumb { background: var(--lake-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--axo-400); }
::selection { background: rgba(244,160,144,0.28); color: var(--lake-950); }

/* ════════════════════════════════════════════════════════════════
   GLASS NAVBAR
   ════════════════════════════════════════════════════════════════ */
.glass {
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 2px 20px rgba(10,45,63,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Brand Logo ── */
.brand-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-logo-image {
  height: 2.5rem; width: 2.5rem; object-fit: contain;
  border-radius: 50%; background: white;
  box-shadow: 0 2px 10px rgba(10,45,63,0.15), 0 0 0 2px rgba(45,166,180,0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.brand-logo:hover .brand-logo-image {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 4px 16px rgba(10,45,63,0.22), 0 0 0 3px rgba(244,160,144,0.35);
}
.brand-logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--lake-900); letter-spacing: -0.025em; line-height: 1;
}
.lake-subtitle { color: var(--lake-500); }

/* ── Nav Links ── */
.nav-link {
  font-size: 0.875rem; font-weight: 700; color: var(--lake-700);
  text-decoration: none; position: relative; padding-bottom: 2px;
  transition: color 0.15s ease;
}
.nav-link::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 0; height: 2px;
  background: var(--axo-400); border-radius: 1px;
  transition: width 0.22s ease;
}
.nav-link:hover { color: var(--lake-950); }
.nav-link:hover::after { width: 100%; }

/* ── Mobile Links ── */
.mobile-link {
  display: block; padding: 0.6rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.9rem; font-weight: 700; color: var(--lake-700);
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.mobile-link:hover { background: var(--lake-50); color: var(--lake-950); }

/* ════════════════════════════════════════════════════════════════
   HERO — LAKE WATER EFFECT
   ════════════════════════════════════════════════════════════════ */
.hero-grid {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg,#071c26 0%,#0a2d3f 35%,#0e3d52 65%,#0e5261 100%);
}
.hero-grid::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(45,166,180,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 80% 20%, rgba(91,190,200,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.hero-grid::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 30% 15% at 20% 60%, rgba(91,190,200,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 20% 10% at 70% 40%, rgba(157,213,218,0.06) 0%, transparent 100%);
  animation: caustics 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes caustics {
  0%   { opacity:.6; transform: scale(1) translate(0,0); }
  50%  { opacity:1;  transform: scale(1.05) translate(10px,-5px); }
  100% { opacity:.8; transform: scale(0.97) translate(-6px,6px); }
}

/* Bubbles */
.bubble {
  position: absolute; border-radius: 50%;
  background: rgba(157,213,218,0.18);
  border: 1px solid rgba(91,190,200,0.25);
  animation: rise linear infinite; pointer-events: none;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(1); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:.5; }
  100% { transform: translateY(-120vh) scale(0.6); opacity:0; }
}

/* Wave divider */
.wave-divider { position: absolute; bottom:-1px; left:0; right:0; line-height:0; }
.wave-divider svg { display:block; width:100%; }

/* ════════════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════════════ */
.input-field {
  display: block; width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--lake-100);
  border-radius: 0.875rem;
  font-size: 0.9375rem; font-family: inherit;
  color: var(--lake-900); background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s; appearance: none;
}
.input-field:focus {
  border-color: var(--axo-400);
  box-shadow: 0 0 0 3px rgba(244,160,144,0.18);
}
.input-field::placeholder { color: var(--lake-300); }

/* ── University autocomplete dropdown ── */
.uni-dropdown {
  position: absolute; z-index: 999; width: 100%;
  background: #fff;
  border: 1.5px solid var(--lake-100);
  border-radius: 0.875rem;
  box-shadow: 0 8px 32px rgba(10,45,63,0.18);
  max-height: 280px; overflow-y: auto;
  margin-top: 4px;
}
.uni-dropdown:empty { display: none; }
.uni-option {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 1rem;
  cursor: pointer; font-size: 0.875rem; font-weight: 700;
  color: var(--lake-900); border-radius: 0;
  transition: background .12s;
  border-bottom: 1px solid var(--lake-50);
}
.uni-option:last-child { border-bottom: none; }
.uni-option:hover, .uni-option.active {
  background: var(--lake-50); color: var(--lake-950);
}
.uni-option .uni-badge {
  font-size: 0.7rem; font-weight: 800;
  padding: 2px 8px; border-radius: 99px;
  background: var(--lake-100); color: var(--lake-700);
  white-space: nowrap; flex-shrink: 0;
}
.uni-option .uni-state {
  font-size: 0.75rem; font-weight: 600; color: var(--lake-500);
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.lake-footer { background: linear-gradient(to bottom, #edf6f7, #ffffff); }
.footer-logo { display: flex; align-items: center; gap: 0.5rem; }
.footer-logo-image {
  height: 2rem; width: 2rem; object-fit: contain;
  border-radius: 50%; background: white;
  box-shadow: 0 2px 8px rgba(10,45,63,0.12);
}
.footer-logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--lake-950);
}

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════ */
@keyframes fade-in-up {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
[data-animate="slide-up"] { animation: fade-in-up 0.5s ease both; }

/* ════════════════════════════════════════════════════════════════
   DARK MODE — complete coverage
   ════════════════════════════════════════════════════════════════ */

.dark { color-scheme: dark; }

/* ── Page & layout base ────────────────────────────────────────── */
.dark body {
  background-color: var(--dm-base) !important;
  color: var(--dm-text);
  background-image: none;
}
.dark main { background-color: var(--dm-base); }

/* ── Navbar glass ──────────────────────────────────────────────── */
.dark .glass {
  background: rgba(5, 12, 20, 0.95);
  border-bottom: 1px solid var(--dm-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dark .brand-logo-text  { color: #e8f4f7; }
.dark .lake-subtitle    { color: var(--lake-400); }
.dark .nav-link         { color: var(--lake-200); }
.dark .nav-link:hover   { color: #fff; }
.dark .mobile-link      { color: var(--lake-200); }
.dark .mobile-link:hover { background: rgba(91,190,200,0.1); color: #fff; }
.dark #mobileMenu {
  background: #070f18 !important;
  border-top-color: var(--dm-border) !important;
}
.dark #menuBtn {
  background: var(--dm-raised) !important;
  border-color: var(--dm-border) !important;
}
.dark #menuBtn i { color: var(--lake-200) !important; }
/* dark mode toggle button */
.dark #darkModeBtn { color: var(--lake-300) !important; }
.dark #darkModeBtn:hover { color: var(--axo-400) !important; }

/* ── White / light surfaces ────────────────────────────────────── */
.dark .bg-white         { background-color: var(--dm-surface) !important; }
.dark .bg-slate-50      { background-color: var(--dm-raised) !important; }
.dark .bg-slate-100     { background-color: #0e2535 !important; }
.dark .bg-slate-200     { background-color: #122840 !important; }
.dark .bg-lake-50       { background-color: #091824 !important; }
.dark .bg-lake-100      { background-color: #0a2030 !important; }

/* axo tinted backgrounds — keep the tint but dark */
.dark .bg-axo-400\/10,
.dark [class*="bg-axo-400/10"] { background-color: rgba(244,160,144,0.08) !important; }
.dark .bg-axo-400\/15,
.dark [class*="bg-axo-400/15"] { background-color: rgba(244,160,144,0.1) !important; }
.dark .bg-axo-400\/20,
.dark [class*="bg-axo-400/20"] { background-color: rgba(244,160,144,0.12) !important; }

/* ── Borders ───────────────────────────────────────────────────── */
.dark .border-slate-100 { border-color: rgba(91,190,200,0.08) !important; }
.dark .border-slate-200 { border-color: var(--dm-border) !important; }
.dark .border-slate-300 { border-color: rgba(91,190,200,0.2) !important; }
.dark .border-lake-100  { border-color: var(--dm-border) !important; }
.dark .border-lake-200  { border-color: rgba(91,190,200,0.15) !important; }
.dark .border-dashed    { border-color: rgba(91,190,200,0.2) !important; }

/* ── Headings & body text ──────────────────────────────────────── */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5 { color: #eaf4f6; }

.dark .text-slate-900,
.dark .text-lake-900,
.dark .text-lake-950    { color: #d8eef2 !important; }

.dark .text-slate-800,
.dark .text-lake-800    { color: #b8dfe6 !important; }

.dark .text-slate-700,
.dark .text-lake-700    { color: #9dd5da !important; }

.dark .text-slate-600,
.dark .text-lake-600    { color: #6fb8c4 !important; }

/* slate-500 and slate-400 are already light-ish but need lifting on dark */
.dark .text-slate-500,
.dark .text-lake-500    { color: #5aacb8 !important; }

.dark .text-slate-400   { color: #7ec8d2 !important; }

/* slate-300 is used inside dark hero sections — keep it as-is, it's readable */

/* ── Inputs & forms ────────────────────────────────────────────── */
.dark .input-field,
.dark .field-input {
  background: #0c2233 !important;
  border-color: rgba(91,190,200,0.22) !important;
  color: #d4edf0 !important;
}
.dark .input-field:focus,
.dark .field-input:focus {
  border-color: var(--axo-400) !important;
  box-shadow: 0 0 0 3px rgba(244,160,144,0.15) !important;
}
.dark .input-field::placeholder,
.dark .field-input::placeholder { color: #3d7a86 !important; }

.dark select,
.dark select.input-field {
  background-color: #0c2233 !important;
  color: #d4edf0 !important;
}

.dark .field-label { color: var(--lake-200) !important; }
.dark .read-card   { background: var(--dm-raised) !important; border-color: var(--dm-border) !important; }

/* ── University autocomplete ───────────────────────────────────── */
.dark .uni-dropdown {
  background: #0b1e2c;
  border-color: rgba(91,190,200,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.dark .uni-option { color: #c8e9ec; border-bottom-color: rgba(91,190,200,0.1); }
.dark .uni-option:hover,
.dark .uni-option.active { background: #0e2a3d; }
.dark .uni-option .uni-badge { background: #0e2a3d; color: var(--lake-300); }
.dark .uni-option .uni-state { color: var(--lake-400); }

/* ── Axo / coral accent ────────────────────────────────────────── */
.dark .text-axo-600  { color: #f4a090 !important; }   /* was too dark, lift to 400 */
.dark .text-axo-500  { color: var(--axo-400) !important; }
.dark .text-axo-400  { color: var(--axo-300) !important; }
.dark .bg-axo-400    { background-color: var(--axo-400) !important; }
.dark .hover\:bg-axo-300:hover { background-color: var(--axo-300) !important; }

/* ── Amber / warning boxes ─────────────────────────────────────── */
.dark .bg-amber-50   { background-color: rgba(160, 90, 10, 0.18) !important; }
.dark .bg-amber-100  { background-color: rgba(160, 90, 10, 0.22) !important; }
.dark .border-amber-200 { border-color: rgba(200,130,40,0.35) !important; }
.dark .border-amber-300 { border-color: rgba(200,130,40,0.4) !important; }
.dark .text-amber-800 { color: #f0c070 !important; }
.dark .text-amber-700 { color: #e8b560 !important; }
.dark .text-amber-600 { color: #d9a040 !important; }

/* ── Emerald / success boxes ───────────────────────────────────── */
.dark .bg-emerald-50  { background-color: rgba(15, 90, 60, 0.2) !important; }
.dark .bg-emerald-100 { background-color: rgba(15, 90, 60, 0.25) !important; }
.dark .border-emerald-200 { border-color: rgba(40,160,100,0.3) !important; }
.dark .text-emerald-700 { color: #5dd8a0 !important; }
.dark .text-emerald-600 { color: #4ecf96 !important; }
.dark .text-emerald-500 { color: #3dc285 !important; }

/* ── Red / error boxes ─────────────────────────────────────────── */
.dark .bg-red-50    { background-color: rgba(120, 20, 20, 0.2) !important; }
.dark .bg-red-100   { background-color: rgba(120, 20, 20, 0.25) !important; }
.dark .text-red-600 { color: #f87171 !important; }
.dark .text-red-400 { color: #fca5a5 !important; }
/* bg-red-500/10 and border-red-500/30 already use opacity so they adapt */

/* ── Blue / info boxes ─────────────────────────────────────────── */
.dark .bg-blue-50  { background-color: rgba(20, 60, 140, 0.22) !important; }
.dark .border-blue-200 { border-color: rgba(60,130,200,0.3) !important; }
.dark .text-blue-700 { color: #93c5fd !important; }

/* ── Inline message alerts (generated by JS) ───────────────────── */
.dark [class*="bg-blue-50 text-blue-"]    { background-color: rgba(20,60,140,0.22) !important; color: #93c5fd !important; }
.dark [class*="bg-emerald-50 text-emer"]  { background-color: rgba(15,90,60,0.2) !important; color: #5dd8a0 !important; }
.dark [class*="bg-red-50 text-red-"]      { background-color: rgba(120,20,20,0.2) !important; color: #f87171 !important; }
.dark [class*="bg-amber-50 text-amber-"]  { background-color: rgba(160,90,10,0.18) !important; color: #f0c070 !important; }

/* ── Secondary / outline buttons ──────────────────────────────── */
.dark .border-slate-200.bg-white {
  background: var(--dm-raised) !important;
  border-color: var(--dm-border) !important;
  color: #c8e9ec !important;
}

/* ── Footer ────────────────────────────────────────────────────── */
.dark .lake-footer {
  background: linear-gradient(to bottom, #060e17, #080f18) !important;
  border-top-color: var(--dm-border) !important;
}
.dark .footer-logo-text { color: #e8f4f7; }

/* ── Shadows ───────────────────────────────────────────────────── */
.dark .shadow-soft { box-shadow: 0 8px 40px rgba(0,0,0,0.45) !important; }
.dark .shadow-lake { box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; }

/* ════════════════════════════════════════════════════════════════
   LOADING ANIMATIONS
   ════════════════════════════════════════════════════════════════ */

/* ── Skeleton shimmer ─────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    var(--lake-50) 25%,
    var(--lake-100) 50%,
    var(--lake-50) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 0.75rem;
}

.dark .skeleton {
  background: linear-gradient(90deg,
    #0a1a28 25%,
    #0e2535 50%,
    #0a1a28 75%);
  background-size: 600px 100%;
}

/* ── Thinking dots (AI) ───────────────────────────────────────── */
@keyframes thinking-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
  40%           { transform: scale(1);   opacity: 1; }
}

.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.thinking-dots span {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--axo-400);
  animation: thinking-dot 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(1) { animation-delay: 0s; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── Orbiting rings spinner ───────────────────────────────────── */
@keyframes orbit-outer {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-inner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.ai-spinner {
  position: relative;
  width: 64px; height: 64px;
  flex-shrink: 0;
}
.ai-spinner-outer {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--axo-400);
  border-right-color: var(--axo-400);
  animation: orbit-outer 1.1s linear infinite;
}
.ai-spinner-inner {
  position: absolute; inset: 12px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-bottom-color: var(--lake-400);
  border-left-color: var(--lake-400);
  animation: orbit-inner 0.8s linear infinite;
}
.ai-spinner-core {
  position: absolute; inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--axo-300) 0%, var(--lake-100) 100%);
  animation: pulse-glow 1.4s ease-in-out infinite;
}

/* ── Pulse glow ───────────────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* ── Step progress indicator ──────────────────────────────────── */
@keyframes step-appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 0.875rem;
  font-size: 0.8125rem; font-weight: 700;
  opacity: 0;
  animation: step-appear 0.35s ease forwards;
}
.ai-step.step-done {
  background: rgba(45,166,180,0.08);
  color: var(--lake-700);
}
.ai-step.step-active {
  background: rgba(244,160,144,0.12);
  color: var(--axo-600);
}
.ai-step-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ai-step-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--lake-400);
  display: flex; align-items: center; justify-content: center;
}
.ai-step-check::after {
  content: '';
  width: 5px; height: 8px;
  border: 2px solid white;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}

/* ── Button spinner inline ────────────────────────────────────── */
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn-spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Loading overlay for data-heavy sections ──────────────────── */
.data-loading-overlay {
  position: absolute; inset: 0;
  background: rgba(244,251,252,0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  z-index: 20;
  border-radius: inherit;
  transition: opacity 0.3s ease;
}
.dark .data-loading-overlay {
  background: rgba(6,15,23,0.88);
}

/* ── Enhanced modal spinner ───────────────────────────────────── */
.modal-spinner {
  position: relative;
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
}
.modal-spinner-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid var(--lake-100);
}
.modal-spinner-arc {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--axo-400);
  animation: orbit-outer 0.9s linear infinite;
}
.dark .modal-spinner-ring { border-color: var(--dm-border); }

/* ── Shimmer wave on result card sections ─────────────────────── */
.result-skeleton-line {
  height: 14px;
  border-radius: 7px;
  margin-bottom: 8px;
}
.result-skeleton-line:last-child { margin-bottom: 0; width: 65% !important; }

/* ── AI result loading state full panel ───────────────────────── */
#aiLoadingState {
  display: none;
}
#aiLoadingState.active {
  display: block;
}