@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,500&display=swap');

/* ============================================================
   z-login.css — InsituOcean dashboard login
   Brand-correct: slate + cyan/violet, SOFT TRANSLUCENT waves.
   Pairs with login.py (4 wave layers: lg-wave-1..4).
   Loads after scitech.css (z- prefix); !important wins over base.
   ============================================================ */

.lg-shell{
  position:fixed; inset:0; display:grid; grid-template-columns:1.05fr .95fr;
  font-family:ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:#eef2f8; background:#0a1019; -webkit-font-smoothing:antialiased;
}

/* ---------- LEFT: ocean / brand panel ---------- */
.lg-aside{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(120% 90% at 75% 8%,  rgba(34,211,238,.13), transparent 55%),
    radial-gradient(90% 85% at 8% 88%,    rgba(167,139,250,.13), transparent 52%),
    #0a1019;
}
.lg-aside-veil{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:linear-gradient(180deg, rgba(10,16,25,.30), transparent 30%, transparent 100%);
}

/* Endless horizontal wave scroll.
   Four layers, each its own height & translucent brand tint, anchored
   to the bottom. Crests alternate phase and rise front→back so they
   read as layered ocean depth (not a flat band). */
.lg-wave{
  position:absolute; left:0; bottom:0; width:300%;
  background-repeat:repeat-x; background-position:0 bottom; background-size:50% 100%;
  pointer-events:none; z-index:2;
}
.lg-wave-1{ height:300px;  /* front, lowest, cyan */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 175' preserveAspectRatio='none'%3E%3Cpath d='M0,88 C360,32 1080,144 1440,88 L1440,175 L0,175 Z' fill='%2322d3ee' fill-opacity='0.12'/%3E%3C/svg%3E");
  animation:lgWave 18s linear infinite;
}
.lg-wave-2{ height:375px;  /* violet, mirrored phase */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0,110 C360,180 1080,40 1440,110 L1440,220 L0,220 Z' fill='%23a78bfa' fill-opacity='0.10'/%3E%3C/svg%3E");
  animation:lgWave 28s linear infinite reverse;
}
.lg-wave-3{ height:445px;  /* teal */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 262' preserveAspectRatio='none'%3E%3Cpath d='M0,131 C360,48 1080,214 1440,131 L1440,262 L0,262 Z' fill='%230f7696' fill-opacity='0.13'/%3E%3C/svg%3E");
  animation:lgWave 15s linear infinite;
}
.lg-wave-4{ height:525px;  /* back, highest, faint cyan, mirrored */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 308' preserveAspectRatio='none'%3E%3Cpath d='M0,154 C360,250 1080,58 1440,154 L1440,308 L0,308 Z' fill='%2322d3ee' fill-opacity='0.06'/%3E%3C/svg%3E");
  animation:lgWave 24s linear infinite reverse;
}
@keyframes lgWave{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* logo / copy / footer */
.lg-aside-logo{ position:relative; z-index:5; padding:46px 46px 0; }
.lg-logo-text{ font-family:'Space Grotesk',system-ui; font-weight:700; font-size:19px; letter-spacing:.2px; }
.logo-text-primary{ color:#eef2f8; }
.logo-text-accent{ color:#22d3ee; }

.lg-aside-mid{ position:relative; z-index:5; flex:1; display:flex; flex-direction:column;
  justify-content:center; padding:0 46px 90px; max-width:520px; }
.lg-headline{
  font-family:'Space Grotesk',system-ui; font-weight:700; font-size:40px;
  line-height:1.12; letter-spacing:-1px; margin:0 0 16px; text-wrap:balance; color:#eef2f8;
}
.lg-accent{
  font-family:'Newsreader',serif; font-style:italic; font-weight:500;
  background:linear-gradient(100deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* rotating tagline */
.lg-rotate{ position:relative; height:1.6em; font-family:'Newsreader',serif;
  font-style:italic; font-weight:500; font-size:19px; color:#22d3ee; }
.lg-rot{ position:absolute; left:0; top:0; opacity:0; animation:lgRot 8.4s ease-in-out infinite; }
.lg-rot-1{ animation-delay:0s; }
.lg-rot-2{ animation-delay:2.8s; }
.lg-rot-3{ animation-delay:5.6s; }
@keyframes lgRot{
  0%{opacity:0; transform:translateY(6px)}
  5%{opacity:1; transform:translateY(0)}
  29%{opacity:1; transform:translateY(0)}
  34%{opacity:0; transform:translateY(-6px)}
  100%{opacity:0}
}
.lg-aside-foot{ position:relative; z-index:5; padding:0 46px 28px; font-size:12.5px; color:#647a92; }

/* ---------- RIGHT: form ---------- */
.lg-form-wrap{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:48px; background:#0b121c; border-left:1px solid rgba(255,255,255,.06);
}
.lg-back{
  position:absolute; top:26px; right:30px; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; color:#8fa1b8; text-decoration:none; transition:color .2s ease;
}
.lg-back:hover{ color:#22d3ee; }
.lg-back-arrow{ font-size:15px; line-height:1; }

.lg-card{ width:100%; max-width:392px; animation:lgRise .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lgRise{ from{transform:translateY(20px)} to{transform:none} }

.lg-card-logo{ display:none; margin-bottom:34px; }   /* mobile only */
.lg-card-title{ font-family:'Space Grotesk',system-ui; font-weight:700; font-size:27px;
  letter-spacing:-.5px; margin:0 0 8px; color:#eef2f8; }
.lg-card-sub{ font-size:14.5px; color:#8fa1b8; margin:0 0 32px; }

.lg-label{ display:block; font-size:13px; font-weight:500; color:#aebccf; margin-bottom:8px; text-transform:none; letter-spacing:normal; }
.lg-label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.lg-label-row .lg-label{ margin-bottom:0; }
.lg-mini-link{ font-size:12.5px; font-weight:500; color:#9fb0c6; text-decoration:none; }
.lg-mini-link:hover{ color:#22d3ee; }

/* inputs — override scitech.css defaults */
.lg-card .lg-field,
.lg-card .lg-field input{
  width:100% !important; height:48px !important; padding:0 15px !important;
  border-radius:12px !important; background:#0a1019 !important;
  border:1px solid rgba(255,255,255,.12) !important; color:#eef2f8 !important;
  font-size:15px !important; font-family:inherit !important; margin:0 0 20px !important;
  box-sizing:border-box !important; outline:none !important;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
}
.lg-card .lg-field::placeholder{ color:#5f7388; }
.lg-card .lg-field:focus,
.lg-card .lg-field input:focus{
  border-color:#22d3ee !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.18) !important; background:#0c1422 !important;
}
.lg-label-row + .lg-field{ margin-bottom:22px !important; }

/* remember checkbox */
.lg-remember{ margin-bottom:26px; }
.lg-remember label{ display:flex; align-items:center; gap:10px; font-size:13.5px;
  color:#aebccf; cursor:pointer; user-select:none; }
.lg-remember input[type=checkbox]{ width:18px; height:18px; accent-color:#22d3ee; cursor:pointer; }

/* submit button — override scitech.css #login-btn */
.lg-card #login-btn.lg-submit,
.lg-card .lg-submit{
  width:100% !important; height:50px !important; border:none !important;
  border-radius:12px !important; background:#22d3ee !important; color:#0a1019 !important;
  font-size:15.5px !important; font-weight:600 !important; font-family:inherit !important;
  cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important;
  box-shadow:0 8px 24px rgba(34,211,238,.28); margin:0 !important;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.lg-card .lg-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(34,211,238,.42) !important; }
.lg-card .lg-submit:active{ transform:translateY(0); }
.lg-btn-arrow{ font-size:17px; line-height:1; }

.lg-msg{ color:#fb7185; font-size:13.5px; min-height:1.2em; margin-top:14px; text-align:center; }

.lg-card-foot{ text-align:center; font-size:13.5px; color:#8fa1b8; margin:26px 0 0; }
.lg-req{ color:#22d3ee; font-weight:600; text-decoration:none; }
.lg-req:hover{ text-decoration:underline; }

/* ---------- responsive ---------- */
@media(max-width:880px){
  .lg-shell{ grid-template-columns:1fr; }
  .lg-aside{ display:none; }
  .lg-form-wrap{ padding:40px 26px; border-left:none; }
  .lg-card-logo{ display:block; }
}