*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --blue:      #1B6FA8;
  --blue-h:    #155A8A;
  --blue-soft: #EBF4FB;
  --green:     #1A8A6C;
  --green-soft:#E7F5F0;
  --red:       #B91C1C;
  --red-soft:  #FEF2F2;
  --surf:      #FFFFFF;
  --bg:        #F0F4F8;
  --border:    #DDE3EB;
  --border-m:  #C8D3DD;
  --t1:        #0D1B27;
  --t2:        #2B3F52;
  --t3:        #607182;
  --t4:        #96AABB;
  --r8:8px;--r12:12px;--r16:16px;
}

html,body{
  min-height:100vh;
  font-family:'Manrope',sans-serif;
  background:var(--bg);
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}

.card{
  width:100%;max-width:420px;
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:var(--r16);
  padding:40px 40px 32px;
  box-shadow:0 2px 8px rgba(13,27,39,.06),0 8px 32px rgba(13,27,39,.07);
}

.brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px;}
.brand-mark{
  width:48px;height:48px;border-radius:13px;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;
  box-shadow:0 2px 8px rgba(27,111,168,.28);
}
.brand-name{font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.3px;display:block;text-align:center;}
.brand-sub{font-size:10.5px;font-weight:600;color:var(--blue);letter-spacing:.6px;text-transform:uppercase;margin-top:4px;display:block;text-align:center;}

.divider{height:1px;background:var(--border);margin:0 -40px 28px;}

.form-title{font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.2px;margin-bottom:6px;}
.form-sub{font-size:12.5px;font-weight:500;color:var(--t3);margin-bottom:22px;line-height:1.5;}

.form{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}

label{font-size:12.5px;font-weight:700;color:var(--t2);}

input[type="text"],
input[type="email"],
input[type="password"]{
  width:100%;height:44px;
  background:var(--bg);
  border:1.5px solid var(--border-m);
  border-radius:var(--r8);
  padding:0 14px;
  font-family:'Manrope',sans-serif;
  font-size:13.5px;font-weight:500;
  color:var(--t1);outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  appearance:none;
}
input::placeholder{color:var(--t4);font-weight:400;}
input:focus{border-color:var(--blue);background:var(--surf);box-shadow:0 0 0 3px rgba(27,111,168,.09);}
input.error{border-color:var(--red);background:var(--red-soft);}

.pw-wrap{position:relative;}
.pw-wrap input{padding-right:40px;}
.pw-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:none;background:none;cursor:pointer;
  color:var(--t4);padding:4px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;transition:color .12s;
}
.pw-toggle:hover{color:var(--t2);}
.pw-toggle svg{width:16px;height:16px;}

.field-foot{display:flex;align-items:center;justify-content:flex-end;margin-top:-4px;}
.link-subtle{
  font-size:12px;font-weight:600;color:var(--t3);
  background:none;border:none;cursor:pointer;
  font-family:'Manrope',sans-serif;
  text-decoration:none;transition:color .12s;padding:0;
}
.link-subtle:hover{color:var(--blue);}

.alert-error{
  font-size:11.5px;font-weight:600;color:var(--red);
  padding:10px 13px;
  background:var(--red-soft);border:1px solid rgba(185,28,28,.18);
  border-radius:var(--r8);margin-bottom:4px;
}

.btn-submit{
  width:100%;height:44px;
  background:var(--blue);border:none;border-radius:var(--r8);
  font-family:'Manrope',sans-serif;
  font-size:14px;font-weight:800;color:#fff;
  cursor:pointer;transition:background .15s,transform .1s;
  letter-spacing:-.1px;margin-top:4px;
}
.btn-submit:hover{background:var(--blue-h);}
.btn-submit:active{transform:scale(.985);}

.secondary{text-align:center;font-size:13px;font-weight:500;color:var(--t3);margin-top:18px;}
.secondary a{
  font-size:13px;font-weight:700;color:var(--blue);
  text-decoration:none;transition:color .12s;
}
.secondary a:hover{color:var(--blue-h);}

.bottom-note{
  font-size:11px;font-weight:500;color:var(--t4);
  text-align:center;line-height:1.55;
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--border);
}

.agreement{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r8);
  cursor:pointer;
}
.agreement input[type="checkbox"]{
  width:16px;height:16px;min-width:16px;
  margin-top:1px;cursor:pointer;
  accent-color:var(--blue);
}
.agreement-text{font-size:12px;font-weight:500;color:var(--t2);line-height:1.5;}
.agreement-text a{color:var(--blue);font-weight:700;text-decoration:none;}