/* 报价估算器 /quote/ · 页面样式（第 4 次迭代；照设计稿 docs/官网/设计稿/2026-10-26-第4次/quote.css 还原）
   只用 site.css 的令牌与组件；这里只补估算器特有的：端卡片、规模选择、结果卡、顾问头像条、手机吸底合计条。
   顾客端风格（宪法 #9⑦）：浅底、照片是主角、人露脸；不铺深色背景。 */

.qt-hero { position: relative; overflow: hidden; padding-block: var(--s-7) var(--s-6); background: var(--bg); }
.qt-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-7); align-items: center; margin-top: var(--s-5); }
.qt-hero .h1 { font-size: var(--fs-h1); text-wrap: balance; }
.nw { white-space: nowrap; }
.qt-hero .lead { margin-top: var(--s-4); max-width: 34em; }
.qt-hero__trust { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); color: var(--ink-2); }
.qt-hero__trust li { display: inline-flex; gap: var(--s-2); align-items: center; }
.qt-hero__trust .icon { width: 18px; height: 18px; color: var(--ok); }

/* 首屏右侧：真实产品截图 + 顾问露脸 */
.qt-people { position: relative; min-height: 340px; }
.qt-people__shot { position: absolute; right: 0; top: 0; width: 78%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); aspect-ratio: 16 / 10; background: var(--surface); }
.qt-people__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.qt-people__phone { position: absolute; left: 4%; bottom: 0; --phone-w: 150px; }
.qt-people__phone .device-phone__screen img { transform: none; }
.qt-people__card { position: absolute; right: 4%; bottom: 0; width: min(300px, 62%); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-2); display: grid; gap: var(--s-3); }
.qt-people__card p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.faces { display: flex; align-items: center; }
.face { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: var(--sh-1); flex: none; overflow: hidden; background: var(--brand-soft); }
.face + .face { margin-left: -10px; }
.face svg { display: block; width: 100%; height: 100%; }
.face--lg { width: 56px; height: 56px; }
.faces__t { margin-left: var(--s-3); font-size: var(--fs-sm); line-height: 1.4; }
.faces__t b { display: block; color: var(--ink); }
.faces__t span { color: var(--ink-3); font-size: var(--fs-xs); }

/* 估算器主体 */
.qt-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-6); align-items: start; }
.qt-step { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.qt-step__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); flex: none; }
.qt-step h2 { font-size: var(--fs-h5); font-weight: var(--fw-bold); }
.qt-step p { font-size: var(--fs-sm); color: var(--ink-3); }

.qt-ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.qt-end { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); transition: box-shadow var(--dur-2) var(--ease-out); }
.qt-end:hover { box-shadow: var(--sh-2); }
.qt-end.is-on { box-shadow: inset 0 0 0 2px var(--brand), var(--sh-2); }
.qt-end__media { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-muted); aspect-ratio: 4 / 5; }
.qt-end__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.qt-end__media--wide img { object-position: left top; }
.qt-end__media svg.line-art { width: 100%; height: 100%; }
.qt-end__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding-block: var(--s-1); }
.qt-end__top { display: flex; align-items: flex-start; gap: var(--s-2); }
.qt-end__name { font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: 1.35; flex: 1; }
.qt-end__desc { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.qt-end input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qt-tick { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--surface); display: inline-grid; place-items: center; flex: none; color: transparent; margin-top: 2px; }
.qt-end.is-on .qt-tick { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.qt-tick .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.qt-end label.qt-hit { position: absolute; inset: 0; border-radius: var(--r-lg); cursor: pointer; }
.qt-end:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.qt-scale { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.qt-scale[hidden] { display: none; }
.qt-scale .chip { min-height: 34px; padding: 0 10px; font-size: var(--fs-sm); }
.qt-scale__hint { position: relative; z-index: 1; font-size: var(--fs-xs); color: var(--ink-3); }
.qt-end__ai { position: absolute; left: var(--s-4); top: var(--s-4); }

/* 结果卡 */
.qt-result { position: sticky; top: calc(var(--nav-h, 64px) + var(--s-4)); padding: var(--s-5); border-radius: var(--r-xl); display: grid; gap: var(--s-4); }
.qt-result__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.qt-result__head .h4 { font-weight: var(--fw-bold); }
.qt-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.qt-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); font-size: var(--fs-sm); padding-bottom: var(--s-2); border-bottom: 1px dashed var(--line); }
.qt-rows li span:first-child { color: var(--ink); }
.qt-rows li .v { text-align: right; font-weight: var(--fw-semi); }
.qt-rows li .w { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--fs-xs); }
.qt-rows li.is-tbd .v { color: var(--ink-3); font-weight: var(--fw-medium); }
.qt-total { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-md); background: var(--brand-soft); }
.qt-total__k { font-size: var(--fs-sm); color: var(--ink-2); }
.qt-total__v { font-size: var(--fs-h3l); font-weight: var(--fw-bold); letter-spacing: var(--track-head); line-height: 1.2; color: var(--ink); }
.qt-total__w { font-size: var(--fs-sm); color: var(--ink-2); }
.qt-terms { display: grid; gap: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.qt-terms b { color: var(--ink-2); font-weight: var(--fw-semi); }
.qt-seal { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-xs); background: var(--seal-soft); color: var(--seal); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.qt-empty { display: grid; justify-items: center; gap: var(--s-2); text-align: center; padding: var(--s-6) var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); }
.qt-empty .card__icon { width: 48px; height: 48px; }
.qt-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .qt-skel { animation: qt-skel 1.4s ease-in-out infinite; } }
@keyframes qt-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.qt-err { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--seal-soft); color: var(--ink); font-size: var(--fs-sm); }
.qt-err b { color: var(--seal); }

/* 这些数怎么来的 */
.qt-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.qt-how li { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-1) var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.qt-how .card__icon { grid-row: span 2; }
.qt-how b { font-weight: var(--fw-semi); }
.qt-how p { grid-column: 2; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.qt-how ul.qt-how__l { padding: 0; margin: 0; }

/* 留资：带上估算 */
.qt-echo { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--ok-soft); font-size: var(--fs-sm); color: var(--ink); margin-bottom: var(--s-4); }
.qt-echo .icon { color: var(--ok); margin-top: 3px; }
.qt-echo b { font-weight: var(--fw-semi); }
.qt-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.qt-team li { list-style: none; display: grid; justify-items: center; gap: var(--s-1); text-align: center; padding: var(--s-4) var(--s-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); font-size: var(--fs-sm); }
.qt-team li b { font-weight: var(--fw-semi); }
.qt-team li span { color: var(--ink-3); font-size: var(--fs-xs); }
.qt-note-ph { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-2); }

/* 手机吸底合计条 */
.qt-bar { display: none; }

@media (max-width: 1100px) {
  .qt-main { grid-template-columns: minmax(0, 1fr) 340px; }
  .qt-ends { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .qt-hero { padding-block: var(--s-5) var(--s-5); }
  .qt-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .qt-people { min-height: 250px; }
  .qt-people__shot { width: 88%; }
  .qt-people__phone { --phone-w: 108px; left: 0; }
  .qt-hero .h1 { font-size: 30px; }
  .qt-people__card { width: 80%; right: 0; padding: var(--s-3); }
  .qt-people__card .face { width: 36px; height: 36px; }
  .qt-people__card p { font-size: var(--fs-xs); }
  .qt-main { grid-template-columns: minmax(0, 1fr); }
  .qt-end { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); }
  .qt-result { position: static; padding: var(--s-4); }
  .qt-how { grid-template-columns: minmax(0, 1fr); }
  .qt-team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .qt-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); padding-bottom: max(var(--s-3), env(safe-area-inset-bottom)); background: var(--surface); box-shadow: var(--sh-3); border-top: 1px solid var(--line); }
  .qt-bar[hidden] { display: none; }
  .qt-bar__v { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
  .qt-bar__v b { font-size: var(--fs-h5); font-weight: var(--fw-bold); }
  .qt-bar__v span { font-size: var(--fs-xs); color: var(--ink-3); }
  body.has-qt-bar .fab-consult { display: none; }
  body.has-qt-bar { padding-bottom: 76px; }
}

/* 规模单选做成胶囊（照 site.css .chip 的选中态） */
.qt-scale { border: 0; padding: 0; margin: 0; min-width: 0; }
.qt-scale .chip { position: relative; cursor: pointer; }
.qt-scale .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qt-scale .chip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); font-weight: var(--fw-semi); }
.qt-scale .chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 示意头像插画（上线换真人照片，本人书面同意；只这几个插画色，页面别处不用） */
:root { --face-skin: oklch(86% 0.05 60); --face-skin-2: oklch(80% 0.06 55); --face-hair: oklch(28% 0.03 60); }
.fc-bg { fill: var(--brand-soft); }
.fc-bg2 { fill: var(--ok-soft); }
.fc-bg3 { fill: var(--ai-soft); }
.fc-skin { fill: var(--face-skin); }
.fc-skin2 { fill: var(--face-skin-2); }
.fc-hair { fill: var(--face-hair); }
.fc-shirt { fill: var(--brand); }
.fc-shirt2 { fill: var(--wuzi); }
.fc-shirt3 { fill: var(--ai-2); }

/* 端数是单数时排两列会剩一个孤儿：最后一张占满一行，配宽图（模板按数量自动加 qt-end--wide） */
.qt-end--wide { grid-column: 1 / -1; grid-template-columns: 200px minmax(0, 1fr); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-edge) border-box; border: 1px solid transparent; }
.qt-end--wide .qt-end__media { aspect-ratio: 16 / 10; }
@media (max-width: 760px) { .qt-end--wide { grid-template-columns: 88px minmax(0, 1fr); } .qt-end--wide .qt-end__media { aspect-ratio: 4 / 5; } }

/* ===== 开发还原追加（只追加，不改上面的设计稿样式） ===== */
.qt-step--2 { margin-top: var(--s-6); }
.qt-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); }
.qt-share__url { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.qt-off { display: grid; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); max-width: 40em; }
.qt-off b { font-size: var(--fs-h4); }
.qt-off p { color: var(--ink-2); font-size: var(--fs-sm); }
.qt-shared { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-4); }
.qt-err .cluster { gap: var(--s-2); }
.qt-sec { padding-block: var(--s-7); }
.qt-skel--70 { width: 70%; }
.qt-skel--85 { width: 85%; }
.qt-skel--60 { width: 60%; }
.qt-skel--box { height: 72px; border-radius: var(--r-md); }
.qt-total__v--tbd { font-size: var(--fs-h5); }
/* 看图第 1 轮改：空态说明别剩一个字单独一行；规模胶囊收紧，三档在常见宽度一行放得下 */
.qt-empty span { text-wrap: balance; max-width: 18em; }
.qt-scale .chip { padding: 0 8px; }
.qt-scale { gap: 4px; }

/* ===== 官网体检修复（2026-11-01，第 2 组报告） ===== */
/* AI 能力卡：每类活一个线性图标，不再用看不清的同一张截图（2-19） */
.qt-end__media--ico { display: grid; place-items: center; background: var(--ai-soft); }
.qt-ai-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--surface); color: var(--ai-ink); box-shadow: var(--sh-1); }
/* 条件一条一行 */
.qt-conds { list-style: disc; margin: var(--s-1) 0 0; padding-left: var(--s-4); display: grid; gap: var(--s-1); }
/* 手机首屏只留真实产品截图，顾问卡挪到截图下面，不再三层叠在一起（2-21） */
@media (max-width: 760px) {
  .qt-people { min-height: 0; display: grid; gap: var(--s-3); }
  .qt-people__shot { position: relative; width: 100%; }
  .qt-people__phone { display: none; }
  .qt-people__card { position: relative; right: auto; bottom: auto; width: 100%; }
}