/* ==========================================================================
   Auth pages (login / register)
   ========================================================================== */

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

/* Left brand panel */
.auth-brand {
  background: var(--color-secondary); color: #fff; position: relative; overflow: hidden;
  padding: var(--space-12); display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand::before {
  content: ''; position: absolute; top: -20%; right: -15%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,32,54,0.35), transparent 62%);
  animation: blobMove 18s ease-in-out infinite;
}
.auth-brand::after {
  content: ''; position: absolute; bottom: -25%; left: -20%; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,32,54,0.12), transparent 65%);
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { display: flex; align-items: center; gap: 10px; }
.auth-logo img { width: 36px; height: 36px; }
.auth-logo span { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; }

.auth-copy h2 { color: #fff; font-size: var(--fs-3xl); line-height: 1.1; margin-bottom: var(--space-4); max-width: 460px; }
.auth-copy p { color: rgba(255,255,255,0.75); font-size: var(--fs-lg); max-width: 440px; }

.auth-illus {
  margin-top: var(--space-8); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg); padding: var(--space-5); backdrop-filter: blur(6px); max-width: 400px;
}
.auth-illus .ai-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.auth-illus .ai-row .aic { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.1); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.auth-illus .ai-row .aic i { width: 20px; height: 20px; }
.auth-illus .ai-row .t { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.auth-illus .ai-row .s { font-size: var(--fs-sm); color: rgba(255,255,255,0.65); }

.auth-quote { display: flex; align-items: center; gap: 12px; }
.auth-quote .qt { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); }
.auth-quote .qt b { color: #fff; }

/* Right form panel */
.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-8); overflow-y: auto; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .mobile-logo { display: none; margin-bottom: var(--space-8); }
.auth-card h1 { font-size: var(--fs-2xl); margin-bottom: 8px; }
.auth-card .sub { color: var(--text-muted); margin-bottom: var(--space-8); }
.auth-card .form-foot { text-align: center; margin-top: var(--space-6); color: var(--text-muted); font-size: var(--fs-base); }
.auth-card .form-foot a { color: var(--color-primary); font-weight: var(--fw-semibold); }
.forgot-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.forgot-row a { color: var(--color-primary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* Password strength */
.pw-strength { display: flex; gap: 5px; margin-top: 8px; }
.pw-strength .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-active); transition: background var(--dur); }
.pw-strength.weak .seg:nth-child(1) { background: var(--color-danger); }
.pw-strength.medium .seg:nth-child(-n+2) { background: var(--color-warning); }
.pw-strength.strong .seg { background: var(--color-success); }