/* Pulso glass access. Shared by native authentication and the React landing page. */
.auth-layout, .login-page {
  --pulso-scene-height: clamp(132px, 36vw, 240px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(40px, 8svh, 88px) clamp(24px, 6vw, 112px) 36px;
  background: var(--pulso-navy);
}
.auth-artwork, .login-artwork {
  position: absolute; inset: 0 0 auto; z-index: -1;
  width: 100%; height: 100vh; height: 100svh;
  overflow: hidden; pointer-events: none; user-select: none;
}
.auth-background, .login-background {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill;
}
.auth-monogram, .login-monogram {
  position: absolute; display: block; width: min(36vw, 600px, 74svh); height: auto;
  right: clamp(24px, 4vw, 88px); bottom: clamp(40px, 8svh, 96px); object-fit: contain; opacity: .1;
}
.auth-form-side, .login-form-side {
  position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center;
  gap: 20px; width: min(456px, 100%); min-width: 0; padding: 0; margin: auto 0; background: transparent;
}
.auth-dialog, .login-dialog {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; padding: 36px 38px 30px;
  border: 1px solid #86b6d03b; border-top-color: #bedce788; border-radius: 20px;
  background: linear-gradient(150deg, #1f3e5dea 0%, #172c49eb 42%, #1b224df2 100%);
  color: #edf5fa; box-shadow: 0 24px 60px #070e2b40, inset 0 1px 0 #ffffff12;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.auth-dialog::before, .login-dialog::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 0 0, #79cee017, transparent 65%);
}
.auth-masthead, .login-masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.auth-brand, .login-brand {
  position: static; display: flex; align-items: center; gap: 11px; width: max-content; max-width: 100%;
  padding: 0; margin: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: #f4f8fc; font-family: var(--pulso-font-heading); font-size: 26px; font-weight: 700; letter-spacing: -.7px; line-height: 1;
}
.auth-brand img, .login-brand .brand-logo { width: 44px; height: 44px; flex-shrink: 0; filter: drop-shadow(0 3px 8px #09182c20); }
.auth-brand-accent, .login-brand .brand-word-accent { color: #86d1e1; }
.auth-brand small, .login-brand small { display: none; }
.auth-access-label, .login-access-label { color: #c1d7e8; font-size: 11px; line-height: 1.45; letter-spacing: .4px; text-align: right; }
.auth-brand-rule, .login-brand-rule { display: flex; height: 1px; margin: 26px 0 29px; background: linear-gradient(90deg, #86bdd04d, #86bdd00d); }
.auth-brand-rule span, .login-brand-rule span { width: 46px; background: #83c9dc; }
.auth-card, .login-form-wrap { width: 100%; max-width: none; padding: 0; margin: 0; }
.auth-card .auth-eyebrow, .login-form-wrap > .eyebrow {
  color: #9fd6e5; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .6px; text-transform: none;
}
.auth-card h1, .login-form-wrap h2 {
  margin: 9px 0 0; color: #f7fbff; font-family: var(--pulso-font-heading);
  font-size: 34px; line-height: 1.18; letter-spacing: -1.2px; font-weight: 500;
}
.auth-description, .login-description { margin-top: 14px; max-width: 320px; color: #c0d1e1; font-size: 14px; line-height: 1.7; }
.auth-form, .login-form { margin-top: 29px; }
.auth-field { margin-bottom: 19px; }
.auth-field label, .login-form > label { color: #e1ecf5; font-size: 12px; font-weight: 500; letter-spacing: .1px; }
.auth-field label { margin-bottom: 8px; }
.auth-field-control, .login-field-control { position: relative; display: flex; align-items: center; }
.auth-field-control > svg, .login-field-control > svg { position: absolute; left: 15px; width: 18px; height: 18px; color: #a5c4d7; pointer-events: none; }
.auth-field input, .login-form input {
  width: 100%; min-height: 54px; padding: 14px 15px; border: 1px solid #7998b0; border-radius: 8px;
  color: #eff7fc; background: #0b1c353d; font-family: var(--pulso-font-body); font-size: 16px; font-weight: 400;
  box-shadow: inset 0 1px 3px #06112a14; transition: border-color .18s, background .18s;
}
.auth-field-control > input, .login-field-control > input { padding-left: 44px; }
.auth-password input, .login-field-control.password-field input { padding-right: 78px; }
.auth-field input::placeholder, .login-form input::placeholder { color: #b5c9d9; }
.auth-field input:focus, .login-form input:focus {
  border-color: #a5e1ed; outline: 2px solid #a5e1ed; outline-offset: 3px; background: #10244066; box-shadow: none;
}
.password-toggle, .login-dialog .password-reveal {
  position: absolute; top: 5px; right: 5px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; color: #b6dfec; font-size: 11px; font-weight: 500;
}
.auth-recovery { display: flex; justify-content: flex-end; align-items: center; min-height: 28px; margin: -9px 0 19px; }
.auth-recovery, .auth-back, .auth-manual summary { color: #bfdfec; font-size: 12px; text-decoration-color: #bfdfec66; text-underline-offset: 4px; }
.auth-back, .auth-manual summary { min-height: 40px; align-content: center; }
.auth-primary, .login-dialog .login-submit {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; overflow: hidden;
  width: 100%; min-height: 54px; margin-top: 1px; padding: 8px 10px 8px 19px;
  border: 1px solid #b1e0e9; border-radius: 8px; background: linear-gradient(110deg, #9edce7, #70c0d9 68%, #5eb3ce);
  color: #102941; font-size: 14px; font-weight: 700; letter-spacing: .1px;
  box-shadow: 0 6px 18px #07173038, inset 0 1px 0 #e3f9ff66; transition: filter .2s, transform .2s;
}
.auth-action-icon, .login-action-icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 5px; background: #133a55; color: #d1f3f9; box-shadow: inset 0 1px 0 #ffffff1a;
}
.auth-action-icon svg, .login-action-icon svg { width: 20px; height: 20px; }
.auth-dialog a:focus-visible, .auth-dialog button:focus-visible, .auth-dialog summary:focus-visible,
.login-dialog a:focus-visible, .login-dialog button:focus-visible { outline: 3px solid #a5e1ed; outline-offset: 3px; }
.auth-hint, .login-hint {
  display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 19px;
  border-top: 1px solid #92b6cf29; color: #bad0e0; font-size: 11px; line-height: 1.65; letter-spacing: .15px;
}
.auth-security-mark { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #8bcfda; box-shadow: 0 0 0 3px #8bcfda15; }
.auth-hint svg, .login-hint svg { color: #8bcfda; }
.auth-footer, .login-footer {
  display: flex; flex-direction: row; justify-content: space-between; gap: 16px; width: 100%; margin: 0;
  color: #c1d4e3; font-size: 10px; line-height: 1.6; letter-spacing: .3px;
}
.auth-footer a, .login-footer a { color: #d8e8f3; text-decoration: underline; text-underline-offset: 3px; }
.auth-qr { width: 224px; max-width: 100%; padding: 8px; margin: 0 auto 18px; border-radius: 12px; background: #fff; }
.auth-qr img { height: auto; }
.auth-code { font-size: 22px !important; letter-spacing: .3em; }
.auth-setup-steps, .auth-manual, .auth-password-help, .auth-corporate { color: #c0d1e1; }
.auth-manual code { overflow-wrap: anywhere; color: #e1f0f7; background: #0b1c35; border: 1px solid #7998b0; }
.auth-error-symbol { margin-bottom: 18px; width: 38px; height: 38px; border: 1px solid #7998b0; border-radius: 10px; background: #0b1c353d; color: #9fd6e5; }
.auth-alert { background: #3d2235; border-color: #e792a0; color: #ffdee4; }
.auth-alert strong, .auth-alert p { color: #ffdee4; }
.auth-notice { background: #133e39; border-color: #65bda5; color: #c0efdf; }
.login-dialog .notice { color: #d2edf7; background: #183c56; border: 1px solid #7998b0; }
.login-dialog .inline-error { color: #ffdee4; background: #3d2235; border-color: #e792a0; }
.auth-skip { z-index: 10; }
@media (max-width: 899px) {
  .auth-layout, .login-page { padding: calc(var(--pulso-scene-height) + 12px) 20px 28px; }
  .auth-artwork, .login-artwork { height: var(--pulso-scene-height); }
  .auth-monogram, .login-monogram { width: min(40vw, 200px, calc((var(--pulso-scene-height) - 36px) * 1.42)); right: 20px; bottom: 18px; }
  .auth-form-side, .login-form-side { flex: 0; width: min(440px, 100%); margin: 0 auto; }
  .auth-dialog, .login-dialog { padding: 30px 30px 26px; border-radius: 18px; }
  .auth-card h1, .login-form-wrap h2 { font-size: 31px; }
  .auth-brand-rule, .login-brand-rule { margin: 23px 0 25px; }
}
@media (max-width: 899px) and (max-height: 600px) and (orientation: landscape) {
  .auth-layout, .login-page { padding: 36px 24px 32px; }
  .auth-form-side, .login-form-side { width: min(440px, calc(52vw - 24px)); margin: 0; }
  .auth-artwork, .login-artwork { height: 100svh; }
  .auth-monogram, .login-monogram { width: min(33vw, 60svh); right: 24px; bottom: 18px; }
}
@media (max-width: 430px) {
  .auth-layout, .login-page { padding-left: 18px; padding-right: 18px; }
  .auth-dialog, .login-dialog { padding: 26px 23px 24px; }
  .auth-card h1, .login-form-wrap h2 { font-size: 29px; }
  .auth-brand img, .login-brand .brand-logo { width: 38px; height: 38px; }
  .auth-brand, .login-brand { font-size: 24px; }
  .auth-access-label, .login-access-label { font-size: 10px; }
  .auth-description, .login-description { font-size: 13px; }
}
@media (max-width: 359px) {
  .auth-access-label, .login-access-label { display: none; }
  .auth-dialog, .login-dialog { padding-left: 20px; padding-right: 20px; }
  .auth-card h1, .login-form-wrap h2 { font-size: 27px; }
  .auth-monogram, .login-monogram { right: 18px; }
}
@media (hover: hover) {
  .auth-field input:hover:not(:focus), .login-form input:hover:not(:focus) { border-color: #a3cadb; background: #10244066; }
  .auth-primary:hover, .login-dialog .login-submit:hover { background: linear-gradient(110deg, #9edce7, #70c0d9 68%, #5eb3ce); color: #102941; filter: brightness(1.08); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-dialog *, .login-dialog * { transition: none !important; }
}