:root { --map-water: #dbe9ff; --map-land: #f7f9fc; --map-edge: #c9d6ee; --stage: radial-gradient(1200px 600px at 20% -10%, #e8f0ff, transparent), radial-gradient(900px 500px at 100% 110%, #fff0e3, transparent), #f4f7fc; }
:root[data-theme='dark'] { --map-water: #0f1a33; --map-land: #1b2644; --map-edge: #2a3760; --stage: radial-gradient(1200px 600px at 20% -10%, #16264d, transparent), radial-gradient(900px 500px at 100% 110%, #3a2415, transparent), #070a12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { --map-water: #0f1a33; --map-land: #1b2644; --map-edge: #2a3760; --stage: radial-gradient(1200px 600px at 20% -10%, #16264d, transparent), radial-gradient(900px 500px at 100% 110%, #3a2415, transparent), #070a12; } }
html, body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; } body { overflow: hidden; }
#stage { height: 100dvh; display: grid; place-items: center; background: var(--stage); }
#phone { width: 430px; height: min(920px, calc(100dvh - 28px)); border-radius: 44px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(11, 15, 26, .22), 0 0 0 8px var(--surface); background: var(--bg); overflow: hidden; position: relative; display: flex; }
#app { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
@media (max-width: 520px) { #phone { width: 100%; height: 100dvh; border-radius: 0; border: 0; box-shadow: none; } }
#view { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; scrollbar-width: thin; }
#view > * { flex-shrink: 0; } #view > .mapwrap { flex: 1; min-height: 360px; }
.pad { padding: 14px 16px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .sub { color: var(--ink2); font-size: 13.5px; } .tiny { font-size: 12px; text-align: center; }
a { color: inherit; text-decoration: none; } .btn.sm { min-height: 34px; padding: 0 14px; font-size: 13.5px; } .btn.wide { width: 100%; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.brand { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 9px; } .brand.big { font-size: 30px; }
.logo { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); position: relative; display: inline-block; } .logo::before { content: ''; position: absolute; inset: 7px 8px 6px 7px; border: 3.5px solid #fff; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50% 50% 50% 50%; transform: rotate(-35deg); } .logo::after { content: ''; position: absolute; right: -2px; top: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); border: 2px solid var(--bg); }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative; color: var(--ink); } .iconbtn:hover { background: var(--surface); }
.badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--orange); color: #fff; font: 700 11px var(--font); display: grid; place-items: center; padding: 0 5px; font-style: normal; } .badge[hidden] { display: none; }
.tabs { display: flex; align-items: center; justify-content: space-around; height: 66px; padding: 0 6px 4px; border-top: 1px solid var(--line); background: var(--bg); position: relative; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink2); font-size: 11px; font-weight: 600; flex: 1; padding: 6px 0; } .tab.on { color: var(--blue); }
.fab { width: 54px; height: 54px; border-radius: 50%; background: var(--blue); color: var(--blue-ink); display: grid; place-items: center; margin-top: -26px; box-shadow: 0 10px 24px rgba(37, 99, 235, .4); border: 4px solid var(--bg); box-sizing: content-box; transition: transform .15s; } .fab:active { transform: scale(.92) rotate(90deg); }
.seg { display: inline-flex; background: var(--surface); border-radius: 999px; padding: 4px; margin: 4px 16px 10px; align-self: flex-start; } .seg button { padding: 6px 16px; border-radius: 999px; font-weight: 650; font-size: 13.5px; color: var(--ink2); font-family: var(--font-head); } .seg button.on { background: var(--raised); color: var(--ink); box-shadow: 0 1px 4px rgba(11, 15, 26, .12); }
.avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-head); flex: none; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; } .name { font-weight: 700; font-size: 15px; line-height: 1.2; }
/* feed + photos */
.post { border-bottom: 8px solid var(--surface); padding-bottom: 6px; } .phead { padding: 6px 16px 10px; }
.photo { position: relative; background: var(--surface); overflow: hidden; width: 100%; min-height: 160px; } .photo.tap { cursor: zoom-in; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.photo .ph { transform: scale(1.04); } .photo .real { opacity: 0; transition: opacity .6s ease; } .photo.loaded .real { opacity: 1; }
.photo.cover { aspect-ratio: 1; min-height: 0; } .photo.sq { border-radius: 0; }
.resting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; background: rgba(11, 15, 26, .45); font-weight: 600; font-size: 13px; }
.pbody { padding: 12px 16px 6px; display: flex; flex-direction: column; gap: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .caption { font-size: 15px; }
.actions { display: flex; gap: 6px; margin: 0 -8px; } .act { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: var(--ink2); font-weight: 650; font-size: 14px; } .act:hover { background: var(--surface); }
.act.click.on { color: var(--orange); } .act.click.bounce svg { animation: bounce .45s cubic-bezier(.3, 1.8, .5, 1); } @keyframes bounce { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.empty { padding: 48px 28px; text-align: center; color: var(--ink2); display: flex; flex-direction: column; align-items: center; gap: 10px; } .empty h3 { color: var(--ink); font-size: 18px; } .blanket { font-size: 54px; } .empty .moon { width: 78px; height: 78px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.skeleton { height: 420px; margin: 12px 16px; border-radius: 20px; background: linear-gradient(100deg, var(--surface) 30%, var(--raised) 50%, var(--surface) 70%); background-size: 200% 100%; animation: sh 1.3s infinite; } @keyframes sh { to { background-position: -200% 0; } }
/* profile */
.profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 20px 8px; } .profile h2 { font-size: 22px; margin-top: 6px; } .bio { max-width: 300px; margin-top: 4px; }
.stats { display: flex; gap: 28px; margin: 12px 0 8px; } .stats div { display: flex; flex-direction: column; } .stats b { font: 800 18px var(--font-head); } .stats span { color: var(--ink2); font-size: 12.5px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .life { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; } .lifeRow { display: flex; justify-content: space-between; align-items: center; }
.sechead { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink2); margin: 20px 0 8px; font-family: var(--font-head); }
/* post detail */
.loc { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface); font-size: 13.5px; color: var(--ink2); } .note.green { background: var(--green-soft); color: var(--green-ink); } .note svg { flex: none; margin-top: 2px; }
.comments { display: flex; flex-direction: column; gap: 12px; } .cm { display: flex; gap: 10px; } .cbar { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--bg); padding: 10px 0 4px; margin-top: 8px; } .cinput, .field, .search { flex: 1; min-height: 46px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 0 14px; outline: none; width: 100%; } .cinput:focus, .field:focus, .search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.demo { padding: 14px; background: var(--orange-soft); border-color: var(--orange); display: flex; flex-direction: column; gap: 6px; }
/* map */
.mapwrap { position: relative; overflow: hidden; background: var(--map-water); touch-action: none; } .mapsvg { width: 100%; height: 100%; display: block; cursor: grab; } .mapsvg .land { fill: var(--map-land); stroke: var(--map-edge); stroke-width: .5; vector-effect: non-scaling-stroke; }
.pin { cursor: pointer; } .pin .ring { fill: #fff; stroke: var(--blue); stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(11, 15, 26, .35)); } .pin.f .ring { stroke: var(--green); stroke-dasharray: 5 3; } .pin.sel .ring { fill: var(--orange); stroke: var(--orange); } .pin .core { stroke: #fff; stroke-width: 1.5; } .pin .lk { fill: #fff; stroke: #fff; stroke-width: 1; transform: translate(0, 0); opacity: .95; } .pin.sel .core { stroke: #fff; }
.fuzz { fill: rgba(31, 191, 117, .16); stroke: var(--green); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.mapcard { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 12px; padding: 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); z-index: 4; } .mapcard[hidden] { display: none; } #view:has(.mapwrap) { position: relative; }
.mc-thumb { width: 108px; min-height: 108px; border-radius: 14px; background-size: cover; background-position: center; position: relative; cursor: zoom-in; flex: none; } .mc-open { position: absolute; left: 6px; bottom: 6px; background: rgba(255, 255, 255, .9); } .mc-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.zoomctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; } .zoomctl button { width: 40px; height: 40px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow); } .minus { width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.maplegend { position: absolute; left: 12px; top: 12px; font-size: 12px; background: var(--raised); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; display: flex; align-items: center; gap: 4px; } .lg1, .lg2 { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .lg1 { background: #fff; border: 3px solid var(--blue); } .lg2 { border: 2px dashed var(--green); background: rgba(31, 191, 117, .2); margin-left: 6px; }
.mapempty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--ink2); pointer-events: none; }
/* viewer */
.viewer { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; animation: vin .25s ease; } @keyframes vin { from { opacity: 0; transform: scale(.98); } }
.vstage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; } .viewer.zoomed .vstage { cursor: grab; }
.vstage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; } .vph { filter: blur(0); opacity: .9; } .vimg { opacity: 0; transition: opacity .5s; } .viewer.ready .vimg { opacity: 1; }
.vtop { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px; background: linear-gradient(#000a, transparent); pointer-events: none; } .vtop > * { pointer-events: auto; } .vclose { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); }
.vbadge { background: rgba(31, 191, 117, .22) !important; color: #7ff0bd !important; backdrop-filter: blur(8px); } .vbadge.red { background: rgba(229, 72, 77, .3) !important; color: #ffb3b6 !important; }
.vinfo { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 20px; background: linear-gradient(transparent, #000b); pointer-events: none; display: flex; flex-direction: column; gap: 2px; } .viewer.zoomed .vinfo { opacity: 0; transition: opacity .2s; } .vplace { opacity: .85; font-size: 13.5px; display: flex; align-items: center; gap: 4px; }
/* auth */
.auth { flex: 1; display: flex; flex-direction: column; overflow-y: auto; } .collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px 22px 0; transform: rotate(-4deg) scale(1.06); margin-top: 6px; } .tile { aspect-ratio: .78; border-radius: 22px; box-shadow: var(--shadow); } .t1, .t4 { transform: translateY(26px); } .t0, .t3 { transform: translateY(-6px); }
.authbody { padding: 38px 24px 24px; display: flex; flex-direction: column; gap: 11px; } .authbody h1 { font-size: 27px; line-height: 1.12; } .authmsg { min-height: 20px; color: var(--danger); text-align: center; }
/* sheet / toast */
.sheetbg { position: fixed; inset: 0; z-index: 90; background: rgba(11, 15, 26, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; } @keyframes fade { from { opacity: 0; } }
.sheet { width: min(430px, 100%); background: var(--bg); border-radius: 28px 28px 0 0; padding: 12px 22px 28px; display: flex; flex-direction: column; gap: 12px; animation: up .28s cubic-bezier(.2, .9, .3, 1); } @keyframes up { from { transform: translateY(40px); } } .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 6px; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; transition: .3s; z-index: 200; max-width: 90vw; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.bad { background: var(--danger); color: #fff; }
/* settings + lab */
.card.devrow, .card.linkrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; margin: 10px 0; flex-wrap: wrap; } .linkrow svg:last-child { transform: rotate(180deg); color: var(--ink2); } .linkrow.lab { border-color: var(--orange); background: var(--orange-soft); }
.paircode { padding: 18px; text-align: center; margin: 10px 0; } .paircode .code { font-size: 38px; font-weight: 700; letter-spacing: .14em; margin: 6px 0; color: var(--blue); }
.review { padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .review .photo { border-radius: 14px; }
.labhead { padding: 16px; margin-bottom: 12px; } .big { font-size: 24px; font-weight: 800; } .score { padding: 16px; display: flex; align-items: center; gap: 16px; margin: 14px 0 0; } .score .big { font-size: 40px; } .score.good { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); } .score.bad { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.test { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; } .tname { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ev2 { color: var(--ink2); font-size: 12px; word-break: break-word; } .livelog { margin: 12px 0; } .ev { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; } .labout { margin-top: 10px; }

.logo{width:30px;height:30px;border-radius:0;background:url(/ui/brand/clickr-mark.png) center/contain no-repeat;display:inline-block;position:relative}
.logo::before{content:none}
.wm{display:inline-block;height:34px;aspect-ratio:549/210;background:url(/ui/brand/clickr-wordmark.png) left center/contain no-repeat}
.wm.big{height:56px}
:root[data-theme='dark'] .wm{background-image:url(/ui/brand/clickr-wordmark-dark.png)}
@media (prefers-color-scheme: dark){:root:not([data-theme='light']):not([data-theme='dark']) .wm{background-image:url(/ui/brand/clickr-wordmark-dark.png)}}
.catrow{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;scrollbar-width:none}.catrow::-webkit-scrollbar{display:none}
.cat{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:999px;padding:7px 14px;font:600 13px var(--font-body);cursor:pointer}
.cat.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill.cat{background:var(--surface);color:var(--ink2)}
.card.cam{display:flex;flex-direction:column;gap:12px;padding:14px}.crow{display:flex;gap:12px;align-items:center}.crow svg{color:var(--blue)}
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px}.set{background:var(--surface);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}.set b{font-size:15px}.set span{font-size:11px;color:var(--ink2)}
.sub.tiny{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.set b{white-space:nowrap}.crow>div{text-align:left}
/* ---- Field & Focal editorial pass ---- */
.avatar{font-family:var(--font-ui)}
.tabs{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px)}
.act.click span,.act span{font-family:var(--font-head);font-style:italic;font-size:16px}
.post .head.name,.who .head.name{font-size:17px;font-weight:600}
.caption{font-family:var(--font);font-size:16px;line-height:1.5}
.auth h1,.profile h2,.sechead+*{letter-spacing:-.015em}
.auth h1{font-weight:500;font-size:34px;line-height:1.1}
.set b,.stats b{font-family:var(--font-ui);font-weight:700;letter-spacing:.03em}
.set span,.sub.tiny{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:700}
.card.cam .head{font-family:var(--font-head);font-size:17px}
.photo,.pgrid .photo{box-shadow:inset 0 0 0 1px rgba(23,27,39,.06)}
.pill.cat{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.pill{letter-spacing:.01em}
input.search,.cinput{border-radius:999px;background:var(--surface);border:1px solid var(--line);font-family:var(--font)}
.cat{font-family:var(--font-ui)!important;font-size:13px}.pill.cat{font-size:12.5px}
.crow>div{display:flex;flex-direction:column;align-items:flex-start}.crow .sub{margin:0;padding:0;text-align:left}

/* ---- browse the map by place ---- */
.mapsearch { position: absolute; left: 12px; top: 52px; right: 64px; z-index: 5; max-width: 380px; } .mapsearch input { width: 100%; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; box-shadow: var(--shadow); }
.mapsug { margin-top: 6px; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); } .mapsug button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; text-align: left; font-weight: 600; } .mapsug button:hover { background: var(--surface); } .mapsug button span { flex: 1; } .mapsug em { font-style: normal; color: var(--ink2); font-size: 13px; } .mapsug .sub { padding: 10px 14px; }
.areabtn { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--blue); color: var(--blue-ink); font-weight: 700; box-shadow: var(--shadow); white-space: nowrap; } .areabtn[hidden] { display: none; }
.areasheet { max-height: 82vh; overflow-y: auto; } .areasheet .pgrid { margin: 0 -6px; }

/* ---- reactions, today, security, invites ---- */
.rbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0 4px; } .rbar[hidden] { display: none; }
.rchip { border: 1px solid var(--line); background: var(--card); color: var(--ink2); border-radius: 999px; padding: 7px 13px; font: 600 13px var(--font-ui); cursor: pointer; }
.rchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .rbar.mine .rchip { cursor: default; }
.card.prompt { padding: 18px; display: flex; flex-direction: column; gap: 8px; } .ptheme { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.nudge { margin: 12px 2px 0; font-size: 15px; color: var(--ink2); }
.pickmark { position: absolute; left: 6px; top: 6px; background: rgba(255, 255, 255, .92); color: #111; border-radius: 999px; padding: 3px 9px 3px 7px; font: 700 10.5px var(--font-ui); display: inline-flex; align-items: center; gap: 2px; z-index: 2; }
.card.progress { padding: 14px; display: flex; flex-direction: column; gap: 10px; margin: 8px 0; } .steps { display: flex; gap: 6px; flex-wrap: wrap; } .step { font: 700 11px var(--font-ui); padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--line); color: var(--ink2); } .step.on { background: var(--green-soft); border: 1px solid var(--green); color: var(--ink); }
.card.recipe { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; margin: 8px 0; }
.card.rcodes { padding: 16px; display: flex; flex-direction: column; gap: 12px; margin: 10px 0; } .codegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 17px; letter-spacing: .08em; } .codegrid span { background: var(--surface); border-radius: 10px; padding: 8px 10px; text-align: center; user-select: all; }
.card.invite { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0; text-align: center; } .qr { background: #fff; padding: 6px; border-radius: 12px; } .card.invite .code { font-size: 26px; letter-spacing: .12em; font-weight: 700; color: var(--blue); }
.invrow { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.linkbtn { background: none; border: 0; color: var(--blue); font: 600 14px var(--font-ui); padding: 8px; cursor: pointer; align-self: center; } .invnote { text-align: center; }