/* ============================================================
   本地通 Bendihua · Apple 风格 UI v2（Aria 设计稿 BENDIHUA_APPLE_UI_v1）
   Token 见 :root；橙色 #FF6B35 仅用于：CTA / 用户气泡 / L1高亮底 /
   返回箭头 / 免费次数胶囊。就医红线横幅保持警示红（不变）。
   ============================================================ */

:root {
  /* ---- Apple 风格设计 Token (BENDIHUA_APPLE_UI_v1) ---- */
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --ink: #1D1D1F;
  --ink-2: #6E6E73;
  --ink-3: #AEAEB2;
  --accent: #FF6B35;          /* 开口橙：唯一 CTA 色 */
  --accent-soft: #FFF1EA;     /* L1 高亮底 / 引导条底 */
  --accent-rgb: 255, 107, 53; /* v2.18: 声音电平脉冲动画用 RGBA 分量 */
  --line: #E5E5EA;
  --radius-card: 20px;
  --radius-bubble: 18px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro SC", "PingFang SC",
          "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  /* ---- 兼容旧变量名（app.js 内联样式/旧选择器引用，不删） ---- */
  --primary: var(--accent);
  --primary-dark: #E5551F;
  --primary-soft: var(--accent-soft);
  --card: var(--surface);
  --bubble-ai: #FFFFFF;
  --bubble-user: var(--accent);
  --bubble-user-ink: #FFFFFF;
  --green: #34C759;
  --orange: #f79009;
  --red: #f04438;
  --radius: var(--radius-card);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* iOS Safari 旋转防字号缩放 */

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;  /* iOS Safari 橡皮筋回弹锁（15.4+，与 dvh 同代次） */
}

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;  /* iOS Safari <15.4 fallback */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.hidden { display: none !important; }

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;   /* iOS 橡皮筋锁 */
  -webkit-transform: translateZ(0); transform: translateZ(0);  /* 硬件加速 */
}

/* ---------- 通用控件 ---------- */
.btn {
  border: none;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
  padding: 12px 24px;
  min-height: 48px;
  font-family: inherit;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--primary-dark); }
.btn-lg { height: 52px; font-size: 15px; font-weight: 600; padding: 0 40px; }

.btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.btn-xs { font-size: 12px; padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; }

/* 返回箭头 = 橙色允许位之一 */
.icon-btn {
  border: none; background: transparent;
  font-size: 22px; color: var(--accent);
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer; line-height: 1;
}
.icon-btn:active { background: rgba(0, 0, 0, 0.06); }

/* v0.18 图标库适配：内联 SVG 尺寸（V2 一页总览图标库，currentColor 跟随颜色） */
.tab-ic svg { width: 21px; height: 21px; }
.icon-btn svg { width: 20px; height: 20px; }
.emerg-btn svg { width: 21px; height: 21px; }
.mcard-ic svg { width: 22px; height: 22px; }
.recent-em svg { width: 17px; height: 17px; }
.me-row-ic svg { width: 15px; height: 15px; }
.hero-pill svg { width: 13px; height: 13px; vertical-align: -1px; margin-right: 3px; }
.chat-title svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.wl-card .lang-badge svg { width: 20px; height: 20px; }
.se svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ============ V0.19 品牌 Logo 接入 ============
   资源：web/logo/（favicon-32 / logo-512 / apple-touch-icon / logo-full）
   设计：深海军蓝渐变圆徽 + 中央 C + bdtgo 字标（用户提供原图，抠透明底） */

/* 启动 Splash：logo 淡入弹起 → 整体渐隐（app.js 定时移除节点） */
#brand-splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: #F5F5F7;
  animation: bs-fadeout .45s ease 1.35s forwards;
}
#brand-splash img {
  width: 132px; height: 132px; border-radius: 30px;
  box-shadow: 0 18px 44px rgba(26, 52, 84, .22);
  animation: bs-in .6s cubic-bezier(.18, .9, .28, 1.15) both;
}
#brand-splash .bs-name { font-size: 19px; font-weight: 800; color: #1D2939; letter-spacing: .5px; }
#brand-splash .bs-name em { font-style: normal; font-size: 13px; color: #667085; font-weight: 600; margin-left: 6px; }
#brand-splash .bs-sub { font-size: 10.5px; color: #98A2B3; letter-spacing: 2px; }
@keyframes bs-in { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bs-fadeout { to { opacity: 0; visibility: hidden; } }

/* 登录/注册页品牌行 */
.acc-brand { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.acc-brand img { width: 48px; height: 48px; border-radius: 12px;
  box-shadow: 0 6px 16px rgba(26, 52, 84, .18); }
.acc-brand-t { font-size: 15px; font-weight: 800; color: var(--ink, #1D2939); }
.acc-brand-s { font-size: 10.5px; color: var(--mut, #667085); margin-top: 2px; }

/* 订阅页品牌行 */
.pay-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pay-brand img { width: 26px; height: 26px; border-radius: 7px; }
.pay-brand span { font-size: 12px; font-weight: 800; color: var(--ink, #1D2939); }

/* 暗色主题适配 */
html[data-theme="dark"] #brand-splash { background: #12151C; }
html[data-theme="dark"] #brand-splash .bs-name { color: #F2F4F7; }
html[data-theme="dark"] #brand-splash .bs-sub { color: #667085; }



/* ---------- ③ 品牌页/开启页（P1 欢迎页） ---------- */
/* V5 修复：旧品牌页「垂直居中」残留导致内容超高时上下溢出（topbar 被顶出视口 -239px 划不到顶部）。
   首页已是 dash 版（顶对齐列表布局），居中会按内容高度双向溢出——改为顶部对齐铺满。 */
#view-welcome { justify-content: flex-start; align-items: stretch; text-align: left; padding: 0; position: relative; }

.welcome-wrap { width: 100%; max-width: 360px; margin: 0 auto; /* iPhone 竖屏(≥360)内容居中 */ }

.welcome-back { position: absolute; top: calc(8px + var(--safe-t)); left: 6px; z-index: 5; color: var(--accent); }

.welcome-intro { margin: 14px 4px 0; font-size: 15px; color: var(--ink-2); line-height: 1.7; }

/* "你将学习 [目标语]" 醒目行 */
.welcome-learn {
  display: inline-block;
  margin: 14px auto 2px;
  padding: 8px 20px;
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: var(--shadow);
}
.welcome-learn-cn { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }

/* v0.17 品牌页目标语快捷切换：\"你将学习 XX\" 可点 → 底部弹出滚动选择，就地生效不返回 */
.welcome-learn-tap { cursor: pointer; transition: transform .1s ease, background .15s ease; }
.welcome-learn-tap::after { content: "✎"; font-size: 11px; font-weight: 700; color: var(--accent); margin-left: 8px; vertical-align: 2px; opacity: .95; }
.welcome-learn-tap:active { transform: scale(.97); background: var(--accent-soft); }
.wl-sheet-mask {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(29, 29, 31, .46);
  display: flex; align-items: flex-end; justify-content: center;
  animation: wlFade .18s ease;
}
.wl-sheet {
  background: var(--surface); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0;
  padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 32px rgba(0, 0, 0, .14);
  animation: wlUp .24s cubic-bezier(.2, .9, .28, 1);
  max-height: 74vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.wl-sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 10px; }
.wl-sheet h4 { font-size: 16px; font-weight: 700; text-align: center; margin: 2px 0 14px; color: var(--ink); }
.wl-sheet .lang-list { padding: 0; }
.wl-sheet .lang-card.current { border-color: var(--accent); }
.wl-sheet .lang-card.current .lang-badge { background: var(--accent); color: #fff; }
.wl-sheet .lang-check { margin-left: auto; font-size: 14px; color: var(--accent); font-weight: 800; }

/* v2.8 同城定位弹窗：该城市访问会员榜 */
.city-visitors { margin: 10px 0 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.cv-h { font-size: 11px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.cv-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; }
.cv-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#FF8A50,#FF5F30); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.cv-nm { flex: 1; font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-sc { font-size: 11px; font-weight: 800; color: var(--orange,#ff9500); }
.cv-empty { font-size: 11px; color: var(--ink-3); padding: 8px 2px; text-align: center; }

.wl-sheet-cancel {
  width: 100%; margin-top: 14px; padding: 13px;
  border: none; border-radius: 14px;
  background: var(--bg); color: var(--ink-2);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
@keyframes wlFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wlUp { from { transform: translateY(40%); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

/* 品牌 logo：56px 橙色圆 + 💬 */
.logo {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.32);
  animation: pop 0.5s ease;
}
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.brand { font-size: 34px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }

/* 主标语 34px/700（P1：敢开口，办成事。） */
.slogan-main { font-size: 34px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }
.slogan { font-size: 17px; font-weight: 600; margin: 10px 0 4px; }
.slogan-en, .subline-en, .tip-en { color: var(--ink-3); font-weight: 400; }
.slogan-en { font-size: 14px; display: block; margin-top: 4px; }

.subline { color: var(--ink-2); font-size: 14px; margin: 12px 0 28px; }
.subline-en { font-size: 13px; }

/* 免费次数胶囊（accent-soft 底橙字）；≤1 次时 JS 加 .trial-low → 警示黄 */
.trial-hint {
  margin-top: 18px; font-size: 13px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
}
.trial-hint.trial-low { color: #B8860B; background: #FFF8DC; }
.tiny { margin-top: 28px; font-size: 12px; color: var(--ink-3); }

/* ---------- ② 场景选择页 ---------- */
.page-head, .chat-head {
  display: flex; align-items: center; gap: 6px;
  padding: calc(10px + var(--safe-t)) 14px 10px;
  background: rgba(245, 245, 247, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 5;
}
.head-title { flex: 1; text-align: center; margin-right: 40px; }
/* V2.11：我的页标题左对齐 + 登录/身份合并账号行 */
#view-me .head-title { text-align: left; margin-right: 0; padding-left: 2px; }
.me-account-line { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e4e7ec;
  font-size: 12px; color: #0a84ff; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.me-account-line a { color: var(--accent,#0a84ff); text-decoration: none; font-weight: 700; }
.me-account-line .acc-mail { color: #475467; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.me-avatar { cursor: pointer; }
.head-zh { font-size: 17px; font-weight: 700; }
.head-en { font-size: 12px; color: var(--ink-3); }

.step-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 5px;
}
.lang-native-summary {
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  margin: 2px 16px 8px;
}

/* 身份提示条 */
.role-bar {
  margin: 2px 16px 0;
  padding: 9px 14px;
  background: var(--accent-soft);
  border: none;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  flex-shrink: 0;
}
.role-bar a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  padding: 10px 2px;
  vertical-align: middle;
  margin-top: -10px;
  margin-bottom: -10px;
}
.role-bar a:active { text-decoration: underline; }

.scene-list { padding: 14px 16px 20px; display: block;  /* v2.9.11 根治 iOS/微信偏左：脱离 flex 交叉轴对齐（滚动容器内 flex 子项居中在 iOS Safari/X5 有经典 bug），改块级 margin auto——最古老规范全版本可靠 */
  max-width: 680px; width: 100%; margin: 0 auto; }
.scene-list .scene-card { margin-bottom: 16px; }  /* 替代原 flex gap 16 */

/* iOS 列表卡：白底 20px 圆角、图标 52px 圆角方块、整卡热区 ≥44pt */
.scene-card {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  min-height: 72px;
  background: var(--surface); border-radius: var(--radius-card);
  padding: 18px; box-shadow: var(--shadow);
  cursor: pointer; border: 1.5px solid transparent;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.scene-card:active { transform: scale(0.98); border-color: var(--accent); }

.scene-card.scene-top { border-color: rgba(255, 107, 53, 0.45); }
.rec-badge {
  position: absolute;
  top: -10px; right: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.35);
  white-space: nowrap;
}

/* 图标 52px 圆角方块（--bg 底） */
.scene-emoji {
  width: 52px; height: 52px;
  background: var(--bg);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; flex-shrink: 0;
}
.scene-info { flex: 1; }
.scene-name { font-size: 19px; font-weight: 600; }
.scene-name-en { font-size: 13px; color: var(--ink-3); margin-left: 6px; font-weight: 500; }
.scene-desc { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.scene-desc-en { font-size: 12px; color: var(--ink-3); }
.scene-context { font-size: 12px; color: var(--accent); margin-top: 3px; opacity: 0.9; }
.scene-go { color: var(--ink-3); font-size: 22px; font-weight: 700; }

.scene-tip { text-align: center; font-size: 12px; color: var(--ink-3); padding: 0 16px calc(18px + var(--safe-b)); }
.tip-en { display: block; }

/* ---------- ①⑤ 角色选择页 ---------- */
.role-sub {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  margin: 2px 16px 10px;
  line-height: 1.5;
}
.role-sub .sub-en { display: block; color: var(--ink-3); font-size: 12px; }

.role-list { padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 14px; }

.role-card {
  display: flex; align-items: center; gap: 16px;
  min-height: 72px;
  background: var(--surface); border-radius: var(--radius-card);
  padding: 18px; box-shadow: var(--shadow);
  cursor: pointer; border: 1.5px solid transparent;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.role-card:active { transform: scale(0.98); border-color: var(--accent); }

.role-emoji {
  width: 52px; height: 52px;
  background: var(--bg);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; flex-shrink: 0;
}
.role-info { flex: 1; }
.role-name { font-size: 19px; font-weight: 600; }
.role-name-en { font-size: 13px; color: var(--ink-3); margin-left: 6px; font-weight: 500; }
.role-desc { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.role-desc-en { font-size: 12px; color: var(--ink-3); }
.role-go { color: var(--ink-3); font-size: 22px; font-weight: 700; }

.role-skip, .lang-skip { text-align: center; padding: 10px 16px calc(22px + var(--safe-b)); }
.role-skip a, .lang-skip a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 20px;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 999px;
}
.role-skip a:active, .lang-skip a:active { color: var(--accent); background: rgba(0, 0, 0, 0.05); }

/* ---------- ①④ 语言层 ---------- */
.lang-target-note {
  margin: 2px 16px 12px;
  padding: 9px 14px;
  text-align: center;
  background: var(--accent-soft);
  border: none;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.lang-list { padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 12px; }

.lang-card {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px;
  background: var(--surface); border-radius: var(--radius-card);
  padding: 14px 18px; box-shadow: var(--shadow);
  cursor: pointer; border: 1.5px solid transparent;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.lang-card:active { transform: scale(0.98); border-color: var(--accent); }

.lang-badge {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--ink);
  border: none;
  font-size: 20px; font-weight: 700;
}
.lang-info { flex: 1; min-width: 0; }
.lang-name { font-size: 19px; font-weight: 600; }
.lang-name-en { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-top: 1px; }
.lang-go { color: var(--ink-3); font-size: 22px; font-weight: 700; }

.lang-other-box { display: flex; gap: 8px; padding: 0 16px 4px; }
.lang-other-box input {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 14px; font-size: 15px; font-family: inherit;
  background: #fff; outline: none;
}
.lang-other-box input:focus { border-color: var(--accent); background: #fff; }

/* ---------- ③ 对话页（P3 核心） ---------- */
#view-chat { display: flex; flex-direction: column; }
#view-chat.hidden { display: none; }

.chat-head {
  border-bottom: 0.5px solid var(--line);
  box-shadow: none;
  background: rgba(245, 245, 247, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chat-title { flex: 1; text-align: center; font-weight: 700; font-size: 17px; }
.chat-title #chat-emoji { margin-right: 4px; }
.chat-head .btn-ghost { flex-shrink: 0; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 10px;
  display: flex; flex-direction: column; gap: 12px;
}

.chat-placeholder { text-align: center; color: var(--ink-3); font-size: 13px; margin: 20px 10px; }
/* v2.9.14 管家历史折叠条 */
.butler-fold { text-align: center; padding: 10px; margin: 8px 4px; border: 1px dashed var(--line);
  border-radius: 10px; font-size: 12.5px; color: var(--accent, #0a84ff); cursor: pointer; user-select: none; }
.butler-fold-box { opacity: 0.72; }

/* 气泡：AI 白底左下 6px；用户橙底右下 6px，16px 字 */
.bubble {
  max-width: 84%;
  border-radius: var(--radius-bubble);
  padding: 12px 15px;
  font-size: 15px;
  box-shadow: var(--shadow);
  animation: rise 0.22s ease;
  word-break: break-word;
}
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.bubble-ai { background: var(--bubble-ai); align-self: flex-start; border-bottom-left-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.bubble-user {
  background: var(--bubble-user);
  color: var(--bubble-user-ink);
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  font-size: 16px;
}
.bubble-user .line-pinyin, .bubble-user .line-en,
.bubble-user .line-correct .cn, .bubble-user .line-guide,
.bubble-user .line-tip { color: rgba(255,255,255,0.92) !important; }
.bubble-user .tts-btn { color: #fff; background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }

/* v2.1 发音匹配度条（语音直发后显示在用户气泡下方） */
.match-bar {
  align-self: flex-end;
  max-width: 84%;
  background: #fff;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: 13px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(20,30,70,.06);
  display: flex; flex-direction: column; gap: 4px;
  animation: rise 0.22s ease;
}
.match-bar .mb-ic { font-size: 13px; }
.match-bar .mb-tx { color: var(--ink, #1d2939); }
.match-bar .mb-tx b { font-size: 13px; }
.match-bar .mb-st { height: 5px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.match-bar .mb-st span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#27ae60,#3dd68c); transition: width .4s; }
.match-bar.ok .mb-st span { background: linear-gradient(90deg,#f79009,#fbbf24); }
.match-bar.try .mb-st span { background: linear-gradient(90deg,#f04438,#f97066); }
.match-bar .mb-expect { font-size: 10.5px; color: var(--ink-3, #98a2b3); background: #f6f8fa; border-radius: 8px; padding: 4px 7px; }
.match-bar .mb-expect i { font-style: normal; color: #5e5ce6; font-weight: 600; }

/* 回复内结构化行 */
.line { margin: 2px 0; }
.line + .line { margin-top: 6px; }

/* L1 中文主句 20px/700 accent-soft 底圆角10px */
.line-correct {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 7px 11px;
  margin-top: 4px;
}
.bubble-user .line-correct { background: rgba(255,255,255,0.16); }
.line-correct .cn { color: var(--accent); }

/* 拼音 L2 14px --ink-3；英文释义 L3 14px 行高1.5 */
.line-pinyin { color: var(--ink-3); font-size: 14px; font-style: normal; }
.line-en { color: var(--ink-3); font-size: 14px; line-height: 1.5; }

/* 引导行 14px 斜体 橙色 */
.line-guide { color: var(--accent); font-size: 14px; font-style: italic; }
.line-section { font-weight: 700; margin-top: 8px !important; }
.line-step { color: var(--ink-2); font-size: 14px; padding-left: 6px; }
.line-tip { color: var(--ink-2); font-size: 13px; }

/* 纠错轮：错误句灰底删除线在上，正确句高亮块顶替 */
.line-wrong, .bubble .del-line {
  text-decoration: line-through;
  color: var(--ink-3);
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 4px 9px;
}

/* 🔊 发音按钮 */
.tts-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  vertical-align: middle;
  transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease;
}
.tts-btn:active { transform: scale(0.92); background: var(--accent-soft); }
.tts-btn.playing {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  animation: tts-pulse 1s ease-in-out infinite;
}
@keyframes tts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.tts-btn .tts-label { font-size: 12px; }

.mode-tag {
  font-size: 10px; color: var(--ink-3);
  margin-top: 6px; letter-spacing: 0.5px;
  text-align: center;
}

/* 会话结束卡片（P4：🎉 居中标题区 + 生词卡独立成块） */
.done-card {
  align-self: stretch;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-card);
  padding: 18px 16px;
  margin-top: 6px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}

/* ---------- 输入栏（固定底部 + safe-area） ---------- */
.chat-inputbar {
  padding: 8px 12px calc(10px + var(--safe-b));
  background: rgba(245, 245, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 0.5px solid var(--line);
}
.inputbar-row { display: flex; align-items: center; gap: 8px; }
.voice-toggle { flex-shrink: 0; width: 44px; height: 44px; font-size: 20px; }
.voice-mode { flex: 1; min-width: 0; }

.hold-talk {
  width: 100%; min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  /* v2.18: 声音电平可视化 CSS 变量 */
  --voice-level: 0;
}
.hold-talk.has-audio {
  /* 有声音时：边框变粗、背景高亮、内部脉冲环 */
  border-width: 2.5px;
  box-shadow: 0 0 0 calc(4px * var(--voice-level)) rgba(var(--accent-rgb), 0.3);
  animation: voice-pulse 0.3s ease-in-out infinite alternate;
}
@keyframes voice-pulse {
  0% { box-shadow: 0 0 0 calc(2px * var(--voice-level)) rgba(var(--accent-rgb), 0.4); }
  100% { box-shadow: 0 0 0 calc(6px * var(--voice-level)) rgba(var(--accent-rgb), 0.15); }
}
.hold-talk .hold-en { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.hold-talk:active, .hold-talk.hold-pressed {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.hold-talk.hold-pressed .hold-en { color: var(--accent); }

/* 识别中 loading 态（替代 toast 提示） */
.hold-talk.recording {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  animation: pulse-ring 1.2s ease-in-out infinite;
}
.hold-talk.recording .hold-main { color: var(--accent); }
.hold-talk.recording .hold-en { 
  color: var(--accent);
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* 识别中 loading 文字动画 */
.hold-talk.recording .hold-en::after {
  content: "";
  animation: spin-dots 1.5s steps(3, end) infinite;
}
@keyframes spin-dots {
  0% { content: ""; }
  33% { content: "."; }
  66% { content: ".."; }
  100% { content: "..."; }
}

#chat-form { display: flex; gap: 8px; }
#chat-input {
  flex: 1; min-width: 0;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 16px;  /* iOS Safari: <16px 聚焦自动放大 */
  font-family: inherit;
  background: #fff;
  outline: none;
  box-shadow: var(--shadow);
}
#chat-input:focus { border-color: var(--accent); background: #fff; }
#btn-send { padding: 11px 22px; min-height: 44px; flex-shrink: 0; }
#btn-butler-send { padding: 11px 22px; min-height: 44px; flex-shrink: 0; }
/* 管家页输入区与主对话页同构（v0.11 Bug2） */
#butler-form { display: flex; gap: 8px; }
#butler-input {
  flex: 1; min-width: 0;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 16px;  /* iOS Safari 防放大 */
  font-family: inherit;
  background: #fff;
  outline: none;
  box-shadow: var(--shadow);
}
#butler-input:focus { border-color: var(--accent); background: #fff; }

.chat-tips { font-size: 11.5px; color: var(--ink-3); text-align: center; margin-top: 6px; }
.chat-tips b { color: var(--ink-2); }

.voice-status {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(104px + var(--safe-b));
  z-index: 20;
  background: rgba(29, 29, 31, 0.92);
  color: #fff;
  font-size: 13.5px;
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.voice-status.cancel { background: rgba(198, 51, 51, 0.95); }

.toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 32%;
  z-index: 30;
  max-width: 78%;
  background: rgba(29, 29, 31, 0.82);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 18px;
  border-radius: 12px;
  text-align: center;
  pointer-events: none;
}

/* ---------- 桌面端适配（>640px 居中卡片化） ---------- */
/* v2.9.10 平板/宽屏 dock 强化：边界 768→600（4:3 iPad 竖屏 768 恰好卡边界、横屏折叠 640 都覆盖），
   选择器修正为实际 class .tab-item，!important 防御任何覆盖 —— 底部导航在 ≥600px 宽屏一律右侧悬浮 */
@media (min-width:600px) {
  .tabbar { position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    top:auto !important; transform:none !important; flex-direction:row !important;
    width:100% !important; max-width:480px !important; margin:0 auto !important;
    background:rgba(255,255,255,.88); backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.8); border-radius:16px 16px 0 0;
    padding:6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); gap:4px;
    box-shadow:0 -4px 20px rgba(0,0,0,.08); z-index:60; }
  .tabbar .tab-item { flex:1; padding:6px 0 !important; border-radius:10px; }
  .tabbar .tab-item.on { background:var(--accent-soft,#E8F0FE); }
  #app { padding: 0; }
}

@media (min-width: 700px) {
  #app { box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------- P5 订阅页 / P6 支付结果页 ---------- */
/* 微信内引导条：accent-soft 底 11.5px + 复制链接 */
.wx-guide {
  margin: 10px 16px 0;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: none;
  border-radius: 12px;
  font-size: 11.5px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wx-guide button {
  flex-shrink: 0;
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

/* ---------- 支付页登录态软引导条（2026-10-12）----------
   两态：未登录=warn（琥珀底，提示会员只绑设备）+ 「注册/登录」按钮；
        已登录=ok（淡绿底，显示邮箱）。任何情况下都不禁用支付按钮——软引导。 */
.pay-acc-hint {
  margin: 10px 16px 0;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
}
.pay-acc-hint.warn { background: #FEF0C7; color: #B54708; }
.pay-acc-hint.ok { background: #E7F6EC; color: #1B7F4B; }
.pay-acc-hint .pah-tx { flex: 1; min-width: 0; }
.pay-acc-hint .pah-em {
  display: block;
  font-weight: 600;
  margin-top: 2px;
  word-break: break-all;
}
.pay-acc-hint button {
  flex-shrink: 0;
  border: none;
  background: #B54708;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

/* 定价卡：¥30 大数字 44px/700 + 权益白卡 ✓ 列表 */
.pay-card {
  margin: 14px 16px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-card);
  padding: 24px 18px 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.pay-price { font-size: 44px; font-weight: 700; color: var(--ink); letter-spacing: -0.5px; }
.pay-price span { font-size: 15px; font-weight: 400; color: var(--ink-3); }
.pay-cancel { color: var(--ink-2); font-size: 13px; margin: 4px 0 14px; }
.pay-perks {
  list-style: none; text-align: left;
  margin: 0 auto 14px; max-width: 300px;
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 15px;
  line-height: 2.2;
  color: var(--ink);
}
.pay-trial-note { color: var(--accent); font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.pay-btn { width: 100%; height: 52px; font-size: 15px; font-weight: 600; margin-top: 10px; }
.pay-alipay { background: var(--accent); }   /* 遗留：alipay 通道已下线，元素不再渲染 */
.pay-wxpay { background: #07C160; }
/* Waffle Pancake（Waffo）—— 暖色调，与 Paddle 的默认主色区分开。
   #B45309 对白字对比度 ≈4.8:1，满足 WCAG AA。 */
.pay-waffo { background: #B45309; }
.pay-state { color: var(--ink-2); font-size: 13px; margin-top: 10px; }

/* P6 结果页：成功=72px 绿徽章；失败=灰底 😕 双按钮 */
.result-wrap { padding: 80px 24px 0; text-align: center; }
.result-icon {
  width: 72px; height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: #E8F8EE;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  color: #07C160;
}
.result-icon.fail { background: #F2F2F7; color: var(--ink-3); }
.result-title { font-size: 22px; margin: 16px 0 6px; color: var(--ink); }
.result-sub { color: var(--ink-2); font-size: 14px; margin-bottom: 26px; }
.result-wrap .btn { width: min(320px, 100%); }
.result-wrap .tiny { margin-top: 18px; }

/* ---- 生词卡 / 付费墙弹层 / 生词本 ---- */
/* P4/P0-3 生词卡：2 列网格 */
.vocab-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; width: 100%; }
.vocab-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--bg);
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  margin: 0;
  text-align: left;
}
.done-card .vocab-cards { margin: 10px 0 2px; }
.vocab-chip .vw { font-weight: 700; font-size: 20px; color: var(--ink); }  /* 词条 20px/700 */
.vocab-chip .vp { color: var(--ink-3); font-size: 13px; }
.vocab-chip .vg { color: var(--ink-2); font-size: 13px; }
.vocab-chip .vs { color: var(--ink-3); font-size: 11px; width: 100%; }
.vocab-chip.vocab-review { cursor: pointer; }

.modal-mask { position:fixed; inset:0; background:rgba(29,29,31,.5); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:18px; }
.modal-card { background:#fff; border-radius:var(--radius-card); padding:18px 16px; max-width:360px;
  width:100%; max-height:82vh; overflow-y:auto; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.25); }
.pw-title { font-size:17px; font-weight:800; color:var(--ink); }
.pw-sub { font-size:12.5px; color:var(--ink-3); margin:4px 0 10px; }
.pw-review { text-align:left; margin-bottom:10px; }
.pw-item { display:flex; gap:8px; padding:6px 10px; align-items:baseline;
  background:var(--bg); border-radius:10px; margin-bottom:6px; font-size:13.5px; }
.pw-item b { color:var(--accent); }
.pw-item span { color:var(--ink-3); font-size:11.5px; }
.pw-item em { font-style:normal; color:var(--ink-2); font-size:12px; }
.pw-anchor { font-size:12.5px; color:var(--accent); background:var(--accent-soft);
  border-radius:10px; padding:8px; margin-bottom:12px; line-height:1.55; }
#btn-pw-keep { margin-top:8px; width:100%; }
.vocab-entry-row { text-align:center; padding:10px 0 22px; }
.vocab-entry-row a { color:var(--accent); font-size:14px; text-decoration:none; font-weight:600;
  display:inline-block; min-height:44px; line-height:44px; padding:0 16px; }

/* 就医红线横幅：警示红，不被新风格吞掉（app.js 内联红横幅兜底样式） */
.red-banner, .medical-red {
  background: #FDECEC !important;
  color: #C0392B !important;
  border: 1px solid rgba(192, 57, 43, 0.35) !important;
  border-radius: 12px !important;
}

.hidden { display:none !important; }

/* ---------- v1.2 品牌页「实时访问动态」跑马灯（社交证明 + 录屏素材） ---------- */
.visit-ticker {
  margin-top: 24px; width: 100%; padding: 12px 16px;
  border: 1px solid var(--accent-soft); border-radius: 12px;
  background: linear-gradient(135deg, #f6fff8, #f0fbf5);
  text-align: center; box-sizing: border-box;
}
.visit-ticker-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: .5px; margin-bottom: 6px;
}
.visit-ticker-body {
  font-size: 13px; color: var(--ink-2); line-height: 1.7;
  min-height: 20px; word-break: break-word;
}

/* ================= V2 整版 UI（2026-09 战略评审落地） =================
   ① 品牌页 → 首页 Hero（价值主张 + 今日任务 + 最近在练 + 生词复习 + 同城预告）
   ② 底部 TabBar 4 Tab（练习/管家/同城/我的）
   ③ 场景页 📍 城市轻选择
   ④ 同城视图（活动/圈子/攻略 + 报名身份卡）
   ⑤ 我的视图（生词/称号/会员/打卡/分享）
   ⑥ 顶部状态栏对齐 + 全局底部留白（TabBar 高度） */

/* 全局：内容底部留白给 TabBar（fixed bottom） */
.view { padding-bottom: 58px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(228,231,236,.6); padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 600; color: #667085; padding: 3px 0; border-radius: 12px; cursor: pointer; }
.tab-item .tab-ic { font-size: 18px; line-height: 1.2; }
.tab-item.on { color: var(--accent, #0a84ff); font-weight: 700; background: linear-gradient(180deg, rgba(10,132,255,.10), rgba(255,255,255,0)); }

/* ① 首页 Hero + 卡片 =============================== */
.welcome-dash { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 20px; }
.welcome-dash .welcome-back { position: absolute; top: 10px; left: 10px; z-index: 5; }
/* V12-02 大 Hero 沉浸：Slogan 全宽渐变墙（手机 17px / 平板 19px） */
.dash-hero { padding: 8px 14px 12px; background: linear-gradient(155deg, #FFF7F2, #FFE8DE); }
.hero-top { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
.dash-city { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  background: #fff; border: 1px solid #e5e7ed; border-radius: 999px; padding: 6px 13px; color: #0a84ff; }
.pill-city { cursor: pointer; }
.pill-city:active { transform: scale(.96); }
.hero-actions { display: flex; gap: 6px; }
.scene-pill { background: #fff7f2; border: 1px solid #ffd9c4; color: #ff6b35 !important;
  border-radius: 999px; padding: 6px 13px; font-size: 11px; font-weight: 700; cursor: pointer; }
.dash-slogan-main { font-size: 17px; font-weight: 800; line-height: 1.32; color: #1a1a1a;
  letter-spacing: -.3px; margin-top: 2px; text-align: center; width: 100%; }
.dash-slogan-main em { font-style: normal;
  background: linear-gradient(120deg, #ff6b35, #ff9500); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.dash-slogan-en { font-size: 9px; color: #8a8f9c; margin-top: 3px; text-align: center; width: 100%; }
.dash-learn { display: inline-block; margin-top: 10px; background: rgba(255,255,255,.22);
  border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; position: relative; z-index: 2; }
.dash-brand { font-size: 9.5px; opacity: .7; margin-top: 12px; position: relative; z-index: 2; }

.dash-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 18px;
  padding: 12px 14px; box-shadow: 0 4px 14px rgba(90,90,150,.08); }
/* v2.7 设计稿 02 紧凑卡（榜/活动）：10px 圆角、更薄边距 */
#dash-rank, #dash-local { border-radius: 10px; padding: 10px 12px; margin-top: 5px; }
.dash-label { font-size: 11px; font-weight: 700; color: #667085; margin-bottom: 8px; }
.dash-more { float: right; color: var(--accent, #0a84ff); font-weight: 600; font-size: 10.5px; cursor: pointer; }

/* v2.7: TOP 场景卡 = 设计稿 02 大 Hero 沉浸：去白卡边框/圆角/阴影（渐变主卡自带视觉） */
#dash-task { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }
/* 今日任务卡 */
/* v2.7 设计稿 02 大 Hero 沉浸：TOP 场景纵向堆叠（label → 渐变主卡 → 2 副卡），无边框沉浸 */
.task-card { display: block; }
.task-ring { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(#ff9500 0deg 300deg, #f0f1f5 300deg 360deg); display: flex; align-items: center; justify-content: center; }
.task-ring.done { background: conic-gradient(#ff9500 0deg 360deg, #ff9500 360deg); }
.task-ring-in { width: 40px; height: 40px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 8px; color: #667085; }
.task-ring-in b { font-size: 14px; color: #ff9500; line-height: 1.1; }
.task-info { flex: 1; }
.task-tt { font-size: 12.5px; font-weight: 700; }
.task-td { font-size: 9.5px; color: #667085; margin-top: 2px; }
.task-streak { font-size: 10px; font-weight: 700; color: #c2410c; background: #fff7ed;
  border-radius: 999px; padding: 2px 8px; display: inline-block; margin-top: 5px; }
.task-go { background: linear-gradient(135deg, #ff6b35, #ff9500); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 12px; font-weight: 700; flex-shrink: 0; cursor: pointer; border: none;
  box-shadow: 0 4px 12px rgba(255,107,53,.28); }

/* V5/V6 管家页：紧急求助 🆘 按钮 + 锚定弹泡（5s 倒计时自动关闭） */
.emerg-btn { flex: none; background: transparent; border: none; color: #ff6b35 !important;
  font-size: 14px; margin-right: 2px; box-shadow: none; }
.chat-head { position: relative; }   /* 气泡锚点 */
.butler-emerg-note { position: absolute; z-index: 40; top: calc(100% + 8px); left: 50%;
  /* v2.7: left:50% 配合 transform translateX(-50%) = 相对嵌套按钮居中（不再依赖 JS offsetLeft） */
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #fde3b6; border-radius: 14px;
  padding: 9px 13px; font-size: 11.5px; font-weight: 700; color: #8a4d0f;
  box-shadow: 0 8px 22px rgba(180, 90, 10, .22);
  animation: emerg-pop .28s cubic-bezier(.2, .9, .3, 1.2) both;
  transform: translateX(-50%); white-space: nowrap; }
@keyframes emerg-pop {
  from { opacity: 0; transform: translate(-50%, -6px) scale(.9); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.butler-emerg-note.hidden { display: none; }

/* v2.7.1 会话页「不会说？」提示气泡（复刻管家 🆘 气泡效果，3s 倒计时自动消失；按住说话提示已并入） */
.chat-inputbar { position: relative; }              /* 气泡锚点：输入栏上方 */
#chat-tip-note { top: auto; bottom: calc(100% + 8px); transform: translateX(-50%); }
#chat-tip-note .ben-arrow { top: auto; bottom: -6px;
  border-left: none; border-top: none; border-right: 1px solid #fde3b6;
  border-bottom: 1px solid #fde3b6; }
.ben-count { background: linear-gradient(135deg, #ff6b35, #ff9500); color: #fff;
  border-radius: 999px; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; }
.ben-txt b { color: #b45309; }
.ben-arrow { position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; background: #fff; border-left: 1px solid #fde3b6;
  border-top: 1px solid #fde3b6; transform: rotate(45deg); }

/* 最近在练 / 生词复习 */
.recent-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.recent-row + .recent-row { border-top: 1px solid #f0f2f6; }
.recent-em { width: 32px; height: 32px; border-radius: 11px; background: #eef4ff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.recent-info { flex: 1; }
.recent-nm { font-size: 11.5px; font-weight: 600; }
.recent-st { font-size: 9.5px; color: #667085; margin-top: 1px; }
.recent-btn { font-size: 10px; font-weight: 700; color: var(--accent, #0a84ff);
  border: 1px solid #cdd7ec; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.recent-pct { font-size: 10px; font-weight: 800; color: #2f9e44; }

/* 同城预告 */
.city-event { display: flex; align-items: center; gap: 10px; }
.city-event .ev-date { width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; line-height: 1; }
.city-event .ev-date small { font-size: 8px; font-weight: 600; opacity: .85; margin-top: 2px; }
.ev-info { flex: 1; }
.ev-tt { font-size: 11.5px; font-weight: 700; }
.ev-ds { font-size: 9.5px; color: #667085; margin-top: 1px; }
.ev-join { font-size: 10px; font-weight: 700; color: var(--accent, #0a84ff);
  border: 1px solid #cdd7ec; border-radius: 999px; padding: 4px 10px; cursor: pointer; }

/* ③ 场景页城市条 =============================== */
.city-pick-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 4px 2px; max-width: 680px; width: 100%; margin: 0 auto; }
.city-pick-label { font-size: 10.5px; font-weight: 700; color: #667085; margin-right: 2px; }
.city-pick { background: #fff; border: 1px solid #e4e7ec; border-radius: 999px;
  padding: 5px 12px; font-size: 11px; font-weight: 600; color: #667085; cursor: pointer; }
.city-pick.cur { background: linear-gradient(135deg, #0a84ff, #5e5ce6); color: #fff;
  border-color: transparent; font-weight: 700; }
.city-pick-add { font-size: 10.5px; font-weight: 700; color: var(--accent, #0a84ff); cursor: pointer; }

/* ④ 同城视图 =============================== */
.local-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.local-hero { border-radius: 18px; padding: 15px 16px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(10,132,255,.86), rgba(94,92,230,.90)),
              radial-gradient(circle at 85% 15%, rgba(255,255,255,.22), transparent 60%); }
.lh-title { font-size: 15px; font-weight: 800; }
.lh-sub { font-size: 10px; opacity: .88; margin-top: 3px; }
.lh-stats { display: flex; gap: 18px; margin-top: 10px; }
.lh-stats b { font-size: 14px; display: block; }
.lh-stats span { font-size: 8.5px; opacity: .82; }
.local-tabs { display: flex; background: #eef0f5; border-radius: 999px; padding: 3px; }
.local-tabs span { flex: 1; text-align: center; font-size: 11px; font-weight: 600; color: #667085;
  padding: 6px 0; border-radius: 999px; cursor: pointer; }
.local-tabs span.on { background: #fff; color: var(--accent, #0a84ff); font-weight: 700;
  box-shadow: 0 2px 6px rgba(90,90,150,.15); }
.local-pane { display: flex; flex-direction: column; gap: 10px; }
.local-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(90,90,150,.08); }
.ev-row { display: flex; align-items: center; gap: 10px; }
.ev-row + .ev-row { border-top: 1px solid #f0f2f6; padding-top: 9px; margin-top: 9px; }
.ev-d { width: 40px; height: 40px; border-radius: 13px; background: #eef4ff; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--accent, #0a84ff); line-height: 1; }
.ev-d small { font-size: 7.5px; color: #667085; margin-top: 2px; }
.ev-tag { display: inline-block; font-size: 8px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.ev-tt2 { font-size: 11.5px; font-weight: 700; }
.ev-ds2 { font-size: 9px; color: #667085; margin-top: 1px; }
.ev-join2 { font-size: 10px; font-weight: 700; color: var(--accent, #0a84ff);
  border: 1px solid var(--accent, #0a84ff); border-radius: 999px; padding: 4px 11px; cursor: pointer; flex-shrink: 0; }
.ev-joined { color: #fff; background: linear-gradient(135deg, #34d399, #0a84ff); border-color: transparent; }
.local-circles { display: flex; flex-wrap: wrap; gap: 10px; }
.circle-card { flex: 1 1 45%; min-width: 130px; background: #fff; border: 1px solid #e4e7ec;
  border-radius: 16px; padding: 12px; text-align: center; box-shadow: 0 4px 14px rgba(90,90,150,.06); cursor: pointer; }
.cc-ic { font-size: 20px; }
.cc-nm { font-size: 11px; font-weight: 700; margin-top: 4px; }
.cc-ds { font-size: 8.5px; color: #667085; margin-top: 2px; }
.cc-ct { font-size: 8px; color: var(--accent, #0a84ff); font-weight: 700; margin-top: 4px; }
.local-note { font-size: 9.5px; color: #98a2b3; text-align: center; }
.guide-row { padding: 9px 0; font-size: 11px; border-bottom: 1px solid #f0f2f6; }
.guide-row:last-child { border-bottom: none; }
.guide-note { font-size: 9px; color: #98a2b3; text-align: center; padding-top: 8px; }

/* ==========================================================================
   「大家都在问」/「同乡都在问」入口卡（V3.1 · SEO 攻略导流）
   --------------------------------------------------------------------------
   数据源：/guides/_ask_index.json（seo_articles.py build_ask_index 生成）
   两个入口共用同一套卡骨架，只有标题/上下文/取数口径不同：
     #butler-ask  管家页 · 通用办事问题（按母语取文章）
     #local-ask   同城页 · 带「城市 × 语言」上下文
   ⚠ 卡内每条的「看详解」必须是真 <a href> 指向 /guides/… 静态页。
     这是给爬虫的内链出口，改成 onclick 跳转 = 这一层白做。
   ========================================================================== */
.ask-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(90,90,150,.08); }
.ask-head { display: flex; align-items: center; gap: 8px; }
.ask-ic { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6); color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ask-tt { display: flex; flex-direction: column; min-width: 0; }
.ask-tt b { font-size: 12.5px; font-weight: 800; color: #101828; line-height: 1.3; }
.ask-tt em { font-style: normal; font-size: 9.5px; color: #98a2b3; margin-top: 2px; line-height: 1.4; }
.ask-ctx { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-ctx span { font-size: 9.5px; font-weight: 700; color: #475467;
  background: #f2f4f7; border-radius: 999px; padding: 2px 9px; }
/* 分类筛选：既是筛选项，也是未来 /guides/<lang>/<category>/ 聚合页的入口位 */
.ask-filters { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ask-filters::-webkit-scrollbar { display: none; }
.ask-filters span { flex-shrink: 0; font-size: 10px; font-weight: 600; color: #667085;
  border: 1px solid #e4e7ec; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ask-filters span.on { color: #fff; background: #0a84ff; border-color: #0a84ff; font-weight: 700; }
.ask-list { display: flex; flex-direction: column; }
.ask-item { display: block; padding: 10px 0; border-bottom: 1px solid #f0f2f6;
  text-decoration: none; color: inherit; }
.ask-item:last-child { border-bottom: none; }
.ask-q { font-size: 11.5px; font-weight: 700; color: #101828; line-height: 1.45;
  display: flex; gap: 5px; align-items: flex-start; }
.ask-q .em { flex-shrink: 0; }
.ask-a { font-size: 9.5px; color: #667085; line-height: 1.6; margin-top: 3px; }
.ask-a b { color: #0a84ff; font-weight: 700; }
.ask-acts { display: flex; gap: 7px; margin-top: 7px; }
.ask-acts .ask-btn { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 4px 12px;
  border: 1px solid #e4e7ec; color: #475467; background: #fff; cursor: pointer; }
.ask-acts .ask-btn.pri { color: #fff; background: linear-gradient(135deg, #0a84ff, #5e5ce6);
  border-color: transparent; }
.ask-foot { font-size: 9px; color: #98a2b3; line-height: 1.6; margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed #eaecf0; }
.ask-empty { font-size: 11px; color: #98a2b3; padding: 14px 0; text-align: center; }
/* 收起态：有对话后只留一行横滑快捷问（复用 .quick-chips/.quick-chip 容器） */
#butler-chips .quick-chip { font-size: 11.5px; padding: 5px 12px; border-radius: 999px; }
html[data-theme="dark"] .ask-card { background: #161B23; border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .ask-tt b,
html[data-theme="dark"] .ask-q { color: #E7EAF3; }
html[data-theme="dark"] .ask-item { border-bottom-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .ask-ctx span { background: rgba(255,255,255,.07); color: #9AA3B8; }
html[data-theme="dark"] .ask-filters span { border-color: rgba(255,255,255,.12); color: #9AA3B8; }
html[data-theme="dark"] .ask-acts .ask-btn { background: transparent;
  border-color: rgba(255,255,255,.14); color: #9AA3B8; }
html[data-theme="dark"] .ask-foot { border-top-color: rgba(255,255,255,.10); }

/* 报名身份卡 */
.local-idcard { position: absolute; left: 16px; right: 16px; bottom: 68px; z-index: 30;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6); border-radius: 20px; padding: 16px;
  color: #fff; box-shadow: 0 14px 34px rgba(94,92,230,.4); }
.id-top { display: flex; align-items: center; justify-content: space-between; }
.id-name { font-size: 13px; font-weight: 800; }
.id-tier { font-size: 9px; background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px 9px; font-weight: 700; }
.id-code { font-size: 9.5px; opacity: .9; margin-top: 7px; }
.id-cta { width: 100%; margin-top: 11px; background: #fff; color: var(--accent, #0a84ff);
  border: none; border-radius: 999px; padding: 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.id-close { width: 100%; margin-top: 6px; background: transparent; color: #fff; border: none;
  font-size: 10px; opacity: .8; cursor: pointer; }

/* ⑤ 我的视图 =============================== */
.me-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.me-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 18px; padding: 13px 15px;
  box-shadow: 0 4px 14px rgba(90,90,150,.08); }
.me-avatar { display: flex; align-items: center; gap: 12px; }
.me-av { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; }
.me-name { font-size: 13.5px; font-weight: 800; }
.me-role { font-size: 10px; color: #667085; margin-top: 2px; }
.me-tier { display: inline-block; font-size: 9px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f5b301, #ff9500); border-radius: 999px; padding: 2px 9px; margin-top: 5px; }
.me-membership { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #667085; }
.me-mem-bar { flex: 1; height: 7px; border-radius: 99px; background: #eef0f5; overflow: hidden; }
.me-mem-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #34d399, #0a84ff); }
.me-mem-cta { text-align: center; margin-top: 9px; background: #eaf3ff; color: var(--accent, #0a84ff);
  border-radius: 999px; padding: 7px; font-size: 11px; font-weight: 800; cursor: pointer; }
.me-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.me-row + .me-row { border-top: 1px solid #f0f2f6; }
.me-row-ic { width: 31px; height: 31px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 14px; flex-shrink: 0; }
.me-row-nm { font-size: 11.5px; font-weight: 600; flex: 1; }
.me-row-ct { font-size: 9.5px; color: #667085; }
.me-row-go { font-size: 13px; color: #c3c9d4; }
.me-share { border-radius: 999px; padding: 12px; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6); box-shadow: 0 6px 16px rgba(94,92,230,.35);
  border: none; cursor: pointer; }

/* ==================== V3 能量经济 + 品牌页改造 (2026-09-09) ==================== */
.hero-top { display:flex; align-items:center; justify-content:flex-end; margin-bottom:10px; }
.hero-actions { display:flex; gap:6px; }
.hero-pill {
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); color:#fff;
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer;
}
.task-label { font-size:12px; font-weight:800; color:#1D1D1F; margin-bottom:8px; }
.task-body { display:flex; align-items:center; gap:12px; }
.task-card .task-ring { flex-shrink:0; }
.task-card .task-go {
  background:linear-gradient(135deg,#ff6b35,#ff9500); color:#fff; border:none; cursor:pointer;
  border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:700;
  box-shadow:0 4px 12px rgba(255,107,53,.3); flex-shrink:0;
}
.energy-strip {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:linear-gradient(135deg,#FFF7ED,#FFEFD9); border:1px solid #FDE3B6; border-radius:18px;
  padding:12px 14px;
}
.energy-strip .energy-num { font-size:15px; font-weight:800; color:#ff9500; }
.energy-strip .energy-battery { flex:1; display:flex; align-items:center; gap:4px; }
.energy-strip .eb-fill { display:block; height:7px; border-radius:99px 0 0 99px;
  background:linear-gradient(90deg,#ffcc02,#ff9500,#ff6b35); }
.energy-strip .eb-cap { flex:none; width:2px; height:10px; border-radius:1px; background:#ffb066; }
.energy-strip .energy-label { font-size:11px; font-weight:600; color:#8a6a3c; flex:none; }
.energy-strip { margin-bottom:14px; }
.energy-strip .energy-ic {
  width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#FF9500,#FFB340);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.energy-strip .energy-info { flex:1; }
.energy-strip .energy-info b { display:block; font-size:13.5px; color:#7A4D0F; }
.energy-strip .energy-info span { font-size:10.5px; color:#A9762A; }
.energy-strip .energy-go { font-size:12px; font-weight:700; color:#F79009; }
.rank-top { padding:2px 0; }

/* ===== 排行榜领奖台 (定稿版) ===== */
.rank-podium { display:flex; justify-content:center; align-items:flex-end; gap:12px; padding:12px 0 8px; }
.podium-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.podium-rank-1 { order:2; }
.podium-rank-2 { order:1; }
.podium-rank-3 { order:3; }
.podium-avatar { position:relative; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:visible; }
.podium-rank-1 .podium-avatar { width:64px; height:64px; border:3px solid #F59E0B; }
.podium-rank-2 .podium-avatar, .podium-rank-3 .podium-avatar { width:50px; height:50px; border:2px solid #9CA3AF; }
.podium-rank-3 .podium-avatar { border-color: #D97706; }
.podium-av-img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.podium-av-fb { width:100%; height:100%; border-radius:50%; background:var(--bg-muted,#F3F4F6); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ink-2,#4B5563); }
.podium-rank-1 .podium-av-fb { font-size:28px; }
.podium-crown { position:absolute; top:-14px; font-size:18px; z-index:2; }
.podium-medal { position:absolute; bottom:-4px; right:-4px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:500; z-index:2; }
.medal-gold { background:#F59E0B; }
.medal-silver { background:#9CA3AF; }
.medal-bronze { background:#D97706; }
.podium-name { font-size:12px; font-weight:500; color:var(--ink,#16181D); text-align:center; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium-score { font-size:11px; color:var(--ink-3,#9CA3AF); }
/* My rank bar */
.my-rank-bar { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg-muted,#F3F4F6); border-radius:10px; margin-top:8px; }
.my-rank-tag { background:var(--ink,#16181D); color:#fff; font-size:10px; font-weight:500; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.my-rank-info { display:flex; align-items:center; gap:8px; flex:1; }
.my-rank-avatar { width:26px; height:26px; border-radius:50%; background:var(--accent,#2DD4BF); display:flex; align-items:center; justify-content:center; font-size:12px; overflow:hidden; }
.my-rank-name { font-size:13px; font-weight:500; color:var(--ink,#16181D); }
.my-rank-score { font-size:12px; color:var(--ink-3,#9CA3AF); margin-left:auto; }
/* Row styles for rank 4-7 */
.lb-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--bg-muted,#F3F4F6); }
.lb-rank { width:20px; font-size:13px; color:var(--ink-3,#9CA3AF); text-align:center; font-weight:500; }
.lb-avatar { width:26px; height:26px; border-radius:50%; background:var(--bg-muted,#F3F4F6); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; overflow:hidden; }
.lb-row-av { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.lb-row-fb { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lb-name { flex:1; font-size:13px; color:var(--ink,#16181D); }
.lb-flag { font-size:13px; }
.lb-xp { font-size:12px; color:var(--ink-3,#9CA3AF); }

.rank-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #F0F0F2; }
.rank-row:last-child { border-bottom:none; }
.rank-row .rank-no {
  width:34px; height:34px; border-radius:50%; background:#F4F6FB; color:#667085;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}
/* v0.19：练习榜头像大 1 倍（30px → 60px） */
.rank-row .rank-av {
  width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#0A84FF,#5E5CE6);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; font-weight:800;
  object-fit:cover; border:2px solid #fff; box-shadow:0 2px 8px rgba(20,30,60,.16);
}
/* v7.1：Top10 中 Top1 头像保持 60px，其余 9 名缩小 10%（54px） */
.rank-row:not(:first-child) .rank-av { width:54px; height:54px; font-size:18px; }
/* 区域徽标（登录 IP 所在区域：广州/深圳/佛山…） */
.rank-region {
  flex:none; display:inline-flex; align-items:center; gap:2px;
  padding:3px 8px; border-radius:999px; font-size:10px; font-weight:600;
  background:#EFF6FF; color:#1D6FE8; border:1px solid #D6E9FF;
}
/* 字母兜底（img 加载失败时显示） */
.rank-av-fb { background:linear-gradient(135deg,#0A84FF,#5E5CE6) !important; }
.rank-row .rank-info { flex:1; }
.rank-row .rank-info b { display:block; font-size:15px; color:#1D1D1F; }
.rank-row .rank-info span { font-size:11px; color:#AEAEB2; }
.rank-row .rank-score { font-size:13px; font-weight:800; color:#0A84FF; }
.rank-row.me { background:#FFF8F4; border-radius:12px; padding:8px 10px; margin:6px -4px -2px; }
.energy-page { padding:6px 16px 20px; }
.energy-hero {
  background:linear-gradient(135deg,#FF9500,#FFB340); border-radius:20px; padding:18px 16px;
  color:#fff; position:relative; overflow:hidden; margin-bottom:12px;
  box-shadow:0 8px 22px rgba(255,149,0,.3);
}
.energy-hero::after { content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; background:rgba(255,255,255,.13); border-radius:50%; }
.energy-hero-lbl { font-size:11.5px; opacity:.9; font-weight:600; }
.energy-hero-num { font-size:38px; font-weight:900; letter-spacing:-1px; margin:4px 0 2px; }
.energy-hero-num small { font-size:13px; opacity:.9; }
.energy-hero-eq { font-size:10.5px; opacity:.85; }
.energy-hero-btn {
  position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px;
  padding:7px 13px; font-size:11.5px; font-weight:700; cursor:pointer;
}
.energy-quick { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.e-q-item {
  background:#fff; border-radius:14px; padding:10px 6px; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.e-q-item .e-q-ic { font-size:18px; }
.e-q-item .e-q-t { font-size:11px; font-weight:700; color:#1D1D1F; margin-top:4px; }
.e-q-item .e-q-s { font-size:9px; color:#AEAEB2; margin-top:1px; }
.energy-plans { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.e-plan {
  display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #F0F0F2;
  border-radius:15px; padding:10px 12px; cursor:pointer;
}
.e-plan.hot { border-color:#FF9500; background:linear-gradient(90deg,#FFF7ED,#fff); }
.e-plan .e-plan-ic {
  width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:15px; background:#FFF1EA; flex-shrink:0;
}
.e-plan .e-plan-info { flex:1; }
.e-plan .e-plan-info b { font-size:12px; display:block; color:#1D1D1F; }
.e-plan .e-plan-info span { font-size:9.5px; color:#AEAEB2; }
.e-plan .e-plan-price b { font-size:14px; display:block; color:#1D1D1F; }
.e-plan .e-plan-price span { font-size:8.5px; color:#AEAEB2; }
.energy-tx { background:#fff; border-radius:16px; padding:6px 14px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.e-tx-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #F0F0F2; }
.e-tx-row:last-child { border-bottom:none; }
.e-tx-row .e-tx-ic { width:30px; height:30px; border-radius:9px; background:#FFF1EA; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.e-tx-row .e-tx-info { flex:1; }
.e-tx-row .e-tx-info b { font-size:11.5px; display:block; color:#1D1D1F; text-transform:capitalize; }
.e-tx-row .e-tx-info span { font-size:9px; color:#AEAEB2; }
.e-tx-row .e-tx-amt { font-size:13px; font-weight:800; }
.e-tx-row .e-tx-amt.in { color:#34C759; }
.e-tx-row .e-tx-amt.out { color:#667085; }
.empty-hint { text-align:center; font-size:11px; color:#AEAEB2; padding:18px 0; }
.city-pick-wrap { padding:10px 16px 0; display:flex; }
.city-pick-btn {
  background:#fff; border:1.5px solid #E5E5EA; border-radius:999px;
  padding:9px 14px; font-size:12.5px; font-weight:700; color:#1D1D1F; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.city-pick-btn:hover { border-color:#FF6B35; color:#FF6B35; }

.rank-tabs { display:flex; gap:6px; margin-bottom:8px; }
.rank-tab {
  font-size:10px; font-weight:700; padding:4px 12px; border-radius:999px;
  background:#F2F4F7; color:#667085; cursor:pointer; border:1px solid #E4E7EC;
}
.rank-tab.on { background:linear-gradient(135deg,#0A84FF,#5E5CE6); color:#fff; border-color:transparent; }

/* V3 场景页：竖排 scene-item（图标|中英名|描述|1⚡|›，推荐角标） */
.scene-item { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff; border:1px solid #e8eaf0; border-radius:14px; box-shadow:0 2px 8px rgba(90,90,150,.07); position:relative; cursor:pointer; }
.scene-item .em { width:34px; height:34px; border-radius:11px; background:#eef4ff; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.scene-item .info { flex:1; min-width:0; }
.scene-item .info .nm { font-size:12px; font-weight:700; }
.scene-item .info .nm small { color:var(--muted-color,#8896a8); font-weight:500; margin-left:4px; font-size:10px; }
.scene-item .info .ds { font-size:9.5px; color:#8896a8; margin-top:1.5px; }
.scene-item .info .scene-desc-en { font-size:9px; color:#b0b9c6; margin-top:1px; }
.scene-item .cost { font-size:8.5px; font-weight:700; color:#d97706; background:#fff7ed; border-radius:999px; padding:2px 7px; flex-shrink:0; }
.scene-item .go { color:#c3c9d4; font-size:15px; flex-shrink:0; }
.scene-item.rec { border-color:rgba(10,132,255,.4); background:linear-gradient(90deg,#f0f7ff,#fff); }
.scene-item .rec-mini { position:absolute; left:14px; top:-6px; background:linear-gradient(135deg,#0a84ff,#5e5ce6); color:#fff; font-size:7.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
/* V3 顶栏 💼 角色胶囊 + 📍 城市胶囊 */
.role-pill { display:flex; align-items:center; gap:3px; background:#fff; border:1px solid #e4e7ec; border-radius:999px; padding:4px 9px; font-size:10px; color:var(--muted-color,#667085); box-shadow:0 2px 8px rgba(90,90,150,.08); flex-shrink:0; cursor:pointer; }
.role-pill b { color:var(--accent-color,#0a84ff); font-weight:700; }
.city-pick-btn { display:flex; align-items:center; gap:4px; background:#fff; border:1px solid #e4e7ec; border-radius:999px; padding:5px 11px; font-size:10.5px; color:var(--muted-color,#667085); cursor:pointer; box-shadow:0 2px 6px rgba(90,90,150,.06); }
.city-pick-btn b { color:var(--accent-color,#0a84ff); font-weight:700; }
/* V3 弹窗卡（角色/城市切换复用） */
.wl-card { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1px solid #e8eaf0; border-radius:14px; cursor:pointer; }
.wl-card.on { border-color:var(--accent-color,#0a84ff); background:rgba(10,132,255,.05); }
.wl-card .lang-badge { width:30px; height:30px; border-radius:10px; background:#eef4ff; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.wl-card .lang-info { flex:1; }
.wl-card .lang-info .lang-name { font-size:12px; font-weight:700; }
.wl-card .lang-info .lang-name-en { font-size:9.5px; color:#8896a8; }
.wl-card .lang-go { color:#c3c9d4; font-size:15px; }

/* V3.1 场景切换弹窗（附件样式：标题 + ✕ + 场景列表 + 上次练习标记 + 会员解锁） */
#scene-sheet-mask .wl-sheet { max-width:340px; width:100%; }
#scene-sheet-mask .wl-sheet h4 { font-size:15px; font-weight:800; }
#scene-sheet-mask .wl-sheet .lang-list { margin-top:6px; }
#scene-sheet-mask .wl-sheet .wl-card .lang-name b { color:inherit; }
#scene-sheet-mask .rec-mini { background:linear-gradient(135deg,#0a84ff,#5e5ce6); color:#fff; font-size:8px; font-weight:700; padding:2px 8px; border-radius:999px; }
#scene-sheet-mask .scene-locked { font-size:10px; color:#b54708; background:#fffaeb; border:1px solid #fec84b; border-radius:999px; padding:3px 10px; margin:0 0 8px; align-self:flex-start; display:inline-flex; align-items:center; gap:4px; }

/* V3.2 练习页头部（无返回：左位置气泡｜中母语｜右切换场景） */
.dash-topbar { display:flex; align-items:center; gap:8px; padding:calc(10px + var(--safe-t)) 6px 4px; /* iPhone 刘海屏避让 */ }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
/* v2.9 顶部布局：母语/目标语/角色 左对齐靠左；日夜模式+能量环 推右侧靠右 */
.dash-topbar #btn-dash-mode { margin-left:auto; }
.bubble-pill { display:flex; align-items:center; gap:4px; background:#fff; border:1px solid #e4e7ec; border-radius:999px; padding:5px 12px; font-size:11px; color:#667085; box-shadow:0 2px 8px rgba(90,90,150,.08); cursor:pointer; }
.bubble-pill b { color:var(--accent-color,#0a84ff); font-weight:700; }
.bubble-pill.accent { background:linear-gradient(135deg,#0a84ff,#5e5ce6); border-color:transparent; color:#fff; }
.bubble-pill.accent b { color:#fff; }
.dash-mother-lang { flex:1; text-align:center; font-size:12.5px; font-weight:800; color:#333; letter-spacing:.2px; }
/* V3.2 目标语切换条（更明显，整条可点） */
.lang-switch-bar { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#fff7ed,#fffaef); border:1.5px solid #ffd8a8; border-radius:15px; padding:11px 13px; cursor:pointer; width:100%; color:#7a4d0f; box-shadow:0 3px 10px rgba(255,149,0,.10); }
.lang-switch-bar .ls-label { font-size:10.5px; font-weight:700; opacity:.85; }
.lang-switch-bar .ls-target { font-size:13px; font-weight:800; color:#d97706; }
.lang-switch-bar .ls-target b { font-size:13.5px; }
/* V3.2 设置弹层：主题色 + 字号 */
.theme-opt { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:9.5px; font-weight:700; border-radius:999px; padding:5px 10px; cursor:pointer; border:2px solid transparent; }
.theme-opt.on { border-color:#333; box-shadow:0 0 0 2px #fff inset; }
/* 我的页能量行微调 */
#btn-me-energy .me-row-ic { background:#fff7ed; }

/* V3.2 排行榜头像 */
.rank-av img { width:26px; height:26px; border-radius:50%; object-fit:cover; display:block; }

/* V4 欢迎回来横幅（附图） */
.chat-resume { display:flex; align-items:center; gap:9px; background:linear-gradient(135deg,#fff7ed,#fffaef); border:1px solid #ffd8a8; border-radius:14px; padding:10px 12px; margin:4px 10px 8px; }
.chat-resume .cr-ic { font-size:18px; }
.chat-resume .cr-info { flex:1; }
.chat-resume .cr-info b { display:block; font-size:12px; color:#7a4d0f; }
.chat-resume .cr-info span { font-size:9.5px; color:#a9762a; }
.chat-resume .cr-go { background:linear-gradient(135deg,#ff9500,#ff6b35); color:#fff; border:none; border-radius:999px; padding:6px 12px; font-size:10.5px; font-weight:800; cursor:pointer; }
/* V4 顶部：城市文本 + 母语/目标语 2 按钮 */
.dash-topbar { display:flex; align-items:center; gap:8px; padding:12px 6px 2px; }
.dash-topbar .dash-loc { font-size:10.5px; color:var(--muted-color,#8896a8); font-weight:600; flex-shrink:0; }
.dash-topbar .bubble-pill { display:flex; align-items:center; gap:3px; background:#fff; border:1px solid #e4e7ec; border-radius:999px; padding:4px 10px; font-size:10px; color:var(--muted-color,#667085); box-shadow:0 2px 8px rgba(90,90,150,.08); cursor:pointer; }
.dash-topbar .bubble-pill b { color:var(--accent-color,#0a84ff); font-weight:700; }
.dash-topbar .bubble-pill.accent { background:linear-gradient(135deg,#0a84ff,#5e5ce6); border-color:transparent; color:#fff; margin-left:auto; }
.dash-topbar .bubble-pill.accent b { color:#fff; }

/* ---------- V5 登录/注册页（view-account） ---------- */
.account-page { padding: 14px 18px 24px; display:flex; flex-direction:column; gap:14px; }
.acc-tabs { display:flex; background:#eef0f5; border-radius:999px; padding:3px; }
.acc-tab { flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--muted-color,#667085); padding:8px 0; border-radius:999px; cursor:pointer; }
.acc-tab.on { background:#fff; color:#0a84ff; box-shadow:0 2px 6px rgba(90,90,150,.15); font-weight:700; }
.acc-card { background:#fff; border:1px solid #e4e7ec; border-radius:18px; padding:18px 16px; box-shadow:0 8px 24px rgba(90,90,150,.08); }
.acc-hero { background:linear-gradient(135deg,#0a84ff,#5e5ce6); color:#fff; border-radius:14px; padding:14px 16px; margin-bottom:16px; }
.acc-hero-t { font-size:14px; font-weight:800; }
.acc-hero-s { font-size:11px; opacity:.85; margin-top:3px; }
.acc-form { display:flex; flex-direction:column; gap:12px; }
.acc-field { display:flex; flex-direction:column; gap:5px; }
.acc-field label { font-size:11px; font-weight:700; color:#667085; }
.acc-input { padding:11px 13px; border:1px solid #d0d5dd; border-radius:12px; font-size:16px; color:#1d2939; outline:none; background:#fff; }  /* iOS Safari 防放大 */
.acc-input:focus { border-color:#0a84ff; box-shadow:0 0 0 3px rgba(10,132,255,.15); }
.acc-btn { background:linear-gradient(135deg,#0a84ff,#5e5ce6); color:#fff; border:none; border-radius:14px; padding:13px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(94,92,230,.35); margin-top:4px; }
.acc-btn:active { transform:scale(.98); }
.acc-note { font-size:11.5px; color:#98a2b3; text-align:center; margin-top:14px; line-height:1.7; }
.acc-err { font-size:12px; color:#d92d20; background:#fef3f2; border:1px solid #fecdca; border-radius:10px; padding:9px 12px; }
.acc-ok { font-size:12.5px; color:#039855; background:#ecfdf3; border:1px solid #a6f4c5; border-radius:10px; padding:11px 14px; }

/* ---- 登录/注册页：条款勾选 + 合规信息区（2026-10-12 由首页 #site-footer 迁入） ----
   迁入背景见 index.html 末尾「结构铁律」注释：#site-footer 原先在 #app 之外，
   会让文档多出一层滚动。放到 .view 内后跟随本页滚动，全站只剩一个滚动源。 */
.acc-agree { display:flex; align-items:flex-start; gap:9px; margin-top:2px; cursor:pointer; }
.acc-agree input { width:17px; height:17px; flex:0 0 auto; margin:2px 0 0; accent-color:#0a84ff; cursor:pointer; }
.acc-agree-tx { font-size:11.5px; line-height:1.55; color:#475467; }
.acc-agree-hint { font-size:11px; line-height:1.5; border-radius:9px; padding:7px 10px; }
.acc-agree-hint.need { color:#b54708; background:#fef0c7; }
.acc-agree-hint.ok { color:#1b7f4b; background:#e7f6ec; }
/* 未勾选时注册键置灰：给「必须先同意条款」一个可见的affordance，而不是点了才报错 */
.acc-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.acc-legal { text-align:center; font-size:11px; line-height:1.85; color:#98a2b3; padding:2px 4px 8px; }
.acc-legal-head { font-weight:600; color:#667085; }
.acc-legal-links { margin-top:5px; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 12px; }
.acc-legal-links a, .acc-legal-icp a { color:#667085; text-decoration:none; }
.acc-legal-links a:active, .acc-legal-icp a:active { color:#0a84ff; }
.acc-legal-support { margin-top:6px; }
/* ---- 邮箱验证 / 找回密码（2026-10-12）----
   配色与 .acc-err/.acc-ok 同族：失败=红、成功=绿、待验证=琥珀（警示但不吓人）。 */
.acc-form-t { font-size:14.5px; font-weight:700; color:#1d2939; margin-bottom:4px; text-align:center; }
.acc-form-s { font-size:11.5px; line-height:1.6; color:#98a2b3; margin-bottom:10px; text-align:center; }
.acc-side-link { text-align:center; margin-top:10px; }
.acc-side-link a { font-size:12px; color:#5e5ce6; text-decoration:none; }
.acc-side-link a:active { color:#0a84ff; }
.acc-verify { border-radius:10px; padding:11px 13px; margin-top:10px; }
.acc-verify.warn { color:#b54708; background:#fef0c7; border:1px solid #fec84b; }
.acc-verify.ok { color:#039855; background:#ecfdf3; border:1px solid #a6f4c5; }
.acc-verify-t { font-size:12px; line-height:1.6; }
/* 次级按钮（重发激活邮件 / 去登录）：与主按钮同形不同权重，避免两个"主 CTA"打架 */
.acc-btn.ghost { background:transparent; color:#5e5ce6; border:1px solid #c7c6f2; box-shadow:none; font-weight:600; padding:9px; font-size:12.5px; margin-top:8px; }
.acc-btn.ghost:active { transform:scale(.98); background:rgba(94,92,230,.06); }
html[data-theme="dark"] .acc-form-t { color:#E4E8EF; }
html[data-theme="dark"] .acc-side-link a { color:#9B99F5; }
html[data-theme="dark"] .acc-verify.warn { background:#3A2E14; color:#F5C97B; border-color:#5A4620; }
html[data-theme="dark"] .acc-verify.ok { background:#14301F; color:#7BDCA4; border-color:#1F5236; }
html[data-theme="dark"] .acc-btn.ghost { color:#9B99F5; border-color:#3A3960; }
html[data-theme="dark"] .acc-legal-support { color:#7A8698; }
/* 主页底部法定合规行（主体 + ICP 备案号 + 工信部链接）。
   刻意放在 .view 内部：壳外会让 body 内容高于一屏 → 文档多出一层滚动。 */
.home-legal { text-align:center; font-size:11px; line-height:1.8; color:#98a2b3; padding:16px 0 6px; }
.home-legal .hl-cr { color:#98a2b3; }
.home-legal .hl-icp { color:#98a2b3; text-decoration:none; }
.home-legal .hl-icp:active { color:#0a84ff; }
/* 暗色 */
html[data-theme="dark"] .acc-agree-tx { color:#C3CCD8; }
html[data-theme="dark"] .acc-agree-hint.need { background:#3A2E14; color:#F5C97B; }
html[data-theme="dark"] .acc-agree-hint.ok { background:#14301F; color:#7BDCA4; }
html[data-theme="dark"] .acc-legal { color:#7A8698; }
html[data-theme="dark"] .acc-legal-head { color:#9AA4B2; }
html[data-theme="dark"] .acc-legal-links a,
html[data-theme="dark"] .acc-legal-icp a { color:#9AA4B2; }
html[data-theme="dark"] .home-legal,
html[data-theme="dark"] .home-legal .hl-cr,
html[data-theme="dark"] .home-legal .hl-icp { color:#5F6B7A; }
.me-card.me-account { border-left:3px solid #0a84ff; }

/* ===== V5 首页改版（A 经典纵流）===== */
/* 顶部状态栏：定位无胶囊 + 母语/目标语/角色 + Ø30px 能量环（永久保留 1/10） */
.dash-loc-txt { font-size:15px; font-weight:800; color:#0A84FF; white-space:nowrap; cursor:pointer; }
.dash-topbar.v5 { display:flex; align-items:center; gap:6px; padding:calc(10px + var(--safe-t, 0px)) 6px 6px; flex-wrap:nowrap; }
.dash-topbar.v5 .bubble-pill { font-size:13px; }
.dash-topbar.v5 .bubble-pill b { font-size:13px; }

/* Ø30px 能量环：上 2/3 能量弧（绿=满/黄=70%/红=50%/黑≤30%）+ 下弧 5 点隔开 + 中心 CN */
.energy-ring { position:relative; width:30px; height:30px; border-radius:50%; flex:none; cursor:pointer; margin-left:auto;
  background:conic-gradient(from 30deg, #E9E6F2 0deg 120deg, #F7C948 120deg 360deg);
  box-shadow:0 2px 8px rgba(120,90,220,.18); }
.energy-ring::before { content:""; position:absolute; inset:3px; border-radius:50%;
  background:linear-gradient(160deg,#FAF8FF,#ECE8FC); box-shadow:inset 0 1px 3px rgba(150,130,230,.2); }
.energy-ring .er-cn { position:absolute; top:9px; left:0; width:100%; text-align:center; z-index:2;
  font-size:8px; font-weight:800; color:#5B4BD6; letter-spacing:0; line-height:1; }
.energy-ring i { position:absolute; width:4.5px; height:4.5px; border-radius:50%; background:#FF9500; z-index:3;
  box-shadow:0 0 0 1.5px #fff; }
.energy-ring i.o { background:#C8CFDA; }
.energy-ring i.er-d1 { left:23px; top:20px; }
.energy-ring i.er-d2 { left:19px; top:24px; }
.energy-ring i.er-d3 { left:12.8px; top:25.5px; }
.energy-ring i.er-d4 { left:6.5px; top:24px; }
/* v2.7: 5 点改 4 点，er-d5 已删 */
/* 能量档位 → 弧色（JS 切换 er-lv 类） */
.energy-ring.lv-green { background:conic-gradient(from 30deg, #E9E6F2 0deg 120deg, #34C759 120deg 360deg); }
.energy-ring.lv-red   { background:conic-gradient(from 30deg, #E9E6F2 0deg 120deg, #FF3B30 120deg 360deg); }
.energy-ring.lv-black { background:conic-gradient(from 30deg, #E9E6F2 0deg 120deg, #3A3A3C 120deg 360deg); }

/* TOP 场景 chip */
.task-card .top-chip { font-size:11px; background:var(--accent-soft,#E8F0FE); color:var(--accent,#0A84FF); padding:1px 8px; border-radius:8px; font-weight:700; margin-left:6px; }
.task-label { font-size:16px !important; }

/* 板块间距 5px + 内边距 2% */
#view-welcome .dash-card { margin-bottom:5px; padding:2%; }

/* 平板/宽屏 ≥768px：底部导航 → 右侧悬浮 dock */
@media (min-width:768px) {
  .dash-topbar.v5 { padding:12px 18px 8px; }
  /* 平板 4:3：容器放宽（此前 max-width 480 锁死成手机窄条）+ 首页两栏 */
  #app { max-width: 980px; width: 96vw; }
  #view-welcome .welcome-wrap { max-width: none; width: 100%; }
  #view-welcome .welcome-dash { padding: 6px 0 0; }
  /* 4:3 / 屏宽 ≥768px：首页两栏（左 Slogan+TOP+最近/生词，右 榜+同城；hero 跨栏） */
  #view-welcome .welcome-wrap { display:grid; grid-template-columns:1.06fr .94fr; gap:6px 14px; align-items:start; padding:0 16px 8px; }
  #view-welcome .dash-hero { grid-column:1 / -1; padding:10px 18px 14px; margin-bottom:2px; background:linear-gradient(155deg,#FFF7F2,#FFE8DE); }
  #view-welcome #dash-task { grid-column:1; grid-row:2; }
  #view-welcome #dash-rank { grid-column:2; grid-row:2 / span 2; }
  #view-welcome #dash-recent { grid-column:1; grid-row:3; }
  #view-welcome #dash-vocab { grid-column:1; grid-row:4; }
  #view-welcome #dash-local { grid-column:2; grid-row:4; }
  #view-welcome .trial-hint { grid-column:1 / -1; }
  #view-welcome .tiny { grid-column:1 / -1; }
  /* 平板/桌面：底部导航仍是 fixed 底栏（并非右侧 dock），必须保留等高底部留白，
     否则卡片会被压在导航条下面（此前只留 8px，iPad 竖屏/横屏实测被遮挡）。 */
  .view { padding-bottom: 80px; }
  /* 底栏改为通栏（原 max-width:480px 居中是手机规格，宽屏上会与内容错位） */
  .tabbar { max-width: 100% !important; border-radius: 0 !important; }
  /* v0.19 16:9 横屏手机（宽≥640 且高≤560）：练习页内容收窄居中，不做平板两栏 */
@media (min-width: 640px) and (max-height: 560px) {
  #view-welcome .welcome-wrap { max-width: 520px; margin: 0 auto; display: flex;
    flex-direction: column; padding: 4px 14px 10px; }
  #view-welcome .dash-hero { grid-column: auto; }
  #view-welcome #dash-task, #view-welcome #dash-rank, #view-welcome #dash-recent,
  #view-welcome #dash-vocab, #view-welcome #dash-local { grid-column: auto; grid-row: auto; }
  .tabbar { display: flex; }
  #app { padding: 0; }
}
/* 平板两栏仍在 768+（平板/桌面保留），横屏手机小高度优先收窄 */

/* 平板字号放大约 15% */
  #view-welcome { font-size:15.5px; }
  #view-welcome .dash-slogan-main { font-size:19px; }
  #view-welcome .dash-pair { grid-column:1; grid-row:3 / span 2; display:flex; flex-direction:column; gap:6px; }
  #view-welcome .dash-pair .dash-card { margin:0; }
  #view-welcome .bubble-pill, #view-welcome .dash-loc-txt { font-size:14px; }
  .rank-row { padding:9px 0; }
}

/* ============================================================
   V12-02 大 Hero 沉浸 · 组件层
   渐变主卡 mcard + 副场景 subs（02 样式，替换旧任务环卡）
   最近活动双图卡 ev-row/ev-item（02 样式）
   最近在练+生词复习并排双条 dash-pair（保功能入口）
   日夜模式：html[data-theme=dark] 变量覆盖 + 状态栏模式 pill
   ============================================================ */

/* ---- 渐变主卡（02 mcard） ---- */
.mcard { display: flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, #FF8A50, #FF5F30);
  border-radius: 12px; padding: 12px 14px; color: #fff;
  position: relative; overflow: hidden; cursor: pointer; }
.mcard-ic { font-size: 20px; background: rgba(255,255,255,.22);
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.mcard-tt { flex: 1; min-width: 0; }
.mcard-tt b { font-size: 15px; display: block; }
.mcard-tt span { font-size: 11px; opacity: .92; display: block; margin-top: 1px; }
.mcard-go { flex: none; background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.5); border-radius: 8px;
  font-size: 11px; font-weight: 700; padding: 6px 11px; color: #fff; cursor: pointer; }

/* ---- 副场景卡（02 subs） ---- */
.mcard-subs { display: flex; gap: 6px; margin-top: 6px; }
.mcard-sub { flex: 1; min-width: 0; background: #F7F8FC;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px;
  display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mcard-sub.hot { background: #FFF2EC; border-color: #FFD4BC; }
.mcard-sub .se { font-size: 12px; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mcard-sub .sn { margin-left: auto; flex: none; font-size: 9px;
  color: #8A8F9C; font-weight: 700; }

/* ---- 最近活动双图卡（02 ev） ---- */
.ev-row { display: flex; gap: 8px; }
.ev-item { flex: 1; min-width: 0; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--surface); }
.ev-img { height: 58px; display: flex; align-items: center;
  justify-content: center; font-size: 24px;
  background: linear-gradient(135deg, #FFE3D3, #FFC29E); }
.ev-img.b2 { background: linear-gradient(135deg, #D9E8FF, #A9C6FF); }
.ev-bd { padding: 8px 10px; }
.ev-bd b { font-size: 12.5px; display: block; line-height: 1.4; }
.ev-bd span { display: block; font-size: 10px; color: var(--ink-3);
  font-weight: 600; margin-top: 2px; }
.ev-join { display: inline-block; margin-top: 5px; font-size: 9.5px;
  font-weight: 700; color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 2.5px 9px; cursor: pointer; }
.ev-join.ev-joined { color: #34C759; background: rgba(52,199,89,.12); }

/* ---- 最近在练 + 生词复习（并排双条） ---- */
.dash-pair { display: flex; gap: 8px; }
.dash-pair .dash-card { flex: 1; min-width: 0; margin: 0; }
.dash-pair .dash-label { font-size: 13px !important; }

/* ---- 日夜模式 pill + 暗色主题 ---- */
.bubble-pill-mode { padding: 6px 9px !important; }
html[data-theme="dark"] {
  --bg: #0E1216; --surface: #171B21; --ink: #F2F5FA;
  --ink-2: #9AA4B2; --ink-3: #5F6B7A; --line: #232B35;
  --accent-soft: #2A211C; --bubble-user: #FF7A45;
  --accent-rgb: 255, 122, 69; /* v2.18: 暗色模式下的脉冲动画色值 (#FF7A45) */
  --card: #171B21; --primary-soft: #2A211C;
  /* v2.7 暗色补全：AI 气泡此前仍白底（不纯粹主因）+ 阴影调暗 */
  --bubble-ai: #1B2129; --bubble-user-ink: #FFF;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
}

/* ---- v2.7 暗色系统补全（老板：昼夜模式不纯粹，批量覆盖硬编码浅色） ---- */
/* 头部 / 输入栏 / 底导航：rgba 浅毛玻璃 → 暗色 */
html[data-theme="dark"] .page-head,
html[data-theme="dark"] .chat-head,
html[data-theme="dark"] .chat-inputbar { background: rgba(14, 18, 22, 0.92); }
html[data-theme="dark"] .tabbar,
html[data-theme="dark"] .tabbar.bottom { background: rgba(23, 27, 33, 0.94); }
html[data-theme="dark"] .tabbar { background: #171B21; border-color: #232B35; }
html[data-theme="dark"] .tab-item { color: #9AA4B2; }
html[data-theme="dark"] .tab-item.on { color: #FFB28F; background: linear-gradient(180deg, rgba(255,107,53,.14), rgba(255,255,255,0)); }
/* 白卡族：dash-card / 同城 / 我的 / 账号 / 能量 / 场景列表 / 角色 / 生词 */
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .local-card,
html[data-theme="dark"] .circle-card,
html[data-theme="dark"] .me-card,
html[data-theme="dark"] .acc-card,
html[data-theme="dark"] .e-q-item,
html[data-theme="dark"] .e-plan,
html[data-theme="dark"] .energy-tx,
html[data-theme="dark"] .scene-item,
html[data-theme="dark"] .wl-card,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .vocab-chip,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .match-bar,
html[data-theme="dark"] .hold-talk,
html[data-theme="dark"] .city-pick-btn,
html[data-theme="dark"] .role-pill,
html[data-theme="dark"] .rank-tab,
html[data-theme="dark"] .recent-em { background: #171B21; border-color: #232B35 !important; color: var(--ink); }
html[data-theme="dark"] .dash-label,
html[data-theme="dark"] .task-label,
html[data-theme="dark"] .me-name,
html[data-theme="dark"] .me-role,
html[data-theme="dark"] .scene-item b,
html[data-theme="dark"] .e-q-t,
html[data-theme="dark"] .e-plan b,
html[data-theme="dark"] .recent-nm,
html[data-theme="dark"] .rank-n,
html[data-theme="dark"] .local-hero .lh-title { color: #F2F5FA; }
html[data-theme="dark"] .me-row-ct,
html[data-theme="dark"] .me-mem-text,
html[data-theme="dark"] .recent-st,
html[data-theme="dark"] .ev-ds,
html[data-theme="dark"] .e-q-s,
html[data-theme="dark"] .task-td { color: #9AA4B2; }
/* 气泡区：对话/管家气泡 */
html[data-theme="dark"] .bubble-ai { background: #1B2129; }
/* 弹层遮罩 */
html[data-theme="dark"] .modal-mask { background: rgba(0,0,0,.6); }
/* 能量环外圈 / 输入框 */
html[data-theme="dark"] .energy-ring i.o { background: #2A3646; }
html[data-theme="dark"] #chat-input,
html[data-theme="dark"] #butler-input,
html[data-theme="dark"] .acc-input { background: #13181F; border-color: #232B35; color: #F2F5FA; }
html[data-theme="dark"] #chat-input::placeholder,
html[data-theme="dark"] #butler-input::placeholder,
html[data-theme="dark"] .acc-input::placeholder { color: #5F6B7A; }
html[data-theme="dark"] body, html[data-theme="dark"] #app { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .dash-hero { background: linear-gradient(155deg, #1B222D, #26201C); }
html[data-theme="dark"] .dash-slogan-main { color: #F2F5FA; }
html[data-theme="dark"] .dash-slogan-en { color: #5F6B7A; }
html[data-theme="dark"] .dash-city,
html[data-theme="dark"] .bubble-pill { background: #1E2733; border-color: #2A3646; color: var(--ink); }
html[data-theme="dark"] .scene-pill { background: #2A211C; border-color: #5A3A26; color: #FFB28F !important; }
html[data-theme="dark"] .mcard-sub,
html[data-theme="dark"] .ev-item { background: #1C222B; border-color: #27303C !important; }
html[data-theme="dark"] .rank-row { border-bottom-color: #232B35; }
html[data-theme="dark"] .rank-info b { color: var(--ink); }
html[data-theme="dark"] .rank-no,
html[data-theme="dark"] .recent-em { background: #1E2733; }
html[data-theme="dark"] .ev-img { background: linear-gradient(135deg, #3A2A20, #4A3326); }
html[data-theme="dark"] .ev-img.b2 { background: linear-gradient(135deg, #1E2A3A, #24344A); }
html[data-theme="dark"] .task-card .top-chip { background: #2A211C; color: #FFB28F; }

/* 平板 4:3：02 组件放大（同步 V12 pad 尺寸） */
@media (min-width:768px) {
  .mcard { padding: 14px 16px; border-radius: 14px; }
  .mcard-ic { font-size: 24px; width: 44px; height: 44px; }
  .mcard-tt b { font-size: 17px; }
  .mcard-tt span { font-size: 12.5px; }
  .mcard-sub { padding: 9px 11px; }
  .mcard-sub .se { font-size: 13px; }
  .ev-img { height: 72px; font-size: 30px; }
  .ev-bd b { font-size: 14px; }
  .ev-bd span { font-size: 11px; }
}



/* v0.26 提速：榜单骨架屏（fetch 前占位，防空容器布局跳变） */
.rank-skel { display:flex; align-items:center; gap:9px; padding:8px 0; }
.rank-skel span { width:30px; height:30px; border-radius:50%; background:linear-gradient(90deg,#EDF0F6,#DDE2EC,#EDF0F6); background-size:200% 100%; animation:skel 1.2s linear infinite; }
.rank-skel b { flex:1; height:12px; border-radius:6px; background:linear-gradient(90deg,#EDF0F6,#DDE2EC,#EDF0F6); background-size:200% 100%; animation:skel 1.2s linear infinite; }
.rank-skel i { width:34px; height:10px; border-radius:5px; background:linear-gradient(90deg,#EDF0F6,#DDE2EC,#EDF0F6); background-size:200% 100%; animation:skel 1.2s linear infinite; }
@keyframes skel { 0%{background-position:0% 0} 100%{background-position:-200% 0} }

/* ===== V2.10 排行榜二级页（查看全部 + 时间筛选） ===== */
.rank-all-body { padding: 4px 6px 12px; }
.rank-all-tabs { display: flex; gap: 6px; padding: 8px 6px 6px; }
.rank-all-tabs .rank-tab { font-size: 13px; padding: 5px 14px; background: var(--card,#fff); border: 1px solid var(--line,#E8EAF1); border-radius: 18px; }
#rank-all-top .rank-row { padding: 9px 4px; }
#rank-all-top .rank-info b { font-size: 14px; }
#rank-all-top .rank-sub { font-size: 11px; }
#rank-all-top .rank-en { font-size: 12px; }
.rank-nat { font-size: 12px; }
.rank-pin { font-size: 11px; color: #F79009; }

/* 打字指示器动画 */
.typing-indicator { display:inline-flex; gap:4px; padding:12px 14px; background:var(--bg-muted,#F3F4F6); border-radius:12px; border-bottom-left-radius:4px; }
.typing-dot { width:6px; height:6px; border-radius:50%; background:var(--ink-3,#9CA3AF); animation:typingBounce 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }

/* 我的页统计行 */
.me-stat-row { display:flex; gap:1px; margin:0 0 12px; background:var(--border,#E5E7EB); border-radius:12px; overflow:hidden; }
.me-stat-item { flex:1; background:var(--bg-muted,#F6F7F9); padding:12px 6px; text-align:center; }
.me-stat-num { font-size:18px; font-weight:500; color:var(--ink,#16181D); font-variant-numeric:tabular-nums; }
.me-stat-label { font-size:10px; color:var(--ink-3,#9CA3AF); margin-top:2px; }

/* 快捷操作 chips */
.quick-chips { display:flex; gap:8px; padding:8px 16px; flex-wrap:wrap; }
.quick-chip { padding:6px 12px; border-radius:6px; border:1px solid var(--border,#E5E7EB); font-size:13px; color:var(--ink-2,#4B5563); background:var(--bg,#fff); cursor:pointer; white-space:nowrap; transition:all .2s; }
.quick-chip:hover { background:var(--bg-muted,#F6F7F9); border-color:var(--ink-3,#9CA3AF); }

/* ============================================================
   V6 双模式首页（在华办事 / 在美办事）
   设计稿：本地通LocalPal-双模式方案-v6 —— 字号/间距/圆角/配色即交付值
   ============================================================ */

/* ---- 顶栏：定位城市 + 语言与地区（合一入口） ---- */
.v6-topbar { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.v6-topbar-r { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.v6-pill { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:6px 11px;
  color:var(--ink); font-family:var(--font); cursor:pointer; max-width:46vw; }
.v6-pill:active { transform:scale(.97); }
.v6-pill b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:96px; }
/* 目标语 pill：橙色描边，与母语 pill（灰）视觉区分（老板要求母语/目标语分开选择） */
.v6-pill.target { background:var(--accent-soft); border-color:rgba(255,107,53,.42); color:#B0410F; }
.v6-pill.target svg { stroke:#B0410F; }
.v6-pill svg { width:12px; height:12px; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---- M1 区块 ---- */
.v6-m1 { display:flex; flex-direction:column; gap:13px; padding:18px 16px 14px; }
.v6-m1-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.v6-badge { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  border-radius:99px; padding:5px 12px; }
.v6-badge.cn { background:rgba(240,72,63,.12); color:#C13B33; border:1px solid rgba(240,72,63,.32); }
.v6-badge.us { background:rgba(76,154,255,.13); color:#0A63C9; border:1px solid rgba(76,154,255,.32); }
.v6-badge svg { width:13px; height:13px; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.v6-badge b { font-weight:700; }
.v6-eyebrow { font-size:11.5px; font-weight:600; color:var(--ink-2); }
.v6-eyebrow.cn { color:#C13B33; } .v6-eyebrow.us { color:#0A63C9; }

.v6-h1 { font-size:30px; line-height:1.18; font-weight:800; letter-spacing:-.035em; color:var(--ink); }
.v6-h1 em { font-style:normal; color:var(--accent); }
.v6-def { font-size:12.5px; line-height:1.7; color:var(--ink-2); margin-top:-4px; }
.v6-def b { color:var(--ink); font-weight:600; }

/* 三张场景方块（带角标） */
.v6-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.v6-tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 6px;
  text-align:center; cursor:pointer; }
.v6-tile:active { transform:scale(.98); }
.v6-tile svg { width:17px; height:17px; display:block; margin:0 auto 5px; stroke:var(--accent);
  fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.v6-tile b { display:block; font-size:12.5px; font-weight:700; color:var(--ink); }
.v6-tile span { display:block; font-size:11px; margin-top:2px; }
.v6-tile span.cn { color:#C13B33; } .v6-tile span.us { color:#0A63C9; }

/* 主 CTA 与副标 */
.v6-cta { width:100%; height:50px; border:0; border-radius:14px; background:var(--accent);
  color:#fff; font-size:15.5px; font-weight:700; font-family:var(--font);
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.v6-cta:active { transform:scale(.985); }
.v6-cta svg { width:18px; height:18px; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.v6-micro { font-size:12px; color:var(--ink-3); text-align:center; margin-top:-7px; }

/* 混合态提示条（条件渲染） */
.v6-mixbar { display:flex; align-items:flex-start; gap:9px; background:#FFFBEB;
  border:1px solid #F5D99B; border-radius:11px; padding:9px 11px; font-size:11.5px;
  color:#7A5A12; line-height:1.55; }
.v6-mixbar svg { width:15px; height:15px; flex:none; margin-top:1px; stroke:#B07E12;
  fill:none; stroke-width:2; stroke-linecap:round; }
.v6-mixbar b { color:#5C4207; }
.v6-mixbody { flex:1; min-width:0; }
.v6-mixacts { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.v6-chipbtn { font-size:11.5px; font-weight:600; border:1px solid var(--line); background:#fff;
  border-radius:99px; padding:6px 12px; color:var(--ink); cursor:pointer; font-family:var(--font); }
.v6-chipbtn.on { border-color:#C3D9F7; background:#F4F8FF; color:#1B4A85; }

/* ---- M2 信任条（四格） ---- */
.v6-tbar { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:13px; overflow:hidden; margin:0 16px; }
.v6-tbar div { background:#fff; padding:9px 10px; display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--ink); min-width:0; }
.v6-tbar div svg { width:15px; height:15px; flex:none; stroke:var(--accent); fill:none;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.v6-tbar b { font-weight:700; }

/* ---- M3 分享条 ---- */
.v6-crow { background:rgba(255,107,53,.06); border:1px solid rgba(255,107,53,.4);
  border-radius:14px; padding:10px 12px; display:flex; align-items:center; gap:10px;
  margin:0 16px; cursor:pointer; }
.v6-crow-ic { width:34px; height:34px; border-radius:11px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; flex:none; }
.v6-crow-ic svg { width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.v6-crow-tx { flex:1; min-width:0; }
.v6-crow-tx b { display:block; font-size:13.5px; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.v6-crow-tx span { display:block; font-size:11px; color:var(--ink-2); }
.v6-crow-ar { flex:none; stroke:var(--accent); fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }

/* ---- 语言与地区面板（语言 + 地区合一） ---- */
.v6-lr { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center; }
.v6-lr-mask { position:absolute; inset:0; background:rgba(0,0,0,.42); }
.v6-lr-sheet { position:relative; width:100%; max-width:480px; background:#fff;
  border-radius:20px 20px 0 0; padding:18px 16px calc(18px + var(--safe-b)); max-height:86vh;
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.v6-lr-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.v6-lr-h b { font-size:17px; font-weight:700; letter-spacing:-.02em; }
.v6-lr-h span { font-size:12px; color:var(--ink-3); }
.v6-lr-sub { font-size:12px; color:var(--ink-2); margin-bottom:14px; }
.v6-lr-sec { margin-bottom:14px; }
.v6-lr-lb { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:7px; }
.v6-lr-opts { display:flex; flex-wrap:wrap; gap:8px; }
.v6-opt { font-size:13px; font-weight:600; border:1px solid var(--line); background:#fff;
  border-radius:99px; padding:8px 14px; color:var(--ink); cursor:pointer; font-family:var(--font); }
.v6-opt.on { border-color:var(--accent); background:var(--accent-soft); color:#B0410F; }
.v6-lr-prev { background:var(--accent-soft); border-radius:12px; padding:11px 13px;
  font-size:12.5px; color:var(--ink-2); line-height:1.7; }
.v6-lr-prev b { color:#B0410F; }
.v6-lr-close { width:100%; height:48px; margin-top:12px; border:0; border-radius:14px;
  background:var(--ink); color:#fff; font-size:15px; font-weight:700; font-family:var(--font); cursor:pointer; }

/* ============================================================
   首页模板（v6 双模式 / classic 旧版）—— 由 <html class="tpl-*"> 驱动
   · 两套模板互斥显隐；下方功能卡（TOP 场景 / 榜单 / 最近活动 / 最近在练+生词）
     两套共用，切模板不丢任何功能入口。
   · classic 即本次改造前的原版布局（V5 状态栏 + V4 Hero），登记为后台可选项。
   ============================================================ */
html.tpl-v6 .tpl-classic,
html.tpl-classic .tpl-v6 { display: none !important; }

/* 徽章改成 button 后需要显式复位 */
button.v6-badge { font-family: var(--font); cursor: pointer; -webkit-appearance: none;
  appearance: none; line-height: 1.4; }
button.v6-badge:active { transform: scale(.97); }

/* ---- V6 首屏骨架（手机＝单列，结构不变；宽屏＝主栏＋辅栏） ---- */
.v6-hero { display: block; }
.v6-duo { display: flex; flex-direction: column; }
.v6-duo-main { display: flex; flex-direction: column; gap: 12px; }
.v6-duo-side { display: none; }        /* 窄屏不占位：内容由徽章弹层承载 */

/* ---- 辅栏：模式是怎么算出来的（设计稿第 10 节右栏） ---- */
.v6-side-h { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.v6-side-row { display: flex; align-items: flex-start; gap: 9px; padding: 10px 0 0; }
.v6-side-n { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft);
  color: #B0410F; font-size: 11px; font-weight: 700; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; }
.v6-side-tx { min-width: 0; }
.v6-side-k { font-size: 11px; color: var(--ink-3); }
.v6-side-v { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.v6-side-d { font-size: 11px; color: var(--ink-2); }
.v6-side-arw { text-align: center; color: var(--ink-3); font-size: 13px; padding: 6px 0 2px; }
.v6-side-out { border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 3px; }
.v6-side-out.cn { background: rgba(240,72,63,.09); border: 1px solid rgba(240,72,63,.28); }
.v6-side-out.us { background: rgba(76,154,255,.10); border: 1px solid rgba(76,154,255,.28); }
.v6-side-out b { font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.v6-side-out.cn b { color: #C13B33; } .v6-side-out.us b { color: #0A63C9; }
.v6-side-out svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v6-side-out span { font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.v6-side-f { font-size: 11px; color: var(--ink-3); line-height: 1.65; margin-top: 10px;
  padding-top: 9px; border-top: 1px dashed var(--line); }

/* ============================================================
   响应式：手机（默认）/ iPad 竖屏 ≥768 / iPad 横屏·桌面 ≥900 / 大屏 ≥1180
   设计依据：v6 设计稿第 09 节（手机一屏装完）、第 10 节（4:3 主栏+辅栏）
   ============================================================ */

/* ---- iPad 竖屏及以上：内容放宽、留白加大、信任条四格一行 ---- */
@media (min-width: 768px) {
  #view-welcome .welcome-wrap > .v6-hero { grid-column: 1 / -1; }
  .v6-topbar { padding: 12px 18px; }
  .v6-m1 { padding: 22px 22px 18px; gap: 15px; }
  .v6-h1 { font-size: 34px; }
  .v6-def { font-size: 13.5px; }
  .v6-tiles { gap: 10px; }
  .v6-tile { padding: 13px 10px; border-radius: 14px; }
  .v6-tile svg { width: 21px; height: 21px; margin-bottom: 7px; }
  .v6-tile b { font-size: 14px; }
  .v6-tile span { font-size: 12px; }
  .v6-cta { height: 54px; font-size: 17px; border-radius: 16px; }
  .v6-micro { font-size: 12.5px; }
  /* 四格信任条：768 起一行排开（比 2×2 更省高度，符合「一屏装完」） */
  .v6-tbar { grid-template-columns: repeat(4, 1fr); margin: 0 22px; }
  .v6-tbar div { font-size: 12px; padding: 11px 11px; }
  .v6-crow { margin: 0 22px; padding: 12px 14px; }
  .v6-badge { font-size: 12.5px; padding: 6px 13px; }
  .v6-eyebrow { font-size: 12.5px; }
  /* 弹层：平板起改为居中的浮层（贴底只适合手机） */
  .v6-lr { align-items: center; }
  .v6-lr-sheet { border-radius: 20px; max-width: 560px; max-height: 80vh;
    padding: 22px 22px calc(22px + var(--safe-b)); }
}

/* ---- iPad 横屏 / 4:3 / 桌面：主栏 M1+M2+M3 ＋ 辅栏「模式是怎么算出来的」 ---- */
@media (min-width: 900px) {
  .v6-duo { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px; align-items: start; padding: 0 22px; }
  .v6-duo-main { gap: 13px; }
  .v6-duo-side { display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--line); border-radius: 16px; padding: 15px 15px 13px;
    position: sticky; top: 12px; }
  /* 双栏后左右各自已留白，块内边距归零，避免双重缩进 */
  .v6-m1 { padding: 20px 2px 6px; }
  .v6-tbar, .v6-crow { margin: 0; }
  .v6-h1 { font-size: 36px; }
}

/* ---- 大屏：整体再放宽一档 ---- */
@media (min-width: 1180px) {
  #app { max-width: 1120px; width: 94vw; }
  .v6-duo { grid-template-columns: minmax(0, 1fr) 360px; }
  .v6-h1 { font-size: 40px; }
}

/* 横屏小高度手机（宽≥640 且高≤560）：强制回单列，不吃平板双栏 */
@media (min-width: 640px) and (max-height: 560px) {
  #view-welcome .welcome-wrap > .v6-hero { grid-column: auto; }
  .v6-duo { display: flex; flex-direction: column; padding: 0; }
  .v6-duo-side { display: none; }
  .v6-m1 { padding: 14px 14px 10px; }
  .v6-tbar { grid-template-columns: repeat(2, 1fr); margin: 0 16px; }
  .v6-crow { margin: 0 16px; }
}

/* ---- 暗色：v6 块内此前写死的白底统一交回主题变量 ---- */
html[data-theme="dark"] .v6-topbar { background: rgba(23,27,33,.94); }
html[data-theme="dark"] .v6-pill,
html[data-theme="dark"] .v6-tile,
html[data-theme="dark"] .v6-tbar div,
html[data-theme="dark"] .v6-chipbtn { background: var(--surface); }
html[data-theme="dark"] .v6-pill.target { background: var(--accent-soft); }
html[data-theme="dark"] .v6-lr-sheet { background: var(--surface); }
html[data-theme="dark"] .v6-mixbar { background: #2A2416; border-color: #4A3E1C; color: #E3C87A; }
html[data-theme="dark"] .v6-mixbar b { color: #F2DCA0; }
html[data-theme="dark"] .v6-mixbar svg { stroke: #C79A3A; }