:root{--ink:#18231e;--muted:#69736d;--cream:#f4f1e8;--card:#fffdf7;--green:#146b48;--lime:#dff26b;--line:#deddd5}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit}
body{background-image:radial-gradient(circle at 80% 0,#e5efc7 0,transparent 28rem)}.app{width:min(100%,600px);margin:auto;padding:0 16px calc(28px + env(safe-area-inset-bottom))}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:-.03em;font-size:19px}.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--ink);color:var(--lime);font-size:12px;letter-spacing:-.05em}.icon-btn{width:42px;height:42px;border:1px solid #d4d5cc;border-radius:14px;background:#fffaf0;display:grid;place-items:center;color:var(--ink)}.icon-btn svg{width:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon-btn.loading svg{animation:spin 1s linear infinite}
.status-pill{display:flex;align-items:center;gap:8px;width:max-content;margin:0 0 12px;padding:7px 11px;border-radius:99px;background:#e5eadf;color:#465149;font-size:12px;font-weight:700}.pulse{width:7px;height:7px;background:#36a76e;border-radius:50%;box-shadow:0 0 0 4px #c9decf}.status-pill.error{background:#f5dfd7;color:#8c3c2d}.status-pill.error .pulse{background:#c95743;box-shadow:none}
.map-card{height:225px;border-radius:24px;overflow:hidden;border:1px solid #d7d9cd;box-shadow:0 12px 30px #293c2810;background:#dfe7d7}.map{height:100%;position:relative;overflow:hidden;background:#e5eadf}.map-grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(#7f8f8130 1px,transparent 1px),linear-gradient(90deg,#7f8f8130 1px,transparent 1px);background-size:34px 34px;transform:rotate(8deg) scale(1.3)}.road{position:absolute;background:#faf7ed;box-shadow:0 0 0 1px #d0d3c8;z-index:1}.road-a{width:130%;height:27px;left:-15%;top:45%;transform:rotate(-13deg)}.road-b{width:28px;height:130%;left:23%;top:-15%;transform:rotate(18deg)}.road-c{width:24px;height:130%;right:21%;top:-12%;transform:rotate(-25deg)}.road-d{width:120%;height:16px;left:-10%;top:15%;transform:rotate(7deg)}.road-e{width:110%;height:13px;left:-5%;bottom:12%;transform:rotate(18deg)}.map-label{position:absolute;left:12px;top:12px;z-index:4;background:#ffffffc9;backdrop-filter:blur(5px);padding:6px 8px;border-radius:8px;font-size:9px;font-weight:900;letter-spacing:.12em;color:#667069}.you-dot{position:absolute;z-index:5;left:50%;top:53%;width:19px;height:19px;border:4px solid white;border-radius:50%;background:#246bd2;box-shadow:0 2px 8px #15293c66;transform:translate(-50%,-50%)}.you-dot:before{content:"";position:absolute;inset:-12px;border-radius:50%;background:#2979da26}.map-pin{position:absolute;z-index:5;transform:translate(-50%,-100%);width:29px;height:35px;border-radius:50% 50% 50% 0;background:var(--green);border:3px solid white;box-shadow:0 4px 10px #192b2250;rotate:-45deg;transition:.2s}.map-pin span{display:block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin:8px;}.map-pin.active{background:#17271f;scale:1.18}
.hero-card{margin-top:14px;background:var(--ink);color:white;border-radius:24px;padding:18px;display:grid;grid-template-columns:126px 1fr;gap:18px;box-shadow:0 16px 35px #1c2c2230}.compass-wrap{text-align:center}.compass{width:122px;height:122px;border-radius:50%;border:1px solid #607168;position:relative;background:radial-gradient(circle,#26382f 0 3px,transparent 4px),repeating-conic-gradient(from 0deg,#607168 0 1deg,transparent 1deg 15deg)}.compass:after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--ink)}.north{position:absolute;z-index:2;top:12px;left:50%;transform:translateX(-50%);font-size:9px;color:#9da8a2;font-weight:800}.arrow{position:absolute;z-index:4;inset:15px;transition:transform .25s ease-out}.arrow span{display:block;margin:auto;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:50px solid var(--lime);filter:drop-shadow(0 5px 6px #0008)}.arrow span:after{content:"";position:absolute;top:50px;left:50%;transform:translateX(-50%);border-left:11px solid transparent;border-right:11px solid transparent;border-top:28px solid #879058}.compass-center{position:absolute;z-index:5;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:3px solid var(--green)}.bearing-label{display:block;font-size:10px;color:#a9b4ae;margin-top:7px;font-weight:700}.eyebrow{color:var(--lime);font-size:9px;font-weight:900;letter-spacing:.13em}.shop-primary h1{font-size:21px;line-height:1.1;letter-spacing:-.04em;margin:7px 0 6px}.shop-primary p{margin:0;color:#aeb9b3;font-size:12px;line-height:1.5}.shop-primary .direction{color:#fff;margin-top:5px}.navigate-btn{width:100%;border:0;background:var(--lime);color:#18231e;border-radius:12px;padding:11px 10px;margin-top:12px;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:7px}.navigate-btn:disabled{opacity:.4}.navigate-btn svg{width:15px;fill:currentColor}
.nearby{margin-top:24px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.section-head h2{font-size:18px;letter-spacing:-.03em;margin:0}.section-head span{font-size:11px;color:var(--muted);font-weight:700}.shop-list{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto;padding-bottom:5px}.shop-item{border:1px solid var(--line);background:#fffaf2;border-radius:17px;padding:13px;display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;text-align:left;color:inherit}.shop-item.active{border-color:#94a96b;background:#f4f7df}.shop-icon{width:38px;height:38px;background:#e5eadf;border-radius:12px;display:grid;place-items:center;font-size:17px}.shop-copy strong{display:block;font-size:13px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-copy span{font-size:11px;color:var(--muted)}.distance{font-size:12px;font-weight:800}.skeleton{height:65px;border-radius:17px;background:linear-gradient(90deg,#e7e4da,#f5f2e9,#e7e4da);background-size:200%;animation:shimmer 1.3s infinite}
.permission-sheet{position:fixed;z-index:20;inset:auto 12px calc(12px + env(safe-area-inset-bottom));max-width:520px;margin:auto;background:#fffdf7;border:1px solid #dddacf;border-radius:25px;padding:24px;text-align:center;box-shadow:0 20px 70px #17241d55}.permission-sheet[hidden]{display:none}.permission-sheet h2{margin:12px 0 5px;letter-spacing:-.04em}.permission-sheet p{font-size:13px;line-height:1.5;color:var(--muted);margin:0 auto 18px;max-width:390px}.permission-sheet button{border:0;background:var(--green);color:white;border-radius:13px;padding:13px 28px;font-weight:800;width:100%}.permission-sheet small{display:block;color:#8b938e;margin-top:10px;font-size:10px}.pin-illustration{margin:auto;width:60px;height:60px;border-radius:20px;background:#e7efce;display:grid;place-items:center}.pin-illustration span{width:22px;height:28px;border-radius:50% 50% 50% 0;background:var(--green);transform:rotate(-45deg);position:relative}.pin-illustration span:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--lime);left:7px;top:7px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-200%}}
@media(max-width:390px){.hero-card{grid-template-columns:105px 1fr;gap:13px}.compass{width:102px;height:102px}.arrow{inset:13px}.arrow span{border-left-width:12px;border-right-width:12px;border-bottom-width:40px}.arrow span:after{top:40px}.shop-primary h1{font-size:18px}.map-card{height:205px}}