:root {
  --auth-bg-light: radial-gradient(120% 140% at 88% 8%, rgba(184,165,116,0.22) 0%, transparent 42%), linear-gradient(140deg, #20232A 0%, #2C3037 48%, #161A20 100%);
  --auth-bg-dark: radial-gradient(120% 140% at 88% 8%, rgba(184,165,116,0.18) 0%, transparent 42%), linear-gradient(140deg, #181B21 0%, #22262E 48%, #0E1015 100%);
  --auth-page-bg: var(--auth-bg-light);
  --auth-ink: #2B2B2B; --auth-muted: #5A5A5A; --auth-card: #FFFFFF;
  --auth-card-border: #E8E8E8; --auth-field-bg: #FFFFFF; --auth-field-border: #E8E8E8;
  --auth-field-border-hover: #DCD7CC; --auth-hairline: #E8E8E8; --auth-chip-bg: #F3ECDD;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not(.light-mode):not(.dark-mode) {
    --auth-page-bg: var(--auth-bg-dark);
    --auth-ink: #EDEEF0; --auth-muted: #A6AAB2; --auth-card: #1D2025;
    --auth-card-border: #2C3037; --auth-field-bg: #22262C; --auth-field-border: #373C44;
    --auth-field-border-hover: #4A4F58; --auth-hairline: #2C3037; --auth-chip-bg: #2E2A20;
    color-scheme: dark;
  }
}
html.dark-mode { --auth-page-bg: var(--auth-bg-dark); --auth-ink: #EDEEF0; --auth-muted: #A6AAB2; --auth-card: #1D2025; --auth-card-border: #2C3037; --auth-field-bg: #22262C; --auth-field-border: #373C44; --auth-field-border-hover: #4A4F58; --auth-hairline: #2C3037; --auth-chip-bg: #2E2A20; color-scheme: dark; }
html.light-mode { --auth-page-bg: var(--auth-bg-light); --auth-ink: #2B2B2B; --auth-muted: #5A5A5A; --auth-card: #FFFFFF; --auth-card-border: #E8E8E8; --auth-field-bg: #FFFFFF; --auth-field-border: #E8E8E8; --auth-field-border-hover: #DCD7CC; --auth-hairline: #E8E8E8; --auth-chip-bg: #F3ECDD; color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; background: var(--auth-page-bg); }
body.auth-body {
  margin: 0; min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--auth-page-bg); color: var(--auth-ink);
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
body.auth-body.auth-body-top { align-items: flex-start; padding-top: max(50px, env(safe-area-inset-top)); padding-bottom: max(50px, env(safe-area-inset-bottom)); }
.auth-wrap { width: 100%; max-width: 400px; }
.auth-wrap.auth-wrap-wide { max-width: 480px; }
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand img { height: 56px; width: auto; display: inline-block; }
.auth-brand .auth-tagline { margin: 10px 0 0; font-size: 12.5px; color: var(--auth-muted); letter-spacing: 0.2px; }
.auth-card {
  background: var(--auth-card); border: 1px solid var(--auth-card-border); border-radius: 16px;
  padding: 34px 32px 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 48px -16px rgba(0,0,0,0.16);
}
.auth-card h1 { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 4px; color: var(--auth-ink); }
.auth-sub { font-size: 13.5px; color: var(--auth-muted); margin: 0 0 24px; }
.auth-flash-error, .auth-flash-success {
  border-radius: 10px; padding: 11px 14px; font-size: 13px; margin-bottom: 18px; font-weight: 500;
}
.auth-flash-error { background: rgba(240,102,92,0.12); color: #C0453B; border: 1px solid rgba(240,102,92,0.3); }
.auth-flash-success { background: rgba(14,168,144,0.12); color: #0B8A73; border: 1px solid rgba(14,168,144,0.3); }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--auth-ink); opacity: 0.75; margin-bottom: 6px; letter-spacing: 0.1px; }
.auth-field input[type="email"], .auth-field input[type="password"], .auth-field input[type="text"] {
  width: 100%; padding: 11px 14px; font-size: 16px; font-family: inherit; color: var(--auth-ink);
  background: var(--auth-field-bg); border: 1.5px solid var(--auth-field-border); border-radius: 10px;
  -webkit-appearance: none; appearance: none; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.auth-field input:hover { border-color: var(--auth-field-border-hover); }
.auth-field input:focus { border-color: #6B6345; box-shadow: 0 0 0 3px rgba(184,165,116,0.22); }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: var(--auth-ink); -webkit-box-shadow: 0 0 0 1000px var(--auth-field-bg) inset; transition: background-color 5000s ease-in-out 0s; caret-color: var(--auth-ink); }
.auth-code-input {
  font-size: 24px !important; letter-spacing: 6px !important; text-align: center; font-weight: 600;
}
.auth-btn {
  width: 100%; padding: 13px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #6B6345, #8B7D5F); border: none; border-radius: 10px; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: opacity 0.15s ease, transform 0.1s ease;
}
.auth-btn:hover { opacity: 0.92; }
.auth-btn:active { transform: scale(0.99); }
.auth-btn-teal { background: linear-gradient(135deg, #27AE60, #1C7A44); }
.auth-link-row { text-align: center; margin-top: 18px; }
.auth-link-row a { font-size: 12.5px; color: var(--auth-muted); text-decoration: none; }
.auth-link-row a:hover { color: #6B6345; text-decoration: underline; }
.auth-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--auth-hairline);
  font-size: 11.5px; color: #8B7D5F; text-align: center;
}
.auth-note svg { flex-shrink: 0; }
.auth-step {
  background: var(--auth-field-bg); border: 1px solid var(--auth-card-border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 16px;
}
.auth-step p { margin: 0 0 8px; }
.auth-step-title { font-weight: 600; font-size: 14px; color: var(--auth-ink); }
.auth-step-desc { font-size: 12.5px; color: var(--auth-muted); margin-bottom: 12px !important; }
.auth-secret-box {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: 1px;
  background: var(--auth-card); border: 1.5px solid var(--auth-field-border); border-radius: 8px;
  padding: 14px; text-align: center; word-break: break-all; color: var(--auth-ink);
  margin: 0 0 10px;
}
.auth-meta { font-size: 11.5px; color: var(--auth-muted); margin: 0 !important; }
.auth-codes-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--auth-field-bg); border: 1px solid var(--auth-card-border); border-radius: 12px;
  padding: 16px;
}
.auth-code-chip {
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 15px; font-weight: 700;
  text-align: center; padding: 8px 4px; color: var(--auth-ink);
}
@media (max-width: 420px) {
  .auth-card { padding: 26px 22px 22px; border-radius: 14px; }
  .auth-codes-grid { grid-template-columns: 1fr 1fr; }
}