/* ==========================================================================
   StayLedger - entry screen.
   One focused card floating on an animated aurora field. Everything here is
   scoped to the auth page so the app UI is untouched.
   ========================================================================== */

:root {
  --a-ink:      #0b1230;
  --a-ink-soft: #3a4668;
  --a-muted:    #6c7896;
  --a-faint:    #9aa5c0;
  --a-line:     #e6e9f4;
  --a-brand:    #3b63e8;
  --a-brand-dk: #1b2e78;
  --a-mint:     #2fd8a6;
  --a-card:     rgba(255, 255, 255, .82);
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--a-ink);
  background: #070c22;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.022em; }
p { margin: 0; }
button { font: inherit; }

/* ------------------------------ aurora field ---------------------------- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  /*
   * The column must never grow past the viewport.
   *
   * A bare auto column takes its width from its content, so anything inside with
   * a wide minimum - a row of chips, a grid of inputs - could push the column
   * wider than the screen. Combined with the overflow: hidden below, the excess
   * was not scrollable either: it was simply cut off on the right, which is why
   * the "PDF & Excel" chip lost its end on a 360px phone.
   *
   * minmax(0, 1fr) lets the column shrink to the space available, so children
   * wrap inside it instead of forcing it wider.
   */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
}

/* Deep base wash */
.stage::before {
  content: "";
  position: absolute; inset: -20%;
  z-index: -3;
  background:
    radial-gradient(60% 50% at 18% 12%, #21347e 0%, transparent 62%),
    radial-gradient(55% 55% at 84% 18%, #2b4fc7 0%, transparent 60%),
    radial-gradient(60% 60% at 74% 88%, #0f7a63 0%, transparent 58%),
    linear-gradient(160deg, #0a1030, #0b1338 40%, #070c22);
  background-color: #070c22;
}

/* Fine grid, masked to a soft vignette */
.stage::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 100%);
  animation: grid-drift 42s linear infinite;
}
@keyframes grid-drift {
  to { background-position: 52px 52px, 52px 52px; }
}

/* Floating colour blobs */
.orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(62px);
  opacity: .5;
  will-change: transform;
  pointer-events: none;
}
.orb-1 { width: 46vmax; height: 46vmax; top: -16vmax; left: -12vmax; background: #3b63e8; animation: float-a 19s ease-in-out infinite; }
.orb-2 { width: 34vmax; height: 34vmax; bottom: -14vmax; right: -10vmax; background: #17c79a; opacity: .34; animation: float-b 24s ease-in-out infinite; }
.orb-3 { width: 26vmax; height: 26vmax; top: 44%; left: 58%; background: #7b5cff; opacity: .3; animation: float-c 28s ease-in-out infinite; }

@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(7vmax, 5vmax, 0) scale(1.1); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-8vmax, -6vmax, 0) scale(.94); }
}
@keyframes float-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(-6vmax, 4vmax, 0) scale(1.14); }
  66%      { transform: translate3d(5vmax, -5vmax, 0) scale(.9); }
}

/* --------------------------------- shell -------------------------------- */

/* min-width: 0 so the shell can shrink below its content's natural width and let
   that content wrap, rather than propagating a wide minimum back up to the grid. */
.shell { width: 100%; max-width: 436px; min-width: 0; position: relative; }

.wordmark {
  display: flex; align-items: center; gap: 11px;
  justify-content: center; margin-bottom: 20px;
  animation: drop-in .6s cubic-bezier(.2, .9, .25, 1) both;
}
.wordmark .mark {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: linear-gradient(160deg, #4b76ff, #16225c);
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(11, 18, 48, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  position: relative; overflow: hidden;
}
.wordmark .mark svg { width: 22px; height: 22px; display: block; }
/* light sweep across the mark */
.wordmark .mark::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sweep 5.5s ease-in-out 1.4s infinite;
}
@keyframes sweep { 0% { transform: translateX(-120%); } 32%, 100% { transform: translateX(120%); } }

.wordmark .name { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.wordmark .name em { font-style: normal; color: var(--a-mint); }
.wordmark .sub { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #93a4d6; margin-top: 4px; }

/* glass card */
.card {
  position: relative;
  padding: 26px 24px 22px;
  border-radius: 22px;
  background: var(--a-card);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 30px 70px -20px rgba(3, 8, 28, .68),
    0 8px 24px -8px rgba(3, 8, 28, .4),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  animation: card-in .62s cubic-bezier(.2, .9, .25, 1) .07s both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
}
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-14px); }
}

.card.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* staggered reveal for the contents of a view */
.reveal > * { animation: rise .42s cubic-bezier(.2, .9, .25, 1) both; }
.reveal > *:nth-child(1) { animation-delay: .04s; }
.reveal > *:nth-child(2) { animation-delay: .09s; }
.reveal > *:nth-child(3) { animation-delay: .14s; }
.reveal > *:nth-child(4) { animation-delay: .19s; }
.reveal > *:nth-child(5) { animation-delay: .24s; }
.reveal > *:nth-child(6) { animation-delay: .29s; }
.reveal > *:nth-child(7) { animation-delay: .33s; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } }

/* --------------------------------- heads -------------------------------- */

.head { margin-bottom: 18px; }
.head h1 { font-size: 23px; margin-bottom: 5px; }
.head p { font-size: 13.5px; line-height: 1.55; color: var(--a-muted); }
.head p b { color: var(--a-ink-soft); }

/* segmented control */
.seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; margin-bottom: 20px;
  background: rgba(15, 23, 60, .06);
  border: 1px solid rgba(15, 23, 60, .07);
  border-radius: 12px;
}
.seg .thumb {
  position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(50% - 4px);
  background: #fff; border-radius: 9px;
  box-shadow: 0 2px 8px rgba(11, 18, 48, .14);
  transition: transform .3s cubic-bezier(.4, 1.3, .5, 1);
}
.seg[data-active="signup"] .thumb { transform: translateX(100%); }
.seg button {
  position: relative; z-index: 1; padding: 10px 8px; border: 0; background: transparent;
  font-size: 14px; font-weight: 650; color: var(--a-muted); cursor: pointer;
  border-radius: 9px; transition: color .2s;
}
.seg button[aria-selected="true"] { color: var(--a-brand-dk); }

/* --------------------------------- fields ------------------------------- */

.f { margin-bottom: 13px; position: relative; }
.f > label, .f-label {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--a-ink-soft);
  margin-bottom: 6px; letter-spacing: -.005em;
}
.f-label .opt { font-weight: 500; color: var(--a-faint); }

.in {
  width: 100%; padding: 12px 14px; font-size: 15.5px; color: var(--a-ink);
  background: rgba(255, 255, 255, .92);
  border: 1.5px solid var(--a-line); border-radius: 12px;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance: none; appearance: none;
}
.in::placeholder { color: #aeb7cd; }
.in:hover { border-color: #ccd4e8; }
.in:focus {
  outline: 0; background: #fff; border-color: var(--a-brand);
  box-shadow: 0 0 0 4px rgba(59, 99, 232, .15);
}
.in.bad { border-color: #e0334f; box-shadow: 0 0 0 4px rgba(224, 51, 79, .13); }
select.in {
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%236c7896' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ------------------------- show / hide password -------------------------
   The eye is positioned against .in-peek, which wraps just the input, rather
   than against the whole .f field.

   It used to be anchored to `bottom` of .f. That happened to look right on the
   sign-in form, where the field is only a label and an input, but the signup
   password field also carries a strength meter and a hint below it - so the eye
   was pushed to the bottom of the block and sat on top of the meter bars.
   Anchoring it to the input means it stays in place whatever follows underneath.
   ---------------------------------------------------------------------- */
.in-peek { position: relative; display: block; }
/* Room for the button, so typed text never runs underneath it. */
.in-peek .in { padding-right: 46px; }

.peek {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 9px;
  color: var(--a-faint); cursor: pointer; transition: color .15s, background .15s;
  /* Sits above the input's own background without capturing the field's focus. */
  z-index: 2; padding: 0;
}
.peek:hover { color: var(--a-brand); background: rgba(59, 99, 232, .08); }
.peek:focus-visible {
  outline: 2px solid var(--a-brand); outline-offset: 1px; color: var(--a-brand);
}
/* Marks the revealed state, so it is clear the password is currently visible. */
.peek.is-on { color: var(--a-brand); background: rgba(59, 99, 232, .1); }

/* strength meter */
.meter { display: flex; gap: 4px; margin-top: 7px; }
.meter i { flex: 1; height: 4px; border-radius: 99px; background: rgba(15, 23, 60, .1); transition: background .3s; }
.meter.s1 i:nth-child(1) { background: #e0334f; }
.meter.s2 i:nth-child(-n+2) { background: #e8a33d; }
.meter.s3 i:nth-child(-n+3) { background: #3b9ae8; }
.meter.s4 i { background: var(--a-mint); }
.meter-note { font-size: 11.5px; color: var(--a-faint); margin-top: 5px; }

/* choice chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-r {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 99px; cursor: pointer;
  font-size: 13.5px; font-weight: 550; color: var(--a-ink-soft);
  background: rgba(255, 255, 255, .8); border: 1.5px solid var(--a-line);
  transition: transform .14s, border-color .16s, background .16s, color .16s;
}
.chip-r input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip-r:hover { border-color: #c6d0e8; background: #fff; }
.chip-r:active { transform: scale(.97); }
.chip-r:has(input:checked) {
  border-color: var(--a-brand); background: rgba(59, 99, 232, .1);
  color: var(--a-brand-dk); font-weight: 650;
}
.chip-r:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(59, 99, 232, .16); }

/* -------------------------------- buttons ------------------------------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 18px; border: 0; border-radius: 12px;
  font-size: 15px; font-weight: 680; cursor: pointer;
  transition: transform .1s, box-shadow .2s, filter .2s;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-go {
  color: #fff;
  background: linear-gradient(135deg, #4671f2, #1e358f);
  box-shadow: 0 10px 22px -8px rgba(31, 58, 138, .8), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-go:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 14px 28px -8px rgba(31, 58, 138, .85); }
.btn-quiet {
  background: rgba(15, 23, 60, .05); color: var(--a-ink-soft);
  border: 1.5px solid transparent;
}
.btn-quiet:hover:not(:disabled) { background: rgba(15, 23, 60, .09); }
.btn-row { display: flex; gap: 9px; margin-top: 11px; }
.btn-row .btn { font-size: 14px; padding: 11px 14px; }

/* ripple */
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255, 255, 255, .45); pointer-events: none;
  animation: ripple .55s ease-out forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

.spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, 255, .38); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.spin.dark { border-color: rgba(31, 58, 138, .25); border-top-color: var(--a-brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* google */
.or {
  display: flex; align-items: center; gap: 11px; margin: 16px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint);
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(15, 23, 60, .1); }
#gWrap { display: flex; justify-content: center; }

/* -------------------------------- messages ------------------------------ */

.msg {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; margin-bottom: 15px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; border: 1px solid transparent;
  animation: rise .3s ease both;
}
.msg .ic { flex: none; font-size: 14px; line-height: 1.3; }
.msg-bad  { background: #fdeaee; border-color: #f6c6d0; color: #8c1730; }
.msg-ok   { background: #e2f7ee; border-color: #b4e8d3; color: #0b5238; }
.msg-info { background: #e7f2fd; border-color: #c3ddf6; color: #0d4d78; }
.msg-warn { background: #fdf3de; border-color: #f0dcae; color: #74450a; }

/* dev-mode OTP hint */
.devbox {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 15px; border-radius: 12px;
  font-size: 12.5px; color: #6d4407;
  background: linear-gradient(135deg, #fef6e3, #fdeccb);
  border: 1px dashed #e6c583;
}
.devbox code {
  font-size: 19px; font-weight: 800; letter-spacing: 4px; color: #7a3d00;
  background: #fff; padding: 3px 11px; border-radius: 8px; border: 1px solid #eed9ab;
}

/* ---------------------------------- OTP --------------------------------- */

.otp { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 4px; }
.otp input {
  width: 100%; max-width: 52px; aspect-ratio: 1 / 1.12;
  text-align: center; font-size: 22px; font-weight: 750; color: var(--a-brand-dk);
  background: rgba(255, 255, 255, .92); border: 1.5px solid var(--a-line);
  border-radius: 13px; -webkit-appearance: none; appearance: none;
  transition: transform .14s, border-color .16s, box-shadow .16s;
}
.otp input:focus { outline: 0; border-color: var(--a-brand); box-shadow: 0 0 0 4px rgba(59, 99, 232, .16); }
.otp input.filled { border-color: var(--a-brand); background: #fff; transform: translateY(-2px); }

.mail-pop {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 17px;
  display: grid; place-items: center; font-size: 25px;
  background: linear-gradient(150deg, #eef3ff, #dde6ff);
  border: 1px solid #cdd9fb;
  animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.7); } }

/* ----------------------------- step indicator --------------------------- */

.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.steps .dot {
  height: 4px; flex: 1; border-radius: 99px;
  background: rgba(15, 23, 60, .11); transition: background .35s;
}
.steps .dot.on { background: linear-gradient(90deg, var(--a-brand), var(--a-mint)); }
.steps .txt { font-size: 11.5px; font-weight: 650; color: var(--a-faint); letter-spacing: .02em; }

/* ------------------------------ verify rows ----------------------------- */

.vrow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; margin-bottom: 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .72); border: 1.5px solid var(--a-line);
  transition: border-color .2s, background .2s;
}
.vrow.done { border-color: #b4e8d3; background: rgba(226, 247, 238, .8); }
.vrow .vic {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  font-size: 16px; background: rgba(59, 99, 232, .1);
}
.vrow.done .vic { background: rgba(23, 199, 154, .16); }
.vrow .vtxt { flex: 1; min-width: 0; }
.vrow .vtxt b { display: block; font-size: 13.5px; }
.vrow .vtxt span { font-size: 12px; color: var(--a-muted); word-break: break-all; }
.vrow .tick {
  width: 22px; height: 22px; flex: none;
}
.vrow .tick path {
  stroke: #17a673; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: draw .45s ease .05s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.vform { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.vform .f { flex: 1; margin-bottom: 0; }
.vform .in { padding: 10px 12px; font-size: 15px; letter-spacing: 3px; text-align: center; }
.vform .btn { width: auto; padding: 11px 15px; font-size: 13.5px; }

/* ----------------------- shared header + copyright ----------------------- */
/*
 * A top header and a bottom copyright bar, matching the tenant site. Both are
 * absolutely positioned over the full-height .stage so the sign-in card stays
 * centred between them; the .stage padding below reserves their space so nothing
 * overlaps on a short screen.
 */
.auth-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px clamp(14px, 4vw, 34px);
}
.at-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.at-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: linear-gradient(140deg, #3b63e8, #14225c);
  display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(59,99,232,.7);
}
.at-mark svg { width: 18px; height: 18px; display: block; }
.at-who b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.at-who b em { font-style: normal; color: var(--a-mint); }
.at-cta { display: flex; gap: 8px; flex: none; }
.at-btn {
  font-size: 13px; font-weight: 600; color: #eaf0ff; text-decoration: none;
  padding: 8px 14px; border-radius: 9px; white-space: nowrap;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); transition: background .2s, border-color .2s;
}
.at-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.at-btn-primary {
  color: #fff; background: linear-gradient(135deg, #3b63e8, #2b4fc7); border-color: transparent;
}
.at-btn-primary:hover { background: linear-gradient(135deg, #4f74f0, #2f56d6); }

.auth-copyright {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 16px;
  padding: 14px clamp(14px, 4vw, 34px) calc(14px + env(safe-area-inset-bottom));
  font-size: 12px; color: #8593bd;
}
.ac-contact { color: #b9c8f7; font-weight: 600; text-decoration: none; }
.ac-contact:hover { text-decoration: underline; }
.ac-legal { color: #7482ac; }

/* Reserve the header/copyright bands so the centred card never slides under
   them on a short viewport. */
.stage { padding-top: 68px; padding-bottom: 60px; }

/* --------------------------------- footer ------------------------------- */

.foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
  margin-top: 18px;
  animation: rise .5s ease .3s both;
}
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  color: #c3cfef; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
}
.tag .led { width: 6px; height: 6px; border-radius: 50%; background: var(--a-mint); box-shadow: 0 0 8px var(--a-mint); }

.tiny { text-align: center; font-size: 11.5px; color: #8593bd; margin-top: 13px; line-height: 1.6; }
.tiny a { color: #b9c8f7; }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--a-brand); text-decoration: none;
}
.link:hover { text-decoration: underline; }

/* Forgot-password pill: a clearly visible action on the light card, styled in
   the brand family rather than the faint .tiny link colour. Wins the .tiny a
   specificity battle via its own colour + background. */
.link-forgot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 650; letter-spacing: .01em;
  color: var(--a-brand); text-decoration: none;
  background: rgba(59, 99, 232, .10);
  border: 1.5px solid rgba(59, 99, 232, .22);
  transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.tiny a.link-forgot { color: var(--a-brand); }
.link-forgot svg { width: 14px; height: 14px; }
.link-forgot:hover {
  background: rgba(59, 99, 232, .16);
  border-color: rgba(59, 99, 232, .38);
  text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(31, 58, 138, .55);
}
.link-forgot:active { transform: scale(.97); }
.link-forgot:focus-visible {
  outline: 2px solid var(--a-brand); outline-offset: 2px;
}

/* -------------------------------- toasts -------------------------------- */

.toast-stack {
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; width: min(400px, calc(100vw - 28px));
}
.toast {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: 13px; font-size: 13px; line-height: 1.5;
  color: #eaf0ff; background: rgba(12, 19, 46, .9);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7);
  backdrop-filter: blur(14px);
  animation: toast-in .3s cubic-bezier(.2, .9, .25, 1);
}
.toast.is-out { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }
.toast b { display: block; margin-bottom: 2px; color: #fff; font-size: 13px; }
.toast span { color: #aebbe0; }
.toast.ok   { border-left: 3px solid var(--a-mint); }
.toast.bad  { border-left: 3px solid #ff6b81; }
.toast.warn { border-left: 3px solid #ffc457; }
.toast .x { margin-left: auto; border: 0; background: none; color: #8593bd; cursor: pointer; font-size: 15px; }

/* ------------------------------ breakpoints ----------------------------- */

@media (max-width: 420px) {
  .card { padding: 22px 18px 18px; border-radius: 20px; }
  .head h1 { font-size: 21px; }
  .pair { grid-template-columns: 1fr; }
  .otp input { max-width: none; }
  .wordmark .name { font-size: 19px; }
}

/* Phones and small tablets: inputs must be at least 16px so iOS/iPadOS Safari
   does not auto-zoom the viewport when a field is focused. The peek button and
   its icon are bumped to a comfortable ~44px tap target. Keeps the reset /
   forgot / sign-in fields usable on every phone, iPad and tablet. */
@media (max-width: 767px) {
  .in { font-size: 16px; padding: 13px 14px; }
  .in-peek .in { padding-right: 48px; }
  .peek { width: 44px; }
  .peek svg { width: 20px; height: 20px; }
  .btn { font-size: 16px; }
  .btn-row .btn { font-size: 15px; }
}

/* iPad / tablet portrait through small laptops: keep the card comfortably
   sized and centred without stretching the single column too wide. */
@media (min-width: 768px) and (max-width: 899px) {
  .shell { max-width: 460px; }
  .card { padding: 28px 26px 22px; }
}

@media (min-width: 900px) {
  .shell { max-width: 448px; }
  .card { padding: 30px 28px 24px; }
}

/* Coarse pointers (touch screens of any width, incl. large iPads) get the
   larger tap targets regardless of viewport width. */
@media (pointer: coarse) {
  .in { font-size: 16px; }
  .peek { width: 44px; }
  .peek svg { width: 20px; height: 20px; }
}

/* Big screens: nudge the card up slightly for better optical balance */
@media (min-height: 860px) {
  .stage { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .orb { opacity: .34; }
}

/* ----------------------------- phone number field ------------------------- */

.phone-field { position: relative; display: block; }
.phone-field .cc {
  position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px;
  display: flex; align-items: center; padding: 0 12px;
  font-size: 15.5px; font-weight: 650; color: var(--a-ink-soft);
  background: rgba(15, 23, 60, .06); border-right: 1.5px solid var(--a-line);
  border-radius: 10px 0 0 10px; pointer-events: none;
}
.phone-field .in {
  padding-left: 66px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.phone-field .in.is-short { border-color: #e8a33d; }

/* ==========================================================================
   Refresh splash
   --------------------------------------------------------------------------
   The same brief loading moment the rest of the product shows on a refresh: a
   branded mark over a thin animated bar. The staff sign-in sits on a deep navy
   stage, so the splash background matches that rather than flashing white.
   Removed by a small inline script after a ~0.1s minimum.
   ========================================================================== */
html.booting { overflow: hidden; }
.boot {
  position: fixed; inset: 0; z-index: 4000; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #0b1230;
}
html.booting .boot { display: flex; }
.boot-mark {
  width: 46px; height: 46px; border-radius: 13px;
  background: #16225c; display: grid; place-items: center;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
}
.boot-bar { width: 132px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.boot-bar span {
  display: block; width: 40%; height: 100%; border-radius: 999px;
  background: #3b63e8; animation: bootSlide 1.05s ease-in-out infinite;
}
@keyframes bootSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-bar span { animation: none; width: 100%; }
}