/* ============================================================
   仿真手机 — 全局样式（v3 视觉重做）
   结构：手机壳(.phone-frame) > 屏幕(.phone-screen) > 页面(.screen)
   设计稿基准：420 × 880
   ============================================================ */

:root {
  --bg: #f7f7f8;                              /* 屏幕底色：整屏统一纯色 */
  --ink: #232326;                             /* 主文字 */
  --icon-ink: #2c2c2e;                        /* 图标线条 */
  --label: #6e6e73;                           /* 图标文字 */
  --muted: #98989e;

  /* 磨砂玻璃 */
  --glass-gray: rgba(120, 120, 128, 0.075);   /* 浅灰磨砂（图标底块） */
  --glass-border: rgba(0, 0, 0, 0.035);

  --tile-size: 60px;                          /* 图标底块统一尺寸（主屏 = Dock） */
  --grid-gap: 16px;                           /* 主网格间距 */
  --edge: 24px;                               /* 屏幕左右留白 */
  --radius-widget: 30px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 仿真机内不显示任何滚动指示条——iOS 橡皮筋滚动时闪现的白/灰滑条属于穿帮
   （主屏右缘的灰条、对话页的双滑条都是它），滚动手感不受影响 */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #e7e7ec;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ---------- 手机壳 ----------
   屏幕按 420×880 设计稿固定尺寸绘制，
   由 js/app.js 对整机做等比缩放适配窗口 */
.phone-frame {
  flex: none;
  width: 444px;
  height: 904px;
  background: #0d0d0f;
  border-radius: 56px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform-origin: center center;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 44px;
  background: var(--bg);
  overflow: hidden;
}

/* 小屏（真手机）铺满整个视口，杜绝底部留白 */
@media (max-width: 560px) {
  /* 整屏统一纯色：系统视口无论上下留缝都看不出边 */
  html, body { background: var(--bg); }
  .phone-frame {
    position: fixed;
    inset: 0;
    width: auto; height: auto;
    border-radius: 0; padding: 0;
    box-shadow: none;
    transform: none !important;
  }
  .phone-screen { border-radius: 0; }

  /* iOS 沉浸式(black-translucent)已知bug修正：
     height:100% 少算一个状态栏高度导致底部白条。
     必须让 html/body 文档本身也是 100vh 完整屏幕高度，画布才会铺满到底。 */
  html.standalone,
  html.standalone body {
    height: 100vh;
    min-height: calc(100% + env(safe-area-inset-top, 0px));
  }
  html.standalone .phone-frame {
    top: 0;
    bottom: auto;
    height: 100vh;
  }

  /* 沉浸式全屏下，把页面背景/壁纸延伸到视口下方的系统缝隙里 */
  body::after {
    content: "";
    position: fixed;
    left: 0; right: 0;
    top: 99.5%;
    height: 150px;
    z-index: -1;   /* 垫在内容层之下：视口下方兜底不变，页面内不再露出主屏壁纸的底边线 */
    background: var(--below-bg, var(--bg));
    background-size: cover;
    background-position: center bottom;
    pointer-events: none;
  }
}

/* ---------- 全屏（PWA / 添加到主屏幕）：任意设备都铺满整屏，去掉手机外壳 ----------
   之前只在窄屏（≤560px）去壳，导致 iPad 添加到主屏后仍显示手机边框；
   改为只要处于 standalone（真正全屏运行）就一律铺满，与设备宽度无关。 */
html.standalone,
html.standalone body {
  height: 100vh;
  background: var(--bg);
  min-height: calc(100% + env(safe-area-inset-top, 0px));
}
html.standalone .phone-frame {
  position: fixed;
  inset: 0;
  top: 0;
  bottom: auto;
  width: auto;
  height: 100vh;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transform: none !important;
}
html.standalone .phone-screen { border-radius: 0; }
html.standalone body::after {
  content: "";
  position: fixed;
  left: 0; right: 0;
  top: 99.5%;
  height: 150px;
  z-index: -1;
  background: var(--below-bg, var(--bg));
  background-size: cover;
  background-position: center bottom;
  pointer-events: none;
}

/* ---------- 页面容器 ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; }

/* ---------- 主屏内容（无顶栏，适配刘海安全区） ---------- */
.home-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(30px + env(safe-area-inset-top, 0px)) 0 0;
  min-height: 0;
}

/* ---------- 左右滑动的页面 ---------- */
.pages {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pages::-webkit-scrollbar { display: none; }
.pages.dragging { scroll-snap-type: none; }

.page {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  padding: 0 var(--edge);
  display: flex;
  flex-direction: column;
}

/* ---------- 时间块：宽度与左上小组件一致 ---------- */
.clock-block {
  width: calc(50% - var(--grid-gap) / 2);
  margin-bottom: 12px;
}

.clock-date {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #48484d;
  margin-bottom: 5px;
}

.clock-big {
  display: block;
  width: 100%;
  height: auto;
}
.clock-big text {
  font-family: inherit;
  font-size: 104px;
  font-weight: 700;
  fill: #141416;
  font-variant-numeric: tabular-nums;
}

/* ---------- 主网格：2×2，全部正方形单元 ---------- */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: 6px;
}

.home-grid > * { aspect-ratio: 1 / 1; min-width: 0; }

/* ---------- 小组件（正方形卡片） ---------- */
.widget {
  border-radius: var(--radius-widget);
  overflow: hidden;
  cursor: pointer;
}

/* 用户小组件：通透白玻璃，头像在左上、名字在头像正下方居中对齐 */
.widget-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px 18px 16px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  background-size: cover;
  background-position: center;
}

.widget-user .avatar {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.10);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: none;
  margin-bottom: 9px;
}
.widget-user .avatar svg { width: 76%; height: 76%; }
.widget-user .avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 仅名字：以头像中轴线为中心（头像宽42%，轴线在21%处），超长省略号 */
.user-name {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  width: fit-content;
  max-width: 92px;
  margin-left: 21%;
  transform: translateX(-50%);
  text-align: center;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-motto {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  max-width: 100%;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 上传了背景图后，文字加投影保证可读 */
.widget-user.has-bg .user-name,
.widget-user.has-bg .user-motto {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* 唱片机小组件（背景画在 SVG 里） */
.widget-vinyl {
  padding: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.vinyl-svg { width: 100%; height: 100%; display: block; }

/* 唱片缓慢旋转 */
.vinyl-svg .disc {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: disc-spin 18s linear infinite;
}
@keyframes disc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- 图标组：2×2，与小组件同外框对齐 ---------- */
.icon-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: var(--grid-gap);
  row-gap: 2px;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 浅灰磨砂图标底块（主屏与 Dock 完全一致） */
.app-icon .icon-tile {
  width: var(--tile-size);
  aspect-ratio: 1;
  border-radius: 27%;
  background: var(--glass-gray);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}
.app-icon:active .icon-tile { transform: scale(0.9); }

.app-icon .icon-tile svg {
  width: 50%;
  height: 50%;
  color: var(--icon-ink);
}

.app-icon .icon-label {
  margin-top: 6px;
  font-size: 11px;
  color: var(--label);
  line-height: 1;
  white-space: nowrap;
}

/* ---------- 分页圆点 ---------- */
.page-dots {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 12px;
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d4d4d9;
  cursor: pointer;
  transition: background 0.2s;
}
.dot.active { background: #48484d; }

/* ---------- Dock：透明白色磨砂 ---------- */
.dock-wrap {
  flex: none;
  padding: 0 var(--edge);
}

.dock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 32px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.07);
}

.dock .app-icon .icon-label { display: none; }

/* ---------- Home indicator ---------- */
.home-indicator {
  flex: none;
  width: 36%;
  height: 5px;
  border-radius: 3px;
  background: #1c1c1e;
  opacity: 0.85;
  margin: 0 auto calc(9px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 应用页面（框架占位） ---------- */
.screen-app {
  background: var(--bg);
  z-index: 10;
  animation: app-in 0.22s ease;
}

@keyframes app-in {
  from { transform: translateY(4%) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.app-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 14px 12px;
}

.app-back {
  border: none;
  background: none;
  color: var(--ink);
  font-size: 17px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 6px 4px 0;
}
.app-back svg { width: 22px; height: 22px; }

.app-title { font-size: 17px; font-weight: 600; color: var(--ink); }

.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  font-size: 14px;
}
.app-body .big-icon {
  width: 84px; height: 84px;
  border-radius: 24%;
  background: var(--glass-gray);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
}
.app-body .big-icon svg { width: 44px; height: 44px; color: var(--icon-ink); }

/* ============================================================
   全屏模式（添加到主屏幕 / PWA standalone）专属适配
   ============================================================ */
html.standalone .home-content {
  padding-top: calc(46px + env(safe-area-inset-top, 0px));
}

html.standalone .home-indicator { display: none; }

html.standalone .dock { margin-bottom: 0; }

/* 底栏位于系统 home indicator 手势区之上（正常 iOS Dock 位置） */
html.standalone .dock-wrap {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}

html.standalone .screen-app .app-body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   应用内 UI 组件库（美化 / 设置 / 档案 / 聊天 / 世界书）
   ============================================================ */

input, textarea, select, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
  font-family: inherit;
}

/* 头部右侧操作按钮 */
.app-header { position: relative; }
.app-action {
  position: absolute;
  right: 16px;
  bottom: 8px;
  border: none;
  background: rgba(120, 120, 128, 0.1);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 14px;
  cursor: pointer;
}

/* 可滚动应用页面 */
.app-page {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  min-height: 0;
}

/* 分区标题 / 卡片 */
.sec-title {
  font-size: 13px;
  font-weight: 600;
  color: #8e8e93;
  margin: 16px 6px 8px;
}
.sec-sub { font-size: 11px; font-weight: 400; color: #b3b3b9; }

.card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 6px;
}

/* 按钮 */
.btn {
  border: none;
  background: #1c1c1e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 14px;
  cursor: pointer;
}
.btn.ghost { background: rgba(120, 120, 128, 0.1); color: var(--ink); }
.btn.ghost:disabled { opacity: 0.4; }
.btn.danger { background: #fceeee; color: #d64545; }
.btn.wide { display: block; width: 100%; margin: 22px 0 8px; }
.btn-row { display: flex; gap: 10px; margin-top: 14px; }

.mini-btn {
  border: none;
  background: rgba(120, 120, 128, 0.1);
  color: var(--ink);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.mini-btn.danger { color: #d64545; }

/* 表单 */
.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block;
  font-size: 12px;
  color: #8e8e93;
  margin: 0 4px 5px;
}
.input {
  width: 100%;
  border: none;
  outline: none;
  background: rgba(120, 120, 128, 0.08);
  border-radius: 12px;
  padding: 12px 13px;
  font-size: 16px;
  color: var(--ink);
}
.input.ta { resize: none; line-height: 1.5; }
select.input { appearance: none; -webkit-appearance: none; }

.cf-block { margin: 14px 2px; }
.cf-label {
  font-size: 13px;
  font-weight: 600;
  color: #6e6e73;
  margin: 0 4px 6px;
}

/* 列表 */
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.list-item:last-child { border-bottom: none; }
.li-main { flex: 1; min-width: 0; }
.li-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.li-sub {
  font-size: 12.5px;
  color: #98989e;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.li-time { font-size: 11px; color: #b3b3b9; flex: none; }
.chevron { color: #c9c9ce; font-size: 20px; flex: none; }

.tag {
  display: inline-block;
  font-size: 10px;
  padding: 1.5px 7px;
  border-radius: 8px;
  background: rgba(120, 120, 128, 0.12);
  color: #6e6e73;
  vertical-align: 1px;
}
.tag.off { background: #fceeee; color: #d64545; }

/* 头像 */
.c-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: rgba(120, 120, 128, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.c-avatar-empty svg { width: 55%; height: 55%; color: #98989e; }

/* 空状态 */
.empty-state {
  text-align: center;
  color: #8e8e93;
  font-size: 15px;
  font-weight: 600;
  padding: 90px 30px 0;
}
.empty-icon {
  width: 74px; height: 74px;
  margin: 0 auto 16px;
  border-radius: 24%;
  background: rgba(120, 120, 128, 0.08);
  display: flex; align-items: center; justify-content: center;
}
.empty-icon svg { width: 36px; height: 36px; color: #b3b3b9; }
.empty-sub { font-size: 12px; font-weight: 400; color: #b3b3b9; margin-top: 8px; line-height: 1.7; }
.empty-line { text-align: center; font-size: 12px; color: #b3b3b9; padding: 10px 0; }
.ver-line { text-align: center; font-size: 11px; color: #c9c9ce; margin-top: 22px; }

/* ---------- 美化 ---------- */
.wp-preview {
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex; align-items: center; justify-content: center;
}
.wp-preview img { width: 100%; height: 100%; object-fit: cover; }
.wp-empty { text-align: center; color: #b3b3b9; font-size: 12px; }
.wp-empty svg { width: 30px; height: 30px; display: block; margin: 0 auto 6px; }
.wp-empty em { font-style: normal; }

.bz-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
}
.bz-cell { display: flex; flex-direction: column; align-items: center; }
.bz-cell .icon-tile {
  width: 54px; height: 54px; aspect-ratio: auto;
  cursor: pointer;
}
.bz-name { font-size: 11px; color: #6e6e73; margin-top: 5px; }
.bz-reset { font-size: 10.5px; color: #d64545; margin-top: 2px; cursor: pointer; }
.bz-reset-empty { visibility: hidden; }

/* 图标自定义图片 */
.icon-tile.has-img { padding: 0; overflow: hidden; }
.tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 主屏有壁纸时的文字可读性 ---------- */
.screen-home.has-wallpaper .clock-date,
.screen-home.has-wallpaper .icon-label { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.screen-home.has-wallpaper .clock-big text { fill: #fff; }
.screen-home.has-wallpaper .dot { background: rgba(255,255,255,0.55); }
.screen-home.has-wallpaper .dot.active { background: #fff; }

/* ---------- 档案 ---------- */
.char-hero { text-align: center; padding: 18px 0 6px; }
.char-hero-avatar { display: inline-block; cursor: pointer; }
.char-hero-name {
  display: block;
  width: 70%;
  margin: 12px auto 2px;
  border: none; outline: none;
  background: none;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.char-hero-hint { font-size: 11px; color: #b3b3b9; }

.char-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff;
  border-radius: 18px;
  padding: 13px 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

/* 开关 */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 4px;
}
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 48px; height: 29px;
  border-radius: 15px;
  background: rgba(120, 120, 128, 0.2);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.switch:checked { background: #34c759; }
.switch:checked::after { transform: translateX(19px); }

/* ---------- 聊天 ---------- */
.chat-app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 16px;
  min-height: 0;
}

.app-tabbar {
  flex: none;
  display: flex;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #98989e;
  cursor: pointer;
}
.tab-item svg { width: 24px; height: 24px; }
.tab-item.active { color: var(--ink); font-weight: 600; }

/* 会话页 */
.chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-msgs {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px;
  min-height: 0;
}
.msg {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.msg.mine { flex-direction: row-reverse; }
.bubble {
  max-width: 72%;
  padding: 10px 13px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.theirs .bubble {
  background: #ffffff;
  color: var(--ink);
  border-top-left-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.msg.mine .bubble {
  background: #1c1c1e;
  color: #fff;
  border-top-right-radius: 6px;
}
.msg-sys {
  text-align: center;
  font-size: 11px;
  color: #b3b3b9;
  margin: 12px auto;
  max-width: 80%;
}

.chat-inputbar {
  flex: none;
  display: flex;
  gap: 9px;
  padding: 9px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: rgba(120, 120, 128, 0.08);
  border-radius: 20px;
  padding: 11px 16px;
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.chat-send {
  flex: none;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: #1c1c1e;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-send svg { width: 20px; height: 20px; }

/* 朋友圈（v0.11 重做：全宽背景图 + 头像/网名/个签均可自定义） */
.mo-head {
  position: relative;
  margin: -4px -16px 0;
  height: 232px;
  background: linear-gradient(155deg, #35353c, #121215);
  cursor: pointer;
  overflow: visible;
}
.mo-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mo-bg-hint {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.mo-reset {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  padding: 4px 10px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 网名在头像正左方：与头像垂直居中对齐 */
.mo-nick {
  position: absolute;
  right: 94px; bottom: 4px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mo-avatar {
  position: absolute;
  right: 16px; bottom: -16px;
}
.mo-avatar .c-avatar {
  border: 3px solid var(--bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.mo-sig {
  text-align: right;
  font-size: 12px;
  color: #98989e;
  margin: 32px 18px 22px 40px;
  min-height: 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mo-post {
  display: flex;
  gap: 11px;
  padding: 14px 4px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.mo-main { flex: 1; min-width: 0; }
.mo-name { font-size: 14.5px; font-weight: 700; color: #2c4a6e; }
.mo-text { font-size: 15px; color: var(--ink); margin: 4px 0 6px; white-space: pre-wrap; word-break: break-word; }
.mo-meta { font-size: 11px; color: #b3b3b9; }
.mo-del { color: #2c4a6e; margin-left: 10px; cursor: pointer; }

/* 其他 tab */
.other-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.other-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 0 14px;
  border-radius: 14px;
  background: rgba(120, 120, 128, 0.06);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.other-cell svg { width: 26px; height: 26px; color: #6e6e73; }
.other-cell em { font-style: normal; font-size: 10px; color: #b3b3b9; }

/* 我的 tab */
.me-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  margin: 8px 0 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.me-name { font-size: 20px; font-weight: 700; color: var(--ink); }
.stat-row { display: flex; }
.stat { flex: 1; text-align: center; }
.stat b { display: block; font-size: 19px; color: var(--ink); }
.stat span { font-size: 11px; color: #98989e; }

/* 美化页图标块补充样式（复用主屏样式） */
.bz-cell .icon-tile {
  border-radius: 27%;
  background: var(--glass-gray);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bz-cell .icon-tile svg { width: 50%; height: 50%; color: var(--icon-ink); }

/* 分段选择器（全局/局部） */
.seg {
  display: flex;
  background: rgba(120, 120, 128, 0.08);
  border-radius: 12px;
  padding: 3px;
}
.seg-btn {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #6e6e73;
  cursor: pointer;
  transition: all 0.15s;
}
.seg-btn.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.seg-hint { font-size: 11px; color: #b3b3b9; margin: 7px 4px 0; }

/* 轻提示 */
.toast {
  position: absolute;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(28, 28, 30, 0.92);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 20px;
  opacity: 0;
  transition: all 0.25s;
  z-index: 99;
  pointer-events: none;
  max-width: 80%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   v0.10.0 聊天增强：面具 / 表情包 / 拓展栏 / 语音条 / 朋友圈封面
   ============================================================ */

/* 标签 chips */
.tag-box { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(120, 120, 128, 0.1);
  color: var(--ink);
  font-size: 13px;
  padding: 6px 11px;
  border-radius: 12px;
}
.tag-chip i {
  font-style: normal;
  color: #98989e;
  cursor: pointer;
  font-size: 11px;
}

/* 分类 chips 行 */
.cat-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 10px;
}
.cat-row::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: #6e6e73;
  background: rgba(120, 120, 128, 0.08);
  padding: 7px 14px;
  border-radius: 14px;
  cursor: pointer;
}
.cat-chip.active { background: #1c1c1e; color: #fff; }
.cat-chip.cat-add { background: none; border: 1px dashed #c9c9ce; color: #98989e; }

/* 表情包网格 */
.stk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stk-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(120, 120, 128, 0.06);
  cursor: pointer;
}
.stk-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stk-del {
  position: absolute;
  top: 3px; right: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* 聊天输入区扩展 */
.chat-plus {
  flex: none;
  width: 40px; height: 44px;
  border: none;
  background: none;
  font-size: 26px;
  font-weight: 300;
  color: #6e6e73;
  cursor: pointer;
  line-height: 1;
}
.chat-reply {
  flex: none;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.1);
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-reply svg { width: 21px; height: 21px; }
.chat-reply:disabled { opacity: 0.4; }

/* 表情面板 */
.chat-panel {
  flex: none;
  max-height: 250px;
  overflow-y: auto;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.panel-grid { grid-template-columns: repeat(5, 1fr); }

/* 表情消息 */
.msg-stk {
  max-width: 120px;
  max-height: 120px;
  border-radius: 12px;
  display: block;
}

/* 语音条（播放键 + 声波纹） */
.voice-wrap { max-width: 72%; }
.voice-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.msg.theirs .voice-bar {
  background: #ffffff;
  border-top-left-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.voice-play {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.14);
  display: flex; align-items: center; justify-content: center;
}
.msg.mine .voice-play { background: rgba(255, 255, 255, 0.22); }
.voice-play svg { width: 11px; height: 11px; margin-left: 1px; }
.voice-wave {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 20px;
  overflow: hidden;
}
.voice-wave i {
  flex: none;
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.75;
}
.voice-wave i:nth-child(7n+1) { height: 7px; }
.voice-wave i:nth-child(7n+2) { height: 13px; }
.voice-wave i:nth-child(7n+3) { height: 9px; }
.voice-wave i:nth-child(7n+4) { height: 17px; }
.voice-wave i:nth-child(7n+5) { height: 11px; }
.voice-wave i:nth-child(7n+6) { height: 15px; }
.voice-wave i:nth-child(7n+7) { height: 8px; }
.voice-bar.playing .voice-wave i {
  animation: wave-bounce 0.9s ease-in-out infinite;
}
.voice-bar.playing .voice-wave i:nth-child(3n+2) { animation-delay: 0.15s; }
.voice-bar.playing .voice-wave i:nth-child(3n+3) { animation-delay: 0.3s; }
@keyframes wave-bounce {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1.25); }
}
.voice-dur { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* 语音条宽度由秒数精确控制，不受气泡 72% 限宽影响（否则展开转写会把它撑宽） */
.voice-bar {
  max-width: none !important;
  /* fit-content：宽度只由自身内容决定，转写块再宽也不会把语音条拉长 */
  width: -webkit-fit-content;
  width: fit-content;
  padding: 9px 12px;
}
/* 波浪区按条数定宽，禁止被 flex 挤压裁切 */
.voice-bar .voice-wave {
  flex: none;
  min-width: 0;
  overflow: visible;
  justify-content: space-between;
}
/* 自己发的语音条：转写块变宽时保持贴右，不往前跳 */
.msg.mine .voice-bar { margin-left: auto; }

/* 语音转写：小字说明块，宽度独立于语音条（展开不会“撑长”语音条） */
.voice-text {
  display: none;
  margin-top: 5px;
  width: fit-content;
  max-width: 100%;
  background: rgba(120, 120, 128, 0.09);
  color: #6e6e73;
  font-size: 12.5px;
  line-height: 1.55;
  border-radius: 11px;
  padding: 7px 10px;
  word-break: break-word;
  white-space: pre-wrap;
}
.msg.mine .voice-text { margin-left: auto; }
.voice-wrap.open .voice-text { display: block; }

/* 温度滑杆（设置 → API） */
.temp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
}
.temp-val {
  flex: none;
  width: 32px;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 120, 128, 0.2);
  outline: none;
  min-width: 0;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

/* ============================================================
   v0.12.0：拓展功能栏 / 语音 / 红包·转账·礼物 / 钱包 / 记忆
   ============================================================ */

/* 拓展功能菜单 */
.fn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
  padding: 8px 2px 12px;
}
.fn-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fn-tile {
  width: 54px; height: 54px;
  border-radius: 17px;
  background: rgba(120, 120, 128, 0.08);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease;
}
.fn-cell:active .fn-tile { transform: scale(0.92); }
.fn-tile svg { width: 25px; height: 25px; color: var(--icon-ink); }
.fn-cell span { font-size: 11px; color: #6e6e73; }

.panel-title {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: #98989e;
  align-self: center;
}

/* 语音面板 */
.rec-btn {
  width: 100%;
  height: 54px;
  border-radius: 17px;
  border: 1.5px dashed #c9c9ce;
  background: none;
  font-size: 14.5px;
  font-weight: 600;
  color: #6e6e73;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.rec-btn.rec {
  background: #1c1c1e;
  color: #fff;
  border: 1.5px solid #1c1c1e;
}
.voice-or { text-align: center; font-size: 11px; color: #b3b3b9; margin: 12px 0 10px; }
.voice-type-row { display: flex; gap: 9px; padding-bottom: 4px; }

/* 红包 / 转账 / 礼物 消息卡片（黑白灰体系） */
.msg-card {
  width: 212px;
  border-radius: 16px;
  padding: 13px 14px 8px;
}
.rp-bubble {
  background: linear-gradient(150deg, #3c3c43, #17171a);
  color: #fff;
}
.tf-bubble {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
}
.gift-bubble {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.rp-note { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.rp-sub { font-size: 11px; opacity: 0.72; margin-top: 3px; }
.tf-amt { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gift-head { display: flex; align-items: center; gap: 11px; }
.gift-ic {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.1);
  display: flex; align-items: center; justify-content: center;
}
.gift-ic svg { width: 21px; height: 21px; color: var(--icon-ink); }
.gift-n { font-size: 14.5px; font-weight: 600; }
.card-foot {
  font-size: 10px;
  opacity: 0.6;
  border-top: 0.5px solid rgba(255, 255, 255, 0.28);
  margin-top: 9px;
  padding-top: 5px;
}
.tf-bubble .card-foot,
.gift-bubble .card-foot { border-top-color: rgba(0, 0, 0, 0.08); color: #98989e; opacity: 1; }

/* 聊天内弹窗（红包 / 转账） */
.chat-modal {
  /* fixed + 100vh（v0.47.27）：原 absolute inset:0 在 iOS 沉浸式下包含块少算一截，
     遮罩盖不满屏、底部露白且随拖动错位（潜望证据夹弹层踩过）；vh 单位不受该 bug 影响 */
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 60;
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.16s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.chat-modal-card {
  width: 82%;
  background: #fff;
  border-radius: 22px;
  padding: 22px 20px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.modal-title {
  text-align: center;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.amt-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: 10px;
}
.amt-cny { font-size: 20px; font-weight: 700; color: var(--ink); }
.amt-input {
  border: none; outline: none; background: none;
  font-size: 32px;
  font-weight: 700;
  width: 150px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.amt-input::placeholder { color: #d4d4d9; }
.amt-input::-webkit-inner-spin-button,
.amt-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.amt-input { -moz-appearance: textfield; appearance: textfield; }
.btn.rp, .btn.tf { background: #1c1c1e; }
.modal-bal { text-align: center; font-size: 11px; color: #b3b3b9; margin-top: 10px; }

/* 我的：简介卡片 + 余额行 */
.me-card { display: block; }
.me-top { display: flex; align-items: center; gap: 15px; }
.me-bal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  color: #8e8e93;
  cursor: pointer;
}
.me-bal b {
  flex: 1;
  text-align: right;
  font-size: 17px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 钱包页 */
.wallet-hero {
  background: linear-gradient(150deg, #2e2e35, #101013);
  border-radius: 22px;
  padding: 26px 22px 20px;
  color: #fff;
  margin: 8px 0 10px;
}
.wh-label { font-size: 12px; opacity: 0.6; }
.wallet-hero b {
  display: block;
  font-size: 40px;
  font-weight: 700;
  margin: 8px 0 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.wh-id { font-size: 10.5px; opacity: 0.45; line-height: 1.5; }
.wl-amt {
  flex: none;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wl-amt.in { color: #34c759; }

/* 其他页：记忆管理入口图标 */
.other-ic {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.08);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.other-ic svg { width: 21px; height: 21px; color: var(--icon-ink); }

/* 记忆管理 */
.mem-snippet {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-snippet.off { color: #b3b3b9; }
.mem-meta { font-size: 13px; color: #8e8e93; padding: 2px 4px; line-height: 1.6; }

/* ============================================================
   v0.13.0：语音通话 / 记忆时间轴 / 细节
   ============================================================ */

/* 通话页（拨打 / 来电共用） */
.call-screen {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: linear-gradient(168deg, #2b2b31, #0b0b0d);
  display: flex;
  flex-direction: column;
  color: #fff;
  animation: fade-in 0.2s ease;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
.call-head { text-align: center; flex: none; }
.call-head .c-avatar { border: none; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); }
.call-name { font-size: 22px; font-weight: 700; margin-top: 16px; }
.call-status {
  font-size: 12.5px;
  opacity: 0.55;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
  min-height: 16px;
}
.call-caps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.call-cap { font-size: 14.5px; line-height: 1.55; opacity: 0.92; }
.call-cap.u { text-align: right; opacity: 0.55; }
.call-inputrow { flex: none; display: flex; gap: 9px; padding: 0 16px 16px; }
.call-inputrow .chat-input {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.call-inputrow .chat-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.call-inputrow .chat-send { background: rgba(255, 255, 255, 0.16); }
.call-btns { flex: none; display: flex; justify-content: center; padding-top: 2px; }
.call-hang, .call-pick {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.call-hang { background: #de4f47; }
.call-hang svg { width: 26px; height: 26px; transform: rotate(135deg); }
.call-pick { background: #34c759; }
.call-pick svg { width: 26px; height: 26px; }
.call-in-btns {
  flex: none;
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 10px;
}
.call-in-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  opacity: 0.85;
}

/* 记忆管理：角色卡片 + 时间轴 */
.mem-count { flex: none; font-size: 11.5px; color: #98989e; }
.mem-tl {
  position: relative;
  padding: 10px 2px 10px 22px;
}
.mem-tl::before {
  content: "";
  position: absolute;
  left: 8px; top: 18px; bottom: 18px;
  width: 1.5px;
  background: rgba(0, 0, 0, 0.07);
}
.mem-node { position: relative; margin-bottom: 14px; cursor: pointer; }
.mem-dot {
  position: absolute;
  left: -18.5px; top: 18px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1c1c1e;
  border: 2px solid var(--bg);
}
.mem-node.off .mem-dot { background: #c9c9ce; }
.mem-card {
  background: #fff;
  border-radius: 16px;
  padding: 13px 15px 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.mem-node.off .mem-card { opacity: 0.55; }
.mem-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mem-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
  font-size: 11px;
  color: #b3b3b9;
}
.switch.mini { width: 38px; height: 23px; border-radius: 12px; }
.switch.mini::after { width: 18px; height: 18px; top: 2.5px; left: 2.5px; }
.switch.mini:checked::after { transform: translateX(15px); }

/* ============================================================
   v0.14.0：左滑会话 / 长按消息 / 引用 / 撤回 / 生图
   ============================================================ */

/* 会话左滑（置顶 / 删除） */
.swipe-row {
  position: relative;
  overflow: hidden;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.swipe-row:last-child { border-bottom: none; }
.swipe-row .conv-item {
  position: relative;
  z-index: 1;
  background: var(--bg);
  transition: transform 0.22s ease;
  border-bottom: none;
  touch-action: pan-y;
}
.swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  z-index: 0;
}
.sw-btn {
  width: 70px;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sw-pin { background: #8e8e93; }
.sw-del { background: #1c1c1e; }

/* 引用 */
.quote-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 12.5px;
  color: #6e6e73;
}
.quote-bar .q-icon { flex: none; display: flex; }
.quote-bar .q-icon svg { width: 15px; height: 15px; color: #98989e; }
.quote-bar .q-txt {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quote-bar i {
  flex: none;
  font-style: normal;
  color: #98989e;
  padding: 2px 6px;
  cursor: pointer;
}
.q-block {
  font-size: 11.5px;
  line-height: 1.4;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(120, 120, 128, 0.1);
  color: #6e6e73;
  margin-bottom: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg.mine .bubble .q-block {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
}

/* 撤回 */
.recall-line { cursor: pointer; }
.recall-line u {
  text-decoration: none;
  color: #6e6e73;
  margin-left: 2px;
}
.recall-card { text-align: center; }
.recall-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #6e6e73;
  background: rgba(120, 120, 128, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.recall-who { font-size: 11px; color: #b3b3b9; margin-bottom: 12px; }
.recall-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
  padding: 0 4px;
}
.recall-pic {
  max-width: 100%;
  max-height: 240px;
  border-radius: 14px;
  display: block;
  margin: 4px auto;
}
.recall-note-box {
  margin-top: 16px;
  background: rgba(120, 120, 128, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
}
.recall-note-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #98989e;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.recall-note { font-size: 13.5px; line-height: 1.6; color: #48484d; }

/* 长按操作面板 */
.sheet-mask {
  position: absolute;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in 0.16s ease;
}
.msg-sheet {
  position: absolute;
  left: 10px; right: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 66;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 16px 16px 14px;
  box-shadow: 0 -6px 44px rgba(0, 0, 0, 0.2);
  animation: sheet-up 0.22s ease;
}
@keyframes sheet-up {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.sheet-snippet {
  font-size: 12px;
  line-height: 1.5;
  color: #98989e;
  background: rgba(120, 120, 128, 0.08);
  padding: 9px 12px;
  border-radius: 12px;
  max-height: 56px;
  overflow: hidden;
  margin-bottom: 14px;
}
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 6px;
}
.sheet-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #48484d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet-cell:active .sheet-ic { transform: scale(0.92); }
.sheet-ic {
  width: 46px; height: 46px;
  border-radius: 15px;
  background: rgba(120, 120, 128, 0.09);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s;
}
.sheet-ic svg { width: 21px; height: 21px; color: var(--icon-ink); }

/* 图片 / 照片消息 */
.msg-photo-wrap { max-width: 68%; }
.msg-photo {
  max-width: 100%;
  max-height: 260px;
  border-radius: 14px;
  display: block;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}
.photo-card { width: 200px; }
.photo-card {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.photo-card .card-foot { border-top-color: rgba(0, 0, 0, 0.08); color: #98989e; opacity: 1; }
.photo-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #98989e;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.photo-card-head svg { width: 15px; height: 15px; color: #98989e; }
.photo-card-text { font-size: 13.5px; line-height: 1.6; color: #48484d; word-break: break-word; }

/* 生图测试预览 */
.img-test-box {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(120, 120, 128, 0.06);
}
.img-test-box img { width: 100%; display: block; }

/* ============================================================
   v0.16.0：MiniMax 区域切换 / 可领取红包转账
   ============================================================ */
.region-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 2px 12px;
}
.region-row .sec-sub { margin-left: 2px; }

/* 可领取的红包 / 转账（对方发来、未领取）轻微呼吸提示 */
.msg-card.claimable { cursor: pointer; position: relative; }
.msg-card.rp-bubble.claimable { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 2px 12px rgba(0, 0, 0, 0.14); }
.msg-card.tf-bubble.claimable { box-shadow: 0 0 0 1.5px rgba(28, 28, 30, 0.12), 0 1px 8px rgba(0, 0, 0, 0.06); }
.msg-card.claimable:active { transform: scale(0.97); }

/* ============================================================
   v0.17.0：旁白 / 多选 / 复制 / 右滑引用手势 / 表情释义
   ============================================================ */

/* 消息横向手势：纵向交给浏览器滚动，横向交给 JS，避免抖动 */
.msg[data-mi], .msg-narr[data-mi] { touch-action: pan-y; position: relative; }

/* 右滑将触发引用时的高亮 */
.msg.q-ready .bubble,
.msg.q-ready .msg-card,
.msg.q-ready .voice-bar,
.msg.q-ready .msg-photo,
.msg.q-ready .msg-stk {
  box-shadow: 0 0 0 2px rgba(28, 28, 30, 0.28), 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* 旁白（第三人称动作/环境描写） */
.msg-narr {
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: #9a9aa0;
  font-style: italic;
  margin: 10px auto;
  max-width: 84%;
  padding: 2px 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 多选模式 */
.sel-dot {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1.5px solid #c4c4c9;
  background: #fff;
  align-self: center;
  transition: all 0.15s;
}
.msg.mine .sel-dot { order: 3; }
.msg.sel .sel-dot,
.msg-narr.sel .sel-dot {
  background: #1c1c1e;
  border-color: #1c1c1e;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #1c1c1e;
}
.msg-narr { display: block; }
.select-mode .msg-narr { position: relative; }
.select-mode .msg-narr .sel-dot {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
}
.msg.sel > .bubble,
.msg.sel .msg-card,
.msg.sel .voice-bar { outline: 2px solid rgba(28, 28, 30, 0.2); outline-offset: 1px; }
.select-mode .msg, .select-mode .msg-narr { cursor: pointer; }

.select-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.sel-cancel {
  border: none; background: none;
  font-size: 15px; color: var(--ink);
  cursor: pointer; padding: 8px 4px;
}
.sel-count { font-size: 13px; color: #8e8e93; }
.sel-del {
  border: none;
  background: #1c1c1e;
  color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 9px 20px;
  border-radius: 14px;
  cursor: pointer;
}
.sel-del:active { opacity: 0.85; }

/* 表情包释义 */
.stk-cell .stk-desc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-size: 9.5px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  padding: 8px 4px 3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ============================================================
   v0.18.0：长按不选中 / 正在输入 / 生图占位 / 语音条动态 / 右滑手势
   ============================================================ */

/* 消息区禁用系统长按菜单与文本选择（避免长按触发浏览器复制/查询、整页高亮） */
.chat-msgs, .chat-msgs * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.chat-msgs img { -webkit-user-drag: none; }

/* 右滑到位、已触发引用的高亮 */
.msg.q-done .bubble,
.msg.q-done .msg-card,
.msg.q-done .voice-bar,
.msg.q-done .msg-photo,
.msg.q-done .msg-stk {
  box-shadow: 0 0 0 2px rgba(28, 28, 30, 0.4), 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* 正在输入（三点跳动气泡） */
.typing-row {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 18px;
  border-top-left-radius: 6px;
  padding: 13px 15px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.typing-bubble i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c2c2c8;
  animation: typing-dot 1.2s infinite ease-in-out;
}
.typing-bubble i:nth-child(2) { animation-delay: 0.18s; }
.typing-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* 生图占位气泡 */
.pic-loading {
  width: 180px; height: 135px;
  border-radius: 14px;
  background: linear-gradient(100deg, #ececee 30%, #f6f6f8 50%, #ececee 70%);
  background-size: 220% 100%;
  animation: pic-shimmer 1.3s linear infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #a0a0a6;
}
@keyframes pic-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.pic-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(120, 120, 128, 0.25);
  border-top-color: #8a8a90;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pic-loading-t { font-size: 12px; }

/* 语音条：行内布局（声波条 + 转文字按钮） */
.voice-row { display: flex; align-items: center; gap: 7px; }
.msg.mine .voice-row { flex-direction: row-reverse; }
.voice-bar { cursor: pointer; }
.voice-wave i { transition: transform 0.15s; }
.voice-tx-btn {
  flex: none;
  font-size: 11px;
  color: #8e8e93;
  background: rgba(120, 120, 128, 0.12);
  border-radius: 9px;
  padding: 3px 8px;
  cursor: pointer;
}

/* ============================================================
   v0.19.0：翻译 / 会话卡片 / 收藏消息
   ============================================================ */

/* 双语翻译：气泡内的译文块 */
.msg-trans {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  font-size: 12.5px;
  line-height: 1.55;
  opacity: 0.72;
}
.msg.mine .bubble .msg-trans { border-top-color: rgba(255, 255, 255, 0.25); }
.voice-text .msg-trans { border-top-color: rgba(0, 0, 0, 0.07); }

/* 聊天列表：白色圆角卡片，和底色区分开 */
.chat-content .swipe-row {
  border-radius: 18px;
  margin-bottom: 10px;
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.045);
}
.chat-content .swipe-row .conv-item {
  background: #ffffff;
  padding: 13px 15px;
}
.chat-content .swipe-row .sw-btn:last-child { border-radius: 0 18px 18px 0; }

/* 收藏消息卡片 */
.fav-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 13px 15px 11px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.045);
}
.fav-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.fav-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fav-time { flex: 1; font-size: 11px; color: #b3b3b9; }
.fav-del {
  flex: none;
  font-style: normal;
  font-size: 12px;
  color: #b3b3b9;
  padding: 3px 7px;
  cursor: pointer;
}
.fav-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
}
.fav-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #6e6e73;
  background: rgba(120, 120, 128, 0.1);
  border-radius: 7px;
  padding: 1.5px 7px;
  margin-right: 7px;
  vertical-align: 1.5px;
}
.fav-pic {
  max-width: 62%;
  max-height: 180px;
  border-radius: 12px;
  display: block;
}
.fav-src {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
  font-size: 10.5px;
  color: #b3b3b9;
}

/* ============================================================
   v0.20.0：收款确认弹窗 / 外卖 / 当下心声面板 / 数据备份
   ============================================================ */

/* 已处理（收下/拒绝）的钱物卡片整体变淡 */
.msg-card.done { opacity: 0.62; }

/* 收款确认弹窗 */
.claim-hero {
  border-radius: 18px;
  padding: 22px 16px 18px;
  text-align: center;
  margin-bottom: 4px;
}
.claim-hero.rp {
  background: linear-gradient(150deg, #3c3c43, #17171a);
  color: #fff;
}
.claim-hero.tf {
  background: #fff;
  color: var(--ink);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}
.claim-note { font-size: 13.5px; opacity: 0.82; margin-bottom: 8px; line-height: 1.5; }
.claim-hero.tf .claim-note { margin-bottom: 0; color: #8e8e93; opacity: 1; }
.claim-amt {
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.claim-from { text-align: center; font-size: 12px; color: #98989e; margin: 10px 0 2px; }
.claim-state {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #8e8e93;
  margin-top: 14px;
}
.claim-gift-ic {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: rgba(120, 120, 128, 0.09);
  margin: 2px auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.claim-gift-ic svg { width: 30px; height: 30px; color: var(--icon-ink); }
.claim-gift-n { text-align: center; font-size: 17px; font-weight: 700; color: var(--ink); }
.claim-gift-p { text-align: center; font-size: 12px; color: #98989e; margin-top: 4px; line-height: 1.5; }

/* 外卖消息卡片 */
.wm-bubble {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
}
.wm-head { display: flex; align-items: flex-start; gap: 10px; }
.wm-ic {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(150deg, #3a3a41, #1a1a1e);
  display: flex; align-items: center; justify-content: center;
}
.wm-ic svg { width: 20px; height: 20px; color: #fff; }
.wm-info { flex: 1; min-width: 0; }
.wm-shop { font-size: 14.5px; font-weight: 700; }
.wm-items {
  font-size: 11.5px;
  color: #8e8e93;
  margin-top: 2px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wm-amt {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.wm-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6e6e73;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.09);
}
.wm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8e8e93;
  flex: none;
}
.wm-dot.go {
  background: #34c759;
  animation: wm-pulse 1.1s ease-in-out infinite;
}
@keyframes wm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* 当下心声：透明毛玻璃全屏面板 */
.mind-screen {
  position: absolute;
  inset: 0;
  z-index: 72;
  background: rgba(247, 247, 248, 0.55);
  backdrop-filter: blur(34px) saturate(1.5);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: fade-in 0.22s ease;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 22px calc(34px + env(safe-area-inset-bottom, 0px));
}
.mind-close {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.14);
  color: #48484d;
  font-size: 13px;
  font-style: normal;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.mind-head { text-align: center; margin-bottom: 18px; }
.mind-head .c-avatar {
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.mind-nick { font-size: 21px; font-weight: 800; color: var(--ink); margin-top: 10px; }
.mind-sig { font-size: 12px; color: #8e8e93; margin-top: 4px; padding: 0 20px; line-height: 1.5; }
.mind-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.mind-stat {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 12px 6px 11px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mind-stat b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.mind-stat b.mind-mood {
  font-size: 15px;
  padding-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mind-stat span { font-size: 10px; color: #98989e; }
.mind-heart { display: inline-flex; animation: heart-beat 0.8s ease-in-out infinite; }
.mind-heart svg { width: 15px; height: 15px; color: #d95a60; }
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.28); }
  45%      { transform: scale(1); }
  60%      { transform: scale(1.14); }
}
.love-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 120, 128, 0.16);
  margin: 7px 12px 5px;
  overflow: hidden;
}
.love-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #1c1c1e;
}
.mind-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 15px 16px 13px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mind-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #98989e;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.mind-thought { font-size: 15px; line-height: 1.75; color: var(--ink); }
.mind-wb { padding: 9px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.05); }
.mind-wb:last-child { border-bottom: none; padding-bottom: 3px; }
.mind-wb-t { font-size: 13.5px; line-height: 1.6; color: #3a3a3f; }
.mind-wb-m { font-size: 10.5px; color: #b3b3b9; margin-top: 4px; }
.mind-shop-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.mind-shop-row:last-child { border-bottom: none; }
.ms-n { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: none; max-width: 48%; }
.ms-why { font-size: 11px; color: #98989e; flex: 1; text-align: right; line-height: 1.5; }
.mind-shop-row.cut .ms-n { text-decoration: line-through; color: #b3b3b9; font-weight: 500; }
.mind-shop-row.cut .ms-why { text-decoration: line-through; opacity: 0.7; }
.mind-foot { text-align: center; font-size: 11px; color: #98989e; margin-top: 6px; }
.mind-foot u {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  margin-left: 10px;
  cursor: pointer;
}
.mind-empty { text-align: center; padding-top: 110px; color: #8e8e93; font-size: 14px; }

/* 设置：数据备份 */
.backup-hint { font-size: 12px; color: #98989e; line-height: 1.7; }

/* ============================================================
   v0.21.0：拉黑 / 解除拉黑申请 / 线下预约 / 线下相处模式
   ============================================================ */

/* 会话列表拉黑标 */
.tag.block { background: #fbe6e6; color: #d64545; }

/* 红色感叹号：细描边小圆圈，克制的红 */
.ub-mark {
  flex: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid #d0454c;
  color: #d0454c;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ub-mark.small { width: 14px; height: 14px; font-size: 9px; margin-right: 7px; }

/* 解除拉黑申请气泡：白卡 + 左侧红色发丝线，其余全黑白灰 */
.unblock-bubble {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  border-left: 2.5px solid #d0454c;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.ub-head { display: flex; align-items: center; gap: 8px; }
.ub-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ub-kao-mini { flex: 1; text-align: right; font-size: 11px; color: #b3b3b9; white-space: nowrap; overflow: hidden; }
.ub-preview { font-size: 13px; color: #6e6e73; line-height: 1.55; margin: 8px 0 0; }
.ub-cardfoot { border-top-color: rgba(0, 0, 0, 0.06); color: #b3b3b9; opacity: 1; }
.ub-rejected { color: #d0454c; font-weight: 600; }

/* 解除拉黑详情弹窗 */
.ub-detail { text-align: left; padding-top: 26px; }
.ub-detail-head { text-align: center; margin-bottom: 4px; }
.ub-detail-head .c-avatar { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); }
.ub-detail-name { font-size: 17.5px; font-weight: 700; color: var(--ink); margin-top: 10px; }
.ub-detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #8e8e93;
  background: rgba(120, 120, 128, 0.08);
  border-radius: 10px;
  padding: 3.5px 11px;
  margin-top: 8px;
}
.ub-detail-tag i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #d0454c;
  font-style: normal;
}
.ub-kao-line { text-align: center; font-size: 15px; color: #98989e; margin: 12px 0 4px; }
.ub-thought {
  text-align: center;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  padding: 0 10px;
  margin-bottom: 16px;
}
.ub-block {
  background: rgba(120, 120, 128, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
}
.ub-block-label { font-size: 10.5px; font-weight: 700; color: #98989e; letter-spacing: 1.5px; margin-bottom: 6px; }
.ub-reason { font-size: 14px; line-height: 1.7; color: #3a3a3f; }
.ub-rejected-line {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #d0454c; font-weight: 600;
  margin-top: 16px;
}

/* 拉黑提示弹窗：头像 + 斜线圆环角标 */
.block-card { text-align: center; padding-top: 26px; }
.block-hero { position: relative; display: inline-block; margin-bottom: 12px; }
.block-hero .c-avatar { filter: grayscale(1); opacity: 0.85; }
.block-slash {
  position: absolute;
  right: -7px; bottom: -5px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.block-slash svg { width: 16px; height: 16px; color: #d0454c; }
.block-desc { font-size: 13px; color: #8e8e93; line-height: 1.7; padding: 0 6px; }

/* 线下邀约卡片（v0.26 重做：黑白灰，与整体一致） */
.appt-bubble {
  width: 236px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  color: var(--ink);
}
.appt-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #b3b3b9;
  margin-bottom: 6px;
}
.appt-topic { font-size: 15.5px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 9px; }
.appt-rows {
  border-top: 0.5px solid rgba(0, 0, 0, 0.07);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
  padding: 7px 0;
  margin-bottom: 9px;
  display: flex; flex-direction: column; gap: 4px;
}
.appt-row { font-size: 12.5px; color: #3a3a3f; display: flex; gap: 10px; }
.appt-row span { flex: none; color: #b3b3b9; font-size: 11.5px; line-height: 1.6; }
.appt-reason { font-size: 13px; line-height: 1.65; color: #6e6e73; margin-bottom: 11px; }
.appt-btns { display: flex; gap: 8px; }
.appt-yes, .appt-no {
  flex: 1;
  border: none;
  border-radius: 11px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.appt-yes { background: #1c1c1e; color: #fff; }
.appt-yes:active { opacity: 0.82; }
.appt-no { background: rgba(120, 120, 128, 0.1); color: #6e6e73; }
.appt-state { font-size: 12px; color: #98989e; text-align: center; padding: 4px 0 2px; }
.appt-bubble .card-foot { margin-top: 10px; }
.appt-bubble.done .appt-topic { color: #98989e; }

/* ---------- 线下相处模式（全屏，楼层制小说式，白色基调） ---------- */
.offline-screen {
  position: absolute;
  inset: 0;
  z-index: 74;
  display: flex;
  flex-direction: column;
  background: #fbfbfc;
  color: var(--ink);
  animation: fade-in 0.24s ease;
}
.offline-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 14px 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.offline-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.offline-title b { font-size: 16px; font-weight: 700; color: var(--ink); }
.offline-title span { font-size: 11px; color: #98989e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offline-set {
  flex: none;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.08);
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.offline-set svg { width: 19px; height: 19px; }
.offline-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 10px;
  min-height: 0;
}
/* 楼层卡（v0.26：一条 user + TA 的回应 = 同一层楼，卡内分上下两段） */
.of-floor {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 12px 15px 13px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.of-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.of-num {
  font-size: 10px;
  font-weight: 700;
  color: #b3b3b9;
  background: rgba(120, 120, 128, 0.08);
  border-radius: 7px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.of-time { font-size: 10.5px; color: #c4c4c9; margin-left: auto; }
/* 楼内段落：左侧一条细色线，我=灰、TA=玫瑰 */
.of-part { position: relative; padding-left: 12px; }
.of-part + .of-part { margin-top: 10px; }
.of-part::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: #e3cdd2;
}
.of-part.mine::before { background: #d8d8dd; }
.of-who { font-size: 11.5px; font-weight: 700; color: #98989e; margin-bottom: 3px; }
.of-text {
  font-size: 15px;
  line-height: 1.85;
  color: #3a3a3f;
  white-space: pre-wrap;
  word-break: break-word;
  letter-spacing: 0.2px;
}
.of-say { color: #b25868; font-weight: 500; }
/* 系统提示行 / 定档分割线 */
.of-sys { text-align: center; font-size: 11.5px; color: #b3b3b9; padding: 2px 12px 12px; }
.of-sys u { color: #6e6e73; cursor: pointer; text-underline-offset: 2px; }
.of-div {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 2px 16px;
  color: #b3b3b9;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.of-div::before, .of-div::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: rgba(0, 0, 0, 0.1);
}
.of-intro { text-align: center; padding: 90px 30px 0; color: #8e8e93; font-size: 14px; line-height: 1.6; }
.of-intro-ic {
  width: 64px; height: 64px;
  border-radius: 20px;
  margin: 0 auto 16px;
  background: rgba(200, 107, 124, 0.1);
  display: flex; align-items: center; justify-content: center;
}
.of-intro-ic svg { width: 30px; height: 30px; color: #c86b7c; }
.of-intro-sub { font-size: 11.5px; color: #b3b3b9; margin-top: 8px; line-height: 1.7; }
.of-typing { font-size: 12px; color: #b3b3b9; padding: 2px 4px 8px; font-style: italic; }
.offline-inputbar {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 9px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
}
.offline-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  resize: none;
  background: rgba(120, 120, 128, 0.08);
  color: var(--ink);
  border-radius: 18px;
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.5;
  max-height: 120px;
  font-family: inherit;
}
.offline-input::placeholder { color: #b3b3b9; }
.of-send {
  flex: none;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #1c1c1e; color: #fff;
}
.of-send svg { width: 19px; height: 19px; }

/* ============================================================
   v0.22.0：朋友圈重做（发布页 / 配图 / 可见范围 / 点赞评论）
   ============================================================ */

/* 动态配图 */
.mo-pic {
  max-width: 62%;
  max-height: 220px;
  border-radius: 12px;
  display: block;
  margin: 2px 0 6px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
}
.mo-descpic {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 78%;
  background: rgba(120, 120, 128, 0.07);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 2px 0 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6e6e73;
}
.mo-descpic svg { width: 16px; height: 16px; flex: none; color: #98989e; margin-top: 2px; }

/* 动态操作行 */
.mo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; }
.mo-actbar { margin-left: auto; display: inline-flex; gap: 14px; }
.mo-act { color: #5b7a9d; cursor: pointer; font-size: 11.5px; font-weight: 600; }
.mo-act.ai { color: #1c1c1e; }

/* 点赞 / 评论区 */
.mo-social {
  margin-top: 8px;
  background: rgba(120, 120, 128, 0.06);
  border-radius: 10px;
  padding: 8px 11px;
}
.mo-likes {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #5b7a9d;
  line-height: 1.5;
}
.mo-likes svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: #5b7a9d; }
.mo-likes + .mo-cms { border-top: 0.5px solid rgba(0, 0, 0, 0.06); margin-top: 7px; padding-top: 7px; }
.mo-cm { font-size: 12.5px; line-height: 1.65; color: var(--ink); word-break: break-word; }
.mo-cm b { color: #5b7a9d; font-weight: 600; margin-right: 5px; }
.mo-cm b::after { content: "："; }

/* 评论输入行 */
.mo-cmbox { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.mo-cminput { flex: 1; padding: 8px 12px; font-size: 13px; border-radius: 10px; }

/* 发布页 */
.mc-text { margin-top: 8px; font-size: 15.5px; }
.mc-img-opts { display: flex; gap: 10px; }
.mc-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0 13px;
  border-radius: 13px;
  background: rgba(120, 120, 128, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: #6e6e73;
  cursor: pointer;
}
.mc-opt:active { background: rgba(120, 120, 128, 0.12); }
.mc-opt svg { width: 22px; height: 22px; color: var(--icon-ink); }
.mc-preview { position: relative; }
.mc-preview img { max-width: 100%; max-height: 240px; border-radius: 12px; display: block; }
.mc-desc-prev {
  background: rgba(120, 120, 128, 0.07);
  border-radius: 12px;
  padding: 12px 40px 12px 13px;
  font-size: 13px;
  line-height: 1.6;
  color: #48484d;
}
.mc-desc-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #6e6e73;
  background: rgba(120, 120, 128, 0.14);
  border-radius: 7px;
  padding: 1.5px 7px;
  margin-right: 7px;
  vertical-align: 1px;
}
.mc-img-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ============================================================
   v0.23.0：朋友圈角标（收藏/三个点菜单）/ 转发卡片 / 线下白色化
   ============================================================ */

.mo-post { position: relative; }
.mo-corner {
  position: absolute;
  top: 15px; right: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}
.mo-fav { cursor: pointer; display: flex; padding: 2px; }
.mo-fav svg { width: 17px; height: 17px; color: #c9c9ce; transition: color 0.15s; }
.mo-fav.on svg { color: #efa3b2; }
.mo-fav.on svg path { fill: #efa3b2; stroke: #efa3b2; }
.mo-dots {
  cursor: pointer;
  color: #c9c9ce;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  letter-spacing: 1px;
}
.mo-menu {
  position: absolute;
  top: 28px; right: 0;
  min-width: 148px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  padding: 5px;
  z-index: 9;
  animation: fade-in 0.14s ease;
}
.mo-mi {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 13px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.mo-mi:active { background: rgba(120, 120, 128, 0.1); }
.mo-mi + .mo-mi { border-top: 0.5px solid rgba(0, 0, 0, 0.04); }

/* 给右上角角标让位 */
.mo-post .mo-name { padding-right: 64px; }

/* 朋友圈转发卡片（聊天内） */
.moshare-bubble {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
}
.ms-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #98989e;
  letter-spacing: 1.5px;
  margin-bottom: 7px;
}
.ms-label svg { width: 14px; height: 14px; color: #98989e; }
.ms-author { font-size: 13.5px; font-weight: 700; color: #5b7a9d; margin-bottom: 3px; }
.ms-text {
  font-size: 13px;
  line-height: 1.6;
  color: #48484d;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ms-pic { max-width: 100%; max-height: 150px; border-radius: 10px; display: block; margin-top: 8px; }
.ms-desc {
  background: rgba(120, 120, 128, 0.07);
  border-radius: 10px;
  padding: 8px 11px;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #8e8e93;
}

/* ============================================================
   v0.24.0：数据 APP（存储仪表盘 / 分类占用 / 清理）
   ============================================================ */
.dt-hero {
  position: relative;
  background: linear-gradient(155deg, #2e2e35, #101013);
  border-radius: 22px;
  padding: 26px 20px 18px;
  margin: 8px 0 6px;
  text-align: center;
  color: #fff;
}
.dt-ring { width: 140px; height: 140px; display: block; margin: 0 auto; }
.dt-ring-fill { transition: stroke-dasharray 0.8s ease; }
.dt-center {
  position: absolute;
  top: 26px; left: 0; right: 0;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dt-center b {
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.dt-center b i { font-style: normal; font-size: 16px; font-weight: 600; opacity: 0.6; margin-left: 1px; }
.dt-center span { font-size: 11px; opacity: 0.55; margin-top: 3px; font-variant-numeric: tabular-nums; }
.dt-hero-foot { font-size: 10.5px; opacity: 0.42; margin-top: 12px; }

/* 分布条 + 分类行 */
.dt-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(120, 120, 128, 0.1);
  margin-bottom: 12px;
}
.dt-bar i { display: block; height: 100%; }
.dt-bar i + i { margin-left: 1.5px; }
.dt-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7.5px 2px;
  font-size: 13.5px;
}
.dt-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dt-name { flex: 1; color: var(--ink); font-weight: 500; }
.dt-size { font-size: 12.5px; color: #98989e; font-variant-numeric: tabular-nums; }
.dt-clean-ok { color: #34c759; font-size: 15px; font-weight: 700; padding: 0 10px; }

/* ============================================================
   v0.26.0：邀约卡重做 / 线下楼层制升级（定档·双节点滑条·对白改色·总结留档）
   / 总结进度 / 语音通话记录卡 / 朋友圈评论回复链
   ============================================================ */

/* 单轨双节点滑条（线下回应字数） */
.dual-range {
  position: relative;
  height: 28px;
  margin: 4px 2px 0;
}
.dual-range::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 12px;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 120, 128, 0.2);
}
.dr-fill {
  position: absolute;
  top: 12px;
  height: 4px;
  border-radius: 2px;
  background: #1c1c1e;
}
.dual-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  outline: none;
  pointer-events: none;
  margin: 0;
  height: 28px;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.dr-val {
  text-align: right;
  font-size: 12.5px;
  color: #6e6e73;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* 「对白」颜色swatch */
.say-row { display: flex; gap: 10px; align-items: center; padding: 4px 2px 0; }
.say-sw {
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1.5px #fff, 0 1px 4px rgba(0, 0, 0, 0.12);
  flex: none;
}
.say-sw.on { border-color: #1c1c1e; }
.say-custom {
  position: relative;
  overflow: hidden;
  background: conic-gradient(#b25868, #a0714f, #4f7a5b, #5b7a9d, #6f5b9d, #b25868);
}
.say-custom input[type="color"] {
  position: absolute;
  inset: -6px;
  opacity: 0;
  cursor: pointer;
}

/* 线下设置弹层可滚动 + 总结进度/留档 */
.of-set-card { max-height: 74vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.of-sumstat {
  font-size: 12px;
  color: #98989e;
  padding: 2px 2px 8px;
  font-variant-numeric: tabular-nums;
}
.of-sum-item {
  background: rgba(120, 120, 128, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.of-sum-meta {
  display: flex; align-items: center;
  font-size: 11px;
  color: #98989e;
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.of-sum-meta u {
  margin-left: auto;
  color: #b3b3b9;
  cursor: pointer;
  text-underline-offset: 2px;
}
.of-sum-text { font-size: 12.5px; line-height: 1.7; color: #48484d; white-space: pre-wrap; }

/* 聊天设置：总结进度 + 选条数 */
.sum-stat {
  font-size: 12px;
  color: #98989e;
  padding: 8px 2px 0;
  font-variant-numeric: tabular-nums;
}
.sum-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6e6e73;
  white-space: nowrap;
}
.sum-range-in { width: 0; flex: 1; text-align: center; padding: 9px 6px; }

/* 语音通话记录：居中中插卡 */
.msg-calllog { display: flex; justify-content: center; padding: 4px 0 10px; }
.cl-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 9px 14px;
  cursor: pointer;
  max-width: 78%;
}
.cl-ic {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.08);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.cl-ic svg { width: 15px; height: 15px; color: #48484d; }
.cl-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.cl-sub { font-size: 11px; color: #98989e; margin-top: 1px; font-variant-numeric: tabular-nums; }
.cl-arrow { font-size: 15px; color: #c4c4c9; font-weight: 600; }

/* 通话记录详情（全屏白底） */
.cl-view {
  position: absolute;
  inset: 0;
  z-index: 74;
  display: flex;
  flex-direction: column;
  background: #fbfbfc;
  color: var(--ink);
  animation: fade-in 0.24s ease;
}
.cl-view-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 14px 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.cl-view-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cl-view-title b { font-size: 16px; font-weight: 700; }
.cl-view-title span { font-size: 11px; color: #98989e; }
.cl-view-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  min-height: 0;
}
.cl-line {
  max-width: 82%;
  font-size: 14.5px;
  line-height: 1.6;
  padding: 9px 13px;
  border-radius: 15px;
  margin-bottom: 9px;
  word-break: break-word;
  width: fit-content;
}
.cl-line.u {
  margin-left: auto;
  background: #1c1c1e;
  color: #fff;
  border-top-right-radius: 5px;
}
.cl-line.c {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-top-left-radius: 5px;
  cursor: pointer;
}
.cl-line.c.playing { box-shadow: 0 0 0 2px rgba(28, 28, 30, 0.14); }
.cl-hint {
  text-align: center;
  font-size: 11px;
  color: #b3b3b9;
  padding: 2px 0 12px;
}

/* 朋友圈评论回复链 */
.mo-cm-re { font-style: normal; color: #98989e; margin: 0 4px 0 0; }
.mo-cm-re::before { content: " "; }
.mo-cm.replyable { cursor: pointer; }
.mo-cm.replyable:active { opacity: 0.6; }
.mo-cm b.nc::after { content: ""; }

/* ============================================================
   v0.27.0：通话整段翻译 / 戳一戳 / 位置卡 / 聊天页背景 /
   对话页面美化（模板·预设·预览）/ 心声自定义 / 气泡预览
   ============================================================ */

/* 通话字幕：整段译文（浅色 + 细分割线，不发音） */
.call-trans {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.18);
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.5;
}
/* 通话记录详情里的译文 */
.cl-line .cl-trans {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  font-size: 12.5px;
  line-height: 1.6;
  color: #98989e;
}
.cl-line.u .cl-trans { border-top-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.55); }

/* 戳一戳：居中细字行 */
.poke-line {
  color: #98989e;
  animation: poke-in 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes poke-in {
  0% { transform: scale(0.86); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.poke-row {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 10px;
}
.poke-verb { width: 108px; text-align: center; flex: none; }
.poke-sfx { text-align: center; }

/* 位置卡：极简地图 + 定位针 */
.loc-bubble {
  width: 236px;
  padding: 0;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  color: var(--ink);
  overflow: hidden;
}
.loc-map {
  position: relative;
  height: 96px;
  background: #f4f4f6;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.loc-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc-pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -88%);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}
.loc-pin svg { width: 100%; height: 100%; }
.loc-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(28, 28, 30, 0.16);
  animation: loc-pulse 2.4s ease-out infinite;
}
@keyframes loc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(28, 28, 30, 0.16); }
  70% { box-shadow: 0 0 0 16px rgba(28, 28, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(28, 28, 30, 0); }
}
.loc-body { padding: 11px 14px 8px; }
.loc-name { font-size: 14.5px; font-weight: 700; letter-spacing: 0.2px; }
.loc-dist { font-size: 12px; color: #8e8e93; margin-top: 3px; }
.loc-bubble .card-foot { border-top-color: rgba(0, 0, 0, 0.07); color: #98989e; opacity: 1; }

/* 聊天 APP 页面背景（四个 tab 页共用） */
.chat-app { position: relative; }
.chat-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.chat-bg img {
  position: absolute;
  left: -5%; top: -5%;
  width: 110%; height: 110%;
  object-fit: cover;
}
.chat-app .chat-content, .chat-app .app-tabbar { position: relative; z-index: 1; }

/* 美化 APP：对话页面美化块 */
.pc-block { padding: 2px 0 4px; }
.pc-divider { height: 0.5px; background: rgba(0, 0, 0, 0.07); margin: 12px 0 14px; }
.pc-on {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: #1c1c1e;
  border-radius: 7px;
  padding: 2px 7px;
  margin-left: 5px;
  vertical-align: 1px;
}
.pc-chars { padding: 2px 2px 4px; }
.css-hint { font-size: 12px; color: #98989e; line-height: 1.65; margin: -4px 0 10px; }

/* 全屏预览（iframe 沙箱） */
.pv-full {
  position: absolute;
  inset: 0;
  z-index: 96;
  background: rgba(20, 20, 22, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 12px;
  animation: fade-in 0.22s ease;
}
.pv-frame {
  flex: 1;
  min-height: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  background: #f7f7f8;
}
.pv-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.pv-close {
  flex: none;
  margin: 12px auto calc(4px + env(safe-area-inset-bottom, 0px));
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 34px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 聊天设置：气泡实时预览 */
.bubble-preview {
  background: rgba(120, 120, 128, 0.06);
  border-radius: 14px;
  padding: 12px 10px 4px;
  margin-top: 10px;
}
.bubble-preview .msg { pointer-events: none; }

/* 自定义心声容器：抵消 .mind-screen 自带内边距，模板自己掌控整个画布 */
.mind-custom {
  margin: calc(-56px - env(safe-area-inset-top, 0px)) -22px calc(-20px - env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   v0.28.0：信息 APP（iOS Messages 复刻：真实/伪装身份短信）
   ============================================================ */

.sms-app { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sms-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 20px; min-height: 0; }
.sms-more { right: 72px !important; }

/* 筛选 chips + 编辑置顶条 */
.sms-chips { display: flex; gap: 8px; padding: 6px 16px 10px; }
.sms-chip {
  font-size: 12px; font-weight: 600;
  color: #6e6e73;
  background: rgba(120, 120, 128, 0.1);
  border-radius: 13px;
  padding: 5px 13px;
  cursor: pointer;
}
.sms-chip.on { background: #1c1c1e; color: #fff; }
.sms-editbar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #98989e;
  padding: 4px 16px 10px;
}

/* 对话列表行（左滑露出 拉黑/删除） */
.sms-swipe { position: relative; overflow: hidden; }
.sms-acts { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.sms-act { border: none; width: 66px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.sms-act.blk { background: #8e8e93; }
.sms-act.del { background: #ff3b30; }
.sms-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg, #f7f7f8);
  touch-action: pan-y;
  cursor: pointer;
}
.sms-app.glass .sms-row { background: var(--bg, #f7f7f8); }
.sms-row::after {
  content: "";
  position: absolute; left: 74px; right: 0; bottom: 0;
  height: 0.5px; background: rgba(0, 0, 0, 0.07);
}
.sms-main { flex: 1; min-width: 0; }
.sms-name {
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden;
}
.sms-tag {
  font-style: normal; font-size: 10px; font-weight: 600;
  color: #6e6e73; background: rgba(120, 120, 128, 0.12);
  border-radius: 7px; padding: 1.5px 7px; flex: none;
}
.sms-tag.pin { color: #b3893a; background: rgba(200, 155, 60, 0.14); }
.sms-prev {
  font-size: 13px; color: #8e8e93; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sms-time { flex: none; font-size: 12px; color: #b3b3b9; display: flex; align-items: center; gap: 3px; }
.sms-pin-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1.5px solid #c4c4c9;
}
.sms-pin-dot.on { background: #1c1c1e; border-color: #1c1c1e; box-shadow: inset 0 0 0 3px #f7f7f8; }

/* 菜单（⋯ / 长按 / ＋） */
.sms-menu, .sms-sheet, .sms-plusmenu {
  position: absolute;
  background: rgba(250, 250, 251, 0.92);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-radius: 15px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  min-width: 190px;
  animation: fade-in 0.16s ease;
}
.sms-menu { top: calc(58px + env(safe-area-inset-top, 0px)); right: 14px; }
.sms-sheet { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 260px; }
.sms-plusmenu { left: 14px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
.sms-mi {
  padding: 12px 16px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.sms-mi:last-child { border-bottom: none; }
.sms-mi:active { background: rgba(120, 120, 128, 0.1); }
.sms-mi.danger { color: #ff3b30; }
.sms-mi i { font-style: normal; font-size: 10.5px; color: #b3b3b9; }

/* 新信息 / 名片 */
.sms-num-row {
  font-size: 12.5px; color: #6e6e73;
  padding: 7px 2px 2px;
  font-variant-numeric: tabular-nums;
}
.sms-num-row u { color: #1c1c1e; margin-left: 10px; cursor: pointer; text-underline-offset: 2px; }
.sms-prof-av { display: flex; justify-content: center; padding-top: 4px; cursor: pointer; }
.sms-prof-phone { font-size: 13px; color: #6e6e73; margin-top: 12px; }
.sms-prof-phone b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.sms-prof-phone u { color: #1c1c1e; margin-left: 10px; cursor: pointer; text-underline-offset: 2px; }

/* ---------- 短信对话页 ---------- */
.sms-screen {
  position: absolute; inset: 0; z-index: 74;
  display: flex; flex-direction: column;
  background: #ffffff;
  animation: fade-in 0.22s ease;
}
.sms-head {
  flex: none;
  display: flex; align-items: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 10px 8px;
  background: #f7f7f8;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.sms-screen.glass .sms-head, .sms-detail.glass .sms-head {
  background: rgba(247, 247, 248, 0.62);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
}
.sms-head-c {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer;
}
.sms-head-name { font-size: 11.5px; color: var(--ink); font-weight: 500; }
.sms-head-pad { width: 34px; flex: none; }
.sms-body {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px 8px;
}
.sms-timelabel { text-align: center; font-size: 10.5px; color: #b3b3b9; padding: 10px 0 8px; }
.sms-sys { text-align: center; font-size: 11.5px; color: #b3b3b9; padding: 6px 20px 10px; }
.sms-banner {
  font-size: 12px; color: #6e6e73;
  background: rgba(120, 120, 128, 0.08);
  border-radius: 11px;
  padding: 9px 13px;
  margin-bottom: 10px;
  text-align: center;
}
.sms-banner.warn { color: #b3564d; background: rgba(200, 80, 70, 0.08); }
.sms-banner u { font-weight: 600; cursor: pointer; margin-left: 6px; text-underline-offset: 2px; }

.sms-msg { display: flex; flex-wrap: wrap; margin-bottom: 3px; padding: 2px 0; touch-action: pan-y; }
.sms-msg.mine { justify-content: flex-end; }
.sms-wrap { position: relative; max-width: 74%; }
.sms-bubble {
  font-size: 15px; line-height: 1.45;
  padding: 8px 13px;
  border-radius: 18px;
  word-break: break-word;
  white-space: pre-wrap;
  background: #e9e9eb; color: #1c1c1e;
  border-bottom-left-radius: 5px;
}
.sms-msg.mine .sms-bubble {
  background: linear-gradient(180deg, #2f9bff, #0a7cff);
  color: #fff;
  border-radius: 18px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 18px;
}
.sms-screen.glass .sms-bubble { background: rgba(228, 228, 232, 0.82); }
.sms-screen.glass .sms-msg.mine .sms-bubble { background: linear-gradient(180deg, rgba(47,155,255,0.92), rgba(10,124,255,0.92)); }
.sms-bubble.voice { display: flex; align-items: center; gap: 8px; }
.sms-msg.mine .voice-play { color: #fff; }
.sms-vtext { font-size: 12.5px; color: #8e8e93; padding: 5px 6px 0; }
.sms-stk { width: 96px; height: 96px; object-fit: contain; display: block; }
.sms-pic { max-width: 100%; border-radius: 16px; display: block; }
.sms-tapback {
  position: absolute; top: -13px;
  font-size: 13px;
  background: #f2f2f4;
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 1.5px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sms-tapback.r { right: -6px; }
.sms-tapback.l { left: -6px; }
.sms-undeliv { font-size: 10.5px; color: #ff3b30; text-align: right; padding: 3px 4px 0; width: 100%; }
.sms-sharedtag { width: 100%; }
.sms-msg.mine .sms-sharedtag { text-align: right; }
.sms-sharedtag { font-size: 10px; color: #b3b3b9; padding: 3px 4px 0; align-self: flex-end; }
.sms-msg .sel-dot { margin: auto 8px auto 0; }
.sms-msg.sel .sel-dot { background: #1c1c1e; border-color: #1c1c1e; }

/* 短信里的位置卡（iOS 风：地图缩略 + 白条） */
.sms-loc { width: 200px; border-radius: 16px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.08); background: #fff; }
.sms-loc-map { position: relative; height: 74px; background: #f1f1f3; }
.sms-loc-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sms-loc-body { padding: 8px 12px 9px; display: flex; flex-direction: column; gap: 2px; }
.sms-loc-body b { font-size: 13px; }
.sms-loc-body span { font-size: 11px; color: #8e8e93; }

/* 输入栏 */
.sms-inputbar {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #f7f7f8;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.sms-screen.glass .sms-inputbar {
  background: rgba(247, 247, 248, 0.62);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
}
.sms-plusbtn {
  flex: none; width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: rgba(120, 120, 128, 0.12);
  color: #6e6e73; font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sms-input {
  flex: 1; min-width: 0;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  outline: none;
  background: #fff;
  border-radius: 17px;
  padding: 8px 14px;
  font-size: 15px;
  font-family: inherit;
}
.sms-screen.glass .sms-input { background: rgba(255, 255, 255, 0.7); }
.sms-micbtn {
  flex: none; width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: #0a7cff; color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sms-micbtn svg { width: 17px; height: 17px; }
.sms-selbar {
  flex: none;
  display: flex; gap: 10px; justify-content: center;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #f7f7f8;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}

/* Tapback 选择行 / 录音钮 */
.sms-taprow {
  display: flex; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.sms-tapopt {
  font-size: 19px; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sms-tapopt.on { background: rgba(10, 124, 255, 0.15); }
.sms-recbtn {
  width: 100%;
  border: none; border-radius: 13px;
  background: rgba(120, 120, 128, 0.1);
  color: var(--ink);
  font-size: 14.5px; font-weight: 600;
  padding: 14px 0;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sms-recbtn.rec { background: #1c1c1e; color: #fff; }
.sms-vor { text-align: center; font-size: 11px; color: #b3b3b9; padding: 10px 0 8px; }
.sms-stksheet { width: 300px; padding: 10px; }

/* 打字中气泡 */
.sms-bubble.typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.sms-bubble.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #b3b3b9;
  animation: typing-b 1.2s infinite;
}
.sms-bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.sms-bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-b { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }

/* 详情页 */
.sms-detail {
  position: absolute; inset: 0; z-index: 76;
  display: flex; flex-direction: column;
  background: #f7f7f8;
  animation: fade-in 0.2s ease;
}
.sms-detail-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 30px; }
.sd-av { display: flex; justify-content: center; padding: 14px 0 10px; cursor: pointer; }
.sd-name { text-align: center; font-size: 19px; font-weight: 700; cursor: pointer; }
.sd-name u { font-size: 11px; font-weight: 500; color: #98989e; margin-left: 7px; text-underline-offset: 2px; }
.sd-phone { text-align: center; font-size: 12.5px; color: #8e8e93; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sd-btns { display: flex; justify-content: center; gap: 12px; padding: 16px 0 18px; }
.sd-btn {
  width: 74px;
  background: #fff;
  border-radius: 13px;
  padding: 10px 0 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; color: #0a7cff;
  cursor: pointer;
}
.sd-btn svg { width: 18px; height: 18px; }
.sd-btn.dis { color: #b3b3b9; }
.sd-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px;
  font-size: 14px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.sd-row span { color: #6e6e73; font-size: 13px; }
.sd-row b { font-weight: 500; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.sd-row.link { cursor: pointer; }

/* 聊天 APP 里的短信记录卡（共通 / 坦白 / TA 转发） */
.sms-share-bubble {
  width: 236px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  color: var(--ink);
}
.ss-phone { font-size: 12px; color: #8e8e93; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.ss-lines { display: flex; flex-direction: column; gap: 5px; }
.ss-line { display: flex; }
.ss-line span {
  max-width: 88%;
  font-size: 12px; line-height: 1.5;
  background: rgba(120, 120, 128, 0.1);
  border-radius: 11px;
  padding: 5px 10px;
  word-break: break-word;
}
.ss-line.c { justify-content: flex-end; }
.ss-line.c span { background: #1c1c1e; color: #fff; }
.ss-note { font-size: 12.5px; color: #48484d; margin-top: 9px; line-height: 1.55; }
.sms-share-bubble .card-foot { border-top-color: rgba(0, 0, 0, 0.07); color: #98989e; opacity: 1; margin-top: 10px; }

/* ============================================================
   v0.29.0：信息APP二期 —— 生成信息 / 批量选择 / 对话壁纸 + 通透玻璃
   ============================================================ */

.sms-screen { background-size: cover; background-position: center; }

/* 更通透的玻璃：壁纸能从顶栏/底栏后面透出来 */
.sms-screen.glass .sms-head, .sms-detail.glass .sms-head {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(34px) saturate(1.8);
  -webkit-backdrop-filter: blur(34px) saturate(1.8);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}
.sms-screen.glass .sms-inputbar {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(34px) saturate(1.8);
  -webkit-backdrop-filter: blur(34px) saturate(1.8);
  border-top-color: rgba(255, 255, 255, 0.35);
}
.sms-screen.glass .sms-plusbtn { background: rgba(255, 255, 255, 0.5); }

/* 有壁纸时：时间线/系统行垫上小药丸，别糊在图上 */
.sms-screen.walled .sms-timelabel, .sms-screen.walled .sms-sys {
  width: fit-content;
  margin-left: auto; margin-right: auto;
  background: rgba(247, 247, 248, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 3px 10px;
  margin-top: 6px; margin-bottom: 8px;
  color: #6e6e73;
}
.sms-screen.walled .sms-banner {
  background: rgba(247, 247, 248, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sms-screen.walled .sms-bubble { background: rgba(240, 240, 243, 0.9); }
.sms-screen.walled .sms-msg.mine .sms-bubble {
  background: linear-gradient(180deg, rgba(47, 155, 255, 0.94), rgba(10, 124, 255, 0.94));
}

/* 列表批量选择的圆点 */
.sms-pin-dot.sel.on { background: #0a7cff; border-color: #0a7cff; box-shadow: inset 0 0 0 3px #f7f7f8; }
.sms-editbar span { display: flex; gap: 8px; }

/* ============================================================
   v0.30.0：短信双语译文 / 语音条定宽修复 / 转账卡 / 顶栏头像
   ============================================================ */

/* 语音条：宽度只随波形定，不被展开的转写撑长（同聊天 APP 的坑） */
.sms-bubble.voice { width: fit-content; }
.sms-msg.mine .sms-bubble.voice { margin-left: auto; }

/* 短信译文：细分割线下浅色小字，不发音 */
.sms-trans {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  font-size: 12.5px;
  line-height: 1.55;
  color: #8e8e93;
}
.sms-msg.mine .sms-trans { border-top-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.6); }
.sms-vtext .sms-trans { border-top-color: rgba(0, 0, 0, 0.08); }

/* 短信转账卡（Apple Cash 风） */
.sms-tf {
  width: 190px;
  background: linear-gradient(155deg, #2e2e33, #131316);
  color: #fff;
  border-radius: 18px;
  padding: 14px 16px 12px;
}
.sms-tf-label { font-size: 10px; letter-spacing: 3px; opacity: 0.55; margin-bottom: 6px; }
.sms-tf-amt { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sms-tf-note { font-size: 12px; opacity: 0.72; margin-top: 4px; }
.sms-tf-st {
  font-size: 10.5px;
  opacity: 0.6;
  border-top: 0.5px solid rgba(255, 255, 255, 0.2);
  margin-top: 10px;
  padding-top: 6px;
}
.sms-tf.done { opacity: 0.62; }

/* 顶栏头像加大后的间距 */
.sms-head-pad { width: 44px; }
.sms-head-c { gap: 3px; }

/* ============================================================
   v0.31.0：短信顶栏居中修复 + 音乐 APP
   ============================================================ */

/* 短信对话页顶栏：返回键实际约 28px、右占位 44px，导致头像名字整体偏左；
   把返回键也撑到 44px，中间一列才是真居中 */
.sms-head .app-back { width: 44px; flex: none; padding: 4px 0; }

/* ---------- 音乐 APP ---------- */
.mu-page { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.mu-search { display: flex; gap: 8px; margin: 4px 0 2px; }
.mu-search .input { flex: 1; min-width: 0; }
.mu-search .btn { flex: none; }
.mu-clear {
  float: right; font-weight: 400; font-size: 11px; color: #98989e;
  cursor: pointer; text-underline-offset: 2px;
}
.mu-list { padding: 4px 12px; }
.mu-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 2px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.mu-row:last-child { border-bottom: none; }
.mu-row-cover {
  width: 42px; height: 42px; flex: none;
  border-radius: 10px;
  background: #f0f0f2; color: #b9b9bf;
  display: flex; align-items: center; justify-content: center;
}
.mu-row-cover svg { width: 20px; height: 20px; }
.mu-row-main { flex: 1; min-width: 0; }
.mu-row-name {
  font-size: 14.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-row.playing .mu-row-name { font-weight: 600; }
.mu-row-sub {
  font-size: 11.5px; color: #98989e; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-like { flex: none; color: #c9c9ce; padding: 6px 2px 6px 6px; }
.mu-like svg { width: 18px; height: 18px; display: block; }
.mu-like.on { color: #1c1c1e; }
.mu-like.on svg path { fill: currentColor; }
.mu-eq { flex: none; display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.mu-eq i {
  width: 2.5px; background: #1c1c1e; border-radius: 1px;
  transform-origin: bottom;
  animation: mu-eq 0.9s ease-in-out infinite;
}
.mu-eq i:nth-child(1) { height: 8px; }
.mu-eq i:nth-child(2) { height: 14px; animation-delay: 0.25s; }
.mu-eq i:nth-child(3) { height: 10px; animation-delay: 0.5s; }
@keyframes mu-eq { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }

/* 迷你播放条：毛玻璃胶囊，挂在应用屏幕底部 */
.mu-bar {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 18px;
  padding: 9px 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  z-index: 20;
  animation: fade-in 0.2s ease;
}
.mu-bar.show { display: flex; }
.mu-bar-cover {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; overflow: hidden;
  background: #f0f0f2; color: #b9b9bf;
  display: flex; align-items: center; justify-content: center;
}
.mu-bar-cover img { width: 100%; height: 100%; object-fit: cover; }
.mu-bar-cover svg { width: 19px; height: 19px; }
.mu-bar-main { flex: 1; min-width: 0; }
.mu-bar-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-bar-sub {
  font-size: 11px; color: #98989e; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-bar-btn {
  flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.mu-bar-btn svg { width: 22px; height: 22px; }

/* 全屏播放器 */
.mu-player {
  position: absolute; inset: 0; z-index: 76;
  display: flex; flex-direction: column;
  background: #f7f7f8;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 22px calc(26px + env(safe-area-inset-bottom, 0px));
  animation: mu-up 0.26s ease;
}
@keyframes mu-up { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }
.mu-p-head { flex: none; display: flex; align-items: center; justify-content: space-between; }
.mu-p-down {
  width: 38px; height: 38px; margin-left: -9px;
  display: flex; align-items: center; justify-content: center;
  color: #6e6e73; cursor: pointer;
}
.mu-p-down svg { width: 24px; height: 24px; }
.mu-p-src {
  font-size: 10.5px; letter-spacing: 1px; color: #98989e;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px; padding: 3px 8px;
}
.mu-p-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0;
}
.mu-p-cover {
  width: 74%; max-width: 300px; aspect-ratio: 1;
  border-radius: 22px; overflow: hidden;
  background: #ececef; color: #c9c9ce;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
.mu-p-cover img { width: 100%; height: 100%; object-fit: cover; }
.mu-p-cover svg { width: 64px; height: 64px; }
.mu-p-lyric {
  width: 100%; height: 100%; position: relative;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  text-align: center; padding: 34% 6px;
  mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.mu-p-lyric p { font-size: 14px; color: #b3b3b9; line-height: 1.5; margin: 0 0 15px; transition: color 0.2s; }
.mu-p-lyric p.on { color: var(--ink); font-weight: 600; }
.mu-p-lyric p i { display: block; font-style: normal; font-size: 11.5px; color: #cfcfd4; margin-top: 2px; }
.mu-p-lyric p.on i { color: #8e8e93; font-weight: 400; }
.mu-p-nolrc { padding-top: 30%; }
.mu-p-info { flex: none; text-align: center; margin-top: 4px; padding: 0 8px; }
.mu-p-name {
  font-size: 19px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-p-artist {
  font-size: 13px; color: #8e8e93; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-p-prog { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.mu-p-prog span {
  font-size: 10.5px; color: #98989e;
  font-variant-numeric: tabular-nums;
  width: 34px; flex: none;
}
.mu-p-prog span:last-child { text-align: right; }
.mu-p-ctrl {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 0 2px;
}
.mu-p-side {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #6e6e73; cursor: pointer;
}
.mu-p-side svg { width: 21px; height: 21px; }
.mu-p-heart.on { color: #1c1c1e; }
.mu-p-heart.on svg path { fill: currentColor; }
.mu-p-skip {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
}
.mu-p-skip svg { width: 26px; height: 26px; }
.mu-p-play {
  width: 66px; height: 66px; border-radius: 50%;
  background: #1c1c1e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.mu-p-play svg { width: 28px; height: 28px; }
.mu-spin {
  width: 18px; height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.15); border-top-color: #1c1c1e;
  border-radius: 50%;
  animation: mu-spin 0.8s linear infinite;
}
.mu-p-play .mu-spin { width: 24px; height: 24px; border-color: rgba(255, 255, 255, 0.25); border-top-color: #fff; }
@keyframes mu-spin { to { transform: rotate(360deg); } }
.mu-src-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

/* ============================================================
   v0.36.0：回滚主屏大改，恢复原版桌面；保留壁纸深浅自适应
   ============================================================ */

/* 浅色壁纸：主屏文字自动转深色（深壁纸转白的规则在 v3 区已有） */
.screen-home.has-wallpaper.wp-light .clock-date,
.screen-home.has-wallpaper.wp-light .icon-label {
  color: #2c2c2e;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}
.screen-home.has-wallpaper.wp-light .clock-big text { fill: #141416; }
.screen-home.has-wallpaper.wp-light .dot { background: rgba(0, 0, 0, 0.22); }
.screen-home.has-wallpaper.wp-light .dot.active { background: #3a3a3f; }

/* 选项气泡里的文字永不换行（曾因容器漏样式断行叠字，事故） */
.cat-chip { white-space: nowrap; }

/* ============================================================
   v0.37.0：长按死机根治 / 总结与线下修正 / 功耗优化 / 组件图重置
   ============================================================ */

/* ☠️ 长按气泡触发系统「拷贝/查询」导致卡死的根治：
   body 此前只写了标准 user-select，iOS Safari 认的是 -webkit- 前缀，
   缺了它长按任意文字仍会弹系统选择菜单，和应用内长按面板打架 */
body {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 功耗：退到后台 / 主屏被 APP 盖住时，暂停常驻动画（黑胶旋转） */
body.page-hidden .vinyl-svg .disc,
body.app-open .vinyl-svg .disc { animation-play-state: paused; }

/* 线下楼层底部操作条：整楼一条，跟在 TA 回应下面（user 段不放东西）。
   细线条图标圆钮，右对齐、发丝分隔线，不动原有楼层排版 */
.of-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
}
.of-bar button {
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(120, 120, 128, 0.07);
  color: #8e8e93;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.of-bar button svg { width: 14px; height: 14px; }
.of-bar button:active { background: rgba(120, 120, 128, 0.16); color: #48484d; }

/* ============================================================
   v0.38.0：组件图片重置小面板 + 美化图标栏收全所有APP
   ============================================================ */

/* 主屏组件图片面板里的当前图预览（头像/唱片封面用圆形） */
.hm-imgprev {
  width: 92px; height: 92px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: #f0f0f2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.hm-imgprev.round { border-radius: 50%; }
.hm-imgprev img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   v0.39.0：游戏 APP（游戏中心 / 你画我猜 / 海龟汤 / 知识问答 /
   狼人杀 / 真心话大冒险 / 心理测试 / 自定义小游戏）
   + 聊天游戏邀请卡·战绩卡 + 数据印记
   ============================================================ */

/* ---------- 聊天里的游戏卡片 ---------- */
.game-bubble {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: var(--ink);
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.game-bubble .card-foot,
.gmres-bubble .card-foot { border-top-color: rgba(0, 0, 0, 0.07); }
.gb-glyph {
  position: absolute;
  right: -14px; top: -10px;
  width: 84px; height: 84px;
  color: rgba(28, 28, 30, 0.05);
  transform: rotate(-12deg);
  pointer-events: none;
}
.gb-glyph svg { width: 100%; height: 100%; }
.gb-name { font-size: 16.5px; font-weight: 700; letter-spacing: 0.4px; }
.gb-note { font-size: 12px; color: #6e6e73; margin-top: 5px; line-height: 1.5; }
.gb-go {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding: 8px 0;
  border: none;
  border-radius: 999px;
  background: #1c1c1e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gb-go:active { opacity: 0.82; }
.gb-state { font-size: 11.5px; color: #b3b3b9; margin-top: 10px; }

.gmres-bubble {
  background: linear-gradient(155deg, #ffffff, #f4f4f6);
  color: var(--ink);
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.gr-title { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.gr-text { font-size: 12px; color: #55555c; margin-top: 6px; line-height: 1.6; }

/* 聊天邀请弹层里的小图标 */
.gm-inv-ic {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  background: var(--glass-gray);
  display: flex; align-items: center; justify-content: center;
}
.gm-inv-ic svg { width: 21px; height: 21px; color: var(--icon-ink); }

/* ---------- 游戏中心 ---------- */
.gm-hub { -webkit-user-select: none; user-select: none; }

.gm-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px 20px 20px;
  margin-top: 6px;
  background: linear-gradient(150deg, #34343b, #101013);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.gm-hero-main { position: relative; z-index: 1; display: flex; flex-direction: column; }
.gm-hero-label {
  font-size: 9.5px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 9px;
}
.gm-hero-main b { font-size: 21px; font-weight: 700; letter-spacing: 0.5px; }
.gm-hero-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); margin-top: 8px; }
.gm-hero-art {
  position: absolute;
  right: 10px; top: 50%;
  width: 96px; height: 96px;
  transform: translateY(-50%) rotate(-10deg);
  color: rgba(255, 255, 255, 0.16);
}
.gm-hero-art svg { width: 100%; height: 100%; }
.gm-hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.gm-hero-ring.r1 { width: 150px; height: 150px; right: -34px; top: -52px; }
.gm-hero-ring.r2 { width: 220px; height: 220px; right: -70px; top: -78px; border-style: solid; border-color: rgba(255, 255, 255, 0.05); }

/* bento 瓷砖 */
.gm-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gm-tile {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 15px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gm-tile:active { transform: scale(0.97); }
.gm-tile.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 15px; padding: 17px 18px; }
.gm-tile b { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0.3px; }
.gm-tile span { font-size: 11px; color: #98989e; margin-top: 4px; line-height: 1.55; }
.gm-tile.wide b + span { margin-top: 4px; }
.gm-tile.wide > b, .gm-tile.wide > span, .gm-tile.wide > i { margin-left: 0; }
.gm-tile.wide .gm-tile-art { margin-bottom: 0; }
.gm-tile.wide .gm-wide-txt { display: flex; flex-direction: column; flex: 1; }
.gm-tag {
  font-style: normal;
  align-self: flex-start;
  margin-top: 10px;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: #98989e;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 3px 9px;
}
.gm-tile.wide .gm-tag { position: absolute; right: 16px; top: 16px; margin-top: 0; }
.gm-tile-art {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 16px;
  background: var(--glass-gray);
  color: #3a3a3f;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.gm-tile-art svg { width: 34px; height: 34px; }
.gm-tile-art.tint-rose  { background: #f4e7ea; color: #8c5560; }
.gm-tile-art.tint-blue  { background: #e5eaf1; color: #566578; }
.gm-tile-art.tint-green { background: #e5ece5; color: #56695a; }
.gm-tile-art.tint-sand  { background: #f1eadd; color: #7d6f52; }
.gm-tile.dark { background: linear-gradient(155deg, #3a3a41, #131316); }
.gm-tile.dark b { color: #f4f4f6; }
.gm-tile.dark span { color: rgba(255, 255, 255, 0.5); }
.gm-tile.dark .gm-tag { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.22); }
.gm-tile.dark .gm-tile-art { background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.85); }

/* 测一测：横滑卡片 */
.gm-tests {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.gm-tests::-webkit-scrollbar { display: none; }
.gm-test-card {
  position: relative;
  flex: none;
  width: 148px;
  border-radius: 20px;
  padding: 16px 15px 15px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.gm-test-card:active { transform: scale(0.97); }
.gm-test-big {
  position: absolute;
  right: 4px; bottom: -14px;
  font-size: 62px;
  font-weight: 800;
  color: rgba(28, 28, 30, 0.05);
  font-family: "SF Pro Display", Georgia, serif;
  pointer-events: none;
}
.gm-test-card b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.gm-test-card > span:not(.gm-test-big) { font-size: 10.5px; color: #98989e; margin-top: 5px; line-height: 1.5; }
.gm-test-badge {
  font-style: normal;
  align-self: flex-start;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: #1c1c1e;
  border-radius: 999px;
  padding: 3px 9px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 自定义小游戏 */
.gm-cg-ic {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  background: var(--glass-gray);
  display: flex; align-items: center; justify-content: center;
}
.gm-cg-ic svg { width: 22px; height: 22px; color: var(--icon-ink); }
.gm-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre;
}
.gm-tpl-hint {
  font-size: 11.5px;
  color: #98989e;
  line-height: 1.75;
  background: var(--glass-gray);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 12px;
}
.gm-tpl-hint b { color: #55555c; font-weight: 600; }
.gm-custom-full {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #101013;
  display: flex;
  flex-direction: column;
  animation: app-in 0.22s ease;
}
.gm-cf-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 18px 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.gm-cf-head i {
  font-style: normal;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  cursor: pointer;
}
.gm-custom-full iframe {
  flex: 1;
  border: none;
  width: 100%;
  background: #17171a;
}

/* 战绩列表 */
.gm-res-list { padding: 6px 16px; }
.gm-res-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.gm-res-row:last-child { border-bottom: none; }
.gm-res-row .li-title { font-size: 13.5px; }
.gm-res-row .li-sub { margin-top: 2px; }

/* ---------- 游戏页通用 ---------- */
.gm-page { -webkit-user-select: none; user-select: none; }
.gm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 70px 0;
  color: #98989e;
  font-size: 13px;
}
.gm-say {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}
.gm-say p {
  background: var(--glass-gray);
  border-radius: 4px 14px 14px 14px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #3a3a3f;
  line-height: 1.6;
  margin: 0;
}
.gm-result {
  background: #ffffff;
  border-radius: 22px;
  padding: 26px 20px 22px;
  margin-top: 14px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.gm-res-badge {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink);
  padding: 7px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
}
.gm-res-badge.win {
  background: #1c1c1e;
  color: #fff;
  border-color: #1c1c1e;
}
.gm-res-word { font-size: 13px; color: #6e6e73; margin-top: 14px; letter-spacing: 1px; }
.gm-guess-list {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.gm-guess {
  font-size: 12.5px;
  color: #55555c;
  background: var(--glass-gray);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.gm-guess.hit {
  background: #1c1c1e;
  color: #fff;
  font-weight: 600;
}
.gm-mode-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.gm-mode-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gm-mode-card:active { transform: scale(0.98); }
.gm-mode-card b { display: block; font-size: 15.5px; color: var(--ink); }
.gm-mode-card span { display: block; font-size: 11.5px; color: #98989e; margin-top: 5px; line-height: 1.6; }
.gm-mode-art {
  width: 54px; height: 54px;
  flex: none;
  border-radius: 16px;
  background: var(--glass-gray);
  color: #3a3a3f;
  display: flex; align-items: center; justify-content: center;
}
.gm-mode-art svg { width: 34px; height: 34px; }

/* ---------- 你画我猜 ---------- */
.gm-vs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 16px;
  padding: 10px 14px;
  margin-top: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.gm-vs-side { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #3a3a3f; }
.gm-vs-side b { font-size: 16px; font-variant-numeric: tabular-nums; }
.gm-vs-mid { font-size: 10px; letter-spacing: 2px; color: #c9c9ce; font-weight: 700; }
.gm-sec-note { text-align: center; font-size: 12px; color: #98989e; margin: 18px 0 10px; }
.gm-word-list { display: flex; flex-direction: column; gap: 10px; }
.gm-word {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}
.gm-word:active { transform: scale(0.98); }
.gm-word b { font-size: 16px; color: var(--ink); }
.gm-word span { font-size: 11px; color: #b3b3b9; }
.gm-or { text-align: center; font-size: 11px; color: #b3b3b9; margin: 14px 0 8px; }
.gm-own-row { display: flex; gap: 8px; }
.gm-own-row .input { flex: 1; margin: 0; }
.gm-topic {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 4px 10px;
  font-size: 13px;
  color: #6e6e73;
}
.gm-topic b { font-size: 17px; color: var(--ink); letter-spacing: 1px; }
.gm-topic span { font-size: 10.5px; color: #b3b3b9; margin-left: auto; }
.gm-board {
  background: #ffffff;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.gm-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 13px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.gm-board.gm-wait {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.gm-board.gm-wait em { font-style: normal; font-size: 12.5px; color: #98989e; text-align: center; line-height: 1.7; }
.gm-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 999px;
  padding: 9px 14px;
  margin-top: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.gm-colors { display: flex; gap: 7px; }
.gm-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease;
}
.gm-dot.on { transform: scale(1.2); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12), 0 0 0 2px #fff, 0 0 0 3.5px #1c1c1e; }
.gm-dot.eraser {
  background:
    linear-gradient(45deg, transparent 46%, #d0d0d5 46%, #d0d0d5 54%, transparent 54%) #fff !important;
}
.gm-sizes { display: flex; gap: 5px; margin-left: auto; }
.gm-size {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gm-size b { background: #b3b3b9; border-radius: 50%; display: block; }
.gm-size.on { background: rgba(120, 120, 128, 0.14); }
.gm-size.on b { background: #1c1c1e; }
.gm-tool-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #6e6e73;
  cursor: pointer;
}
.gm-tool-btn svg { width: 17px; height: 17px; }
.gm-tool-btn:active { background: rgba(120, 120, 128, 0.14); }

/* ---------- 暗色游戏页（海龟汤 / 狼人杀） ---------- */
.screen-app.gm-dark { background: #141417; }
.screen-app.gm-dark .app-header {
  background: rgba(20, 20, 23, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.screen-app.gm-dark .app-title { color: #f2f2f4; }
.screen-app.gm-dark .app-back { color: #f2f2f4; }
.screen-app.gm-dark .app-action { color: #f2f2f4; }

.gs-page { color: #d5d5da; }
.gs-page.gs-lock { overflow: hidden; padding-bottom: 10px; }
.gs-host {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px 16px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}
.gs-host b { display: block; font-size: 15px; color: #f2f2f4; }
.gs-host span { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-top: 3px; }
.gs-lamp {
  position: absolute;
  right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #d8a24a;
  box-shadow: 0 0 14px 3px rgba(216, 162, 74, 0.55);
  transform: translateY(-50%);
}
.gs-note {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.8;
  padding: 12px 6px 2px;
}
.gs-genbtn {
  background: #f2f2f4 !important;
  color: #141417 !important;
  margin-top: 12px;
}
.gs-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.gs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  padding: 13px 16px;
  cursor: pointer;
}
.gs-item:active { background: rgba(255, 255, 255, 0.1); }
.gs-no { font-size: 11px; color: rgba(255, 255, 255, 0.32); font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.gs-item b { font-size: 14px; color: #ececef; font-weight: 600; }
.gs-arrow { margin-left: auto; color: rgba(255, 255, 255, 0.3); }
.gs-play { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.gs-soup-card {
  flex: none;
  background: rgba(255, 255, 255, 0.07);
  border: 0.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 14px 16px;
  margin-top: 6px;
}
.gs-soup-tag { font-size: 10px; letter-spacing: 3px; color: #d8a24a; margin-bottom: 7px; }
.gs-soup-text { font-size: 13.5px; color: #ececef; line-height: 1.75; }
.gs-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gs-q {
  align-self: flex-end;
  max-width: 78%;
  background: #f2f2f4;
  color: #141417;
  border-radius: 15px 15px 4px 15px;
  padding: 8px 13px;
  font-size: 13px;
  line-height: 1.55;
}
.gs-a {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 85%;
}
.gs-a b {
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 12px 12px 12px 4px;
  padding: 7px 14px;
  letter-spacing: 1px;
}
.gs-a.yes b { background: rgba(95, 156, 116, 0.2); color: #8fc7a3; }
.gs-a.no b { background: rgba(194, 94, 107, 0.18); color: #d98a95; }
.gs-a.na b { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.gs-a span { font-size: 11px; color: rgba(255, 255, 255, 0.42); }
.gs-sys { text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.32); padding: 2px 0; }
.gs-chips { display: flex; gap: 8px; padding: 2px 0 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.gs-chips::-webkit-scrollbar { display: none; }
.gs-chip {
  flex: none;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.gs-chip:active { background: rgba(255, 255, 255, 0.1); }
.gs-inputbar { flex: none; display: flex; gap: 8px; align-items: center; }
.gs-input {
  flex: 1;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.09);
  color: #f2f2f4;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 13.5px;
}
.gs-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.gs-send {
  width: 40px; height: 40px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: #f2f2f4;
  color: #141417;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gs-send svg { width: 18px; height: 18px; }
.gs-bottom-card {
  background: linear-gradient(160deg, rgba(216, 162, 74, 0.13), rgba(255, 255, 255, 0.05));
  border: 0.5px solid rgba(216, 162, 74, 0.3);
  border-radius: 18px;
  padding: 15px 16px;
  margin-top: 4px;
}
.gs-bottom-tag { font-size: 10px; letter-spacing: 3px; color: #d8a24a; margin-bottom: 8px; }
.gs-bottom-text { font-size: 13px; color: #ececef; line-height: 1.8; }
.gs-bottom-foot { font-size: 10.5px; color: rgba(255, 255, 255, 0.38); margin-top: 10px; }
.gs-endbtn { border: none; }
.gs-endbtn.dark { background: #f2f2f4 !important; color: #141417 !important; }
.gs-page .btn.ghost { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.8); background: transparent; }

/* ---------- 知识问答 ---------- */
.gm-quiz-hero {
  text-align: center;
  padding: 26px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gm-quiz-glyph {
  width: 62px; height: 62px;
  border-radius: 20px;
  background: linear-gradient(155deg, #3a3a41, #131316);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  font-family: Georgia, serif;
}
.gm-quiz-hero b { font-size: 18px; color: var(--ink); }
.gm-quiz-hero span { font-size: 11.5px; color: #98989e; margin-top: 5px; }
.gm-quiz-top { margin: 12px 2px 10px; }
.gm-quiz-prog { display: flex; gap: 5px; }
.gm-quiz-prog i {
  flex: 1;
  height: 3.5px;
  border-radius: 2px;
  background: rgba(120, 120, 128, 0.16);
}
.gm-quiz-prog i.done { background: #1c1c1e; }
.gm-quiz-prog i.cur { background: #8e8e93; }
.gm-quiz-score { font-size: 11px; color: #98989e; margin-top: 8px; font-variant-numeric: tabular-nums; }
.gm-quiz-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.gm-quiz-cat { font-size: 10px; letter-spacing: 2px; color: #b3b3b9; }
.gm-quiz-q { font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.55; margin: 10px 0 16px; }
.gm-quiz-opts { display: flex; flex-direction: column; gap: 9px; }
.gm-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #3a3a3f;
  cursor: pointer;
  flex-wrap: wrap;
  -webkit-tap-highlight-color: transparent;
}
.gm-opt i {
  font-style: normal;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--glass-gray);
  color: #6e6e73;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.gm-opt:not(.lock):active { background: rgba(120, 120, 128, 0.08); }
.gm-opt.right { border-color: #3d9960; background: #f1f8f4; color: #1c1c1e; }
.gm-opt.right i { background: #3d9960; color: #fff; }
.gm-opt.wrong { border-color: rgba(0, 0, 0, 0.14); color: #98989e; }
.gm-opt.wrong i { background: rgba(120, 120, 128, 0.12); color: #98989e; }
.gm-opt.lock { cursor: default; }
.gm-opt-ta {
  flex-basis: 100%;
  font-size: 10.5px;
  opacity: 0.68;
  padding-left: 33px;
  margin-top: 2px;
}
.gm-quiz-final {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 18px;
}
.gm-qf-side { text-align: center; }
.gm-qf-side b { font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-qf-side span { display: block; font-size: 11px; color: #98989e; margin-top: 4px; }
.gm-qf-div { width: 0.5px; height: 38px; background: rgba(0, 0, 0, 0.1); }

/* ---------- 狼人杀 ---------- */
.gw-page { color: #d5d5da; }
.gw-moon { width: 72px; height: 72px; margin: 26px auto 6px; color: rgba(255, 255, 255, 0.85); }
.gw-moon svg { width: 100%; height: 100%; }
.gw-title { text-align: center; font-size: 19px; font-weight: 700; color: #f2f2f4; letter-spacing: 2px; }
.gw-sub { text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); margin-top: 8px; line-height: 1.8; }
.gw-seats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 4px;
}
.gw-seat {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.gw-seat span { font-size: 11px; color: rgba(255, 255, 255, 0.75); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-seat.dead { opacity: 0.42; }
.gw-seat.dead .c-avatar, .gw-seat.dead .gw-npc-av { filter: grayscale(1); }
.gw-seat i.gw-out {
  font-style: normal;
  font-size: 9px;
  color: #d98a95;
  border: 0.5px solid rgba(217, 138, 149, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
}
.gw-npc-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ececef;
  font-size: 16px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.gw-seats.compact { grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 14px 0 2px; }
.gw-seats.compact .gw-seat { padding: 8px 2px 7px; border-radius: 12px; gap: 4px; }
.gw-seats.compact .c-avatar, .gw-seats.compact .gw-npc-av { width: 28px !important; height: 28px !important; font-size: 12px; }
.gw-seats.compact span { font-size: 8.5px; }
.gw-seats.compact i.gw-out { font-size: 8px; padding: 0 5px; }
.gw-startbtn { background: #f2f2f4 !important; color: #141417 !important; margin-top: 18px; border: none; }
.gw-rolecard {
  margin: 40px auto 0;
  max-width: 250px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 30px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gw-role-tag { font-size: 10px; letter-spacing: 4px; color: rgba(255, 255, 255, 0.4); }
.gw-role-name { font-size: 30px; font-weight: 800; color: #f2f2f4; letter-spacing: 6px; }
.gw-role-desc { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.8; }
.gw-night-tag, .gw-day-tag {
  text-align: center;
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.4);
  margin: 26px 0 4px;
}
.gw-day-tag { color: #d8a24a; }
.gw-night-q { text-align: center; font-size: 16px; font-weight: 600; color: #f2f2f4; margin: 14px 0 6px; line-height: 1.7; }
.gw-pick { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 14px; }
.gw-pick-btn {
  font-size: 13px;
  color: #ececef;
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
}
.gw-pick-btn:active { background: rgba(255, 255, 255, 0.12); }
.gw-check-res { text-align: center; font-size: 15px; color: #ececef; margin-top: 22px; }
.gw-check-res b { color: #d8a24a; }
.gw-dawn { text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, 0.7); line-height: 1.9; margin: 10px 0 4px; }
.gw-dawn b { color: #f2f2f4; }
.gw-feed { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.gw-line {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  animation: gw-line-in 0.3s ease;
}
.gw-line b { display: block; font-size: 10.5px; color: rgba(255, 255, 255, 0.42); margin-bottom: 3px; }
.gw-line.mine { background: rgba(216, 162, 74, 0.1); }
@keyframes gw-line-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.gw-vote-res {
  text-align: center;
  font-size: 13.5px;
  color: #ececef;
  padding: 13px 12px;
  border: 0.5px dashed rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  line-height: 1.7;
}
.gw-vote-res b { color: #d98a95; }
.gw-vote-detail { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 6px; }
.gw-end { text-align: center; margin-top: 26px; }
.gw-end-title { font-size: 22px; font-weight: 800; color: #f2f2f4; letter-spacing: 2px; }
.gw-end-sub { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 8px; }
.gw-reveal { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.gw-rv {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 9px 15px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}
.gw-rv b { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.gw-rv.w b { color: #d98a95; }
.gw-page .btn.ghost { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.8); background: transparent; }
.gw-speak textarea { background: rgba(255, 255, 255, 0.08); color: #f2f2f4; border: none; }

/* ---------- 真心话大冒险 ---------- */
.gm-tod-with {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: #6e6e73;
  margin: 14px 0 4px;
}
.gm-tod-btns { display: flex; gap: 12px; margin-top: 12px; }
.gm-tod-btn {
  flex: 1;
  border-radius: 20px;
  padding: 22px 0 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gm-tod-btn:active { transform: scale(0.96); }
.gm-tod-btn b { display: block; font-size: 17px; letter-spacing: 2px; }
.gm-tod-btn span { display: block; font-size: 9px; letter-spacing: 3px; margin-top: 6px; opacity: 0.5; }
.gm-tod-btn.t { background: linear-gradient(155deg, #3a3a41, #131316); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
.gm-tod-btn.d { background: #ffffff; color: var(--ink); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05); }
.gm-tod-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 20px;
  margin-top: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  animation: tod-flip 0.35s ease;
}
@keyframes tod-flip {
  from { transform: rotateY(70deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.gm-tod-card.t { border-top: 3px solid #1c1c1e; }
.gm-tod-card.d { border-top: 3px solid #1c1c1e; }
.gm-tod-tag { font-size: 10px; letter-spacing: 4px; color: #b3b3b9; }
.gm-tod-q { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.7; margin-top: 10px; }
.gm-tod-empty {
  text-align: center;
  font-size: 12.5px;
  color: #b3b3b9;
  padding: 46px 0;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 22px;
  margin-top: 16px;
}

/* —— 真心话大冒险 v2：抽牌 / 归属签 / 大冒险挑战券 / 续聊 / 往事 —— */
/* 抽牌：一副扣着的牌洗两轮，抽出一张升起、翻面亮出归谁 */
.tod-deal { background: #fff; border-radius: 22px; margin-top: 16px; padding: 46px 0 52px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); }
.tod-deal .fan { position: relative; width: 170px; height: 100px; margin: 0 auto; }
.tod-deal .fan i, .tod-deal .pickcard { position: absolute; left: 50%; top: 50%;
  width: 62px; height: 88px; margin: -44px 0 0 -31px; border-radius: 10px; }
.tod-deal .fan i { background: linear-gradient(160deg, #33333a, #17171b);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 5px rgba(255, 255, 255, 0.05),
              0 4px 12px rgba(0, 0, 0, 0.18); }
.tod-deal .fan i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; transform: rotate(45deg); border: 1.4px solid rgba(255, 255, 255, 0.35); }
.tod-deal .fan i:nth-child(1) { transform: rotate(-14deg) translateX(-34px); }
.tod-deal .fan i:nth-child(2) { transform: rotate(-6deg) translateX(-14px); }
.tod-deal .fan i:nth-child(3) { transform: rotate(5deg) translateX(12px); }
.tod-deal .fan i:nth-child(4) { transform: rotate(13deg) translateX(32px); }
.tod-deal .fan.riffle i { animation: td-riffle 0.42s ease 2; }
.tod-deal .fan.riffle i:nth-child(2) { animation-delay: 0.07s; }
.tod-deal .fan.riffle i:nth-child(3) { animation-delay: 0.14s; }
.tod-deal .fan.riffle i:nth-child(4) { animation-delay: 0.21s; }
@keyframes td-riffle {
  0%, 100% { margin-top: -44px; }
  45% { margin-top: -56px; }
}
/* 被抽中的那张：升起 + 3D 翻面 */
.tod-deal .pickcard { z-index: 2; transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.4, 1); }
.tod-deal .pickcard b { position: absolute; inset: 0; border-radius: 10px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; }
.tod-deal .pickcard .bk { background: linear-gradient(160deg, #33333a, #17171b);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 5px rgba(255, 255, 255, 0.05),
              0 4px 12px rgba(0, 0, 0, 0.18); }
.tod-deal .pickcard .bk::after { content: ""; width: 9px; height: 9px; transform: rotate(45deg);
  border: 1.4px solid rgba(255, 255, 255, 0.35); }
.tod-deal .pickcard .fc { background: #fff; transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1.5px #1c1c1e, inset 0 0 0 5px rgba(0, 0, 0, 0.06),
              0 10px 22px rgba(0, 0, 0, 0.2);
  font-size: 19px; font-weight: 700; letter-spacing: 2px; color: #1c1c1e; }
.tod-deal .pickcard.flip { transform: translateY(-26px) rotateY(180deg); }
.tod-who { display: inline-block; margin-left: 10px; vertical-align: middle;
  font-size: 10px; letter-spacing: 1px; padding: 3px 9px; border-radius: 999px; }
.tod-who.c { background: rgba(0, 0, 0, 0.05); color: #86868c; }
.tod-who.u { background: #1c1c1e; color: #fff; }
/* 大冒险＝挑战券：白牌 + 撕票齿孔线（和真心话素白牌区分，不压黑） */
.gm-tod-card.d { overflow: visible; }
.gm-tod-card.d .td-tear { position: relative; margin: 13px -20px 3px; border-top: 1.5px dashed #d8d8dc; }
.gm-tod-card.d .td-tear::before, .gm-tod-card.d .td-tear::after { content: ""; position: absolute;
  top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); }
.gm-tod-card.d .td-tear::before { left: -9px; }
.gm-tod-card.d .td-tear::after { right: -9px; }
/* 你的答话（右侧） */
.tod-usay { display: flex; justify-content: flex-end; margin-top: 14px; }
.tod-usay p { margin: 0; max-width: 82%; background: #1c1c1e; color: #fff; text-align: left;
  border-radius: 14px 4px 14px 14px; padding: 8px 12px; font-size: 12.5px; line-height: 1.6; }
/* 卡内输入行（作答 / 续聊共用） */
.tod-chatin { display: flex; gap: 9px; align-items: center; margin-top: 14px; }
.tod-chatin input { flex: 1; min-width: 0; border: none; outline: none; background: #f0f0ee;
  border-radius: 13px; padding: 10px 13px; font-size: 13px; color: var(--ink); }
.tod-chatin button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #1c1c1e; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tod-chatin button svg { width: 17px; height: 17px; }
.tod-typing { margin-top: 12px; font-size: 11.5px; color: #9a9aa0; }
/* 右上角往事入口＝收好的一小叠牌（实物）：三张微扇形小卡，最上带一枚引号刻痕，
   黑点记数。挂在页面头部的 action 位上，不用文字当按钮。 */
.app-action.tod-act { background: none; padding: 0 6px; }
.tod-pastfan { position: relative; width: 24px; height: 27px; flex: none; cursor: pointer; display: block; }
.tod-pastfan i { position: absolute; left: 50%; bottom: 2px; width: 15px; height: 21px;
  margin-left: -7.5px; border-radius: 4px; background: #fff; border: 1.2px solid #3a3a3f;
  font-style: normal; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); }
.tod-pastfan i:nth-child(1) { transform: rotate(-12deg) translateX(-4px); background: #ececea; }
.tod-pastfan i:nth-child(2) { transform: rotate(-2deg); background: #f6f6f4; }
.tod-pastfan i:nth-child(3) { transform: rotate(9deg) translateX(4px); }
.tod-pastfan u { position: absolute; top: -4px; right: -6px; min-width: 13px; height: 13px;
  border-radius: 999px; background: #1c1c1e; color: #fff; text-decoration: none;
  font-size: 8px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; }
.tod-pastfan:active { transform: scale(0.94); }
/* 往事（收藏的 TA 真心话） */
.tod-hgroup { display: flex; align-items: center; gap: 9px; margin: 20px 4px 10px;
  font-size: 13px; font-weight: 600; color: #3a3a3f; }
.tod-hcard { position: relative; margin-top: 12px; }
.tod-hdel { position: absolute; top: 12px; right: 14px; width: 24px; height: 24px; border: none;
  background: none; color: #c6c6cb; font-size: 14px; cursor: pointer; line-height: 1; }
.tod-htime { margin-top: 10px; font-size: 10.5px; color: #b3b3b9; }

/* ---------- 心理测试 ---------- */
.gm-test-prog {
  height: 3.5px;
  border-radius: 2px;
  background: rgba(120, 120, 128, 0.14);
  margin: 12px 2px 0;
  overflow: hidden;
}
.gm-test-prog i { display: block; height: 100%; background: #1c1c1e; border-radius: 2px; transition: width 0.25s ease; }
.gm-test-no { font-size: 11px; color: #b3b3b9; margin: 14px 4px 6px; font-variant-numeric: tabular-nums; }
.gm-test-q { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.6; margin: 4px 4px 20px; }
.gm-test-opts { display: flex; flex-direction: column; gap: 11px; }
.gm-test-opt {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 14px;
  color: #3a3a3f;
  line-height: 1.5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gm-test-opt:active { transform: scale(0.98); background: #f4f4f6; }
.gm-test-back { font-size: 12px; color: #98989e; margin: 18px 6px; cursor: pointer; }
.gm-test-res {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 22px 24px;
  margin-top: 16px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.gm-tr-tag { font-size: 10px; letter-spacing: 3px; color: #b3b3b9; }
.gm-tr-big {
  font-size: 44px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 4px;
  margin-top: 12px;
  font-family: "SF Pro Display", Georgia, serif;
}
.gm-tr-title { font-size: 15px; font-weight: 700; color: #3a3a3f; margin-top: 6px; }
.gm-tr-desc { font-size: 12.5px; color: #6e6e73; line-height: 1.9; margin-top: 14px; text-align: left; }
.gm-res-tier {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: #1c1c1e;
  border-radius: 999px;
  padding: 5px 16px;
  margin-top: 12px;
  letter-spacing: 1px;
}
.gm-axes { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.gm-axis { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: #b3b3b9; }
.gm-ax-l, .gm-ax-r { width: 52px; flex: none; }
.gm-ax-l { text-align: right; }
.gm-ax-r { text-align: left; }
.gm-ax-l.on, .gm-ax-r.on { color: var(--ink); font-weight: 700; }
.gm-ax-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(120, 120, 128, 0.14);
  overflow: hidden;
}
.gm-ax-bar i { display: block; height: 100%; background: #1c1c1e; border-radius: 3px; }
.gm-love-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(120, 120, 128, 0.14);
  margin-top: 16px;
  overflow: hidden;
}
.gm-love-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #d8b4bc, #b25868); }

/* ---------- 数据印记 ---------- */
.dt-life {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
}
.dt-lf { text-align: center; }
.dt-lf b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dt-lf span { display: block; font-size: 10px; color: #98989e; margin-top: 3px; }
.dt-life-foot {
  text-align: center;
  font-size: 11px;
  color: #98989e;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  margin-top: 13px;
  padding-top: 11px;
}


/* ============================================================
   v0.41.0：邂逅 APP 全面重做
   配色：黑白灰为主，浅奶粉色（#f3e3e6 系）只做细节点缀
   遇见（搜索页独立/人气上移/词条云）/ 心语（回复键·长按·左滑）/
   我的名片（与面具独立）/ 人设两段式与锁定 / 异步状态不丢
   ============================================================ */

.mt-app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mt-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 20px;
}
.tag.mt-tag { background: #f3e3e6; color: #7d6a6e; }
.mt-page { -webkit-user-select: none; user-select: none; }

/* ---------- 照片底：灰调渐变 + 首字水印 ---------- */
.mt-photo { overflow: hidden; background: #ececef; }
.mt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-photo i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  font-size: 44px;
  letter-spacing: 2px;
}
.mt-photo.ph0 { background: linear-gradient(160deg, #e6dcdf, #a9989d); }
.mt-photo.ph1 { background: linear-gradient(160deg, #e2e2e7, #9d9aa6); }
.mt-photo.ph2 { background: linear-gradient(160deg, #e8e2db, #ab9f93); }
.mt-photo.big, .mt-photo.herobg, .mt-photo.card { position: absolute; inset: 0; }
.mt-photo.big i, .mt-photo.card i { font-size: 70px; }
.mt-photo.grid { position: relative; aspect-ratio: 1 / 1.08; }
.mt-photo.grid i { font-size: 38px; }
.mt-photo.pop { position: relative; width: 56px; height: 56px; border-radius: 20px; flex: none; }
.mt-photo.pop i { font-size: 22px; }
.mt-photo.row { position: relative; width: 48px; height: 48px; border-radius: 16px; flex: none; }
.mt-photo.row i { font-size: 20px; }
.mt-photo.hello { position: relative; width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px; }
.mt-photo.hello i { font-size: 30px; }
.mt-photo.srow { position: relative; width: 86px; align-self: stretch; border-radius: 0; flex: none; }
.mt-photo.srow i { font-size: 30px; }

.mt-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 22, 23, 0) 44%, rgba(24, 22, 23, 0.62));
  pointer-events: none;
}
.mt-hero-info {
  position: absolute;
  left: 15px; right: 15px; bottom: 13px;
  color: #fff;
}
.mt-hero-info b { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }
.mt-hero-info b i { font-style: normal; font-weight: 500; font-size: 14px; margin-left: 6px; opacity: 0.85; }
.mt-hero-info > span { display: block; font-size: 11px; opacity: 0.82; margin-top: 3px; }
.mt-hero-info em { display: block; font-style: normal; font-size: 10.5px; opacity: 0.66; margin-top: 4px; }
.mt-hero-tag {
  position: absolute;
  left: 12px; top: 12px;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: #3a3a3f;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 4px 10px;
}
.mt-match-badge {
  position: absolute;
  right: 12px; top: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  border-radius: 13px;
  padding: 6px 9px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mt-match-badge span { display: block; font-size: 8px; font-weight: 500; letter-spacing: 2px; color: #98989e; }

/* 生成中的角标（照片显影） */
.mt-pic-busy {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(24, 22, 23, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  border-radius: 999px;
  padding: 8px 14px;
  z-index: 2;
  white-space: nowrap;
}
.mt-pic-busy .pic-spinner { width: 13px; height: 13px; border-width: 2px; }

/* ---------- 遇见页 ---------- */
.mt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 90px 0;
  color: #98989e;
  font-size: 13px;
}
.mt-loading em { font-style: normal; color: #6e6e73; }
.mt-loading-sub { font-size: 11px; color: #b9b9bf; letter-spacing: 1px; }
.mt-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 70px 26px 0;
}
.mt-welcome-art {
  width: 74px; height: 74px;
  border-radius: 26px;
  background: linear-gradient(160deg, #efe3e6, #cbb6bb);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px rgba(120, 100, 106, 0.2);
}
.mt-welcome-art svg { width: 38px; height: 38px; }
.mt-welcome b { font-size: 20px; color: var(--ink); letter-spacing: 4px; }
.mt-welcome > span { font-size: 12px; color: #98989e; line-height: 1.9; margin-top: 10px; }

/* 假搜索条：点进独立搜索页 */
.mt-fakesearch {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border-radius: 999px;
  padding: 11px 16px;
  margin-top: 6px;
  color: #b3b3b9;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.mt-fakesearch svg { width: 15px; height: 15px; flex: none; color: #98989e; }
.mt-fakesearch:active { transform: scale(0.985); }

/* 生成进行中横幅 */
.mt-genbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  background: #f3e3e6;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: #6e6e73;
}
.mt-genbar .pic-spinner { width: 13px; height: 13px; border-width: 2px; flex: none; }

/* 今日心动 + 刷卡：一行两卡 */
.mt-hero-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}
.mt-hero {
  position: relative;
  flex: 1.7;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 0.92;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.mt-hero-empty {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-hero-empty span { font-size: 12px; color: #b3b3b9; }
.mt-swipecard {
  flex: 1;
  background: #ffffff;
  border-radius: 20px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  text-align: center;
}
.mt-swipecard:active { transform: scale(0.97); }
.mt-swipecard b { font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.mt-swipecard span { font-size: 10px; color: #b3b3b9; }
.mt-strip-cards { position: relative; width: 44px; height: 42px; flex: none; }
.mt-strip-cards i {
  position: absolute;
  left: 9px; top: 3px;
  width: 26px; height: 36px;
  border-radius: 7px;
  border: 1.5px solid #c9c2c5;
  background: #f6f1f2;
}
.mt-strip-cards i:nth-child(1) { transform: rotate(-14deg) translateX(-5px); background: #eee6e8; }
.mt-strip-cards i:nth-child(2) { transform: rotate(0deg); }
.mt-strip-cards i:nth-child(3) { transform: rotate(14deg) translateX(5px); background: #f3e3e6; border-color: #8a8a90; }

.mt-sec-title { margin-top: 20px; }

/* 人气横滑（带位次） */
.mt-pop-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 8px;
  scrollbar-width: none;
}
.mt-pop-row::-webkit-scrollbar { display: none; }
.mt-pop {
  position: relative;
  flex: none;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.mt-pop-rank {
  position: absolute;
  left: -2px; top: -5px;
  z-index: 1;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: #1c1c1e;
  border-radius: 999px;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}
.mt-pop .mt-photo { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #e8d3d8; }
.mt-pop b { font-size: 11px; color: var(--ink); font-weight: 600; margin-top: 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-pop span { font-size: 9.5px; color: #a89ba0; margin-top: 2px; }

/* 类型词条云 */
.mt-chipcloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; }
.mt-chipcloud .cat-chip,
.mt-cats .cat-chip,
.mt-qhist .cat-chip {
  background: #ffffff;
  color: #55555c;
  border: 0.5px solid rgba(0, 0, 0, 0.07);
}
.mt-chipcloud .cat-chip:active { background: #f3e3e6; }

/* 猜你喜欢 */
.mt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mt-gcard {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mt-gcard:active { transform: scale(0.97); }
.mt-gmatch {
  position: absolute;
  right: 8px; top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 3px 8px;
}
.mt-ginfo { padding: 9px 12px 11px; }
.mt-ginfo b { font-size: 14px; color: var(--ink); }
.mt-ginfo b i { font-style: normal; font-weight: 500; font-size: 11.5px; color: #98989e; margin-left: 5px; }
.mt-ginfo > span { display: inline-block; font-size: 10px; color: #7d6a6e; background: #f3e3e6; border-radius: 999px; padding: 2px 8px; margin-top: 5px; }
.mt-gsig { font-size: 10.5px; color: #b3b3b9; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 寻找（独立搜索页） ---------- */
.mt-search-bigrow { display: flex; gap: 8px; margin-top: 6px; }
.mt-search-in {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: #ffffff;
  border-radius: 999px;
  padding: 12px 17px;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.mt-search-in::placeholder { color: #b9b9bf; }
.mt-search-go {
  flex: none;
  border: none;
  border-radius: 999px;
  background: #1c1c1e;
  color: #fff;
  font-size: 13px;
  padding: 0 19px;
  cursor: pointer;
}
.mt-search-go:disabled { opacity: 0.5; }
.mt-qhist { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 2px 0; }
.mt-cats { padding: 10px 0 2px; flex-wrap: wrap; display: flex; gap: 8px; overflow: visible; }
.mt-search-result { margin-top: 10px; }
.mt-search-idle {
  text-align: center;
  font-size: 12.5px;
  color: #b3b3b9;
  line-height: 2;
  padding: 56px 0;
}
.mt-search-idle-ic {
  display: flex;
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #ffffff;
  color: #c9c2c5;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mt-search-idle-ic svg { width: 22px; height: 22px; }

/* 扫描动画 */
.mt-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 0 30px;
}
.mt-scan-rings { position: relative; width: 120px; height: 120px; margin-bottom: 20px; }
.mt-scan-rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #e2d3d7;
  animation: mt-ring 2.4s ease-out infinite;
  opacity: 0;
}
.mt-scan-rings i:nth-child(2) { animation-delay: 0.8s; }
.mt-scan-rings i:nth-child(3) { animation-delay: 1.6s; }
@keyframes mt-ring {
  0% { transform: scale(0.32); opacity: 0.9; }
  100% { transform: scale(1.15); opacity: 0; }
}
.mt-scan-rings span {
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: #f3e3e6;
  color: #1c1c1e;
  display: flex; align-items: center; justify-content: center;
  animation: mt-beat 1.3s ease infinite;
}
.mt-scan-rings span svg { width: 20px; height: 20px; }
.mt-scan b { font-size: 14.5px; color: var(--ink); }
.mt-scan > span { font-size: 11.5px; color: #98989e; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* 搜索结果 */
.mt-sr-head { display: flex; align-items: baseline; gap: 9px; margin: 14px 4px 10px; }
.mt-sr-head b { font-size: 15px; color: var(--ink); }
.mt-sr-head span { font-size: 11px; color: #b3b3b9; }
.mt-srow {
  display: flex;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 11px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mt-srow:active { transform: scale(0.985); }
.mt-srow-main { flex: 1; min-width: 0; padding: 12px 14px; }
.mt-srow-main > b { font-size: 15px; color: var(--ink); display: flex; align-items: center; }
.mt-srow-main > b i { font-style: normal; font-weight: 500; font-size: 12px; color: #98989e; margin-left: 6px; }
.mt-srow-match {
  font-style: normal;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #7d6a6e;
  background: #f3e3e6;
  border-radius: 999px;
  padding: 2px 8px;
}
.mt-srow-main > span { display: block; font-size: 11px; color: #98989e; margin-top: 3px; }
.mt-why {
  font-size: 11px;
  color: #7d6a6e;
  background: #f8eef0;
  border-left: 2px solid #e3c6cc;
  border-radius: 4px 8px 8px 4px;
  padding: 5px 9px;
  margin-top: 7px;
}
.mt-srow-intro { font-size: 11px; color: #b3b3b9; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 详情页 ---------- */
.mt-detail-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 4.3;
  margin-top: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}
.mt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 2px 0; }
.mt-chip {
  font-size: 11.5px;
  color: #55555c;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
.mt-chip u { text-decoration: none; margin-left: 6px; opacity: 0.5; cursor: pointer; }
.mt-sec { margin-top: 16px; padding: 0 2px; }
.mt-sec-label { font-size: 10px; letter-spacing: 3px; color: #b3b3b9; margin-bottom: 7px; }
.mt-sig { font-size: 14px; color: #3a3a3f; }
.mt-inforows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  overflow: hidden;
}
.mt-inforow {
  background: #ffffff;
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mt-inforow span { font-size: 10px; color: #b3b3b9; flex: none; }
.mt-inforow b { font-size: 12.5px; color: #3a3a3f; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-intro {
  font-size: 13px;
  color: #48484d;
  line-height: 1.9;
  background: #ffffff;
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mt-lifepic {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin-top: 10px;
}
.mt-lifepic-btn {
  display: inline-block;
  text-decoration: none;
  font-size: 11.5px;
  color: #7d6a6e;
  background: #f3e3e6;
  border-radius: 999px;
  padding: 6px 13px;
  margin-top: 10px;
  cursor: pointer;
}
.mt-lifepic-busy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #98989e;
  margin-top: 10px;
}
.mt-lifepic-busy .pic-spinner { width: 13px; height: 13px; border-width: 2px; }
.mt-song {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 12.5px;
  color: #3a3a3f;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mt-song svg { width: 16px; height: 16px; color: #8e8e93; flex: none; }

/* 完整人设：锁定态 / 解锁态 */
.mt-locked {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(155deg, #fbf7f8, #f2eef0);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 14px 16px;
}
.mt-lock-ic {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  background: #ffffff;
  color: #8e8e93;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.mt-lock-ic svg { width: 19px; height: 19px; }
.mt-lock-txt b { display: block; font-size: 13px; color: #3a3a3f; }
.mt-lock-txt span { display: block; font-size: 11px; color: #98989e; margin-top: 4px; line-height: 1.65; }
.mt-persona { white-space: pre-wrap; }
.mt-actwrap { margin-top: 20px; }
.mt-added-line {
  text-align: center;
  font-size: 12.5px;
  color: #7d6a6e;
  background: #f3e3e6;
  border-radius: 999px;
  padding: 12px 0;
}

/* ---------- 心动配对全屏 ---------- */
.mt-match {
  position: absolute;
  inset: 0;
  z-index: 70;
  background:
    radial-gradient(circle at 30% 24%, rgba(240, 215, 221, 0.55), transparent 52%),
    radial-gradient(circle at 74% 70%, rgba(233, 224, 227, 0.6), transparent 48%),
    #f6f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: app-in 0.25s ease;
}
.mt-match-inner { width: 78%; text-align: center; }
.mt-match-tag { font-size: 10px; letter-spacing: 5px; color: #b3a5a9; }
.mt-match-title {
  font-size: 30px;
  font-weight: 800;
  color: #1c1c1e;
  letter-spacing: 8px;
  margin-top: 10px;
}
.mt-match-avs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 26px 0 18px;
}
.mt-mav {
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  width: 74px; height: 74px;
  flex: none;
}
.mt-mav.r { margin-left: -10px; }
.mt-mav .c-avatar { display: block; }
.mt-mav-letter {
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #e6dcdf, #a9989d);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}
.mt-mheart {
  z-index: 1;
  width: 34px; height: 34px;
  margin: 0 -12px;
  border-radius: 50%;
  background: #f3e3e6;
  color: #1c1c1e;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  animation: mt-beat 1.2s ease infinite;
}
.mt-mheart svg { width: 17px; height: 17px; }
@keyframes mt-beat {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.14); }
  36% { transform: scale(1); }
}
.mt-match-sub { font-size: 13px; color: #8e8e93; margin-bottom: 26px; }

/* ---------- 刷卡遇见 ---------- */
.mt-swipe {
  position: absolute;
  inset: 0;
  z-index: 55;
  background: linear-gradient(172deg, #efe9ea, #f7f6f6 55%);
  display: flex;
  flex-direction: column;
  animation: app-in 0.22s ease;
}
.mt-swipe-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 8px;
}
.mt-swipe-head span { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 2px; }
.mt-swipe-head u { font-size: 11px; color: #b3b3b9; text-decoration: none; min-width: 46px; text-align: right; }
.mt-swipe-head i {
  font-style: normal;
  width: 30px; height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #55555c;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  cursor: pointer;
}
.mt-stack { flex: 1; position: relative; margin: 10px 22px 6px; }
.mt-card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  touch-action: none;
}
.mt-card.d1 { transform: scale(0.95) translateY(14px); filter: brightness(0.97); }
.mt-card.d2 { transform: scale(0.9) translateY(28px); filter: brightness(0.94); }
.mt-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 22, 23, 0) 44%, rgba(24, 22, 23, 0.68));
  pointer-events: none;
}
.mt-card-info {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  color: #fff;
  pointer-events: none;
}
.mt-card-info b { font-size: 24px; font-weight: 700; }
.mt-card-info b i { font-style: normal; font-weight: 500; font-size: 17px; margin-left: 8px; opacity: 0.85; }
.mt-card-info > span { display: block; font-size: 12px; opacity: 0.82; margin-top: 4px; }
.mt-card-info > em { display: block; font-style: normal; font-size: 11px; opacity: 0.66; margin-top: 5px; }
.mt-card-tags { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.mt-card-tags em {
  font-style: normal;
  font-size: 10.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.mt-match-badge.oncard { top: 16px; right: 16px; }
.mt-stamp {
  position: absolute;
  top: 22px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 4px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 2.5px solid;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.86);
}
.mt-stamp.like { left: 18px; color: #1c1c1e; border-color: #1c1c1e; transform: rotate(-14deg); }
.mt-stamp.nope { right: 18px; color: #98989e; border-color: #98989e; transform: rotate(14deg); }
.mt-card.show-like .mt-stamp.like { opacity: 1; }
.mt-card.show-nope .mt-stamp.nope { opacity: 1; }
.mt-swipe-btns {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 16px 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
.mt-fab {
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mt-fab:active { transform: scale(0.92); }
.mt-fab.no { width: 56px; height: 56px; color: #8e8e93; }
.mt-fab.no svg { width: 22px; height: 22px; }
.mt-fab.info { width: 44px; height: 44px; color: #b3b3b9; }
.mt-fab.info svg { width: 19px; height: 19px; }
.mt-fab.yes { width: 62px; height: 62px; background: #1c1c1e; color: #f3e3e6; }
.mt-fab.yes svg { width: 26px; height: 26px; }
.mt-swipe-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 60px;
}
.mt-empty-heart {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #f3e3e6;
  color: #1c1c1e;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.mt-empty-heart svg { width: 28px; height: 28px; }
.mt-swipe-empty b { font-size: 16px; color: var(--ink); }
.mt-swipe-empty span { font-size: 12px; color: #98989e; margin-top: 7px; }

/* ---------- 站内私聊（心语对话页） ---------- */
.app-page.mt-conv {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.mt-convtop {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #ffffff;
  border-radius: 18px;
  padding: 10px 14px;
  margin: 2px 0 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mt-convtop .mt-photo.row { width: 38px; height: 38px; border-radius: 13px; }
.mt-convtop .mt-photo.row i { font-size: 16px; }
.mt-convtop-main { flex: 1; min-width: 0; }
.mt-convtop-main b { display: block; font-size: 14px; color: var(--ink); }
.mt-convtop-main span { display: block; font-size: 10.5px; color: #b3b3b9; margin-top: 2px; }
.mt-convtop-fam { width: 92px; flex: none; text-align: right; }
.mt-convtop-fam em { font-style: normal; font-size: 10px; color: #98989e; font-variant-numeric: tabular-nums; }
.mt-famline {
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-top: 5px;
}
.mt-famline i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #ecd9dd, #d9b6bd);
  transition: width 0.4s ease;
}
.mt-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 2px 10px;
}
.mt-conv-hello { text-align: center; padding: 40px 30px 10px; }
.mt-conv-hello b { display: block; font-size: 15px; color: var(--ink); }
.mt-conv-hello span { display: block; font-size: 11.5px; color: #98989e; margin-top: 7px; line-height: 1.8; }
.mt-time { text-align: center; font-size: 10px; color: #c2c2c7; padding: 4px 0 0; }
.mt-msg { display: flex; }
.mt-msg.mine { justify-content: flex-end; }
.mt-bubble {
  max-width: 76%;
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.55;
  border-radius: 17px;
  color: var(--ink);
}
.mt-msg.theirs .mt-bubble {
  background: #ffffff;
  border-top-left-radius: 5px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.mt-msg.mine .mt-bubble {
  background: #f3e3e6;
  border-top-right-radius: 5px;
}
.mt-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.mt-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c9bfc3;
  animation: mt-dot 1.1s ease infinite;
}
.mt-typing i:nth-child(2) { animation-delay: 0.18s; }
.mt-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes mt-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.mt-sys { text-align: center; font-size: 10.5px; color: #b3b3b9; padding: 3px 0; }
.mt-thinking { color: #a89ba0; letter-spacing: 0.5px; }
.mt-cardmsg {
  width: 216px;
  background: #ffffff;
  border-radius: 18px;
  border-top: 3px solid #e3c6cc;
  padding: 13px 15px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.mt-cardmsg-tag { font-size: 9.5px; letter-spacing: 4px; color: #b3a5a9; }
.mt-cardmsg-name { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.mt-cardmsg-sub { font-size: 11px; color: #98989e; margin-top: 5px; line-height: 1.6; }
.mt-cardmsg-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: none;
  border-radius: 999px;
  background: #1c1c1e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 0;
  cursor: pointer;
}
.mt-cardmsg-btn:active { opacity: 0.85; }
.mt-cardmsg-done { font-size: 11.5px; color: #7fae8e; margin-top: 12px; text-align: center; }
.mt-inputbar {
  flex: none;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}
.mt-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: #ffffff;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--ink);
  border: 0.5px solid rgba(0, 0, 0, 0.05);
}
.mt-input::placeholder { color: #b9b9bf; }
.mt-replybtn {
  width: 40px; height: 40px;
  flex: none;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  background: #ffffff;
  color: #1c1c1e;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mt-replybtn svg { width: 18px; height: 18px; }
/* 源于邂逅的角色档案：来历一行（代替概括人设大框） */
.mt-archrow { display: flex; align-items: center; gap: 9px; padding: 2px 2px 0;
  font-size: 12px; color: #86868c; }
/* 外语消息的译文（挂在气泡内） */
.mt-bubble .mt-trans { margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.14); font-size: 11px; color: #96969c; }

/* 意式斜体（Cormorant Italic 500，30KB 秒载）——仅作数字/点缀，铁律：禁大字体文件 */
@font-face { font-family: "SereinIt"; src: url("../fonts/serein-it.woff2?v=0491") format("woff2"); font-display: swap; }

/* ============================================================
   档案 · 人物辞典（v0.47.12）：词条式列表
   页眉双细线+导字＝检索感；①②＝义项；右侧小图＝辞典插图框
   ============================================================ */
.arch-guide { display: flex; justify-content: space-between; margin: 8px 6px 0;
  font-size: 10.5px; letter-spacing: 2px; color: #b0b0b4; }
.arch-rule2 { height: 5px; border-top: 2.5px solid #232326; border-bottom: 1px solid #232326;
  margin: 7px 2px 0; }
.arch-sec { margin: 18px 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: #3a3a3f; }
.arch-sec i { font-style: normal; font-weight: 400; color: #adadb2; margin-left: 8px; letter-spacing: 0;
  font-family: Georgia, serif; }
.arch-paper { background: #fff; border-radius: 18px; padding: 3px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); }
.arch-entry { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; cursor: pointer; }
.arch-entry + .arch-entry { border-top: 1px solid #f0f0ee; }
.arch-entry:active { opacity: 0.75; }
.arch-main { flex: 1; min-width: 0; }
.arch-hw { display: flex; align-items: baseline; gap: 8px; }
.arch-hw b { font-family: Georgia, "SereinSerif", "Songti SC", serif; font-size: 19px;
  letter-spacing: 0.04em; color: #1c1c1e; font-weight: 600; }
.arch-hw i { font-style: normal; font-size: 11px; color: #a6a6ab; }
.arch-hw .tag-meet { font-size: 9.5px; color: #8a7078; background: #f6eef0;
  border: 1px solid #efe1e4; border-radius: 6px; padding: 1.5px 7px; letter-spacing: 1px; }
.arch-def { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.arch-def .s { font-size: 12px; color: #77777d; line-height: 1.65; display: flex; gap: 6px; }
.arch-def .s em { font-style: normal; color: #b6b6bb; flex: none; }
.arch-fig { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none;
  border: 1px solid #ececea; }
.arch-fig img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.arch-fig.ph { display: flex; align-items: center; justify-content: center; border: none;
  font-family: Georgia, "SereinSerif", serif; font-size: 17px; color: #fff;
  background: linear-gradient(150deg, #42424a, #1a1a1f); }
.arch-fig.sm { width: 38px; height: 38px; border-radius: 9px; }
.arch-fig.ph.sm { font-size: 14px; }

/* —— 世界书首页：册页列表（书名走已加载的宋体，计数=意式斜体） —— */
.wbk-head { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px;
  margin: 8px 6px 2px; font-size: 11px; letter-spacing: 2px; color: #b0b0b4; }
.wbk-head em { font-family: "SereinIt", serif; font-style: italic; font-size: 15px;
  letter-spacing: 0; color: #8a8a90; }
.wbk-item { position: relative; display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 16px; padding: 16px 16px 16px 22px; margin: 0 2px 12px;
  cursor: pointer; box-shadow: 0 2px 10px rgba(20, 20, 24, 0.04); overflow: hidden; }
.wbk-item:active { transform: scale(0.985); }
.wbk-item::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px;
  width: 5px; border-left: 2px solid #232326; border-right: 1px solid #232326; }
.wbk-item.loc::before { border-color: #bcbcc2; }
.wbk-main { flex: 1; min-width: 0; }
.wbk-main b { display: block; font-family: "SereinSerif", "Songti SC", serif; font-size: 19px;
  font-weight: 600; color: #1c1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbk-main .sub { display: flex; align-items: baseline; gap: 9px; margin-top: 5px; }
.wbk-main .sc { font-size: 10px; letter-spacing: 1.5px; color: #86868c;
  border: 1px solid #dcdcda; border-radius: 6px; padding: 1.5px 7px; }
.wbk-main em { font-family: "SereinIt", serif; font-style: italic; font-size: 13px; color: #a0a0a5; }
.mt-send {
  width: 40px; height: 40px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: #1c1c1e;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mt-send svg { width: 18px; height: 18px; }

/* 心语列表 */
.mt-wait-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.mt-wait-row::-webkit-scrollbar { display: none; }
.mt-wait {
  flex: none;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.mt-wait .mt-photo { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #e8d3d8; }
.mt-wait b { font-size: 10.5px; color: var(--ink); font-weight: 600; margin-top: 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-convlist { display: flex; flex-direction: column; gap: 10px; }
.mt-swiperow { position: relative; overflow: hidden; border-radius: 18px; }
.mt-row-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  width: 132px;
}
.mt-rowbtn {
  flex: 1;
  border: none;
  color: #fff;
  font-size: 12.5px;
  cursor: pointer;
}
.mt-rowbtn.block { background: #48484d; }
.mt-rowbtn.del { background: #1c1c1e; border-radius: 0 18px 18px 0; }
.mt-convrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 18px;
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.22s ease;
  touch-action: pan-y;
}
.mt-convname { font-size: 15px; font-weight: 600; color: var(--ink); }
.mt-convprev { font-size: 12px; color: #98989e; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-conv-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.mt-fam-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #7d6a6e;
  background: #f3e3e6;
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.mt-fam-mini svg { width: 10px; height: 10px; }

/* ---------- 我的名片 ---------- */
.mt-me-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 11.5;
  margin-top: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  background: linear-gradient(160deg, #e2e2e7, #9d9aa6);
}
.mt-editcard { padding: 14px 16px; }
.mt-form-row { display: flex; gap: 10px; }
.mt-tag-add { display: flex; gap: 8px; }
.mt-tag-add .input { flex: 1; margin: 0; }
.mt-song-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  font-size: 13px;
  color: #3a3a3f;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}
.mt-song-row:last-of-type { border-bottom: none; }
.mt-song-row svg { width: 15px; height: 15px; color: #8e8e93; flex: none; }
.mt-song-row span { flex: 1; }
.mt-song-row u { text-decoration: none; color: #c2c2c7; cursor: pointer; padding: 0 4px; }


/* ============================================================
   v0.43.0：查岗 APP 重做
   入口=夜巡刊（杂志式卷宗）；TA 的手机=银色仿真机身（侧键/灵动岛/
   彩色低饱和图标）；信息与聊天分开；朋友圈/代回复/截图取证/
   单张照片生图/私密备忘录/浏览器标签页/购物车。
   黑白灰 + 少量磨砂玻璃 + 实色紫 #8a7ba8 点缀
   ============================================================ */

.wt-page { -webkit-user-select: none; user-select: none; }

/* ---------- 潜望入口：满幅注视（画即页面） ---------- */
.screen-app.wt-stage-host { background: #141419; }
.screen-app.wt-stage-host .app-header { position: relative; z-index: 30; }
.screen-app.wt-stage-host .app-title,
.screen-app.wt-stage-host .app-back { color: #f2f2f4; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); }
.screen-app.wt-stage-host.wt-lite .app-title,
.screen-app.wt-stage-host.wt-lite .app-back { color: #1c1c1e; text-shadow: none; }

.wt2 { position: absolute; inset: 0; overflow: hidden; padding: 0; }
.wt2 img { -webkit-user-drag: none; }
.wt2-fill { position: absolute; inset: 0; }
.wt2-fill img, .wt2-amb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wt2-fallback { position: absolute; inset: 0; display: block; }

.wt2-amb { position: absolute; inset: -70px; filter: blur(46px) brightness(0.62) saturate(0.9); transform: scale(1.2); }
.wt-lite .wt2-amb { filter: blur(46px) brightness(1.02) saturate(0.9); }
.wt2-scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(12, 12, 15, 0.3) 0%, transparent 26%, transparent 52%, rgba(12, 12, 15, 0.42) 76%, rgba(12, 12, 15, 0.66) 100%); }
.wt-lite .wt2-scrim { background:
  linear-gradient(180deg, rgba(247, 247, 248, 0.35) 0%, transparent 26%, transparent 52%, rgba(247, 247, 248, 0.42) 76%, rgba(247, 247, 248, 0.68) 100%); }

.wt2-hero { position: absolute; top: 0; left: 0; right: 0; height: 63%; cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.wt2-hero.unk .wt2-fill { filter: blur(16px) saturate(0.8); transform: scale(1.08); }
.wt2-frost { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.08)); }
.wt2-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.55; background:
  repeating-linear-gradient(107deg, rgba(0, 0, 0, 0.013) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(163deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px); }

.wt2-evi { position: absolute; top: calc(27px + env(safe-area-inset-top, 0px)); right: 22px; z-index: 31;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 9px; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.wt-lite .wt2-evi { color: rgba(0, 0, 0, 0.55); text-shadow: none; }
.wt2-evi svg { width: 15px; height: 15px; }
.wt2-evi b { font-family: "Didot", "Songti SC", "Noto Serif CJK SC", serif; font-weight: 500; font-size: 12px; }

.wt2-spine { position: absolute; top: 310px; right: -62px; z-index: 5;
  transform: rotate(90deg);
  font-size: 8px; letter-spacing: 6px; white-space: nowrap;
  color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }
.wt-lite .wt2-spine { color: rgba(0, 0, 0, 0.38); text-shadow: none; }

.wt2-plate { position: absolute; left: 32px; right: 60px; bottom: 186px; z-index: 6; cursor: pointer; }
.wt2-nm { font-family: "Didot", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif;
  font-size: 52px; font-weight: 600; letter-spacing: 12px; color: #f2f1ee;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt2-nm.long { font-size: 34px; letter-spacing: 6px; }
.wt-lite .wt2-nm { color: #191a1d; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.wt2-insc { margin-top: 16px; font-family: "Didot", "Songti SC", "Noto Serif CJK SC", serif;
  font-size: 11.5px; letter-spacing: 3.5px; color: rgba(255, 255, 255, 0.62); }
.wt-lite .wt2-insc { color: rgba(0, 0, 0, 0.6); }
.wt2-sub { margin-top: 10px; display: flex; align-items: center; gap: 7px;
  font-size: 9px; letter-spacing: 2.2px; color: rgba(255, 255, 255, 0.4); }
.wt-lite .wt2-sub { color: rgba(0, 0, 0, 0.38); }
.wt2-sub .dot { width: 3.5px; height: 3.5px; border-radius: 50%; background: #8a7ba8; box-shadow: 0 0 5px rgba(138, 123, 168, 0.6); }
.wt2-sub em { font-style: normal; color: #b3a5cf; }
.wt-lite .wt2-sub em { color: #8a7ba8; }

.wt2-rail { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: center; align-items: flex-end; gap: 16px;
  overflow-x: auto; padding: 6px 20px; }
.wt2-rail::-webkit-scrollbar { display: none; }
.wt2-tc { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.wt2-pic { position: relative; width: 56px; height: 74px; border-radius: 13px; overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.25); opacity: 0.62; }
.wt-lite .wt2-pic { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.22); }
.wt2-tc span { font-size: 8.5px; letter-spacing: 2.5px; color: rgba(255, 255, 255, 0.45);
  max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-lite .wt2-tc span { color: rgba(0, 0, 0, 0.4); }
.wt2-tc.on .wt2-pic { width: 64px; height: 84px; opacity: 1; }
.wt2-tc.on .wt2-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.wt2-tc.on span { color: rgba(255, 255, 255, 0.75); }
.wt-lite .wt2-tc.on span { color: rgba(0, 0, 0, 0.62); }
.wt2-tc.fz .wt2-fill { filter: blur(6px); transform: scale(1.16); }

/* ---------- 行动方案页 ---------- */
.wt-dossier {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 6px 18px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
  margin-top: 2px;
}
.wt-dos-av { position: relative; flex: none; }
.wt-dos-av::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
}
.wt-dossier-main { flex: 1; min-width: 0; }
.wt-dossier-main b {
  display: block;
  font-family: "Didot", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #1c1c1e;
}
.wt-dossier-main span { display: block; font-size: 10px; letter-spacing: 0.8px; color: #98989e; margin-top: 6px; }
.wt-dtag {
  font-style: normal;
  flex: none;
  font-size: 9px;
  line-height: 1.9;
  text-align: center;
  color: #b0b0b6;
  border-left: 0.5px solid rgba(0, 0, 0, 0.1);
  padding-left: 8px;
  margin-right: 2px;
}
.wt-dtag.pp { color: #8a7ba8; border-left-color: rgba(138, 123, 168, 0.4); }
.wt-plans { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.wt-plan {
  position: relative;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  padding: 19px 19px 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  -webkit-tap-highlight-color: transparent;
}
.wt-plan:active { transform: scale(0.98); }
.wt-plan-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.16);
  color: #3a3a3f;
  margin-bottom: 13px;
}
.wt-plan-ic svg { width: 17px; height: 17px; }
.wt-plan b {
  display: block;
  font-family: "Didot", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #1c1c1e;
}
.wt-plan > span { display: block; font-size: 11px; color: #8e8e93; line-height: 1.8; margin-top: 8px; letter-spacing: 0.3px; }
.wt-plan-foot {
  display: flex;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #b0b0b6;
  border-top: 0.5px solid rgba(0, 0, 0, 0.07);
  padding: 12px 0 14px;
  margin-top: 15px;
}
.wt-plan.dark {
  background: linear-gradient(160deg, #313037, #101013);
  border-color: transparent;
}
.wt-plan.dark .wt-plan-ic { border-color: rgba(255, 255, 255, 0.22); color: #d9d9de; }
.wt-plan.dark b { color: #f4f4f6; }
.wt-plan.dark > span { color: rgba(255, 255, 255, 0.55); }
.wt-plan.dark .wt-plan-foot { border-top-color: rgba(255, 255, 255, 0.1); }
.wt-plan-foot.purple { color: #b4a7cb; }
.wt-arch {
  margin-top: 18px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 2px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.wt-archrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  cursor: pointer;
}
.wt-archrow + .wt-archrow { border-top: 0.5px solid rgba(0, 0, 0, 0.07); }
.wt-archrow:active { opacity: 0.6; }
.wt-archrow b { font-size: 12.5px; font-weight: 600; letter-spacing: 1px; color: #2c2c30; }
.wt-archrow span { flex: 1; text-align: right; font-size: 10px; letter-spacing: 0.5px; color: #98989e; }
.wt-archrow i { font-style: normal; color: #c2c2c7; }
.wt-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 70px 0;
  color: #98989e;
  font-size: 13px;
}
.wt-busy em { font-style: normal; color: #55555c; letter-spacing: 1px; }
.wt-busy > span { font-size: 10px; letter-spacing: 1px; color: #b9b9bf; }
.wt-refuse-av { display: flex; justify-content: center; }
.wt-refuse-say { font-size: 14px; color: #3a3a3f; margin-top: 10px; }

/* ---------- 证据夹 ---------- */
.wt-evi-head { margin: 10px 4px 14px; }
.wt-evi-head b { font-size: 17px; font-weight: 800; color: #1c1c1e; }
.wt-evi-head span { display: block; font-size: 11px; color: #98989e; margin-top: 4px; }
.wt-evis { display: flex; flex-direction: column; gap: 14px; padding: 4px 6px; }
.wt-evi {
  position: relative;
  background: #ffffff;
  border-radius: 6px;
  padding: 16px 16px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
}
.wt-evi-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.14);
  padding-bottom: 8px;
  margin-bottom: 9px;
}
.wt-evi-meta em { font-style: normal; font-size: 9px; letter-spacing: 2px; color: #8a7ba8; font-weight: 700; }
.wt-evi-meta b { flex: 1; font-size: 12px; color: #3a3a3f; }
.wt-evi-meta span { font-size: 9.5px; color: #b3b3b9; }
.wt-evi p { margin: 0; font-size: 12px; color: #55555c; line-height: 1.9; white-space: pre-wrap; }

/* 证据卡：纸胶带钉住 */
.wt-evis { padding-top: 12px; }
.wt-evi { overflow: visible; }
.wt-evi::before { content: ""; position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
  transform: rotate(-3deg);
  background: rgba(228, 226, 220, 0.72);
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06); }
.wt-evi:nth-child(even)::before { transform: rotate(2.5deg); }


/* ---------- TA 的手机：舞台 + 银色机身 ---------- */
.wt-stage {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: radial-gradient(circle at 50% 26%, #26252b, #0a0a0c 74%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: app-in 0.22s ease;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 0 calc(12px + env(safe-area-inset-bottom, 0px));
}
.wt-topbar { flex: none; width: 80%; padding: 4px 0 12px; }
.wt-risk {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 8px 14px;
}
.wt-risk em { font-style: normal; font-size: 10px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); flex: none; }
.wt-risk b { font-size: 11px; color: #b4a7cb; font-variant-numeric: tabular-nums; flex: none; }
.wt-riskbar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.wt-riskbar i { display: block; height: 100%; border-radius: 2px; background: #8a7ba8; transition: width 0.5s ease; }
.wt-risk.hot b { color: #d9c9f0; }
.wt-risk.hot .wt-riskbar i { animation: wt-pulse 0.9s ease infinite; }
@keyframes wt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.wt-asknote { text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.45); padding: 8px 0; }

/* 银色机身：钛银渐变边框 + 侧键 + 灵动岛 */
.wt-shell {
  position: relative;
  flex: 1;
  width: 80%;
  min-height: 0;
  border-radius: 46px;
  padding: 8px;
  background: linear-gradient(150deg, #f2f2f5, #a9aab1 34%, #dcdce1 52%, #8e8f96 78%, #c8c8ce);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.wt-btn-l, .wt-btn-r {
  position: absolute;
  width: 3.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d6d6db, #86878e);
}
.wt-btn-l { left: -3px; }
.wt-btn-l.v1 { top: 20%; height: 30px; }
.wt-btn-l.v2 { top: 20%; margin-top: 40px; height: 30px; }
.wt-btn-r { right: -3px; top: 24%; height: 52px; background: linear-gradient(270deg, #d6d6db, #86878e); }
.wt-frame {
  position: relative;
  height: 100%;
  border-radius: 38px;
  background: #101013;
  border: 2.5px solid #060607;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #e8e8ec;
}
.wt-island {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 82px; height: 21px;
  border-radius: 12px;
  background: #000;
  z-index: 6;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.08);
}
.wt-island::after {
  content: "";
  position: absolute;
  right: 9px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3a55, #050508 65%);
}
.wt-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #fff;
  animation: wt-flash 0.24s ease forwards;
  pointer-events: none;
}
@keyframes wt-flash { from { opacity: 0.9; } to { opacity: 0; } }

/* 舞台底部操作行 */
.wt-actions {
  flex: none;
  width: 80%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 13px;
}
.wt-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 12.5px;
  padding: 10px 18px;
  cursor: pointer;
}
.wt-act svg { width: 15px; height: 15px; }
.wt-act:active { background: rgba(255, 255, 255, 0.2); }
.wt-act.main { background: #f2f2f4; color: #141417; font-weight: 600; }
.wt-evi-n { margin-left: auto; font-size: 10px; letter-spacing: 1px; color: #b4a7cb; }

/* 状态栏 */
.wt-status {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px 0;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 7;
}
.wt-st-r { display: flex; align-items: center; gap: 6px; }
.wt-cell { display: flex; align-items: flex-end; gap: 1.5px; }
.wt-cell em { width: 2.5px; border-radius: 1px; background: rgba(255, 255, 255, 0.75); }
.wt-cell em:nth-child(1) { height: 4px; }
.wt-cell em:nth-child(2) { height: 6px; }
.wt-cell em:nth-child(3) { height: 8px; }
.wt-cell em:nth-child(4) { height: 10px; opacity: 0.35; }
.wt-batt { width: 24px; height: 11px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 3.5px; padding: 1.5px; }
.wt-batt i { display: block; height: 100%; border-radius: 1.5px; background: #8a7ba8; }

/* 锁屏 */
.wt-lock {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  background:
    radial-gradient(circle at 24% 16%, rgba(138, 123, 168, 0.32), transparent 44%),
    radial-gradient(circle at 80% 40%, rgba(120, 130, 160, 0.2), transparent 46%),
    radial-gradient(circle at 55% 88%, rgba(90, 80, 110, 0.35), transparent 52%),
    linear-gradient(170deg, #1d1c22, #121114);
}
.wt-lock .wt-status { align-self: stretch; }
.wt-lock-date { font-size: 12px; color: rgba(255, 255, 255, 0.75); margin-top: 32px; letter-spacing: 1px; }
.wt-lock-time {
  font-size: 58px;
  font-weight: 250;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.wt-notifs { align-self: stretch; padding: 18px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.wt-notif {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 15px;
  padding: 10px 13px;
}
.wt-notif b { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.5px; }
.wt-notif span { display: block; font-size: 12px; color: #fff; margin-top: 3px; line-height: 1.5; }
.wt-lock-wallpill {
  margin-top: auto;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
}
.wt-lock-hint {
  margin: 14px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 6px 20px;
}
.wt-lock-hint i {
  width: 96px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  animation: wt-hint 1.8s ease infinite;
}
@keyframes wt-hint { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* 主屏 */
.wt-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(circle at 76% 12%, rgba(138, 123, 168, 0.16), transparent 42%),
    linear-gradient(170deg, #1a191e, #101013);
}
.wt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 4px;
  padding: 30px 14px 0;
}
.wt-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wt-app:active .wt-tile { transform: scale(0.9); }
.wt-tile {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.14s ease;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 3px 8px rgba(0, 0, 0, 0.35);
}
.wt-tile svg { width: 24px; height: 24px; }
.wt-tile.green, .wt-tile.ink, .wt-tile.white, .wt-tile.paper,
.wt-tile.blue, .wt-tile.rose, .wt-tile.amber {
  background: rgba(255, 255, 255, 0.09);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  color: #e4e4e9;
  box-shadow: none;
}
.wt-app em { font-style: normal; font-size: 9.5px; color: rgba(255, 255, 255, 0.7); }
.wt-homedots { display: flex; justify-content: center; gap: 6px; margin-top: auto; padding-bottom: 10px; }
.wt-homedots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.wt-homedots i.on { background: rgba(255, 255, 255, 0.8); }
.wt-dock {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 12px 12px;
  padding: 9px 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* APP 内页 */
.wt-appview { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wt-apphead {
  flex: none;
  display: flex;
  align-items: center;
  padding: 38px 12px 10px;
  gap: 4px;
}
.wt-apphead i {
  font-style: normal;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: #d9d9df;
  cursor: pointer;
}
.wt-apphead i svg { width: 18px; height: 18px; }
.wt-apphead b { flex: 1; text-align: center; font-size: 14px; color: #f0f0f4; font-weight: 600; }
.wt-apphead u { width: 28px; }
.wt-appbody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 14px 18px;
}
.wt-note { text-align: center; font-size: 10px; color: rgba(255, 255, 255, 0.35); padding: 12px 0 2px; }
.wt-blabel { font-size: 9.5px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.4); padding: 14px 2px 7px; }
.wt-list { display: flex; flex-direction: column; }

/* 信息（短信） */
.wt-smslist { padding-top: 4px; }
.wt-smsrow {
  display: flex;
  gap: 11px;
  padding: 11px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.wt-smsav {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #cfcfd6;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.wt-smsrow b { display: block; font-size: 12.5px; color: #f0f0f4; }
.wt-smsrow span { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-top: 3px; line-height: 1.55; }

/* 聊天 */
.wt-momentsrow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 11px 13px;
  margin: 4px 0 8px;
  cursor: pointer;
}
.wt-mo-ic { width: 20px; height: 20px; color: #b4a7cb; flex: none; }
.wt-mo-ic svg { width: 100%; height: 100%; }
.wt-momentsrow b { flex: 1; font-size: 13px; color: #f0f0f4; font-weight: 600; }
.wt-hidedot { width: 7px; height: 7px; border-radius: 50%; background: #8a7ba8; }
.wt-chev { color: rgba(255, 255, 255, 0.3); }
.wt-chatrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.wt-cav {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #e8e8ec;
  font-size: 16px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.wt-cav.real { background: #f2f2f4; color: #1c1c1e; }
.wt-cmain { flex: 1; min-width: 0; }
.wt-cmain b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #f0f0f4; font-weight: 600; }
.wt-cmain b i { font-style: normal; font-size: 9px; font-weight: 400; color: rgba(255, 255, 255, 0.35); border: 0.5px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 1px 6px; }
.wt-cmain b i.wt-pin { color: #b4a7cb; border-color: rgba(138, 123, 168, 0.5); }
.wt-cmain span { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-conv { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
/* 聊天对话视图：气泡区撑满并内部滚动，输入条贴底（对话很短也铺满整屏） */
.wt-appview.conv .wt-appbody { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.wt-appview.conv .wt-conv { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wt-appview.conv .wt-fakebar,
.wt-appview.conv .wt-note { flex: none; }
.wt-bub {
  max-width: 80%;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 8px 12px;
  border-radius: 14px;
}
.wt-bub.in { align-self: flex-start; background: rgba(255, 255, 255, 0.1); color: #ececf0; border-top-left-radius: 4px; }
.wt-bub.out { align-self: flex-end; background: rgba(255, 255, 255, 0.88); color: #1c1c1e; border-top-right-radius: 4px; }
.wt-btyping { display: flex; gap: 4px; padding: 11px 13px; }
.wt-btyping i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); animation: mt-dot 1.1s ease infinite; }
.wt-btyping i:nth-child(2) { animation-delay: 0.18s; }
.wt-btyping i:nth-child(3) { animation-delay: 0.36s; }
.wt-fakebar { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.wt-fakein {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  color: #f0f0f4;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12.5px;
}
.wt-fakein::placeholder { color: rgba(255, 255, 255, 0.3); }
.wt-fakego {
  width: 36px; height: 36px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: #f2f2f4;
  color: #141417;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.wt-fakego svg { width: 16px; height: 16px; }

/* 朋友圈 */
.wt-moments { display: flex; flex-direction: column; padding-top: 4px; }
.wt-mopost {
  display: flex;
  gap: 11px;
  padding: 12px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.wt-mo-main { flex: 1; min-width: 0; }
.wt-mo-main b { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #cbd4e8; font-weight: 600; }
.wt-hide-tag {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  color: #b4a7cb;
  border: 0.5px solid rgba(138, 123, 168, 0.5);
  border-radius: 999px;
  padding: 1px 6px;
  letter-spacing: 1px;
}
.wt-mo-main p { margin: 5px 0 0; font-size: 12.5px; color: #ececf0; line-height: 1.65; }
.wt-mo-img {
  margin-top: 8px;
  width: 62%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 7px;
}
.wt-mo-img em { font-style: normal; font-size: 9px; color: rgba(255, 255, 255, 0.7); }
.wt-mo-meta { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 7px; }

/* 相册：错落瀑布 + 大图 */
.wt-gallery { columns: 2; column-gap: 7px; padding-top: 4px; }
.wt-gtile {
  position: relative;
  break-inside: avoid;
  margin-bottom: 7px;
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  cursor: pointer;
}
.wt-gtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wt-gtile em { position: relative; font-style: normal; font-size: 9px; color: rgba(255, 255, 255, 0.75); line-height: 1.5; }
.wt-gtile.secret { box-shadow: inset 0 0 0 1.5px rgba(138, 123, 168, 0.6); }
.wt-glock { position: absolute; right: 7px; top: 7px; width: 15px; height: 15px; color: #b4a7cb; z-index: 1; }
.wt-glock svg { width: 100%; height: 100%; }
.wt-photoview { padding-top: 6px; }
.wt-photo-big {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wt-photo-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wt-photo-big em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.75); text-align: center; line-height: 1.9; }
.wt-photo-cap { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); padding: 11px 2px 0; display: flex; align-items: center; gap: 8px; }
.wt-photo-btns { display: flex; gap: 9px; margin-top: 12px; }
.wt-pbtn {
  flex: 1;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f0f0f4;
  font-size: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.wt-pbtn:active { background: rgba(255, 255, 255, 0.2); }
.wt-pic-busy {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  border-radius: 999px;
  padding: 8px 14px;
  z-index: 2;
  white-space: nowrap;
}
.wt-pic-busy .pic-spinner { width: 13px; height: 13px; border-width: 2px; }

/* 备忘录 */
.wt-memofolders { display: flex; gap: 9px; padding: 6px 0 4px; }
.wt-mfolder {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px 13px;
  cursor: pointer;
  border: 1px solid transparent;
}
.wt-mfolder.on { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.12); }
.wt-mfolder b { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #f0f0f4; font-weight: 600; }
.wt-mfolder span { display: block; font-size: 16px; color: rgba(255, 255, 255, 0.75); margin-top: 7px; font-weight: 300; }
.wt-memolock {
  text-align: center;
  padding: 34px 0;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  margin-top: 8px;
}
.wt-memolock b { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.wt-memolock span { display: block; font-size: 10.5px; color: rgba(255, 255, 255, 0.38); margin-top: 6px; }
.wt-noterow {
  padding: 11px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
.wt-noterow b { display: block; font-size: 13px; color: #f0f0f4; font-weight: 600; }
.wt-noterow span { display: block; font-size: 10.5px; color: rgba(255, 255, 255, 0.42); margin-top: 4px; }
.wt-noterow span em { font-style: normal; color: rgba(255, 255, 255, 0.35); margin-right: 7px; }
.wt-notepage { padding: 8px 4px; }
.wt-note-date { font-size: 10px; color: rgba(255, 255, 255, 0.35); letter-spacing: 1px; }
.wt-notepage b { display: block; font-size: 17px; color: #f0f0f4; margin-top: 8px; }
.wt-notepage p { margin: 12px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.78); line-height: 2; white-space: pre-wrap; }

/* 浏览器 */
.wt-urlbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 9px 14px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11.5px;
}
.wt-urlbar svg { width: 13px; height: 13px; flex: none; }
.wt-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wt-tabs::-webkit-scrollbar { display: none; }
.wt-tab {
  flex: none;
  width: 138px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  border-top: 2px solid rgba(138, 123, 168, 0.6);
}
.wt-tab b { display: block; font-size: 11px; color: #f0f0f4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-tab span { display: block; font-size: 9.5px; color: rgba(255, 255, 255, 0.42); margin-top: 4px; line-height: 1.5; }
.wt-sites { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.wt-sites::-webkit-scrollbar { display: none; }
.wt-site { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 48px; }
.wt-site i {
  font-style: normal;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #d9d9df;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.wt-site span { font-size: 9px; color: rgba(255, 255, 255, 0.5); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-qrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: #d9d9df;
}
.wt-qrow svg { width: 13px; height: 13px; color: rgba(255, 255, 255, 0.3); flex: none; }
.wt-qrow span { flex: 1; }
.wt-qrow em { font-style: normal; font-size: 9.5px; color: rgba(255, 255, 255, 0.3); }

/* 日历 / 音乐 / 购物 */
.wt-caltop { display: flex; align-items: baseline; gap: 10px; padding: 8px 2px 4px; }
.wt-caltop b { font-size: 22px; color: #f0f0f4; }
.wt-caltop span { font-size: 10.5px; color: rgba(255, 255, 255, 0.4); }
.wt-crow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.wt-crow em { font-style: normal; font-size: 10px; color: #b4a7cb; flex: none; min-width: 62px; }
.wt-crow span { font-size: 12.5px; color: #e8e8ec; }
.wt-nowplay {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px 13px;
  margin-top: 6px;
}
.wt-np-disc { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.wt-np-main em { font-style: normal; display: block; font-size: 9.5px; color: rgba(255, 255, 255, 0.4); letter-spacing: 1px; }
.wt-np-main b { display: block; font-size: 12.5px; color: #f0f0f4; margin-top: 4px; }
.wt-srow2 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.wt-srow2 em { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, 0.3); font-variant-numeric: tabular-nums; }
.wt-srow2 span { font-size: 12.5px; color: #e8e8ec; }
.wt-cartrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.wt-cartrow b { font-size: 12.5px; color: #f0f0f4; }
.wt-cartrow div span { display: block; font-size: 10px; color: #b4a7cb; margin-top: 3px; }
.wt-cartrow > em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.6); flex: none; }
.wt-orow { padding: 11px 2px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.06); }
.wt-o-top { display: flex; align-items: baseline; justify-content: space-between; }
.wt-o-top b { font-size: 12.5px; color: #f0f0f4; }
.wt-o-top i { font-style: normal; font-size: 9.5px; color: #b4a7cb; }
.wt-orow > span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); margin-top: 3px; }
.wt-orow > em { display: block; font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, 0.38); margin-top: 4px; }

/* 被抓 */
.wt-caught {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  background: #0e0d10;
}
.wt-caught-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 110%, rgba(138, 123, 168, 0.28), transparent 55%);
  animation: wt-glow 1.6s ease infinite;
  pointer-events: none;
}
@keyframes wt-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.wt-caught b { font-size: 19px; color: #fff; letter-spacing: 2px; }
.wt-caught > span { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); line-height: 2; margin-top: 14px; }
.wt-caught-btn {
  margin-top: 26px;
  border: none;
  border-radius: 999px;
  background: #f2f2f4;
  color: #141417;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 32px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* ============================================================
   v0.44 潜望：沉浸式全屏 + 主屏重设计（衬线黑白灰）+ 真实对话气泡
   ============================================================ */

/* ---- 沉浸式：手机铺满整个屏幕，机身隐去 ---- */
.wt-stage.full { padding: 0; }
.wt-stage.full .wt-topbar {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(330px, 84%);
  padding: 0;
  z-index: 46;
}
.wt-stage.full .wt-risk,
.wt-stage.full .wt-asknote {
  background: rgba(12, 12, 16, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
}
.wt-stage.full .wt-asknote { padding: 8px 16px; }
.wt-stage.full .wt-shell {
  width: 100%;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.wt-stage.full .wt-btn-l, .wt-stage.full .wt-btn-r,
.wt-stage.full .wt-island, .wt-stage.full .wt-status { display: none; }
.wt-stage.full .wt-frame {
  border-radius: 0;
  border: none;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
}
.wt-stage.full .wt-apphead { padding-top: calc(env(safe-area-inset-top, 0px) + 48px); }
.wt-stage.full .wt-lock-date { margin-top: calc(env(safe-area-inset-top, 0px) + 66px); }
.wt-stage.full .wt2-mast { padding-top: calc(env(safe-area-inset-top, 0px) + 52px); }
.wt-stage.full .wt-actions {
  position: absolute;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  padding: 6px;
  background: rgba(12, 12, 16, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  z-index: 46;
}
.wt-stage.full .wt-evi-n { margin-left: 4px; padding-right: 10px; }
.wt-act.on { background: rgba(255, 255, 255, 0.26); }

/* ---- 主屏：衬线字排版 + 单色玻璃瓷砖 ---- */
.wt2h { padding-bottom: 4px; }
.wt2-mast { padding: 22px 18px 0; text-align: center; }
.wt2-clock {
  font-family: Georgia, "Didot", "Times New Roman", "Songti SC", "Noto Serif SC", serif;
  font-style: italic;
  font-size: 58px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #f4f4f6;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
}
.wt2-date { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 7px; }
.wt2-date i { flex: none; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42)); }
.wt2-date i:last-child { transform: scaleX(-1); }
.wt2-date span { font-size: 10.5px; letter-spacing: 3px; color: rgba(255, 255, 255, 0.6); }
.wt2-bento {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 9px;
  padding: 15px 13px 12px;
}
.wt2-tile {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: 11px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.065);
  border: 0.5px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease;
}
.wt2-tile:active { transform: scale(0.955); }
.wt2-tile.wide { grid-column: span 3; background: rgba(255, 255, 255, 0.1); }
.wt2-tile:nth-child(5), .wt2-tile:nth-child(7) { background: rgba(255, 255, 255, 0.04); }
.wt2-g {
  font-family: Georgia, "Songti SC", "Noto Serif SC", serif;
  font-size: 29px;
  font-weight: 600;
  color: #f2f2f5;
  line-height: 1.1;
}
.wt2-tile.wide .wt2-g { font-size: 33px; }
.wt2-en {
  position: absolute;
  top: 11px;
  right: 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.wt2-n {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: auto;
  padding-top: 6px;
}
.wt2-peek {
  margin-top: 6px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  min-width: 0;
}
.wt2-peek b {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt2-peek span {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- TA 和你的对话：还原语音条/旁白/图片/卡片 ---- */
.wt-cline {
  align-self: center;
  max-width: 90%;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.38);
  padding: 2px 10px;
  line-height: 1.6;
}
.wt-cline.narr { font-style: italic; color: rgba(255, 255, 255, 0.5); }
.wt-bub.pic { padding: 0; background: none; max-width: 45%; border-radius: 14px; }
.wt-bub.pic img { display: block; width: 100%; border-radius: 14px; }
.wt-bub.pic.big { max-width: 62%; }
.wt-bub.voice { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 70%; }
.wt-vwave { display: flex; align-items: center; gap: 2.5px; }
.wt-vwave i { width: 2.5px; border-radius: 2px; background: currentColor; opacity: 0.72; }
.wt-bub.voice em { font-style: normal; font-size: 10.5px; opacity: 0.65; font-variant-numeric: tabular-nums; }
.wt-bub.wt-card { border: 0.5px solid rgba(255, 255, 255, 0.16); font-size: 11.5px; line-height: 1.55; }
.wt-bub.out.wt-card { border-color: rgba(0, 0, 0, 0.12); }
.wt-bub.wt-card i {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 2px;
  opacity: 0.55;
  margin-bottom: 3px;
}
.wt-q {
  display: block;
  text-decoration: none;
  font-size: 10px;
  opacity: 0.6;
  border-left: 2px solid currentColor;
  padding-left: 6px;
  margin-bottom: 4px;
}

/* ---- 证据：预览面板 + 聊天里的截图卡 ---- */
.wt-evi-preview {
  margin-top: 8px;
  text-align: left;
  font-size: 11.5px;
  color: #55555c;
  line-height: 1.65;
  white-space: pre-wrap;
  background: #f5f5f7;
  border-radius: 10px;
  padding: 9px 11px;
  max-height: 170px;
  overflow-y: auto;
}
.wtshot-bubble .ws-from { font-size: 12.5px; font-weight: 700; color: #1c1c1e; margin: 3px 0 6px; }
.wtshot-bubble .ws-text {
  font-size: 11.5px;
  color: #55555c;
  line-height: 1.6;
  white-space: pre-wrap;
  background: #f4f4f6;
  border: 0.5px solid #e6e6ea;
  border-radius: 10px;
  padding: 8px 10px;
}
.wt2-g { margin-top: 12px; }
.wt2-tile.wide .wt2-g { margin-top: 2px; }
.wt2-mini {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.5;
  margin-top: 7px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.09);
  padding-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-act, .wt-evi-n { white-space: nowrap; }

/* ============================================================
   v0.45 修复与新功能：圆圈图标居中修复 / 问答答案标注 /
   记忆合并 / 聊天时间戳与搜索 / 邂逅（在线行·对话照片·pass·独立号）
   ============================================================ */

/* 圆圈图标居中：容器级 `X span { display:block }` 规则会压掉图标 span 的
   flex 居中（如 .wt-plan > span / .wt-smsrow span），在此统一夺回 */
span.wt-plan-ic, span.wt-smsav, span.c-avatar,
span.mt-lock-ic, span.mt-search-idle-ic, span.gm-inv-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

/* 知识问答：正确答案与 TA 的对错标注 */
.gm-opt { flex-wrap: wrap; }
.gm-opt-anstag {
  flex-basis: 100%;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding-left: 33px;
  margin-top: 3px;
  color: #3d9960;
  font-weight: 600;
}
.gm-opt.wrong .gm-opt-ta { color: #98989e; }

/* 聊天：对话内时间戳 */
.msg-ts { font-size: 10px; color: #b3b3b9; padding: 8px 0 2px; }

/* 聊天：搜索聊天记录 */
.cs-hit-text mark { background: #f3e3e6; color: inherit; border-radius: 3px; padding: 0 2px; }
.cs-ctx { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.cs-ctx-row { max-width: 86%; align-self: flex-start; }
.cs-ctx-row.mine { align-self: flex-end; text-align: right; }
.cs-ctx-row em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: #b3b3b9;
  margin-bottom: 3px;
}
.cs-ctx-row p {
  display: inline-block;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  background: #f2f2f4;
  border-radius: 13px;
  padding: 8px 12px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.cs-ctx-row.mine p { background: #1c1c1e; color: #fff; }
.cs-ctx-row.hit p { box-shadow: 0 0 0 2px #f3e3e6; }

/* 记忆合并：多选态 */
.mem-node.picked .mem-card { box-shadow: 0 0 0 2px #1c1c1e; }
.mem-pick {
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid #c6c6cc;
  position: relative;
}
.mem-pick.on { border-color: #1c1c1e; background: #1c1c1e; }
.mem-pick.on::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 2.5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

/* 邂逅：此刻在线（圆头像横滑行） */
.mt-online-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 8px;
  scrollbar-width: none;
}
.mt-online-row::-webkit-scrollbar { display: none; }
.mt-online {
  flex: none;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.mt-online-av { position: relative; width: 56px; height: 56px; }
.mt-photo.round { position: relative; width: 100%; height: 100%; border-radius: 50%; }
.mt-photo.round i { font-size: 22px; }
.mt-online-av .mt-photo { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #e9e9ec; }
.mt-online-dot {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #f3e3e6;
  border: 2px solid #fff;
}
.mt-online b {
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 邂逅：详情页日常照操作行 */
.mt-lifepic-ops { display: flex; gap: 16px; margin-top: 8px; }

/* 邂逅：对话里 TA 发的照片 */
.mt-picmsg { max-width: 68%; }
.mt-picmsg img { display: block; width: 100%; border-radius: 15px; border: 0.5px solid rgba(0, 0, 0, 0.06); }
.mt-picmsg-ph {
  background: #f2f2f4;
  border-radius: 15px;
  padding: 12px 14px;
}
.mt-picmsg-ph em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #6e6e73;
  line-height: 1.6;
}
.mt-picmsg-ph u {
  display: inline-block;
  text-decoration: none;
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
}
.mt-picmsg-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #98989e;
  margin-top: 8px;
}

/* 邂逅：结束的对话 */
.mt-ended-note {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #b3b3b9;
  padding: 12px 0;
}
.mt-convrow.ended .li-main, .mt-convrow.ended .mt-photo { opacity: 0.6; }

/* ============================================================
   v0.46 阅读 APP：杂志排版风书坊 / 纯排版书封 / 纸感阅读器
   ============================================================ */

.rd-app { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rd-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 20px; }
.rd-page { padding-bottom: 30px; }

/* 刊头 */
.rd-mast { display: flex; align-items: baseline; gap: 12px; padding: 10px 2px 2px; }
.rd-mast b {
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 4px;
}
.rd-mast i { flex: 1; height: 1px; background: rgba(0, 0, 0, 0.22); }
.rd-mast em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 12px;
  color: #98989e;
  white-space: nowrap;
}
.rd-sec { margin-top: 18px; }

/* ---- 纯排版书封：--rc 为主墨色 ---- */
.rd-cover {
  position: relative;
  overflow: hidden;
  flex: none;
  background: linear-gradient(165deg, #f2f0ea, #dfddd5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif;
  color: var(--rc);
}
.rd-cover.mini { width: 78px; height: 106px; font-size: 13px; }
.rd-cover.row { width: 58px; height: 79px; font-size: 10px; border-radius: 2px; }
.rd-cover.big { width: 118px; height: 160px; font-size: 17px; }
.rd-cover.detail { width: 150px; height: 204px; font-size: 21px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); }
/* 版式0：竖排 + 细线框 */
.rd-cover.v0 .rc-frame { position: absolute; inset: 7%; border: 0.5px solid var(--rc); opacity: 0.55; pointer-events: none; }
.rd-cover.v0 .rc-vt {
  position: absolute; top: 13%; right: 17%;
  font-size: 1.22em; font-weight: 700; line-height: 1.32; letter-spacing: 1px;
}
.rd-cover.v0 .rc-au { position: absolute; left: 16%; bottom: 12%; font-size: 0.62em; letter-spacing: 2px; opacity: 0.8; }
/* 版式1：上字下墨带 */
.rd-cover.v1 .rc-top { position: absolute; top: 0; left: 0; right: 0; height: 66%; display: flex; align-items: center; padding: 0 12%; }
.rd-cover.v1 .rc-top b { font-size: 1.3em; font-weight: 700; line-height: 1.4; letter-spacing: 1px; }
.rd-cover.v1 .rc-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: var(--rc); color: #f2f0ea;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 12%;
}
.rd-cover.v1 .rc-band span { font-size: 0.6em; letter-spacing: 2px; }
.rd-cover.v1 .rc-band em { font-style: italic; font-size: 0.52em; opacity: 0.65; }
/* 版式2：居中双细线 */
.rd-cover.v2 { text-align: center; }
.rd-cover.v2 .rc-rule { position: absolute; left: 14%; right: 14%; height: 1px; background: var(--rc); opacity: 0.6; }
.rd-cover.v2 .rc-rule.t { top: 15%; }
.rd-cover.v2 .rc-rule.b { bottom: 24%; }
.rd-cover.v2 .rc-mid {
  position: absolute; top: 26%; left: 8%; right: 8%;
  font-size: 1.2em; font-weight: 700; line-height: 1.4; letter-spacing: 2px;
}
.rd-cover.v2 .rc-sub { position: absolute; top: 60%; left: 0; right: 0; font-style: italic; font-size: 0.58em; opacity: 0.7; }
.rd-cover.v2 .rc-au { position: absolute; bottom: 10%; left: 0; right: 0; font-size: 0.6em; letter-spacing: 3px; opacity: 0.8; }
/* 版式3：整幅墨面 */
.rd-cover.v3 { background: var(--rc); color: #f0eee8; }
.rd-cover.v3 .rc-hair { position: absolute; top: 12%; left: 12%; right: 12%; height: 1px; background: currentColor; opacity: 0.4; }
.rd-cover.v3 .rc-au.top { position: absolute; top: 16%; left: 12%; font-size: 0.58em; letter-spacing: 3px; opacity: 0.75; }
.rd-cover.v3 .rc-bl {
  position: absolute; left: 12%; right: 10%; bottom: 10%;
  font-size: 1.5em; font-weight: 700; line-height: 1.3; letter-spacing: 1px;
}

/* ---- 书坊 ---- */
.rd-shelfrow { display: flex; gap: 14px; overflow-x: auto; padding: 8px 2px 6px; scrollbar-width: none; }
.rd-shelfrow::-webkit-scrollbar { display: none; }
.rd-shelfit { flex: none; width: 80px; cursor: pointer; }
.rd-shelfit > b { display: block; font-size: 11px; font-weight: 600; color: var(--ink); margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-shelfit > span { display: block; font-size: 9.5px; color: #98989e; margin-top: 2px; }

.rd-cats { display: flex; gap: 9px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: none; }
.rd-cats::-webkit-scrollbar { display: none; }
.rd-cat {
  flex: none;
  width: 76px; height: 96px;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  background: #fdfdfc;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease;
}
.rd-cat:active { transform: scale(0.96); }
.rd-cat b {
  position: absolute; top: 12px; left: 12px;
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif;
  font-size: 17px; font-weight: 700; line-height: 1.45;
  color: var(--ink); letter-spacing: 2px;
}
.rd-cat em {
  position: absolute; right: 9px; bottom: 8px;
  font-family: Georgia, serif; font-style: italic;
  font-size: 9.5px; color: #b3b3b9;
}
.rd-cat.on { background: #1c1c1e; border-color: #1c1c1e; }
.rd-cat.on b { color: #f4f4f6; }
.rd-cat.on em { color: rgba(255, 255, 255, 0.5); }
.rd-cat.cus { border-style: dashed; }
.rd-cat-sub { font-size: 10.5px; letter-spacing: 3px; color: #98989e; padding: 8px 4px 0; }

.rd-list { padding-top: 10px; }
.rd-big {
  display: flex; gap: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  padding: 16px;
  cursor: pointer;
}
.rd-big-main { flex: 1; min-width: 0; }
.rd-big-main b {
  display: block;
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif;
  font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: 1px;
}
.rd-big-main em { display: block; font-style: normal; font-size: 10.5px; color: #98989e; margin-top: 4px; }
.rd-big-hook {
  display: block;
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif;
  font-style: italic;
  font-size: 12.5px; color: #3a3a3f;
  border-left: 2px solid #1c1c1e;
  padding-left: 8px;
  margin-top: 9px;
  line-height: 1.5;
}
.rd-big-main p { font-size: 11px; color: #8e8e93; line-height: 1.7; margin: 8px 0 0; }
.rd-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 2px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
  cursor: pointer;
}
.rd-row-main { flex: 1; min-width: 0; }
.rd-row-main b { display: block; font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-size: 15px; font-weight: 700; color: var(--ink); }
.rd-row-main em { display: block; font-style: normal; font-size: 10px; color: #b3b3b9; margin-top: 2px; }
.rd-row-main p { font-size: 11px; color: #8e8e93; margin: 5px 0 0; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-empty-col { text-align: center; padding: 46px 0 30px; }
.rd-empty-col b { font-size: 13px; color: #6e6e73; font-weight: 600; }
.rd-search-idle { text-align: center; font-size: 12.5px; color: #6e6e73; line-height: 2; padding-top: 70px; }
.rd-search-idle span { font-size: 10.5px; color: #b3b3b9; }

/* 书架 */
.rd-shelfgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; padding-top: 12px; }
.rd-shelfit.grid { width: auto; }
.rd-shelfit.grid .rd-cover { width: 100%; height: auto; aspect-ratio: 3 / 4.1; }

/* ---- 详情页 ---- */
.rd-hero { display: flex; gap: 18px; align-items: flex-end; padding: 14px 2px 4px; }
.rd-dt-title { display: block; font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: 1px; line-height: 1.3; }
.rd-dt-author { display: block; font-size: 11.5px; color: #8e8e93; margin-top: 6px; letter-spacing: 1px; }
.rd-dt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rd-dt-tags i {
  font-style: normal; font-size: 10px; color: #3a3a3f;
  border: 0.5px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px; padding: 2.5px 9px;
}
.rd-open { display: flex; gap: 10px; margin: 18px 2px 0; }
.rd-open i { flex: none; width: 2px; background: #1c1c1e; }
.rd-open p {
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-style: italic;
  font-size: 13.5px; color: #3a3a3f; line-height: 1.8; margin: 0;
}
.rd-introcard { background: #fff; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); padding: 15px 16px; margin-top: 14px; }
.rd-hook { display: block; font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
p.rd-intro { font-size: 12.5px; color: #55555c; line-height: 1.9; margin: 0 0 6px; }
.rd-metarow { display: flex; margin-top: 16px; border-top: 0.5px solid rgba(0, 0, 0, 0.14); border-bottom: 0.5px solid rgba(0, 0, 0, 0.14); }
.rd-metarow > div { flex: 1; text-align: center; padding: 11px 2px; border-left: 0.5px solid rgba(0, 0, 0, 0.09); }
.rd-metarow > div:first-child { border-left: none; }
.rd-metarow em { display: block; font-style: normal; font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rd-metarow span { display: block; font-size: 9px; letter-spacing: 2px; color: #b3b3b9; margin-top: 3px; }
.rd-toc { padding: 4px 14px; }
.rd-tocrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); cursor: pointer; }
.rd-tocrow:last-child { border-bottom: none; }
.rd-tocrow em { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: #b3b3b9; flex: none; width: 22px; }
.rd-tocrow b { flex: 1; font-size: 13px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-tocrow span { font-size: 10px; color: #b3b3b9; flex: none; }
.rd-tocrow.cur b { color: #1c1c1e; }
.rd-tocrow.cur span { color: #1c1c1e; }
.rd-markrow { padding: 9px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); cursor: pointer; }
.rd-markrow em { font-style: normal; font-size: 9.5px; letter-spacing: 1px; color: #b3b3b9; }
.rd-markrow p { font-size: 11.5px; color: #3a3a3f; margin: 3px 0 0; line-height: 1.6; }
.rd-markrow span { display: block; font-size: 10.5px; color: #8e8e93; margin-top: 2px; font-style: italic; }

/* ---- 阅读器（纸感） ---- */
.screen-app.rd-screen { background: #f6f3ea; }
.screen-app.rd-screen .app-header { background: transparent; }
.rd-readerwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.rd-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 22px 30px; }
.rd-chhead { padding: 14px 0 6px; }
.rd-chhead em { display: block; font-family: Georgia, serif; font-style: italic; font-size: 15px; color: #b0aa9c; letter-spacing: 2px; }
.rd-chhead b { display: block; font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-size: 23px; font-weight: 700; color: #26241f; margin-top: 4px; letter-spacing: 1px; }
.rd-chhead span { display: block; font-size: 10px; letter-spacing: 1.5px; color: #a49e90; margin-top: 8px; }
.rd-body { padding-top: 12px; font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; }
.rd-body p {
  color: #2c2a24;
  line-height: 1.95;
  text-indent: 2em;
  margin: 0 0 14px;
}
.rd-scroll.marking .rd-body p { cursor: pointer; }
.rd-body p.marked {
  background: rgba(70, 60, 35, 0.07);
  border-left: 2px solid #26241f;
  padding: 4px 8px 4px 10px;
  text-indent: 0;
  border-radius: 2px;
}
.rd-note { display: block; text-decoration: none; font-style: italic; font-size: 0.78em; color: #8a8272; margin-top: 4px; }
.rd-marktip {
  position: sticky; top: 0; z-index: 5;
  text-align: center; font-size: 10.5px; color: #6e6a5e;
  background: rgba(246, 243, 234, 0.94);
  padding: 7px 0; letter-spacing: 1px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.rd-fin { display: flex; align-items: center; gap: 12px; padding: 18px 0 6px; }
.rd-fin i { flex: 1; height: 1px; background: rgba(0, 0, 0, 0.16); }
.rd-fin span { font-size: 10px; letter-spacing: 4px; color: #a49e90; }
.rd-writing { text-align: center; padding: 90px 20px 40px; }
.rd-writing b { display: block; font-size: 13.5px; color: #55524a; font-weight: 600; margin-top: 14px; }
.rd-writing > span:not(.pic-spinner) { display: block; font-size: 10.5px; color: #a8a294; margin-top: 7px; }

/* 共读批注 */
.rd-co { margin-top: 16px; border-left: 2px solid #26241f; padding: 4px 0 4px 12px; }
.rd-co-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rd-co-head b { font-size: 12px; color: #26241f; }
.rd-co-head span { font-size: 10px; color: #a49e90; }
.rd-co-line {
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif;
  font-size: 12.5px; color: #4a463c; line-height: 1.75;
  padding: 3px 0;
}
.rd-co-line::before { content: "— "; color: #b0aa9c; }

/* 章评 */
.rd-cmts { margin-top: 20px; }
.rd-cmt-head { font-size: 10.5px; letter-spacing: 3px; color: #a49e90; padding-bottom: 8px; border-bottom: 0.5px solid rgba(0, 0, 0, 0.12); }
.rd-cmt { padding: 11px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.07); position: relative; }
.rd-cmt b { font-size: 11px; color: #6e6a5e; font-weight: 700; }
.rd-cmt p { font-size: 12.5px; color: #2c2a24; line-height: 1.7; margin: 4px 44px 0 0; }
.rd-cmt span { position: absolute; right: 0; top: 12px; font-size: 10px; color: #a49e90; }
.rd-cmt-busy { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #a49e90; padding: 14px 0; }
.rd-next { margin: 20px 0 8px; }

/* 底部工具条 */
.rd-bar {
  flex: none;
  display: flex;
  border-top: 0.5px solid rgba(0, 0, 0, 0.14);
  background: rgba(246, 243, 234, 0.96);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.rd-bar button {
  flex: 1;
  border: none;
  background: none;
  font-size: 12.5px;
  color: #3a372f;
  padding: 13px 0;
  cursor: pointer;
  font-family: inherit;
}
.rd-bar button:disabled { opacity: 0.3; }
.rd-bar button.on { color: #fff; background: #26241f; }
.rd-bar button + button { border-left: 0.5px solid rgba(0, 0, 0, 0.08); }

/* ============================================================
   v0.46.1 书坊首页重排（杂志刊头/出血荐读/目录字分栏）
   + 自带中文宋体 SereinSerif（Noto Serif SC 子集，OFL 协议）
   ⚠️ v0.47.19 起 @font-face 移到 css/fonts.css：按谷歌 CJK 切片
   按需加载（每片 10~30KB，用到哪些字下哪几片），整包大字体已删
   ============================================================ */

/* 刊头 */
.rd2-mast { position: relative; padding: 8px 2px 0; }
.rd2-fr {
  font-family: "SereinCustom", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 86px;
  line-height: 0.9;
  letter-spacing: -2px;
  color: var(--ink);
}
.rd2-cn {
  position: absolute;
  right: 0; top: 46px;
  background: #17171a;
  color: #f4f3ef;
  font-family: "SereinCustom", "SereinSerif", "Songti SC", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 10px;
  padding: 7px 4px 7px 17px;
  z-index: 2;
}
.rd2-sub {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 14px;
  border-top: 3px solid #17171a;
  padding-top: 8px;
}
.rd2-sub b { font-size: 12px; font-weight: 800; letter-spacing: 4px; color: var(--ink); }
.rd2-sub i { flex: 1; border-top: 0.5px solid rgba(0, 0, 0, 0.35); transform: translateY(-4px); }
.rd2-sub em { font-family: Georgia, serif; font-style: italic; font-size: 12.5px; color: #98989e; }

/* 手记式搜索行 */
.rd2-ask { display: flex; align-items: center; gap: 12px; margin: 22px 2px 0; cursor: pointer; }
.rd2-ask span {
  flex: 1;
  font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif;
  font-style: italic;
  font-size: 15px;
  color: #98989e;
  border-bottom: 1px solid #17171a;
  padding: 0 2px 9px;
}
.rd2-ask u {
  width: 40px; height: 40px; flex: none;
  background: #17171a; color: #f4f3ef;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  text-decoration: none;
}

/* 节标 */
.rd2-lab { display: flex; align-items: center; gap: 10px; }
.rd2-lab.lone { margin-top: 30px; padding-right: 2px; }
.rd2-lab em {
  font-family: "SereinCustom", Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
}
.rd2-lab b { font-size: 11px; font-weight: 800; letter-spacing: 6px; color: var(--ink); }
.rd2-lab i { flex: 1; border-top: 0.5px solid rgba(0, 0, 0, 0.35); }

/* 今日荐读：出血大字 + 斜书封 */
.rd2-hero { position: relative; margin-top: 26px; }
.rd2-herocard {
  position: relative;
  margin-top: 14px;
  background: #fff;
  padding: 24px 128px 20px 20px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.rd2-herocard::before { content: ""; position: absolute; inset: 8px; border: 0.5px solid rgba(0, 0, 0, 0.12); pointer-events: none; }
.rd-cover.hero {
  position: absolute;
  right: 12px; top: -16px;
  width: 112px; height: 153px;
  font-size: 16px;
  transform: rotate(4.5deg);
  box-shadow: 12px 16px 30px rgba(0, 0, 0, 0.28);
  z-index: 3;
}
.rd2-ht {
  position: relative; z-index: 2;
  display: inline-block;
  font-family: "SereinCustom", "SereinSerif", "Songti SC", serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 5px;
  line-height: 1.25;
  color: var(--ink);
  margin-left: -36px;
  background: var(--bg);
  padding: 3px 14px 3px 36px;
  max-width: 105%;
}
.rd2-hau { font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-style: italic; font-size: 13.5px; color: #6e6e73; margin: 10px 0 0 2px; }
.rd2-hhk { display: flex; gap: 9px; margin: 15px 0 0 2px; }
.rd2-hhk b { font-family: Georgia, serif; font-size: 42px; line-height: 0.72; color: var(--ink); flex: none; }
.rd2-hhk p { font-family: "SereinCustom", "SereinSerif", "Songti SC", serif; font-size: 13.5px; line-height: 1.75; color: #3a3a3f; font-weight: 600; margin: 0; }
.rd2-hmeta { margin: 16px 0 0 2px; font-size: 10px; letter-spacing: 3px; color: #98989e; }

/* 分栏：目录字 */
.rd2-rub { display: flex; gap: 26px; overflow-x: auto; padding: 12px 2px 6px; scrollbar-width: none; }
.rd2-rub::-webkit-scrollbar { display: none; }
.rd2-rubit { flex: none; position: relative; padding-bottom: 11px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rd2-rubit b {
  font-family: "SereinCustom", "SereinSerif", "Songti SC", serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #b9b9bf;
}
.rd2-rubit em { display: block; font-family: Georgia, serif; font-style: italic; font-size: 11px; color: #cfcfd4; margin-top: 2px; }
.rd2-rubit.on b { color: var(--ink); }
.rd2-rubit.on em { color: #98989e; }
.rd2-rubit.on::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: #17171a; }
.rd2-rubit.cus b { color: #b9b9bf; border-bottom: 1px dashed rgba(0, 0, 0, 0.3); }
.rd2-rubit.cus.on b { color: var(--ink); }

/* 目录页式书单 */
.rd2-idx { margin-top: 8px; }
.rd2-idxrow {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.rd2-no { font-family: Georgia, serif; font-style: italic; font-size: 28px; color: var(--ink); flex: none; width: 42px; }
.rd2-im { flex: 1; min-width: 0; }
.rd2-im b { font-family: "SereinCustom", "SereinSerif", "Songti SC", serif; font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--ink); }
.rd2-im span { font-family: "SereinCustom", Georgia, "SereinSerif", "Songti SC", serif; font-style: italic; font-size: 12px; color: #98989e; margin-left: 8px; }
.rd2-im p { font-size: 11.5px; color: #6e6e73; margin: 5px 0 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd2-dots { flex: none; align-self: center; font-size: 10px; color: #b3b3b9; letter-spacing: 2px; }
.rd2-foot { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-bottom: 6px; }
.rd2-foot i { flex: 1; border-top: 3px solid #17171a; }
.rd2-foot span { font-size: 9.5px; letter-spacing: 3px; color: #98989e; }

/* ============================================================
   v0.47.0：留声（音乐重做）——黑白灰 + 磨砂玻璃，克莱因蓝仅极小点缀，
   歌单 / 一起听（房间对话 + 共听时长）
   ============================================================ */
.ls-dy { font-family: -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; font-weight: 700; }
.ls-fr { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #8e8f95; letter-spacing: 0.3px; }

.ls-screen { background: #edeef0; }
.ls-screen .app-action {
  background: rgba(255, 255, 255, 0.62); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(20, 22, 28, 0.05); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.ls-page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* 磨砂玻璃基面 */
.ls-glass {
  background: rgba(255, 255, 255, 0.6); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px rgba(20, 22, 28, 0.06);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

/* 主页刊头 */
.ls-mast { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 6px 0; }
.ls-mast .t { font-size: 32px; letter-spacing: 5px; color: #1b1c1e; line-height: 1.05; }
.ls-mast .fr { font-family: Georgia, serif; font-style: italic; font-size: 15px; color: #9a9ba0; letter-spacing: 0.3px; }
.ls-mast.duo { justify-content: flex-start; gap: 12px; }
.ls-mast.duo .t { font-size: 28px; }

/* 搜索行（玻璃） */
.ls-search {
  margin: 14px 4px 0; height: 44px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.6); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.05);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; gap: 9px; padding: 0 8px 0 16px; color: #9a9ba0;
}
.ls-search svg { flex: none; }
.ls-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13.5px; color: #1b1c1e; font-family: inherit; }
.ls-search input::placeholder { color: #a9aab0; }
.ls-search button {
  flex: none; border: none; height: 32px; padding: 0 16px; border-radius: 16px;
  background: #1a1b1e; color: #f2f2f3; font-size: 13px; letter-spacing: 2px; cursor: pointer;
}

/* 正在播放：玻璃卡，封面小图去色 */
.ls-now {
  margin: 16px 4px 0; border-radius: 20px;
  background: rgba(255, 255, 255, 0.6); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(20, 22, 28, 0.07);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  padding: 13px 14px; display: flex; align-items: center; gap: 13px; cursor: pointer;
}
.ls-now .m { flex: 1; min-width: 0; }
.ls-now .tag { font-size: 9.5px; letter-spacing: 3px; color: #2b46ef; display: flex; align-items: center; gap: 6px; }
.ls-now .tag .ls-eqbars i { background: #2b46ef; }
.ls-now .n { font-size: 16px; font-weight: 700; margin-top: 3px; color: #1b1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-now .a { font-size: 11px; color: #9a9ba0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-now .prog { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 10px; color: #9a9ba0; }
.ls-now .bar, .ls-rprog .bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(20, 20, 25, 0.1); position: relative; overflow: hidden; }
.ls-now .bar i, .ls-rprog .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #2b46ef; border-radius: 2px; }
.ls-now .btn-main {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: #2b46ef; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(43, 70, 239, 0.3);
}
.ls-now .btn-main svg { width: 20px; height: 20px; }
.ls-now .btn-main .mu-spin { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
.ls-now.empty .n { font-size: 15px; }
.ls-eqbars { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.ls-eqbars i { width: 2px; background: #2b46ef; border-radius: 1px; }

/* 通用小封面：去色成黑白灰 */
.ls-cov {
  width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden;
  background: #dcdde0; color: #a6a7ad;
  display: flex; align-items: center; justify-content: center;
}
.ls-cov svg { width: 19px; height: 19px; }
.ls-cov img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.02); }
.ls-cov.big { width: 56px; height: 56px; border-radius: 15px; }
.ls-cov.big svg { width: 24px; height: 24px; }
.ls-cov.sm { width: 38px; height: 38px; border-radius: 10px; }

/* 一起听入口卡（玻璃，不再是黑卡/蓝卡） */
.ls-tg {
  margin: 14px 4px 0; border-radius: 20px; padding: 14px 15px;
  background: rgba(255, 255, 255, 0.6); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 22px rgba(20, 22, 28, 0.07);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  display: flex; align-items: center; gap: 13px; cursor: pointer;
}
.ls-tg .pair { display: flex; align-items: center; flex: none; }
.ls-tg .pair .ls-ava { border: 2px solid rgba(255, 255, 255, 0.9); }
.ls-tg .pair .ls-ava + .ls-ava { margin-left: -12px; }
.ls-tg .m { flex: 1; min-width: 0; }
.ls-tg .m .t { display: flex; align-items: baseline; gap: 8px; }
.ls-tg .m b { font-size: 18px; font-weight: 700; letter-spacing: 1.5px; color: #1b1c1e; }
.ls-tg .m i { font-style: italic; font-family: Georgia, serif; font-size: 12.5px; color: #9a9ba0; }
.ls-tg .m span { display: block; font-size: 10.5px; color: #8e8f95; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tg .chev { flex: none; color: #b7b8bd; }

/* 头像 */
.ls-ava { border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #d9dade; color: #a6a7ad; vertical-align: middle; }
.ls-ava img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.ls-ava.empty svg { width: 60%; height: 60%; }

/* 区块标题 */
.ls-sec-head { display: flex; align-items: baseline; gap: 9px; margin: 22px 6px 11px; }
.ls-sec-head b { font-size: 18px; font-weight: 700; letter-spacing: 2px; color: #1b1c1e; }
.ls-sec-head .fr { font-family: Georgia, serif; font-style: italic; font-size: 12.5px; color: #a6a7ad; }
.ls-sec-head .r { margin-left: auto; font-size: 11px; color: #9a9ba0; letter-spacing: 1px; }
.ls-sec-head .r.clear { margin-left: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ls-sec-head .r + .r.clear { margin-left: 10px; }

/* 歌单横滑：磨砂玻璃方块，不填色 */
.ls-pls { display: flex; gap: 11px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 4px 6px; scrollbar-width: none; }
.ls-pls::-webkit-scrollbar { display: none; }
.ls-pl { width: 112px; flex: none; cursor: pointer; }
.ls-plcover {
  width: 112px; height: 112px; border-radius: 16px; position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.55); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(20, 22, 28, 0.07);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: flex-end; padding: 12px;
}
.ls-plcover .ic { position: absolute; top: 12px; left: 13px; color: #b1b2b8; }
.ls-plcover .ic svg { width: 20px; height: 20px; display: block; }
.ls-plcover .nm { font-family: -apple-system, "PingFang SC", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.5px; color: #26272b; line-height: 1.25; }
.ls-plcover.fav { background: rgba(43, 70, 239, 0.07); border-color: rgba(43, 70, 239, 0.18); }
.ls-plcover.fav .ic { color: #2b46ef; }
.ls-plcover.addcell { border: 1px dashed rgba(20, 20, 25, 0.22); background: none; box-shadow: none; align-items: center; justify-content: center; color: #a6a7ad; padding: 0; }
.ls-plname { font-size: 13px; letter-spacing: 0.5px; margin-top: 8px; color: #2a2b2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-plsub { font-size: 10.5px; color: #9a9ba0; margin-top: 2px; }

/* 歌曲行（玻璃卡） */
.ls-card {
  background: rgba(255, 255, 255, 0.55); border: 0.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px; padding: 4px 13px; margin: 0 4px;
  box-shadow: 0 5px 18px rgba(20, 22, 28, 0.05);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.ls-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 0.5px solid rgba(20, 20, 25, 0.06); cursor: pointer; }
.ls-row:last-child { border-bottom: none; }
.ls-row .ls-cov { width: 42px; height: 42px; border-radius: 11px; }
.ls-row-m { flex: 1; min-width: 0; }
.ls-row-m .n { font-size: 14px; color: #1b1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-row.playing .ls-row-m .n { color: #2b46ef; font-weight: 600; }
.ls-row-m .a { font-size: 11px; color: #9a9ba0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-like { flex: none; color: #c2c3c8; padding: 6px 2px 6px 6px; }
.ls-like svg { width: 18px; height: 18px; display: block; }
.ls-like.on { color: #2b46ef; }
.ls-like.on svg path { fill: currentColor; }
.ls-eq { flex: none; display: flex; align-items: flex-end; gap: 2.5px; height: 13px; }
.ls-eq i { width: 2.5px; background: #2b46ef; border-radius: 1.5px; animation: mu-eq 0.9s ease-in-out infinite; transform-origin: bottom; }
.ls-eq i:nth-child(1) { height: 7px; }
.ls-eq i:nth-child(2) { height: 13px; animation-delay: 0.25s; }
.ls-eq i:nth-child(3) { height: 9px; animation-delay: 0.5s; }

/* 列表页头 */
.ls-list-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 6px 12px; }
.ls-list-head .cnt { font-size: 15px; color: #9a9ba0; letter-spacing: 1px; }
.ls-playall {
  border: none; background: #1a1b1e; color: #f2f2f3; cursor: pointer;
  height: 32px; padding: 0 16px; border-radius: 16px;
  display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 2px;
}

/* ---------- 一起听 · 选人页 ---------- */
.ls-total {
  margin: 16px 4px 0; border-radius: 20px; padding: 16px 18px 15px;
  background: rgba(255, 255, 255, 0.6); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 26px rgba(20, 22, 28, 0.07);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.ls-total .lab { font-size: 11px; letter-spacing: 3px; color: #9a9ba0; }
.ls-total .big { margin-top: 7px; font-size: 36px; line-height: 1; color: #1b1c1e; }
.ls-total .big small { font-size: 14px; margin: 0 4px 0 2px; color: #9a9ba0; font-weight: 400; }
.ls-total .heads { display: flex; padding-bottom: 3px; }
.ls-total .heads .ls-ava { border: 2px solid rgba(255, 255, 255, 0.9); }
.ls-total .heads .ls-ava + .ls-ava { margin-left: -8px; }
.ls-nowline {
  margin: 12px 4px 0; padding: 10px 13px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.55); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.05);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; gap: 11px;
}
.ls-nowline .m { flex: 1; min-width: 0; }
.ls-nowline .n { font-size: 12.5px; font-weight: 600; color: #1b1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-nowline .s { font-size: 10px; color: #9a9ba0; margin-top: 2px; }
.ls-duolist { margin: 6px 4px 0; }
.ls-duorow { display: flex; align-items: center; gap: 13px; padding: 13px 2px; border-bottom: 0.5px solid rgba(20, 20, 25, 0.06); cursor: pointer; }
.ls-duorow:last-child { border-bottom: none; }
.ls-duorow .ls-ava { box-shadow: 0 4px 12px rgba(20, 22, 28, 0.12); }
.ls-duorow .m { flex: 1; min-width: 0; }
.ls-duorow .n { font-size: 15px; font-weight: 600; color: #1b1c1e; letter-spacing: 0.5px; }
.ls-duorow .n .live { font-style: normal; font-size: 10px; color: #2b46ef; margin-left: 7px; letter-spacing: 1px; }
.ls-duorow .sub { font-size: 11px; color: #9a9ba0; margin-top: 4px; }
.ls-duorow .t { flex: none; text-align: right; }
.ls-duorow .t b { font-weight: 700; font-size: 18px; color: #1b1c1e; display: block; white-space: nowrap; }
.ls-duorow .t b small { font-size: 10.5px; color: #9a9ba0; margin: 0 2px; font-weight: 400; }
.ls-duorow .t span { display: block; font-size: 9.5px; color: #b7b8bd; margin-top: 3px; letter-spacing: 1px; }
.ls-topsongs { margin: 4px 4px 0; }
.ls-toprow { display: flex; align-items: center; gap: 11px; padding: 7px 2px; }
.ls-toprow .m { flex: 1; min-width: 0; }
.ls-toprow .n { font-size: 12.5px; font-weight: 600; color: #1b1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-toprow .a { font-size: 10px; color: #9a9ba0; margin-top: 2px; }
.ls-toprow .w { flex: none; display: flex; align-items: center; gap: 7px; }
.ls-toprow .w em { font-style: normal; font-size: 10.5px; color: #6c6d72; }
.ls-toprow .w em .ls-dy { font-size: 13.5px; color: #2b46ef; }

/* ---------- 一起听 · 房间 ---------- */
.ls-room {
  position: absolute; inset: 0; z-index: 76; background: #edeef0;
  display: flex; flex-direction: column;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  animation: mu-up 0.26s ease;
}
.ls-rhead { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; position: relative; }
.ls-rhead .hbtn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #33343a; cursor: pointer; }
.ls-duet { flex: none; display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 4px; }
.ls-duet .line { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ls-duet .line .ls-ava { border: 2.5px solid #fbfbfc; box-shadow: 0 6px 16px rgba(20, 22, 28, 0.16); }
.ls-duet .link { width: 34px; height: 1px; background: rgba(20, 20, 25, 0.18); position: relative; }
.ls-duet .link::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #2b46ef; }
.ls-duet .cap { margin-top: 10px; font-size: 10.5px; letter-spacing: 1.5px; color: #8e8f95; }
.ls-duet .cap b { color: #1b1c1e; font-weight: 600; }
.ls-duet .cap .ls-dy { font-size: 13px; color: #2b46ef; margin: 0 1px; }
.ls-rcov {
  flex: none; margin: 14px auto 0;
  width: min(56vw, 236px); aspect-ratio: 1;
  border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 18px 40px rgba(20, 22, 28, 0.2);
  background: #d6d7db;
}
.ls-rcov img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.03); }
.ls-rcov .fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #adaeb4; }
.ls-rcov .fb svg { width: 44px; height: 44px; }
.ls-rsong { flex: none; text-align: center; margin-top: 12px; padding: 0 30px; }
.ls-rsong .n { font-size: 18px; font-weight: 700; color: #1b1c1e; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-rsong .a { font-size: 11px; color: #8e8f95; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-rprog { flex: none; display: flex; align-items: center; gap: 8px; margin: 11px 48px 0; font-size: 10px; color: #9a9ba0; }
.ls-rctrl { flex: none; display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 8px; position: relative; }
.ls-rctrl .sk { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #33343a; cursor: pointer; }
.ls-rctrl .sk svg { width: 22px; height: 22px; }
/* 心心绝对定位到右侧，让 上一首/播放/下一首 三键真正居中，播放键正对中线 */
.ls-rctrl .hh { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); }
.ls-rctrl .pp {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.96); color: #2b46ef; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(10, 12, 24, 0.16), inset 0 0 0 1.5px rgba(43, 70, 239, 0.55);
}
.ls-rctrl .pp svg { width: 20px; height: 20px; }
.ls-rctrl .pp .mu-spin { border-color: rgba(43, 70, 239, 0.22); border-top-color: #2b46ef; }
.ls-rctrl .hh { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #b7b8bd; cursor: pointer; }
.ls-rctrl .hh svg { width: 20px; height: 20px; }
.ls-rctrl .hh.on { color: #2b46ef; }
.ls-rctrl .hh.on svg path { fill: currentColor; }
.ls-rchat {
  flex: 1; min-height: 0; margin-top: 12px; padding: 14px 18px 6px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 8px;
  mask-image: linear-gradient(180deg, transparent, #000 12%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%);
}
.ls-rchat .rmsg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; flex: none; }
.ls-rchat .rmsg .bb {
  background: rgba(255, 255, 255, 0.72); border: 0.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 12px rgba(20, 22, 28, 0.05);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #26272b; font-size: 13px; line-height: 1.55;
  padding: 8px 12px; border-radius: 16px; border-bottom-left-radius: 5px; word-break: break-word;
}
.ls-rchat .rmsg.mine { align-self: flex-end; flex-direction: row-reverse; }
.ls-rchat .rmsg.mine .bb {
  background: #1a1b1e; color: #f2f2f4; border: none;
  border-radius: 16px; border-bottom-right-radius: 5px; box-shadow: 0 5px 14px rgba(20, 22, 28, 0.18);
}
.ls-rchat .bb.dots { display: flex; gap: 4px; padding: 11px 13px; }
.ls-rchat .bb.dots i { width: 5px; height: 5px; border-radius: 50%; background: #b7b8bd; animation: ls-dot 1s ease-in-out infinite; }
.ls-rchat .bb.dots i:nth-child(2) { animation-delay: 0.16s; }
.ls-rchat .bb.dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ls-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.ls-rinput { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.ls-rinput .field {
  flex: 1; min-width: 0; height: 40px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.62); border: 0.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 12px rgba(20, 22, 28, 0.05);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 0 15px; font-size: 13px; color: #1b1c1e; outline: none; font-family: inherit;
}
.ls-rinput .field::placeholder { color: #a9aab0; }
.ls-rinput .send {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #1a1b1e; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 14px rgba(20, 22, 28, 0.22);
}
.ls-rinput .send svg { width: 17px; height: 17px; }

/* 全屏播放器主题化 */
.ls-screen .mu-player { background: #edeef0; }
.ls-screen .mu-player .mu-p-cover img { filter: grayscale(1) contrast(1.03); }
.ls-screen .mu-p-play { background: #2b46ef; box-shadow: 0 10px 26px rgba(43, 70, 239, 0.3); }
.ls-screen .mu-p-heart.on { color: #2b46ef; }
.ls-screen .mu-p-src { border-color: rgba(20, 20, 25, 0.14); letter-spacing: 2px; }

/* ============================================================
   v0.47.1：在黑白灰玻璃底上加回第三版的血肉——真封面 / 心跳频率 /
   法语展示字（Italiana）/ 克莱因蓝线条点缀 / 正在播放大封面卡
   ============================================================ */
@font-face { font-family: "SereinFr"; src: url("../fonts/serein-fr.woff2") format("woff2"); font-display: swap; }

/* 封面恢复彩色（去掉去色滤镜） */
.ls-cov img, .ls-ava img, .ls-rcov img, .ls-hero .art img,
.ls-screen .mu-player .mu-p-cover img { filter: none; }

/* 法语：Italiana 斜体展示字 + 克莱因蓝，做出设计感 */
.ls-mast .fr { font-family: "SereinFr", Georgia, serif; font-style: italic; font-size: 17px; color: #2b46ef; letter-spacing: 0.3px; }
.ls-mast.duo .fr { font-family: "SereinFr", Georgia, serif; font-style: italic; font-size: 16px; color: #2b46ef; }
.ls-sec-head .fr { font-family: "SereinFr", Georgia, serif; font-style: italic; font-size: 13.5px; color: #2b46ef; }
.ls-tg .m i { font-family: "SereinFr", Georgia, serif; font-style: italic; font-size: 13px; color: #2b46ef; }
.ls-now .tag, .ls-duet .cap .ls-dy, .ls-duorow .n .live, .ls-toprow .w em .ls-dy { }
.ls-total .lab .fr, .ls-nowline .fr { font-family: "SereinFr", Georgia, serif; font-style: italic; color: #2b46ef; }

/* 正在播放：第三版大封面卡（封面铺底，克莱因蓝圆键） */
.ls-hero { margin: 16px 4px 0; position: relative; }
.ls-hero .art { height: 200px; border-radius: 22px; overflow: hidden; position: relative;
  background: #d6d7db; box-shadow: 0 14px 32px rgba(20, 22, 28, 0.16); cursor: pointer; }
.ls-hero .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-hero .art .fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #adaeb4; }
.ls-hero .art .fb svg { width: 46px; height: 46px; }
.ls-hero .art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(180deg, rgba(12,14,20,0) 0%, rgba(12,14,20,0.55) 100%); pointer-events: none; }
.ls-hero .tag { position: absolute; top: 13px; left: 13px; z-index: 2; display: flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 2px; color: #fff; background: rgba(12, 14, 24, 0.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 9px; padding: 5px 10px; }
.ls-hero .tag .ls-eqbars i { background: #fff; }
.ls-hero .htxt { position: absolute; left: 16px; right: 88px; bottom: 15px; z-index: 2; color: #fff; }
.ls-hero .htxt .n { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 12px rgba(0,0,0,0.3); }
.ls-hero .htxt .a { font-size: 11.5px; color: rgba(255,255,255,0.82); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-hero .fab { position: absolute; right: 16px; bottom: 14px; z-index: 3; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: #2b46ef; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(10, 12, 24, 0.3), inset 0 0 0 1.5px rgba(43, 70, 239, 0.55); }
.ls-hero .fab svg { width: 22px; height: 22px; }
.ls-hero .fab .mu-spin { border-color: rgba(43, 70, 239, 0.22); border-top-color: #2b46ef; }
.ls-hero .prog { margin: 10px 6px 0; display: flex; align-items: center; gap: 8px; font-size: 10px; color: #9a9ba0; }
.ls-hero .prog .bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(20, 20, 25, 0.1); position: relative; }
.ls-hero .prog .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #2b46ef; border-radius: 2px; }
.ls-hero .prog .bar u { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4px; background: #2b46ef; border-radius: 50%; box-shadow: 0 0 0 3px rgba(43, 70, 239, 0.16); }

/* 歌单：真专辑封面 + 底部名字，克莱因蓝细描边点缀 */
.ls-plcover { display: block; padding: 0; background: #d6d7db; border: 0.5px solid rgba(255,255,255,0.7); }
.ls-plcover .art { position: absolute; inset: 0; }
.ls-plcover .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-plcover .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,20,0) 42%, rgba(10,12,20,0.62)); }
.ls-plcover .ic { top: 11px; left: 12px; color: rgba(255,255,255,0.9); z-index: 2; }
.ls-plcover .nm { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.ls-plcover.fav { background: #d6d7db; }
.ls-plcover.fav::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.6px #2b46ef; z-index: 3; pointer-events: none; }
.ls-plcover.fav .ic { color: #fff; }
.ls-plcover.empty2 { background: rgba(255,255,255,0.55); }
.ls-plcover.empty2 .nm { color: #26272b; text-shadow: none; }
.ls-plcover.empty2 .ic { color: #b1b2b8; }

/* 心跳频率（心电图）——一起听的标志，克莱因蓝线条 */
.ls-tg .pair .ls-cardbeat { width: 44px; flex: none; margin: 0 2px; }
.ls-beatm { display: block; width: 100%; height: 20px; overflow: visible; }
.ls-beatm path { fill: none; stroke: #2b46ef; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ls-tg .pair .ls-ava + .ls-cardbeat + .ls-ava { margin-left: 0; }
.ls-duet .line { gap: 4px; }
.ls-duet .wave { width: 150px; flex: none; }
.ls-beat { display: block; width: 100%; height: 40px; overflow: visible; }
.ls-beat path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-beat .b { stroke: rgba(43, 70, 239, 0.2); }
.ls-beat .g { stroke: #2b46ef; stroke-dasharray: 150 850; animation: ls-beat-flow 2.6s linear infinite; }
@keyframes ls-beat-flow { to { stroke-dashoffset: -1000; } }
.ls-track { display: block; position: relative; height: 20px; margin-top: 7px; width: 180px; max-width: 100%; }
.ls-track svg { display: block; position: absolute; left: 0; top: 0; overflow: visible; }
.ls-track svg path { fill: none; stroke: rgba(20, 20, 25, 0.14); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ls-track .on { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; }
.ls-track .on svg { position: static; }
.ls-track .on svg path { stroke: #2b46ef; }

/* v0.47.4：中文标题与数字统一用思源宋体（明朝宋体 / Noto Serif SC 700，有风格的高级衬线） */
/* SereinDisplay 的 @font-face 同在 css/fonts.css（切片按需加载） */
.ls-dy { font-family: "SereinDisplay", Georgia, "Songti SC", serif; font-weight: 400; }
/* 数字/时间同样走宋体，保持横排一行 */
#lsNCur, #lsNDur,
.ls-hero .prog span, .ls-now .prog span, .ls-rprog span,
.ls-total .big, .ls-duorow .t b, .ls-duet .cap .ls-dy, .ls-toprow .w em .ls-dy {
  font-family: "SereinDisplay", Georgia, "Songti SC", serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 400;
}
.ls-duorow .t b { display: block; white-space: nowrap; font-weight: 600; }
.ls-duorow .t b small, .ls-total .big small { white-space: nowrap; }

/* ============================================================
   夜航（radio）— 深夜电台 / 广播剧 / 讲故事，接 MiniMax 语音
   独立视觉：近黑夜色 + 胶片颗粒；龙藏毛笔(SereinInk)大字 +
   Fraunces 斜体(SereinVoyage)拉丁 + Plex Mono(SereinSig)呼号仪表；
   正文中文走 SereinSerif；克莱因蓝不属于这里，只有远灯暖白 --nv-lamp 点缀
   ============================================================ */
@font-face { font-family: "SereinInk"; src: url("../fonts/serein-ink.woff2?v=0478") format("woff2"); font-display: swap; }
@font-face { font-family: "SereinVoyage"; src: url("../fonts/serein-voyage.woff2?v=0475") format("woff2"); font-display: swap; }
@font-face { font-family: "SereinSig"; src: url("../fonts/serein-sig.woff2?v=0475") format("woff2"); font-display: swap; }

.nv-screen { background: #0a0c10; }
.nv-screen > .app-header { display: none; }   /* 用自绘的 .nv-topbar 代替（返回键在里面，别删——否则退不出夜航） */
/* AI 生成的分集标题走已加载的宋体（SereinSerif），不进龙藏字体子集——省 1.5MB */
.nv-serif { font-family: "SereinSerif", "Songti SC", serif !important; }

/* 顶部电台面板条：返港 + 呼号（两侧都有内容，不空块；返回键做成主题化「返港」） */
.nv-topbar { flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(5px + env(safe-area-inset-top, 0px)) 24px 6px; }
.nv-topbar .bk { display: flex; align-items: center; gap: 3px; color: var(--nv-lampdim); cursor: pointer; margin-left: -5px; padding: 3px 12px 3px 0; }
.nv-topbar .bk svg { width: 18px; height: 18px; }
.nv-topbar .bk i { font-family: "SereinSig", monospace; font-size: 9.5px; letter-spacing: .22em; font-style: normal; }
.nv-topbar .cs { font-family: "SereinSig", monospace; font-size: 9.5px; letter-spacing: .24em; color: var(--nv-fog); text-transform: uppercase; }
.nv-topbar .cs b { color: var(--nv-lampdim); font-weight: 400; }

.nv-app, .nv-player {
  --nv-bg:#0a0c10; --nv-card:#12161d; --nv-tx:#e9ebef; --nv-smoke:#8b939e;
  --nv-fog:#5b636e; --nv-faint:#39404a; --nv-line:rgba(255,255,255,.08);
  --nv-line2:rgba(255,255,255,.045); --nv-lamp:#ece2cf; --nv-lampdim:#b7ae9b;
}
.nv-app {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--nv-bg); color: var(--nv-tx);
  font-family: "SereinSerif", "Songti SC", serif; position: relative;
}
/* 胶片颗粒（电波/静电）——两处共用 */
.nv-app::after, .nv-player::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 40;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .05; mix-blend-mode: screen;
}
.nv-ink { font-family: "SereinInk", "SereinSerif", cursive; font-weight: 400; }
.nv-fr { font-family: "SereinVoyage", Georgia, serif; font-style: italic; }
.nv-mono { font-family: "SereinSig", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.nv-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--nv-lamp); box-shadow: 0 0 8px var(--nv-lamp); flex: none; display: inline-block; }

.nv-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 2px; }
.nv-content::-webkit-scrollbar { display: none; }

/* 顶部走马灯（跨页连续感） */
.nv-tkr { display: flex; overflow: hidden; padding: 7px 0; border-top: 1px solid var(--nv-line2);
  border-bottom: 1px solid var(--nv-line2); font-family: "SereinSig", monospace;
  font-size: 9px; letter-spacing: .28em; color: var(--nv-fog); white-space: nowrap; }
.nv-tkr span { padding: 0 15px; border-right: 1px solid var(--nv-line2); text-transform: uppercase; }
.nv-tkr b { color: var(--nv-lampdim); font-weight: 400; }

/* —— 今夜 —— */
.nv-mast { padding: 6px 28px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.nv-mast .wm { font-family: "SereinInk", cursive; font-size: 76px; line-height: .8; letter-spacing: .05em; }
.nv-mast .sub { font-family: "SereinSig", monospace; font-size: 9.5px; letter-spacing: .24em; color: var(--nv-smoke); margin-top: 12px; text-transform: uppercase; }
.nv-mast .subfr { font-family: "SereinVoyage", serif; font-style: italic; font-size: 14px; color: var(--nv-fog); margin-top: 5px; }
.nv-mast .host { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-family: "SereinSerif", serif; font-size: 12px; color: var(--nv-smoke); }
.nv-mast .host b { font-weight: 400; color: var(--nv-lampdim); }
.nv-mast .oa { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-top: 6px; flex: none; }
.nv-mast .oa .b { display: flex; align-items: center; gap: 6px; font-family: "SereinSig", monospace; font-size: 9px; letter-spacing: .2em; color: var(--nv-lampdim); }
.nv-mast .oa .fq { font-family: "SereinVoyage", serif; font-style: italic; font-size: 27px; color: var(--nv-lamp); line-height: 1; }
.nv-mast .oa .fqu { font-family: "SereinSig", monospace; font-size: 8px; letter-spacing: .2em; color: var(--nv-fog); }

.nv-hero { margin: 16px 20px 0; border: 1px solid var(--nv-line); border-radius: 20px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.28)); }
.nv-hero .in { padding: 17px 20px 18px; position: relative; z-index: 2; }
.nv-hero .top { display: flex; justify-content: space-between; align-items: center; }
.nv-hero .lb { font-family: "SereinSig", monospace; font-size: 9px; letter-spacing: .22em; color: var(--nv-fog); display: flex; align-items: center; gap: 7px; text-transform: uppercase; }
.nv-hero .lb .nv-dot { width: 4px; height: 4px; }
.nv-hero .frn { font-family: "SereinVoyage", serif; font-style: italic; font-size: 14px; color: var(--nv-lampdim); }
.nv-hero h2 { font-family: "SereinInk", cursive; font-size: 38px; margin: 10px 0 0; letter-spacing: .04em; line-height: 1; }
.nv-hero .say { font-family: "SereinSerif", serif; font-size: 14px; color: #c9ced5; line-height: 1.85; margin: 116px 0 0; max-width: 280px; }
.nv-hero .meta { font-family: "SereinSig", monospace; font-size: 9px; letter-spacing: .14em; color: var(--nv-smoke); margin-top: 15px; display: flex; gap: 14px; text-transform: uppercase; }
.nv-hero .prog { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.nv-hero .prog .t { font-family: "SereinSig", monospace; font-size: 9.5px; color: var(--nv-fog); }
.nv-hero .prog .bar { flex: 1; height: 2px; background: rgba(255,255,255,.1); position: relative; border-radius: 2px; }
.nv-hero .prog .bar i { position: absolute; left: 0; height: 100%; background: var(--nv-lamp); border-radius: 2px; }
.nv-hero .prog .bar i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--nv-lamp); box-shadow: 0 0 8px var(--nv-lamp); }
.nv-hero .sea { position: absolute; left: 0; right: 0; top: 94px; height: 86px; z-index: 1; opacity: .92; }
.nv-hero .fab { position: absolute; right: 20px; bottom: 72px; width: 50px; height: 50px; border-radius: 50%; z-index: 3;
  border: 1.5px solid rgba(236,226,207,.5); background: rgba(236,226,207,.06); display: flex; align-items: center; justify-content: center; }
.nv-hero.gen .fab .mu-spin { border-top-color: var(--nv-lamp); }

.nv-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 28px 2px; }
.nv-sec .l { display: flex; align-items: baseline; gap: 11px; }
.nv-sec .l b { font-family: "SereinInk", cursive; font-size: 26px; font-weight: 400; letter-spacing: .06em; }
.nv-sec .l i { font-family: "SereinVoyage", serif; font-style: italic; font-size: 13px; color: var(--nv-fog); }
.nv-sec .r { font-family: "SereinSig", monospace; font-size: 9px; letter-spacing: .18em; color: var(--nv-fog); text-transform: uppercase; }

.nv-pgm { padding: 0 22px 14px; }
.nv-pgm .row { display: flex; gap: 15px; padding: 15px 6px; border-top: 1px solid var(--nv-line2); align-items: center; cursor: pointer; }
.nv-pgm .row:first-child { border-top: 0; }
.nv-pgm .row:active { background: rgba(255,255,255,.03); }
.nv-pgm .tm { font-family: "SereinSig", monospace; font-size: 12px; color: var(--nv-lampdim); width: 42px; flex: none; text-align: center; }
.nv-pgm .wv { width: 34px; flex: none; opacity: .6; }
.nv-pgm .bd { flex: 1; min-width: 0; }
.nv-pgm .bd h4 { font-family: "SereinInk", cursive; font-size: 23px; font-weight: 400; letter-spacing: .05em; line-height: 1; }
.nv-pgm .bd h4 small { font-family: "SereinVoyage", serif; font-style: italic; font-size: 13px; color: var(--nv-fog); }
.nv-pgm .bd p { font-family: "SereinSerif", serif; font-size: 12px; color: var(--nv-smoke); margin-top: 5px; }
.nv-pgm .fq { font-family: "SereinSig", monospace; font-size: 8.5px; letter-spacing: .12em; color: var(--nv-fog); margin-left: auto; flex: none; }

/* tabbar */
.nv-tab { height: 68px; flex: none; border-top: 1px solid var(--nv-line); display: flex; align-items: center;
  justify-content: space-around; padding: 0 26px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10,12,16,.6); position: relative; z-index: 41; }
.nv-tab a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--nv-faint); cursor: pointer; }
.nv-tab a svg { width: 20px; height: 20px; }
.nv-tab a .cn { font-family: "SereinInk", cursive; font-size: 15px; letter-spacing: .1em; }
.nv-tab a.on { color: var(--nv-lamp); }

/* —— 波段 —— */
.nv-head2 { padding: 14px 28px 0; display: flex; justify-content: space-between; align-items: flex-end; }
.nv-head2 .k { font-family: "SereinSig", monospace; font-size: 9px; letter-spacing: .24em; color: var(--nv-fog); text-transform: uppercase; }
.nv-head2 h1 { font-family: "SereinInk", cursive; font-size: 52px; letter-spacing: .08em; line-height: .9; margin-top: 4px; }
.nv-head2 .en { font-family: "SereinVoyage", serif; font-style: italic; font-size: 15px; color: var(--nv-smoke); text-align: right; line-height: 1.5; }
.nv-dial { flex: 1; min-height: 560px; display: flex; margin: 16px 0 0; position: relative; }
.nv-scale { width: 64px; flex: none; position: relative; border-right: 1px solid var(--nv-line); }
.nv-scale .n { position: absolute; right: 12px; font-family: "SereinSig", monospace; font-size: 11px; color: var(--nv-smoke); transform: translateY(-50%); }
.nv-scale .tk { position: absolute; right: 0; width: 8px; height: 1px; background: var(--nv-fog); transform: translateY(-50%); }
.nv-scale .tk.big { width: 15px; background: var(--nv-smoke); }
.nv-scale .cur { position: absolute; right: -1px; width: 30px; height: 1.5px; background: var(--nv-lamp); box-shadow: 0 0 10px var(--nv-lamp); transform: translateY(-50%); transition: top .35s ease; }
.nv-stations { flex: 1; position: relative; }
.nv-st { position: absolute; left: 20px; right: 22px; transform: translateY(-50%); cursor: pointer; }
.nv-st .f { font-family: "SereinSig", monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--nv-fog); display: flex; align-items: center; gap: 8px; }
.nv-st .sig { display: inline-flex; gap: 2px; align-items: flex-end; height: 9px; }
.nv-st .sig i { width: 2px; background: var(--nv-faint); }
.nv-st h3 { font-family: "SereinInk", cursive; font-size: 26px; font-weight: 400; letter-spacing: .05em; margin-top: 1px; color: #cfd4da; line-height: 1; }
.nv-st h3 small { font-family: "SereinVoyage", serif; font-style: italic; font-size: 12px; color: var(--nv-fog); }
.nv-st p { font-family: "SereinSerif", serif; font-size: 11.5px; color: var(--nv-smoke); margin-top: 4px; }
.nv-st.on h3 { color: var(--nv-lamp); }
.nv-st.on .f { color: var(--nv-lampdim); }
.nv-st.on .sig i { background: var(--nv-lampdim); }
.nv-st.on .wv { margin-top: 7px; opacity: .9; }

.nv-nowbar { flex: none; height: 56px; border-top: 1px solid var(--nv-line); display: flex; align-items: center; gap: 12px;
  padding: 0 22px; background: rgba(10,12,16,.55); cursor: pointer; }
.nv-nowbar .pp { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(236,226,207,.5);
  display: flex; align-items: center; justify-content: center; flex: none; }
.nv-nowbar .nb { flex: 1; min-width: 0; }
.nv-nowbar .nb .a { font-family: "SereinSig", monospace; font-size: 8.5px; letter-spacing: .18em; color: var(--nv-fog); text-transform: uppercase; }
.nv-nowbar .nb .b { font-family: "SereinInk", cursive; font-size: 18px; letter-spacing: .04em; color: var(--nv-tx); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-nowbar .wv { flex: none; opacity: .7; }

/* —— 航行日志 —— */
.nv-head4 { padding: 14px 28px 6px; }
.nv-head4 h1 { font-family: "SereinInk", cursive; font-size: 44px; letter-spacing: .06em; line-height: .9; }
.nv-head4 .k { font-family: "SereinSig", monospace; font-size: 8.5px; letter-spacing: .2em; color: var(--nv-fog); margin-top: 9px; text-transform: uppercase; }
.nv-statband { margin: 8px 22px 0; display: flex; border: 1px solid var(--nv-line); border-radius: 16px; overflow: hidden; }
.nv-statband .c { flex: 1; padding: 14px 16px; border-right: 1px solid var(--nv-line2); }
.nv-statband .c:last-child { border-right: 0; }
.nv-statband .c .v { font-family: "SereinVoyage", serif; font-style: italic; font-size: 34px; color: var(--nv-lamp); line-height: 1; }
.nv-statband .c .v small { font-size: 20px; }
.nv-statband .c .l { font-family: "SereinSig", monospace; font-size: 8px; letter-spacing: .16em; color: var(--nv-fog); margin-top: 6px; text-transform: uppercase; }
.nv-log { margin: 14px 0 20px; padding: 0 28px; position: relative; }
.nv-log::before { content: ""; position: absolute; left: 50px; top: 8px; bottom: 8px; width: 1px; background: var(--nv-line); }
.nv-le { display: flex; padding: 15px 0; position: relative; border-bottom: 1px solid var(--nv-line2); cursor: pointer; }
.nv-le .d { width: 20px; flex: none; font-family: "SereinSig", monospace; font-size: 9px; color: var(--nv-smoke); letter-spacing: .02em; line-height: 1.3; }
.nv-le .mk { position: absolute; left: 47px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--nv-bg); border: 1px solid var(--nv-smoke); }
.nv-le.hot .mk { background: var(--nv-lamp); border-color: var(--nv-lamp); box-shadow: 0 0 8px var(--nv-lamp); }
.nv-le .bd { margin-left: 42px; flex: 1; min-width: 0; }
.nv-le .bd .tag { font-family: "SereinSig", monospace; font-size: 8.5px; letter-spacing: .16em; color: var(--nv-fog); text-transform: uppercase; }
.nv-le .bd h4 { font-family: "SereinInk", cursive; font-size: 23px; font-weight: 400; letter-spacing: .04em; margin-top: 3px; color: #d0d5db; line-height: 1; }
.nv-le .bd p { font-family: "SereinSerif", serif; font-size: 12px; color: var(--nv-smoke); margin-top: 5px; line-height: 1.55; }
.nv-le .bd .dr { font-family: "SereinSig", monospace; font-size: 9px; color: var(--nv-fog); margin-top: 8px; }
.nv-le .wv { margin-left: auto; align-self: center; opacity: .5; padding-left: 8px; }

.nv-empty { text-align: center; color: var(--nv-fog); font-family: "SereinSerif", serif; font-size: 13px; padding: 60px 40px; line-height: 1.9; }
.nv-empty .big { font-family: "SereinInk", cursive; font-size: 30px; color: var(--nv-smoke); display: block; margin-bottom: 14px; letter-spacing: .1em; }
.nv-empty .go { display: inline-block; margin-top: 18px; font-family: "SereinSig", monospace; font-size: 10px; letter-spacing: .18em;
  color: var(--nv-lamp); border: 1px solid rgba(236,226,207,.4); border-radius: 30px; padding: 9px 22px; text-transform: uppercase; }

/* —— 全屏播放器 —— */
.nv-player { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: hidden;
  color: var(--nv-tx); font-family: "SereinSerif", serif;
  background: radial-gradient(130% 75% at 50% 16%, #141922 0%, #0b0e13 52%, #07080b 100%);
  animation: app-in .26s ease; }
.nv-player .stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.nv-player .tickr { position: absolute; top: 130px; bottom: 170px; right: 0; width: 24px; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-end; z-index: 1; opacity: .45; }
.nv-player .tickr i { height: 1px; background: var(--nv-fog); width: 7px; }
.nv-player .tickr i:nth-child(4n+1) { width: 13px; background: var(--nv-smoke); }
.nv-p-top { padding: calc(14px + env(safe-area-inset-top, 0px)) 28px 0; display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; }
.nv-p-top .down { color: var(--nv-smoke); cursor: pointer; padding: 2px 6px 2px 0; margin-left: -4px; }
.nv-p-top .c { font-family: "SereinSig", monospace; font-size: 9px; letter-spacing: .22em; color: var(--nv-smoke); text-transform: uppercase; }
.nv-p-top .cn { font-family: "SereinInk", cursive; font-size: 22px; letter-spacing: .14em; color: #cfd4da; margin-top: 8px; }
.nv-p-top .rr { text-align: right; }
.nv-p-top .rr .f { font-family: "SereinVoyage", serif; font-style: italic; font-size: 22px; color: var(--nv-lamp); }
.nv-p-top .rr .lv { font-family: "SereinSig", monospace; font-size: 8px; letter-spacing: .2em; color: var(--nv-lampdim); margin-top: 6px; display: flex; gap: 6px; align-items: center; justify-content: flex-end; text-transform: uppercase; }
.nv-viz { margin-top: 34px; height: 128px; position: relative; z-index: 2; }
.nv-viz .lampp { position: absolute; top: 50%; left: 64%; width: 7px; height: 7px; border-radius: 50%; background: var(--nv-lamp);
  box-shadow: 0 0 15px 4px rgba(236,226,207,.5); transform: translate(-50%,-50%); }
.nv-viz.play .lampp { animation: nv-lamp 2.4s ease-in-out infinite; }
@keyframes nv-lamp { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.nv-p-ttl { text-align: center; margin-top: 26px; position: relative; z-index: 2; padding: 0 30px; }
.nv-p-ttl .ep { font-family: "SereinSig", monospace; font-size: 9px; letter-spacing: .24em; color: var(--nv-fog); text-transform: uppercase; }
.nv-p-ttl .frn { font-family: "SereinVoyage", serif; font-style: italic; font-size: 15px; color: var(--nv-lampdim); margin-top: 8px; }
.nv-p-ttl h2 { font-family: "SereinInk", cursive; font-size: 46px; letter-spacing: .06em; margin-top: 6px; line-height: 1; }
.nv-p-lines { margin: 24px 36px 0; text-align: center; font-family: "SereinSerif", serif; line-height: 2; font-size: 15px;
  position: relative; z-index: 2; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.nv-p-lines .ln { color: #454b55; transition: color .4s ease; margin: 3px 0; }
.nv-p-lines .ln.cur { color: var(--nv-lamp); }
.nv-p-lines .ln.dim { color: #2f353e; }
.nv-p-lines .loading { color: var(--nv-lampdim); font-family: "SereinSig", monospace; font-size: 10px; letter-spacing: .2em; }
.nv-p-foot { padding: 0 32px calc(24px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 2; }
.nv-p-scrub { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.nv-p-scrub .t { font-family: "SereinSig", monospace; font-size: 9.5px; color: var(--nv-fog); }
.nv-p-scrub .bar { flex: 1; height: 1.5px; background: rgba(255,255,255,.12); position: relative; }
.nv-p-scrub .bar i { position: absolute; left: 0; height: 100%; background: var(--nv-lampdim); transition: width .3s ease; }
.nv-p-scrub .bar i::after { content: ""; position: absolute; right: -2px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--nv-lamp); }
.nv-p-ctrl { display: flex; align-items: center; justify-content: center; gap: 40px; }
.nv-p-ctrl svg { cursor: pointer; }
.nv-p-ctrl .pp { width: 66px; height: 66px; border-radius: 50%; border: 1.5px solid rgba(236,226,207,.55);
  display: flex; align-items: center; justify-content: center; background: rgba(236,226,207,.05); cursor: pointer; }
.nv-p-said { display: flex; align-items: center; gap: 10px; margin-top: 20px; border: 1px solid var(--nv-line);
  border-radius: 30px; padding: 9px 16px; background: rgba(255,255,255,.02); cursor: text; }
.nv-p-said .av { width: 26px; height: 26px; border-radius: 50%; background: #1c222b; border: 1px solid var(--nv-line); flex: none; overflow: hidden; }
.nv-p-said .av img { width: 100%; height: 100%; object-fit: cover; }
.nv-p-said input { flex: 1; background: none; border: 0; outline: 0; font-family: "SereinSerif", serif; font-size: 12.5px; color: var(--nv-tx); }
.nv-p-said input::placeholder { color: var(--nv-fog); }
.nv-p-said .mic { color: var(--nv-lampdim); flex: none; }

/* ============================================================
   门径 —— 使用教程（v0.47.6）
   独立视觉：说明手账 · 黑白灰 + 极浅奶粉点缀 · 一步一步串成"径"
   ============================================================ */
.mj-screen { background: #fbfbfa; }
.mj-serif { font-family: Georgia, "SereinSerif", "Songti SC", serif; }

.mj-app { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  min-height: 0; color: #232326;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)); }

/* —— 首页 —— */
.mj-head { padding: 4px 30px 6px; }
.mj-kicker { font-family: Georgia, serif; font-style: italic; font-size: 15px;
  color: #a9a9ae; letter-spacing: .06em; }
.mj-big { font-size: 52px; font-weight: 600; letter-spacing: .14em;
  line-height: 1; margin-top: 2px; color: #232326; }
.mj-rule { height: 1px; background: #e2e2e0; margin-top: 16px; position: relative; }
.mj-rule::after { content: ""; position: absolute; left: 0; top: -1px;
  width: 56px; height: 3px; background: #232326; }
.mj-manifest { font-size: 12.5px; color: #8a8a90; line-height: 1.7;
  margin-top: 14px; letter-spacing: .02em; }

.mj-sec { font-size: 11px; color: #b0b0b4; letter-spacing: .28em;
  margin: 24px 30px 4px; }
.mj-sec b { font-family: Georgia, serif; font-style: italic; color: #c8c8cc;
  font-weight: 400; margin-right: 8px; letter-spacing: 0; }

.mj-row { display: flex; align-items: center; gap: 14px; padding: 13px 30px; cursor: pointer; }
.mj-row + .mj-row { border-top: 1px solid #f0f0ee; }
.mj-row:active { background: #f5f5f2; }
.mj-ic { width: 42px; height: 42px; border-radius: 13px; background: #f2f2ef;
  border: 1px solid #ececea; flex: none; display: flex; align-items: center; justify-content: center; }
.mj-ic svg { width: 22px; height: 22px; color: #2c2c2e; }
.mj-rmain { flex: 1; min-width: 0; }
.mj-rname { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.mj-rdesc { font-size: 12px; color: #9a9aa0; margin-top: 2px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-chip { font-family: Georgia, serif; font-style: italic; font-size: 12px;
  color: #a6a6ab; flex: none; }
.mj-chev { color: #cfcfd2; font-size: 18px; flex: none; margin-left: 2px; }

/* —— 内页（一步一步）—— */
.mj-detail { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  min-height: 0; color: #232326;
  padding: 0 0 calc(30px + env(safe-area-inset-bottom, 0px)); }
.mj-dtop { padding: 2px 30px 0; }
.mj-dkick { font-family: Georgia, serif; font-style: italic; font-size: 14px;
  color: #a9a9ae; }
.mj-dtitle { font-size: 38px; font-weight: 600; letter-spacing: .08em; margin-top: 2px; }
.mj-dintro { font-size: 13px; color: #77777d; line-height: 1.85;
  margin: 14px 0 4px; letter-spacing: .02em; }

.mj-steps { padding: 12px 30px 4px; }
.mj-step { position: relative; display: flex; gap: 20px; padding: 11px 0; }
.mj-step:not(:last-child)::before { content: ""; position: absolute;
  left: 17px; top: 16px; bottom: -11px; width: 1px; background: #e6e6e3; }
.mj-num { font-family: Georgia, serif; font-style: italic; font-size: 26px;
  color: #232326; width: 36px; text-align: center; flex: none;
  position: relative; z-index: 1; background: #fbfbfa; line-height: 1.1; }
.mj-stbody { flex: 1; padding-top: 3px; }
.mj-sttitle { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.mj-stdesc { font-size: 12.5px; color: #8f8f95; line-height: 1.75;
  margin-top: 4px; letter-spacing: .01em; }

.mj-tip { margin: 16px 30px 0; padding: 14px 16px; border-radius: 16px;
  background: #f7eef0; border: 1px solid #efe1e4; }
.mj-tl { font-size: 10.5px; letter-spacing: .24em; color: #b79aa2; }
.mj-tt { font-size: 12.5px; color: #8a7078; line-height: 1.7; margin-top: 5px; }

/* ==================================================================
   v0.47.22 开屏动画「晴空细雨」（#splash，index.html 静态标记+内联脚本移除）
   词源：serein＝日暮后无云的天空落下的细雨。黑白灰+冷月白+一粒紫。
   ================================================================== */
@font-face { font-family: "SereinWord"; src: url("../fonts/serein-word.woff2?v=0496") format("woff2"); font-display: block; }

#splash { position: absolute; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #08080c 0%, #0d0d13 34%, #15151b 58%, #0d0d12 62%, #08080b 100%);
  opacity: 1; transition: opacity .55s ease; }
#splash.sp-out { opacity: 0; pointer-events: none; }
/* 全屏运行时用 fixed 直接钉住视口：不依赖手机壳/屏幕的高度计算，
   就算首帧尺寸有任何闪失，开屏也铺满到底（桌面浏览器仍留在壳内） */
html.standalone #splash { position: fixed; }
@media (max-width: 560px) { #splash { position: fixed; } }
@keyframes spSoft { to { opacity: 1; } }

/* 暮色余晖 */
.sp-glow { position: absolute; left: 0; right: 0; top: calc(50% - 92px); height: 144px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(222,226,236,.06) 92%, rgba(222,226,236,.09));
  animation: spSoft 2.4s ease .6s forwards; }

/* 星与月（冷月白） */
.sp-st { position: absolute; border-radius: 50%; background: #ccd1dc; animation: spTw ease-in-out infinite alternate; }
@keyframes spTw { from { opacity: .10; } to { opacity: .55; } }
.sp-moon { position: absolute; top: calc(50% - 300px); right: 52px; width: 38px; height: 38px; border-radius: 50%;
  opacity: 0; box-shadow: inset -8px 5px 0 0 rgba(230,233,241,.78); animation: spSoft 1.8s ease 1.1s forwards; }
.sp-moon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(230,233,241,.10), rgba(230,233,241,.04) 45%, transparent 68%); }
.sp-mg { position: absolute; height: 1.5px; border-radius: 2px; background: rgba(226,230,240,.34); opacity: 0;
  filter: blur(.3px); animation: spMgin 1.2s ease forwards, spMgf ease-in-out infinite alternate; }
@keyframes spMgin { to { opacity: 1; } }
@keyframes spMgf { from { transform: translateX(-2px) scaleX(.85); } to { transform: translateX(3px) scaleX(1.25); } }

/* 细雨（只落在水面之上） */
.sp-rains { position: absolute; left: 0; right: 0; top: 0; height: calc(50% + 52px); overflow: hidden; }
.sp-r { position: absolute; top: 0; width: 1px; border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.6) 45%, transparent);
  animation: spFall linear infinite; }
@keyframes spFall { from { transform: translateY(-140px); } to { transform: translateY(940px); } }

/* 一句法语 */
.sp-cap { position: absolute; top: calc(50% - 110px); width: 100%; text-align: center; font-family: "SereinIt", serif;
  font-style: italic; font-size: 13px; letter-spacing: .14em; text-indent: .14em; color: #8e8c94;
  opacity: 0; animation: spSoft 1.4s ease 2.7s forwards; }

/* 名字：居中花体 */
.sp-word { position: absolute; top: calc(50% - 50px); width: 100%; text-align: center; margin: 0;
  font-family: "SereinWord", "SereinIt", serif; font-weight: 400; font-size: min(92px, 23vw); line-height: 1.32;
  color: #f0eeea; letter-spacing: .01em; text-shadow: 0 0 34px rgba(230,233,241,.14); }
.sp-word b { font-weight: 400; display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(14px);
  animation: spLup 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes spLup { to { opacity: 1; filter: blur(0); transform: translateY(0); } }
.sp-refl { position: absolute; top: calc(50% + 29px); width: 100%; text-align: center;
  font-family: "SereinWord", "SereinIt", serif; font-weight: 400; font-size: min(92px, 23vw); line-height: 1.32;
  color: #eceae7; letter-spacing: .01em; transform: scaleY(-1) skewX(-3deg); filter: blur(2px); opacity: 0;
  animation: spRefl 1.8s ease 2.5s forwards;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, rgba(0,0,0,.95) 78%);
          mask-image: linear-gradient(180deg, transparent 18%, rgba(0,0,0,.95) 78%); }
@keyframes spRefl { to { opacity: .20; } }

/* 水面 */
.sp-wline { position: absolute; top: calc(50% + 52px); left: 24px; right: 24px; height: 1px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42) 16%, rgba(255,255,255,.42) 84%, transparent);
  animation: spLinein 1.1s cubic-bezier(.2,.7,.2,1) .2s forwards; }
@keyframes spLinein { to { transform: scaleX(1); } }
.sp-sheen { position: absolute; top: calc(50% + 53px); left: 0; right: 0; height: 230px; opacity: 0;
  background: linear-gradient(180deg, rgba(226,230,240,.05), transparent 58%);
  animation: spSoft 1.6s ease 1.8s forwards; }

/* 那一滴：穿过水面，沉为句读（全片唯一的紫） */
.sp-drop { position: absolute; left: 50%; top: -170px; width: 3px; margin-left: -1.5px; height: 50px;
  animation: spDfall 1.05s cubic-bezier(.5,.08,.72,.72) .55s forwards,
             spDsink 1.2s cubic-bezier(.2,.65,.3,1) 1.62s forwards; }
@keyframes spDfall { to { top: calc(50% + 3.5px); } }
@keyframes spDsink { from { top: calc(50% + 3.5px); } to { top: calc(50% + 112.5px); } }
.sp-drop i { display: block; }
.sp-trail { position: absolute; left: 1px; top: 0; width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, rgba(216,213,207,.6));
  animation: spOff .3s ease 1.62s forwards; }
.sp-head { position: absolute; left: 0; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #8a7ba8; }
@keyframes spOff { to { opacity: 0; } }
.sp-ring2 { position: absolute; left: 50%; top: calc(50% + 161px); width: 4px; height: 4px;
  transform: translate(-50%,-50%); border: 1px solid rgba(138,123,168,.55); border-radius: 50%; opacity: 0;
  animation: spRingout 1s ease-out 2.85s forwards; }
@keyframes spRingout { 0% { opacity: .85; width: 4px; height: 4px; } 100% { opacity: 0; width: 46px; height: 17px; } }

/* 涟漪：碎裂弧段，扩散中模糊消散 */
.sp-rip { position: absolute; left: 50%; top: calc(50% + 52px); width: 240px; height: 52px;
  transform: translate(-50%,-50%) scale(0); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; opacity: 0; }
@keyframes spRip { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.03); filter: blur(0); }
  10% { opacity: .8; filter: blur(.2px); } 50% { opacity: .34; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1); filter: blur(2.2px); } }
.sp-rip.a { animation: spRip 3s cubic-bezier(.15,.6,.3,1) 1.6s forwards;
  -webkit-mask-image: conic-gradient(from 18deg, #000 0 64deg, transparent 64deg 84deg, #000 84deg 148deg, transparent 148deg 161deg, #000 161deg 236deg, transparent 236deg 262deg, #000 262deg 328deg, transparent 328deg 341deg, #000 341deg 360deg);
          mask-image: conic-gradient(from 18deg, #000 0 64deg, transparent 64deg 84deg, #000 84deg 148deg, transparent 148deg 161deg, #000 161deg 236deg, transparent 236deg 262deg, #000 262deg 328deg, transparent 328deg 341deg, #000 341deg 360deg); }
.sp-rip.b { width: 214px; height: 45px; animation: spRip 3s cubic-bezier(.15,.6,.3,1) 2s forwards;
  -webkit-mask-image: conic-gradient(from 133deg, #000 0 52deg, transparent 52deg 78deg, #000 78deg 120deg, transparent 120deg 138deg, #000 138deg 228deg, transparent 228deg 248deg, #000 248deg 305deg, transparent 305deg 322deg, #000 322deg 360deg);
          mask-image: conic-gradient(from 133deg, #000 0 52deg, transparent 52deg 78deg, #000 78deg 120deg, transparent 120deg 138deg, #000 138deg 228deg, transparent 228deg 248deg, #000 248deg 305deg, transparent 305deg 322deg, #000 322deg 360deg); }
.sp-rip.c { width: 252px; height: 57px; animation: spRip 4.5s cubic-bezier(.15,.6,.3,1) 2.5s infinite;
  -webkit-mask-image: conic-gradient(from 251deg, #000 0 47deg, transparent 47deg 70deg, #000 70deg 152deg, transparent 152deg 172deg, #000 172deg 233deg, transparent 233deg 251deg, #000 251deg 318deg, transparent 318deg 338deg, #000 338deg 360deg);
          mask-image: conic-gradient(from 251deg, #000 0 47deg, transparent 47deg 70deg, #000 70deg 152deg, transparent 152deg 172deg, #000 172deg 233deg, transparent 233deg 251deg, #000 251deg 318deg, transparent 318deg 338deg, #000 338deg 360deg); }
.sp-rip.s { width: 74px; height: 16px; border-color: rgba(255,255,255,.4);
  -webkit-mask-image: conic-gradient(from 40deg, #000 0 78deg, transparent 78deg 108deg, #000 108deg 196deg, transparent 196deg 224deg, #000 224deg 316deg, transparent 316deg 334deg, #000 334deg 360deg);
          mask-image: conic-gradient(from 40deg, #000 0 78deg, transparent 78deg 108deg, #000 108deg 196deg, transparent 196deg 224deg, #000 224deg 316deg, transparent 316deg 334deg, #000 334deg 360deg); }
.sp-rip.s1 { left: 24%; animation: spRip 3.8s cubic-bezier(.15,.6,.3,1) 3.2s infinite; }
.sp-rip.s2 { left: 78%; animation: spRip 3.8s cubic-bezier(.15,.6,.3,1) 5.1s infinite; }
.sp-rip.s3 { left: 60%; width: 48px; height: 11px; animation: spRip 4.2s cubic-bezier(.15,.6,.3,1) 4.3s infinite; }

/* 水底的中文 */
.sp-cn { position: absolute; top: calc(50% + 150px); width: 100%; text-align: center; white-space: nowrap;
  font-family: "SereinSerif", serif; font-size: 14.5px; letter-spacing: .3em; color: #a3a1a8; }
.sp-cn .c { opacity: 0; animation: spSoft .9s ease forwards; }
.sp-cn .slot { display: inline-block; width: 20px; }

/* 颗粒（预渲染噪点 PNG，不用 SVG 滤镜 data URI——内部引用有环境兼容坑） */
.sp-grain { position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAQS0lEQVR42gFAEL/vAKVNyhglMLsdbRMs3tYjey7ZHj9yH8sZcRdElNZJPJ1cNGC+MSAeaf7aoO7ouZl/XHwpmf2v5ZMlPNZUr0361xQAJ6Cus/7pIy+K8iEfnuSRxbEL7LVWO/web5NCfsvI/ilV5c2ORtyO1LfCdk0qWk12dwb4XYaQAkrWvaNAG+nIywDMyTX2zR9hImrhUziuGjQATTO6DSRqwEyBsbryPjv57vX3nytJNK+H9VILablLDZguhbtVtnKocmN6zXRm/LYOAA6P8YRjsOSyuilwNHTwZKxo9wD1sCs9xmb0W96qLMrtzStRV0EOTe5K8rNPQwoHNEfeY2wOgGyVe6aE1kMfteoA10JNCeFdAkxYSPI9H6b3Nh1/YY0VMucOIOKmZo3n9H6EZ+VG1T7I4qEle9slbJs+T7tJgUbvcDDL+VNyUtzOrQDXZLajL7sJrerhCcSplyA5dTUrh4sUXIpC2ITPTP2nLY4dXdkliQgthSpxIoc+6AWt1YlCFno4UoYZXGefnGmUAORbirEJgBIHCWHzfeQ23f3JnW51r2VHz7EbQgckgtxTHCvDkHyWF+teUInkAYa6qKV9EZ5vtl0Aq8Mq845mfwIALoctScwVyQuZm3crT8em/UyRShbbRwh1Kw8VRLg1wOcZCX36hwHpIy8h8oEmh3hpduv8wyf1kxdlJ0upgptEBgD2H/iJMm/6lJLt7u48Zp8r8giU6ifmicZrayYuSIa4Q485unb++MkMUQH75s+aSNWwwKE9qQCmrcs9ZAaUgb4hAMnHJ7jbjBiPNBqSTH+I36Fhv9sOzGgpGdLmRpL4GUFX8dSvkJiChc96mvfJPVVSJmr+cOeq5tpHYnwuWa8uo3oAvIRnCtPE02vAiq0f/464QG4vin/EzOTdnwtBENny+gAlyO/lfzdyT0036isUAEB3E5tBgN85MiSZYsaFcgAFmgDrjqF883h+DtKdHAtj/9cpg3TZvXT8Ea3XucplA5Uiaf1mn2N27nGHlzf9X3L41RxKyRttDEjUGh5eyeagOShUAKhhXu8Qn8G/qeJWNwEojymz1z9qwrae3SwZ8mS+5GKluvIP0n7PFMAR7SAfg2MgrbmLqxaGoo2YASEMdzbz7sUAgNz8Q/5dBJtNeKej67koZchRftAhEfamUto1JIcrajHX/+RYd0TV63g+lpaPib6ChWXgfl99eE6QYKchyoB9dgAz7RI0AvN25b8Ulnc9GWFjJr5b5YUDNrNvE7yuSBZoghNoBafRvl6fJ2gQ/fcg0DPKTy5Ty4rRkZ3VGp+21NUJALpkyM9oA95Q2Douz7rrU0IHGkjLLb1XSrKRUlciN8T7ZZpAFvehG8YsUnHPZPJdbxXMUMS3P0x+YhUTpTzH6ZwA151/2ce85OBbCwH67njk6lvyzDYiQbfcuy7iFBRCKqAoG8FFDSE4Y0P7k1RxIbOBUaWM6UmC9WqGeaO+EmVdzgBSjqfAVoc6GLjnNYHJvofAvEq4qSnidVoYl4GeoAARcUyU3dW6GEP6dBcLGwG1mza2ctOaRGi781FEB3xM5jEgAEqKzYcFHLPj/H9UABYfDM9feVEdNQZkSNNm1FmeIJkY9APA3+4p51lzNYV2Ez+rhhqI34eXbysHVoV4Z1GnYscAqHrC8PEDDd93nWzIJ1dKEA05NlKwSA4PFUYVIhchumYhxDZ+aWg5EREsk/QzQzJolqOs2IUKs4OQGLyk85MP0wAP3zKx8BhuLpNX3wBnkxsCsvsw+179sYVRkW12/1Q4Kfs1p7Ywzcos2Ay+aZuG21fCd+tAEbKnT+alVu3gg3ZAAKvseWKImk9PfqeyUninYIQ0VDRkxE1LmpjejGQ3No9pxu0RBszfcZftC0iDzwJ83Nd1dVw/6N2ghTLWfMxQgNgA9+kK0V2nBcf6NhOAb1JmsjPpaPMIva/S6WteyD62HIGMw8wfBibW17SHN3KbzXDI7GxUQiNi8HNKtNPvlkDwtQB1iMCB2l/2AY+3fZqk9fjbK7lOm8UdK6ZHsAcFaySWgDNJd1/nsU5qzlUumGX9bSjgOzyH1ndH8vwd9+9J+37/AFQDUqTv/pfuv9rWJly4DgoXqTD3+EkRbdRArTC7rvJrkd6v2IAalJW1/M6qi7Bo/DypYqKZQSwUzM8ZzJk3AxcAYfMewEsqbBTqWTNcEtczBrxHnoSaXtcRowrcG/4UPNfP5CIHxk/z0zQq8WxNB9oCBD4tbz5C8QmNfOZfGbtKKwCW/+uCGhAFHwcox5+fVPkeobzg8FVKO7lT1fTF54uqlY8fqgdNntt+wMbAd+eRAKSGidhQFZNIS4z/sSv4w2Z3AJ4dyu5pggTF6yy1IHfLhKT0Z2BsYi9clLm3zkx+Fvy/Nr7tKU+hD7CPCjARaPhthY/aMeRDghOtZlzBKg4aEb0A6vkgyz0ug6N3Lcld5VG9eHFYE4O0Hg4YhPccM0qiAmWY4TXxpb6Dxz+/9sJW4XpJBu9jElBwJ79H5DHFCybnrQCld/Q7u0mpcR1c50rgTIjW0n5PDYqXq1WF+zei6fc6Th1s9JI9g2e63YV6eTHHlNRTHZZJCOKuR+IAkl+43hTRAG+NXEZcdVlkKCz9jFlpRmKdZwUh0Byxq5D8LgfR9ESIf1+7ElO+ArbkJD22faTDH5U3/eQNRAp8LXJdVTSfgA8ACTFjhQnteuM0szBbF4s/7vyPOD4+z0Z0dEvsy1QJx9cSyhq5rc17q9+kzRumS7R/2AW6N18jpt1mCnNH18voFwAUEYiLEjOAPgbeeRSTOZyxVT0eiSvuS+E/Q5bQk4x8LJPoccVnu+ub9PCeD3yqcWDEyga0U3qlpvuKkW6XHQtRACKy4R/G4bU3c0/VrLRHZ40w84lB0zQC0jz+y0zVjzjC5+qTtJW0yMSkA//C45lem0rfwXYtqaV8pmjaBQ0Yg/4AmZ/f3MfttxSz5wUidTLRv81OYNf5zeGvL1e5orsmn1k4lq/XUJRqYNNdHja0FdIFAZ0Cm8syBw9kWf6ISWXSPgBKUDYOMyZX++/cHwalSXm1jVYQiDIgsmLmxQobcMoW4Rt6f3IWUVihA+mb1oH9InzHcdOezPgLfCxYV7fCXwOUAMq5OqvFq84hP9izfcZh75Gwed8RjgyuT3tCL2SKQeLvelG8tG7PwGqY82h050OF4bx+zmxAPi6KxQ5KnwfHLFoAdqRgNyK5mGIhny1zk0DMkLbO7UONWg+7s9MM7H/NtDJdlTqKcBTPFFLcZZtPwhSfW3T+gt6yADmSFRh9OBOjawCwLNXJcY8ustnirucbadtB+mAWhVlTeIV/Hla3sdIvZ59GRfn3eXsD40SzmURIe6o82VZP7M9pOpQGuPlpFh6PAJtkOJ7lOVKm4++5lFYkFwXv+Cqphzf63vphpAS3LpKAfShGDgzKSpe8X1Y0nqfCXrajdbxFvYF6HRU2zhlu/dgA/1CZKUh0U0bizS0U4fVhb74BENlJkSQc160g4ARaVMGXAuKyZPArpevbT80pHqmY17z2RpmvDmBx5StLvtW4ewDhyoU6dFxnOXGBMGCA+nTqczkp0CXhRDo068hXYvMvRr8dz3kYvhUHbeuZPUXaLGc6tVa7rgWCPnq+tvoWtDO2AKc5EXyCtWLkCuE6Cvk4JYReTJTCSYCJ4wcMr0359xASJl3I81HlyXUmuKhun0MWbFa476nvxrWgA6v3qnQKf+sAF0pJi8SLIIa2RxEwZtoyuZB5SCSbrrl9s8+rHqyl9rx8eLJNRWkD6M/kyppWIUmanYGuJWEoW5u077bbIvijWQCNgwtUiXkKbxjM5WaQMmR7HUIYKCWuRQJgigelDmykpw34z6xZHdQXLKv9zIPtBg2ioBzUqFAvCU9rSS63udiwAE6pdYT0EJ7ojrmMQ4EE8zO5TXTNLg5EPh5oXYS7TFpSDrN84v9tsMfrbKUNNwchzbMedMDRwHIPgAqG3nt2tWgAptmOmP9uUPSIRZmQLakC+H9So+dsGmu4F+Bd3keYDDlNBESaTbQxVu3LLtSty6sQeGcHE0V23DUKGKIhOD35RQDbAVtySzm1/ieybnIli1oHh4kjFmQY0LmIBaYV6JCp0onM2KLWxE3GxdFJAnqCwXtlOywRGc+m4qHpAPLwr8J4AMG1IMmIpCRyh4bysvRxSCG6aFa7elhO61oWpMO52z7RToDANLq2muctjMqU5Dnm9FlMA0K7+nm9rsOBCWYAhB0AW5yMpYJ7h+Au/C1nQdiUvhbiwLsVl9Dcg7R6xUJiviBoqCQo5MLJ1P4NN+zs39TyWiHhy/tFBHZmzRSWqcbrPAAucScHNP4tbugcZqv3HNVH0BlKpKthA1+MhiygxIKYytcanZt/wt+DnGdDGmq/7fpIu65m6RqgBCLRpRKMcOCVAGZr6M/jaGgdXN4/GUYk/lwHVP9xlmxRSmkz7jBnLhnUcoPi2U8dRBVR5JZ3o06ehKZtTXbIEKfCT5VyL2XtTF4A3KrNOhO0PmsllPqyCf4vZviPmy1nR/CKdJkQMwCwY02ZGViqs+b2fqi6WziYI+gwOVLJ7BIRFDHTQ9S0J79TuABWLqkC9ZtMhTA2ejtO/oo8pu99UxWDu2WRzmhBenowBzYb+mt1LFdOhw/ZyTiVPStvd3wffSWsMhVuWZuvK+xdAAWi0tAQLX1LVU2wR2hlcKkiAfUT/qgjIGUZu9IvslP8/kWEmxvuVN7FmTsigXZ6Zep5/BnIyq/Czyx0rdqcApkA+gg489bSmepKq20qtcnuEJWrLYpf4tB7PW4VwF7HiqpNuVVys8md/6NgU8gEAFk1feiAtDPARYHVJqnjiJe5nADAHv/8ugkdPMHln03qEab3RgOKSWAXyFiPe5UN19Arwvy4jqVS/RixR2YfU51XnxuYxLhfi57zZaTgzjeFucmjAMXxiDlo5tFRoRZNjvDSJ4zIucqTPoTmBhWctbiHfCMx0zidVFo8zsmuzMj/rLNfSdOTRG2tIdMiAXjdzm2MQ00AcXo/kBHDk0PEjCKLbXKeMLgouAskPqZvAepH5Iwe5BAU7zj3cpauqXVvapAPclgOidm/IIwtOczH0XMcvqiAJAD0RNzo6GGuYTnOVJBjJwjgZWSHZ5cLCCC1adUGh7VTobWcNRZZtdcP6DSvNk668fgqrKPzQTeAx2u1gApijt/EAFLfREYGOG3CDgQs7RZoJKWt7PhpA3xotcM1MkBm4enhIhvwVsx68PFIPP7DIHp1AshyE3wwZgAT7hjNe3AW04YAFU7vCfU1MV9JU6U2wwEkDysnG5TqywNqDF/qaj5q2zgstDAsejMtvIyanpdL/KtiAygmFjptxenQaygLHg9F3AAcXJbigkSBmbIOpsMwU+JT8qaMfwbTCq52tqgAeq8oUjUSoNmsuyA+6lJsG33QLWxvkwaF3Dxa4FWRyH+ugw4uAGuESCMiyJsnICIHJbkmSDn8jOZbM4KbytFY4zDrr6VpD8ZzNmqzq44FYSUtUJ+GXBdJ9jEdxIItch8hlweJQrUXMtUmNptCUgAAAABJRU5ErkJggg=="); }

/* 底部装载细线 */
.sp-loader { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); width: 96px; height: 1px; background: #26262b; }
.sp-loader i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: #94929a;
  animation: spLoad 3s cubic-bezier(.3,.2,.2,1) .2s forwards; }
@keyframes spLoad { to { width: 100%; } }

/* v0.47.26 白闪保险丝：sp-boot 存在（=开屏还活着）期间，主屏隐藏、全页夜色底。
   iOS 冷启首帧视口高度可能算短、开屏盖不满，此前露出的是下方主屏（白）；
   现在无论几何怎么错，露出的只会是夜色。sp-boot 由 index.html 头部内联脚本打、退场脚本摘 */
html.sp-boot, html.sp-boot body { background: #08080c !important; }
html.sp-boot .phone-frame { background: #08080c; }
html.sp-boot .phone-screen { background: #08080c; }
html.sp-boot .screen-home { visibility: hidden; }
html.sp-boot body::after { background: #08080c !important; }

/* ============================================================
   v0.47.35：窗口化渲染 / 线下定档卡 / 心声历史
   ============================================================ */

/* 查看更早的消息（长对话只渲染最近一段） */
.msg-more { display: flex; justify-content: center; padding: 8px 0 4px; }
.msg-more span {
  font-size: 11.5px; color: #6d6d73;
  background: rgba(255, 255, 255, 0.82);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.msg-more span:active { opacity: 0.6; }

/* 线下定档卡：细线中插，克制的一行 */
.msg-ofsum { display: flex; align-items: center; gap: 12px; padding: 10px 6px; cursor: pointer; }
.msg-ofsum::before, .msg-ofsum::after { content: ""; flex: 1; height: 0.5px; background: rgba(0, 0, 0, 0.14); }
.msg-ofsum .os-card { display: flex; align-items: baseline; gap: 8px; max-width: 78%; }
.msg-ofsum .os-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #48484d; white-space: nowrap; }
.msg-ofsum .os-topic {
  font-size: 11px; color: #8e8e93;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-ofsum .os-view { font-size: 10.5px; color: #98989e; white-space: nowrap; }
.msg-ofsum:active { opacity: 0.6; }

/* 定档卡弹窗 */
.ofsum-card { max-height: 72vh; display: flex; flex-direction: column; }
.ofsum-topic { font-size: 12px; color: #8e8e93; margin: 2px 0 8px; }
.ofsum-body { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.ofsum-sec {
  font-size: 13.5px; line-height: 1.85; color: #3a3a3f;
  white-space: pre-wrap;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.ofsum-sec:last-child { border-bottom: none; }

/* 心声：右上角「历史」小钮（✕ 左侧） */
.mind-hist {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 58px;
  height: 32px;
  padding: 0 13px;
  border-radius: 16px;
  background: rgba(120, 120, 128, 0.14);
  color: #48484d;
  font-size: 11.5px;
  font-style: normal;
  display: flex; align-items: center;
  cursor: pointer;
  z-index: 2;
}

/* 历史心声弹窗 */
.mh-card { max-height: 72vh; display: flex; flex-direction: column; }
.mh-list { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.mh-item { padding: 11px 0 12px; border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); }
.mh-item:last-child { border-bottom: none; }
.mh-top { display: flex; align-items: center; gap: 10px; }
.mh-time { font-size: 10.5px; color: #98989e; font-variant-numeric: tabular-nums; }
.mh-meta { font-size: 10.5px; color: #6d6d73; flex: 1; text-align: right; }
.mh-del {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.12);
  color: #6d6d73;
  font-size: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mh-thought { font-size: 13.5px; line-height: 1.75; color: #3a3a3f; margin-top: 6px; }