/* ============================================================
   login.css — CASHlib authentication (login / reset password)
   Centered split card: brand panel (blue) + form, floating on a
   soft background. Scoped under .cl-app.
   ============================================================ */

.cl-app.auth { min-height: 100vh; display: grid; place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(120% 70% at 0% -10%, rgba(255,151,53,.07), transparent 46%),
    radial-gradient(120% 80% at 100% 0%, rgba(1,67,96,.06), transparent 52%),
    var(--surface); }

.cl-app .auth-shell { width: 100%; max-width: 960px; display: grid;
  grid-template-columns: 1.02fr .98fr; background: var(--bg);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg);
  min-height: min(620px, 84vh); }

/* ---- Brand panel ---- */
.cl-app .auth-brand { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column;
  justify-content: space-between; gap: 28px; padding: clamp(30px, 3vw, 48px);
  background: linear-gradient(155deg, #024763 0%, var(--blue-700) 52%, var(--blue-900) 100%); }
.cl-app .auth-brand .bal-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 46px 46px; }
.cl-app .auth-brand .bal-glow.a { position: absolute; width: 420px; height: 420px; right: -150px; top: -170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,151,53,.5), transparent 62%); filter: blur(14px); pointer-events: none; }
.cl-app .auth-brand .bal-glow.b { position: absolute; width: 340px; height: 340px; left: -150px; bottom: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10,91,121,.7), transparent 64%); pointer-events: none; }
.cl-app .auth-brand .bal-ring { position: absolute; right: -70px; bottom: -100px; width: 280px; height: 280px; border-radius: 50%;
  border: 36px solid rgba(255,255,255,.05); pointer-events: none; }
.cl-app .auth-brand-logo { position: relative; z-index: 2; }
.cl-app .auth-brand-logo img { height: var(--cl-logo-h); width: auto; }
.cl-app .auth-brand-body { position: relative; z-index: 2; }
.cl-app .auth-brand-body h2 { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.02em; line-height: 1.04; }
.cl-app .auth-brand-body p { margin-top: 14px; color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.5; max-width: 360px; }
.cl-app .auth-feats { position: relative; z-index: 2; display: grid; gap: 14px; margin-top: 26px; }
.cl-app .auth-feat { display: flex; gap: 13px; align-items: center; }
.cl-app .auth-feat .af-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.10); color: #fff; }
.cl-app .auth-feat strong { font-weight: 700; font-size: 15px; }
.cl-app .auth-feat span { display: block; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 1px; }
.cl-app .auth-brand-foot { position: relative; z-index: 2; font-size: 12.5px; color: rgba(255,255,255,.55); }

/* ---- Form side ---- */
.cl-app .auth-main { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 44px); min-width: 0; }
.cl-app .auth-topbar { display: flex; align-items: center; justify-content: flex-end; min-height: 30px; }
.cl-app .auth-topbar .auth-logo { display: none; margin-right: auto; }
.cl-app .auth-topbar .auth-logo img { height: var(--cl-logo-h); }
.cl-app .auth-lang { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-pill); padding: 7px 13px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cl-app .auth-lang:hover { border-color: #cfe1ec; }

.cl-app .auth-card { margin: auto; width: 100%; max-width: 380px; }
.cl-app .auth-eyebrow { margin-bottom: 12px; }
.cl-app .auth-card h1 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; }
.cl-app .auth-card .auth-lead { margin-top: 8px; color: var(--ink-soft); font-size: 15.5px; }
.cl-app .auth-form { display: grid; gap: 15px; margin-top: 24px; }
.cl-app .auth-recaptcha { display: flex; justify-content: center; }
.cl-app .auth-actions { margin-top: 4px; }
.cl-app .auth-actions .btn { width: 100%; }
.cl-app .auth-links { margin-top: 22px; display: grid; gap: 12px; text-align: center; font-size: 14px; }
.cl-app .auth-links a { font-weight: 600; }
.cl-app .auth-links .a-register { color: var(--ink-soft); }
.cl-app .auth-links .a-register strong { color: var(--blue); }
.cl-app .auth-links .a-forgot { color: var(--orange-700); font-weight: 700; }
.cl-app .auth-hr { height: 1px; background: var(--line); border: none; margin: 2px 0; }

/* ---- Register (longer, multi-field form) ---- */
.cl-app .auth--register .auth-shell { max-width: 1080px; }
.cl-app .auth--register .auth-card { max-width: 560px; }
.cl-app .auth-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cl-app .auth-form .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.cl-app .auth-hint { font-size: 12px; font-weight: 600; color: var(--orange-700); margin-top: -4px; }
.cl-app .auth-check { display: flex; align-items: flex-start; gap: 11px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.cl-app .auth-check input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.cl-app .auth-check a { color: var(--blue); font-weight: 700; }

/* ---- Responsive: single column, hide brand panel ---- */
@media (max-width: 980px) {
  .cl-app .auth-form .grid2, .cl-app .auth-form .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .cl-app .auth-shell { grid-template-columns: 1fr; max-width: 440px; min-height: 0; }
  .cl-app .auth--register .auth-shell { max-width: 560px; }
  .cl-app .auth-brand { display: none; }
  .cl-app .auth-topbar { justify-content: space-between; }
  .cl-app .auth-topbar .auth-logo { display: block; }
}