body { margin:0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif; background:linear-gradient(180deg,#e9f2ff 0%, #f7fbff 100%); color:#0b2545; }
.container { display:flex; flex-direction:column; height:100vh; }
header { background:transparent; color:var(--brand,#0b2545); padding:18px 16px; font-size:18px; font-weight:600; text-align:center; }
main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* Login */
.login { padding:16px; width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px; }
.login-card { background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,255,0.95)); border-radius:14px; padding:20px; box-shadow:0 8px 30px rgba(11,37,69,0.08); display:flex; flex-direction:column; gap:12px; align-items:center; }
.logo{ width:64px; height:64px; border-radius:14px; background:linear-gradient(135deg,#0078d4,#00a3ff); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:20px; }
.app-title{ font-size:16px; font-weight:700; margin-top:6px; }
.app-sub{ font-size:13px; color:#4b6b8a; }
.inputs{ width:100%; display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.login input { width:100%; font-size:16px; padding:12px 14px; border-radius:10px; border:1px solid #e6eef8; background:#fff; box-shadow: inset 0 1px 0 rgba(0,0,0,0.02); }
.password-field { position: relative; width: 100%; }
.password-field input { width: 100%; padding-right: 40px; }
.eye-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px; font-size: 16px; opacity: 0.7; }
.eye-icon:hover { opacity: 1; }
.btn { background:#0a1620; color:white; border:none; padding:12px; border-radius:10px; font-size:16px; width:100%; }
.btn.primary{ background:linear-gradient(90deg,#4d2db7,#5e3bd4); box-shadow:0 6px 18px rgba(77,45,183,0.25); }
.btn:active, .btn.active { filter: brightness(0.95); transform: translateY(1px); }
.btn:disabled { opacity: 0.6; }
.btn.small { padding:8px 10px; font-size:14px; border-radius:16px; }
.small { font-size:13px; color:#6b7a90; text-align:center; }
/* Map */
#map { height:100%; width:100%; min-height:60vh; border-radius:12px; overflow:hidden; }
.map-wrapper { flex:1; position:relative; width:100%; max-width:900px; margin:12px; }
.floating { position:absolute; top:12px; left:12px; display:flex; gap:8px; z-index:500; align-items:center; }
.chip { background:rgba(255,255,255,0.95); padding:8px 10px; border-radius:20px; box-shadow:0 6px 18px rgba(11,37,69,0.06); font-weight:600; color:#0b2545; }
footer { padding:8px 12px; font-size:13px; color:#444; text-align:center; }
@media (min-width:640px){ .container{ max-width:900px; margin:0 auto; } .login-card{ padding:28px; } }