/* Tukalos app styles. Brand colours live in :root. */
:root{
  --logo-tile:#152238; --logo-circle:#FFFFFF; --logo-ring:#FFA41B; --logo-dot:#2A6FDB;
  --navy:#152238; --navy-2:#24365A; --mango:#FFA41B; --mango-soft:#FFF1DC; --mango-text:#7A4800;
  --ocean:#2A6FDB; --ocean-soft:#E3EDFC; --ocean-text:#1D4B9B;
  --mist:#F3F6FB; --white:#FFFFFF; --slate:#4E596B; --muted:#5F6E86; --rule:#D9E0EA; --field:#B9C4D4;
  --danger:#9B1C1C; --danger-soft:#FDE8E8; --ok-text:#11603F; --ok-soft:#E3F4EC;
  --display:"Nunito", ui-rounded, system-ui, sans-serif;
  --body:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-top:env(safe-area-inset-top, 0px); --safe-bottom:env(safe-area-inset-bottom, 0px);
  color-scheme:light;
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--mist);color:var(--navy);font:400 17px/1.5 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
#root{min-height:100%}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--ocean-text)}
button{font:inherit}
:focus-visible{outline:3px solid var(--ocean);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* layout */
.app{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;padding:calc(16px + var(--safe-top)) 20px 24px;display:flex;flex-direction:column;gap:18px}
.screen.with-nav{padding-bottom:calc(96px + var(--safe-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.brand{display:inline-flex;align-items:center;gap:8px;font:800 22px/1 var(--display);letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 4px;border:0;background:none;color:var(--navy);font-weight:700;cursor:pointer;border-radius:10px}
.test-pill{font-size:12px;font-weight:800;letter-spacing:.04em;background:var(--mango-soft);color:var(--mango-text);border-radius:999px;padding:4px 10px}
.title{font-size:28px;line-height:1.15}
.lead{color:var(--slate);font-size:17px}
.muted{color:var(--muted);font-size:15px}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:12px}
.spacer{flex:1}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 20px;border-radius:14px;border:1.5px solid transparent;font:700 17px/1 var(--display);cursor:pointer;text-decoration:none}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-primary:disabled{background:#6B7890;cursor:progress}
.btn-ghost{background:var(--white);color:var(--navy);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-danger{background:var(--white);color:var(--danger);border-color:#F2C4C4}
.link-btn{border:0;background:none;color:var(--ocean-text);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 4px;min-height:44px}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .label{font-weight:700;font-size:15px}
.field .hint{font-weight:400;color:var(--muted)}
.input{width:100%;height:52px;border:1.5px solid var(--field);border-radius:12px;padding:0 14px;font:inherit;font-size:17px;color:var(--navy);background:#fff}
.input::placeholder{color:#6E7C92}
.input:focus{outline:3px solid var(--ocean);outline-offset:1px;border-color:var(--ocean)}
.input[aria-invalid=true]{border-color:var(--danger)}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:72px}
.pw-toggle{position:absolute;right:6px;top:6px;height:40px;padding:0 10px;border:0;background:none;color:var(--ocean-text);font-weight:700;cursor:pointer;border-radius:8px}
.err{color:var(--danger);font-size:14px;font-weight:600}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#E4EAF2;border-radius:14px;padding:4px;gap:4px}
.seg button{min-height:46px;border:0;border-radius:11px;background:transparent;color:var(--slate);font:700 16px var(--display);cursor:pointer}
.seg button[aria-checked=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(21,34,56,.15)}
.notice{border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;line-height:1.45}
.notice.error{background:var(--danger-soft);color:var(--danger)}
.notice.info{background:var(--mango-soft);color:var(--mango-text)}
.notice.ok{background:var(--ok-soft);color:var(--ok-text)}

/* home */
.q-card{display:block;width:100%;text-align:left;background:#fff;border:2px solid;border-radius:18px;padding:18px;cursor:pointer;color:var(--navy);text-decoration:none}
.q-card b{display:block;font:700 22px/1.2 var(--display)}
.q-card span{display:block;color:var(--slate);font-size:15px;margin-top:4px}
.q-card.need{border-color:var(--mango)}
.q-card.have{border-color:var(--ocean)}
.q-card:hover{background:var(--mist)}
.area{display:inline-flex;align-items:center;gap:6px;color:var(--slate);font-size:15px;font-weight:600}
.card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:16px}
.soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 16px;color:var(--slate)}
.soon b{font:700 20px var(--display);color:var(--navy)}

/* profile */
.avatar{width:64px;height:64px;border-radius:50%;background:var(--ocean-soft);color:var(--ocean-text);display:grid;place-items:center;font:800 26px var(--display);flex:none}
.profile-head{display:flex;align-items:center;gap:14px}
.badge{display:inline-block;font-size:13px;font-weight:800;border-radius:999px;padding:3px 10px}
.badge.biz{background:var(--mango-soft);color:var(--mango-text)}
.badge.ind{background:var(--ocean-soft);color:var(--ocean-text)}

/* bottom nav */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--rule);padding-bottom:var(--safe-bottom);z-index:5}
.tabbar ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);max-width:520px}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;color:var(--muted);text-decoration:none;font-size:12.5px;font-weight:700}
.tabbar a[aria-current=page]{color:var(--navy)}
.tabbar a[aria-current=page] svg{stroke:var(--navy)}

/* splash / blocking states */
.full-center{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;text-align:center}
.full-center .box{max-width:380px;display:flex;flex-direction:column;gap:12px;align-items:center}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--rule);border-top-color:var(--navy);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* ---------- home: two questions, quick picks, nearby map ---------- */
.home{gap:16px}
.h2{font:700 20px/1.2 var(--display);margin:0}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.q-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q-tile{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;text-decoration:none;color:var(--navy);min-height:150px;transition:transform .15s ease}
.q-tile:active{transform:scale(.98)}
.q-tile.need{background:var(--mango-soft)}
.q-tile.have{background:var(--ocean-soft)}
.q-tile b{font:700 19px/1.2 var(--display);margin-top:auto}
.q-tile span{font-size:14.5px;color:var(--slate);font-weight:600}
.q-tile.need span{color:var(--mango-text)}
.q-tile.have span{color:var(--ocean-text)}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.chip-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--navy);font-size:15px;font-weight:600;text-decoration:none}
.chip-btn:hover{border-color:var(--navy)}
.radar{position:relative;height:300px;border-radius:22px;background:#EDF1F7;overflow:hidden}
.radar.skeleton{background:linear-gradient(90deg,#EDF1F7,#F6F8FB,#EDF1F7)}
.radar-rings span{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.radar-rings .r1{width:92%;aspect-ratio:1;border:2px solid rgba(42,111,219,.45);background:rgba(42,111,219,.04)}
.radar-rings .r2{width:60%;aspect-ratio:1;border:1px dashed rgba(21,34,56,.14)}
.radar-rings .r3{width:30%;aspect-ratio:1;border:1px dashed rgba(21,34,56,.14)}
.radar-you{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;border:3px solid var(--navy);display:grid;place-items:center;font:800 12px var(--display);color:var(--navy);box-shadow:0 0 0 8px rgba(21,34,56,.07)}
.radar-card{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:9px 12px 9px 10px;box-shadow:0 2px 10px rgba(21,34,56,.10);max-width:calc(50% - 16px);animation:pop-in .4s ease both}
.slot-tl{left:10px;top:10px}.slot-tr{right:10px;top:10px}.slot-bl{left:10px;bottom:10px}.slot-br{right:10px;bottom:10px}
.radar-pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;z-index:1}
.radar-pin.have{box-shadow:inset 0 0 0 3px var(--mango),0 0 0 2px #fff}
.radar-pin.need{border-width:2.5px;box-shadow:0 0 0 2px #fff}
.radar-card .rc-text{display:flex;flex-direction:column;min-width:0}
.radar-card b{font-weight:700;font-size:14px;line-height:1.25}
.radar-card small{font-size:12.5px;color:var(--slate);font-weight:600;margin-top:2px;white-space:nowrap}
@keyframes pop-in{from{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}
@media (prefers-reduced-motion:reduce){.radar-card{animation:none}}
.near-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.near-list li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:12px 14px}
.mini-mark{flex:none;width:18px;height:18px;border-radius:50%}
.mini-mark.have{background:var(--ocean);box-shadow:inset 0 0 0 3.5px var(--mango)}
.mini-mark.need{background:#fff;border:3px solid var(--mango)}
.nl-main{flex:1;min-width:0;display:flex;flex-direction:column}
.nl-main b{font-weight:700}
.nl-main small{font-size:14px;color:var(--slate)}
.nl-dist{color:var(--slate);font-size:14px;font-weight:600;white-space:nowrap}
@media (max-width:350px){.q-tile{padding:14px;min-height:140px}.q-tile b{font-size:17px}}

/* ---------- posting ---------- */
.form-screen{gap:20px}
.kind-tag{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:4px 12px;margin-bottom:8px}
.kind-tag.need{background:var(--mango-soft);color:var(--mango-text)}
.kind-tag.have{background:var(--ocean-soft);color:var(--ocean-text)}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
fieldset.field legend{padding:0;margin-bottom:6px}
.textarea{height:auto;min-height:92px;padding:12px 14px;resize:vertical;line-height:1.45}
.select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23152238' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:40px}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick-opt{position:relative;display:flex}
.pick-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pick-opt span{display:flex;align-items:center;width:100%;min-height:48px;padding:8px 12px;border:1.5px solid var(--field);border-radius:12px;background:#fff;font-weight:600;font-size:15px;cursor:pointer;line-height:1.25}
.pick-opt input:checked + span{border-color:var(--navy);background:var(--navy);color:#fff}
.pick-opt input:focus-visible + span{outline:3px solid var(--ocean);outline-offset:2px}
.money-wrap{position:relative}
.money-wrap > span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--slate)}
.money-wrap .input{padding-left:30px}
.loc{display:flex;flex-direction:column;gap:8px}
.loc-btn{justify-content:flex-start;min-height:50px;font-size:16px}
.loc-btn.on{border-color:var(--ocean);color:var(--ocean-text)}
.hint-line{font-size:14px;color:var(--muted)}
.photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:150px;border:2px dashed var(--field);border-radius:18px;background:#fff;color:var(--ocean-text);font:700 16px var(--display);cursor:pointer}
.photo-drop.bad{border-color:var(--danger)}
.photo-prev{display:flex;flex-direction:column;gap:10px}
.photo-prev img{width:100%;max-height:280px;object-fit:cover;border-radius:18px;background:#E4EAF2}
.need-theme .btn-primary{background:var(--navy)}
/* post details */
.post-photo{width:100%;max-height:320px;object-fit:cover;border-radius:20px;background:#E4EAF2}
.post-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.post-tags .kind-tag{margin:0}
.chip-status{display:inline-block;font-size:12.5px;font-weight:800;border-radius:999px;padding:3px 10px;background:#E4EAF2;color:var(--navy);white-space:nowrap}
.chip-status.posted{background:var(--mango-soft);color:var(--mango-text)}
.chip-status.matched{background:var(--ocean-soft);color:var(--ocean-text)}
.chip-status.completed{background:var(--ok-soft);color:var(--ok-text)}
.chip-status.cancelled{background:#ECEEF2;color:var(--slate)}
.post-price{font:700 20px var(--display);color:var(--navy)}
.facts{margin:0;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:4px 16px}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--muted);font-size:15px}
.facts dd{margin:0;font-weight:600;text-align:right}
.post-detail{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:14px 16px;color:var(--navy)}
.near-list li:has(> a){padding:0}
.near-list li > a{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;color:inherit;text-decoration:none;border-radius:14px}
.near-list li > a:hover{background:var(--mist)}

/* ---------- step 3: browse ---------- */
.placebar{display:flex;flex-direction:column;gap:8px}
.place-btn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:40px;padding:0 12px 0 10px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:15px;cursor:pointer}
.placebar.compact .place-btn{margin-top:6px;border-color:transparent;background:transparent;padding-left:0;color:var(--slate)}
.placebar.compact .place-btn:hover{color:var(--navy)}
.place-panel{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:14px}
.browse{gap:14px}
.browse-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.view-toggle{display:inline-grid;grid-template-columns:1fr 1fr;background:#E4EAF2;border-radius:12px;padding:3px}
.view-toggle button{min-height:40px;min-width:64px;border:0;border-radius:10px;background:transparent;color:var(--slate);font:700 15px var(--display);cursor:pointer}
.view-toggle button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(21,34,56,.15)}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--field);border-radius:14px;padding:0 12px;min-height:50px;color:var(--muted)}
.search:focus-within{border-color:var(--ocean);outline:3px solid var(--ocean-soft)}
.search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:17px;color:var(--navy);background:transparent}
.search input::placeholder{color:#6E7C92}
.filters{display:flex;flex-direction:column;gap:12px}
.seg.small button{min-height:42px;font-size:15px}
.seg.small{grid-template-columns:repeat(3,1fr)}
.radius label{font-size:15px;color:var(--slate)}
.radius label b{color:var(--navy)}
.radius input[type=range]{width:100%;margin:8px 0 2px;accent-color:var(--navy);height:28px}
.radius-ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600}
.result-count{font-size:15px;font-weight:700;color:var(--slate)}
.browse-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.browse-list a{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:10px;color:inherit;text-decoration:none}
.browse-list a:hover{border-color:var(--navy)}
.thumb{flex:none;width:64px;height:64px;border-radius:12px;object-fit:cover;background:#E4EAF2}
.thumb-need{display:grid;place-items:center;background:var(--mango-soft)}
.thumb-need .mini-mark{width:26px;height:26px;border-width:4px}
.bl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bl-main b{font-weight:700;font-size:16px;line-height:1.3}
.bl-main small{font-size:14px;color:var(--slate)}
.bl-top{display:flex;gap:8px;align-items:center}
.kind-dot{font-size:12px;font-weight:800;letter-spacing:.02em}
.kind-dot.have{color:var(--ocean-text)}
.kind-dot.need{color:var(--mango-text)}
.bl-ago{font-size:12.5px;color:var(--muted)}
.bl-dist{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-weight:700;font-size:14px;color:var(--navy);white-space:nowrap;max-width:34%}
.bl-dist small{font-weight:600;font-size:12.5px;color:var(--muted);white-space:normal}
.bmap-wrap{display:flex;flex-direction:column;gap:10px}
.bmap{position:relative;width:100%;aspect-ratio:1;max-height:440px;margin:0 auto;border-radius:24px;background:#EDF1F7;overflow:hidden}
.bmap-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.bmap-ring.outer{width:94%;height:94%;border:2px solid rgba(42,111,219,.45);background:rgba(42,111,219,.04)}
.bmap-ring.mid{width:47%;height:47%;border:1px dashed rgba(21,34,56,.18)}
.bmap-label{position:absolute;left:50%;top:5%;transform:translate(-50%,-50%);background:#EDF1F7;padding:0 6px;font-size:12px;font-weight:700;color:var(--ocean-text)}
.bmap-n{position:absolute;right:12px;top:10px;font:800 12px var(--display);color:var(--muted)}
.bmap-pin{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:50%;z-index:2}
.bmap-pin .mini-mark{width:20px;height:20px;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(21,34,56,.25);transition:transform .15s}
.bmap-pin.have .mini-mark{box-shadow:inset 0 0 0 4px var(--mango),0 0 0 3px #fff,0 2px 6px rgba(21,34,56,.25)}
.bmap-pin.sel .mini-mark{transform:scale(1.35)}
.bmap-pin:focus-visible{outline:3px solid var(--ocean);outline-offset:-4px}
.bmap-legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:13.5px;color:var(--slate);font-weight:600}
.bmap-legend span{display:inline-flex;align-items:center;gap:6px}
.bmap-legend .mini-mark{width:14px;height:14px}
.bmap-legend .mini-mark.need{border-width:2.5px}
.bmap-legend .mini-mark.have{box-shadow:inset 0 0 0 3px var(--mango)}
.bmap-card{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--navy);border-radius:16px;padding:10px;color:inherit;text-decoration:none}
.bmap-go{font:700 15px var(--display);color:var(--ocean-text);padding:0 6px}

/* ---------- a bit more colour ---------- */
:root{--ocean-strong:#2563C9;--mango-deep:#F59300;--mango-tint:#FFE4BC;--ocean-tint:#CFE0FA}
body{background:
  radial-gradient(90% 38% at 0% 0%, #FFE9C7 0%, rgba(255,233,199,0) 70%),
  radial-gradient(90% 38% at 100% 0%, #D6E5FB 0%, rgba(214,229,251,0) 70%),
  var(--mist) no-repeat}
.test-pill{background:linear-gradient(90deg,var(--mango-tint),var(--ocean-tint));color:var(--navy)}
/* question tiles */
.q-tile.need{background:linear-gradient(150deg,#FFDDA8 0%,#FFF1DC 70%)}
.q-tile.have{background:linear-gradient(150deg,#C4DAFA 0%,#E6EFFD 70%)}
.q-tile{box-shadow:0 6px 16px -10px rgba(21,34,56,.35)}
.q-card.need{background:linear-gradient(150deg,#FFF1DC,#fff 70%)}
.q-card.have{background:linear-gradient(150deg,#E3EDFC,#fff 70%)}
/* tab bar */
.tab-ic{display:grid;place-items:center;width:56px;height:30px;border-radius:999px;transition:background .15s}
.tabbar a{color:var(--muted)}
.tabbar a[aria-current=page]{color:var(--ocean-text)}
.tabbar a[aria-current=page] .tab-ic{background:var(--ocean-soft)}
.tabbar a[aria-current=page] svg{stroke:currentColor}
/* place + search */
.place-btn{background:var(--ocean-soft);border-color:transparent;color:var(--ocean-text)}
.placebar.compact .place-btn{color:var(--ocean-text)}
.search svg{color:var(--ocean-strong)}
/* filters: colour matches what you're looking at */
.view-toggle button[aria-pressed=true]{background:var(--navy);color:#fff}
.filters .seg button[aria-checked=true][data-v=all]{background:var(--navy);color:#fff}
.filters .seg button[aria-checked=true][data-v=have]{background:var(--ocean-strong);color:#fff}
.filters .seg button[aria-checked=true][data-v=need]{background:var(--mango);color:var(--navy)}
.radius input[type=range]{accent-color:var(--ocean-strong)}
.result-count::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,var(--mango),var(--ocean));margin-right:8px;vertical-align:1px}
/* list labels */
.kind-dot{border-radius:999px;padding:1px 8px}
.kind-dot.have{background:var(--ocean-soft)}
.kind-dot.need{background:var(--mango-soft)}
.thumb-need{background:linear-gradient(150deg,#FFDDA8,#FFF1DC)}
/* maps */
.radar,.bmap{background:radial-gradient(circle at 50% 50%, #FFFFFF 0%, #EAF1FC 55%, #FFF3E0 100%)}
.radar-rings .r2,.bmap-ring.mid{border-color:rgba(245,147,0,.35)}
.bmap-label{background:#EAF1FC}
.radar-you{background:var(--navy);color:#fff;border-color:#fff;box-shadow:0 0 0 6px rgba(42,111,219,.18)}
/* forms: need = mango, have = ocean */
.need-theme .btn-primary{background:var(--mango);color:var(--navy)}
.need-theme .btn-primary:hover{background:var(--mango-deep)}
.need-theme .pick-opt input:checked + span{background:var(--mango);border-color:var(--mango);color:var(--navy)}
.need-theme .input:focus{outline-color:var(--mango);border-color:var(--mango-deep)}
.have-theme .btn-primary{background:var(--ocean-strong);color:#fff}
.have-theme .btn-primary:hover{background:#1D4B9B}
.have-theme .seg button[aria-checked=true]{background:var(--ocean-strong);color:#fff}
.have-theme .photo-drop{border-color:#9DBBEA;background:linear-gradient(150deg,#E6EFFD,#fff)}
.kind-tag{font-size:14px;padding:5px 14px}
/* post details */
.post-screen.need .post-price{color:var(--mango-text)}
.post-screen.have .post-price{color:var(--ocean-text)}
.post-screen.need .facts{border-color:var(--mango-tint)}
.post-screen.have .facts{border-color:var(--ocean-tint)}
/* profile */
.avatar{background:linear-gradient(135deg,var(--mango-tint),var(--ocean-tint));color:var(--navy)}
.bl-ago{white-space:nowrap}

/* ---------- step 4: messaging ---------- */
.btn-mango{background:var(--mango);color:var(--navy)}
.btn-mango:hover{background:var(--mango-deep)}
.btn-ocean{background:var(--ocean-strong);color:#fff}
.btn-ocean:hover{background:#1D4B9B}
.tab-ic{position:relative}
.tab-badge{position:absolute;top:-4px;right:6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--mango);color:var(--navy);font:800 12px/20px var(--body);text-align:center;box-shadow:0 0 0 2px #fff}
.avatar.sm{width:44px;height:44px;font-size:16px}
.avatar.sm.biz{background:linear-gradient(135deg,#FFDDA8,#FFF1DC)}
.thread-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.thread-list a{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:12px;color:inherit;text-decoration:none}
.thread-list a:hover{border-color:var(--navy)}
.thread-list a.unread{border-color:var(--ocean);box-shadow:0 0 0 1px var(--ocean) inset}
.th-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.th-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.th-top b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-time{font-size:13px;color:var(--muted);white-space:nowrap}
.th-post{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--slate);font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.th-post .mini-mark{width:12px;height:12px;flex:none}
.th-post .mini-mark.need{border-width:2.5px}
.th-post .mini-mark.have{box-shadow:inset 0 0 0 2.5px var(--mango)}
.th-last{font-size:14.5px;color:var(--slate);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
a.unread .th-last{color:var(--navy);font-weight:700}
.badge-count{flex:none;min-width:24px;height:24px;border-radius:999px;background:var(--ocean-strong);color:#fff;font:800 13px/24px var(--body);text-align:center;padding:0 7px}
/* chat screen */
.chat{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.chat-head{position:sticky;top:0;z-index:3;background:rgba(243,246,251,.96);backdrop-filter:blur(6px);padding:calc(8px + var(--safe-top)) 20px 12px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.chat-who{display:flex;align-items:center;gap:12px}
.chat-name{font:700 21px/1.2 var(--display);margin:0}
.chat-post{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid;border-radius:14px;padding:8px 10px;color:inherit;text-decoration:none}
.chat-post.need{border-color:var(--mango-tint)}
.chat-post.have{border-color:var(--ocean-tint)}
.chat-post img,.cp-mark{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover}
.cp-mark{display:grid;place-items:center;background:var(--mango-soft)}
.cp-main{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-main b{font-weight:700;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cp-main small{font-size:13px;color:var(--slate)}
.cp-go{font-size:24px;color:var(--muted);line-height:1}
.chat-body{flex:1;padding:14px 20px 8px;display:flex;flex-direction:column;gap:6px}
.chat-safety{align-self:center;max-width:320px;text-align:center;font-size:13px;color:var(--slate);background:#fff;border:1px solid var(--rule);border-radius:12px;padding:8px 12px;margin-bottom:6px}
.msg-row{display:flex;flex-direction:column}
.msg-time{align-self:center;font-size:12.5px;color:var(--muted);margin:8px 0 4px}
.bubble{max-width:78%;padding:10px 14px;border-radius:20px;font-size:16px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;animation:pop-in .2s ease both}
.bubble.mine{align-self:flex-end;background:var(--ocean-strong);color:#fff;border-bottom-right-radius:6px}
.bubble.theirs{align-self:flex-start;background:#fff;color:var(--navy);border:1px solid var(--rule);border-bottom-left-radius:6px}
.chat-compose{position:sticky;bottom:0;background:rgba(243,246,251,.97);backdrop-filter:blur(6px);border-top:1px solid var(--rule);padding:10px 16px calc(10px + var(--safe-bottom));display:flex;flex-direction:column;gap:8px}
.quick-replies{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.quick-replies button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ocean-tint);background:#fff;color:var(--ocean-text);font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap}
.quick-replies button:hover{border-color:var(--ocean-strong)}
.demo-hint{font-size:13px;color:var(--mango-text);text-align:center}
.compose-row{display:flex;gap:8px;align-items:flex-end}
.compose-row textarea{flex:1;min-width:0;min-height:48px;max-height:140px;resize:none;border:1.5px solid var(--field);border-radius:24px;padding:12px 16px;font:inherit;font-size:16px;line-height:1.4;color:var(--navy);background:#fff;field-sizing:content}
.compose-row textarea:focus{outline:3px solid var(--ocean);outline-offset:1px;border-color:var(--ocean)}
.send-btn{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--ocean-strong);color:#fff;display:grid;place-items:center;cursor:pointer}
.send-btn:disabled{background:#AEBBD0;cursor:default}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}}

/* ---------- step 5: exchange ---------- */
.tracker{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.tracker li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;font-size:12.5px;font-weight:700;color:var(--muted);text-align:center}
.tracker li::before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:3px;background:var(--rule);z-index:0}
.tracker li:first-child::before{display:none}
.tracker li.done::before,.tracker li.now::before{background:var(--ocean-strong)}
.tk-dot{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--rule);display:grid;place-items:center;font-size:12px;color:#fff;line-height:1}
.tracker li.done .tk-dot{background:var(--ocean-strong);border-color:var(--ocean-strong)}
.tracker li.now .tk-dot{border-color:var(--mango);background:var(--mango-soft)}
.tracker li.now{color:var(--navy)}
.tracker li.done{color:var(--ocean-text)}
.tracker li.now .tk-dot:not(:empty){background:var(--ok-text);border-color:var(--ok-text)}
.tk-l small{font-weight:600;font-size:12px}
.tracker-note{font-size:14px;font-weight:700;color:var(--slate);text-align:center}
.ex-bar{display:flex;flex-direction:column;gap:8px}
.ex-hint{font-size:13.5px;color:var(--slate);text-align:center}
.meet-card{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--ocean-tint);border-radius:14px;padding:8px 8px 8px 12px;color:var(--ocean-text)}
.meet-card span{flex:1;min-width:0;display:flex;flex-direction:column}
.meet-card b{color:var(--navy);font-weight:700;font-size:15px}
.meet-card small{font-size:13px;color:var(--slate)}
.meet-card .link-btn{min-height:40px}
.row-btns{display:flex;gap:8px;align-items:center}
.row-btns .btn{flex:1}
.row-btns .link-btn{flex:none;white-space:nowrap}
.confirm{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.sys-msg{align-self:center;max-width:90%;text-align:center;font-size:13.5px;font-weight:700;color:var(--ocean-text);background:var(--ocean-soft);border-radius:999px;padding:6px 14px;margin:4px 0}
.sheet-wrap{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet-shade{position:absolute;inset:0;border:0;background:rgba(21,34,56,.4);cursor:pointer}
.sheet{position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--mist);border-radius:22px 22px 0 0;padding:20px 20px calc(20px + var(--safe-bottom));display:flex;flex-direction:column;gap:14px;animation:sheet-up .25s ease both}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.spot-list{display:flex;flex-direction:column;gap:8px}
.pick-opt.wide span{min-height:50px}
.thread-list .chip-status{flex:none}

/* ---------- step 6: trust & safety ---------- */
.stars{display:inline-flex;gap:1px;vertical-align:-3px}
.rating-line{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--navy);flex-wrap:wrap}
.rating-line b{font-weight:800}
.rating-line.new{color:var(--muted);font-size:14px}
.muted-inline{color:var(--muted)}
.person-name{font:700 22px/1.2 var(--display);margin:0;overflow-wrap:anywhere}
.avatar.biz{background:linear-gradient(135deg,#FFDDA8,#FFF1DC)}
.profile-head .badge{align-self:flex-start}
.review-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.review-list li{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.card .review-list li{background:var(--mist);border-color:transparent}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rv-when{font-size:13px;color:var(--muted);white-space:nowrap}
.rv-body{font-size:15.5px}
.rv-by{font-size:13.5px;font-weight:700;color:var(--slate)}
.btn-danger.solid{background:var(--danger);color:#fff;border-color:var(--danger)}
.safety-callout{background:var(--mango-soft);color:var(--mango-text);border-radius:12px;padding:10px 12px;font-size:15px;font-weight:600}
.person-row{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;padding:12px 14px}
.pr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pr-main b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16.5px}
.report-link{align-self:center;color:var(--slate);font-size:15px}
.chat-safety a{font-weight:700;white-space:nowrap}
.name-link{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:2px;text-underline-offset:4px}
.blocked-note{text-align:center;font-size:15px;color:var(--slate);background:#fff;border:1px solid var(--rule);border-radius:14px;padding:12px}
.blocked-note a{font-weight:700}
.blocked-list{list-style:none;margin:0;padding:0}
.blocked-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding:4px 0}
.blocked-list li:first-child{border-top:0}
.review-card{background:#fff;border:1.5px solid var(--mango-tint);border-radius:16px;padding:14px;align-items:center;text-align:center}
.review-card .field{width:100%;text-align:left}
.review-card .btn{width:100%}
.rc-q{font-size:16.5px}
.star-pick{display:flex;gap:2px}
.star-pick button{width:48px;height:48px;display:grid;place-items:center;border:0;background:none;border-radius:12px;cursor:pointer;padding:0}
.star-pick svg path{fill:#EEF1F6;stroke:#B9C4D4;stroke-width:1.2}
.star-pick button.on svg path{fill:var(--mango);stroke:#E08A00}
.star-pick button:active{transform:scale(.92)}
.star-word{font-weight:700;font-size:15px;color:var(--slate);min-height:22px}
.review-done{background:var(--ok-soft);border-radius:14px;padding:12px 14px;font-size:15px;text-align:center}
.review-done .muted{margin-top:2px}

/* ---------- step 7: payments ---------- */
.pay-box{background:#fff;border:1.5px solid var(--ocean-tint);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pb-title{font:700 16.5px/1.3 var(--display)}
.ex-hint.left{text-align:left}
.price-row{display:flex;gap:8px;align-items:stretch}
.price-row .money-wrap{flex:1;min-width:0}
.price-row .btn{width:auto;flex:none;padding:0 18px}
.pay-sum{text-align:center;font-size:15px;color:var(--slate)}
.pay-ok{display:flex;gap:8px;align-items:flex-start;background:var(--ok-soft);color:var(--ok-text);border-radius:12px;padding:10px 12px;font-size:15px;font-weight:600}
.nudge{background:var(--mango-soft);color:var(--mango-text);border-radius:12px;padding:10px 12px;font-size:15px;font-weight:600}
.nudge a{color:inherit;font-weight:800}
.cancel-link{align-self:center;min-height:40px;padding:4px 8px;color:var(--slate);font-size:15px}
.link-btn.inline{min-height:0;padding:0 2px;font-size:inherit}
.checkout-sheet .demo-tag{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--mango-soft);color:var(--mango-text);border-radius:999px;padding:4px 10px}
.pay-lines{margin:0;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:4px 14px}
.pay-lines div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-variant-numeric:tabular-nums}
.pay-lines div:first-child{border-top:0}
.pay-lines dt{color:var(--slate)}
.pay-lines dd{margin:0;font-weight:700}
.pay-lines .total dt,.pay-lines .total dd{color:var(--navy);font-weight:800}
.chat-actions{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.chat-actions:empty{display:none}

/* ---------- step 8: testing ---------- */
a.test-pill{text-decoration:none;white-space:nowrap}
.test-note{background:var(--mango-soft);color:var(--mango-text);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45}
.test-note b{font-weight:800;word-break:break-word}

/* ---------- animations ---------- */
/* Screen changes: each screen fades up gently. (Uses "top", not transform, so pop-up sheets and the tab bar stay put.) */
.page{flex:1;display:flex;flex-direction:column;position:relative;animation:page-in .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes page-in{from{opacity:0;top:10px}to{opacity:1;top:0}}
.sheet-shade{animation:fade-in .2s ease both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* Celebrations */
.celebrate{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-16px;width:8px;height:13px;border-radius:2px;opacity:0;animation:confetti-fall 1.7s cubic-bezier(.2,.65,.35,1) both}
.confetti i.round{width:9px;height:9px;border-radius:50%}
@keyframes confetti-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),78vh) rotate(var(--spin))}}
.celebrate-toast{position:absolute;left:50%;top:calc(76px + var(--safe-top));transform:translateX(-50%);margin:0;background:var(--navy);color:#fff;font:800 17px/1.2 var(--display);padding:12px 20px;border-radius:999px;box-shadow:0 10px 30px -8px rgba(21,34,56,.5);white-space:nowrap;animation:toast 2.6s cubic-bezier(.2,.8,.3,1) both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-14px) scale(.9)}12%{opacity:1;transform:translate(-50%,0) scale(1.04)}18%{transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}

/* A lively home screen: radar pulse, pins drop in, nearby cards float in */
.radar-rings .pulse{width:24%;aspect-ratio:1;border:2px solid rgba(42,111,219,.5);animation:radar-pulse 3.2s ease-out infinite}
.radar-rings .pulse.late{animation-delay:1.6s}
@keyframes radar-pulse{0%{width:18%;opacity:.9}100%{width:98%;opacity:0}}
.radar-you{animation:you-beat 3.2s ease-in-out infinite}
@keyframes you-beat{0%,100%{box-shadow:0 0 0 6px rgba(42,111,219,.18)}50%{box-shadow:0 0 0 11px rgba(42,111,219,.08)}}
.radar-pin{animation:pin-drop .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pin-drop{0%{opacity:0;transform:translateY(-14px) scale(.4)}100%{opacity:1;transform:none}}
.near-list li{animation:rise .38s cubic-bezier(.2,.7,.3,1) both}
.near-list li:nth-child(2){animation-delay:.05s}
.near-list li:nth-child(3){animation-delay:.1s}
.near-list li:nth-child(4){animation-delay:.15s}
.near-list li:nth-child(5){animation-delay:.2s}
.near-list li:nth-child(n+6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-tile .tile-ic,.q-tile svg{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.q-tile:hover svg{transform:rotate(-6deg) scale(1.06)}
.bmap-pin{animation:pin-drop .4s cubic-bezier(.3,1.5,.5,1) both}

/* Tap feedback */
.btn,.near-list li > a,.thread-list a,.pick-opt,.person-row,.chat-post,.link-btn,.send-btn{transition:transform .12s ease,background-color .15s,box-shadow .15s}
.btn:active:not(:disabled),.send-btn:active:not(:disabled){transform:scale(.97)}
.near-list li > a:active,.thread-list a:active,.person-row:active,.chat-post:active{transform:scale(.985)}
.pick-opt:active{transform:scale(.98)}
.tabbar a[aria-current=page] .tab-ic{animation:tab-bump .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes tab-bump{0%{transform:scale(.85)}100%{transform:scale(1)}}
.star-pick button.on svg{animation:star-pop .32s cubic-bezier(.3,1.6,.5,1)}
.star-pick button:nth-child(2).on svg{animation-delay:.03s}
.star-pick button:nth-child(3).on svg{animation-delay:.06s}
.star-pick button:nth-child(4).on svg{animation-delay:.09s}
.star-pick button:nth-child(5).on svg{animation-delay:.12s}
@keyframes star-pop{0%{transform:scale(1)}45%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1)}}
/* Chat: old messages appear still; new ones slide in from their side */
.msg-row .bubble{animation:none}
.msg-row.fresh .bubble.mine{animation:in-right .26s cubic-bezier(.2,.8,.3,1) both}
.msg-row.fresh .bubble.theirs{animation:in-left .26s cubic-bezier(.2,.8,.3,1) both}
.msg-row.fresh .sys-msg{animation:fade-in .35s ease both}
@keyframes in-right{from{opacity:0;transform:translateX(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes in-left{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}
/* Exchange tracker: the current step glows softly */
.tk-dot{transition:background-color .3s,border-color .3s}
.tracker li.now .tk-dot:empty{animation:step-glow 2.4s ease-in-out infinite}
@keyframes step-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,164,27,.45)}50%{box-shadow:0 0 0 6px rgba(255,164,27,0)}}

/* Respect "reduce motion" on the phone: keep everything still (the loading spinner still turns, slowly). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .spinner{animation-duration:3s!important;animation-iteration-count:infinite!important}
  .confetti{display:none}
}

/* in-app paying (Stripe's secure card box) and payouts */
.checkout-sheet > *{flex-shrink:0}
.pay-element{position:relative;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:14px;min-height:132px}
.pay-element.is-hidden{display:none}
.pay-element.is-loading > div{opacity:0}
.pay-element-wait{display:flex;align-items:center;gap:10px;color:var(--slate);font-size:15px}
.pay-element .pay-element-wait{position:absolute;inset:0;justify-content:center}
.pay-element-wait .spinner{width:20px;height:20px;border-width:2.5px}
.secure-line{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.4;color:var(--muted)}
.secure-line svg{flex:none;margin-top:2px}
.checkout-sheet .btn-primary svg{margin-right:2px}
.connect-box{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px}