
:root{
  --auth-cream:#f3efe7;
  --auth-paper:#fbf8f2;
  --auth-navy:#173653;
  --auth-green:#2e8057;
  --auth-gold:#d2a45e;
  --auth-line:#d9cbb8;
  --auth-ink:#15293d;
  --auth-muted:#66717a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--auth-ink)}
body.usob-auth-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 12% 18%,rgba(210,164,94,.08),transparent 22%),
    var(--auth-cream);
}
.usob-auth-brand{
  height:92px;
  display:flex;
  align-items:center;
  padding:0 clamp(24px,4vw,68px);
  border-bottom:1px solid var(--auth-line);
  background:rgba(251,248,242,.96);
}
.usob-auth-logo{display:flex;align-items:center;gap:13px;color:var(--auth-navy);text-decoration:none}
.usob-auth-mark{
  width:54px;height:54px;display:grid;place-items:center;border:1.5px solid var(--auth-gold);
  border-radius:50%;color:#a66d28;font-size:29px
}
.usob-auth-logo strong{display:block;font:700 22px/18px Georgia,serif;letter-spacing:.02em}
.usob-auth-logo small{display:block;margin-top:6px;color:#8e5b24;font-size:7px;font-weight:800;letter-spacing:.13em}
.usob-auth-shell{
  flex:1;
  width:100%;
  display:grid;
  place-items:center;
  padding:42px clamp(20px,4vw,70px);
}
.usob-auth-card{
  width:min(1240px,100%);
  min-height:610px;
  display:grid;
  grid-template-columns:minmax(430px,.85fr) minmax(0,1.15fr);
  overflow:hidden;
  border:1px solid var(--auth-line);
  border-radius:13px;
  background:var(--auth-paper);
  box-shadow:0 20px 50px rgba(29,45,58,.08);
}
.usob-auth-form-panel{display:flex;align-items:center;padding:48px 55px;background:var(--auth-paper)}
.usob-auth-form-wrap{width:100%;max-width:470px;margin:auto}
.usob-auth-kicker{margin:0;color:#9c6528;font-size:8px;font-weight:800;letter-spacing:.14em}
.usob-auth-form-wrap h1{margin:8px 0 10px;color:var(--auth-navy);font:700 40px/1.03 Georgia,serif}
.usob-auth-intro{margin:0 0 25px;color:#46515a;font-size:11px;line-height:1.6}
.usob-auth-form{display:grid;gap:14px}
.usob-auth-form label>span{display:block;margin-bottom:6px;color:#4e5961;font-size:8px;font-weight:800;text-transform:uppercase}
.usob-auth-form input{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--auth-line);
  border-radius:6px;
  outline:none;
  background:#fff;
  color:var(--auth-ink);
  font:inherit;
}
.usob-auth-form input:focus{border-color:var(--auth-green);box-shadow:0 0 0 3px rgba(46,128,87,.08)}
.usob-auth-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.usob-auth-primary,.usob-auth-secondary{
  min-height:44px;
  display:grid;
  place-items:center;
  border-radius:5px;
  text-decoration:none;
  text-transform:uppercase;
  font-size:8px;
  font-weight:800;
  letter-spacing:.03em;
  cursor:pointer;
}
.usob-auth-primary{border:0;background:var(--auth-navy);color:#fff}
button.usob-auth-primary{width:100%}
.usob-auth-secondary{border:1px solid var(--auth-gold);background:#fffaf4;color:var(--auth-navy)}
.usob-auth-form-row{text-align:right;margin-top:-4px}
.usob-auth-form-row a,.usob-auth-bottom-link a{color:var(--auth-green);text-decoration:none;font-size:9px;font-weight:700}
.usob-auth-bottom-link{margin-top:18px;text-align:center;color:var(--auth-muted);font-size:9px}
.usob-auth-help{margin:-4px 0 0;color:var(--auth-muted);font-size:8px}
.usob-auth-divider{display:flex;align-items:center;gap:12px;margin:21px 0 13px;color:#9b9287;font-size:7px;font-weight:800}
.usob-auth-divider:before,.usob-auth-divider:after{content:"";height:1px;flex:1;background:#e1d7c9}
.usob-auth-success,.usob-auth-error{margin:0 0 16px;padding:11px 13px;border-radius:5px;font-size:9px;line-height:1.45}
.usob-auth-success{border:1px solid #bdd9c7;background:#e7f2ea;color:#236644}
.usob-auth-error{border:1px solid #dfbbb3;background:#f7e8e5;color:#91493d}
.usob-auth-link-button{margin-top:12px}
.usob-auth-visual{
  position:relative;
  min-height:610px;
  overflow:hidden;
  background:#173653;
}
.usob-auth-visual:before{
  content:"";
  position:absolute;z-index:2;inset:0 auto 0 0;width:130px;
  background:linear-gradient(90deg,var(--auth-paper) 0%,rgba(251,248,242,.9) 18%,rgba(251,248,242,.55) 48%,rgba(251,248,242,0) 100%);
}
.usob-auth-visual:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,28,40,.42) 0%,rgba(8,28,40,0) 52%);
}
.usob-auth-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.usob-auth-visual-copy{
  position:absolute;z-index:3;left:95px;right:45px;bottom:42px;color:#fff
}
.usob-auth-visual-copy small{display:block;color:#e6c183;font-size:8px;font-weight:800;letter-spacing:.14em}
.usob-auth-visual-copy strong{display:block;margin-top:8px;font:700 30px/1.05 Georgia,serif}
.usob-auth-visual-copy p{max-width:500px;margin:10px 0 0;color:rgba(255,255,255,.88);font-size:10px;line-height:1.6}
.usob-auth-footer{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 clamp(24px,4vw,68px);
  border-top:1px solid var(--auth-line);
  background:var(--auth-paper);
  color:#6d7479;
  font-size:8px;
}
.usob-auth-footer nav{display:flex;gap:20px}
.usob-auth-footer a{color:var(--auth-navy);text-decoration:none;text-transform:uppercase;font-weight:800}
@media(max-width:900px){
  .usob-auth-card{grid-template-columns:1fr}
  .usob-auth-visual{min-height:300px;order:-1}
  .usob-auth-visual:before{display:none}
  .usob-auth-form-panel{padding:38px 30px}
}
@media(max-width:560px){
  .usob-auth-brand{height:78px;padding:0 18px}
  .usob-auth-mark{width:45px;height:45px}
  .usob-auth-logo strong{font-size:18px;line-height:16px}
  .usob-auth-shell{padding:18px 12px}
  .usob-auth-card{min-height:0}
  .usob-auth-form-panel{padding:30px 20px}
  .usob-auth-form-wrap h1{font-size:32px}
  .usob-auth-two{grid-template-columns:1fr}
  .usob-auth-visual{min-height:240px}
  .usob-auth-visual-copy{left:24px;right:24px;bottom:24px}
  .usob-auth-visual-copy strong{font-size:24px}
}


/* Google Identity Services */
.usob-google-auth{margin:0 0 16px}
#googleSignInButton,#googleRegisterButton{
  min-height:44px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
#googleSignInButton>div,#googleRegisterButton>div{max-width:100%}
.usob-google-auth+.usob-auth-error{margin-top:0}
