/* ==========================================================================
香江保典 · 香港保险产品展示站
风格：清新温馨（Light Theme）
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
color-scheme: light;
--bg-1: #FBFEFD;
--bg-2: #F7FBFA;
--blob-1: #E2F7F1;
--blob-2: #FFF0E6;
--blob-3: #FDF3FB;
--surface: #FFFFFF;
--surface-2: #F3FAF8;
--surface-3: #FFFBF7;
--line: #E4F1ED;
--line-2: #F2E9E1;
--ink: #234540;
--ink-2: #395C55;
--muted: #6F8D87;
--muted-2: #93ACA7;
--mint: #35B0A0;
--mint-d: #1E8C7E;
--mint-l: #E6F7F3;
--mint-l2: #CFF0E9;
--coral: #FF8F6B;
--coral-d: #E8704A;
--coral-l: #FFEDE5;
--amber: #F2B33D;
--amber-l: #FFF5E1;
--sky: #63AEDD;
--sky-l: #E8F4FD;
--lilac: #A294DC;
--lilac-l: #F1EDFC;
--radius-xl: 28px;
--radius: 20px;
--radius-sm: 13px;
--shadow-xs: 0 2px 8px rgba(30, 140, 126, .06);
--shadow: 0 10px 30px rgba(30, 140, 126, .08);
--shadow-hover: 0 20px 44px rgba(30, 140, 126, .16);
--shadow-warm: 0 14px 34px rgba(232, 112, 74, .14);
--ff: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
--ff-num: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
--wrap: 1180px;
}
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--ff);
font-size: 15px;
line-height: 1.75;
color: var(--ink);
background-color: var(--bg-1);
background-image:
radial-gradient(900px 620px at 8% -8%, var(--blob-1) 0%, rgba(226,247,241,0) 62%),
radial-gradient(760px 560px at 98% -4%, var(--blob-2) 0%, rgba(255,240,230,0) 58%),
radial-gradient(680px 520px at 52% 108%, var(--blob-3) 0%, rgba(253,243,251,0) 60%),
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--mint-d); text-decoration: none; }
a:hover { color: var(--mint); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.35; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2.15rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.14rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .3em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.mono { font-family: var(--ff-num); }
.muted { color: var(--muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
/* ---------------- 顶部提示条 ---------------- */
.topbar {
background: linear-gradient(90deg, #FFF6EE 0%, #FDF0F6 50%, #EFFAF6 100%);
border-bottom: 1px solid var(--line-2);
font-size: 12.5px;
color: var(--ink-2);
text-align: center;
padding: 7px 18px;
line-height: 1.5;
}
.topbar b { color: var(--coral-d); font-weight: 600; }
/* ---------------- 导航 ---------------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(255, 255, 255, .82);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--line);
}
.nav-top {
display: flex;
align-items: center;
gap: 16px;
padding: 13px 0 9px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
width: 40px; height: 40px; border-radius: 13px;
background: linear-gradient(140deg, var(--mint) 0%, #5FC9B8 55%, var(--coral) 130%);
display: grid; place-items: center;
box-shadow: 0 8px 20px rgba(53, 176, 160, .3);
flex: 0 0 auto;
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-txt strong { display: block; font-size: 16.5px; letter-spacing: .02em; color: var(--ink); }
.brand-txt span { display: block; font-size: 11px; color: var(--muted-2); letter-spacing: .16em; text-transform: uppercase; }
.nav-spacer { flex: 1 1 auto; }
.nav-cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
padding: 9px 17px; border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--mint) 0%, var(--mint-d) 100%);
box-shadow: 0 8px 20px rgba(30, 140, 126, .26);
transition: transform .2s ease, box-shadow .2s ease;
white-space: nowrap;
}
.nav-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(30, 140, 126, .34); }
/* 入口页页头右上角的后台入口（按钮文案「登录」）：做成描边次级样式，
不与主 CTA（简体中文）抢焦点。admin.html 刻意不进导航，
这里是进后台的唯一站内入口（能不能读到数据由数据库 RLS 决定）。 */
.nav-admin {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
padding: 8px 15px; border-radius: 999px;
color: var(--mint-d);
background: #fff;
border: 1px solid var(--mint-l2);
white-space: nowrap;
transition: color .18s, border-color .18s, background .18s;
}
.nav-admin:hover { color: var(--mint-d); border-color: var(--mint);
background: var(--surface-2); }
.nav-burger {
display: none;
width: 42px; height: 38px;
border: 1px solid var(--line); background: #fff;
border-radius: 12px; cursor: pointer;
align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav-burger span { width: 17px; height: 2px; background: var(--ink-2); border-radius: 2px; transition: .25s; }
.nav-main { overflow: hidden; }
.nav-links {
display: flex; gap: 4px; flex-wrap: wrap;
padding: 3px 0 11px;
margin: 0; list-style: none;
}
.nav-links li { margin: 0; }
.nav-links a {
display: block;
font-size: 13.5px;
color: var(--ink-2);
padding: 7px 13px;
border-radius: 999px;
transition: background .18s ease, color .18s ease;
white-space: nowrap;
}
.nav-links a:hover { background: var(--mint-l); color: var(--mint-d); }
.nav-links a.active {
background: linear-gradient(135deg, var(--mint) 0%, #4FC2B1 100%);
color: #fff;
box-shadow: 0 6px 16px rgba(53, 176, 160, .28);
}
/* ---------------- Hero ---------------- */
.hero { padding: 54px 0 30px; position: relative; overflow: hidden; }
.hero-grid {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 46px;
align-items: center;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
color: var(--mint-d);
background: var(--mint-l);
border: 1px solid var(--mint-l2);
padding: 6px 14px; border-radius: 999px;
margin-bottom: 18px;
}
.hero h1 { font-size: 2.6rem; line-height: 1.28; margin-bottom: 16px; }
.hero h1 em {
font-style: normal;
background: linear-gradient(100deg, var(--mint-d) 0%, #4FC2B1 45%, var(--coral) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.hero-lead { font-size: 15.5px; color: var(--muted); max-width: 560px; margin-bottom: 26px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.btn {
display: inline-flex; align-items: center; gap: 7px;
font-size: 14px; font-weight: 600;
padding: 12px 24px; border-radius: 999px;
border: 1px solid transparent; cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
font-family: inherit;
}
.btn-primary {
color: #fff;
background: linear-gradient(135deg, var(--mint) 0%, var(--mint-d) 100%);
box-shadow: 0 12px 26px rgba(30, 140, 126, .26);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(30, 140, 126, .34); }
.btn-warm {
color: #fff;
background: linear-gradient(135deg, #FFA382 0%, var(--coral-d) 100%);
box-shadow: var(--shadow-warm);
}
.btn-warm:hover { color: #fff; transform: translateY(-2px); }
.btn-ghost {
color: var(--ink-2); background: #fff;
border-color: var(--line);
box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { color: var(--mint-d); border-color: var(--mint-l2); transform: translateY(-2px); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.hero-stats .stat b { display: block; font-size: 1.5rem; font-family: var(--ff-num); color: var(--mint-d); line-height: 1.2; }
.hero-stats .stat span { font-size: 12.5px; color: var(--muted); }
.hero-art {
position: relative;
border-radius: var(--radius-xl);
background: linear-gradient(150deg, #FFFFFF 0%, #F4FBF9 60%, #FFF7F2 100%);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 24px;
overflow: hidden;
}
.hero-art::after {
content: ""; position: absolute; inset: auto -40px -60px auto;
width: 190px; height: 190px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,143,107,.22), rgba(255,143,107,0) 70%);
}
.hero-art svg { position: relative; z-index: 1; }
/* ---------------- 区块 ---------------- */
.section { padding: 46px 0; }
.section-head { max-width: 720px; margin-bottom: 28px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-kicker {
font-size: 12px; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--coral-d); margin-bottom: 9px;
}
.section-head h2 { font-size: 1.75rem; margin-bottom: 10px; }
.section-head p { color: var(--muted); font-size: 14.5px; margin-bottom: 0; }
.section-alt {
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 22%, rgba(255,255,255,.72) 78%, rgba(255,255,255,0) 100%);
}
/* ---------------- 卡片 ---------------- */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow-xs);
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
position: relative;
overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--mint-l2); }
.card-flat:hover { transform: none; box-shadow: var(--shadow-xs); border-color: var(--line); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card-ico {
width: 44px; height: 44px; border-radius: 14px;
display: grid; place-items: center; margin-bottom: 14px;
background: var(--mint-l); color: var(--mint-d);
}
.card-ico svg { width: 22px; height: 22px; }
.ico-coral { background: var(--coral-l); color: var(--coral-d); }
.ico-amber { background: var(--amber-l); color: #B9821A; }
.ico-sky { background: var(--sky-l); color: #3B85B8; }
.ico-lilac { background: var(--lilac-l); color: #6F5FC0; }
.card-link { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }
.card-link::after { content: "→"; transition: transform .2s ease; }
.card:hover .card-link::after { transform: translateX(3px); }
/* 公司卡 */
.co-card { padding: 20px; }
/* .co-head 是 grid 不是 flex：LOGO 相框（卡片版 128×54）占满左侧两行，
右侧第一行放公司名、第二行放官网药丸。窄卡上这三样在几何上不可能同行
——「中国太平洋人寿（香港）」这类 12 字名 + 完整域名就超过内容宽，
硬塞会把中文名挤成逐字竖排。不要再改回 flex 或强行同排。 */
.co-head {
display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: 13px; row-gap: 5px; align-items: start;
margin-bottom: 13px;
}
.co-head > .co-logo { grid-area: 1 / 1 / 3 / 2; }
.co-head > span:nth-child(2) { grid-area: 1 / 2 / 2 / 3; min-width: 0; }
.co-web {
grid-area: 2 / 2 / 3 / 3; justify-self: end; max-width: 100%;
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
font-family: var(--ff-num);
color: var(--mint-d); background: var(--surface-2);
border: 1px solid var(--line); border-radius: 999px;
padding: 4px 10px 4px 9px; white-space: nowrap; text-decoration: none;
transition: background .16s, border-color .16s, color .16s;
}
.co-web:hover { background: var(--mint-l); border-color: var(--mint-l2); }
.co-web svg { flex: 0 0 auto; opacity: .72; }
.co-logo {
width: 48px; height: 48px; border-radius: 15px; flex: 0 0 auto;
display: grid; place-items: center;
font-weight: 800; font-size: 15px; letter-spacing: .01em;
font-family: var(--ff-num);
}
/* 有官方 LOGO 素材时改用真标识：白底圆角相框 + 原比例完整显示（绝不裁剪、不换色）。
高度固定、宽度自适应，方形标与横版字标都放得下；素材缺失时上面那条文字色块仍然生效。 */
.co-logo.co-logo--img {
display: block; /* 不用 grid：place-items:center 会让子项百分比高度失去参照 */
width: 128px; max-width: 100%; height: 54px;
padding: 6px 8px; border-radius: 15px;
background: #fff; border: 1px solid var(--line);
}
.co-logo.co-logo--img img {
display: block; width: 100%; height: 100%;
object-fit: contain;
}
/* 只提供白色版标识的保司（见 core.LOGO_DARK）：白 logo 配深色头部是官方既有组合，
容器沿用该配色，否则白底上完全看不见 */
body .co-logo.co-logo--img.co-logo--dark {
background: #123B4A; border-color: #123B4A;
}
/* 中文长名（「中国太平洋人寿（香港）」12 字）在窄卡里必然折成两行，
行高收紧一点，别把头部撑得太高 */
.co-name { font-size: 15.5px; font-weight: 700; margin: 0 0 2px; }
/* —— 首页「13 家保险公司速览」的紧凑卡 ——
文字排版与保司介绍页**同构**：公司名 → 英文名 → 官网药丸（右对齐）三行依次排开，
LOGO 相框在左侧跨满三行。两页唯一差别是尺寸档位：相框 104×42、药丸 11px。
三个行号必须成套：名字栏 1/3、药丸 3/4、LOGO 1/4；并且药丸必须由 build.co_chip(web=True)
输出为 .co-head 的**直接子元素**——嵌在名字那个 里它就退化成普通流内容、
自己的 grid-area 全失效，会跟英文名挤在同一行。 */
.co-card--compact .co-head {
grid-template-rows: auto auto auto;
}
.co-card--compact .co-head > .co-logo { grid-area: 1 / 1 / 4 / 2; }
.co-card--compact .co-logo.co-logo--img {
width: 104px; height: 42px; padding: 5px 7px; border-radius: 13px;
}
.co-card--compact .co-head > span:nth-child(2) {
grid-area: 1 / 2 / 3 / 3;
}
.co-card--compact .co-web {
font-size: 11px; padding: 3px 9px 3px 8px; letter-spacing: 0;
grid-area: 3 / 2 / 4 / 3; justify-self: end;
}
.co-en { font-size: 11.5px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; }
/* —— 推广优惠页：13 家保司官网优惠专页的直达按钮 ——
与站内其他卡片不同，这里是「按钮」不是「资料卡」：整卡可点（）、
内容居中，LOGO 在上、名字/英文/药丸依次向下。LOGO 沿用 .co-logo 体系，
只换一档尺寸（118×46）。`.pj-card--alt` 给没有独立优惠专页的保司
（太保寿险香港），药丸降级为次要样式 —— 别让它看起来跟真优惠入口一样。 */
.pj-card {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 2px; padding: 20px 16px 18px; text-decoration: none; color: inherit;
}
.pj-card .co-logo.co-logo--img { width: 118px; height: 46px; padding: 5px 7px; border-radius: 14px; }
.pj-card .co-logo:not(.co-logo--img) { width: 46px; height: 46px; border-radius: 14px; font-size: 14px; }
.pj-name { font-size: 15px; font-weight: 700; line-height: 1.4; margin-top: 10px; }
.pj-en { font-size: 10.5px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; }
/* 标注行：13 张卡都占位（没有标注的留空），min-height 撑住行高，
否则多出一行的卡片会把同网格行的另外两张一起拉高、出现两种卡高 */
.pj-no {
display: block; height: 16px; line-height: 16px; overflow: hidden;
margin-top: 4px; font-size: 10.5px; color: var(--muted-2);
}
.pj-go {
display: inline-flex; align-items: center; gap: 5px; margin-top: 11px;
padding: 6px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700; color: #fff; background: var(--mint);
/* 基础态也留一圈透明边框：降级态（.pj-card--alt）只是把边框显色，
否则它会比正常药丸高出 2px，同一网格行的卡片就跟着差 4px */
border: 1px solid transparent;
transition: background .18s ease, border-color .18s ease;
}
.pj-card:hover .pj-go { background: var(--mint-d); }
.pj-host { margin-top: 7px; font-size: 10.5px; color: var(--muted-2); font-family: var(--ff-num); }
.pj-card--alt .pj-go { color: var(--mint-d); background: var(--surface-2); border-color: var(--line); }
.pj-card--alt:hover .pj-go { background: var(--mint-l2); }
.co-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.co-desc { font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; }
.co-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.co-list li { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); margin-bottom: 5px; }
.co-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); margin-top: 8px; flex: 0 0 auto; }
/* 储蓄分红 / 危疾卡片：底部多一个「前往官网产品页」外链。
卡片改成纵向 flex，链接用 margin-top:auto 顶到卡底 —— 三行参数里
「趸缴 / 2 / 3 / 5 / 10 年缴」「10 / 15 / 20 / 25 年缴」这类长值会折行，
卡片高度因此不齐，不顶到卡底按钮就会参差。
只在 .co-card--sav / .co-card--cri 上生效，不影响其它页的 .co-card。 */
.co-card--sav, .co-card--cri { display: flex; flex-direction: column; }
.co-link { margin-top: auto; padding-top: 14px; }
.co-link a {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600;
color: var(--mint-d); background: var(--mint-l);
border: 1px solid var(--mint-l2); border-radius: 999px;
padding: 7px 14px; text-decoration: none;
transition: background .2s ease, border-color .2s ease;
}
.co-link a:hover { background: var(--mint-l2); border-color: var(--mint); }
/* 每家保司只推一款产品，所以「产品名」才是卡片的核心信息 —— 放在公司头之下、标签之上。
用 h3 是为了语义（卡片里的标题），字号压到 15.5px 免得把三行参数挤下去。 */
.prod-name { margin: 14px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); }
/* ---------------- 标签 ---------------- */
.tag {
display: inline-block;
font-size: 11.5px; font-weight: 600;
padding: 3px 10px; border-radius: 999px;
background: var(--surface-2); color: var(--ink-2);
border: 1px solid var(--line);
white-space: nowrap;
}
.tag-mint { background: var(--mint-l); color: var(--mint-d); border-color: var(--mint-l2); }
.tag-coral { background: var(--coral-l); color: var(--coral-d); border-color: #FFDCCF; }
.tag-amber { background: var(--amber-l); color: #A87715; border-color: #FBE6B8; }
.tag-sky { background: var(--sky-l); color: #3679A9; border-color: #D3E9F9; }
.tag-lilac { background: var(--lilac-l); color: #6F5FC0; border-color: #E2DBF8; }
/* ---------------- 筛选条 ---------------- */
.filterbar {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
background: rgba(255,255,255,.8);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 22px;
box-shadow: var(--shadow-xs);
}
.filterbar .fl-label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.chip {
font-size: 12.5px; font-family: inherit;
padding: 7px 15px; border-radius: 999px;
border: 1px solid var(--line);
background: #fff; color: var(--ink-2);
cursor: pointer; transition: .18s;
white-space: nowrap;
}
.chip:hover { border-color: var(--mint-l2); color: var(--mint-d); background: var(--mint-l); }
.chip.on {
background: linear-gradient(135deg, var(--mint) 0%, #4FC2B1 100%);
border-color: transparent; color: #fff; font-weight: 600;
box-shadow: 0 6px 15px rgba(53,176,160,.26);
}
.filter-count { margin-left: auto; font-size: 12.5px; color: var(--muted-2); }
.search-input {
font-family: inherit; font-size: 13.5px;
padding: 9px 16px; border-radius: 999px;
border: 1px solid var(--line); background: #fff;
color: var(--ink); outline: none; min-width: 190px;
transition: border-color .2s, box-shadow .2s;
}
.search-input::placeholder { color: var(--muted-2); }
.search-input:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(53,176,160,.12); }
.empty-note {
display: none;
text-align: center; padding: 48px 20px;
color: var(--muted); font-size: 14px;
border: 1px dashed var(--line); border-radius: var(--radius);
background: rgba(255,255,255,.6);
}
/* ---------------- 表格 ---------------- */
.table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-xs); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
table.data th {
text-align: left; font-weight: 600; font-size: 12.5px;
color: var(--ink-2); background: var(--surface-2);
padding: 13px 16px; white-space: nowrap;
border-bottom: 1px solid var(--line);
position: sticky; top: 0;
}
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .16s; }
table.data tbody tr:hover { background: var(--mint-l); }
table.data .strong { color: var(--ink); font-weight: 600; }
table.data .num { font-family: var(--ff-num); text-align: right; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--mint-d); }
th.sortable::after { content: " ↕"; color: var(--muted-2); font-size: 10px; }
/* ---------------- 分红实现率条 ---------------- */
.ratio-list { display: grid; gap: 10px; }
.ratio-row {
display: grid; grid-template-columns: 1fr 96px;
gap: 14px; align-items: center;
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: 13px 16px;
box-shadow: var(--shadow-xs);
}
.ratio-name { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.ratio-name small { font-weight: 400; color: var(--muted-2); margin-left: 6px; font-size: 11.5px; }
.bar { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.22,.9,.3,1); }
.bar-mint > i { background: linear-gradient(90deg, #6ED3C3, var(--mint-d)); }
.bar-amber > i { background: linear-gradient(90deg, #FFD98A, var(--amber)); }
.bar-coral > i { background: linear-gradient(90deg, #FFB79D, var(--coral-d)); }
.ratio-val { text-align: right; font-family: var(--ff-num); font-weight: 700; font-size: 15px; }
.ratio-val.mint { color: var(--mint-d); }
.ratio-val.amber { color: #B9821A; }
.ratio-val.coral { color: var(--coral-d); }
.ratio-sub { font-size: 11px; color: var(--muted-2); font-family: var(--ff); font-weight: 400; }
/* ---------------- 分红实现率：官网公示页入口 ---------------- */
/* 站内不存实现率数值，这两处都只是「回到官方来源」的入口。
.fl-grid 首页那 13 个药丸用；.fl-link 在首页与实现率页的表格里共用。
刻意不复用 .co-web —— 那条规则带 grid-area，在 / flex 容器里会被忽略。 */
.fl-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-link {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px 5px 10px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--line);
font-family: var(--ff-num); font-size: 11.5px; font-weight: 600;
color: var(--mint-d); text-decoration: none; white-space: nowrap;
transition: background .16s, border-color .16s;
}
.fl-link:hover { background: var(--mint-l); border-color: var(--mint-l2); }
.fl-link svg { flex: 0 0 auto; opacity: .72; }
/* 表格里的红利类别一列：允许折行，别把表格撑出横向滚动 */
.data td.cats { font-size: 12px; color: var(--ink-2); min-width: 180px; }
/* ---------------- 步骤 / 时间线 ---------------- */
.steps { display: grid; gap: 14px; counter-reset: s; }
.step {
display: grid; grid-template-columns: 44px 1fr; gap: 16px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px; box-shadow: var(--shadow-xs);
}
.step-no {
width: 40px; height: 40px; border-radius: 13px;
display: grid; place-items: center;
font-family: var(--ff-num); font-weight: 700; font-size: 15px;
background: var(--mint-l); color: var(--mint-d);
}
.step:nth-child(2n) .step-no { background: var(--coral-l); color: var(--coral-d); }
.step:nth-child(3n) .step-no { background: var(--amber-l); color: #A87715; }
.step h3 { font-size: 15px; margin-bottom: 5px; }
.step p { font-size: 13.5px; color: var(--muted); margin: 0; }
/* ---------------- 折叠 ---------------- */
details.acc {
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-sm); margin-bottom: 10px;
box-shadow: var(--shadow-xs); overflow: hidden;
}
details.acc > summary {
cursor: pointer; list-style: none;
padding: 15px 20px; font-weight: 600; font-size: 14px;
color: var(--ink); display: flex; align-items: center; gap: 10px;
transition: background .18s;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before {
content: "+"; font-family: var(--ff-num); font-weight: 700;
color: var(--mint); font-size: 16px; width: 18px; flex: 0 0 auto;
}
details.acc[open] > summary { background: var(--mint-l); color: var(--mint-d); }
details.acc[open] > summary::before { content: "–"; }
details.acc .acc-body { padding: 4px 20px 18px 48px; font-size: 13.5px; color: var(--ink-2); }
details.acc .acc-body ul { margin-bottom: 0; }
/* ---------------- 计算器 ---------------- */
.calc {
background: linear-gradient(150deg, #FFFFFF 0%, #F5FBF9 100%);
border: 1px solid var(--line); border-radius: var(--radius-xl);
padding: 26px; box-shadow: var(--shadow);
}
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field input, .field select {
font-family: inherit; font-size: 14px; padding: 10px 14px;
border-radius: var(--radius-sm); border: 1px solid var(--line);
background: #fff; color: var(--ink); outline: none;
transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(53,176,160,.12); }
.calc-out {
margin-top: 18px; padding: 20px 22px;
border-radius: var(--radius); background: var(--mint-l);
border: 1px solid var(--mint-l2);
display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
}
.calc-out .o b { display: block; font-family: var(--ff-num); font-size: 1.4rem; color: var(--mint-d); line-height: 1.25; }
.calc-out .o span { font-size: 12px; color: var(--muted); }
.hint { font-size: 12px; color: var(--muted-2); margin-top: 10px; }
/* 咨询表单提交反馈：成功/失败用颜色区分，文案本体全部来自内容层（三语各一份） */
.hint[data-lead-msg].is-ok { color: var(--mint-d); }
.hint[data-lead-msg].is-err { color: var(--coral-d); }
/* 蜜罐字段：正常访客看不见、Tab 也跳不到（见 app.js 的机器人判断）。
刻意不用 display:none —— 部分机器人会跳过「已隐藏」的字段，这里用离屏摆放。 */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* ---------------- 保障缺口试算（计划书分析页）----------------
文案全部由 build.py 按语言渲染进 HTML，这里只做两件事：
① 按卡片的 data-tier 挑出该显示的那一个徽章与那一条建议；
② 按档位换颜色。
下面几组 data-tier 规则看着「重复」，但那是刻意的 —— 换来的是 app.js 里
一个字的文案都不必出现（IRR 计算器当年把「倍」「不适用」写死在共用脚本里，
英文页因此直接把中文印了出来）。 */
.gap {
background: linear-gradient(150deg, #FFFFFF 0%, #F5FBF9 100%);
border: 1px solid var(--line); border-radius: var(--radius-xl);
padding: 26px; box-shadow: var(--shadow);
}
.gap-group { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.gap-legend {
display: flex; align-items: center; gap: 9px; padding: 0;
font-size: 15px; font-weight: 600; color: var(--ink);
}
.gap-legend-ico {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
display: grid; place-items: center; background: var(--mint-l); color: var(--mint-d);
}
.gap-legend-ico svg { width: 17px; height: 17px; }
.gap-sub { font-size: 12.5px; color: var(--muted); margin: 5px 0 12px 39px; }
/* 输入栏用 auto-fit：桌面四到五列、平板两三列、手机一列，全由容器宽度决定，不需要断点 */
.gap-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 13px; }
/* 标签折行时把「标签 + 输入框」整体压到格子底部，让同一行的输入框对齐。
英文的标签明显更长（Outstanding debt (mortgage, car loan and similar)、
Monthly spending in retirement (today's money) 都会折成两行），
不处理的话那一格的输入框会独自矮下去，整行看着像没对齐。
改用 min-height 撑高标签不行：单行标签下面会多出一段空白，比错位更显脏。
只作用于本工具的 .gap-fields —— .field 是 IRR 计算器也在用的公共类。 */
.gap-fields .field { justify-content: flex-end; }
.gap-actions { margin-top: 4px; }
.gap-idle {
margin: 22px 0 0; padding: 18px; text-align: center;
font-size: 13px; color: var(--muted);
background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius);
}
.gap[data-state="done"] [data-gap-idle] { display: none; }
.gap[data-state="done"] .gap-results { display: grid; }
.gap-results {
display: none; margin-top: 22px; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
}
/* 口径说明用 --muted 而不是更浅的 --muted-2：这段文字说的是「结果偏保守 / 偏乐观」
这个取舍，属于必须让人看见的内容，不该被排成浅灰脚注。 */
.gap-caveat { margin-top: 16px; font-size: 12px; line-height: 1.75; color: var(--muted); }
.gap-caveat b { color: var(--ink-2); }
.gap-card { padding: 20px; display: flex; flex-direction: column; }
.gap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gap-head h3 { font-size: 15px; margin: 0; }
.gap-badge {
display: none; flex: 0 0 auto;
font-size: 11.5px; font-weight: 600; line-height: 1;
padding: 6px 11px; border-radius: 999px;
background: var(--mint-l); color: var(--mint-d); border: 1px solid var(--mint-l2);
}
.gap-badge--idle { background: var(--surface-2); color: var(--muted-2); border-color: var(--line); }
/* 结论徽章：只显示与卡片 data-tier 相符的那一个 */
.gap-card[data-tier="0"] .gap-badge[data-tier="0"],
.gap-card[data-tier="1"] .gap-badge[data-tier="1"],
.gap-card[data-tier="2"] .gap-badge[data-tier="2"],
.gap-card[data-tier="3"] .gap-badge[data-tier="3"],
.gap-card[data-tier="na"] .gap-badge[data-tier="na"],
.gap-card:not([data-tier]) .gap-badge--idle { display: inline-block; }
/* 建议文案：同理，只显示相符的那一条 */
.gap-advices > p { display: none; }
.gap-card[data-tier="0"] .gap-advices > p[data-tier="0"],
.gap-card[data-tier="1"] .gap-advices > p[data-tier="1"],
.gap-card[data-tier="2"] .gap-advices > p[data-tier="2"],
.gap-card[data-tier="3"] .gap-advices > p[data-tier="3"],
.gap-card[data-tier="na"] .gap-advices > p[data-tier="na"] { display: block; }
/* 档位配色：0 充足（绿）→ 1 略有（琥珀）→ 2 明显（珊瑚）→ 3 较大（深珊瑚） */
.gap-card[data-tier="0"] .gap-badge { background: var(--mint-l); color: var(--mint-d); border-color: var(--mint-l2); }
.gap-card[data-tier="1"] .gap-badge { background: var(--amber-l); color: #A87715; border-color: #FBE6B8; }
.gap-card[data-tier="2"] .gap-badge { background: var(--coral-l); color: var(--coral-d); border-color: #FFDCCF; }
.gap-card[data-tier="3"] .gap-badge { background: var(--coral-d); color: #fff; border-color: var(--coral-d); }
.gap-card[data-tier="na"] .gap-badge { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.gap-big { margin-top: 15px; }
.gap-when { display: block; font-size: 12px; color: var(--muted); }
.gap-big b { display: block; font-family: var(--ff-num); font-size: 1.5rem; line-height: 1.25; color: var(--coral-d); }
.gap-big [data-when="ok"] { display: none; }
.gap-card[data-full] .gap-big [data-when="gap"] { display: none; }
.gap-card[data-full] .gap-big [data-when="ok"] { display: block; }
.gap-card[data-full] .gap-big b { color: var(--mint-d); }
.cur { font-size: .72em; opacity: .78; }
/* 单位词（中文「倍」/ 英文「×」）紧贴数字，不留左边距 —— 留了之后英文会读成
「4.56 ×」，像两个独立的记号。 */
.calc-unit { font-size: .66em; opacity: .85; }
/* 轨道用 --mint-l2 而不是更浅的 --line：白卡上 --line（#E4F1ED）几乎看不见，
会让人分不清填充条到哪儿为止 —— 那样这条进度条就等于没画。
档位配色：0 充足（绿）→ 1 略有（琥珀）→ 2 明显（珊瑚）→ 3 较大（深珊瑚） */
.gap-bar { height: 8px; margin-top: 12px; border-radius: 999px; background: var(--mint-l2); overflow: hidden; }
.gap-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--mint); transition: width .35s ease, background .3s ease; }
.gap-card[data-tier="1"] .gap-bar i { background: var(--amber); }
.gap-card[data-tier="2"] .gap-bar i { background: var(--coral); }
.gap-card[data-tier="3"] .gap-bar i { background: var(--coral-d); }
.gap-peryear {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
margin: 12px 0 0; font-size: 12px; color: var(--muted);
}
.gap-peryear b { font-family: var(--ff-num); font-size: 13.5px; color: var(--ink-2); }
.gap-peryear.is-off { display: none; }
.gap-tiles {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--line);
}
/* 单元格也做成「压到底部」：英文标签（Suggested cover / Cover you hold）
在手机上会折成两行，不让它把数字顶下去，否则同一行的三个数字高低不齐。 */
.gap-tiles > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.gap-tiles dt { font-size: 11px; line-height: 1.45; color: var(--muted-2); margin-bottom: 3px; }
.gap-tiles dd { margin: 0; font-family: var(--ff-num); font-size: 13px; color: var(--ink); }
.gap-advices { margin-top: 15px; }
.gap-advices > p { font-size: 13px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.gap-formula {
margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line);
font-size: 11.5px; line-height: 1.6; color: var(--muted-2);
}
@media (max-width: 640px) {
.gap { padding: 20px; }
.gap-sub { margin-left: 0; }
.gap-big b { font-size: 1.36rem; }
.gap-tiles dd { font-size: 12px; }
}
/* ---------------- 产品对比页 · 走势对比图（储蓄 / 危疾各一张）----------------
图由 app.js 画成 inline SVG（零依赖，不引任何图表库）；这里只负责容器与配色。
⚠️ **曲线颜色只在这里定义**（.tr-a / .tr-b），app.js 里一个颜色都不写 ——
换色只改这一处，也不会让三种语言各差一点。
两条曲线：A = 薄荷（站内主色），B = 珊瑚（对比色，与站内暖色系一致）。
色块与输入组的左边框同色，所以「哪个输入对应哪条线」不用看图例。 */
.trend {
background: linear-gradient(150deg, #FFFFFF 0%, #F5FBF9 100%);
border: 1px solid var(--line); border-radius: var(--radius-xl);
padding: 24px; box-shadow: var(--shadow);
}
.trend + .trend { margin-top: 22px; }
.trend-head h3 { margin: 0 0 4px; font-size: 15.5px; }
.trend-lead { margin: 0 0 18px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.trend-ctl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.trend-plan {
border: 1px solid var(--line); border-radius: var(--radius); margin: 0;
padding: 14px 16px 16px; background: var(--surface); min-width: 0;
}
.trend-plan--a { border-left: 3px solid var(--mint-d); }
.trend-plan--b { border-left: 3px solid var(--coral-d); }
.trend-plan-name {
display: flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 0 4px;
}
.trend-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.trend-plan--a .trend-sw { background: var(--mint-d); }
/* 图例色块与曲线同款式：A 实心、B 虚线 —— 否则色块说「两条都是实线」，
而图上方案 B 是虚的，看起来像两个不同的东西。 */
.trend-plan--b .trend-sw {
background: repeating-linear-gradient(90deg, var(--coral-d) 0 4px, transparent 4px 8px);
}
.trend-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
/* 公司下拉独占一行：13 家的名字长短差很多，挤在半行会被截断成「中国人寿（海…」
⚠️ 必须用直接子选择器 `>`：系列输入里的每一格也是 .field，而「回本」「第 1 年」
正好是 .trend-series-g 的第一个孩子 —— 写成后代选择器时那一格会被拉满整行，
剩下的 8 / 12 格才排网格，看着像第一个格子特别重要。 */
.trend-fields > .field:first-child { grid-column: 1 / -1; }
/* 系列输入（储蓄的倍数时点 / 危疾的各年度保额）：一格一个，密集排布。
auto-fill + minmax(92px) 让 9 / 13 格在宽屏排成整齐几行，窄屏自动降到两列 ——
写死列数的话，13 格的危疾表在手机上会挤成一列竖条。
⚠️ 这两条 grid-column 必须写全：格子本身是 .field，不带这两个类就会被塞进
半栏，13 个输入框会跟「年缴保费」挤在一起，看不出是一组。 */
.trend-fields > .field-wide { grid-column: 1 / -1; }
.trend-fields > .trend-series { grid-column: 1 / -1; }
.trend-series-h { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.trend-series-g {
display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 10px 12px; margin-top: 10px;
}
.trend-series-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--muted-2); }
/* 密集格子里把字号收小：13 个「第 128 年」用常规尺寸会把 fieldset 拉得很长 */
.trend-series .field { gap: 4px; }
.trend-series .field label { font-size: 11.5px; }
.trend-series .field input { padding: 7px 9px; font-size: 13px; }
/* 倍数时点填乱了（比上一格小或相等）：标红 + 下方一句说明，而不是静默接受 ——
静默接受等于把一个物理上不存在的折线形态画给读者看。 */
.field input.is-warn { border-color: var(--coral-d); background: var(--coral-l); }
.trend-warn {
margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm);
background: var(--coral-l); color: var(--coral-d); font-size: 12px; line-height: 1.7;
}
.trend-warn[hidden] { display: none; }
.trend-figure { margin-top: 20px; }
.trend-svg { display: block; width: 100%; height: auto; }
.trend-empty { margin: 0; padding: 44px 0; text-align: center; color: var(--muted-2); }
/* SVG 内部：网格 / 坐标轴 / 刻度 / 曲线 */
.trend-svg .tr-grid { stroke: var(--line); stroke-width: 1; }
.trend-svg .tr-grid-x { stroke: var(--line-2); stroke-dasharray: 3 4; }
.trend-svg .tr-axis { stroke: var(--mint-l2); stroke-width: 1.4; }
.trend-svg .tr-tick { font-family: var(--ff-num); font-size: 10.5px; fill: var(--muted-2); }
.trend-svg .tr-axis-title { font-size: 11.5px; fill: var(--muted); }
.trend-svg .tr-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.trend-svg .tr-a { stroke: var(--mint-d); }
.trend-svg .tr-b { stroke: var(--coral-d); }
/* 方案 B 画成虚线：默认参数下两条曲线数值完全一样，两条实线会严丝合缝地叠在
一起，读者只看得见后画的那条（珊瑚色），会以为图坏了。虚实之分让重合时
两条都在。⚠️ 这条必须限定在 .tr-line 上 —— 若写成 .tr-b，同一个类名还挂在
总保费虚线、时点竖线与圆点上，圆点的描边会被切成虚线。 */
.trend-svg .tr-line.tr-b { stroke-dasharray: 7 5; }
.trend-svg .tr-total { stroke-width: 1.3; stroke-dasharray: 5 5; opacity: .55; }
/* 名义保额参考线：不绑曲线配色 —— 它不属于方案 A 或 B，是这款产品自己的基准 */
.trend-svg .tr-base { stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 2 4; opacity: .6; }
.trend-svg .tr-mark { stroke-width: 1; stroke-dasharray: 3 4; opacity: .45; }
.trend-svg .tr-dot { stroke: #fff; stroke-width: 1.6; }
.trend-svg .tr-dot.tr-a { fill: var(--mint-d); }
.trend-svg .tr-dot.tr-b { fill: var(--coral-d); }
.trend-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted-2); }
.trend-ms-wrap { margin-top: 16px; }
.trend-ms th, .trend-ms td { font-size: 12.5px; }
.trend-ms tbody th { font-weight: 600; color: var(--ink-2); text-align: left; }
/* 只有 3 列（时点 / 方案 A / 方案 B）。⚠️ 必须把 table.data 的 760px 最小宽度压回 0 ——
照抄那 760px 的话，手机上这张表会躲进横向滚动区：三个短列硬撑出 760px，
右半边永远藏在滚动里，等于白做一张对照表。与密码对照表（.wcode-table）同理。 */
/* ⚠️ 必须写成 table.data.trend-ms：单写 .trend-ms 的特异性（0,1,0）低于
table.data 的 760px（0,1,1），压不下去，页面上看不出任何异常 —— 表格照旧
横向滚动。（密码对照表用 .wcode .wcode-table 也是同一个道理，只是写法不同。） */
table.data.trend-ms { min-width: 0; }
.trend-caveat { margin: 16px 0 0; font-size: 12px; line-height: 1.75; color: var(--muted); }
/* 危疾图：选中的保司「保额会不会随时间增长」——文字由 app.js 按 data-sa-* 回填。
没选到机制（官方资料未列）时显示一枚灰药丸，而不是留空：留空看不出是「查过没有」
还是「这行坏了」。JS 未运行时整行不占位。 */
.trend-sa { display: flex; flex-wrap: wrap; gap: 5px; margin: -4px 0 0; }
.trend-sa:empty { display: none; }
.trend-sa .wtag { font-size: 10.5px; padding: 2px 7px; }
/* 它是「保险公司」下拉框的注脚，不是底下数字输入的标题 —— 必须跨满整行 */
.trend-fields > .trend-sa { grid-column: 1 / -1; }
.wtag.sa-tag-none { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
/* 危疾产品的保额机制核对表：13 家逐款列机制与官方出处 */
.trend-sa-wrap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.trend-sa-h { margin: 0 0 4px; font-size: 15.5px; }
.sa-table th, .sa-table td { font-size: 12.5px; vertical-align: top; }
.sa-table tbody th { font-weight: 600; color: var(--ink-2); text-align: left; white-space: nowrap; }
.sa-table td:last-child { white-space: nowrap; }
.sa-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.sa-note { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.7; color: var(--muted); }
.sa-src { font-size: 12px; font-weight: 600; color: var(--mint-d); }
/* 图例：三类机制各解释一次，避免在 13 行里把同一句重复 8 遍 */
.sa-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 13px; }
.sa-key li { display: grid; gap: 5px; justify-items: start; }
.sa-key .sa-note { margin-top: 0; }
@media (max-width: 980px) {
.trend-ctl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.trend { padding: 18px; }
.trend-fields { grid-template-columns: minmax(0, 1fr); }
/* 手机上系列格子固定两列：auto-fill 在 340px 宽里只会排出 3 列 100px 的窄条，
「第 128 年」这种标签会被压到换行 */
.trend-series-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 手机上核对表转为卡片式：三列并排会挤成一列竖条，长说明根本读不了 */
.sa-table, .sa-table thead, .sa-table tbody, .sa-table tr, .sa-table th, .sa-table td { display: block; }
.sa-table thead { display: none; }
.sa-table tbody tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sa-table tbody tr:last-child { border-bottom: 0; }
.sa-table tbody th { padding: 0 0 6px; font-size: 13px; }
.sa-table td { padding: 0; white-space: normal; }
.sa-table td:last-child { margin-top: 8px; }
}
/* ---------------- 通用小组件 ---------------- */
.notice {
display: flex; gap: 12px; align-items: flex-start;
background: var(--amber-l); border: 1px solid #FBE6B8;
border-radius: var(--radius); padding: 16px 20px;
font-size: 13px; color: #8A6414; margin-bottom: 24px;
}
.notice svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: #B9821A; }
.notice p { margin: 0; }
.notice-warm { background: var(--coral-l); border-color: #FFDCCF; color: #A8543A; }
.notice-warm svg { color: var(--coral-d); }
.notice-mint { background: var(--mint-l); border-color: var(--mint-l2); color: var(--mint-d); }
.notice-mint svg { color: var(--mint-d); }
.quote {
background: linear-gradient(135deg, var(--mint-l) 0%, #FFF6F0 100%);
border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px 24px;
font-size: 14px; color: var(--ink-2);
}
.quote b { color: var(--mint-d); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kv .k { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 15px; }
.kv .k span { display: block; font-size: 11.5px; color: var(--muted-2); margin-bottom: 3px; }
.kv .k b { font-size: 14px; color: var(--ink); font-weight: 600; }
.news-card { display: flex; flex-direction: column; gap: 10px; }
.news-date { font-family: var(--ff-num); font-size: 12px; color: var(--muted-2); letter-spacing: .02em; }
.news-card h3 { font-size: 15px; line-height: 1.5; margin: 0; }
.news-card p { font-size: 13px; color: var(--muted); margin: 0; }
/* 新闻配图：图来自后台，比例不可预知，而且新闻图常带文字或数据表格。
所以只限制高度、不固定画框比例，配 object-fit:contain —— 宁可留白也不裁。
（和轮播官方物料同一条规矩：裁一刀就是信息事故。） */
.news-thumb { border-radius: var(--radius-sm); overflow: hidden; background: var(--mint-l); }
.news-thumb img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; }
/* 来源行：这行是本站资讯可信度的落点，所以链接给足对比度并保留下划线 */
.news-src { font-size: 12.5px; color: var(--muted-2); }
.news-src a { color: var(--mint-d); text-decoration: none; border-bottom: 1px solid currentColor; }
.news-src a:hover { color: var(--mint); }
/* ---------------- 港险常识 ---------------- */
/* 术语卡是「名词 + 解释」，不是「图标 + 标题 + 一句说明」，所以不走 .card-ico。
主名用正文色、副名降一级并缩小：中英混排时两者等重会互相抢焦点。 */
.term-card { display: flex; flex-direction: column; gap: 8px; }
.term-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.term-name { font-size: 15px; color: var(--ink); }
.term-en { font-size: 12px; font-weight: 500; color: var(--muted-2); letter-spacing: .01em; }
.term-desc { font-size: 13.5px; line-height: 1.62; color: var(--muted); margin: 0; }
/* 同一 section 内的次级标题（如「六个最容易踩的坑」）：
左侧竖线让它明显从属于上面的流程，而不是另一个话题。 */
.sub-head {
font-size: 16px; margin: 34px 0 14px;
padding-left: 12px; border-left: 3px solid var(--mint);
}
/* ---- 术语区延伸：红利三大类（原生重绘，不是图片）----
参考物料是一张深蓝 + 黄 + 红的简体海报。这里按站点样式重画，不直接放图：
① 亮色整洁的主题里塞一张深色海报会自成一块；② 海报只有简体字形，
「紅利」「現金」在繁体页与英文页都对不上；③ 重画之后手机上能自然折行，
而不是把整张图缩到看不清。
面板用白底 + 细边框，让它在渐变背景上读起来像一张「图」，与上面的术语索引分开。 */
.bonus {
margin-top: 26px; padding: 26px 26px 22px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
}
.bonus-head { margin-bottom: 20px; }
.bonus-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--mint); }
.bonus-title { font-size: 1.22rem; margin: 6px 0 8px; color: var(--ink); }
.bonus-lead { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0; max-width: 780px; }
/* 三张卡用 auto-fit 而不是断点：桌面 3 列、平板 3 列、窄屏 2+1、手机 1 列，
全部由容器宽度决定 —— 加断点只会多两处要和别的规则对齐的地方。 */
.bonus-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.btype {
display: flex; flex-direction: column; gap: 10px;
padding: 16px 16px 14px; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--surface-2);
}
.btype-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.btype-tag { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mint-l); color: var(--mint-d); }
/* 图标复用 .card-ico 的底色 + .ico-* 的色调，只把尺寸收小、去掉下边距 ——
这一块不是卡片，用 44px 的图标会把标题挤下去。 */
.btype-ico { margin-bottom: 0; width: 38px; height: 38px; border-radius: 12px; flex: none; }
.btype-ico svg { width: 19px; height: 19px; }
/* keep-all：中文默认可以在任意两字之间断行，窄屏下「复归红利 / 归原红利 / 保额增值红利」
会被拆成「…保额增值红 / 利」—— 名字被腰斩是读得出来的错。
keep-all 只禁 CJK 字与字之间的断行，空格处照旧可以折，所以三段名字会在「/」旁断开。
⚠️ **只给名字用，不要推广到 .btype-points**：一段没有空格的整句中文加了 keep-all
就变成一条不可断的长行，直接横向溢出。 */
.btype-name { display: flex; align-items: baseline; gap: 7px; font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0; word-break: keep-all; }
.btype-no { font-family: var(--ff-num); font-size: 1.5rem; line-height: 1; color: var(--mint); flex: none; }
.btype-en { font-size: 11.5px; font-weight: 500; color: var(--muted-2); margin: -4px 0 0; }
.btype-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.btype-points li { position: relative; padding-left: 13px; font-size: 12.8px; line-height: 1.65; color: var(--muted); }
.btype-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--mint-l2); }
/* 结论压到卡片底部：三张卡的要点条数不同（4 / 4 / 5），不压底的话
「记忆」药丸会停在三个不同高度，横向一读就散。 */
.btype-foot { margin-top: auto; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.btype-memo { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--mint-d); background: var(--mint-l); border-radius: 999px; padding: 5px 12px; }
.btype-badge { font-size: 11px; font-weight: 600; color: var(--muted); }
/* 分类色只落在「标签 / 大序号 / 记忆药丸」三处，卡片底色保持中性 ——
三张卡整片换色就把页面从「清新」推向原海报那种海报感了。 */
.btype--annual .btype-tag,
.btype--annual .btype-memo { background: var(--amber-l); color: #A9761A; }
.btype--annual .btype-no { color: #B9821A; }
.btype--terminal .btype-tag,
.btype--terminal .btype-memo { background: var(--lilac-l); color: #6F5FC0; }
.btype--terminal .btype-no { color: #7E6FCF; }
.bonus-sub { font-size: 15px; margin: 24px 0 12px; padding-left: 11px; border-left: 3px solid var(--mint); }
.bonus-struct { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.bstruct { padding: 15px 16px; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--surface-2); }
.bstruct-name { font-size: 15px; color: var(--ink); }
/* 三段用「+」连成一个式子：拆成三行清单会把唯一的看点
——「两种结构到底换掉了哪一项」—— 弄丢。 */
.bstruct-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; margin: 10px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* 药丸里的词是整词（「保证现金价值」），同样不要被拆开 */
.bstruct-formula span { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 4px 9px; word-break: keep-all; }
.bstruct-formula i { font-style: normal; color: var(--mint); font-weight: 700; }
.bstruct-note { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
/* 只给中项（第 3 个孩子＝红利那一格）上色：这就是两种结构的差异所在 */
.bstruct--us .bstruct-formula span:nth-child(3) { border-color: #F3DFB8; background: var(--amber-l); color: #A9761A; }
.bstruct--uk .bstruct-formula span:nth-child(3) { border-color: var(--mint-l2); background: var(--mint-l); color: var(--mint-d); }
.bonus-memo { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--mint-l); border: 1px solid var(--mint-l2); }
.bonus-memo-main { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.bonus-memo-main b { color: var(--mint-d); }
.bonus-memo-note { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
/* 口径说明用 --muted（可读）而不是 --muted-2：这段话说的是「红利是非保证的」，
是这一块最不能读不清的一句。 */
.bonus-caveat { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
@media (max-width: 640px) {
.bonus { padding: 20px 16px 18px; border-radius: var(--radius); }
.bonus-title { font-size: 1.1rem; }
.bstruct { padding: 13px 13px 12px; }
}
/* ---- 储蓄页：提取密码（原生重绘，同红利块的路子）----
讲清「提领密码」这套行业说法，并解释产品卡上那行机制药丸是什么。
同样用白底面板，与上下的筛选条、产品卡区分开。 */
.wcode {
margin-top: 22px; padding: 24px 26px 20px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
}
.wcode-h { font-size: 15px; margin: 26px 0 10px; padding-left: 11px; border-left: 3px solid var(--mint); }
.wcode-what .wcode-h { margin-top: 0; }
.wcode-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.wcode-what p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); max-width: 900px; }
.wcode-what b { color: var(--mint-d); }
/* 读法三格：数字放大到 1.9rem，让「5 / 6 / 6」自己读成一条时间线 */
.wcode-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.wcode-part {
position: relative; padding: 14px 15px 13px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.wcode-part b { display: block; font-family: var(--ff-num); font-size: 1.9rem; line-height: 1; color: var(--mint); }
.wcode-part span { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wcode-part em { display: block; margin-top: 3px; font-style: normal; font-size: 12.3px; line-height: 1.6; color: var(--muted); }
/* 格与格之间的箭头。⚠️ 只在 720px 以上显示：三格 178px + 间距要 560px 才排得进一行，
容器不够宽时它会折行，箭头就指到空白处（比没有箭头更费解）。 */
@media (min-width: 720px) {
.wcode-part + .wcode-part::before {
content: ""; position: absolute; left: -9px; top: 26px;
width: 6px; height: 6px; border-top: 2px solid var(--mint-l2); border-right: 2px solid var(--mint-l2);
transform: rotate(45deg);
}
}
.wcode-note { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--mint-l); border: 1px solid var(--mint-l2); font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.wcode-note b { color: var(--mint-d); }
/* 密码对照表：只有两列。⚠️ 必须把 table.data 的 min-width 压回 0 ——
那是给 7 列的市场对比表设的，两列的表跟着抬到 760px，手机上就要横向拖一行空位。 */
.wcode .wcode-table { min-width: 0; }
.wcode-table th:first-child, .wcode-table td:first-child { width: 116px; }
.wcode-table code { font-family: var(--ff-num); font-size: 13.5px; font-weight: 700; color: var(--mint-d); background: var(--mint-l); border-radius: 7px; padding: 2px 8px; }
.wcode-mini { margin: 8px 0 0; font-size: 12px; line-height: 1.65; color: var(--muted); }
.wcode-mini b { color: var(--ink-2); }
/* 六种机制：复用 .card-flat，图标收到 36px —— 六张卡横排时 44px 会把标题推低 */
.wmech-grid { margin-top: 4px; }
.wmech { padding: 15px 15px 14px; }
.wmech-ico { margin-bottom: 10px; width: 36px; height: 36px; border-radius: 11px; }
.wmech-ico svg { width: 18px; height: 18px; }
/* keep-all：机制名是整词（「红利锁定／解锁」），窄屏被腰斩就难认 */
.wmech h4 { font-size: 14px; margin: 0 0 6px; color: var(--ink); word-break: keep-all; }
.wmech p { margin: 0; font-size: 12.6px; line-height: 1.7; color: var(--muted); }
/* 产品卡上的机制药丸行：压在「前往官网产品页」按钮之前 */
.co-wdraw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
.co-wdraw-lab { font-size: 11.5px; font-weight: 700; color: var(--muted); flex: none; }
.co-wdraw-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.wtag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); word-break: keep-all; }
.wtag.tag-mint { background: var(--mint-l); color: var(--mint-d); border-color: var(--mint-l2); }
.wtag.tag-coral { background: var(--coral-l); color: var(--coral-d); border-color: #FFDCCF; }
.wtag.tag-amber { background: var(--amber-l); color: #A87715; border-color: #FBE6B8; }
.wtag.tag-sky { background: var(--sky-l); color: #3679A9; border-color: #D3E9F9; }
.wtag.tag-lilac { background: var(--lilac-l); color: #6F5FC0; border-color: #E2DBF8; }
@media (max-width: 640px) {
.wcode { padding: 18px 15px 16px; border-radius: var(--radius); }
.wcode-table th:first-child, .wcode-table td:first-child { width: 84px; }
}
/* 市场对比表（7 列）不额外抬 min-width：桌面容器约 1136px，7 列摊开每列还有 160px
上下，中文一格能放十来个字，读得下去；而一旦把 min-width 抬到容器之上，表格就溢出
到 .table-scroll 的滚动区，桌面上白白藏起最后一列 —— 对比表少一列等于没比。
窄屏由 table.data 自带的 760px 最小宽度接管，正常横向滚动。
首列是行标签（市场名 / 年龄段），要整词显示：「新加坡」被折成「新加 / 坡」、
「中国内地」折成「中国 / 内地」都是读得出来的错。用 keep-all 而不是 nowrap ——
keep-all 只禁掉 CJK 字与字之间的断行，英文仍可在空格处折行；nowrap 会把
「Hong Kong, China」整条钉住，首列最小宽度从 73px 涨到 142px，英文页的 7 列表
就被顶到 1147px（容器 1134px），桌面上白白多出一条横向滚动。
也不能推到 table.data td.strong —— 那个类在别的页装公司名和产品名，会撑爆列。 */
table.data td.rowlab { word-break: keep-all; }
/* 中文行标签另加 nowrap：中文标签都很短（「中国内地」4 字、「18 - 25 岁」7 位），
钉住不会撑宽表格；而 keep-all 管不到空格，「18 - 25 岁」会在空格处折成
「18 - 25 / 岁」，一个「岁」孤零零挂在第二行。英文那条必须保留空格断点，
所以按语言分流，不能合并成一条规则。 */
html[lang^="zh"] table.data td.rowlab { white-space: nowrap; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
/* ---------------- 页脚 ---------------- */
.site-footer {
margin-top: 56px; padding: 42px 0 30px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 30%);
border-top: 1px solid var(--line);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.footer-grid h4 { font-size: 13px; color: var(--ink); margin-bottom: 12px; letter-spacing: .02em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.footer-grid li { margin-bottom: 7px; }
.footer-grid a { color: var(--muted); }
.footer-grid a:hover { color: var(--mint-d); }
.footer-about p { font-size: 13px; color: var(--muted); max-width: 320px; }
.footer-disc {
border-top: 1px solid var(--line); padding-top: 20px;
font-size: 12px; color: var(--muted-2); line-height: 1.8;
}
.footer-disc b { color: var(--muted); }
/* ---------------- 返回顶部 ----------------
bottom 让位给右下角常驻的 AI 客服按钮（.ai-fab 占 bottom 24 + 高 50）。 */
.to-top {
position: fixed; right: 22px; bottom: 88px; z-index: 70;
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--line); background: #fff;
color: var(--mint-d); cursor: pointer;
display: grid; place-items: center;
box-shadow: var(--shadow);
opacity: 0; pointer-events: none; transform: translateY(10px);
transition: .28s;
}
.to-top.on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--mint-l); }
/* ---------------- AI 客服 ----------------
右下角常驻气泡 + 展开面板。答案与界面文案都来自 assets/js/ai-kb..js
（由 build.py 生成），这里只管外观。 */
.ai-fab {
position: fixed; right: 22px; bottom: 24px; z-index: 80;
display: inline-flex; align-items: center; gap: 8px;
height: 50px; padding: 0 19px 0 14px;
border: 0; border-radius: 999px; cursor: pointer;
background: linear-gradient(135deg, var(--mint), var(--mint-d));
color: #fff; font-family: var(--ff); font-size: 13.5px; font-weight: 700;
letter-spacing: .01em;
box-shadow: 0 12px 28px rgba(30, 140, 126, .30);
transition: transform .18s ease, box-shadow .18s ease;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(30, 140, 126, .38); }
.ai-fab:focus-visible { outline: 3px solid var(--mint-l2); outline-offset: 3px; }
.ai-fab svg { flex: 0 0 auto; }
/* 呼吸光环：提示这里有人应答 */
.ai-fab::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
border: 2px solid var(--mint); pointer-events: none;
animation: aiPulse 3s ease-out infinite;
}
@keyframes aiPulse {
0% { opacity: .5; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(1.32); }
}
@media (prefers-reduced-motion: reduce) {
.ai-fab::after { animation: none; }
.ai-fab:hover { transform: none; }
}
.ai-panel {
position: fixed; right: 22px; bottom: 86px; z-index: 85;
width: 384px; max-width: calc(100vw - 32px);
height: min(566px, calc(100vh - 132px));
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
box-shadow: 0 24px 60px rgba(30, 140, 126, .18);
opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985);
transition: opacity .2s ease, transform .22s ease, visibility .2s;
}
.ai-panel.on { opacity: 1; visibility: visible; transform: none; }
.ai-head {
display: flex; align-items: center; gap: 11px; flex: 0 0 auto;
padding: 13px 13px 12px 15px;
background: linear-gradient(135deg, var(--mint-l), var(--surface-2));
border-bottom: 1px solid var(--line);
}
.ai-head-ico {
width: 36px; height: 36px; border-radius: 12px; flex: 0 0 auto;
display: grid; place-items: center; color: #fff;
background: linear-gradient(135deg, var(--mint), var(--mint-d));
}
.ai-head-txt { min-width: 0; flex: 1 1 auto; }
.ai-head-txt strong { display: block; font-size: 14.5px; color: var(--ink); }
.ai-head-txt span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.ai-close {
width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
border: 1px solid var(--line); background: #fff; color: var(--muted);
cursor: pointer; display: grid; place-items: center;
}
.ai-close:hover { background: var(--mint-l); color: var(--mint-d); }
.ai-log {
flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
padding: 16px 15px 8px; display: flex; flex-direction: column; gap: 12px;
}
.ai-msg { display: flex; gap: 8px; align-items: flex-start; }
.ai-msg--me { flex-direction: row-reverse; }
.ai-ava {
width: 26px; height: 26px; border-radius: 9px; flex: 0 0 auto;
display: grid; place-items: center; font-size: 10px; font-weight: 700;
background: var(--mint-l); color: var(--mint-d);
}
.ai-msg--me .ai-ava { background: var(--coral-l); color: var(--coral-d); }
.ai-bub {
max-width: 270px; padding: 10px 13px;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: 14px 14px 14px 5px;
font-size: 13.5px; line-height: 1.62; color: var(--ink-2);
word-break: break-word;
}
.ai-msg--me .ai-bub {
background: var(--mint); border-color: var(--mint); color: #fff;
border-radius: 14px 14px 5px 14px;
}
.ai-bub b { color: var(--ink); }
/* 气泡里的小字补充（欢迎语附注 / 快捷问题标题 / 兜底提示） */
.ai-note { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.55; color: var(--muted-2); }
/* 答案里附的页面 / 官网入口 */
.ai-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ai-links a {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
background: #fff; border: 1px solid var(--line);
font-size: 11.5px; font-weight: 600; color: var(--mint-d); text-decoration: none;
}
.ai-links a:hover { background: var(--mint-l); border-color: var(--mint-l2); }
/* 快捷提问 */
.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ai-quick button {
padding: 6px 11px; border-radius: 999px; cursor: pointer;
background: #fff; border: 1px solid var(--line);
font-family: var(--ff); font-size: 12px; color: var(--ink-2); text-align: left;
transition: background .16s, border-color .16s, color .16s;
}
.ai-quick button:hover { background: var(--mint-l); border-color: var(--mint-l2); color: var(--mint-d); }
.ai-quick-title { font-size: 11px; color: var(--muted-2); margin: 2px 0 0 34px; }
/* 正在查找 */
.ai-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.ai-dots span {
width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
animation: aiDot 1.1s infinite ease-in-out;
}
.ai-dots span:nth-child(2) { animation-delay: .16s; }
.ai-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes aiDot {
0%, 60%, 100% { opacity: .28; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.ai-foot { flex: 0 0 auto; padding: 11px 12px 10px; border-top: 1px solid var(--line); }
.ai-form { display: flex; align-items: center; gap: 8px; }
.ai-form input {
flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
border: 1px solid var(--line); border-radius: 12px;
background: var(--surface-2); color: var(--ink);
font-family: var(--ff); font-size: 13.5px;
}
.ai-form input:focus {
outline: none; background: #fff; border-color: var(--mint-l2);
box-shadow: 0 0 0 3px rgba(53, 176, 160, .1);
}
.ai-send {
width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
border: 0; background: var(--mint); color: #fff; cursor: pointer;
display: grid; place-items: center;
}
.ai-send:hover { background: var(--mint-d); }
.ai-send:disabled { opacity: .45; cursor: default; }
.ai-disc { margin-top: 8px; font-size: 10.5px; line-height: 1.55; color: var(--muted-2); }
@media (max-width: 640px) {
/* 窄屏：按钮收成圆形只留图标，面板左右铺满、避开顶栏与输入法 */
.ai-fab { right: 16px; bottom: 18px; width: 50px; height: 50px; padding: 0; justify-content: center; }
.ai-fab b { display: none; }
.ai-panel {
right: 10px; left: 10px; bottom: 78px;
width: auto; max-width: none; height: min(74vh, 560px);
}
.ai-bub { max-width: 100%; }
.to-top { right: 16px; bottom: 76px; width: 40px; height: 40px; }
}
/* ---------------- 语言切换器 ---------------- */
.lang-switch {
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line);
flex: 0 0 auto;
}
.lang-switch a {
font-size: 12px;
font-weight: 600;
line-height: 1;
padding: 7px 11px;
border-radius: 999px;
color: var(--muted);
letter-spacing: .02em;
transition: .18s;
white-space: nowrap;
}
.lang-switch a:hover { color: var(--mint-d); background: #fff; }
.lang-switch a.on {
background: linear-gradient(135deg, var(--mint) 0%, var(--mint-d) 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(53, 176, 160, .3);
}
.lang-switch a.on:hover { color: #fff; }
/* ---------------- 保司卡补充字段 ---------------- */
.co-origin {
font-size: 12.5px;
color: var(--muted-2);
margin: -6px 0 12px;
line-height: 1.6;
}
.offer-period {
font-size: 12.5px;
color: var(--muted-2);
border-top: 1px dashed var(--line);
padding-top: 11px;
display: flex;
align-items: center;
gap: 6px;
}
.offer-period svg { flex: 0 0 auto; color: var(--coral); }
/* ---------------- 语言入口页 ---------------- */
/* ⚠️ hero 的 padding-bottom 就是天际线的**舞台**，不是随手留的空白。
天际线的内容高度 = (300-60)/1800 × 容器宽 ≈ 13.3vw，舞台必须 ≥ 15vw 才装得下；
两者一起改，别只动一边 —— `_zoom_landing.py` 有一条断言盯着
「天际线层顶边不得高于语言卡片底边」（改散了两边就会当场报出来）。 */
.landing-hero { padding: 60px 0 15vw; }
/* 维港天际线（背景层）。
⚠️ 这里只管**位置、缩放、浓淡**三件事，画什么全在 build.py 的 landing_sky()：
· `slice` + `xMidYMax` 把它钉在 hero 底边；顶部被裁掉的那一截永远是
SVG 里的空天，塔尖不会被吃掉（上一版就栽在这，只剩一排淡淡的竖纹）。
· height 用 vw 不用 px —— 塔尖高度只跟容器宽有关，写死 px 在超宽屏会切成
高度驱动、把两侧楼群裁掉。
· ⚠️ **不许再加 `max-height`。** 宽度驱动时裁切量恒为 30 单位；一旦加上
max-height，超宽屏（> 3067px）层高被封顶、缩放切成高度驱动，裁切量随屏宽
一起涨 —— 4K（3840px）下会涨到 84 单位，把 IFC 的桅杆（y=60）整根吃掉。
这是上一版塔尖消失的同一个坑，只是换了个屏幕宽度才触发。
⚠️ **别加 blur。** 这一版是**线稿**不是色块，一糊就成灰雾，认不出是哪几栋楼。
要更淡更浓只调 opacity；线条粗细由下面那条 non-scaling-stroke 恒定在 1px。 */
.landing-sky {
position: absolute; left: 0; right: 0; bottom: 0;
height: 15vw;
z-index: 0; pointer-events: none;
color: var(--mint-d);
opacity: .38;
}
.landing-sky svg { display: block; width: 100%; height: 100%; }
/* 缩放时线条粗细恒定 1px —— 不然手机端那条 1 单位的线会细到看不见 */
.landing-sky svg * { vector-effect: non-scaling-stroke; }
/* 内容必须压在背景层之上 —— .wrap 本身没有定位，不写这条天际线会盖住正文 */
.landing-hero .wrap { position: relative; z-index: 1; }
/* 上半部：正文 + 13 家保司标识墙，并排两列。
⚠️ 两个宽度（正文 760 / 标识墙 340）**别单独动**：`minmax(0, …)` 的作用是让窄屏时
**两列一起收缩**，只改一个数就会把标识墙顶出容器（横向溢出）。
⚠️ 960px 以下必须堆叠：再窄下去正文列会被压到 440px 以内，`` 那行
「真实客观解析香港保险」会从两行折成三行 —— `_zoom_landing.py` 会当场报出来。 */
.landing-top {
display: grid;
/* 右列 420 是被标识墙**倒推**出来的：一屏 4 格，扣掉面板 36px 内边距与 3×8px 格间距，
每格 = (420-36-24)/4 = 90px —— 正好压住「横版字标还读得出来」的 88px 下限。
旧的 340px 只够 3 列（70px/格），太保那种 11.5:1 的会缩成一条 6px 的灰线。 */
grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
justify-content: space-between;
gap: 22px 32px;
align-items: start;
margin-bottom: 40px;
}
.landing-inner { max-width: 760px; margin-bottom: 0; }
.landing-hero h1 { font-size: 2.5rem; }
.landing-en {
font-size: 14px;
color: var(--muted-2);
line-height: 1.8;
padding-left: 14px;
border-left: 3px solid var(--mint-l2);
margin-bottom: 0;
}
/* 13 家保司标识墙 —— 一屏 4 格、逐格左滑、到头无缝接回第 1 家。
⚠️ 相框与内页 `.co-logo` **同一套规矩**：白底 + 1px 描边 + `object-fit: contain`，
绝不裁剪、绝不换色 —— 品牌标识被裁一刀或改了配色就是标识事故。
素材缺失时退回文字色块（`--txt`），与内页 `co_logo()` 行为一致。
⚠️ 各家标识的宽高比差得很远（aia 是 1:1 方形，太保 369×32 接近 11.5:1），
所以只能「给定一个盒子、按原比例完整塞进去」，不能按高度统一 ——
按高度统一的话太保那条会被拉到 250px 宽，整面墙全乱。
⚠️ 为什么不再是「13 格一次铺满」：13 = 3×4+1，无论 3 列还是 4 列，最后一行
总会剩一家落单居中（原来正是排在第 13 位的富卫 FWD）—— 一屏 4 格滚动起来，
任何时刻都是满满的 4 格，没有残行，也就没有「谁被挑出来」的问题。 */
.landing-logos {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 18px 18px 20px;
box-shadow: var(--shadow-xs);
max-width: 420px;
/* 面板只有一行高（≈118px），正文列却有 328 —— 靠 `align-self: center` 把它挂在
正文列右侧的垂直中间。用 start 会在面板下方留一大块突兀的空白。 */
align-self: center;
}
.landing-logos-cap {
margin: 0 0 12px;
font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
color: var(--muted);
}
/* 滚动视窗：轨道比它宽 4 倍多，多出来的部分在这里被裁掉。
⚠️ stage **只包住轨道**（上下不留 padding）—— `overflow: hidden` 是纵向也裁的，
若给它留内边距，相框的圆角与 1px 描边会被削掉一圈。留白交给面板的 padding。 */
.landing-logo-stage { overflow: hidden; }
/* 一屏恰好 4 格：`(100% - 3×8) / 4`。
⚠️ 这里的 100% 是**轨道**的宽度，而轨道是 stage 的块级子元素、宽度就等于视窗宽 ——
所以每格 = 视窗的 1/4；17 格（13 家 + 4 份克隆，见 `build.landing_logos()`）
铺出四屏多，靠 translateX 逐格推进。
换成 `grid-template-columns` 或 `min-width` 都做不到「子项按容器算、内容溢出去」。
⚠️ 子元素是 `` 不是 ` `：`` 作 flex 子项时 Chrome 会给
每行塞进约 1.5em 的幽灵高度，而且只跟 `font-size` 走、与 `line-height` 无关。
详见 `build.landing_logos()` 的注释。
⚠️ 这个 4、`build.LOGO_VISIBLE`、入口页脚本的克隆份数**三处必须一起改**。 */
.landing-logo-track {
display: flex; flex-wrap: nowrap; gap: 8px;
margin: 0; padding: 0; list-style: none;
transition: transform .7s cubic-bezier(.45, 0, .2, 1);
will-change: transform;
}
.landing-logo-track > .landing-logo { flex: 0 0 calc((100% - 24px) / 4); }
/* ⚠️ 相框必须是**定高的块**，里面的图用 `width/height:100%` + `object-fit:contain` 撑满 ——
与内页 `.co-logo.co-logo--img` 完全同一套写法。
⚠️ 别改回 `display:grid; place-items:center` + `img { max-width:100%; max-height:100% }`：
grid 的行高是 auto（由图片内容决定），`max-height:100%` 的百分比**没有确定参照**，
浏览器会当它 `none` —— 图片于是按 HTML 属性里的 width/height 原样渲染，
再被 `object-fit` 的默认值 `fill` **横向/纵向拉变形**。构建、校验、截图都看不出来
（图片位置对、四边对齐，就是标识被抻长了），只有量 `naturalWidth` 才能发现。 */
/* 52px 是「横版字标不糊」的下限：相框内框 = 52 - 12(内边距) - 2(描边) = 38px 高，
太保那种 11.5:1 的还剩 3px 线宽 —— 再矮就只看得见一条灰线。
面板一屏只有这一行，总高 ≈ 118，故整个面板 `align-self: center` 挂在正文列右侧。 */
.landing-logo {
display: block;
height: 52px; padding: 6px 7px;
background: #fff; border: 1px solid var(--line);
border-radius: 12px;
position: relative;
}
.landing-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 只提供白色版标识的保司（core.LOGO_DARK）：白 logo 压在白色相框上完全看不见，
沿用官方物料本来的深色头部配色。**与内页 `body .co-logo--dark` 同色，别改** */
.landing-logo.landing-logo--dark { background: #123B4A; border-color: #123B4A; }
/* 缺素材时的文字色块（等同内页 co_logo() 的退路）。
用绝对定位而不是百分比高度 —— 理由同上，百分比高度在这个盒子里不可靠。 */
.landing-logo--txt { font-family: var(--ff-num); font-weight: 800; font-size: 13px; }
.landing-logo--txt > span {
position: absolute; inset: 6px 7px;
display: grid; place-items: center; border-radius: 7px;
}
@media (max-width: 959px) {
.landing-top { grid-template-columns: minmax(0, 1fr); }
/* 堆叠成单列后标识墙落在正文下面 —— 铺满整行会拉得老长，卡在 420px 跟桌面同宽。 */
.landing-logos { max-width: 420px; }
}
/* 窄屏一屏改 3 格：390px 视口下面板只有 346px 宽，4 格会掉到 71px/格
（低于「横版字标读得出」的 88px 下限），3 格是 98px/格。
⚠️ 只改 CSS，滚动脚本按 DOM 数格子、不关心一屏几家，所以不用跟着改。 */
@media (max-width: 640px) {
.landing-logo-track > .landing-logo { flex: 0 0 calc((100% - 16px) / 3); }
}
/* 关掉动效的访客：不滚动（脚本也主动不启动），改成静态网格把 13 家一次铺开 ——
克隆格这时候必须藏掉，否则同一家公司会在网格里出现两次。 */
@media (prefers-reduced-motion: reduce) {
.landing-logo-stage { overflow: visible; }
.landing-logo-track { flex-wrap: wrap; justify-content: center; transition: none; }
.landing-logo-track > .landing-logo[data-clone="1"] { display: none; }
}
.lang-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lang-card {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 28px 24px 24px;
box-shadow: var(--shadow-xs);
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
position: relative;
overflow: hidden;
}
.lang-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--mint) 0%, #6FD6C4 50%, var(--coral) 100%);
opacity: 0;
transition: opacity .24s ease;
}
.lang-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--mint-l2);
color: inherit;
}
.lang-card:hover::before { opacity: 1; }
.lang-card.detected {
border-color: var(--mint);
box-shadow: 0 14px 38px rgba(53, 176, 160, .22);
}
.lang-card.detected::before { opacity: 1; }
.lang-badge {
width: 46px; height: 46px;
border-radius: 15px;
display: grid; place-items: center;
font-size: 17px; font-weight: 700;
background: var(--mint-l); color: var(--mint-d);
font-family: var(--ff-num);
}
.lang-card:nth-child(2) .lang-badge { background: var(--coral-l); color: var(--coral-d); }
.lang-card:nth-child(3) .lang-badge { background: var(--amber-l); color: #A87715; }
.lang-card h3 { font-size: 1.15rem; margin: 4px 0 0; }
.lang-card p { font-size: 13.5px; color: var(--muted); margin: 0; flex: 1 1 auto; }
.lang-go {
font-size: 13px; font-weight: 600;
color: var(--mint-d);
display: inline-flex; align-items: center; gap: 6px;
margin-top: 4px;
}
.lang-card:hover .lang-go svg { transform: translateX(3px); }
.lang-card .lang-go svg { transition: transform .2s ease; }
.landing-detect {
margin: 22px 0 0;
font-size: 13px;
color: var(--mint-d);
font-weight: 600;
min-height: 20px;
}
/* ---------------- 首页 · 主力产品轮播 ---------------- */
.promo-sec { padding: 10px 0 6px; }
.promo-bar {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 12px 20px; flex-wrap: wrap; margin-bottom: 15px;
}
.promo-bar-l { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.promo-bar-l .section-kicker { margin-bottom: 0; }
.promo-bar-l h2 { font-size: 1.3rem; margin: 0; }
.promo-hint { font-size: 12.5px; color: var(--muted-2); }
.promo-carousel { position: relative; }
.promo-viewport { overflow: hidden; border-radius: var(--radius-xl); }
.promo-track {
display: flex;
transition: transform .66s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.promo-slide { flex: 0 0 100%; min-width: 100%; }
.promo-card {
display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
overflow: hidden;
min-height: 330px;
height: 100%;
}
.promo-body { padding: 26px 30px 24px; min-width: 0; }
.promo-top { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; flex-wrap: wrap; }
.promo-top .co-logo { width: 42px; height: 42px; border-radius: 13px; font-size: 14px; }
.promo-top .co-logo.co-logo--img { display: block; width: 140px; max-width: 100%; height: 50px; padding: 5px 8px; border-radius: 13px; }
.promo-co { min-width: 0; }
.promo-co b { display: block; font-size: 14px; color: var(--ink); line-height: 1.4; }
.promo-co span {
display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
color: var(--muted-2); line-height: 1.5;
}
.promo-badge {
margin-left: auto; flex: 0 0 auto;
background: var(--pc-l, var(--mint-l)); color: var(--pc-d, var(--mint-d));
font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.promo-name { font-size: 1.42rem; margin: 0 0 7px; letter-spacing: -.015em; }
.promo-tagline {
font-size: 14px; font-weight: 600; color: var(--pc-d, var(--mint-d));
margin: 0 0 12px; line-height: 1.6;
}
.promo-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 15px; line-height: 1.7; }
.promo-points { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.promo-points li { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.promo-points .pcheck {
flex: 0 0 auto; margin-top: .16em; padding: 3px; border-radius: 50%;
background: var(--pc-l, var(--mint-l)); color: var(--pc-d, var(--mint-d));
}
.promo-specs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.promo-spec {
flex: 1 1 132px; min-width: 0;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: 8px 12px;
}
.promo-spec span { display: block; font-size: 11px; color: var(--muted-2); line-height: 1.6; }
.promo-spec b { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.promo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.promo-art {
position: relative; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
padding: 24px;
background: linear-gradient(158deg, var(--pc-l, var(--mint-l)) 0%, #FFFFFF 78%);
border-left: 1px solid var(--line);
}
.promo-mark {
position: absolute; right: -4px; bottom: -30px;
font-family: var(--ff-num); font-size: 104px; font-weight: 800; letter-spacing: -.05em;
color: var(--pc-d, var(--mint-d)); opacity: .09; line-height: 1; pointer-events: none;
}
.promo-art-ico {
width: 74px; height: 74px; border-radius: 24px; flex: 0 0 auto;
display: grid; place-items: center;
background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs);
color: var(--pc-d, var(--mint-d));
}
.promo-art-txt {
font-size: 12.5px; font-weight: 700; color: var(--pc-d, var(--mint-d));
background: rgba(255,255,255,.86); padding: 4px 13px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.9); text-align: center;
}
/* 宣传图（存在图片时替代渐变面板；无图时不影响任何布局） */
.promo-card.wide { grid-template-columns: 1fr; }
.promo-media { position: relative; overflow: hidden; background: var(--surface-2); }
.promo-media.side { border-left: 1px solid var(--line); }
.promo-media.wide { border-bottom: 1px solid var(--line); }
.promo-shot {
position: relative; display: block; width: 100%; height: 100%;
padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
}
.promo-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo-card.wide .promo-shot,
.promo-card.wide .promo-shot img { height: auto; }
.promo-card.wide .promo-shot img { max-height: 340px; object-fit: cover; }
/* banner：横向宣传图（自带标题与 logo），按原比例完整显示、绝不裁剪 */
.promo-card.banner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
align-items: center;
}
.promo-media.banner {
background: none; border-left: 0;
display: grid; place-items: center;
padding: 24px 28px 24px 0;
}
.promo-media.banner .promo-shot {
display: block; width: 100%; height: auto;
overflow: hidden; border-radius: 16px;
box-shadow: 0 14px 34px rgba(23, 73, 66, .14);
}
.promo-media.banner .promo-shot img {
display: block; width: 100%; height: auto;
object-fit: contain; border-radius: 0;
}
/* side：竖版海报（同样自带 logo 与产品名），整图完整显示、同样绝不裁剪。
官方物料常把 logo 与产品名放在四角，裁切会直接切掉品牌信息，因此这里
让图片按原比例缩放到相框内，而不是用 object-fit: cover 填满面板。 */
.promo-media.side {
background: none; border-left: 0;
display: flex; align-items: center; justify-content: center;
padding: 22px 26px 22px 0;
}
.promo-media.side .promo-shot {
display: block; width: 100%; max-width: 440px; height: auto;
overflow: hidden; border-radius: 16px;
box-shadow: 0 14px 34px rgba(23, 73, 66, .14);
}
.promo-media.side .promo-shot img {
display: block; width: 100%; height: auto;
object-fit: contain; border-radius: 0;
}
.promo-zoom-hint {
position: absolute; right: 12px; bottom: 12px; z-index: 2;
width: 30px; height: 30px; padding: 0; border-radius: 50%;
display: grid; place-items: center; pointer-events: none;
background: rgba(255,255,255,.94); border: 1px solid var(--line);
color: var(--ink-2); box-shadow: var(--shadow-xs);
opacity: 0; transform: translateY(4px);
transition: opacity .22s ease, transform .22s ease;
}
.promo-shot:hover .promo-zoom-hint,
.promo-shot:focus-visible .promo-zoom-hint { opacity: 1; transform: none; }
.promo-shot:focus-visible { outline: 2px solid var(--mint); outline-offset: -3px; }
.promo-credit {
display: flex; gap: 7px; align-items: flex-start;
margin: 8px 0 0; font-size: 11.5px; color: var(--muted-2); line-height: 1.65;
}
.promo-credit svg { flex: 0 0 auto; margin-top: .25em; }
/* 宣传图放大层 */
.lightbox {
position: fixed; inset: 0; z-index: 90; display: none;
align-items: center; justify-content: center;
padding: 4vh 4vw; background: rgba(23, 46, 42, .74);
}
.lightbox.on { display: flex; }
.lb-img {
width: auto; height: auto; max-width: 100%; max-height: 92vh;
background: #fff; border-radius: var(--radius);
box-shadow: 0 26px 64px rgba(0,0,0,.34);
}
.lb-close {
position: absolute; top: 18px; right: 18px;
width: 40px; height: 40px; padding: 0; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,.95); border: 1px solid var(--line);
color: var(--ink-2); cursor: pointer;
}
.lb-close:hover { background: #fff; }
.lb-close:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
body.lb-open { overflow: hidden; }
.promo-nav {
position: absolute; top: 50%; z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center; padding: 0;
background: rgba(255,255,255,.95); border: 1px solid var(--line);
color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-xs);
opacity: 0; transition: opacity .25s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.promo-nav.prev { left: 12px; transform: translateY(-50%); }
.promo-nav.next { right: 12px; transform: translateY(-50%); }
.promo-carousel:hover .promo-nav,
.promo-carousel:focus-within .promo-nav { opacity: 1; }
.promo-nav:hover { background: var(--mint); border-color: transparent; color: #fff; }
.promo-nav:active { transform: translateY(-50%) scale(.94); }
.promo-foot { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.promo-dots { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; }
.promo-dot {
position: relative; flex: 1 1 0; min-width: 26px; max-width: 92px; height: 6px;
padding: 0; border: 0; border-radius: 999px; background: var(--line);
cursor: pointer; overflow: hidden; transition: background .25s ease;
}
.promo-dot i {
position: absolute; top: 0; bottom: 0; left: 0; width: 0;
background: var(--mint); border-radius: 999px;
}
.promo-dot.on { background: var(--mint-l2); }
.promo-dot.on i { animation: promoFill var(--promo-dur, 6s) linear forwards; }
.promo-dot:focus-visible,
.promo-toggle:focus-visible,
.promo-nav:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
@keyframes promoFill { from { width: 0; } to { width: 100%; } }
.promo-count {
flex: 0 0 auto; font-size: 12.5px; color: var(--muted-2);
font-family: var(--ff-num); letter-spacing: .04em;
}
.promo-toggle {
flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-2); border: 1px solid var(--line);
color: var(--muted); cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.promo-toggle:hover { background: var(--mint-l); color: var(--mint-d); }
.promo-toggle span { display: block; line-height: 0; }
.promo-toggle .pt-play { display: none; }
.promo-toggle.on .pt-pause { display: none; }
.promo-toggle.on .pt-play { display: block; }
.promo-note {
margin: 12px 0 0; font-size: 12px; color: var(--muted-2); line-height: 1.65;
padding-left: 11px; border-left: 2px solid var(--line);
}
@media (prefers-reduced-motion: reduce) {
.promo-track { transition: none; }
.promo-dot.on i { animation: none; width: 100%; }
}
@media (max-width: 860px) {
.promo-card { grid-template-columns: 1fr; min-height: 0; }
.promo-body { padding: 22px 20px; }
.promo-art {
flex-direction: row; justify-content: flex-start; gap: 14px;
border-left: 0; border-top: 1px solid var(--line); padding: 16px 20px;
}
.promo-art-ico { width: 52px; height: 52px; border-radius: 18px; }
.promo-mark { font-size: 74px; bottom: -22px; }
.promo-name { font-size: 1.24rem; }
/* 窄屏时左右箭头落回底部控制条：卡片是竖排的，绝对定位到中线会压在正文上 */
.promo-foot { gap: 9px; }
.promo-nav {
position: static; opacity: 1; width: 32px; height: 32px;
left: auto; right: auto; transform: none;
}
.promo-nav.prev, .promo-nav.next { left: auto; right: auto; }
.promo-nav:active { transform: scale(.94); }
/* banner：窄屏时图片移到卡片顶部，整宽展示 */
.promo-card.banner { grid-template-columns: 1fr; align-items: stretch; }
.promo-media.banner { order: -1; padding: 18px 20px 0; }
.promo-media.banner .promo-shot { border-radius: 14px; }
/* side：窄屏时同样移到卡片顶部，居中成框、整图不裁剪 */
.promo-media.side { order: -1; padding: 18px 20px 0; }
.promo-media.side .promo-shot { max-width: 400px; border-radius: 14px; }
.promo-card.wide .promo-shot img { max-height: 240px; }
}
@media (max-width: 640px) {
.promo-sec { padding: 6px 0 0; }
.promo-badge { margin-left: 0; }
.promo-name { font-size: 1.16rem; }
.promo-dot { max-width: none; }
.promo-spec { flex: 1 1 0; padding: 7px 10px; }
.promo-spec b { font-size: 12.5px; }
.promo-actions .btn { flex: 1 1 auto; justify-content: center; }
/* 手机竖屏：竖版海报刚好占满内容宽即可，再宽就会把正文压到首屏之外 */
.promo-media.side .promo-shot { max-width: 320px; }
}
/* ---------------- 响应式 ---------------- */
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; gap: 30px; }
.hero h1 { font-size: 2.1rem; }
.g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.nav-burger { display: flex; }
.nav-main { max-height: 0; transition: max-height .3s ease; }
.nav-main.open { max-height: 640px; }
.nav-links { flex-direction: column; padding: 4px 0 14px; gap: 2px; }
.nav-links a { border-radius: var(--radius-sm); padding: 10px 14px; }
.calc-out { grid-template-columns: 1fr; gap: 12px; }
.lang-cards { grid-template-columns: 1fr; gap: 14px; }
.landing-top { margin-bottom: 30px; }
}
@media (max-width: 760px) {
.nav-top { flex-wrap: wrap; row-gap: 8px; }
.nav-spacer { flex: 1 1 0; }
.nav-cta { order: 3; }
.nav-admin { order: 4; padding: 7px 12px; font-size: 12.5px; }
.lang-switch { order: 5; }
.nav-burger { order: 6; }
.landing-hero h1 { font-size: 1.95rem; }
.landing-sky { opacity: .34; }
}
/* ≤400px（320px 宽的老机型）页头一行放不下「品牌 + 简体中文 + 登录」：
实测 320px 时（当时按钮文案为「后台登录」）四件宽 + 三个间距正好压线，
差不到 1px 就会被挤到第二行；文案缩短为「登录」后余量已明显宽裕。
这里把间距与按钮内边距各收一点，留出约 20px 余量。
⚠️ 改了间距或按钮尺寸，跑 `_probe_nav_admin.py`（11 档宽度）复核。 */
@media (max-width: 400px) {
.nav-top { gap: 12px; }
.nav-admin { padding: 6px 11px; font-size: 12px; }
}
@media (max-width: 640px) {
body { font-size: 14.5px; }
.hero { padding: 34px 0 20px; }
.hero h1 { font-size: 1.78rem; }
.section { padding: 34px 0; }
.section-head h2 { font-size: 1.4rem; }
.g2, .g3, .g4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 22px; }
.calc-grid { grid-template-columns: 1fr; }
.ratio-row { grid-template-columns: 1fr; gap: 8px; }
.ratio-val { text-align: left; }
.filter-count { margin-left: 0; width: 100%; }
.hero-stats { gap: 20px; }
.brand-txt span { display: none; }
.nav-cta { padding: 8px 14px; font-size: 12.5px; }
.lang-switch a { padding: 6px 9px; font-size: 11.5px; }
.landing-hero { padding: 34px 0 26vw; }
.landing-hero h1 { font-size: 1.62rem; }
/* 手机端 15vw 只有 58px，画面缩得太小；给到 26vw 会把 `slice` 转成高度驱动，
横向只取中间约 1150 单位（x≈323-1477）—— 中银 → IFC → 中环广场 → 怡和
那几栋最认得出的全在画面里，比把整条全景缩成一根细线强。
⚠️ **不能给到 30vw**：那会儿横向只剩 1000 单位（x=400 起），中银（x 361-427）
被左边缘切掉一半，画面最左边挂半截 X 桁架，像没画完。
舞台（padding-bottom）必须与层高相等，改一个就得改另一个。 */
.landing-sky { height: 26vw; opacity: .34; }
.landing-top { margin-bottom: 24px; }
.lang-card { padding: 22px 20px 20px; }
}
/* ==========================================================================
站内后台（admin.html 专用，公开页面用不到）
类名一律 admin-* / abtn，与公开样式隔离，改这里不会影响前台任何页面。
========================================================================== */
.admin-body { background: var(--bg-2); min-height: 100vh; }
.admin-wrap { max-width: 1060px; padding: 26px 20px 46px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-brand { display: flex; align-items: center; gap: 12px; }
.admin-head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-who { font-size: 12.5px; color: var(--muted); font-family: var(--ff-num); }
.admin-boot { color: var(--muted); font-size: 14px; }
.admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 30px 28px; box-shadow: var(--shadow); max-width: 560px; }
.admin-h1 { font-size: 1.42rem; margin: 0 0 10px; color: var(--ink); }
.admin-lead { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0 0 14px; }
.admin-hint { font-size: 12px; line-height: 1.7; color: var(--muted-2); margin: 14px 0 0; }
.admin-hint code { font-family: var(--ff-num); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.admin-tabs { display: flex; gap: 6px; background: var(--surface-2); padding: 5px; border-radius: 14px; margin: 18px 0 18px; }
.admin-tab { flex: 1; border: 0; background: transparent; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit; transition: .18s; }
.admin-tab.on { background: var(--surface); color: var(--mint-d); box-shadow: var(--shadow-xs); }
.admin-form { display: grid; gap: 14px; }
.admin-field { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.admin-field input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); }
.admin-field input:focus { outline: 0; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-l); }
.admin-row { display: flex; gap: 10px; align-items: flex-end; }
.admin-row .admin-field { flex: 1; }
.admin-msg { font-size: 13px; font-weight: 600; margin: 14px 0 0; padding: 10px 13px; border-radius: 12px; }
.admin-msg.is-ok { background: var(--mint-l); color: var(--mint-d); }
.admin-msg.is-err { background: var(--coral-l); color: var(--coral-d); }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.admin-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; }
.admin-stat span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.admin-stat b { font-size: 1.55rem; font-family: var(--ff-num); color: var(--mint-d); }
.admin-stat--warm b { color: var(--coral-d); }
.admin-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.admin-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-search { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-family: inherit; min-width: 220px; flex: 1; color: var(--ink); }
.admin-search:focus { outline: 0; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-l); }
.admin-list { display: grid; gap: 12px; }
.admin-empty { color: var(--muted); font-size: 13.5px; padding: 26px 0; text-align: center; }
.admin-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.admin-item-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.admin-item-title { font-size: 14px; color: var(--ink); font-weight: 700; word-break: break-word; }
.admin-item-when { margin-left: auto; font-size: 11.5px; color: var(--muted-2); font-family: var(--ff-num); white-space: nowrap; }
.abadge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.abadge--new { background: var(--amber-l); color: #A9761A; }
.abadge--replied { background: var(--mint-l); color: var(--mint-d); }
.abadge--closed { background: var(--sky-l); color: #2F6E9A; }
.abadge--spam { background: var(--coral-l); color: var(--coral-d); }
.admin-kv { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 11px; }
.admin-kv span { font-size: 13px; color: var(--ink-2); }
.admin-kv i { font-style: normal; font-size: 11.5px; color: var(--muted-2); margin-right: 6px; }
.admin-note { font-size: 13px; line-height: 1.75; color: var(--ink-2); background: var(--surface-3); border-radius: 12px; padding: 11px 13px; margin: 12px 0 0; white-space: pre-wrap; word-break: break-word; }
.admin-item-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.abtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: .16s; }
.abtn:hover { border-color: var(--mint); color: var(--mint-d); background: var(--mint-l); }
.abtn:disabled { opacity: .45; cursor: not-allowed; }
.abtn--ghost { background: transparent; }
.admin-det { margin-top: 11px; }
.admin-det summary { font-size: 12.5px; color: var(--mint-d); cursor: pointer; font-weight: 600; }
.admin-det pre { font-family: inherit; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin: 9px 0 0; white-space: pre-wrap; word-break: break-word; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; font-size: 12.5px; color: var(--muted); }
.admin-foot { margin-top: 30px; font-size: 11.5px; color: var(--muted-2); text-align: center; line-height: 1.8; }
.admin-foot code { font-family: var(--ff-num); }
@media (max-width: 760px) {
.admin-stats { grid-template-columns: repeat(2, 1fr); }
.admin-card { padding: 24px 20px; }
.admin-row { flex-direction: column; align-items: stretch; }
.admin-item-when { margin-left: 0; width: 100%; }
.admin-search { min-width: 0; }
}
/* ==========================================================================
后台内容编辑器（admin.html 的「保险新闻」「六大产品」页签专用）
仍然全部走 admin-* / abtn 前缀，与公开页面样式隔离。
========================================================================== */
.admin-editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 20px 22px; margin: 0 0 18px; }
.admin-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.admin-editor-head h3 { margin: 0; font-size: 1.02rem; color: var(--ink); }
.admin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.admin-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.admin-field textarea,
.admin-field select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); line-height: 1.65; resize: vertical; }
.admin-field textarea { min-height: 92px; }
.admin-field textarea:focus,
.admin-field select:focus { outline: 0; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-l); }
.admin-field small { font-weight: 400; color: var(--muted-2); font-size: 11.5px; line-height: 1.6; }
.admin-sec-title { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 20px 0 11px; padding-top: 16px; border-top: 1px dashed var(--line); }
.admin-sec-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.admin-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.admin-imgwrap { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.admin-thumb { width: 170px; height: 108px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; flex: none; }
.admin-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.admin-thumb span { font-size: 11.5px; color: var(--muted-2); }
.admin-img-acts { display: grid; gap: 8px; align-content: start; }
.admin-img-acts small { font-size: 11.5px; color: var(--muted-2); line-height: 1.65; max-width: 340px; }
.admin-en { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.admin-en--empty { background: var(--surface-2); color: var(--muted-2); }
.admin-en--draft { background: var(--amber-l); color: #A9761A; }
.admin-en--reviewed { background: var(--mint-l); color: var(--mint-d); }
.admin-fold { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 14px; }
.admin-fold > summary { font-size: 12.5px; font-weight: 600; color: var(--mint-d); cursor: pointer; }
.admin-fold .admin-grid2 { margin-top: 13px; }
.admin-item-row { display: flex; gap: 14px; align-items: flex-start; }
.admin-item-body { flex: 1; min-width: 0; }
.admin-news-thumb { width: 94px; height: 64px; border-radius: 10px; background: var(--surface-2); overflow: hidden; flex: none; }
.admin-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
.admin-grid2, .admin-grid3 { grid-template-columns: 1fr; }
.admin-thumb { width: 100%; height: 150px; }
.admin-editor { padding: 16px 15px; }
.admin-item-row { flex-direction: column; }
.admin-news-thumb { width: 100%; height: 130px; }
}
|