/* SIMPLE_LOGIN_V5 */
.login-gate{
  padding:20px;
  background:
    radial-gradient(circle at 50% 0%,rgba(95,127,174,.08),transparent 30%),
    #080a0d;
}

.login-card{
  position:relative;
  width:min(400px,100%);
  padding:34px 32px 28px;
  border:1px solid #2b323a;
  border-radius:24px;
  background:#111419;
  box-shadow:0 28px 80px rgba(0,0,0,.44);
  overflow:hidden;
}

.login-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#b69a5d,#5e9b75,#a9666d,#5f7fae);
  opacity:.9;
}

.login-card .login-brand{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin:0 0 28px;
  padding:18px 16px;
  border:1px solid #2a3139;
  border-radius:18px;
  background:linear-gradient(180deg,#181c21 0%,#15191e 100%);
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}

body .login-gate .login-card .login-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:3px solid transparent !important;
  border-radius:17px;
  background:
    linear-gradient(#15191e,#15191e) padding-box,
    linear-gradient(135deg,#b69a5d 0 25%,#5e9b75 25% 50%,#a9666d 50% 75%,#5f7fae 75%) border-box !important;
  color:#f1f4f7 !important;
  font-size:13px !important;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.login-card .login-brand>div:last-child{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.login-card .login-brand strong{
  width:100%;
  display:block;
  margin:0;
  text-align:center;
  font-size:16px;
  line-height:1.2;
  color:#f3f5f7;
}

.login-card .login-brand small{
  width:100%;
  display:block;
  margin-top:5px;
  text-align:center;
  color:#818a94;
  font-size:10px;
}

.login-card h1{
  width:100%;
  display:block;
  margin:0 auto;
  padding:0;
  text-align:center !important;
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.035em;
}

.login-card>p{
  width:100%;
  max-width:330px;
  display:block;
  margin:10px auto 27px;
  padding:0;
  text-align:center !important;
  color:#818a94;
  font-size:11.5px;
  line-height:1.6;
}

.login-grid{
  display:grid;
  gap:15px;
}

.login-grid label{
  color:#a8b0b8;
  font-size:10px;
  font-weight:750;
}

.login-grid input{
  min-height:52px;
  margin-top:7px;
  padding:0 15px;
  border:1px solid #303842;
  border-radius:13px;
  background:#0b0e12;
  color:#f3f5f7;
  font-size:12px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.login-grid input::placeholder{
  color:#5e6872;
}

.login-grid input:focus{
  border-color:#687481;
  background:#0e1217;
  box-shadow:0 0 0 3px rgba(125,135,146,.10);
}

.login-card #loginSubmit{
  min-height:52px;
  margin-top:4px;
  border:1px solid #eef0f2;
  border-radius:13px;
  background:#eef0f2;
  color:#111317;
  font-size:11px;
  font-weight:900;
  box-shadow:none;
  transition:background .15s ease,transform .15s ease;
}

.login-card #loginSubmit:hover{
  background:#fff;
  transform:translateY(-1px);
}

.login-card #loginSubmit:active{
  transform:translateY(0);
}

.login-error{
  margin-top:14px;
  border-radius:12px;
}

.login-note{
  max-width:340px;
  margin:20px auto 0;
  padding-top:17px;
  border-top:1px solid #252b32;
  text-align:center;
  color:#77818b;
  font-size:9.5px;
  line-height:1.75;
}

@media(max-width:520px){
  .login-gate{padding:16px}
  .login-card{width:min(420px,100%);padding:30px 22px 24px;border-radius:20px}
  .login-card .login-brand{margin-bottom:24px;padding:16px 14px;border-radius:16px}
  body .login-gate .login-card .login-mark{width:54px;height:54px;border-radius:16px}
  .login-card h1{font-size:25px}
  .login-card>p{max-width:310px;margin-bottom:23px}
  .login-grid input,.login-card #loginSubmit{min-height:51px}
  .login-note{max-width:320px}
}

/* Force true horizontal centering over the legacy inline login rules. */
body.auth-locked .login-gate .login-card #loginTitle{
  width:100% !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
body.auth-locked .login-gate .login-card #loginTitle + p{
  width:100% !important;
  max-width:330px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

/* Accessibility audit: keep the approved dark palette while increasing small-text contrast. */
.agenda-panel.panel > .panelhead > small,
#historyCountLabel,
.quick-card .left small,
#permissionFilterSubtitle,
.agenda-empty,
.student-empty,
.computer-empty,
.history-empty{
  color:#8a949e !important;
}