/* ─── LOGIN / AUTH PAGE ─── */

/* Nav: centered logo only */
nav.nav { justify-content: center; }

/* ─── BACKGROUND ORBS ─── */
.orb {
  position: fixed; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: 0;
}
.orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,111,94,0.07) 0%, transparent 70%);
  top: 10vh; right: -100px;
  animation: floatOrb 10s ease-in-out infinite;
}
.orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(184,159,140,0.06) 0%, transparent 70%);
  bottom: 10vh; left: -80px;
  animation: floatOrb 13s ease-in-out infinite reverse;
}

/* ─── PAGE WRAPPER ─── */
.page {
  position: relative; z-index: 1;
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 20px 64px;
}

/* ─── AUTH CARD ─── */
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 24px rgba(44,40,37,0.07), 0 1px 4px rgba(44,40,37,0.04);
  padding: 40px 36px;
  opacity: 0; transform: translateY(16px);
  animation: cardIn 0.5s ease forwards 0.1s;
}
@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}

.card-title {
  font-family: 'Lora', serif;
  font-size: 24px; font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 8px; line-height: 1.3;
}
.card-subtitle {
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 28px; line-height: 1.5;
}

/* ─── GOOGLE BUTTON ─── */
.btn-google {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--text-primary); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.btn-google:hover {
  background: var(--bg-warm); border-color: var(--accent-light);
  box-shadow: 0 1px 6px rgba(44,40,37,0.08);
}
.btn-google svg { flex-shrink: 0; }

/* ─── DIVIDER ─── */
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.divider-line { flex: 1; height: 1px; background: var(--border-light); }
.divider-text { font-size: 12px; color: var(--text-hint); white-space: nowrap; }

/* ─── FORM ─── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.02em;
}
.form-input {
  width: 100%; height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 14px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none; -webkit-appearance: none;
}
.form-input::placeholder { color: var(--text-hint); }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,111,94,0.12); }
.form-input.error { border-color: var(--error); box-shadow: 0 0 0 3px rgba(192,97,74,0.1); }
.form-error { font-size: 12px; color: var(--error); margin-top: 5px; display: none; }
.form-error.visible { display: block; }

/* ─── PASSWORD FIELD ─── */
.input-wrapper { position: relative; }
.input-wrapper .form-input { padding-right: 44px; }
.toggle-password {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-hint); padding: 4px;
  display: flex; align-items: center; transition: color 0.15s;
}
.toggle-password:hover { color: var(--text-secondary); }

/* ─── FORGOT LINK ─── */
.forgot-link {
  display: block; text-align: right;
  font-size: 12px; color: var(--text-hint);
  text-decoration: none; margin-top: 6px; transition: color 0.15s;
}
.forgot-link:hover { color: var(--accent); }

/* ─── SUBMIT BUTTON ─── */
.btn-submit {
  width: 100%; height: 44px;
  background: var(--text-primary); color: var(--bg);
  border: none; border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
  cursor: pointer; margin-top: 20px;
  transition: opacity 0.15s, transform 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-submit:hover { opacity: 0.88; }
.btn-submit:active { transform: scale(0.99); }
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-submit .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(250,248,245,0.3);
  border-top-color: var(--bg); border-radius: 50%;
  animation: spin 0.7s linear infinite; display: none;
}
.btn-submit.loading .spinner { display: block; }
.btn-submit.loading .btn-text { display: none; }

/* ─── SWITCH & TERMS ─── */
.switch-row { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-secondary); }
.switch-link {
  color: var(--accent); text-decoration: none; font-weight: 500;
  cursor: pointer; background: none; border: none;
  font-family: 'Inter', sans-serif; font-size: 13px; transition: opacity 0.15s;
}
.switch-link:hover { opacity: 0.75; }
.terms-note { font-size: 11px; color: var(--text-hint); text-align: center; margin-top: 16px; line-height: 1.6; }
.terms-note a { color: var(--text-hint); text-decoration: underline; text-underline-offset: 2px; }
.terms-note a:hover { color: var(--text-secondary); }

/* ─── RETURN NOTICE ─── */
.return-notice {
  width: 100%; max-width: 420px; margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-warm); border: 1px solid var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  display: none; opacity: 0; animation: cardIn 0.4s ease forwards;
}
.return-notice.visible { display: block; }
.return-notice strong { color: var(--accent); font-weight: 500; }

/* ─── PANEL TRANSITIONS ─── */
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* ─── BACK LINK ─── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
  text-decoration: none; cursor: pointer;
  background: none; border: none;
  font-family: 'Inter', sans-serif; margin-bottom: 20px;
  transition: color 0.15s; padding: 0;
}
.back-link:hover { color: var(--text-primary); }

/* ─── SUCCESS STATE ─── */
.success-state { text-align: center; padding: 12px 0; display: none; }
.success-state.visible { display: block; }
.success-icon {
  width: 48px; height: 48px;
  background: rgba(74,122,86,0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; color: var(--success);
}
.success-state p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.success-state strong { color: var(--text-primary); }

/* ─── MOBILE ─── */
@media (max-width: 480px) {
  .auth-card { padding: 32px 24px; }
  .page { padding: 32px 16px 48px; }
}