{"id":213,"date":"2026-08-22T16:14:32","date_gmt":"2026-08-23T02:14:32","guid":{"rendered":"https:\/\/mana-corp.com\/?page_id=213"},"modified":"2026-08-22T16:15:16","modified_gmt":"2026-08-23T02:15:16","slug":"elementor-213","status":"publish","type":"page","link":"http:\/\/mana-corp.com\/?page_id=213","title":{"rendered":"Elementor #213"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\nHexMarket<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/maplibre-gl@3.6.0\/dist\/maplibre-gl.css\">\n<script src=\"https:\/\/unpkg.com\/maplibre-gl@3.6.0\/dist\/maplibre-gl.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/h3-js@4.1.0\/dist\/h3-js.umd.js\"><\/script>\n\n<style>\n:root{\n --bg:#050505; --surface:#0F0F10; --surface2:#161617; --surface3:#1D1D1F; --border:#242426;\n --text:#F5F5F5; --text2:#8E8E93; --text3:#4C4C4F;\n --orange:#FF6A1A; --orange2:#FF8A3D; --orange-glow:rgba(255,106,26,.35); --orange-dim:#5A3016;\n --green:#34C759; --red:#FF4D5E; --purple:#A855F7; --yellow:#FFC940;\n --safe-t:env(safe-area-inset-top,0); --safe-b:env(safe-area-inset-bottom,0);\n --safe-l:env(safe-area-inset-left,0); --safe-r:env(safe-area-inset-right,0);\n}\n*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}\nhtml,body{width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);\n font-family:'Inter',-apple-system,sans-serif;-webkit-user-select:none;user-select:none;}\nbody{display:flex;flex-direction:column;position:fixed;inset:0;}\nbutton{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}\ninput,textarea{font-family:inherit;border:none;outline:none;background:none;color:inherit;}\n.mono{font-family:'JetBrains Mono',monospace;}\n::-webkit-scrollbar{display:none;}\n\n\/* subtle grid texture bg *\/\n.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;\n background-image:linear-gradient(rgba(255,106,26,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,106,26,.05) 1px,transparent 1px);\n background-size:32px 32px;}\n\n\/* ============ ONBOARDING ============ *\/\n#onboarding{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;}\n#onboarding.hide{display:none;}\n.ob-head{display:flex;align-items:center;justify-content:space-between;\n padding:calc(14px + var(--safe-t)) 20px 10px;flex-shrink:0;}\n.ob-back{display:flex;align-items:center;gap:8px;color:var(--text2);font-size:15px;font-weight:500;}\n.ob-back svg{width:18px;height:18px;stroke:var(--text2);}\n.ob-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;}\n.ob-brand .ring{width:22px;height:22px;border-radius:50%;border:5px solid var(--orange);position:relative;}\n.ob-brand span:last-child{color:var(--orange);}\n.ob-skip{color:var(--text2);font-size:15px;font-weight:500;}\n.ob-progress{height:4px;background:var(--surface3);margin:0 20px;border-radius:2px;overflow:hidden;flex-shrink:0;}\n.ob-progress-fill{height:100%;background:var(--orange);border-radius:2px;transition:width .3s ease;}\n.ob-meta{display:flex;justify-content:space-between;padding:10px 20px 0;font-size:13px;flex-shrink:0;}\n.ob-meta .step-lbl{color:var(--text2);font-family:'JetBrains Mono',monospace;}\n.ob-meta .pct{color:var(--orange);font-weight:700;font-family:'JetBrains Mono',monospace;}\n.ob-dots{display:flex;gap:6px;justify-content:center;padding:16px 0;flex-shrink:0;}\n.ob-dots .d{width:6px;height:6px;border-radius:3px;background:var(--surface3);transition:.2s;}\n.ob-dots .d.active{width:22px;background:var(--orange);}\n.ob-dots .d.done{background:var(--orange-dim);}\n.ob-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:20px 28px;text-align:center;}\n.ob-icon{width:110px;height:110px;border-radius:24px;background:var(--surface2);border:1px solid var(--border);\n display:flex;align-items:center;justify-content:center;margin:30px 0 32px;box-shadow:0 0 50px var(--orange-glow) inset;}\n.ob-icon svg{width:46px;height:46px;stroke:var(--orange);}\n.ob-title{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;}\n.ob-desc{font-size:15.5px;color:var(--text2);line-height:1.5;max-width:340px;}\n.ob-chiprow{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:26px;}\n.ob-chip{padding:10px 18px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface2);\n font-size:14px;font-weight:700;color:var(--text2);}\n.ob-chip.active{border-color:var(--orange);color:var(--orange);background:var(--orange-dim);}\n.ob-card{width:100%;max-width:400px;background:var(--surface2);border:1px solid var(--border);\n border-radius:16px;padding:16px 18px;margin-top:26px;text-align:left;}\n.ob-card-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;}\n.ob-card-row .k{display:flex;align-items:center;gap:8px;color:var(--text2);font-weight:500;}\n.ob-card-row .v{color:var(--orange);font-weight:700;font-family:'JetBrains Mono',monospace;font-size:13px;}\n.ob-card-row .v.mint{color:var(--green);}\n.ob-divider{height:1px;background:var(--border);margin:2px 0;}\n.ob-hexgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;max-width:380px;margin-top:26px;}\n.ob-hexcell{aspect-ratio:1;border-radius:16px;background:var(--surface2);border:1.5px solid var(--border);\n display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;}\n.ob-hexcell.active{border-color:var(--orange);background:var(--orange-dim);box-shadow:0 0 24px var(--orange-glow);}\n.ob-hexcell svg{width:22px;height:22px;stroke:var(--text3);}\n.ob-hexcell.active svg{stroke:var(--orange);}\n.ob-hexcell .lbl{font-size:11px;font-weight:700;color:var(--text3);font-family:'JetBrains Mono',monospace;}\n.ob-hexcell.active .lbl{color:var(--orange);}\n.ob-barcompare{width:100%;max-width:380px;margin-top:26px;background:var(--surface2);border:1px solid var(--border);\n border-radius:16px;padding:18px;text-align:left;}\n.ob-bar-row{margin-bottom:16px;}\n.ob-bar-row:last-child{margin-bottom:0;}\n.ob-bar-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:8px;\n text-transform:uppercase;letter-spacing:.04em;}\n.ob-bar-head .lo{color:var(--text2);}\n.ob-bar-head .hi-red{color:var(--red);font-family:'JetBrains Mono',monospace;}\n.ob-bar-head .hi-green{color:var(--green);font-family:'JetBrains Mono',monospace;}\n.ob-bar-track{height:6px;border-radius:3px;background:var(--surface3);overflow:hidden;}\n.ob-bar-fill{height:100%;border-radius:3px;}\n.ob-checkmark{width:110px;height:110px;border-radius:24px;background:var(--orange-dim);border:1px solid var(--orange);\n display:flex;align-items:center;justify-content:center;margin:30px 0 32px;box-shadow:0 0 60px var(--orange-glow);}\n.ob-checkmark svg{width:48px;height:48px;stroke:var(--orange);}\n.ob-privacy-pill{display:flex;align-items:center;gap:8px;padding:11px 20px;border-radius:20px;\n border:1px solid var(--orange-dim);background:rgba(255,106,26,.08);margin-top:24px;font-size:13.5px;\n font-weight:600;color:var(--orange2);}\n.ob-privacy-pill svg{width:15px;height:15px;stroke:var(--orange2);}\n.ob-footer{padding:16px 20px calc(20px + var(--safe-b));flex-shrink:0;}\n.ob-cta{width:100%;height:54px;border-radius:16px;background:var(--orange);color:#1A0800;\n font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:9px;}\n.ob-cta:active{background:var(--orange2);}\n.ob-cta svg{width:18px;height:18px;stroke:#1A0800;stroke-width:2.5;}\n\n\/* ============ HEADER ============ *\/\nheader{position:relative;z-index:20;flex-shrink:0;\n padding:calc(12px + var(--safe-t)) 18px 12px;\n display:flex;align-items:center;justify-content:space-between;\n background:var(--bg);border-bottom:1px solid var(--border);}\n.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.01em;}\n.brand .ring{width:26px;height:26px;border-radius:50%;border:6px solid var(--orange);flex-shrink:0;}\n.brand span:last-child{color:var(--orange);}\n.portal-pill{display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:20px;\n background:var(--surface2);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text2);}\n.portal-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);}\n\n\/* ============ H3 CELL BAR (discover) ============ *\/\n.cellbar{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;\n border-bottom:1px solid var(--border);flex-shrink:0;}\n.cellbar-left{display:flex;align-items:center;gap:10px;}\n.cellbar-left svg{width:18px;height:18px;stroke:var(--orange);}\n.cellbar-left .lbl{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}\n.cellbar-left .val{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace;}\n.cellbar-right{display:flex;gap:8px;}\n.pill-btn{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:11px;\n background:var(--surface2);border:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--text2);}\n.pill-btn.active{background:var(--orange-dim);border-color:var(--orange);color:var(--orange2);}\n.pill-btn svg{width:14px;height:14px;stroke:currentColor;}\n\n.search-bar{padding:12px 18px;border-bottom:1px solid var(--border);flex-shrink:0;}\n.search-field{display:flex;align-items:center;gap:10px;height:44px;padding:0 15px;\n background:var(--surface2);border:1px solid var(--border);border-radius:13px;}\n.search-field:focus-within{border-color:var(--orange);}\n.search-field svg{width:17px;height:17px;stroke:var(--text3);flex-shrink:0;}\n.search-field input{flex:1;font-size:14.5px;color:var(--text);}\n.search-field input::placeholder{color:var(--text3);}\n\n.intent-row{display:flex;padding:12px 18px;flex-shrink:0;}\n.intent-chip{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;\n background:var(--surface2);border:1px solid var(--border);font-size:13.5px;font-weight:700;color:var(--orange2);}\n.intent-chip svg{width:15px;height:15px;stroke:var(--orange2);}\n\n.chips{display:flex;gap:8px;padding:10px 18px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;}\n.cat-chip{flex-shrink:0;display:flex;align-items:center;gap:7px;height:36px;padding:0 15px;\n background:var(--surface2);border:1px solid var(--border);border-radius:18px;\n font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;}\n.cat-chip.active{background:var(--orange);border-color:var(--orange);color:#1A0800;}\n.cat-chip .cnt{background:rgba(0,0,0,.3);padding:1px 7px;border-radius:9px;font-size:11px;}\n.cat-chip.active .cnt{background:rgba(0,0,0,.25);}\n\n\/* ============ CONTENT ============ *\/\n.content{flex:1;position:relative;overflow:hidden;z-index:1;}\n.view{position:absolute;inset:0;display:none;flex-direction:column;}\n.view.active{display:flex;}\n.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px calc(110px + var(--safe-b));}\n.sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;\n color:var(--text3);margin:18px 0 12px;display:flex;align-items:center;gap:7px;}\n.sec-title:first-child{margin-top:0;}\n.sec-title svg{width:13px;height:13px;stroke:currentColor;}\n\n\/* ============ DISCOVER FEED CARD ============ *\/\n.feed-card{display:flex;gap:13px;padding:16px;background:var(--surface);border:1px solid var(--border);\n border-radius:16px;margin-bottom:12px;}\n.feed-avatar{width:60px;height:60px;border-radius:16px;background:var(--surface2);border:1.5px solid var(--orange-dim);\n display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}\n.feed-avatar .hexring{width:26px;height:26px;border-radius:50%;border:4px solid var(--orange);}\n.feed-body{flex:1;min-width:0;}\n.feed-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}\n.feed-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;}\n.feed-viral{display:flex;align-items:center;gap:7px;flex-shrink:0;}\n.viral-bar{width:3px;height:22px;border-radius:2px;background:linear-gradient(180deg,var(--orange),var(--surface3));}\n.viral-num{text-align:right;}\n.viral-num b{display:block;font-size:15px;font-weight:800;color:var(--orange2);font-family:'JetBrains Mono',monospace;line-height:1;}\n.viral-num span{font-size:9.5px;color:var(--text3);text-transform:uppercase;font-weight:700;}\n.feed-desc{font-size:13px;color:var(--text2);line-height:1.45;margin:6px 0 10px;\n display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}\n.feed-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n.status-pill{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;font-size:11.5px;font-weight:700;}\n.status-pill.open{background:rgba(52,199,89,.12);color:var(--green);}\n.status-pill.closed{background:rgba(255,77,94,.12);color:var(--red);}\n.status-pill.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}\n.tier-pill{padding:4px 10px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.03em;}\n.tier-pill.plus{background:rgba(255,106,26,.12);color:var(--orange2);border:1px solid var(--orange-dim);}\n.tier-pill.pro{background:rgba(255,201,64,.12);color:var(--yellow);border:1px solid rgba(255,201,64,.3);}\n.tier-pill.free{background:var(--surface3);color:var(--text2);}\n.tier-pill.enterprise{background:rgba(168,85,247,.12);color:var(--purple);border:1px solid rgba(168,85,247,.3);}\n.feed-dist{font-size:12px;color:var(--text3);margin-left:auto;font-family:'JetBrains Mono',monospace;}\n\n\/* ============ CATEGORY GRID (discover\/sell) ============ *\/\n.cat-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}\n.cat-tile{aspect-ratio:1;border-radius:16px;background:var(--surface);border:1.5px solid var(--border);\n display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;}\n.cat-tile.active{border-color:var(--orange);background:var(--orange-dim);box-shadow:0 0 20px var(--orange-glow) inset;}\n.cat-tile .ring{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--text3);}\n.cat-tile.active .ring{border-color:var(--orange);}\n.cat-tile .lbl{font-size:13.5px;font-weight:700;color:var(--text2);}\n.cat-tile.active .lbl{color:var(--orange2);}\n.cat-tile .dot-badge{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--orange);}\n\n\/* ============ H3 EXPLORE CELLS ============ *\/\n.h3panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;margin-bottom:6px;}\n.h3panel-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-weight:700;font-size:15px;}\n.h3panel-head svg{width:18px;height:18px;stroke:var(--orange);}\n.h3grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}\n.h3cell{padding:14px 10px;border-radius:14px;background:var(--surface2);border:1.5px solid var(--border);text-align:left;}\n.h3cell.active{border-color:var(--orange);background:rgba(255,106,26,.08);box-shadow:0 0 16px var(--orange-glow);}\n.h3cell .id{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-bottom:8px;}\n.h3cell.active .id{color:var(--orange2);}\n.h3cell .cnt{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text3);}\n.h3cell .cnt .dt{width:6px;height:6px;border-radius:50%;background:var(--text3);}\n.h3cell.active .cnt .dt{background:var(--green);}\n.h3cell.active .cnt{color:var(--text2);}\n\n.twin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}\n.mini-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px;}\n.mini-card .nm{font-size:13.5px;font-weight:700;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n.mini-card .viral-row{display:flex;justify-content:flex-end;margin-bottom:8px;}\n\n\/* ============ EMPTY ============ *\/\n.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;\n height:100%;text-align:center;color:var(--text3);gap:10px;padding:40px;}\n.empty svg{width:44px;height:44px;stroke:var(--text3);opacity:.5;}\n\n\/* ============ MAP ============ *\/\n#map{position:absolute;inset:0;width:100%;height:100%;}\n.maplibregl-canvas{width:100% !important;height:100% !important;}\n.maplibregl-ctrl{display:none !important;}\n.map-toprow{position:absolute;top:calc(14px + var(--safe-t));left:16px;right:16px;z-index:25;\n display:flex;align-items:center;justify-content:space-between;gap:10px;}\n.map-catbar{display:flex;gap:8px;overflow-x:auto;flex:1;-webkit-overflow-scrolling:touch;}\n.map-catchip{flex-shrink:0;display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;\n background:rgba(15,15,16,.92);border:1px solid var(--border);border-radius:17px;\n font-size:12.5px;font-weight:700;color:var(--text2);backdrop-filter:blur(12px);}\n.map-catchip.active{background:var(--orange);border-color:var(--orange);color:#1A0800;}\n.profile-fab{width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,var(--orange),#B33D00);\n display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;position:relative;\n box-shadow:0 4px 16px var(--orange-glow);}\n.profile-fab .lv-dot{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;\n background:var(--green);border:2px solid var(--bg);}\n\n\/* right side icon rail *\/\n.icon-rail{position:absolute;top:calc(70px + var(--safe-t));right:16px;z-index:25;\n display:flex;flex-direction:column;background:rgba(15,15,16,.92);border:1px solid var(--border);\n border-radius:16px;padding:6px;backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(0,0,0,.4);}\n.rail-btn{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin:2px 0;}\n.rail-btn svg{width:18px;height:18px;stroke:var(--text2);}\n.rail-btn.active{background:var(--orange-dim);}\n.rail-btn.active svg{stroke:var(--orange2);}\n.rail-sep{height:1px;background:var(--border);margin:5px 6px;}\n\n.eta-badge{position:absolute;padding:4px 9px;border-radius:9px;background:rgba(15,15,16,.94);\n border:1px solid var(--orange-dim);font-size:11px;font-weight:700;color:var(--orange2);\n display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap;backdrop-filter:blur(8px);}\n.eta-badge svg{width:10px;height:10px;stroke:var(--orange2);}\n\n.mk{width:44px;height:48px;position:relative;cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));\n transform-origin:center bottom;transition:filter .18s ease;}\n.mk.is3d{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));}\n.mk-hex{width:44px;height:48px;position:relative;}\n.mk-hex-shape{position:absolute;inset:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);\n background:var(--surface2);border:2px solid var(--orange);}\n.mk-hex-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;}\n.mk-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;\n background:var(--orange);border:2px solid var(--bg);}\n\n\/* GPS puck: same hex silhouette as listing markers, scaled down, centered on the true fixed coordinate *\/\n.gps-puck{width:26px;height:28px;}\n.gps-puck .mk-hex{width:26px;height:28px;}\n.gps-shape{background:var(--orange);border:2px solid #fff;box-shadow:0 0 0 4px rgba(255,106,26,.3);}\n.gps-dot{width:6px;height:6px;border-radius:50%;background:#fff;}\n\n.track-badge{position:absolute;bottom:calc(190px + var(--safe-b));left:16px;right:16px;z-index:25;\n display:none;align-items:center;gap:8px;padding:11px 15px;border-radius:14px;\n background:rgba(15,15,16,.94);border:1px solid var(--orange);backdrop-filter:blur(16px);\n font-size:12.5px;font-weight:600;color:var(--orange2);}\n.track-badge.show{display:flex;}\n.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:pulse 1.6s infinite;}\n@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}\n\n.hex-res-badge{position:absolute;bottom:calc(190px + var(--safe-b));right:16px;z-index:25;\n padding:9px 13px;border-radius:12px;background:rgba(15,15,16,.92);border:1px solid var(--border);\n backdrop-filter:blur(16px);font-size:11.5px;font-weight:700;color:var(--orange2);display:none;}\n.hex-res-badge.show{display:block;}\n\n.eta-card{position:absolute;bottom:calc(150px + var(--safe-b));left:16px;right:16px;z-index:26;\n background:rgba(15,15,16,.96);border:1px solid var(--border);border-radius:16px;padding:14px 16px;\n backdrop-filter:blur(16px);display:none;align-items:center;gap:12px;}\n.eta-card.show{display:flex;}\n.eta-icon{width:38px;height:38px;border-radius:10px;background:var(--orange);flex-shrink:0;\n display:flex;align-items:center;justify-content:center;}\n.eta-icon svg{width:18px;height:18px;stroke:#1A0800;}\n.eta-info{flex:1;}\n.eta-info .eta-time{font-size:16px;font-weight:800;}\n.eta-info .eta-dist{font-size:11.5px;color:var(--text3);margin-top:1px;}\n.eta-close{width:28px;height:28px;border-radius:8px;background:var(--surface3);\n display:flex;align-items:center;justify-content:center;flex-shrink:0;}\n.eta-close svg{width:13px;height:13px;stroke:var(--text2);}\n\n\/* selected-cell pill \u2014 only appears when a hex cell is tapped *\/\n.hex-cell-pill{position:absolute;bottom:calc(88px + var(--safe-b));left:16px;right:16px;z-index:26;\n display:none;align-items:center;gap:12px;padding:12px 14px;background:rgba(15,15,16,.96);\n border:1px solid var(--orange-dim);border-radius:16px;backdrop-filter:blur(16px);\n box-shadow:0 8px 24px rgba(0,0,0,.4);}\n.hex-cell-pill.show{display:flex;}\n.hex-cell-pill .ic{width:38px;height:38px;border-radius:11px;background:var(--orange-dim);flex-shrink:0;\n display:flex;align-items:center;justify-content:center;}\n.hex-cell-pill .ic svg{width:18px;height:18px;stroke:var(--orange2);}\n.hex-cell-pill .info{flex:1;min-width:0;}\n.hex-cell-pill .nm{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--orange2);\n white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n.hex-cell-pill .sub{font-size:11.5px;color:var(--text2);margin-top:1px;}\n.hex-cell-pill .clear-btn{width:32px;height:32px;border-radius:10px;background:var(--surface3);\n display:flex;align-items:center;justify-content:center;flex-shrink:0;}\n.hex-cell-pill .clear-btn svg{width:14px;height:14px;stroke:var(--text2);}\n\n\/* vertical stem line every marker grows on top of *\/\n.mk-stem{width:2px;border-radius:1px;margin-top:1px;\n background:linear-gradient(180deg,var(--orange) 0%,var(--orange-dim) 70%,transparent 100%);\n transition:height .18s ease;}\n.mk-hex{transition:transform .18s ease;}\n\n\/* H3 Data Layer bottom sheet *\/\n.seg2{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px;}\n.seg2-btn{flex:1;padding:9px 0;border-radius:9px;font-size:13px;font-weight:700;color:var(--text2);text-align:center;}\n.seg2-btn.active{background:var(--orange);color:#1A0800;}\n.dlayer-grid{display:flex;flex-direction:column;gap:8px;}\n.dlayer-chip{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:13px;\n background:var(--surface);border:1.5px solid var(--border);text-align:left;width:100%;}\n.dlayer-chip.active{border-color:var(--orange);background:var(--orange-dim);}\n.dlayer-chip .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}\n.dlayer-chip .txt{flex:1;min-width:0;}\n.dlayer-chip .t{font-size:13.5px;font-weight:700;}\n.dlayer-chip .d{font-size:11px;color:var(--text2);margin-top:1px;}\n.reschip-row{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;}\n.reschip{padding:8px 13px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);\n font-size:12px;font-weight:700;color:var(--text2);}\n.reschip.active{border-color:var(--orange);color:var(--orange2);background:var(--orange-dim);}\n.hexlegend{font-size:11.5px;color:var(--text2);padding:10px 0 0;display:flex;align-items:center;gap:6px;}\n.hexlegend .sw{width:10px;height:10px;border-radius:3px;flex-shrink:0;}\n\n\/* ============ COMPACT PRODUCT SHEET ============ *\/\n.pdp-hero{position:relative;height:168px;border-radius:16px;overflow:hidden;margin-bottom:12px;\n background:radial-gradient(circle at 30% 20%,var(--surface3),var(--surface));\n border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}\n.pdp-hero-icon{font-size:66px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));}\n.pdp-hero-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;}\n.pdp-hero-bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 14px 12px;\n display:flex;justify-content:space-between;align-items:flex-end;gap:10px;\n background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 90%);}\n.pdp-title{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;}\n.pdp-price{font-size:20px;font-weight:800;color:var(--orange2);flex-shrink:0;white-space:nowrap;}\n.pdp-specs-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:12px;}\n.pdp-spec{flex-shrink:0;padding:8px 12px;border-radius:12px;background:var(--surface);\n border:1px solid var(--border);text-align:center;min-width:62px;}\n.pdp-spec b{display:block;font-size:12.5px;font-weight:800;font-family:'JetBrains Mono',monospace;}\n.pdp-spec span{font-size:9px;color:var(--text3);text-transform:uppercase;font-weight:700;letter-spacing:.03em;}\n.pdp-desc{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:2px;\n display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}\n\n\/* ============ BOTTOM NAV ============ *\/\n.tabbar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-around;\n padding:9px 6px calc(9px + var(--safe-b));background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;}\n.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px;\n font-size:9.5px;font-weight:700;color:var(--text3);position:relative;}\n.tab svg{width:20px;height:20px;stroke:currentColor;}\n.tab.active{color:var(--orange);}\n.tab .badge-dot{position:absolute;top:0;right:14%;width:8px;height:8px;border-radius:50%;\n background:var(--red);border:2px solid var(--bg);}\n.fab{width:52px;height:52px;border-radius:15px;background:linear-gradient(150deg,var(--orange),#B33D00);\n display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px var(--orange-glow);flex-shrink:0;}\n.fab svg{width:23px;height:23px;stroke:#1A0800;stroke-width:2.6;}\n\n\/* ============ SHEETS ============ *\/\n.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:40;opacity:0;pointer-events:none;\n transition:.25s;backdrop-filter:blur(3px);}\n.overlay.show{opacity:1;pointer-events:auto;}\n.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--bg);\n border-radius:22px 22px 0 0;border:1px solid var(--border);border-bottom:none;\n transform:translateY(105%);transition:transform .3s cubic-bezier(.32,.72,0,1);\n max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}\n.sheet.show{transform:translateY(0);}\n\/* Listing detail is locked to exactly 50vh so the map stays visible in the upper half *\/\n#sheetListing{max-height:50vh;height:50vh;}\n.sheet-handle{width:38px;height:4px;background:var(--border);border-radius:3px;margin:11px auto 4px;flex-shrink:0;}\n.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 16px;\n border-bottom:1px solid var(--border);flex-shrink:0;}\n.sheet-head-l{display:flex;align-items:center;gap:9px;}\n.sheet-head-l svg{width:17px;height:17px;stroke:var(--text2);}\n.sheet-head h3{font-size:16px;font-weight:700;}\n.sheet-step{font-size:12.5px;color:var(--text3);font-family:'JetBrains Mono',monospace;font-weight:600;}\n.sheet-x{width:32px;height:32px;border-radius:10px;background:var(--surface2);\n display:flex;align-items:center;justify-content:center;}\n.sheet-x svg{width:15px;height:15px;stroke:var(--text2);}\n.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px;padding-bottom:calc(20px + var(--safe-b));}\n\n\/* ============ SELL FLOW STEPPER ============ *\/\n.stepper{display:flex;align-items:flex-start;padding:6px 6px 22px;}\n.step-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;}\n.step-circle{width:44px;height:44px;border-radius:50%;background:var(--surface2);border:1.5px solid var(--border);\n display:flex;align-items:center;justify-content:center;}\n.step-circle svg{width:18px;height:18px;stroke:var(--text3);}\n.step-circle.done{background:var(--orange);border-color:var(--orange);}\n.step-circle.done svg{stroke:#1A0800;}\n.step-circle.current{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow);}\n.step-circle.current svg{stroke:var(--orange);}\n.step-lbl2{font-size:10.5px;font-weight:700;color:var(--text3);white-space:nowrap;}\n.step-lbl2.done{color:var(--orange2);}\n.step-lbl2.current{color:var(--orange2);}\n.step-line{flex:1;height:2px;background:var(--border);margin:22px 4px 0;min-width:14px;}\n.step-line.done{background:var(--orange);}\n\n.stype-row{display:flex;flex-direction:column;gap:12px;}\n.stype-card{display:flex;align-items:center;justify-content:space-between;padding:18px;\n background:var(--surface);border:1.5px solid var(--border);border-radius:16px;}\n.stype-card.active{border-color:var(--orange);background:var(--orange-dim);}\n.stype-card .l{text-align:left;}\n.stype-card .t{font-size:15.5px;font-weight:700;margin-bottom:3px;}\n.stype-card .d{font-size:12.5px;color:var(--text2);}\n.stype-radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--text3);flex-shrink:0;}\n.stype-card.active .stype-radio{border-color:var(--orange);background:var(--orange);position:relative;}\n\n.photo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}\n.photo-slot{aspect-ratio:1;border-radius:14px;border:1.5px dashed var(--border);background:var(--surface);\n display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}\n.photo-slot.cover{border-color:var(--orange-dim);border-style:dashed;}\n.photo-slot svg{width:20px;height:20px;stroke:var(--text3);}\n.photo-slot .lbl{font-size:11.5px;font-weight:600;color:var(--text3);}\n.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}\n.photo-note{margin-top:16px;padding:13px 15px;background:var(--surface);border:1px solid var(--border);\n border-radius:13px;font-size:12.5px;color:var(--text2);line-height:1.45;}\n\n.field{margin-bottom:16px;}\n.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}\n.field input,.field textarea{width:100%;padding:13px 14px;background:var(--surface);\n border:1.5px solid var(--border);border-radius:13px;font-size:14.5px;color:var(--text);}\n.field input:focus,.field textarea:focus{border-color:var(--orange);}\n.price-field{position:relative;}\n.price-field span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3);font-weight:700;}\n.price-field input{padding-left:26px;font-weight:700;}\n\n.btn{height:52px;border-radius:16px;font-weight:800;font-size:15px;\n display:flex;align-items:center;justify-content:center;gap:8px;}\n.btn-primary{background:var(--orange);color:#1A0800;}\n.btn-primary:active{background:var(--orange2);}\n.btn-secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text);}\n.action-row{display:flex;gap:10px;margin-top:20px;}\n.action-row .btn{flex:1;}\n\n.ptr-display{margin:18px 0;padding:16px;border-radius:16px;background:var(--surface);\n border:1px solid var(--border);}\n.ptr-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px;}\n.ptr-row .k{color:var(--text2);}\n.ptr-row .v{font-weight:800;color:var(--orange2);font-family:'JetBrains Mono',monospace;}\n\n\/* ============ CHAT ============ *\/\n.chat-item{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--border);}\n.chat-av{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:linear-gradient(150deg,var(--orange),#B33D00);\n display:flex;align-items:center;justify-content:center;font-weight:700;color:#1A0800;position:relative;}\n.chat-av .presence{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;\n background:var(--green);border:2px solid var(--bg);}\n.chat-info{flex:1;min-width:0;}\n.chat-name{font-weight:700;font-size:14.5px;margin-bottom:2px;display:flex;align-items:center;gap:6px;}\n.chat-tag{font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:5px;background:var(--surface3);color:var(--text2);}\n.chat-last{font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n.chat-time{font-size:11px;color:var(--text3);flex-shrink:0;}\n.chat-unread{width:9px;height:9px;border-radius:50%;background:var(--orange);flex-shrink:0;}\n\n.msgs{display:flex;flex-direction:column;gap:9px;padding:4px 0 12px;}\n.msg{max-width:78%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.4;}\n.msg.me{align-self:flex-end;background:var(--orange);color:#1A0800;border-radius:16px 4px 16px 16px;font-weight:500;}\n.msg.them{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:4px 16px 16px 16px;}\n.chat-input-bar{display:flex;gap:9px;align-items:center;padding-top:12px;border-top:1px solid var(--border);flex-shrink:0;}\n.chat-input-bar input{flex:1;height:44px;padding:0 16px;background:var(--surface);\n border:1.5px solid var(--border);border-radius:22px;font-size:14px;color:var(--text);}\n.round-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}\n.round-btn.send{background:var(--orange);}\n.round-btn.send svg{width:18px;height:18px;stroke:#1A0800;}\n.round-btn.call{background:var(--green);}\n.round-btn.call svg{width:17px;height:17px;stroke:#04231A;}\n.attach-row{display:flex;gap:8px;padding:12px 0 2px;}\n.attach-btn{flex:1;padding:10px;border-radius:11px;background:var(--surface);border:1px solid var(--border);\n font-size:11.5px;font-weight:700;color:var(--text2);display:flex;align-items:center;justify-content:center;gap:5px;}\n.attach-btn svg{width:14px;height:14px;stroke:currentColor;}\n\n\/* ============ CALL ============ *\/\n.call-view{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;flex-direction:column;}\n.call-view.show{display:flex;}\n.call-status-bar{padding:calc(16px + var(--safe-t)) 20px 0;text-align:center;}\n.call-status-bar .name{font-size:18px;font-weight:700;}\n.call-status-bar .status{font-size:13px;color:var(--text3);margin-top:4px;}\n.call-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;}\n.call-avatar-big{width:110px;height:110px;border-radius:50%;background:linear-gradient(150deg,var(--orange),#B33D00);\n display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:#1A0800;}\n.self-preview{position:absolute;top:calc(20px + var(--safe-t));right:20px;width:100px;height:135px;\n border-radius:16px;overflow:hidden;border:2px solid var(--orange);background:#000;}\n.self-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}\n.call-timer{position:absolute;top:calc(20px + var(--safe-t));left:20px;padding:8px 14px;border-radius:12px;\n background:rgba(15,15,16,.85);font-size:13px;font-weight:700;}\n.call-controls{display:flex;justify-content:center;gap:16px;padding:20px 0 calc(36px + var(--safe-b));}\n.call-btn{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;}\n.call-btn svg{width:23px;height:23px;}\n.call-btn.off{background:var(--surface2);border:1px solid var(--border);}\n.call-btn.off svg{stroke:var(--text2);}\n.call-btn.muted{background:var(--surface3);}\n.call-btn.muted svg{stroke:var(--red);}\n.call-btn.end{background:var(--red);}\n.call-btn.end svg{stroke:#fff;}\n\n\/* ============ PROFILE ============ *\/\n.profile-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0 4px;}\n.profile-av{width:88px;height:88px;border-radius:50%;background:linear-gradient(150deg,var(--orange),#B33D00);\n display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#1A0800;margin-bottom:14px;}\n.profile-name{font-size:20px;font-weight:800;display:flex;align-items:center;gap:7px;justify-content:center;}\n.profile-name svg{width:16px;height:16px;stroke:var(--orange2);}\n.profile-role{font-size:13px;color:var(--orange2);font-weight:600;margin-top:4px;}\n.stat-row{display:flex;gap:10px;margin:20px 0;}\n.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:15px;text-align:center;}\n.stat b{display:block;font-size:19px;font-weight:800;color:var(--orange2);}\n.stat span{font-size:9.5px;color:var(--text3);text-transform:uppercase;font-weight:700;}\n.list-row{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--border);}\n.list-row-img{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;}\n.list-row-info{flex:1;min-width:0;}\n.list-row-info .t{font-weight:600;font-size:13px;}\n.list-row-info .p{font-size:11px;color:var(--text3);}\n.list-row-price{font-weight:700;color:var(--orange2);}\n.toggle-item{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;border-bottom:1px solid var(--border);}\n.toggle-item .lbl{font-weight:600;font-size:14px;}\n.toggle-item .desc{font-size:11.5px;color:var(--text3);margin-top:2px;}\n.big-toggle{width:46px;height:27px;border-radius:14px;background:var(--surface3);border:1px solid var(--border);position:relative;flex-shrink:0;}\n.big-toggle::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--text2);transition:.2s;}\n.big-toggle.on{background:var(--green);border-color:var(--green);}\n.big-toggle.on::after{left:21px;background:#04231A;}\n\n\/* ============ ADMIN \/ ORCHESTRATOR ============ *\/\n.admin-hero{display:flex;align-items:flex-start;gap:14px;padding:18px 0;}\n.admin-icon{width:44px;height:44px;border-radius:13px;background:var(--surface2);border:1px solid var(--border);\n display:flex;align-items:center;justify-content:center;flex-shrink:0;}\n.admin-icon svg{width:20px;height:20px;stroke:var(--orange2);}\n.admin-hero h2{font-size:19px;font-weight:800;margin-bottom:3px;}\n.admin-hero .sub{font-size:12.5px;color:var(--text2);}\n.status-pill2{margin-left:auto;display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:14px;\n background:rgba(255,201,64,.1);border:1px solid rgba(255,201,64,.3);font-size:11.5px;font-weight:700;color:var(--yellow);\n flex-shrink:0;font-family:'JetBrains Mono',monospace;}\n.status-pill2.live{background:rgba(52,199,89,.1);border-color:rgba(52,199,89,.3);color:var(--green);}\n.status-pill2 .dt{width:6px;height:6px;border-radius:50%;background:currentColor;}\n.orch-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:18px;}\n.orch-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13.5px;}\n.orch-row .k{display:flex;align-items:center;gap:8px;color:var(--text2);}\n.orch-row .k svg{width:15px;height:15px;stroke:var(--text3);}\n.orch-row .v{color:var(--orange2);font-weight:700;font-family:'JetBrains Mono',monospace;font-size:12.5px;}\n.admin-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:18px;-webkit-overflow-scrolling:touch;}\n.admin-tab{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:11px 15px;border-radius:13px;\n background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text2);}\n.admin-tab.active{background:var(--orange-dim);border-color:var(--orange);color:var(--orange2);}\n.admin-tab svg{width:15px;height:15px;stroke:currentColor;}\n.contact-row{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--border);}\n.contact-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}\n.contact-dot.live{background:var(--green);box-shadow:0 0 6px var(--green);}\n.contact-dot.idle{background:var(--yellow);}\n.contact-info{flex:1;min-width:0;}\n.contact-name{font-weight:700;font-size:14px;margin-bottom:3px;}\n.contact-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;}\n.contact-tier{font-weight:800;letter-spacing:.02em;}\n.contact-tier.pro{color:var(--yellow);}\n.contact-tier.plus{color:var(--orange2);}\n.contact-tier.free{color:var(--text3);}\n.contact-tier.enterprise{color:var(--purple);}\n.contact-cell{color:var(--text3);font-family:'JetBrains Mono',monospace;}\n.contact-right{text-align:right;flex-shrink:0;}\n.contact-cat{font-size:11.5px;color:var(--text2);font-weight:600;margin-bottom:3px;}\n.contact-time{font-size:10.5px;color:var(--text3);}\n\n\/* ============ TOAST ============ *\/\n.toast{position:fixed;left:50%;bottom:calc(110px + var(--safe-b));transform:translate(-50%,16px);z-index:70;\n background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:12px 18px;border-radius:14px;\n font-size:13px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;}\n.toast.show{opacity:1;transform:translate(-50%,0);}\n\n@media (max-width:370px){.cat-grid3{grid-template-columns:1fr 1fr;}.h3grid{grid-template-columns:1fr 1fr;}.twin-grid{grid-template-columns:1fr;}}\n<\/style>\n<\/head>\n<body>\n<div class=\"grid-bg\"><\/div>\n\n<!-- ============ ONBOARDING ============ -->\n<div id=\"onboarding\">\n <div class=\"ob-head\">\n <div class=\"ob-back\" id=\"obBack\" style=\"visibility:hidden;\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Back\n <\/div>\n <div class=\"ob-brand\"><div class=\"ring\"><\/div><span>Hex<\/span><span>Market<\/span><\/div>\n <div class=\"ob-skip\" id=\"obSkip\">Skip<\/div>\n <\/div>\n <div class=\"ob-progress\"><div class=\"ob-progress-fill\" id=\"obProgFill\" style=\"width:14%;\"><\/div><\/div>\n <div class=\"ob-meta\"><span class=\"step-lbl\" id=\"obStepLbl\">Step 1 of 7<\/span><span class=\"pct\" id=\"obPct\">14%<\/span><\/div>\n <div class=\"ob-dots\" id=\"obDots\"><\/div>\n <div class=\"ob-body\" id=\"obBody\"><\/div>\n <div class=\"ob-footer\"><button class=\"ob-cta\" id=\"obCta\">Continue <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/button><\/div>\n<\/div>\n\n<!-- ============ HEADER ============ -->\n<header>\n <div class=\"brand\"><div class=\"ring\"><\/div><span>Hex<\/span><span>Market<\/span><\/div>\n <button class=\"portal-pill\" id=\"portalBtn\"><div class=\"portal-dot\"><\/div>portal<\/button>\n<\/header>\n\n<!-- ============ H3 CELL BAR (discover only) ============ -->\n<div class=\"cellbar\" id=\"cellBar\">\n <div class=\"cellbar-left\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n <div><div class=\"lbl\">H3 Cell<\/div><div class=\"val\" id=\"cellIdVal\">8928308e83bffff<\/div><\/div>\n <\/div>\n <div class=\"cellbar-right\">\n <button class=\"pill-btn\" id=\"cellMapBtn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 3 3 6v15l6-3 6 3 6-3V3l-6 3-6-3Z\"\/><\/svg>Map<\/button>\n <button class=\"pill-btn\" id=\"cellSortBtn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"\/><line x1=\"4\" y1=\"12\" x2=\"14\" y2=\"12\"\/><line x1=\"4\" y1=\"18\" x2=\"10\" y2=\"18\"\/><\/svg>Sort<\/button>\n <\/div>\n<\/div>\n\n<div class=\"search-bar\" id=\"searchBar\">\n <label class=\"search-field\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search within your hex cell...\">\n <\/label>\n<\/div>\n\n<div class=\"intent-row\" id=\"intentRow\">\n <div class=\"intent-chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z\"\/><circle cx=\"7\" cy=\"7\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>Intent-driven search<\/div>\n<\/div>\n\n<div class=\"chips\" id=\"chipRow\"><\/div>\n\n<!-- ============ CONTENT ============ -->\n<div class=\"content\">\n\n <div class=\"view active\" id=\"view-discover\">\n <div class=\"scroll\">\n <div class=\"sec-title\">Categories<\/div>\n <div class=\"cat-grid3\" id=\"discoverCatGrid\"><\/div>\n <div class=\"sec-title\" style=\"margin-top:22px;\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"\/><\/svg>\n Trending in your cell\n <\/div>\n <div id=\"discoverFeed\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"view\" id=\"view-explore\">\n <div class=\"scroll\">\n <div class=\"h3panel\">\n <div class=\"h3panel-head\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 20 7 20 17 12 22 4 17 4 7\"\/><\/svg>\n Busiest cells right now\n <\/div>\n <p style=\"font-size:12px;color:var(--text2);margin:-8px 0 12px;\">Real H3 cells ranked by live listing density. Tap to filter.<\/p>\n <div class=\"h3grid\" id=\"h3CellGrid\"><\/div>\n <\/div>\n <div class=\"sec-title\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n Open right now\n <\/div>\n <div class=\"twin-grid\" id=\"openNowGrid\"><\/div>\n <div class=\"sec-title\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2 3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n Top viral this week\n <\/div>\n <div id=\"viralFeed\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"view\" id=\"view-list\">\n <div class=\"scroll\">\n <div class=\"sec-title\" style=\"margin-top:6px;\">What are you listing?<\/div>\n <div class=\"stype-row\" id=\"stypeRow\"><\/div>\n <button class=\"btn btn-primary\" id=\"stypeGoBtn\" style=\"width:100%;margin-top:20px;\">Continue<\/button>\n <\/div>\n <\/div>\n\n <div class=\"view\" id=\"view-map\">\n <div id=\"map\"><\/div>\n <div class=\"map-toprow\">\n <div class=\"map-catbar\" id=\"mapCatBar\"><\/div>\n <button class=\"profile-fab\" id=\"mapProfileBtn\">\ud83d\udd25<div class=\"lv-dot\"><\/div><\/button>\n <\/div>\n <div class=\"icon-rail\" id=\"iconRail\"><\/div>\n <div class=\"track-badge\" id=\"trackBadge\"><div class=\"pulse-dot\"><\/div><span id=\"trackBadgeText\">Tracking \u00b7 Kalman smoothed<\/span><\/div>\n <div class=\"hex-res-badge\" id=\"hexResBadge\">Res 7 \u00b7 District<\/div>\n <div class=\"eta-card\" id=\"etaCard\">\n <div class=\"eta-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><\/div>\n <div class=\"eta-info\"><div class=\"eta-time\" id=\"etaTime\">\u2014 min<\/div><div class=\"eta-dist\" id=\"etaDist\">\u2014 km away<\/div><\/div>\n <button class=\"eta-close\" id=\"etaClose\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button>\n <\/div>\n <div class=\"hex-cell-pill\" id=\"hexCellPill\">\n <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 20 7 20 17 12 22 4 17 4 7\"\/><\/svg><\/div>\n <div class=\"info\">\n <div class=\"nm\" id=\"pillCellId\">\u2014<\/div>\n <div class=\"sub\" id=\"pillCellSub\">0 listings in this cell<\/div>\n <\/div>\n <button class=\"clear-btn\" id=\"pillClearBtn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button>\n <\/div>\n <\/div>\n\n <div class=\"view\" id=\"view-admin\">\n <div class=\"scroll\">\n <div class=\"admin-hero\">\n <div class=\"admin-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\n <div style=\"flex:1;\"><h2>Admin Orchestrator<\/h2><div class=\"sub\">Read-only \u00b7 Stateless \u00b7 Versioned<\/div><\/div>\n <\/div>\n <div class=\"status-pill2\" id=\"orchStatus\" style=\"margin:-8px 0 16px;\"><div class=\"dt\"><\/div>connecting...<\/div>\n <div class=\"orch-card\">\n <div class=\"orch-row\"><div class=\"k\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m2 12 5-2 3.5 7L15 4l5 8-5 2-3.5-7L7 14z\"\/><\/svg>Fixed Orchestrator ID<\/div><div class=\"v\">adx04081987pf<\/div><\/div>\n <div class=\"orch-row\"><div class=\"k\">All users dial this ID<\/div><div class=\"v\" style=\"color:var(--text2);\">for signaling<\/div><\/div>\n <div class=\"orch-row\"><div class=\"k\">Media<\/div><div class=\"v\" style=\"color:var(--text2);\">P2P after negotiate<\/div><\/div>\n <\/div>\n <div class=\"admin-tabs\" id=\"adminTabs\"><\/div>\n <div id=\"adminBody\"><\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<!-- ============ BOTTOM NAV ============ -->\n<nav class=\"tabbar\">\n <button class=\"tab active\" data-tab=\"discover\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n Discover\n <\/button>\n <button class=\"tab\" data-tab=\"explore\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"\/><\/svg>\n Explore\n <\/button>\n <button class=\"fab\" id=\"listFab\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/button>\n <button class=\"tab\" data-tab=\"map\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 3 3 6v15l6-3 6 3 6-3V3l-6 3-6-3Z\"\/><path d=\"M9 3v15M15 6v15\"\/><\/svg>\n Map\n <\/button>\n <button class=\"tab\" data-tab=\"admin\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n Admin\n <\/button>\n<\/nav>\n\n<div class=\"overlay\" id=\"overlay\"><\/div>\n\n<!-- LISTING DETAIL -->\n<div class=\"sheet\" id=\"sheetListing\">\n <div class=\"sheet-handle\"><\/div>\n <div class=\"sheet-head\"><h3>Listing<\/h3><button class=\"sheet-x\" data-close><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button><\/div>\n <div class=\"sheet-body\" id=\"listingBody\"><\/div>\n<\/div>\n\n<!-- SELL FLOW (steps 2-5, step 1 lives in the List tab view) -->\n<div class=\"sheet\" id=\"sheetSell\" style=\"max-height:94vh;\">\n <div class=\"sheet-handle\"><\/div>\n <div class=\"sheet-head\">\n <div class=\"sheet-head-l\" id=\"sellCancel\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg><span>Cancel<\/span><\/div>\n <span class=\"sheet-step\" id=\"sellStepLbl\">Step 2 of 5<\/span>\n <\/div>\n <div class=\"sheet-body\">\n <div class=\"stepper\" id=\"stepperRow\"><\/div>\n\n <div id=\"sellStepPhotos\">\n <h3 style=\"font-size:18px;font-weight:800;margin-bottom:6px;\">Add photos<\/h3>\n <p style=\"font-size:13px;color:var(--text2);margin-bottom:18px;\">Up to 6 photos. First photo is the cover.<\/p>\n <div class=\"photo-grid\" id=\"photoGrid\"><\/div>\n <div class=\"photo-note\">Photos are stored client-side and shared P2P. No server upload required.<\/div>\n <\/div>\n\n <div id=\"sellStepCategory\" style=\"display:none;\">\n <h3 style=\"font-size:18px;font-weight:800;margin-bottom:6px;\">Pick a category<\/h3>\n <p style=\"font-size:13px;color:var(--text2);margin-bottom:18px;\">Tap a category, then a subcategory<\/p>\n <div class=\"cat-grid3\" id=\"sellCatGrid\"><\/div>\n <div class=\"sec-title\">Subcategory<\/div>\n <div class=\"chips\" style=\"padding:0;\" id=\"subcatRow\"><\/div>\n <\/div>\n\n <div id=\"sellStepDetails\" style=\"display:none;\">\n <div class=\"field\"><label>Title<\/label><input type=\"text\" id=\"title\" placeholder=\"What's the drop?\"><\/div>\n <div class=\"field\"><label>Price<\/label><div class=\"price-field\"><span>\u20ac<\/span><input type=\"number\" id=\"price\" placeholder=\"0\"><\/div><\/div>\n <div class=\"field\"><label>Description<\/label><textarea id=\"desc\" placeholder=\"A quick word about it...\" style=\"min-height:80px;resize:vertical;\"><\/textarea><\/div>\n <div class=\"sec-title\">Options<\/div>\n <div class=\"opt-list\" id=\"optGrid\" style=\"display:flex;flex-direction:column;gap:8px;\"><\/div>\n <div class=\"ptr-display\">\n <div class=\"ptr-row\"><span class=\"k\">Bitlogic pointer<\/span><span class=\"v\" id=\"sellVal\">0<\/span><\/div>\n <div class=\"ptr-row\"><span class=\"k\">Binary<\/span><span class=\"v mono\" id=\"sellBin\" style=\"font-size:11px;\">0b0000000000<\/span><\/div>\n <\/div>\n <\/div>\n\n <div id=\"sellStepReview\" style=\"display:none;\">\n <h3 style=\"font-size:18px;font-weight:800;margin-bottom:16px;\">Review<\/h3>\n <div id=\"prevCard\"><\/div>\n <\/div>\n\n <div class=\"action-row\">\n <button class=\"btn btn-secondary\" id=\"sellBack\" style=\"flex:0 0 90px;\">Back<\/button>\n <button class=\"btn btn-primary\" id=\"sellNext\">Continue<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- FILTERS -->\n<div class=\"sheet\" id=\"sheetFilter\">\n <div class=\"sheet-handle\"><\/div>\n <div class=\"sheet-head\"><h3>Filters<\/h3><button class=\"sheet-x\" data-close><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button><\/div>\n <div class=\"sheet-body\">\n <div class=\"sec-title\" style=\"margin-top:0;\">Looking for<\/div>\n <div class=\"cat-grid3\" id=\"filterGrid\"><\/div>\n <div class=\"sec-title\">Radius<\/div>\n <input type=\"range\" min=\"1\" max=\"10\" value=\"5\" style=\"width:100%;accent-color:var(--orange);\" id=\"radiusSlider\">\n <div style=\"display:flex;justify-content:space-between;font-size:11px;color:var(--text3);\">\n <span>Close<\/span><span class=\"mono\" id=\"radiusLabel\">5 km<\/span><span>Wide<\/span>\n <\/div>\n <div class=\"ptr-display\">\n <div class=\"ptr-row\"><span class=\"k\">Buyer intent<\/span><span class=\"v\" id=\"filterVal\">0<\/span><\/div>\n <div class=\"ptr-row\"><span class=\"k\">Binary<\/span><span class=\"v mono\" id=\"filterBin\" style=\"font-size:11px;\">0b0000000000<\/span><\/div>\n <\/div>\n <button class=\"btn btn-primary\" id=\"applyF\" style=\"width:100%;margin-top:8px;\">Apply filters<\/button>\n <\/div>\n<\/div>\n\n<!-- WHATSAPP CONTACT CARD (deep-link out, no in-app chat engine) -->\n<div class=\"sheet\" id=\"sheetChat\">\n <div class=\"sheet-handle\"><\/div>\n <div class=\"sheet-head\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div class=\"chat-av\" id=\"cAv\">A<\/div>\n <div><div style=\"font-weight:700;font-size:14.5px;\" id=\"cName\">\u2014<\/div><div class=\"verified-tag\" id=\"cVer\" style=\"display:none;font-size:11.5px;color:var(--green);font-weight:700;margin-top:2px;\">\u2713 Verified<\/div><\/div>\n <\/div>\n <button class=\"sheet-x\" data-close><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button>\n <\/div>\n <div class=\"sheet-body\">\n <p style=\"font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:16px;\">Messaging goes straight to WhatsApp \u2014 no in-app inbox, no stored chat history. Edit the message if you'd like, then open the chat.<\/p>\n <div class=\"field\"><label>Message<\/label><textarea id=\"waMsgIn\" style=\"min-height:90px;resize:vertical;\"><\/textarea><\/div>\n <button class=\"btn btn-primary\" id=\"waOpenBtn\" style=\"width:100%;background:#25D366;color:#04231A;\">\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\"><path d=\"M17.6 6.32A8.86 8.86 0 0 0 12.05 4C7.1 4 3.05 8.05 3.05 13c0 1.6.42 3.14 1.2 4.5L3 22l4.62-1.2a9 9 0 0 0 4.43 1.13h.01c4.95 0 9-4.05 9-9 0-2.4-.93-4.66-2.46-6.61ZM12.06 20.2a7.5 7.5 0 0 1-3.82-1.05l-.27-.16-2.85.74.76-2.78-.18-.28a7.47 7.47 0 0 1-1.15-4.03c0-4.14 3.37-7.5 7.51-7.5a7.47 7.47 0 0 1 5.31 2.2 7.44 7.44 0 0 1 2.2 5.3c0 4.14-3.37 7.56-7.51 7.56Zm4.12-5.63c-.22-.11-1.32-.65-1.53-.73-.2-.08-.35-.11-.5.11-.15.22-.58.73-.71.88-.13.15-.26.16-.48.05-.22-.11-.94-.35-1.79-1.11-.66-.59-1.11-1.32-1.24-1.54-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.15-.22.22-.37.07-.15.04-.28-.02-.39-.06-.11-.5-1.21-.69-1.66-.18-.43-.37-.38-.5-.38h-.43c-.15 0-.39.06-.59.28-.2.22-.78.76-.78 1.86s.8 2.16.91 2.31c.11.15 1.57 2.4 3.8 3.36.53.23.94.36 1.27.47.53.17 1.02.14 1.4.09.43-.06 1.32-.54 1.5-1.06.19-.52.19-.96.13-1.06-.06-.09-.2-.15-.42-.26Z\"\/><\/svg>\n Open in WhatsApp\n <\/button>\n <\/div>\n<\/div>\n\n<!-- H3 DATA LAYER -->\n<div class=\"sheet\" id=\"sheetHexLayer\">\n <div class=\"sheet-handle\"><\/div>\n <div class=\"sheet-head\">\n <div class=\"sheet-head-l\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 20 7 20 17 12 22 4 17 4 7\"\/><\/svg><h3>H3 Data Layer<\/h3><\/div>\n <button class=\"sheet-x\" data-close><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button>\n <\/div>\n <div class=\"sheet-body\">\n <div class=\"toggle-item\">\n <div><div class=\"lbl\">H3 Grid<\/div><div class=\"desc\">Show hexagonal data layer on map<\/div><\/div>\n <div class=\"big-toggle on\" id=\"hexGridToggle\"><\/div>\n <\/div>\n <div class=\"sec-title\" style=\"margin-top:16px;\">Resolution mode<\/div>\n <div class=\"seg2\" id=\"resModeSeg\">\n <button class=\"seg2-btn active\" data-mode=\"auto\">Auto<\/button>\n <button class=\"seg2-btn\" data-mode=\"lock\">Lock<\/button>\n <\/div>\n <p style=\"font-size:11.5px;color:var(--text2);margin-top:8px;\">Auto follows zoom \u00b7 Lock pins a resolution<\/p>\n <div id=\"resLockBlock\" style=\"display:none;margin-top:14px;\">\n <div style=\"display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:8px;\">\n <span>Resolution<\/span><span class=\"mono\" id=\"resLockVal\" style=\"color:var(--orange2);\">8<\/span>\n <\/div>\n <input type=\"range\" min=\"3\" max=\"12\" value=\"8\" id=\"resSlider\" style=\"width:100%;accent-color:var(--orange);\">\n <div style=\"display:flex;justify-content:space-between;font-size:10.5px;color:var(--text3);margin-top:2px;\">\n <span>Macro (3)<\/span><span>Micro (12)<\/span>\n <\/div>\n <div class=\"reschip-row\" id=\"resPresetRow\"><\/div>\n <\/div>\n <div class=\"sec-title\">Data layers<\/div>\n <div class=\"dlayer-grid\" id=\"dlayerGrid\"><\/div>\n <div class=\"hexlegend\" id=\"hexLegend\"><\/div>\n <div class=\"toggle-item\" style=\"margin-top:12px;\">\n <div><div class=\"lbl\">Current cell<\/div><div class=\"desc mono\" id=\"curCellId\">\u2014<\/div><\/div>\n <button class=\"pill-btn\" id=\"viewCellBtn\">View<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- PROFILE -->\n<div class=\"sheet\" id=\"sheetProfile\">\n <div class=\"sheet-handle\"><\/div>\n <div class=\"sheet-head\"><h3>Profile<\/h3><button class=\"sheet-x\" data-close><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button><\/div>\n <div class=\"sheet-body\" id=\"profileBody\"><\/div>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n(function(){\n'use strict';\n\n\/* ===================== BITLOGIC ===================== *\/\nconst FLAGS = {\n SELLER_FASHION:1, SELLER_FOOD:2, SELLER_TECH:4, SELLER_SERVICE:8,\n DELIVERY:16, NEGOTIABLE:32, VERIFIED:64, URGENT:128, PREMIUM:256, FEATURED:512\n};\nconst CATS = [\n {k:'SELLER_FASHION',l:'Fashion',i:'\ud83d\udc57'},\n {k:'SELLER_FOOD',l:'Food',i:'\ud83c\udf54'},\n {k:'SELLER_TECH',l:'Tech',i:'\ud83d\udcbb'},\n {k:'SELLER_SERVICE',l:'Services',i:'\ud83d\udee0\ufe0f'},\n {k:'HEALTH',l:'Health',i:'\ud83d\udc8a'},\n {k:'HOME',l:'Home',i:'\ud83c\udfe0'},\n {k:'BEAUTY',l:'Beauty',i:'\ud83d\udc85'},\n {k:'AUTO',l:'Auto',i:'\ud83d\ude97'},\n {k:'EVENTS',l:'Events',i:'\ud83c\udf89'}\n];\nconst SELL_CATS = CATS.slice(0,4); \/\/ categories that map to real bitlogic seller flags\nconst OPTS = [\n {k:'DELIVERY',l:'Delivery',i:'\ud83d\udef5'},\n {k:'NEGOTIABLE',l:'Negotiable',i:'\ud83e\udd1d'},\n {k:'URGENT',l:'Urgent',i:'\u26a1'},\n {k:'PREMIUM',l:'Premium',i:'\ud83d\udc8e'}\n];\nconst EXPLORE_RES=7; \/\/ fixed district-level resolution used by the Explore \"busiest cells\" panel\nfunction toBin(n){return '0b'+n.toString(2).padStart(10,'0');}\nfunction buyerEncode(bits){return bits<<3;}\nfunction hasMatch(sellerF,buyerF){return (sellerF & (buyerF>>>3))!==0;}\nfunction catOf(f){return SELL_CATS.find(c=>f & FLAGS[c.k]);}\nfunction catIcon(f){const c=catOf(f);return c?c.i:'\u2b21';}\n\n\/* ===================== STORAGE ===================== *\/\nconst DB = {\n get(k,fb){try{const v=localStorage.getItem('hexmkt_'+k);return v?JSON.parse(v):fb;}catch(e){return fb;}},\n set(k,v){try{localStorage.setItem('hexmkt_'+k,JSON.stringify(v));}catch(e){}}\n};\n\nclass Kalman{\n constructor(q,r){this.q=q||0.01;this.r=r||1;this.x=0;this.p=1;this.init=false;}\n update(z){\n if(!this.init){this.x=z;this.init=true;return z;}\n this.p+=this.q;\n const k=this.p\/(this.p+this.r);\n this.x+=k*(z-this.x);\n this.p*=(1-k);\n return this.x;\n }\n}\n\nlet state = {\n center:{lat:30.2672,lng:-97.7431},\n listings: DB.get('listings',null),\n chats: DB.get('chats',null),\n profile: DB.get('profile',{name:'Koko',role:'MEMBER',verified:true,sales:18,rating:4.9,hypes:215,activeSpots:5,privateChats:3}),\n activeTab:'discover', catFilter:null, sellFlags:0, filterFlags:0, radius:5,\n currentListing:null, currentChat:null, listingTypeChoice:null, sellCatChoice:null, sellSubcat:null,\n map:null, markers:[], tracking:false, watchId:null, kalmanLat:null, kalmanLng:null,\n callInterval:null, callSeconds:0, localStream:null,\n hexGridOn:false, currentHexRes:7, tilted:false, pitchListenerAttached:false,\n routeTargetId:null, adminTab:'crm', sellStepIdx:0, gpsPuck:null,\n hexResMode:'auto', hexResLock:8, hexDataLayer:'supply', selectedCell:null, cellFilter:null, cellFilterRes:EXPLORE_RES\n};\n\nfunction esc(s){return (s||'').replace(\/[&<>\"]\/g,m=>({'&':'&','<':'<','>':'>','\"':'"'}[m]));}\nfunction distKm(a,b){const R=6371,dLat=(b.lat-a.lat)*Math.PI\/180,dLng=(b.lng-a.lng)*Math.PI\/180;\n const x=Math.sin(dLat\/2)**2+Math.cos(a.lat*Math.PI\/180)*Math.cos(b.lat*Math.PI\/180)*Math.sin(dLng\/2)**2;\n return R*2*Math.atan2(Math.sqrt(x),Math.sqrt(1-x));}\nfunction showToast(msg){\n const t=document.getElementById('toast');\n t.textContent=msg; t.classList.add('show');\n clearTimeout(t._h); t._h=setTimeout(()=>t.classList.remove('show'),2200);\n}\nfunction ic(svg){return svg;}\n\n\/* ===================== SEED DATA ===================== *\/\nconst sellerNames=['Pixel Hardware Lab','ZenAuto Detailing','24\/7 MedStop Pharmacy','Lush Garden Co-op','Neon Noodle Bar','Basement Beats Venue','Underground Sneaker Vault','Glow Barbershop'];\nconst TITLES = {\n SELLER_FASHION:['Underground Sneaker Vault','Glow Barbershop','Vintage denim jacket'],\n SELLER_FOOD:['Neon Noodle Bar','24\/7 MedStop Pharmacy','Fresh birria tacos'],\n SELLER_TECH:['Pixel Hardware Lab','Mechanical keyboard','iPhone 14 unlocked'],\n SELLER_SERVICE:['ZenAuto Detailing','Guitar lessons','Bike tune-up']\n};\nconst DESCS = {\n 'Pixel Hardware Lab':'Same-day repairs for phones, laptops, and gaming consoles. Genuine parts, 90-day warranty.',\n 'ZenAuto Detailing':'Premium mobile auto detailing. We come to you. Ceramic coating, paint correction, interior deep clean.',\n '24\/7 MedStop Pharmacy':'Round-the-clock pharmacy with prescription delivery within 2km. Over-the-counter and prescription meds.',\n 'Lush Garden Co-op':'Community garden center with native plants, organic soil, and DIY workshops every weekend.',\n 'Neon Noodle Bar':'Late-night ramen with a funk twist. Hand-pulled noodles, broth simmered 18 hours. Open until 3AM.',\n 'Basement Beats Venue':'Underground live music venue. DJ sets, vinyl nights, local artist showcases every Friday.',\n 'Underground Sneaker Vault':'Rare and limited sneaker drops. Authenticated, consignment welcome, VIP early access.',\n 'Glow Barbershop':'Modern styling. Walk-ins welcome, online booking, hot towel shaves and fades.'\n};\nlet seq=0;\n\/\/ All WhatsApp contact goes to this fixed number regardless of listing\/seller.\nconst WHATSAPP_NUMBER='68989660003';\nfunction mkListing(title,price,flags,center,featured,sellerName,viral,statusOpen,tier){\n seq++;\n return {\n id:'lst_'+Date.now()+'_'+seq, title, price, flags, featured:!!featured,\n lat:center.lat+(Math.random()-0.5)*0.025, lng:center.lng+(Math.random()-0.5)*0.025,\n seller:sellerName, sellerAvatar:sellerName[0].toUpperCase(), createdAt:Date.now(),\n viral:viral||Math.floor(Math.random()*60)+30, open: statusOpen!==false, tier: tier||'FREE',\n desc: DESCS[sellerName] || 'No description provided.'\n };\n}\nfunction seedListings(center){\n const list=[];\n const f930=FLAGS.FEATURED|FLAGS.PREMIUM|FLAGS.URGENT|FLAGS.NEGOTIABLE|FLAGS.SELLER_FOOD;\n const fixed=[\n ['Pixel Hardware Lab', 'SELLER_TECH', 78, true, 'PLUS', 0.8],\n ['ZenAuto Detailing', 'SELLER_SERVICE', 71, true, 'PLUS', 2.1],\n ['24\/7 MedStop Pharmacy','SELLER_FOOD', 65, true, 'FREE', 1.5],\n ['Lush Garden Co-op', 'SELLER_SERVICE', 52, true, 'FREE', 2.8],\n ['Neon Noodle Bar', 'SELLER_FOOD', 94, true, 'PRO', 0.4],\n ['Basement Beats Venue', 'SELLER_SERVICE', 90, true, 'PRO', 0.9],\n ['Underground Sneaker Vault','SELLER_FASHION',88,false,'ENTERPRISE',1.2],\n ['Glow Barbershop', 'SELLER_FASHION', 82, true, 'PLUS', 0.6]\n ];\n fixed.forEach(([name,catKey,viral,open,tier,dist])=>{\n let flags=FLAGS[catKey];\n if(Math.random()<.4)flags|=FLAGS.VERIFIED;\n if(tier!=='FREE')flags|=FLAGS.PREMIUM;\n const bearing=Math.random()*Math.PI*2;\n const lat=center.lat+Math.cos(bearing)*(dist\/111);\n const lng=center.lng+Math.sin(bearing)*(dist\/(111*Math.cos(center.lat*Math.PI\/180)));\n seq++;\n list.push({\n id:'lst_'+Date.now()+'_'+seq, title:name, price:Math.floor(Math.random()*80)+10, flags,\n lat, lng, seller:name, sellerAvatar:name[0].toUpperCase(), createdAt:Date.now(),\n viral, open, tier, desc:DESCS[name], featured:false\n });\n });\n list.push(mkListing('Vintage Italian pasta set',24,f930,center,true,'Bruno Foods',96,true,'PRO'));\n const catKeys=Object.keys(TITLES);\n for(let i=0;i<12;i++){\n const ck=catKeys[i%catKeys.length];\n const tt=TITLES[ck];\n let flags=FLAGS[ck];\n if(Math.random()<.35)flags|=FLAGS.DELIVERY;\n if(Math.random()<.3)flags|=FLAGS.NEGOTIABLE;\n if(Math.random()<.4)flags|=FLAGS.VERIFIED;\n const name=tt[Math.floor(Math.random()*tt.length)];\n list.push(mkListing(name,Math.floor(Math.random()*150)+10,flags,center,false,name,Math.floor(Math.random()*50)+20,Math.random()<.8,'FREE'));\n }\n return list;\n}\nfunction seedChats(){\n return [\n {id:'c1',name:'Bruno Foods',avatar:'B',verified:true,unread:true,tag:'PRO',msgs:[\n {me:false,t:'Fresh pasta available today. Still interested?'},{me:false,t:'Pointer 930 = featured+premium+urgent'}\n ]},\n {id:'c2',name:'Maria (Guitar Luthier)',avatar:'M',verified:false,unread:false,tag:null,msgs:[\n {me:true,t:'Meet you near the hex corner?'},{me:false,t:'Sounds good, see you there'}\n ]},\n {id:'c3',name:'Weekend Band Group',avatar:'W',verified:false,unread:false,tag:null,msgs:[\n {me:false,t:'Anyone near cell 89...?'}\n ]}\n ];\n}\n\n\/* ===================== GEOLOCATION ===================== *\/\nfunction initLocation(){\n let done=false;\n const finish=(lat,lng)=>{if(done)return;done=true;state.center={lat,lng};boot();};\n const timeout=setTimeout(()=>finish(30.2672,-97.7431),4500);\n if(navigator.geolocation){\n navigator.geolocation.getCurrentPosition(\n pos=>{clearTimeout(timeout);finish(pos.coords.latitude,pos.coords.longitude);},\n ()=>{clearTimeout(timeout);finish(30.2672,-97.7431);},\n {timeout:4500,maximumAge:60000}\n );\n }else{clearTimeout(timeout);finish(30.2672,-97.7431);}\n}\n\n\/* ===================== ONBOARDING ===================== *\/\nconst ICONS = {\n hex:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 20 7 20 17 12 22 4 17 4 7\"\/><\/svg>',\n pin:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>',\n compass:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"\/><\/svg>',\n tag:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z\"\/><circle cx=\"7\" cy=\"7\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>',\n layers:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/svg>',\n broadcast:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.9 19.1C1 15.2 1 8.8 4.9 4.9m14.2 0c3.9 3.9 3.9 10.3 0 14.2M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5m8.5 0c2.3 2.3 2.3 6.1 0 8.5M12 12h.01\"\/><\/svg>',\n check:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>',\n shield:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>'\n};\nconst OB_STEPS = [\n {icon:'hex',title:'Welcome to HexMarket',\n desc:'A privacy-first marketplace built on H3 hexagonal spatial indexing. No servers store your data \u2014 everything is client-side and peer-to-peer.'},\n {icon:'pin',title:'Your Hex Cell',\n desc:'We assign you to an H3 hex cell based on your location. You only see listings within your cell and adjacent cells. Privacy by geometry.',\n hexgrid:true},\n {icon:'compass',title:'Tap-First Discovery',\n desc:'Tap a category. Tap an intent chip. Tap a listing. No keyboards, no typing. The UI is designed for your thumb.'},\n {icon:'tag',title:'Intent-Driven Filtering',\n desc:'A single bitwise intent mask filters listings instantly. No query language, just taps.'},\n {icon:'layers',title:'Kalman-Smoothed GPS',\n desc:'Your location is continuously smoothed with a Kalman filter for precise hex cell assignment. No jitter, no drift, no raw GPS leaks.',\n barcompare:true},\n {icon:'broadcast',title:'Peer-to-Peer Signaling',\n desc:'All users dial a fixed orchestrator ID to negotiate. After that, connections are direct P2P. No middleman stores your messages.',\n orchcard:true},\n {icon:'check',title:\"You're All Set\",\n desc:\"You're ready to discover, explore, and create listings. Start in your hex cell or zoom out to explore the map. Welcome aboard.\",\n final:true}\n];\nlet obIdx=0;\nfunction renderOb(){\n const s=OB_STEPS[obIdx];\n const pct=Math.round(((obIdx+1)\/OB_STEPS.length)*100);\n document.getElementById('obProgFill').style.width=pct+'%';\n document.getElementById('obStepLbl').textContent='Step '+(obIdx+1)+' of '+OB_STEPS.length;\n document.getElementById('obPct').textContent=pct+'%';\n document.getElementById('obBack').style.visibility=obIdx===0?'hidden':'visible';\n\n const dots=document.getElementById('obDots');\n dots.innerHTML='';\n OB_STEPS.forEach((_,i)=>{\n const d=document.createElement('div');\n d.className='d'+(i===obIdx?' active':i<obIdx?' done':'');\n dots.appendChild(d);\n });\n\n const body=document.getElementById('obBody');\n let extra='';\n if(s.hexgrid){\n extra='<div class=\"ob-hexgrid\">'+\n ['0x4A2F','0x4B1A','0x4C8E','0x4D2B','0x4E5F','0x501C'].map((id,i)=>\n `<div class=\"ob-hexcell${i===0?' active':''}\">${ICONS.hex}<div class=\"lbl\">${id}<\/div><\/div>`).join('')+\n '<\/div>';\n }\n if(s.barcompare){\n extra=`<div class=\"ob-barcompare\">\n <div class=\"ob-bar-row\"><div class=\"ob-bar-head\"><span class=\"lo\">Raw GPS<\/span><span class=\"hi-red\">jitter \u00b18m<\/span><\/div><div class=\"ob-bar-track\"><div class=\"ob-bar-fill\" style=\"width:65%;background:var(--red);\"><\/div><\/div><\/div>\n <div class=\"ob-bar-row\"><div class=\"ob-bar-head\"><span class=\"lo\">Kalman smoothed<\/span><span class=\"hi-green\">\u00b10.3m<\/span><\/div><div class=\"ob-bar-track\"><div class=\"ob-bar-fill\" style=\"width:97%;background:var(--green);\"><\/div><\/div><\/div>\n <\/div>`;\n }\n if(s.orchcard){\n extra=`<div class=\"ob-card\">\n <div class=\"ob-card-row\"><span class=\"k\">${ICONS.broadcast}Orchestrator ID<\/span><span class=\"v\">adx04081987pf<\/span><\/div>\n <div class=\"ob-divider\"><\/div>\n <div class=\"ob-card-row\"><span class=\"k\">Signaling<\/span><span class=\"v mint\">central hub<\/span><\/div>\n <div class=\"ob-card-row\"><span class=\"k\">Media<\/span><span class=\"v\" style=\"color:var(--text);\">P2P negotiated<\/span><\/div>\n <\/div>`;\n }\n if(s.final){\n body.innerHTML=`<div class=\"ob-checkmark\">${ICONS.check}<\/div>\n <div class=\"ob-title\">${s.title}<\/div>\n <div class=\"ob-desc\">${s.desc}<\/div>\n <div class=\"ob-privacy-pill\">${ICONS.shield}Privacy guaranteed \u00b7 No data stored<\/div>`;\n document.getElementById('obCta').innerHTML='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v3m6.36.64-2.12 2.12M21 12h-3M18.36 18.36l-2.12-2.12M12 21v-3M5.64 18.36l2.12-2.12M3 12h3M5.64 5.64l2.12 2.12\"\/><\/svg> Enter HexMarket';\n } else {\n body.innerHTML=`<div class=\"ob-icon\">${ICONS[s.icon]}<\/div>\n <div class=\"ob-title\">${s.title}<\/div>\n <div class=\"ob-desc\">${s.desc}<\/div>\n ${extra}`;\n document.getElementById('obCta').innerHTML='Continue <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>';\n }\n}\ndocument.getElementById('obCta').addEventListener('click',()=>{\n if(obIdx<OB_STEPS.length-1){obIdx++;renderOb();}\n else{finishOnboarding();}\n});\ndocument.getElementById('obBack').addEventListener('click',()=>{\n if(obIdx>0){obIdx--;renderOb();}\n});\ndocument.getElementById('obSkip').addEventListener('click',finishOnboarding);\nfunction finishOnboarding(){\n document.getElementById('onboarding').classList.add('hide');\n DB.set('onboarded',true);\n}\nif(DB.get('onboarded',false)){\n document.getElementById('onboarding').classList.add('hide');\n}else{\n renderOb();\n}\n\n\/* ===================== MAP ===================== *\/\nfunction initMap(){\n if(typeof maplibregl==='undefined'){showMapLoadError();return;}\n state.map=new maplibregl.Map({\n container:'map',\n style:'https:\/\/basemaps.cartocdn.com\/gl\/dark-matter-gl-style\/style.json',\n center:[state.center.lng,state.center.lat], zoom:14, pitch:0, bearing:0,\n attributionControl:false, dragRotate:true, pitchWithRotate:true, touchPitch:true\n });\n state.map.on('error',e=>console.error('MapLibre error:',e&&e.error));\n state.map.on('load',()=>{\n renderMarkers();\n attachTiltListener();\n state.map.on('zoom',onZoomChanged);\n state.map.on('moveend',renderHexGridLayer);\n onZoomChanged();\n });\n}\nfunction showMapLoadError(){\n const mapEl=document.getElementById('map');\n if(!mapEl)return;\n mapEl.innerHTML='<div style=\"position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;background:var(--surface);\">'+\n '<div style=\"font-weight:700;font-size:15px;\">Map failed to load<\/div>'+\n '<div style=\"font-size:12.5px;color:var(--text3);max-width:260px;\">Check your connection and try again.<\/div>'+\n '<button class=\"btn btn-primary\" id=\"mapRetryBtn\" style=\"width:auto;padding:0 20px;\">Retry<\/button><\/div>';\n const rb=document.getElementById('mapRetryBtn');\n if(rb)rb.onclick=()=>location.reload();\n}\n\nfunction attachTiltListener(){\n if(state.pitchListenerAttached)return;\n state.pitchListenerAttached=true;\n state.map.on('pitch',()=>{\n const pitch=state.map.getPitch();\n const isTilted=pitch>15;\n if(isTilted!==state.tilted){state.tilted=isTilted;}\n updateMarkerExtrusion();\n });\n}\nfunction extrusionHeightFor(l){\n const base=Math.min(50,8+l.price*0.3);\n const boost=(l.flags&FLAGS.FEATURED?16:0)+(l.viral||0)*0.15;\n return Math.round(base+boost);\n}\nfunction updateMarkerExtrusion(){\n const pitch=state.map?state.map.getPitch():0;\n const is3D=pitch>15;\n const t=Math.max(0,Math.min(1,(pitch-15)\/45));\n state.markers.forEach(mk=>{\n const el=mk.getElement();\n const stem=el.querySelector&&el.querySelector('.mk-stem');\n if(!stem)return;\n \/\/ Flat 2D: marker sits with zero stem, pinned exactly on its true GPS point (anchor:'bottom').\n \/\/ Tilted 3D: stem grows upward from that same fixed GPS point to represent real extrusion height.\n stem.style.height=is3D?(t*parseFloat(el.dataset.extrudeH||'0'))+'px':'0px';\n el.classList.toggle('is3d',is3D);\n const hex=el.querySelector('.mk-hex');\n if(hex)hex.style.transform=is3D?'scale('+(1+t*0.1)+')':'scale(1)';\n });\n}\n\nfunction renderMarkers(){\n if(!state.map)return;\n state.markers.forEach(m=>m.remove()); state.markers=[];\n const items=filteredListings().filter(l=>l.open!==false).slice(0,8);\n items.forEach(l=>{\n const wrap=document.createElement('div');\n wrap.className='mk';\n wrap.style.display='flex';wrap.style.flexDirection='column';wrap.style.alignItems='center';\n wrap.dataset.extrudeH=String(extrusionHeightFor(l));\n wrap.innerHTML='<div class=\"mk-hex\"><div class=\"mk-hex-shape\"><\/div><div class=\"mk-hex-icon\">'+catIcon(l.flags)+'<\/div><\/div>'+\n (l.featured?'<div class=\"mk-dot\"><\/div>':'')+\n '<div class=\"mk-stem\" style=\"height:0px;\"><\/div>';\n wrap.addEventListener('click',()=>openListing(l.id));\n \/\/ anchor:'bottom' means the bottom of the stem sits exactly on the H3 ground coordinate \u2014 every marker grows upward off that point\n const mk=new maplibregl.Marker({element:wrap,anchor:'bottom'}).setLngLat([l.lng,l.lat]).addTo(state.map);\n state.markers.push(mk);\n \/\/ eta badge for a subset, matches screenshot style\n if(Math.random()<0.7){\n const badge=document.createElement('div');\n badge.className='eta-badge';\n const mins=Math.max(1,Math.round(distKm(state.center,l)*12));\n badge.innerHTML='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>'+mins+' min';\n const bm=new maplibregl.Marker({element:badge,anchor:'top',offset:[0,4]}).setLngLat([l.lng,l.lat]).addTo(state.map);\n state.markers.push(bm);\n }\n });\n if(state.tilted)updateMarkerExtrusion();\n}\n\nfunction resForZoom(z){\n if(z<9)return 5; if(z<11)return 6; if(z<12.5)return 7; if(z<14)return 8; if(z<15.5)return 9; if(z<17)return 10; return 11;\n}\nfunction resLabel(res){\n const m={3:'Macro',4:'Macro',5:'Regional',6:'Metro',7:'District',8:'Neighborhood',9:'Block',10:'Street',11:'Micro',12:'Micro'};\n return 'Res '+res+' \u00b7 '+(m[res]||'');\n}\nfunction onZoomChanged(){\n if(!state.map)return;\n const res=state.hexResMode==='lock'?state.hexResLock:resForZoom(state.map.getZoom());\n if(res!==state.currentHexRes){\n state.currentHexRes=res;\n document.getElementById('hexResBadge').textContent=resLabel(res);\n }\n renderHexGridLayer();\n}\n\n\/* ===================== H3 DATA LAYER (real hexagons, real density) ===================== *\/\nconst HEX_DATA_LAYERS=[\n {k:'supply',t:'Supply\/Demand',d:'Fill intensity = live listing density per cell',dot:'var(--orange)'},\n {k:'ring',t:'Ring Propagation',d:'Highlights how far your intent reach spreads from here',dot:'var(--purple)'},\n {k:'privacy',t:'Privacy Mask',d:'Outline only \u2014 proves your exact GPS never leaves this cell',dot:'var(--green)'}\n];\nfunction centerCell(res){\n return h3.latLngToCell(state.center.lat,state.center.lng,res);\n}\nfunction visibleCells(res){\n \/\/ grid-disk out from the user's cell, radius scaled so it comfortably covers the current viewport\n const k=Math.max(3,Math.min(10,Math.round(14-res)));\n return h3.gridDisk(centerCell(res),k);\n}\nfunction ensureHexLayers(){\n if(!state.map||state.map.getSource('hexgrid'))return;\n state.map.addSource('hexgrid',{type:'geojson',data:{type:'FeatureCollection',features:[]}});\n state.map.addLayer({id:'hexgrid-fill',type:'fill',source:'hexgrid',\n paint:{'fill-color':['get','fill'],'fill-opacity':['get','opacity']}});\n state.map.addLayer({id:'hexgrid-line',type:'line',source:'hexgrid',\n paint:{'line-color':['get','stroke'],'line-width':['get','strokeW'],'line-opacity':0.85}});\n state.map.on('click','hexgrid-fill',e=>{\n if(!e.features||!e.features.length)return;\n selectCell(e.features[0].properties.cell);\n });\n state.map.on('mouseenter','hexgrid-fill',()=>state.map.getCanvas().style.cursor='pointer');\n state.map.on('mouseleave','hexgrid-fill',()=>state.map.getCanvas().style.cursor='');\n}\nfunction renderHexGridLayer(){\n if(!state.map||!state.map.isStyleLoaded()||typeof h3==='undefined')return;\n ensureHexLayers();\n const src=state.map.getSource('hexgrid');\n if(!src)return;\n const res=state.currentHexRes;\n const home0=centerCell(res);\n document.getElementById('curCellId')&&(document.getElementById('curCellId').textContent=home0);\n document.getElementById('cellIdVal')&&(document.getElementById('cellIdVal').textContent=home0);\n if(!state.hexGridOn){src.setData({type:'FeatureCollection',features:[]});return;}\n const cells=visibleCells(res);\n const counts={};\n state.listings.forEach(l=>{counts[h3.latLngToCell(l.lat,l.lng,res)]=(counts[h3.latLngToCell(l.lat,l.lng,res)]||0)+1;});\n const maxCount=Math.max(1,...Object.values(counts));\n const home=centerCell(res);\n const features=cells.map(cell=>{\n const boundary=h3.cellToBoundary(cell,true); \/\/ [lng,lat] pairs\n const count=counts[cell]||0;\n let fill='rgba(0,0,0,0)', opacity=0, stroke='rgba(255,106,26,.18)', strokeW=1;\n if(state.hexDataLayer==='supply'){\n const t=count\/maxCount;\n fill=count? `rgba(255,106,26,${0.12+t*0.55})` : 'rgba(255,106,26,0.03)';\n opacity=1; stroke='rgba(255,106,26,.35)'; strokeW=cell===state.selectedCell?2.5:1;\n } else if(state.hexDataLayer==='ring'){\n const dist=h3.gridDistance(home,cell);\n const t=Math.max(0,1-dist\/6);\n fill=`rgba(168,85,247,${0.05+t*0.4})`;\n opacity=1; stroke='rgba(168,85,247,.4)'; strokeW=cell===state.selectedCell?2.5:1;\n } else if(state.hexDataLayer==='privacy'){\n fill='rgba(52,199,89,0.04)'; opacity=cell===home||cell===state.selectedCell?1:0.5;\n stroke=cell===home?'rgba(52,199,89,.8)':'rgba(52,199,89,.25)'; strokeW=cell===home?2:1;\n }\n return {type:'Feature',geometry:{type:'Polygon',coordinates:[boundary]},properties:{cell,count,fill,opacity,stroke,strokeW}};\n });\n src.setData({type:'FeatureCollection',features});\n}\nfunction selectCell(cell){\n state.selectedCell=state.selectedCell===cell?null:cell;\n state.cellFilter=state.selectedCell; state.cellFilterRes=state.currentHexRes; \/\/ also filters Discover\/Explore feeds by the tapped cell\n renderHexGridLayer();\n const pill=document.getElementById('hexCellPill');\n if(state.selectedCell){\n const count=state.listings.filter(l=>h3.latLngToCell(l.lat,l.lng,state.currentHexRes)===state.selectedCell).length;\n document.getElementById('pillCellId').textContent=state.selectedCell;\n document.getElementById('pillCellSub').textContent=count+' listing'+(count===1?'':'s')+' in this cell';\n pill.classList.add('show');\n } else {\n pill.classList.remove('show');\n }\n renderMarkers();\n}\ndocument.getElementById('pillClearBtn').onclick=()=>selectCell(state.selectedCell);\n\nconst RES_PRESETS=[{r:5,l:'Regional'},{r:7,l:'City'},{r:9,l:'Neighborhood'},{r:11,l:'Street'}];\nfunction renderHexLayerSheet(){\n document.getElementById('hexGridToggle').classList.toggle('on',state.hexGridOn);\n document.querySelectorAll('#resModeSeg .seg2-btn').forEach(b=>b.classList.toggle('active',b.dataset.mode===state.hexResMode));\n document.getElementById('resLockBlock').style.display=state.hexResMode==='lock'?'block':'none';\n document.getElementById('resSlider').value=state.hexResLock;\n document.getElementById('resLockVal').textContent=state.hexResLock;\n document.getElementById('resPresetRow').innerHTML=RES_PRESETS.map(p=>\n `<button class=\"reschip${state.hexResLock===p.r?' active':''}\" data-r=\"${p.r}\">${p.l} (${p.r})<\/button>`).join('');\n document.querySelectorAll('#resPresetRow .reschip').forEach(b=>{\n b.onclick=()=>{state.hexResLock=parseInt(b.dataset.r);applyResLock();renderHexLayerSheet();};\n });\n document.getElementById('dlayerGrid').innerHTML=HEX_DATA_LAYERS.map(d=>\n `<button class=\"dlayer-chip${state.hexDataLayer===d.k?' active':''}\" data-k=\"${d.k}\">\n <div class=\"dot\" style=\"background:${d.dot};\"><\/div>\n <div class=\"txt\"><div class=\"t\">${d.t}<\/div><div class=\"d\">${d.d}<\/div><\/div>\n <\/button>`).join('');\n document.querySelectorAll('#dlayerGrid .dlayer-chip').forEach(b=>{\n b.onclick=()=>{state.hexDataLayer=b.dataset.k;renderHexLayerSheet();renderHexGridLayer();};\n });\n const legends={\n supply:'Brighter orange = more live listings in that cell.',\n ring:'Purple fades outward \u2014 shows real propagation reach from your cell.',\n privacy:'Green outline = your masked cell. Your raw GPS never broadcasts.'\n };\n document.getElementById('hexLegend').innerHTML=`<div class=\"sw\" style=\"background:var(--surface3);\"><\/div>${legends[state.hexDataLayer]}`;\n document.getElementById('curCellId').textContent=typeof h3!=='undefined'?centerCell(state.currentHexRes):'\u2014';\n}\nfunction applyResLock(){\n if(state.hexResMode==='lock'){state.currentHexRes=state.hexResLock;}\n onZoomChanged();\n}\ndocument.getElementById('hexGridToggle').onclick=function(){\n state.hexGridOn=!state.hexGridOn;\n this.classList.toggle('on',state.hexGridOn);\n document.getElementById('railHex').classList.toggle('active',state.hexGridOn);\n document.getElementById('hexResBadge').classList.toggle('show',state.hexGridOn);\n renderHexGridLayer();\n};\ndocument.querySelectorAll('#resModeSeg .seg2-btn').forEach(b=>{\n b.onclick=()=>{\n state.hexResMode=b.dataset.mode;\n document.querySelectorAll('#resModeSeg .seg2-btn').forEach(x=>x.classList.toggle('active',x===b));\n document.getElementById('resLockBlock').style.display=state.hexResMode==='lock'?'block':'none';\n applyResLock();\n };\n});\ndocument.getElementById('resSlider').oninput=function(){\n state.hexResLock=parseInt(this.value);\n document.getElementById('resLockVal').textContent=state.hexResLock;\n document.querySelectorAll('#resPresetRow .reschip').forEach(c=>c.classList.toggle('active',parseInt(c.dataset.r)===state.hexResLock));\n applyResLock();\n};\ndocument.getElementById('viewCellBtn').onclick=()=>{\n if(!state.map)return;\n closeSheets();switchTab('map');\n state.map.flyTo({center:[state.center.lng,state.center.lat],zoom:state.hexResMode==='lock'?12:14,duration:700});\n showToast('Centered on your H3 cell');\n};\n\n\/* ===================== GPS MARKER + ACCURACY CIRCLE ===================== *\/\nfunction metersCircleGeoJSON(lat,lng,radiusM){\n const pts=48, coords=[];\n const latR=radiusM\/111320;\n const lngR=radiusM\/(111320*Math.cos(lat*Math.PI\/180));\n for(let i=0;i<=pts;i++){\n const a=(i\/pts)*2*Math.PI;\n coords.push([lng+lngR*Math.cos(a),lat+latR*Math.sin(a)]);\n }\n return {type:'Feature',geometry:{type:'Polygon',coordinates:[coords]}};\n}\nfunction updateGpsMarker(lat,lng,accuracyM){\n if(!state.map)return;\n const acc=Math.max(5,accuracyM||20);\n const circleData=metersCircleGeoJSON(lat,lng,acc);\n if(state.map.getSource('gps-accuracy')){\n state.map.getSource('gps-accuracy').setData(circleData);\n }else{\n state.map.addSource('gps-accuracy',{type:'geojson',data:circleData});\n state.map.addLayer({id:'gps-accuracy-fill',type:'fill',source:'gps-accuracy',\n paint:{'fill-color':'#FF6A1A','fill-opacity':0.15}});\n state.map.addLayer({id:'gps-accuracy-line',type:'line',source:'gps-accuracy',\n paint:{'line-color':'#FF6A1A','line-width':1.5,'line-opacity':0.5}});\n }\n if(!state.gpsPuck){\n const el=document.createElement('div');\n el.className='mk gps-puck';\n el.innerHTML='<div class=\"mk-hex\"><div class=\"mk-hex-shape gps-shape\"><\/div><div class=\"mk-hex-icon\"><div class=\"gps-dot\"><\/div><\/div><\/div>';\n state.gpsPuck=new maplibregl.Marker({element:el,anchor:'center'}).setLngLat([lng,lat]).addTo(state.map);\n }else{\n state.gpsPuck.setLngLat([lng,lat]);\n }\n}\nfunction removeGpsMarker(){\n if(state.gpsPuck){state.gpsPuck.remove();state.gpsPuck=null;}\n if(state.map){\n ['gps-accuracy-fill','gps-accuracy-line'].forEach(id=>{if(state.map.getLayer(id))state.map.removeLayer(id);});\n if(state.map.getSource('gps-accuracy'))state.map.removeSource('gps-accuracy');\n }\n}\n\n\/* ===================== FILTERING ===================== *\/\nfunction filteredListings(){\n let items=state.listings.slice();\n if(state.catFilter && FLAGS[state.catFilter]) items=items.filter(l=>l.flags & FLAGS[state.catFilter]);\n if(state.filterFlags) items=items.filter(l=>hasMatch(l.flags,state.filterFlags));\n const q=(document.getElementById('searchInput').value||'').trim().toLowerCase();\n if(q) items=items.filter(l=>l.title.toLowerCase().includes(q)||l.seller.toLowerCase().includes(q));\n items=items.filter(l=>distKm(state.center,l)<=state.radius*2);\n if(state.cellFilter && typeof h3!=='undefined'){\n items=items.filter(l=>h3.latLngToCell(l.lat,l.lng,state.cellFilterRes)===state.cellFilter);\n }\n return items;\n}\n\n\/* ===================== CHIP ROWS ===================== *\/\nfunction renderChipRow(){\n const row=document.getElementById('chipRow');\n if(state.activeTab!=='discover'){row.innerHTML='';row.style.display='none';return;}\n row.style.display='';\n row.innerHTML=CATS.slice(0,4).map(c=>{\n const count=state.listings.filter(l=>l.flags & FLAGS[c.k]).length;\n return `<button class=\"cat-chip${state.catFilter===c.k?' active':''}\" data-cat=\"${c.k}\">${c.i} ${c.l}<span class=\"cnt\">${count}<\/span><\/button>`;\n }).join('');\n row.querySelectorAll('.cat-chip').forEach(ch=>{\n ch.onclick=()=>{state.catFilter=state.catFilter===ch.dataset.cat?null:ch.dataset.cat;renderAll();};\n });\n}\n\n\/* ===================== DISCOVER ===================== *\/\nfunction renderDiscoverCatGrid(){\n const grid=document.getElementById('discoverCatGrid');\n grid.innerHTML=CATS.map(c=>`<div class=\"cat-tile\" data-cat=\"${c.k}\"><div class=\"ring\"><\/div><div class=\"lbl\">${c.l}<\/div><\/div>`).join('');\n grid.querySelectorAll('.cat-tile').forEach(t=>{\n t.onclick=()=>{\n grid.querySelectorAll('.cat-tile').forEach(x=>x.classList.remove('active'));\n t.classList.add('active');\n state.catFilter=FLAGS[t.dataset.cat]?t.dataset.cat:null;\n renderDiscoverFeed();\n };\n });\n}\nfunction tierPillHtml(l){\n const t=(l.tier||'FREE').toLowerCase();\n return `<span class=\"tier-pill ${t}\">${l.tier||'FREE'}<\/span>`;\n}\nfunction feedCardHtml(l){\n const d=distKm(state.center,l).toFixed(1);\n const priceTier=l.price>60?'$$$':l.price>25?'$$':'$';\n return `<div class=\"feed-card\" data-id=\"${l.id}\">\n <div class=\"feed-avatar\"><div class=\"hexring\"><\/div><\/div>\n <div class=\"feed-body\">\n <div class=\"feed-top\">\n <div class=\"feed-name\">${esc(l.title)}<\/div>\n <div class=\"feed-viral\"><div class=\"viral-bar\"><\/div><div class=\"viral-num\"><b>${l.viral||0}<\/b><span>viral<\/span><\/div><\/div>\n <\/div>\n <div class=\"feed-desc\">${esc(l.desc||'')}<\/div>\n <div class=\"feed-meta\">\n <span class=\"status-pill dot ${l.open?'open':'closed'}\">${l.open?'Open':'Closed'}<\/span>\n ${tierPillHtml(l)}\n <span class=\"feed-dist\">${d} km \u00b7 ${priceTier}<\/span>\n <\/div>\n <\/div>\n <\/div>`;\n}\nfunction renderDiscoverFeed(){\n const el=document.getElementById('discoverFeed');\n const items=filteredListings().filter(l=>l.tier).sort((a,b)=>(b.viral||0)-(a.viral||0)).slice(0,10);\n if(!items.length){el.innerHTML='<div class=\"empty\"><p>No listings in this cell.<\/p><\/div>';return;}\n el.innerHTML=items.map(feedCardHtml).join('');\n el.querySelectorAll('.feed-card').forEach(c=>c.onclick=()=>openListing(c.dataset.id));\n}\n\n\/* ===================== EXPLORE ===================== *\/\nfunction renderH3Grid(){\n const grid=document.getElementById('h3CellGrid');\n if(typeof h3==='undefined'){grid.innerHTML='<div class=\"empty\" style=\"padding:20px;\">H3 engine unavailable.<\/div>';return;}\n const counts={};\n state.listings.forEach(l=>{\n const c=h3.latLngToCell(l.lat,l.lng,EXPLORE_RES);\n counts[c]=(counts[c]||0)+1;\n });\n const cells=Object.entries(counts).sort((a,b)=>b[1]-a[1]).slice(0,6);\n if(!cells.length){grid.innerHTML='<div class=\"empty\" style=\"padding:20px;\">No activity yet.<\/div>';return;}\n grid.innerHTML=cells.map(([id,count])=>`<div class=\"h3cell${state.cellFilter===id?' active':''}\" data-id=\"${id}\">\n <div class=\"id\">${id.slice(-6)}<\/div><div class=\"cnt\"><div class=\"dt\"><\/div>${count} listing${count>1?'s':''}<\/div>\n <\/div>`).join('');\n grid.querySelectorAll('.h3cell').forEach(c=>{\n c.onclick=()=>{\n state.cellFilter=state.cellFilter===c.dataset.id?null:c.dataset.id;\n state.cellFilterRes=EXPLORE_RES;\n renderH3Grid();renderOpenNow();renderViralFeed();\n showToast(state.cellFilter?'Filtered to cell \u00b7'+c.dataset.id.slice(-6):'Cell filter cleared');\n };\n });\n}\nfunction renderOpenNow(){\n const grid=document.getElementById('openNowGrid');\n const items=state.listings.filter(l=>l.open).slice(0,2);\n grid.innerHTML=items.map(l=>`<div class=\"mini-card\" data-id=\"${l.id}\">\n <div class=\"nm\">${esc(l.title)}<\/div>\n <div class=\"viral-row\"><div class=\"viral-num\"><b>${l.viral||0}<\/b><span>viral<\/span><\/div><\/div>\n <div class=\"feed-meta\"><span class=\"status-pill dot open\">Open<\/span>${tierPillHtml(l)}<\/div>\n <\/div>`).join('');\n grid.querySelectorAll('.mini-card').forEach(c=>c.onclick=()=>openListing(c.dataset.id));\n}\nfunction renderViralFeed(){\n const el=document.getElementById('viralFeed');\n const items=state.listings.slice().sort((a,b)=>(b.viral||0)-(a.viral||0)).slice(0,4);\n el.innerHTML=items.map(feedCardHtml).join('');\n el.querySelectorAll('.feed-card').forEach(c=>c.onclick=()=>openListing(c.dataset.id));\n}\n\n\/* ===================== LISTING DETAIL ===================== *\/\nfunction openListing(id){\n const l=state.listings.find(x=>x.id===id);\n if(!l)return;\n state.currentListing=l;\n const cat=catOf(l.flags);\n const modsOn=OPTS.filter(m=>l.flags & FLAGS[m.k]);\n document.getElementById('listingBody').innerHTML=`\n <div class=\"pdp-hero\">\n <div class=\"pdp-hero-icon\">${catIcon(l.flags)}<\/div>\n <div class=\"pdp-hero-badges\">${tierPillHtml(l)}<span class=\"status-pill dot ${l.open?'open':'closed'}\">${l.open?'Open':'Closed'}<\/span><\/div>\n <div class=\"pdp-hero-bottom\">\n <div class=\"pdp-title\">${esc(l.title)}<\/div>\n <div class=\"pdp-price\">\u20ac${l.price}<\/div>\n <\/div>\n <\/div>\n <div class=\"pdp-specs-row\">\n <div class=\"pdp-spec\"><b>${distKm(state.center,l).toFixed(1)}km<\/b><span>Away<\/span><\/div>\n <div class=\"pdp-spec\"><b>${l.viral||0}<\/b><span>Viral<\/span><\/div>\n <div class=\"pdp-spec\"><b>${cat?cat.i:'\u2b21'}<\/b><span>${cat?cat.l:'Other'}<\/span><\/div>\n ${modsOn.map(m=>`<div class=\"pdp-spec\"><b>${m.i}<\/b><span>${m.l}<\/span><\/div>`).join('')}\n <div class=\"pdp-spec\"><b style=\"font-size:9.5px;\">${toBin(l.flags)}<\/b><span>Pointer<\/span><\/div>\n <\/div>\n <p class=\"pdp-desc\">${esc(l.desc||'')}<\/p>\n <div class=\"seller-row\" style=\"margin:12px 0 6px;display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:15px;\">\n <div class=\"seller-av\" style=\"width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--orange),#B33D00);display:flex;align-items:center;justify-content:center;font-weight:700;color:#1A0800;flex-shrink:0;\">${esc(l.sellerAvatar)}<\/div>\n <div style=\"flex:1;\"><div style=\"font-weight:700;font-size:13.5px;\">${esc(l.seller)}<\/div>\n ${l.flags&FLAGS.VERIFIED?'<div class=\"verified-tag\" style=\"font-size:11.5px;color:var(--green);font-weight:700;margin-top:2px;display:flex;align-items:center;gap:4px;\">'+ICONS.check+'Verified<\/div>':'<div style=\"font-size:11px;color:var(--text3);\">Unverified<\/div>'}<\/div>\n <\/div>\n <div class=\"action-row\" style=\"margin-top:6px;\">\n <button class=\"btn btn-secondary\" id=\"ldRoute\" style=\"flex:0 0 52px;\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 11l19-9-9 19-2-8-8-2z\"\/><\/svg><\/button>\n <button class=\"btn btn-secondary\" id=\"ldChat\">Message<\/button>\n <button class=\"btn btn-primary\" id=\"ldBuy\">Buy now<\/button>\n <\/div>`;\n document.getElementById('ldChat').onclick=()=>{closeSheets();openWaThread(l,'Hi! Is \"'+l.title+'\" still available?');};\n document.getElementById('ldBuy').onclick=()=>{closeSheets();openWaThread(l,'Hi! Interested in \"'+l.title+'\" for \u20ac'+l.price+'. Is it still available?');};\n document.getElementById('ldRoute').onclick=()=>{closeSheets();switchTab('map');startRouteTo(l.id);showToast('Routing to '+l.title);};\n centerMapOnSelected(l);\n openSheet('sheetListing');\n}\n\/\/ The listing sheet covers exactly the lower 50vh, so pan the selected item into the visible upper half\nfunction centerMapOnSelected(l){\n if(!state.map)return;\n if(state.activeTab!=='map')switchTab('map');\n setTimeout(()=>{\n state.map.resize();\n const targetScreenY=window.innerHeight*0.25; \/\/ middle of the visible upper half\n const centerScreenY=window.innerHeight*0.5;\n const pxOffsetY=centerScreenY-targetScreenY;\n state.map.flyTo({\n center:[l.lng,l.lat],\n zoom:Math.max(state.map.getZoom(),15),\n offset:[0,-pxOffsetY],\n duration:700\n });\n },50);\n}\nwindow.__hexmarket_part2_loaded=true;\n\n\/* ===================== SELL FLOW \u2014 TYPE (in List tab) ===================== *\/\nconst LISTING_TYPES=[\n {k:'business',t:'Business \/ Store',d:'A physical location with hours'},\n {k:'service',t:'Service',d:'Mobile or on-demand service'},\n {k:'product',t:'Product \/ Item',d:'Goods for sale or trade'},\n {k:'event',t:'Event',d:'Time-limited happening or gathering'}\n];\nfunction renderStypeRow(){\n const row=document.getElementById('stypeRow');\n row.innerHTML=LISTING_TYPES.map(t=>`<div class=\"stype-card${state.listingTypeChoice===t.k?' active':''}\" data-t=\"${t.k}\">\n <div class=\"l\"><div class=\"t\">${t.t}<\/div><div class=\"d\">${t.d}<\/div><\/div><div class=\"stype-radio\"><\/div>\n <\/div>`).join('');\n row.querySelectorAll('.stype-card').forEach(c=>{\n c.onclick=()=>{state.listingTypeChoice=c.dataset.t;renderStypeRow();};\n });\n}\ndocument.getElementById('stypeGoBtn').onclick=()=>{\n if(!state.listingTypeChoice){showToast('Pick a listing type');return;}\n resetSellFlow();\n openSheet('sheetSell');\n};\n\n\/* ===================== SELL FLOW \u2014 steps 2-5 ===================== *\/\nconst SELL_STEPS=[\n {k:'photos',l:'Photos',icon:'<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-213","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mana-corp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=213"}],"version-history":[{"count":4,"href":"http:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/213\/revisions"}],"predecessor-version":[{"id":217,"href":"http:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/213\/revisions\/217"}],"wp:attachment":[{"href":"http:\/\/mana-corp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}