/* ============================================================
   SYDEKYCK — auth.css  (Sign In split-card)
   Bespoke auth layout + promo panel. Bootstrap drives the
   form-control inputs, buttons, and form-check.
   ============================================================ */
.auth-body {
  min-height: 100vh; margin: 0;
  background:
    radial-gradient(ellipse 50% 55% at 12% 8%, rgba(79,195,209,0.16), transparent 60%),
    radial-gradient(ellipse 45% 50% at 92% 96%, rgba(244,160,43,0.10), transparent 60%),
    var(--bg-deep);
  display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.auth {
  width: 100%; max-width: 1040px;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3); overflow: hidden;
}
@media (max-width: 820px) { .auth { grid-template-columns: 1fr; max-width: 460px; } }

/* LEFT · form */
.form-side { padding: 52px 56px; display: flex; flex-direction: column; }
@media (max-width: 560px) { .form-side { padding: 40px 28px; } }
.auth .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 40px; }
.auth .brand img { width: 40px; height: 40px; }
.auth .brand .wm { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.035em; color: var(--se-ink-900); }
.form-side h1 { font-family: var(--font-display); font-weight: 600; font-size: 38px; letter-spacing: -.035em; line-height: 1.04; color: var(--se-ink-900); margin: 0; }
.form-side .sub { font-size: 15.5px; line-height: 1.5; color: var(--se-ink-600); margin: 10px 0 34px; }

/* input with leading icon + reveal (Bootstrap form-control inside) */
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > i.lead { position: absolute; left: 14px; font-size: 16px; color: var(--se-ink-400); pointer-events: none; z-index: 2; }
.input-icon .form-control { padding-left: 42px; }
.input-icon .reveal { position: absolute; right: 8px; border: 0; background: transparent; cursor: pointer; color: var(--se-ink-400); padding: 8px; border-radius: var(--r-sm); font-size: 16px; line-height: 1; z-index: 2; }
.input-icon .reveal:hover { color: var(--se-ink-600); }

.row-between { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 26px; }
.auth .link { color: var(--link); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.auth .link:hover { text-decoration: underline; }

.auth .divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--se-ink-400); }
.auth .divider::before, .auth .divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.auth .divider span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.btn-google img { width: 18px; height: 18px; }
.signup { margin-top: 32px; text-align: center; font-size: 14px; color: var(--se-ink-600); }

/* RIGHT · promo */
.promo { position: relative; padding: 52px; background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(79,195,209,0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(244,160,43,0.08), transparent 55%),
    var(--bg-deep);
  color: #fff; display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 820px) { .promo { display: none; } }
.promo .fold { position: absolute; border: 1px solid rgba(123,210,220,0.16); border-radius: 4px; transform: rotate(45deg); pointer-events: none; }
.promo .fold.a { width: 180px; height: 180px; top: -50px; right: -40px; }
.promo .fold.b { width: 120px; height: 120px; top: 10px; right: 60px; opacity: .5; }
.promo .fold.c { width: 90px; height: 90px; bottom: -20px; left: -30px; opacity: .4; }
.promo > * { position: relative; z-index: 1; }
.promo .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--se-coral); font-weight: 600; margin-bottom: 22px; display: inline-flex; align-self: flex-start; }
.promo h2 { font-family: var(--font-display); font-weight: 600; font-size: 33px; line-height: 1.12; letter-spacing: -.03em; margin: 0; color: #fff; }
.promo h2 em { font-style: normal; color: var(--se-blue-300); }
.promo .lede { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.62); margin: 18px 0 30px; max-width: 40ch; }
.feat { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 15px; }
.feat li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.92); line-height: 1.4; }
.feat .dot { width: 9px; height: 9px; border-radius: 999px; margin-top: 5px; flex: none; box-shadow: 0 0 0 3px currentColor; }
.feat .dot.live { background: var(--se-success); color: rgba(43,174,106,0.22); }
.feat .dot.blue { background: var(--se-blue-400); color: rgba(79,195,209,0.22); }
.feat .dot.amber { background: var(--se-coral); color: rgba(244,160,43,0.22); }
.callout { margin-top: auto; background: rgba(79,195,209,0.10); border: 1px solid rgba(79,195,209,0.22); border-radius: var(--r-lg); padding: 18px 20px; }
.callout .ct { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--se-blue-200); line-height: 1.3; }
.trust { margin-top: 22px; font-size: 12.5px; color: rgba(255,255,255,0.45); }