:root{
  --bg:#f3f5fa; --fg:#0e1320; --muted:#5d6577; --card:#ffffff; --line:rgba(14,19,32,.10);
  --accent:#ff3b5c; --accent2:#ff7a45; --blue:#2f7bff; --ok:#17b26a; --warn:#b26b00; --warnbg:#fff4dd;
  --hud:rgba(255,255,255,.92); --shadow:0 8px 30px rgba(10,20,40,.16);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --rot:0deg; --unrot:0deg;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b0f17; --fg:#eef2fb; --muted:#97a0b4; --card:#151b27; --line:rgba(255,255,255,.10);
  --hud:rgba(18,23,34,.92); --shadow:0 8px 30px rgba(0,0,0,.5); --warn:#ffc35c; --warnbg:#2b2210;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font:17px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
[hidden]{display:none!important}
button,input,a{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,.filebtn:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:15px}
h1,h2{margin:0;letter-spacing:-.02em}

/* ---------- home ---------- */
.screen{min-height:100%}
.home{display:flex;flex-direction:column;max-width:520px;margin:0 auto;
  padding:calc(var(--safe-t) + 28px) 20px calc(var(--safe-b) + 20px);min-height:100dvh}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.brand h1{font-size:30px;font-weight:800}
.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(255,59,92,.35)}
.logo svg{width:24px;height:24px;fill:#fff}
.stack{display:flex;flex-direction:column;gap:14px;flex:1}
.lead{font-size:19px;color:var(--muted);margin:0 0 6px}
.lead.small{font-size:16px}
.big{min-height:72px;border:0;border-radius:22px;font-size:22px;font-weight:750;padding:16px 20px;
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 10px 26px rgba(255,59,92,.32)}
.primary:active{transform:scale(.98)}
#empty .big{min-height:120px;font-size:25px;margin-top:auto}
#empty{justify-content:flex-start}
.mid{min-height:56px;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:12px 14px;
  font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;width:100%}
.mid.ghost{background:transparent}
.link-btn{text-decoration:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.textbtn{background:none;border:0;color:var(--muted);text-decoration:underline;min-height:48px;font-size:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:10px;font-size:20px}
.card-head .muted{margin-left:auto;font-size:15px}
.card p{margin:8px 0 0}
.note{font-size:18px;font-weight:600}
.pulse{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(23,178,106,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(23,178,106,0)}100%{box-shadow:0 0 0 0 rgba(23,178,106,0)}}
.photo-thumb{margin-top:12px;padding:0;border:0;background:none;display:block;width:100%}
.photo-thumb img{width:100%;max-height:180px;object-fit:cover;border-radius:14px;display:block}
.home-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:10px 16px;min-height:44px;font-size:15px;font-weight:600}

/* ---------- guide ---------- */
.guide{max-width:560px;margin:0 auto;padding:calc(var(--safe-t) + 14px) 18px calc(var(--safe-b) + 30px)}
.sub-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sub-head h2{font-size:21px;line-height:1.25}
.steps{padding-left:22px;margin:14px 0}
.steps li{margin:0 0 14px;padding-left:4px}
.tpl{display:block;margin:8px 0;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font:15px/1.35 ui-monospace,Menlo,monospace;word-break:break-all;user-select:all;-webkit-user-select:all}
.warn{background:var(--warnbg);color:var(--warn);border-radius:14px;padding:12px 14px;font-size:15px}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;
  background:rgba(5,8,14,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.acq-card{width:100%;max-width:380px;background:var(--card);border-radius:28px;padding:26px 22px;text-align:center;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;align-items:stretch}
.acq-card h2{font-size:24px}
.acq-card p{margin:0}
.ring{position:relative;width:120px;height:120px;margin:0 auto 6px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .25s linear}
.ring-ico{position:absolute;inset:0;display:grid;place-items:center;font-size:38px}
.acq-acc{font-size:22px;font-weight:750}
.big-emoji{font-size:64px;line-height:1}

/* ---------- map screen ---------- */
.map-screen{position:fixed;inset:0;overflow:hidden;background:var(--bg)}
#mapWrap{position:absolute;inset:0;overflow:hidden}
#map{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--bg);transform-origin:50% 50%}
.headup #map{transform:rotate(var(--rot))}
.leaflet-container{background:var(--bg);font:inherit}
.dark-tiles .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.6)}

.hud{position:absolute;z-index:1000;left:12px;right:12px;top:calc(var(--safe-t) + 10px);
  background:var(--hud);border-radius:26px;box-shadow:var(--shadow);padding:12px;display:flex;gap:14px;align-items:center;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-width:520px;margin:0 auto}
.dial{position:relative;flex:0 0 auto;width:112px;height:112px;border-radius:50%;border:0;padding:0;
  background:radial-gradient(circle at 50% 40%,var(--card),var(--bg));box-shadow:inset 0 0 0 2px var(--line)}
.dial-n{position:absolute;top:4px;left:50%;margin-left:-8px;width:16px;text-align:center;font-size:12px;font-weight:800;color:var(--accent);
  transform-origin:8px 52px;transform:rotate(var(--nrot,0deg))}
.arrow{position:absolute;inset:14px;display:block;transform:rotate(var(--arot,0deg))}
.arrow svg{width:100%;height:100%;fill:var(--accent);filter:drop-shadow(0 3px 6px rgba(255,59,92,.45))}
.dial.noheading .arrow svg{fill:var(--muted);filter:none}
.dial.ahead .arrow svg{fill:var(--ok);filter:drop-shadow(0 3px 6px rgba(23,178,106,.5))}
.hud-text{min-width:0;flex:1}
.dist{font-size:44px;font-weight:850;letter-spacing:-.03em;line-height:1}
.dist .unit{font-size:22px;font-weight:700;margin-left:4px;color:var(--muted)}
.hint{font-size:19px;font-weight:700;margin-top:6px}
.sub{font-size:14.5px;margin-top:2px}
.edit-hud{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px}
.compass-cta{position:absolute;z-index:1001;left:50%;transform:translateX(-50%);top:calc(var(--safe-t) + 152px);
  border:0;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:17px;padding:14px 20px;min-height:52px;
  box-shadow:0 8px 22px rgba(47,123,255,.4);white-space:nowrap}
.banner{position:absolute;z-index:1000;left:12px;right:12px;max-width:520px;margin:0 auto;top:calc(var(--safe-t) + 150px);
  background:var(--warnbg);color:var(--warn);border-radius:16px;padding:10px 14px;font-size:15px;font-weight:600;box-shadow:var(--shadow)}
.compass-cta:not([hidden]) ~ .banner{top:calc(var(--safe-t) + 214px)}
.bar{position:absolute;z-index:1000;left:12px;right:12px;bottom:calc(var(--safe-b) + 14px);display:flex;gap:10px;
  justify-content:space-between;align-items:center;max-width:520px;margin:0 auto}
.round{width:58px;height:58px;flex:0 0 58px;border-radius:50%;border:0;background:var(--hud);box-shadow:var(--shadow);font-size:24px;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.round.on{background:var(--blue);color:#fff}
.pill{flex:1;height:58px;border-radius:29px;border:0;background:var(--hud);box-shadow:var(--shadow);font-weight:700;font-size:17px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pill[aria-pressed="true"]{background:var(--blue);color:#fff}
.sheet{position:absolute;z-index:1000;left:0;right:0;bottom:0;background:var(--card);border-radius:26px 26px 0 0;
  padding:18px 16px calc(var(--safe-b) + 16px);box-shadow:0 -8px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:12px;
  max-width:560px;margin:0 auto}
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px;color:var(--muted)}
.field input{min-height:52px;border-radius:14px;border:1px solid var(--line);background:var(--bg);padding:0 14px;font-size:17px;color:var(--fg)}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%}
.photo-preview{max-height:110px;width:100%;object-fit:cover;border-radius:12px}
.attrib{position:absolute;z-index:999;right:6px;bottom:calc(var(--safe-b) + 80px);font-size:10px;color:var(--muted);
  background:var(--hud);padding:1px 6px;border-radius:6px;max-width:70%;text-align:right}
.editing .attrib{bottom:auto;top:calc(var(--safe-t) + 92px)}
.attrib a{color:inherit}

/* markers */
.car-icon,.me-icon{background:none;border:0}
.upright{transform-origin:50% 100%;transform:rotate(var(--unrot))}
.pin{width:52px;height:52px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin:0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2));border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.35);display:grid;place-items:center}
.pin span{transform:rotate(45deg);font-size:24px;line-height:1}
.me{position:relative;width:90px;height:90px}
.me .dot{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--blue);
  border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.me .cone{position:absolute;inset:0;transform-origin:50% 50%;
  background:conic-gradient(from -30deg at 50% 50%,rgba(47,123,255,.55),rgba(47,123,255,0) 60deg,transparent 60deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0 44px,transparent 45px);mask:radial-gradient(circle at 50% 50%,#000 0 44px,transparent 45px)}
.me.nohead .cone{display:none}

.toast{position:fixed;z-index:3000;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 96px);background:#111827;color:#fff;
  padding:12px 18px;border-radius:999px;font-weight:600;font-size:15px;box-shadow:var(--shadow);max-width:90vw;text-align:center}
.photo-view{background:rgba(0,0,0,.92)}
.photo-view img{max-width:100%;max-height:85vh;border-radius:12px}
.photo-view .round{position:absolute;top:calc(var(--safe-t) + 14px);right:14px}
@media (max-width:360px){.dial{width:96px;height:96px}.dist{font-size:38px}.dial-n{transform-origin:8px 44px}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.how{list-style:none;margin:6px 0 auto;padding:0;display:flex;flex-direction:column;gap:12px}
.how li{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.how-ico{font-size:28px;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--bg);flex:0 0 44px}
.how b{display:block;font-size:18px}
.how .muted{font-size:15px}
#empty .lead{margin-bottom:8px}
.toast.top{bottom:auto;top:calc(var(--safe-t) + 132px)}

/* ---- v3: live "getting closer / walking away" bar ---- */
.trend{position:absolute;z-index:1002;left:12px;right:12px;max-width:520px;margin:0 auto;top:calc(var(--safe-t) + 8px);
  border-radius:20px;padding:10px 16px 9px;box-shadow:var(--shadow);background:var(--hud);color:var(--fg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .35s ease,color .35s ease;text-align:center}
.trend-main{font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-note{font-size:12px;font-weight:600;opacity:.85;margin-top:2px;line-height:1.25}
.trend.t-closer{background:#14a660;color:#fff}
.trend.t-away{background:#e0342f;color:#fff;animation:trendPulse 1.2s ease-in-out 2}
.trend.t-side{background:#f2a20c;color:#1d1400}
@keyframes trendPulse{50%{transform:scale(1.025)}}
#findHud{top:calc(var(--safe-t) + 80px)}
.compass-cta{top:calc(var(--safe-t) + 214px)}
.banner,.compass-cta:not([hidden]) ~ .banner{top:calc(var(--safe-t) + 280px)}
.toast.top{top:calc(var(--safe-t) + 206px)}
.dtrend{font-size:26px;font-weight:900;margin-left:6px}
.dtrend.down{color:var(--ok)}
.dtrend.up{color:#e0342f}
@media (max-width:360px){.trend-main{font-size:17px}}