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

body {
  font-family:'Nunito',sans-serif;
  background:linear-gradient(180deg,#B3E5FC 0%,#E1F5FE 40%,#F1F8E9 100%);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; padding-top:80px;
}

/* Top nav buttons */
.edu-btn {  
  position:fixed; top:16px; right:16px;
  background:linear-gradient(135deg,#202882,#0926e2);
  color:white; border:none; border-radius:50px;
  padding:11px 22px; font-family:'Fredoka One',cursive;
  font-size:1rem; cursor:pointer;
  box-shadow:0 4px 18px #a7fc0973; transition:all 0.2s;
  z-index:10;
}
.edu-btn:hover { transform:translateY(-2px); }

.parent-btn {
  position:fixed; top:16px; right:176px;
  background:linear-gradient(135deg,#71811b,#abc516);
  color:white; border:none; border-radius:50px;
  padding:11px 22px; font-family:'Fredoka One',cursive;
  font-size:1rem; cursor:pointer;
  box-shadow:0 4px 18px #a7fc0973; transition:all 0.2s;
  z-index:10;
}
.parent-btn:hover { transform:translateY(-2px); }

.student-btn {
  position:fixed; top:16px; right:316px;
  background:linear-gradient(135deg,#a56117,#f07f05);
  color:white; border:none; border-radius:50px;
  padding:11px 22px; font-family:'Fredoka One',cursive;
  font-size:1rem; cursor:pointer;
  box-shadow:0 4px 18px #a7fc0973; transition:all 0.2s;
  z-index:10;
}
.student-btn:hover { transform:translateY(-2px); }

/* Login card */
.login-card {
  background:white; border-radius:28px; padding:40px 36px;
  width:100%; max-width:420px;
  box-shadow:0 16px 50px rgba(0,0,0,0.15);
  border:4px solid #E8EAF6; text-align:center;
}
.login-logo { font-family:'Fredoka One',cursive; font-size:2.4rem; color:#FF7043; margin-bottom:4px; }
.login-logo span { color:#3F51B5; }
.login-subtitle { font-size:0.95rem; color:#90A4AE; font-weight:600; margin-bottom:28px; }
.login-field { margin-bottom:14px; text-align:left; }
.login-field label { display:block; font-weight:800; font-size:0.85rem; color:#546E7A; margin-bottom:6px; }
.login-field input {
  width:100%; padding:13px 16px; border-radius:14px;
  border:3px solid #E0E0E0; font-family:'Nunito',sans-serif;
  font-size:1rem; font-weight:700; color:#1A237E;
  outline:none; transition:border-color 0.2s;
}
.login-field input:focus { border-color:#7986CB; }
.login-btn {
  width:100%; padding:15px; border:none; border-radius:16px;
  background:linear-gradient(135deg,#a56117,#f07f05); color:white;
  font-family:'Fredoka One',cursive; font-size:1.3rem; cursor:pointer;
  box-shadow:0 6px 20px rgba(255,87,34,0.4); transition:all 0.2s; margin-top:4px;
}
.login-btn:hover { transform:translateY(-3px); }
.login-err { color:#E53935; font-weight:700; font-size:0.88rem; margin-top:10px; min-height:20px; }
.login-users { margin-top:20px; }
.login-users-title { font-size:0.82rem; color:#90A4AE; font-weight:700; margin-bottom:10px; }
.user-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:#f07f05; border-radius:50px; padding:8px 16px;
  margin:4px; cursor:pointer; font-weight:800; font-size:0.9rem;
  color:#3949AB; transition:all 0.2s; border:2px solid transparent;
}
.user-pill:hover { background:#3F51B5; color:#f07f05; transform:translateY(-2px); }

/* Mobile responsive fixes */
@media (max-width: 600px) {
  body { padding-top:190px; }

  .student-btn, .parent-btn, .edu-btn {
    position:fixed;
    top:auto;
    right:12px;
    left:12px;
    width:calc(100% - 24px);
    text-align:center;
    padding:10px 16px;
    font-size:0.9rem;
    box-sizing:border-box;
  }

  .student-btn { top:12px; }
  .parent-btn  { top:60px; }
  .edu-btn     { top:108px; }

  .login-card { padding:28px 22px; max-width:100%; }
}

@media (max-width: 360px) {
  body { padding-top:210px; }
  .student-btn { top:12px; }
  .parent-btn  { top:58px; }
  .edu-btn     { top:104px; }
}