:root{
  --bg:#050914;
  --panel:#0d1728;
  --text:#f5f8ff;
  --muted:#a9b7ca;
  --cyan:#22d3ee;
  --green:#34d399;
  --border:#25364e;
  --danger:#f87171;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  font-family:Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top,#12385d 0,#07111e 38%,var(--bg) 78%);
}

.login-card{
  width:min(520px,100%);
  padding:38px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(145deg,#111e32,var(--panel));
  box-shadow:0 25px 65px rgba(0,0,0,.4);
}

.brand{
  color:var(--cyan);
  font-weight:800;
  font-size:12px;
  letter-spacing:.1em;
}

h1{
  margin:16px 0 8px;
  font-size:32px;
}

.course{
  color:var(--green);
  font-weight:800;
}

.description{
  color:var(--muted);
  line-height:1.6;
}

.notice{
  margin:22px 0;
  padding:14px 16px;
  border-left:3px solid var(--green);
  border-radius:10px;
  background:#07111e;
  color:#ccd7e5;
  line-height:1.55;
}

label{
  display:block;
  margin:16px 0 7px;
  font-weight:700;
}

input{
  display:block;
  width:100%;
  padding:13px 14px;
  border:1px solid #304760;
  border-radius:10px;
  background:#07101c;
  color:white;
  font-size:16px;
}

button{
  width:100%;
  margin-top:22px;
  padding:14px;
  border:0;
  border-radius:11px;
  background:linear-gradient(90deg,#6ee7b7,var(--green));
  color:#032016;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}

#error{
  min-height:24px;
  margin-top:14px;
  color:var(--danger);
}

.help{
  margin-top:24px;
  text-align:center;
  color:#77879c;
  font-size:13px;
  line-height:1.5;
}