:root{--bg:#0d1b2a;--surface:#162032;--accent:#4a9eff;--accent2:#1a6ed4;--text:#e8edf3;--muted:#7a8fa6;--success:#2ecc71;--warn:#f39c12;--danger:#e74c3c;--radius:12px;--toolbar:78px}*{box-sizing:border-box}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.visually-hidden-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;top:0;left:-10000px}#welcome{background:radial-gradient(ellipse at 50% 30%, #162840 0%, var(--bg) 70%);flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100%;padding:22px 16px;display:flex}#welcome.hidden-screen{display:none!important}.welcome-icon{background:var(--surface);border-radius:28px;place-items:center;width:clamp(140px,34vw,208px);height:clamp(140px,34vw,208px);display:grid}.welcome-icon svg{width:clamp(88px,22vw,120px);height:clamp(88px,22vw,120px)}.welcome-actions{flex-direction:column;justify-content:center;gap:12px;width:min(460px,100%);display:flex}.btn-primary,.btn-secondary{border-radius:var(--radius);min-height:62px;color:var(--text);border:1px solid #ffffff24;flex:1 1 0;padding:14px 16px;font-size:1rem;font-weight:700}.btn-primary{background:var(--accent);color:#fff;border-color:#0000}.btn-primary:active{background:var(--accent2)}.btn-secondary{background:var(--surface)}.welcome-title{margin:8px 0 0;font-size:1.9rem;line-height:1.1}.app-version{color:var(--muted);letter-spacing:.04em;margin:-6px 0 0;font-size:.82rem}.welcome-sub{color:var(--muted);text-align:center;max-width:560px;margin:0}.welcome-tips{color:var(--muted);text-align:center;margin:0;font-size:.86rem}#map-screen{display:none;position:fixed;inset:0;overflow:hidden}#map-screen.active-screen{display:block!important}body.show-map #welcome{display:none!important}body.show-map #map-screen{display:block!important}#top-hud{top:env(safe-area-inset-top,0);z-index:20;pointer-events:none;background:linear-gradient(#0d1b2ae6 0%,#0000 100%);justify-content:center;align-items:center;padding:8px 140px 8px 132px;display:flex;position:fixed;left:0;right:0}.hud-btn{pointer-events:auto;min-height:44px;color:var(--text);background:#0d1b2ac7;border:none;border-radius:999px;align-items:center;gap:6px;padding:10px 14px;font-weight:700;display:inline-flex;position:absolute;top:6px;left:10px}.hud-btn-secondary{left:96px}.hud-btn svg{width:18px;height:18px}#map-name{text-overflow:ellipsis;white-space:nowrap;max-width:50vw;font-size:.9rem;font-weight:700;overflow:hidden}#gps-status{border-radius:999px;padding:5px 10px;font-size:.82rem;position:absolute;top:10px;right:10px}.gps-ok{color:var(--success);background:#2ecc7140}.gps-err{color:var(--danger);background:#e74c3c40}.gps-acquiring{color:var(--warn);background:#f39c1240}.selection-metrics{top:calc(env(safe-area-inset-top,0px) + 54px);color:#d4e7ff;z-index:45;white-space:nowrap;text-overflow:ellipsis;background:#0a121edb;border:1px solid #4a9eff73;border-radius:10px;max-width:calc(100vw - 24px);padding:8px 12px;font-size:.83rem;font-weight:700;display:none;position:fixed;left:50%;overflow:hidden;transform:translate(-50%)}.selection-metrics.visible{display:block}#map-viewport{inset:0;bottom:var(--toolbar);background:#111;position:absolute;overflow:hidden}#map-wrap{transform-origin:0 0;position:absolute;top:0;left:0}#map-wrap canvas{display:block}.gps-overlay{pointer-events:none;z-index:10;position:fixed;inset:0}#toolbar{height:calc(var(--toolbar) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);z-index:30;border-top:1px solid #ffffff14;justify-content:space-around;align-items:center;gap:4px;padding-inline:4px;display:flex;position:fixed;bottom:0;left:0;right:0}.toolbar-btn{min-width:0;min-height:64px;color:var(--muted);background:0 0;border:none;border-radius:12px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:4px;padding:4px 2px;font-size:.75rem;font-weight:700;display:flex}.toolbar-btn.active{color:#cde4ff;background:#4a9eff2e}.toolbar-btn svg{width:28px;height:28px}#status-bar{z-index:50;opacity:0;border-radius:var(--radius);padding:10px 14px;font-size:.86rem;transition:opacity .25s,transform .25s;position:fixed;top:58px;left:12px;right:12px;transform:translateY(-6px)}#status-bar.visible{opacity:1;transform:translateY(0)}.status-success{color:var(--success);background:#2ecc7133;border:1px solid #2ecc7166}.status-warn{color:var(--warn);background:#f39c1233;border:1px solid #f39c1266}.status-info{color:var(--accent);background:#4a9eff33;border:1px solid #4a9eff66}#side-menu{background:var(--surface);z-index:200;flex-direction:column;width:min(340px,88vw);transition:transform .25s;display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}#side-menu.open{transform:translate(0)}.menu-header{padding:calc(18px + env(safe-area-inset-top,0px)) 14px 12px;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;display:flex}.menu-header h2{margin:0;font-size:1rem}.menu-close{color:var(--muted);background:0 0;border:none;font-size:1.4rem}.menu-section-title{color:var(--muted);margin:0;padding:10px 14px 4px;font-size:.72rem}#saved-list{flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}.saved-item{border-bottom:1px solid #ffffff0f;flex-wrap:wrap;gap:6px;padding:12px 14px;display:flex}.saved-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:.95rem;font-weight:600;overflow:hidden}.saved-date{color:var(--muted);width:100%;font-size:.76rem}.saved-actions{gap:8px;display:flex}.btn-sm{border:none;border-radius:8px;min-height:34px;padding:7px 12px}.load-btn{background:var(--accent);color:#fff}.del-btn{color:var(--danger);background:#e74c3c33}.no-maps{color:var(--muted);text-align:center;padding:22px 14px}.point-modal{z-index:260;background:#00000094;justify-content:center;align-items:center;padding:18px;display:none;position:fixed;inset:0}.settings-modal{z-index:255;background:#00000094;justify-content:center;align-items:center;padding:18px;display:none;position:fixed;inset:0}.settings-modal.visible{display:flex}.settings-card{background:var(--surface);border:1px solid #ffffff14;border-radius:18px;flex-direction:column;gap:12px;width:min(460px,100%);padding:18px;display:flex}.settings-card h2{margin:0;font-size:1.05rem}.settings-card label{color:var(--muted);flex-direction:column;gap:6px;font-size:.84rem;display:flex}.settings-card select{width:100%;color:var(--text);font:inherit;appearance:none;background:#0d1b2ab8;border:1px solid #ffffff24;border-radius:10px;padding:10px 12px}.point-modal.visible{display:flex}.point-card{background:var(--surface);border:1px solid #ffffff14;border-radius:18px;flex-direction:column;gap:12px;width:min(460px,100%);padding:18px;display:flex}.point-card h2{margin:0;font-size:1.05rem}.point-card label{color:var(--muted);flex-direction:column;gap:6px;font-size:.84rem;display:flex}.point-card input,.point-card select,.point-card textarea{width:100%;color:var(--text);font:inherit;background:#0d1b2ab8;border:1px solid #ffffff24;border-radius:10px;padding:10px 12px}.point-card select{appearance:none}.point-card textarea{resize:vertical;min-height:96px}.point-actions{justify-content:flex-end;gap:10px;display:flex}.point-actions .btn-primary,.point-actions .btn-secondary{flex:none;min-width:96px;min-height:46px}.point-delete-btn{color:#ffb3ad;background:#e74c3c2e;display:none}@media (width<=640px){#top-hud{justify-content:flex-start;padding-left:12px;padding-right:88px}.hud-btn{min-height:40px;padding:8px 12px;position:static}.hud-btn-secondary{margin-left:8px}#map-name{max-width:calc(100vw - 220px);margin-left:10px}#gps-status{top:8px}.selection-metrics{top:calc(env(safe-area-inset-top,0px) + 46px);max-width:calc(100vw - 18px)}}#spinner{z-index:100;color:var(--text);background:#0d1b2ad9;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:none;position:fixed;inset:0}#spinner:before{content:"";border:3px solid #4a9eff4d;border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=520px){.welcome-actions{gap:10px;width:100%}.btn-primary,.btn-secondary{min-height:58px;font-size:.95rem}#map-name{max-width:40vw}}