/* =============================================================
 *  CenterFlow, sign-in experience (account.html only)
 *  Split-screen: dark cinematic brand panel + warm auth card.
 *  account.js renders unchanged into #app; classes it emits
 *  (.tabs .tab .form .field .alert .btn) are styled by styles.css
 *  and polished here.
 * ============================================================= */

.auth-body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
}

.auth-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100svh;
}
@media (min-width: 900px) {
  .auth-split { grid-template-columns: 0.95fr 1.05fr; }
}

/* ---- Left: always-dark brand panel ---- */
.auth-brand-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 52px);
  background: radial-gradient(130% 100% at 20% 0%, #13223a, #0a1220 65%);
  color: #eef4fb;
}
@media (min-width: 900px) { .auth-brand-panel { display: flex; } }

.auth-blob {
  position: absolute; border-radius: 50%; filter: blur(90px);
  mix-blend-mode: screen; pointer-events: none; z-index: -1;
}
.auth-blob-1 {
  width: 42vw; height: 42vw; left: -12vw; top: -10vw; opacity: 0.5;
  background: radial-gradient(circle, #3fb6ea, transparent 68%);
  animation: authDrift1 26s ease-in-out infinite;
}
.auth-blob-2 {
  width: 34vw; height: 34vw; right: -10vw; bottom: -8vw; opacity: 0.4;
  background: radial-gradient(circle, #a8d8f0, transparent 66%);
  animation: authDrift2 32s ease-in-out infinite;
}
@keyframes authDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4vw,4vh) scale(1.1)} }
@keyframes authDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-3vw,-4vh) scale(0.94)} }
@media (prefers-reduced-motion: reduce) { .auth-blob { animation: none; } }

.auth-brand-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.auth-brand-top { display: flex; align-items: center; }
.auth-brand-top .brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: #eef4fb; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
}
.auth-brand-top .brand-mark {
  width: 40px; height: 40px; border-radius: 11px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 10px 26px -10px rgba(0,0,0,0.8);
}

.auth-brand-copy h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0 0 16px; color: #eef4fb;
  text-wrap: balance;
}
.auth-brand-copy h1 em { font-style: italic; color: #3fb6ea; }
.auth-brand-copy p {
  font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.55;
  color: #a9bcd4; max-width: 42ch; margin: 0;
}

.auth-points { list-style: none; display: grid; gap: 12px; padding: 0; margin: 28px 0 0; }
.auth-points li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 0.94rem; color: #a9bcd4;
}
.auth-points li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #3fb6ea, #a8d8f0);
  box-shadow: 0 0 10px rgba(63, 182, 234, 0.6);
}

.auth-brand-foot {
  font-family: var(--font-sans); font-size: 0.8rem; color: rgba(169, 188, 212, 0.6);
}

/* ---- Right: warm auth card ---- */
.auth-side {
  display: flex; flex-direction: column;
  padding: clamp(18px, 3vw, 40px);
}
.auth-side-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.auth-side-top .brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
}
.auth-side-top .brand-mark { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
@media (min-width: 900px) { .auth-side-top .brand { visibility: hidden; } }

.auth-card-wrap {
  flex: 1; display: grid; place-items: center; padding: 24px 0;
}
.auth-card {
  width: min(430px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3.4vw, 40px);
  animation: authCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes authCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

.auth-card h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -0.015em;
  margin: 0 0 6px; color: var(--ink);
}
.auth-card > p.muted, .auth-card .muted { color: var(--taupe); }
.auth-card .tabs { margin: 18px 0 20px; }
.auth-card .form { gap: 16px; }
.auth-card .field input { padding: 13px 14px; border-radius: 11px; }
.auth-card .btn-block { padding: 14px 20px; border-radius: 999px; font-size: 0.98rem; }

/* ── Google sign-in ────────────────────────────────────────────────────────
   The mark keeps Google's four brand colours (their terms require the official
   G, unmodified), so it is the one place on this page that ignores the palette.
   Everything around it is ours. */
.auth-card .btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-card .btn-google svg { flex: none; }

.auth-card .or-rule {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--taupe);
  font-family: var(--font-sans); font-size: 0.78rem;
  text-transform: lowercase;
}
.auth-card .or-rule::before,
.auth-card .or-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--line-strong);
}

.auth-fine {
  text-align: center; margin: 18px 0 0;
  font-family: var(--font-sans); font-size: 0.8rem; color: var(--taupe);
}
.auth-fine a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* ── verification code ─────────────────────────────────────────────────────
   The signup confirmation is a typed code, not a clicked link: mail security
   scanners follow every URL they see and were confirming accounts on the
   user's behalf. */
.auth-card .code-input {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-align: center;
  /* Trailing letter-spacing pads the right side; nudge back so it reads centred. */
  text-indent: .38em;
}
.auth-card .code-input::placeholder { color: var(--line-strong); letter-spacing: .38em; }

.auth-card .hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--taupe); }

.auth-card .form-foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: center; margin-top: 16px;
}
.auth-card .btn-link {
  background: none; border: 0; padding: 4px 2px;
  font: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--accent); cursor: pointer; border-radius: var(--radius-sm);
}
.auth-card .btn-link:hover:not(:disabled) { text-decoration: underline; }
.auth-card .btn-link:disabled { color: var(--taupe); cursor: default; }

/* Label row that carries "Forgot password?" opposite the field label. */
.auth-card .field-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.auth-card .field-head label { margin-bottom: 0; }
.auth-card .field-head .btn-link { padding: 0; font-size: 0.8rem; }

.auth-card .form-note {
  margin: 14px 0 0; text-align: center;
  font-size: 0.8rem; line-height: 1.5;
}