.login-centered-page{min-height:100vh;margin:0;color:#202637;background:#0d1223;font-family:Inter}
.login-centered-page *{box-sizing:border-box}
.login-centered-shell{position:relative;display:grid;min-height:100vh;padding:34px 20px;overflow:hidden;place-items:center;background:radial-gradient(circle at 50% 10%,#1d375d 0,transparent 35%),linear-gradient(145deg,#0c1221,#151831 65%,#162c4c)}
.login-centered-shell:before{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at center,#000,transparent 72%);content:""}
.login-centered-orb{position:absolute;border-radius:50%;filter:blur(5px);pointer-events:none}
.login-centered-orb.one{top:-170px;right:-100px;width:430px;height:430px;background:radial-gradient(circle,rgba(92,157,255,.24),transparent 68%)}
.login-centered-orb.two{bottom:-210px;left:-130px;width:470px;height:470px;background:radial-gradient(circle,rgba(63,204,163,.1),transparent 67%)}
.login-centered-card{position:relative;z-index:1;width:min(465px,100%);padding:31px 34px 27px;border:1px solid rgba(255,255,255,.16);border-radius:25px;background:rgba(255,255,255,.97);box-shadow:0 35px 90px rgba(2,4,15,.42),inset 0 1px 0 #fff;backdrop-filter:blur(15px)}
.login-centered-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:23px;border-bottom:1px solid #eceef3}
.login-astra-logo{display:flex;align-items:center;width:230px;height:52px;overflow:hidden}
.login-astra-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.login-centered-page .brand{color:#202637;font-size:19px}
.login-centered-page .brand-symbol{width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,#6aa6ff,#3575d5);box-shadow:0 9px 22px rgba(47,125,244,.25)}
.login-centered-top>span{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #dcefe5;border-radius:999px;color:#16845a;background:#f0faf5;font-size:8px;font-weight:600}
.login-centered-top>span i{width:6px;height:6px;border-radius:50%;background:#43c68e;box-shadow:0 0 0 4px rgba(67,198,142,.11)}
.login-centered-heading{padding:25px 0 22px}
.login-centered-heading>span{color:#4e85d7;font-size:9px;font-weight:700;letter-spacing:.13em}
.login-centered-heading h1{margin:6px 0 5px;color:#202637;font-size:29px;line-height:1.2;letter-spacing:-.04em}
.login-centered-heading p{margin:0;color:#848c9b;font-size:10px}
.login-centered-alert{display:flex;align-items:center;gap:8px;margin-top:-7px;border-radius:11px;font-size:10px}
.login-centered-alert i{font-size:18px}
.login-centered-card form{gap:15px}
.login-centered-card form>label{gap:8px;color:#454d5d;font-size:10px}
.login-centered-field{position:relative}
.login-centered-field>i{position:absolute;top:50%;left:14px;color:#8992a3;font-size:19px;transform:translateY(-50%);pointer-events:none}
.login-centered-field input{height:51px;padding:0 15px 0 44px;border:1px solid #dfe3ea;border-radius:12px;background:#fafbfc;font-size:11px}
.login-centered-field input:focus{border-color:#75a3e9;background:#fff;box-shadow:0 0 0 4px rgba(47,125,244,.08)}
.login-centered-field.password-field input{padding-right:62px;padding-left:44px}
.login-centered-field.password-field button{top:8px;right:8px;height:35px;border-radius:8px;font-size:9px}
.login-centered-options{display:flex;align-items:center;justify-content:space-between;font-size:9px}
.login-centered-options label{display:flex;align-items:center;gap:7px;color:#7a8392;font-weight:400;cursor:pointer}
.login-centered-options input{width:15px;height:15px;accent-color:#2f7df4}
.login-centered-options a{color:#2f7df4;font-weight:600}
.login-centered-submit{display:flex;align-items:center;justify-content:space-between;width:100%;height:51px;padding:0 17px;border:0;border-radius:12px;color:#fff;background:linear-gradient(135deg,#5d95e9,#3673cf);box-shadow:0 12px 27px rgba(47,125,244,.23);font:600 11px Inter;cursor:pointer;transition:.2s}
.login-centered-submit:hover{box-shadow:0 15px 31px rgba(47,125,244,.3);transform:translateY(-1px)}
.login-centered-submit i{font-size:20px}
.login-centered-register{margin:22px 0 20px;padding-top:20px;border-top:1px solid #eceef3;color:#7d8594;text-align:center;font-size:10px}
.login-centered-register a{color:#2f7df4;font-weight:600}
.login-centered-card footer{display:flex;align-items:center;justify-content:space-between;color:#9299a6;font-size:8px}
.login-centered-card footer a,.login-centered-card footer span{display:flex;align-items:center;gap:5px}
.login-centered-card footer i{font-size:15px}
.login-centered-card footer span i{color:#58a985}
@media(max-width:520px){.login-centered-shell{padding:20px 14px;place-items:center}.login-centered-card{padding:25px 21px 22px;border-radius:20px}.login-astra-logo{width:210px;height:48px}.login-centered-heading h1{font-size:25px}.login-centered-options{align-items:flex-start;gap:10px;flex-direction:column}.login-centered-card footer{align-items:flex-start;gap:9px;flex-direction:column}.login-centered-top>span{display:none}}
/* White interactive network background v3 */
.login-centered-page {
  background: #fff;
}

.login-centered-shell {
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 20%, rgba(47,125,244,.055), transparent 27%),
    radial-gradient(circle at 84% 78%, rgba(55, 181, 144, .045), transparent 26%),
    #fff;
}

.login-centered-shell::before {
  z-index: -2;
  opacity: .42;
  background-image:
    linear-gradient(rgba(47,125,244,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,125,244,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000 8%, transparent 75%);
}

.login-centered-orb {
  display: none;
}

.login-network-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.login-centered-card {
  border-color: #e2e5ed;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 28px 80px rgba(31, 35, 69, .13), 0 2px 8px rgba(31, 35, 69, .04);
}

@media (prefers-reduced-motion: reduce) {
  .login-network-canvas { opacity: .45; }
}
/* Slightly larger centered login typography v4 */
.login-centered-page .brand{font-size:20px}
.login-centered-top>span{font-size:9px}
.login-centered-heading>span{font-size:10px}
.login-centered-heading h1{font-size:30px}
.login-centered-heading p{font-size:11px}
.login-centered-alert{font-size:11px}
.login-centered-card form>label{font-size:11px}
.login-centered-field input{font-size:12px}
.login-centered-field.password-field button{font-size:10px}
.login-centered-options{font-size:10px}
.login-centered-submit{font-size:12px}
.login-centered-register{font-size:11px}
.login-centered-card footer{font-size:9px}

/* Slightly larger centered login typography v7 */
.login-centered-page .brand{font-size:21px}
.login-centered-top>span{font-size:10px}
.login-centered-heading>span{font-size:11px}
.login-centered-heading h1{font-size:32px}
.login-centered-heading p{font-size:12px}
.login-centered-alert{font-size:12px}
.login-centered-card form>label{font-size:12px}
.login-centered-field input{font-size:13px}
.login-centered-field.password-field button{font-size:11px}
.login-centered-options{font-size:11px}
.login-centered-submit{font-size:13px}
.login-centered-register{font-size:12px}
.login-centered-card footer{font-size:10px}

/* Protected footer alignment v5 */
.login-centered-card footer{justify-content:center}

/* Round remember selector v6 */
.login-centered-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}

.login-centered-options input[type="checkbox"] {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #cbd0da;
  border-radius: 50%;
  appearance: none;
  background: #fff;
  cursor: pointer;
  transition: .2s;
}

.login-centered-options input[type="checkbox"]:checked {
  border-color: #2f7df4;
  background: #2f7df4;
  box-shadow: 0 0 0 4px rgba(47,125,244,.1);
}

.login-centered-options input[type="checkbox"]:checked::after {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  content: "";
}
/* Polished round remember control v7 */
.login-centered-options input[type="checkbox"] {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #c5d9f7;
  background: linear-gradient(145deg, #fff, #f0f6ff);
  box-shadow: 0 3px 9px rgba(51,99,170,.1), inset 0 1px 0 #fff;
}

.login-centered-options input[type="checkbox"]:hover {
  border-color: #80aced;
  box-shadow: 0 0 0 4px rgba(47,125,244,.08);
}

.login-centered-options input[type="checkbox"]:checked {
  border-color: #2f7df4;
  background: linear-gradient(145deg, #68a4ff, #3574d3);
  box-shadow: 0 4px 11px rgba(47,125,244,.28), 0 0 0 4px rgba(47,125,244,.09);
}

.login-centered-options input[type="checkbox"]:checked::after {
  inset: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(12,37,74,.2);
}
/* Perfect circle dimensions v8 */
.login-centered-options label input[type="checkbox"] {
  display: inline-block;
  flex: 0 0 20px;
  width: 20px !important;
  min-width: 20px;
  max-width: 20px;
  height: 20px !important;
  min-height: 20px;
  max-height: 20px;
  padding: 0 !important;
  border-radius: 999px !important;
  aspect-ratio: 1 / 1;
  line-height: 0;
  vertical-align: middle;
}
/* Light eye password toggle v9 */
.login-centered-field.password-field .login-centered-password-toggle {
  display: grid;
  place-items: center;
  width: 35px;
  padding: 0;
  color: #7e8798;
  background: transparent;
}

.login-centered-password-toggle .material-symbols-rounded {
  font-size: 21px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.login-centered-field.password-field .login-centered-password-toggle:hover {
  color: #2f7df4;
  background: #f0f6ff;
}
/* Successful login transition v10 */
.login-centered-success {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: -7px 0 17px;
  padding: 12px 14px;
  border: 1px solid #cbead9;
  border-radius: 11px;
  color: #167b54;
  background: linear-gradient(135deg, #effaf4, #f8fdfb);
  animation: loginSuccessIn .35s ease both;
}

.login-centered-success > i {
  flex: 0 0 auto;
  color: #31ad77;
  font-size: 24px;
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

.login-centered-success > div {
  display: flex;
  flex-direction: column;
}

.login-centered-success b {
  font-size: 11px;
}

.login-centered-success span {
  margin-top: 1px;
  color: #669080;
  font-size: 9px;
}

.login-centered-spinner {
  display: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 2px solid rgba(255, 255, 255, .38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loginSpin .75s linear infinite;
}

.login-centered-submit.is-loading {
  cursor: wait;
  opacity: .94;
  transform: none;
}

.login-centered-submit.is-loading .login-centered-spinner {
  display: block;
}

.login-centered-submit.is-loading [data-login-arrow] {
  display: none;
}

@keyframes loginSpin { to { transform: rotate(360deg); } }
@keyframes loginSuccessIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media(prefers-reduced-motion:reduce) {
  .login-centered-success { animation: none; }
}

/* Unified client authentication typography v8 */
.login-centered-heading > span{font-size:12px}
.login-centered-heading h1{font-size:31px}
.login-centered-heading p{font-size:13px;line-height:1.55}
.login-centered-alert{font-size:13px}
.login-centered-card form > label{font-size:13px}
.login-centered-field input{font-size:14px}
.login-centered-options{font-size:12px}
.login-centered-submit{font-size:14px}
.login-centered-register{font-size:13px}
.login-centered-card footer{font-size:11px}
.login-centered-success b{font-size:13px}
.login-centered-success span{font-size:11px}

@media(max-width:520px){
  .login-centered-heading h1{font-size:28px}
}