:root{
  --brand-deep:#1d4a6b;
  --brand:#25587B;
  --brand-mid:#2f6f9e;
  --brand-light:#5b9bd5;
  --accent:#7cb9f0;
  --ink:#1f3548;
  --slate:#5d7689;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:var(--brand-deep);
}

/* ---- Background GPS map ---- */
.bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2}
.bg-fade{
  position:fixed;inset:0;z-index:-1;
  background:radial-gradient(130% 120% at 82% 50%, rgba(10,34,52,.60) 0%, rgba(10,34,52,0) 58%);
}
.route{stroke-linecap:round}

/* ---- Layout ---- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:40px clamp(24px,7vw,120px);
}

.card{
  width:100%;
  max-width:430px;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:26px;
  box-shadow:0 30px 60px -20px rgba(8,30,48,.55), 0 8px 24px rgba(8,30,48,.22);
  padding:44px 40px 36px;
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---- Brand lockup (logo + ODM) ---- */
.brand{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:6px}
.brand-lockup{display:flex;align-items:center;gap:4px}
.brand-lockup svg{width:34px;height:34px;transform:translateY(-1px);filter:drop-shadow(0 4px 9px rgba(37,88,123,.32))}
.brand-word{font-size:42px;font-weight:700;letter-spacing:1px;color:var(--brand);line-height:1}
.brand-sub{
  font-size:11px;font-weight:500;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--slate);text-align:center;
}

.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,88,123,.18),transparent);
  margin:26px 0 22px;
}

/* ---- Headings ---- */
.login-title{font-size:22px;font-weight:600;color:var(--ink)}
.login-hint{font-size:13px;color:var(--slate);margin-bottom:24px}

/* ---- Form ---- */
.field{margin-bottom:18px}
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--slate);margin-bottom:7px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .icon{position:absolute;left:16px;color:#9bb0c1;display:flex;pointer-events:none}

.form-control{
  width:100%;height:52px;padding:0 16px 0 46px;
  border:1.5px solid #e1e8ef;border-radius:14px;background:#f6f9fc;
  font-family:inherit;font-size:14.5px;color:var(--ink);transition:.18s ease;
}
.form-control::placeholder{color:#a8b8c6}
.form-control:focus{
  outline:none;border-color:var(--brand-mid);background:#fff;
  box-shadow:0 0 0 4px rgba(47,111,158,.13);
}
.form-control.is-invalid{border-color:#e3556b;background:#fff5f6}
.invalid-feedback{display:block;color:#d6455c;font-size:12px;margin-top:6px}

.btn1{
  width:100%;height:54px;margin-top:8px;border:none;cursor:pointer;
  border-radius:14px;font-family:inherit;font-size:15px;font-weight:600;
  color:#fff;letter-spacing:.3px;
  background:linear-gradient(135deg,var(--brand-mid),var(--brand));
  box-shadow:0 12px 24px -8px rgba(37,88,123,.6);
  transition:.2s ease;
}
.btn1:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(37,88,123,.72)}
.btn1:active{transform:translateY(0)}

.foot{text-align:center;margin-top:22px;font-size:11.5px;color:#90a3b3;letter-spacing:.2px}

/* ---- Responsive ---- */
@media(max-width:820px){
  .login-wrap{justify-content:center;padding:24px}
  .bg-fade{background:radial-gradient(150% 120% at 50% 50%, rgba(10,34,52,.55) 0%, rgba(10,34,52,0) 65%)}
}
@media(max-width:480px){
  .card{padding:34px 24px 28px}
  .brand-word{font-size:36px}
  .brand-lockup svg{width:29px;height:29px}
}