:root {
  --blue: #1f6f68;
  --blue-deep: #185850;
  --ink: #1c1b19;
  --muted: #8a847b;
  --line: #ebe4d8;
  --bg: #f3efe8;
  --card: #fffdf9;
  --bubble: #fffdf9;
  --bubble-mine: #dceee8;
  --bubble-mine-ink: #16332f;
  --danger: #e11d48;
  --char: #24262b;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.file-pick {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
html, body { height: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior: none; touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label, input, textarea, select { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #efeae2;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, .conv:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
img { display: block; }

#boot {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  background:
    radial-gradient(520px 280px at 0% 0%, rgba(232, 214, 184, .55), transparent 70%),
    radial-gradient(640px 360px at 100% 8%, rgba(198, 224, 216, .72), transparent 68%),
    #f7f6f3;
}
#boot img { width: 72px; height: 72px; border-radius: 18px; }
#boot strong { color: #1f6f68; font-size: 22px; font-weight: 750; letter-spacing: .04em; }
.boot-spin {
  width: 22px;
  height: 22px;
  margin-top: 8px;
  border: 2px solid #e4ddd2;
  border-top-color: #1f6f68;
  border-radius: 50%;
  animation: boot-turn .7s linear infinite;
}
@keyframes boot-turn { to { transform: rotate(360deg); } }
#maintain {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f7f6f3;
}
.maintain-card {
  text-align: center;
  max-width: 280px;
}
.maintain-card img { width: 56px; height: 56px; border-radius: 14px; }
.maintain-card b { display: block; margin: 12px 0 8px; font-size: 22px; }
.maintain-card p { margin: 0; color: var(--muted); line-height: 1.55; }

#auth {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(8px, 1.8vh, 16px);
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    clamp(16px, 5.2vw, 28px)
    max(16px, env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(520px 280px at 0% 0%, rgba(232, 214, 184, .55), transparent 70%),
    radial-gradient(640px 360px at 100% 8%, rgba(198, 224, 216, .72), transparent 68%),
    radial-gradient(480px 320px at 86% 92%, rgba(216, 206, 236, .55), transparent 70%),
    #f7f6f3;
}
.auth-mesh,
.auth-glow { display: block; pointer-events: none; position: absolute; }
.auth-mesh {
  inset: 0;
  background-image: radial-gradient(rgba(29, 79, 140, .07) 1.1px, transparent 1.2px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse at 50% 42%, #000 18%, transparent 78%);
}
.auth-glow {
  width: min(72%, 280px);
  height: 26%;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(198, 224, 216, .55), transparent 70%);
  filter: blur(8px);
}
.auth-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  flex: none;
}
.auth-chip.c3 { display: none; }
.auth-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 249, .82);
  color: #5c574e;
  font-size: clamp(11px, 3.1vw, 13px);
  line-height: 1.3;
  box-shadow: 0 10px 24px rgba(36, 32, 24, .08);
  animation: auth-float 7.2s ease-in-out infinite;
  max-width: 100%;
}
@keyframes auth-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.auth-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.auth-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}
.auth-sheet {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  margin: 0 auto;
  animation: auth-up .72s ease-out both;
}
@keyframes auth-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth-brand { display: grid; justify-items: center; gap: 10px; margin: 18px 0 28px; }
.auth-brand img { width: 72px; height: 72px; border-radius: 18px; }
.auth-brand strong { color: #1f6f68; font-size: 22px; font-weight: 750; letter-spacing: .04em; }
.pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 0 0 14px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #e7e2d8;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(36, 32, 24, .04);
}
.pill svg { width: 20px; height: 20px; color: #1f6f68; flex: none; }
.pill input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 14px 0;
  outline: none;
  box-shadow: none;
  font-size: 16px;
}
.pill input:focus { box-shadow: none; }
.code-pill input { min-width: 0; }
.code-btn {
  border: 0;
  background: transparent;
  color: #1f6f68;
  font-weight: 700;
  white-space: nowrap;
  padding: 0 0 0 8px;
}
.code-btn:disabled { color: var(--muted); }
.auth-go {
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: #1f6f68;
  color: #fff;
  font-weight: 700;
  padding: 14px 18px;
  transition: transform .16s cubic-bezier(.4, 0, .2, 1), box-shadow .16s ease, opacity .16s ease;
}
.auth-go:active { transform: translateY(1px); }
.auth-go:disabled { opacity: .55; }
.auth-ghost {
  width: 100%;
  margin-top: 12px;
  border: 1px solid #e6e1d8;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  padding: 13px 18px;
  transition: transform .16s cubic-bezier(.4, 0, .2, 1), background .16s ease;
}
.auth-ghost:active { transform: translateY(1px); }
.login-miss {
  position: absolute;
  left: 42px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1c1b19;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity .22s ease;
}
.login-miss.is-out { opacity: 0; }
.logout-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom));
  background: rgba(28, 27, 25, .45);
}
.logout-sheet {
  width: min(520px, 100%);
  display: grid;
  gap: 8px;
}
.logout-sheet button {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  font-size: 17px;
}
.logout-sheet .out { color: #e23d3d; }
.logout-sheet .cancel { color: #1f6f68; }
.agree {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 2px 6px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.agree input { margin-top: 3px; accent-color: #1f6f68; }
.agree button { border: 0; background: transparent; color: #1f6f68; padding: 0; font-weight: 700; }
.auth-air { position: absolute; inset: 0; pointer-events: none; }
.auth-air span {
  position: absolute;
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(255, 253, 249, .78);
  color: #6f6a62;
  font-size: 14px;
  box-shadow: 0 12px 28px rgba(36, 32, 24, .06);
}
.auth-air span:nth-child(1) { top: 22px; left: 58px; }
.auth-air span:nth-child(2) { top: 28px; right: 16px; background: var(--char); color: #f6f3ed; }
.auth-air span:nth-child(3) { bottom: 20px; left: 16px; }
.auth-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: var(--card);
  border-radius: 24px;
  padding: 32px 28px 22px;
  box-shadow: 0 24px 50px rgba(36, 32, 24, .08);
}
.logo-row { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.logo-row strong { display: block; font-size: 22px; }
.logo-row p, .muted, .switch, .demo { color: var(--muted); }
.logo-row p { margin: 2px 0 0; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 13px; color: #667085; }
.field input, .field textarea, .field select, .inline-form input, .inline-form select, #addForm input, #groupForm input {
  width: 100%;
  border: 1px solid #e4e9f2;
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}
.field input:focus, .inline-form input:focus, .inline-form select:focus, #addForm input:focus {
  border-color: #c8bfb0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(36, 38, 43, .06);
}
.primary {
  border: 0;
  background: var(--char);
  color: #f6f3ed;
  border-radius: 14px;
  padding: 11px 18px;
  font-weight: 700;
}
.primary:hover { background: #1a1c20; }
.primary:disabled { opacity: 0.55; cursor: default; }
.primary.block { width: 100%; padding: 13px 18px; }
.auth-switch { text-align: center; font-size: 14px; margin: 14px 0 0; }
.linkish { border: 0; background: none; color: var(--blue); padding: 0; font-weight: 700; }
body.store-ios .demo { display: none !important; }
.auth-legal { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.auth-legal button { background: none; border: 0; color: var(--accent, #1d4f8c); padding: 0; }
.about-mail { margin: 16px 12px 0; font-size: 13px; color: var(--muted); text-align: center; }
.age-gate { margin-top: 8px; }
.demo {  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 8px;
}
.demo button {
  border: 0;
  background: #efeae2;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
}
.form-error {
  background: #fff1f2;
  color: var(--danger);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 14px;
}
.invite-note {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 13px;
  line-height: 1.5;
}

#app {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  contain: layout style;
}
#rail {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 480px;
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  gap: 0;
  background: #faf7f2;
  border-right: 0;
  border-top: 1px solid var(--line);
  transform: translateX(-50%);
}
.brand-mark { display: none; }
#rail button[data-tab] {
  position: relative;
  flex: 1;
  width: auto;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: #8a847b;
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 650;
  -webkit-tap-highlight-color: transparent;
}
#rail button[data-tab] svg { width: 22px; height: 22px; }
#rail button[data-tab]:active { background: transparent; }
#rail button[data-tab].active {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 2px 0 var(--blue);
}
.rail-badge {
  position: absolute;
  top: 4px;
  right: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  display: grid;
  place-items: center;
}

#listPane, #chatPane { min-width: 0; min-height: 0; }
#listPane {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 62px);
  height: calc(100dvh - 62px - env(safe-area-inset-bottom, 0px));
  background: #fffdf9;
  border-right: 0;
}
#chatPane { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; }
body:not(.in-chat) #chatPane { display: none; }
body.in-chat #listPane, body.in-chat #rail { display: none; }
body.find-open #rail { display: none; }
body.find-open #listPane { height: 100vh; height: 100dvh; }
.pane-head { padding: 18px 16px 10px; }
.pane-title-row { position: relative; display: flex; align-items: center; justify-content: space-between; }
.pane-me { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.pane-me span { min-width: 0; }
.pane-me b { display: block; font-size: 17px; line-height: 1.2; font-weight: 750; }
.pane-me small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 650; }
.pane-me small.id-pretty.is-shop { color: #ec3223; -webkit-text-fill-color: #ec3223; }
.pane-me small.id-pretty.is-draw { color: #c336da; -webkit-text-fill-color: #c336da; }
.pane-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.folder-form { display: grid; gap: 8px; padding: 8px 4px 24px; }
.folder-form label { color: var(--muted); font-size: 13px; font-weight: 650; margin-top: 10px; }
.folder-form input {
  width: 100%; height: 46px; border: 0; border-radius: 12px; background: #ece7df;
  padding: 0 14px; font: inherit; font-size: 16px;
}
.folder-add {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 52px;
  border: 0; border-radius: 12px; background: #ece7df; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--ink); text-align: left;
}
.folder-add i {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #fffdf9; color: var(--blue); font-style: normal; font-size: 20px; line-height: 1;
}
.folder-picked { display: flex; flex-wrap: wrap; gap: 8px; }
.folder-picked button {
  border: 0; border-radius: 999px; background: #fffdf9; padding: 6px 10px;
  font: inherit; font-size: 13px; color: var(--ink);
}
.assist-list { display: grid; gap: 10px; }
.assist-item { background: var(--card); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.assist-item p { margin: 0; line-height: 1.5; }
.assist-item small { color: var(--muted); }
.assist-actions { display: flex; gap: 8px; }
.pick-mark {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfc6b8;
  display: grid; place-items: center; font-style: normal; color: var(--blue); font-size: 14px; flex: none;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--bg);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
}
#paneAction svg { width: 20px; height: 20px; }
.pane-head.center-title { padding-top: 4px; padding-bottom: 6px; }
.pane-head.center-title .pane-title-row { justify-content: center; min-height: 36px; }
.pane-head.center-title h1 { flex: none; text-align: center; font-size: 17px; }
.pane-head.soft-title h1 { color: #8a847b; font-weight: 500; }
.pane-head.center-title .pane-back,
.pane-head.center-title .pane-back:hover {
  position: absolute;
  left: 0;
  background: transparent;
  box-shadow: none;
}
.pane-head.center-title #paneAction {
  position: absolute;
  right: 0;
}
.icon-btn:hover { background: #efeae2; }
.plus-menu {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 4;
  min-width: 148px;
  padding: 6px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(23, 32, 51, 0.14);
}
.plus-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
}
.plus-menu button:hover { background: var(--bg); }
.conn { margin: 8px 0 0; color: #b45309; font-size: 12px; }
#paneSearch {
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.chat-search {
  width: 100%;
  margin-top: 12px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #f3f1ec;
  color: #8a847b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
}
.chat-search[hidden] { display: none; }
.chat-search svg { width: 16px; height: 16px; }
.find-page { min-height: 100%; background: #f6f5f3; }
.find-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; background: #fff; }
.find-field { flex: 1; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; background: #f2f2f2; color: #9aa0a6; }
.find-field svg { width: 16px; height: 16px; flex: none; }
.find-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: #1c1b19; }
.find-bar > button { border: 0; background: transparent; color: #1f6f68; font-size: 16px; padding: 0 2px; }
.find-hint { margin: 28px 16px 0; text-align: center; color: #8a847b; font-size: 14px; }
.find-sec { margin: 8px 0 0; padding: 8px 16px 2px; color: #8a847b; font-size: 13px; font-weight: 650; }
.pane-head.bare #chatSearch { display: none; }
#paneBody { flex: 1; overflow: auto; min-height: 0; }

.conv-swipe { position: relative; overflow: hidden; background: #fff; }
.conv-swipe.is-pin { background: #f6f5f3; }
.conv-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
.conv-actions button {
  width: 64px;
  border: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  padding: 0 4px;
}
.conv-actions .pin { background: #b5b5b5; }
.conv-actions .mute { background: #3478f6; }
.conv-actions .del { background: #f4453c; }
.conv-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #d0d0d0;
  flex: none;
  display: grid;
  place-items: center;
}
.conv-check.on { background: #3478f6; border-color: #3478f6; }
.conv-check.on::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.mute-bell { width: 16px; height: 16px; color: #b0b0b0; flex: none; }
#convPickBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  background: #fff;
  border-top: 1px solid #eeeae4;
}
#convPickBar[hidden] { display: none; }
#convPickBar button { border: 0; background: transparent; font-size: 16px; color: #1c2430; padding: 8px 0; }
#convPickBar span { color: #8a847b; font-size: 15px; }
#convPickBar b { font-weight: 650; color: #1c2430; }
.pane-head.picking h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
}
.pane-head.picking .pick-text {
  width: auto;
  min-width: 44px;
  background: transparent;
  font-size: 16px;
  color: #1c2430;
}
.pane-head.picking .pick-go { color: #f4453c; }
.pane-head.picking .icon-btn:disabled { color: #c8c8c8; }
.conv {
  width: 100%;
  border: 0;
  background: #fff;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  text-align: left;
  color: inherit;
  position: relative;
  transition: transform .16s ease;
}
.conv-swipe.open .conv { width: calc(100% - 192px); }
.conv-swipe.is-pin .conv { background: #f6f5f3; }
.conv:hover { background: #faf7f2; }
.conv.active { background: #f3ece2; }
.row-body { flex: 1; min-width: 0; }
.row-top, .row-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-name, .row-preview { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row-name { font-size: 15px; }
.name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.name-line .row-name { flex: 0 1 auto; }
.official {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid #b7b1a8;
  border-radius: 999px;
  color: #6e6860;
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
}
.pane-head.center-title h1 { display: flex; align-items: center; gap: 6px; }
.avatar.bot { background: #1f6f68; color: #fff; border-radius: 14px; }
.avatar.bot svg { width: 48px; height: 48px; display: block; }
.avatar.bot.horn { background: #3ec6f5; }
.avatar.bot.robot {
  background: linear-gradient(155deg, #ffffff 0%, #e7eef5 42%, #c5d0dc 100%);
  box-shadow: 0 5px 10px rgba(27, 36, 48, .22), inset 0 1px 0 #fff, inset 0 -5px 8px rgba(27, 36, 48, .14);
  border-radius: 16px;
}
.avatar.bot.robot svg { width: 100%; height: 100%; }
.badge.alert { background: #e25555; }
.notice-main .tid-line { color: #1c1b19; font-size: 13px; }
.notice-main .tid-line.id-pretty.is-shop { color: #ec3223; -webkit-text-fill-color: #ec3223; }
.notice-main .tid-line.id-pretty.is-draw { color: #c336da; -webkit-text-fill-color: #c336da; }
.row-preview .id-pretty.is-shop { color: #ec3223; -webkit-text-fill-color: #ec3223; }
.row-preview .id-pretty.is-draw { color: #c336da; -webkit-text-fill-color: #c336da; }
.notice-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #fffdf9; position: sticky; top: 0; }
.notice-tabs button { border: 0; background: transparent; padding: 12px 0; font: inherit; font-size: 15px; color: #8a847b; }
.notice-tabs button.on { color: #1c1b19; font-weight: 750; box-shadow: inset 0 -2px 0 #1c1b19; }
.notice-list { background: #fffdf9; }
.notice-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.notice-face { width: 46px; height: 46px; border-radius: 12px; background: #dceee8; color: #1f6f68; display: grid; place-items: center; flex: none; }
.notice-face b { font-size: 18px; }
.notice-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.notice-main b { font-size: 16px; font-weight: 700; }
.notice-main span, .notice-main small { color: #8a847b; font-size: 12px; line-height: 1.35; }
.notice-side { flex: none; color: #9a948c; font-size: 13px; }
.notice-actions { display: flex; gap: 8px; flex: none; }
.notice-actions button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; }
.notice-actions .no { background: #ece7df; color: #1c1b19; }
.notice-actions .yes { background: #24262b; color: #fff; }
.row-preview { color: var(--muted); font-size: 13px; margin-top: 3px; flex: 1; min-width: 0; }
.row-top time { color: #a0a8b8; font-size: 12px; flex: none; }
.badge {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  display: inline-grid;
  place-items: center;
}

.avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.avatar b { font-size: 18px; font-weight: 700; }
.avatar.sm { width: 36px; height: 36px; }
.avatar.sm b { font-size: 14px; }
.avatar.lg { width: 84px; height: 84px; }
.avatar.lg b { font-size: 32px; }
.avatar.sq { width: 64px; height: 64px; border-radius: 14px; }
.avatar.sq b { font-size: 26px; }
.dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}
.stack {
  width: 48px;
  height: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  flex: none;
}
.stack i {
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.sec {
  margin: 16px 16px 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}
.person, .person-hit {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  text-align: left;
  color: inherit;
}
.person.slim { padding: 8px 0; }
.person-text { flex: 1; min-width: 0; }
.person-text b, .person-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-text span, .account-line, .group-label { color: var(--muted); font-size: 13px; }
.person-actions { display: flex; gap: 6px; flex: none; }
.mini, .tag {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.mini.ghost, .tag { background: #eef2f7; color: #667085; }
.empty { padding: 36px 24px; text-align: center; color: var(--muted); line-height: 1.6; }
.empty.thin { padding: 20px; }

#chatPane {
  background-color: var(--chat-wall, #e8e4f4);
  background-image: var(--chat-wall-image, none);
  background-size: cover;
  background-position: center;
}
#chatEmpty {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
}
#chatMain { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
#groupBan {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 32px 24px 48px;
  text-align: center;
  background: #fff8f6;
  color: #8a3b32;
}
#groupBan[hidden] { display: none; }
#groupBan .ban-mark { width: 88px; height: 88px; color: #d4534a; }
#groupBan .ban-mark svg { width: 100%; height: 100%; }
#groupBan h2 { margin: 0; font-size: 20px; color: #6b2a24; }
#groupBan p { margin: 0; max-width: 260px; line-height: 1.6; }
#groupBan .primary { height: 40px; padding: 0 22px; border: 0; border-radius: 20px; background: #d4534a; color: #fff; }
#chatHeader {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
}
#chatHeader.has-call {
  padding-right: 128px;
}
.chat-calls {
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
}
.chat-call {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #1c1b19;
  display: grid;
  place-items: center;
}
.chat-call svg { width: 22px; height: 22px; }
#chatHeader {
  background: #fffdf9;
  border-bottom: 1px solid var(--line);
}
.back {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  display: grid;
  place-items: center;
}
.back svg { width: 22px; height: 22px; }
.chat-more {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #1c1b19;
  display: grid;
  place-items: center;
  overflow: visible;
}
.chat-more svg { width: 22px; height: 22px; }
.chat-title { min-width: 0; max-width: 100%; text-align: center; }
.chat-title strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}
.e2e-lock { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 1px; color: #1f6f68; font-size: 11px; font-style: normal; font-weight: 500; line-height: 14px; }
.e2e-lock svg { width: 11px; height: 11px; flex: none; }
#msgs { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 8px; }
.time, .sys { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0; }
.sys {
  display: table;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 4px 10px;
}
.more {
  display: block;
  margin: 0 auto 12px;
  border: 0;
  background: #fff;
  color: var(--blue);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
}
.msg { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }
.msg.mine { justify-content: flex-end; }
.msg-col { max-width: min(72%, 520px); }
.msg.mine .msg-col { display: flex; flex-direction: column; align-items: flex-end; }
.msg-name { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin: 0 4px 4px; }
.role-box { flex: none; font-style: normal; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 3px; color: #fff; }
.role-box.owner { background: #e23d3d; }
.role-box.admin { background: #7d77b7; }
.bubble {
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.5;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg:not(.mine) .bubble {
  background: var(--bubble);
  border-bottom-left-radius: 8px;
  box-shadow: 0 6px 16px rgba(36, 32, 24, .05);
}
.msg.mine .bubble {
  background: var(--bubble-mine);
  color: var(--bubble-mine-ink);
  border-bottom-right-radius: 8px;
}
#speakBan { background: transparent; }
.speak-all, .speak-one {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  color: #6b6460;
  font-size: 15px;
}
.speak-all i {
  width: 22px;
  height: 22px;
  color: #8a847b;
  display: grid;
  place-items: center;
}
.speak-all svg { width: 22px; height: 22px; }
.speak-all b, .speak-one b { font-weight: 650; }
#composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #f7f4ef;
}
.composer-tool {
  width: 36px;
  height: 36px;
  margin-bottom: 3px;
  border: 1.5px solid #c8c2b8;
  border-radius: 50%;
  background: #fff;
  color: #3c3a36;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
}
.composer-tool svg { width: 22px; height: 22px; }
#box {
  flex: 1;
  resize: none;
  border: 0;
  background: #fff;
  border-radius: 18px;
  padding: 10px 14px;
  max-height: 120px;
  outline: none;
  line-height: 1.45;
  min-height: 40px;
}
#voiceHold {
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #3c3a36;
  font-size: 15px;
  font-weight: 650;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#voiceHold:active { background: #ece8e1; }
#voiceMask {
  position: absolute;
  inset: 0 0 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  background: rgba(20, 18, 16, 0.42);
  color: #fff;
  z-index: 5;
  pointer-events: none;
}
#voiceMask[hidden] { display: none; }
#voiceMask b { font-size: 16px; font-weight: 700; }
#voiceMask span { font-size: 13px; opacity: 0.85; }
#voiceMask.is-cancel { background: rgba(176, 48, 48, 0.48); }
.voice-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 72px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.msg.mine .voice-bubble { flex-direction: row-reverse; }
.voice-wave {
  width: 16px;
  height: 14px;
  display: block;
  background: currentColor;
  -webkit-mask: radial-gradient(circle at 2px 8px, #000 1.6px, transparent 1.8px),
    radial-gradient(circle at 8px 7px, #000 2.4px, transparent 2.6px),
    radial-gradient(circle at 14px 8px, #000 1.6px, transparent 1.8px);
  mask: radial-gradient(circle at 2px 8px, #000 1.6px, transparent 1.8px),
    radial-gradient(circle at 8px 7px, #000 2.4px, transparent 2.6px),
    radial-gradient(circle at 14px 8px, #000 1.6px, transparent 1.8px);
}
.voice-bubble.playing .voice-wave {
  animation: voice-pulse 0.7s ease-in-out infinite;
}
@keyframes voice-pulse {
  50% { opacity: 0.35; }
}
#composer .primary { height: 36px; margin-bottom: 3px; padding: 0 14px; border-radius: 18px; }
#dock { background: var(--chat-wall, #e8e4f4); padding: 8px 16px 18px; }
.dock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
.dock-item { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; color: #3c3a36; font-size: 12px; padding: 0; }
.dock-item i { width: 62px; height: 62px; border-radius: 16px; background: #fff; display: grid; place-items: center; font-size: 26px; color: #2c2a26; }
.dock-item svg { width: 28px; height: 28px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 220px; overflow: auto; }
.emoji-grid button { height: 40px; border: 0; background: transparent; font-size: 24px; }
.dock-people { display: grid; gap: 8px; max-height: 240px; overflow: auto; }
.dock-person { display: flex; gap: 10px; align-items: center; border: 0; background: #fff; border-radius: 12px; padding: 8px 10px; text-align: left; color: inherit; }
.dock-person span { display: grid; }
.dock-person small { color: var(--muted); }
.dock-empty { margin: 12px 0; color: var(--muted); text-align: center; }
.msg-photo, .msg-video { display: block; max-width: 220px; border-radius: 12px; }
.bubble.plain { padding: 0; background: transparent; box-shadow: none; }
.gift-bubble { display: flex; align-items: center; gap: 8px; }
.gift-bubble i { font-style: normal; font-size: 28px; }
.card-bubble { display: grid; gap: 2px; min-width: 160px; border: 0; background: transparent; text-align: left; color: inherit; padding: 2px; }
.card-bubble small { color: var(--muted); margin-top: 6px; }
.fav-list { display: grid; gap: 12px; padding: 12px 16px 28px; }
.fav-card { display: block; width: 100%; text-align: left; border: 0; background: #fff; border-radius: 14px; padding: 14px 14px 10px; color: inherit; box-shadow: 0 1px 2px rgba(28, 27, 25, .04); }
.fav-body { display: block; white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.5; }
.fav-card footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; color: #8a847b; font-size: 13px; font-weight: 400; }
.fav-card footer b { font-weight: 400; }
.fb-form { display: grid; gap: 12px; padding: 12px 16px 28px; }
.fb-row, .fb-block { background: #fff; border-radius: 12px; }
.fb-row { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; padding: 16px; color: inherit; font-size: 15px; }
.fb-row.locked { pointer-events: none; user-select: none; }
.fb-row em { color: #8a847b; font-style: normal; }
.fb-block { padding: 14px 16px 10px; }
.fb-label { font-size: 15px; margin-bottom: 8px; }
.req { color: #c4564a; }
.opt { color: #8a847b; }
.fb-block textarea { width: 100%; border: 0; background: transparent; resize: none; outline: none; font: inherit; color: inherit; }
.fb-count { text-align: right; color: #8a847b; font-size: 12px; }
.fb-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-add, .fb-shot { width: 84px; height: 84px; border-radius: 10px; }
.fb-add { border: 1px dashed #c8c2b8; background: transparent; color: #8a847b; display: grid; place-items: center; gap: 4px; font-size: 12px; }
.fb-add svg { width: 26px; height: 26px; }
.fb-shot { position: relative; }
.fb-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.fb-shot button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #1c1b19; color: #fff; }
.fb-submit { width: 100%; height: 46px; border-radius: 23px; }
.type-mask { position: fixed; inset: 0; z-index: 50; background: rgba(28, 27, 25, .35); display: flex; align-items: flex-end; }
.type-sheet { width: min(520px, 100%); margin: 0 auto 12px; background: #fff; border-radius: 16px; overflow: hidden; }
.type-sheet button { display: block; width: 100%; height: 52px; border: 0; border-top: 1px solid var(--line); background: #fff; font-size: 16px; }
.type-sheet button:first-child { border-top: 0; }
.type-sheet .cancel { margin-top: 8px; border-top: 0; border-radius: 16px; color: var(--muted); }

#markBar {
  background: #fffdf9;
  border-bottom: 1px solid var(--line);
}
#markBar.open {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 0;
  background: #f6f3ee;
}
.imp-bar {
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
}
.imp-main {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  border: 0;
  border-left: 3px solid #1f6f68;
  background: transparent;
  text-align: left;
  padding: 8px 4px 8px 10px;
  color: inherit;
  min-width: 0;
}
.imp-flag { grid-column: 1; grid-row: 1 / span 2; align-self: center; color: #1f6f68; }
.imp-flag svg { width: 16px; height: 16px; display: block; }
.imp-main b { grid-column: 2; grid-row: 1; color: #1f6f68; font-size: 15px; font-weight: 700; white-space: nowrap; }
.imp-preview { grid-column: 2; grid-row: 2; color: #8a847b; font-size: 13px; overflow: hidden; white-space: nowrap; }
.imp-preview i { font-style: normal; }
.imp-preview.roll i { display: inline-block; padding-left: 100%; animation: imp-run 12s linear infinite; }
@keyframes imp-run { to { transform: translateX(-100%); } }
.imp-x {
  border: 0;
  background: transparent;
  color: #8a847b;
  font-size: 20px;
  height: 36px;
}
.imp-sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.imp-sheet header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 8px 8px 4px;
}
.imp-sheet header b { text-align: center; font-size: 17px; }
.imp-sheet header button {
  border: 0;
  background: transparent;
  color: #1c1b19;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  justify-self: center;
}
.imp-fold { border-radius: 50%; background: #fff !important; }
.imp-fold svg, .imp-sheet header svg { width: 22px; height: 22px; }
.imp-cancel { width: auto !important; font-size: 15px; }
.imp-list { flex: 1; min-height: 0; overflow: auto; }
.imp-swipe { position: relative; overflow: hidden; }
.imp-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 216px;
  display: flex;
}
.imp-actions button { flex: 1; border: 0; color: #fff; font-size: 15px; }
.imp-actions button:nth-child(1) { background: #c47a3a; }
.imp-actions button:nth-child(2) { background: #1f6f68; }
.imp-actions button:nth-child(3) { background: #d4534b; }
.imp-item {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(28, 27, 25, .06);
  background: #f6f3ee;
  text-align: left;
  padding: 12px 14px;
  color: inherit;
  transition: transform .18s ease;
}
.imp-swipe.open .imp-item { transform: translateX(-216px); }
.imp-item .tick { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.imp-item .avatar { grid-column: 1; grid-row: 1 / span 3; }
.imp-item .tick + .avatar { grid-column: 1; }
.imp-item:has(.tick) { grid-template-columns: 22px 36px minmax(0, 1fr) auto; }
.imp-item:has(.tick) .avatar { grid-column: 2; }
.imp-item:has(.tick) b,
.imp-item:has(.tick) span,
.imp-item:has(.tick) small { grid-column: 3; }
.imp-item:has(.tick) time { grid-column: 4; }
.imp-item b { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 650; }
.imp-item time { grid-column: 3; grid-row: 1; color: #8a847b; font-size: 12px; }
.imp-item span { grid-column: 2 / span 2; color: #3a342c; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-item small { grid-column: 2 / span 2; color: #8a847b; font-size: 12px; }
.imp-item.gone span { color: #8a847b; }
.imp-purge {
  height: 52px;
  border: 0;
  border-top: 1px solid var(--line);
  background: #fff;
  color: #d4534b;
  font-size: 16px;
}
.imp-purge:disabled { color: #c8c2b8; }
.imp-empty { padding: 48px 28px; text-align: center; color: #8a847b; }
.imp-sample {
  width: min(240px, 70%);
  margin: 0 auto 18px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  gap: 12px;
}
.imp-sample i {
  display: block;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ece7df 28px, transparent 28px), linear-gradient(#ece7df, #ece7df);
  background-size: 100% 8px, 70% 8px;
  background-repeat: no-repeat;
  background-position: 0 4px, 36px 18px;
}
.imp-empty p { margin: 0; line-height: 1.7; font-size: 14px; }
.msg-swipe { position: relative; overflow: hidden; margin: 10px 0; touch-action: pan-y; }
.msg-swipe.flash .bubble { outline: 2px solid var(--blue); }
.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 168px;
  display: flex;
}
.swipe-actions button { flex: 1; border: 0; color: #fff; font-size: 13px; }
.swipe-actions button:nth-child(1) { background: #5b6b82; }
.swipe-actions button:nth-child(2) { background: #1f6f68; }
.swipe-actions button:nth-child(3) { background: #e25555; }
.msg-slide {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background-color: var(--chat-wall, #e8e4f4);
  background-image: var(--chat-wall-image, none);
  background-size: cover;
  background-position: center;
  transition: transform .18s ease;
  user-select: none;
}
.msg-swipe.open .msg-slide { transform: translateX(-168px); }
.msg-slide .msg { flex: 1; min-width: 0; margin: 0; }
.tick {
  width: 18px;
  height: 18px;
  margin-top: 12px;
  border: 2px solid #c5cedb;
  border-radius: 50%;
  flex: none;
}
.tick.on { background: var(--blue); border-color: var(--blue); box-shadow: inset 0 0 0 3px #fff; }
.quote {
  max-width: 100%;
  margin-bottom: 4px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: rgba(23, 32, 51, 0.06);
  color: var(--muted);
  font-size: 12px;
}
.receipt { margin-top: 2px; color: #7d93c9; font-size: 11px; }
.avatar-btn { border: 0; padding: 0; background: transparent; cursor: pointer; }
.person > .person-hit { flex: 1; min-width: 0; padding: 0; }
#replyBar, #selectBar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--line);
}
#replyBar span, #selectCount { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
#replyBar button, #selectBar button {
  border: 0;
  background: var(--bg);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
}
#replyBar button { background: transparent; font-size: 18px; padding: 0 6px; }
#selectBar [data-act="select-delete"] { color: var(--danger); }
#sheet { position: fixed; inset: 0; z-index: 30; }
#sheet:has(.type-sheet) { display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}
.sheet {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 16px 16px 0 0;
}
.sheet button {
  border: 0;
  border-radius: 12px;
  background: var(--bg);
  padding: 12px;
  font-size: 15px;
}
.sheet .muted-btn { background: transparent; color: var(--muted); }
.msg-pop {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 56px);
  padding: 4px 4px 6px;
  background: #2c2e33;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 20, 22, .28);
}
.msg-pop button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 8px 0 6px;
  font-size: 11px;
  line-height: 1;
}
.msg-pop button svg { width: 22px; height: 22px; }
.msg-pop button:hover { background: rgba(255, 255, 255, .08); }
.msg-pop-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}
.msg-pop.above .msg-pop-arrow { bottom: -12px; border-top-color: #2c2e33; }
.msg-pop.below .msg-pop-arrow { top: -12px; border-bottom-color: #2c2e33; }
.home-page {
  position: fixed;
  inset: 0;
  z-index: 25;
  overflow: auto;
  background: #f5f6f8;
  overscroll-behavior-x: none;
}
.home-sheet {
  width: 100%;
  min-height: 100%;
  background: #f5f6f8;
  padding: 0 0 32px;
}
.home-bar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: #fff;
}
.home-bar.center-title { position: relative; justify-content: center; }
.home-bar.center-title .home-back { position: absolute; left: 4px; }
.home-icon {
  position: absolute;
  right: 4px;
  border: 0;
  background: transparent;
  color: #222;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.home-save {
  position: absolute;
  right: 4px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  padding: 8px 12px;
}
.home-more {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #222;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
}
.home-more svg { width: 22px; height: 22px; }
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 8px 16px 28px;
  margin-bottom: 12px;
}
.avatar.hero { width: 112px; height: 112px; border-radius: 50%; }
.avatar.hero b { font-size: 40px; }
.profile-hero > b { margin-top: 14px; font-size: 22px; }
.profile-remark { margin-top: 6px; color: #667085; font-size: 14px; }
.added-line { margin: 0; padding: 14px 16px 16px; color: #667085; font-size: 14px; line-height: 1.5; }
.home-pad-title { padding: 16px 16px 0; }
.home-danger-text { color: #e85a4f; }
.home-danger-text i { color: #e85a4f; }
.home-card { margin: 0 12px 12px; }
.profile-hero + .home-card { margin-top: 0; }
.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 12px 12px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
}
.profile-head .avatar { width: 58px; height: 58px; }
.profile-head .avatar b { font-size: 22px; }
.profile-head > div > b { display: flex; align-items: center; font-size: 18px; }
.profile-head .home-id { margin-top: 4px; }
.home-sign {
  display: block;
  margin-top: 6px;
  color: #8a847b;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
.stranger-head { margin-top: 8px; }
.profile-plain {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 16px;
  font-size: 16px;
  text-align: center;
  color: #222;
}
.profile-plain.danger { color: #e85a4f; }
.profile-plain.chat-go { color: #3b6de0; font-weight: 500; }
.profile-plain.add-go { color: #1c1b19; font-weight: 500; }
.profile-plain.add-wait { color: #9a948b; font-weight: 500; }
.home-row.source-line { gap: 28px; }
.home-row.source-line .side { margin-left: 0; }
.sheet-danger { color: #e85a4f; }
.home-back {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #222;
  font-size: 34px;
  line-height: 1;
  padding: 0;
}
.home-bar strong { font-size: 17px; }
.home-card {
  background: #fff;
  border-radius: 12px;
  margin: 0 12px 12px;
  overflow: hidden;
}
.home-profile { display: flex; align-items: center; gap: 14px; padding: 16px; }
.home-profile b { display: block; font-size: 18px; }
.home-id { display: block; margin-top: 6px; color: #1a1a1a; font-size: 14px; font-weight: 700; }
.home-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid #f1f1f1;
  background: #fff;
  text-align: left;
  font-size: 16px;
  color: #222;
}
.home-row:last-child { border-bottom: 0; }
.home-row > span:first-child { flex: none; }
.home-row small { display: block; margin-top: 4px; color: #8b93a7; font-size: 12px; }
.home-row .side { margin-left: auto; color: #98a2b3; font-style: normal; font-size: 14px; }
.home-row i { margin-left: auto; color: #c5c5c5; font-style: normal; font-size: 22px; }
.home-thumbs { margin-left: auto; display: flex; gap: 6px; }
.home-thumbs img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; background: #eee; }
.home-row i.switch { font-size: 0; color: transparent; }
.home-static { cursor: default; }
.home-action {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
  padding: 16px;
  font-size: 16px;
  text-align: center;
  color: #222;
}
.home-action.home-danger { color: #e85a4f; background: #fff; border-radius: 12px; font-weight: 400; }
.g-ident { display: flex; align-items: center; gap: 12px; padding: 16px; }
.g-ident b { display: block; font-size: 18px; }
.g-ident span { display: block; margin-top: 4px; color: #1c1b19; font-size: 14px; }
.g-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
.g-sec b { font-size: 16px; font-weight: 650; }
.g-sec button { border: 0; background: transparent; color: #8a847b; font-size: 14px; }
.g-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 6px; padding: 14px 10px 16px; }
.g-cell { border: 0; background: transparent; display: grid; justify-items: center; gap: 4px; min-width: 0; color: inherit; padding: 0; }
.g-name { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; min-width: 0; }
.g-name b, .g-cell b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 450; }
.person-text > b { display: flex; align-items: center; gap: 4px; }
.g-cell small { min-height: 14px; color: #1f6f68; font-size: 11px; }
.g-plus { width: 48px; height: 48px; border: 1px dashed #c8c2b8; border-radius: 50%; display: grid; place-items: center; color: #8a847b; font-size: 26px; }
.g-minus::before { content: ''; width: 16px; height: 2px; border-radius: 1px; background: #8a847b; }
.g-note { margin: 0; padding: 0 16px 14px; color: #8a847b; font-size: 13px; line-height: 1.5; }
.g-flag > span { flex: 1; min-width: 0; }
.g-flag b { font-weight: 500; }
.g-admin-add { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: #fff; color: #1f6f68; padding: 16px; font-size: 16px; }
.g-admin-add i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #1f6f68; display: grid; place-items: center; font-style: normal; }
.g-powers { padding: 4px 20px 20px; color: #8a847b; font-size: 13px; line-height: 1.7; }
.g-powers b, .g-powers p { margin: 0; font-weight: 400; }
.g-people { padding: 4px 0; }
.g-people .muted { padding: 16px; }
.g-person { padding: 10px 16px; }
.g-qr { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; color: #1c1b19; }
.g-qr p { margin: 0; color: #8a847b; font-size: 13px; }
.g-hit { display: grid; gap: 4px; width: 100%; border: 0; border-bottom: 1px solid #f1f1f1; background: #fff; text-align: left; padding: 12px 16px; color: inherit; }
.g-hit b { font-size: 14px; }
.g-hit span { color: #3c3a36; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-sheet { width: min(520px, calc(100% - 16px)); margin: 0 auto 12px; }
.person-sheet p { margin: 0; padding: 14px 16px 8px; text-align: center; color: #8a847b; }
.person-sheet button.danger { color: #d4534b; }
.only-log { display: grid; gap: 14px; padding: 16px; }
.only-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: end; }
.only-row .bubble { background: #fff; border-radius: 12px; padding: 8px 12px; }
.only-row time { color: #c4a15a; font-size: 12px; }
.block-bar { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
.block-bar button { border: 0; background: transparent; font-size: 16px; }
.block-bar .danger { color: #d4534b; border: 1px solid #d4534b; border-radius: 22px; padding: 8px 22px; }
.gag-form { display: flex; gap: 12px; }
.gag-form label { display: grid; gap: 6px; flex: 1; color: #8a847b; font-size: 13px; }
.g-alias-tip { margin: 18px 28px 12px; text-align: center; color: #3c3a36; line-height: 1.6; }
#blockAddForm { display: flex; gap: 8px; }
#blockAddForm button { border: 0; background: transparent; color: #1f6f68; font-weight: 650; }
.home-source { display: flex; gap: 28px; align-items: center; padding: 16px; font-size: 16px; }
.home-source b { font-weight: 500; color: #667085; }
.home-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.home-form input, .home-form textarea {
  width: 100%;
  border: 0;
  background: #f6f7f9;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}
.home-form textarea { min-height: 120px; resize: vertical; }
.report-page { padding-bottom: 12px; }
.report-head { font-size: 13px; font-weight: 500; color: #5c5852; }
.report-cap, .report-hint { margin: 0; padding: 8px 16px; color: #8a847b; font-size: 12px; }
.report-cap { background: #f3efe8; }
.report-block { padding: 14px 16px 16px; }
.report-block b { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.report-block textarea {
  width: 100%;
  min-height: 72px;
  border: 0;
  background: transparent;
  padding: 4px 0 0;
  resize: none;
}
.report-block small { display: block; margin-top: 8px; text-align: right; color: #8a847b; }
.report-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.report-add, .report-shot {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  position: relative;
}
.report-add {
  border: 1px dashed #cfc8bc;
  background: #faf8f5;
  color: #8a847b;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  font-size: 11px;
}
.report-add svg { width: 22px; height: 22px; }
.report-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.report-shot button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #1c1b19;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
}
.report-rule {
  display: block;
  width: 100%;
  margin: 18px 0 28px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.report-sheet-wrap {
  width: min(440px, calc(100% - 16px));
  margin: 0 auto 16px;
}
.report-sheet {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.report-sheet button {
  width: 100%;
  height: 50px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  color: var(--blue);
  font-size: 16px;
}
.report-sheet button:last-child { border-bottom: 0; }
.report-sheet-cancel {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--blue);
  font-size: 16px;
}
.report-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 16px 10px;
  padding: 0 14px;
  height: 40px;
  border-radius: 20px;
  background: #f3efe8;
  color: #8a847b;
}
.report-search input { color: #1c1b19; }
.report-banner {
  margin: 0;
  padding: 10px 12px 10px 16px;
  background: #3d6a86;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-banner button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  width: 28px;
  height: 28px;
}
.report-log { padding: 8px 0 88px; background: #f6f3ee; min-height: 40vh; }
.report-line {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
}
.report-line .msg { flex: 1; min-width: 0; margin: 0; }
.report-line .msg-col time { display: block; margin-top: 4px; color: #8a847b; font-size: 12px; }
.report-fast {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: #f6f3ee;
}
.report-fast button {
  height: 36px;
  border: 1.5px solid #1c1b19;
  border-radius: 18px;
  background: #fff;
  font-size: 13px;
}
.report-legal { padding: 16px 20px 36px; background: #fff; color: #1c1b19; }
.report-legal h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 650; }
.report-legal h3:first-child { margin-top: 8px; }
.report-legal p { margin: 0; font-size: 14px; line-height: 1.85; color: #2a2824; }
.home-pad { padding: 16px; }
.profile-sec { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.card-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.card-form { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.card-block { margin: 12px 0; }
.card-block > b { display: block; margin-bottom: 8px; }
.modal-card .menu { margin: 12px 0; }
.moment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.moment-grid img { width: 100%; height: 84px; object-fit: cover; border-radius: 10px; }
.post-image, .post-preview { display: block; max-width: 100%; max-height: 280px; margin-top: 8px; border-radius: 12px; object-fit: contain; background: #eef2f8; }
.file-btn {
  display: inline-flex;
  width: fit-content;
  margin: 8px 0;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  padding: 8px 12px;
  cursor: pointer;
}
.mark-full { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

#composer .primary { height: 42px; }

.me { padding: 28px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.me.compact { padding: 8px 0 0; }
.me h2 { margin: 6px 0 0; }
.stack-form, .me .danger, .me .primary { width: min(320px, 100%); }
.me .danger { margin-top: 12px; }
.danger {
  border: 0;
  background: #fff1f2;
  color: var(--danger);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
}
.account-line b { color: var(--ink); font-weight: 700; }

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(18, 24, 38, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  width: min(440px, 100%);
  max-height: min(82dvh, 680px);
  overflow: auto;
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(18, 24, 38, 0.2);
}
.modal-card h3 { margin: 0 0 6px; font-size: 20px; }
#addForm, .inline-form { display: flex; gap: 8px; margin: 12px 0; }
#addForm input, .inline-form input, .inline-form select { flex: 1; }
#addForm .primary, .inline-form .primary { flex: none; }
.checks { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin: 8px 0 14px; }
.check { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; }
.check:hover { background: #f5f8fc; }
.check span { min-width: 0; }
.check small { display: block; color: var(--muted); font-size: 12px; }
.member-list { margin: 8px 0 16px; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  z-index: 60;
  background: #172033;
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.25);
  animation: toast-in .28s ease both;
}
.toast.is-out { animation: toast-out .22s ease both; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(8px); }
}
body.in-chat .toast { bottom: 24px; }

#rail button[data-tab] span { white-space: nowrap; }
.pane-title-row h1 { flex: 1; min-width: 0; }
.pane-back { font-size: 28px; line-height: 1; }

.pane-head.bare { padding: 0; }
.pane-head.bare .pane-title-row,
.pane-head.bare #paneSearch { display: none; }

.me-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 6px 0;
  background: #fff;
}
.text-btn, .icon-plain {
  border: 0;
  background: transparent;
  color: #1c2430;
}
.text-btn { padding: 10px 12px; font-size: 15px; }
.icon-plain { width: 40px; height: 40px; display: grid; place-items: center; }
.icon-plain .row-ico { width: 22px; height: 22px; }
.me-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px 12px;
  background: #fff;
  text-align: center;
}
.me-center .avatar { width: 76px; height: 76px; }
.me-center .avatar b { font-size: 30px; }
.me-center > b, .me-center .me-name { display: flex; align-items: center; justify-content: center; margin-top: 12px; font-size: 18px; font-weight: 650; border: 0; background: transparent; color: inherit; }
.me-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 16px;
  background: #fff;
}
.me-card .avatar { width: 64px; height: 64px; flex: none; }
.me-card .avatar b { font-size: 26px; }
.me-meta { min-width: 0; flex: 1; display: grid; justify-items: start; gap: 4px; }
.me-name { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 18px; font-weight: 650; }
.profile-page { min-height: 100%; background: #f6f3ee; padding: 28px 16px 24px; }
.profile-face { display: grid; justify-items: center; width: 100%; border: 0; background: transparent; color: inherit; }
.profile-face-wrap { position: relative; display: inline-grid; }
.profile-face .avatar { width: 88px; height: 88px; }
.profile-face .avatar b { font-size: 32px; }
.profile-cam {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2a2723;
  color: #f7f3ee;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2.5px #f6f3ee;
  pointer-events: none;
}
.profile-cam svg { width: 13px; height: 13px; display: block; }
.profile-card { margin-top: 22px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px #efe8dc; }
.profile-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; background: #fff; color: #1c2430; font-size: 15px; }
.profile-row + .profile-row { box-shadow: inset 0 1px 0 #f0ebe3; }
.profile-row b { font-weight: 500; color: #8a847b; }
.profile-val { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.profile-val em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; color: #8a847b; font-weight: 500; }
.profile-val i { flex: none; font-style: normal; color: #c9c2b8; font-size: 18px; font-weight: 400; line-height: 1; }
.nick-edit { padding: 12px 0 24px; }
.nick-card { background: #fff; padding: 0 16px; box-shadow: 0 1px 0 #efe8dc, 0 -1px 0 #efe8dc; }
.nick-card input {
  width: 100%;
  height: 54px;
  border: 0;
  background: transparent;
  color: #1c1b19;
  font-size: 16px;
  font-weight: 500;
  outline: none;
}
.nick-tip { margin: 10px 16px 0; color: #9a948b; font-size: 12px; line-height: 1.6; }
.me-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  padding: 0;
}
.me-id i { display: grid; place-items: center; width: 14px; height: 14px; color: #9a948b; }
.me-id svg { width: 13px; height: 13px; display: block; }
.me-edit {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #8a847b;
  display: grid;
  place-items: center;
}
.me-edit svg { width: 20px; height: 20px; }
.me-auto {
  margin-top: 2px;
  border: 1px solid #e6e2da;
  border-radius: 999px;
  padding: 2px 10px;
  background: #fff;
  color: #6d675f;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}
.icon-btn.text-action {
  width: auto;
  min-width: 52px;
  padding: 0 8px;
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
}
.icon-btn.text-action.ink-action { color: #1c1b19; }
.icon-btn.text-action.is-muted { color: #b7b1a8; font-weight: 600; }
.icon-btn.text-action:hover,
.icon-btn.text-action:focus,
.icon-btn.text-action:focus-visible {
  background: transparent;
  outline: none;
  box-shadow: none;
}
.icon-row span { display: flex; align-items: center; gap: 12px; }
.row-ico { width: 20px; height: 20px; color: #3a4250; flex: none; }
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  text-align: center;
}
.qr-card img {
  width: 220px;
  height: 220px;
  background: #fff;
  border: 1px solid #eceff3;
  padding: 10px;
}
.qr-card b { margin-top: 16px; font-size: 18px; }
.qr-card span, .qr-card p { color: #8b95a8; }
.qr-card p { margin: 6px 0 16px; font-size: 13px; }
#shootLayer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  color: #fff;
  user-select: none;
  overflow: hidden;
  touch-action: none;
}
#shootLayer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  pointer-events: none;
  transform-origin: center center;
  transform: translateZ(0);
}
#shootLayer video.mirror { transform: scaleX(-1) translateZ(0); }
.shoot-top {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 22px;
}
.shoot-top button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
}
.shoot-top svg { width: 26px; height: 26px; }
.shoot-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(148px + env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.shoot-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(36px + env(safe-area-inset-bottom));
  z-index: 2;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shoot-close {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}
.shoot-close svg { width: 30px; height: 30px; }
.shoot-shutter {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px #cfcfcf;
  padding: 0;
}
.shoot-shutter.rec {
  background: #e23b32;
  box-shadow: 0 0 0 7px #fff;
}
#scanLayer { position: fixed; inset: 0; z-index: 45; overflow: hidden; touch-action: none; }
.scan-screen {
  position: absolute;
  inset: 0;
  background: #111;
  color: #fff;
  overflow: hidden;
}
.scan-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.scan-back {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.scan-frame {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: min(248px, 68vw);
  height: min(248px, 68vw);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  background:
    linear-gradient(#7dffa6, #7dffa6) left top / 28px 4px no-repeat,
    linear-gradient(#7dffa6, #7dffa6) left top / 4px 28px no-repeat,
    linear-gradient(#7dffa6, #7dffa6) right top / 28px 4px no-repeat,
    linear-gradient(#7dffa6, #7dffa6) right top / 4px 28px no-repeat,
    linear-gradient(#7dffa6, #7dffa6) left bottom / 28px 4px no-repeat,
    linear-gradient(#7dffa6, #7dffa6) left bottom / 4px 28px no-repeat,
    linear-gradient(#7dffa6, #7dffa6) right bottom / 28px 4px no-repeat,
    linear-gradient(#7dffa6, #7dffa6) right bottom / 4px 28px no-repeat;
}
.scan-tip {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(46% - min(124px, 34vw) - 18px);
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: 280px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(40, 40, 40, .72);
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}
.scan-dock {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 36px calc(24px + env(safe-area-inset-bottom));
}
.scan-side {
  width: 88px;
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}
.scan-side i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(20, 20, 20, .45);
  display: grid;
  place-items: center;
}
.scan-side svg { width: 26px; height: 26px; }
.scan-side.on { color: #f0d7a2; }
.scan-mine {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -52%);
  width: min(300px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 18px;
  background: #fff;
  color: #172033;
  text-align: center;
}
.scan-mine img {
  width: 200px;
  height: 200px;
  background: #fff;
}
.scan-mine b { margin-top: 14px; font-size: 18px; }
.scan-mine span, .scan-mine p { color: #8b95a8; }
.scan-mine p { margin: 6px 0 0; font-size: 13px; }
.menu.flat { margin: 0; border: 0; border-radius: 0; }
.book-entries { background: #fff; }
.book-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid #f2f3f5;
  background: #fff;
  text-align: left;
  font-size: 16px;
}
.book-row em { margin-left: auto; color: #c8cdd6; font-style: normal; font-size: 18px; }
.book-row .count-pill + em { margin-left: 8px; }
.count-pill {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e85a4f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.book-gap { height: 8px; background: #f5f6f8; }
.book-tabs { display: flex; background: #fff; border-bottom: 1px solid #f2f3f5; }
.book-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 13px 0 11px;
  color: #98a2b3;
  font-size: 15px;
}
.book-tabs button.on {
  color: #172033;
  font-weight: 650;
  box-shadow: inset 0 -2px 0 #172033;
}
.fold {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border: 0;
  background: #fff;
  text-align: left;
  font-size: 15px;
}
.fold i { width: 14px; color: #98a2b3; font-style: normal; font-size: 10px; }
.fold em { margin-left: auto; color: #98a2b3; font-style: normal; font-size: 13px; }
.plain-empty { padding: 42px 24px; text-align: center; color: #98a2b3; font-size: 14px; }
.plain-empty.thin { padding: 8px 18px 14px 40px; text-align: left; }
.book-person .person-text span { color: #98a2b3; }
.notice-line span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; text-align: left; }
.notice-line small { color: #98a2b3; font-size: 12px; }
.me-hero > div:first-of-type { margin-top: 14px; }
.me-hero b { display: block; font-size: 22px; }
.me-hero span { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.82); font-size: 13px; }
.me-hero .avatar { box-shadow: 0 8px 18px rgba(16, 36, 84, 0.25); }
.me-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.me-stats span { color: rgba(255, 255, 255, 0.78); font-size: 12px; }
.me-stats strong { display: block; margin-bottom: 2px; color: #fff; font-size: 18px; }

.menu.premium { background: #fff; }
.rich-row, .hub-card, .notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
}
.rich-row { padding: 14px 14px; border-bottom: 1px solid var(--line); }
.rich-row:last-child, .menu.premium .switch-row:last-child { border-bottom: 0; }
.rich-row span, .hub-card span, .notice span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rich-row b, .hub-card b, .notice b { font-size: 15px; font-weight: 700; }
.rich-row small, .hub-card small, .notice small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.rich-row em, .hub-card .chev { color: #c5cdd8; font-style: normal; font-size: 22px; }
.menu.premium .switch-row { padding-left: 16px; }

.tone {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}
.tone svg { width: 20px; height: 20px; }
.tone.gold { background: linear-gradient(160deg, #f6c453, #e39b16); }
.tone.teal { background: linear-gradient(160deg, #3ec6b8, #149b9a); }
.tone.blue { background: linear-gradient(160deg, #5b92ff, #2f6fed); }
.tone.amber { background: linear-gradient(160deg, #ffb15a, #f08a24); }
.tone.violet { background: linear-gradient(160deg, #b08cff, #7a5af8); }

.hub-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 16px 4px; }
.hub-card {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e7edf6;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.05);
}
.hub-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f08a24;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.sec-label { margin: 16px 20px 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.page-lead { margin: 4px 16px 14px; }
.page-lead b { display: block; font-size: 16px; }
.page-lead p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.stage-empty { margin: 28px 20px; text-align: center; }
.stage-empty .tone { margin: 0 auto 12px; width: 52px; height: 52px; border-radius: 18px; }
.stage-empty b { display: block; font-size: 16px; }
.stage-empty p { margin: 6px auto 0; max-width: 240px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.notice {
  margin: 0 16px 10px;
  padding: 14px;
  width: calc(100% - 32px);
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e7edf6;
}
.notice time, .card-item time { color: var(--muted); font-size: 12px; }
.notice p { margin: 8px 0; white-space: pre-wrap; line-height: 1.6; }
.feedback-reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #f4f7fb; }
.feedback-reply b { display: block; margin-bottom: 4px; color: var(--blue); font-size: 13px; }
.feedback-reply p { margin: 0 0 6px; white-space: pre-wrap; }
.card-item {
  margin: 0 16px 12px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e7edf6;
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.04);
}
.fav.card-item { display: flex; gap: 10px; align-items: center; }
.fav .kind {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #efeae2;
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}
.compose-card {
  margin: 0 16px 16px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e7edf6;
}
.feedback-item p { margin: 0 0 8px; line-height: 1.6; white-space: pre-wrap; }
.menu {
  margin: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
}
.menu .row, .switch-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-size: 15px;
}
.menu .row:last-child, .switch-row:last-child { border-bottom: 0; }
.menu .row > em { color: var(--muted); font-style: normal; font-size: 18px; }
.danger-row { color: var(--danger); font-weight: 700; }
.menu .row.center, .danger-row.center { justify-content: center; }
.menu-cap { margin: 18px 20px 0; color: var(--muted); font-size: 13px; }
.switch-row.sub { padding-left: 28px; }
.radio { width: 22px; height: 22px; border: 1.5px solid #cfc6b8; border-radius: 50%; flex: none; }
.radio.on { border-color: #24262b; background: radial-gradient(circle, #24262b 0 5px, transparent 6px); }
.block-list .person { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; }
.row.static { cursor: default; }
.row-side { display: inline-flex; align-items: center; gap: 16px; min-width: 0; font-weight: 500; color: var(--muted); }
.row-side .row-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 13px; font-weight: 400; }
.row-side i { flex: none; font-style: normal; color: #c9c2b8; font-size: 18px; font-weight: 400; line-height: 1; }
.page-form { width: auto; margin: 16px; }
.cancel-note { margin: 8px 20px 0; line-height: 1.7; }
.cancel-note > p { margin: 6px 0 18px; }
.cancel-note h3 { margin: 0 0 16px; font-size: 17px; text-align: center; font-weight: 650; }
.cancel-note ol { margin: 0; padding-left: 1.25em; display: grid; gap: 12px; }
.cancel-note li { margin: 0; }
.cancel-note li.key { color: #c4493a; font-weight: 650; }
.page-form .primary.wide { width: 100%; border-radius: 24px; }
.hint.tight { margin: 0 0 4px; }
.device-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.device-card:last-child { border-bottom: 0; }
.device-copy { min-width: 0; display: grid; gap: 4px; }
.device-copy b { font-weight: 650; }
.device-copy em { margin-left: 8px; font-style: normal; color: var(--blue); font-size: 12px; font-weight: 600; }
.device-copy small, .device-kick small { color: var(--muted); font-size: 13px; }
.os-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.os-logo svg { width: 28px; height: 28px; }
.os-logo.android { background: #3ddc84; }
.os-logo.iphone { background: #4c8dff; }
.os-logo.other { background: #ece7df; color: #24262b; }
.device-del { margin-left: auto; border: 0; background: #f4e4dc; color: #8d4b32; border-radius: 999px; padding: 6px 14px; }
.device-kick { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }
.device-kick b { display: block; color: #c4493a; font-weight: 650; }
.device-trash { width: 36px; height: 36px; color: #c4493a; flex: none; }
.device-trash svg { width: 28px; height: 28px; }
.helper-chat { display: grid; gap: 16px; padding: 14px 12px 28px; background: #f6f3ee; }
.helper-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: start; }
.helper-msg .avatar.bot { width: 40px; height: 40px; }
.helper-main { display: grid; justify-items: start; min-width: 0; }
.helper-main time { margin-top: 4px; color: #8a847b; font-size: 12px; justify-self: end; }
.helper-card { width: 100%; background: #fff; border-radius: 12px; padding: 14px 14px 8px; line-height: 1.65; box-shadow: 0 1px 2px rgba(28, 27, 25, .04); }
.helper-card h3 { margin: 0 0 8px; font-size: 16px; }
.helper-card p { margin: 0 0 8px; }
.helper-card .foot { margin-top: 8px; color: #8a847b; }
.helper-card.faq h3::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: #1f6f68; color: #fff; font-size: 12px; }
.helper-card.faq button { display: block; width: 100%; border: 0; border-top: 1px solid #f1f1f1; background: transparent; color: #1f6f68; text-align: left; padding: 12px 2px; font-size: 15px; }
.kick-mask { position: fixed; inset: 0; z-index: 80; background: rgba(28, 27, 25, .35); display: flex; align-items: flex-end; }
.kick-sheet { width: min(520px, 100%); margin: 0 auto; background: #fff; border-radius: 16px 16px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); }
.kick-sheet h3 { margin: 0 0 12px; font-size: 18px; }
.kick-sheet p { margin: 0 0 18px; line-height: 1.7; color: #3c3a36; }
.kick-sheet button { width: 100%; height: 46px; border: 0; border-radius: 23px; background: #1f6f68; color: #fff; font: inherit; font-size: 16px; }
.avatar.bot.robot {
  background: linear-gradient(155deg, #ffffff 0%, #e7eef5 42%, #c5d0dc 100%);
  box-shadow: 0 5px 10px rgba(27, 36, 48, .22), inset 0 1px 0 #fff, inset 0 -5px 8px rgba(27, 36, 48, .14);
  border-radius: 16px;
}
.avatar.bot.robot svg { width: 100%; height: 100%; }
.choice-layer { position: fixed; inset: 0; z-index: 40; background: rgba(28, 27, 25, .35); display: grid; align-items: end; }
.choice-card { margin: 12px; background: var(--card); border-radius: 18px; padding: 18px 16px 12px; display: grid; gap: 10px; }
.choice-card p { margin: 0 0 6px; line-height: 1.6; text-align: center; }
.choice-card button { border: 0; background: transparent; padding: 12px; font-size: 16px; }
.choice-card button[data-go="yes"] { color: var(--blue); font-weight: 650; }
.choice-card button[data-go="no"] { color: var(--muted); }
.device-row b { font-weight: 650; }
.device-row em { margin-left: 8px; font-style: normal; color: var(--blue); font-size: 12px; font-weight: 600; }
.device-row span { color: var(--muted); font-size: 13px; }
.field select { font: inherit; color: inherit; }
.switch-row span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.switch-row small { color: var(--muted); font-size: 12px; }
.switch {
  width: 42px;
  height: 26px;
  border-radius: 999px;
  background: #d5dbe6;
  position: relative;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(16px); }
.hint { margin: 0 20px 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.subpage { padding: 8px 16px 20px; }
.field-label { margin: 8px 0; color: var(--muted); font-size: 13px; }
.chips { display: flex; gap: 8px; }
.chip {
  border: 0;
  background: var(--bg);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
}
.chip.on { background: var(--blue); color: #fff; }
.about { padding: 16px 16px 24px; text-align: center; }
.about-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 18px 18px;
}
.about img { margin: 0 auto; }
.about h2 { margin: 12px 0 4px; font-weight: 500; }
.about p { margin: 6px auto; max-width: 320px; line-height: 1.7; }
.about-docs { margin: 12px 0 0; text-align: left; }
.acct-list { display: grid; gap: 12px; padding: 14px 16px 24px; }
.acct-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}
.acct-card.add { justify-content: center; }
.acct-card.add b { font-weight: 500; font-size: 16px; }
.acct-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acct-text b { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.acct-card em, .acct-drop { margin-left: auto; font-style: normal; font-size: 13px; }
.acct-card em { color: #1f6f68; }
.acct-drop { color: #e23d3d; }
.switch-ask {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(28, 27, 25, .35);
  display: grid;
  place-items: center;
  padding: 24px;
}
.switch-ask-card {
  width: min(300px, 100%);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
}
.switch-ask-card b { display: block; padding: 18px 16px 0; font-size: 17px; font-weight: 650; }
.switch-ask-card p { margin: 10px 16px 16px; color: #3a4250; }
.switch-ask-card div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.switch-ask-card button { border: 0; background: #fff; padding: 12px; font-size: 16px; }
.switch-ask-card button + button { border-left: 1px solid var(--line); color: #1f6f68; font-weight: 650; }
.switch-wait {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(255, 255, 255, .78);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
}
.switch-wait i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #e6e1d8;
  border-top-color: #1f6f68;
  animation: switch-spin .8s linear infinite;
}
.switch-wait p { margin: 0; color: #3a4250; }
@keyframes switch-spin { to { transform: rotate(360deg); } }
.auth-agree { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-agree button { border: 0; background: transparent; color: var(--ink); padding: 0 1px; text-decoration: underline; text-underline-offset: 2px; }
#legal { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); }
.legal-bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 48px; background: var(--card); border-bottom: 1px solid var(--line); }
.legal-bar button { position: absolute; left: 8px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; font-size: 28px; line-height: 1; }
.legal-bar h1 { margin: 0; font-size: 17px; font-weight: 500; color: #8a847b; }
#deleteForm { margin-top: 28px; }
#deleteForm .danger { width: 100%; }
body[data-avatar="square"] .avatar { border-radius: 14px; }
.shape-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shape-card { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shape-card.on { border-color: #24262b; }
.shape-card b { font-size: 13px; font-weight: 500; }
.shape-preview { width: 72px; height: 54px; border-radius: 8px; background:
  radial-gradient(circle at 16px 16px, #d9d3c8 7px, transparent 8px),
  linear-gradient(#d9d3c8, #d9d3c8) 30px 12px / 32px 6px no-repeat,
  linear-gradient(#ebe4d8, #ebe4d8) 30px 24px / 28px 6px no-repeat,
  linear-gradient(#ebe4d8, #ebe4d8) 30px 36px / 24px 6px no-repeat,
  #fff; }
.shape-preview.round { box-shadow: inset 0 0 0 0; }
.shape-preview.square { background:
  linear-gradient(#d9d3c8, #d9d3c8) 8px 10px / 14px 14px no-repeat,
  linear-gradient(#d9d3c8, #d9d3c8) 28px 12px / 32px 6px no-repeat,
  linear-gradient(#ebe4d8, #ebe4d8) 28px 24px / 28px 6px no-repeat,
  linear-gradient(#ebe4d8, #ebe4d8) 28px 36px / 24px 6px no-repeat,
  #fff; }
.pin-page { display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
.pin-lead { margin: 0 0 18px; font-size: 16px; }
.pin-dots { display: flex; gap: 14px; margin-bottom: 28px; }
.lock-miss { margin: 4px 0 8px; padding: 6px 14px; border-radius: 999px; background: #172033; color: #fff; font-size: 13px; line-height: 20px; }
.lock-miss[hidden] { display: none; }
.pin-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d9d3c8; }
.pin-dots i.on { background: #24262b; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; }
.pin-key { width: 72px; height: 72px; border: 0; border-radius: 50%; background: #fff; font-size: 22px; color: var(--ink); }
.pin-key.text { font-size: 14px; background: transparent; }
.pin-page .primary, .pin-page .danger { width: min(280px, 100%); margin-top: 12px; }
#appLock { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; }
.lock-screen { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; }
.lock-mark {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #fff;
  color: #1c1b19;
}
.lock-mark svg { width: 30px; height: 30px; }
.lock-screen p { margin: 8px 0 12px; }
.lock-reset { width: min(360px, 100%); margin: 28px auto; padding: 0 20px; }
.lock-reset h2 { font-size: 20px; font-weight: 500; margin: 8px 0 12px; }
#legalBody { flex: 1; overflow: auto; }
.legal { padding: 16px 20px 72px; }
.legal h3 { margin: 20px 0 8px; font-size: 15px; }
.legal p { margin: 0 0 8px; font-size: 14px; line-height: 1.75; }
.legal .dated { color: var(--muted); font-size: 12px; }
.post, .fav {
  margin: 0 16px 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.fav { display: flex; gap: 10px; align-items: center; }
.fav-main {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
}
.fav-main b, .fav-main span { display: block; }
.fav-main span {
  color: var(--muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-top { display: flex; gap: 10px; align-items: center; }
.post-body { margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.post-actions { display: flex; gap: 8px; margin-top: 10px; }
.fav-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 4px;
  opacity: 1;
}
.msg:hover .fav-btn, .fav-btn:focus-visible { opacity: 1; }
.field textarea { resize: vertical; min-height: 88px; }

body[data-font="small"] .bubble,
body[data-font="small"] .post-body { font-size: 14px; }
body[data-font="large"] .bubble,
body[data-font="large"] .post-body,
body[data-font="large"] .row-name { font-size: 18px; }

body[data-theme="dark"] {
  --ink: #e8edf6;
  --muted: #8b97ad;
  --line: #2a3446;
  --bg: #151c28;
  --card: #1c2433;
  --bubble: #2a2e36;
  --bubble-mine: #1a4f46;
  --bubble-mine-ink: #e7f6f2;
  color-scheme: dark;
  background: #0d131c;
}
body[data-theme="dark"] #app,
body[data-theme="dark"] #listPane,
body[data-theme="dark"] #chatHeader,
body[data-theme="dark"] #composer,
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .plus-menu,
body[data-theme="dark"] .more,
body[data-theme="dark"] .sys {
  background: var(--card);
  color: var(--ink);
}
body[data-theme="dark"] .primary { background: #d7efe8; color: #14221f; }
body[data-theme="dark"] #chatPane {
  background-color: var(--chat-wall, #151c28);
  background-image: var(--chat-wall-image, none);
  background-size: cover;
  background-position: center;
}
body[data-theme="dark"] #rail,
body[data-theme="dark"] #paneSearch,
body[data-theme="dark"] #box,
body[data-theme="dark"] .field input,
body[data-theme="dark"] .field textarea,
body[data-theme="dark"] #auth {
  background: #101722;
}
body[data-theme="dark"] #rail button[data-tab].active { background: transparent; }
body[data-theme="dark"] .conv:hover,
body[data-theme="dark"] .check:hover,
body[data-theme="dark"] .plus-menu button:hover { background: #1c2636; }
body[data-theme="dark"] .conv.active { background: #24344d; }
body[data-theme="dark"] .icon-btn,
body[data-theme="dark"] .mini.ghost,
body[data-theme="dark"] .tag,
body[data-theme="dark"] .chip,
body[data-theme="dark"] .demo button {
  background: #243044;
  color: var(--ink);
}
body[data-theme="dark"] .chip.on { background: var(--blue); color: #fff; }
body[data-theme="dark"] .field input,
body[data-theme="dark"] .field textarea,
body[data-theme="dark"] .inline-form input,
body[data-theme="dark"] .inline-form select,
body[data-theme="dark"] #addForm input,
body[data-theme="dark"] #groupForm input {
  background: #101722;
  border-color: var(--line);
  color: var(--ink);
}
body[data-theme="dark"] .me-tools,
body[data-theme="dark"] .me-center,
body[data-theme="dark"] .me-card,
body[data-theme="dark"] .text-btn,
body[data-theme="dark"] .icon-plain { background: var(--card); color: var(--ink); }
body[data-theme="dark"] .row-ico { color: #d5deee; }
body[data-theme="dark"] .qr-card img { background: #fff; }
body[data-theme="dark"] .book-row,
body[data-theme="dark"] .book-tabs,
body[data-theme="dark"] .fold,
body[data-theme="dark"] .menu.flat { background: var(--card); color: var(--ink); }
body[data-theme="dark"] .book-gap { background: #0e141e; }
body[data-theme="dark"] .book-tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 #d5deee; }
body[data-theme="dark"] .hub-card,
body[data-theme="dark"] .notice,
body[data-theme="dark"] .card-item,
body[data-theme="dark"] .compose-card,
body[data-theme="dark"] .menu.premium { background: #1b2433; border-color: #2c3548; }
body[data-theme="dark"] .fav .kind { background: #24344d; }
body[data-theme="dark"] #markBar,
body[data-theme="dark"] .imp-item,
body[data-theme="dark"] .imp-main { background: #1b2433; color: var(--ink); }
body[data-theme="dark"] .imp-item span,
body[data-theme="dark"] .chat-more { color: var(--ink); }
body[data-theme="dark"] .imp-flag,
body[data-theme="dark"] .imp-main b { color: #7fd0c4; }
body[data-theme="dark"] .imp-preview { color: #c5d0e0; }
body[data-theme="dark"] .msg-slide {
  background-color: var(--chat-wall, #151c28);
  background-image: var(--chat-wall-image, none);
}
body[data-theme="dark"] #dock {
  background: var(--chat-wall, #151c28);
}
body[data-theme="dark"] #replyBar,
body[data-theme="dark"] #selectBar,
body[data-theme="dark"] .sheet,
body[data-theme="dark"] .file-btn { background: #101722; color: var(--ink); }
body[data-theme="dark"] .file-btn { color: #8eb0ff; }
body[data-theme="dark"] .sheet button { background: #243044; color: var(--ink); }
body[data-theme="dark"] .sheet .muted-btn { background: transparent; }
body[data-theme="dark"] .home-sheet,
body[data-theme="dark"] .home-bar,
body[data-theme="dark"] .profile-hero,
body[data-theme="dark"] .profile-head { background: #101722; }
body[data-theme="dark"] .home-card,
body[data-theme="dark"] .home-row,
body[data-theme="dark"] .home-action { background: #1b2433; color: var(--ink); }
body[data-theme="dark"] .home-back,
body[data-theme="dark"] .home-more,
body[data-theme="dark"] .home-bar strong { color: var(--ink); }
body[data-theme="dark"] .home-form input,
body[data-theme="dark"] .home-form textarea { background: #101722; color: var(--ink); }

#paneBody.fill-gray { background: #efeae2; }
#paneBody:has(.fav-list), #paneBody:has(.fb-form) { background: #f3efe8; }
.disc { padding: 12px 12px 28px; }
.disc-group {
  background: #fffdf9;
  border-radius: 18px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(36, 32, 24, .04);
}
.disc-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid #f2f2f2;
  background: transparent;
  text-align: left;
  font-size: 16px;
  transition: background .16s ease;
}
.disc-row:hover { background: #faf7f2; }
.disc-group .disc-row:last-child { border-bottom: 0; }
.disc-row .row-ico { width: 24px; height: 24px; color: #3a4250; }
.disc-mark { width: 28px; height: 28px; display: grid; place-items: center; flex: none; }
.disc-mark svg { width: 28px; height: 28px; display: block; }
.disc-mark.pretty {
  border-radius: 7px;
  background: #e10612;
  color: #fff;
}
.disc-mark.pretty b { font-size: 15px; font-weight: 700; line-height: 1; }
.disc-row span { flex: 1; }
.disc-row .disc-mark { flex: none; width: 28px; height: 28px; }
.disc-row em { color: #c5cad3; font-style: normal; font-size: 18px; }
.disc-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; background: #eee; }
.moments { background: #fff; min-height: 100%; }
.moment-banner { position: relative; margin-bottom: 18px; }
.moment-cover {
  position: relative;
  height: 188px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28)),
    radial-gradient(80% 70% at 78% 12%, #6a7560 0%, transparent 58%),
    radial-gradient(70% 60% at 10% 100%, #2c3329 0%, transparent 52%),
    #465043;
}
.moment-cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.moment-me {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -28px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}
.moment-me-copy { min-width: 0; flex: 1; padding-bottom: 2px; }
.moment-me-name {
  display: block;
  margin: 0 0 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.moment-me-id {
  display: block;
  color: #1c1b19;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}
.moment-me .avatar,
.moment-me-face {
  width: 74px;
  height: 74px;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  flex: none;
}
.moment-me-face .avatar {
  width: 74px;
  height: 74px;
  border: 3px solid #fff;
  border-radius: 50%;
}
.moment-me .avatar b { font-size: 28px; }
.moment-pid { color: #1c1b19; font-size: 13px; font-weight: 650; margin-top: 2px; }
.moment-list { padding: 20px 0 20px; }
.moment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #f3f3f3;
}
.moment .avatar { width: 44px; height: 44px; border-radius: 50%; }
.moment .avatar b { font-size: 16px; }
.moment-main { flex: 1; min-width: 0; }
.moment-name {
  border: 0;
  padding: 0;
  background: none;
  color: #172033;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}
.moment-text {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.moment-photo {
  display: block;
  margin-top: 8px;
  width: min(180px, 100%);
  max-height: 220px;
  object-fit: cover;
  border-radius: 2px;
  background: #f2f2f2;
}
.moment-grid { display: grid; grid-template-columns: repeat(3, 92px); gap: 4px; margin-top: 8px; }
.moment-grid img { width: 92px; height: 92px; object-fit: cover; border-radius: 2px; background: #f2f2f2; }
.moment-scope, .moment-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.moment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  color: #b2b2b2;
  font-size: 12px;
}
.moment-ops { position: relative; display: flex; align-items: center; }
.moment-dots {
  width: 34px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: #f2f2f2;
  color: #5c6370;
  display: grid;
  place-items: center;
  overflow: visible;
}
.moment-dots svg { width: 20px; height: 20px; }
.moment-pop {
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  background: #4a4a4a;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}
.moment-pop button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 8px 14px;
  font-size: 14px;
  white-space: nowrap;
}
.moment-pop button + button { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }
.moment-pop svg { width: 16px; height: 16px; }
.moment-react {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 4px;
  background: #f7f7f7;
}
.moment-likes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #3b6cb5; }
.moment-likes svg { width: 16px; height: 16px; color: #8ea0b8; flex: none; }
.moment-likes span { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.like-face { border: 0; padding: 0; background: none; line-height: 0; }
.moment-likes .like-face .avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
}
.moment-likes .like-face .avatar b { font-size: 9px; }
.moment-comments button {
  border: 0;
  padding: 0;
  background: none;
  color: #3b6cb5;
  font-weight: 650;
  font-size: 14px;
}
.moment-likes i { font-style: normal; color: #3b6cb5; }
.moment-likes + .moment-comments { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ececec; }
.moment-comments { margin: 0; padding: 0; background: transparent; }
.moment-comments p { margin: 3px 0; font-size: 14px; line-height: 1.45; color: #1c1b19; }
.moment-faces { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.moment-faces button { border: 0; background: #f4f4f4; border-radius: 8px; width: 32px; height: 32px; font-size: 18px; }
.moment-reply { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.moment-reply input {
  flex: 1;
  height: 36px;
  border: 0;
  background: #f3f3f3;
  border-radius: 6px;
  padding: 0 10px;
}
.moment-smile { border: 0; background: none; color: #8b93a1; font-size: 22px; line-height: 1; padding: 0 2px; }
.moment-send {
  border: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  background: #2f6bdb;
  color: #fff;
  font-weight: 650;
}
.moment-dock {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 8px 12px 12px;
  background: #fff;
  box-shadow: 0 -1px 0 #f0f0f0;
}
.moment-dock .moment-reply { margin-top: 0; }
.detail-page { min-height: 100%; display: flex; flex-direction: column; background: #fff; }
.album-banner { margin-bottom: 28px; }
.album-me {
  position: absolute;
  right: 14px;
  bottom: -22px;
  left: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
}
.album-me strong {
  color: #fff;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  margin-bottom: 28px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-me .avatar { width: 68px; height: 68px; border: 3px solid #fff; border-radius: 8px; flex: none; }
.album { padding-bottom: 24px; }
.album-row { display: flex; gap: 12px; align-items: flex-start; padding: 0 16px 16px; }
.album-day { width: 64px; flex: none; display: flex; align-items: baseline; gap: 2px; color: #1c1b19; padding-top: 6px; }
.album-day b { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.album-day small { font-size: 12px; font-weight: 650; }
.album-stack { flex: 1; min-width: 0; display: grid; gap: 8px; }
.album-cam, .album-card {
  border: 0;
  background: #f3f3f3;
  border-radius: 6px;
  min-height: 72px;
}
.album-cam { width: 72px; height: 72px; color: #b0b0b0; display: grid; place-items: center; }
.album-cam svg { width: 28px; height: 28px; }
.album-card { display: flex; align-items: center; gap: 8px; padding: 8px; text-align: left; }
.album-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex: none; background: #e8e8e8; }
.album-card p { margin: 0; flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; color: #1c1b19; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.album-del { border: 0; background: none; color: #c4554a; font-size: 12px; flex: none; }
.text-link {
  border: 0;
  padding: 0;
  background: none;
  color: #2b6cb0;
  font: inherit;
  word-break: break-all;
}
.bubble .text-link { color: inherit; text-decoration: underline; }
#paneBody.fill-draw { background: #f4f7fb; }
.draw {
  min-height: 100%;
  padding: 6px 16px 28px;
  background: #f4f7fb;
}
.draw-card {
  background: #fff;
  border: 1px solid #e6eef8;
  border-radius: 14px;
  padding: 16px 14px 18px;
  text-align: center;
}
.draw-times {
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  text-align: center;
  color: #667085;
  font-size: 14px;
}
.draw-times b { color: var(--blue); font-size: 22px; }
.draw-window {
  position: relative;
  padding: 12px 8px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid #e6eef8;
}
.draw-cols {
  display: flex;
  justify-content: center;
  gap: 6px;
  height: 250px;
}
.draw-vcol { width: 38px; height: 250px; overflow: hidden; }
.draw-vcol.run { filter: brightness(1.05); }
.draw-vstrip b {
  height: 50px;
  display: grid;
  place-items: center;
  color: #172033;
  font-size: 20px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.draw-vstrip b span {
  width: 38px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d7e3f4;
  color: #1d4e89;
}
.draw-vstrip b.on span { color: #fff; background: var(--blue); border-color: var(--blue); }
.draw-vcol.run .draw-vstrip b span { border-color: #b7c8f8; }
.draw-frame {
  display: none;
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 50px;
  border: 2px solid #3d78ef;
  border-radius: 10px;
  pointer-events: none;
}
.draw-frame.pick-0 { top: 12px; }
.draw-frame.pick-1 { top: 62px; }
.draw-frame.pick-2 { top: 112px; }
.draw-frame.pick-3 { top: 162px; }
.draw-frame.pick-4 { top: 212px; }
.draw-frame.show { display: block; }
.draw-hits {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 12px;
  height: 250px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.draw-hit { flex: 1; border: 0; background: transparent; padding: 0; }
.draw-ask {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 24, 40, 0.45);
}
.draw-ask-card {
  width: min(300px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 22px 16px 16px;
  text-align: center;
}
.draw-ask-card p { margin: 0 0 18px; color: #172033; font-size: 16px; }
.draw-ask-actions { display: flex; gap: 10px; }
.draw-ask-actions button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 11px 8px;
  font-size: 15px;
  font-weight: 700;
}
.draw-ask-actions button[data-act="hold-pretty"] {
  background: var(--blue);
  color: #fff;
}
.draw-ask-actions button[data-act="draw-later"] { background: #f2f4f7; color: #667085; }
.draw-row { display: flex; justify-content: center; align-items: center; gap: 6px; height: 50px; margin: 0; }
.draw-row.on { border: 0; }
.draw-row.run .draw-slot { border-color: #b7c8f8; }
.draw-slot.spinning { display: block; }
.draw-col b {
  width: 38px;
  height: 42px;
  display: grid;
  place-items: center;
}
.draw-slot {
  width: 38px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eef1f6;
  color: #172033;
  overflow: hidden;
}
.draw-row.on .draw-slot { color: #2f6fed; border-color: transparent; }
.draw-slot b { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.draw-pill {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.draw-pill:disabled { opacity: 0.45; }
.draw-pill.is-wait,
.draw-pill.is-wait:disabled {
  opacity: 1;
  background: #d9d3c8;
  color: #8a847b;
}
.draw-meter { margin: 18px 4px 4px; }
.draw-meter-track {
  height: 8px;
  border-radius: 999px;
  background: #e7e1d6;
  overflow: hidden;
}
.draw-meter-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #24262b;
}
.draw-meter span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.draw-hint { margin: 0; color: #98a2b3; font-size: 12px; line-height: 1.5; }
.draw-keep {
  display: block;
  margin: 12px auto 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 650;
}
.gift { position: relative; min-height: 100%; background: #f5f7fb; }
.gift-poster {
  position: relative;
  min-height: 248px;
  padding: 22px 112px 52px 16px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 80%, rgba(255, 236, 170, 0.16), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(255, 214, 110, 0.42), transparent 22%),
    linear-gradient(155deg, #3f4d6a 0%, #243044 48%, #171d28 100%);
}
.gift-copy { position: relative; z-index: 1; }
.gift-copy em {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: linear-gradient(#ffe56a, #f5c518);
  color: #1d4e9b;
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
}
.gift-copy h2 {
  margin: 12px 0 8px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.03em;
}
.gift-copy p { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.88); }
.gift-star {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ffe56a;
  clip-path: polygon(50% 0, 61% 35%, 100% 38%, 68% 59%, 79% 100%, 50% 75%, 21% 100%, 32% 59%, 0 38%, 39% 35%);
}
.gift-star.a { top: 18px; right: 28px; width: 18px; height: 18px; }
.gift-star.b { top: 78px; right: 132px; width: 10px; height: 10px; }
.gift-star.c { bottom: 54px; left: 18px; width: 12px; height: 12px; }
.gift-tickets {
  position: absolute;
  right: 6px;
  bottom: 42px;
  width: 104px;
}
.gift-tickets i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 40px;
  font-size: 13px;
  margin-left: 8px;
  border-radius: 8px 14px 8px 8px;
  background: linear-gradient(#2a2a2a, #111);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 16px rgba(12, 40, 110, 0.28);
}
.gift-tickets i:first-child { transform: rotate(16deg); margin-bottom: -8px; }
.gift-tickets i:last-child { transform: rotate(8deg); background: linear-gradient(#3a3a3a, #151515); }
.gift-sheet { margin-top: -22px; padding: 0 12px 92px; position: relative; }
.gift-block {
  margin-bottom: 12px;
  padding: 16px 12px 14px;
  border-radius: 16px;
  background: #fff;
}
.gift-block h3 { margin: 0 0 14px; text-align: center; color: #8a6a1a; font-size: 16px; }
.gift-steps { display: flex; align-items: flex-start; }
.gift-step { flex: 1; min-width: 0; text-align: center; }
.gift-step > i {
  width: 46px;
  height: 46px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c9a227;
  color: #fff;
}
.gift-step .row-ico { width: 22px; height: 22px; color: #fff; }
.gift-step b { display: block; font-size: 13px; }
.gift-step span { display: block; margin-top: 4px; color: #8b95a8; font-size: 11px; line-height: 1.4; }
.gift-steps s {
  width: 18px;
  height: 2px;
  margin-top: 22px;
  flex: none;
  background: #ead9a4;
  text-decoration: none;
}
.gift-stats { display: flex; gap: 10px; }
.gift-stats div {
  flex: 1;
  padding: 16px 8px;
  border-radius: 12px;
  background: #f4f7fb;
  text-align: center;
}
.gift-stats span { color: #667085; font-size: 13px; }
.gift-stats b { display: block; margin-top: 6px; color: #b8860b; font-size: 28px; font-variant-numeric: tabular-nums; }
.gift-records {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: 0;
  background: none;
  color: #667085;
  font-size: 14px;
}
.gift-go {
  position: sticky;
  bottom: 12px;
  display: block;
  width: calc(100% - 24px);
  margin: -76px 12px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(#d4b24a, #b8860b);
  color: #1c1914;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
}
.gift-list .book-row em { color: #98a2b3; font-size: 12px; font-style: normal; }
.gift-list .book-row small { display: block; margin-top: 4px; color: #8b95a8; font-size: 12px; }
.moment-empty,
.moment-more {
  display: block;
  width: 100%;
  padding: 22px 16px 8px;
  border: 0;
  background: none;
  color: #8b95a8;
  text-align: center;
  font-size: 14px;
}
#paneBody.fill-compose { background: #f3f1ec; }
.moment-compose { padding: 8px 16px 28px; }
.moment-compose textarea {
  width: 100%;
  border: 0;
  resize: none;
  min-height: 96px;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.moment-compose textarea::placeholder { color: #b7b1a8; }
.moment-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 28px; }
.moment-add, .moment-shot {
  width: 96px;
  height: 96px;
  border-radius: 4px;
}
.moment-add {
  border: 0;
  background: #e4dfd6;
  color: #6f6a63;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}
.moment-shot { position: relative; display: block; }
.moment-shot img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; display: block; }
.moment-shot button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 27, 25, 0.55);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.who-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: #1c1b19;
  font-size: 16px;
  text-align: left;
}
.who-row svg { width: 22px; height: 22px; flex: none; }
.who-row b { font-weight: 650; }
.who-row em { margin-left: auto; color: #8a847b; font-style: normal; font-size: 15px; }
.who-row i { color: #b7b1a8; font-style: normal; }
.post-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 10px 16px;
  background: rgba(28, 27, 25, 0.45);
}
.post-sheet { width: min(520px, 100%); display: grid; gap: 8px; }
.post-sheet-card { background: #fff; border-radius: 14px; overflow: hidden; }
.post-sheet button {
  width: 100%;
  height: 54px;
  border: 0;
  background: #fff;
  color: #1c1b19;
  font-size: 16px;
}
.post-sheet-card button + button { border-top: 1px solid #efeae2; }
.post-sheet .cancel { border-radius: 14px; color: #1f6f68; }
.scope-page { background: #fffdf9; min-height: 100%; }
.scope-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 72px;
  padding: 12px 8px 12px 4px;
  border: 0;
  border-bottom: 1px solid #f0ebe3;
  background: transparent;
  text-align: left;
  color: #1c1b19;
}
.scope-check { width: 28px; flex: none; color: transparent; font-style: normal; font-size: 18px; }
.scope-opt.on .scope-check { color: #1f6f68; }
.scope-opt.deny.on .scope-check { color: #e10612; }
.scope-opt span { display: grid; gap: 4px; min-width: 0; flex: 1; }
.scope-opt b { font-size: 16px; font-weight: 700; }
.scope-opt small { color: #8a847b; font-size: 13px; }
.scope-opt small:empty { display: none; }
.scope-chev { color: #b7b1a8; font-style: normal; font-size: 16px; }
.scope-sub { padding: 4px 16px 12px 40px; border-bottom: 1px solid #f0ebe3; }
.scope-sub button {
  display: block;
  margin-top: 12px;
  border: 0;
  padding: 0;
  background: none;
  color: #1f6f68;
  font-size: 16px;
}
.scope-sub p { margin: 6px 0 0; color: #8a847b; font-size: 13px; line-height: 1.45; }
.scope-picked { color: #6f6a63; }
.scope-radio, .scope-friend {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 28px 8px 16px;
  border: 0;
  border-bottom: 1px solid #f0ebe3;
  background: transparent;
  text-align: left;
  color: #1c1b19;
}
.scope-radio i, .scope-friend > i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #c8c2b8;
  flex: none;
  display: grid;
  place-items: center;
}
.scope-radio i.on, .scope-friend > i.on {
  border-color: #1f6f68;
  background: #1f6f68;
  color: #fff;
}
.scope-radio i.on::after, .scope-friend > i.on::after { content: '✓'; font-size: 12px; font-style: normal; }
.scope-friend b, .scope-radio b { font-weight: 650; }
.scope-friend span { display: grid; gap: 2px; min-width: 0; }
.scope-friend small { color: #8a847b; font-size: 12px; }
#paneBody:has(.pick-page) { overflow: hidden; }
.pick-page { position: relative; height: 100%; background: #fffdf9; }
.pick-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 22px 12px 16px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f3f1ec;
  color: #8a847b;
}
.pick-search svg { width: 16px; height: 16px; flex: none; }
.pick-search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.pick-list h3 {
  margin: 0;
  padding: 4px 16px;
  background: #f6f3ee;
  color: #8a847b;
  font-size: 13px;
  font-weight: 650;
}
.alpha-index {
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
}
.alpha-index button {
  border: 0;
  background: none;
  color: #c8c2b8;
  font-size: 10px;
  line-height: 1.35;
  padding: 0 4px;
}
.alpha-index button.on { color: #6f6a63; }
.moment-clear {
  display: block;
  margin: 0 0 16px;
  border: 0;
  padding: 0;
  background: none;
  color: #8b95a8;
  font-size: 13px;
}
body[data-theme="dark"] #paneBody.fill-gray { background: #0e141e; }
body[data-theme="dark"] .disc-group,
body[data-theme="dark"] .moments { background: var(--card); }
body[data-theme="dark"] .disc-row { color: var(--ink); border-bottom-color: var(--line); }
body[data-theme="dark"] .moment { border-bottom-color: var(--line); }
body[data-theme="dark"] .moment-me-name { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
body[data-theme="dark"] .moment-me-id:not(.id-pretty),
body[data-theme="dark"] .moment-pid:not(.id-pretty) { color: var(--ink); }
body[data-theme="dark"] .moment-react { background: #1b2433; }
body[data-theme="dark"] .moment-name,
body[data-theme="dark"] .moment-comments b,
body[data-theme="dark"] .moment-comments,
body[data-theme="dark"] .moment-reply input { background: #101722; }
body[data-theme="dark"] .id-red,
body[data-theme="dark"] .moment-meta button.on { color: #f07171; }
body[data-theme="dark"] .moment-compose textarea { color: var(--ink); }
body[data-theme="dark"] .moment-file { background: #101722; }
body[data-theme="dark"] .moment-me .avatar { border-color: #1b2433; }

.pretty-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: 5px;
  height: 15px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 3px;
  background: #1a1a1a;
  color: #fff;
  font-family: inherit;
  font-style: normal;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
}
.pretty-pill.is-draw { background: #c336da; color: #fff; box-shadow: none; }
.pretty-pill.is-shop { background: #ec3223; color: #fff; box-shadow: none; }
.pretty-pill.is-own { background: #1c1914; color: #fff; box-shadow: none; }
.id-pretty.is-draw,
.me-id.id-pretty.is-draw,
.mine-id.id-pretty.is-draw,
.home-id.id-pretty.is-draw,
.moment-me-id.id-pretty.is-draw,
.moment-pid.id-pretty.is-draw,
.share-code.id-pretty.is-draw,
.invite-id.id-pretty.is-draw,
.profile-row b.id-pretty.is-draw,
.row-side.id-pretty.is-draw,
.account-line b.id-pretty.is-draw {
  color: #c336da;
  font-weight: 700;
}
.id-pretty.is-shop,
.me-id.id-pretty.is-shop,
.mine-id.id-pretty.is-shop,
.home-id.id-pretty.is-shop,
.moment-me-id.id-pretty.is-shop,
.moment-pid.id-pretty.is-shop,
.share-code.id-pretty.is-shop,
.invite-id.id-pretty.is-shop,
.profile-row b.id-pretty.is-shop,
.row-side.id-pretty.is-shop,
.account-line b.id-pretty.is-shop {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ec3223;
  -webkit-text-fill-color: #ec3223;
  filter: none;
  font-weight: 700;
}
.person-text .id-pretty { font-style: normal; }
.pretty-mine { min-height: 100%; background: #f6f3ee; }
.pretty-note { margin: 0; padding: 10px 16px; background: #e7f3ef; color: #1f6f68; font-size: 13px; line-height: 1.55; }
.pretty-sec { margin: 14px 16px 8px; color: #8a847b; font-size: 13px; }
.pretty-card { margin: 0 16px; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 0 0 1px #efe8dc; }
.pretty-card-top { display: flex; align-items: center; gap: 12px; }
.pretty-seal { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 18px; flex: none; }
.pretty-seal.is-shop { background: #ec3223; color: #fff; box-shadow: none; }
.pretty-seal.is-draw { background: #c336da; color: #fff; box-shadow: none; }
.pretty-seal.is-own { background: #f7f4ee; color: #1c2430; box-shadow: inset 0 0 0 1.5px #1c2430; }
.pretty-card-top b { font-size: 20px; letter-spacing: .4px; }
.pretty-card-top b.is-shop {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ec3223;
  -webkit-text-fill-color: #ec3223;
}
.pretty-card-top b.is-draw { color: #c336da; -webkit-text-fill-color: #c336da; }
.pretty-card-top small { display: block; margin-top: 2px; color: #8a847b; font-size: 13px; font-weight: 400; }
.pretty-now { margin-left: 8px; font-style: normal; font-size: 11px; font-weight: 600; color: #1f6f68; -webkit-text-fill-color: #1f6f68; border: 1px solid #9dccc6; border-radius: 4px; padding: 1px 5px; vertical-align: 2px; }
.pretty-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: #8a847b; font-size: 12px; }
.pretty-card-foot span { display: flex; align-items: center; gap: 4px; }
.pretty-card-foot .tiny { width: 14px; height: 14px; }
.pretty-card-foot em { font-style: normal; }
.pretty-empty { margin: 28px 16px; text-align: center; color: #8a847b; }
.buy-list { display: grid; gap: 8px; padding: 0 16px 20px; }
.buy-row { display: grid; grid-template-columns: 1fr auto; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 0 0 1px #efe8dc; }
.buy-row small { grid-column: 1; color: #8a847b; }
.buy-row em { grid-row: 1 / span 2; align-self: center; font-style: normal; color: #1f6f68; font-weight: 650; }
.voucher-page { min-height: 100%; background: #f6f3ee; }
.voucher-tabs { display: flex; background: #fff; border-bottom: 1px solid #efe8dc; }
.voucher-tabs button { flex: 1; height: 46px; border: 0; background: transparent; color: #8a847b; }
.voucher-tabs button.on { color: #1f6f68; box-shadow: inset 0 -2px 0 #1f6f68; }
.voucher-list { display: grid; gap: 10px; padding: 12px; }
.voucher-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 0 0 1px #efe8dc; }
.voucher-card span { display: grid; gap: 3px; min-width: 0; }
.voucher-card b { font-size: 16px; }
.voucher-card small { color: #8a847b; }
.voucher-mark { width: 46px; height: 46px; border-radius: 14px; background: #f7f4ee; color: #1c2430; box-shadow: inset 0 0 0 1.5px #1c2430; display: grid; place-items: center; flex: none; }
.voucher-mark b { font-size: 13px; letter-spacing: .4px; }
.voucher-card.is-used { color: #8a847b; }
.voucher-stamp { position: absolute; right: 16px; top: 18px; width: 54px; height: 54px; border: 2px solid #1f6f68; border-radius: 50%; color: #1f6f68; display: grid; place-items: center; font-style: normal; font-size: 12px; transform: rotate(-18deg); background: rgba(255,255,255,.72); }
.voucher-friend { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: #fff; border-radius: 14px; padding: 10px 12px; text-align: left; }
.voucher-friend span { display: grid; flex: 1; min-width: 0; }
.voucher-friend small { color: #8a847b; }
.voucher-friend em { font-style: normal; color: #1f6f68; }
.bag-extra { padding: 0 12px 16px; display: grid; gap: 8px; }
.share-page { min-height: 100%; padding: 8px 16px 28px; background: #e7f3f1; }
.share-top { height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #1f6f68; font-size: 22px; }
.share-top img { width: 34px; height: 34px; border-radius: 8px; background: #fff; }
.share-card { margin-top: 4px; padding: 28px 16px 20px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 10px 28px rgba(31, 111, 104, .12); }
.share-card > b { display: block; margin-top: 12px; font-size: 18px; }
.share-card > p { margin: 10px 0 0; color: #5c6b82; font-size: 15px; }
.share-label { display: block; margin-top: 16px; color: #8b95a8; font-size: 13px; }
.share-code { display: block; margin: 4px 0 12px; color: #1c1b19; font-size: 28px; letter-spacing: .06em; }
.share-qr { display: block; width: 188px; height: 188px; margin: 0 auto; object-fit: contain; background: #fff; }
.share-card small { display: block; margin-top: 8px; color: #8b95a8; font-size: 13px; }
.share-actions { display: flex; justify-content: center; gap: 28px; margin-top: 22px; }
.share-actions button { border: 0; background: transparent; color: #3c3a36; display: grid; justify-items: center; gap: 8px; font-size: 13px; }
.share-actions i { width: 52px; height: 52px; border-radius: 50%; background: #1f6f68; color: #fff; display: grid; place-items: center; }
.share-actions svg { width: 24px; height: 24px; }
.invite-page {
  min-height: 100%;
  padding: 8px 16px 28px;
  background: #7eccf6;
}
.invite-frame {
  margin: 0 auto;
  width: min(320px, 100%);
  aspect-ratio: 720 / 1280;
  border-radius: 22px;
  overflow: hidden;
  background: #7eccf6;
  box-shadow: 0 16px 36px rgba(46, 132, 176, 0.22);
}
.invite-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.invite-hold {
  margin: 10px 0 0;
  text-align: center;
  color: #8b95a8;
  font-size: 12px;
}
.invite-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #1f6f68;
  font-size: 18px;
}
.invite-brand img { width: 28px; height: 28px; border-radius: 7px; background: #fff; }
.invite-who { margin-top: 18px; display: grid; justify-items: center; gap: 6px; }
.invite-who strong { font-size: 18px; }
.invite-who span { color: #8b95a8; font-size: 13px; }
.invite-line { margin: 14px 0 0; color: #1f6f68; font-size: 16px; font-weight: 650; }
.invite-qrbox {
  width: 236px;
  height: 236px;
  margin: 18px auto 0;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6e9ee;
  box-sizing: border-box;
}
.invite-qr {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: contain;
  background: #fff;
}
.invite-tip { margin: 12px 0 0; color: #8b95a8; font-size: 13px; }
.invite-copy {
  display: block;
  width: min(220px, 70%);
  margin: 16px auto 0;
  border: 0;
  border-radius: 14px;
  background: var(--char);
  color: #f6f3ed;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
}
.invite-log {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eef1f4;
}
.invite-log-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.invite-log-main b { font-size: 16px; }
.invite-log-main span,
.invite-log-main time { color: #8b95a8; font-size: 12px; }
.invite-tag {
  flex: none;
  font-style: normal;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
}
.invite-tag.ok { color: #1f6f68; background: #e8f3f1; }
.invite-tag.wait { color: #8b95a8; background: #eef1f4; }
.invite-tag.off { color: #b4534a; background: #f8eceb; }
.invite-send { padding: 8px 12px 24px; }
.mine-code {
  min-height: 100%;
  padding: 28px 16px 32px;
  background: #f4f6f8;
  text-align: center;
}
.mine-code > b { display: block; margin-top: 12px; font-size: 18px; }
.mine-id {
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
.mine-qr {
  margin: 18px auto 0;
  width: min(280px, 100%);
  padding: 18px 16px 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.06);
}
.mine-qr img { width: 210px; height: 210px; }
.mine-qr p { margin: 8px 0 0; color: #98a2b3; font-size: 13px; }
.mine-save {
  margin: 22px auto 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  font-weight: 650;
}
.invite-actions {
  width: min(320px, 94%);
  margin: 22px auto 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.invite-actions button {
  border: 0;
  background: transparent;
  color: #3c4654;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 0;
}
.invite-actions i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #2f8cff;
  color: #fff;
  display: grid;
  place-items: center;
}
.invite-actions i svg {
  width: 24px;
  height: 24px;
  background: none;
}
.bg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}
.bg-tile {
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 51, 0.08);
  color: #5b6472;
  font-size: 13px;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 10px;
}
.bg-tile.on { box-shadow: inset 0 0 0 2px #2f8cff; }
.lookup { min-height: 100%; background: #f4f5f7; }
.lookup.on { background: #fff; }
.lookup-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 4px;
  padding: 0 12px;
  border-radius: 10px;
  background: #fff;
  color: #98a2b3;
}
.lookup.on .lookup-search { background: #f2f3f5; }
.lookup-search svg { width: 18px; height: 18px; flex: none; }
.lookup-search input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 0;
  outline: none;
  color: var(--ink);
  font-size: 15px;
}
.lookup-menu {
  margin: 14px 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.lookup-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: #fff;
  padding: 14px 16px;
  text-align: left;
  font-size: 16px;
  color: var(--ink);
}
.lookup-row + .lookup-row { border-top: 1px solid #f0f2f5; }
.lookup-row em { margin-left: auto; color: #c5cad3; font-style: normal; font-size: 18px; }
.lookup-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
}
.lookup-ico .row-ico { width: 20px; height: 20px; }
.lookup-ico.scan { background: #f5a524; }
.lookup-ico.mine { background: #20c997; }
.lookup-result { padding: 8px 0 16px; }
.lookup-hit {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  text-align: left;
  color: inherit;
}
.lookup-empty { margin: 28px 16px; color: #98a2b3; text-align: center; }
#h5 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 40;
  width: 100%;
  max-width: 480px;
  overflow: auto;
  transform: translateX(-50%);
  background:
    radial-gradient(rgba(29, 79, 140, .06) 1.1px, transparent 1.2px) 0 0 / 18px 18px,
    radial-gradient(520px 280px at 8% 0%, rgba(232, 214, 184, .5), transparent 70%),
    radial-gradient(640px 360px at 100% 12%, rgba(198, 224, 216, .7), transparent 68%),
    #f4f1ea;
}
.h5 {
  width: min(420px, 100%);
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top, 0px))
    clamp(12px, 4.2vw, 18px)
    max(28px, env(safe-area-inset-bottom, 0px));
}
.h5-hero {
  text-align: center;
  padding: 26px 16px 22px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(160deg, #1d4f8c, #1f6f68);
}
.h5-hero img { display: block; margin: 0 auto; border-radius: 16px; background: #fff; }
.h5-hero b { display: block; margin-top: 10px; font-size: 28px; color: #fff; }
.h5-hero p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.88); }
.h5-card, .h5-code, .h5-land {
  margin-top: 18px;
  padding: 18px 16px;
  border-radius: 18px;
  background: #fff;
}
.h5-card h2, .h5-done > h2, .h5-land h2 { margin: 0 0 8px; font-size: 20px; }
.h5-id { margin: 0 0 12px; color: var(--blue); font-size: 13px; }
.h5-done { text-align: center; }
.h5-check {
  width: 64px;
  height: 64px;
  margin: 12px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 30px;
}
.h5-done > p { margin: 0 0 16px; color: #5c6b82; }
.h5-code { text-align: center; }
.h5-code > span { display: block; margin-bottom: 10px; color: #8b95a8; font-size: 13px; }
.h5-code .avatar { display: grid; margin: 0 auto; }
.h5-code b { display: block; margin-top: 8px; }
.h5-code em { display: block; margin: 4px 0 10px; color: var(--blue); font-style: normal; font-weight: 700; }
.h5-code img { width: 180px; height: 180px; }
.h5-code small { display: block; margin-top: 8px; color: #98a2b3; }
.h5-land { background: transparent; padding: 0; }
.h5-land header {
  text-align: left;
  padding: 22px 18px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(160deg, #1d4f8c, #1f6f68);
}
.h5-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 4px;
}
.h5-tile {
  position: relative;
  min-height: 92px;
  border: 0;
  border-radius: 18px;
  background: #24262b;
  color: #fff;
  text-decoration: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px 10px;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.h5-tile:active { transform: translateY(-2px); }
.h5-tile b { font-size: 17px; }
.h5-tile small { display: block; margin-top: 4px; color: #b8b3aa; font-size: 11px; }
.h5-tile .face, .h5-tile .rear {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  transition: opacity .28s ease, transform .28s ease;
}
.h5-tile .rear { opacity: 0; transform: translateY(8px); }
.h5-tile:active .face, .h5-tile:focus-visible .face { opacity: 0; transform: translateY(-8px); }
.h5-tile:active .rear, .h5-tile:focus-visible .rear { opacity: 1; transform: translateY(0); }
.h5-land header h2 { color: #fff; }
.h5-land header img { display: block; margin-bottom: 12px; border-radius: 16px; background: #fff; }
.h5-land header p { margin: 8px 0 0; color: rgba(255, 255, 255, 0.88); line-height: 1.5; }
.h5-land ol { margin: 16px 0; padding: 0; list-style: none; }
.h5-land li {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
}
.h5-land li b { display: block; }
.h5-land li span { display: block; margin-top: 4px; color: #8b95a8; font-size: 13px; }
.h5-note { margin: 12px 0 0; text-align: center; color: #98a2b3; font-size: 12px; }

.auto-page { padding: 4px 16px 28px; }
.auto-lead { margin: 8px 4px 14px; color: #8b95a8; font-size: 13px; line-height: 1.6; }
.auto-page h3 { margin: 18px 4px 8px; font-size: 14px; color: #667085; font-weight: 600; }
.auto-card { border: 0; border-radius: 16px; background: #fff; overflow: hidden; }
.auto-add, .auto-draft .primary {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 12px;
  background: transparent;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
}
.auto-draft { margin-top: 10px; }
.auto-draft textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 12px 4px;
  font: inherit;
  resize: vertical;
  background: transparent;
}
.auto-list { margin-top: 4px; display: flex; flex-direction: column; }
.auto-item {
  display: flex;
  align-items: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.auto-item.on { background: transparent; }
.auto-item > button:first-child {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 4px;
  font-size: 15px;
}
.auto-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
  position: relative;
}
.auto-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.auto-del {
  width: 40px;
  border: 0;
  background: transparent;
  color: #98a2b3;
  font-size: 18px;
}
.auto-empty { margin: 12px 4px; color: #98a2b3; font-size: 13px; }

.home-title { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.home-title strong { font-size: 17px; }
.home-title small { color: #98a2b3; font-size: 12px; font-weight: 500; }
.home-bar:has(.home-title) { height: 58px; }
.card-pick .pick-search { height: auto; display: block; border-radius: 0; }
.pick-search { position: relative; padding: 8px 16px 12px; background: #fff; }
.pick-search input {
  width: 100%;
  border: 0;
  background: #f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%2398a2b3' stroke-width='2'/%3E%3Cpath d='M16 16l4 4' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10px 50% / 16px no-repeat;
  border-radius: 8px;
  padding: 10px 12px 10px 34px;
  font-size: 15px;
  color: #222;
}
.pick-letter { padding: 4px 16px; background: #f5f6f8; color: #98a2b3; font-size: 13px; }
.pick-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px 10px 16px;
  border: 0;
  border-bottom: 1px solid #f4f5f7;
  background: #fff;
  text-align: left;
  color: #222;
}
.pick-row .pick-id { display: block; margin-top: 2px; color: #e85a4f; font-size: 13px; }
.pick-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #d0d5dd;
  flex: none;
  position: relative;
}
.pick-row.on .pick-dot,
.pick-dot.on { border-color: var(--blue); background: var(--blue); }
.pick-row.on .pick-dot::after,
.pick-dot.on::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pick-empty { padding: 36px 16px; text-align: center; }
.pick-index {
  position: fixed;
  right: 2px;
  top: 48%;
  transform: translateY(-50%);
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pick-index button {
  border: 0;
  background: transparent;
  color: #98a2b3;
  font-size: 11px;
  line-height: 1.15;
  padding: 0 6px;
}
.home-page.plain,
.home-page.plain .home-sheet { background: #fff; }
.group-form { padding: 0 16px 8px; }
.group-photo {
  position: relative;
  display: flex;
  width: 92px;
  height: 92px;
  margin: 28px auto 26px;
  border-radius: 18px;
  background: #8d96a5;
  cursor: pointer;
}
.group-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.group-photo-ph { margin: auto; display: grid; place-items: center; }
.group-cam {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .18);
}
.group-name-input,
.intro-box textarea {
  width: 100%;
  border: 0;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 16px;
  color: #222;
}
.group-name-input { padding: 16px 14px; }
.group-field { margin: 22px 0 10px; font-size: 15px; color: #222; }
.intro-box { position: relative; }
.intro-box textarea { min-height: 128px; padding: 14px 14px 32px; resize: none; display: block; }
.intro-box em {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #98a2b3;
  font-style: normal;
  font-size: 13px;
}
.kind-list { background: #fff; }
.kind-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid #f1f1f1;
  background: #fff;
  font-size: 16px;
  color: #222;
  text-align: left;
}
.kind-row.locked { color: #c5cad3; }
.kind-dot {
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  border: 1.5px solid #d0d5dd;
  flex: none;
}
.kind-row.on .kind-dot { border-color: var(--blue); background: radial-gradient(circle, #fff 0 4px, var(--blue) 5px); }
.kind-row.locked .kind-dot { border-color: #e6e8ee; background: #f3f4f6; }
.avatar.photo { padding: 0; overflow: hidden; background: #e8eaed; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.photo.sq { border-radius: 14px; }
body[data-theme="dark"] .pick-search,
body[data-theme="dark"] .pick-row,
body[data-theme="dark"] .kind-row,
body[data-theme="dark"] .home-page.plain,
body[data-theme="dark"] .home-page.plain .home-sheet { background: #101722; color: var(--ink); }
body[data-theme="dark"] .pick-letter { background: #0c121b; }
body[data-theme="dark"] .group-name-input,
body[data-theme="dark"] .intro-box textarea { background: #1b2433; color: var(--ink); }
body[data-theme="dark"] .group-field,
body[data-theme="dark"] .kind-row,
body[data-theme="dark"] .pick-row { color: var(--ink); }
body[data-theme="dark"] .kind-row.locked { color: #667085; }

.me-hub { margin: 0 12px 4px; display: grid; gap: 8px; }
.hub-member {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 86px;
  padding: 16px 16px 16px 16px;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(212, 175, 106, .18), transparent 52%),
    linear-gradient(165deg, #1c1814 0%, #0c0b0a 46%, #14110d 100%);
  box-shadow:
    inset 0 1px 0 rgba(245, 226, 186, .22),
    inset 0 0 0 1px rgba(196, 160, 98, .38),
    0 12px 28px rgba(12, 10, 8, .22);
  color: #f3e6c4;
  text-align: left;
}
.hub-member::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 205, 140, .55), transparent);
  pointer-events: none;
}
.hub-crest {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #e6d09a;
  background: radial-gradient(circle at 32% 28%, #3a342c, #12100d);
  box-shadow: inset 0 0 0 1px rgba(230, 208, 154, .45), 0 6px 14px rgba(0, 0, 0, .28);
}
.hub-crest svg { width: 28px; height: 28px; display: block; }
.hub-member span { position: relative; z-index: 1; flex: 1; min-width: 0; }
.hub-member span small,
.member-hero small {
  display: block;
  margin: 0 0 4px;
  color: rgba(230, 208, 154, .72);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .28em;
}
.hub-member span b { display: block; font-size: 18px; font-weight: 650; letter-spacing: .12em; color: #f6edd4; }
.hub-member em {
  position: relative;
  z-index: 1;
  font-style: normal;
  color: rgba(230, 208, 154, .7);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.hub-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.hub-tile {
  border: 0;
  border-radius: 14px;
  padding: 14px 6px 12px;
  background: #fff;
  box-shadow: 0 0 0 1px #efe8dc;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: #1c2430;
  transition: transform .16s cubic-bezier(.4, 0, .2, 1), box-shadow .16s ease;
}
.hub-tile:active { transform: translateY(0); }
.hub-tile i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.hub-tile svg { width: 16px; height: 16px; }
.hub-shop i, .hub-wallet i, .hub-bag i { width: 22px; height: 22px; background: transparent; border-radius: 0; color: inherit; }
.hub-tile .hub-line { width: 22px; height: 22px; }
.hub-tile b { display: block; font-size: 13px; font-weight: 650; }
.hub-tile small { display: block; margin: 0; color: #8a847b; font-size: 11px; }
.tint-row {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  flex: none;
  overflow: hidden;
}
.tint-row svg { width: 12px; height: 12px; }
.row-star { width: 16px; height: 16px; display: inline-grid; place-items: center; color: #e2b23a; flex: none; }
.row-star svg { width: 16px; height: 16px; }
.voucher-page .pretty-sec { margin: 14px 16px 8px; }
.voucher-page .pretty-card { margin-bottom: 4px; }
.voucher-page .buy-list { padding-bottom: 8px; }
.voucher-page .pretty-empty { margin: 0 16px 8px; }
.tint-row.ask { background: #1f6f68; }
.tint-row.out { background: #d4654e; }
.pretty-row {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-grid;
  place-items: center;
  background: #1c1914;
  color: #f3d48a;
  box-shadow: inset 0 0 0 1px #e8c56b;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.shop-page, .bag-page, .wallet-page, .member-page { padding: 12px; display: grid; gap: 10px; }
.shop-page { padding: 14px 14px 28px; gap: 14px; }
.shop-card, .member-page section, .wallet-page section, .bag-row, .wallet-row {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
}
.shop-card p { margin: 6px 0 12px; color: #8a847b; font-size: 13px; }
.shop-card div { display: flex; align-items: center; justify-content: space-between; }
.shop-card em { font-style: normal; color: #1f6f68; font-weight: 650; }
.shop-card button, .member-page .primary { border: 0; background: #1c2430; color: #fff; border-radius: 999px; padding: 7px 14px; }
.member-page p { margin: 8px 0 14px; color: #8a847b; }
.member-page section.member-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 148px;
  padding: 24px 20px;
  border-radius: 20px;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(212, 175, 106, .2), transparent 50%),
    linear-gradient(165deg, #1c1814 0%, #0c0b0a 48%, #14110d 100%);
  box-shadow:
    inset 0 1px 0 rgba(245, 226, 186, .22),
    inset 0 0 0 1px rgba(196, 160, 98, .4),
    0 16px 32px rgba(12, 10, 8, .24);
  color: #f6edd4;
  text-align: left;
}
.member-hero::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 205, 140, .55), transparent);
  pointer-events: none;
}
.member-hero .hub-crest { width: 56px; height: 56px; }
.member-hero .hub-crest svg { width: 34px; height: 34px; }
.member-hero div { position: relative; z-index: 1; min-width: 0; }
.member-hero div > b { display: block; font-size: 22px; letter-spacing: .16em; font-weight: 650; }
.member-hero p { margin: 8px 0 0; color: rgba(230, 208, 154, .72); }
.wallet-page section b { font-size: 36px; margin-right: 6px; }
.wallet-page section small, .wallet-page section span { color: #8a847b; }
.wallet-row, .bag-row { display: flex; align-items: center; justify-content: space-between; }
.wallet-row em { font-style: normal; color: #1f6f68; }
.wallet-row em.out { color: #c4554a; }
.puzzle-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 24, 28, .45);
  display: grid;
  place-items: center;
  padding: 20px;
}
.puzzle-card {
  width: min(320px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 18px 40px rgba(20, 24, 28, .18);
}
.puzzle-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.puzzle-card header button { border: 0; background: transparent; font-size: 22px; line-height: 1; color: #667085; }
.puzzle-stage { position: relative; width: 280px; height: 160px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #ece7df; }
.puzzle-bg, .puzzle-piece { position: absolute; inset: 0; width: 280px; height: 160px; }
.puzzle-piece { width: 52px; height: 52px; inset: auto auto auto 0; top: 0; filter: drop-shadow(0 6px 8px rgba(0,0,0,.28)); pointer-events: none; }
.puzzle-track {
  position: relative;
  height: 42px;
  margin-top: 12px;
  border-radius: 999px;
  background: #f3f1ec;
  overflow: hidden;
}
.puzzle-thumb {
  width: 52px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 24, 28, .12);
  display: grid;
  place-items: center;
  font-style: normal;
  color: #1f6f68;
  touch-action: none;
  cursor: grab;
}
.puzzle-track.ok .puzzle-thumb { background: #1f6f68; color: #fff; }
.puzzle-track.bad .puzzle-thumb { background: #c4554a; color: #fff; }
.puzzle-tip { margin: 8px 0 0; text-align: center; color: #8a847b; font-size: 13px; }
.tier-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.tier-row button { border: 0; background: transparent; color: #8a847b; border-radius: 999px; height: 34px; padding: 0 14px; white-space: nowrap; font-size: 14px; }
.tier-row button.on { background: #fff; color: #2f6bdb; box-shadow: 0 0 0 1px #d7e4f8, 0 4px 12px rgba(47, 107, 219, .08); }
.len-row { display: flex; gap: 20px; padding: 0 2px; }
.len-row button { border: 0; background: transparent; color: #a39e96; padding: 6px 0 8px; font-size: 15px; }
.len-row button.on { color: #2f6bdb; font-weight: 650; box-shadow: inset 0 -2px 0 #2f6bdb; }
.shop-search { display: flex; align-items: center; gap: 8px; height: 42px; background: #fff; border-radius: 14px; padding: 0 14px; box-shadow: 0 0 0 1px #efe8dc; }
.shop-search input { flex: 1; border: 0; background: transparent; min-width: 0; font-size: 14px; }
.shop-search input::placeholder { color: #c8c2b8; }
.shop-search button { border: 0; background: transparent; color: #2f6bdb; font-weight: 650; }
.shop-empty { grid-column: 1 / -1; display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 220px; color: #b0aaa2; }
.shop-empty span { width: 56px; height: 56px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5h10a1 1 0 0 1 1 1V20l-2.2-1.4L13.5 20 12 18.8 10.5 20l-2.3-1.4L6 20V4.5a1 1 0 0 1 1-1z' fill='none' stroke='%23d5d0c8' stroke-width='1.4'/%3E%3Cpath d='M9 9h6M9 12.5h6' stroke='%23d5d0c8' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.shop-empty p { margin: 0; font-size: 14px; letter-spacing: .04em; }
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 0 0 1px #efe8dc; }
.shop-tabs button { border: 0; background: transparent; border-radius: 999px; height: 38px; color: #8a847b; font-size: 15px; font-weight: 650; }
.shop-tabs button.on { background: #2f6bdb; color: #fff; box-shadow: 0 6px 14px rgba(47, 107, 219, .22); }
.num-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; padding-top: 10px; }
.num-card {
  position: relative;
  border: 0;
  background: #fff;
  border-radius: 14px;
  padding: 28px 4px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  box-shadow: 0 10px 24px rgba(28, 36, 48, .045), 0 0 0 1px rgba(255, 255, 255, .8);
  color: #1a1a1a;
}
.num-seal {
  position: absolute;
  top: 0;
  right: 0;
  height: 22px;
  padding: 0 9px 0 11px;
  border-radius: 0 14px 0 10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 650;
  line-height: 22px;
  letter-spacing: .04em;
  color: #fff;
}
.num-seal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), transparent);
  pointer-events: none;
}
.num-seal.is-you { background: linear-gradient(180deg, #3dce7a, #14924a); }
.num-seal.is-jing { background: linear-gradient(180deg, #5b93f5, #2b6de5); }
.num-seal.is-ji { background: linear-gradient(180deg, #ff6d64, #e23d3d); }
.num-seal.is-dian { background: linear-gradient(180deg, #e184f2, #c336da); }
.num-seal.is-zhi {
  background: linear-gradient(180deg, #3a3228, #14110e);
  color: #f6d98a;
  box-shadow: inset 0 0 0 1px rgba(246, 217, 138, .7);
}
.num-card b {
  max-width: 100%;
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;
  color: #1a1a1a;
}
.num-card em {
  font-style: normal;
  background: #f3f4f6;
  color: #8b919a;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}
.wallet-hero { display: block; background: linear-gradient(160deg, #fff8e8, #f3e2b4); }
.wallet-hero small { color: #8a6a32; }
.bal-row { display: flex; align-items: center; gap: 12px; }
.bal-row b { display: block; font-size: 36px; line-height: 1.1; }
.t-coin { width: 42px; height: 42px; flex: none; filter: drop-shadow(0 2px 2px rgba(120, 78, 16, .25)); }
.bal-actions { display: flex; gap: 8px; margin-top: 14px; }
.bal-actions button, .wallet-hero button { border: 0; background: #1c2430; color: #fff; border-radius: 999px; padding: 8px 16px; }
.coin-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.coin-pack { border: 1px solid #eadcbe; background: #fff; border-radius: 14px; padding: 14px 8px 12px; display: grid; justify-items: center; gap: 4px; }
.coin-pack .t-coin { width: 28px; height: 28px; }
.coin-pack b { font-size: 18px; }
.coin-pack small { color: #8a847b; }
.coin-pack.on { border-color: #1f6f68; box-shadow: inset 0 0 0 1px #1f6f68; background: #f4faf8; }
.channel-sheet { width: 100%; background: #f6f3ee; border-radius: 18px 18px 0 0; padding: 6px 16px calc(16px + env(safe-area-inset-bottom)); }
.channel-sheet header { padding: 14px 6px 10px; }
.channel-sheet header b { display: block; font-size: 16px; }
.channel-sheet header small { color: #8a847b; }
.channel-row { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: #fff; border-radius: 14px; padding: 14px; text-align: left; }
.channel-row i { width: 40px; height: 40px; border-radius: 12px; background: #1f6f68; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; flex: none; }
.channel-row span { display: grid; gap: 2px; }
.channel-row small { color: #8a847b; }
.channel-sheet .cancel { display: block; width: 100%; margin-top: 8px; height: 48px; border: 0; border-radius: 14px; background: #fff; color: #8a847b; }
.recharge-page h3 { margin: 0; font-size: 14px; color: #6d675f; font-weight: 600; }
.rate-line { margin: 0; color: #1f6f68; font-weight: 650; }
.pack-list { display: grid; gap: 10px; }
.pack-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 0; border-radius: 14px; padding: 16px; text-align: left; }
.pack-card em { font-style: normal; font-size: 18px; }
.bill-page, .pay-page { padding: 12px; display: grid; gap: 10px; }
.bill-card { position: relative; background: #fff; border-radius: 14px; padding: 14px 118px 12px 16px; }
.bill-card header { display: flex; justify-content: space-between; gap: 8px; }
.bill-card header em, .pay-page > em { font-style: normal; color: #8a847b; }
.bill-card header em.paid, .pay-page > em.paid { color: #1f6f68; }
.bill-card header em.failed, .pay-page > em.failed { color: #c4554a; }
.bill-card header em.out { color: #8a847b; }
.bill-card strong.plus { color: #1f6f68; }
.bill-card strong.minus { color: #c4554a; }
.bill-card p { margin: 6px 0 0; color: #6d675f; font-size: 13px; }
.bill-card strong { position: absolute; right: 16px; top: 42px; font-size: 18px; }
.bill-card small { position: absolute; right: 16px; top: 66px; color: #8a847b; }
.bill-no button, .pay-box button, .pay-usdt button { border: 0; background: transparent; color: #1f6f68; padding: 0 0 0 6px; }
.pay-usdt { font-size: 28px; font-weight: 700; margin: 8px 0; }
.pay-usdt small { font-size: 14px; font-weight: 500; color: #6d675f; }
.pay-box { background: #fff; border-radius: 12px; padding: 12px 14px; }
.pay-box span { display: block; color: #8a847b; font-size: 12px; }
.pay-box b { display: block; margin-top: 4px; word-break: break-all; }
.pay-page .primary { border: 0; background: #1c2430; color: #fff; border-radius: 999px; height: 44px; }
.wallet-page h3 { margin: 4px 2px 0; font-size: 14px; color: #6d675f; font-weight: 600; }
.pay-page { padding: 16px 14px 28px; }
.pay-card, .pay-list { background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(28, 36, 48, .04); }
.pay-card { padding: 26px 18px 18px; }
.pay-card h2 { margin: 0 0 8px; text-align: center; font-size: 20px; font-weight: 650; }
.pay-card p { margin: 0 0 18px; text-align: center; color: #8a847b; font-size: 13px; line-height: 1.6; }
.pay-card label { display: grid; gap: 6px; margin: 0 0 12px; color: #6d675f; font-size: 13px; }
.pay-card input { height: 48px; border: 1px solid #ece7df; border-radius: 12px; padding: 0 14px; font-size: 18px; letter-spacing: .18em; text-align: center; background: #faf8f5; }
.pay-go { width: 100%; height: 46px; margin-top: 6px; border: 0; border-radius: 23px; background: #1f6f68; color: #fff; font-size: 16px; }
.pay-code { display: flex; gap: 8px; }
.pay-code input { flex: 1; letter-spacing: .12em; }
.pay-code button { flex: none; height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: #eef6f5; color: #1f6f68; font-size: 13px; }
.pay-list button { width: 100%; height: 56px; display: flex; align-items: center; justify-content: space-between; border: 0; background: #fff; padding: 0 16px; font-size: 16px; color: #1c1b19; }
.pay-list i { color: #c4beb4; font-style: normal; font-size: 20px; }
.pay-buy { width: min(440px, 100%); margin: 0 auto 12px; background: #fff; border-radius: 18px 18px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
.pay-buy header { display: grid; justify-items: center; gap: 4px; margin-bottom: 16px; }
.pay-buy header b { font-size: 28px; letter-spacing: .08em; }
.pay-buy header small { color: #8a6a32; }
.pay-buy label { display: grid; gap: 6px; color: #6d675f; font-size: 13px; }
.pay-buy input { height: 48px; border: 1px solid #ece7df; border-radius: 12px; text-align: center; letter-spacing: .2em; font-size: 18px; background: #faf8f5; }
.pay-forget { display: block; margin: 12px auto 0; border: 0; background: transparent; color: #1f6f68; font-size: 14px; }
.pay-dots { display: block; width: 100%; height: 52px; margin: 0 0 10px; border: 1px solid #ece7df; border-radius: 12px; background: #faf8f5; color: #b7b1a8; font-size: 16px; letter-spacing: 0; }
.pay-dots.filled { color: #1c1b19; font-size: 22px; letter-spacing: .28em; }
.pay-dots.on { border-color: #1f6f68; box-shadow: 0 0 0 3px rgba(31, 111, 104, .12); }
.pay-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; padding: 8px; border-radius: 16px; background: #ece7df; }
.pay-pad button { height: 52px; border: 0; border-radius: 10px; background: #fff; color: #1c1b19; font-size: 22px; font-weight: 600; box-shadow: 0 1px 0 rgba(28, 27, 25, .08); }
.pay-pad button:active { background: #d9d3c8; }
.pay-pad button svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.pay-pad span { display: block; }
.recharge-page { padding: 16px; display: grid; gap: 14px; }
.recharge-page > p { margin: 0; }
.recharge-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.recharge-grid button { border: 1px solid #e6e1d8; background: #fff; border-radius: 14px; padding: 16px 8px; display: grid; }
.recharge-grid button.on { border-color: #1f6f68; background: #eef6f4; }
.recharge-grid b { font-size: 20px; }
.recharge-grid small { color: #8a847b; }
.recharge-page .primary { border: 0; background: #1c2430; color: #fff; border-radius: 999px; height: 44px; }
.ban-mask { position: fixed; inset: 0; z-index: 70; background: rgba(28, 32, 36, .46); display: grid; place-items: center; padding: 24px; }
.ban-card { width: min(320px, 100%); background: #fff; border-radius: 16px; padding: 28px 22px 18px; text-align: center; position: relative; }
.ban-card strong, .ban-mid strong { display: block; font-size: 18px; margin: 8px 0; }
.ban-card p, .ban-mid p { margin: 0; color: #5c574f; font-size: 14px; line-height: 1.6; }
.ban-card em { display: block; margin: 16px 0; font-style: normal; color: #6d675f; font-size: 13px; }
.ban-x { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; font-size: 22px; width: 36px; height: 36px; }
.ban-alert { width: 46px; height: 46px; border-radius: 50%; background: #e85d4c; color: #fff; display: grid; place-items: center; margin: 0 auto; font-weight: 700; font-size: 22px; }
.ban-go { width: 100%; height: 44px; border: 0; border-radius: 10px; background: #1f6f68; color: #fff; font-size: 16px; }
.ban-link { border: 0; background: transparent; color: #1f6f68; margin-top: 10px; }
.ban-head { margin: 8px 16px; background: #fff; border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; }
.ban-head b { display: block; }
.ban-head span { color: #8a847b; font-size: 13px; }
.ban-avatar { position: relative; display: block; width: 52px; height: 52px; }
.ban-avatar .avatar, .ban-avatar img { width: 52px; height: 52px; }
.ban-avatar i { position: absolute; left: 4px; right: 4px; bottom: 8px; background: rgba(226, 59, 59, .88); color: #fff; font-style: normal; font-size: 10px; text-align: center; transform: rotate(-18deg); border: 1px solid #fff; }
.ban-mid { margin: 48px 28px 24px; text-align: center; }
.ban-remove { display: block; width: calc(100% - 32px); margin: 0 16px; height: 48px; border: 0; border-radius: 12px; background: #fff; color: #d23b3b; }
.appeal-page { position: fixed; inset: 0; z-index: 72; background: #f6f4f0; display: flex; flex-direction: column; }
.appeal-form { padding: 8px 16px 24px; display: grid; gap: 8px; overflow: auto; }
.appeal-form label, .appeal-label { font-size: 14px; }
.appeal-form .req { color: #c4554a; }
.appeal-form .opt, .appeal-label em { color: #8a847b; font-style: normal; }
.appeal-form input, .appeal-box { background: #fff; border: 0; border-radius: 12px; }
.appeal-form input { height: 44px; padding: 0 12px; }
.appeal-box { position: relative; }
.appeal-box textarea { width: 100%; min-height: 140px; border: 0; resize: none; padding: 12px; background: transparent; }
.appeal-count { position: absolute; right: 12px; bottom: 8px; color: #b0aaa2; font-size: 12px; }
.appeal-label { display: flex; justify-content: space-between; }
.appeal-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.appeal-shots span { position: relative; width: 72px; height: 72px; }
.appeal-shots img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.appeal-shots .appeal-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: #1c2430; color: #fff; }
.appeal-add { position: static; width: 72px; height: 72px; border: 1px dashed #b7c9c6; border-radius: 8px; background: #fff; display: grid; place-items: center; }
.appeal-add svg { width: 28px; height: 28px; }
.appeal-hint { color: #8a847b; font-size: 12px; margin: 4px 0 12px; }
.appeal-progress { padding: 12px 16px; display: grid; gap: 10px; overflow: auto; }
.appeal-progress article { background: #fff; border-radius: 12px; padding: 12px 14px; }
.appeal-progress article.mine { background: #eef6f4; }
.appeal-progress p { margin: 6px 0; }
.appeal-progress time { color: #8a847b; font-size: 12px; }
.appeal-empty { min-height: 60vh; display: grid; place-items: center; align-content: center; gap: 12px; color: #b0aaa2; }
.appeal-empty span { width: 72px; height: 72px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5h10a1 1 0 0 1 1 1V20l-2.2-1.4L13.5 20 12 18.8 10.5 20l-2.3-1.4L6 20V4.5a1 1 0 0 1 1-1z' fill='none' stroke='%23d5d0c8' stroke-width='1.4'/%3E%3Cpath d='M9 9h6M9 12.5h6' stroke='%23d5d0c8' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.puzzle-stage.shake { animation: puzzle-shake .32s linear; }
@keyframes puzzle-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
#note {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
}
#note[hidden] { display: none; }
.note-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
}
.note-box {
  position: relative;
  z-index: 1;
  width: min(78vw, 280px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(28, 27, 25, 0.12);
}
.note-box p {
  margin: 0;
  padding: 28px 22px 24px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: #1c1b19;
}
.note-box button {
  width: 100%;
  border: 0;
  border-top: 1px solid #eee;
  background: #fff;
  color: #3478f6;
  font-size: 17px;
  font-weight: 500;
  padding: 13px;
}

body[data-theme="dark"] #boot,
body[data-theme="dark"] #auth {
  background: #0d131c;
}
body[data-theme="dark"] .pill {
  background: #1c2433;
  border-color: #2a3446;
  box-shadow: none;
}
body[data-theme="dark"] .pill input,
body[data-theme="dark"] .auth-brand strong { color: var(--ink); }
body[data-theme="dark"] .conv-swipe,
body[data-theme="dark"] .conv,
body[data-theme="dark"] #convPickBar { background: var(--card); }
body[data-theme="dark"] .conv-swipe.is-pin,
body[data-theme="dark"] .conv-swipe.is-pin .conv { background: #1a2436; }
body[data-theme="dark"] .conv:hover { background: #222c3e; }
body[data-theme="dark"] .conv.active { background: #24344d; }
body[data-theme="dark"] #convPickBar { border-top-color: var(--line); }
body[data-theme="dark"] #convPickBar button,
body[data-theme="dark"] #convPickBar b,
body[data-theme="dark"] .pane-head.picking .pick-text { color: var(--ink); }
body[data-theme="dark"] .chat-search {
  background: #101722;
  color: var(--muted);
}
body[data-theme="dark"] .find-page { background: #0d131c; }
body[data-theme="dark"] .find-bar { background: var(--card); }
body[data-theme="dark"] .find-field { background: #101722; color: var(--muted); }
body[data-theme="dark"] .find-field input { color: var(--ink); }
body[data-theme="dark"] .find-bar > button { color: #7fd0c4; }
body[data-theme="dark"] #composer { background: #1a2230; }
body[data-theme="dark"] .composer-tool {
  background: #243044;
  border-color: #3a465c;
  color: var(--ink);
}
body[data-theme="dark"] #box { background: #101722; color: var(--ink); }
body[data-theme="dark"] #voiceHold { background: #101722; color: var(--ink); }
body[data-theme="dark"] #voiceHold:active { background: #1a2433; }
body[data-theme="dark"] .sys { background: rgba(36, 48, 68, 0.72); color: #c5d0e0; }
body[data-theme="dark"] #msgs .msg:not(.mine) .bubble:not(.plain) {
  background: #2a2e36;
  color: #eceff4;
  box-shadow: none;
}
body[data-theme="dark"] #msgs .msg.mine .bubble:not(.plain) {
  background: #1a4f46;
  color: #e7f6f2;
}
body[data-theme="dark"] .quote {
  background: rgba(0, 0, 0, 0.22);
  color: #c5ccd6;
}
body[data-theme="dark"] .primary {
  background: #2f8f82;
  color: #f4fffc;
}
body[data-theme="dark"] .chat-more { color: var(--ink); }
body[data-theme="dark"] .e2e-lock { color: #7fd0c4; }
body[data-theme="dark"] .speak-all,
body[data-theme="dark"] .speak-one { color: var(--muted); }
body[data-theme="dark"] .dock-item { color: var(--ink); }
body[data-theme="dark"] .dock-item i,
body[data-theme="dark"] .dock-person { background: #243044; color: var(--ink); }
body[data-theme="dark"] .type-sheet,
body[data-theme="dark"] .type-sheet button {
  background: #1c2433;
  color: var(--ink);
  border-top-color: var(--line);
}
body[data-theme="dark"] .type-sheet .cancel { color: #7fd0c4; }
body[data-theme="dark"] .profile-page,
body[data-theme="dark"] #paneBody.fill-compose,
body[data-theme="dark"] #paneBody.fill-draw,
body[data-theme="dark"] #paneBody:has(.fav-list),
body[data-theme="dark"] #paneBody:has(.fb-form) { background: #0d131c; }
body[data-theme="dark"] .profile-card,
body[data-theme="dark"] .profile-row,
body[data-theme="dark"] .nick-card,
body[data-theme="dark"] .hub-tile,
body[data-theme="dark"] .hub-shop i,
body[data-theme="dark"] .hub-wallet i,
body[data-theme="dark"] .hub-bag i,
body[data-theme="dark"] .fav-card,
body[data-theme="dark"] .fb-row,
body[data-theme="dark"] .fb-block { background: var(--card); color: var(--ink); box-shadow: none; }
body[data-theme="dark"] .profile-row + .profile-row { box-shadow: inset 0 1px 0 var(--line); }
body[data-theme="dark"] .profile-cam { box-shadow: 0 0 0 2.5px #0d131c; }
body[data-theme="dark"] .nick-card input,
body[data-theme="dark"] .who-row { color: var(--ink); }
body[data-theme="dark"] .folder-form input,
body[data-theme="dark"] .folder-add { background: #101722; color: var(--ink); }
body[data-theme="dark"] .folder-add i,
body[data-theme="dark"] .folder-picked button { background: var(--card); }
body[data-theme="dark"] .radio { border-color: #4a5568; }
body[data-theme="dark"] .radio.on {
  border-color: #7fd0c4;
  background: radial-gradient(circle, #7fd0c4 0 5px, transparent 6px);
}
body[data-theme="dark"] .icon-btn:hover { background: #243044; }
body[data-theme="dark"] .post-sheet-card,
body[data-theme="dark"] .post-sheet button,
body[data-theme="dark"] .note-box,
body[data-theme="dark"] .note-box button {
  background: #1c2433;
  color: var(--ink);
  border-top-color: var(--line);
}
body[data-theme="dark"] .note-box p { color: var(--ink); }
body[data-theme="dark"] .note-box button { color: #7eb8ff; }
body[data-theme="dark"] .post-sheet .cancel { color: #7fd0c4; }
body[data-theme="dark"] .scope-page,
body[data-theme="dark"] .lookup,
body[data-theme="dark"] .lookup.on,
body[data-theme="dark"] .mine-code,
body[data-theme="dark"] .invite-send { background: #0d131c; }
body[data-theme="dark"] .lookup-search { background: #1c2433; }
body[data-theme="dark"] .lookup.on .lookup-search { background: #101722; }
body[data-theme="dark"] .invite-page { background: #123246; }
body[data-theme="dark"] .shop-card,
body[data-theme="dark"] .member-page section,
body[data-theme="dark"] .wallet-page section,
body[data-theme="dark"] .bag-row,
body[data-theme="dark"] .wallet-row,
body[data-theme="dark"] .gift-step { background: var(--card); color: var(--ink); }
body[data-theme="dark"] .moment-add { background: #243044; color: var(--ink); }
body[data-theme="dark"] .moment-compose textarea::placeholder { color: #6d7a90; }
body[data-theme="dark"] .imp-fold { background: #243044 !important; }
body[data-theme="dark"] .block-bar,
body[data-theme="dark"] .g-hit,
body[data-theme="dark"] .g-admin-add,
body[data-theme="dark"] .only-row .bubble,
body[data-theme="dark"] .home-action.home-danger { background: var(--card); color: var(--ink); }
body[data-theme="dark"] .report-cap,
body[data-theme="dark"] .report-page { background: #151c28; }
body[data-theme="dark"] .shape-card { background: var(--card); color: var(--ink); }
body[data-theme="dark"] .acct-card { background: var(--card); color: var(--ink); }
body[data-theme="dark"] .subpage { color: var(--ink); }
body[data-theme="dark"] .lock-mark { background: #243044; color: var(--ink); }
body[data-theme="dark"] #legal { background: #0d131c; }
body[data-theme="dark"] .modal-card { background: var(--card); }
body[data-theme="dark"] .bg-tile { color: var(--ink); }
body[data-theme="dark"] .gift { background: #0d131c; }
body[data-theme="dark"] .gift-block,
body[data-theme="dark"] .gift-records { background: var(--card); color: var(--ink); }

.hub-tile:active { transform: scale(.98); }
.auth-go:active { box-shadow: 0 6px 14px rgba(31, 111, 104, .2); }
.dock-item i { width: 56px; height: 56px; }
.hub-trio { gap: 6px; }
.hub-tile { padding: 12px 4px 10px; }
.hub-tile b { font-size: 12px; }
.conv, .disc-row, .row { max-width: 100%; }
@media (min-width: 400px) and (min-height: 720px) {
  .auth-chip.c3 { display: inline-block; width: max-content; }
}
@media (max-width: 380px) {
  .auth-chip.c2,
  .auth-chip.c3 { display: none; }
  .auth-chips { justify-content: flex-start; }
  .auth-brand { margin: 8px 0 14px; }
  .auth-brand img { width: 56px; height: 56px; }
  .pill { min-height: 46px; margin-bottom: 10px; }
  .h5-tiles { grid-template-columns: 1fr; }
  .hub-member { min-height: 72px; padding: 12px; }
  .hub-member span b { font-size: 15px; letter-spacing: .08em; }
  .me-hub { margin: 0 10px 4px; }
  .disc-row { padding: 13px 12px; font-size: 15px; }
  .demo { font-size: 12px; }
}
@media (max-height: 680px) {
  .auth-chip.c3 { display: none; }
  #auth { justify-content: flex-start; }
  .auth-brand { margin: 8px 0 14px; }
}
@media (max-height: 560px) {
  .auth-chips { display: none; }
  .auth-brand img { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-chip, .auth-sheet, .toast, .auth-go, .auth-ghost, .hub-tile, .h5-tile { animation: none; transition: none; }
}
#callLayer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #12151c;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#callRemote, #callLocal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #12151c;
}
#callLocal {
  width: 112px;
  height: 160px;
  inset: auto 16px 120px auto;
  border-radius: 12px;
  z-index: 1;
}
.call-panel {
  position: relative;
  z-index: 2;
  padding: 24px 20px 36px;
  text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.call-panel strong { display: block; font-size: 22px; }
.call-panel span { display: block; margin: 8px 0 20px; color: #c8cdd6; font-size: 14px; }
.call-actions { display: flex; justify-content: center; gap: 28px; }
.call-yes, .call-no {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
}
.call-yes { background: #1f6f68; }
.call-no { background: #c43c3c; }
#callLayer.out .call-yes { display: none; }
#apkLayer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(12, 16, 22, .55);
  display: grid;
  place-items: center;
  padding: 24px;
}
.apk-card {
  width: min(360px, 100%);
  background: #16181e;
  color: #eef1f6;
  border-radius: 20px;
  padding: 22px 20px 18px;
  text-align: center;
}
.apk-art { height: 92px; }
.apk-art svg { width: 160px; height: 92px; margin: 0 auto; }
.apk-card h2 { margin: 4px 0 16px; font-size: 22px; color: #4d8dff; font-weight: 750; }
.apk-card ol {
  margin: 0 8px 22px;
  padding: 0;
  list-style: none;
  text-align: left;
  color: #c9ced8;
  font-size: 16px;
  line-height: 2;
}
.apk-row { display: flex; gap: 12px; }
.apk-later, .apk-go, .apk-cancel {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 650;
}
.apk-later, .apk-cancel {
  border: 1.5px solid #8b909a;
  background: transparent;
  color: #eef1f6;
}
.apk-go { border: 0; background: #3b6dff; color: #fff; }
#apkDl { margin-bottom: 8px; }
#apkPct { margin: 0 0 10px; color: #dfe3ea; }
.apk-bar {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: #2a2e38;
  overflow: hidden;
  margin-bottom: 14px;
}
.apk-bar b {
  display: block;
  height: 100%;
  width: 0;
  background: #3b6dff;
}