:root{
  --wpu-blue:#0b4fc4;
  --wpu-blue-dark:#073b96;
  --wpu-ink:#101b31;
  --wpu-muted:#7a859c;
  --wpu-border:#d8e0ec;
  --wpu-bg:#f7faff;
  --wpu-focus:rgba(11,79,196,.16);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--wpu-ink);
  background:#f9fbff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input{font:inherit}
button{cursor:pointer}
.wpu-login-page{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(22px,4vw,58px);
  background:
    radial-gradient(circle at 48% 45%,rgba(255,255,255,.98) 0 24%,rgba(247,250,255,.86) 54%,rgba(241,247,255,.8) 100%),
    linear-gradient(145deg,#f8fbff 0%,#f4f8ff 54%,#f5fbf8 100%);
}
.background-shape{position:absolute;z-index:-2;border-radius:50%;filter:saturate(.9)}
.background-shape-left{
  width:min(52vw,720px);height:min(52vw,720px);left:min(-22vw,-190px);top:min(-24vw,-230px);
  background:linear-gradient(145deg,rgba(191,215,253,.74),rgba(224,236,255,.38));
}
.background-shape-left::after{
  content:"";position:absolute;width:74%;height:74%;left:34%;top:106%;border-radius:50%;
  background:linear-gradient(145deg,rgba(178,207,252,.72),rgba(225,237,255,.24));
}
.background-shape-right{
  width:min(44vw,620px);height:min(44vw,620px);right:min(-20vw,-180px);top:23%;
  background:linear-gradient(145deg,rgba(223,244,235,.76),rgba(241,250,246,.34));
}
.background-shape-right::after{
  content:"";position:absolute;width:78%;height:78%;right:24%;top:106%;border-radius:50%;
  background:linear-gradient(145deg,rgba(218,241,231,.5),rgba(242,250,247,.2));
}
.dot-grid{position:absolute;z-index:-1;width:112px;height:112px;opacity:.66;background-image:radial-gradient(circle,#8db5f0 3px,transparent 3.5px);background-size:27px 27px}
.dot-grid-top{left:5%;top:4%}
.dot-grid-bottom{right:5%;bottom:4%}
.login-card{
  width:min(780px,100%);
  padding:clamp(34px,5vw,72px) clamp(24px,6vw,72px) clamp(30px,5vw,56px);
  border:1px solid rgba(255,255,255,.86);
  border-radius:clamp(26px,3vw,38px);
  background:rgba(255,255,255,.95);
  box-shadow:0 28px 70px rgba(52,78,118,.17),0 5px 18px rgba(52,78,118,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.login-card-header{text-align:center}
.wpu-seal{
  display:block;width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);object-fit:contain;margin:0 auto 25px;
  filter:drop-shadow(0 5px 8px rgba(15,23,42,.09));
}
.university-name{margin:0;color:#192438;font-size:clamp(1.35rem,2.8vw,2.05rem);font-weight:760;line-height:1.18;letter-spacing:-.025em}
.login-card h1{margin:8px 0 0;color:var(--wpu-blue);font-size:clamp(2rem,4.2vw,3.2rem);font-weight:820;line-height:1.08;letter-spacing:.005em}
.section-divider,.or-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.section-divider{margin:42px 0 29px}
.section-divider span,.or-divider span{height:1.5px;background:#e1e7f0}
.section-divider strong{color:#6e7890;font-size:clamp(1rem,2vw,1.35rem);font-weight:700;white-space:nowrap}
.login-form{display:grid;gap:20px}
.field-shell{position:relative;height:82px;border:1.5px solid var(--wpu-border);border-radius:17px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.field-shell:focus-within{border-color:#7da7e7;box-shadow:0 0 0 5px var(--wpu-focus);transform:translateY(-1px)}
.field-shell input{width:100%;height:100%;border:0;outline:0;background:transparent;padding:0 62px 0 78px;color:var(--wpu-ink);font-size:clamp(1rem,2vw,1.25rem);font-weight:540}
.field-shell input::placeholder{color:#8d97aa;opacity:1}
.field-icon{position:absolute;left:28px;top:50%;width:28px;height:28px;transform:translateY(-50%);fill:#7b879d}
.password-toggle{position:absolute;right:15px;top:50%;width:48px;height:48px;transform:translateY(-50%);display:grid;place-items:center;border:0;border-radius:13px;background:transparent;color:#77839a;transition:background .18s ease,color .18s ease}
.password-toggle:hover,.password-toggle:focus-visible{background:#eef4ff;color:var(--wpu-blue);outline:0}
.password-toggle svg{width:29px;height:29px;fill:currentColor}
.password-toggle .eye-closed{display:none}
.password-toggle[aria-pressed="true"] .eye-open{display:none}
.password-toggle[aria-pressed="true"] .eye-closed{display:block}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:3px 0 5px}
.remember-option{display:inline-flex;align-items:center;gap:13px;color:#172238;font-size:1rem;font-weight:650;cursor:pointer;user-select:none}
.remember-option input{position:absolute;opacity:0;pointer-events:none}
.custom-checkbox{position:relative;width:27px;height:27px;flex:0 0 27px;border:2px solid #8995a8;border-radius:6px;background:#fff;transition:.18s ease}
.remember-option input:focus-visible+.custom-checkbox{box-shadow:0 0 0 4px var(--wpu-focus)}
.remember-option input:checked+.custom-checkbox{background:var(--wpu-blue);border-color:var(--wpu-blue)}
.remember-option input:checked+.custom-checkbox::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.text-link{border:0;background:transparent;padding:8px 0;color:#0667eb;font-size:1rem;font-weight:650;text-decoration:none}
.text-link:hover,.text-link:focus-visible{text-decoration:underline;outline:0}
.sign-in-button{position:relative;min-height:76px;width:100%;border:0;border-radius:14px;color:#fff;background:linear-gradient(100deg,#0b4bc4,#0a43ad);box-shadow:0 12px 24px rgba(11,79,196,.19);font-size:clamp(1.05rem,2vw,1.35rem);font-weight:760;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.sign-in-button:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(11,79,196,.25);filter:saturate(1.08)}
.sign-in-button:focus-visible{outline:4px solid rgba(11,79,196,.22);outline-offset:3px}
.sign-in-button:disabled{cursor:wait;opacity:.82;transform:none}
.button-spinner{display:none;position:absolute;right:24px;top:50%;width:22px;height:22px;margin-top:-11px;border:3px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.sign-in-button:disabled .button-spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.or-divider{gap:22px;margin:7px 0 0}
.or-divider strong{color:#717c91;font-size:1rem;font-weight:700}
.google-button{min-height:78px;width:100%;display:flex;align-items:center;justify-content:center;gap:20px;border:1.5px solid var(--wpu-border);border-radius:14px;background:#fff;color:#121d31;font-size:clamp(1rem,2vw,1.22rem);font-weight:650;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.google-button:hover,.google-button:focus-visible{border-color:#aebbd0;background:#f9fbff;transform:translateY(-1px);outline:0}
.google-icon{width:29px;height:29px;flex:0 0 29px}
.login-alert{margin:0 0 22px;padding:14px 17px;border-radius:13px;font-size:.94rem;line-height:1.45;text-align:left}
.login-alert-success{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534}
.login-alert-error{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}
.login-help{min-height:22px;margin:16px 0 0;text-align:center;color:#657188;font-size:.89rem;line-height:1.45}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (max-width:700px){
  .wpu-login-page{place-items:start center;padding:18px 12px;overflow:auto}
  .dot-grid{width:80px;height:80px;background-size:22px 22px}
  .login-card{margin:auto 0;padding:32px 20px;border-radius:25px}
  .wpu-seal{margin-bottom:17px}
  .section-divider{margin:30px 0 23px;gap:12px}
  .field-shell{height:66px;border-radius:14px}
  .field-shell input{padding-left:62px;padding-right:54px}
  .field-icon{left:21px;width:25px;height:25px}
  .password-toggle{right:8px}
  .login-options{align-items:flex-start;gap:12px}
  .remember-option,.text-link{font-size:.92rem}
  .sign-in-button{min-height:64px}
  .google-button{min-height:64px;gap:14px}
}
@media (max-width:420px){
  .login-card h1{font-size:1.82rem}
  .university-name{font-size:1.2rem}
  .section-divider strong{font-size:.93rem}
  .login-options{flex-direction:column;align-items:stretch}
  .text-link{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}