/* ============ LOGIN SCREEN ============ */
.login-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#17324d 0%,#1f4b76 42%,#2563eb 100%);
  overflow-y:auto;padding:30px 0;
}
.login-box{
  position:relative;overflow:hidden;flex-shrink:0;margin:auto;
  background:rgba(255,255,255,0.98);padding:44px 38px;border-radius:18px;
  width:min(92vw,440px);box-shadow:0 22px 70px rgba(23,50,77,0.28);text-align:center;
  border:1px solid rgba(147,181,255,0.7);backdrop-filter:blur(8px);
  font-family:'Avenir Next','Trebuchet MS',sans-serif;
}
.login-box::before{
  content:"";position:absolute;inset:0;
  background:url('/static/logo.png') no-repeat center 30%;
  background-size:260px;opacity:.06;pointer-events:none;
}
.login-box > *{position:relative}

/* Logo + school name row at the top of the login card */
.login-brand{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px;
}
.login-brand img{
  width:52px;height:52px;object-fit:contain;flex-shrink:0;
}
.login-brand-rule{
  width:1px;height:36px;background:#D4C9BE;flex-shrink:0;
}
.login-brand span{
  font-size:15px;font-weight:700;color:#17324d;letter-spacing:.3px;text-align:left;
}

.login-badge{
  display:inline-flex;align-items:center;justify-content:center;padding:7px 16px;border-radius:999px;
  background:#ebf2ff;color:#17324d;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;margin-bottom:18px;
}
.login-box h2{margin:0;color:#1f2937;font-size:42px;line-height:1.1}
.school-title{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:0}
.login-subtitle{margin:8px 0 0;color:#2563eb;font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.login-caption{margin:18px 0 24px;color:#64748b;font-size:15px;line-height:1.5}
.login-box form{display:flex;flex-direction:column;gap:14px}
.login-box input,.login-box button{font-family:inherit}
.login-box input{
  padding:14px 16px;border:1px solid #D4C9BE;border-radius:10px;font-size:15px;background:#FFFAF5;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.login-box input:focus{outline:none;border-color:#9B8B7E;box-shadow:0 0 0 3px rgba(155,139,126,.12)}
.login-box button{margin-top:8px;padding:14px 18px;border-radius:10px;font-size:16px;font-weight:700;letter-spacing:.3px}
.login-error{color:#8B3A3A;font-size:13px;min-height:16px;margin-top:14px}
.login-links{display:flex;justify-content:center;margin-top:14px;font-size:13px}
.login-links a{color:#8B6F47;text-decoration:none;cursor:pointer}
.login-links a:hover{text-decoration:underline}

/* ---- Forgot password / Change password modal ---- */
.modal-overlay{
  position:fixed;inset:0;background:#4A3C2A99;display:flex;align-items:center;justify-content:center;z-index:50;
}
.modal-box{
  background:#FFFAF5;border-radius:14px;padding:30px 28px;width:min(92vw,400px);
  box-shadow:0 20px 60px #0000004d;text-align:left;
}
.modal-box h3{margin:0 0 6px;color:#6B5344}
.modal-box p{margin:0 0 18px;color:#9B8B7E;font-size:13px}
.modal-box form{display:flex;flex-direction:column;gap:12px}
.modal-box input{padding:11px 12px;border:1px solid #D4C9BE;border-radius:6px;font:inherit}
.modal-actions{display:flex;gap:10px;margin-top:6px}
.modal-actions button{flex:1}
.modal-msg{font-size:13px;min-height:16px;margin-top:4px}
.modal-msg.success{color:#556B4B}
.modal-msg.error{color:#8B3A3A}