/* IntellaTutor Command Center: sign-in page (scoped to #login). Target design from Tamra 2026-10-05.
   Brand matched to intellatutor.com: Poppins (headings/buttons) + Questrial (body) + Caveat (handwritten line),
   yellow #FDCC00, ink #030D14, blue #2B95DF, soft grey #F7F7F7, gold #BE9900, collage pastels pink #F1AAC8 / sky #75B2CE / butter #F9D570. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(/static/fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Questrial";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/questrial-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/caveat-latin-wght-normal.woff2) format("woff2")}

#login.lg{--it-yellow:#FDCC00;--it-yellow-h:#F2C200;--it-ink:#030D14;--it-ink-2:#3A434B;--it-muted:#6B737A;--it-faint:#9AA1A7;--it-blue:#2B95DF;
  --it-grey:#F7F7F7;--it-line:#DDE1E6;--it-gold:#BE9900;--it-pink:#F1AAC8;--it-sky:#75B2CE;--it-butter:#F9D570;
  --lg-head:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;--lg-body:"Questrial","Poppins",system-ui,sans-serif;--lg-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:100vh;min-height:100dvh;padding:0;
  background:#fff;color:var(--it-ink);font-family:var(--lg-body);color-scheme:light;overflow-x:hidden;isolation:isolate}
#login.lg.hidden{display:none!important}
#login svg{flex-shrink:0}

/* top bar */
.lg-strip{position:relative;z-index:2;background:var(--it-yellow);color:var(--it-ink);height:40px;display:flex;align-items:center;justify-content:flex-end;padding:0 64px}
.lg-strip-t{display:inline-flex;align-items:center;gap:9px;font:400 14px/1 var(--lg-head)}
.lg-strip-t svg{width:16px;height:16px;stroke-width:2.4}

/* soft pastel wash behind the right side + bottom waves */
.lg-bg{position:absolute;inset:40px 0 0 0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(520px 420px at 62% 16%,rgba(117,178,206,.16),transparent 70%),
   radial-gradient(460px 380px at 90% 40%,rgba(241,170,200,.16),transparent 70%),
   radial-gradient(640px 360px at 82% 100%,rgba(249,213,112,.26),transparent 70%),
   radial-gradient(700px 300px at 8% 104%,rgba(117,178,206,.20),transparent 70%),
   linear-gradient(90deg,#fff 0 30%,#FBFCFE 60%,#FDFBF6)}

.lg-wrap{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:26px 64px 24px 72px;display:grid;
  grid-template-columns:440px minmax(0,1fr);column-gap:56px;align-items:start}

/* left */
.lg-logo img{display:block;width:176px;height:auto}
.lg-copy{margin:24px 0 20px}
.lg-copy h1{font:400 48px/1.08 var(--lg-head);letter-spacing:-.02em;margin:0;color:var(--it-ink)}
.lg-copy h1 b{font-weight:600;display:inline-block;position:relative;white-space:nowrap}
.lg-copy h1 b svg{position:absolute;left:-1%;bottom:-13px;width:96%;height:13px;overflow:visible}
.lg-tag{font:400 21px/1.4 var(--lg-body);color:var(--it-ink-2);margin:22px 0 0;letter-spacing:.005em}

#login .lg-card{max-width:none;width:100%;background:#fff;border:1px solid #E7EAEE;border-radius:20px;padding:26px 30px 24px;
  box-shadow:0 1px 2px rgba(3,13,20,.04),0 20px 50px -22px rgba(3,13,20,.20);display:flex;flex-direction:column;animation:pop .4s var(--ease)}
#login .lg-card h2{font:600 22px/1.25 var(--lg-head);margin:0 0 4px;color:var(--it-ink)}
#login .lg-card .auth-sub{text-align:left;font:400 14.5px/1.4 var(--lg-body);color:var(--it-muted);margin:0 0 20px}
#login label.f{font:400 14px/1.2 var(--lg-head);color:var(--it-ink);gap:8px;margin-bottom:16px}
.lg-in{position:relative;display:block}
.lg-in .lg-ic{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#6B737A;pointer-events:none}
#login .lg-in input{width:100%;font:400 15px/1.3 var(--lg-body);color:var(--it-ink);background:#fff;border:1px solid var(--it-line);border-radius:10px;
  padding:12px 16px 12px 44px;min-height:48px;box-shadow:none}
#login .lg-in input#lgPw{padding-right:48px}
#login .lg-in input::placeholder{color:#8C939A}
#login .lg-in input:hover{border-color:#C7CDD3}
#login .lg-in input:focus{border-color:var(--it-ink);box-shadow:0 0 0 4px rgba(253,204,0,.42);outline:none}
.lg-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#4A535B;cursor:pointer}
.lg-eye:hover{background:var(--it-grey)}.lg-eye:focus-visible{outline:2px solid var(--it-ink);outline-offset:1px}
.lg-eye svg{width:19px;height:19px}.lg-eye .ec{display:none}.lg-eye.on .eo{display:none}.lg-eye.on .ec{display:inline}

.lg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 18px}
.lg-chk{display:inline-flex;align-items:center;gap:10px;font:400 14px/1.2 var(--lg-body);color:var(--it-ink-2);cursor:pointer;user-select:none}
#login .lg-chk input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0}
.lg-box{width:18px;height:18px;border:1.5px solid #9AA1A7;border-radius:4px;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.lg-chk input:checked + .lg-box{background:var(--it-ink);border-color:var(--it-ink)}
.lg-chk input:checked + .lg-box::after{content:"";width:9px;height:5px;border:2px solid var(--it-yellow);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.lg-chk input:focus-visible + .lg-box{box-shadow:0 0 0 3px rgba(253,204,0,.6)}
.lg-forgot{font:400 14px/1.2 var(--lg-body);color:#1D6FD8;text-decoration:underline;text-underline-offset:3px}
.lg-forgot:hover{color:var(--it-ink)}
.lg-note{margin:-6px 0 16px;padding:10px 12px;border-radius:10px;background:#FFF7D1;border:1px solid #F5DE7A;font:400 13.5px/1.45 var(--lg-body);color:var(--it-ink-2)}
#login .btn-lg{min-height:50px;border-radius:999px;background:var(--it-yellow);color:var(--it-ink);border:0;
  font:600 17px/1 var(--lg-head);letter-spacing:.005em;box-shadow:0 8px 20px -10px rgba(230,180,0,.9);gap:12px}
#login .btn-lg:hover{background:var(--it-yellow-h)}
#login .btn-lg:focus-visible{outline:3px solid var(--it-ink);outline-offset:3px}
#login .btn-lg:disabled{opacity:.6}
#login .btn-lg svg{width:20px;height:20px;stroke-width:2.4;transition:transform .2s var(--ease)}#login .btn-lg:hover svg{transform:translateX(3px)}
#login #loginErr{font:400 13.5px/1.4 var(--lg-body);color:#C0262D;text-align:center;margin-top:10px;min-height:0}
#login #loginErr:empty{margin-top:0}
.lg-info{display:flex;align-items:center;gap:14px;margin-top:16px;padding:13px 16px;border-radius:12px;background:#F1F5FB}
.lg-info svg{width:26px;height:26px;color:#3A434B;stroke-width:1.8}
.lg-info p{margin:0;font:400 13.5px/1.45 var(--lg-body);color:var(--it-ink-2)}

/* right: collage stage */
.lg-right{position:relative;min-height:780px;display:flex;flex-direction:column;align-items:center}
.lg-script{position:absolute;top:-6px;right:-22px;margin:0;font:500 34px/1.02 var(--lg-hand);color:var(--it-ink);transform:rotate(-7deg);transform-origin:right top;z-index:3;text-align:left}
.lg-script svg{display:block;width:150px;height:14px;margin:6px 0 0 34px;overflow:visible}
.lg-stage{position:relative;width:560px;margin:62px 70px 0 0}
.lg-stage picture,.lg-collage{display:block;width:100%;height:auto;position:relative;z-index:1}
.lg-c{position:absolute;border-radius:50%;z-index:0}
.lg-c.c1{width:120px;height:120px;left:-8px;top:-34px;background:rgba(117,178,206,.22)}
.lg-c.c2{width:44px;height:44px;left:190px;top:-48px;background:rgba(249,213,112,.85)}
.lg-c.c3{width:64px;height:64px;left:-44px;top:46%;background:rgba(249,213,112,.38)}
.lg-c.c4{width:46px;height:46px;right:-86px;bottom:12%;background:rgba(241,170,200,.75)}
.lg-c.c5{width:10px;height:10px;right:-66px;bottom:2%;background:#B9C6D3}
.lg-c.c6{width:12px;height:12px;left:-70px;top:4%;background:var(--it-yellow)}
.lg-arc{position:absolute;right:-74px;top:30%;width:70px;height:210px;z-index:0}
.lg-call{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:14px 18px 14px 14px;
  box-shadow:0 14px 34px -14px rgba(3,13,20,.28),0 1px 2px rgba(3,13,20,.05);max-width:200px}
.lg-call b{display:block;font:600 14px/1.25 var(--lg-head);color:var(--it-ink)}
.lg-call small{display:block;font:400 12px/1.35 var(--lg-body);color:var(--it-muted);margin-top:3px}
.lg-ci{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lg-ci svg{width:22px;height:22px}
.lg-ci.y{background:#FFF3C4;color:#D9A400}.lg-ci.b{background:#E2EEFB;color:#2B72C9}.lg-ci.z{background:transparent;color:var(--it-yellow)}.lg-ci.z svg{width:30px;height:30px}
.lg-call.k1{left:-120px;top:17%}
.lg-call.k2{right:-150px;top:29%;max-width:210px}
.lg-call.k3{left:-118px;top:64%;max-width:190px}

.lg-stats{display:flex;align-items:center;gap:0;margin:40px 70px 0 0;z-index:1}
.lg-stat{display:flex;align-items:center;gap:16px;padding:0 34px}
.lg-stat + .lg-stat{border-left:1px solid #E3E6EA}
.lg-si{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lg-si svg{width:26px;height:26px}
.lg-si.b{background:#DCEBFA;color:#2B72C9}.lg-si.p{background:#FBE1EB;color:#E0558E}.lg-si.y{background:#FFF0B8;color:#E8B400}
.lg-stat b{display:block;font:400 15px/1.3 var(--lg-head);color:var(--it-ink);max-width:120px}
.lg-stat small{white-space:nowrap}
.lg-stat small{display:block;font:400 11px/1 var(--lg-head);letter-spacing:.16em;text-transform:uppercase;color:var(--it-faint);margin-top:8px}
.lg-foot{position:absolute;right:0;bottom:0;margin:0;font:400 12px/1 var(--lg-head);letter-spacing:.24em;text-transform:uppercase;color:#7D858C;word-spacing:.3em}

/* narrower laptops: shrink the stage */
@media (max-width:1320px){.lg-wrap{grid-template-columns:420px minmax(0,1fr);column-gap:40px;padding:24px 40px 22px 48px}.lg-stage{width:470px;margin-right:40px}
  .lg-call.k1{left:-96px}.lg-call.k3{left:-96px}.lg-call.k2{right:-120px}.lg-stat{padding:0 22px}.lg-script{font-size:30px}}
@media (max-width:1120px){.lg-stage{width:400px}.lg-call{display:none}.lg-stats{transform:scale(.9)}}

/* tablet & phone: stacked */
@media (max-width:900px){
  .lg-strip{height:34px;justify-content:center;padding:0 12px}.lg-strip-t{font-size:12.5px}
  .lg-bg{inset:34px 0 0 0;background:radial-gradient(420px 300px at 80% 18%,rgba(241,170,200,.16),transparent 70%),radial-gradient(420px 300px at 10% 30%,rgba(117,178,206,.18),transparent 70%),radial-gradient(500px 300px at 50% 100%,rgba(249,213,112,.22),transparent 70%),#fff}
  .lg-wrap{display:flex;flex-direction:column;padding:16px 20px 26px;max-width:520px}
  .lg-left{display:contents}
  .lg-logo{order:1;align-self:center}.lg-logo img{width:122px}
  .lg-right{display:contents}
  .lg-script,.lg-call,.lg-arc,.lg-c.c5,.lg-c.c6{display:none}
  .lg-stage{order:2;align-self:center;width:min(66%,240px);margin:18px 0 0}
  .lg-c.c1{width:70px;height:70px;left:-22px;top:-14px}.lg-c.c2{width:20px;height:20px;left:46%;top:-18px}
  .lg-c.c3{width:34px;height:34px;left:-26px}.lg-c.c4{width:24px;height:24px;right:-24px}
  .lg-stats{order:5;margin:22px 0 0;justify-content:center;width:100%}
  .lg-stat{flex-direction:column;text-align:center;gap:8px;padding:0 10px;flex:1}
  .lg-si{width:44px;height:44px}.lg-si svg{width:20px;height:20px}
  .lg-stat b{font-size:12.5px;max-width:none}.lg-stat small{font-size:9.5px;letter-spacing:.12em;margin-top:5px}
  .lg-foot{order:6;position:static;text-align:center;margin:22px 0 0;font-size:10px;letter-spacing:.16em;word-spacing:.15em}
  .lg-copy{order:3;margin:18px 0 16px;text-align:center}
  .lg-copy h1{font-size:30px}.lg-copy h1 br{display:none}.lg-copy h1 b svg{bottom:-9px;height:9px}
  .lg-tag{font-size:16px;margin-top:14px}
  #login .lg-card{order:4;padding:22px 20px 20px;border-radius:18px}
  #login .lg-card .auth-sub{margin-bottom:16px}
  .lg-info{padding:12px 14px;gap:12px}.lg-info svg{width:22px;height:22px}
}
@media (max-width:360px){.lg-copy h1{font-size:27px}.lg-row{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){#login .lg-card{animation:none}#login .btn-lg svg{transition:none}}