/* ═══════════════════════════════════════════════════════════════════════
   components.css — 预览舞台 + 可复用 demo 组件（模块预览的"积木"）
   ───────────────────────────────────────────────────────────────────────
   所有交互式预览都由这里的原子拼出来，模块预览只负责组合与接线。
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── 预览舞台（每个模块一个） ─────────────────── */

.stage {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, var(--bg-2), #06080f);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.stage__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 20, 0.86);
}
.stage__dots { display: flex; gap: 5px; flex: none; }
.stage__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.stage__dots i:first-child { background: rgba(255, 179, 95, 0.5); }
.stage__dots i:nth-child(2) { background: rgba(145, 169, 255, 0.5); }
.stage__dots i:last-child { background: rgba(7, 193, 96, 0.5); }

.stage__title {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; color: var(--fg-dim);
}
.stage__hint {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; color: var(--fg-faint);
}
.stage__hint b { color: var(--accent); font-weight: var(--fw-med); }

.stage__body {
  padding: var(--sp-card);
  display: flex; flex-direction: column; gap: var(--sp-4);
  min-height: 260px;
}

/* 舞台内的工具行（按钮组 / 说明） */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
.toolbar__sp { flex: 1 1 auto; }

.stage__note {
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-sm); color: var(--fg-dim);
  display: flex; gap: var(--sp-2); align-items: flex-start;
}
.stage__note::before { content: "▸"; color: var(--accent); flex: none; }
.stage__note b { color: var(--fg); font-weight: var(--fw-med); }

/* 舞台内的分栏（左控件右结果这种）
   列宽经 --cols 传入，手机上强制折叠成单列。这里刻意用 CSS 变量而不是内联
   grid-template-columns：内联样式优先级高于媒体查询，会把折叠规则压掉，
   结果就是窄屏上右侧内容被挤出屏幕。 */
.stage__cols {
  display: grid;
  grid-template-columns: var(--cols, minmax(0, 1fr) minmax(0, 1fr));
  gap: var(--sp-4);
  min-width: 0;
}
.stage__cols > * { min-width: 0; }
@media (max-width: 900px) {
  .stage__cols { grid-template-columns: minmax(0, 1fr); }
}

/* 手机模型：聊天气泡类预览的容器 */
.device {
  width: 100%; max-width: 340px; margin-inline: auto;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: #0a0d16; padding: 10px;
}
.device__screen {
  border-radius: 14px; background: #0c1019; overflow: hidden;
  max-height: 320px; overflow-y: auto;
}

/* ─────────────────── 分析结果卡片（还原真实界面） ───────────────────
   真实卡片是浅色纸质卡片：近白底 + 蓝紫强调 + 深色引用块。
   这一组类只用于「看结果长什么样」的真实还原，与站内暗色主题刻意区分。
   ─────────────────────────────────────────────────────────────────── */

.rcard {
  background: var(--card-bg); color: var(--card-ink);
  border-radius: 18px; padding: 16px 16px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 13.5px; line-height: 1.6;
}
.rcard * { box-sizing: border-box; }

/* 顶栏：图标 + 标题 + 生气等级 + 关闭 */
.rcard__top { display: flex; align-items: center; gap: 9px; }
.rcard__logo {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--card-accent), var(--card-deep));
  color: #fff; font-size: 13px; font-weight: var(--fw-black);
}
.rcard__title { font-size: 13.5px; font-weight: var(--fw-semi); color: var(--card-ink); }
.rcard__x {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--card-faint); font-size: 15px; line-height: 1;
}
.rcard__x:hover { background: rgba(0, 0, 0, 0.06); color: var(--card-ink); }

/* 生气等级：分数 + 横向刻度 */
.rcard__anger { display: flex; align-items: center; gap: 8px; }
.rcard__anger_k { font-size: 11.5px; color: var(--card-faint); }
.rcard__anger_bar {
  flex: 1; height: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.09);
  overflow: hidden;
}
.rcard__anger_fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--card-accent), var(--card-deep));
  transition: width var(--dur-slow) var(--ease-out);
}
.rcard__anger_v {
  font-size: 14px; font-weight: var(--fw-bold); color: var(--card-accent);
  font-variant-numeric: tabular-nums;
}

/* 原文引用块：深底反白，和卡片形成明确分层 */
.rcard__quote {
  background: var(--card-quote); color: #e9ebf5;
  border-radius: 12px; padding: 11px 13px;
  font-size: 13px; line-height: 1.6;
}
.rcard__quote b { color: #fff; font-weight: var(--fw-semi); }

/* 字面问题 */
.rcard__q { font-size: 14px; line-height: 1.65; color: var(--card-ink); }
.rcard__q b { color: var(--card-accent); font-weight: var(--fw-semi); }

/* 分区标题：左侧一根强调色短竖线 */
.rcard__k {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: var(--fw-semi);
  color: var(--card-faint); letter-spacing: 0.02em;
}
.rcard__k::before {
  content: ""; width: 3px; height: 11px; border-radius: 2px;
  background: var(--card-accent);
}

/* 是 / 不是 双选项 */
.rcard__opt {
  border: 1px solid var(--card-line); border-radius: 12px;
  padding: 11px 12px; display: flex; flex-direction: column; gap: 6px;
  background: #fff;
}
.rcard__opt_h { display: flex; align-items: baseline; gap: 8px; }
.rcard__opt_n { font-size: 13.5px; font-weight: var(--fw-semi); color: var(--card-ink); }
.rcard__opt_p {
  margin-left: auto; font-size: 15px; font-weight: var(--fw-bold);
  color: var(--card-accent); font-variant-numeric: tabular-nums;
}
.rcard__opt_p--no { color: var(--card-faint); }
.rcard__why { font-size: 12px; line-height: 1.55; color: var(--card-faint); }
.rcard__why b { color: var(--card-dim); font-weight: var(--fw-med); }

/* 真实意图列表 */
.rcard__intent { display: flex; flex-direction: column; gap: 12px; }
.rcard__item {
  border: 1px solid var(--card-line); border-radius: 12px;
  padding: 11px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 7px;
}
.rcard__item_h { display: flex; align-items: baseline; gap: 8px; }
.rcard__item_n { font-size: 13.5px; font-weight: var(--fw-semi); color: var(--card-ink); }
.rcard__item_p {
  margin-left: auto; font-size: 14px; font-weight: var(--fw-bold);
  color: var(--card-deep); font-variant-numeric: tabular-nums;
}

/* 回复建议：贴纸风格，末尾有个小尾巴 */
.rcard__reply {
  position: relative;
  background: rgba(82, 114, 231, 0.09);
  border-radius: 10px; padding: 9px 11px;
  font-size: 13px; line-height: 1.6; color: var(--card-ink);
}
.rcard__reply_k {
  display: block; font-size: 11px; font-weight: var(--fw-semi);
  color: var(--card-accent); margin-bottom: 3px;
}

/* 一句话总结 */
.rcard__sum {
  border-left: 3px solid var(--card-deep); padding-left: 11px;
  font-size: 13.5px; line-height: 1.7; color: var(--card-ink);
}

/* 底部操作 */
.rcard__acts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--card-line);
}
.rcard__b {
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--card-line); background: #fff;
  font-size: 12.5px; color: var(--card-dim);
  transition: border-color var(--dur-base), color var(--dur-base);
}
.rcard__b:hover { border-color: var(--card-accent); color: var(--card-accent); }
.rcard__b--main {
  background: var(--card-accent); border-color: var(--card-accent);
  color: #fff; font-weight: var(--fw-semi);
}
.rcard__b--main:hover { background: #3f5fd6; border-color: #3f5fd6; color: #fff; }

/* ─────────────────── 首屏手机模型 ─────────────────── */

.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.phone {
  width: 100%; max-width: 320px;
  border-radius: 34px; padding: 9px;
  background: linear-gradient(165deg, #2a2f3d, #12161f 40%, #0a0d14);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset,
    0 1px 0 rgba(255, 255, 255, 0.14) inset;
  position: relative;
}
/* 顶部听筒 */
.phone::before {
  content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
}

.phone__screen {
  border-radius: 26px; overflow: hidden;
  background: #14161c;              /* 微信深色聊天底 */
  display: flex; flex-direction: column;
  max-height: 560px;                /* 首屏只露出最上面一段，更像真机取景 */
  overflow-y: auto;
  scrollbar-width: none;
}
.phone__screen::-webkit-scrollbar { display: none; }

/* 微信顶栏 */
.phone__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 9px;
  background: #1c1f26;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #e6e8ee;
}
.phone__back, .phone__more { display: inline-flex; color: #9aa1b2; flex: none; }
.phone__who {
  font-size: 13.5px; font-weight: var(--fw-semi);
  margin-inline: auto; transform: translateX(2px);
}

/* 聊天区 */
.phone__chat {
  padding: 11px 10px 6px;
  display: flex; flex-direction: column; gap: 9px;
  background: #14161c;
}
.pmsg { display: flex; gap: 7px; align-items: flex-start; }
.pmsg--me { flex-direction: row-reverse; }
.pmsg__av {
  width: 26px; height: 26px; border-radius: 5px; flex: none;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: var(--fw-bold);
  background: #2b2f3a; color: #9aa1b2;
}
.pmsg__av--me { background: rgba(7, 193, 96, 0.18); color: #4fd18b; }
.pmsg__b {
  max-width: 74%;
  padding: 8px 11px; border-radius: 6px;
  background: #262a33; color: #e6e8ee;
  font-size: 13px; line-height: 1.55;
  word-break: break-word;
}
.pmsg__b--me { background: #2f4a35; color: #dff3e6; }

.phone__cap {
  color: var(--fg-dim); font-size: var(--fs-sm); line-height: 1.7;
  text-align: center; max-width: 300px;
}

/* ─────────────────── 使用人数统计 ─────────────────── */

/* 两个大数字卡 */
.stat2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.stat2__c {
  padding: var(--sp-card);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
/* 左侧一根细亮线，绿/红各对应曲线颜色 */
.stat2__c::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
}
.stat2__c:nth-child(1)::before { background: linear-gradient(180deg, var(--live-green), transparent); }
.stat2__c:nth-child(2)::before { background: linear-gradient(180deg, var(--live-red), transparent); }

.stat2__k {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); color: var(--fg-dim);
}
.stat2__v {
  font-size: clamp(2.1rem, 5.4vw, 3rem); font-weight: var(--fw-black);
  line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat2__v--g { color: var(--live-green); }
.stat2__v--r { color: var(--live-red); }
.stat2__s { font-size: var(--fs-xs); color: var(--fg-faint); }

/* 小圆点（替代图表图例里的点 —— 曲线图已移除，但颜色对应关系保留） */
.stat2__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.stat2__dot--g { background: var(--live-green); }
.stat2__dot--r { background: var(--live-red); }

/* ── 首屏里的紧凑横排版 ──
   位置：在「长按就能用 · 不用学 · 不会替你发出去 · 密钥只存在你自己手机里」
   这行字的**上面**。
   数字刻意做大（约为正文的 2 倍）：它是首屏里唯一的「社会证明」，
   要大到场一眼扫过去就看见「已经有这么多人在用」，才有说服力。 */
.statline { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
.stat2--inline {
  display: flex; flex-wrap: wrap; gap: 8px var(--sp-5);
  margin-bottom: 0;
}
/* 紧凑版去掉卡片外壳：只留颜色 + 数字，避免首屏出现两个大色块 */
.stat2--inline .stat2__c {
  padding: 0; border: 0; background: none;
  flex-direction: row; align-items: baseline; gap: 9px;
}
.stat2--inline .stat2__c::before { display: none; }
.stat2--inline .stat2__k {
  font-size: var(--fs-sm); color: var(--fg-dim);
  order: -1;                 /* 标签在前、数字在后，读作「当前使用人数 7」 */
}
/* 约等于正文的两倍大小 —— 首屏里要一眼看见 */
.stat2--inline .stat2__v {
  font-size: clamp(2rem, 6.4vw, 2.6rem);
  line-height: 1.15;
}
/* 手机上竖排两行，比挤在一行更好读 */
@media (max-width: 480px) {
  .stat2--inline { flex-direction: column; gap: 4px; }
}

/* 图例圆点 */
.chart__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  display: inline-block;
}
.chart__dot--g { background: var(--live-green); box-shadow: 0 0 7px rgba(61, 220, 132, 0.6); }
.chart__dot--r { background: var(--live-red); box-shadow: 0 0 7px rgba(255, 92, 92, 0.6); }

/* 图表卡片 */
.chartcard {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--sp-card);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.chartcard__head {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; justify-content: space-between;
}
.chartcard__l { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.chartcard__t { font-size: var(--fs-base); font-weight: var(--fw-semi); }

/* 「实时」小标 */
.chartcard__live {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--green-soft); border: 1px solid rgba(7, 193, 96, 0.32);
  color: var(--ok); font-size: var(--fs-micro); letter-spacing: 0.04em;
}
.chartcard__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live-green);
  animation: pulse 2s var(--ease-out) infinite;
}
.chartcard__live.is-off {
  background: rgba(120, 130, 160, 0.14); border-color: var(--line-strong); color: var(--fg-faint);
}
.chartcard__live.is-off::before { background: var(--fg-faint); animation: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .chartcard__live::before { animation: none; }
}

/* 分段按钮收紧一点，5 个按钮才放得下 */
.seg--tight { padding: 3px; }
.seg--tight .seg__b { padding: 5px 11px; font-size: var(--fs-xs); }

/* ── 图表本体 ── */
.chart {
  position: relative; width: 100%;
  height: clamp(220px, 34vw, 320px);
}
.chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart.is-loading { opacity: 0.5; }
.chart__hit { touch-action: none; }   /* 触屏拖动时不要触发页面滚动 */

/* 悬浮读数气泡 */
.chart__tip {
  position: absolute; top: 8px;
  padding: 7px 10px; border-radius: var(--r-md);
  background: rgba(10, 14, 24, 0.96);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: none; flex-direction: column; gap: 3px;
  pointer-events: none; white-space: nowrap;
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.chart__tip.is-on { display: flex; }
.chart__tip-t {
  font-family: var(--font-mono); color: var(--fg-faint);
  font-size: var(--fs-micro); letter-spacing: 0.04em; margin-bottom: 2px;
}
.chart__tip-r { display: flex; align-items: center; gap: 6px; color: var(--fg); }

/* 图例 */
.chartcard__legend {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.lg { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--fg-dim); }
.lg__l { width: 16px; height: 2px; border-radius: 2px; flex: none; }
.lg__l--g { background: var(--live-green); }
.lg__l--r { background: var(--live-red); }
.lg__l--dash {
  background: repeating-linear-gradient(90deg, var(--live-red) 0 4px, transparent 4px 7px);
}
.chartcard__hint {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); color: var(--fg-faint);
}

/* 后端不可用提示 */
.chartcard__off {
  margin-top: var(--sp-3);
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 11px var(--sp-4);
  border: 1px solid rgba(255, 179, 95, 0.3); border-radius: var(--r-md);
  background: rgba(255, 179, 95, 0.08);
  color: var(--fg-dim); font-size: var(--fs-sm); line-height: 1.65;
}
.chartcard__off .note__i {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  background: rgba(255, 179, 95, 0.2); color: var(--warn);
}

/* ─────────────────── 简略教程弹窗 ─────────────────── */

.tut {
  border: none; padding: 0; background: transparent;
  max-width: min(520px, calc(100vw - 32px));
  color: var(--fg);
}
.tut::backdrop { background: rgba(3, 5, 12, 0.72); }

.tut__card {
  position: relative;              /* 顶部亮线用 absolute 定位 */
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  padding: var(--sp-6);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  display: flex; flex-direction: column; gap: var(--sp-5);
  overflow: hidden;                /* 亮线不越出圆角 */
  max-height: calc(100vh - 40px);
  overflow-y: auto;                /* 内容超高时弹窗内部滚动，页面不锁死 */
}
/* 顶部一根强调色亮线，和站内其它卡片保持同一套语言 */
.tut__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
}

.tut__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.tut__ico {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--line-accent);
}
.tut__t { font-size: var(--fs-lg); font-weight: var(--fw-semi); margin-top: 2px; }
.tut__x {
  margin-left: auto; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--fg-faint); border: 1px solid transparent;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.tut__x:hover { color: var(--fg); border-color: var(--line-strong); background: var(--surface-3); }

.tut__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tut__i {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.tut__n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--line-accent);
  color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.tut__txt {
  font-size: var(--fs-base); line-height: 1.7; color: var(--fg);
  overflow-wrap: anywhere;
}

/* ─────────────────── 微信风格聊天 ─────────────────── */

.chat { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.chat__time {
  align-self: center; font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--fg-faint); letter-spacing: 0.08em;
}

.msg { display: flex; gap: 8px; max-width: 100%; }
.msg--me { flex-direction: row-reverse; }

.msg__av {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: var(--fw-bold);
  background: var(--surface-2); color: var(--fg-dim);
  border: 1px solid var(--line);
}
.msg--me .msg__av { background: rgba(7, 193, 96, 0.16); color: var(--ok); border-color: rgba(7, 193, 96, 0.3); }

.msg__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg--me .msg__col { align-items: flex-end; }

.bubble {
  position: relative;
  padding: 8px 11px;
  border-radius: 4px;
  font-size: 13.5px; line-height: 1.5;
  background: #1b221e; color: var(--fg);
  border: 1px solid var(--line);
  word-break: break-word;
}
.msg--me .bubble { background: #235a3e; border-color: rgba(7, 193, 96, 0.28); }
/* 气泡小尖角 */
.bubble::before {
  content: ""; position: absolute; left: -5px; top: 11px;
  border: 5px solid transparent; border-right-color: #1b221e; border-left: 0;
}
.msg--me .bubble::before {
  left: auto; right: -5px;
  border-right: 0; border-left: 5px solid #235a3e;
}

/* 被选中的消息（范围选择高亮） */
.msg.is-sel .bubble {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(145, 169, 255, 0.22);
}
.msg.is-dim { opacity: 0.34; }

/* 消息上的悬浮操作条 */
.msg__acts { display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur-base); }
.msg:hover .msg__acts, .msg.is-sel .msg__acts { opacity: 1; }

/* ─────────────────── 分析菜单（长按注入） ─────────────────── */

.menu {
  width: 172px; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: #101520; box-shadow: var(--shadow-float);
}
.menu__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--fg-dim);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.menu__i:hover { background: var(--surface-2); color: var(--fg); }
.menu__i svg { flex: none; opacity: 0.75; }
/* 本模块注入的两项，用强调色标出 */
.menu__i--ours { color: var(--accent); }
.menu__i--ours svg { opacity: 1; }
.menu__i--ours:hover { background: var(--accent-soft); }
.menu__sep { height: 1px; background: var(--line); margin: 4px 8px; }

/* ─────────────────── 悬浮球 ─────────────────── */

.balloon-host {
  position: relative;
  min-height: 230px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 10px, transparent 10px 20px),
    #0a0d16;
  overflow: hidden;
  touch-action: none;
}

.balloon {
  position: absolute; left: 0; top: 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #b9c8ff, var(--accent-strong) 62%);
  color: var(--fg-inverse);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 26px rgba(145, 169, 255, 0.42);
  cursor: grab;
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  will-change: transform;
}
.balloon:active { cursor: grabbing; }
.balloon.is-drag { transform: scale(1.06); box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 40px rgba(145,169,255,0.6); }
.balloon svg { width: 22px; height: 22px; }
.balloon.is-off { opacity: 0.22; filter: grayscale(1); }

/* 长按进度环：用 conic-gradient 由 JS 写 --p */
.balloon__ring {
  position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), transparent 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0; transition: opacity var(--dur-fast);
}
.balloon.is-hold .balloon__ring { opacity: 1; }

/* 悬浮面板 */
.fpanel {
  width: 100%; max-width: 236px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: #0e1322; box-shadow: var(--shadow-float);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.fpanel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fpanel__b {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--fg-dim); font-size: 11px; text-align: center;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.fpanel__b svg { width: 17px; height: 17px; }
.fpanel__b:hover { border-color: var(--line-accent); color: var(--accent); background: var(--surface-3); }
.fpanel__b.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.fpanel__b.is-flash { animation: flash var(--dur-slow) var(--ease-out); }
@keyframes flash {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.94); box-shadow: 0 0 0 4px var(--accent-soft); }
  100% { transform: scale(1); }
}
.fpanel__t { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--fg-faint); }

/* ─────────────────── 分析卡片 ─────────────────── */

.acard {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-width: 0;                 /* 允许在栅格里被压缩，否则会顶破容器 */
  overflow-wrap: anywhere;      /* 长模型输出不会撑破卡片 */
  /* 强调色由 JS 以 --acard-accent 注入 */
  --acard-accent: var(--accent);
}
.acard__head { flex-wrap: wrap; }   /* 手机上标题与徽章换行而不是溢出 */
.acard__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.acard__logo {
  width: 22px; height: 22px; border-radius: var(--r-xs); flex: none;
  display: grid; place-items: center;
  background: var(--acard-accent); color: var(--fg-inverse);
  font-size: 11px; font-weight: var(--fw-black);
}
.acard__t { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.acard__x { margin-left: auto; color: var(--fg-faint); font-size: 16px; line-height: 1; }
.acard__x:hover { color: var(--danger); }

.acard__q {
  padding: var(--sp-3); border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--fg-dim);
}
.acard__q b { color: var(--fg); font-weight: var(--fw-med); }

.acard__sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.acard__k {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.14em; color: var(--fg-faint); text-transform: uppercase;
}

/* 概率条 */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar__top {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-sm); margin-bottom: 4px;
}
.bar__label { color: var(--fg); }
.bar__pct {
  margin-left: auto; font-family: var(--font-mono); font-weight: var(--fw-bold);
  color: var(--acard-accent); font-variant-numeric: tabular-nums;
}
.bar__track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar__fill {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--acard-accent), color-mix(in srgb, var(--acard-accent) 55%, #fff));
  transition: width var(--dur-reveal) var(--ease-out);
}
.bar--neg .bar__fill { background: linear-gradient(90deg, #7c4a55, var(--danger)); }
.bar--neg .bar__pct { color: var(--danger); }
.bar__why { margin-top: 4px; font-size: var(--fs-xs); color: var(--fg-faint); }

/* 生气等级 */
.anger { display: flex; align-items: center; gap: var(--sp-3); }
.anger__track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; }
.anger__fill {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--ok), var(--warn) 55%, var(--danger));
  transition: width var(--dur-reveal) var(--ease-out);
}
.anger__v {
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); color: var(--acard-accent); font-variant-numeric: tabular-nums;
  min-width: 1.6em; text-align: right;
}

/* 可发送回复 */
.reply {
  padding: var(--sp-3); border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.6;
}
.reply__why { margin-top: 5px; font-size: var(--fs-xs); color: var(--fg-faint); }

/* ─────────────────── 表单控件 ─────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__k {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.12em; color: var(--fg-faint); text-transform: uppercase;
}
.field__h { font-size: var(--fs-xs); color: var(--fg-faint); }

.input, .textarea, .select {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--input-bg); color: var(--fg);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input:focus, .textarea:focus, .select:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 76px; line-height: 1.6; font-family: inherit; }
.select { appearance: none; cursor: pointer; padding-right: 30px; background-image: none; }

/* 带眼睛的密钥输入 */
.secret { position: relative; }
.secret .input { padding-right: 56px; font-family: var(--font-mono); letter-spacing: 0.06em; }
.secret__eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-height: 34px; padding: 6px 10px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-faint);
}
.secret__eye:hover { color: var(--accent); background: var(--accent-soft); }

/* 开关 */
.switch {
  display: flex; align-items: center; gap: var(--sp-3);
  justify-content: space-between; cursor: pointer;
}
.switch__t { font-size: var(--fs-sm); }
.switch__d { font-size: var(--fs-xs); color: var(--fg-faint); }
.switch__track {
  width: 42px; height: 24px; border-radius: var(--r-pill); flex: none;
  background: #353e57; position: relative;
  transition: background var(--dur-base);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #d7dceb;
  transition: transform var(--dur-base) var(--ease-out);
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch input:checked + .switch__track { background: var(--accent-strong); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--accent-soft); }

/* 滑块 */
.slider { display: flex; flex-direction: column; gap: 6px; }
.slider__top { display: flex; align-items: baseline; gap: var(--sp-3); }
.slider__k { font-size: var(--fs-sm); }
.slider__v {
  margin-left: auto; font-family: var(--font-mono); font-weight: var(--fw-bold);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.09); cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-2);
  box-shadow: var(--glow-dot);
}
.slider input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--bg-2);
  background: var(--accent);
}

/* 分段控件 */
.seg {
  display: inline-flex; padding: 3px; gap: 3px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--input-bg);
}
.seg__b {
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--fg-dim);
  transition: background var(--dur-base), color var(--dur-base);
  white-space: nowrap;
}
.seg__b:hover { color: var(--fg); }
.seg__b.is-on { background: var(--accent-strong); color: var(--fg-inverse); font-weight: var(--fw-semi); }

/* 色板 */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 2px solid transparent; position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-on { border-color: var(--fg); }
.swatch.is-on::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* ─────────────────── 模板列表 ─────────────────── */

.tpl-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tpl {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); text-align: left; width: 100%;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.tpl:hover { border-color: var(--line-accent); background: var(--surface-2); }
.tpl.is-on { border-color: var(--accent); background: var(--accent-soft); }
.tpl__n { font-weight: var(--fw-med); font-size: var(--fs-sm); }
.tpl__d { font-size: var(--fs-xs); color: var(--fg-faint); margin-top: 2px; }
.tpl__col { min-width: 0; flex: 1; }
.tpl__acts { display: flex; gap: 4px; flex: none; }

/* ─────────────────── 日志控制台 ─────────────────── */

.console {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.85;
  background: #05070d; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  max-height: 240px; overflow-y: auto;
  color: var(--fg-dim);
}
.console__l { display: flex; gap: var(--sp-3); white-space: pre-wrap; word-break: break-all; }
.console__ts { color: var(--fg-faint); flex: none; }
.console__lv { flex: none; width: 46px; }
.console__lv--I { color: var(--accent); }
.console__lv--W { color: var(--warn); }
.console__lv--E { color: var(--danger); }
.console__lv--D { color: var(--fg-faint); }
.console__l--new { animation: line-in var(--dur-slow) var(--ease-out); }
@keyframes line-in {
  from { opacity: 0; transform: translateX(-6px); background: var(--accent-soft); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────── 结果 / 状态块 ─────────────────── */

.note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-sm); color: var(--fg-dim);
}
.note__i { flex: none; font-family: var(--font-mono); font-weight: var(--fw-bold); }
.note--ok   { border-color: rgba(7, 193, 96, 0.35); background: var(--green-soft); color: var(--fg); }
.note--ok .note__i { color: var(--ok); }
.note--warn { border-color: rgba(255, 179, 95, 0.35); background: rgba(255, 179, 95, 0.1); color: var(--fg); }
.note--warn .note__i { color: var(--warn); }
.note--err  { border-color: rgba(255, 180, 193, 0.35); background: var(--danger-bg); color: var(--fg); }
.note--err .note__i { color: var(--danger); }

/* 键值小表 */
.mini-kv { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); }
.mini-kv__r { display: flex; gap: var(--sp-3); }
.mini-kv__k { color: var(--fg-faint); min-width: 96px; flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); }
.mini-kv__v { color: var(--fg); word-break: break-all; }

/* 代码/提示词块 */
.code {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.8;
  background: #05070d; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); color: var(--fg-dim);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}
.code b { color: var(--accent); font-weight: var(--fw-med); }
.code i { color: var(--fg-faint); font-style: normal; }
.code u { color: var(--ok); text-decoration: none; }

/* 进度 / 扫描线 */
.scanbar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.scanbar i {
  display: block; height: 100%; width: 0%; background: var(--accent);
  box-shadow: var(--glow-dot); transition: width var(--dur-base) linear;
}

/* 概率条之外的“两版方案”对比 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 620px) { .duo { grid-template-columns: 1fr; } }
.ver {
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); text-align: left;
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.ver:hover { border-color: var(--line-accent); transform: translateY(-2px); }
.ver.is-on { border-color: var(--accent); background: var(--accent-soft); }
.ver__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--accent); }
.ver__t { font-size: var(--fs-sm); line-height: 1.65; }
.ver__w { font-size: var(--fs-xs); color: var(--fg-faint); margin-top: auto; }

/* 打字机光标 */
.typing::after {
  content: "▋"; color: var(--accent);
  animation: blink 1s steps(2) infinite; margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* 空状态 */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-4); text-align: center;
  color: var(--fg-faint); font-size: var(--fs-sm);
}
.empty__i { font-size: 26px; opacity: 0.5; }

/* 文件清单（数据库 / 打包） */
.filelist { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.filelist__r {
  display: flex; gap: var(--sp-3); align-items: center;
  padding: 6px var(--sp-3); border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.24); color: var(--fg-faint);
  transition: color var(--dur-base), background var(--dur-base);
}
.filelist__r.is-on { color: var(--accent); background: var(--accent-soft); }
.filelist__sz { margin-left: auto; font-variant-numeric: tabular-nums; }
.filelist__ok { color: var(--ok); }

/* ─────────────────── 轻提示（toast） ─────────────────── */

.toast-host {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  z-index: var(--z-overlay); pointer-events: none;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
@media (max-width: 620px) {
  .toast-host { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); }
}

.toast {
  padding: 10px 16px;
  border: 1px solid var(--line-strong); border-left-width: 3px;
  border-radius: var(--r-md);
  background: rgba(16, 21, 32, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-sm); color: var(--fg);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.is-in { opacity: 1; transform: none; }
.toast--ok   { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
.toast--err  { border-left-color: var(--danger); }
.toast--info { border-left-color: var(--accent); }

/* 详情视图下侧栏轨只留进度，不显示模块序号切换的歧义 */
body[data-view="detail"] .rail { opacity: 0.55; }

/* ─────────────────── 手机端：组件级触摸目标 ─────────────────── */
/*
 * 这些规则的优先级必须高于上面的组件样式，所以放在 components.css 末尾，
 * 而不是 base.css —— 层叠顺序上 components.css 最后加载。
 */
@media (max-width: 900px) {
  /* 滑块：轨道加粗 + 滑块头加大，手机上才拖得准 */
  .slider input[type="range"] { height: 8px; }
  .slider input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }

  /* 开关：加大到 48×28 */
  .switch__track { width: 48px; height: 28px; }
  .switch__track::after { width: 22px; height: 22px; }
  .switch input:checked + .switch__track::after { transform: translateX(20px); }

  /* 色板：30px 太小，放到 40px 并保留选中描边 */
  .swatch { width: 40px; height: 40px; }

  /* 卡片右上角关闭：16px 完全点不到，给足 44px */
  .acard__x {
    width: 44px; height: 44px; margin: -10px -10px -10px auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1;
  }

  /* 分段控件与模板行。
     手机上三个选项一行放不下：不做横向滚动（会藏住选项让人找不到），
     宽屏平板用换行，窄屏手机直接竖排 —— 三个选项都完整可见、都好点。 */
  .seg {
    display: flex; flex-wrap: wrap;
    width: 100%; max-width: 100%;
    border-radius: var(--r-lg); padding: 4px;
  }
  .seg__b {
    flex: 1 1 auto; min-width: 0;
    padding: 10px 12px; text-align: center;
    white-space: normal; line-height: 1.35;
  }
  .tpl { padding: 12px 14px; }

  /* 悬浮球放大到 56px，拖拽容器给足高度 */
  .balloon { width: 56px; height: 56px; }
  .balloon svg { width: 26px; height: 26px; }
  .balloon-host { min-height: 190px; }

  /* 面板在窄屏占满宽度，不再固定 max-width */
  .fpanel { max-width: 100%; }

  /* 手机模型占满可用宽度，屏幕区略矮以免预览过长 */
  .device { max-width: 100%; }
  .device__screen { max-height: 280px; }

  /* 代码与日志块：内部横向滚动，不撑破卡片 */
  .code, .console { max-height: 200px; }

  /*
   * 输入框字号必须 ≥16px：iOS Safari 在聚焦字号小于 16px 的输入框时
   * 会自动放大整个页面，用户得手动缩回去 —— 这是手机上最烦人的体验之一。
   */
  .input, .textarea, .select { font-size: 16px; }
  /* 输入框本身也要够高才点得准 */
  .input, .select { min-height: var(--tap-min); }
  /* 「显示 / 隐藏密钥」的按钮：手机上要给到 44px 高 */
  .secret__eye { min-width: 56px; min-height: 44px; }

  /* 聊天气泡里的头像与文字：手机上一律不小于 12px */
  .msg__av { width: 32px; height: 32px; font-size: var(--fs-micro); }
  .bubble { font-size: var(--fs-sm); padding: 9px 12px; }
  .chat__time, .msg__t, .msg__time { font-size: var(--fs-micro); }
  /* 悬浮球面板里的按钮文字 */
  .fpanel__b { font-size: var(--fs-xs); }

  /* 首屏手机还原：白底卡片上的小字更要看得清 */
  .pmsg__av { font-size: var(--fs-micro); }
  .rcard { font-size: var(--fs-sm); }
  .rcard__anger_k, .rcard__k, .rcard__opt_n, .rcard__item_n { font-size: var(--fs-xs); }
  .rcard__reply_k { font-size: var(--fs-micro); }
  .rcard__why { font-size: var(--fs-xs); }
  .rcard__q, .rcard__opt_p, .rcard__item_p { font-size: var(--fs-sm); }
  .rcard__b { min-height: var(--tap-min); font-size: var(--fs-xs); }
  .rcard__x { width: var(--tap-min); height: var(--tap-min); }

  /* 预览里几处写死的小字号统一交给令牌，别在手机上变成蚂蚁字 */
  .bubble__t, .mini-kv__k, .code, .console { font-size: var(--fs-sm); }
  .acard__logo { font-size: var(--fs-xs); }
  .fpanel__t { font-size: var(--fs-micro); }
  .field__k, .field__h, .bar__why, .reply__why,
  .switch__d, .tpl__d, .ver__w { font-size: var(--fs-xs); }
}

/* 窄屏手机（<520px）：分段控件竖排，每个选项占满整行。
   横排换行会出现「1 个 + 2 个」的不平衡断行，竖排更整齐也更好点。 */
@media (max-width: 520px) {
  .seg { flex-direction: column; align-items: stretch; }
  .seg__b { width: 100%; padding: 11px 14px; }
}