/*!
 * LunchMeNow Social
 * © 2026 FuelTestLabs LLC. All rights reserved.
 * Proprietary and confidential. Unauthorized copying, modification or distribution
 * of this file, via any medium, is strictly prohibited. See LICENSE.
 */
:root {
  --bg: #0c0c10; --bg2: #15151c; --bg3: #1e1e28; --line: #2a2a36;
  --fg: #f4f3f8; --fg2: #b5b3c4; --fg3: #7d7a90;
  --accent: #ff7a00; --accent2: #ff6a00; --accent3: #ffb020;
  --grad: linear-gradient(135deg, #ffa21f 0%, #ff7a00 50%, #f25500 100%);
  --ring: conic-gradient(from 200deg, #ffc233, #ff8a00, #f25500, #ff8a00, #ffc233);
  --ok: #33d17a; --warn: #ffb020; --bad: #ff4d5e;
  --radius: 16px; --shadow: 0 10px 40px rgba(0,0,0,.45);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --bg2: #f5f4f8; --bg3: #ebe9f1; --line: #e1dfe8;
    --fg: #16151c; --fg2: #55526a; --fg3: #8a879c; --shadow: 0 10px 40px rgba(20,10,40,.15);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg2: #f5f4f8; --bg3: #ebe9f1; --line: #e1dfe8;
  --fg: #16151c; --fg2: #55526a; --fg3: #8a879c; --shadow: 0 10px 40px rgba(20,10,40,.15);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: var(--fg); background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; outline: none; }
input:focus, textarea:focus { border-color: var(--accent2); }
textarea { resize: none; }
img { display: block; }
a { color: var(--accent2); }
.hidden { display: none !important; }
.muted { color: var(--fg2); } .dim { color: var(--fg3); font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; } .col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; } .center { text-align: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

#app { max-width: 520px; margin: 0 auto; min-height: 100%; position: relative; background: var(--bg); }
@media (min-width: 560px) { body { background: #050507; } #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 650; background: var(--bg3); transition: transform .08s, opacity .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad); color: #fff; text-shadow: 0 1px 1px rgba(120,40,0,.25); box-shadow: 0 6px 18px -8px rgba(255,106,0,.7); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.danger { background: rgba(255,77,94,.12); color: var(--bad); }
.btn.block { width: 100%; } .btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.big { height: 54px; font-size: 17px; border-radius: 16px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; }
.icon-btn:active { background: var(--bg3); }
.icon-btn svg, .nav svg, .btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header / nav ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 16px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--bg3); }
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg3); }
.live-pill.on { background: rgba(51,209,122,.14); color: var(--ok); }
.live-pill.on .dot { background: var(--ok); box-shadow: 0 0 0 0 rgba(51,209,122,.6); animation: pulse 1.8s infinite; }
.live-pill.connecting { color: var(--warn); background: rgba(255,176,32,.12); } .live-pill.connecting .dot { background: var(--warn); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(51,209,122,.55); } 70% { box-shadow: 0 0 0 8px rgba(51,209,122,0); } 100% { box-shadow: 0 0 0 0 rgba(51,209,122,0); } }

.content { padding-bottom: calc(84px + var(--safe-b)); min-height: 100vh; }
.nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; z-index: 30; display: flex; justify-content: space-around; align-items: center; padding: 8px 8px calc(8px + var(--safe-b)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.nav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--fg3); width: 64px; padding: 4px 0; }
.nav button.on { color: var(--fg); }
.nav .create { width: 52px; height: 40px; border-radius: 14px; background: var(--grad); color: #fff; box-shadow: 0 6px 18px -6px rgba(255,106,0,.8); display: grid; place-items: center; }
.nav .create svg { width: 26px; height: 26px; }
.badge { position: absolute; top: -2px; right: 12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent2); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ---------- avatars ---------- */
.av { position: relative; flex: none; border-radius: 50%; background: var(--bg3); display: grid; place-items: center; font-weight: 700; color: var(--fg2); overflow: visible; }
.av img, .av .ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av .ini { display: grid; place-items: center; background: linear-gradient(135deg, #3a3350, #252033); color: #fff; }
.av.ring { padding: 3px; background: var(--ring); }
.av.ring.seen { background: var(--line); }
.av.ring > img, .av.ring > .ini { border: 3px solid var(--bg); }
.av .live-dot { position: absolute; right: 2%; bottom: 2%; width: 26%; height: 26%; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg); }

/* ---------- discover ---------- */
.hero { margin: 16px; padding: 26px 20px; border-radius: 22px; background: radial-gradient(120% 120% at 0% 0%, rgba(255,122,0,.28), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(255,176,32,.18), transparent 55%), var(--bg2); border: 1px solid var(--line); }
.hero h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.hero p { margin: 0 0 18px; color: var(--fg2); }
.chips { display: flex; gap: 8px; padding: 12px 16px 4px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--fg2); display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip .n { font-size: 12px; opacity: .7; }
.tray { display: flex; gap: 14px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; }
.tray::-webkit-scrollbar { display: none; }
.tray-item { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--fg2); }
.tray-item span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-item .plus { position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent2); color: #fff; border: 2px solid var(--bg); display: grid; place-items: center; font-weight: 800; font-size: 15px; line-height: 1; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 16px 6px; font-weight: 750; font-size: 16px; }
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 16px 16px; }
.card { position: relative; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; transition: transform .1s; }
.card:active { transform: scale(.98); }
.card .name { font-weight: 700; max-width: 100%; }
.card .bio { font-size: 13px; color: var(--fg2); min-height: 2.6em; }
.card .meta { display: flex; gap: 8px; font-size: 12px; color: var(--fg3); }
.card .fav { position: absolute; top: 10px; right: 12px; color: var(--warn); font-size: 14px; }
.empty { padding: 40px 28px; text-align: center; color: var(--fg2); }
.empty .big { font-size: 44px; margin-bottom: 8px; }
.notice { margin: 8px 16px; padding: 12px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; font-size: 14px; }
.notice.warn { border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.08); }
.notice.accent { border-color: rgba(255,122,0,.4); background: rgba(255,122,0,.08); }

/* ---------- overlays ---------- */
.layer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; animation: fadein .16s ease; }
.layer.sheet-layer { background: rgba(0,0,0,.55); align-items: flex-end; }
.page { width: 100%; max-width: 520px; height: 100%; background: var(--bg); overflow-y: auto; animation: slidein .2s cubic-bezier(.2,.8,.2,1); }
.page .top { position: sticky; }
.sheet { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--bg2); border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + var(--safe-b)); animation: slideup .22s cubic-bezier(.2,.8,.2,1); }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 12px; }
.sheet h3 { margin: 4px 0 12px; font-size: 19px; }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 4px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); text-align: left; }
.menu-item:last-child { border-bottom: 0; }
.menu-item .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--bg3); display: grid; place-items: center; font-size: 18px; }
.menu-item.danger { color: var(--bad); }
@keyframes fadein { from { opacity: 0; } }
@keyframes slidein { from { transform: translateX(24px); opacity: .4; } }
@keyframes slideup { from { transform: translateY(40px); opacity: .5; } }

/* ---------- profile ---------- */
.prof-head { padding: 18px 16px 8px; display: flex; gap: 18px; align-items: center; }
.prof-stats { display: flex; gap: 22px; }
.prof-stats div { text-align: center; } .prof-stats b { display: block; font-size: 18px; } .prof-stats span { font-size: 12px; color: var(--fg2); }
.prof-bio { padding: 0 16px 6px; white-space: pre-wrap; }
.prof-sub { padding: 0 16px 8px; font-size: 13px; color: var(--fg3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prof-actions { display: flex; gap: 8px; padding: 8px 16px 14px; }
.prof-actions .btn { flex: 1; height: 40px; padding: 0 10px; font-size: 14px; }
.prof-actions .btn.fav-on { color: var(--warn); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cell { position: relative; aspect-ratio: 1; background: var(--bg3); overflow: hidden; }
.cell img { width: 100%; height: 100%; object-fit: cover; }
.cell .lk { position: absolute; left: 6px; bottom: 5px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.shimmer { background: linear-gradient(90deg, var(--bg3) 0%, var(--bg2) 50%, var(--bg3) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.blurwrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
.blurwrap.blurred img { filter: blur(22px) saturate(.8); transform: scale(1.15); }
.blurwrap .reveal { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.blurwrap:not(.blurred) .reveal { display: none; }
.gone-banner { margin: 8px 16px; padding: 10px 12px; border-radius: 12px; background: var(--bg3); color: var(--fg2); font-size: 14px; }

/* ---------- media viewers ---------- */
.viewer { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; justify-content: center; }
.viewer-inner { position: relative; width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column; }
.viewer .vtop { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: calc(10px + var(--safe-t)) 12px 30px; display: flex; gap: 10px; align-items: center; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.viewer .vtop .icon-btn { color: #fff; }
.viewer .stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; position: relative; }
.viewer .stage .viewer-img { position: absolute; inset: 0; }
.viewer .stage > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.viewer .stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer .vbottom { padding: 12px 14px calc(14px + var(--safe-b)); background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.viewer .spinner, .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; }
.spinner.dark { border-color: var(--line); border-top-color: var(--fg); }
@keyframes spin { to { transform: rotate(360deg); } }
.bars { position: absolute; top: calc(6px + var(--safe-t)); left: 8px; right: 8px; z-index: 4; display: flex; gap: 4px; }
.bars div { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.bars i { display: block; height: 100%; width: 0; background: #fff; }
.story-stage { position: relative; flex: 1; display: grid; place-items: center; background: #111; overflow: hidden; }
.story-stage img { width: 100%; height: 100%; object-fit: contain; }
.tapzones { position: absolute; inset: 0; z-index: 2; display: flex; }
.tapzones div { flex: 1; } .tapzones div:last-child { flex: 2; }
.reply-row { display: flex; gap: 8px; align-items: center; }
.reply-row input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; border-radius: 99px; height: 44px; }
.reply-row input::placeholder { color: rgba(255,255,255,.7); }
.heart { font-size: 26px; line-height: 1; transition: transform .15s; }
.heart.on { transform: scale(1.15); }
.pop-heart { position: absolute; font-size: 90px; animation: pop .8s ease forwards; pointer-events: none; z-index: 5; }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 22px; display: grid; place-items: center; }
.nav-arrow.l { left: 8px; } .nav-arrow.r { right: 8px; }

/* ---------- editors ---------- */
.editor { position: fixed; inset: 0; z-index: 70; background: #000; color: #fff; display: flex; justify-content: center; }
.editor .ed-inner { width: 100%; max-width: 520px; display: flex; flex-direction: column; height: 100%; }
.ed-top { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-t)) 12px 10px; }
.ed-top .icon-btn { color: #fff; background: rgba(255,255,255,.1); }
.ed-canvas-wrap { flex: 1; display: grid; place-items: center; padding: 0 12px; min-height: 0; }
.ed-canvas { position: relative; aspect-ratio: 9/16; height: 100%; max-height: 100%; max-width: 100%; border-radius: 16px; overflow: hidden; touch-action: none; background: #222; }
.ed-canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-text { position: absolute; transform: translate(-50%, -50%); font-weight: 800; text-align: center; white-space: pre; line-height: 1.15; cursor: grab; padding: .1em .35em; border-radius: .3em; user-select: none; }
.ed-text.sel { outline: 2px dashed rgba(255,255,255,.8); outline-offset: 4px; }
.ed-tools { padding: 10px 12px calc(12px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; }
.swatches { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.swatch { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.swatch.on { outline: 3px solid #fff; outline-offset: 2px; }
.ed-tools input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--accent2); }
.ed-textinput { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ed-textinput textarea { background: transparent; border: 0; color: #fff; font-size: 30px; font-weight: 800; text-align: center; }
.composer-preview { width: 100%; max-height: 55vh; object-fit: contain; background: var(--bg2); border-radius: 14px; }

/* ---------- chats ---------- */
.thread-item { display: flex; gap: 12px; align-items: center; padding: 10px 16px; width: 100%; text-align: left; }
.thread-item:active { background: var(--bg2); }
.thread-item .name { font-weight: 700; }
.thread-item .prev { font-size: 14px; color: var(--fg2); }
.thread-item.unread .prev { color: var(--fg); font-weight: 600; }
.ubadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent2); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.chat { display: flex; flex-direction: column; height: 100%; }
.chat .msgs { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 4px; }
.bubble { max-width: 78%; padding: 9px 13px; border-radius: 20px; background: var(--bg3); align-self: flex-start; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.bubble.me { align-self: flex-end; background: linear-gradient(135deg, #ff8a00, #f25500); color: #fff; }
.msg-meta { font-size: 11px; color: var(--fg3); align-self: flex-start; margin: 0 6px 6px; }
.msg-meta.me { align-self: flex-end; }
.day-sep { align-self: center; font-size: 12px; color: var(--fg3); margin: 10px 0; }
.story-ref { display: flex; gap: 8px; align-items: center; font-size: 12px; opacity: .85; margin-bottom: 6px; }
.story-ref img { width: 36px; height: 64px; border-radius: 6px; object-fit: cover; }
.lunch-card { align-self: stretch; margin: 6px 20px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; gap: 8px; }
.lunch-card .t { font-weight: 800; font-size: 16px; }
.lunch-card .st { font-size: 13px; font-weight: 700; }
.lunch-card .st.accepted { color: var(--ok); } .lunch-card .st.declined { color: var(--bad); } .lunch-card .st.pending { color: var(--warn); }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 8px 10px calc(8px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--bg); }
.chat-input textarea { border-radius: 22px; min-height: 44px; max-height: 120px; padding: 11px 16px; }
.send { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; }
.send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- activity ---------- */
.act { display: flex; gap: 12px; align-items: center; padding: 10px 16px; width: 100%; text-align: left; }
.act .thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--bg3); }

/* ---------- me ---------- */
.me-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 10px; text-align: center; }
.me-head h2 { margin: 6px 0 0; font-size: 22px; }
.me-head .edit-av { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: 15px; border: 3px solid var(--bg); }
.group { margin: 14px 16px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.group-title { padding: 18px 20px 0; font-size: 13px; font-weight: 700; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; }
.set { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.set:last-child { border-bottom: 0; }
.set .lbl { flex: 1; min-width: 0; } .set .lbl small { display: block; color: var(--fg3); font-size: 12px; margin-top: 2px; }
.switch { position: relative; width: 50px; height: 30px; flex: none; border-radius: 15px; background: var(--line); transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on { background: var(--ok); } .switch.on::after { transform: translateX(20px); }
.relay { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 14px; }
.relay .d { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); } .relay .d.on { background: var(--ok); }
.my-stories { display: flex; gap: 8px; padding: 0 16px; overflow-x: auto; }
.my-story { flex: none; width: 72px; height: 128px; border-radius: 12px; overflow: hidden; position: relative; background: var(--bg3); }
.my-story img { width: 100%; height: 100%; object-fit: cover; }
.my-story span { position: absolute; left: 6px; bottom: 5px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* ---------- onboarding ---------- */
.logo-lockup { display: flex; align-items: center; gap: 14px; }
.logo-mark { width: 64px; height: 64px; flex: none; border-radius: 18px; background: var(--grad); box-shadow: 0 10px 30px rgba(255,122,0,.28); }
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-lockup .brand { font-size: 28px; line-height: 1; }
.logo-lockup .slogan { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--fg2); }
.logo-lockup .slogan b { color: var(--accent); font-weight: 700; }
.linkish { align-self: center; padding: 10px 8px; min-height: 44px; font-size: 14px; color: var(--fg2); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; }
.onb { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 28px 22px calc(28px + var(--safe-b)); gap: 18px; }
.onb h1 { font-size: 38px; line-height: 1.05; letter-spacing: -.03em; margin: 0; }
.onb h1 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.onb .points { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 10px; }
.onb .point { display: flex; gap: 12px; align-items: flex-start; color: var(--fg2); }
.onb .point .e { font-size: 20px; width: 28px; flex: none; }
.av-pick { width: 116px; height: 116px; border-radius: 50%; margin: 0 auto; background: var(--bg2); border: 2px dashed var(--line); display: grid; place-items: center; overflow: hidden; color: var(--fg3); font-size: 13px; text-align: center; }
.av-pick img { width: 100%; height: 100%; object-fit: cover; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg2); }
.check input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--accent2); }
.field-label { font-size: 13px; font-weight: 700; color: var(--fg2); margin-bottom: -4px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + var(--safe-t)); z-index: 100; width: calc(100% - 24px); max-width: 480px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: 14px; background: var(--bg3); color: var(--fg); box-shadow: var(--shadow); border: 1px solid var(--line); font-weight: 600; font-size: 14px; animation: slideup .2s ease; }
.toast.err { border-color: rgba(255,77,94,.5); }

/* ---------- live feed ---------- */
.feed { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 20px; }
.fcard { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .fcard { margin: 0 12px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } }
.fhead { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; }
.ftag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--grad); padding: 3px 8px; border-radius: 8px; }
.fmedia { position: relative; width: 100%; background: var(--bg3); overflow: hidden; }
.fmedia.post { aspect-ratio: 4 / 5; }
.fmedia.story { aspect-ratio: 9 / 16; max-height: 78vh; margin: 0 auto; background: #111; cursor: pointer; }
.fmedia .fimg { position: absolute; inset: 0; }
.fmedia .fimg img { width: 100%; height: 100%; object-fit: cover; }
.fmedia.story .fimg img { object-fit: contain; }
.factions { display: flex; align-items: center; gap: 4px; padding: 6px 10px 2px; }
.faction { height: 40px; min-width: 40px; padding: 0 8px; border-radius: 10px; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.faction:active { background: var(--bg3); }
.factions .faction:not(.heart) { font-size: 15px; }
.fcount { font-weight: 700; font-size: 14px; }
.fcap { padding: 2px 14px 12px; white-space: pre-wrap; font-size: 14px; }
.new-pill { position: sticky; top: calc(64px + var(--safe-t)); z-index: 15; display: block; margin: 6px auto; padding: 8px 16px; border-radius: 99px; background: var(--grad); color: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--shadow); }
.room-av { display: grid; place-items: center; background: linear-gradient(135deg, #3a2a14, #24190c); border-radius: 50%; font-size: 22px; flex: none; }
.room-from { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fg2); margin: 8px 0 2px 4px; align-self: flex-start; }

/* ---------- lunch invites, places, zodiac ---------- */
.lunch-word { color: var(--accent); }
.lunch-phrase { text-transform: lowercase; font-weight: 800; letter-spacing: -.01em; }
.lunch-card .t { font-size: 19px; }
.lunch-card .lrow { display: flex; gap: 10px; align-items: flex-start; }
.lunch-card a.btn { text-decoration: none; }
.lunch-sheet .field-label { text-transform: lowercase; margin-top: 6px; }
.seg { display: inline-flex; background: var(--bg3); border-radius: 12px; padding: 3px; gap: 3px; align-self: flex-start; }
.seg-btn { height: 34px; padding: 0 16px; border-radius: 10px; font-weight: 700; color: var(--fg2); }
.seg-btn.on { background: var(--bg); color: var(--fg); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.time-chips .chip.on, .lunch-sheet .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.time-input { width: auto; padding: 8px 10px; height: 38px; }
.place-list { display: flex; flex-direction: column; max-height: 290px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.place { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.place:last-child { border-bottom: 0; }
.place.on { background: rgba(255,122,0,.12); }
.pico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--bg3); display: grid; place-items: center; font-size: 18px; }
.pcheck { color: var(--accent); font-weight: 900; font-size: 18px; }
.zsel { appearance: none; -webkit-appearance: none; }
.zsym { color: var(--accent); font-weight: 600; }
.zchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--bg3); font-size: 13px; font-weight: 600; color: var(--fg2); }
.zchip.match { background: rgba(255,122,0,.14); color: var(--accent); }
.copyright { text-align: center; font-size: 12px; color: var(--fg3); margin-top: 6px; }

/* ---------- followers, room host, live video ---------- */
.card .fav { color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; top: 8px; right: 10px; }
.card .hostcrown { position: absolute; top: 8px; left: 10px; font-size: 16px; }
.follow-btn { background: var(--grad); color: #fff; }
.follow-btn.on { background: var(--bg3); color: var(--fg); }
.prof-stats button { text-align: center; color: inherit; }
.prof-stats button b { display: block; font-size: 18px; } .prof-stats button span { font-size: 12px; color: var(--fg2); }
.live-wrap { flex: none; }
.live-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg2); font-size: 14px; }
.live-bar.on { background: rgba(255,60,60,.10); }
.live-box { position: relative; background: #000; height: 38vh; min-height: 200px; max-height: 420px; }
.live-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.live-video.mirror { transform: scaleX(-1); }
.live-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.live-ctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.live-btn { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 21px; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; font-weight: 700; }
.live-btn.end { background: #e5383b; }
.live-tap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 20px; border-radius: 99px; background: rgba(0,0,0,.7); color: #fff; font-weight: 800; font-size: 16px; }
.live-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: #fff; background: rgba(0,0,0,.55); font-size: 14px; }
.live-box.full { position: fixed; inset: 0; z-index: 80; height: auto; max-height: none; }
.live-box.full .live-ctl { bottom: calc(16px + var(--safe-b)); }
.live-box.full .live-badge { top: calc(12px + var(--safe-t)); }

/* ---------- open-to tags, treat, horoscope, wave, calls ---------- */
.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pick-grid .chip { justify-content: center; height: 42px; border-radius: 14px; font-size: 14px; }
.pick-grid .chip.on, .sheet .chips .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pick-grid .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.me-head .tags, .card .tags { justify-content: center; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; background: var(--bg3); font-size: 12.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; }
.tag.cash { background: rgba(255,122,0,.16); color: var(--accent); }
.tags.short .tag { font-size: 12px; padding: 2px 8px; }
.horo-lucky { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg3); font-size: 14px; }
button.zchip { cursor: pointer; }
.prof-actions .wave-btn { flex: 0 0 46px; padding: 0; font-size: 18px; }
.wave-msg { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.wave-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.wave-hand { font-size: 40px; display: inline-block; animation: wave 1.2s ease 2; transform-origin: 70% 80%; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 50% { transform: rotate(-8deg); } 75% { transform: rotate(14deg); } }
.sys-line { align-self: center; font-size: 12.5px; color: var(--fg3); background: var(--bg2); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; margin: 6px 0; }
.call { position: fixed; inset: 0; z-index: 90; background: radial-gradient(120% 90% at 50% 0%, #3a1d05, #0c0c10 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(60px + var(--safe-t)) 20px calc(36px + var(--safe-b)); }
/* kept in the page (not display:none) so a voice call's audio always plays on iPhone */
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; pointer-events: none; }
.call.video.connected .call-remote { opacity: 1; }
.call-local { position: absolute; right: 14px; top: calc(14px + var(--safe-t)); width: 104px; height: 150px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.5); z-index: 2; background: #000; }
.call-local.mirror { transform: scaleX(-1); }
.call-who { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.call.video.connected .call-who .av { display: none; }
.call.video.connected .call-who { align-self: flex-start; text-shadow: 0 1px 4px rgba(0,0,0,.8); align-items: flex-start; }
.call-name { font-size: 24px; font-weight: 800; }
.call-status { font-size: 15px; opacity: .85; }
.call-btns { position: relative; z-index: 2; display: flex; gap: 22px; align-items: center; }
.call-btn { min-width: 72px; height: 72px; padding: 0 18px; border-radius: 36px; font-weight: 800; font-size: 15px; color: #fff; background: rgba(255,255,255,.16); }
.call-btn.sm { min-width: 58px; width: 58px; height: 58px; padding: 0; font-size: 22px; }
.call-btn.sm.off { background: rgba(255,255,255,.4); }
.call-btn.end { background: #e5383b; }
.call-btn.ok { background: #2fb760; }

/* ---------- games ---------- */
.page.game { display: flex; flex-direction: column; }
.game-status { text-align: center; font-weight: 700; padding: 14px 16px 10px; font-size: 16px; min-height: 48px; }
.game-body { padding: 0 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.game-btns { display: flex; gap: 10px; justify-content: center; padding: 16px 12px calc(20px + var(--safe-b)); flex-wrap: wrap; }
.ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(84vw, 340px); }
.ttt-cell { aspect-ratio: 1; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); font-size: 54px; font-weight: 800; color: var(--fg); display: grid; place-items: center; }
.ttt-cell.x { color: var(--accent); } .ttt-cell.o { color: #4db8ff; }
.ttt-cell:not(:disabled):active { background: var(--bg3); }
.gboard { display: grid; grid-template-columns: repeat(8, 1fr); width: min(96vw, 480px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid #3a2a18; touch-action: manipulation; }
.sq { position: relative; display: grid; place-items: center; padding: 0; border-radius: 0; }
.sq.lt { background: #f0d9b5; } .sq.dk { background: #b06a2c; }
.sq.last { box-shadow: inset 0 0 0 100px rgba(255, 235, 59, .28); }
.sq.sel { box-shadow: inset 0 0 0 100px rgba(255, 122, 0, .55); }
.sq.mv::after { content: ''; width: 28%; height: 28%; border-radius: 50%; background: rgba(0, 0, 0, .32); }
.sq.cap { box-shadow: inset 0 0 0 4px rgba(229, 56, 59, .9); }
.sq.chk { background: radial-gradient(circle, #ff5a5a 30%, #b3261e 100%); }
.pc { font-size: min(9.6vw, 46px); line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", "DejaVu Sans", serif; }
.pc.w { color: #fff; text-shadow: 0 0 2px #000, 0 1px 2px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000; }
.pc.b { color: #151515; text-shadow: 0 0 1px rgba(255, 255, 255, .55); }
.taken { min-height: 26px; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; color: var(--fg2); font-size: 13px; }
.taken .pc { font-size: 22px; }
.promo { display: flex; align-items: center; gap: 8px; }
.promo .btn { font-size: 26px; width: 52px; padding: 0; font-family: "Segoe UI Symbol", "Apple Symbols", serif; }
.ckp { width: 76%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: min(4.6vw, 20px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .4); }
.ckp.w { background: #fff7e8; } .ckp.b { background: #ff7a00; }
.bs-label { font-size: 13px; font-weight: 700; color: var(--fg2); align-self: flex-start; padding-left: 4px; }
.bs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(80vw, 320px); }
.bs-grid.small { width: min(52vw, 200px); gap: 4px; }
.bs-cell { aspect-ratio: 1; border-radius: 10px; background: #12314d; border: 1px solid #1d4a73; color: #fff; font-size: 22px; display: grid; place-items: center; padding: 0; }
.bs-grid.small .bs-cell { font-size: 14px; border-radius: 7px; }
.bs-cell:disabled { opacity: .75; } .bs-cell.miss { background: #0c2236; color: #6fa8d6; opacity: 1; }
.bs-cell.hit { background: #7a1f12; border-color: #e5383b; opacity: 1; } .bs-cell.ship { background: #2a5f8f; }
button.bs-cell:not(:disabled):active { background: #1d4a73; }
.spin-wheel { font-size: 84px; text-align: center; line-height: 1.2; transition: transform .05s; }
.spin-wheel.tick { transform: scale(1.08) rotate(4deg); }
.spin-label { text-align: center; font-size: 20px; font-weight: 800; min-height: 28px; }
/* ---------- sessions ---------- */
.ses-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px 0; font-size: 12.5px; }
.ses-live { margin-top: 10px; }
.ses-badge { max-width: 100%; font-size: 12.5px; font-weight: 700; color: var(--accent); background: rgba(255,122,0,.12); border-radius: 99px; padding: 3px 10px; }

/* ---------- work + contact cards ---------- */
.chips.work-bar { padding-top: 6px; }
.chip.work { border-color: rgba(255,122,0,.45); color: var(--accent); }
.chip.work.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.sub { height: 30px; font-size: 13px; }
.chip.sub.on { background: var(--bg3); color: var(--fg); border-color: var(--accent); }
.work-badge { max-width: 100%; font-size: 12.5px; font-weight: 700; color: var(--fg); background: var(--bg3); border: 1px solid rgba(255,122,0,.4); border-radius: 99px; padding: 2px 10px; }
.work-badge.m1 { background: rgba(255,122,0,.16); color: var(--accent); }
.work-card { padding: 14px; border-radius: 18px; border: 1px solid rgba(255,122,0,.35); background: rgba(255,122,0,.06); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.wk-top { display: flex; align-items: center; gap: 8px; }
.wk-mode { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.wk-today { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: #fff; }
.wk-role { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.wk-note { color: var(--fg2); white-space: pre-wrap; overflow-wrap: anywhere; }
.wk-safe { font-size: 12px; }
.biz-line { font-size: 13px; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
.biz-line span { color: var(--fg2); font-weight: 600; }
.contact-card { padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.contact-card.in-chat { align-self: flex-start; margin: 6px 20px; max-width: 84%; min-width: 220px; }
.contact-card.in-chat.me { align-self: flex-end; }
.cc-name { font-size: 17px; font-weight: 750; }
.cc-line { color: var(--fg); text-decoration: none; min-height: 28px; display: block; overflow-wrap: anywhere; }
.lunch-sheet .seg { align-self: stretch; }
.lunch-sheet .seg .seg-btn { flex: 1; }
.met-card { align-self: stretch; margin: 6px 20px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg2); display: flex; gap: 12px; align-items: center; }
.met-ic { font-size: 24px; }

/* ---------- card games ---------- */
.ctable { width: 100%; max-width: 420px; padding: 14px 12px; border-radius: 26px; background: radial-gradient(120% 90% at 50% 40%, #17533f 0%, #0d3327 70%, #0a271e 100%); border: 6px solid #2a1a10; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35); color: #f4f3f8; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 300px; justify-content: center; }
.prow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 62px; }
.prow.board { margin: 4px 0; }
.pcard { width: 42px; height: 60px; border-radius: 7px; background: #fff; color: #15151c; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.35); font-variant-numeric: lining-nums; }
.pcard b { font-size: 19px; font-weight: 800; letter-spacing: -.04em; }
.pcard span { font-size: 19px; margin-top: 2px; }
.pcard.red { color: #d3202e; }
.pcard.big { width: 58px; height: 82px; border-radius: 9px; }
.pcard.big b, .pcard.big span { font-size: 26px; }
.pcard.back { background: repeating-linear-gradient(45deg, #ff7a00 0 6px, #f25500 6px 12px); border: 3px solid #fff; }
.pcard.slot { background: rgba(255,255,255,.06); box-shadow: none; border: 1.5px dashed rgba(255,255,255,.22); }
.pseat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 4px 12px; border-radius: 99px; font-size: 14px; }
.pseat.turn { background: rgba(255,255,255,.12); box-shadow: 0 0 0 2px var(--accent); }
.pname { font-weight: 750; max-width: 140px; display: inline-flex; align-items: center; gap: 6px; }
.dbtn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #15151c; font-size: 11px; font-weight: 800; }
.chipn { color: #ffd27a; font-weight: 700; font-variant-numeric: tabular-nums; }
.pbet { padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.35); font-weight: 700; font-size: 13px; }
.ptot { padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.14); font-weight: 700; font-size: 13px; }
.pres { font-weight: 800; } .pres.win { color: #6ee7a0; } .pres.lose { color: #ff9a9a; }
.ppot { font-size: 14px; color: rgba(255,255,255,.8); } .ppot b { color: #ffd27a; font-size: 17px; }
.phint { font-size: 13px; font-weight: 700; color: #ffd27a; }
.psep { width: 60%; height: 1px; background: rgba(255,255,255,.14); margin: 4px 0; }
.fair-note { max-width: 420px; font-size: 12px; color: var(--fg3); text-align: center; padding: 0 8px; }
.ctable .spinner { margin: 30px 0; }
.upd-chip { height: 30px; padding: 0 12px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }

/* ---------- join requests on the room / live screen ---------- */
.asks-strip { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; flex: none; }
.asks-strip:empty { display: none; }
.asks-strip.over { position: absolute; left: 10px; right: 10px; top: 44px; padding: 0; z-index: 3; }
.live-box.full .asks-strip.over { top: calc(48px + var(--safe-t)); }
.ask-row { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px 6px 6px; border-radius: 14px; background: var(--bg2); border: 1px solid rgba(255,122,0,.5); font-size: 14px; text-align: left; }
.ask-row .btn.sm { min-height: 36px; }
.ask-row.more { justify-content: center; font-weight: 700; color: var(--fg2); }
.asks-strip.over .ask-row { background: rgba(12,12,16,.82); color: #fff; border-color: rgba(255,160,60,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.asks-strip.over .ask-row .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.asks-strip.over .ask-row.more { color: #fff; }

/* ---------- hiring: roles, apply, interview line, shortlist, poster ---------- */
.hire-tag { font-size: 15px; }
.role-list { display: flex; flex-direction: column; gap: 8px; }
.role-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.role-tile.on { border-color: var(--accent); }
.role-done { font-weight: 800; color: var(--ok); font-size: 14px; white-space: nowrap; }
.q-line { font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 14px; background: rgba(255,122,0,.12); align-items: center; }
.li-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 36px; color: var(--fg); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.app-page { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.app-card.star { border-color: rgba(255,176,32,.7); }
.star-btn { width: 44px; height: 44px; font-size: 26px; color: var(--fg3); }
.star-btn.on { color: #ffb020; }
.poster-img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.call-iv { position: relative; z-index: 2; align-self: stretch; margin: 0 14px; padding: 10px 12px; border-radius: 16px; background: rgba(12,12,16,.78); border: 1px solid rgba(255,160,60,.6); color: #fff; display: flex; flex-direction: column; gap: 8px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; }
.call-iv .iv-title { font-weight: 800; }
.call-iv .iv-dim { color: rgba(255,255,255,.75); }
.call-iv [data-ivclock] { font-variant-numeric: tabular-nums; white-space: nowrap; color: #ffd27a; }
.call-iv [data-ivclock].over { color: #ff9a9a; }
.call-iv .li-link { color: #fff; }
.call-iv .btn { color: #fff; background: rgba(255,255,255,.14); }
.call-iv a.btn { min-height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---- open house: a property in the room ---- */
.oh-gal { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 2px -14px; padding: 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.oh-gal::-webkit-scrollbar { display: none; }
.oh-ph { position: relative; flex: none; height: 200px; border-radius: 14px; overflow: hidden; background: var(--bg3); scroll-snap-align: center; cursor: pointer; }
.oh-gal .oh-ph { max-width: 86%; }
.oh-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oh-ph:not([data-loaded]) img { visibility: hidden; }
.oh-ph-off { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--fg3); }
.oh-ph.viewer-img { height: auto; border-radius: 0; background: #000; cursor: default; }
.oh-ph.viewer-img img { object-fit: contain; }
.oh-ph.viewer-img .oh-ph-off { color: #fff; }
.oh-price { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.oh-edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.oh-edit-ph, .oh-add { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); }
.oh-edit-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oh-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 650; color: var(--fg2); border-style: dashed; }
.oh-add[disabled] { opacity: .5; }
.oh-ph-btn { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; display: grid; place-items: center; }
.oh-ph-btn.l { right: auto; left: 4px; }
.oh-cover { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 700; }
.oh-ad { width: 100%; }
.oh-home-cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--bg3); }
a.btn { text-decoration: none; color: var(--fg); }
.oh-list-card { width: 100%; gap: 8px; }
.oh-list-cover { width: 100%; height: auto; aspect-ratio: 16 / 10; cursor: inherit; }
/* the three views of the first screen sit on one line, also on narrow phones */
.chips.work-bar { gap: 6px; }
.work-bar .chip.work { padding: 0 11px; gap: 5px; }
@media (max-width: 400px) { .chips.work-bar { gap: 5px; padding-left: 12px; padding-right: 12px; } .work-bar .chip.work { padding: 0 8px; gap: 4px; font-size: 13px; } }
/* feed: open houses and job openings sit between the photos */
.fmedia.house { aspect-ratio: 16 / 10; cursor: pointer; }
.fmedia .oh-ph.fimg { height: auto; border-radius: 0; }
.fbody { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 14px; }
/* people grid: both columns stay the same width whatever a card holds; long labels are cut with "…" */
.people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-width: 0; }
.card > * { max-width: 100%; }
.card .work-badge, .card .ses-badge { max-width: 100%; }
/* on a person card the work label may take two lines before it is cut */
.card .work-badge { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; border-radius: 12px; padding: 3px 10px; line-height: 1.3; }

/* ---- open now: walk-in businesses ---- */
.shop-pill { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.shop-pill.s-free { background: rgba(46,204,113,.16); color: var(--ok); }
.shop-pill.s-wait { background: rgba(255,176,32,.18); color: var(--accent3); }
.shop-pill.s-full { background: rgba(255,77,94,.14); color: var(--bad); }
.shop-badge.s-free { border-color: rgba(46,204,113,.5); }
.shop-item { display: flex; flex-direction: column; gap: 4px; }
.shop-dist { padding-left: 4px; }
.counter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 16px 8px; }
.counter-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 124px; padding: 12px 6px; border-radius: 18px; background: var(--bg2); border: 2px solid var(--line); text-align: center; }
.counter-btn .e { font-size: 30px; line-height: 1; }
.counter-btn b { font-size: 16px; }
.counter-btn small { font-size: 12px; color: var(--fg3); }
.counter-btn.on.s-free { border-color: var(--ok); background: rgba(46,204,113,.12); }
.counter-btn.on.s-wait { border-color: var(--accent3); background: rgba(255,176,32,.12); }
.counter-btn.on.s-full { border-color: var(--bad); background: rgba(255,77,94,.10); }
.ask-row.past { border-color: var(--line); }
/* the views of the first screen: equal tiles on one line, picture over label */
.view-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 6px 16px 0; }
.work-bar .chip.work.vtab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: auto; min-height: 56px; padding: 7px 2px; border-radius: 14px; font-size: 12.5px; min-width: 0; }
.vtab .em { font-size: 19px; line-height: 1; }
.vtab .ico.em svg { width: 26px; height: 26px; }
.vtab .lbl { max-width: 100%; white-space: nowrap; overflow: hidden; }
/* how many are live: a small number in the tile's corner, so it never squeezes the label */
.vtab .n { position: absolute; top: 4px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; opacity: 1; }
.vtab.on .n { background: #fff; color: var(--accent); }
@media (max-width: 380px) { .work-bar .chip.work.vtab { font-size: 12px; padding: 7px 1px; } .view-tabs { gap: 4px; padding-left: 10px; padding-right: 10px; } }
@media (max-width: 340px) { .work-bar .chip.work.vtab { font-size: 10.5px; } .view-tabs { padding-left: 6px; padding-right: 6px; } }

/* ---- search on the first screen ---- */
.search-bar { display: flex; align-items: center; gap: 8px; margin: 8px 16px 2px; padding: 0 4px 0 12px; height: 46px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.search-bar:focus-within { border-color: var(--accent2); }
.search-bar input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-bar .icon-btn { width: 38px; height: 38px; flex: none; }
.search-ic { font-size: 15px; opacity: .75; }
[hidden] { display: none !important; }

/* ---- garage sale ---- */
.gs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gs-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.gs-item.sold .gs-photo, .gs-item.sold .gs-name, .gs-item.sold .gs-price { opacity: .45; }
.gs-item.dimmed { opacity: .6; }
.gs-photo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; }
.gs-nopic { display: grid; place-items: center; font-size: 30px; cursor: default; }
.gs-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs-price { font-weight: 800; font-size: 16px; color: var(--accent); }
.gs-state { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--bg3); color: var(--fg2); }
.gs-state.sold { background: rgba(255,77,94,.14); color: var(--bad); }
.gs-state.held { background: rgba(255,176,32,.18); color: var(--accent3); }
.gs-state.mine { background: rgba(46,204,113,.16); color: var(--ok); }
.gs-state.wait { background: rgba(255,176,32,.12); color: var(--accent3); }
.gs-edit { display: flex; align-items: center; gap: 8px; }
.gs-pic { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--bg2); border: 1px dashed var(--line); display: grid; place-items: center; font-size: 20px; overflow: hidden; }
.gs-pic.has { border-style: solid; }
.gs-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-price-in { flex: none; width: 84px; }
/* five views now: labels may break onto two lines so every tile keeps its place */
.vtab .lbl { white-space: normal; line-height: 1.12; text-align: center; }
.work-bar .chip.work.vtab { min-height: 64px; padding: 7px 1px; }
.view-tabs { gap: 5px; }

/* the room you're in: always on top of the main screens, with a way back and a way out */
.room-bar { display: flex; align-items: center; gap: 10px; margin: 8px 16px 2px; padding: 8px 10px 8px 12px; border-radius: 14px; background: var(--bg2); border: 1px solid rgba(255,122,0,.4); font-size: 14px; }
.room-bar .rb-ic { font-size: 20px; flex: none; }
.room-bar .rb-name { font-weight: 750; }
.room-bar .btn { flex: none; }
.room-bar { flex-wrap: wrap; }
.room-bar .grow { flex: 1 1 0; }
.room-bar .rb-more { flex: 1 0 100%; margin: 2px 0 0; padding: 7px 0 1px; border: 0; border-top: 1px solid var(--line, rgba(255,255,255,.08)); background: none; color: var(--accent, #ff7a00); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.rb-star { flex: none; width: 34px; height: 34px; font-size: 20px; line-height: 1; color: var(--muted, #9a97a8); }
.rb-star.on { color: #ffb020; }
.your-rooms { gap: 8px; }
.yr-head { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #9a97a8); margin: 8px 0 0; }
.yr-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--bg2); }
.yr-row .yr-ic { font-size: 22px; flex: none; }
.yr-row .yr-name { font-weight: 700; }
.yr-row .btn { flex: none; }
/* garage sale: offers waiting for the seller */
.gs-offers { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255,122,0,.08); border: 1px solid rgba(255,122,0,.4); }
.gs-offer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.gs-offer .grow { flex: 1 1 120px; }
.gs-offer-btns { flex: 1 1 100%; display: flex; gap: 8px; }
.gs-offer-btns .btn { flex: 1; }
.gs-amt { color: var(--accent); }

/* preview of the hosting story: a tall picture, kept small enough to see the buttons under it */
.story-preview { width: auto; max-width: 100%; max-height: 46vh; align-self: center; }

/* the standard row under a card: like · comment · repost · share */
.factions.std { gap: 2px; }
.factions.std .faction, .factions.std .faction.heart { flex: 1 1 0; min-width: 0; padding: 0 4px; gap: 6px; font-size: 14px; white-space: nowrap; }
.fcard > .factions.std { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; padding-bottom: 6px; }
/* comments */
.cm-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 0; }
.cm { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.cm-face { flex: none; }
.cm-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.viewer .vcm { color: #fff; font-weight: 700; margin-left: 14px; padding: 6px 4px; }

/* open now: the team (ask for someone by name) */
.master-pick { display: flex; flex-direction: column; gap: 6px; }
.master-chip.s-busy:not(.on) { border-color: rgba(255,176,32,.5); }
.master-chip:disabled { opacity: .45; text-decoration: line-through; }
.team-row .seg { display: flex; gap: 4px; flex: none; }
.dist-head { margin: 14px 16px 6px; font-weight: 750; font-size: 14px; }

/* live clips: short videos on stories */
.story-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.clip-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px 16px 18px; pointer-events: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.clip-badge { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #e0182d; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.clip-cap { color: #fff; font-weight: 750; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.fmedia.clip { position: relative; }
.fmedia .clip-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 26px; border: 2px solid rgba(255,255,255,.85); z-index: 2; }
.fmedia .clip-badge.abs { position: absolute; top: 10px; left: 10px; z-index: 2; }
.fmedia .clip-cap.abs { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; font-size: 16px; }
.clip-page { position: relative; height: calc(100vh - 64px - var(--safe-t)); height: calc(100dvh - 64px - var(--safe-t)); background: #000; overflow: hidden; }
.clip-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-cam.mirror { transform: scaleX(-1); }
.clip-live { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 6px; background: #e0182d; color: #fff; font-weight: 800; font-size: 12px; z-index: 2; }
.clip-flip { position: absolute; top: 8px; right: 10px; z-index: 2; font-size: 22px; background: rgba(0,0,0,.35); border-radius: 50%; }
.clip-controls { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-b)); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; }
.clip-secs { font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.clip-hint { font-size: 14px; opacity: .9; text-shadow: 0 1px 3px #000; }
.clip-rec { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: transparent; display: grid; place-items: center; padding: 0; }
.clip-rec .clip-ring { --p: 0; width: 60px; height: 60px; border-radius: 50%; background: #e0182d; transition: all .2s; }
.clip-rec { --p: 0; }
.clip-rec.on { background: conic-gradient(#e0182d calc(var(--p) * 1turn), rgba(255,255,255,.18) 0); }
.clip-rec.on .clip-ring { width: 30px; height: 30px; border-radius: 7px; }
.clip-preview { width: 100%; max-height: 62vh; border-radius: 14px; background: #000; object-fit: contain; }
.clip-frame { position: relative; }
.clip-frame .clip-badge { position: absolute; top: 10px; left: 10px; }
.clip-progress { height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.clip-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

.mention { display: inline; padding: 0; border: 0; background: none; font: inherit; color: #7fd0ff; font-weight: 800; pointer-events: auto; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tag-pick .chip { display: inline-flex; align-items: center; gap: 4px; }

/* spotlight: one paid card at the top */
.spotlight { position: relative; margin: 8px 16px 4px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,162,31,.16), rgba(242,85,0,.10)); border: 1px solid rgba(255,122,0,.45); }
.spot-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 44px 12px 14px; text-align: left; color: inherit; background: none; border: 0; font: inherit; }
.spot-ic { font-size: 28px; flex: none; }
.spot-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent3, #ffb020); }
.spot-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; font-size: 14px; opacity: .7; }
.btn.boost { border-color: rgba(255,176,32,.5); }
.btn.boost.on { opacity: 1; color: var(--accent3, #ffb020); }
.boost-price { font-size: 22px; } .boost-price b { font-size: 34px; color: var(--accent); }

/* @handles */
.handle-chip { margin: 2px 0 4px; padding: 4px 12px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--accent); font-weight: 750; }
.handle-input { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--bg2); }
.handle-input span { font-weight: 800; color: var(--accent); font-size: 18px; }
.handle-input input { border: 0; background: transparent; padding-left: 0; }
[data-handlestate="free"] { color: var(--ok); font-weight: 700; }
[data-handlestate="taken"] { color: #ff5a5a; font-weight: 700; }
.prof-handle { color: var(--muted, #9a97a8); font-weight: 600; font-size: 15px; }
.card-handle { font-size: 13px; color: var(--accent); font-weight: 650; margin-top: -2px; }
[data-handlestate="premium"] { color: #c89bff; font-weight: 750; }
[data-handlestate="reserved"] { color: var(--accent3, #ffb020); font-weight: 750; }

/* line icons (same look on every device) */
.ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.2em; }
.ico svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.room-bar .rb-ic { color: var(--accent); }
.room-bar .rb-ic .ico svg { width: 26px; height: 26px; }
.yr-row .yr-ic { color: var(--accent); }
.yr-row .yr-ic .ico svg { width: 24px; height: 24px; }
.wk-mode .ico svg { width: 1.2em; height: 1.2em; }
.btn .ico svg { width: 1.2em; height: 1.2em; }
.spot-ic { color: var(--accent); } .spot-ic .ico svg { width: 30px; height: 30px; }

/* a picture whose file this phone no longer has */
img.img-lost { visibility: hidden; }
.cell:has(img.img-lost), .my-story:has(img.img-lost) { background: var(--bg2) repeating-linear-gradient(45deg, transparent 0 8px, rgba(127,127,127,.08) 8px 16px); }
.cell:has(img.img-lost)::after, .my-story:has(img.img-lost)::after { content: 'Not on this phone'; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--dim, #888); padding: 6px; }

/* ================= the live stage (release 58): full-screen live, LunchMeNow style ================= */
.live-box.staged { background: #07070a; }
.live-box.staged .live-video { object-fit: cover; }
.live-box.staged > .live-ctl, .live-box.staged > .live-badge { display: none; }
.live-box:not(.staged) > .stage-ui { display: none; }
.live-box.staged .live-overlay, .live-box.staged .live-tap { z-index: 6; }
.live-box.staged .asks-strip.over { top: calc(78px + var(--safe-t)); z-index: 7; }
.stage-ui { position: absolute; inset: 0; z-index: 4; color: #fff; --kb: 0px; --glass: rgba(14,13,20,.46); --edge: rgba(255,255,255,.14); font-size: 14px; }
.st-shade { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity .25s; }
.st-shade.st-sh-top { top: 0; height: 150px; background: linear-gradient(rgba(7,7,10,.62), rgba(7,7,10,0)); }
.st-shade.st-sh-bot { bottom: 0; height: 46%; background: linear-gradient(rgba(7,7,10,0), rgba(7,7,10,.35) 40%, rgba(7,7,10,.78)); }
.stage-ui .st-top, .stage-ui .st-rail, .stage-ui .st-feed, .stage-ui .st-bottom { transition: opacity .25s, transform .25s; }
.stage-ui.bare .st-top > :not(.st-chips), .stage-ui.bare .st-rail, .stage-ui.bare .st-feed, .stage-ui.bare .st-bottom, .stage-ui.bare .st-shade { opacity: 0; pointer-events: none; }
.stage-ui.bare .st-hostcard, .stage-ui.bare .st-corner { display: none; }
/* top: the host card with a spinning orange ring, LIVE, people count, minimise / end */
.st-top { position: absolute; top: calc(12px + var(--safe-t)); left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.st-hostcard { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; padding: 4px 14px 4px 4px; border-radius: 99px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: #fff; text-align: left; }
.st-ring { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.st-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ring); animation: spin 3.2s linear infinite; }
.st-ring::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: #0c0c10; }
.st-ring .av { position: relative; z-index: 1; }
.st-hostinfo { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.st-hostinfo b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hostinfo span { font-size: 12px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.st-chips { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; flex: none; }
.st-onair { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 8px; background: var(--grad); font-size: 11px; font-weight: 900; letter-spacing: .14em; box-shadow: 0 4px 18px rgba(255,122,0,.45); }
.st-onair i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: onair 1.4s ease-in-out infinite; }
@keyframes onair { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.st-count { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; font-weight: 700; }
.st-count svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.st-corner { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.st-end { height: 40px; padding: 0 18px; border-radius: 99px; background: linear-gradient(135deg, #ff5a3c, #e0182d); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 6px 20px rgba(224,24,45,.4); }
/* round glass buttons with line icons */
.st-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .15s; }
.st-btn:active { transform: scale(.9); }
.st-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-btn.off { color: #ff8a5c; border-color: rgba(255,122,0,.55); }
/* right rail */
.st-rail { position: absolute; right: 12px; bottom: calc(96px + var(--safe-b) + var(--kb)); display: flex; flex-direction: column; gap: 12px; }
/* the conversation: glass cards drifting up, fading at the top */
.st-feed { position: absolute; left: 12px; right: 72px; bottom: calc(84px + var(--safe-b) + var(--kb)); max-height: 38%; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%); }
.st-msg { align-self: flex-start; max-width: 100%; display: flex; gap: 9px; align-items: flex-start; padding: 7px 12px 8px 7px; border-radius: 18px 18px 18px 6px; background: var(--glass); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.st-msg .av { flex: none; }
.st-txt { display: flex; flex-direction: column; min-width: 0; }
.st-txt b { font-size: 12px; font-weight: 800; color: #ffb35c; display: flex; align-items: center; gap: 6px; }
.st-txt span { font-size: 14px; line-height: 1.3; color: #fff; word-break: break-word; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.st-msg.me { background: rgba(255,122,0,.26); border-color: rgba(255,160,70,.45); }
.st-msg.me .st-txt b { color: #fff; }
.st-msg.host { border-color: rgba(255,170,60,.55); }
.st-hosttag { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--grad); color: #fff; }
.st-evt { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border-radius: 99px; font-size: 12.5px; color: rgba(255,255,255,.9); background: rgba(14,13,20,.32); border: 1px solid rgba(255,255,255,.08); }
.st-evt b { font-weight: 800; }
.st-evt-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); }
.st-evt-ic svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-evt.st-e-heart .st-evt-ic svg { fill: #fff; }
.st-evt.st-e-join .st-evt-ic { background: rgba(255,255,255,.18); }
.stage-ui .in { animation: st-in .38s cubic-bezier(.2,.9,.3,1.2); }
@keyframes st-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* bottom: the message field and the big orange heart */
.st-bottom { position: absolute; left: 12px; right: 12px; bottom: calc(16px + var(--safe-b) + var(--kb)); display: flex; gap: 10px; align-items: center; }
.stage-ui.kb .st-bottom { bottom: calc(10px + var(--kb)); }
.st-field { flex: 1; min-width: 0; display: flex; align-items: center; height: 50px; padding: 0 5px 0 18px; border-radius: 99px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); transition: border-color .2s, box-shadow .2s; }
.st-field:focus-within { border-color: rgba(255,140,40,.8); box-shadow: 0 0 0 4px rgba(255,122,0,.18); }
.st-input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 16px; padding: 0; height: 100%; }
.st-input::placeholder { color: rgba(255,255,255,.62); }
.st-send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; transform: scale(0); opacity: 0; transition: transform .2s, opacity .2s; }
.stage-ui.typing .st-send { transform: scale(1); opacity: 1; }
.st-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st-heart { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(255,122,0,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.st-heart svg { width: 26px; height: 26px; fill: #fff; stroke: none; }
.st-heart.beat { animation: beat .35s ease; }
@keyframes beat { 40% { transform: scale(1.18); } }
/* hearts rising from the heart button, in our colours, with the logo's little dot trail */
.st-hearts { position: absolute; right: 12px; bottom: calc(80px + var(--safe-b) + var(--kb)); width: 54px; height: 60%; pointer-events: none; }
.st-float { position: absolute; left: 50%; bottom: 0; width: 34px; height: 34px; margin-left: -17px; animation: rise 2.5s cubic-bezier(.3,.7,.4,1) forwards; filter: drop-shadow(0 3px 8px rgba(255,90,0,.45)); }
.st-float svg { width: 100%; height: 100%; fill: #ff8a1f; stroke: #fff; stroke-width: 1.4; }
.st-float.mine svg { fill: #ffb020; }
.st-float::after { content: ''; position: absolute; left: 50%; top: 100%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: rgba(255,170,60,.8); box-shadow: 0 9px 0 -1px rgba(255,170,60,.55), 0 17px 0 -1.5px rgba(255,170,60,.3); }
@keyframes rise { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 12% { transform: translate(0, -20px) scale(var(--s)); opacity: 1; } 100% { transform: translate(var(--dx), -320px) rotate(var(--rot)) scale(calc(var(--s) * .9)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .st-ring::before, .st-onair i { animation: none; } .st-float { animation-duration: 1.2s; } }
@media (min-width: 700px) { .stage-ui .st-feed { right: auto; width: 420px; } .st-bottom { left: 50%; right: auto; width: 520px; transform: translateX(-50%); } .st-hostinfo span { max-width: 300px; } }
body.on-stage .room-chat-layer .chat > .top, body.on-stage .room-chat-layer .chat-input, body.on-stage .room-chat-layer .msgs { visibility: hidden; }
body.on-stage .room-chat-layer .live-box, body.on-stage .room-chat-layer .live-box * { visibility: visible; }
body.on-stage .toasts { top: 30%; }
.st-btn { position: relative; }
.st-btn.nudge { background: var(--grad); border-color: transparent; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,0,.6); } 50% { box-shadow: 0 0 0 12px rgba(255,122,0,0); } }
.st-tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 8px 12px; border-radius: 12px; background: #fff; color: #16151c; font-size: 13px; font-weight: 800; box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: st-in .35s ease; }
.st-tip::after { content: ''; position: absolute; left: 100%; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-color: #fff; }

/* ================= 1-to-1 calls (release 59): the stage look ================= */
.call { display: block; padding: 0; overflow: hidden; background: radial-gradient(90% 60% at 50% 30%, #3b1e07 0%, #1a0f0a 45%, #07070a 100%); --glass: rgba(14,13,20,.46); --edge: rgba(255,255,255,.14); }
.call .call-remote { transition: opacity .4s; }
.call .st-shade { opacity: 0; transition: opacity .3s; }
.call.video.connected .st-shade { opacity: 1; }
/* the small picture of yourself: rounded, orange edge, tap to swap */
.call .call-local { top: calc(84px + var(--safe-t)); right: 14px; width: 108px; height: 156px; border-radius: 22px; border: 2px solid transparent; background: linear-gradient(#000, #000) padding-box, var(--grad) border-box; box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 3; transition: all .3s cubic-bezier(.2,.9,.3,1.1); cursor: pointer; }
.call:not(.connected) .call-local { width: 100%; height: 100%; top: 0; right: 0; border-radius: 0; border: 0; opacity: .5; z-index: 0; }
.call.swap.connected .call-local { top: 0; right: 0; width: 100%; height: 100%; border-radius: 0; border: 0; z-index: 0; }
.call.swap.connected .call-remote { inset: auto 14px auto auto; top: calc(84px + var(--safe-t)); width: 108px; height: 156px; border-radius: 22px; z-index: 3; box-shadow: 0 10px 30px rgba(0,0,0,.5); pointer-events: auto; }
/* top: who, and that it's private */
.cl-top { position: absolute; top: calc(12px + var(--safe-t)); left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 4; transition: opacity .25s; }
.call:not(.connected) .cl-top, .call.voice .cl-top .cl-who { visibility: hidden; }
.call.voice.connected .cl-top { visibility: visible; }
.cl-private { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); }
.cl-private svg { width: 14px; height: 14px; fill: none; stroke: #ffb35c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cl-ring .av { position: relative; z-index: 1; }
/* the middle: big ring with soft orange waves while ringing or on a voice call */
.cl-hero { position: absolute; left: 0; right: 0; top: 22%; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; z-index: 2; transition: opacity .3s; }
.call.video.connected .cl-hero { opacity: 0; pointer-events: none; }
.cl-waves { position: relative; display: grid; place-items: center; }
.cl-waves i { position: absolute; width: 134px; height: 134px; border-radius: 50%; border: 2px solid rgba(255,140,40,.55); animation: clwave 2.4s ease-out infinite; }
.cl-waves i:nth-child(2) { animation-delay: .8s; } .cl-waves i:nth-child(3) { animation-delay: 1.6s; }
.call.connected:not(.voice) .cl-waves i { display: none; }
.call.voice.connected .cl-waves i { animation-duration: 3.2s; border-color: rgba(255,140,40,.35); }
@keyframes clwave { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.call .call-name { font-size: 30px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.call .call-status { font-size: 15px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.call.ringing .call-status { color: #ffb35c; font-weight: 700; }
/* the buttons: glass circles with line icons, End in red */
.cl-bar { position: absolute; left: 0; right: 0; bottom: calc(28px + var(--safe-b)); display: flex; justify-content: center; align-items: flex-start; gap: 18px; z-index: 4; transition: opacity .25s, transform .25s; }
.cl-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; background: none; }
.cl-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); transition: transform .15s; }
.cl-btn:active .cl-ic { transform: scale(.9); }
.cl-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-lbl { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); }
.cl-btn.off .cl-ic { background: #fff; color: #16151c; }
.cl-btn.end .cl-ic { background: linear-gradient(135deg, #ff5a3c, #e0182d); border-color: transparent; box-shadow: 0 8px 24px rgba(224,24,45,.45); }
.cl-btn.end .cl-ic svg { transform: rotate(135deg); }
.cl-btn.ok .cl-ic { background: var(--grad); border-color: transparent; box-shadow: 0 8px 26px rgba(255,122,0,.55); animation: nudge 1.6s ease-in-out infinite; }
.cl-btn.big .cl-ic { width: 74px; height: 74px; }
.cl-btn.big .cl-ic svg { width: 30px; height: 30px; }
.cl-btn.big { margin: 0 22px; }
.call.ringing .cl-bar { bottom: calc(60px + var(--safe-b)); }
.call.bare .cl-top, .call.bare .cl-bar, .call.bare .st-shade { opacity: 0; pointer-events: none; }
.call.bare .cl-bar { transform: translateY(20px); }
.call .call-iv { position: absolute; left: 0; right: 0; bottom: calc(130px + var(--safe-b)); z-index: 4; }
.call .live-tap { z-index: 5; }

/* ================= menu icons (release 60): orange line icons on a soft tinted tile ================= */
.menu-item .ic.mi { width: 40px; height: 40px; border-radius: 13px; color: var(--accent); background: linear-gradient(145deg, rgba(255,162,31,.16), rgba(242,85,0,.08)); border: 1px solid rgba(255,122,0,.22); }
.menu-item .ic.mi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.menu-item .ic.mi svg .fill { fill: currentColor; stroke: none; }
.menu-item.danger .ic.mi { color: var(--bad); background: rgba(255,77,94,.1); border-color: rgba(255,77,94,.25); }
.menu-item .mi-label { flex: 1; min-width: 0; }
.menu-item { transition: background .15s; }
.menu-item:active { background: rgba(255,122,0,.07); }
.menu-item:active .ic.mi { transform: scale(.94); }
.menu-item .ic.mi { transition: transform .15s; }

/* ================= line icons on cards, feed and profiles (release 61) ================= */
.fi { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fi svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* card stats: small grey icons */
.card .meta { gap: 12px; align-items: center; }
.card .meta > span { display: inline-flex; align-items: center; gap: 4px; }
.card .meta .fi svg { width: 14px; height: 14px; stroke-width: 2; color: var(--fg3); }
/* zodiac: an orange glyph next to the name */
.zsym { display: inline-flex; vertical-align: -0.12em; margin-left: 6px; color: var(--accent); }
.zsym .fi svg { width: .95em; height: .95em; stroke-width: 2.2; }
.zchip { gap: 6px; }
.zchip .fi svg { width: 15px; height: 15px; color: var(--accent); stroke-width: 2.2; }
/* tags: icon + word, the short version is a little row of icons */
.tag { gap: 5px; }
.tag .fi svg { width: 14px; height: 14px; color: var(--accent); stroke-width: 2; }
.tag.ics { gap: 7px; padding: 4px 10px; }
.tag.ics .fi svg { width: 15px; height: 15px; color: var(--fg2); }
.tag.cash .fi svg { color: var(--accent); }
.work-badge { display: inline-flex; align-items: center; gap: 5px; }
.card .work-badge { display: -webkit-inline-box; }
.work-badge .fi { vertical-align: -0.15em; margin-right: 4px; }
.work-badge .fi svg { width: 13px; height: 13px; stroke-width: 2.1; }
/* the feed action row */
.faction { gap: 6px; color: var(--fg2); font-weight: 650; transition: color .15s; }
.faction .fi svg { width: 21px; height: 21px; }
.faction:active .fi { transform: scale(.88); }
.faction .fi { transition: transform .15s; }
.faction.heart.on, .faction.on { color: var(--accent); }
.faction.heart.on .fi svg path { fill: var(--accent); stroke: var(--accent); }
.faction.heart.on .fi { animation: likepop .35s ease; }
@keyframes likepop { 40% { transform: scale(1.3); } }
.fhead-ic { color: var(--fg2); }
.fhead-ic .fi svg { width: 22px; height: 22px; }
/* the big heart in the photo viewer and the double-tap pop */
.heart:not(.faction) .fi svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 1.8; }
.heart:not(.faction).on .fi svg path { fill: var(--accent); stroke: var(--accent); }
.pop-heart { font-size: 0; }
.pop-heart .fi svg { width: 96px; height: 96px; fill: var(--accent); stroke: #fff; stroke-width: 1; filter: drop-shadow(0 6px 22px rgba(255,90,0,.55)); }
.btn .fi svg { width: 17px; height: 17px; }
.gs-nopic svg { width: 54px; height: 54px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* ================= one icon language (release 62): emoji in app text drawn as line icons ================= */
.emi { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.18em; margin-right: .38em; color: var(--accent); flex: none; line-height: 1; }
.emi.emi-end { margin: 0 0 0 .35em; }
.emi svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.emi svg .fill { fill: currentColor; stroke: none; }
/* on solid orange or inverted surfaces the icon follows the text colour */
.btn.primary .emi, .chip.on .emi, .live-btn .emi, .st-btn .emi, .cl-btn .emi, .toast .emi, .ftag .emi, .clip-badge .emi, .live-badge .emi, .st-onair .emi, .tag.cash .emi { color: currentColor; }
.btn.ghost .emi, .btn:not(.primary) .emi { color: var(--accent); }
/* icon-only buttons (call buttons in a chat header, games and lunch next to the message box) */
.icon-btn .emi { margin: 0; color: var(--fg2); }
.icon-btn .emi svg { width: 24px; height: 24px; }
.icon-btn:active .emi { color: var(--accent); }
.chat-input .icon-btn .emi { color: var(--accent); }
.chat-input .icon-btn { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, rgba(255,162,31,.14), rgba(242,85,0,.06)); border: 1px solid rgba(255,122,0,.2); }
/* big icons on empty screens */
.empty .big .emi, .big > .emi { margin: 0; width: 72px; height: 72px; border-radius: 24px; background: linear-gradient(145deg, rgba(255,162,31,.16), rgba(242,85,0,.06)); border: 1px solid rgba(255,122,0,.22); }
.empty .big .emi svg, .big > .emi svg { width: 36px; height: 36px; stroke-width: 1.7; }
/* chips: the icon a touch smaller than the word */
.chip .emi svg { width: 1.05em; height: 1.05em; }
.lrow > span > .emi { margin: 0; }
.lrow > span:first-child { width: 22px; display: inline-flex; justify-content: center; }
.search-ic .emi { margin: 0; color: var(--fg3); }
.search-ic .emi svg { width: 18px; height: 18px; }
.room-av .emi { margin: 0; }
.hostcrown .emi { margin: 0; color: #ffb020; }
.hostcrown .emi svg .fill, .hostcrown .emi svg { stroke: #ffb020; }
/* the place search in the lunch invite: a drawn magnifier instead of an emoji placeholder */
input.place-search { padding-left: 42px; background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7a90' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E") no-repeat 14px center / 18px; }
.chat-input .icon-btn { flex: none; width: 44px; min-width: 44px; height: 44px; }
.chat-input .icon-btn .emi svg { width: 23px; height: 23px; }
.role-done.no { color: var(--fg2); white-space: normal; font-weight: 700; line-height: 1.35; }
/* long role names wrap inside the work card instead of running off the edge */
.work-card .role-done, .role-done[data-cardapplied] { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.wk-role .wk-co { display: block; margin-top: 2px; font-size: .82em; }

/* ================= Face ID lock (release 66) ================= */
.lock-screen { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(40px + var(--safe-t)) 28px calc(28px + var(--safe-b)); background: #07070a; color: #fff; text-align: center; animation: fadein .2s ease; overflow: hidden; }
.lock-screen.out { opacity: 0; transform: scale(1.04); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.lk-glow { position: absolute; left: 50%; top: 42%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.22), rgba(255,122,0,0) 62%); pointer-events: none; }
.lk-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lk-logo { width: 92px; height: 92px; border-radius: 26px; background: var(--grad); display: grid; place-items: center; box-shadow: 0 18px 50px rgba(255,122,0,.35); }
.lk-logo svg { width: 64px; height: 64px; }
.lk-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.lk-title b { color: var(--accent); font-weight: 800; }
.lk-sub { font-size: 15px; color: rgba(255,255,255,.65); }
.lk-btn { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 26px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font-size: 17px; font-weight: 800; }
.lk-btn:active { transform: scale(.97); }
.lk-face { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent); }
.lk-face svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk-msg { min-height: 20px; font-size: 14px; color: #ffb35c; max-width: 300px; }
.lk-foot { position: absolute; bottom: calc(24px + var(--safe-b)); left: 24px; right: 24px; font-size: 13px; color: rgba(255,255,255,.45); }
body.locked .toasts { visibility: hidden; }
/* when it locks right away, the phone's app switcher only ever sees a blurred screen */
body.lock-veil > *:not(.lock-screen) { filter: blur(24px); }
.danger-text { color: var(--bad) !important; }
.relay.net-sum { width: 100%; text-align: left; font-size: 15px; padding: 10px 14px; color: var(--fg); }
.relay.net-sum .dim { font-size: 13px; color: var(--accent); }
/* sheets: a top bar with the grab handle, the title and a ✕, which stays put while the sheet scrolls */
.sheet { max-height: calc(100dvh - 56px - var(--safe-t)); overscroll-behavior: contain; }
.sheet-head { position: sticky; top: -8px; z-index: 2; margin: -8px -18px 0; padding: 8px 56px 2px 18px; background: var(--bg2); border-radius: 22px 22px 0 0; touch-action: none; }
.sheet-head h3 { margin: 4px 0 12px; }
.sheet-head .grab { margin: 4px auto 12px; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg3); color: var(--fg2); }
.sheet-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sheet-x:active { transform: scale(.92); }
.sheet-head:not(:has(h3)) { min-height: 50px; padding-bottom: 6px; }

/* ---------- Gift Shop (release 69) ---------- */
.gift-shop { display: flex; flex-direction: column; gap: 14px; }
.gift-partner { display: flex; flex-direction: column; gap: 10px; }
.gp-head, .gd-shop { display: flex; gap: 10px; align-items: center; }
.gd-shop { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.gp-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; background: var(--bg3); }
.gift-pic.none, .gp-logo.none, .gd-photo.none { display: grid; place-items: center; color: var(--accent); background: radial-gradient(120% 120% at 20% 0%, rgba(255,122,0,.22), transparent 60%), var(--bg3); }
.gift-pic.none svg, .gp-logo.none svg, .gd-photo.none svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gift-tile { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2); transition: transform .12s; }
.gift-tile:active { transform: scale(.98); }
.gift-pic { width: 100%; aspect-ratio: 4 / 3; border-radius: 11px; object-fit: cover; }
.gt-t { font-weight: 700; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gt-p { font-weight: 800; color: var(--accent); font-size: 14px; }
.gt-p .dim { font-weight: 500; font-size: 12px; }
.gd-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; object-fit: cover; }
.gd-price { font-size: 24px; font-weight: 850; margin-right: 8px; }
.gift-fine { font-size: 12px; color: var(--fg3); line-height: 1.45; }
.gift-list { margin: 0; padding-left: 18px; color: var(--fg2); display: flex; flex-direction: column; gap: 6px; }

.gift-card { align-self: flex-start; margin: 6px 20px; max-width: 86%; min-width: 230px; padding: 14px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid rgba(255,122,0,.35); background: radial-gradient(140% 120% at 0% 0%, rgba(255,122,0,.18), transparent 55%), var(--bg2); }
.gift-card.me { align-self: flex-end; }
.gc-top { display: flex; gap: 10px; align-items: center; }
.gc-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; }
.gc-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gc-k { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.gc-t { font-weight: 800; font-size: 16px; line-height: 1.25; }
.gc-note { font-style: italic; color: var(--fg2); white-space: pre-wrap; }
.gc-st { font-size: 13px; font-weight: 700; color: var(--fg2); }
.gc-st.ok { color: var(--ok); } .gc-st.no { color: var(--bad); } .gc-st.pending { color: var(--warn); }
.gc-code { font: 800 28px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-align: center; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--accent); user-select: all; }
.gc-code.small { font-size: 16px; padding: 6px; }

.gift-biz .set, .gift-dash .set { gap: 10px; }
.gift-dash .group-title, .gift-biz .group-title { display: flex; align-items: center; justify-content: space-between; padding-left: 0; padding-right: 0; }
.gift-order { padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); display: flex; flex-direction: column; gap: 4px; }
.gift-order[data-orderst="claimed"] { border-color: rgba(51,209,122,.45); }
.gift-order .btn { align-self: flex-start; margin-top: 4px; }
.gift-ship { padding: 8px 10px; border-radius: 10px; background: var(--bg3); font-size: 14px; }
.gf-photo { width: 96px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg3); display: grid; place-items: center; flex: none; }
.gf-photo img { width: 100%; height: 100%; object-fit: cover; }
.prof-actions .btn .ico svg { width: 18px; height: 18px; }
.gift-biz .notice, .gift-dash .notice { margin: 0; }

/* ---------- gifts in the feed (release 70) ---------- */
.gift-ad { border-color: rgba(255,122,0,.35); }
.gift-ad .fhead .gp-logo { width: 36px; height: 36px; border-radius: 10px; }
.ftag.sponsored { color: var(--accent); border-color: rgba(255,122,0,.4); background: rgba(255,122,0,.08); }
.gift-ad-media { display: block; width: 100%; padding: 0 12px; }
.gift-ad-media .gd-photo { border-radius: 14px; }
.gift-ad-about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gift-strip { margin: 4px 0 14px; padding: 12px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gs-head { padding: 0 16px 10px; gap: 8px; align-items: center; }
.gc-ic.sm { width: 28px; height: 28px; border-radius: 9px; }
.gc-ic.sm svg { width: 16px; height: 16px; }
.gs-row { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gs-row::-webkit-scrollbar { display: none; }
.gs-row .gift-tile { flex: 0 0 150px; scroll-snap-align: start; }
.gift-who { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; width: 100%; }
.gift-who:active, .gift-who.on { background: var(--bg2); border-color: var(--line); }
.gift-who.on { border-color: var(--accent); }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.radio.on { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--accent); }

/* ---------- gifts on the live screen (release 71) ---------- */
.st-gifts { position: absolute; top: calc(68px + var(--safe-t)); left: 12px; display: flex; flex-direction: column; gap: 8px; max-width: min(240px, 62%); z-index: 2; }
.st-gift { display: flex; gap: 8px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 14px; text-align: left; color: #fff;
  background: rgba(16,16,22,.55); border: 1px solid rgba(255,162,31,.45); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  animation: stGiftIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
.st-gift:active { transform: scale(.97); }
.st-gift-pic { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.st-gift-pic.none { display: grid; place-items: center; background: var(--grad); color: #fff; }
.st-gift-pic.none svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-gift-txt { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.25; }
.st-gift-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-gift-txt span { color: #ffc27a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes stGiftIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.stage-ui.bare .st-gifts { opacity: 0; pointer-events: none; }
.stage-ui.typing .st-gifts, .stage-ui.kb .st-gifts { opacity: .25; }
.st-e-gift .st-evt-ic { background: var(--grad); color: #fff; }
.check-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.check-box.on { background: var(--grad); border-color: transparent; }
.check-box.on::after { content: ''; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }

/* ---------- group gifts & Lunch forward (release 72) ---------- */
.pool-bar { height: 10px; border-radius: 99px; background: var(--bg3); overflow: hidden; }
.pool-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .6s cubic-bezier(.2,.8,.2,1); min-width: 6px; }
.pool-who { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.pool-sheet .gd-photo { max-height: 220px; }
.st-gift.pool { flex-wrap: wrap; }
.st-gift .pool-bar { height: 5px; margin-top: 4px; background: rgba(255,255,255,.18); width: 100%; }
.st-gift.pool .st-gift-txt { flex: 1; }
.fwd-place { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); display: flex; flex-direction: column; gap: 8px; }
.fwd-count { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.fwd-count b { font-size: 22px; color: var(--accent); line-height: 1; }
.fwd-count span { font-size: 11px; color: var(--fg3); }
.fwd-claim { padding: 12px; border-radius: 16px; border: 1px solid rgba(51,209,122,.45); background: rgba(51,209,122,.06); display: flex; flex-direction: column; gap: 8px; }

/* ---------- birthdays (release 73) ---------- */
.bday-badge { position: absolute; top: 6px; left: 6px; font-size: 10px; line-height: 1.2; font-weight: 800; padding: 3px 8px; border-radius: 99px; color: #fff; background: var(--grad); box-shadow: 0 4px 14px rgba(255,122,0,.35); z-index: 1; }
.bday-banner, .bday-me { margin: 8px 16px; padding: 12px 14px; border-radius: 18px; display: flex; gap: 12px; align-items: center;
  border: 1px solid rgba(255,162,31,.45); background: radial-gradient(130% 140% at 0% 0%, rgba(255,122,0,.22), transparent 60%), var(--bg2); }
.bday-cake { font-size: 30px; line-height: 1; animation: bdayBob 2.4s ease-in-out infinite; }
@keyframes bdayBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
.notice[data-addbday] { width: calc(100% - 32px); text-align: left; }

/* ---------- LunchMeNow brain (admin, release 75) ---------- */
:root { --chart-bar: #e06a00; --chart-grid: rgba(255,255,255,.07); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --chart-bar: #d45f00; --chart-grid: rgba(20,10,40,.08); } }
:root[data-theme="light"] { --chart-bar: #d45f00; --chart-grid: rgba(20,10,40,.08); }
.brain { padding: 12px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.b-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.b-tile { padding: 14px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.b-big { font-size: 30px; font-weight: 850; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.b-lbl { font-size: 13px; font-weight: 700; color: var(--fg2); }
.b-sub { font-size: 12px; color: var(--fg3); }
.bc { padding: 12px 14px 10px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.bc .row { align-items: baseline; }
.bc-read { font-size: 13px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.bc-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.bc-grid { stroke: var(--chart-grid); stroke-width: 1; }
.bc-tick { fill: var(--fg3); font-size: 9px; }
.bc-bar { fill: var(--chart-bar); }
.bc-hit { fill: transparent; cursor: pointer; }
.bc-hit.on { fill: var(--chart-grid); }
.b-rows { border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); padding: 4px 14px; }
.b-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; white-space: pre; }
.b-row:last-child { border-bottom: 0; }
.b-row span { color: var(--fg2); white-space: pre-wrap; } .b-row b { text-align: right; white-space: normal; font-variant-numeric: tabular-nums; }
.b-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.b-table th, .b-table td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); } .b-table th:first-child, .b-table td:first-child { text-align: left; }
.brain .group-title { padding-left: 0; }

/* ---------- moderation in the brain (release 76) ---------- */
.mod-rep { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); }
.mod-ev { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; background: var(--bg3); }
.mod-ev.none { display: grid; place-items: center; color: var(--fg3); font-size: 24px; }
.mod-ban { align-items: center; white-space: normal; }