/* Verity 家庭财富引擎 — 中文控制台补充样式（移动优先） */

.stepper {
  list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.stepper li {
  flex: 1 0 auto; display: flex; align-items: center; justify-content: center;
  min-height: 44px; text-align: center; padding: 8px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 62px; cursor: pointer;
}
.stepper li:focus-visible { outline: 3px solid rgba(51, 211, 153, .45); outline-offset: 2px; }
.stepper li.done { color: var(--accent); border-color: #1c5340; background: var(--accent-dim); }
.stepper li.active { color: #04140f; background: linear-gradient(135deg, var(--accent), #0ea5e9); border-color: transparent; }

.wiz-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.wiz-toolbar .pill { margin-left: auto; }

.wiz-step h3 { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.wiz-step h3.mt { margin-top: 20px; }
.fhint { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }

.wiz-footer {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.wiz-footer button { flex: 1 1 auto; }

.row-card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.row-card .row-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px;
}
.row-card .row-head strong { font-size: 13.5px; }
.row-card .row-head .idx { color: var(--muted); font-size: 12px; font-weight: 600; }
.row-del {
  background: transparent; color: var(--danger); border: 1px solid #5a2020;
  padding: 6px 12px; font-size: 12px; min-height: 44px;
}

.asset-row, .liab-row { grid-template-columns: 1fr; }

.legal-row, .social-row {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.legal-row .chk, .social-row .chk {
  display: flex; align-items: center; gap: 8px; min-width: 190px;
  font-size: 13.5px; color: var(--text);
}
.legal-row .chk input, .social-row .chk input { width: 22px; height: 22px; min-height: 22px; }
/* 复选框本体只有 22 px，但真正的命中目标是它所在的整行 label：补足 44 px 触控高度。 */
.legal-row .chk, .social-row .chk { min-height: 44px; align-items: center; }
.legal-row .notein, .social-row .notein { flex: 1 1 220px; }
.legal-row .notein input, .social-row .notein input { min-height: 44px; font-size: 13px; }

.validation { margin-top: 14px; font-size: 13px; }
.validation .ok { color: var(--accent); }
.validation .missing { color: var(--danger); }
.validation ul { margin: 6px 0 0 18px; color: var(--danger); font-size: 12.5px; }

.subnote { color: var(--muted); font-size: 11.5px; }

.flow-bar { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.flow-row {
  display: grid; grid-template-columns: 130px 1fr 132px; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.flow-row .name { font-size: 12.5px; color: var(--muted); }
.flow-row .amt { font-family: var(--mono); font-size: 12.5px; text-align: right; }
.flow-row .amt.pos { color: var(--accent); }
.flow-row .amt.neg { color: var(--danger); }

.risk-item {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  padding: 12px 14px; margin-bottom: 10px;
}
.risk-item .risk-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.risk-item .rank {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: #1b2743; color: var(--text); font-weight: 700; font-size: 12px;
}
.risk-item .risk-title { font-weight: 700; font-size: 14px; }
.risk-item .risk-line { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

.domain-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  padding: 13px 14px; margin-bottom: 10px;
}
.domain-card .dhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.domain-card .dname { font-weight: 700; font-size: 14px; }
.domain-card .finding { font-size: 13px; }
.domain-card ul { margin: 8px 0 0 18px; color: var(--muted); font-size: 12.5px; }

.ev-block { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.ev-block h3 { margin: 0 0 8px; font-size: 13.5px; color: var(--text); }
.ev-block .kv { display: flex; gap: 10px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.ev-block .kv .k { color: var(--muted); min-width: 130px; }
.ev-block .kv .v { font-family: var(--mono); word-break: break-all; }
/* T-E0-038：证据块里的来源键、数据集路径、哈希是没有空格的机器字符串。
   320 px 屏上它们默认不换行，会把 .ev-block → #r-evidence → #results → main
   一路撑宽（实测 documentElement.scrollWidth = 385 > 320），整页横向滚动。
   这些字符串本来就允许在任意位置断开，所以给它们 anywhere 的断行许可。 */
.ev-block { min-width: 0; }
.ev-block ul { min-width: 0; overflow-wrap: anywhere; }
.ev-block li { overflow-wrap: anywhere; word-break: break-word; }
.ev-block .subnote { overflow-wrap: anywhere; }
#r-evidence-body { min-width: 0; }

.chain-ok { color: var(--accent); font-weight: 600; }
.chain-bad { color: var(--danger); font-weight: 600; }

/* ------------------------------------------------- 本机家庭档案库 (T-E0-026) */
#pf-name {
  flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-size: 13.5px;
}
#pf-msg.ok { border-left-color: var(--accent); color: var(--accent); }
#pf-msg.warn { border-left-color: var(--warn); color: var(--warn); }

.pf-item {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  padding: 13px 14px; margin-bottom: 10px;
}
.pf-item.active { border-color: #1c5340; box-shadow: inset 3px 0 0 var(--accent); }
.pf-item .pf-main { flex: 1 1 240px; min-width: 0; }
.pf-item .pf-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.pf-item .pf-title strong { word-break: break-word; }
.pf-item .pf-meta { color: var(--muted); font-size: 12.5px; margin-top: 5px; word-break: break-word; }
.pf-item .pf-dim { color: var(--muted); }
.pf-item .pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-item .pf-actions button { flex: 1 1 auto; min-height: 44px; }
.pf-item .pf-actions button.pf-danger { color: var(--danger); border-color: #5a2020; }

@media (max-width: 760px) {
  .stepper li { font-size: 11px; padding: 7px 8px; min-width: 54px; min-height: 44px; }
  .wiz-toolbar .pill { margin-left: 0; }
  .flow-row { grid-template-columns: 88px 1fr; }
  .flow-row .amt { grid-column: 2; text-align: left; }
  .legal-row .chk, .social-row .chk { min-width: 100%; }
  .pf-item .pf-actions { width: 100%; }
  .pf-item .pf-actions button { flex: 1 1 100%; }
  #pf-name { flex: 1 1 100%; }
  .ev-block .kv { flex-direction: column; gap: 2px; }
  .ev-block .kv .k { min-width: 0; }
}

/* ------------------------------------------- 引擎准备状态条 (T-E0-027 首屏优先) */
.engine-strip {
  margin-top: 14px; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.engine-strip[data-phase="ready"] { border-color: #1c5340; }
.engine-strip[data-phase="failed"] { border-color: #5a2020; }
.es-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.es-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 auto;
}
.engine-strip[data-phase="downloading"] .es-dot,
.engine-strip[data-phase="booting"] .es-dot,
.engine-strip[data-phase="loading"] .es-dot { background: var(--warn); animation: es-pulse 1.1s ease-in-out infinite; }
.engine-strip[data-phase="ready"] .es-dot { background: var(--accent); }
.engine-strip[data-phase="failed"] .es-dot { background: var(--danger); }
@keyframes es-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.es-phase { font-weight: 600; }
.es-pct { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.es-bar {
  margin: 9px 0 8px; height: 6px; border-radius: 999px; background: #0a1120; overflow: hidden;
}
.es-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #0ea5e9); transition: width .25s ease; }
.engine-strip[data-phase="failed"] .es-bar > i { background: var(--danger); }
.engine-strip[data-indeterminate="true"] .es-bar > i { width: 35%; animation: es-slide 1.3s ease-in-out infinite; }
@keyframes es-slide { 0% { margin-left: 0; } 50% { margin-left: 65%; } 100% { margin-left: 0; } }
.es-meta { color: var(--muted); font-size: 12.5px; word-break: break-word; }
.es-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.es-actions button { min-height: 44px; }

@media (max-width: 760px) {
  .es-actions button { flex: 1 1 100%; }
  .es-pct { margin-left: 0; }
}

/* ------------------------------------------- PWA 状态条 (T-E0-030 可安装 + 离线打开) */
.pwa-strip {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.pwa-strip.hidden { display: none; }
.pwa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.pwa-dot[data-kind="ok"] { background: var(--accent); }
.pwa-dot[data-kind="offline"] { background: var(--warn); }
.pwa-dot[data-kind="update"] { background: var(--blue); animation: es-pulse 1.1s ease-in-out infinite; }
.pwa-dot[data-kind="off"] { background: var(--danger); }
#pwa-text { flex: 1 1 0; word-break: break-word; }
#pwa-reload { min-height: 44px; flex: 0 0 auto; }

/* 结果快照与本机复核 (T-E0-029) */
.note.ok { border-left-color: var(--accent); color: var(--accent); }
.note.warn { border-left-color: var(--warn); color: var(--warn); }
#r-snapshot { border-color: #1e3a5f; }
#r-snapshot-checks table { font-size: 12.5px; }
#r-snapshot-checks th, #r-snapshot-checks td {
  padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
#r-snapshot-checks td.mono { max-width: 200px; white-space: nowrap; }
#r-snapshot .wiz-toolbar button { min-height: 44px; }
#r-report-actions button { min-height: 44px; }
#r-report-status a { font-weight: 700; }

@media (max-width: 760px) {
  #r-snapshot .wiz-toolbar button { flex: 1 1 100%; }
  /* 手机宽度下把复核表改成逐条卡片：结论列必须一眼可见，不允许横向滚动才能看到。 */
  #r-snapshot-checks table, #r-snapshot-checks tbody, #r-snapshot-checks tr, #r-snapshot-checks td {
    display: block; width: 100%;
  }
  #r-snapshot-checks thead { display: none; }
  #r-snapshot-checks tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  #r-snapshot-checks td { border: 0; padding: 2px 0; max-width: none; white-space: normal; }
  #r-snapshot-checks td.mono { max-width: none; }
}

/* ------------------------------------ 现金流与资产负债·多月度趋势 (T-E0-031) */

.trend-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 12px 0 14px;
}
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-left: auto; }
.seg button {
  border: 0; border-radius: 0; background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 600; padding: 8px 14px; min-height: 44px;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--accent-dim); color: var(--accent); }

.trend-chart-head { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.trend-chart-head .legend { display: inline-flex; align-items: center; gap: 6px; }
.trend-chart-head .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.trend-chart-head .sw.cash { background: var(--accent); }
.trend-chart-head .sw.debt { background: var(--danger); }
.trend-chart-head .sw.target { background: transparent; border-top: 2px dashed #f59e0b; height: 0; }

.trend-chart {
  position: relative; display: flex; gap: 6px; align-items: flex-end;
  padding: 10px 10px 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tb-col { flex: 1 0 34px; min-width: 34px; display: flex; flex-direction: column; align-items: center; }
.tb-plot {
  position: relative; width: 100%; height: 120px;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
}
.tb-bar { display: block; width: 42%; border-radius: 3px 3px 0 0; min-height: 1px; }
.tb-bar.cash { background: linear-gradient(180deg, var(--accent), #0ea5e9); }
.tb-bar.debt { background: linear-gradient(180deg, var(--danger), #7f1d1d); }
.tb-label { font-size: 11px; color: var(--muted); padding: 6px 0 8px; font-family: var(--mono); }
.tb-col.neg .tb-label { color: var(--danger); font-weight: 700; }

.tb-target-layer {
  position: absolute; left: 10px; right: 10px; top: 10px; height: 120px;
  pointer-events: none;
}
.tb-target { position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px dashed #f59e0b; }
.tb-target span {
  position: absolute; right: 0; top: -17px; font-size: 10.5px; color: #f59e0b;
  background: var(--panel-2); padding: 0 4px; white-space: nowrap;
}

.trend-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

table tr.row-deficit td { background: rgba(248, 113, 113, 0.08); }
table tr.row-deficit td:first-child { color: var(--danger); font-weight: 700; }

@media (max-width: 760px) {
  .seg { margin-left: 0; }
  .tb-plot { height: 96px; }
  .tb-target-layer { height: 96px; }
  .trend-chart { gap: 4px; }
}

/* 压力表与危险时间轴（T-E0-036）：手机上横向滚动承担超宽内容，纵向行高不再被撑高。
   病根是「每一列都没有最小宽度」：380 px 屏上八列被压到 34～80 px，数字与副行各自
   折成 4～12 行，一行表占到 145～228 px。修法是给每一列一个能读的下限，数值列一律
   单行、副行最多两行、说明列拿到能读的宽度，超出的宽度交给 .scroll 横向滚动。 */
#r-stress-table, #r-timeline-table { min-width: 720px; }
#r-stress-table th, #r-stress-table td,
#r-timeline-table th, #r-timeline-table td { vertical-align: top; }
#r-stress-table td.num, #r-stress-table th.num,
#r-timeline-table td.num, #r-timeline-table th.num { white-space: nowrap; min-width: 92px; }
/* 含副行的两列（组合损失 / 未覆盖与额外支出）给到能读的宽度，副行最多换两行。 */
#r-stress-table td:nth-child(3), #r-timeline-table td:nth-child(5) { min-width: 176px; }
/* 情景列与两类标记列（是否击穿底线 / 严重度 / 击穿月份 / 12 个月关口）不折行。 */
#r-stress-table td:first-child, #r-timeline-table td:first-child { min-width: 122px; }
#r-stress-table td:nth-child(6), #r-stress-table td:nth-child(7),
#r-timeline-table td:nth-child(2), #r-timeline-table td:nth-child(3) { white-space: nowrap; min-width: 84px; }
/* 说明列允许换行（长句单行会拖出两屏宽），但必须拿到能读的宽度与字号，最多三行。 */
#r-stress-table th:last-child, #r-stress-table td:last-child,
#r-timeline-table th:last-child, #r-timeline-table td:last-child { min-width: 248px; white-space: normal; font-size: 12px; line-height: 1.45; }

/* --------------------------------- 接口契约端点表 (T-E0-015)

   与上面两张表同一个教训：不给列定最小宽度，390 px 上八列会被压成「GE / T」这种
   一格一个字母的竖排。方法列与路径列都是机器码，必须整块可读、不折行，宽度交给
   .scroll 承担；用途列允许换行但要有可读宽度。 */
#api-contract-table { min-width: 760px; }
#api-contract-table th, #api-contract-table td { vertical-align: top; }
#api-contract-table td:first-child, #api-contract-table th:first-child { white-space: nowrap; min-width: 68px; }
#api-contract-table td:nth-child(2), #api-contract-table th:nth-child(2) { white-space: nowrap; min-width: 232px; }
#api-contract-table td:nth-child(4), #api-contract-table th:nth-child(4) { white-space: nowrap; min-width: 104px; }
#api-contract-table td:nth-child(5), #api-contract-table th:nth-child(5),
#api-contract-table td:nth-child(6), #api-contract-table th:nth-child(6) { white-space: nowrap; min-width: 84px; }
#api-contract-table td:nth-child(3), #api-contract-table th:nth-child(3) { min-width: 200px; white-space: normal; font-size: 12px; line-height: 1.45; }
#api-contract-actions button { min-height: 44px; }
#api-contract .metric .v { font-family: var(--mono); }

/* --------------------------------- 结果页章节索引与回到顶部 (T-E0-040)

   两件事：
     1. sticky 顶部导航占了 ~61 px（手机）/ ~86 px（桌面）：任何「跳到某章节」都必须
        减去它的真实高度，否则章节标题正好被压在导航条下面，用户以为跳错了地方。
        scroll-margin-top 管原生锚点，JS 落位则按 header 的实测高度计算。
     2. 章节目录是固定浮层：手机上从底部升起，桌面上贴在右下角；不用时收起，
        不占文档流，因此不会把 320 px 的页面撑宽。

   --sticky-header-h 由 JS 在真实浏览器里按 header 的实测高度写入（手机上实测 75 px，
   桌面上不同）：猜一个常数正是上一轮 404 噪声的老毛病。这里的 74px 只是 JS 就位前的兜底。 */
:root { --sticky-header-h: 74px; }
section[id], #results { scroll-margin-top: calc(var(--sticky-header-h) + 16px); }

#sec-nav {
  position: fixed;
  right: 12px;
  /* 底部有浮层提示时整组上移，否则「回到顶部 / 章节」会被提示条盖住点不到（r71 P0）。 */
  bottom: calc(12px + var(--bottom-tip-h, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#sec-nav.hidden { display: none; }

.sec-fab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; min-width: 48px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(17, 26, 46, .96); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
}
.sec-fab:hover { border-color: var(--accent); color: var(--accent); }
.sec-fab .sec-fab-ico { font-size: 15px; line-height: 1; }
#sec-index-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

#sec-index-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(4, 8, 16, .55); }
#sec-index-scrim.hidden { display: none; }

#sec-index-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-height: min(72vh, 560px); overflow-y: auto;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(9, 14, 26, .985);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .5);
}
#sec-index-panel.hidden { display: none; }

.sec-index-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sec-index-head strong { font-size: 14px; }
.sec-index-head .pill { margin-left: auto; }
#sec-index-close { min-height: 44px; }

#sec-index-list { list-style: none; margin: 0; padding: 0; }
#sec-index-list li { margin-bottom: 6px; }
.sec-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--text);
  font-size: 14px; cursor: pointer;
}
.sec-item .sec-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  background: #1b2743; color: var(--muted); font-size: 12px; font-weight: 700;
}
.sec-item .sec-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sec-item .sec-mark { flex: 0 0 auto; color: var(--muted); }
.sec-item.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.sec-item.active .sec-num { background: rgba(4, 20, 15, .6); color: var(--accent); }
#sec-index-hint { margin-top: 10px; }

@media (min-width: 761px) {
  /* 桌面端同样是右下角：提示条（宽 420px，right:22px）与这两个 FAB 几乎重叠，
     所以窄屏那条让位规则必须在这里再写一次，否则媒体查询会把 --bottom-tip-h 顶掉。
     （r71 实测发现：只写窄屏时，1200px 宽下 #sec-nav 的 computed bottom 仍是 20px。） */
  #sec-nav { right: 20px; bottom: calc(20px + var(--bottom-tip-h, 0px)); }
  #sec-index-panel {
    left: auto; right: 20px; bottom: 20px; width: 420px;
    border: 1px solid var(--line); border-radius: 14px;
  }
  #sec-index-scrim { background: rgba(4, 8, 16, .35); }
}

@media (max-width: 760px) {
  /* 固定浮层会盖住页面最底部的一小块：把正文底部留白加到能容下两个按钮，
     这样滑到尽头时最后一张卡片不会被按钮压住。 */
  main { padding-bottom: 148px; }
}

/* ============ Round 29 · 品牌首页（Verity AI家庭CFO） ============ */
.hero-promise {
  display: none;
}
.hero {
  display: flex; flex-wrap: wrap; gap: 18px;
  background:
    radial-gradient(1200px 300px at 15% -10%, rgba(52, 211, 153, .12), transparent 60%),
    linear-gradient(160deg, #0b1222, #070b16);
  align-items: stretch; margin-bottom: 14px;
}
.hero-copy { flex: 2 1 420px; min-width: 0; }
.hero-slogan {
  font-size: clamp(20px, 4.4vw, 30px); font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(90deg, #34d399, #0ea5e9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-promise-line { margin-top: 6px; font-size: clamp(15px, 3vw, 19px); font-weight: 700; color: var(--text); }
.hero-desc { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; max-width: 640px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hero-actions button { flex: 0 0 auto; min-height: 48px; padding: 12px 24px; font-size: 15px; }
.hero-actions button.primary, .home-cta button.primary {
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .45), 0 8px 30px rgba(52, 211, 153, .18);
}
.hero-account {
  flex: 1 1 240px; min-width: 0; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; background: rgba(255, 255, 255, .02);
  display: flex; flex-direction: column; gap: 6px; align-self: center;
}
#hero-account.hidden { display: none; }
.hero-account .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hero-account .v { font-size: 18px; font-weight: 800; word-break: break-all; }
.hero-account .h { color: var(--muted); font-size: 12px; line-height: 1.6; }

.home-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; }
.home-head h2 { margin: 6px 0 0; }
.home-cta { margin-top: 4px; }
.home-grid { margin-top: 14px; }
.home-mod { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,.02); cursor: pointer; }
.home-mod:hover, .home-mod:focus-visible { border-color: var(--accent); outline: none; }
.home-mod .v { font-size: clamp(19px, 4.4vw, 26px); }
.module-entry-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.module-entry { flex: 1 1 calc(33.333% - 10px); min-height: 48px; font-weight: 700; }
body > .hero,
body > #profile-modules,
body > #home-dashboard,
body > #home-notice { width: min(1240px, calc(100% - 44px)); margin-left: auto; margin-right: auto; }
.home-block { margin-top: 22px; }
.home-block h3 { margin: 0 0 4px; font-size: 16px; }
.home-three { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.home-three li {
  border-left: 3px solid var(--accent); background: rgba(255,255,255,.03);
  border-radius: 0 12px 12px 0; padding: 12px 14px;
}
.home-three li.t-sev-high { border-left-color: var(--danger); }
.home-three li.t-sev-mid { border-left-color: var(--warn); }
.home-three li .t-title { font-weight: 700; font-size: 14px; }
.home-three li .t-detail { color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.6; }
.home-three li .t-go { color: var(--accent); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 10px 0 0; font-size: 12.5px; min-height: 44px; margin-top: 2px; }

.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-chips button { min-height: 44px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; }
.ask-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ask-form input {
  flex: 1 1 240px; min-width: 0; background: #0a101d; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 13.5px;
}
.ask-form button { flex: 0 0 auto; }
.ask-answer { margin-top: 12px; white-space: pre-wrap; line-height: 1.7; }
@media (max-width: 760px) {
  .hero-promise { display: block; color: var(--muted); font-size: 12px; margin: 8px 0 0; }
  .hero-actions button { flex: 1 1 100%; }
  .home-three li { padding: 11px 12px; }
  .module-entry { flex-basis: calc(50% - 10px); }
  body > .hero,
  body > #profile-modules,
  body > #home-dashboard,
  body > #home-notice { width: calc(100% - 24px); }
}

/* Round 29：运行失败时首页状态行要能一眼看出是失败，而不是一句普通说明。
   触发点在 zh.js surfaceRunFailure()（Q-29-04：报错曾经只在第 3~4 屏之外）。 */
#home-error { margin: 12px 0 4px; }
#home-error.hidden { display: none; }
.sub.err-text { color: var(--bad, #ff6b6b); font-weight: 600; }

/* R31：主提示通道承载「输入已读入」与「快照处置」两段，用换行分段呈现（S-30-02）。 */
#pf-msg { white-space: pre-line; }

/* R30-N-01/02/03（Round 31）：首屏提示带从文档流改为**底部浮层**。
   原先它跟着 hero 之后排布，320×568 这类矮屏上自身就落在首屏之外（band top=682px），
   提示等于没出现；而且用户在第 2~4 屏往上滚一点时它仍会跑到屏幕上方。
   固定到底部后，无论滚到哪里、屏幕多矮，提示都落在当前视野内。 */
#home-notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  margin: 0;
  padding: 10px 12px;
  background: var(--panel-2, #16203a);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  max-height: 40vh;
  overflow-y: auto;
}
#home-notice.err { border-left-color: var(--danger); }

/* ============ r61 统一对话入口（chat-dock）============ */
#chat-dock{scroll-margin-top:14px}
.chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.chat-lang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-lang .pill{white-space:nowrap}
.chat-log{background:var(--bg-2,#0d1424);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:96px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.chat-line{display:flex}
.chat-line.chat-user{justify-content:flex-end}
.chat-bubble{max-width:86%;padding:9px 13px;border-radius:14px;font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.chat-user .chat-bubble{background:var(--blue,#2f6fed);color:#04101f;font-weight:600}
.chat-bot .chat-bubble{background:var(--panel,#111a2e);border:1px solid var(--line);color:var(--text,#e8eefc)}
.chat-input-row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.chat-input-row input{flex:1 1 auto;min-width:0;min-height:46px;background:#0a101d;border:1px solid var(--line);border-radius:13px;padding:0 14px;font:inherit;font-size:16px;color:var(--text);caret-color:var(--accent)}
.chat-input-row input::placeholder{color:var(--muted,#8fa2c7)}
.chat-input-row button{min-height:46px;min-width:46px;border-radius:13px;font-size:17px;white-space:nowrap}
#chat-send{background:var(--blue,#2f6fed);border-color:var(--blue,#2f6fed);color:#04101f;font-weight:700}
.chat-entries{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chat-entries button{min-height:44px;font-size:14px}
#chat-tts-stop{min-height:44px;font-size:13px}
@media (max-width:560px){
  #chat-mic{min-width:46px}
  #chat-send{min-width:64px;padding:0 12px}
  .chat-input-row input{font-size:16px}
}

.home-answer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.home-answer > div { min-width: 0; padding: 18px; background: #0a101d; }
.home-answer span { display: block; color: var(--muted); font-size: 14px; margin-bottom: 9px; }
.home-answer strong { display: block; font-size: clamp(18px, 2.3vw, 25px); line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 760px) { .home-answer { grid-template-columns: 1fr; } .home-answer > div { padding: 14px 16px; } }

.home-scenario { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); }
.home-scenario-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.home-scenario-head h3 { margin: 0 0 4px; font-size: 19px; }
.home-scenario-head p { margin: 0; color: var(--muted); font-size: 14px; }
.home-scenario-head label { color: var(--muted); font-size: 14px; }
.home-scenario-head select { display: block; max-width: 100%; margin-top: 6px; background: #0a101d; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 16px; }
.home-scenario-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 10px; }
.home-scenario-values > div { padding: 14px; border-radius: 10px; background: rgba(255,255,255,.04); }
.home-scenario-values span { display: block; color: var(--muted); font-size: 14px; }
.home-scenario-values strong { display: block; margin-top: 6px; font-size: 20px; overflow-wrap: anywhere; }
.home-scenario > a { color: var(--accent); display: inline-block; padding: 8px 0; }

@media (max-width: 760px) { .home-scenario-values { grid-template-columns: 1fr; gap: 7px; } }
