/* Login page. Builds on auth.css tokens. All motion is removed under prefers-reduced-motion. */
.lg{--ease:cubic-bezier(.2,.7,.2,1);background:radial-gradient(60% 45% at 15% 0%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 70%),radial-gradient(50% 40% at 90% 10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.lg-grid{display:grid;gap:18px;width:100%;max-width:520px;margin-inline:auto;align-items:start;animation:lgIn .65s var(--ease) backwards}
.lg-card{order:1;gap:14px;grid-template-columns:minmax(0,1fr);transition:background-color .35s,border-color .35s,box-shadow .35s}
.lg-card>*{animation:lgUp .55s var(--ease) backwards}
.lg-card>:nth-child(2){animation-delay:.08s}.lg-card>:nth-child(3){animation-delay:.14s}.lg-card>:nth-child(4){animation-delay:.2s}.lg-card>:nth-child(5){animation-delay:.26s}.lg-card>:nth-child(6){animation-delay:.32s}
.lg-form>*{animation:lgUp .5s var(--ease) backwards}
.lg-form>:nth-child(1){animation-delay:.2s}.lg-form>:nth-child(2){animation-delay:.28s}.lg-form>:nth-child(3){animation-delay:.34s}.lg-form>:nth-child(4){animation-delay:.4s}
@keyframes lgIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
@keyframes lgUp{from{opacity:0;transform:translateY(12px)}}
.lg-side{display:none}
.lg-head{display:grid;gap:8px;transition:opacity .18s ease,transform .18s ease}
.lg-head.swap{opacity:0;transform:translateY(5px)}
.lg-head h1{margin:0}
.lg-head .auth-sub{margin:0;min-height:3.2em}

/* Segmented role switch with sliding thumb */
.lg-roles{border:0;margin:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--tint);border-radius:16px;padding:4px;position:relative;isolation:isolate;transition:background-color .35s}
.lg-roles legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-roles::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 12px)/2);border-radius:12px;background:var(--tint-warm);box-shadow:var(--seg-shadow);transition:transform .38s cubic-bezier(.3,1.25,.45,1),background-color .3s}
.lg[data-role=guardian] .lg-roles::before{transform:translateX(calc(100% + 4px));background:var(--seg-on)}
.lg-r{position:relative;display:block;cursor:pointer;min-width:0}
.lg-r input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.lg-r span{display:grid;place-items:center;min-height:46px;padding:4px 8px;border-radius:12px;font-weight:700;font-size:.97rem;color:var(--text-soft2);text-align:center;overflow-wrap:anywhere;transition:color .25s}
.lg-r:hover span{color:var(--ink)}
.lg-r input:checked+span{color:var(--primary)}
.lg-r input[value=tutor]:checked+span{color:var(--tag-fg)}
.lg-r input:focus-visible+span{outline:3px solid var(--primary);outline-offset:1px}

/* Form */
.lg-form{gap:6px}
.lg .fld{gap:7px}
.lg .fld>label{transition:color .2s}
.lg .fld:focus-within>label{color:var(--primary)}
.ico{position:relative;display:grid}
.ico>svg:first-child{position:absolute;left:15px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--muted);pointer-events:none;transition:color .25s,transform .25s var(--ease)}
.fld:focus-within .ico>svg:first-child{color:var(--primary);transform:scale(1.08)}
.lg .fld .ico input{padding-left:46px;transition:border-color .25s,box-shadow .3s,background-color .3s}
.lg .fld .ico input::placeholder{transition:opacity .25s,transform .25s}
.lg .fld .ico input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent),0 8px 22px -12px color-mix(in srgb,var(--primary) 60%,transparent)}
.lg .fld .ico input:focus::placeholder{opacity:.45;transform:translateX(4px)}
.lg .fld.bad .ico input{border-color:var(--coral);box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 16%,transparent)}
.lg .fld.bad .ico>svg:first-child{color:var(--coral)}
.lg .pw input{padding-right:58px!important}
.lg .pw-t{top:4px;bottom:4px;right:4px;min-width:46px;width:46px;padding:0;display:grid;place-items:center;background:transparent;color:var(--muted);transition:background-color .2s,color .2s}
.lg .pw-t:hover{background:var(--tint);color:var(--primary)}
.lg .pw-t:focus-visible{outline:3px solid var(--primary);outline-offset:-2px}
.lg .pw-t svg{width:22px;height:22px}
.lg .pw-t .slash{stroke-dasharray:23;stroke-dashoffset:23;transition:stroke-dashoffset .3s var(--ease)}
.lg .pw-t[aria-pressed=true]{color:var(--primary)}
.lg .pw-t[aria-pressed=true] .slash{stroke-dashoffset:0}
/* reserve room for the error line so nothing jumps */
.lg .err{min-height:1.5em;margin-top:-1px}
.lg .err[hidden]{display:block;visibility:hidden}
.lg .err:not([hidden]){animation:lgErr .32s var(--ease)}
@keyframes lgErr{from{opacity:0;transform:translateY(-6px)}}
.lg-form.shake .fld.bad{animation:lgShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes lgShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lg .chk{margin-top:-2px}

/* Primary button */
.lg-go{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;transition:transform .15s var(--ease),box-shadow .25s,background-color .25s,opacity .2s}
.lg-go:hover{transform:translateY(-1px)}
.lg-go:active{transform:translateY(1px) scale(.99)}
.lg-spin{width:0;height:20px;opacity:0;border-radius:50%;border:0 solid rgba(255,255,255,.4);border-top-color:#fff;transition:width .25s,opacity .2s,margin .25s,border-width .25s}
.lg-go.loading{pointer-events:none;opacity:.92}
.lg-go.loading .lg-spin{width:20px;opacity:1;margin-right:10px;border-width:3px;animation:lgSpin .7s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg .notice{animation:lgUp .4s var(--ease)}
.lg .notice[hidden]{display:none}

/* Social */
.lg .or{margin-block:2px}
.lg .soc{display:grid;gap:14px}
.lg .soc[hidden],.lg .btn[data-social][hidden]{display:none}
.lg-soc{display:grid;grid-template-columns:1fr;gap:10px}
.lg .lg-soc .btn{min-height:50px;padding-inline:8px;font-size:1rem;border-radius:14px;transition:transform .15s var(--ease),border-color .2s,box-shadow .25s,background-color .3s}
.lg .lg-soc .btn:hover{transform:translateY(-2px);box-shadow:var(--tile-shadow);border-color:var(--primary)}
.lg .lg-soc .btn:active{transform:scale(.98)}
.lg .lg-soc .btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.lg .switch{margin-top:2px}

@media(min-width:960px){
  .lg-grid{max-width:1060px;grid-template-columns:1.02fr 1fr;gap:0;background:var(--card);border-radius:32px;box-shadow:var(--shadow-lg);border:1px solid var(--line-card);overflow:hidden;transition:background-color .35s,border-color .35s}
  .lg-card{order:2;border:0;box-shadow:none;border-radius:0;padding:48px 52px;background:transparent;gap:16px}
  .lg-side{order:1;display:flex;flex-direction:column;gap:18px;padding:40px 40px 44px;color:#fff;background:linear-gradient(150deg,#0F766E 0%,#0c5f59 55%,#0B3B3A 100%);position:relative;overflow:hidden;align-self:stretch;justify-content:center}
  .lg-mesh{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 20% 20%,rgba(45,212,191,.5),transparent 70%),radial-gradient(35% 35% at 85% 30%,rgba(245,158,11,.4),transparent 70%),radial-gradient(40% 40% at 60% 95%,rgba(244,63,94,.28),transparent 70%);filter:blur(24px);animation:lgMesh 16s ease-in-out infinite alternate}
  @keyframes lgMesh{to{transform:translate3d(5%,4%,0) rotate(8deg) scale(1.08)}}
  .lg-side>*{position:relative}
  .lg-side>.lg-mesh{position:absolute}
  .lg-scene{width:100%;max-width:360px;height:auto;margin-inline:auto;overflow:visible}
  .lg-scene g{transform-box:fill-box;transform-origin:center}
  .lg-f0{animation:lgSpinSlow 40s linear infinite}
  .lg-f1{animation:lgFloat 6s ease-in-out infinite}
  .lg-f2{animation:lgFloat 5s ease-in-out -2s infinite reverse}
  .lg-f3{animation:lgFloat 7s ease-in-out -1s infinite}
  @keyframes lgFloat{50%{transform:translateY(-8px)}}
  @keyframes lgSpinSlow{to{transform:rotate(360deg)}}
  .lg-side h2{font-size:1.65rem;line-height:1.25;color:#fff}
  .lg-bens{display:grid}
  .lg-ben{grid-area:1/1;display:grid;gap:10px;align-content:start;transition:opacity .35s ease,transform .45s var(--ease),visibility .35s}
  .lg[data-role=guardian] .lg-ben[data-for=tutor],.lg[data-role=tutor] .lg-ben[data-for=guardian]{opacity:0;visibility:hidden;transform:translateY(10px)}
  .lg-ben h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#FDE68A;font-family:var(--font-body);font-weight:700}
  :lang(bn) .lg-ben h3{letter-spacing:0;text-transform:none;font-size:.95rem}
  .lg-ben ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .lg-ben li{display:flex;gap:12px;align-items:flex-start;line-height:1.45;font-size:.98rem;color:#E6F4F1;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px)}
  .lg-ben li svg{flex:none;width:20px;height:20px;margin-top:1px;color:#FBBF24}
}
@media(max-width:350px){.lg-r span{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){
  .lg *,.lg *::before,.lg *::after{animation:none!important;transition:none!important}
}

/* Email code step (after the password, only for accounts with a verified email) */
.lg-pass{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);min-width:0}
.lg-otp{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);min-width:0}
.lg-pass[hidden],.lg-otp[hidden]{display:none}
.lg-otp .lg-head .auth-sub{min-height:0;overflow-wrap:anywhere}
.lg-otp .lg-head h1:focus{outline:none}
.lg-otpbox{padding:4px 0}
.lg-hint{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.lg-back{background:none;border:0;cursor:pointer;font:inherit;font-weight:600;padding:0 8px}
.lg-otp .switch{text-align:center}

/* Mobile optimization */
@media(max-width:767px){
  .lg-roles{grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:14px}
  .lg-r span{min-height:42px;font-size:.9rem;padding:3px 6px}
  .lg .fld{gap:6px}
  .lg .lg-soc .btn{min-height:46px;font-size:.95rem}
  .lg-grid{gap:16px}
}