:root {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #334155;
  --brand-navy: #0f172a;
  --brand-cyan: #0284c7;
  --brand-saffron: #f59e0b;
  --brand-saffron-hover: #d97706;
  --status-success: #10b981;
}

html, body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Prevent iOS Safari 16px auto-zoom on form inputs */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

.kid-font {
  font-family: 'Fredoka', sans-serif;
}

/* ================= DYNAMIC LOGIN PAGE MORPHING THEMES ================= */
#login-body.theme-student {
  background: radial-gradient(circle at 15% 20%, #1e293b 0%, #0f172a 60%, #090d16 100%);
  transition: background 0.7s ease;
}

#login-body.theme-parent {
  background: radial-gradient(circle at 85% 20%, #0c4a6e 0%, #0f172a 65%, #022c22 100%);
  transition: background 0.7s ease;
}

#login-body.theme-student #login-left-panel {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 55%, #b45309 100%);
}

#login-body.theme-parent #login-left-panel {
  background: linear-gradient(145deg, #0f172a 0%, #0369a1 55%, #047857 100%);
}

/* Ambient Floating Orbs */
.ambient-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(75px);
  opacity: 0.35;
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  animation: floatSlow 7s ease-in-out infinite;
}

.orb-one {
  width: 380px;
  height: 380px;
  top: -80px;
  left: -80px;
  background: #f59e0b;
}

.orb-two {
  width: 420px;
  height: 420px;
  bottom: -100px;
  right: -80px;
  background: #0284c7;
  animation-delay: 2s;
}

.orb-three {
  width: 280px;
  height: 280px;
  top: 40%;
  left: 50%;
  background: #10b981;
  animation-delay: 4s;
}

#login-body.theme-parent .orb-one {
  background: #0284c7;
  transform: translate(120px, 40px) scale(1.15);
}

#login-body.theme-parent .orb-two {
  background: #10b981;
  transform: translate(-100px, -40px) scale(1.1);
}

/* Role Switcher Sliding Pill */
.role-slider-pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: calc(50% - 6px);
  border-radius: 0.75rem;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.45s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.role-slider-pill.student-pos {
  transform: translateX(0%);
  background-color: #f59e0b;
}

.role-slider-pill.parent-pos {
  transform: translateX(100%);
  background-color: #0284c7;
}

/* Input & Button Morphing */
#login-body.theme-student .input-theme-focus:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

#login-body.theme-parent .input-theme-focus:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

.btn-student-mode {
  background-color: #f59e0b;
  color: #0f172a;
}
.btn-student-mode:hover {
  background-color: #d97706;
}

.btn-parent-mode {
  background-color: #0284c7;
  color: #ffffff;
}
.btn-parent-mode:hover {
  background-color: #0369a1;
}

/* ================= ANIMATIONS & CURRENCY GRAPHICS ================= */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes popIn {
  0% { transform: scale(0.92); opacity: 0; }
  70% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
}

.animate-float { animation: floatSlow 3.5s ease-in-out infinite; }
.animate-pop { animation: popIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-shake { animation: shakeError 0.4s ease-in-out; }
.animate-glow { animation: pulseRing 2s infinite; }

.metallic-coin-gold {
  background: radial-gradient(circle at 30% 30%, #fef08a, #f59e0b, #b45309);
  border: 4px dashed #fffbeb;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2), inset 0 2px 6px rgba(255, 255, 255, 0.7);
}

.metallic-coin-silver {
  background: radial-gradient(circle at 30% 30%, #f8fafc, #cbd5e1, #475569);
  border: 4px dashed #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2), inset 0 2px 6px rgba(255, 255, 255, 0.85);
}

.metallic-coin-bimetallic {
  background: radial-gradient(circle, #cbd5e1 0%, #94a3b8 48%, #f59e0b 50%, #b45309 100%);
  border: 3px solid #fde68a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
}

@media (max-width: 640px) {
  .ambient-orb {
    filter: blur(45px);
    opacity: 0.28;
  }
  .orb-one {
    width: 220px;
    height: 220px;
    top: -40px;
    left: -40px;
  }
  .orb-two {
    width: 240px;
    height: 240px;
    bottom: -60px;
    right: -40px;
  }
  .orb-three {
    width: 160px;
    height: 160px;
    top: 35%;
    left: 40%;
  }
  /* Mobile touch momentum scrolling */
  .overflow-x-auto, .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
  }
}

@media print {
  .no-print { display: none !important; }
  body { background: #ffffff !important; }
}