:root{--bg:#0a0a14;--card:rgba(16,16,28,0.85);--card-solid:#10101c;--border:rgba(255,255,255,0.06);--text:#f0f0f5;--text2:#8888a0;--text3:#4a4a60;--accent:#4ade80;--accent2:#22c55e;--danger:#ef4444;--glass:rgba(20,20,36,0.75);--blur:20px;--radius:14px;--radius-sm:10px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}.app{position:relative;width:100vw;height:100vh;height:100dvh}.map-container{position:absolute;inset:0;width:100%;height:100%}.top-bar{position:fixed;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));display:flex;gap:8px;z-index:10;pointer-events:none}.top-bar>*{pointer-events:auto}.search-wrapper{flex:1 1;max-width:400px;position:relative}.search-bar{display:flex;align-items:center;background:none;border:none;border-radius:0;padding:0;height:42px;transition:none}.search-focused .search-bar{background:none;box-shadow:none}.search-bar-icon{color:var(--text3);flex-shrink:0}.search-bar-input{flex:1 1;background:none;border:none;outline:none;color:var(--text);font-size:15px;padding:0 10px;font-family:inherit;text-shadow:0 1px 4px rgba(0,0,0,.5)}.search-bar-input::placeholder{color:rgba(255,255,255,.4)}.search-bar-clear{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;display:flex}.search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card-solid);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.5);animation:dropdown-in .15s ease}.search-dropdown-item{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text);cursor:pointer;text-align:left;transition:background .1s}.search-dropdown-item:last-child{border-bottom:none}.search-dropdown-item:hover{background:rgba(255,255,255,.04)}.search-dropdown-item svg{color:var(--text3);flex-shrink:0}.search-dropdown-text{display:flex;flex-direction:column;overflow:hidden;min-width:0}.search-dropdown-name{font-size:14px;font-weight:500}.search-dropdown-sub{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-btn{background:none;border:none;color:rgba(255,255,255,.5);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;padding:10px 0;transition:color .2s;flex-shrink:0;text-shadow:0 1px 4px rgba(0,0,0,.5)}.settings-btn:hover{color:var(--text)}.bottom-controls{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;animation:slide-up .3s ease}.pin-info{background:rgba(10,10,20,.35);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:none;border-radius:20px;padding:6px 14px}.pin-coords{font-size:12px;font-family:SF Mono,Fira Code,monospace;color:var(--text2)}.action-btn,.action-buttons{display:flex;gap:8px}.action-btn{align-items:center;padding:14px 28px;border:none;border-radius:50px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;box-shadow:0 8px 32px rgba(0,0,0,.3)}.action-go{background:var(--accent);color:#0a0a14}.action-go:hover{background:var(--accent2);transform:scale(1.03)}.action-stop{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}.action-stop:hover{background:rgba(239,68,68,.25)}.active-pill{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(10,10,20,.4);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:none;border-radius:50px;cursor:pointer;font-size:12px;color:var(--accent);white-space:nowrap;animation:slide-up .3s ease}.active-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 2s ease-in-out infinite}.custom-marker{position:relative;width:24px;height:24px;cursor:pointer}.marker-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,.4)}.marker-dot,.marker-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.marker-pulse{width:40px;height:40px;border-radius:50%;background:rgba(74,222,128,.2);animation:pulse 2s ease-out infinite}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);animation:fade-in .2s ease}.modal{width:90%;max-width:420px;max-height:80vh;background:var(--card-solid);border:1px solid var(--border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;animation:modal-in .25s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0}.modal-header h2{font-size:20px;font-weight:700}.modal-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.05);border:none;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.modal-close:hover{background:rgba(255,255,255,.1);color:var(--text)}.modal-body{padding:16px 20px 24px;overflow-y:auto}.settings-section{margin-bottom:20px}.settings-section:last-child{margin-bottom:0}.settings-section h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:10px}.settings-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.settings-section-header h3{margin-bottom:0}.device-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;width:100%;text-align:left;color:var(--text);font-family:inherit}.device-card:hover{background:rgba(255,255,255,.06)}.device-card.connected{border-color:rgba(74,222,128,.2);background:rgba(74,222,128,.05);cursor:default}.device-card-info{display:flex;align-items:center;gap:12px}.device-card-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:var(--text2)}.connected .device-card-icon{background:rgba(74,222,128,.1);color:var(--accent)}.device-card-name{font-size:14px;font-weight:500}.device-card-mode{font-size:11px;color:var(--text3)}.device-list-settings{display:flex;flex-direction:column;gap:6px}.settings-empty{text-align:center;padding:20px;color:var(--text3);font-size:13px}.status-grid{display:flex;flex-direction:column;gap:8px}.status-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.status-item:last-child{border-bottom:none}.status-label{font-size:13px;color:var(--text2)}.status-value{font-size:13px;font-weight:500}.status-online{color:var(--accent)}.status-offline{color:var(--text3)}.about-text{font-size:13px;color:var(--text2);line-height:1.6}.about-text strong{color:var(--text)}.icon-btn{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:8px;display:flex;transition:all .15s}.icon-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}.btn-small{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit}.btn-outline{background:none;border:1px solid var(--border);color:var(--text2)}.btn-outline:hover{background:rgba(255,255,255,.05);color:var(--text)}.toast{position:fixed;top:calc(68px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:50px;font-size:13px;font-weight:500;z-index:200;animation:toast-in .3s ease;pointer-events:none;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.3)}.toast-success{background:var(--accent);color:#0a0a14}.toast-error{background:var(--danger);color:white}.toast-warning{background:#f59e0b;color:#0a0a14}.mapboxgl-ctrl,.mapboxgl-ctrl-attrib,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-logo{display:none!important}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}@keyframes slide-up{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes toast-in{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:500px){.search-wrapper{max-width:none}.search-bar-input{font-size:16px}.bottom-controls{width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}.action-btn{flex:1 1;justify-content:center;padding:16px 20px}.modal{width:100%;max-width:none;max-height:100vh;border-radius:20px 20px 0 0;position:fixed;bottom:0}.modal-overlay{align-items:flex-end}}