/* ════════════════════════════════════════════════════════════════════════
   LISTR · sign-in and sign-up pages in the new interface ("Ink & Teal").
   login.html and signup.html link this only when the new interface is on;
   it restyles their classic markup into the split layout of the redesign
   (mockups/screenshots/ink-teal/5-sign-in.png).
   ════════════════════════════════════════════════════════════════════════ */

body.ui-new {
  --n-50:  #f3f5f7;
  --n-100: #eaedf1;
  --n-200: #dde2e8;
  --n-300: #cdd2db;
  --n-400: #9aa2b1;
  --n-500: #6b7385;
  --n-700: #343a48;
  --n-800: #1f2430;
  --n-900: #0f1b2d;
  --brand-50:  #e7f6f4;
  --brand-100: #c9ece7;
  --brand-500: #14a394;
  --brand-600: #0d8478;
  --brand-700: #0a6a61;
  --bg: #ffffff; --surface: #ffffff; --surface2: #ffffff; --border: var(--n-200);
  --accent: var(--brand-600); --accent2: var(--brand-700);
  --text: var(--n-800); --subtext: var(--n-500);
  --error: #c0352b; --success: #127a45;

  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; justify-content: stretch;
  min-height: 100vh; background: #fff; color: var(--text);
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.ui-new .brand { gap: 10px; margin-bottom: 0; }
.ui-new .brand-mark {
  width: 30px; height: 30px; border-radius: 8px; font-size: 14px; font-weight: 800;
  background: var(--brand-500); box-shadow: none;
}
.ui-new .brand-word {
  font-size: 17px; font-weight: 800; letter-spacing: 3px;
  background: none; -webkit-text-fill-color: currentColor; color: var(--n-900);
}

/* ── Left panel ────────────────────────────────────────────────────────── */
.ui-new .auth-side {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--n-900); color: #fff; padding: 56px;
}
.ui-new .auth-side::after {
  content: ""; position: absolute; right: -160px; bottom: -160px; width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle, rgba(20,163,148,.35), transparent 65%);
  pointer-events: none;
}
.ui-new .auth-side .brand-word { color: #fff; }
.ui-new .auth-side h2 {
  margin-top: auto; max-width: 440px; position: relative; z-index: 1;
  font-size: 36px; line-height: 1.15; letter-spacing: -.8px; font-weight: 700;
}
.ui-new .auth-side p {
  position: relative; z-index: 1; max-width: 420px; margin-top: 14px;
  color: #a9afbd; font-size: 15px; line-height: 1.6;
}
.ui-new .flow { display: flex; gap: 10px; margin-top: 32px; position: relative; z-index: 1; }
.ui-new .flow div {
  flex: 1; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-size: 12.5px; color: #d6d9e0; line-height: 1.45;
}
.ui-new .flow b { display: block; color: #fff; font-weight: 650; }

/* ── Right panel: the form ─────────────────────────────────────────────── */
.ui-new .auth-main { justify-content: center; padding: 48px 24px; }
.ui-new .card {
  max-width: 360px; padding: 0; background: none; border: 0; border-radius: 0;
}
.ui-new .card > .brand { display: none; }   /* shown in the left panel instead */
.ui-new .auth-head { display: block; margin-bottom: 22px; }
.ui-new .auth-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; color: var(--n-900); }
.ui-new .auth-head p { margin-top: 6px; color: var(--n-500); font-size: 14px; }
.ui-new .sub { display: none; }

.ui-new label {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600;
  color: var(--n-800); margin: 16px 0 6px;
}
.ui-new input[type="text"], .ui-new input[type="password"], .ui-new input[type="email"] {
  height: 42px; padding: 0 12px; border-radius: 8px; font-size: 14px;
  background: #fff; border: 1px solid var(--n-300); color: var(--n-900);
}
.ui-new input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.ui-new .hint { font-size: 12px; color: var(--n-500); margin-top: 6px; }

.ui-new .btn {
  height: 44px; margin-top: 22px; border-radius: 8px; font-size: 14px; font-weight: 650;
  background: var(--brand-600);
}
.ui-new .btn:hover { background: var(--brand-700); }
.ui-new .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-100); }

.ui-new .alert {
  border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 8px;
  background: #fdecea; border: 1px solid #f5c2bc; color: var(--error);
}
.ui-new .alert.success { background: #ecfdf3; border-color: #c6f0d8; color: var(--success); }
.ui-new .resend-form button {
  height: 38px; border-radius: 8px; font-size: 13px; background: #fff; color: var(--n-800); border-color: var(--n-300);
}
.ui-new .resend-form button:hover { border-color: var(--brand-500); }

.ui-new .pw-rules { font-size: 12px; color: var(--n-500); }
.ui-new .pw-rules li.ok { color: var(--success); }
.ui-new label.agree { font-size: 12.5px; color: var(--n-700); }

.ui-new .footer { margin-top: 22px; font-size: 13px; color: var(--n-500); }
.ui-new .footer a, .ui-new .legal-links a, .ui-new label.agree a { color: var(--brand-600); font-weight: 600; }
.ui-new .back-home { margin-top: 28px; font-size: 13px; color: var(--n-500); }
.ui-new .back-home:hover { color: var(--n-900); }
.ui-new .legal-links { font-size: 12px; color: var(--n-400); }

/* ── Narrow screens: form only, with a slim brand bar ──────────────────── */
@media (max-width: 860px) {
  body.ui-new { display: block; }
  .ui-new .auth-side { padding: 18px 16px; }
  .ui-new .auth-side h2, .ui-new .auth-side p, .ui-new .flow { display: none; }
  .ui-new .auth-side::after { display: none; }
  .ui-new .auth-main { padding: 32px 16px; }
}