/* ============================================================
 * AUTH PAGES STYLES (login / signup / forgot / reset)
 * ============================================================ */

.auth-wrap{
  min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--bg);
}
/* Left brand panel */
.auth-brand{
  position:relative; overflow:hidden; color:#fff; padding:3rem;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(135deg,#1565C0 0%, #1E88E5 55%, #FF5722 130%);
}
.auth-brand::after{
  content:""; position:absolute; width:520px; height:520px; right:-160px; top:-120px;
  border:60px solid rgba(255,255,255,.08); border-radius:50%;
}
.auth-brand::before{
  content:""; position:absolute; width:340px; height:140px; left:-60px; bottom:40px;
  border:34px solid rgba(184,148,90,.35); border-radius:50%; transform:rotate(-20deg);
}
.auth-brand .logo-row{ display:flex; align-items:center; gap:.8rem; z-index:2; }
.auth-brand .logo-row img{ width:54px; height:54px; object-fit:contain; border-radius:50%; }
.auth-brand h1{ font-size:2.1rem; margin-top:1rem; z-index:2; }
.auth-brand p{ opacity:.92; max-width:420px; z-index:2; }
.auth-brand ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; z-index:2; margin-top:1rem; }
.auth-brand ul li{ display:flex; gap:.6rem; align-items:center; }
.auth-brand ul li i{ background:rgba(255,255,255,.2); width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; }
.auth-brand .foot{ font-size:.82rem; opacity:.8; z-index:2; }

/* Right form panel */
.auth-form-panel{ display:flex; align-items:center; justify-content:center; padding:2.5rem 1.5rem; overflow-y:auto; }
.auth-card{ width:100%; max-width:440px; animation:fadeUp .5s ease both; }
.auth-card.wide{ max-width:760px; }
.auth-card h2{ font-size:1.6rem; }
.auth-card .sub{ color:var(--text-soft); margin-bottom:1.4rem; }
.auth-logo-mobile{ display:none; text-align:center; margin-bottom:1rem; }
.auth-logo-mobile img{ width:64px; height:64px; object-fit:contain; margin:0 auto; border-radius:50%; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }

/* Password field with toggle */
.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:2.8rem; }
.pw-toggle{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--text-soft); font-size:1rem; }

/* Live login-attempt and timed-pause status */
.login-security-status{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:.7rem; align-items:start;
  margin:-.15rem 0 .9rem; padding:.72rem .78rem; border:1px solid rgba(37,99,235,.2);
  border-radius:13px; background:rgba(37,99,235,.055); color:var(--text);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.login-security-status.warning{ background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.35); }
.login-security-status.locked{ background:rgba(239,68,68,.065); border-color:rgba(239,68,68,.35); box-shadow:0 8px 22px rgba(239,68,68,.08); }
.login-security-icon{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  color:#2563eb; background:rgba(37,99,235,.11); }
.login-security-status.warning .login-security-icon{ color:#b45309; background:rgba(245,158,11,.13); }
.login-security-status.locked .login-security-icon{ color:#dc2626; background:rgba(239,68,68,.13); }
.login-security-copy{ min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.login-security-copy strong{ font-size:.86rem; line-height:1.25; }
.login-security-copy>span{ color:var(--text-soft); font-size:.74rem; line-height:1.35; }
.login-attempt-dots{ display:flex; gap:.35rem; margin-top:.22rem; min-height:7px; }
.login-attempt-dots span{ width:22px; height:5px; border-radius:999px; transition:background .2s ease,transform .2s ease; }
.login-attempt-dots .available{ background:#22c55e; }
.login-attempt-dots .used{ background:#ef4444; transform:scaleX(.78); opacity:.72; }
.login-lock-progress{ display:none; height:5px; margin-top:.35rem; overflow:hidden; border-radius:999px; background:rgba(239,68,68,.12); }
.login-lock-progress.visible{ display:block; }
.login-lock-progress span{ display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f97316,#ef4444); transition:width .25s linear; }

/* Strength meter */
.pw-meter{ height:7px; background:var(--border); border-radius:999px; overflow:hidden; margin-top:.5rem; }
.pw-meter span{ display:block; height:100%; width:0; border-radius:999px; transition:width .3s, background .3s; }
.pw-meter-label{ font-size:.76rem; margin-top:.3rem; font-weight:600; }

.auth-row{ display:flex; justify-content:space-between; align-items:center; font-size:.86rem; margin:.4rem 0 1rem; }
.checkbox{ display:flex; align-items:center; gap:.45rem; cursor:pointer; }
.auth-foot{ text-align:center; margin-top:1.2rem; font-size:.9rem; color:var(--text-soft); }

@media (max-width: 900px){
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .auth-logo-mobile{ display:block; }
  .grid2{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .login-security-status{ grid-template-columns:30px minmax(0,1fr); gap:.6rem; padding:.65rem; }
  .login-security-icon{ width:30px; height:30px; }
  .login-attempt-dots span{ flex:1 1 0; max-width:28px; }
}

/* v411: mobile typography only; authentication and form geometry unchanged. */
@media screen and (max-width:599px){
  .auth-card h2,.setup-head h1{font-size:1.0625rem!important}
  .auth-card :is(p,.sub),.setup-body p,.setup-head p{font-size:.8125rem!important}
  .auth-card :is(.auth-row,.auth-foot,.btn,.login-security-copy strong),.setup-card :is(.btn,.setup-submit,.setup-account strong){font-size:.75rem!important}
  .auth-card :is(label,.hint,.err,.pw-meter-label,.login-security-copy>span),.setup-card :is(label,.setup-help,.setup-error){font-size:.6875rem!important}
  .auth-card :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select),.setup-card :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){font-size:1rem!important}
  .auth-card .btn>i{font-size:1rem!important}
  .auth-card .auth-foot>a>i{font-size:.9rem!important}
}

/* MOBILE TYPOGRAPHY STANDARD V1.1 — auth/setup pages only. */
@media screen and (max-width:599px){
  :is(.auth-wrap,.auth-card,.setup-card){--qedu-auth-page:17px;--qedu-auth-body:13px;--qedu-auth-action:12px;--qedu-auth-label:11px;--qedu-auth-input:16px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px}
  :is(.auth-wrap,.auth-card,.setup-card) :is(h1,h2,p,a,button,label,input,textarea,select,option,small,strong,span){font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
  :is(.auth-card h2,.setup-head h1){font-size:var(--qedu-auth-page)!important;font-weight:800!important;line-height:1.3!important}
  .auth-card :is(p,.sub),.setup-body p,.setup-head p{font-size:var(--qedu-auth-body)!important;font-weight:500!important;line-height:1.45!important}
  .auth-card :is(.auth-row,.auth-foot,.btn,a,.login-security-copy strong),.setup-card :is(.btn,a,.setup-submit,.setup-account strong){font-size:var(--qedu-auth-action)!important;font-weight:700!important;line-height:1.35!important}
  .auth-card :is(label,.hint,.err,.pw-meter-label,.login-security-copy>span),.setup-card :is(label,.setup-help,.setup-error){font-size:var(--qedu-auth-label)!important;font-weight:500!important;line-height:1.45!important}
  .auth-card label,.setup-card label{font-weight:700!important;line-height:1.35!important}
  .auth-card :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select,option),.setup-card :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select,option){font-size:var(--qedu-auth-input)!important;font-weight:400!important;line-height:1.4!important}
  .auth-card :is(.auth-foot,a,.btn),.setup-card :is(a,.btn,.setup-submit){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}