@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  --mx-bg:#f2f7fc;
  --mx-card:#ffffff;
  --mx-ink:#10263c;
  --mx-muted:#567089;
  --mx-line:#cfe0ef;
  --mx-primary:#0b2f53;
  --mx-primary-2:#0b4d79;
  --mx-primary-3:#1e9bd7;
}

html,body{
  background:
    radial-gradient(900px 460px at -10% -10%, rgba(30,155,215,.12) 0%, rgba(30,155,215,0) 66%),
    radial-gradient(780px 340px at 110% 0%, rgba(11,77,121,.10) 0%, rgba(11,77,121,0) 72%),
    linear-gradient(180deg,#f8fcff 0%, var(--mx-bg) 100%) !important;
  color:var(--mx-ink) !important;
  font-family:'Manrope','Avenir Next','Segoe UI',Arial,sans-serif !important;
}

.wrap{
  max-width:1280px !important;
  padding:18px !important;
}

.header{
  border:1px solid #0d4f7b !important;
  border-radius:20px !important;
  background:linear-gradient(130deg,var(--mx-primary) 0%,var(--mx-primary-2) 55%,var(--mx-primary-3) 100%) !important;
  box-shadow:0 18px 34px rgba(11,41,70,.24) !important;
  padding:18px 20px !important;
  color:#f2f9ff !important;
}

.header h1{
  margin:0 !important;
  font-family:'Sora','Manrope',sans-serif !important;
  font-size:clamp(20px,2vw,26px) !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  color:#ffffff !important;
}

.header .sub{
  color:rgba(241,250,255,.88) !important;
  font-size:13px !important;
  font-weight:600 !important;
}

.logo-wrap{
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}

.header-brand-logo{
  border:1px solid rgba(255,255,255,.62) !important;
  background:#ffffff !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}

.toolbar{
  margin-top:14px !important;
  padding:12px !important;
  border:1px solid var(--mx-line) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  box-shadow:0 8px 18px rgba(16,44,74,.08) !important;
}

.toolbar label{
  color:#264764 !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}

.toolbar select,
.toolbar button,
select,
button{
  min-height:40px !important;
  border:1px solid #b8cfe3 !important;
  border-radius:12px !important;
  background:#ffffff !important;
  color:#14334f !important;
  font-family:'Manrope','Avenir Next','Segoe UI',Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  padding:8px 12px !important;
  box-shadow:0 3px 10px rgba(16,44,74,.08) !important;
}

.toolbar button,
button#resetView{
  background:linear-gradient(130deg,#0b2f53 0%,#0f6ca3 100%) !important;
  color:#ffffff !important;
  border:1px solid #0a4f78 !important;
}

.toolbar button:hover,
button#resetView:hover,
button:hover{
  filter:brightness(.97);
}

#map{
  border:1px solid #b9d0e4 !important;
  border-radius:16px !important;
  box-shadow:0 16px 30px rgba(15,44,72,.14) !important;
  margin-top:12px !important;
}

.badge{
  border:1px solid #d7e4ef !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  color:#2d4f6d !important;
  font-size:13px !important;
  font-weight:700 !important;
}

#sourceScopeInfo{
  border-color:#b8d3ea !important;
  background:linear-gradient(180deg,#f6fbff,#eef6ff) !important;
  color:#255074 !important;
}

.legend .chip{
  border:1px solid #ccdeed !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:#234661 !important;
  font-weight:700 !important;
}

.note{
  color:#4e6880 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.45 !important;
}

.leaflet-control-zoom{
  border:1px solid #b7cee2 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  box-shadow:0 8px 14px rgba(15,44,72,.14) !important;
}

.leaflet-control-zoom a{
  color:#173650 !important;
  background:#ffffff !important;
  border-bottom:1px solid #c5d8e9 !important;
}

.leaflet-popup-content-wrapper{
  border:1px solid #bfd5e8 !important;
  border-radius:16px !important;
  box-shadow:0 20px 35px rgba(14,43,71,.20) !important;
  background:#ffffff !important;
}

.leaflet-popup-tip{
  background:#ffffff !important;
}

.leaflet-popup-content{
  color:#10263c !important;
  font-family:'Manrope','Avenir Next','Segoe UI',Arial,sans-serif !important;
}

.dcv-btn{
  border-radius:10px !important;
  font-family:'Manrope','Avenir Next','Segoe UI',Arial,sans-serif !important;
  font-weight:800 !important;
}

.dcv-btn.alt{
  background:linear-gradient(130deg,#0b2f53 0%,#0f6ca3 100%) !important;
  border-color:#0a4f78 !important;
}

@media (max-width: 980px){
  .header{ border-radius:16px !important; }
  .toolbar{ padding:10px !important; }
  .toolbar select,
  .toolbar button{ min-height:38px !important; font-size:13px !important; }
}