/* ═══════════════════════════════════════════════════════════════════════
   ABEBIT Auth — login / register / verify / forgot / reset.
   Matched to the dashboard / Polygonal design system. These pages are
   pre-authentication and stand alone (they don't extend shell.html), so
   every token needed lives here rather than being inherited.
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: dark;
  --bg:#08090C; --c:#12141B; --c2:#0F1116; --elev:#171A22;
  --b:rgba(255,255,255,.08); --b2:rgba(255,255,255,.14);
  --t0:#F2F4F7; --t1:#A9B1BD; --t2:#6B7280;
  --br:#F0B90B; --brh:#FCD535;
  --bull:#12D18E; --bear:#F7485F;

  --disp:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --body:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.14s var(--ease);
  --sh-1:0 2px 8px rgba(0,0,0,.28);
  --sh-2:0 28px 60px -12px rgba(0,0,0,.55);
}

/* ── Page shell ─────────────────────────────── */
.au {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  background-color: #08090C; /* fallback for browsers that ignore var() */
  font-family: var(--body);
  padding: 24px 16px;
  color: var(--t0);
  -webkit-text-fill-color: initial;
}

/* ── Card ───────────────────────────────────── */
.au-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, var(--elev), var(--c));
  border: 1px solid var(--b2);
  border-radius: var(--r-lg);
  padding: 36px 32px 32px;
  box-shadow: var(--sh-2);
}
@media (max-width: 480px) {
  .au-card { padding: 28px 20px 24px; border-radius: var(--r-md); }
}

/* ── Logo ───────────────────────────────────── */
.au-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 700;
  color: var(--t0);
  text-decoration: none;
  letter-spacing: .03em;
  margin-bottom: 24px;
  transition: opacity var(--t-fast);
}
.au-logo b { color: var(--br); font-weight: 700; }
.au-logo:hover { opacity: .82; }

/* ── Heading ────────────────────────────────── */
.au-card h1 {
  font-family: var(--disp);
  font-size: 21px;
  font-weight: 700;
  color: var(--t0);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.au-card .au-sub {
  text-align: center;
  font-size: 13px;
  color: var(--t2);
  margin-bottom: 26px;
  line-height: 1.5;
}

/* ── Error / info messages ──────────────────── */
.au-err {
  background: rgba(247,72,95,.09);
  border: 1px solid rgba(247,72,95,.28);
  color: var(--t1);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.au-err .material-icons-round { font-size: 16px!important; color: var(--bear); flex-shrink: 0; margin-top: 1px; }

/* ── Form groups ────────────────────────────── */
.au-field { margin-bottom: 4px; }
.au-field label { margin-top: 0; }

.au-card label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 16px 0 6px;
}
.au-card label i {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 10.5px;
  opacity: .8;
}
.au-lbl-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: .7;
}

/* ── Inputs ─────────────────────────────────── */
.au-card input[type="text"],
.au-card input[type="email"],
.au-card input[type="password"],
.au-card input[name="username"] {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--c2);
  background-color: #0F1116;
  border: 1.5px solid var(--b2);
  border-radius: var(--r-sm);
  color: var(--t0);
  -webkit-text-fill-color: #F2F4F7;
  font-size: 15px;
  font-family: var(--body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.au-card input:focus {
  border-color: rgba(240,185,11,.55);
  box-shadow: 0 0 0 3px rgba(240,185,11,.12);
}
.au-card input::placeholder { color: var(--t2); opacity: .7; }
.au-ref-input { text-transform: uppercase; font-family: var(--mono); }

/* ── Password wrapper ───────────────────────── */
.au-pw {
  position: relative;
  display: flex;
  align-items: center;
}
.au-pw input {
  flex: 1;
  padding-right: 46px !important;
}
.au-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  min-height: unset !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  transition: color var(--t-fast), background var(--t-fast) !important;
  flex-shrink: 0;
}
.au-eye .material-icons-round { font-size: 19px!important; }
.au-eye:hover {
  color: var(--t0);
  background: rgba(255,255,255,.06) !important;
}

/* ── Password strength bar ──────────────────── */
.au-strength {
  height: 4px;
  background: var(--c2);
  border-radius: 3px;
  margin: 8px 0 0;
  overflow: hidden;
  position: relative;
}
.au-strength span {
  display: block;
  height: 100%;
  width: 0;
  transition: width .25s var(--ease), background .25s var(--ease);
  border-radius: 3px;
}
.au-strength-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t2);
  margin-top: 5px;
  min-height: 13px;
  transition: color var(--t-fast);
}

/* ── Turnstile ──────────────────────────────── */
.cf-turnstile {
  margin: 20px 0 4px;
  display: flex;
  justify-content: center;
}

/* ── Submit button ───────────────────────────── */
.au-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  margin-top: 22px;
  border: none;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--brh), var(--br));
  color: #171A22;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .01em;
  transition: filter var(--t-fast), transform var(--t-fast);
  -webkit-appearance: none;
}
.au-submit:hover { filter: brightness(1.07); }
.au-submit:active { transform: translateY(1px); }
.au-submit:disabled { opacity: .6; cursor: default; }

/* ── Footer links ───────────────────────────── */
.au-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.au-alt {
  text-align: center;
  font-size: 13px;
  color: var(--t2);
}
.au-alt a {
  color: var(--br);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--t-fast);
}
.au-alt a:hover { color: var(--brh); text-decoration: underline; }

/* ── Help / guide accordion — same neutral/gold affordance
   as .hg-toggle used throughout the rest of the app ────── */
.au-help {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--b);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  margin-top: 24px;
}
.au-help-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  padding: 0;
  gap: 8px;
  list-style: none;
}
.au-help-toggle::-webkit-details-marker { display: none; }
.au-help-toggle:hover { color: var(--t0); }
.au-help-toggle span:first-child { flex: 1; text-align: left; display: flex; align-items: center; gap: 7px; }
.au-help-toggle .material-icons-round { font-size: 15px!important; color: var(--br); }
.au-help-caret { transition: transform var(--t-fast); }
.au-help[open] .au-help-caret { transform: rotate(90deg); }
.au-help-body { padding-top: 12px; }
.au-help-body p {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 8px;
}
.au-help-body p:last-child { margin-bottom: 0; }
.au-help-body b { color: var(--t1); }
.au-help-body a { color: var(--br); text-decoration: none; font-weight: 600; }
.au-help-body a:hover { text-decoration: underline; }

/* ── OTP input ──────────────────────────────── */
.au-otp {
  letter-spacing: .5em;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  padding-left: 22px !important; /* optical centering against the letter-spacing */
}
.au-link-btn {
  background: none;
  border: none;
  color: var(--t2);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color var(--t-fast);
}
.au-link-btn:hover { color: var(--br); }

/* ── Sent confirmation (forgot password) ─────── */
.au-sent {
  text-align: center;
  padding: 20px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.au-sent-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(240,185,11,.11); border: 1px solid rgba(240,185,11,.22);
  margin-bottom: 4px;
}
.au-sent-icon .material-icons-round { font-size: 24px!important; color: var(--br); }
.au-sent p {
  font-size: 13.5px;
  color: var(--t1);
  line-height: 1.6;
  max-width: 300px;
}
.au-sent p b {
  color: var(--t0);
  font-family: var(--disp);
  font-size: 15px;
}
.au-sent-tip {
  font-size: 12px !important;
  color: var(--t2) !important;
}
.au-sent-tip a { color: var(--br); text-decoration: none; font-weight: 600; }
.au-sent-tip a:hover { text-decoration: underline; }

/* ── Verify page: "code sent to" box ─────────── */
.au-verify-dest {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(240,185,11,.07);
  border: 1px solid rgba(240,185,11,.22);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  margin: 6px 0 4px;
}
.au-verify-dest-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.2);
}
.au-verify-dest-icon .material-icons-round { font-size: 17px!important; color: var(--br); }
.au-verify-dest-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--t1);
  min-width: 0;
}
.au-verify-dest-text b {
  color: var(--t0);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.au-verify-dest-exp {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--t2);
}
.au-verify-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--t2);
}

/* ── takeover / info notice (distinct from .au-err) ──────── */
.au-info {
  background: rgba(90,169,255,.08);
  border: 1px solid rgba(90,169,255,.24);
  color: var(--t1);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.au-info .material-icons-round { font-size: 16px!important; color: #5AA9FF; flex-shrink: 0; margin-top: 1px; }

/* ── Unified entry point (/continue/) ────────────────────────────────── */
.au-legal-consent{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:#6D7684;text-align:center}
.au-legal-consent a{color:#A9B1BD;text-decoration:none;border-bottom:1px solid rgba(169,177,189,.28)}
.au-legal-consent a:hover{color:#F0B90B;border-bottom-color:#F0B90B}

/* The risk warning is intentionally hard to skim past: this is one of the
   three required placements of the disclaimer. */
.au-riskwarn{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding:12px 13px;
  border:1px solid rgba(247,72,95,.32);border-radius:10px;
  background:linear-gradient(180deg,rgba(247,72,95,.09),rgba(247,72,95,.02));
  font-size:11.5px;line-height:1.6;color:#FFD9DE}
.au-riskwarn .material-icons-round{font-size:17px;color:#F7485F;flex:0 0 auto;margin-top:1px}
.au-riskwarn b{color:#fff;font-weight:650}

/* Professional footnote rather than a warning box: the legal test is clear and
   conspicuous, not alarming, and a red panel on every screen trains people to
   look past it. */
.au-note{margin:14px 0 0;font-size:11.5px;line-height:1.65;color:#8B93A1;text-align:center}
.au-note a{color:#A9B1BD;text-decoration:none;border-bottom:1px solid rgba(169,177,189,.28)}
.au-note a:hover{color:#F0B90B;border-bottom-color:#F0B90B}

/* ── Legal modal (opened by [data-legal] links) ─────────────────────────
   A card overlay so a visitor mid-signup reads the document without losing
   the form. The iframe loads the doc in embed mode (no app shell). */
.au-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(5,7,10,.72);
  backdrop-filter:blur(3px)}
.au-modal[hidden]{display:none}
.au-modal-card{width:min(760px,100%);height:min(82vh,820px);display:flex;
  flex-direction:column;background:#0B0E11;border:1px solid #232A33;
  border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.au-modal-head{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid #232A33;flex:0 0 auto}
.au-modal-title{font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:14px;color:#EAECEF;flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.au-modal-x{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid #2E3742;border-radius:8px;
  background:none;color:#A9B1BD;cursor:pointer;transition:.15s;flex:0 0 auto}
.au-modal-x:hover{border-color:#F0B90B;color:#F0B90B}
.au-modal-frame{flex:1;width:100%;border:0;background:#0B0E11}
body.au-modal-open{overflow:hidden}
@media(max-width:640px){
  .au-modal{padding:0}
  .au-modal-card{width:100%;height:100%;border-radius:0;border:0}
}