/* Sign-in pages (sign in, sign up, verify, forgot / reset password) in the app's Liquid Glass look */
:root {
  --bg: #eeeee9; --text: #0c0c10;
  --lg-bg: rgba(255,255,255,.58); --lg-bg-2: rgba(255,255,255,.34); --lg-edge: rgba(255,255,255,.85); --lg-rim: rgba(0,0,0,.06);
  --lg-shadow: 0 14px 34px -16px rgba(28,32,56,.28), 0 2px 8px -2px rgba(28,32,56,.08);
  --lg-sep: rgba(60,60,67,.13); --lg-fill: rgba(118,118,128,.12); --lg-label-2: rgba(60,60,67,.6); --lg-label-3: rgba(60,60,67,.35);
  --lg-tint: #007aff; --lg-red: #ff3b30; --lg-green: #34c759;
  --lg-ambient-1: rgba(52,199,89,.22); --lg-ambient-2: rgba(0,122,255,.16); --lg-ambient-3: rgba(255,149,0,.14);
  --field: rgba(255,255,255,.7);
  /* names the old pages use */
  --accent: var(--lg-tint); --text-2: var(--lg-label-2); --text-3: var(--lg-label-3);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #090910; --text: #f0f0f2;
  --lg-bg: rgba(44,44,62,.5); --lg-bg-2: rgba(44,44,62,.28); --lg-edge: rgba(255,255,255,.16); --lg-rim: rgba(0,0,0,.35);
  --lg-shadow: 0 16px 40px -14px rgba(0,0,0,.7), 0 2px 8px -2px rgba(0,0,0,.4);
  --lg-sep: rgba(84,84,88,.5); --lg-fill: rgba(118,118,128,.24); --lg-label-2: rgba(235,235,245,.6); --lg-label-3: rgba(235,235,245,.35);
  --lg-tint: #0a84ff; --lg-red: #ff453a; --lg-green: #30d158;
  --lg-ambient-1: rgba(48,209,88,.16); --lg-ambient-2: rgba(10,132,255,.2); --lg-ambient-3: rgba(191,90,242,.14);
  --field: rgba(0,0,0,.28);
} }
:root[data-theme="dark"] {
  --bg: #090910; --text: #f0f0f2;
  --lg-bg: rgba(44,44,62,.5); --lg-bg-2: rgba(44,44,62,.28); --lg-edge: rgba(255,255,255,.16); --lg-rim: rgba(0,0,0,.35);
  --lg-shadow: 0 16px 40px -14px rgba(0,0,0,.7), 0 2px 8px -2px rgba(0,0,0,.4);
  --lg-sep: rgba(84,84,88,.5); --lg-fill: rgba(118,118,128,.24); --lg-label-2: rgba(235,235,245,.6); --lg-label-3: rgba(235,235,245,.35);
  --lg-tint: #0a84ff; --lg-red: #ff453a; --lg-green: #30d158;
  --lg-ambient-1: rgba(48,209,88,.16); --lg-ambient-2: rgba(10,132,255,.2); --lg-ambient-3: rgba(191,90,242,.14);
  --field: rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh; padding: 28px 16px 40px; color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60vmax 50vmax at 8% 0%, var(--lg-ambient-1), transparent 60%),
    radial-gradient(55vmax 45vmax at 100% 20%, var(--lg-ambient-2), transparent 60%),
    radial-gradient(60vmax 50vmax at 40% 110%, var(--lg-ambient-3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.brand { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.brand-dot { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--lg-green), var(--lg-tint)); box-shadow: 0 6px 14px -6px var(--lg-tint); }

.card {
  width: 100%; max-width: 400px; padding: 26px 24px 22px; border-radius: 28px;
  background: linear-gradient(180deg, var(--lg-bg) 0%, var(--lg-bg-2) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  border: 0.5px solid var(--lg-rim); box-shadow: inset 0 1px 0 0 var(--lg-edge), var(--lg-shadow);
}
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 4px; }
.subtitle { font-size: 15px; color: var(--lg-label-2); margin-bottom: 20px; }

.alert, .alert-error, .alert-success, .invite-banner { margin: 0 0 14px; padding: 11px 14px; border-radius: 14px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.alert-error { color: var(--lg-red); background: color-mix(in srgb, var(--lg-red) 12%, transparent); }
.alert-success { color: color-mix(in srgb, var(--lg-green) 80%, var(--text)); background: color-mix(in srgb, var(--lg-green) 14%, transparent); }
.invite-banner { color: var(--text); background: color-mix(in srgb, var(--lg-green) 14%, transparent); }
.invite-banner--closed { background: color-mix(in srgb, var(--lg-tint) 10%, var(--lg-fill)); }

label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--lg-label-2); }
.hint { font-weight: 500; color: var(--lg-label-3); }
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]) {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 0.5px solid var(--lg-rim); background: var(--field); color: var(--text);
  font: inherit; font-size: 17px; transition: box-shadow .15s;
}
input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-tint) 35%, transparent); }
input::placeholder { color: var(--lg-label-3); }

button, .btn {
  width: 100%; height: 52px; margin-top: 4px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lg-tint) 82%, #fff), var(--lg-tint));
  box-shadow: 0 10px 24px -12px var(--lg-tint), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .12s ease;
}
button:active { transform: scale(.98); }

.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border-radius: 999px;
  border: 0.5px solid var(--lg-rim); background: var(--lg-bg); color: var(--text); text-decoration: none;
  font: inherit; font-size: 16px; font-weight: 600; box-shadow: inset 0 1px 0 0 var(--lg-edge);
}
.oauth-btn + .oauth-btn { margin-top: 8px; }
.oauth-btn:active { transform: scale(.98); }
.passkey-btn { margin: 0 0 8px; cursor: pointer; height: 50px; }
.passkey-btn svg { color: currentColor; }
.passkey-btn[hidden], .or-divider[hidden] { display: none; }
.or-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lg-label-3); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 0.5px; background: var(--lg-sep); }

.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.name-row label { min-width: 0; }
.pk-choice, .trust-row { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; margin: 2px 0 14px; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; }
.pk-choice[hidden] { display: none; }
.pk-choice input, .trust-row input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--lg-tint); }
.pk-choice span { display: flex; flex-direction: column; gap: 2px; }
.pk-choice small { font-size: 13px; color: var(--lg-label-2); font-weight: 400; }
.terms-choice a { color: var(--lg-tint); }
.code-input { height: 60px !important; font-size: 30px !important; font-weight: 800; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.link-btn { width: auto !important; height: auto; margin: 0; padding: 0; background: none !important; box-shadow: none !important; color: var(--lg-tint) !important; font-size: inherit; font-weight: 600; }
.resend-form { margin-top: 8px; display: flex; gap: 8px; }
.resend-form--standalone { margin: -4px 0 14px; }
.resend-form input { flex: 1; height: 44px; font-size: 15px; }
.resend-btn { width: auto; height: 44px; margin: 0; padding: 0 16px; font-size: 14px; }

.form-note { margin-top: 12px; font-size: 13px; color: var(--lg-label-2); text-align: center; }
.forgot { margin-top: 14px; text-align: center; font-size: 15px; }
.footer { margin-top: 20px; text-align: center; font-size: 15px; color: var(--lg-label-2); }
.forgot a, .footer a, .card a:not(.oauth-btn) { color: var(--lg-tint); text-decoration: none; font-weight: 600; }
.legal { margin-top: 18px; font-size: 12.5px; color: var(--lg-label-3); text-align: center; }
.legal a { color: var(--lg-label-2); text-decoration: none; }
@media (max-width: 440px) { .card { padding: 22px 18px 18px; border-radius: 24px; } h1 { font-size: 26px; } }
input[readonly] { color: var(--lg-label-2); background: var(--lg-fill); }
/* sign-up: social buttons first; email and password folded underneath */
.oauth-btn--google { height: 54px; font-size: 17px; }
.alt-signup { margin-top: 16px; }
.alt-signup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--lg-label-2); }
.alt-signup > summary::-webkit-details-marker { display: none; }
.alt-signup > summary::before, .alt-signup > summary::after { content: ""; flex: 1; height: 0.5px; background: var(--lg-sep); }
.alt-signup[open] > summary { margin-bottom: 16px; color: var(--text); }
.terms-choice { margin-bottom: 16px; }
/* private beta: no self sign-up */
.beta-note { display: block; font-size: 14px; line-height: 1.45; color: var(--lg-label-2); }
.beta-closed { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px; margin: 4px 0 6px; border-radius: 20px; text-align: center;
  background: color-mix(in srgb, var(--lg-tint) 9%, var(--lg-fill)); }
.beta-closed-ico { font-size: 30px; }
.beta-closed b { font-size: 18px; font-weight: 800; }
.beta-closed p { font-size: 14.5px; line-height: 1.45; color: var(--lg-label-2); }