html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.topbar { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #e5e5e5; }
.brand { font-weight:700; }
.spacer { flex:1; }
.layout { display:flex; height: calc(100% - 52px); }
#map { flex: 1; }
.panel { width: 360px; border-left:1px solid #e5e5e5; overflow:auto; }
.panelContent { padding: 12px; }
.btn { padding: 8px 10px; border:1px solid #ccc; background:#fff; border-radius:8px; cursor:pointer; }
.btn.secondary { background:#f6f6f6; }
.hidden { display:none !important; }
.badge { padding: 4px 8px; border-radius: 999px; background: #111; color:#fff; font-size: 12px; }
.muted { color:#666; font-size: 13px; }
.error { color:#b00020; margin-top: 8px; font-size: 13px; }
hr { border:0; border-top:1px solid #eee; margin: 10px 0; }
.swim { padding: 8px 0; }
.swim .date { font-weight: 600; }
.photos { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.photos img { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; }
dialog::backdrop { background: rgba(0,0,0,0.25); }
.dialog { min-width: 320px; display:flex; flex-direction:column; gap:10px; }
.dialog input { padding: 8px; border-radius:8px; border:1px solid #ccc; }
.row { display:flex; justify-content:flex-end; gap: 8px; }