/* ══════════════════════════════════════════════════════════════
   Sign in / Sign up
   Two genuinely different layouts, not one squeezed:
     · phones  — full-bleed, single column, thumb-reachable
     · desktop — split brand panel + card
   ══════════════════════════════════════════════════════════════ */

body.auth{ background:var(--canvas); min-height:100dvh; }

.auth-shell{ display:grid; grid-template-columns:1fr; min-height:100dvh; }
@media (min-width:940px){ .auth-shell{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); } }

/* ── MOBILE: compact green header, then the form ───────────── */
.auth-top{
  position:relative; overflow:hidden; color:#fff;
  padding:calc(20px + var(--safe-top)) 20px 26px;
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(245,124,32,.42), rgba(245,124,32,0) 58%),
    linear-gradient(158deg,#0A5533,#064323 60%,#052E19);
}
@media (min-width:940px){ .auth-top{ display:none; } }
.auth-top__weave{
  position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);
          mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.auth-top .chakra{ position:absolute; right:-46px; top:-40px; width:150px; color:rgba(255,255,255,.1); }
.auth-top__in{ position:relative; }
.auth-top .brand b{ color:#fff; }
.auth-top .brand b span{ color:rgba(255,255,255,.8); }
.auth-top__hindi{ font-family:var(--font-in); font-size:13.5px; color:#FFD9B0; margin:18px 0 6px; }
.auth-top h1{ margin:0; font-size:26px; line-height:1.16; letter-spacing:-.035em; font-weight:800; }
.auth-top h1 em{ font-style:normal; color:#FFC38A; }

/* ── DESKTOP: the brand panel ──────────────────────────────── */
.auth-brand{
  display:none; position:relative; overflow:hidden; color:#fff;
  padding:44px 52px 38px; flex-direction:column;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(245,124,32,.42), rgba(245,124,32,0) 58%),
    radial-gradient(90% 80% at 4% 100%, rgba(14,122,60,.55), rgba(14,122,60,0) 62%),
    linear-gradient(158deg,#0A5533,#064323 52%,#052E19);
}
@media (min-width:940px){ .auth-brand{ display:flex; } }
.auth-brand__weave{
  position:absolute; inset:0; opacity:.34; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
          mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.auth-brand .chakra{ position:absolute; right:-120px; bottom:-150px; width:460px; color:rgba(255,255,255,.1); }
.auth-brand__in{ position:relative; display:flex; flex-direction:column; height:100%; }
.auth-brand .brand b{ color:#fff; }
.auth-brand .brand b span{ color:rgba(255,255,255,.85); }
.auth-brand__body{ margin:auto 0; padding:44px 0 36px; max-width:520px; }
.auth-brand__hindi{ font-family:var(--font-in); font-size:15px; color:#FFD9B0; margin:0 0 12px; }
.auth-brand h1{ margin:0 0 14px; font-size:clamp(30px,3.2vw,42px); line-height:1.13; letter-spacing:-.035em; font-weight:800; }
.auth-brand h1 em{ font-style:normal; background:linear-gradient(90deg,#FFB765,#FFE3C2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-brand__sub{ margin:0; font-size:15.5px; line-height:1.62; color:rgba(255,255,255,.76); max-width:44ch; }
.auth-brand__pts{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px; }
.auth-brand__pts li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:rgba(255,255,255,.9); }
.auth-brand__pts svg{ flex:none; margin-top:1px; }
.auth-brand__foot{ position:relative; display:flex; align-items:center; gap:9px; font-size:12.5px; color:rgba(255,255,255,.62); padding-top:18px; }

/* ── the form side ─────────────────────────────────────────── */
.auth-panel{
  position:relative; display:flex; flex-direction:column;
  padding:22px 18px calc(26px + var(--safe-bottom));
  background:var(--canvas);
}
@media (min-width:940px){
  .auth-panel{ align-items:center; justify-content:center; padding:44px 48px; }
  .auth-panel::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(60% 40% at 80% 0%, rgba(245,124,32,.09), transparent 70%),
      radial-gradient(50% 45% at 0% 100%, rgba(14,122,60,.08), transparent 70%);
  }
}

.auth-card{
  position:relative; width:100%; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-2); overflow:hidden;
}
@media (min-width:940px){ .auth-card{ max-width:440px; } }
.auth-card__b{ padding:22px 20px 24px; }
@media (min-width:520px){ .auth-card__b{ padding:30px 30px 28px; } }

.auth-card h2{ margin:0 0 6px; font-size:23px; font-weight:800; letter-spacing:-.03em; }
@media (min-width:940px){ .auth-card h2{ font-size:25px; } }
.auth-card__sub{ margin:0 0 22px; font-size:14.5px; color:var(--body); line-height:1.55; }

/* tabs: sign in / create account */
.auth-tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:22px;
  background:var(--sunk); border:1px solid var(--line); border-radius:13px;
}
.auth-tabs button{
  flex:1; font-size:13.5px; font-weight:700; padding:10px 12px;
  border:0; border-radius:10px; background:transparent; color:var(--body); cursor:pointer;
  transition:.16s;
}
.auth-tabs button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }

.trial-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--saffron-soft),#FFFDF8);
  border:1px solid #F6DCC0; color:var(--saffron-deep);
  font-size:12.5px; font-weight:700; margin-bottom:16px;
}
.trial-pill .chakra{ width:15px; color:var(--saffron-deep); }
.trial-pill b{ color:var(--ink); font-weight:800; }

.form{ display:grid; gap:16px; }
.row2{ display:grid; gap:16px; }
@media (min-width:460px){ .row2{ grid-template-columns:1fr 1fr; } }

.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.steps{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.steps__i{ display:flex; align-items:center; gap:8px; }
.steps__d{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; background:var(--sunk); color:var(--muted);
  border:1px solid var(--line); flex:none;
}
.steps__l{ font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.steps__b{ flex:1; height:2px; border-radius:2px; background:var(--line); }
.steps__i.on .steps__d{
  background:linear-gradient(140deg,var(--saffron),var(--saffron-deep));
  border-color:transparent; color:#fff; box-shadow:0 4px 12px -4px rgba(245,124,32,.7);
}
.steps__i.on .steps__l{ color:var(--ink); }
.steps__i.done .steps__d{ background:var(--green); border-color:transparent; color:#fff; }

.auth-switch{
  text-align:center; font-size:14px; color:var(--body);
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}
.auth-trust{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; font-size:12.5px; color:var(--muted); }
.auth-trust span{ display:inline-flex; align-items:center; gap:6px; }
.auth-trust svg{ color:var(--green); flex:none; }

.auth-foot{
  width:100%; margin-top:18px; display:flex; justify-content:space-between;
  gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); position:relative;
}
@media (min-width:940px){ .auth-foot{ max-width:440px; } }
.auth-foot a{ font-weight:600; }
.auth-foot a:hover{ color:var(--ink); }

.alert{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px;
  border-radius:var(--r-sm); font-size:13.5px; line-height:1.5; border:1px solid; margin-bottom:18px;
}
.alert--bad{ background:var(--danger-soft); border-color:#F6D4D0; color:#8E211A; }
.alert--ok{ background:var(--green-soft); border-color:#C8E4D3; color:#0A5C2E; }
.alert svg{ flex:none; margin-top:1px; }