/* Focused authentication layout with a calmer editorial hierarchy. */
body.login-page {
  background: radial-gradient(ellipse at 18% 18%, rgba(14, 93, 133, .28), transparent 40%), #07111b;
  color: #edf5f8;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
body.login-page::before {
  background-image: linear-gradient(rgba(127,171,193,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(127,171,193,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.login-container {
  width: min(1080px, calc(100% - 48px));
  min-height: 610px;
  grid-template-columns: 1.05fr .95fr;
  border: 1px solid rgba(152,190,210,.18);
  border-radius: 22px;
  background: rgba(10, 22, 32, .94);
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
}
.brand-side {
  padding: clamp(36px, 6vw, 76px);
  background: linear-gradient(150deg, rgba(27,86,109,.2), rgba(11,24,35,.22));
}
.brand-side .brand { letter-spacing: -.055em; }
.brand-side h1 { max-width: 10ch; font-size: clamp(38px, 5vw, 55px); letter-spacing: -.055em; line-height: 1.05; }
.login-side { padding: clamp(30px, 5vw, 58px); background: #0b1722; }
.login-side h2 { letter-spacing: -.035em; }
.login-side .subtitle { color: #a3b4c0; line-height: 1.55; }
.login-side input:not([type=checkbox]):not([type=radio]) {
  min-height: 46px;
  background: #08131d !important;
  border: 1px solid rgba(150,184,204,.2) !important;
  border-radius: 10px !important;
  color: #edf5f8 !important;
}
.login-side .primary-button { min-height: 46px; border-radius: 10px; background: linear-gradient(110deg,#147dd8,#118c9f); }
.login-side .tab { min-height: 42px; }
.login-side :focus-visible { outline: 3px solid #54d4d0 !important; outline-offset: 3px; }
html[data-portal="admin"] .tabs,
html[data-portal="admin"] #registerEmailForm,
html[data-portal="admin"] #verifyForm,
html[data-portal="admin"] #completeForm,
html[data-portal="admin"] #deviceCodeForm,
html[data-portal="admin"] #deviceLoginButton { display: none !important; }
html[data-portal="customer"] #loginMfaField,
html[data-portal="customer"] #deviceCodeForm,
html[data-portal="customer"] #deviceLoginButton { display: none !important; }
html[data-portal="admin"] .brand-side { background: linear-gradient(150deg, rgba(35,93,116,.22), rgba(11,24,35,.25)); }
html[data-portal="admin"] .brand-side .badge { color: #a8e1df; }
html[data-portal="admin"] .brand-side h1 { max-width: 12ch; }
html[data-portal="admin"] .login-side { border-left: 1px solid rgba(152,190,210,.12); }
@media(max-width:760px) {
  .login-container { width: min(520px, calc(100% - 28px)); min-height: 0; grid-template-columns: 1fr; }
  .brand-side { display: flex; min-height: 190px; padding: 26px 28px; }
  .brand-side h1 { font-size: 32px; max-width: 15ch; }
  .brand-side .badge { margin-top: 8px; }
  .login-side { padding: 26px 28px 32px; }
}
@media(max-width:420px) {
  .login-container { border-radius: 16px; }
  .brand-side { min-height: 160px; }
  .brand-side h1 { font-size: 27px; }
  .login-side { padding: 23px 20px 27px; }
}
@media(prefers-reduced-motion:reduce) {
  .login-container *, .login-container *::before, .login-container *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}