/* ==========================================================================
   Auth pages (login) — shares tokens with admin.css
   ========================================================================== */
body.auth { background: var(--surface); }

.auth__wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

/* Brand panel */
.auth__brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 40px 56px;
  color: #fff;
  background:
    radial-gradient(700px 500px at 100% 0%, rgba(255, 255, 255, .14), transparent 60%),
    radial-gradient(600px 500px at 0% 100%, rgba(124, 58, 237, .55), transparent 60%),
    linear-gradient(160deg, #4338ca, #4f46e5 55%, #6d28d9);
}
.auth__brand::after {
  content: ""; position: absolute; right: -120px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, .06);
}
.brand--light .brand-mark { background: #fff; color: var(--brand); }
.brand--light .brand__name, .brand--light .brand__name small { color: #fff; }
.brand--light .brand__name small { opacity: .75; }

.auth__pitch { position: relative; max-width: 520px; }
.auth__pitch h2 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.auth__pitch > p { margin: 14px 0 32px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

.auth__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auth__feature {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
.auth__feature-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  background: #fff; color: var(--brand);
}
.auth__feature strong { display: block; font-family: var(--display); font-size: 13px; }
.auth__feature small { display: block; font-size: 12px; color: rgba(255, 255, 255, .75); }

.auth__trust { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .85); }
.auth__trust li { display: inline-flex; align-items: center; gap: 6px; }
.auth__trust .icon { color: #a7f3d0; }

/* Form panel */
.auth__panel { display: flex; flex-direction: column; padding: 40px 48px; }
.auth__form-wrap { width: min(400px, 100%); margin: auto; }
.brand--mobile { display: none; margin-bottom: 28px; }
.auth__panel h1 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.auth__sub { margin: 6px 0 28px; color: var(--text-2); }

.auth__form { display: flex; flex-direction: column; gap: 16px; }
.auth__form .input { height: 44px; width: 100%; font-size: 14px; }
.field__row { display: flex; justify-content: space-between; align-items: center; }
.auth__link { color: var(--brand); font-weight: 600; font-size: 13px; }
.auth__link:hover { text-decoration: underline; }

.input-group { position: relative; }
.input-group .input { padding-right: 42px; }
.input-group__btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.input-group__btn:hover { background: var(--surface-3); color: var(--text); }

.check { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }

.btn--lg { height: 46px; font-size: 14px; }
.auth__form .btn--primary { margin-top: 4px; }

.auth__divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: 12px; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth__google { gap: 10px; }

.auth__foot { margin: 26px 0 0; text-align: center; color: var(--text-2); font-size: 13px; }

.auth__legal { display: flex; gap: 18px; justify-content: center; font-size: 12px; color: var(--muted); padding-top: 24px; }
.auth__legal a:hover { color: var(--text); }

.auth__flash {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 600;
}
.auth__flash--error { background: var(--red-soft); color: var(--red); }

.auth__oauth { margin: 0; }
.auth__foot--tight { margin-top: 14px; }
.auth__foot--tight + .auth__foot { margin-top: 8px; }
.field__error { color: var(--red); font-size: 12px; font-weight: 500; }
.input.is-invalid, .select.is-invalid { border-color: var(--red); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px var(--red-soft); }
.input-prefix:has(.is-invalid) span { border-color: var(--red); }

/* Development-only quick sign-in */
.dev-logins { margin-top: 26px; padding: 14px; border: 1px dashed var(--amber); border-radius: 14px; background: var(--amber-soft); }
.dev-logins__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: var(--amber); }
.dev-logins__head span { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .06em; }
.dev-logins__head small { font-family: ui-monospace, monospace; font-weight: 600; }
.dev-logins__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dev-logins__form { margin: 0; }
.dev-logins__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; cursor: pointer;
}
.dev-logins__btn:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dev-logins__btn > span:last-child { min-width: 0; }
.dev-logins__btn strong { display: block; font-size: 13px; }
.dev-logins__btn small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-logins__group { display: block; margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.dev-logins__head + .dev-logins__group { margin-top: 0; }
.dev-logins__btn--platform { background: #0f172a; border-color: #0f172a; }
.dev-logins__btn--platform strong { color: #fff; }
.dev-logins__btn--platform small { color: #94a3b8; }
.dev-logins__btn--platform:hover { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.dev-logins__badge { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
.dev-logins__empty { margin: 0; font-size: 13px; color: var(--amber); }

/* --- Sign-up ----------------------------------------------------------- */
.auth__wrap--signup .auth__brand { position: sticky; top: 0; height: 100vh; }
.auth__form-wrap--wide { width: min(480px, 100%); }
.auth__wrap--signup .auth__panel h1 { margin-top: 0; }
.auth__wrap--signup .auth__divider { margin: 18px 0 20px; }

.trial-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
  font-size: 12px; font-weight: 600;
}
.trial-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.trial-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.trial-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: rgba(255, 255, 255, .2); }
.trial-steps__num {
  display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--brand); font-family: var(--display); font-weight: 700; font-size: 14px;
}
.trial-steps strong { display: block; font-family: var(--display); font-size: 15px; }
.trial-steps small { display: block; font-size: 13px; color: rgba(255, 255, 255, .75); }

.trial-quote {
  margin: 14px 0 0; padding: 18px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
}
.trial-quote blockquote { margin: 0; font-size: 14px; line-height: 1.55; }
.trial-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.trial-quote figcaption strong { display: block; font-size: 13px; }
.trial-quote figcaption small { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); }

.form-section { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.form-section + .form-section { margin-top: 8px; }
.form-section legend + * { clear: both; }
.form-section legend {
  float: left; width: 100%; padding: 0; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth__form .select { height: 44px; width: 100%; font-size: 14px; }
.field__label { font-weight: 600; font-size: 13px; color: var(--text-2); }
.field__label small { font-weight: 400; color: var(--muted); }

.input-prefix { display: flex; }
.input-prefix span {
  display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 14px;
}
.input-prefix .input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }


.auth__fine { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.auth__form .btn--primary .icon { margin-left: 2px; }

/* --- Single-card pages (check email, resend confirmation, gym setup) --- */
.auth-simple {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: 40px 16px;
  background: radial-gradient(800px 400px at 50% 0%, rgba(var(--brand-rgb), .1), transparent 70%), var(--bg);
}
.auth-simple > .brand { padding: 0; }
.auth-card {
  width: min(440px, 100%); padding: 36px;
  border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
}
.auth-card--wide { width: min(520px, 100%); }
.auth-card--center { text-align: center; }
.auth-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.auth-card > p { margin: 8px 0 24px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.auth-card__icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px;
  border-radius: 16px; background: var(--brand-soft); color: var(--brand);
}
.auth-card__step { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.auth-card__tips { list-style: none; margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 13px; color: var(--text-2); }
.auth-card__tips li { display: flex; align-items: center; gap: 8px; }
.auth-card__tips .icon { color: var(--green); }
.inline-form { display: inline; }
.auth__back { display: inline-flex; align-items: center; gap: 6px; }
.auth__back .icon { transform: scaleX(-1); }
.auth-card .auth__flash { flex-wrap: wrap; }
.auth__link--button { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }

@media (max-width: 960px) {
  .auth__wrap { grid-template-columns: 1fr; }
  .auth__brand { display: none; }
  .brand--mobile { display: flex; }
  .auth__panel { padding: 32px 20px; }
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}