html,body{height:100%}
body{overflow:hidden}
.map-page{height:calc(100dvh - 82px);position:relative;background:#08080c;color:#fff;overflow:hidden}
.map-canvas{position:absolute;left:0;top:0;width:2100px;height:1420px;transform-origin:0 0;cursor:grab;transition:transform .18s ease}
.map-canvas.dragging,.map-canvas.wheeling{transition:none}
.atlanta-map{width:2100px;height:1420px;display:block;background:radial-gradient(circle at 48% 44%,#303039,#08080c 70%)}
.hwy-shadow{fill:none;stroke:rgba(0,0,0,.78);stroke-width:26;stroke-linecap:round}
.hwy{fill:none;stroke:#fff;stroke-width:13;stroke-linecap:round;cursor:pointer;filter:drop-shadow(0 0 7px rgba(255,255,255,.38))}
.major-road{fill:none;stroke:#aeb3bd;stroke-width:5.5;stroke-linecap:round;opacity:.9;cursor:pointer}
.beltline{fill:none;stroke:#45d77b;stroke-width:10;stroke-linecap:round;stroke-dasharray:14 10;filter:drop-shadow(0 0 9px rgba(69,215,123,.72));cursor:pointer}
.artery{stroke:#c6a15b;stroke-width:4;fill:none;opacity:.65}
.shield{fill:#fff;stroke:#111;stroke-width:2}
.shield-text{font:900 18px Arial,sans-serif;fill:#111}
.road-label{font:800 14px Arial,sans-serif;fill:#e6e6e6;text-shadow:0 2px 7px #000;letter-spacing:.03em}
.beltline-label{font:900 18px Arial,sans-serif;fill:#65f19a;text-shadow:0 2px 8px #000;letter-spacing:.08em}
.region-boundary{fill:rgba(2,52,74,.04);stroke:#4bb4ff;stroke-width:6;stroke-dasharray:16 10;cursor:pointer}
.sub-boundary{fill:rgba(153,0,0,.06);stroke:#ffbf5f;stroke-width:4;stroke-dasharray:8 7;cursor:pointer}
.area{fill:rgba(28,28,36,.50);stroke:#d8c8a7;stroke-width:2.5;cursor:pointer;transition:fill .18s,stroke .18s,opacity .18s,transform .18s}
.area:hover,.area.active,.region-boundary.active,.sub-boundary.active{fill:rgba(153,0,0,.66);stroke:#fff}
.map-item:hover .area,.map-item:hover .region-boundary,.map-item:hover .sub-boundary{filter:drop-shadow(0 0 10px rgba(198,161,91,.45))}
.map-item.pin:hover{filter:drop-shadow(0 0 10px rgba(255,255,255,.35))}
.label,.boundary-label,.sub-label,.pin-label,.road-label,.beltline-label{pointer-events:none;text-shadow:0 2px 8px #000}
.label{font:800 20px Arial,sans-serif;fill:#fff}
.boundary-label{font:900 28px Arial,sans-serif;fill:#8fd2ff;letter-spacing:.08em}
.sub-label{font:800 18px Arial,sans-serif;fill:#ffcf80}
.pin{cursor:pointer}
.pin circle{stroke:#fff;stroke-width:2.5}
.pin .icon{font:800 20px Arial,sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.pin-label{font:700 14px Arial,sans-serif;fill:#f7f5ef}
.park circle{fill:#1f8f4d}.university circle{fill:#6d4cc2}.airport circle{fill:#02344a}.attraction circle{fill:#c6a15b}.realestate circle{fill:#990000}
.dimmed{opacity:.18}
.map-topbar{position:absolute;z-index:5;top:18px;left:18px;right:18px;display:flex;gap:12px;align-items:center;pointer-events:none}
.map-brand{background:rgba(0,0,0,.72);border:1px solid rgba(216,200,167,.55);padding:14px 16px;backdrop-filter:blur(10px);pointer-events:auto}
.map-brand strong{display:block;font-size:18px}.map-brand span{display:block;font-size:12px;color:#ddd}
.map-search{flex:1;max-width:650px;border:1px solid rgba(216,200,167,.7);background:rgba(255,255,255,.95);color:#111;padding:15px 16px;font-size:15px;pointer-events:auto}
.map-reset{pointer-events:auto;cursor:pointer;white-space:nowrap}
.zoom-controls,.map-filters{position:absolute;z-index:5;left:18px;display:grid;gap:7px}
.zoom-controls{top:154px}.map-filters{top:258px;max-width:220px}
.zoom-controls button,.map-filter,.map-chip{border:1px solid rgba(216,200,167,.75);background:rgba(0,0,0,.70);color:#fff;cursor:pointer;backdrop-filter:blur(8px)}
.zoom-controls button{width:42px;height:42px;font-size:22px;font-weight:900}
.map-filter{padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;text-align:left}
.zoom-controls button:hover,.map-filter:hover,.map-filter.active,.map-chip:hover,.map-chip.active{background:#990000}
.map-chips{position:absolute;z-index:5;left:18px;right:430px;bottom:18px;display:flex;gap:9px;flex-wrap:wrap}
.map-chip{padding:9px 11px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.legend{position:absolute;z-index:5;left:18px;bottom:74px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.14);padding:10px 12px;font-size:12px;color:#ddd;display:flex;gap:11px;flex-wrap:wrap;max-width:820px}
.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{width:10px;height:10px;border-radius:50%;display:inline-block}.legend .line{width:22px;height:4px;border-radius:0}
.map-panel{position:absolute;z-index:6;top:18px;right:18px;width:405px;max-width:calc(100vw - 36px);bottom:18px;background:rgba(255,255,255,.96);color:#111;border:1px solid #d8c8a7;box-shadow:0 20px 70px rgba(0,0,0,.35);display:flex;flex-direction:column;transition:transform .28s}
.map-panel.collapsed{transform:translateX(calc(100% - 42px))}
.panel-toggle{position:absolute;left:-42px;top:18px;width:42px;height:54px;border:1px solid #d8c8a7;background:#fff;color:#111;font-size:22px;cursor:pointer}
.panel-inner{padding:28px;overflow:auto}.panel-inner h1{font-size:34px;line-height:1.05;margin:0 0 12px}.panel-inner p{color:#555;font-size:15px}
.detail{border-top:1px solid #e5e1d8;margin-top:14px;padding-top:14px}.detail strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#111;margin-bottom:3px}.detail span{display:block;color:#555;font-size:14px;line-height:1.45}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.tag-row span{border:1px solid #d8c8a7;padding:7px 9px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.panel-actions{display:grid;gap:10px;margin-top:22px}.panel-actions a,.panel-actions button{text-align:center}
.save-btn{border:1px solid #d8c8a7;background:#fff;color:#111;text-transform:uppercase;letter-spacing:.08em;font-weight:800;padding:12px;cursor:pointer}.save-btn.saved{background:#02344a;color:#fff}
.tooltip{position:absolute;z-index:8;max-width:330px;background:rgba(255,255,255,.98);color:#111;border:1px solid #d8c8a7;box-shadow:0 14px 45px rgba(0,0,0,.32);padding:13px;display:none}.tooltip h3{font-size:16px;margin:0 0 6px}.tooltip p{font-size:13px;color:#555;line-height:1.35;margin:0}.tooltip small{display:block;margin-top:7px;color:#777;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
@media(max-width:900px){body{overflow:auto}.map-page{height:calc(100dvh - 120px);min-height:760px}.map-topbar{display:grid;grid-template-columns:1fr;right:18px}.map-search{max-width:none}.map-brand{display:none}.map-panel{top:auto;left:12px;right:12px;bottom:12px;width:auto;max-height:42vh}.map-panel.collapsed{transform:translateY(calc(100% - 48px))}.panel-toggle{left:18px;top:-42px;width:56px;height:42px}.map-chips{right:18px;bottom:calc(42vh + 28px);max-height:92px;overflow:auto}.zoom-controls{top:132px}.map-filters,.legend{display:none}}