/* NianGao-Phone · iOS 风设计系统
   配色取 Apple HIG 系统色：白/黑双底 + 灰阶六级 + label/separator 语义色
   深色模式只反转灰阶六级，用 var(--ios-gray-N) 画的东西自动跟着变（照搬糯叽机，见 PLAN.md 7.x）
   命名法：--{scope}-{element}-{property}[-{state}]
*/
:root {
  /* ===== iOS 系统色 ===== */
  --ios-blue: #007AFF;  --ios-green: #30D158; --ios-red: #FF3B30;
  --ios-orange: #FF9500; --ios-yellow: #FFCC00; --ios-purple: #AF52DE;
  --ios-pink: #FF2D55;  --ios-teal: #5AC8FA;  --ios-indigo: #5856D6;
  /* ===== 灰阶六级（深色模式整体反转，是自动换肤的关键）===== */
  --ios-gray-1: #8E8E93; --ios-gray-2: #AEAEB2; --ios-gray-3: #C7C7CC;
  --ios-gray-4: #D1D1D6; --ios-gray-5: #E5E5EA; --ios-gray-6: #F2F2F7;
  /* ===== 语义底色三级 ===== */
  --bg-primary: #FFFFFF;      /* 一级底 */
  --bg-secondary: #F2F2F7;    /* 二级底：卡片、sheet、分组背景 */
  --bg-tertiary: #FFFFFF;     /* 三级底：卡片上的卡片 */
  --bg-grouped: #F2F2F7;      /* 分组列表页背景 */
  /* ===== 文字三级 + 分隔线两级 ===== */
  --label: #000000;
  --label-2: rgba(60, 60, 67, .6);
  --label-3: rgba(60, 60, 67, .3);
  --separator: rgba(60, 60, 67, .29);
  --separator-opaque: #C6C6C8;
  /* ===== 圆角阶梯 ===== */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;
  /* ===== 阴影三级（极淡，iOS 观感靠层次不靠重影）===== */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .04);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .06);
  --sh-3: 0 8px 30px rgba(0, 0, 0, .10);
  --sh-card: 0 2px 8px rgba(0, 0, 0, .05);
  /* ===== 毛玻璃三档（saturate 是 iOS 观感的关键，只 blur 会显脏）===== */
  --glass-light: blur(15px);
  --glass-mid: blur(20px) saturate(180%);
  --glass-heavy: blur(30px) saturate(180%);
  --glass-overlay: rgba(255, 255, 255, .45);
  --glass-header: rgba(255, 255, 255, .92);
  /* ===== 动效曲线（照抄糯叽机，.32/.72/0/1 是全局 iOS 展开曲线）===== */
  --ease-spring: cubic-bezier(.22, .78, .24, 1);
  --ease-settle: cubic-bezier(.2, .86, .24, 1);
  --ease-expand: cubic-bezier(.32, .72, 0, 1);
  --ease-decel: cubic-bezier(0, 0, .2, 1);
  --t-fast: .18s; --t-mid: .28s; --t-slow: .4s;
  /* ===== 字体栈 ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ===== 强调色（品牌位：换一个值就换肤）===== */
  --accent: var(--ios-blue);
  --accent-deep: #0062CC;
  --accent-ring: rgba(0, 122, 255, .14);
  --accent-shadow: rgba(0, 98, 204, .28);
  --danger: var(--ios-red);
  --ok: var(--ios-green);
  /* ===== 壁纸：中深调，白字白图标才有依托（浅壁纸是上一版「简陋」的主因之一）===== */
  --wallpaper:
    radial-gradient(130% 90% at 82% 4%, rgba(255, 255, 255, .26) 0%, transparent 52%),
    radial-gradient(110% 75% at 8% 96%, rgba(94, 210, 255, .22) 0%, transparent 58%),
    linear-gradient(170deg, #4E6491 0%, #5E63A0 30%, #7A66A8 58%, #9C6FA6 82%, #B87E9B 100%);
  --wallpaper-tint: rgba(255, 255, 255, .1);
  /* ===== 聊天气泡 ===== */
  --bubble-me-bg: var(--ios-blue);
  --bubble-me-text: #FFFFFF;
  --bubble-them-bg: #FFFFFF;
  --bubble-them-text: #000000;
  --bubble-radius: 20px;
  --bubble-radius-tail: 6px;
  --bubble-pad: 9px 13px;
  --bubble-max: 74%;
  --bubble-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  /* ===== 兼容层：存量样式用的旧变量名，重定向到新 token ===== */
  --secondary-bg: var(--bg-primary);
  --border-color: var(--separator);
  --text-primary: var(--label);
  --text-secondary: var(--label-2);
  --glass: var(--glass-header);
  --bubble-user: var(--bubble-me-bg);
  --bubble-user-text: var(--bubble-me-text);
  --bubble-ai: var(--bubble-them-bg);
}

/* ===== 深色模式：只反转灰阶六级 + 语义色，其余自动跟随 ===== */
body.dark {
  --ios-gray-1: #8E8E93; --ios-gray-2: #636366; --ios-gray-3: #48484A;
  --ios-gray-4: #3A3A3C; --ios-gray-5: #2C2C2E; --ios-gray-6: #1C1C1E;
  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;
  --bg-grouped: #000000;
  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, .6);
  --label-3: rgba(235, 235, 245, .35);
  --separator: rgba(84, 84, 88, .65);
  --separator-opaque: #38383A;
  --accent: #0A84FF;
  --accent-deep: #409CFF;
  --accent-ring: rgba(10, 132, 255, .2);
  --glass-overlay: rgba(30, 30, 30, .65);
  --glass-header: rgba(28, 28, 30, .8);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .4);
  --sh-3: 0 8px 30px rgba(0, 0, 0, .5);
  --sh-card: 0 2px 8px rgba(0, 0, 0, .4);
  --wallpaper: linear-gradient(165deg, #1a1d24 0%, #16181e 45%, #1d1a22 100%);
  --bubble-them-bg: #2C2C2E;
  --bubble-them-text: #FFFFFF;
  --bubble-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #ded5ea radial-gradient(ellipse at 30% 20%, #f3e8f7, #cfc3e2);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  display: flex; align-items: center; justify-content: center;
}
input, textarea, select, button { font: inherit; color: inherit; }

/* ---------- 线性图标通用 ---------- */
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-badge svg { width: 30px; height: 30px; stroke-width: 1.7; }   /* 颜色见主屏段的分色规则 */
.login-logo svg { width: 46px; height: 46px; color: var(--accent-deep); }
.send-btn svg { width: 20px; height: 20px; stroke-width: 2.2; }
.sb-balance { display: inline-flex; align-items: center; gap: 4px; }
.sb-coin { width: 13px; height: 13px; stroke-width: 2; }
.coin-ic { width: 12px; height: 12px; vertical-align: -1.5px; stroke-width: 2; }
.lc-icon svg { width: 22px; height: 22px; color: var(--accent-deep); }
.lc-icon .dot { width: 10px; height: 10px; border-radius: 50%; }
.lc-icon .dot.on { background: var(--ok); box-shadow: 0 0 6px rgba(79, 191, 126, .7); }
.lc-icon .dot.off { background: #c9c1d4; }

/* ---------- 登录 ---------- */
.login-page { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--wallpaper); }
.login-card {
  width: min(340px, 90vw); padding: 38px 28px; text-align: center;
  background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px; box-shadow: 0 18px 50px rgba(120, 90, 160, 0.25);
  display: flex; flex-direction: column; gap: 12px;
}
.login-logo { display: flex; justify-content: center; }
.login-card h1 { font-size: 26px; font-weight: 600; letter-spacing: -.4px; color: var(--label); }
.login-sub { color: var(--label-2); font-size: 12.5px; margin-bottom: 10px; letter-spacing: .2px; font-style: italic; }
.login-card input {
  background: #fff; border: 1px solid var(--border-color); border-radius: 12px;
  padding: 12px 14px; outline: none; text-align: center;
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.login-err { color: var(--danger); font-size: 13px; min-height: 18px; }

/* ---------- 手机壳 ---------- */
.phone {
  position: relative; width: min(400px, 100vw); height: min(860px, 100vh);
  background: var(--wallpaper); overflow: hidden; display: flex; flex-direction: column;
  border-radius: 44px; border: 10px solid #fbf8ff;
  outline: 1px solid #cfc2dd;
  box-shadow: 0 30px 90px rgba(90, 60, 120, .35), inset 0 0 2px rgba(0,0,0,.2);
}
@media (max-width: 420px) { .phone { border-radius: 0; border: none; outline: none; height: 100vh; height: 100dvh; } }
.phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 24px; background: #17121c; border-radius: 14px; z-index: 60;
}

/* ---------- 状态栏（白字 + CSS 电池，兔k式） ---------- */
.statusbar {
  height: 42px; padding: 13px 24px 0; display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 4px rgba(80, 50, 100, .45);
  flex-shrink: 0; z-index: 55; position: relative; pointer-events: none;
}
.sb-right { display: flex; gap: 8px; align-items: center; }
.signal-bars { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.signal-bars i { width: 3px; background: currentColor; border-radius: 1px; }
.signal-bars i:nth-child(1) { height: 4px; } .signal-bars i:nth-child(2) { height: 6px; }
.signal-bars i:nth-child(3) { height: 8px; } .signal-bars i:nth-child(4) { height: 11px; }
.battery-icon {
  width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px;
  position: relative; padding: 1.5px;
}
.battery-icon::after {
  content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 5px;
  background: currentColor; border-radius: 0 2px 2px 0;
}
.battery-level { height: 100%; width: 78%; background: currentColor; border-radius: 2px; }

/* ---------- 屏幕通用 ---------- */
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.app-screen { background: var(--wallpaper); }
.app-header {
  display: flex; align-items: center; padding: 10px 10px; gap: 6px; flex-shrink: 0;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  position: relative; z-index: 15;
}
.app-title { flex: 1; text-align: center; font-weight: 600; font-size: 17px; color: var(--text-primary); }
.hback, .hbtn {
  background: none; border: none; cursor: pointer; color: var(--accent-deep);
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s;
}
.hback { font-size: 26px; }
.hbtn { font-size: 21px; font-weight: 600; }
.hback:hover, .hbtn:hover { background: rgba(0, 0, 0, .05); }
.hbtn-group { display: flex; align-items: center; }
.hbtn-ic { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.buy-btn { color: var(--accent-deep); font-weight: 600; cursor: pointer; }
.scroll-body { flex: 1; overflow-y: auto; padding: 16px 14px; min-height: 0; }
.section-title { color: var(--text-secondary); font-size: 12px; margin: 20px 4px 8px; letter-spacing: 2px; font-weight: 600; }
.placeholder-block {
  text-align: center; color: var(--text-secondary); padding: 50px 24px; line-height: 2.1;
  background: rgba(255, 255, 255, .55); border-radius: 18px; font-size: 14px;
}

/* ---------- 主屏幕：壁纸 + 时钟 + 图标 + 玻璃 Dock ---------- */
#screen-home {
  justify-content: flex-start;
  padding: 0 0 calc(10px + env(safe-area-inset-bottom));
  /* 壁纸上叠一层极淡渐晕，让白图标和白字都有依托 */
  position: relative;
}
#screen-home::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, transparent 22%, transparent 68%, rgba(0, 0, 0, .10) 100%);
}
/* 时钟：iOS 锁屏式细体大字 + 字距收紧，配一层柔和投影压住浅壁纸 */
.home-clock {
  text-align: center; margin: 46px 0 34px; color: #fff; position: relative;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .18);
}
.home-time {
  font-size: 68px; font-weight: 200; letter-spacing: -2px; line-height: 1;
  font-variant-numeric: tabular-nums;   /* 数字等宽，秒变时不抖 */
}
.home-date { margin-top: 8px; font-size: 13.5px; font-weight: 500; letter-spacing: .3px; opacity: .95; }
/* 图标网格：4 列，行距略大于列距（iOS 手感） */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 6px; align-content: start; }
/* 双页主屏：横向滚动 + scroll-snap，像真手机翻页 */
.home-pager {
  flex: 1; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; position: relative;
}
.home-pager::-webkit-scrollbar { display: none; }
.home-page { flex: none; width: 100%; scroll-snap-align: start; padding: 0 16px; }
.home-dots { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 4px 0 14px; flex-shrink: 0; position: relative; }
.home-dots .dot-pg {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  transition: all var(--t-mid) var(--ease-settle); cursor: pointer;
}
.home-dots .dot-pg.active {
  background: rgba(255, 255, 255, .95); transform: scale(1.15);
  box-shadow: 0 0 6px rgba(255, 255, 255, .4);
}
.app-icon {
  display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  font-size: 11.5px; font-weight: 500; letter-spacing: .2px;
  -webkit-tap-highlight-color: transparent;
}
/* 图标底板：iOS 26 的 squircle 圆角 + 内高光 + 双层投影，才有「立在壁纸上」的实感 */
.app-badge {
  width: 60px; height: 60px; border-radius: 17px; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #fff 0%, #f7f7fa 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .10),
              inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform var(--t-fast) var(--ease-settle);
}
.app-icon:active .app-badge { transform: scale(.9); }
/* Dock：宽度自适应但收窄贴底，毛玻璃加重一档 */
.home-dock {
  background: rgba(255, 255, 255, .22);
  backdrop-filter: var(--glass-mid); -webkit-backdrop-filter: var(--glass-mid);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 28px; padding: 11px 14px; margin: 0 auto;
  display: flex; gap: 18px; width: fit-content; flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.home-dock .app-icon { gap: 0; font-size: 0; }   /* Dock 不显文字标签（跟 iOS 一致） */
.home-dock .app-badge {
  width: 56px; height: 56px; border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
body.dark .app-badge {
  background: linear-gradient(160deg, #2C2C2E 0%, #232325 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.dark .home-dock { background: rgba(40, 40, 44, .45); border-color: rgba(255, 255, 255, .1); }

/* ---------- 桌面小组件 ---------- */
.widget {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: var(--glass-mid); -webkit-backdrop-filter: var(--glass-mid);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-lg); padding: 13px 15px; margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
  cursor: pointer; transition: transform var(--t-fast) var(--ease-settle);
  -webkit-tap-highlight-color: transparent;
}
.widget:active { transform: scale(.975); }
.wg-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--label-2);
  letter-spacing: .3px; margin-bottom: 10px;
}
.wg-head svg { width: 14px; height: 14px; stroke-width: 2; color: var(--ios-green); }
.wg-body { display: flex; flex-direction: column; gap: 9px; }
.wg-empty { font-size: 12.5px; color: var(--label-3); padding: 6px 0; }
.wg-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wg-av {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #fff;
}
.wg-txt { min-width: 0; flex: 1; }
.wg-name { font-size: 12.5px; font-weight: 600; color: var(--label); line-height: 1.3; }
.wg-last {
  font-size: 11.5px; color: var(--label-2); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-time { font-size: 10.5px; color: var(--label-3); flex: none; font-variant-numeric: tabular-nums; }
body.dark .widget {
  background: rgba(44, 44, 46, .7); border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* 钱包组件（第二页） */
.wg-wallet .wg-head svg { color: #F5B324; }
.wg-bal { display: flex; align-items: baseline; gap: 5px; }
.wg-bal-n { font-size: 27px; font-weight: 600; color: var(--label); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.wg-bal-u { font-size: 12px; color: var(--label-2); font-weight: 500; }
.wg-sign {
  margin-top: 10px; padding: 7px 0; border-radius: var(--r-xs);
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
  text-align: center; transition: opacity var(--t-fast);
}
.wg-sign.done { background: var(--ios-gray-5); color: var(--label-3); }

/* 图标分色：iOS 主屏的辨识度来自「每个 App 一个颜色」，不是统一色 */
.app-badge svg { color: var(--ic, var(--ios-blue)); }
.app-icon[data-app="chat"]       { --ic: var(--ios-green); }
.app-icon[data-app="moments"]    { --ic: var(--ios-orange); }
.app-icon[data-app="community"]  { --ic: var(--ios-pink); }
.app-icon[data-app="wallet"]     { --ic: #F5B324; }
.app-icon[data-app="personas"]   { --ic: var(--ios-purple); }
.app-icon[data-app="presets"]    { --ic: var(--ios-teal); }
.app-icon[data-app="worldbooks"] { --ic: var(--ios-indigo); }
.app-icon[data-app="themes"]     { --ic: var(--ios-pink); }
.app-icon[data-app="settings"]   { --ic: var(--ios-gray-1); }
.app-icon[data-app="admin"]      { --ic: var(--ios-red); }

/* ---------- 头像选择器 ---------- */
.av-picker { display: flex; align-items: center; gap: 14px; }
.av-preview {
  width: 68px; height: 68px; border-radius: 50%; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 600; color: #fff;
  box-shadow: var(--sh-2); overflow: hidden;
  transition: transform var(--t-fast) var(--ease-settle);
}
.av-preview:active { transform: scale(.94); }
.av-preview.has-img { background: var(--ios-gray-5); }
.av-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.btn-sm { padding: 5px 12px !important; font-size: 12.5px !important; }

/* ---------- 表单 ---------- */
.form-body { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.field input, .field textarea, .field select, .channel-bar select {
  background: rgba(255, 255, 255, .92); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 11px 13px; outline: none; width: 100%; color: var(--text-primary);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field textarea { resize: vertical; }
.field-hint { font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; opacity: .85; }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-item {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 13px;
}
.check-item input { width: auto; accent-color: var(--accent); }
.check-item small { color: var(--text-secondary); }
.wb-off { opacity: .5; }
.seg { display: flex; gap: 0; background: rgba(255, 255, 255, .7); border: 1px solid var(--border-color); border-radius: 12px; padding: 3px; }
.seg-btn {
  flex: 1; border: none; background: transparent; padding: 9px 6px; border-radius: 9px;
  color: var(--text-secondary); font-weight: 500; cursor: pointer;
}
.seg-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; box-shadow: 0 2px 8px var(--accent-shadow); }
.kind-tag {
  display: inline-block; font-size: 10.5px; font-weight: 500; vertical-align: 1px;
  padding: 1.5px 7px; margin-left: 4px; border-radius: 8px;
  background: rgba(180, 150, 220, .18); color: #8d6bb5;
}
.kind-tag.kt-ex { background: rgba(120, 180, 230, .2); color: #4a86b8; }
/* 人设卡「默认」标：金星 + 内联小图标 */
.kind-tag.tag-default { background: rgba(235, 190, 90, .22); color: #a8801e; }
.kind-tag.tag-default svg { width: 11px; height: 11px; vertical-align: -1.5px; margin-right: 1px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.row { display: flex; gap: 8px; align-items: center; }
.row input, .row select { flex: 1; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff; border: none; border-radius: 12px; padding: 13px;
  font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px var(--accent-shadow);
}
.btn-primary:active { transform: scale(.98); filter: brightness(.95); }
.btn-primary:disabled { opacity: .5; box-shadow: none; }
.btn-danger { background: rgba(255,255,255,.85); border: 1px solid var(--danger); color: var(--danger); border-radius: 12px; padding: 12px; cursor: pointer; }
.btn-plain { background: rgba(255,255,255,.85); border: 1px solid var(--border-color); color: var(--accent-deep); border-radius: 12px; padding: 12px; cursor: pointer; font-weight: 500; }
.btn-mini { background: #fff; border: 1px solid var(--border-color); border-radius: 10px; padding: 9px 15px; cursor: pointer; flex: none; color: var(--accent-deep); font-weight: 500; }
.add-btn {
  width: 100%; padding: 13px; margin-top: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .55); border: 1.5px dashed #d7b8cc; border-radius: 14px; color: var(--accent-deep); font-weight: 500;
}

/* ---------- 列表卡片 ---------- */
.list-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .88); border-radius: 16px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(120, 90, 150, .08);
}
.list-card:active { background: #fff; transform: scale(.99); }
.lc-avatar {
  width: 48px; height: 48px; border-radius: 50%; font-size: 20px; font-weight: 600; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #ffe9f2, #e8ddff);
  box-shadow: inset 0 0 0 2px #fff;
}
.lc-main { flex: 1; min-width: 0; }
.lc-name { font-weight: 600; }
.lc-sub { color: var(--text-secondary); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-side { color: var(--text-secondary); font-size: 12px; text-align: right; flex: none; }
.lc-side .price { color: var(--accent-deep); font-weight: 600; }
.lc-side span { cursor: pointer; }
.lc-side span:hover { color: var(--accent-deep); }
.lc-side .lc-del { margin-left: 8px; color: #c0524a; }
.lc-side .lc-del:hover { color: #a03a33; }

/* 微信系页面（聊天列表/对话）：结构照抄社交软件，配色跟主题走（用户嫌微信灰绿丑，撤了） */

/* ---------- 聊天 App 主界面（iOS 消息 App 式：纯净白底 + 细分隔线 + 圆头像） ---------- */
.wx-app { background: var(--bg-primary); }   /* 列表页不透壁纸，要干净 */
.wx-header {
  background: var(--glass-header);
  backdrop-filter: var(--glass-light); -webkit-backdrop-filter: var(--glass-light);
  border-bottom: .5px solid var(--separator);
}
.wx-header .hback, .wx-header .hbtn { color: var(--accent); }
.wx-header .app-title { color: var(--label); font-weight: 600; letter-spacing: -.2px; }
.wx-body { padding: 0; background: var(--bg-primary); }
.wx-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  cursor: pointer; position: relative;
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.wx-row:active { background: var(--ios-gray-6); }
/* iOS 分隔线：从头像右侧起，0.5px */
.wx-row::after {
  content: ""; position: absolute; left: 74px; right: 0; bottom: 0;
  border-bottom: .5px solid var(--separator);
}
.wx-row:last-child::after { display: none; }
.wx-row .wx-avatar {
  width: 46px; height: 46px; border-radius: 50%; font-size: 19px; font-weight: 600; flex: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-1);
}
/* 图片头像：统一裁成圆、盖满不变形 */
.wx-avatar.has-img, .msg-avatar.has-img, .wg-av.has-img { background: var(--ios-gray-5); overflow: hidden; }
.wx-avatar img, .msg-avatar img, .wg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-row .wx-main { flex: 1; min-width: 0; }
.wx-row .wx-name { font-size: 16px; font-weight: 600; color: var(--label); letter-spacing: -.2px; }
.wx-row .wx-last {
  color: var(--label-2); font-size: 13.5px; margin-top: 2px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-row .wx-side {
  flex: none; align-self: flex-start; padding-top: 3px;
  color: var(--label-3); font-size: 12px; font-variant-numeric: tabular-nums;
}
.wx-empty { text-align: center; color: var(--label-3); font-size: 14px; padding: 60px 24px; line-height: 2.1; }
/* 通讯录：小行 + 编辑入口 */
.wx-row .wx-edit { color: var(--accent); font-size: 13.5px; flex: none; font-weight: 500; }
/* 底部 tab：iOS tabbar，激活用强调色 + 字重 */
.wx-tabbar {
  flex-shrink: 0; display: flex;
  background: var(--glass-header);
  backdrop-filter: var(--glass-mid); -webkit-backdrop-filter: var(--glass-mid);
  border-top: .5px solid var(--separator);
  padding-bottom: env(safe-area-inset-bottom);
}
.wx-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 5px; cursor: pointer; color: var(--label-3); font-size: 10px;
  font-weight: 500; transition: color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.wx-tab svg { width: 25px; height: 25px; stroke-width: 1.8; }
.wx-tab.active { color: var(--accent); }
.wx-tab.active svg { stroke-width: 2.1; }
/* 右上角下拉菜单（社交软件式 ＋ 菜单） */
.chat-menu {
  position: absolute; top: 92px; right: 14px; z-index: 70;
  background: rgba(255, 255, 255, .96); border-radius: 14px; padding: 4px 0;
  box-shadow: 0 8px 30px rgba(90, 60, 120, .25); min-width: 180px;
}
.chat-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  font-size: 15px; color: var(--text-primary); cursor: pointer;
}
.chat-menu-item:active { background: rgba(0, 0, 0, .045); }
.chat-menu-item svg { width: 21px; height: 21px; color: var(--accent-deep); }
.chat-menu-item + .chat-menu-item { border-top: 1px solid rgba(0, 0, 0, .05); }
.chat-menu-sep { border-top: 1px solid rgba(0, 0, 0, .05); margin: 4px 0; }
.chat-menu-label { font-size: 11.5px; color: var(--text-secondary); padding: 4px 18px 6px; }
.chat-menu-select {
  display: block; margin: 0 14px 10px; width: calc(100% - 28px);
  font-size: 13px; border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .04);
  border: 1px solid var(--border-color);
  outline: none;
}

/* ---------- 对话页（iMessage 式：连续气泡 + 圆头像 + 干净底） ---------- */
#screen-dialog { background: var(--chat-bg, var(--bg-secondary)); }
#screen-dialog .app-header {
  background: var(--glass-header);
  backdrop-filter: var(--glass-heavy); -webkit-backdrop-filter: var(--glass-heavy);
  border-bottom: .5px solid var(--separator);
}
#screen-dialog .hback, #screen-dialog .hbtn { color: var(--accent); }
#screen-dialog .app-title { color: var(--label); font-weight: 600; letter-spacing: -.2px; }
/* 气泡间距收紧：同侧连续消息贴近，异侧留空（真聊天软件的节奏） */
.chat-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 8px; }
.msg { display: flex; gap: 8px; max-width: 88%; align-items: flex-end; margin-top: 9px; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
  width: 36px; height: 36px; border-radius: 50%; font-size: 15px; font-weight: 600; flex: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sh-1); color: #fff;
}
.msg-bubble {
  position: relative; padding: var(--bubble-pad); line-height: 1.42; font-size: 15.5px;
  white-space: pre-wrap; word-break: break-word;
  border-radius: var(--bubble-radius);
  box-shadow: var(--bubble-shadow);
  max-width: 100%;
}
.msg.ai .msg-bubble {
  background: var(--bubble-them-bg); color: var(--bubble-them-text);
  border-bottom-left-radius: var(--bubble-radius-tail);
}
.msg.me .msg-bubble {
  background: var(--bubble-me-bg); color: var(--bubble-me-text);
  border-bottom-right-radius: var(--bubble-radius-tail);
}
.msg-tools {
  display: none; gap: 10px; font-size: 12px; color: var(--label-2);
  margin-top: 5px; padding: 0 2px;
}
.msg.me .msg-tools { justify-content: flex-end; }
.msg-bubble-wrap:hover .msg-tools, .msg-bubble-wrap.show-tools .msg-tools { display: flex; }
.msg-tools span {
  cursor: pointer; background: var(--bg-primary); padding: 3px 10px; border-radius: var(--r-pill);
  box-shadow: var(--sh-1); transition: color var(--t-fast);
}
.msg-tools span:hover { color: var(--accent); }
.cost-note { text-align: center; color: var(--label-3); font-size: 11px; margin-top: 8px; }
.sys-note {
  text-align: center; color: var(--label-2); font-size: 12px; padding: 4px 12px;
  background: var(--ios-gray-5); border-radius: var(--r-pill);
  align-self: center; width: fit-content; margin: 6px 0;
}

/* 花活消息 */
.msg-bubble.rich { white-space: normal; }
.msg-bubble.plain { background: none !important; padding: 0; box-shadow: none !important; }
.typing { display: flex; gap: 4px; align-items: center; min-width: 46px; min-height: 20px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #c9bdd6; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* 语音条：兔k式声纹动画 */
.voice-msg { cursor: pointer; min-width: 100px; }
.voice-row { display: flex; align-items: center; gap: 8px; }
.voice-wave { display: flex; align-items: center; height: 18px; gap: 2.5px; }
.voice-wave i { width: 3px; background: currentColor; border-radius: 2px; animation: wave 1.4s ease-in-out infinite; }
.voice-wave i:nth-child(2) { animation-delay: .18s; }
.voice-wave i:nth-child(3) { animation-delay: .36s; }
.voice-wave i:nth-child(4) { animation-delay: .54s; }
.voice-wave i:nth-child(5) { animation-delay: .72s; }
@keyframes wave { 0%,100% { height: 3px; } 50% { height: 14px; } }
.voice-dur { color: inherit; opacity: .75; font-size: 13px; font-weight: 500; }
.voice-text { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, .14); color: var(--text-secondary); font-size: 13px; }
.voice-msg.open .voice-text { display: block; }

/* 表情卡：没有真图时用小胶囊标签（别拿首字撑成大方块，那样很土） */
.sticker-msg { text-align: center; }
.sticker-msg .sticker-face {
  display: none;   /* 首字大方块弃用 */
}
.sticker-msg .sticker-name {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--label-2); font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--bg-primary); box-shadow: var(--sh-1);
  border: .5px solid var(--separator);
}
.sticker-msg .sticker-name::before {
  content: ''; width: 13px; height: 13px; flex: none;
  background: currentColor; opacity: .55;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.5s1.3 1.8 3.5 1.8 3.5-1.8 3.5-1.8'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
  mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.5s1.3 1.8 3.5 1.8 3.5-1.8 3.5-1.8'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
}
/* 有真图时不显示名字标签 */
.sticker-msg:has(.sticker-img) .sticker-name { display: none; }
/* 2.9 真图表情：免气泡直出，最大 140px */
.sticker-msg .sticker-img {
  max-width: 140px; max-height: 140px; display: block;
  border-radius: 10px; object-fit: contain;
}
.msg.me .sticker-msg .sticker-img { margin-left: auto; }

.img-msg .img-frame {
  width: 180px; height: 125px; border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(120, 90, 150, .12);
  display: flex; align-items: center; justify-content: center;
}
.img-msg .img-frame svg { width: 34px; height: 34px; color: #d3c6de; }
.msg.me .img-msg { display: flex; flex-direction: column; align-items: flex-end; }
.img-msg .img-desc { font-size: 12px; color: var(--text-secondary); margin-top: 6px; max-width: 190px; font-style: italic;
  background: rgba(255, 255, 255, .8); border-radius: 10px; padding: 6px 10px; }

.quote-block {
  border-left: 3px solid var(--accent); padding: 5px 9px; margin-bottom: 7px;
  background: rgba(0, 0, 0, .045); border-radius: 7px; font-size: 12px; color: var(--text-secondary);
}

/* 转账卡（橙色系是聊天软件通识，保留但圆角柔化） */
.transfer-card {
  width: 210px; border-radius: 14px; padding: 12px 14px; color: #fff;
  position: relative; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, #ffb45e, #f7904a);
  box-shadow: 0 3px 10px rgba(230, 140, 60, .3);
}
.transfer-card::before {
  content: ""; position: absolute; right: -18px; top: -18px; width: 76px; height: 76px;
  border-radius: 50%; border: 10px solid rgba(255, 255, 255, .14);
}
.transfer-card .transfer-title { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 5px; }
.transfer-card .transfer-title svg { width: 14px; height: 14px; stroke-width: 2; }
.transfer-card .transfer-amt { font-size: 22px; font-weight: 600; margin-top: 4px; }
.transfer-card .transfer-note {
  font-size: 12px; opacity: .92; border-top: 1px solid rgba(255,255,255,.3);
  padding-top: 6px; margin-top: 8px; word-break: break-all;
}

/* 红包卡 */
.redpacket-card {
  width: 210px; border-radius: 14px; padding: 15px 14px; cursor: pointer;
  background: linear-gradient(135deg, #ff7a6e, #f8544f);
  box-shadow: 0 3px 10px rgba(230, 80, 70, .3);
  position: relative; overflow: hidden;
}
.redpacket-card::before {
  content: ""; position: absolute; left: -20%; top: -46px; width: 140%; height: 74px;
  border-radius: 0 0 50% 50%; background: rgba(255, 220, 160, .22);
}
.redpacket-card .rp-face { color: #ffe8c8; font-weight: 600; font-size: 15px; position: relative; }
.redpacket-card .rp-hint { font-size: 11px; color: rgba(255,255,255,.75); margin-top: 6px; position: relative; }
.redpacket-card.open .rp-hint::after { content: " · 已拆开，是心意呀"; color: #ffe8c8; }

.recalled-msg { cursor: pointer; }
.recalled-msg .recall-line { color: var(--text-secondary); font-size: 12.5px;
  background: rgba(255, 255, 255, .55); padding: 4px 12px; border-radius: 10px; display: inline-block; }
.recalled-msg .recall-content { display: none; margin-top: 6px; color: var(--text-secondary); font-size: 13px;
  background: rgba(255, 255, 255, .8); border-radius: 10px; padding: 7px 11px; }
.recalled-msg.open .recall-content { display: block; }

/* 输入区：社交软件式布局（输入框在左，右侧表情 + ＋，输入文字后 ＋ 变发送），毛玻璃底 */
.composer {
  display: flex; gap: 8px; padding: 8px 10px calc(9px + env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .65); flex-shrink: 0; align-items: flex-end;
}
.composer textarea {
  flex: 1; background: rgba(255, 255, 255, .92); border: none; border-radius: 12px;
  padding: 10px 12px; outline: none; resize: none; max-height: 110px;
  box-shadow: none; font-size: 15.5px; min-height: 40px;
}
.composer textarea:focus { box-shadow: 0 0 0 3px var(--accent-ring); }
.composer-ic {
  width: 34px; height: 34px; margin-bottom: 3px; border: none; background: none; flex: none;
  cursor: pointer; color: var(--text-primary); opacity: .8; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.composer-ic svg { width: 29px; height: 29px; stroke-width: 1.5; }
.send-btn {
  height: 40px; padding: 0 16px; border-radius: 12px; border: none; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff;
  font-size: 15px; font-weight: 500; cursor: pointer;
  box-shadow: 0 3px 9px var(--accent-shadow);
}
.send-btn:disabled { opacity: .45; box-shadow: none; }

/* ---------- 钱包 ---------- */
.wallet-card {
  background: linear-gradient(135deg, #ffd08a, #ff9d6c);
  border-radius: 22px; padding: 26px; text-align: center;
  display: flex; flex-direction: column; gap: 10px; color: #fff;
  box-shadow: 0 8px 24px rgba(255, 150, 100, .35);
  position: relative; overflow: hidden;
}
.wallet-card::before {
  content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px;
  border-radius: 50%; border: 16px solid rgba(255, 255, 255, .16);
}
.wallet-label { font-size: 12px; letter-spacing: 4px; opacity: .9; }
.wallet-balance { font-size: 40px; font-weight: 600; text-shadow: 0 2px 6px rgba(180, 90, 40, .3); }
.wallet-unit { font-size: 13px; font-weight: 500; opacity: .85; margin-left: 7px; letter-spacing: 1px; }
.wallet-card .btn-primary { background: rgba(255,255,255,.92); color: #e8743f; box-shadow: 0 3px 10px rgba(180, 90, 40, .25); }
.tx-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; margin-bottom: 8px; font-size: 13px;
  background: rgba(255, 255, 255, .85); border-radius: 14px;
}
.tx-note { color: var(--text-secondary); font-size: 11px; margin-top: 3px; }
.tx-amount { font-weight: 700; }
.tx-amount.plus { color: var(--ok); }
.tx-amount.minus { color: var(--danger); }

/* ---------- tabs（店长台） ---------- */
.tabs { display: flex; flex-shrink: 0; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.6); position: relative; z-index: 14; }
.tab { flex: 1; background: none; border: none; padding: 12px 4px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; font-size: 14px; }
.tab.active { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

/* ---------- 店长台重做 ---------- */
.adm-hint {
  background: rgba(255, 255, 255, .6); border-radius: 14px; padding: 11px 14px; margin-bottom: 14px;
  color: var(--text-secondary); font-size: 12.5px; line-height: 1.7;
}
.test-result { border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.6; word-break: break-all; }
.test-result.tr-ok { background: rgba(79, 191, 126, .14); color: #2e9960; }
.test-result.tr-bad { background: rgba(255, 93, 93, .1); color: var(--danger); }
.user-card {
  background: rgba(255, 255, 255, .88); border-radius: 16px; padding: 14px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(120, 90, 150, .08);
}
.user-card-head { display: flex; align-items: center; gap: 12px; }
.user-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px;
  background: rgba(0, 0, 0, .03); border-radius: 12px; padding: 10px 6px;
}
.us-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.us-item b { font-size: 15px; color: var(--text-primary); }
.us-item span { font-size: 10.5px; color: var(--text-secondary); }
.user-actions { display: flex; gap: 8px; margin-top: 12px; }
.user-actions .btn-mini { flex: 1; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%) translateY(20px);
  background: rgba(60, 45, 70, .92); color: #fff; padding: 11px 20px; border-radius: 22px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(60, 45, 70, .35);
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 999; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 3.3 美化主题 ---------- */
.color-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.92); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px 12px; margin-bottom: 7px; }
.color-row input[type=color] {
  width: 42px; height: 34px; padding: 0; border: none; border-radius: 9px; cursor: pointer;
  background: none; flex: none;
}
.color-row input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-row input[type=color]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.12); border-radius: 8px; }
.color-row span { font-size: 13px; color: var(--text-primary); }
.theme-demo {
  border-radius: 18px; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--td-wall, linear-gradient(160deg, #ffd9e8, #c9e5ff));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 3px 10px rgba(90, 55, 110, .15);
}
.td-bubble { padding: 8px 13px; font-size: 14px; width: fit-content; max-width: 80%; box-shadow: 0 2px 6px rgba(120,90,150,.12); }
.td-ai { background: rgba(255,255,255,.9); border-radius: 3px 13px 13px 13px; }
.td-me { background: var(--td-bubble, #95ec69); border-radius: 13px 3px 13px 13px; align-self: flex-end; }
.td-btn {
  margin-top: 4px; text-align: center; padding: 10px; border-radius: 11px; color: #fff; font-size: 14px; font-weight: 600;
  background: var(--td-accent, #e85d8a); box-shadow: 0 3px 9px rgba(0,0,0,.14);
}
/* 主题列表卡片：左侧色卡 */
.theme-swatch {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  box-shadow: inset 0 0 0 2px #fff, 0 2px 6px rgba(120,90,150,.15);
  position: relative; overflow: hidden;
}
.theme-swatch i { position: absolute; right: 5px; bottom: 5px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.wearing-tag {
  display: inline-block; font-size: 10.5px; font-weight: 500; vertical-align: 1px;
  padding: 1.5px 7px; margin-left: 4px; border-radius: 8px;
  background: rgba(79, 191, 126, .16); color: #2e9960;
}
/* 商店里主题商品的迷你色卡 */
.store-swatch { display: inline-flex; gap: 3px; margin-top: 4px; }
.store-swatch i { width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* ---------- 2.6 聊天花活第二批 ---------- */
/* 对话页标题：名字 + 状态签名两行 */
.dlg-title { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.dlg-status {
  font-size: 11px; font-weight: 400; color: var(--text-secondary); max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-note.sys-dim { opacity: .75; font-style: italic; }
.sys-note.sys-angry { color: var(--danger); background: rgba(255, 93, 93, .1); }

/* 心声面板（点头像偷看） */
.overlay {
  position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(50, 35, 65, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
}
.inner-card {
  width: min(320px, 86%); border-radius: 22px; padding: 22px 20px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 20px 60px rgba(60, 40, 90, .4);
  display: flex; flex-direction: column; gap: 12px;
}
.inner-title { font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: 7px; }
.inner-ic { width: 19px; height: 19px; color: var(--accent-deep); }
.inner-row {
  display: flex; gap: 10px; font-size: 14px; line-height: 1.6;
  background: rgba(0, 0, 0, .035); border-radius: 12px; padding: 10px 12px;
}
.inner-k { flex: none; font-size: 11.5px; color: var(--text-secondary); font-weight: 600; padding-top: 2px; letter-spacing: 1px; }
.inner-thought { background: var(--accent-ring); }
.inner-thought span:last-child { font-style: italic; }
.inner-empty { text-align: center; color: var(--text-secondary); font-size: 13.5px; line-height: 2; padding: 14px 0; }
/* 2.9 批量添加表情弹窗的输入框 */
#saText {
  width: 100%; resize: vertical; border: 1px solid #e0e0e0; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; outline: none; background: #fafafa;
}
#saText:focus { border-color: var(--accent); background: #fff; }

/* 视频通话卡 */
.vcall-card {
  width: 210px; border-radius: 14px; padding: 13px 14px; cursor: pointer; color: var(--text-primary);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(120, 90, 150, .12);
}
.vcall-head { font-size: 14.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.vcall-head svg { width: 19px; height: 19px; stroke-width: 1.9; color: var(--accent-deep); }
.vcall-hint { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; }
.vcall-scene {
  display: none; font-size: 13px; line-height: 1.7; margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed rgba(0, 0, 0, .1); color: var(--text-secondary);
}
.vcall-card.open .vcall-scene { display: block; }
.vcall-card.open .vcall-hint { display: none; }

/* 秘密日记 */
.diary-card {
  background: rgba(255, 253, 246, .95); border-radius: 16px; padding: 15px 16px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(150, 120, 80, .12); border: 1px solid rgba(220, 200, 160, .4);
}
.diary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.diary-t { font-weight: 600; }
.diary-date { font-size: 11px; color: var(--text-secondary); flex: none; }
.diary-body { margin-top: 8px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; color: #4a4238; }
.diary-foot { text-align: right; margin-top: 8px; font-size: 11.5px; color: var(--text-secondary); }
.diary-foot span { cursor: pointer; }
.diary-foot span:hover { color: var(--danger); }

/* 用户侧花活面板（＋ 宫格，社交软件式结构 + 浅色配色） */
.composer-plus {
  width: 30px; height: 30px; margin-bottom: 5px; border-radius: 50%; border: 1.7px solid var(--text-primary); flex: none; cursor: pointer;
  background: none; color: var(--text-primary); opacity: .8; font-size: 20px; font-weight: 300; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.rich-panel {
  flex-shrink: 0; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .65); padding: 18px 14px 22px;
}
.rich-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
.rich-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12px; color: var(--text-secondary);
}
.rich-ic {
  width: 58px; height: 58px; border-radius: 16px; background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center; color: var(--accent-deep);
  box-shadow: 0 2px 8px rgba(120, 90, 150, .1);
}
.rich-ic svg { width: 30px; height: 30px; stroke-width: 1.5; }
.rich-item:active .rich-ic { background: #fff; transform: scale(.94); }
.rich-form { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.rich-form input {
  flex: 1; background: rgba(255, 255, 255, .92); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 10px 12px; outline: none; font-size: 14px; min-width: 0;
}
.rich-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.rich-form .btn-mini { border-radius: 12px; }

/* 2.9 表情包面板：半屏（分类 tab + 宫格点即发），浅色配色 */
.sticker-panel {
  flex-shrink: 0; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .65);
  display: flex; flex-direction: column; height: 46%;
}
.sp-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px 6px; flex-shrink: 0;
}
.sp-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sp-actions { display: flex; gap: 14px; }
.sp-btn { font-size: 12.5px; color: var(--accent-deep); cursor: pointer; }
.sp-tabs { display: flex; gap: 8px; padding: 0 14px 8px; flex-shrink: 0; }
.sp-tab {
  border: none; background: rgba(255, 255, 255, .7); color: var(--text-secondary); font-size: 12px;
  padding: 4px 12px; border-radius: 12px; cursor: pointer;
}
.sp-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; }
.sp-hint { font-size: 11px; color: var(--text-secondary); opacity: .85; padding: 0 14px 8px; flex-shrink: 0; }
.sp-grid {
  flex: 1; overflow-y: auto; padding: 2px 14px 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px;
  align-content: start;
}
.sp-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
}
.sp-item img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain;
  background: rgba(255, 255, 255, .92); border-radius: 12px;
}
.sp-item:active img { background: #fff; }
.sp-item .sp-name {
  font-size: 10.5px; color: var(--text-secondary); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-item.editing img { opacity: .75; }
.sp-item .sp-del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  background: var(--danger); color: #fff; border-radius: 50%; font-size: 13px; line-height: 17px;
  text-align: center; border: 2px solid #fff;
}
.sp-empty {
  grid-column: 1 / -1; text-align: center; color: var(--text-secondary);
  font-size: 12.5px; line-height: 2; padding-top: 20px;
}
.sp-foot {
  flex-shrink: 0; text-align: center; font-size: 12px; color: var(--accent-deep);
  padding: 9px; border-top: 1px solid rgba(0, 0, 0, .05); cursor: pointer;
}

/* ---------- 3.5 动态（朋友圈式 feed） ---------- */
.moments-body { padding: 12px 12px 20px; }
.moment-card {
  background: rgba(255, 255, 255, .9); border-radius: 18px; padding: 14px 15px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(120, 90, 150, .08);
}
.moment-head { display: flex; align-items: center; gap: 10px; }
.moment-head .wx-avatar {
  width: 42px; height: 42px; border-radius: 11px; font-size: 17px; font-weight: 600; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.moment-who { flex: 1; min-width: 0; }
.moment-name { font-weight: 600; font-size: 15px; }
.moment-time { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.moment-del { font-size: 11.5px; color: var(--text-secondary); cursor: pointer; opacity: .6; flex: none; }
.moment-del:hover { color: var(--danger); opacity: 1; }
.moment-content { margin-top: 10px; font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.moment-img { margin-top: 10px; }
.moment-img .img-frame {
  width: 200px; height: 135px; border-radius: 14px;
  background: rgba(0, 0, 0, .05);
  display: flex; align-items: center; justify-content: center;
}
.moment-img .img-frame svg { width: 34px; height: 34px; color: #d3c6de; }
.moment-img .img-desc {
  font-size: 12px; color: var(--text-secondary); margin-top: 6px; max-width: 210px; font-style: italic;
  background: rgba(0, 0, 0, .035); border-radius: 10px; padding: 6px 10px; width: fit-content;
}
.moment-foot { display: flex; align-items: center; gap: 16px; margin-top: 11px; }
.moment-like {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 13px; color: var(--text-secondary); user-select: none;
}
.moment-like svg { width: 19px; height: 19px; stroke-width: 1.8; transition: transform .15s; }
.moment-like:active svg { transform: scale(1.25); }
.moment-like.liked { color: var(--accent-deep); }
.moment-like.liked svg { fill: var(--accent); stroke: var(--accent-deep); }
.moment-like .like-n { font-style: normal; }
.moment-cbtn { font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.moment-cbtn:hover { color: var(--accent-deep); }
.moment-comments {
  display: none; margin-top: 10px; padding: 9px 11px; border-radius: 12px;
  background: rgba(0, 0, 0, .035); font-size: 13px; line-height: 1.7;
}
.moment-card.open .moment-comments { display: block; }
.moment-cmt { word-break: break-word; }
.moment-cmt + .moment-cmt { margin-top: 4px; }
.cmt-name { color: #6b7fb3; font-weight: 500; }