/* Manta Analytics — login page.
   Dark navy + Shopee-orange, matching the dashboard's own hero header, with a split layout:
   brand story on the left, a floating glass sign-in card on the right. */

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#f5f5f7;
  background:#0f172a;
}

.manta-bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:linear-gradient(160deg,#1e293b 0%,#1e293b 40%,#0f172a 100%);}
.manta-glow{
  position:absolute; inset:-20% -10% auto -10%; height:70%;
  background:radial-gradient(ellipse 60% 60% at 30% 0%, rgba(238,77,45,0.28), transparent 70%),
             radial-gradient(ellipse 50% 50% at 85% 20%, rgba(238,77,45,0.14), transparent 70%);
  filter:blur(10px);
}
.manta-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 90%);
}

.manta-shell{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px,6vw,96px);
  padding:32px 24px;
  flex-wrap:wrap;
  max-width:1120px;
  margin:0 auto;
}

/* ---- left: brand story ---- */
.manta-brand{max-width:440px; flex:1 1 380px; padding:12px 4px;}
.manta-logo{width:52px; height:52px; margin-bottom:22px; filter:drop-shadow(0 4px 16px rgba(238,77,45,0.35));}
.manta-brand h1{
  font-size:clamp(32px,4.4vw,44px); font-weight:800; letter-spacing:-0.02em; line-height:1.05;
  margin:0 0 14px; color:#fff;
}
.manta-brand h1 span{display:block; font-size:0.42em; font-weight:600; color:#ee4d2d; letter-spacing:0.01em; margin-top:6px;}
.manta-tagline{font-size:15.5px; line-height:1.6; color:rgba(245,245,247,0.68); margin:0 0 28px; max-width:400px;}

.manta-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.manta-points li{display:flex; align-items:center; gap:11px; font-size:13.5px; color:rgba(245,245,247,0.82);}
.manta-points .dot{width:7px; height:7px; border-radius:50%; background:#ee4d2d; box-shadow:0 0 0 4px rgba(238,77,45,0.15); flex-shrink:0;}

/* ---- right: sign-in card ---- */
.manta-card{
  flex:0 1 380px; width:100%; max-width:380px;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:22px;
  padding:32px 30px 28px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.manta-card-head h2{font-size:21px; font-weight:700; color:#fff; margin:0 0 4px; letter-spacing:-0.01em;}
.manta-card-head p{font-size:13px; color:rgba(245,245,247,0.55); margin:0 0 22px;}

.manta-alert{
  background:rgba(238,77,45,0.14); border:1px solid rgba(238,77,45,0.35); color:#ffb4a3;
  font-size:12.5px; padding:10px 13px; border-radius:10px; margin-bottom:16px; line-height:1.5;
}

.manta-form{display:flex; flex-direction:column; gap:6px;}
.manta-form label{font-size:11.5px; font-weight:600; color:rgba(245,245,247,0.6); text-transform:uppercase; letter-spacing:0.05em; margin:12px 0 2px;}
.manta-form label:first-of-type{margin-top:0;}
.manta-form input[type="text"], .manta-form input[type="password"]{
  width:100%; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  color:#fff; font-size:14.5px; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.manta-form input::placeholder{color:rgba(245,245,247,0.32);}
.manta-form input:focus{border-color:#ee4d2d; background:rgba(255,255,255,0.09);}

.manta-pw-wrap{position:relative; display:flex;}
.manta-pw-wrap input{padding-right:44px;}
.manta-pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:rgba(245,245,247,0.4); cursor:pointer;
  padding:8px; border-radius:8px; display:flex; transition:color .15s ease;
}
.manta-pw-toggle:hover{color:rgba(245,245,247,0.8);}
.manta-pw-toggle.active{color:#ee4d2d;}

.manta-submit{
  margin-top:22px; width:100%; padding:12.5px 16px;
  background:#ee4d2d; color:#fff; border:none; border-radius:999px;
  font-size:14.5px; font-weight:700; letter-spacing:-0.005em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.manta-submit:hover{background:#e63e1e; transform:translateY(-1px);}
.manta-submit:active{transform:translateY(0);}

.manta-foot{margin:20px 0 0; text-align:center; font-size:11.5px; color:rgba(245,245,247,0.35);}

@media (max-width: 760px){
  .manta-shell{flex-direction:column; text-align:center; padding-top:56px;}
  .manta-brand{text-align:center;}
  .manta-points{align-items:center;}
  .manta-points li{justify-content:center;}
}