:root {
  /* surfaces */
  --bg: #1D1518;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --stroke: rgba(216, 186, 146, 0.28);
  --stroke-soft: rgba(216, 186, 146, 0.16);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  /* text */
  --text: #f5f0ea;
  --dim: #b3a498;
  /* accent */
  --accent: #D8BA92;
  --accent-soft: rgba(216, 186, 146, .14);
  --accent-bright: #C9A87E;
  --accent-ink: #ffffff;
  --grad: linear-gradient(135deg, #3E2E34 0%, #5C444C 48%, #8A6A5C 100%);
  --grad-hot: linear-gradient(135deg, #C9A87E, #6B4E55);
  --grad-title: linear-gradient(160deg, #EBD9BC 15%, #C9A87E 90%);
  /* aurora backdrop blobs */
  --glow-1: #4B2E38;
  --glow-2: #6B4A2E;
  --glow-3: #7A4456;
  /* status */
  --danger: #f43f5e;
  --danger-ink: #fda4af;
  --ok: #4ade80;
  /* shape (not color — themes normally leave these) */
  --r-lg: 24px;
  --r-md: 18px;
  --r-pill: 999px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- aurora backdrop ---------- */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.b1 { width: 62vmax; height: 62vmax; left: -25vmax; top: -28vmax; background: radial-gradient(circle at 40% 40%, var(--glow-1), transparent 62%); animation: drift1 22s ease-in-out infinite alternate; }
.b2 { width: 52vmax; height: 52vmax; right: -22vmax; top: 18vh; background: radial-gradient(circle at 60% 40%, var(--glow-2), transparent 60%); opacity: .38; animation: drift2 26s ease-in-out infinite alternate; }
.b3 { width: 46vmax; height: 46vmax; left: 6vw; bottom: -26vmax; background: radial-gradient(circle at 50% 50%, var(--glow-3), transparent 60%); opacity: .3; animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(9vmax, 7vmax) scale(1.14) rotate(12deg); } }
@keyframes drift2 { to { transform: translate(-7vmax, -5vmax) scale(1.1); } }
@keyframes drift3 { to { transform: translate(6vmax, -8vmax) scale(1.16); } }
.aurora::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(2px); }

#app { max-width: 480px; margin: 0 auto; height: 100dvh; display: flex; flex-direction: column; position: relative; z-index: 1; }

/* ---------- header ---------- */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 14px;
  background: linear-gradient(rgba(7,7,15,.72), rgba(7,7,15,.28) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: relative; z-index: 5;
}
#title { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
#title span { background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
#conn-dot { width: 11px; height: 11px; border-radius: 50%; background: #f87171; box-shadow: 0 0 12px #f87171aa; transition: all .35s; }
#conn-dot.on { background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 80%, transparent); }

/* ---------- screens ---------- */
#screens { flex: 1; overflow-y: auto; padding: 4px 14px 118px; scrollbar-width: none; position: relative; z-index: 1; }
#screens::-webkit-scrollbar { display: none; }
.screen { display: none; }
.screen.active { display: block; animation: screenIn .3s cubic-bezier(.2,.9,.3,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }

h3 { margin: 18px 8px 10px; font-size: 12px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 1.6px; }

/* ---------- glass primitives ---------- */
.glass { background: var(--glass); border: 1px solid var(--stroke-soft); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ---------- discover ---------- */
.loc-row { display: flex; gap: 8px; margin: 8px 0 12px; }
.pill {
  flex: 1; padding: 11px 6px; border-radius: var(--r-pill); border: 1px solid var(--stroke-soft);
  background: var(--glass); color: var(--dim); font-size: 13px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all .2s; display: flex; align-items: center;
}
.pill .pi { flex: 0 0 32%; display: flex; align-items: center; justify-content: center; }
.pill .pl { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.pill:active { transform: scale(.96); }
.pill.active { background: var(--grad); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-bright) 45%, transparent); }

.code-row { display: flex; gap: 8px; margin-bottom: 12px; }
.code-row input {
  flex: 1; padding: 13px 18px; border-radius: var(--r-pill); border: 1px solid var(--stroke-soft);
  background: var(--glass); color: var(--text); font-size: 14px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  outline: none; transition: border .2s;
}
.code-row input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.code-row input::placeholder { color: var(--dim); letter-spacing: 0; text-transform: none; font-weight: 400; }
.code-row button { background: none; border: none; color: var(--accent); font-weight: 700; padding: 0 12px; transition: transform .15s; }
.code-row button:active { transform: scale(.95); }

#my-code-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--glow-1) 40%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-lg); padding: 14px 18px; font-size: 13px; color: var(--dim);
  margin-bottom: 6px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  line-height: 1.55; box-shadow: var(--shadow);
}
#my-code-card b { color: #fff; font-size: 15px; letter-spacing: 2px; font-weight: 800; }

.list { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px;
  background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: var(--r-lg); cursor: pointer;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform .16s, background .2s, border .2s;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
}
.row:hover { background: var(--glass-strong); border-color: var(--stroke); }
.row:active { transform: scale(.975); }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: var(--accent-ink);
  background: var(--grad);
}
.avatar-ring { padding: 2.5px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.avatar-ring .avatar { width: 45px; height: 45px; }
.presence { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2.5px solid #12121e; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 67%, transparent); }
.presence.off { background: #4b5563; box-shadow: none; }
.row-main { flex: 1; min-width: 0; }
.row-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 12px; color: var(--dim); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.badge { font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: var(--r-pill); background: var(--grad); color: var(--accent-ink); letter-spacing: .4px; box-shadow: 0 3px 10px rgba(139,92,246,.4); }
.badge.grp { background: var(--grad-hot); box-shadow: 0 3px 10px rgba(244,114,182,.35); }
.badge.off { background: rgba(255,255,255,.09); color: var(--dim); box-shadow: none; }
.dist-chip { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.grp-head { display: flex; align-items: center; justify-content: space-between; }
button.mini { padding: 8px 14px; font-size: 12px; font-weight: 700; background: var(--grad); color: var(--accent-ink); border-radius: var(--r-pill); box-shadow: 0 5px 16px rgba(99,102,241,.4); transition: transform .15s; }
button.mini:active { transform: scale(.94); }
.empty { text-align: center; color: var(--dim); font-size: 13px; padding: 34px 24px; line-height: 1.6; }

/* ---------- chat list ---------- */
.chat-row .time { font-size: 11px; color: var(--dim); }
.unread { background: var(--grad-hot); color: var(--accent-ink); font-size: 11px; font-weight: 800; border-radius: var(--r-pill); padding: 3px 9px; box-shadow: 0 3px 12px rgba(244,114,182,.4); }

/* ---------- chat view ---------- */
#chat-view {
  position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column;
  background: rgba(7, 7, 15, .6); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
}
#chat-view.open { display: flex; animation: screenIn .28s cubic-bezier(.2,.9,.3,1); }
.chat-top {
  display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 12px;
  background: linear-gradient(rgba(10,10,20,.85), rgba(10,10,20,.4) 80%, transparent);
  border-bottom: 1px solid var(--stroke-soft);
}
#chat-back { font-size: 24px; padding: 4px 12px; background: var(--glass); border-radius: var(--r-pill); border: 1px solid var(--stroke-soft); }
.chat-peer { flex: 1; min-width: 0; }
#chat-name { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
#chat-sub { font-size: 12px; color: var(--dim); }
#chat-photo-btn, #chat-report-btn, #chat-leave-btn, #chat-gift-btn { background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; }
#chat-msgs { flex: 1; overflow-y: auto; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
#chat-msgs::-webkit-scrollbar { display: none; }
.msg { max-width: 80%; padding: 10px 14px 8px; border-radius: 22px; font-size: 15px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; position: relative; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.msg.them { align-self: flex-start; background: var(--glass-strong); border: 1px solid var(--stroke-soft); border-bottom-left-radius: 8px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.msg.mine { align-self: flex-end; background: var(--grad); border-bottom-right-radius: 8px; color: var(--accent-ink); box-shadow: 0 6px 18px rgba(120, 90, 70, .35); }
.msg.pop { animation: pop .28s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pop { from { transform: scale(.6) translateY(8px); opacity: 0; } }
.msg .meta { display: block; font-size: 10px; opacity: .62; margin-top: 4px; }
.msg .who { font-size: 11px; color: var(--accent); font-weight: 700; display: block; margin-bottom: 2px; }
.msg.mine .who { color: rgba(255,255,255,.85); }
.msg.photo-msg { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); }
.msg.mine.photo-msg { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.reply-btn { position: absolute; top: 3px; right: 7px; font-size: 12px; opacity: .35; padding: 3px 6px; border-radius: 8px; }
.reply-btn:active { opacity: 1; background: rgba(255,255,255,.12); }
.quote { border-left: 3px solid var(--accent); padding: 5px 9px; margin-bottom: 7px; background: rgba(255,255,255,.07); border-radius: 6px; display: block; }
.msg.mine .quote { background: rgba(255,255,255,.14); border-left-color: rgba(255,255,255,.75); }
.quote .q-who { display: block; font-size: 11px; color: var(--accent); font-weight: 700; }
.msg.mine .quote .q-who { color: rgba(255,255,255,.9); }
.quote .q-text { display: block; font-size: 12px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
#typing-indicator { padding: 0 18px 4px; font-size: 12px; color: var(--dim); height: 18px; }
#reply-bar { display: none; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(139,92,246,.1); border-top: 1px solid var(--stroke-soft); }
#reply-bar .rb-main { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: 9px; }
#rb-who { display: block; font-size: 11px; color: var(--accent); font-weight: 700; }
#rb-text { display: block; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reply-bar-cancel { background: none; font-size: 15px; padding: 4px 8px; }
.chat-input-row { display: flex; gap: 9px; padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 14px); }
.chat-input-row input {
  flex: 1; padding: 13px 20px; border-radius: var(--r-pill); border: 1px solid var(--stroke-soft);
  background: var(--glass-strong); color: var(--text); font-size: 15px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); outline: none; transition: border .2s;
}
.chat-input-row input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.chat-input-row input::placeholder { color: var(--dim); }
#chat-send { background: var(--grad); color: var(--accent-ink); border-radius: 50%; width: 47px; height: 47px; font-size: 17px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-bright) 50%, transparent); transition: transform .15s; flex-shrink: 0; }
#chat-send:active { transform: scale(.9); }
input[type="file"] { display: none; }

/* ---------- viewer ---------- */
#viewer { position: fixed; inset: 0; background: #000; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; }
#viewer.open { display: flex; animation: fadeIn .22s ease; }
@keyframes fadeIn { from { opacity: 0; } }
#viewer.blurred #viewer-img { filter: blur(42px); }
.viewer-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; z-index: 2; }
#viewer-count { font-size: 38px; font-weight: 800; color: #fff; text-shadow: 0 2px 14px #000; animation: pulse 1s ease infinite; }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .85; } }
#viewer-close { font-size: 18px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); color: #fff; width: 42px; height: 42px; border-radius: 50%; }
#viewer-img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.viewer-note { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .3px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(4,4,10,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 40; display: none; align-items: center; justify-content: center; }
.modal.open { display: flex; animation: fadeIn .2s ease; }
.modal-card { background: rgba(20, 20, 34, .82); border: 1px solid var(--stroke); border-radius: 28px; padding: 24px; width: 86%; max-width: 340px; max-height: 78dvh; overflow-y: auto; box-shadow: var(--shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); animation: pop .3s cubic-bezier(.3,1.4,.5,1); }
.modal-card h3 { margin: 0 0 14px; color: var(--text); text-transform: none; font-size: 18px; letter-spacing: -.2px; }
.modal-card input { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--stroke-soft); background: rgba(0,0,0,.25); color: var(--text); font-size: 15px; margin-bottom: 16px; outline: none; }
.modal-card input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.modal-row { display: flex; gap: 10px; justify-content: flex-end; }
.modal-row button { border-radius: var(--r-pill); padding: 10px 18px; font-weight: 700; }
.modal-row .primary { background: var(--grad); color: var(--accent-ink); box-shadow: 0 5px 16px rgba(99,102,241,.4); }
.modal-row .danger { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); color: var(--danger-ink); }
.confirm-body { font-size: 13.5px; color: var(--dim); line-height: 1.6; margin-bottom: 18px; }
#report-reason-picker .type-opt { flex: 1 1 40%; }
#report-detail { margin-bottom: 6px; }
.calc-display { background: rgba(0,0,0,.3); border: 1px solid var(--stroke-soft); border-radius: 16px; padding: 12px 16px; margin-bottom: 14px; text-align: right; }
#calc-expr { font-size: 15px; color: var(--dim); min-height: 20px; word-break: break-all; }
#calc-result { font-size: 28px; font-weight: 800; color: var(--accent); min-height: 34px; word-break: break-all; }
.calc-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-key { padding: 13px 0; border-radius: 14px; background: var(--glass); border: 1px solid var(--stroke-soft); font-size: 18px; font-weight: 700; color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .12s; }
.calc-key:active { transform: scale(.93); }
.calc-op { color: var(--accent); background: var(--accent-soft); }
.calc-eq { grid-column: 1 / -1; background: var(--grad); color: var(--accent-ink); border: none; box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-bright) 40%, transparent); }
.calc-send { grid-column: 1 / -1; color: var(--accent); font-size: 14px; }

/* ---------- me screen ---------- */
.me-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--glow-1) 45%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r-lg); margin: 8px 0 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; box-shadow: var(--shadow); }
.me-card::before { content: ''; position: absolute; top: -60px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(244,114,182,.3), transparent 65%); }
.me-card .avatar { width: 62px; height: 62px; font-size: 25px; border: 2.5px solid rgba(255,255,255,.35); }
.me-alias { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.me-name { font-size: 13px; color: var(--dim); margin-top: 2px; }
.card { background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: var(--r-lg); padding: 16px; margin-bottom: 13px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.card label { display: block; font-size: 11.5px; font-weight: 700; color: var(--dim); margin: 8px 0 7px; text-transform: uppercase; letter-spacing: 1px; }
.card input { width: 100%; padding: 13px 16px; border-radius: 15px; border: 1px solid var(--stroke-soft); background: rgba(0,0,0,.25); color: var(--text); font-size: 15px; margin-bottom: 8px; outline: none; transition: border .2s; }
.card input:focus { border-color: rgba(139,92,246,.55); }
.code-display { font-size: 27px; font-weight: 800; letter-spacing: 6px; text-align: center; padding: 12px; color: #0b0b12; background: rgba(255, 255, 255, .92); border-radius: 16px; }
.link-display { font-size: 11px; color: var(--dim); text-align: center; word-break: break-all; margin-bottom: 12px; }
button.wide { width: 100%; padding: 13px; background: var(--glass-strong); border: 1px solid var(--stroke-soft); font-weight: 700; border-radius: var(--r-pill); transition: transform .15s; }
button.wide:active { transform: scale(.97); }
button.wide.danger { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger-ink); margin-bottom: 30px; }
.hint { font-size: 12px; color: var(--dim); line-height: 1.6; }
.hint-inline { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(90px);
  bottom: 108px; background: rgba(24, 24, 40, .85); border: 1px solid var(--stroke);
  color: var(--text); padding: 13px 20px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600;
  z-index: 60; opacity: 0; transition: all .3s cubic-bezier(.3,1.3,.5,1);
  pointer-events: none; max-width: 86%; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- floating dock tab bar ---------- */
#tabbar {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); left: 14px; right: 14px;
  display: flex; gap: 10px; padding: 0; z-index: 10;
}
.tab { flex: 1; background: rgba(255, 255, 255, .045); border: 2.5px solid rgba(255, 255, 255, .12); padding: 10px 0; font-size: 19px; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: var(--r-pill); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: all .22s; cursor: pointer; }
.tab span { font-size: 10px; font-weight: 700; letter-spacing: .4px; }
.tab.active { color: #fff; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 2.5px solid var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent); }

.me-id-row { display: flex; align-items: center; gap: 8px; }
.premium-chip { font-size: 9px; font-weight: 800; letter-spacing: .8px; padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--stroke-soft); color: var(--dim); }
.premium-chip.on { background: var(--grad-hot); color: var(--accent-ink); border-color: transparent; }

/* ---------- social home (design reference layout) ---------- */
.home-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 14px; }
.home-title { font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--stroke-soft); font-size: 21px; line-height: 1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .15s; }
.icon-btn:active { transform: scale(.92); }

.filter-pills { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.filter-pills::-webkit-scrollbar { display: none; }
.fpill { flex-shrink: 0; padding: 8px 12px; background: none; border: none; color: var(--dim); font-size: 13.5px; font-weight: 600; transition: all .2s; cursor: pointer; }
.fpill.active { color: #fff; font-weight: 800; font-size: 14.5px; text-shadow: 0 0 18px rgba(255,255,255,.35); transform: translateY(-1px); }

/* stories strip */
.stories { display: flex; gap: 13px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; margin-bottom: 4px; }
.stories::-webkit-scrollbar { display: none; }
.story { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 68px; cursor: pointer; }
.story .avatar-ring { padding: 2.5px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.story .avatar { width: 56px; height: 56px; font-size: 21px; }
.story.has-unread .avatar-ring { background: rgba(255, 255, 255, .32); }
.story-name { font-size: 10.5px; font-weight: 600; color: var(--dim); max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-badge { position: absolute; top: -3px; right: -5px; background: var(--grad-hot); color: var(--accent-ink); font-size: 10px; font-weight: 800; min-width: 18px; text-align: center; padding: 2px 5px; border-radius: var(--r-pill); box-shadow: 0 3px 8px rgba(0,0,0,.45); border: 2px solid #12121e; }

/* section titles like the reference */
.sec-title { font-size: 23px; font-weight: 800; letter-spacing: -.5px; margin: 20px 4px 2px; }
.sec-sub { font-size: 12px; color: var(--dim); margin: 0 4px 12px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 4px 2px; }
.sec-head .sec-title { margin: 0; }
.sec-btn { background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: var(--r-pill); color: var(--dim); padding: 8px 11px; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all .2s; display: flex; align-items: center; }
.sec-btn:active { transform: scale(.92); }
#shuffle-people img { width: 20px; height: 20px; display: block; }

/* horizontal people cards */
.hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.person-card { flex-shrink: 0; width: 160px; scroll-snap-align: start; border-radius: 26px; overflow: hidden; background: var(--glass); border: 1px solid var(--stroke-soft); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); position: relative; box-shadow: var(--shadow); cursor: pointer; transition: transform .16s; }
.person-card:active { transform: scale(.97); }
.pc-banner { height: 145px; position: relative; display: flex; align-items: center; justify-content: center; }
.pc-banner .big-letter { font-size: 52px; font-weight: 800; color: rgba(255,255,255,.92); text-shadow: 0 4px 18px rgba(0,0,0,.35); }
.pc-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.05) 40%, rgba(10,10,18,.55)); }
.pc-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 7px; z-index: 2; }
.pc-top .avatar { width: 30px; height: 30px; font-size: 13px; border: 1.5px solid rgba(255,255,255,.5); }
.pc-id { min-width: 0; }
.pc-name { font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; line-height: 1.2; }
.pc-role { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .6px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.pc-chat { margin-left: auto; background: rgba(10,10,18,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.28); }
.pc-body { padding: 11px 13px 13px; }
.pc-tag { font-size: 13px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-stats { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--dim); }
.pc-stats span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* community circles */
.hscroll.circles { gap: 16px; }
.circle-item { flex-shrink: 0; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 7px; scroll-snap-align: start; cursor: pointer; }
.circle-item .avatar-ring { padding: 2.5px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.circle-item .avatar { width: 54px; height: 54px; font-size: 19px; }
.circle-item.joined .avatar-ring { background: rgba(255, 255, 255, .32); }
.circle-item em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--dim); text-align: center; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#people-empty, #comm-empty { padding: 14px 20px; }

/* ---------- topbar right cluster ---------- */
.topbar-right { display: flex; align-items: center; gap: 11px; }
#settings-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--stroke-soft); font-size: 18px; line-height: 1; color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .15s; }
#settings-btn:active { transform: scale(.92); }

/* ---------- people stacked list (People / Linked filters) ---------- */
#people-list { display: none; margin-bottom: 4px; }
.report-btn { flex-shrink: 0; width: 37px; height: 37px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--stroke-soft); display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .15s; }
.report-btn:active { transform: scale(.9); }
.block-btn { flex-shrink: 0; width: 37px; height: 37px; border-radius: 50%; background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); font-size: 15px; transition: transform .15s; }
.block-btn:active { transform: scale(.9); }

/* ---------- settings screen ---------- */
.home-head-left { display: flex; align-items: center; gap: 10px; }
.back-btn { font-size: 24px; padding: 4px 12px; background: var(--glass); border-radius: var(--r-pill); border: 1px solid var(--stroke-soft); color: var(--text); transition: transform .15s; }
.back-btn:active { transform: scale(.94); }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.set-row + .set-row { border-top: 1px solid var(--stroke-soft); }
.set-main { flex: 1; min-width: 0; }
.set-name { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.set-sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; line-height: 1.5; }
.toggle { position: relative; flex-shrink: 0; width: 48px; height: 28px; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle .slider { position: absolute; inset: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); border: 1px solid var(--stroke-soft); transition: all .25s; pointer-events: none; }
.toggle .slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: var(--dim); transition: all .25s; }
.toggle input:checked + .slider { background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.toggle input:checked + .slider::before { left: 23px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent); }
#blocked-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
#blocked-list .empty { padding: 16px 10px; }
.card button.wide.danger { margin-bottom: 10px; }
.about-row { text-align: center; color: var(--dim); font-size: 13px; font-weight: 600; letter-spacing: .2px; }

/* ---------- theme picker (Appearance) ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; margin: 6px 0 12px; }
.theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; padding: 2px 0; cursor: pointer; transition: transform .15s; }
.theme-swatch:active { transform: scale(.94); }
.theme-dot { width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--stroke-soft); position: relative; box-shadow: var(--shadow); transition: border-color .2s; }
.theme-swatch.active .theme-dot { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.theme-check { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; display: none; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.theme-swatch.active .theme-check { display: flex; }
.theme-name { font-size: 10.5px; font-weight: 700; color: var(--dim); text-align: center; line-height: 1.25; }
.theme-swatch.active .theme-name { color: var(--text); }

/* ---------- lounges v2 ---------- */
.occ { font-style: normal; font-size: 9px; font-weight: 700; color: var(--dim); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--stroke-soft); padding: 1px 7px; border-radius: var(--r-pill); }
.type-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.type-opt { flex: 1 1 30%; padding: 9px 4px; border-radius: 14px; border: 1px solid var(--stroke-soft); background: rgba(0,0,0,.2); color: var(--dim); font-size: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: all .18s; }
.type-opt.active { background: var(--grad); color: var(--accent-ink); border-color: transparent; box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-bright) 40%, transparent); }
.type-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--stroke-soft); border-radius: var(--r-pill); padding: 2px 9px; text-transform: uppercase; }
#chat-tools { display: none; padding: 6px 12px 0; }
#tool-bar { display: flex; gap: 8px; padding-bottom: 4px; }
.tool-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--glass); border: 1px solid var(--stroke-soft); font-size: 17px; line-height: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .15s; }
.tool-btn:active { transform: scale(.9); }
#voice-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 4px 0 6px; }
.voice-join { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--grad); color: var(--accent-ink); font-size: 13px; font-weight: 700; border: none; box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-bright) 40%, transparent); transition: transform .15s; }
.voice-join:active { transform: scale(.96); }
.v-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.v-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text); background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: var(--r-pill); padding: 3px 9px 3px 3px; }
.v-chip.listen-only { opacity: .65; }
.v-av { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; }
.v-ctl { font-size: 9.5px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--stroke-soft); border-radius: var(--r-pill); padding: 2px 7px; }
.v-mode { font-size: 10px; font-weight: 800; color: var(--dim); background: none; border: 1px dashed var(--stroke-soft); border-radius: var(--r-pill); padding: 4px 10px; }
.v-note { font-size: 10.5px; color: var(--dim); }

/* ---------- tier chips ---------- */
.tier-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; letter-spacing: .4px; padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; vertical-align: middle; flex-shrink: 0; }
.tier-chip.t0 { background: rgba(255, 255, 255, .07); border: 1px solid var(--stroke-soft); color: var(--dim); }
.tier-chip.t1 { background: color-mix(in srgb, #E3B341 14%, transparent); border: 1px solid color-mix(in srgb, #E3B341 48%, transparent); color: #EBD9BC; }
.tier-chip.t2 { background: linear-gradient(135deg, #C9A87E, #9A5EA8); color: #20131C; border: none; box-shadow: 0 2px 10px rgba(201, 168, 126, .35); }
.row-name-flex { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row-name-flex .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-name { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }

/* ---------- premium-locked pills ---------- */
.pill.locked { border-style: dashed; opacity: .75; }

/* ---------- me tier / store card ---------- */
.me-tier-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wallet-chip { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.me-tier-line { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.me-tier-sub { font-size: 11.5px; color: var(--dim); margin: 3px 0 12px; }
button.wide.store-btn { background: var(--grad); color: var(--accent-ink); border: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-bright) 45%, transparent); }

/* ---------- store ---------- */
.store-card { width: 92%; max-width: 380px; }
.store-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.store-head h3 { margin: 0; }
.store-head-chips { display: flex; align-items: center; gap: 6px; }
.store-sec-title { font-size: 11.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 9px; display: flex; align-items: center; gap: 8px; }
.store-sec-hint { font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: .2px; opacity: .8; }
.member-card { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 13px 15px; border-radius: 18px; border: 1px solid var(--stroke-soft); background: var(--glass); margin-bottom: 9px; transition: transform .15s; }
.member-card:active { transform: scale(.98); }
.member-card.is-owned { opacity: .7; }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-name { font-size: 14.5px; font-weight: 800; }
.mc-price { font-size: 12px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.mc-perks { font-size: 11px; color: var(--dim); line-height: 1.5; }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.gift-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border-radius: 18px; border: 1px solid var(--stroke-soft); background: var(--glass); transition: transform .15s; }
.gift-card:active { transform: scale(.94); }
.gc-emoji { font-size: 26px; }
.gc-name { font-size: 11px; font-weight: 700; }
.gc-price { font-size: 10px; font-weight: 800; color: var(--accent); }
.store-theme-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px 8px; }
.theme-label { font-size: 9px; font-weight: 800; color: var(--dim); }
.theme-label.owned { color: var(--ok); }
.gift-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 800; }
.gp-back { font-size: 22px; padding: 2px 11px; background: var(--glass); border-radius: var(--r-pill); border: 1px solid var(--stroke-soft); line-height: 1.2; color: var(--text); }

/* ---------- choose location ---------- */
.loc-inputs { display: flex; gap: 8px; }
.loc-inputs input { flex: 1; min-width: 0; }

/* ---------- gift affordances + gift bubbles ---------- */
.gift-btn { flex-shrink: 0; width: 37px; height: 37px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--stroke-soft); font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .15s; }
.gift-btn:active { transform: scale(.9); }
.msg.gift-msg { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
.msg.mine.gift-msg { background: color-mix(in srgb, var(--accent) 24%, transparent); }