:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;--bg:#f4f3fa;--panel:#fff;--panel2:#f8f7fc;--ink:#101126;--muted:#77778c;--line:#e8e5f2;--violet:#6847ef;--violet2:#8b5cf6;--violet-soft:#efeaff;--green:#31bb7b;--danger:#ec5570;--shadow:0 20px 55px #30265b18;color:var(--ink);background:var(--bg)}
:root[data-theme="dark"]{--bg:#090b14;--panel:#0d101b;--panel2:#141827;--ink:#f7f7fb;--muted:#979aab;--line:#24293a;--violet:#8c62ff;--violet2:#6d45f2;--violet-soft:#1b1730;--green:#3fd18e;--danger:#ff6b84;--shadow:0 20px 55px #0008}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{min-height:100dvh}.app-shell{width:min(100%,520px);min-height:100dvh;margin:auto;background:var(--panel);box-shadow:var(--shadow);position:relative;overflow:hidden}.screen{display:none;min-height:100dvh;padding:24px 26px calc(28px + env(safe-area-inset-bottom))}.screen.active{display:flex}.hidden{display:none!important}
.screen-home{background:radial-gradient(circle at 80% 85%,#39216f 0,#171941 38%,#0a0d21 100%);color:#fff;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}.home-tools{position:absolute;top:calc(16px + env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:flex-end;gap:8px}.compact-control{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #ffffff20;background:#ffffff0c;border-radius:10px;font-size:11px;color:#d8d6e8}.compact-control select{border:0;background:transparent;color:#fff;font:inherit;font-weight:700;outline:none}.compact-control option{color:#111}.brand-mark{width:86px;height:86px;border:3px solid #6e52e8;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 0 45px #7452ff35}.brand-mark span{font-size:52px;line-height:1;transform:rotate(-25deg);color:#fff;text-shadow:0 0 18px #987bff}.screen-home h1{font-size:54px;line-height:1;margin:0 0 24px;letter-spacing:-2px}.lead{font-size:19px;line-height:1.55;max-width:360px;color:#ecebfa;margin:0 0 48px}.home-actions{width:100%;display:grid;gap:14px}.button{appearance:none;border:0;border-radius:14px;min-height:58px;padding:0 22px;font:inherit;font-weight:750;font-size:16px;cursor:pointer}.primary{color:#fff;background:linear-gradient(135deg,#5c38ef,#814bfa);box-shadow:0 14px 34px #7247f233}.secondary{background:#ffffff08;border:1px solid #a9a3c3;color:#fff}.privacy{margin:26px 0 0;color:#c9c6db;font-size:13px}
.screen-compass,.screen-join{flex-direction:column;background:var(--panel)}.topbar{height:54px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;text-align:center;font-size:19px}.icon-button{appearance:none;border:0;background:transparent;font-size:34px;line-height:1;color:var(--ink);cursor:pointer}.settings-icon{font-size:22px}.topbar-spacer{width:48px}.share-panel{text-align:center;padding:6px 0 0}.eyebrow{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:750;font-size:13px;margin-bottom:5px}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #31bb7b16}.share-url{font-size:12px;color:var(--violet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}.small-button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:10px;padding:9px 14px;font-weight:700}.status-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 2px;color:var(--muted);font-size:12px}.dot{width:8px;height:8px;border-radius:50%;background:#d0cbdc}.dot.live{background:var(--green);box-shadow:0 0 0 5px #31bb7b16}.dot.warn{background:#f4a23b}
.direction-stage{display:grid;place-items:center;margin-top:3px}.compass-wrap{position:relative;width:min(76vw,326px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle,var(--panel) 0,var(--panel) 56%,var(--violet-soft) 100%);box-shadow:inset 0 0 42px #7757e80d}.ticks{position:absolute;inset:8%;border-radius:50%;background:repeating-conic-gradient(from -1deg,#8e90a6 0 1deg,transparent 1deg 15deg);mask:radial-gradient(circle,transparent 0 91%,#000 92% 100%);opacity:.55}.cardinal{position:absolute;color:var(--muted);font-weight:800;font-size:16px;z-index:2}.north{top:12px;left:50%;transform:translateX(-50%)}.south{bottom:12px;left:50%;transform:translateX(-50%)}.east{right:14px;top:50%;transform:translateY(-50%)}.west{left:14px;top:50%;transform:translateY(-50%)}.north-marker{position:absolute;top:34px;left:50%;transform:translateX(-50%);color:var(--violet);font-size:10px;opacity:.9}.friend-arrow{position:absolute;left:50%;top:50%;width:110px;height:220px;transform:translate(-50%,-50%) rotate(0deg);transform-origin:center;transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .2s;filter:drop-shadow(0 12px 22px #6847ef55);z-index:3}.arrow-stem{position:absolute;width:32px;height:112px;border-radius:22px;left:39px;top:76px;background:linear-gradient(180deg,var(--violet),var(--violet2))}.arrow-head{position:absolute;left:11px;top:24px;width:88px;height:88px;background:linear-gradient(145deg,var(--violet2),var(--violet));clip-path:polygon(50% 0,100% 75%,65% 63%,65% 100%,35% 100%,35% 63%,0 75%);border-radius:18px}.friend-arrow.waiting{opacity:.18;filter:grayscale(.5)}
.distance-value{text-align:center;font-size:42px;font-weight:850;letter-spacing:-1.5px;margin-top:18px}.direction-label{text-align:center;font-size:21px;font-weight:800;margin-top:2px}.direction-text{text-align:center;color:var(--muted);font-size:13px;line-height:1.45;margin:7px auto 15px;max-width:340px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.info-card{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 13px}.info-card small{display:block;color:var(--muted);font-size:10px;margin-bottom:3px}.info-card strong{font-size:13px}.info-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet)}.orientation{background:var(--violet-soft);color:var(--violet);margin-bottom:10px}.bottom-actions{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:center;gap:28px}.text-button{appearance:none;border:0;background:transparent;color:var(--violet);font:inherit;font-weight:750;padding:8px;cursor:pointer}.danger{color:var(--danger)}
.join-content{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:78px;text-align:center}.people-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:34px}.join-content h2{font-size:30px;letter-spacing:-.8px;margin:24px 0 10px}.join-content p{color:var(--muted);margin:0 0 34px}.join-content input{width:100%;height:62px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:0 16px;font:inherit;font-size:15px;outline:none;margin-bottom:18px}.join-content input:focus{border-color:#8469ec;box-shadow:0 0 0 4px #7a5af519}.join-content .button{width:100%}.privacy-card{width:100%;margin-top:auto;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:6px;font-size:13px}.privacy-card span{color:var(--muted);line-height:1.45}
.sheet-backdrop{position:fixed;inset:0;background:#0006;z-index:20;display:flex;align-items:flex-end;justify-content:center}.settings-sheet{width:min(100%,520px);background:var(--panel);color:var(--ink);border-radius:22px 22px 0 0;padding:10px 22px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px #0004}.sheet-handle{width:42px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 12px}.sheet-header{display:flex;align-items:center;justify-content:space-between}.sheet-header h2{font-size:21px}.close-button{border:0;background:var(--panel2);color:var(--ink);width:36px;height:36px;border-radius:50%;font-size:24px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid var(--line)}.setting-row span{display:grid;gap:4px}.setting-row small{color:var(--muted)}.setting-row select{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:10px;padding:10px;font:inherit}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);background:#15152a;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:30;font-size:14px;max-width:min(90vw,440px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:430px){.screen{padding-left:20px;padding-right:20px}.screen-home h1{font-size:48px}.compass-wrap{width:min(80vw,315px)}.distance-value{font-size:38px}.home-tools{left:10px;right:10px}.compact-control span{display:none}}

.location-consent{margin:14px 0 8px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--panel2),var(--violet-soft));display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;box-shadow:0 10px 28px #3f2fb50c}.location-consent-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:25px;font-weight:800}.location-consent-copy{min-width:0}.location-consent-copy strong{font-size:16px}.location-consent-copy p{margin:5px 0 7px;color:var(--muted);font-size:13px;line-height:1.45}.location-consent-copy small{display:block;color:var(--muted);font-size:11px;line-height:1.4}.location-consent .location-help{color:#d1742d;font-weight:650;margin-top:8px}.location-button{grid-column:1/-1;width:100%;margin-top:2px;padding:13px 16px}.location-button:disabled{opacity:.62;cursor:wait}
html[data-theme="dark"] .location-consent .location-help{color:#ffb467}