/* Accounts: Join Now, Log In, password reset (Phase 3). Colors come from the variables in app.css. */
.pill-user { width: auto; min-width: 90px; max-width: 150px; padding: 0 16px; overflow: hidden; text-overflow: ellipsis; }
.pbar { padding: 10px 16px 11px; color: #fff; background: linear-gradient(var(--bar-top), var(--bar-bottom)); border-bottom: 2px solid #8329E9; }
.pbar h1 { margin: 0; color: #fff; font-size: 21px; }
.pbar p { margin: 2px 0 0; font-size: 13px; opacity: .95; }
.acc { padding: 18px 16px 24px; color: var(--heading); }
.acc h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--heading); }
.acc p.lead { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.step-pill { display: block; width: fit-content; margin: 0 auto 18px; padding: 7px 16px; border-radius: 999px; background: #EFE7FA; color: var(--ink); font-size: 13px; font-weight: 700; }
.field { margin: 0 0 14px; }
.field > label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--heading); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password], .field input[type=date] {
  width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid #C9B2EC; border-radius: 12px; background: #FBF9FF;
  font: inherit; font-size: 16px; color: var(--heading);
}
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px #D9C9F4; }
.field .hint { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.field .err, .form-err { margin: 5px 0 0; font-size: 13px; font-weight: 600; color: #C62828; }
.form-err { padding: 10px 12px; border: 1px solid #F0B8B8; border-radius: 10px; background: #FFF3F3; margin-bottom: 14px; }
.two { display: flex; gap: 10px; }
.two .field { flex: 1; min-width: 0; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 62px !important; }
.pw-show { position: absolute; right: 8px; top: 0; height: 48px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.phone-wrap { display: flex; align-items: center; border: 1.5px solid #C9B2EC; border-radius: 12px; background: #FBF9FF; }
.phone-wrap:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px #D9C9F4; }
.phone-wrap b { padding: 0 8px 0 14px; color: var(--ink); }
.phone-wrap input { border: 0 !important; box-shadow: none !important; background: none !important; }
.note-box { margin: 0 0 14px; padding: 11px 14px; border: 1px solid #DDD0F3; border-radius: 12px; background: #F3EEFB; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.checks label { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; line-height: 1.45; font-weight: 400; }
.checks input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--btn-bottom); }
.checks a, .acc a.ulink { color: var(--ink); font-weight: 700; text-decoration: underline; }
.wide { display: block; width: 100%; height: 52px; border: 0; border-radius: 999px; cursor: pointer; text-align: center; line-height: 52px; font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: linear-gradient(var(--btn-top), var(--btn-bottom)); box-shadow: 0 2px 4px rgba(42,10,94,.28); }
.wide:disabled { background: #CDBDE9; box-shadow: none; cursor: not-allowed; }
.below { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.below a { color: var(--ink); font-weight: 700; }
.acc-foot { padding: 14px 16px 20px; border-top: 1px solid var(--divider); background: #FAF7FE; text-align: center; font-size: 12.5px; color: var(--muted); }
.acc-foot a { color: var(--ink); text-decoration: underline; margin: 0 6px; }
.acc-foot p { margin: 8px 0 0; }
.ts-box { display: flex; justify-content: center; margin: 4px 0 14px; min-height: 66px; }
.code-boxes { display: flex; justify-content: center; gap: 8px; margin: 14px 0 10px; }
.code-boxes input { width: 46px; height: 56px; padding: 0; border: 1.5px solid #C9B2EC; border-radius: 10px; background: #FBF9FF; text-align: center; font: inherit; font-size: 24px; font-weight: 700; color: var(--ink); }
.code-boxes input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px #D9C9F4; }
.center { text-align: center; }
.center .big { font-size: 20px; font-weight: 700; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }
.link-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; font-weight: 400; }
.forgot { display: block; margin: 16px 0 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--ink); }
body.join-body { padding-bottom: 0; }