/* 定向优化：三类产品突出功能，三处配图恢复初版构图。 */
.feature-demo-tabs { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0 9px; padding-bottom:7px; border-bottom:1px solid #e9eef7; font-size:10px; color:#94a2b9; }
.feature-demo-tabs .selected { color:var(--blue); font-weight:600; position:relative; }
.feature-demo-tabs .selected::after { content:""; position:absolute; height:2px; background:var(--blue); bottom:-8px; left:0; right:0; border-radius:1px; }
.flagship-chat-row, .flagship-feed-row { display:flex; align-items:center; gap:7px; padding:10px 0; }
.flagship-chat-row .ui-avatar, .flagship-feed-row .ui-avatar { width:27px; height:27px; }
.flagship-chat-row > div, .flagship-feed-row > div { min-width:0; flex:1; }
.flagship-chat-row strong, .flagship-feed-row strong { font-size:11px; font-weight:600; display:block; }
.flagship-chat-row div > span, .flagship-feed-row div > span { display:block; font-size:9px; color:#95a3b9; margin-top:3px; }
.flagship-chat-row > i { color:#fff; background:var(--blue); width:14px; height:14px; border-radius:50%; text-align:center; font-size:9px; font-style:normal; line-height:14px; }
.flagship-feed-row { border-top:1px solid #f0f3f8; }
.flagship-feed-row > .ui-icon { width:13px; height:13px; color:#8ba5d4; }
.flagship-membership { border:1px solid #dce6fa; background:#edf3ff; border-radius:8px; padding:11px 10px; position:relative; margin-top:7px; }
.flagship-membership > div { display:flex; align-items:center; gap:6px; color:#416abe; }
.flagship-membership .ui-icon { width:16px; height:16px; }
.flagship-membership strong { font-size:11px; }
.flagship-membership > span { position:absolute; top:11px; right:10px; padding:1px 5px; border-radius:3px; background:#dce8ff; color:#6685bc; font-size:9px; font-weight:650; }
.flagship-membership small { display:block; font-size:9px; margin-top:5px; color:#91a3c4; }
.flagship-functions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:14px; gap:5px; }
.flagship-functions > span { display:flex; flex-direction:column; align-items:center; gap:5px; color:#7286a7; font-size:9px; }
.flagship-functions .ui-icon { width:17px; height:17px; color:#648de0; }
.feature-demo-assurance { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:13px; padding-top:10px; border-top:1px solid #edf1f7; font-size:9px; color:#93a3ba; }
.feature-demo-assurance .ui-icon { width:12px; height:12px; color:#7b9cdb; }
.circle-demo-row { display:flex; align-items:center; gap:7px; padding:10px 0; }
.circle-demo-mark { display:grid; place-items:center; width:29px; height:29px; background:#e3ecff; color:#668ce1; border-radius:7px; font-size:13px; flex-shrink:0; }
.circle-demo-mark.second { background:#edf2fc; color:#748caf; }
.circle-demo-row > div { flex:1; min-width:0; }
.circle-demo-row strong { font-size:11px; font-weight:600; display:block; }
.circle-demo-row div > span { font-size:9px; color:#99a6bb; display:block; margin-top:3px; }
.circle-demo-row > i { background:#f0f5ff; border:1px solid #dce8fc; border-radius:4px; color:#668adb; font-size:9px; font-style:normal; padding:2px 5px; }
.circle-demo-topic { padding:10px; background:#f6f9ff; border-radius:7px; margin-top:6px; }
.circle-demo-topic > span { display:block; font-size:9px; color:#8ba0c4; }
.circle-demo-topic > strong { display:block; font-size:11px; font-weight:550; color:#5877af; margin-top:5px; }
.circle-demo-topic > div { display:flex; align-items:center; margin-top:9px; }
.circle-demo-topic .ui-avatar { width:18px; height:18px; border-radius:50%; border:1px solid #fff; margin-right:-4px; }
.circle-demo-topic small { font-size:9px; margin-left:10px; color:#a0aec4; }
.circle-demo-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-top:12px; }
.circle-demo-tools > span { display:flex; flex-direction:column; align-items:center; gap:4px; color:#8d9eb8; font-size:9px; }
.circle-demo-tools .ui-icon { width:15px; height:15px; color:#7b9ad2; }
.circle-demo-publish { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:12px; border-radius:5px; padding:6px 7px; background:var(--blue); color:#fff; font-size:10px; }
.circle-demo-publish .ui-icon { width:12px; height:12px; }
.matching-demo-label { display:flex; align-items:center; gap:4px; padding:2px 0 7px; font-size:9px; color:#7d96c3; }
.matching-demo-label .ui-icon { width:11px; height:11px; }
.matching-demo-profile { display:grid; grid-template-columns:62px 1fr; column-gap:11px; background:#f6f9ff; border:1px solid #e9effa; border-radius:8px; padding:12px 10px; }
.matching-demo-profile > .ui-avatar { width:62px; height:62px; grid-row:1/3; border-radius:7px; }
.matching-demo-profile > div { align-self:end; min-width:0; }
.matching-demo-profile strong { display:block; font-size:13px; font-weight:650; }
.verified-label { display:inline-flex; gap:3px; align-items:center; font-size:9px; color:#6b94d0; margin-top:4px; white-space:nowrap; }
.verified-label .ui-icon { width:11px; height:11px; }
.matching-demo-profile p { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.matching-demo-profile p > span { font-size:8px; padding:1px 4px; background:#e9f0fd; color:#8a9fbe; border-radius:3px; white-space:nowrap; }
.matching-demo-privacy { display:flex; align-items:center; gap:5px; padding:13px 0; margin-top:4px; font-size:10px; color:#8a9ebd; }
.matching-demo-privacy .ui-icon { width:13px; height:13px; color:#7199d9; }
.matching-demo-privacy > span { font-size:9px; margin-left:auto; color:#6b99c7; background:#edf5ff; border-radius:3px; padding:2px 4px; }
.matching-demo-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:7px; }
.matching-demo-actions > span { display:flex; align-items:center; justify-content:center; gap:4px; border:1px solid #dce7fb; background:#f1f6ff; color:#678bd0; border-radius:5px; padding:7px 4px; font-size:10px; white-space:nowrap; }
.matching-demo-actions .ui-icon { width:12px; height:12px; }
.matching-demo-actions > .primary { color:#fff; border-color:var(--blue); background:var(--blue); }
.matching-demo-safety { text-align:center; font-size:9px; color:#a3afc0; margin-top:12px; }
.restored-original { background-size:contain; background-color:#f3f8fd; }
.comparison-visual.restored-original { align-self:center; min-height:0; border-radius:16px; }
.architecture-visual.restored-original { min-height:0; align-self:center; border-radius:13px; }
.cta-box { grid-template-columns:minmax(0,1fr) 260px auto; }
.cta-original-art { display:block; width:100%; background-color:transparent; border-radius:10px; }
@media (max-width:1200px) {
  .cta-box { grid-template-columns:minmax(0,1fr) 210px auto; padding:34px 30px; gap:22px; }
}
@media (max-width:960px) {
  .cta-box { grid-template-columns:minmax(0,1fr) 240px; }
  .cta-original-art { grid-column:2; grid-row:1/3; width:240px; }
  .cta-box > .btn { grid-column:1; grid-row:2; justify-self:start; }
  .architecture-visual.restored-original { display:block; width:min(340px,100%); margin-inline:auto; }
}
@media (max-width:620px) {
  .cta-box { grid-template-columns:1fr; padding:28px 23px; gap:22px; }
  .cta-original-art { grid-column:1; grid-row:2; width:100%; max-width:360px; justify-self:start; }
  .cta-box > .btn { grid-column:1; grid-row:3; }
  .architecture-visual.restored-original { width:min(280px,100%); }
}

/* 首页架构中的客户端与服务端技术分组。 */
#tech .arch-stack { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
#tech .arch-stack:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#tech .arch-stack-label { margin: 0 0 9px; color: var(--muted); font-size: .8125rem; font-weight: 600; }

/* 五大维度的详细方案对比，沿用首页蓝白主题。 */
#compare .comparison-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
#compare .comparison-count { color: var(--blue); background: #f0f5ff; border: 1px solid #dce7fc; padding: 7px 12px; border-radius: 6px; font-size: .8125rem; white-space: nowrap; }
#compare .comparison-table-wrap { overflow: hidden; }
#compare .comparison-detailed-table { height: auto; table-layout: fixed; font-size: .9375rem; line-height: 1.75; }
#compare .comparison-dimension-col { width: 18%; }
#compare .comparison-detailed-table th, #compare .comparison-detailed-table td { padding: 19px 24px; }
#compare .comparison-detailed-table thead th { background: #f8faff; font-size: 1rem; text-align: left; }
#compare .comparison-detailed-table thead th:nth-child(2) { background: #eaf1ff; color: #214ebc; }
#compare .comparison-column-note { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; font-size: .8125rem; }
#compare .comparison-detailed-table .comparison-group th { background: #f5f8fd; padding-block: 11px; font-size: .9375rem; color: #354561; white-space: normal; }
#compare .comparison-group-number { color: var(--blue); margin-right: 12px; font-size: .8125rem; font-variant-numeric: tabular-nums; }
#compare .comparison-detail-row th { background: #fff; font-size: .875rem; font-weight: 600; color: #4b5970; text-align: left; white-space: normal; }
#compare .comparison-detail-row td { vertical-align: top; }
#compare .comparison-detail-row td:nth-child(2) { background: #f5f8ff; }
#compare .comparison-detail-row strong { display: block; font-size: .9375rem; font-weight: 600; color: #34435b; margin-bottom: 5px; }
#compare .comparison-detail-row td:nth-child(2) strong { color: #2957b8; }
#compare .comparison-detail-row p { color: var(--muted); font-size: .875rem; line-height: 1.8; }
#compare .comparison-detailed-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
#compare .comparison-detailed-table tbody:last-child tr:last-child > * { border-bottom: 0; }
#compare .comparison-cost-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 36px; align-items: center; padding: 30px; margin-top: 28px; border: 1px solid var(--line); border-radius: 13px; background: #f8faff; }
#compare .comparison-cost-photo { border-radius: 10px; width: 100%; }
#compare .comparison-cost-content > .eyebrow { margin-bottom: 7px; font-size: .8125rem; }
#compare .comparison-cost-content > h3 { font-size: 1.35rem; }
#compare .comparison-cost-items { display: grid; gap: 16px; margin-top: 23px; }
#compare .comparison-cost-items article { display: flex; align-items: flex-start; gap: 12px; }
#compare .comparison-cost-index { display: grid; place-items: center; background: #e8f0ff; color: var(--blue); width: 29px; height: 29px; border-radius: 6px; flex-shrink: 0; font-size: .75rem; font-weight: 600; }
#compare .comparison-cost-items h4 { font-size: .9375rem; font-weight: 600; margin: 2px 0 5px; }
#compare .comparison-cost-items p { color: var(--muted); font-size: .875rem; line-height: 1.8; }
#compare .comparison-cost-footer { display: flex; align-items: flex-start; gap: 24px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; }
#compare .comparison-cost-footer p { color: var(--muted); font-size: .75rem; line-height: 1.8; }
#compare .comparison-consult { border: 0; background: transparent; padding: 0; flex-shrink: 0; font-size: .875rem; white-space: nowrap; }
@media (max-width: 960px) {
  #compare .comparison-intro { display: block; }
  #compare .comparison-count { display: inline-block; margin-top: 18px; }
  #compare .comparison-detailed-table th, #compare .comparison-detailed-table td { padding: 16px; }
  #compare .comparison-cost-layout { grid-template-columns: 190px minmax(0,1fr); gap: 24px; padding: 24px; }
  #compare .comparison-cost-footer { flex-direction: column; gap: 13px; }
}
@media (max-width: 620px) {
  #compare .comparison-detailed-table, #compare .comparison-detailed-table tbody { display: block; width: 100%; }
  #compare .comparison-detailed-table colgroup, #compare .comparison-detailed-table thead { display: none; }
  #compare .comparison-detailed-table .comparison-group { display: block; }
  #compare .comparison-detailed-table .comparison-group th { display: block; width: 100%; padding: 12px 15px; font-size: .875rem; }
  #compare .comparison-detail-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  #compare .comparison-detail-row th { display: block; grid-column: 1/-1; padding: 12px 14px; border-bottom: 0; font-size: .875rem; }
  #compare .comparison-detail-row td { display: block; padding: 13px 14px 17px; min-width: 0; }
  #compare .comparison-detail-row td::before { content: attr(data-label); display: block; font-size: .6875rem; color: var(--muted); margin-bottom: 8px; }
  #compare .comparison-detail-row td:nth-child(2)::before { color: var(--blue); }
  #compare .comparison-detail-row strong { font-size: .8125rem; line-height: 1.65; }
  #compare .comparison-detail-row p { font-size: .8125rem; line-height: 1.8; overflow-wrap: anywhere; }
  #compare .comparison-cost-layout { grid-template-columns: 1fr; padding: 22px; gap: 22px; margin-top: 20px; }
  #compare .comparison-cost-photo { width: min(220px,100%); margin-inline: auto; }
  #compare .comparison-cost-content > h3 { font-size: 1.2rem; }
}