/* Shared auth layout — login, register, OTP, profile onboarding */
body.auth-page {
  background: var(--cream-50);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
}
@media (max-width: 980px) {
  body.auth-page { grid-template-columns: 1fr; }
  body.auth-page .auth-art { display: none; }
}

.auth-art {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 0% 0%, #2A1209 0%, #0E0E11 55%, #08080A 100%);
  color: var(--cream-50);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.art-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; }
.art-brand .mark { width: 36px; height: 36px; background: var(--ember-500); border-radius: 8px; display: grid; place-items: center; }
.art-brand .mark svg { width: 22px; height: 22px; fill: var(--ink-950); }
.art-brand em { color: var(--ember-400); font-style: normal; }
.art-quote { max-width: 460px; }
.art-quote h1 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: 0.92; margin-top: 16px; }
.art-quote h1 em { font-style: italic; color: var(--ember-400); }
.art-quote p { margin-top: 16px; color: var(--ink-300); font-size: 15px; line-height: 1.6; }
.art-strip { display: flex; gap: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-400); text-transform: uppercase; flex-wrap: wrap; }
.art-strip span em { color: var(--cream-50); font-style: normal; }

.auth-pane { display: flex; flex-direction: column; padding: 32px 56px; min-height: 100vh; }
@media (max-width: 720px) { .auth-pane { padding: 28px 22px; } }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-back { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); display: inline-flex; align-items: center; gap: 8px; }
.auth-back:hover { color: var(--ember-500); }
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 32px 0; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 52px); line-height: 1; }
.auth-card h2 em { font-style: italic; color: var(--ember-500); }
.auth-card .sub { color: var(--ink-500); font-size: 14px; margin-top: 12px; }
.auth-steps { display: flex; gap: 8px; margin: 24px 0; }
.auth-step { flex: 1; height: 4px; border-radius: 2px; background: var(--ink-100); }
.auth-step.done { background: var(--success); }
.auth-step.active { background: var(--ember-500); }

.field { margin-bottom: 14px; position: relative; }
.field .label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); font-family: var(--font-mono); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--ink-100); border-radius: 12px;
  font: inherit; font-size: 15px; background: white; color: var(--ink-900);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ember-500); box-shadow: 0 0 0 4px rgba(244,78,16,.12);
}
.btn-block { width: 100%; padding: 16px; font-size: 15px; border-radius: 12px; background: var(--ink-950); color: white; border: none; cursor: pointer; font-weight: 500; margin-top: 8px; }
.btn-block:hover { background: var(--ember-500); }
.auth-links { font-size: 13px; color: var(--ink-500); text-align: center; margin-top: 20px; }
.auth-links a { color: var(--ember-600); }

.otp-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0; }
.otp-row input { aspect-ratio: 1; text-align: center; font-family: var(--font-display); font-size: 24px; border-radius: 12px; border: 1px solid var(--ink-100); }
.otp-row input.filled { background: var(--ember-50); border-color: var(--ember-200); }

.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.doc-slot { border: 2px dashed var(--ink-200); border-radius: 16px; padding: 24px; text-align: center; cursor: pointer; transition: border-color var(--dur-fast); }
.doc-slot:hover { border-color: var(--ember-500); background: var(--ember-50); }
.doc-slot.done { border-style: solid; border-color: var(--success); background: var(--success-bg); }

.lang-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
.lang-pick { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid var(--ink-100); border-radius: 14px; cursor: pointer; background: white; }
.lang-pick:hover { border-color: var(--ink-300); }
.lang-pick.on { border-color: var(--ember-500); background: var(--ember-50); box-shadow: 0 0 0 3px rgba(244,78,16,.12); }