/* Sign in and sign up. One centred card on the mssgs field: the same grid and
   glow the marketing page uses, so the app does not feel like a different
   product the moment you arrive. */

.auth {
  position: relative; height: 100dvh; overflow-y: auto;
  display: grid; place-items: center; padding: 24px 18px calc(24px + var(--safe-b));
  background: var(--bg);
}
.auth::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}
.auth::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 26%, #000 18%, transparent 72%);
}

.auth-card {
  position: relative; z-index: 1;
  width: min(430px, 100%);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-3);
  padding: 28px 26px 24px;
}
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; }
.auth-brand img { width: 38px; height: 38px; border-radius: 10px; }
.auth-brand b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.auth-brand b span { color: var(--accent); }

.auth-card h1 { font-size: 20px; letter-spacing: -.02em; text-align: center; }
.auth-card .sub { margin: 6px 0 22px; text-align: center; color: var(--text-3); font-size: 13px; }

.auth-alert {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; margin-bottom: 16px;
  border-radius: var(--r); font-size: 12.5px;
  background: var(--danger-soft); color: var(--danger);
}
.auth-alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.auth-addr {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--card); transition: border-color .12s ease;
}
.auth-addr:focus-within { border-color: var(--accent); }
.auth-addr input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 9px 12px; }
.auth-addr .dom { display: grid; place-items: center; padding: 0 12px; background: var(--bg); color: var(--text-4); font-size: 13px; border-left: 1px solid var(--line); }
.auth-addr.is-error { border-color: var(--danger); }
.auth-addr.is-ok { border-color: var(--accent); }

.pw-meter { display: flex; gap: 4px; margin-top: 7px; }
.pw-meter i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .15s ease; }
.pw-meter.s1 i:nth-child(1) { background: var(--danger); }
.pw-meter.s2 i:nth-child(-n+2) { background: var(--warn); }
.pw-meter.s3 i:nth-child(-n+3) { background: var(--accent); }
.pw-meter.s4 i { background: var(--accent); }

.auth-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-3); }
.auth-foot a { color: var(--accent); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.auth-legal { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--text-4); }

.totp-boxes { display: flex; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.totp-boxes input {
  width: 46px; height: 54px; text-align: center; font-size: 20px; font-weight: 700;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); color: var(--text);
  outline: none; font-variant-numeric: tabular-nums;
}
.totp-boxes input:focus { border-color: var(--accent); }

.demo-hint {
  margin-top: 16px; padding: 10px 12px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--text-2); font-size: 12px; text-align: center;
}
.demo-hint b { color: var(--accent); font-family: var(--mono); }