* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 system-ui, sans-serif; color: #1a2330; }
.layout { display: grid; grid-template-columns: 360px 1fr; height: 100vh; }
.panel { padding: 20px; overflow-y: auto; border-right: 1px solid #dde3ec; }
.map { height: 100vh; }
h1 { font-size: 1.15rem; margin: 0 0 4px; }
.sub { margin: 0 0 16px; font-size: .82rem; color: #55606f; }
fieldset { border: 1px solid #dde3ec; border-radius: 8px; margin: 0 0 14px; padding: 10px 12px; }
legend { font-weight: 600; font-size: .85rem; padding: 0 6px; }
.profile-form label { display: block; margin: 8px 0; font-size: .85rem; }
.profile-form input, .profile-form select { width: 100%; padding: 6px 8px; margin-top: 3px;
  border: 1px solid #c7d0dd; border-radius: 6px; font: inherit; }
.summary { display: flex; gap: 10px; font-size: .8rem; margin: 6px 0 12px; }
.legend { list-style: none; padding: 0; margin: 0; font-size: .8rem; }
.legend li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot.match, .pin-match { background: #22c55e; }
.dot.near, .pin-near { background: #f59e0b; }
.dot.borderline, .pin-borderline { background: #60a5fa; }
.dot.no, .pin-no { background: #94a3b8; }
/* map markers */
.uni-pin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.uni-pin.pin-match { box-shadow: 0 0 8px 3px rgba(34,197,94,.9); animation: glow 1.6s ease-in-out infinite; }
.uni-pin.pin-near { box-shadow: 0 0 7px 2px rgba(245,158,11,.85); }
@keyframes glow { 0%,100% { box-shadow: 0 0 6px 2px rgba(34,197,94,.6); } 50% { box-shadow: 0 0 12px 5px rgba(34,197,94,1); } }
/* cluster badges */
.cluster-badge { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font: 600 12px system-ui, sans-serif; color: #1a2330;
  background: rgba(148,163,184,.85); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.cluster-badge.has-match { background: #22c55e; color: #fff;
  box-shadow: 0 0 10px 4px rgba(34,197,94,.9); animation: glow 1.6s ease-in-out infinite; }
.cluster-badge.has-near { background: #f59e0b; color: #fff; box-shadow: 0 0 9px 3px rgba(245,158,11,.75); }
.popup h3 { margin: 0 0 6px; font-size: 1rem; }
.popup dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: .82rem; }
.popup dt { font-weight: 600; color: #55606f; }
.popup p { margin: 4px 0 0; font-size: .82rem; color: #55606f; }
.popup .src { margin-top: 6px; font-size: .72rem; color: #7a8699; font-style: italic; }
.popup a { color: #2563eb; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; height: auto; } .map { height: 60vh; } }