body {
  font-family: Segoe UI, Arial;
  background:#f9fafc;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.container {
  text-align:center;
  background:#fff;
  padding:40px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  max-width:520px;
  opacity:0;
  transform:translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.logo {
  width:160px;
  margin-bottom:20px;
}

h1 {
  color:#1e293b;
  margin-bottom:10px;
}

.tagline {
  font-size:16px;
  color:#374151;
  margin-bottom:30px;
}

.role-btn {
  display:block;
  width:100%;
  margin:10px 0;
  padding:14px;
  font-size:16px;
  font-weight:600;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:transform 0.2s ease, background 0.3s ease;
}

.role-btn.teacher {
  background:#3b82f6;
  color:#fff;
}

.role-btn.teacher:hover {
  background:#2563eb;
  transform:scale(1.03);
}

.role-btn.student {
  background:#f97316;
  color:#fff;
}

.role-btn.student:hover {
  background:#ea580c;
  transform:scale(1.03);
}