:root{
  --bg:#eef4fb;
  --bg-accent:#f8fbff;
  --panel:#ffffff;
  --panel-2:#f5f9ff;
  --stroke:#d9e5f4;
  --text:#0e2545;
  --muted:#5b6f89;
  --primary:#1660ff;
  --primary-2:#18c3d7;
  --success:#4de086;
  --danger-bg:#fff2f2;
  --danger-text:#9e2b2b;
  --shadow:0 24px 60px rgba(14,37,69,.10);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.sba-auth-page{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(24,195,215,.11), transparent 34%),
    radial-gradient(circle at bottom right, rgba(22,96,255,.10), transparent 28%),
    linear-gradient(180deg,var(--bg-accent) 0%, var(--bg) 100%);
}
.sba-auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 18px;
}
.sba-auth-card{
  width:min(1100px,100%);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border:1px solid rgba(217,229,244,.9);
  border-radius:32px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1.02fr .98fr;
  overflow:hidden;
}
.sba-auth-side{
  padding:38px 42px;
  background:linear-gradient(180deg,#f6fbff 0%, #eef5ff 100%);
  border-right:1px solid rgba(217,229,244,.88);
}
.sba-auth-formwrap{
  padding:38px 42px;
  background:linear-gradient(180deg,#ffffff 0%, #f9fbff 100%);
}
.sba-brandmark{
  width:74px;height:74px;border-radius:22px;
  background:#fff;border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 24px rgba(14,37,69,.07);
  margin-bottom:22px;
}
.sba-brandmark img{max-width:54px;max-height:54px;object-fit:contain;display:block}
.sba-eyebrow{
  display:flex;align-items:center;gap:10px;
  color:#0eb5cf;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:16px;
}
.sba-eyebrow .dot{width:10px;height:10px;border-radius:999px;background:var(--success);box-shadow:0 0 14px rgba(77,224,134,.55)}
.sba-title{margin:0;font-size:56px;line-height:.98;font-weight:800;letter-spacing:-.04em;color:#17345c}
.sba-subtitle{margin:18px 0 0;font-size:18px;line-height:1.35;color:#6180a8;max-width:520px}
.sba-feature-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;
}
.sba-feature{
  padding:20px 20px 18px;border-radius:22px;background:linear-gradient(180deg,#f0f6ff 0%, #ebf2fc 100%);
  border:1px solid var(--stroke);
}
.sba-feature-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6b8db8;margin-bottom:10px}
.sba-feature strong{display:block;font-size:28px;line-height:1;color:#14365f;margin-bottom:10px}
.sba-feature span{display:block;font-size:14px;color:#149ec0}
.sba-form-title{margin:0 0 16px;font-size:28px;line-height:1.1;color:#183659}
.sba-alert{
  margin-bottom:18px;padding:14px 16px;border-radius:18px;border:1px solid transparent;font-size:15px;line-height:1.35;
}
.sba-alert-error{background:var(--danger-bg);border-color:#f0caca;color:var(--danger-text)}
.sba-form{display:block}
.sba-field{margin-bottom:16px}
.sba-field label{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:#17355a}
.sba-field input{
  width:100%;height:56px;border-radius:18px;border:1px solid #d6e2f1;background:#f3f7fd;color:#102c51;
  padding:0 16px;font-size:17px;outline:none;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.sba-field input:focus{border-color:#63a2ff;background:#fff;box-shadow:0 0 0 4px rgba(22,96,255,.08)}
.sba-password-wrap{position:relative}
.sba-password-wrap input{padding-right:106px}
.sba-password-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:#35649f;font-weight:700;font-size:14px;cursor:pointer;padding:8px 10px;border-radius:12px;
}
.sba-password-toggle:hover{background:rgba(22,96,255,.08)}
.sba-submit{
  display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  min-width:220px;height:54px;padding:0 24px;border-radius:18px;font-size:16px;font-weight:800;color:#fff;
  background:linear-gradient(90deg,var(--primary) 0%, var(--primary-2) 100%);
  box-shadow:0 16px 34px rgba(24,118,230,.20);
}
.sba-submit:hover{filter:brightness(1.03)}
.sba-form-note{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.sba-footer-link{margin-top:18px;font-size:13px;color:#6c829d}
.sba-footer-link a{color:#35649f;text-decoration:none}
.sba-footer-link a:hover{text-decoration:underline}
@media (max-width:980px){
  .sba-auth-card{grid-template-columns:1fr}
  .sba-auth-side{border-right:0;border-bottom:1px solid rgba(217,229,244,.88)}
  .sba-title{font-size:44px}
}
@media (max-width:640px){
  .sba-auth-shell{padding:14px}
  .sba-auth-side,.sba-auth-formwrap{padding:24px 20px}
  .sba-title{font-size:38px}
  .sba-feature-grid{grid-template-columns:1fr}
  .sba-submit{width:100%}
}