/* ============ Saath — auth pages (login / signup) · ember-glow system ============ */
:root{
  --pink:#FB3C7F; --pink-2:#FB7185; --orange:#FF6B4A; --gold:#FFD06A; --gold-2:#FBBF24;
  --purple:#6D28D9; --purple-2:#8B5CF6; --green:#10B981; --green-2:#34D399;
  --bg0:#000000; --bg1:#000000; --bg2:#0A0206;
  --text:#F6EAE4; --text-2:#C9B4B0; --muted:#9A8088; --muted-2:#7C656C;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07); --bd:rgba(255,255,255,.10); --bd-2:rgba(255,255,255,.16);
  --fire:linear-gradient(135deg,#FB3C7F 0%,#FF6B4A 55%,#FFD06A 110%);
  --fire-2:linear-gradient(135deg,#FB3C7F 0%,#FF6B4A 100%);
  --font:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sh:0 14px 34px -12px rgba(0,0,0,.6);
  --sh-glow:0 18px 44px -12px rgba(251,60,127,.5), 0 0 22px -8px rgba(255,107,74,.35);
  --r:16px; --r-lg:22px;
}
*{ box-sizing:border-box; }
body.lp{ margin:0; font-family:var(--font); color:var(--text-2); font-size:15px; line-height:1.6; min-height:100vh;
  background:
    radial-gradient(60% 45% at 50% -8%, rgba(109,40,217,.18) 0%, transparent 60%),
    radial-gradient(55% 40% at 100% 6%, rgba(255,107,74,.10) 0%, transparent 60%),
    radial-gradient(70% 55% at 50% 104%, rgba(251,60,127,.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%); }
.lp h1,.lp h2,.lp h3{ font-weight:700; letter-spacing:-.022em; line-height:1.15; color:var(--text); margin:0; }
.lp p{ margin:0; }
.lp a{ color:inherit; text-decoration:none; }
.lp svg{ display:block; }
.lp .ic-line{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lp .ic-fill{ fill:currentColor; }
.lp ::selection{ background:var(--pink); color:#fff; }
.lp a:focus-visible,.lp button:focus-visible,.lp input:focus-visible,.lp select:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:10px; }
.lp .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.lp .gt{ background:linear-gradient(90deg,#FF6B4A,#FB3C7F,#FFD06A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp .eyebrow{ font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-2); }
.lp .muted{ color:var(--muted); } .lp .tiny{ font-size:.78rem; } .lp .small{ font-size:.88rem; }
.lp .row{ display:flex; align-items:center; gap:10px; }
.lp .between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* buttons */
.lp .b{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:.92rem; padding:12px 20px;
  border-radius:12px; border:1.5px solid transparent; line-height:1; cursor:pointer; color:#fff; font-family:var(--font);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s, color .2s, border-color .2s; }
.lp .b:active{ transform:translateY(1px) scale(.99); }
.lp .b svg{ width:17px; height:17px; }
.lp .b-primary{ background:var(--fire-2); box-shadow:var(--sh-glow); }
.lp .b-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -10px rgba(251,60,127,.65), 0 0 30px -6px rgba(255,107,74,.5); }
.lp .b-glass{ background:var(--glass-2); color:var(--text); border-color:var(--bd); }
.lp .b-glass:hover{ border-color:var(--pink); transform:translateY(-2px); }
.lp .b-social{ background:var(--glass-2); color:var(--text); border-color:var(--bd); flex:1; }
.lp .b-social:hover{ border-color:var(--pink); transform:translateY(-2px); }
.lp .b-social.apple{ background:#111; color:#fff; border-color:#111; }
.lp .b-lg{ padding:14px 26px; font-size:.98rem; }
.lp .b-sm{ padding:9px 15px; font-size:.83rem; }
.lp .b-block{ width:100%; }
.lp .b[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none; }

/* chips */
.lp .chip{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.72rem; padding:5px 11px; border-radius:8px;
  background:var(--glass); border:1px solid var(--bd); color:var(--text-2); }
.lp .chip svg{ width:13px; height:13px; }
.lp .chip-accent{ background:rgba(251,60,127,.14); border-color:rgba(251,60,127,.4); color:var(--pink-2); }
.lp .chip-green{ background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.4); color:var(--green-2); }

/* nav */
.lp .nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(16px); background:rgba(20,5,14,.55); border-bottom:1px solid var(--bd); }
.lp .nav .inner{ display:flex; align-items:center; gap:14px; height:60px; }
.lp .logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.24rem; color:var(--text); letter-spacing:-.02em; }
.lp .logo .mk{ width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff; background:var(--fire-2); box-shadow:0 6px 16px -3px rgba(251,60,127,.6); }
.lp .logo .mk svg{ width:18px; height:18px; }
.lp .nav .help{ font-size:.86rem; color:var(--muted); }
.lp .nav .help a{ color:var(--pink-2); font-weight:600; }
.lp .themetoggle{ width:38px;height:38px;border-radius:10px;border:1px solid var(--bd); background:var(--glass-2); color:var(--text); display:grid;place-items:center; cursor:pointer; transition:border-color .2s, color .2s; }
.lp .themetoggle:hover{ border-color:var(--pink); color:var(--pink-2); }
.lp .themetoggle svg{ width:18px; height:18px; }
.lp .themetoggle .t-moon{ display:none; }
.lp[data-theme="light"] .themetoggle .t-sun{ display:none; }
.lp[data-theme="light"] .themetoggle .t-moon{ display:block; }

/* ===== auth layout ===== */
.lp .auth{ display:grid; grid-template-columns:1.02fr .98fr; min-height:calc(100vh - 60px); }

/* brand panel — always a dark island */
.lp .bp{ position:sticky; top:60px; height:calc(100vh - 60px); align-self:start; overflow:hidden; display:flex; align-items:flex-end; padding:56px 6vw 48px; color:#F6EAE4;
  --text:#F6EAE4; --text-2:#C9B4B0; --muted:#9A8088; --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07); --bd:rgba(255,255,255,.10); --bd-2:rgba(255,255,255,.16);
  background:
    radial-gradient(70% 50% at 50% -5%, rgba(109,40,217,.28) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 102%, rgba(251,60,127,.22) 0%, transparent 60%), #000; }
.lp .bp .img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 20%; opacity:.42; filter:saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.65) 50%, transparent 92%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.65) 50%, transparent 92%); animation:slowzoom 24s ease-in-out infinite alternate; }
@keyframes slowzoom{ from{ transform:scale(1.03);} to{ transform:scale(1.1);} }
.lp .bp .fire{ position:absolute; left:0; right:0; bottom:0; height:220px; z-index:0; filter:blur(10px); pointer-events:none;
  background:radial-gradient(46% 130% at 30% 100%, rgba(251,60,127,.34) 0%, transparent 70%), radial-gradient(40% 120% at 66% 100%, rgba(255,107,74,.28) 0%, transparent 72%); }
.lp .bp .grid{ position:absolute; inset:0; z-index:0; opacity:.3; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 60%, #000, transparent 80%); mask-image:radial-gradient(60% 60% at 50% 60%, #000, transparent 80%); }
.lp .bp .content{ position:relative; z-index:2; max-width:520px; }
.lp .hbadge{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.03em; color:#fff;
  background:rgba(251,60,127,.16); border:1px solid rgba(251,60,127,.45); backdrop-filter:blur(8px); box-shadow:0 0 24px -6px rgba(251,60,127,.6); }
.lp .hbadge svg{ width:14px; height:14px; color:var(--gold); }
.lp .bp h1{ color:#fff; font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.08; margin:18px 0 12px; letter-spacing:-.028em; }
.lp .bp .sub{ color:#C9B4B0; font-size:1rem; max-width:44ch; }
.lp .bp .list{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px; }
.lp .bp .list li{ display:flex; gap:11px; align-items:flex-start; color:#C9B4B0; font-size:.92rem; }
.lp .bp .list li strong{ color:#fff; }
.lp .bp .tick{ width:24px;height:24px;border-radius:50%;color:var(--pink-2);display:grid;place-items:center;flex:none;margin-top:1px;
  background:linear-gradient(135deg, rgba(251,60,127,.3), rgba(255,107,74,.18)); box-shadow:inset 0 0 0 1px rgba(251,60,127,.3); }
.lp .bp .tick svg{ width:13px; height:13px; }
.lp .bp .stats{ display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
.lp .bp .stats .n{ font-weight:800; font-size:1.45rem; letter-spacing:-.02em; line-height:1; background:var(--fire); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp .bp .stats .l{ font-size:.74rem; color:#9A8088; font-weight:600; margin-top:5px; }
.lp .bp .quote{ margin:26px 0 0; padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.lp .bp .quote p{ color:#fff; font-size:.94rem; font-weight:500; line-height:1.5; }
.lp .bp .quote .who{ display:flex; align-items:center; gap:10px; margin-top:12px; font-size:.8rem; color:#C9B4B0; }
.lp .bp .quote img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,180,200,.4); }
.lp .bp .quote .who b{ color:#fff; display:block; font-size:.84rem; }

/* form column */
.lp .fc{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; }
.lp .authcard{ width:100%; max-width:480px; background:var(--glass); border:1px solid var(--bd); border-radius:var(--r-lg); backdrop-filter:blur(12px); box-shadow:var(--sh); padding:32px; animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
.lp .authcard h2{ font-size:clamp(1.5rem,2.3vw,1.9rem); margin:8px 0 6px; }
.lp .authcard .sub{ color:var(--muted); font-size:.92rem; }
.lp .legal{ max-width:480px; margin-top:18px; font-size:.76rem; color:var(--muted); text-align:center; line-height:1.55; }
.lp .legal a{ color:var(--pink-2); font-weight:600; }

/* segmented tabs */
.lp .seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:var(--glass-2); border:1px solid var(--bd); margin:22px 0 20px; }
.lp .seg button{ font-family:var(--font); font-weight:600; font-size:.86rem; padding:9px 12px; border-radius:9px; border:0; background:transparent; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:all .2s; }
.lp .seg button svg{ width:15px; height:15px; }
.lp .seg button.on{ background:var(--fire-2); color:#fff; box-shadow:0 8px 18px -8px rgba(251,60,127,.7); }
.lp .panel{ display:none; }
.lp .panel.show{ display:block; animation:rise .4s cubic-bezier(.2,.7,.2,1); }

/* fields */
.lp .fieldgap{ display:grid; gap:15px; }
.lp .field{ display:block; }
.lp .field > label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 6px 2px; }
.lp .inp{ width:100%; font-family:var(--font); font-size:.94rem; color:var(--text); background:var(--glass); border:1px solid var(--bd); border-radius:12px; padding:12px 14px; transition:border-color .2s, box-shadow .2s; }
.lp .inp::placeholder{ color:var(--muted-2); }
.lp .inp:focus{ outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(251,60,127,.18); }
.lp select.inp option{ color:#222; }
.lp .phonefield{ display:flex; gap:10px; }
.lp .phonefield .cc{ flex:none; width:92px; }
.lp .pwwrap{ position:relative; }
.lp .pwwrap .inp{ padding-right:46px; }
.lp .eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:8px; border:0; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.lp .eye:hover{ color:var(--pink-2); background:var(--glass-2); }
.lp .eye svg{ width:17px; height:17px; }
.lp .otp{ display:flex; gap:9px; }
.lp .otp input{ width:100%; height:56px; text-align:center; font-size:1.4rem; font-weight:700; color:var(--text); background:var(--glass); border:1px solid var(--bd); border-radius:12px; font-family:var(--font); transition:border-color .2s, box-shadow .2s; }
.lp .otp input:focus{ outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(251,60,127,.18); }
.lp .hint{ font-size:.78rem; color:var(--muted); margin-top:9px; }
.lp .hint a{ color:var(--pink-2); font-weight:600; }
.lp .sentbox{ display:none; }
.lp .sentbox.show{ display:block; animation:rise .4s cubic-bezier(.2,.7,.2,1); }

/* pickset */
.lp .pickset{ display:flex; flex-wrap:wrap; gap:8px; }
.lp .pick{ font-family:var(--font); font-weight:600; font-size:.82rem; padding:8px 14px; border-radius:999px; cursor:pointer;
  background:var(--glass); border:1px solid var(--bd); color:var(--text-2); transition:all .2s; }
.lp .pick:hover{ border-color:var(--pink); color:var(--text); }
.lp .pick.on{ background:rgba(251,60,127,.16); border-color:var(--pink); color:var(--text); box-shadow:0 0 0 3px rgba(251,60,127,.14); }

/* checkbox */
.lp .check{ display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--text-2); cursor:pointer; }
.lp .check input{ appearance:none; width:19px; height:19px; flex:none; margin-top:2px; border-radius:6px; border:1.5px solid var(--bd-2); background:var(--glass); cursor:pointer; display:grid; place-items:center; transition:all .2s; }
.lp .check input:checked{ background:var(--fire-2); border-color:transparent; box-shadow:0 6px 14px -6px rgba(251,60,127,.7); }
.lp .check input:checked::after{ content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg); }
.lp .check a{ color:var(--pink-2); font-weight:600; }

/* strength meter */
.lp .strength{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:8px; }
.lp .strength span{ height:5px; border-radius:3px; background:var(--bd-2); transition:background .25s; }
.lp .strength[data-lvl="1"] span:nth-child(-n+1){ background:#F87171; }
.lp .strength[data-lvl="2"] span:nth-child(-n+2){ background:#FBBF24; }
.lp .strength[data-lvl="3"] span:nth-child(-n+3){ background:#34D399; }
.lp .strength[data-lvl="4"] span{ background:#10B981; }
.lp .strength-l{ font-size:.74rem; color:var(--muted); margin-top:6px; }

/* divider + socials */
.lp .or{ display:flex; align-items:center; gap:12px; margin:22px 0 14px; font-size:.76rem; color:var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.lp .or::before,.lp .or::after{ content:""; flex:1; height:1px; background:var(--bd); }
.lp .socials{ display:flex; gap:10px; }
.lp .alt{ margin-top:22px; text-align:center; font-size:.9rem; color:var(--muted); }
.lp .alt a{ color:var(--pink-2); font-weight:700; }

/* mini flow stepper (signup) */
.lp .flow{ display:flex; align-items:center; gap:6px; margin-top:16px; }
.lp .flow .st{ display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:700; color:var(--muted); }
.lp .flow .st i{ font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; border:1.5px solid var(--bd-2); }
.lp .flow .st.on{ color:var(--text); }
.lp .flow .st.on i{ background:var(--fire-2); border-color:transparent; color:#fff; box-shadow:0 0 0 4px rgba(251,60,127,.14); }
.lp .flow .ln{ flex:1; height:1.5px; background:var(--bd-2); min-width:14px; }

/* note */
.lp .note{ display:flex; gap:11px; align-items:flex-start; font-size:.8rem; color:var(--text-2); padding:12px 14px; border-radius:14px;
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25); margin-top:18px; }
.lp .note .ni{ width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center; background:rgba(16,185,129,.18); color:var(--green-2); }
.lp .note .ni svg{ width:15px; height:15px; }
.lp .note strong{ color:var(--text); }

/* ===== LIGHT THEME ===== */
.lp[data-theme="light"]{
  --text:#241019; --text-2:#473540; --muted:#766069; --muted-2:#9A8590;
  --bg0:#F6F7F9; --bg1:#FFFFFF; --bg2:#FFFFFF;
  --glass:rgba(255,255,255,.80); --glass-2:rgba(255,255,255,.93);
  --bd:rgba(36,16,25,.11); --bd-2:rgba(36,16,25,.18);
  --sh:0 16px 36px -18px rgba(60,60,75,.18);
  --sh-glow:0 16px 40px -16px rgba(251,60,127,.30), 0 0 18px -8px rgba(255,107,74,.20);
  background:linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
}
.lp[data-theme="light"] .nav{ background:rgba(255,251,253,.7); }
.lp[data-theme="light"] .otp input{ background:rgba(255,255,255,.85); }
.lp[data-theme="light"] .b-glass:hover, .lp[data-theme="light"] .b-social:hover{ color:var(--text); }
.lp[data-theme="light"] .b-social.apple:hover{ color:#fff; }

/* responsive */
@media (max-width:980px){
  .lp .auth{ grid-template-columns:1fr; }
  .lp .bp{ position:static; height:auto; padding:40px 24px 36px; align-items:flex-start; }
  .lp .bp .list, .lp .bp .quote{ display:none; }
  .lp .bp .stats{ margin-top:18px; padding-top:16px; }
  .lp .fc{ padding:28px 16px 48px; }
  .lp .authcard{ padding:26px 22px; }
  body.lp{ font-size:16px; }
}
@media (max-width:560px){
  .lp .nav .help{ display:none; }
  .lp .socials{ flex-direction:column; }
}
@media (prefers-reduced-motion: reduce){ .lp *{ animation:none !important; transition:none !important; } }
@media (min-width:981px) and (max-height:820px){ .lp .bp .quote{ display:none; } }
@media (min-width:981px) and (max-height:660px){ .lp .bp .list{ display:none; } }

/* ===== compact brand panel on phones ===== */
@media (max-width:980px){
  .lp .bp{ padding:26px 20px 22px; }
  .lp .bp .sub{ display:none; }
  .lp .bp h1{ font-size:1.5rem; margin:12px 0 0; }
  .lp .bp .stats{ margin-top:16px; padding-top:14px; gap:18px; flex-wrap:nowrap; overflow:hidden; }
  .lp .bp .stats .n{ font-size:1.1rem; }
  .lp .bp .stats .l{ font-size:.66rem; margin-top:3px; }
  .lp .nav .inner{ gap:10px; height:58px; }
  .lp .nav .help{ font-size:.8rem; white-space:nowrap; }
  .lp .wrap{ padding:0 16px; }
}
@media (max-width:560px){
  .lp .nav .help{ display:inline; }
  .lp .nav .help{ font-size:.78rem; }
  .lp .logo{ font-size:1.1rem; }
  .lp .authcard{ padding:22px 18px; }
  .lp .authcard h2{ font-size:1.4rem; }
  .lp .phonefield .cc{ width:84px; }
  .lp .otp{ gap:7px; }
  .lp .otp input{ height:50px; font-size:1.2rem; }
  .lp .flow .st span{ display:none; }
  .lp .flow .st{ font-size:.7rem; }
}
@media (max-width:400px){ .lp .nav .help{ display:none; } }
@media (max-width:560px){ .lp .seg button svg{ display:none; } .lp .seg button{ font-size:.8rem; padding:9px 6px; white-space:nowrap; } }

/* horizontal-scroll guard (mobile) */
html { overflow-x:hidden; }
@supports (overflow-x: clip) { body.lp { overflow-x:clip; } }
@media (max-width:900px){ body.lp{ background-attachment:scroll; } }