html, body { overflow-x: hidden; max-width: 100%; }
:root {
  --onyx: #000000; --ivory: #FAFAFA; --green: #262626; --green-deep: #000000;
  --gold: #E31E24; --gold-soft: #FF6B6B; --taupe: #6B6B6B; --hairline: #E5E5E5; --card: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'IBM Plex Sans', sans-serif; color: var(--onyx); background: var(--ivory); min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }

.nav { background: var(--onyx); color: var(--ivory); border-bottom: 1px solid rgba(227,30,36,0.25); }
.nav-inner { max-width: 1240px; margin: 0 auto; padding: 16px 24px; }
.logo { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.5rem; display: flex; align-items: baseline; gap: 8px; }
.logo .logo-sub { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.62rem; letter-spacing: 0.1em; opacity: 0.55; text-transform: uppercase; }

.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-box {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 8px 36px 36px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 50px rgba(10,10,10,0.08);
}

.auth-tabs { display: flex; border-bottom: 1px solid var(--hairline); margin: 0 -36px 28px; padding: 0 36px; }
.auth-tab-btn {
  flex: 1; background: none; border: none; padding: 20px 4px 16px; font-size: 0.95rem; font-weight: 700;
  color: var(--taupe); cursor: pointer; border-bottom: 2px solid transparent; font-family: 'Big Shoulders Display', sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.auth-tab-btn.active { color: var(--onyx); border-bottom-color: var(--gold); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--onyx); }
.auth-form input {
  font-weight: 500; font-size: 1rem; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--hairline);
  background: var(--ivory);
}
.auth-form input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; background: var(--card); }

.google-signin-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card); color: #3c4043; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 11px 13px; font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
  transition: background 0.15s, box-shadow 0.15s;
}
.google-signin-btn:hover { background: #f8f8f8; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.auth-or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--taupe); font-size: 0.78rem; }
.auth-or-divider::before, .auth-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

.auth-perk, .auth-perk-banner {
  background: linear-gradient(90deg, #2a2210, #3a2f14); border: 1px solid var(--gold); color: var(--gold-soft);
  padding: 10px 14px; border-radius: 8px; font-size: 0.84rem; text-align: center;
}
.auth-perk-banner { margin-bottom: 16px; }

.auth-hint { color: var(--taupe); font-size: 0.85rem; }
.auth-remember-row {
  flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer;
  font-size: 0.84rem !important; color: var(--onyx); margin-top: -4px;
}
.auth-remember-row input { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; margin: 0; }
.auth-forgot { text-align: right; margin-top: -8px; font-size: 0.8rem; }
.auth-forgot a { color: var(--green); font-weight: 600; }
.auth-forgot a:hover { text-decoration: underline; }

.auth-error { background: #FBEAEA; color: #C0392B; border: 1px solid rgba(192,57,43,0.3); border-radius: 7px; padding: 10px 12px; font-size: 0.84rem; }
.auth-success { background: #EAF6EE; color: #1E7A3C; border: 1px solid rgba(30,122,60,0.3); border-radius: 7px; padding: 10px 12px; font-size: 0.84rem; line-height: 1.5; }

.auth-submit {
  background: var(--onyx); color: var(--ivory); border: none; padding: 14px 20px; border-radius: 8px;
  font-weight: 700; font-size: 0.92rem; cursor: pointer; margin-top: 4px;
}
.auth-submit:hover { background: var(--green); }
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-switch { text-align: center; font-size: 0.84rem; color: var(--taupe); }
.auth-switch a { color: var(--green); font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }

footer { background: var(--card); border-top: 1px solid var(--hairline); }
.footer-bottom { max-width: 1240px; margin: 0 auto; padding: 20px 24px; font-size: 0.78rem; color: var(--taupe); }

/* ---- reset-password page ---- */
.rp-box { text-align: center; }
.rp-box .auth-form { text-align: left; }
.rp-icon-ring, .rp-check-ring {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; background: radial-gradient(circle at 35% 30%, #1A1A1A, var(--green) 70%);
  border: 2px solid var(--gold-soft);
}
.rp-icon-ring-error { background: radial-gradient(circle at 35% 30%, #4a1e1e, #6b2020 70%); border-color: #C0392B; }
.rp-icon { font-size: 1.3rem; }
.rp-check-ring { background: radial-gradient(circle at 35% 30%, #1A1A1A, #1E7A3C 70%); border-color: #6FCB8F; }
.rp-check { font-size: 1.5rem; color: var(--ivory); font-weight: 700; }
.rp-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 6px; }
.rp-subtitle { color: var(--taupe); font-size: 0.86rem; margin-bottom: 22px; }
.rp-state { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 4px; }

.rp-spinner {
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--hairline); border-top-color: var(--gold);
  animation: rp-spin 0.8s linear infinite; margin-bottom: 8px;
}
@keyframes rp-spin { to { transform: rotate(360deg); } }

.password-field { position: relative; display: flex; }
.password-field input { flex: 1; padding-right: 42px !important; }
.password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none;
  font-size: 1rem; cursor: pointer; padding: 6px 8px; opacity: 0.55; line-height: 1;
}
.password-toggle:hover { opacity: 1; }

.password-requirements { list-style: none; margin: -6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.password-requirements li {
  font-size: 0.76rem; color: var(--taupe); padding-left: 20px; position: relative;
}
.password-requirements li::before {
  content: "○"; position: absolute; left: 0; font-size: 0.7rem; top: 1px;
}
.password-requirements li.met { color: #1E7A3C; font-weight: 600; }
.password-requirements li.met::before { content: "✓"; }
.logo-full { height: 68px !important; width: auto !important; max-width: 300px !important; max-height: 68px !important; object-fit: contain !important; display: block !important; }
.footer-social-row-compact { max-width: 1240px; margin: 0 auto; padding: 18px 24px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .footer-social-label { font-size: 0.82rem; font-weight: 700; color: var(--onyx); } .footer-social-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } .footer-social-icon:hover { transform: translateY(-2px); }