:root{--bg-color: #030307;--panel-bg: rgba(10, 11, 20, .88);--panel-border: rgba(255, 255, 255, .12);--accent-color: #00f2ff;--accent-glow: rgba(0, 242, 255, .35);--accent-blue: #3b82f6;--accent-green: #10b981;--accent-red: #ef4444;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--glass-blur: blur(20px) saturate(190%);--font-display: "Outfit", sans-serif;--font-mono: "Space Grotesk", monospace}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);font-family:var(--font-display);color:var(--text-primary);position:fixed;left:0;top:0}#webgl-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;display:block;touch-action:none}.pano-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background-color:#030307;transition:opacity .4s ease,visibility .4s ease;opacity:1;visibility:visible}.pano-canvas.hidden{opacity:0;visibility:hidden;pointer-events:none}.hud-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:env(safe-area-inset-top,16px) 16px env(safe-area-inset-bottom,16px) 16px}.top-bar{display:flex;justify-content:space-between;align-items:center;pointer-events:auto;margin-bottom:8px}.brand{display:flex;align-items:center;gap:8px;background:var(--panel-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--panel-border);padding:8px 16px;border-radius:40px;box-shadow:0 4px 20px #00000040}.brand h1{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--text-primary)}.pulse-dot{width:6px;height:6px;border-radius:50%;background-color:var(--accent-red)}.pulse-dot.active{background-color:var(--accent-color);box-shadow:0 0 8px var(--accent-color);animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%{transform:scale(.95);box-shadow:0 0 #00f2ffb3}70%{transform:scale(1);box-shadow:0 0 0 6px #00f2ff00}to{transform:scale(.95);box-shadow:0 0 #00f2ff00}}.icon-btn{background:var(--panel-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--panel-border);color:var(--text-primary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #00000040}.icon-btn:active{transform:scale(.9);background-color:#ffffff26;border-color:var(--accent-color);color:var(--accent-color)}.hud-top,.hud-bottom{pointer-events:auto;max-width:480px;width:100%;margin:0 auto;display:flex;flex-direction:column}.hud-top{gap:8px}.hud-bottom{margin-top:auto}.card{background:var(--panel-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--panel-border);border-radius:20px;box-shadow:0 8px 32px #0000004d;padding:14px 16px;transition:border-color .4s ease,box-shadow .4s ease;overflow:hidden;position:relative}.card:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--panel-border),transparent)}.card:focus-within{border-color:#00f2ff4d;box-shadow:0 8px 32px #00f2ff1a}.display-card{display:flex;flex-direction:column;gap:8px}.display-main-row{display:flex;justify-content:space-between;align-items:center;width:100%}.display-target-info{flex:1;min-width:0;padding-right:12px;text-align:left}.target-name{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.target-address{font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}.display-nums{display:flex;gap:16px;flex-shrink:0}.num-block{display:flex;flex-direction:column;align-items:flex-end}.num-block .value{font-family:var(--font-mono);font-size:20px;font-weight:700;line-height:1}.distance-block .value{color:var(--accent-color);text-shadow:0 0 6px var(--accent-glow)}.bearing-block .value{color:var(--text-primary)}.num-block .unit{font-size:8px;font-weight:600;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase;margin-top:3px}.display-status-row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);border-top:1px solid rgba(255,255,255,.05);padding-top:8px}.status-item{display:flex;align-items:center;gap:6px}.telemetry-sub{color:var(--text-secondary);font-weight:600}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-color);z-index:1000;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .5s ease,visibility .5s ease}.loading-overlay.fade-out{opacity:0;visibility:hidden;pointer-events:none}.loader-spinner{width:48px;height:48px;border:3px solid rgba(0,242,255,.1);border-top-color:var(--accent-color);border-radius:50%;animation:spin-loader 1s infinite linear}.loading-text{font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--text-primary)}.loading-subtext{font-size:11px;color:var(--text-muted)}@keyframes spin-loader{to{transform:rotate(360deg)}}.search-card{padding:8px 12px;border-radius:40px}.input-wrapper{display:flex;align-items:center;gap:12px;width:100%}.search-icon{color:var(--text-secondary);flex-shrink:0}#search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:var(--font-display);font-size:15px;padding:10px 0;font-weight:500}#search-input::placeholder{color:var(--text-muted)}.search-submit-btn{background:var(--accent-color);border:none;outline:none;width:36px;height:36px;border-radius:50%;color:#030307;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0;box-shadow:0 0 12px var(--accent-glow)}.search-submit-btn:active{transform:scale(.9) translateZ(0);background-color:var(--text-primary);box-shadow:0 0 16px #fff6}.swipe-hint{position:absolute;top:12%;left:50%;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-secondary);pointer-events:none;animation:fade-pulse 3s infinite ease-in-out;transition:opacity 1s ease}.swipe-icon{animation:bounce-y 2s infinite ease-in-out;color:var(--accent-color);filter:drop-shadow(0 0 4px var(--accent-glow))}.swipe-hint span{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;background:#0006;padding:4px 12px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.05)}@keyframes fade-pulse{0%,to{opacity:.3}50%{opacity:.85}}@keyframes bounce-y{0%,to{transform:translateY(-4px)}50%{transform:translateY(4px)}}.tilt-alert{width:100%;max-height:80px;margin-bottom:12px;z-index:100;pointer-events:auto;transition:opacity .3s ease,max-height .3s ease,margin-bottom .3s ease,transform .3s ease}.tilt-alert.hidden{opacity:0;max-height:0;margin-bottom:0;pointer-events:none;transform:translateY(10px)}.alert-content{background:#dc2626;border:1px solid rgba(255,255,255,.25);padding:12px 16px;border-radius:16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px #0006,0 0 15px #dc262633}.alert-icon{color:var(--text-primary);animation:shake 1.5s infinite;flex-shrink:0}.alert-content p{font-size:12px;font-weight:600;line-height:1.3;color:var(--text-primary)}@keyframes shake{0%,to{transform:rotate(0)}10%,30%,50%,70%,90%{transform:rotate(-5deg)}20%,40%,60%,80%{transform:rotate(5deg)}}.settings-overlay,.permission-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background-color:#020205d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;justify-content:center;align-items:center;padding:24px;transition:opacity .4s cubic-bezier(.4,0,.2,1)}.settings-overlay.hidden,.permission-overlay.hidden{opacity:0;pointer-events:none}.settings-card,.permission-card{width:100%;max-width:400px;background:#10111ecc;border:1px solid var(--panel-border);border-radius:28px;box-shadow:0 20px 50px #00000080;padding:24px;display:flex;flex-direction:column;gap:20px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.settings-overlay.hidden .settings-card,.permission-overlay.hidden .permission-card{transform:scale(.9) translateY(20px)}.settings-header{display:flex;justify-content:space-between;align-items:center}.settings-header h3{font-size:18px;font-weight:700}.close-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}.close-btn:active{color:var(--text-primary)}.settings-body{display:flex;flex-direction:column;gap:16px}.setting-group{display:flex;flex-direction:column;gap:8px}.setting-group label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.setting-group input[type=text],.setting-group input[type=password]{background:#ffffff08;border:1px solid var(--panel-border);padding:12px 16px;border-radius:12px;color:var(--text-primary);font-family:var(--font-display);font-size:14px;outline:none;transition:border-color .3s}.setting-group input:focus{border-color:var(--accent-color)}.help-text{font-size:11px;color:var(--text-muted);line-height:1.4}.checkbox-group{flex-direction:row;align-items:center;gap:16px;background:#ffffff05;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.03)}.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ffffff1a;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--accent-color)}input:checked+.slider:before{transform:translate(20px)}.switch-label{display:flex;flex-direction:column}.switch-label strong{font-size:13px;font-weight:600;color:var(--text-primary)}.switch-label span{font-size:11px;color:var(--text-muted)}.slider-wrapper{display:flex;align-items:center;gap:12px}.slider-wrapper input[type=range]{flex:1;accent-color:var(--accent-color);background:#ffffff1a;height:6px;border-radius:3px}#model-offset-value{font-family:var(--font-mono);font-size:13px;font-weight:600;width:40px;text-align:right}.primary-btn{background:var(--accent-color);color:#030307;border:none;outline:none;padding:14px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 15px var(--accent-glow);transition:all .2s}.primary-btn:active{transform:scale(.97);box-shadow:0 2px 5px var(--accent-glow)}.permission-card{align-items:center;text-align:center;gap:16px}.compass-logo-glow{background:#00f2ff0d;border:1px solid rgba(0,242,255,.15);width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 35px var(--accent-glow);margin-bottom:8px}.logo-svg{color:var(--accent-color);filter:drop-shadow(0 0 8px var(--accent-glow))}.permission-card h2{font-size:24px;font-weight:800;letter-spacing:-.01em}.permission-card p{font-size:13px;color:var(--text-secondary);line-height:1.5}.permission-steps{width:100%;display:flex;flex-direction:column;gap:12px;background:#ffffff05;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.04)}.step{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;text-align:left}.status-indicator{width:8px;height:8px;border-radius:50%}.status-indicator.pending{background-color:var(--text-muted)}.status-indicator.granted{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-indicator.denied{background-color:var(--accent-red);box-shadow:0 0 8px var(--accent-red)}.action-btn{width:100%;background:var(--accent-color);color:#030307;border:none;outline:none;padding:16px;border-radius:16px;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 5px 20px var(--accent-glow);transition:all .2s;margin-top:10px}.action-btn:active{transform:scale(.97)}.text-btn{background:none;border:none;color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;transition:color .2s}.text-btn:active{color:var(--text-primary)}
