/* =================================================================
   Fluenta — login page, v2 (index.php, body.lv)
   Warm paper page, one deep-indigo story panel on the left, a clean
   white sign-in card on the right. Sunflower yellow is the single
   accent, matching the Edventa banner buttons.
   ================================================================= */

body.lv{
  --ink:#141233; --indigo:#2a1a8f; --indigo-2:#4a2cf0; --sun:#ffcf33; --sun-2:#ffb21f;
  --paper:#ffffff; --line:#ebe8f4; --muted:#6c6a80;
  margin:0;background:var(--paper);color:var(--ink);min-height:100vh;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background-image:radial-gradient(#ece9f6 1px,transparent 1.2px);background-size:22px 22px;
}
body.lv .fl-adm-strip,body.lv .fl-foot{position:relative;z-index:2}

.lv-wrap{max-width:1280px;margin:0 auto;padding:28px 28px 44px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:stretch}

/* ---------- the story panel ---------- */
.lv-story{position:relative;overflow:hidden;border-radius:30px;padding:36px 44px 34px;color:var(--ink);isolation:isolate;
  background:linear-gradient(160deg,#ffffff 0%,#faf8ff 60%,#f4f9ff 100%);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(42,26,143,.08)}
.lv-orb{position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none}
.lv-orb.o1{width:420px;height:420px;right:-120px;top:-140px;background:#bfe9ff;opacity:.6;animation:lvDrift 18s ease-in-out infinite}
.lv-orb.o2{width:360px;height:360px;left:-140px;bottom:-160px;background:#e3dbff;opacity:.7;animation:lvDrift 22s ease-in-out infinite reverse}
@keyframes lvDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
.lv-story:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(74,44,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(74,44,240,.05) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}

.lv-logo{display:block;width:250px;height:auto;margin:-18px 0 10px -22px}
.lv-story h1{margin:0;font-size:clamp(38px,4.1vw,60px);line-height:1.02;letter-spacing:-2px;font-weight:900;max-width:640px}
.lv-story h1 em{font-style:normal;position:relative;white-space:nowrap;background:linear-gradient(90deg,#5238F2,#20B5EA);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv-story h1 em:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px;border-radius:8px;
  background:linear-gradient(90deg,var(--sun),transparent);opacity:.8;z-index:-1}
.lv-lead{margin:20px 0 0;font-size:18px;line-height:1.55;color:#55536e;max-width:560px}

.lv-points{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;max-width:640px}
.lv-points li{position:relative;padding-left:30px}
.lv-points li:before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#fff;background:linear-gradient(140deg,#5238F2,#20B5EA)}
.lv-points b{display:block;font-size:15.5px;font-weight:800;margin-bottom:2px;color:var(--ink)}
.lv-points span{font-size:13.5px;line-height:1.45;color:#6c6a80}

/* a marked answer, as the student will see it */
.lv-score{margin:30px 0 0;max-width:430px;padding:16px 18px;border-radius:18px;background:#fff;
  border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:rotate(-1.2deg);
  box-shadow:0 18px 40px rgba(42,26,143,.12)}
.lv-score-lbl{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8d89a0}
.lv-score-row{display:flex;gap:18px;align-items:center;margin:10px 0}
.lv-score strong{font-size:52px;line-height:1;font-weight:900;color:#5238F2;letter-spacing:-2px}
.lv-bars{flex:1;display:grid;gap:7px}
.lv-bars i{position:relative;display:flex;align-items:center;height:18px;border-radius:6px;background:#f0eef8;overflow:hidden}
.lv-bars i:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#19c3f0,#8f7bff);
  animation:lvGrow 1.4s cubic-bezier(.2,.8,.2,1) both}
.lv-bars em{position:relative;font-style:normal;font-size:10.5px;font-weight:700;padding-left:8px;line-height:1;color:#fff}
@keyframes lvGrow{from{width:0}}
.lv-score-tip{display:block;font-size:12.5px;color:#55536e;font-weight:600}

body.lv .fl-news{margin:6px 0 0;max-width:none}
body.lv .fl-adm-card{margin:6px 0 0;max-width:none}

/* the student in the red jumper, peeking out from behind the sign-in card */
.lv-formwrap{position:relative}
.lv-form{position:relative;z-index:1}
.lv-girl{position:absolute;right:-200px;bottom:-34px;width:290px;z-index:0;pointer-events:none}
.lv-girl img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 18px 28px rgba(42,26,143,.18))}
.lv-girl .lv-lid{position:absolute;left:50.7%;top:55.9%;width:17.4%;height:auto;transform:translate(-50%,-50%) rotate(3deg);filter:none}
.lv-girl span{position:absolute;left:4%;right:-6%;bottom:8%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ede8ff 0%,#c9bcff 50%,#a9e4fb 100%);opacity:.8}
.lv-girl span:after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed rgba(82,56,242,.22)}
/* on screens too narrow for that, she stands in the story panel's corner instead */
.lv-girl-in{display:none;right:26px;bottom:0;width:230px}
@media (max-width:1499px){.lv-formwrap .lv-girl{display:none}.lv-girl-in{display:block}}
@media (max-width:1060px){.lv-girl-in{display:none}}
body.lv{overflow-x:hidden}
.lv-score,.lv-points,.lv-lead,.lv-story h1{position:relative;z-index:1}

/* ---------- sign in ---------- */
.lv-side{display:flex;flex-direction:column;gap:18px;justify-content:center}
.lv-form{background:#fff;border:1px solid var(--line);border-radius:28px;padding:38px 36px 30px;box-shadow:0 24px 60px rgba(20,18,51,.08)}
.lv-hello{display:inline-block;font-size:13px;font-weight:700;color:#5b4a00;background:#fff3c4;padding:6px 12px;border-radius:99px}
.lv-form h2{margin:14px 0 6px;font-size:34px;letter-spacing:-1px;font-weight:900;color:var(--ink)}
.lv-form>p{margin:0 0 24px;color:var(--muted);font-size:15.5px}
.lv-form .field label{font-size:13px;font-weight:750;color:#2d2b4a}
.lv-form .field input{background:#f8f8fc;border:1.5px solid #e4e2ee;border-radius:14px;padding:14px 15px;font-size:15.5px;transition:border-color .15s,box-shadow .15s,background .15s}
.lv-form .field input:focus{background:#fff;border-color:var(--indigo-2);box-shadow:0 0 0 4px rgba(74,44,240,.12)}
.lv-forgot{text-align:right;margin:-6px 0 16px}
.lv-forgot a{color:var(--indigo-2);font-weight:700;font-size:14px;text-decoration:none}
.lv-go{width:100%;padding:15px;border-radius:14px;font-size:16.5px;font-weight:850;color:#1a1060;
  background:linear-gradient(110deg,var(--sun),var(--sun-2));box-shadow:0 12px 26px rgba(255,178,31,.38);transition:transform .15s,box-shadow .15s}
.lv-go span{display:inline-block;transition:transform .2s}
.lv-go:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(255,178,31,.48)}
.lv-go:hover span{transform:translateX(4px)}
.lv-or{display:flex;align-items:center;gap:12px;color:#9c98ad;font-size:13px;margin:20px 0 12px}
.lv-or:before,.lv-or:after{content:"";flex:1;height:1px;background:#ebe9f3}
.lv-create{display:block;text-align:center;text-decoration:none;font-weight:850;color:var(--indigo);padding:14px;border-radius:14px;
  border:2px solid var(--indigo);transition:background .15s,color .15s}
.lv-create:hover{background:var(--indigo);color:#fff}
.lv-free{margin:10px 0 0!important;text-align:center;font-size:12.5px!important;color:#9c98ad!important}
.lv-err{background:#ffe9eb!important;color:#b3232f!important;border:1px solid #ffc9cf;margin:0 0 16px}

.lv-tests{text-align:center;padding:6px 0 0}
.lv-tests>span{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8d89a0;margin-bottom:12px}
.lv-tests>div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 26px}
.lv-tests img{display:block;width:auto}
.lv-tests .x-ielts{height:22px}.lv-tests .x-pte{height:30px}.lv-tests .x-det{height:24px}

/* ---------- smaller screens ---------- */
@media (max-width:1060px){
  .lv-wrap{grid-template-columns:1fr;max-width:640px}
  .lv-story{padding:30px 26px}
  .lv-score,body.lv .fl-news,body.lv .fl-adm-card{display:none}
}
@media (max-width:620px){
  .lv-wrap{padding:14px 12px 30px;gap:16px}
  .lv-story{border-radius:22px;padding:24px 20px 22px}
  .lv-logo{width:190px;margin:-12px 0 8px -16px}
  .lv-story h1{font-size:33px;letter-spacing:-1.2px}
  .lv-lead{font-size:15.5px;margin-top:14px}
  .lv-points{grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:18px}
  .lv-points span{display:none}
  .lv-points b{font-size:13.5px}
  .lv-form{padding:26px 20px 22px;border-radius:22px}
  .lv-form h2{font-size:28px}
  .lv-tests .x-ielts{height:16px}.lv-tests .x-pte{height:22px}.lv-tests .x-det{height:18px}
  .lv-tests>div{gap:10px 16px}
}
@media (prefers-reduced-motion:reduce){.lv-orb,.lv-bars i:before{animation:none}}

/* ---------- one screen, no scrolling (computers and landscape tablets) ----------
   The page becomes exactly one window tall. A small script (lvFit in index.php)
   scales the content down to whatever height the screen has, so nothing is
   ever pushed below the fold. Phones keep the normal scrolling layout. */
@media (min-width:1061px){
  html:has(body.lv.lv-fit){overflow:hidden}
  body.lv.lv-fit{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  body.lv.lv-fit>*{flex:0 0 auto}
  body.lv.lv-fit .lv-wrap{margin:auto;padding:18px 28px;width:100%;box-sizing:border-box;transform-origin:top center}
  body.lv.lv-fit .lv-story{display:flex;flex-direction:column}
  body.lv.lv-fit .lv-score{margin-top:auto}
  body.lv.lv-fit .lv-points{margin-bottom:26px}
  /* slim footer: one line of legal links instead of the full block */
  body.lv.lv-fit .fl-foot{padding:9px 6vw}
  body.lv.lv-fit .fl-foot-grid{display:none}
  body.lv.lv-fit .fl-foot-bottom{margin:0 auto;padding:0;border:0;align-items:center}
  body.lv.lv-fit .lv-side{gap:14px}
  body.lv.lv-fit .lv-form{padding:30px 34px 24px}
  body.lv.lv-fit .lv-form>p{margin-bottom:18px}
  body.lv.lv-fit .lv-or{margin:14px 0 10px}
}