:root {
  --bg: #0b0d10; --bg2: #111419; --card: #171b21; --card2: #1d222a; --line: #272d36;
  --text: #f2f4f7; --muted: #8f98a7; --dim: #5d6573;
  --green: #30d158; --blue: #0a84ff; --red: #ff453a;
  --n: #bf5af2; --e: #64d2ff; --s: #ff9f0a; --w: #ff375f;
  --r: 18px; --tabh: 62px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
body.has-tabs { padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0 0 .4em; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 16px; margin-top: 1.4em; color: var(--muted); font-weight: 600; }
p { margin: 0 0 .8em; }
a { color: var(--blue); text-decoration: none; }
small { font-size: 12px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.center-text { text-align: center; }
input, textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none; }
input:focus, textarea:focus { border-color: #485262; }
textarea { resize: vertical; min-height: 48px; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--dim); }

.page { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px 28px; }
.page.center { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 12px 0; }
.card h3 { margin-top: 0; color: var(--text); }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.row > input { flex: 1; min-width: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; font-family: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; cursor: pointer; white-space: nowrap; transition: transform .1s, background .2s; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.primary { background: var(--green); border-color: var(--green); color: #04130a; }
.btn.light { background: #fff; color: #000; border-color: #fff; }
.btn.ghost { background: transparent; }
.btn.red { color: var(--red); }
.btn.sm { padding: 9px 12px; font-size: 14px; border-radius: 10px; }
.btn.big { width: 100%; padding: 16px; font-size: 16px; border-radius: 14px; margin-top: 8px; white-space: normal; text-align: center; line-height: 1.25; }
.btn.pcb { background: color-mix(in srgb, var(--pc) 22%, var(--card2)); border-color: color-mix(in srgb, var(--pc) 55%, transparent); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn svg { width: 20px; height: 20px; }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.chip { display: inline-block; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); color: #c9cfd8; margin: 0 4px 4px 0; }
.chips { margin: 6px 0; }
.tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px; background: #20324a; color: #8ec5ff; margin-right: 4px; }
.tag.dim { background: #262a31; color: var(--muted); }
.tag.ok { background: #143a22; color: var(--green); }
.code-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 15px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; padding: 8px 12px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.code-chip svg { width: 16px; height: 16px; }
.code-chip.static { cursor: default; margin-bottom: 10px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-align: left; font: inherit; cursor: pointer; width: 100%; }
.item span { color: var(--muted); font-size: 14px; }
.item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item > div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot-new { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none; }

/* avatars */
.av { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; overflow: hidden; flex: none; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.av img { width: 100%; height: 100%; object-fit: cover; }

/* tabs */
#tabs[hidden] { display: none; }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; background: rgba(13,15,19,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
#tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--dim); font-size: 11px; font-weight: 600; position: relative; padding: 4px 0; }
#tabs a svg { width: 24px; height: 24px; }
#tabs a.on { color: var(--green); }
#tabs .badge { position: absolute; top: 0; left: calc(50% + 8px); background: var(--red); color: #fff; font-style: normal; font-size: 10px; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }

/* sheet + toast */
#layer { position: fixed; inset: 0; z-index: 40; display: none; }
#layer.on { display: block; }
.backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); animation: fade .2s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; background: var(--bg2); border-top-left-radius: 22px; border-top-right-radius: 22px; border: 1px solid var(--line); padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); animation: up .25s cubic-bezier(.2,.8,.2,1); max-width: 620px; margin: 0 auto; }
.sheet h3 { color: var(--text); margin-top: 8px; font-size: 18px; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: #3a414c; margin: 0 auto 10px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
#toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + 22px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: #f2f4f7; color: #0b0d10; padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 60; opacity: 0; pointer-events: none; transition: .25s; max-width: calc(100vw - 32px); text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.qr-box { background: #fff; border-radius: 16px; padding: 14px; width: min(260px, 70vw); margin: 10px auto; }
.qr-box svg, .qr svg { width: 100%; height: auto; display: block; }
.big-code { font: 800 34px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .2em; }

/* loader */
.loader { width: 64px; height: 64px; color: var(--green); animation: spin 2.4s cubic-bezier(.6,.1,.4,.9) infinite; margin-bottom: 10px; }
.loader.big { width: 96px; height: 96px; }
.loader.still { animation: none; }
.loader svg { width: 100%; height: 100%; }

/* home */
.hero { text-align: center; padding: 28px 8px 8px; }
.hero-mark { width: 72px; height: 72px; margin: 0 auto 14px; color: var(--green); }
.hero-mark svg { width: 100%; height: 100%; }
.hero p { color: var(--muted); }
.code-in { text-transform: uppercase; font: 700 20px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; text-align: center; }

/* forms */
.join-head { text-align: center; margin: 10px 0 18px; }
.pform { display: flex; flex-direction: column; gap: 14px; }
.pf-top { display: flex; gap: 14px; align-items: center; }
.pf-name { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.photo-pick { width: 88px; height: 88px; border-radius: 50%; background: var(--card2); border: 1px dashed #4a5260; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; cursor: pointer; overflow: hidden; flex: none; }
.photo-pick img { width: 100%; height: 100%; object-fit: cover; }
.fl { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.fl small { color: var(--dim); font-weight: 500; }
.seg { display: flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.seg button { flex: 1; font-weight: 600; font-size: 14px; font-family: inherit; color: var(--muted); background: none; border: 0; border-radius: 9px; padding: 10px; cursor: pointer; }
.seg button.on { background: var(--card2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* ask */
.ask-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 26px; height: 5px; border-radius: 3px; background: #2a3039; }
.dots i.done { background: var(--green); opacity: .5; }
.dots i.on { background: var(--green); }
.ask h2 { font-size: 26px; }
.ask textarea { font-size: 17px; margin-top: 8px; }
.ai-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n); background: color-mix(in srgb, var(--n) 15%, transparent); padding: 4px 8px; border-radius: 6px; margin-bottom: 10px; }
.mic-wrap { display: flex; justify-content: center; margin: 18px 0; }
.mic { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; font-family: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px 10px 12px; cursor: pointer; }
.mic svg { width: 22px; height: 22px; padding: 6px; box-sizing: content-box; border-radius: 50%; background: var(--red); color: #fff; }
.mic.rec { border-color: var(--red); background: color-mix(in srgb, var(--red) 15%, var(--card2)); }
.mic.rec svg { animation: pulse 1s ease-in-out infinite; }
.mic.busy { opacity: .75; }
.mic.busy svg { background: var(--dim); }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,69,58,.25); } }
.ask-actions { display: flex; gap: 10px; align-items: center; }
.ask-actions .btn.big { flex: 1; margin: 0; }

/* compass */
.ctop { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.idea-chip { flex: 1; min-width: 0; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; }
.idea-chip small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.idea-chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trail { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; margin: 4px 0 6px; color: var(--muted); }
.trail button, .trail a { background: none; border: 0; color: var(--muted); font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: #3a414c; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trail b { color: var(--text); }
.via { font-size: 11px; font-weight: 700; color: var(--c); }
.dial { display: grid; grid-template-columns: 1fr minmax(150px, 46%) 1fr; grid-template-areas: "n n n" "w pad e" "s s s"; gap: 6px; align-items: center; margin: 4px 0 6px; }
.asp { --a: .5; background: color-mix(in srgb, var(--c) calc(var(--a) * 18%), transparent); border: 1px solid color-mix(in srgb, var(--c) calc(var(--a) * 60%), transparent); color: var(--text); border-radius: 14px; padding: 7px 8px; font: inherit; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: background .15s, border-color .15s, transform .15s; min-width: 0; }
.asp small { color: var(--c); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.asp span { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.asp.on { transform: scale(1.04); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 35%, transparent); }
.asp-N { grid-area: n; justify-self: center; max-width: 78%; }
.asp-S { grid-area: s; justify-self: center; max-width: 78%; }
.asp-E { grid-area: e; }
.asp-W { grid-area: w; }
.pad { grid-area: pad; position: relative; aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle, #1c2129 0 45%, transparent 46%), conic-gradient(from -45deg, color-mix(in srgb, var(--n) 30%, #15181d) 0 25%, color-mix(in srgb, var(--e) 30%, #15181d) 0 50%, color-mix(in srgb, var(--s) 30%, #15181d) 0 75%, color-mix(in srgb, var(--w) 30%, #15181d) 0); box-shadow: inset 0 0 0 1px #2c323c, 0 10px 30px rgba(0,0,0,.4); }
.pad-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); }
.pad-x { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.6%, rgba(255,255,255,.07) 49.6% 50.4%, transparent 50.4%), linear-gradient(0deg, transparent 49.6%, rgba(255,255,255,.07) 49.6% 50.4%, transparent 50.4%); border-radius: 50%; }
.knob { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #f2f4f7; transform: translate(-50%, -50%); box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.18); transition: background .2s; pointer-events: none; }
.aline { font-size: 14px; color: #c7cdd6; min-height: 42px; margin: 6px 2px 10px; text-align: center; }
.spot-banner { width: 100%; background: #1a2433; border: 1px solid #27405f; color: #a9d1ff; border-radius: 12px; padding: 10px; font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer; margin-bottom: 10px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px; }
.pcard.pop { animation: pop .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { transform: scale(.975); opacity: .6; } }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-name b { font-size: 18px; }
.pc-name small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.loc { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; }
.loc small { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.mini-arrow { width: 34px; height: 34px; color: var(--green); transition: transform .25s ease-out, opacity .2s; }
.mini-arrow svg { width: 100%; height: 100%; fill: currentColor; }
.why { margin: 10px 0 6px; font-size: 15px; color: #dfe3ea; }
.their-idea { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.their-idea small { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--dim); font-size: 10.5px; margin-right: 4px; }
.alts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.alts small { color: var(--dim); margin-right: 2px; }
.alt { display: inline-flex; align-items: center; gap: 6px; background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 3px 10px 3px 3px; font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; }
.pc-loading, .pc-empty { color: var(--muted); padding: 14px 4px; display: flex; flex-direction: column; gap: 6px; }
.pc-loading { flex-direction: row; align-items: center; gap: 10px; }
.pc-empty b { color: var(--text); }
.shimmer { color: var(--dim); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .4; } }
.ctools { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ctools .btn.on { background: color-mix(in srgb, var(--green) 20%, transparent); border-color: var(--green); color: var(--green); }

/* map */
.map { position: relative; aspect-ratio: 20 / 14; background: repeating-linear-gradient(0deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.035) 0 10%), repeating-linear-gradient(90deg, transparent 0 calc(7% - 1px), rgba(255,255,255,.035) 0 7%), #0f1216; border: 1px solid var(--line); border-radius: 14px; margin-top: 10px; cursor: crosshair; overflow: hidden; }
.front { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--muted); background: rgba(255,255,255,.05); padding: 4px; border-bottom: 1px solid var(--line); }
.dot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--c); color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); opacity: .55; }
.dot.me { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: var(--blue); opacity: 1; box-shadow: 0 0 0 3px rgba(10,132,255,.35); font-size: 9px; }
.dot.focus { opacity: 1; width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); animation: pulse2 1.6s infinite; }
@keyframes pulse2 { 50% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 10px transparent; } }
.map-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 600; pointer-events: none; }

/* conversation */
.ltop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 600; }
.back svg { width: 18px; height: 18px; }
.pc-swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 16px var(--pc); }
.pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.pair-line { width: 54px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--pc), transparent); }
.about { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.about small { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 10.5px; }
.about p { margin: 0; color: #c7cdd6; font-size: 14px; }
.achip { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; color: var(--c, var(--text)); background: color-mix(in srgb, var(--c, #888) 15%, transparent); margin: 4px 4px 0 0; }
.opener { border-left: 3px solid var(--pc); padding: 4px 0 4px 12px; margin: 14px 0; }
.opener small, .starter small { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 10.5px; }
.opener p { font-size: 17px; margin: 4px 0 0; }
.starters { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.starter { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.starter p { margin: 4px 0 0; }
.starter.k-a_needs small { color: var(--s); } .starter.k-b_needs small { color: var(--e); } .starter.k-together small { color: var(--green); }
.lact { margin: 10px 0; }
.capture textarea { margin: 8px 0; }
.result { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--green) 9%, var(--card)), var(--card)); }
.result small { color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.result .found { font-size: 17px; margin: 6px 0 10px; }
.next { background: rgba(0,0,0,.2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.next p { margin: 2px 0 0; font-weight: 600; }
.thread { display: flex; flex-direction: column; gap: 8px; }
.note { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.note.mine { background: #14243a; border-color: #20395a; }
.note small { color: var(--muted); }
.note p { margin: 2px 0 0; }
.note-add { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.note-add .row { justify-content: space-between; }

/* finder (Find My style) */
.finder { --pc: var(--green); position: fixed; inset: 0; z-index: 30; background: #000; display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); transition: background .5s; overflow-y: auto; }
.finder.near { background: #0d4a1f; }
.finder.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 40% { background: var(--pc); } }
.f-top { display: flex; align-items: center; gap: 10px; max-width: 560px; width: 100%; margin: 0 auto; }
.f-who { flex: 1; display: flex; align-items: center; gap: 10px; justify-content: center; min-width: 0; }
.f-who div { display: flex; flex-direction: column; min-width: 0; }
.f-who small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }
.f-arrow { width: min(52vw, 230px); aspect-ratio: 1; color: #fff; transition: transform .3s ease-out; filter: drop-shadow(0 0 30px rgba(255,255,255,.15)); }
.finder.near .f-arrow { color: #b7ffcb; }
.f-arrow svg { width: 100%; height: 100%; fill: currentColor; }
.f-dist { font-size: 64px; font-weight: 700; letter-spacing: -.03em; margin-top: 18px; font-variant-numeric: tabular-nums; }
.f-dir { font-size: 22px; color: #c9ced6; }
.f-hint { text-align: center; color: var(--muted); min-height: 22px; font-size: 14px; max-width: 520px; margin: 0 auto 6px; }
.f-map { max-width: 420px; width: 100%; margin: 0 auto; }
.f-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.f-row .btn { flex: 1; max-width: 170px; }

/* beacon */
#beacon { position: fixed; inset: 0; z-index: 80; display: none; }
#beacon.on { display: block; }
.beacon { position: absolute; inset: 0; background: var(--pc); display: grid; place-items: center; padding: 24px; animation: beat 1.1s ease-in-out infinite; color: #000; text-align: center; }
@keyframes beat { 50% { filter: brightness(1.35) saturate(1.2); } }
.bc-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; }
.bc-inner h1 { font-size: 34px; }
.bc-inner .av { box-shadow: 0 0 0 6px rgba(255,255,255,.6); }
.bc-sub { opacity: .75; }
.beacon .btn { background: rgba(0,0,0,.85); color: #fff; border-color: transparent; }
.beacon .btn.light { background: #fff; color: #000; }

/* room */
.room-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.room-head h2 { margin: 0; }
.host b { display: block; margin-bottom: 10px; }
.stats-line { color: var(--muted); font-size: 14px; margin: 16px 0 10px; }
.stats-line b { color: var(--text); }
.people { display: flex; flex-direction: column; gap: 8px; }
.ptile { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; color: var(--text); font: inherit; cursor: pointer; width: 100%; }
.pt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-body > small { color: var(--muted); }
.pt-idea { margin: 4px 0 2px; font-size: 14px; color: #d9dde4; }
.pt-pub { margin: 2px 0 0; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-head { display: flex; gap: 14px; align-items: center; }
.ps-head h3 { margin: 0; }
.ps-head p { margin: 0; }
.pubs { padding-left: 18px; margin: 4px 0 12px; color: #c7cdd6; font-size: 14px; }

/* ideas */
.tree { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.kids { margin: 6px 0 0 18px; padding-left: 12px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.node-btn { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.node-btn.cur { border-color: var(--green); }
.node-btn small { color: var(--muted); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.kv > div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.kv small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kv p { margin: 2px 0 0; font-size: 14px; }
.asp-list { display: flex; flex-direction: column; gap: 8px; }
.asp-row { border-left: 3px solid var(--c); background: var(--card); border-radius: 0 12px 12px 0; padding: 10px 12px; }
.asp-row small { color: var(--c); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.asp-row b { display: block; }
.asp-row p { margin: 2px 0 0; color: #c7cdd6; font-size: 14px; }
.answers { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.answers summary { cursor: pointer; font-weight: 600; }
.answers p { margin-top: 10px; }
.idea .item { margin-bottom: 8px; }
.empty { color: var(--muted); }

/* present */
body.present-mode { background: #050608; }
.present { display: grid; grid-template-columns: minmax(280px, 34%) 1fr; gap: 40px; padding: 40px; min-height: 100vh; align-items: start; }
.p-left { position: sticky; top: 40px; text-align: center; }
.p-left small { font-size: 18px; color: var(--muted); }
.qr { background: #fff; padding: 18px; border-radius: 22px; margin: 14px 0; }
.p-code { font: 800 64px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .22em; }
.p-right h1 { font-size: 44px; }
.p-stats { display: flex; gap: 14px; margin: 18px 0 26px; }
.p-stats div { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 22px; display: flex; flex-direction: column; }
.p-stats b { font-size: 40px; line-height: 1; }
.p-stats small { color: var(--muted); font-size: 14px; margin-top: 4px; }
.p-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.p-tile { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; animation: up .4s; }
.p-tile b { font-size: 17px; }
.p-tile p { margin: 2px 0 0; color: #c7cdd6; font-size: 14px; }
@media (max-width: 760px) { .present { grid-template-columns: 1fr; padding: 20px 16px; } .p-left { position: static; } .p-code { font-size: 44px; } .p-right h1 { font-size: 30px; } }

@media (min-width: 900px) { .page { padding-top: 32px; } }