/* ═══ SS-AUTH — shared design system for login/register/forgot/reset ═══ */
.lg{ --primary:var(--ui-primary,#0FA47F); --primary-dark:var(--ui-primary-hover,#2F3941); --ink:var(--ui-text-primary,#17242C); --muted:var(--ui-text-secondary,#667085);
     --cream:var(--ui-page-bg,#F5F7F9); --line:var(--ui-border,#E5E7EB); --card:#FFFFFF;
     background:var(--cream); font-family:'Poppins',system-ui,sans-serif; color:var(--ink);
     padding:56px 20px 72px; }
.lg .wa-float{display:none!important}
.lg-card{ max-width:1040px; margin:0 auto; background:var(--card); border:1px solid var(--line);
          border-radius:22px; overflow:hidden; box-shadow:0 24px 70px rgba(15,164,127,.08);
          display:grid; grid-template-columns:1.05fr .95fr; }

/* ── form side (the job) ── */
.lg-form{ padding:56px 58px; display:flex; flex-direction:column; justify-content:center; }
.lg-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700;
            letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:14px; }
.lg-kicker::before{ content:''; width:22px; height:2px; background:var(--primary); }
.lg-form h1{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; line-height:1.15;
             margin:0 0 8px; text-wrap:balance; }
.lg-sub{ font-size:.95rem; color:var(--muted); margin-bottom:32px; }
.lg-sub a{ color:var(--primary); font-weight:700; text-decoration:none; }
.lg-sub a:hover{ text-decoration:underline; }

.lg-alert{ display:flex; gap:10px; align-items:flex-start; border-radius:12px; padding:13px 16px;
           font-size:.88rem; font-weight:600; margin-bottom:22px; border:1px solid; }
.lg-alert.err{ background:var(--ui-error-soft,#FFECEC); color:#AD5151; border-color:#F5CFCF; }
.lg-alert.ok{ background:var(--ui-mint,#DFF3EF); color:var(--ui-accent-dark,#227871); border-color:#C3E7E0; }

.lg-field{ margin-bottom:22px; }
.lg-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem;
           font-weight:700; letter-spacing:.02em; margin-bottom:9px; }
.lg-label a{ font-size:.8rem; font-weight:700; color:var(--primary); text-decoration:none; }
.lg-label a:hover{ text-decoration:underline; }
.lg-control{ position:relative; }
.lg-control input{ width:100%; height:54px; border:1.5px solid var(--line); border-radius:12px;
                   background:#FBFCFD; padding:0 48px 0 16px; font:inherit; font-size:.95rem;
                   color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
.lg-control input::placeholder{ color:var(--ui-text-muted,#6E7682); }
.lg-control input:focus{ border-color:var(--ui-accent,#4DB6AC); background:#fff;
                         box-shadow:0 0 0 4px rgba(15,164,127,.09); }
.lg-control .adorn{ position:absolute; right:15px; top:50%; transform:translateY(-50%);
                    color:var(--ui-text-muted,#6E7682); font-size:1.1rem; }
.lg-eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0;
         background:none; cursor:pointer; color:var(--ui-text-muted,#6E7682); font-size:1.1rem; padding:8px;
         border-radius:8px; }
.lg-eye:hover{ color:var(--ink); }
.lg-eye:focus-visible, .lg-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.lg-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 26px; }
.lg-remember{ display:flex; gap:9px; align-items:center; font-size:.86rem; color:var(--muted);
              cursor:pointer; user-select:none; }
.lg-remember input{ width:17px; height:17px; accent-color:var(--primary); }

.lg-btn{ width:100%; height:56px; border:0; border-radius:12px; background:var(--primary);
         color:#fff; font:inherit; font-size:.98rem; font-weight:800; cursor:pointer;
         display:flex; align-items:center; justify-content:center; gap:9px;
         box-shadow:0 12px 26px rgba(15,164,127,.22); transition:background .15s, transform .15s; }
.lg-btn:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.lg-btn:active{ transform:scale(.99); }
.lg-btn[disabled]{ opacity:.75; cursor:wait; transform:none; }
.lg-note{ text-align:center; font-size:.78rem; color:var(--muted); margin-top:22px; }
.lg-note i{ color:var(--primary); margin-right:5px; }

/* ── brand side (quiet) ── */
.lg-brand{ position:relative; background:
             radial-gradient(560px 420px at 15% 110%, rgba(15,164,127,.35), transparent 60%),
             linear-gradient(160deg,#17242C 0%, var(--ui-text-primary,#17242C) 55%, #28323C 100%);
           color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.lg-brand::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
                  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
                  background-size:24px 24px; }
.lg-brand > *{ position:relative; z-index:1; }
.lg-mono{ width:66px; height:66px; border-radius:18px; background:var(--ui-mint,#E8F8F3); display:grid;
          place-items:center; margin-bottom:26px; box-shadow:inset 0 0 0 1px rgba(15,164,127,.14); }
.lg-mono svg{ width:46px; height:46px; display:block; }
.lg-brand h2{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; line-height:1.25;
              margin:0 0 10px; text-wrap:balance; }
.lg-brand h2 em{ font-style:normal; color:var(--ui-primary,#0FA47F); }
.lg-brand > p{ font-size:.92rem; color:rgba(255,255,255,.62); line-height:1.7; max-width:340px; margin-bottom:34px; }
.lg-perk{ display:flex; gap:14px; align-items:center; padding:13px 0;
          border-top:1px solid rgba(255,255,255,.09); font-size:.9rem; font-weight:600; }
.lg-perk:first-of-type{ border-top:0; }
.lg-perk i{ width:38px; height:38px; border-radius:11px; background:rgba(15,164,127,.16);
            border:1px solid rgba(15,164,127,.4); color:var(--ui-primary,#0FA47F); display:grid; place-items:center;
            font-size:1rem; flex-shrink:0; }
.lg-perk span small{ display:block; font-weight:400; font-size:.76rem; color:rgba(255,255,255,.5); margin-top:2px; }

@media (max-width: 900px){
  .lg{ padding:28px 14px 48px; }
  .lg-card{ grid-template-columns:1fr; }
  .lg-brand{ display:none; }             /* mobile = the form, nothing else */
  .lg-form{ padding:36px 24px; }
}
@media (prefers-reduced-motion: reduce){
  .lg-btn, .lg-control input{ transition:none; }
}

/* ── single centered card (forgot / reset) ── */
.lg-single{ max-width:460px; margin:0 auto; background:var(--card); border:1px solid var(--line);
            border-radius:22px; box-shadow:0 24px 70px rgba(15,164,127,.08); padding:44px 40px; }
.lg-icon{ width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,#17242C,#111);
          display:grid; place-items:center; color:var(--ui-primary,#0FA47F); font-size:1.5rem; margin-bottom:22px; }
.lg-single .lg-note{ margin-top:18px; }
.lg-back{ display:inline-flex; align-items:center; gap:6px; font-size:.84rem; color:var(--muted);
          text-decoration:none; margin-top:20px; }
.lg-back:hover{ color:var(--ink); }

/* ── register extras ── */
.lg-2col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lg-hint{ font-size:.76rem; color:var(--muted); margin-top:7px; }
.lg-optin{ display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--muted);
           cursor:pointer; user-select:none; margin:4px 0 24px; line-height:1.5; }
.lg-optin input{ width:17px; height:17px; accent-color:var(--primary); margin-top:1px; flex-shrink:0; }
@media (max-width:560px){ .lg-2col{ grid-template-columns:1fr; } .lg-single{ padding:32px 22px; } }