html,body{height:100%;margin:0}
body{font:15px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;color:#0a0a0a}
.topbar{position:fixed;z-index:2000;top:0;left:0;right:0;display:flex;gap:12px;align-items:center;justify-content:space-between;background:#ffffffcc;backdrop-filter:blur(6px);padding:10px 14px;border-bottom:1px solid #e5e7eb}
.brand{font:700 18px 'Playfair Display', serif;letter-spacing:.18em}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.controls select{padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;min-width:200px}
.controls button{padding:8px 12px;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;border-radius:10px;cursor:pointer}
.layout{position:fixed;top:54px;left:0;right:0;height:calc(100vh - 54px);display:grid;grid-template-columns:360px 1fr}
.layout.no-sidebar{grid-template-columns:1fr}
#sidebar{border-right:1px solid #e5e7eb;overflow:auto;background:#fff;display:none}
#map{width:100%;height:100%}
#list{list-style:none;margin:0;padding:0}
.item{padding:10px 12px;border-bottom:1px dashed #eee;cursor:pointer}
.item:hover{background:#fafafa}
.legend{position:absolute;right:12px;bottom:12px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px 10px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:800}
.marker{width:16px;height:16px;border-radius:50%;position:relative}
.marker::after{content:"";position:absolute;left:-8px;top:-8px;width:32px;height:32px;border-radius:50%;opacity:.25;filter:blur(2px)}
.marker.red{background:#ef4444}.marker.red::after{background:#ef4444}
.marker.blue{background:#3b82f6}.marker.blue::after{background:#3b82f6}
.marker.green{background:#22c55e}.marker.green::after{background:#22c55e}
.marker.purple{background:#a855f7}.marker.purple::after{background:#a855f7}
.marker.orange{background:#f97316}.marker.orange::after{background:#f97316}