/* ============================================================
   VENTRA — Login · olive glass (matches olive family)
   Prefix: lf-
   ============================================================ */

:root{

  --lf-bg-b:      #cfd6d4;
  --lf-ink:       #3a4038;
  --lf-label:     #5a6055;
  --lf-accent:    #a9c9a1;
  --lf-accent-hi: #98bc90;
  --lf-accent-dk: #33402f;
  --lf-danger:    #c0392b;
  --lf-font:      'Poppins', system-ui, sans-serif;
  --lf-r-card:    28px;
  --lf-r-pill:    999px;
}

.lf-bg, .lf-stage, .lf-card-wrap, .lf-card, .lf-card *{ box-sizing:border-box; }

html, body{ height:100%; }
body{
  margin:0;
  background:linear-gradient(150deg, var(--lf-bg-a) 0%, var(--lf-bg-b) 100%);
  font-family:var(--lf-font);
  overflow-x:hidden;
}

/* ---------- background ---------- */
.lf-bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:linear-gradient(150deg, var(--lf-bg-a) 0%, var(--lf-bg-b) 100%);
  overflow:hidden;
}

/* outer = position, inner = olive ball + float */
.lf-orb{ position:absolute; pointer-events:none; }
.lf-ball{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #d9d6a4 0%, #a8a55e 40%, #7d7b3f 70%, #565420 100%);
  box-shadow:
    inset -12px -16px 28px rgba(60,58,20,.42),
    inset 8px 10px 20px rgba(240,238,200,.50),
    0 18px 36px rgba(80,80,40,.25);
  animation:lfFloatA 9s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes lfFloatA{
  0%  { transform:translate(0,0); }
  50% { transform:translate(10px,-16px); }
  100%{ transform:translate(-8px,12px); }
}
@keyframes lfFloatB{
  0%  { transform:translate(0,0); }
  50% { transform:translate(-12px,14px); }
  100%{ transform:translate(9px,-11px); }
}

/* viewport spheres */
.lf-orb--bl{ width:64px; height:64px; bottom:14%; left:8%; }
.lf-orb--bl .lf-ball{ animation:lfFloatB 8s ease-in-out infinite alternate; animation-delay:-3s; }

.lf-orb--mr{ width:70px; height:70px; top:18%; right:11%; }
.lf-orb--mr .lf-ball{ animation:lfFloatA 7s ease-in-out infinite alternate; animation-delay:-2s; }

/* ---------- stage ---------- */
.lf-stage{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
}

.lf-card-wrap{
  position:relative;
  width:min(390px, 100%);
  text-align:center;
}

/* card-anchored spheres — BEHIND the glass */
.lf-orb--c1{ width:140px; height:140px; top:-70px; left:-36px; z-index:0; }
.lf-orb--c1 .lf-ball{ animation:lfFloatA 11s ease-in-out infinite alternate; animation-delay:-1s; }

.lf-orb--c2{ width:100px; height:100px; top:-56px; right:-28px; z-index:0; }
.lf-orb--c2 .lf-ball{ animation:lfFloatB 9.5s ease-in-out infinite alternate; animation-delay:-6s; }

.lf-orb--c3{ width:160px; height:160px; top:38%; right:-88px; z-index:0; }
.lf-orb--c3 .lf-ball{ animation:lfFloatB 10s ease-in-out infinite alternate; animation-delay:-8s; }

.lf-orb--c4{ width:130px; height:130px; bottom:-72px; left:16%; z-index:0; }
.lf-orb--c4 .lf-ball{ animation:lfFloatA 9s ease-in-out infinite alternate; animation-delay:-5s; }

.lf-orb--c5{ width:104px; height:104px; top:30%; left:-60px; z-index:0; }
.lf-orb--c5 .lf-ball{ animation:lfFloatB 8.5s ease-in-out infinite alternate; animation-delay:-7s; }

/* front corner spheres — IN FRONT of the glass */
.lf-orb--front-tl{ width:66px; height:66px; top:-24px; left:-24px; z-index:2; }
.lf-orb--front-tl .lf-ball{ animation:lfFloatB 6s ease-in-out infinite alternate; animation-delay:-1.5s; }

.lf-orb--front-br{ width:76px; height:76px; bottom:-28px; right:-26px; z-index:2; }
.lf-orb--front-br .lf-ball{ animation:lfFloatA 7.5s ease-in-out infinite alternate; animation-delay:-4.5s; }

/* ---------- frosted glass card ---------- */
.lf-card{
  position:relative;
  z-index:1;
  width:100%;
  padding:34px 28px 28px;
  border-radius:var(--lf-r-card);
  text-align:left;
  background:linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,.44) 100%);
  border:1px solid rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  backdrop-filter:blur(22px) saturate(130%);
  box-shadow:
    0 24px 60px rgba(90,95,90,.28),
    inset 0 1px 0 rgba(255,255,255,.85);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lf-card{ background:rgba(248,249,246,.94); }
  .lf-powered{ background:rgba(248,249,246,.94); }
}

/* logo avatar — white chip */
.lf-avatar{
  width:88px;
  height:88px;
  margin:0 auto 24px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 22px rgba(90,95,90,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.lf-avatar img{
  width:66%;
  height:66%;
  object-fit:contain;
  display:block;
}

/* alert */
.lf-alert{
  margin:0 0 16px;
  padding:10px 15px;
  border-radius:12px;
  font-size:12px;
  color:var(--lf-danger);
  background:rgba(192,57,43,.08);
  border:1px solid rgba(192,57,43,.28);
}

/* ---------- sage glass pill fields ---------- */
.lf-field{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:var(--lf-r-pill);
  background:rgba(207,220,200,.55);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 2px rgba(70,90,60,.14);
  margin-bottom:14px;
  transition:background .2s ease, box-shadow .2s ease;
}
.lf-field:focus-within{
  background:rgba(219,230,213,.75);
  box-shadow:
    inset 0 1px 2px rgba(70,90,60,.14),
    0 0 0 3px rgba(169,201,161,.40);
}

.lf-ico{
  flex:0 0 auto;
  width:18px;
  text-align:center;
  color:var(--lf-label);
  font-size:13.5px;
}

.lf-input{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:0;
  outline:0;
  color:var(--lf-ink);
  font-family:var(--lf-font);
  font-size:13.5px;
  letter-spacing:.02em;
  padding:2px 0;
}
.lf-input::placeholder{ color:rgba(58,64,56,.45); }
.lf-input.is-invalid{ color:var(--lf-danger); }
.lf-input:-webkit-autofill,
.lf-input:-webkit-autofill:hover,
.lf-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--lf-ink);
  -webkit-box-shadow:0 0 0 1000px #cfdcc8 inset;
  transition:background-color 9999s ease-out;
}

/* role select */
.lf-select-wrap{
  position:relative;
  flex:1 1 auto;
  min-width:0;
}
.lf-select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  outline:0;
  color:var(--lf-ink);
  font-family:var(--lf-font);
  font-size:13.5px;
  letter-spacing:.02em;
  padding:2px 26px 2px 0;
  cursor:pointer;
}
.lf-select option{ background:#fff; color:var(--lf-ink); }
.lf-caret{
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  color:var(--lf-label);
  font-size:10px;
  pointer-events:none;
}

/* eye toggle */
.lf-eye{
  flex:0 0 auto;
  background:transparent;
  border:0;
  color:var(--lf-ink);
  opacity:.55;
  font-size:13.5px;
  cursor:pointer;
  padding:4px;
  transition:opacity .2s ease;
}
.lf-eye:hover{ opacity:.9; }

/* ---------- remember / forgot ---------- */
.lf-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 4px 22px;
}

.lf-remember{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:var(--lf-label);
  cursor:pointer;
  user-select:none;
}
.lf-remember input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.lf-check{
  width:17px;
  height:17px;
  border-radius:50%;
  border:1.5px solid rgba(90,96,85,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .15s ease;
}
.lf-check i{
  font-size:9px;
  color:var(--lf-accent-dk);
  opacity:0;
  transform:scale(.5);
  transition:all .15s ease;
}
.lf-remember input:checked + .lf-check{
  background:var(--lf-accent);
  border-color:var(--lf-accent);
}
.lf-remember input:checked + .lf-check i{
  opacity:1;
  transform:scale(1);
}
.lf-remember input:focus-visible + .lf-check{
  outline:2px solid var(--lf-accent-hi);
  outline-offset:2px;
}

.lf-forgot{
  font-size:12px;
  font-style:italic;
  color:var(--lf-label);
  text-decoration:none;
  transition:opacity .2s ease;
}
.lf-forgot:hover{ opacity:.7; }

/* ---------- CTA — sage pill ---------- */
.lf-cta{
  width:100%;
  padding:13px 16px;
  border-radius:var(--lf-r-pill);
  background:var(--lf-accent);
  border:1px solid rgba(255,255,255,.60);
  box-shadow:
    0 8px 20px rgba(110,140,100,.28),
    inset 0 1px 0 rgba(255,255,255,.45);
  color:var(--lf-accent-dk);
  font-family:var(--lf-font);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.lf-cta:hover{ background:var(--lf-accent-hi); }
.lf-cta:active{ transform:scale(.98); }
.lf-cta:focus-visible{
  outline:2px solid var(--lf-accent-hi);
  outline-offset:3px;
}

/* powered by — olive liquid glass pill */
.lf-powered{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  border-radius:999px;
  background:linear-gradient(155deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.40) 100%);
  border:1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  box-shadow:
    0 10px 26px rgba(90,95,90,.20),
    inset 0 1px 0 rgba(255,255,255,.75);
  text-decoration:none;
  transition:box-shadow .2s ease, background .2s ease;
}
.lf-powered:hover{
  background:linear-gradient(155deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,.50) 100%);
  box-shadow:
    0 12px 30px rgba(90,95,90,.26),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.lf-powered-logo{ width:18px; height:18px; border-radius:5px; display:block; }
.lf-powered-txt{ font-size:11.5px; color:var(--lf-label); letter-spacing:.02em; }
.lf-powered-txt b{ color:var(--lf-ink); font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width: 480px){
  .lf-card{ padding:28px 20px 22px; border-radius:24px; }
  .lf-avatar{ width:76px; height:76px; margin-bottom:20px; }
  .lf-orb--c3{ width:110px; height:110px; right:-48px; }
  .lf-orb--c5, .lf-orb--bl{ display:none; }
  .lf-orb--front-tl{ width:50px; height:50px; top:-16px; left:-8px; }
  .lf-orb--front-br{ width:58px; height:58px; bottom:-20px; right:-8px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .lf-ball{ animation:none; }
  .lf-field, .lf-eye, .lf-cta, .lf-check, .lf-check i, .lf-forgot, .lf-powered{
    transition:none;
  }
  .lf-cta:active{ transform:none; }
}