/* WYATho. Built from the approved mockup, direction C "Name Tags".
   Part 1: page shell. Part 2: the mockup's c.css, unchanged. Part 3: map rules from the
   mockup's core.css. Part 4: what a working site needs that the mockup did not draw. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;margin:0;overscroll-behavior:none;background:#f4f3f8;-webkit-text-size-adjust:100%}
html[data-theme="dark"],html[data-theme="dark"] body{background:#0e0c14}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;padding:0;text-align:inherit;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
svg{display:block}
.dev{position:relative;width:100%;height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
#ui{position:absolute;inset:0;z-index:2;pointer-events:none}
#ui>*{pointer-events:auto}
/* Direction C: Name Tags. Map always behind; name tags on the map; rounded cards; one violet. */
:root{--bg:#f4f3f8;--sheet:#fff;--fg:#14121c;--mut:#6f6b7d;--line:#ebe9f2;--card:#f6f5fa;--acc:#6e4bff;--acc-soft:rgba(110,75,255,.12);--old:#d97706;--red:#e5342b;--tag:#fff}
[data-theme="dark"]{--bg:#0e0c14;--sheet:#17151f;--fg:#f3f1fa;--mut:#a29db3;--line:#2a2736;--card:#211e2b;--acc:#8b6dff;--acc-soft:rgba(139,109,255,.18);--old:#f5a524;--red:#ff5a4f;--tag:#221f2c}
.dev{background:var(--bg);color:var(--fg);font-family:"Plus Jakarta Sans",-apple-system,sans-serif}
.sb-wrap{color:var(--fg)}
.mode-safari .sb-wrap,.mode-home .sb-wrap{background:var(--bg)}
.vp .map{z-index:0}

/* name tags on the map */
.c-tag{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:20px;background:var(--tag);color:var(--fg);box-shadow:0 3px 10px rgba(20,10,60,.28);white-space:nowrap;font-family:"Plus Jakarta Sans",-apple-system,sans-serif}
.c-tag:after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--tag)}
.c-tag img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.c-tag b{font-size:13.5px;font-weight:800}
.c-tag span{font-size:12.5px;font-weight:700;color:var(--mut)}
.c-tag.f-live{background:var(--acc);color:#fff}.c-tag.f-live:after{border-top-color:var(--acc)}.c-tag.f-live span{color:rgba(255,255,255,.85)}
.c-tag.f-old span{color:var(--old)}

/* top bar over the map */
.c-top{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:8px;align-items:center;z-index:5}
.c-rb{width:44px;height:44px;border-radius:50%;background:var(--sheet);box-shadow:0 2px 10px rgba(20,10,60,.2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--fg)}
.c-rb img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.c-rb svg{width:20px;height:20px}
.c-rb.add{background:var(--acc);color:#fff;margin-left:auto}
.c-rb.back{position:absolute;top:10px;left:12px;z-index:5}
.c-chips{flex:1;min-width:0;display:flex;gap:6px;overflow:hidden}
.c-chips a{flex:none;height:36px;padding:0 13px;border-radius:12px;background:var(--sheet);font-size:14px;font-weight:700;display:flex;align-items:center;box-shadow:0 2px 8px rgba(20,10,60,.16)}
.c-chips a.on{background:var(--fg);color:var(--bg)}
.c-chips a.add{padding:0 10px}.c-chips a.add svg{width:18px;height:18px}
.c-filter{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:5;height:32px;padding:0 12px;border-radius:16px;background:var(--acc);color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.c-filter svg{width:15px;height:15px}

/* sheets */
.c-sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:10;background:var(--sheet);border-radius:28px;padding:8px 16px 16px;box-shadow:0 8px 30px rgba(20,10,60,.22);overflow:hidden}
.c-sheet.tall{top:110px}
.c-sheet.full{top:16px;overflow-y:auto;scrollbar-width:none}
.c-sheet.friend{top:236px}
.c-sheet.top80{z-index:80;display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
.c-sheet.signin{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.c-grab{display:block;width:36px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 8px}
.c-sh-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.c-sh-h b{font-size:21px;font-weight:800;letter-spacing:-.4px}
.c-sh-h span{font-size:13px;color:var(--mut);font-weight:600}
.c-sh-h.center{justify-content:center}
.c-x{width:30px;height:30px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--mut)}.c-x svg{width:13px;height:13px}
.c-txt{font-size:16px;color:var(--acc);font-weight:600}.c-txt.b{font-weight:800}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c-grid.one{grid-template-columns:1fr}
.c-tile{display:flex;gap:10px;align-items:center;padding:10px;border-radius:18px;background:var(--card);min-width:0}
.c-tile img{width:48px;height:48px;border-radius:15px;object-fit:cover;flex:none}
.c-tile img.f-live{box-shadow:0 0 0 2.5px var(--acc)}
.c-tile img.f-paused{filter:grayscale(1)}
.c-tile>span{display:flex;flex-direction:column;min-width:0;gap:1px}
.c-tile b{font-size:15.5px;font-weight:800}
.c-tile em{font-style:normal;font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-fr{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--fg)}
.c-fr i{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.c-fr.live{color:var(--acc)}.c-fr.old{color:var(--old)}.c-fr.paused{color:var(--mut)}.c-fr svg{width:11px;height:11px}

/* friend sheet (profile) */
.c-prof{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;margin:-50px 0 12px}
.c-prof img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:4px solid var(--sheet);box-shadow:0 4px 14px rgba(20,10,60,.25)}
.c-prof img.f-live{box-shadow:0 0 0 3px var(--acc)}.c-prof img.f-paused{filter:grayscale(1)}
.c-prof h1{font-size:26px;font-weight:800;letter-spacing:-.6px;margin-top:4px}
.c-prof p{font-size:14.5px;color:var(--mut)}
.c-prof .c-fr{font-size:14px;margin-top:2px;padding:4px 10px;border-radius:12px;background:var(--card)}
.c-sheet.friend{overflow:visible}
.c-circles{display:flex;justify-content:center;gap:22px;margin:4px 0 12px}
.c-circles.left{justify-content:flex-start;gap:18px}
.c-circ{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:700;width:84px;text-align:center}
.c-circ i{width:58px;height:58px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.c-circ i svg{width:24px;height:24px}
.c-circ.main i{background:var(--acc);color:#fff}
.c-circ.done i{background:var(--acc-soft);color:var(--acc)}
.c-card{background:var(--card);border-radius:18px;overflow:hidden;margin-bottom:10px}
.c-cell{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:15.5px;font-weight:600;border-bottom:1px solid var(--line)}
.c-cell:last-child{border-bottom:0}
.c-cell em{font-style:normal;color:var(--mut);font-weight:500;display:flex;align-items:center;gap:4px}.c-cell em svg{width:14px;height:14px}
.c-cell.acc span{color:var(--acc);display:flex;align-items:center;gap:8px}.c-cell.acc svg{width:18px;height:18px}
.c-red{display:block;text-align:center;color:var(--red);font-weight:700;font-size:16px;padding:6px 0}
.c-note{font-size:14px;color:var(--mut);line-height:1.4;margin-bottom:10px}
.c-note.center{text-align:center}
.c-toast{position:absolute;top:10px;left:66px;right:12px;z-index:6;display:flex;gap:8px;align-items:center;padding:11px 14px;border-radius:16px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:700}
.c-toast svg{width:18px;height:18px;color:var(--acc);flex:none}
.c-blank{position:absolute;inset:0 0 auto 0;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--mut);background:var(--card)}
.c-blank svg{width:28px;height:28px}

/* floating cards over the map */
.c-veil{position:absolute;inset:0;background:rgba(14,10,30,.32);z-index:1}
.c-veil.strong{background:rgba(14,10,30,.55)}
.c-card-float{position:absolute;left:14px;right:14px;bottom:14px;z-index:10;background:var(--sheet);border-radius:30px;padding:24px 20px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;box-shadow:0 10px 40px rgba(20,10,60,.3)}
.mode-home .c-card-float{bottom:44px}
.c-card-float h2{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.15}
.c-card-float p{font-size:15px;color:var(--mut);line-height:1.4}
.c-big{width:80px;height:80px;border-radius:50%;object-fit:cover}
.c-trio{display:flex}.c-trio img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--sheet);margin-left:-12px}.c-trio img:first-child{margin-left:0}
.c-trio.big img{width:78px;height:78px}
.c-why{display:flex;flex-direction:column;gap:12px;text-align:left;margin:4px 0 6px;width:100%}
.c-why div{display:flex;gap:12px;align-items:flex-start}
.c-why svg{width:22px;height:22px;flex:none;color:var(--acc);margin-top:1px}
.c-why p{font-size:14.5px;color:var(--mut);line-height:1.38}.c-why b{color:var(--fg)}
.c-btn{width:100%;height:54px;border-radius:18px;background:var(--acc);color:#fff;font-size:16.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.c-btn.plain{background:none;color:var(--acc);height:44px}
.c-btn.red{background:var(--red)}
.c-h2{font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.15;text-align:center;margin-top:4px}
.c-sheet.top80 .c-note{text-align:center;margin:0}
.c-warn{width:50px;height:50px;border-radius:50%;background:rgba(245,165,36,.18);color:var(--old);display:flex;align-items:center;justify-content:center;margin:0 auto}.c-warn svg{width:24px;height:24px}
.c-h3{font-size:15px;font-weight:800;margin:14px 2px 8px}

/* forms (Airbnb-style joined inputs) */
.c-inputs{border:1.5px solid var(--line);border-radius:18px;overflow:hidden}
.c-inputs label{display:flex;flex-direction:column;padding:9px 16px;border-bottom:1.5px solid var(--line)}
.c-inputs label:last-child{border-bottom:0}
.c-inputs span{font-size:12px;font-weight:700;color:var(--mut)}
.c-inputs input{border:0;background:none;font:600 17px "Plus Jakarta Sans",-apple-system,sans-serif;color:var(--fg);outline:none;padding:2px 0}
.c-inputs input::placeholder{color:var(--mut);font-weight:500}
.c-inputs.one{margin-bottom:6px}
.c-tiny{font-size:12.5px;color:var(--mut);line-height:1.4;text-align:center}
.c-invhead{display:flex;gap:12px;align-items:center}
.c-invhead img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.c-invhead b{display:block;font-size:20px;font-weight:800}.c-invhead em{font-style:normal;color:var(--mut);font-size:14px}

/* add friend */
.c-preview{background:var(--acc-soft);border-radius:18px;padding:12px 14px;margin-bottom:14px}
.c-preview span{font-size:12px;font-weight:800;color:var(--acc)}
.c-preview p{font-size:15px;line-height:1.38;margin-top:3px}
.c-prow{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.c-prow:last-child{border-bottom:0}
.c-prow.faded{opacity:.5}
.c-prow img{width:42px;height:42px;border-radius:14px;object-fit:cover;flex:none}
.c-prow>span{flex:1;min-width:0;display:flex;flex-direction:column}
.c-prow b{font-size:15.5px;font-weight:800}
.c-prow em{font-style:normal;font-size:13px;color:var(--mut);line-height:1.3}
.c-prow>.c-cb{flex:none}
.c-yn{flex:none!important;flex-direction:row!important;gap:6px}
.c-pill{height:32px;padding:0 12px;border-radius:12px;background:var(--acc);color:#fff;font-size:13.5px;font-weight:800;display:flex;align-items:center;flex:none}
.c-pill.gray{background:var(--line);color:var(--fg)}
.c-pill.line{background:none;border:1.5px solid var(--line);color:var(--red)}
.c-lkimg{display:flex;height:130px;align-items:center;justify-content:center;background:linear-gradient(135deg,#e2dbff,#a996ff)}
[data-theme="dark"] .c-lkimg{background:linear-gradient(135deg,#251c4a,#3d2a8a)}

/* lists */
.c-radios{display:flex;flex-direction:column}
.c-radios a{display:flex;gap:14px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)}
.c-radios i{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none}
.c-radios a.on i{border:7px solid var(--acc)}
.c-radios span{display:flex;flex-direction:column}
.c-radios b{font-size:16px;font-weight:800}.c-radios em{font-style:normal;font-size:13px;color:var(--mut)}
.c-newlist{display:flex;align-items:center;gap:6px;color:var(--acc);font-weight:800;font-size:15.5px;padding:14px 2px}.c-newlist svg{width:18px;height:18px}
.c-count{font-size:13px;font-weight:800;color:var(--acc);margin:10px 2px 8px}
.c-cb{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent;flex:none}
.c-cb.on{background:var(--acc);border-color:var(--acc);color:#fff}.c-cb svg{width:14px;height:14px}

/* me */
.c-mehead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.c-mehead img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.c-mehead span{display:flex;flex-direction:column}.c-mehead b{font-size:19px;font-weight:800}.c-mehead em{font-style:normal;font-size:14px;color:var(--mut)}
.c-toggle{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:20px;background:var(--card)}
.c-toggle.on{background:var(--acc-soft)}
.c-toggle b{display:block;font-size:17px;font-weight:800}.c-toggle em{font-style:normal;font-size:13.5px;color:var(--mut)}
.c-sw{width:51px;height:31px;border-radius:16px;background:var(--line);position:relative;flex:none}
.c-sw i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.c-toggle.on .c-sw{background:var(--acc)}.c-toggle.on .c-sw i{left:22px}
.c-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.c-steps div{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:var(--card);font-size:15.5px;line-height:1.35}
.c-steps i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.c-inl svg{display:inline-block;width:18px;height:18px;vertical-align:-3px;color:#0a84ff}
.c-arrow{position:absolute;bottom:10px;left:50%;margin-left:-14px;width:28px;height:28px;color:var(--acc);transform:rotate(180deg)}
.c-done{display:flex;gap:12px;align-items:center;margin:4px 2px 12px}
.c-done>span{width:42px;height:42px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}.c-done>span svg{width:22px;height:22px}
.c-done b{font-size:18px;font-weight:800}.c-done p{font-size:13.5px;color:var(--mut);margin-top:2px}

/* ---- map (from the mockup's core.css) ---- */
.map{position:absolute;inset:0;background:#e9e6df;z-index:0}
[data-theme="dark"] .map{background:#1b1c1f}
.pm{background:none!important;border:0!important}
.me-dot{display:block;width:22px;height:22px;border-radius:50%;background:#0a84ff;border:3.5px solid #fff;box-shadow:0 0 0 7px rgba(10,132,255,.22),0 1px 4px rgba(0,0,0,.35)}
.leaflet-control-attribution{font-size:8.5px!important;background:none!important;color:rgba(0,0,0,.42)!important;padding:0!important;margin:0 0 0 14px!important;text-shadow:0 0 2px rgba(255,255,255,.9)}
[data-theme="dark"] .leaflet-control-attribution{color:rgba(255,255,255,.4)!important;text-shadow:0 0 2px rgba(0,0,0,.9)}
.leaflet-bottom.leaflet-left{bottom:var(--credit-b,0px);transition:bottom .3s cubic-bezier(.2,.8,.2,1)}
.leaflet-control-attribution a{color:inherit!important}
.leaflet-container{font-family:"Plus Jakarta Sans",-apple-system,sans-serif}
.appicon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.appicon svg{width:60%;height:60%}

/* ---- part 4: working-site additions ---- */
.c-top{top:calc(10px + env(safe-area-inset-top))}
.c-rb.back{top:calc(10px + env(safe-area-inset-top))}
.c-toast{top:calc(10px + env(safe-area-inset-top))}
.c-toast.float{top:auto;left:12px;right:12px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:90}
.c-sheet{bottom:calc(8px + env(safe-area-inset-bottom))}
.c-sheet.people{max-height:58%;overflow-y:auto;scrollbar-width:none}
.c-sheet.tall,.c-sheet.full{overflow-y:auto;scrollbar-width:none}
/* Friend sheet: the photo overhangs the top edge as in the mockup, so it never clips;
   it keeps the mockup's top on a full-height phone and grows upward on a short one. */
.c-sheet.friend{top:auto;min-height:calc(100% - 244px);overflow:visible}
.c-sheet::-webkit-scrollbar{display:none}
.c-card-float{bottom:calc(14px + env(safe-area-inset-bottom))}
.c-rb{position:relative}
.c-badge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--sheet)}
.c-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 6px 2px}
.c-empty b{font-size:18px;font-weight:800}
.c-empty p{font-size:14.5px;color:var(--mut);line-height:1.4;margin-bottom:6px}
.c-red.acc{color:var(--acc)}
.c-red.quiet{color:var(--mut);font-weight:700;font-size:15px;margin-top:6px}
.c-pill.acc{background:none;border:1.5px solid var(--line);color:var(--acc)}
.c-err{font-size:13.5px;color:var(--red);text-align:center;font-weight:700}
.c-radios .c-row{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line)}
.c-radios .c-row>a{flex:1;min-width:0;border-bottom:0}
.c-radios .c-row>a.c-txt{flex:none;font-size:14.5px;padding:8px 4px;border-bottom:0}
.c-radios em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.c-blank{top:0}
.c-btn[disabled]{opacity:.6}
.c-cell{width:100%}
.c-circ{color:inherit}
.c-x{flex:none}
input{-webkit-appearance:none;appearance:none;border-radius:0}

/* Sheets that slide down so the map is free to move */
.c-sheet.friend,.c-sheet.people{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.c-sheet.friend.down{transform:translateY(calc(100% - 132px))}
.c-sheet.people.down{transform:translateY(calc(100% - 58px));overflow:hidden}
.c-sheet.down>*{pointer-events:none}
.c-sheet.friend .c-grab,.c-sheet.people .c-grab{width:40px;background:#c9c6d6}
[data-theme="dark"] .c-sheet.friend .c-grab,[data-theme="dark"] .c-sheet.people .c-grab{background:#4a465a}

/* Who can see you, under the top row */
.c-see{position:absolute;top:calc(66px + env(safe-area-inset-top));left:12px;z-index:5;height:30px;padding:0 12px 0 10px;border-radius:15px;background:var(--sheet);color:var(--fg);font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;box-shadow:0 3px 10px rgba(20,10,60,.22);white-space:nowrap}
.c-see.low{top:calc(104px + env(safe-area-inset-top))}
.c-see i{width:8px;height:8px;border-radius:50%;background:#1fbf75}
.c-see.off i{background:var(--old)}

/* Grouped name tags */
.c-clu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;padding:4px 13px 4px 4px;border-radius:24px;background:var(--tag);color:var(--fg);box-shadow:0 3px 12px rgba(20,10,60,.3);font-family:"Plus Jakarta Sans",-apple-system,sans-serif;font-size:13.5px;font-weight:800;white-space:nowrap}
.c-clu img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--tag);margin-left:-11px}.c-clu img:first-child{margin-left:0}.c-clu b{margin-left:7px}
.c-tag:after{left:calc(50% - var(--sh,0px))}
/* Buttons above the People card */
.c-fabs{position:absolute;right:12px;bottom:calc(var(--credit-b,0px) + 8px);z-index:6;display:flex;gap:8px;align-items:center;transition:bottom .3s cubic-bezier(.2,.8,.2,1)}
.c-fab{height:44px;border-radius:22px;background:var(--sheet);color:var(--fg);box-shadow:0 2px 10px rgba(20,10,60,.22);display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:700;padding:0 15px}
.c-fab.r{width:44px;padding:0;color:var(--acc)}.c-fab svg{width:20px;height:20px}
/* Edit profile */
a.c-mehead{color:inherit}.c-mehead .c-edit{margin-left:auto;font-style:normal;color:var(--mut);font-size:14px;font-weight:600;display:flex;align-items:center;gap:3px;flex-direction:row}.c-mehead .c-edit svg{width:13px;height:13px}
.c-mehead>span{flex:1;min-width:0}
.c-ava{position:relative;display:block;width:108px;height:108px;margin:6px auto 4px;cursor:pointer}.c-ava img{width:108px;height:108px;border-radius:50%;object-fit:cover}
.c-ava i{position:absolute;right:0;bottom:0;width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;border:3px solid var(--sheet);display:flex;align-items:center;justify-content:center}.c-ava i svg{width:17px;height:17px}
.c-avbtns{display:flex;justify-content:center;gap:4px;margin-bottom:10px}.c-avbtns .c-btn{width:auto;height:36px;padding:0 12px;cursor:pointer}.c-avbtns .c-btn.gray{color:var(--mut)}

/* People list: search, sort, full height */
.c-search{display:flex;align-items:center;gap:9px;height:44px;border-radius:14px;background:var(--card);padding:0 14px;color:var(--mut);margin-bottom:8px}
.c-search svg{width:18px;height:18px;flex:none}
.c-search input{flex:1;min-width:0;border:0;background:none;outline:none;font:600 16px "Plus Jakarta Sans",-apple-system,sans-serif;color:var(--fg);-webkit-appearance:none;appearance:none}
.c-search input::placeholder{color:var(--mut);font-weight:600}.c-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.c-sort{display:flex;gap:6px;margin-bottom:10px}
.c-sort button{height:32px;padding:0 13px;border-radius:11px;background:var(--card);color:var(--fg);font-size:13.5px;font-weight:700;display:flex;align-items:center}
.c-sort button.on{background:var(--fg);color:var(--bg)}
.c-sheet.people.up{max-height:none;top:calc(118px + env(safe-area-inset-top))}

/* Status (item 26): card on the Me page, the "Your status" sheet, and what friends see */
.c-stcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--card);margin:0 0 12px;color:var(--fg)}
.c-stcard>a{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit}
.c-stcard .e{width:42px;height:42px;border-radius:14px;background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:22px;font-style:normal;flex:none}
.c-stcard .e svg{width:22px;height:22px}
.c-stcard span{flex:1;display:flex;flex-direction:column;min-width:0}.c-stcard b{font-size:15.5px;font-weight:800;overflow-wrap:anywhere}.c-stcard em{font-style:normal;font-size:13px;color:var(--mut);line-height:1.3}
.c-stcard .chev{color:var(--mut);display:flex}.c-stcard .chev svg{width:14px;height:14px}
.c-stcard .c-pill.line{color:var(--fg)}
.c-stchips{display:flex;flex-wrap:wrap;gap:8px}
.c-stchips button{height:40px;padding:0 13px;border-radius:14px;background:var(--card);font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--fg)}
.c-stchips button.on{background:var(--acc-soft);box-shadow:inset 0 0 0 2px var(--acc)}
.c-seg2{display:flex;background:var(--card);border-radius:14px;padding:4px}
.c-seg2 button{flex:1;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;color:var(--fg)}
.c-seg2 button.on{background:var(--sheet);box-shadow:0 1px 4px rgba(20,10,60,.18)}
.c-stlbl{font-size:13px;font-weight:800;color:var(--mut);margin:2px 2px -4px;text-align:left}
.c-sheet.top80 #f-status .c-err{margin:0}
.c-tagemo{font-size:14px;line-height:1;margin:0 -2px 0 -1px;font-style:normal}
.c-prof .c-st{color:var(--fg);font-weight:800;font-size:16px;margin-top:1px;overflow-wrap:anywhere;max-width:100%}
.c-tile em.st{color:var(--fg);font-weight:700;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}

/* Add in person (item 25): the name tag with the code to scan */
.c-qrfull{position:absolute;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));color:var(--fg);overflow-y:auto}
.c-qrfull .tp{align-self:stretch;display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex:none}
.c-qrfull .tp b{font-size:21px;font-weight:800;letter-spacing:-.4px}
.c-tagq{width:100%;max-width:340px;border-radius:30px;background:linear-gradient(160deg,#8b6dff 0%,#5a36f0 100%);padding:20px 14px 14px;color:#fff;text-align:center;box-shadow:0 14px 40px rgba(60,30,200,.35);flex:none}
.c-tagq h2{font:800 44px/1 "Plus Jakarta Sans",-apple-system,sans-serif;letter-spacing:3px}
.c-tagq p{font-weight:700;font-size:16px;opacity:.92;margin-top:4px}
.c-tagq .w{background:#fff;border-radius:22px;padding:6px 6px 14px;margin-top:16px;color:#14121c}
.c-tagq .w svg{display:block;width:100%;height:auto}
.c-qrwait{width:100%;aspect-ratio:1/1}
.c-tagq .nm{font:800 36px/1.05 "Plus Jakarta Sans",-apple-system,sans-serif;letter-spacing:-.8px;margin-top:2px;overflow-wrap:anywhere;padding:0 8px}
.c-tagq .nm.long{font-size:28px}
.c-qrfull .hint{font-size:15px;color:var(--mut);text-align:center;line-height:1.4;margin-top:18px;max-width:320px}
.c-qrfull .c-btn.plain{margin-top:auto;flex:none}

/* Sign-in wordmark (item 36): the product name in the product's type and violet */
.c-word{text-align:center;font:800 34px/1 "Plus Jakarta Sans",-apple-system,sans-serif;letter-spacing:-1.2px;color:var(--acc);margin:6px 0 2px}

/* ---- Preview look: Radar (matches the approved brand mockup; night look in both system modes) ---- */
[data-look="radar"]{--bg:#07070b;--sheet:#14141c;--fg:#f4f3f8;--mut:#a3a1b2;--line:#262632;--card:#1c1c26;--acc:#ff3b7f;--acc-soft:rgba(255,59,127,.16);--old:#ffb020;--red:#ff5a6a;--tag:#14141c}
[data-look="radar"],[data-look="radar"] body{background:#07070b}
[data-look="radar"] .map{background:#111117}
[data-look="radar"] .dev,[data-look="radar"] .leaflet-container,[data-look="radar"] .c-tag,[data-look="radar"] .c-clu,[data-look="radar"] input,[data-look="radar"] button{font-family:"Manrope",-apple-system,sans-serif}
[data-look="radar"] .c-sh-h b,[data-look="radar"] .c-wordmark,[data-look="radar"] .c-card-float h2,[data-look="radar"] .c-prof h1,[data-look="radar"] .c-h2{font-family:"Unbounded","Manrope",sans-serif;font-weight:700;letter-spacing:-.03em}
[data-look="radar"] .c-sh-h b{font-size:20px}[data-look="radar"] .c-card-float h2{font-size:21px;line-height:1.25}[data-look="radar"] .c-prof h1{font-size:22px}
/* buttons */
[data-look="radar"] .c-btn,[data-look="radar"] .c-rb.add,[data-look="radar"] .c-circ.main i,[data-look="radar"] .c-pill:not(.gray):not(.line):not(.acc),[data-look="radar"] .c-toggle.on .c-sw,[data-look="radar"] .c-steps i{background:#e0115f;color:#fff}
[data-look="radar"] .c-btn{border-radius:28px}[data-look="radar"] .c-btn.plain{background:none;color:var(--acc)}[data-look="radar"] .c-btn.red{background:var(--red);color:#1a0705}
/* top row */
[data-look="radar"] .c-rb,[data-look="radar"] .c-chips a,[data-look="radar"] .c-see,[data-look="radar"] .c-fab{background:#14141c;border:1px solid rgba(255,255,255,.08);box-shadow:0 3px 12px rgba(0,0,0,.5)}
[data-look="radar"] .c-chips a{border-radius:21px}[data-look="radar"] .c-chips a.on{background:#f4f3f8;color:#07070b;border-color:#f4f3f8}
[data-look="radar"] .c-rb.add{border:0;width:50px;height:50px}
[data-look="radar"] .c-rb img{border-radius:50%}
/* name tags */
[data-look="radar"] .c-tag,[data-look="radar"] .c-clu{background:#14141c;color:#f4f3f8;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 14px rgba(0,0,0,.5)}
[data-look="radar"] .c-tag:after{border-top-color:#14141c}
[data-look="radar"] .c-tag img,[data-look="radar"] .c-clu img{border-radius:50%;background:#14141c}
[data-look="radar"] .c-clu img{border-color:#14141c}
[data-look="radar"] .c-tag span{color:#a3a1b2}
[data-look="radar"] .c-tag.f-old span{color:#ffb020}
[data-look="radar"] .c-tag.f-live{background:#14141c;color:#fff;border-color:rgba(255,59,127,.55);box-shadow:0 0 0 3px rgba(255,59,127,.35),0 0 22px rgba(255,59,127,.55)}
[data-look="radar"] .c-tag.f-live:after{border-top-color:#14141c}[data-look="radar"] .c-tag.f-live span{color:#ff3b7f}
/* cards, tiles, friend page */
[data-look="radar"] .c-sheet,[data-look="radar"] .c-card-float{border:1px solid #262632;box-shadow:0 -10px 40px rgba(0,0,0,.6)}
[data-look="radar"] .c-tile{border:1px solid var(--line)}
[data-look="radar"] .c-tile img,[data-look="radar"] .c-prow img,[data-look="radar"] .c-mehead img{border-radius:50%}
[data-look="radar"] .c-tile img.f-live{box-shadow:0 0 0 2.5px #ff3b7f,0 0 14px rgba(255,59,127,.5)}
[data-look="radar"] .c-prof img{border:4px solid var(--sheet);box-shadow:0 0 0 3px #e0115f,0 0 28px rgba(255,59,127,.45)}
[data-look="radar"] .c-fr.live{color:#ff3b7f}[data-look="radar"] .c-fr i{background:#ff3b7f}
[data-look="radar"] .c-veil{background:rgba(3,3,6,.5)}
/* you */
[data-look="radar"] .me-dot{background:#ff3b7f;border-color:#fff;box-shadow:0 0 0 12px rgba(255,59,127,.22),0 0 0 26px rgba(255,59,127,.08)}
[data-look="radar"] .leaflet-control-attribution{color:rgba(255,255,255,.35)!important;text-shadow:0 0 2px rgba(0,0,0,.9)}

/* ---- Preview look: Pink (the new colors and type on today's map, light and dark) ---- */
[data-look="pink"]{--bg:#f4f3f6;--sheet:#fff;--fg:#0b0b10;--mut:#62606f;--line:#e6e4ec;--card:#f3f2f6;--acc:#e0115f;--acc-soft:rgba(224,17,95,.10);--old:#b45309;--red:#d92d20;--tag:#fff}
[data-look="pink"][data-theme="dark"]{--bg:#07070b;--sheet:#111118;--fg:#f4f3f8;--mut:#9a98a8;--line:#262531;--card:#1a1a23;--acc:#ff3b7f;--acc-soft:rgba(255,59,127,.16);--old:#f5a524;--red:#ff6b61;--tag:#16161f}
[data-look="pink"] .dev,[data-look="pink"] .leaflet-container,[data-look="pink"] .c-tag,[data-look="pink"] .c-clu,[data-look="pink"] input,[data-look="pink"] button{font-family:"Manrope",-apple-system,sans-serif}
[data-look="pink"] .c-wordmark,[data-look="pink"] .c-card-float h2,[data-look="pink"] .c-prof h1,[data-look="pink"] .c-h2{font-family:"Unbounded","Manrope",sans-serif;letter-spacing:-.5px}
[data-look="pink"] .c-card-float h2{font-size:21px;line-height:1.25}[data-look="pink"] .c-prof h1{font-size:22px}
[data-look="pink"] .c-btn,[data-look="pink"] .c-rb.add,[data-look="pink"] .c-circ.main i,[data-look="pink"] .c-pill:not(.gray):not(.line):not(.acc),[data-look="pink"] .c-toggle.on .c-sw,[data-look="pink"] .c-steps i{background:#e0115f;color:#fff}
[data-look="pink"][data-theme="dark"] .c-btn.plain{background:none;color:var(--acc)}[data-look="pink"][data-theme="dark"] .c-btn.red{background:var(--red);color:#1a0705}
[data-look="pink"][data-theme="dark"] .c-tag,[data-look="pink"][data-theme="dark"] .c-clu{border:1px solid #2c2b38;box-shadow:0 4px 14px rgba(0,0,0,.55)}
[data-look="pink"][data-theme="dark"] .c-tag.f-live{background:#16161f;color:#fff;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,59,127,.22),0 0 18px rgba(255,59,127,.45)}
[data-look="pink"][data-theme="dark"] .c-tag.f-live:after{border-top-color:var(--acc)}[data-look="pink"][data-theme="dark"] .c-tag.f-live span{color:var(--acc)}
[data-look="pink"] .c-tile img.f-live,[data-look="pink"] .c-prof img.f-live{box-shadow:0 0 0 2.5px var(--acc),0 0 14px rgba(255,59,127,.5)}
[data-look="pink"][data-theme="dark"] .c-sheet,[data-look="pink"][data-theme="dark"] .c-card-float{border:1px solid #23222d;box-shadow:0 10px 40px rgba(0,0,0,.6)}
[data-look="pink"][data-theme="dark"] .c-rb,[data-look="pink"][data-theme="dark"] .c-chips a,[data-look="pink"][data-theme="dark"] .c-see,[data-look="pink"][data-theme="dark"] .c-fab{border:1px solid #2a2936;box-shadow:0 3px 12px rgba(0,0,0,.5)}
[data-look="pink"][data-theme="dark"] .c-chips a.on{background:#f4f3f8;color:#07070b}
[data-look="pink"][data-theme="dark"] .c-veil{background:rgba(3,3,6,.5)}
[data-look="pink"] .me-dot{background:#ff3b7f;box-shadow:0 0 0 7px rgba(255,59,127,.22),0 0 16px rgba(255,59,127,.6)}
[data-look="pink"] .c-tag.f-live{background:#e0115f;color:#fff}[data-look="pink"] .c-tag.f-live:after{border-top-color:#e0115f}[data-look="pink"] .c-tag.f-live span{color:rgba(255,255,255,.88)}
[data-look="pink"][data-theme="dark"] .c-tag.f-live{background:#16161f;color:#fff}[data-look="pink"][data-theme="dark"] .c-tag.f-live span{color:var(--acc)}
[data-look="pink"] .c-btn.red{background:var(--red);color:#fff}

/* A group shown as a small round count when zoomed out */
.c-clu.num{width:46px;height:46px;padding:0;justify-content:center;border-radius:50%;background:var(--acc);color:#fff;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.c-clu.num b{margin:0;font-size:16px}
[data-look="radar"] .c-clu.num{background:#14141c;border:2px solid #ff3b7f;color:#fff;box-shadow:0 0 0 3px rgba(255,59,127,.25),0 0 18px rgba(255,59,127,.45)}