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

:root {
  --neon-green: #39FF14;
  --neon-blue: #00D4FF;
  --neon-pink: #FF2D78;
  --neon-yellow: #FFE600;
  --dark-bg: #0A0A1A;
  --card-bg: #12122A;
  --text-primary: #F0F0FF;
  --text-secondary: #9999BB;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--dark-bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; }

/* Stars background */
.stars {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.stars::before, .stars::after {
  content: ''; position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: white;
  box-shadow:
    25px 50px white, 100px 120px white, 200px 80px white,
    350px 200px white, 450px 50px white, 550px 300px white,
    650px 100px white, 750px 250px white, 850px 60px white,
    950px 180px white, 80px 350px white, 180px 450px white,
    300px 380px white, 420px 500px white, 580px 420px white,
    700px 480px white, 820px 350px white, 920px 500px white,
    50px 600px white, 150px 700px white, 270px 650px white;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars::after {
  width: 1px; height: 1px;
  box-shadow:
    60px 100px rgba(255,255,255,0.5), 180px 200px rgba(255,255,255,0.4),
    320px 150px rgba(255,255,255,0.6), 500px 80px rgba(255,255,255,0.3),
    720px 250px rgba(255,255,255,0.5), 880px 150px rgba(255,255,255,0.4);
  animation: twinkle 3s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { 0% { opacity: 0.5; } 100% { opacity: 1; } }

/* Page container */
.page-container {
  position: relative; z-index: 1;
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px;
}

/* Card */
.card {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%; max-width: 440px;
}

/* Logo */
.logo-link {
  text-decoration: none; color: inherit;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 32px; justify-content: center;
}
.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--neon-green), var(--neon-blue));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.6rem;
  background: linear-gradient(135deg, var(--neon-green), var(--neon-blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Form elements */
.form-title {
  font-size: 1.5rem; margin-bottom: 8px; text-align: center;
}
.form-subtitle {
  color: var(--text-secondary); text-align: center;
  margin-bottom: 28px; font-size: 0.95rem; font-weight: 300;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; margin-bottom: 8px;
  font-size: 0.85rem; color: var(--text-secondary);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
}
.form-group input, .form-group select {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: var(--text-primary);
  font-family: 'Outfit', sans-serif; font-size: 1rem;
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: var(--neon-green);
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.1);
}
.form-group input::placeholder { color: rgba(153, 153, 187, 0.5); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border: none; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 1rem; cursor: pointer;
  transition: all 0.2s; text-decoration: none;
  width: 100%;
}
.btn-primary {
  background: linear-gradient(135deg, var(--neon-green), #2dd87a);
  color: #0A0A1A;
}
.btn-primary:hover {
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.4);
  transform: translateY(-1px);
}
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-secondary:hover {
  border-color: var(--neon-blue);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.2);
}

/* Links */
.form-footer {
  text-align: center; margin-top: 24px;
  color: var(--text-secondary); font-size: 0.9rem;
}
.form-footer a {
  color: var(--neon-green); text-decoration: none; font-weight: 500;
}
.form-footer a:hover { text-decoration: underline; }

/* Error message */
.error-msg {
  background: rgba(255, 45, 120, 0.1);
  border: 1px solid rgba(255, 45, 120, 0.3);
  color: var(--neon-pink);
  padding: 12px 16px; border-radius: 8px;
  font-size: 0.9rem; margin-bottom: 20px;
  display: none;
}
.error-msg.visible { display: block; }

/* Nav bar for inner pages */
.inner-nav {
  width: 100%; max-width: 1100px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; margin-bottom: 20px;
}
.inner-nav .nav-links { display: flex; gap: 16px; align-items: center; }
.inner-nav .nav-links a {
  color: var(--text-secondary); text-decoration: none;
  font-size: 0.9rem; padding: 8px 16px; border-radius: 8px;
  transition: all 0.2s;
}
.inner-nav .nav-links a:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.inner-nav .nav-links a.active { color: var(--neon-green); }
.logout-btn {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary); padding: 8px 16px; border-radius: 8px;
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; cursor: pointer;
}
.logout-btn:hover { border-color: var(--neon-pink); color: var(--neon-pink); }

/* Dashboard grid */
.dash-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; width: 100%; max-width: 1100px;
}

/* Child card */
.child-card {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 24px;
  transition: border-color 0.2s;
}
.child-card:hover { border-color: rgba(57, 255, 20, 0.2); }
.child-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.child-card .stats-row {
  display: flex; gap: 16px; margin-bottom: 16px;
}
.child-card .stat {
  font-size: 0.8rem; color: var(--text-secondary);
}
.child-card .stat strong {
  display: block; font-size: 1.3rem;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-primary); margin-bottom: 2px;
}
.child-card .play-btn {
  display: inline-flex; padding: 10px 20px;
  background: linear-gradient(135deg, var(--neon-green), #2dd87a);
  color: #0A0A1A; border: none; border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 0.9rem; cursor: pointer;
  transition: all 0.2s; text-decoration: none;
}
.child-card .play-btn:hover {
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
}

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; display: none;
}
.modal-overlay.visible { display: flex; }
.modal {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 36px;
  width: 90%; max-width: 400px;
}

@media (max-width: 480px) {
  .card { padding: 28px 20px; }
  .dash-grid { grid-template-columns: 1fr; }
}