.cd-map-app{
  --cd-bg:#0b0908;
  --cd-bg-card:#1f150c;
  --cd-amber:#f0980f;
  --cd-amber-deep:#b5650a;
  --cd-cream:#f5ead9;
  --cd-muted:#a89685;
  --cd-green:#4a8f5c;
  --cd-red:#b1442f;
  --cd-line: rgba(240,152,15,0.18);
  --cd-font-display:'Anton', sans-serif;
  --cd-font-body:'Work Sans', -apple-system, sans-serif;
  --cd-font-mono:'Space Mono', monospace;

  display:block;
  font-family: var(--cd-font-body);
  color: var(--cd-cream);
  background: var(--cd-bg);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.cd-map-app *, .cd-map-app *::before, .cd-map-app *::after{ box-sizing:border-box; }

.cd-map-app .cd-mapapp-topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:16px 20px; border-bottom:1.5px solid var(--cd-line);
}
.cd-map-app .cd-mapapp-title{
  font-family: var(--cd-font-display); font-weight:400; font-size:22px; color:var(--cd-cream);
}
.cd-map-app .cd-mapapp-legend{
  font-family: var(--cd-font-mono); font-size:11.5px; color:var(--cd-muted);
  display:flex; align-items:center; gap:6px; letter-spacing:.02em;
}
.cd-map-app .cd-legend-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 2px 0 10px;
}
.cd-map-app .cd-legend-dot:first-child{ margin-left:0; }
.cd-map-app .cd-legend-free{ background:var(--cd-green); }
.cd-map-app .cd-legend-travelling{ background:var(--cd-red); }

.cd-map-app .cd-mapapp-map{ width:100%; background:var(--cd-bg-card); position:relative; }
.cd-map-app .cd-mapapp-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cd-muted); font-family: var(--cd-font-mono); font-size:13px; margin:0;
}

.cd-map-app .cd-mapapp-updated{
  padding:10px 20px; font-family: var(--cd-font-mono); font-size:11px; color:var(--cd-muted);
  border-top:1.5px solid var(--cd-line); text-align:right;
}

/* Marker + popup styling (Leaflet renders these outside our container root, so keep selectors specific but not nested under .cd-map-app) */
.cd-duck-marker{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--cd-bg-card, #1f150c);
  border:2.5px solid var(--cd-green, #4a8f5c);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  font-size:18px;
  overflow:hidden;
}
.cd-duck-marker.cd-marker-travelling{ border-color: var(--cd-red, #b1442f); }
.cd-duck-marker img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

.cd-duck-popup{ font-family: 'Work Sans', -apple-system, sans-serif; min-width:180px; }
.cd-duck-popup .cd-popup-name{ font-weight:700; font-size:14.5px; margin-bottom:4px; }
.cd-duck-popup .cd-popup-status{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; margin-bottom:6px;
}
.cd-duck-popup .cd-popup-status.free{ background:#e6f4ea; color:#1e7e34; }
.cd-duck-popup .cd-popup-status.travelling{ background:#fdecea; color:#c0392b; }
.cd-duck-popup .cd-popup-meta{ font-size:12px; color:#555; line-height:1.5; }