/* Typography & base */
html,body{font-family:var(--font-sans); color:var(--text-1); background:var(--bg-subtle);}
.auth-bg{background:linear-gradient(180deg,var(--brand-50),#fff 30%)}

/* Card */
.auth-card{border-radius:var(--radius-lg); box-shadow:var(--shadow-2);}
.card-header,.card-footer{background:#fff;}
.brand-image{display:block; height:auto}

/* Icons */
.material-symbols-rounded{
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  line-height:1; vertical-align:middle; color:currentColor;
}

/* Links & focus */
a, .btn-link{color:var(--accent-600);}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

/* Form controls */
.form-control, .form-select{
  height:44px; border-radius:var(--radius-md); border-color:var(--border);
}
.form-control:focus, .form-select:focus{
  border-color:var(--focus); box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 20%, transparent);
}
.input-group-text{background:#fff; border-color:var(--border);}

/* Buttons */
.btn{border-radius:var(--radius-md);}
.btn-primary{background:var(--accent-600); border-color:var(--accent-600);}
.btn-primary:hover{background:var(--accent-400); border-color:var(--accent-400);}

/* Alerts */
.alert{border-radius:var(--radius-md);}

/* Video tile & badges */
.auth-video{box-shadow:var(--shadow-2); border-radius:var(--radius-lg); background:#000;}
.badge-tile{background:#fff; border:1px solid var(--border);}

/* Accessibility helper */
.visually-hidden-focusable:not(:focus):not(:focus-within){
  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;
}

/* Google button (uses brand tokens you set earlier) */
.btn-google{
  --btn-bg: #fff;
  --btn-bd: #e5e7eb;
  --btn-fg: #111827;
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  color: var(--btn-fg);
}
.btn-google:hover{ background:#f9fafb; }

/* Divider line with “or” chip */
.divider{
  position:relative; text-align:center; color:#6b7280; font-size:.875rem;
}
.divider::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:1px solid #e5e7eb; transform:translateY(-50%); z-index:0;
}
.divider > span{
  position:relative; background:#fff; padding:0 .5rem; z-index:1; border-radius:.25rem;
}

/* Password eye button inside input-group */
.pwd-eye-btn{
  border-color:#e5e7eb;
}
.pwd-eye-btn .material-symbols-rounded{ font-size:20px; line-height:1; }

/* Improve icon sizing inside input-groups */
.input-group-text .material-symbols-rounded{ font-size:18px; line-height:1; }

/* Make invalid messages consistent on auth screens */
.invalid-feedback { font-size: .875rem; }