:root{
  --bg: #ffffff;
  --ink: #0f0f10;         /* near-black */
  --muted: #6e6e73;
  --pink: #ea2a86;        /* inspired-by vibe, not copied */
  --panel: rgba(255,255,255,.92);
  --panelStroke: rgba(15,15,16,.12);
  --shadow: 0 12px 40px rgba(0,0,0,.18);
  --strokeWhite: #ffffff; /* country outlines */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow:hidden;
}

.topbar{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(234,42,134,.06), rgba(255,255,255,0));
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 260px;
}

.mark{
  width:34px; height:34px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 60% 60%, rgba(0,0,0,.18), rgba(0,0,0,0) 55%),
    linear-gradient(145deg, var(--pink), #111);
  box-shadow: 0 10px 22px rgba(234,42,134,.25);
}

.kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1;
  margin-bottom:2px;
}

h1{
  margin:0;
  font-size:18px;
  letter-spacing:.02em;
}

.actions{ display:flex; gap:10px; }

.btn{
  border:0;
  padding:10px 14px;
  border-radius:10px;
  background:var(--pink);
  color:white;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(234,42,134,.22);
}
.btn.ghost{
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow:none;
}
.btn:focus{ outline: 3px solid rgba(234,42,134,.35); outline-offset:2px; }

.layout{
  height: calc(100% - 74px);
}

.mapWrap{
  position:relative;
  height:100%;
}

.map{
  position:absolute;
  inset:0;
}

svg{
  width:100%;
  height:100%;
}

.loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  background:rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  z-index:25;
}
.spinner{
  width:26px; height:26px;
  border-radius:50%;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: var(--pink);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.loadingText{ font-size:13px; color:var(--muted); }

.tooltip{
  position:absolute;
  z-index:26;
  pointer-events:none;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(15,15,16,.88);
  color:#fff;
  box-shadow: var(--shadow);
  transform: translate(-50%, calc(-100% - 12px));
  max-width: 260px;
  font-size:12px;
  line-height:1.25;
  opacity:0;
  transition: opacity .12s ease;
}
.tooltip strong{ font-size:13px; }
.tooltip .pill{
  display:inline-block;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-weight:600;
  background: rgba(255,255,255,.16);
}

.legend{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:27;
  width: 230px;
  background: var(--panel);
  border:1px solid var(--panelStroke);
  border-radius:14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.10);
  overflow:hidden;
}

.legendToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border:0;
  background: transparent;
  font-weight:700;
  cursor:pointer;
}
.legendBody{
  padding: 0 12px 12px 12px;
}
.swatchRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:12px;
}
.swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  border: 1px solid rgba(255,255,255,.85);
}
.swatch.pink{ background: var(--pink); }
.swatch.black{ background: var(--ink); }
.note{
  margin-top:10px;
  font-size:11px;
  color: var(--muted);
}

.info{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:27;
  width:min(360px, calc(100% - 32px));
  background: var(--panel);
  border:1px solid var(--panelStroke);
  border-radius:16px;
  box-shadow: 0 18px 58px rgba(0,0,0,.14);
  overflow:hidden;
}
.infoHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px 14px;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.infoTitle{ font-size:14px; font-weight:800; letter-spacing:.01em; }
.infoSubtitle{ font-size:12px; color:var(--muted); margin-top:2px; }
.infoBody{
  padding:12px 14px 14px 14px;
  font-size:12px;
  line-height:1.35;
}
.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.card{
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8);
}
.card .k{ font-size:11px; color:var(--muted); }
.card .v{ font-size:12px; font-weight:700; margin-top:4px; }

.iconBtn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:6px 8px;
  border-radius:10px;
}
.iconBtn:focus{ outline: 3px solid rgba(234,42,134,.35); outline-offset:2px; }

.modalBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index:40;
}

.modal{
  width:min(560px, calc(100% - 32px));
  border:0;
  border-radius:16px;
  padding:0;
  box-shadow: var(--shadow);
  z-index:41;
}
.modal::backdrop{ background:transparent; }
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.modalTitle{ font-weight:800; letter-spacing:.01em; }
.modalBody{
  padding:14px 16px 18px 16px;
  font-size:12px;
  line-height:1.4;
}
.modalBody ul{ margin:0; padding-left:16px; }
.fineprint{
  margin-top:12px;
  color: var(--muted);
  font-size:11px;
}

.attribution{
  position:fixed;
  right:12px;
  bottom:10px;
  z-index:5;
  font-size:11px;
  color: rgba(0,0,0,.55);
  user-select:none;
  pointer-events:none;
}

/* Map styling */
.country{
  vector-effect: non-scaling-stroke;
  stroke: var(--strokeWhite);
  stroke-width: 0.8px;
  cursor: pointer;
}
.country.is-ambassador{ fill: var(--pink); }
.country.not-ambassador{ fill: var(--ink); }

.country:hover{
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
}

/* Small screens */
@media (max-width: 520px){
  .topbar{ padding:14px 14px; }
  h1{ font-size:16px; }
  .actions .btn{ padding:9px 12px; }
  .legend{ width: 200px; }
}