/* auth.css */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
:root {
  --ink:#0d0d0f; --paper:#fafaf8; --cream:#f4f1eb; --accent:#e8641a;
  --border:#e2dfd8; --font-serif:'Playfair Display',serif; --font-sans:'DM Sans',sans-serif;
}
body { font-family: var(--font-sans); background: var(--paper); min-height: 100vh; }

.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.auth-brand {
  background: var(--ink); display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px; background-image: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(232,100,26,0.15) 0%, transparent 60%);
}
.brand-logo { font-family: var(--font-serif); font-size: 26px; font-weight: 900; color: white; }
.brand-logo span { color: var(--accent); }
.brand-tagline { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.brand-tagline h2 { font-family: var(--font-serif); font-size: clamp(28px,4vw,52px); font-weight: 900; color: white; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; }
.brand-tagline h2 em { font-style: italic; color: var(--accent); }
.brand-tagline p { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.7; font-weight: 300; max-width: 340px; }

.brand-preview { display: flex; flex-direction: column; gap: 8px; opacity: 0.4; }
.preview-block { border-radius: 6px; height: 12px; }
.preview-hero { background: rgba(255,255,255,0.2); height: 48px; border-radius: 8px; }
.preview-para { background: rgba(255,255,255,0.1); }
.preview-quote { background: rgba(232,100,26,0.3); width: 70%; }

.brand-stats { display: flex; gap: 32px; }
.bs { display: flex; flex-direction: column; gap: 4px; }
.bs span { font-family: var(--font-serif); font-size: 28px; font-weight: 900; color: white; }
.bs { font-size: 12px; color: rgba(255,255,255,0.4); }

.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--paper); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 8px; }
.auth-sub { font-size: 15px; color: #8a8a94; margin-bottom: 32px; font-weight: 300; }

.auth-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 12px 16px; font-size: 14px; margin-bottom: 20px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: #3a3a3f; margin-bottom: 6px; }
.field label small { font-weight: 400; color: #8a8a94; }
.field input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 15px; font-family: var(--font-sans); outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: white; color: var(--ink); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,100,26,0.1); }

.btn-submit { width: 100%; background: var(--ink); color: white; padding: 13px; border-radius: 8px; border: none; font-size: 15px; font-weight: 500; cursor: pointer; font-family: var(--font-sans); transition: background 0.2s; margin-top: 4px; }
.btn-submit:hover { background: var(--accent); }

.auth-hint { margin-top: 16px; font-size: 13px; color: #8a8a94; background: var(--cream); border-radius: 8px; padding: 10px 14px; }
.auth-switch { margin-top: 20px; font-size: 14px; color: #8a8a94; text-align: center; }
.auth-switch a { color: var(--accent); font-weight: 500; }
.auth-terms { font-size: 12px; color: #8a8a94; margin-top: 12px; }
.auth-terms a { color: var(--accent); }

@media (max-width: 768px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-side { padding: 32px 20px; }
  .auth-card { max-width: 100%; }

  /* Prevent iOS auto-zoom: inputs must be >= 16px */
  .field input,
  .field-group input { font-size: 16px !important; }

  /* Larger tap targets */
  .btn-submit { padding: 15px; font-size: 16px; }
  a, button { touch-action: manipulation; }
}