*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;height:100vh;overflow:hidden}
.login-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);display:flex;align-items:center;justify-content:center}
.login-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 50%,rgba(79,110,247,0.1) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(0,201,167,0.06) 0%,transparent 60%);pointer-events:none}

/* Map grid (streets) */
.map-grid{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0.06;background-image:
  linear-gradient(rgba(255,255,255,0.4) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.4) 1px,transparent 1px);
background-size:60px 60px}

/* Roads (thicker white lines) */
.road{position:absolute;background:rgba(255,255,255,0.04);pointer-events:none}
.road-h-1{width:50%;height:2px;left:25%;top:30%}
.road-h-2{width:55%;height:2px;left:20%;top:65%}
.road-v-1{width:2px;height:45%;left:30%;top:10%}
.road-v-2{width:2px;height:50%;left:70%;top:15%}

/* Geofence zones */
.geofence{position:absolute;width:120px;height:120px;border-radius:50%;border:2px dashed rgba(255,255,255,0.12);pointer-events:none;display:flex;align-items:center;justify-content:center}
.geofence-1{left:8%;top:15%}
.geofence-2{left:55%;top:40%}
.geofence-3{left:78%;top:65%}
.geofence-pulse{position:absolute;width:100%;height:100%;border-radius:50%;border:1px solid rgba(255,255,255,0.08);animation:geofencePulse 4s ease-out infinite}
.geofence-2 .geofence-pulse{animation-delay:1.5s}
.geofence-3 .geofence-pulse{animation-delay:3s}
@keyframes geofencePulse{0%{transform:scale(0.8);opacity:1}100%{transform:scale(1.4);opacity:0}}
.geofence-label{position:absolute;bottom:-22px;font-size:9px;color:rgba(255,255,255,0.2);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}

/* Moving vehicles */
.vehicle{position:absolute;font-size:24px;color:rgba(255,255,255,0.5);pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,255,255,0.2));z-index:0}
.vehicle-1{animation:moveBus 12s ease-in-out infinite}
.vehicle-2{animation:moveTruck 15s ease-in-out infinite 2s}
.vehicle-3{animation:moveVan 10s ease-in-out infinite 4s}
@keyframes moveBus{
  0%,100%{left:5%;top:28%}
  20%{left:28%;top:20%;color:rgba(79,110,247,0.8)}
  40%{left:50%;top:28%;color:rgba(255,255,255,0.5)}
  60%{left:50%;top:55%;color:rgba(0,201,167,0.7)}
  80%{left:25%;top:63%;color:rgba(255,255,255,0.5)}
}
@keyframes moveTruck{
  0%,100%{left:75%;top:35%;color:rgba(255,255,255,0.5)}
  25%{left:55%;top:42%;color:rgba(0,201,167,0.7)}
  50%{left:30%;top:35%;color:rgba(255,255,255,0.5)}
  75%{left:30%;top:60%;color:rgba(251,191,36,0.7)}
}
@keyframes moveVan{
  0%,100%{left:85%;top:70%;color:rgba(255,255,255,0.5)}
  25%{left:60%;top:63%;color:rgba(251,191,36,0.7)}
  50%{left:40%;top:70%;color:rgba(255,255,255,0.5)}
  75%{left:40%;top:30%;color:rgba(79,110,247,0.7)}
}

/* Checkpoints */
.checkpoint{position:absolute;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.checkpoint-1{left:30%;top:45%}
.checkpoint-2{left:55%;top:25%}
.checkpoint-3{left:25%;top:60%}
.cp-icon{font-size:12px;color:rgba(0,201,167,0.2);animation:cpGlow 3s ease-in-out infinite}
.checkpoint-2 .cp-icon{animation-delay:1s}
.checkpoint-3 .cp-icon{animation-delay:2s}
@keyframes cpGlow{0%,100%{color:rgba(0,201,167,0.2);transform:scale(1);filter:drop-shadow(0 0 0 transparent)}50%{color:rgba(0,201,167,0.7);transform:scale(1.3);filter:drop-shadow(0 0 8px rgba(0,201,167,0.3))}}
.cp-label{font-size:7px;color:rgba(255,255,255,0.15);margin-top:2px;letter-spacing:1px;text-transform:uppercase}

.login-container{position:relative;z-index:1;width:100%;max-width:420px;padding:20px}
.login-card{background:#fff;border-radius:20px;padding:40px 36px;box-shadow:0 25px 60px rgba(0,0,0,0.3)}
.login-header{text-align:center;margin-bottom:32px}
.login-logo{width:72px;height:72px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f6ef7,#6c5ce7);border-radius:18px;font-size:32px;color:#fff;box-shadow:0 8px 24px rgba(79,110,247,0.3)}
.login-header h1{color:#1a1a2e;font-size:26px;font-weight:700;margin-bottom:4px}
.login-subtitle{color:#6c7a91;font-size:13px;font-weight:400}
.login-form .form-group{margin-bottom:20px}
.login-form label{display:block;color:#4a5568;font-size:13px;font-weight:500;margin-bottom:6px}
.login-form label i{width:18px;color:#4f6ef7}
.form-control{width:100%;padding:12px 16px;background:#f7f8fc;border:1px solid #e2e8f0;border-radius:10px;color:#1a1a2e;font-size:14px;font-family:'Inter',sans-serif;transition:all .2s}
.form-control:focus{outline:none;border-color:#4f6ef7;background:#fff;box-shadow:0 0 0 3px rgba(79,110,247,0.15)}
.form-control::placeholder{color:#a0aec0}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,#4f6ef7,#6c5ce7);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(79,110,247,0.35)}
.btn-login:active{transform:translateY(0)}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:12px 16px;border-radius:10px;margin-bottom:20px;font-size:13px;display:flex;align-items:center;gap:8px}
.login-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid #e2e8f0}
.login-footer p{color:#a0aec0;font-size:12px}