.detroit-map-container{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a1a1a 50%,#0a0a0a);color:#00ff88;font-family:Bitcount,monospace;position:relative;overflow:hidden}.back-button-container{position:absolute;top:2rem;left:2rem;z-index:20}.back-button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:rgba(0,0,0,.8);border:1px solid #00ff88;border-radius:8px;color:#00ff88;text-decoration:none;font-size:.9rem;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 20px rgba(0,255,136,.3);transition:all .3s ease;font-family:Bitcount,monospace}.back-button:hover{background:rgba(0,255,136,.1);border-color:#00ff88;transform:translateY(-2px);box-shadow:0 0 30px rgba(0,255,136,.5)}.map-header{text-align:center;padding:2rem 0;position:relative;z-index:10}.map-header h1{font-size:4rem;margin-bottom:.5rem;text-shadow:0 0 20px #00ff88;letter-spacing:.2em;animation:glow 2s ease-in-out infinite alternate}.map-header .subtitle{font-size:1.2rem;color:#0088ff;opacity:.8;letter-spacing:.1em}@keyframes glow{0%{text-shadow:0 0 20px #00ff88,0 0 30px #00ff88,0 0 40px #00ff88}to{text-shadow:0 0 10px #00ff88,0 0 20px #00ff88,0 0 30px #00ff88}}.map-canvas-wrapper{position:relative;width:100%;height:70vh;margin:2rem 0}.detroit-map-canvas{width:100%;height:100%;cursor:crosshair;border:1px solid #333;border-radius:8px;background:radial-gradient(circle at center,#111 0,#000 100%);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.map-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.landmark-labels{position:relative;width:100%;height:100%}.landmark-label{position:absolute;transform:translate(-50%,-50%);font-size:.9rem;font-weight:700;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 0 15px currentColor;opacity:.9;animation:labelPulse 20s ease-in-out infinite;pointer-events:none}.beacon-label{border:1px solid;padding:.2rem .4rem;border-radius:4px;background:rgba(0,0,0,.3)}.generic-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem}.generic-popup{background:rgba(0,0,0,.9);border:2px solid #00ff88;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 30px rgba(0,255,136,.4);max-width:400px;width:100%;max-height:80vh;overflow-y:auto;margin:1rem}@media (max-width:768px){.generic-popup{max-width:90vw;margin:.5rem;max-height:85vh}.generic-popup-overlay{padding:1rem}.popup-header{padding:.8rem 1rem}.popup-content{padding:1rem}.beacon-list-header{flex-direction:column;gap:.5rem;align-items:flex-start}.create-beacon-btn{font-size:.6rem;padding:.3rem .6rem}.beacon-item{padding:.6rem}.beacon-description{padding:.6rem;font-size:.85rem}}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #00ff88;background:rgba(0,255,136,.1)}.popup-header h3{color:#00ff88;font-size:1.2rem;font-weight:700;margin:0;font-family:Bitcount,monospace}.popup-close{background:none;border:1px solid #00ff88;border-radius:4px;color:#00ff88;font-size:1rem;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.popup-close:hover{background:rgba(0,255,136,.2);box-shadow:0 0 10px rgba(0,255,136,.3)}.popup-content{padding:1.5rem}.popup-content p{color:#ffffff;font-size:.95rem;line-height:1.5;margin-bottom:1rem;font-family:Arial,sans-serif}.popup-content p:last-child{margin-bottom:0}.beacon-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(0,255,136,.3)}.beacon-list-header h4{font-size:1rem;margin:0}.beacon-list-header h4,.create-beacon-btn{color:#00ff88;font-weight:600;font-family:Bitcount,monospace}.create-beacon-btn{background:rgba(0,255,136,.1);border:1px solid #00ff88;border-radius:4px;font-size:.7rem;padding:.4rem .8rem;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.create-beacon-btn:hover{background:rgba(0,255,136,.2);box-shadow:0 0 10px rgba(0,255,136,.3);transform:translateY(-1px)}.beacon-items{display:flex;flex-direction:column;gap:.5rem}.beacon-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.2);border-radius:6px;cursor:pointer;transition:all .3s ease}.beacon-item:hover{background:rgba(0,255,136,.1);border-color:rgba(0,255,136,.4);transform:translateX(4px)}.beacon-item-name{color:#ffffff;font-size:.9rem;font-weight:600;font-family:Bitcount,monospace}.beacon-item-arrow{color:#00ff88;font-size:1rem;font-weight:700}.beacon-details-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(0,255,136,.3)}.back-btn{background:rgba(0,255,136,.1);border:1px solid #00ff88;border-radius:4px;color:#00ff88;font-size:1rem;font-weight:700;padding:.4rem;cursor:pointer;transition:all .3s ease;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:rgba(0,255,136,.2);box-shadow:0 0 8px rgba(0,255,136,.3)}.beacon-details-header h4{color:#00ff88;font-size:1.1rem;font-weight:600;margin:0;font-family:Bitcount,monospace}.beacon-description{color:#ffffff;font-size:.9rem;line-height:1.5;margin-bottom:1.5rem;padding:.8rem;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.2);border-radius:6px;font-family:Arial,sans-serif}.beacon-events h5{color:#00ff88;font-size:.9rem;font-weight:600;margin:0 0 .8rem;font-family:Bitcount,monospace}.beacon-event-item{color:#ffffff;font-size:.85rem;padding:.6rem;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.2);border-radius:4px;margin-bottom:.5rem;font-family:Arial,sans-serif}.beacon-event-item:last-child{margin-bottom:0}@keyframes labelPulse{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}.map-controls{position:fixed;bottom:2rem;right:2rem;z-index:20}.control-panel{background:rgba(0,0,0,.8);border:1px solid #00ff88;border-radius:8px;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 20px rgba(0,255,136,.3)}.status-indicator{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.9rem;color:#00ff88}.status-dot{width:8px;height:8px;background:#00ff88;border-radius:50%;animation:statusBlink 1s ease-in-out infinite;box-shadow:0 0 10px #00ff88}@keyframes statusBlink{0%,to{opacity:1}50%{opacity:.3}}.data-stream{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:#0088ff;font-family:monospace}.data-stream span{opacity:.8}.beacon-info-btn{background:rgba(0,136,255,.1);border:1px solid #0088ff;border-radius:4px;color:#0088ff;font-size:.7rem;font-family:monospace;padding:.3rem .6rem;cursor:pointer;transition:all .3s ease;text-transform:uppercase;font-weight:600;margin-top:.5rem}.beacon-info-btn:hover{background:rgba(0,136,255,.2);box-shadow:0 0 10px rgba(0,136,255,.3);transform:translateY(-1px)}.zoom-controls{gap:.5rem;margin-top:.75rem}.zoom-button,.zoom-controls{display:flex;justify-content:center}.zoom-button{width:32px;height:32px;background:rgba(0,0,0,.8);border:1px solid #00ff88;border-radius:4px;color:#00ff88;font-size:1.2rem;font-weight:700;cursor:pointer;align-items:center;transition:all .3s ease;font-family:Bitcount,monospace}.zoom-button:hover{background:rgba(0,255,136,.1);box-shadow:0 0 10px rgba(0,255,136,.3);transform:translateY(-1px)}.zoom-button.reset{font-size:1rem}.detroit-map-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,255,136,.1) 1px,transparent 0),linear-gradient(90deg,rgba(0,255,136,.1) 1px,transparent 0);background-size:50px 50px;animation:gridMove 20s linear infinite;pointer-events:none;z-index:1}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.detroit-map-container:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(2px 2px at 20px 30px,#00ff88,transparent),radial-gradient(2px 2px at 40px 70px,#0088ff,transparent),radial-gradient(1px 1px at 90px 40px,#ff0088,transparent),radial-gradient(1px 1px at 130px 80px,#00ffff,transparent),radial-gradient(2px 2px at 160px 30px,#ffaa00,transparent);background-repeat:repeat;background-size:200px 100px;animation:float 15s ease-in-out infinite;pointer-events:none;z-index:1;opacity:.3}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@media (max-width:768px){.map-header h1{font-size:2.5rem}.map-header .subtitle{font-size:1rem}.map-canvas-wrapper{height:60vh;margin:1rem 0}.landmark-label{font-size:.8rem}.map-controls{bottom:1rem;right:1rem}.control-panel{padding:.75rem}}.detroit-map-canvas:hover{box-shadow:0 0 30px rgba(0,255,136,.5);transition:box-shadow .3s ease}@keyframes loadingPulse{0%{opacity:.3}50%{opacity:1}to{opacity:.3}}.detroit-map-container.loading{animation:loadingPulse 2s ease-in-out infinite}