/* ==========================================================================
选址参谋 · 前台样式
深色专业数据风：低饱和背景 + 高对比数据，长时间看报表不刺眼
字号体系里的角色：全站正文基准的唯一落点。body 取 --fs-base —— 1280 逻辑宽
（1920 屏 @150%）下 15px，视觉上等于 22.5px，35cm 视距读长段落不费力；
版心取 --w-page（1280），替代原来的 1220 —— 1220 在 1280 视口里两侧各剩
30px 灰边，看着「居中又空」。本文件里不再允许出现硬编码字号：写死一处，
后台改一档基准就会留下一个对不上的孤点。
========================================================================== */
:root {
--bg: #080b11;
--bg-soft: #0c111a;
--panel: #111927;
--panel-2: #16202f;
--line: #1e2a3a;
--line-soft: #17212e;
--text: #dbe4ef;
--text-2: #a8b6c8;
--muted: #74849a;
--brand: #2f81f7;
--brand-2: #17b8a6;
--brand-soft: rgba(47, 129, 247, .12);
--up: #f6465d;
--down: #0ecb81;
--warn: #f0a92e;
--danger: #ef4d5a;
--radius: 10px;
--radius-sm: 7px;
--shadow: 0 12px 40px rgba(0, 0, 0, .45);
/* 悬停态令牌 —— 全站 :hover 只准取这几个值，不许再写死近黑色号。
背景：v2.5 换成日间浅色后，:hover 仍留着深色主题时期的 #2b3c52 / #1b2739 /
rgba(255,255,255,.04)，在白底上要么变成一块黑，要么等于没有反馈。
把「悬停该深多少」收敛成令牌，主题切换时只改这一处：
--hover-bg 中性面（按钮 / 卡片）的悬停底，比正常态深一档
--hover-veil 透明底元素（导航 / 侧栏）上的悬停叠加
--hover-veil-soft 表格行这类只需要极轻反馈的叠加
--brand-soft-text 品牌浅染底（--brand-soft）上的文字色
--btn-*-hover 变体按钮的悬停渐变：深色主题提亮，浅色主题压深，
保证白字在任何底色上都不掉对比度 */
--hover-bg: #1b2739;
--hover-veil: rgba(255, 255, 255, .045);
--hover-veil-soft: rgba(255, 255, 255, .022);
--brand-soft-text: #ffffff;
--btn-primary-hover: linear-gradient(135deg, #3d8cf8, #2472e0);
--btn-teal-hover: linear-gradient(135deg, #12a293, #0b7d70);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-base, 15px);
line-height: var(--lh-base, 1.7);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
/* 版心：1280 逻辑宽（=1920 屏 @150%）下铺满，替代原来的 1220 —— 1220 在 1280 视口里
两侧各剩 30px 灰边，看起来「居中又空」；1280 铺满后左右由内边距接管，才叫两侧饱满。
内边距走 --pad-x：桌面 24~32、小屏 16，小屏把横向空间还给内容。 */
.wrap { width: 100%; max-width: var(--w-page, 1280px); margin: 0 auto; padding: 0 var(--pad-x, 24px); }
/* 长文页（FAQ / 协议）单独收窄：880px 下 15px 正文一行约 58 个汉字，
跟着放宽到 1280 会变成 85 字/行，回扫距离太长，反而更累。 */
.wrap-narrow { max-width: var(--w-narrow, 880px); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }
/* ---------------- 顶部导航 ---------------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(8, 11, 17, .86);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; height: 62px; gap: 28px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: var(--fs-base, 15px); letter-spacing: .5px; }
.logo-mark {
width: 26px; height: 26px; border-radius: 7px;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
display: grid; place-items: center; font-size: var(--fs-sm, 14px); font-weight: 800; color: #fff;
}
.nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav a {
display: inline-flex; align-items: center;
padding: 7px 13px; border-radius: var(--radius-sm);
color: var(--text-2); font-size: var(--fs-sm, 14px); transition: .18s;
position: relative;
}
.nav a:hover { color: var(--text); background: var(--hover-veil); }
.nav a.on { color: #fff; background: var(--brand-soft); }
/* ---- 导航下拉：桌面靠 :hover 展开，不依赖 JS；:focus-within 让键盘 Tab 也能开 ---- */
.nav-dd { position: relative; }
.nav-dd-t {
display: flex; align-items: center; gap: 5px;
padding: 7px 13px; border-radius: var(--radius-sm); cursor: pointer;
color: var(--text-2); font-size: var(--fs-sm, 14px); transition: .18s; position: relative;
}
.nav-dd:hover .nav-dd-t,
.nav-dd:focus-within .nav-dd-t,
.nav-dd-t.on { color: var(--brand-soft-text); background: var(--brand-soft); }
.nav-dd-p {
position: absolute; left: 0; top: calc(100% + 6px); min-width: 176px; padding: 6px;
background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px;
box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .12s ease, transform .12s ease, visibility .12s;
z-index: 60;
}
.nav-dd:hover .nav-dd-p,
.nav-dd:focus-within .nav-dd-p { opacity: 1; visibility: visible; transform: none; }
.nav-dd-p a { display: flex; align-items: center; padding: 8px 10px; border-radius: 5px; font-size: var(--fs-sm, 14px); white-space: nowrap; }
.nav-dd-p a:hover, .nav-dd-p a.on { color: var(--brand-soft-text); background: var(--brand-soft); }
/* 角标：跟在名称后面、靠 translateY 视觉上提成「右上角」的样子。
不用绝对定位是因为 2 个字的名称只有 ~27px 宽，绝对定位的标签会直接压在字上；
transform 又不参与布局，所以导航高度一点都不会被撑高。 */
.nav-badge {
display: inline-block; align-self: center; margin-left: 5px; flex: none;
font-style: normal; font-size: var(--fs-xs, 13px); line-height: 1; padding: 2px 3px; border-radius: 3px;
background: var(--danger); color: #fff; letter-spacing: .2px;
transform: translateY(-5px);
}
/* 下拉面板里行高更松，角标不需要上提，跟着文字居中最自然 */
.nav-badge-in { transform: none; margin-left: 6px; }
/* ---- 移动端汉堡按钮（桌面隐藏） ---- */
.nav-toggle {
display: none; width: 34px; height: 34px; padding: 0; flex: none;
flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border: 1px solid var(--line); border-radius: 7px; background: #0d141e; cursor: pointer;
}
.nav-toggle span {
display: block; width: 15px; height: 1.5px; border-radius: 1px;
background: var(--text-2); transition: transform .18s, opacity .18s;
}
.nav-toggle.on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.on span:nth-child(2) { opacity: 0; }
.nav-toggle.on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-mask {
position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .55);
opacity: 0; visibility: hidden; transition: opacity .12s;
}
.nav-mask.on { opacity: 1; visibility: visible; }
/* 移动菜单底部的「登录 / 注册 / 会员中心」：只在窄屏出现，
给头部腾出宽度（见 <=560px 的 .head-actions 规则） */
.nav-extra { display: none; }
.head-actions { display: flex; align-items: center; gap: 9px; }
.head-user { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm, 14px); }
.pill-points {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 20px; font-size: var(--fs-xs, 13px);
background: rgba(23, 184, 166, .12); color: var(--accent-teal-text); border: 1px solid rgba(23, 184, 166, .25);
font-family: var(--mono);
}
/* ---------------- 按钮 ---------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 36px; padding: 0 16px; border-radius: var(--radius-sm);
border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
font-size: var(--fs-sm, 14px); cursor: pointer; transition: .16s; white-space: nowrap;
}
/* 中性按钮的悬停底。深色主题是 #1b2739（比 --panel-2 亮一档），浅色主题是
#eaf0f8（比 --panel-2 深一档）—— 方向相反，所以必须走令牌。
这条只对「没有自有配色的按钮」成立；下面每个变体都紧跟着自己的 :hover，
且都写在它之后，同特异性靠顺序取胜，不会被这条压平。 */
.btn:hover { border-color: var(--line-strong); background: var(--hover-bg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
background: linear-gradient(135deg, #2f81f7, #1f6ad8);
border-color: transparent; color: #fff; font-weight: 600;
box-shadow: 0 6px 18px rgba(47, 129, 247, .28);
}
/* 白字按钮悬停必须继续留在蓝/青系里：以前 .btn-teal 没写 :hover，落到
.btn:hover 上就成了「深灰底 + 白字」；浅色主题下 theme.css 的补丁又把底
换成 #eaf0f8，白字直接消失。渐变由令牌按主题给（深色提亮 / 浅色压深）。 */
.btn-primary:hover { background: var(--btn-primary-hover); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn-sm { height: 30px; padding: 0 11px; font-size: var(--fs-xs, 13px); }
.btn-lg { height: 44px; padding: 0 26px; font-size: var(--fs-base, 15px); }
.btn-block { width: 100%; }
.btn-danger { border-color: rgba(239, 77, 90, .35); color: #ff8a93; background: rgba(239, 77, 90, .08); }
.btn-danger:hover { background: rgba(var(--rgb-danger), .18); border-color: rgba(var(--rgb-danger), .5); }
/* .btn-lg 只是尺寸修饰（无自有配色），悬停沿用 .btn:hover 是对的，不单列规则。 */
.btn-teal { background: linear-gradient(135deg, #17b8a6, #0e9488); border-color: transparent; color: #fff; font-weight: 600; }
.btn-teal:hover { background: var(--btn-teal-hover); border-color: transparent; }
/* ---------------- 表单 ---------------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: var(--fs-xs, 13px); color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.field .tip { font-size: var(--fs-xs, 13px); color: var(--muted); margin-top: 5px; line-height: 1.6; }
.input, .select, .textarea {
width: 100%; height: 38px; padding: 0 12px;
background: #0b1119; border: 1px solid var(--line); border-radius: var(--radius-sm);
color: var(--text); font-size: var(--fs-base, 15px); transition: .16s; outline: none;
}
.textarea { height: auto; min-height: 90px; padding: 10px 12px; line-height: var(--lh-base, 1.7); resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 129, 247, .13); }
.input::placeholder, .textarea::placeholder { color: #4d5c70; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* ---------------- 卡片 / 区块 ---------------- */
.card {
background: var(--panel); border: 1px solid var(--line-soft);
border-radius: var(--radius); padding: 20px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.card-head h3 { font-size: var(--fs-base, 15px); font-weight: 600; }
.card-head .sub { font-size: var(--fs-xs, 13px); color: var(--muted); }
.section { padding: 72px 0; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font-size: var(--fs-xl, 26px); font-weight: 700; letter-spacing: -.4px; }
.section-head p { color: var(--muted); margin-top: 10px; font-size: var(--fs-base, 15px); }
.eyebrow {
display: inline-block; font-size: var(--fs-xs, 13px); letter-spacing: 1.6px; text-transform: uppercase;
color: #58a6ff; font-weight: 600; margin-bottom: 12px;
}
/* ---------------- 首页 Hero ---------------- */
.hero { position: relative; padding: 84px 0 66px; overflow: hidden; }
.hero::before {
content: ''; position: absolute; inset: -20% -10% auto -10%; height: 560px;
background: radial-gradient(50% 60% at 50% 0%, rgba(47, 129, 247, .16), transparent 70%),
radial-gradient(40% 50% at 80% 10%, rgba(23, 184, 166, .10), transparent 70%);
pointer-events: none;
}
.hero .wrap { position: relative; }
.hero h1 { font-size: var(--fs-2xl, 34px); line-height: 1.18; font-weight: 800; letter-spacing: -1.2px; }
.hero h1 em { font-style: normal; background: linear-gradient(120deg, #58a6ff, #17b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { margin-top: 20px; font-size: var(--fs-base, 15px); color: var(--text-2); max-width: 620px; line-height: 1.85; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-facts { display: flex; gap: 36px; margin-top: 44px; flex-wrap: wrap; }
.hero-facts .f b { display: block; font-size: var(--fs-xl, 26px); font-weight: 800; font-family: var(--mono); letter-spacing: -.5px; }
.hero-facts .f span { font-size: var(--fs-xs, 13px); color: var(--muted); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
/* 报价面板（Hero 右侧示意） */
.quote-card {
background: linear-gradient(180deg, #131c2b, #0d141f);
border: 1px solid var(--line); border-radius: 14px; padding: 18px;
box-shadow: var(--shadow);
}
.quote-card .qc-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.quote-card .qc-title { font-size: var(--fs-sm, 14px); font-weight: 600; }
.quote-card .qc-badge { font-size: var(--fs-xs, 13px); color: var(--accent-teal-text); background: rgba(23, 184, 166, .12); padding: 2px 8px; border-radius: 20px; border: 1px solid rgba(23, 184, 166, .25); }
.quote-rows { margin-top: 14px; display: grid; gap: 11px; }
.qr { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm, 14px); }
.qr span:first-child { color: var(--muted); }
.qr b { font-family: var(--mono); font-weight: 600; }
.bar { height: 6px; border-radius: 4px; background: #16202e; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.qq-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; }
.qq-foot .big { font-size: var(--fs-xl, 26px); font-weight: 800; font-family: var(--mono); color: #58a6ff; }
/* ---------------- 特性网格 ---------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature {
background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent);
border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px;
transition: .18s;
}
.feature:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.feature .ic {
width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
background: var(--brand-soft); color: #58a6ff; font-size: var(--fs-base, 15px); margin-bottom: 14px;
}
.feature h4 { font-size: var(--fs-base, 15px); font-weight: 600; margin-bottom: 8px; }
.feature p { font-size: var(--fs-sm, 14px); color: var(--muted); line-height: 1.8; }
/* ---------------- 数据表 ---------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); }
table.tb { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); }
table.tb th {
text-align: left; padding: 11px 14px; font-weight: 500; font-size: var(--fs-xs, 13px);
color: var(--muted); background: #0d141e; border-bottom: 1px solid var(--line);
white-space: nowrap; letter-spacing: .3px;
}
table.tb td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.tb tr:last-child td { border-bottom: none; }
table.tb tbody tr:hover { background: var(--hover-veil-soft); }
table.tb td.num, table.tb th.num { text-align: right; font-family: var(--mono); }
.empty-row { padding: 46px 20px; text-align: center; color: var(--muted); font-size: var(--fs-sm, 14px); }
/* ---------------- 徽标 / 提示 ---------------- */
.tag {
display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px;
border-radius: 5px; font-size: var(--fs-xs, 13px); font-weight: 500; white-space: nowrap;
}
.tag-gray { background: #1a2432; color: #9aabbd; }
.tag-blue { background: rgba(47, 129, 247, .14); color: #6aa9ff; }
.tag-teal { background: rgba(23, 184, 166, .14); color: var(--accent-teal-text); }
.tag-warn { background: rgba(240, 169, 46, .14); color: #f3bb5b; }
.tag-danger { background: rgba(239, 77, 90, .14); color: #ff8a93; }
.tag-up { background: rgba(246, 70, 93, .14); color: #ff7c8c; }
.tag-down { background: rgba(14, 203, 129, .14); color: #48d99b; }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm, 14px); margin-bottom: 16px; line-height: var(--lh-base, 1.7); border: 1px solid transparent; }
.alert-info { background: rgba(47, 129, 247, .1); border-color: rgba(47, 129, 247, .25); color: #9dc7ff; }
.alert-warn { background: rgba(240, 169, 46, .1); border-color: rgba(240, 169, 46, .25); color: #f3c877; }
.alert-error { background: rgba(239, 77, 90, .1); border-color: rgba(239, 77, 90, .25); color: #ff9aa2; }
.alert-success { background: rgba(14, 203, 129, .1); border-color: rgba(14, 203, 129, .25); color: #63e0a8; }
/* ---------------- 分页 ---------------- */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.pager a, .pager span {
min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 7px; font-size: var(--fs-sm, 14px); color: var(--text-2);
}
.pager a:hover { border-color: var(--line-strong); color: var(--text); }
.pager .on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .off { opacity: .4; }
/* ---------------- 页脚 ---------------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 44px 0 30px; margin-top: 30px; background: #070a0f; }
/* v2.5.0：末尾多一列放小程序码（auto 宽度，没配码时该轨自然塌成 0，不留空档） */
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr auto; gap: 32px; }
.footer-cols h5 { font-size: var(--fs-sm, 14px); font-weight: 600; margin-bottom: 14px; }
.footer-cols a, .footer-cols p { display: block; font-size: var(--fs-sm, 14px); color: var(--muted); line-height: 2.1; }
.footer-cols a:hover { color: var(--text); }
.footer-bottom {
margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-soft);
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-size: var(--fs-xs, 13px); color: #56626f;
}
/* ---------------- 工作台：左选右报告 ---------------- */
.wb { padding: 26px 0 60px; }
.wb-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.wb-head h1 { font-size: var(--fs-xl, 26px); font-weight: 700; }
.wb-head .sub { font-size: var(--fs-sm, 14px); color: var(--muted); margin-top: 6px; }
.wb-body { display: grid; grid-template-columns: 344px 1fr; gap: 20px; align-items: start; }
.wb-left { position: sticky; top: 78px; }
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.panel-head {
padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
display: flex; align-items: center; justify-content: space-between;
}
.panel-head h3 { font-size: var(--fs-sm, 14px); font-weight: 600; }
.panel-body { padding: 16px; }
.step { margin-bottom: 20px; }
.step:last-child { margin-bottom: 0; }
.step-label { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs, 13px); color: var(--text-2); margin-bottom: 9px; font-weight: 500; }
.step-no {
width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
font-size: var(--fs-xs, 13px); font-family: var(--mono); background: var(--brand-soft); color: #58a6ff;
border: 1px solid rgba(47, 129, 247, .35);
}
.area-search { position: relative; }
.area-suggest {
position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 5px;
background: #101825; border: 1px solid var(--line); border-radius: var(--radius-sm);
box-shadow: var(--shadow); max-height: 260px; overflow: auto; display: none;
}
.area-suggest.on { display: block; }
.area-suggest li { padding: 8px 12px; font-size: var(--fs-sm, 14px); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.area-suggest li:hover { background: rgba(47, 129, 247, .1); }
.area-suggest li .m { color: var(--muted); font-size: var(--fs-xs, 13px); }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
padding: 5px 11px; border-radius: 20px; font-size: var(--fs-xs, 13px); cursor: pointer;
border: 1px solid var(--line); background: #0d141e; color: var(--text-2); transition: .15s;
user-select: none;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.on { background: var(--brand-soft); border-color: rgba(47, 129, 247, .5); color: #7db6ff; }
.budget-list { display: grid; gap: 7px; }
.budget-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
background: #0d141e; cursor: pointer; transition: .15s; font-size: var(--fs-sm, 14px);
}
.budget-item:hover { border-color: var(--line-strong); }
.budget-item.on { border-color: rgba(47, 129, 247, .55); background: var(--brand-soft); }
.budget-item .b-l { display: flex; flex-direction: column; gap: 2px; }
.budget-item .b-l small { color: var(--muted); font-size: var(--fs-xs, 13px); }
.budget-item .b-r { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--text-2); }
.budget-item.on .b-r { color: #7db6ff; }
.map-pick { height: 168px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #0a1017; position: relative; overflow: hidden; }
.map-pick canvas { display: block; width: 100%; height: 100%; }
.map-pick .hint { position: absolute; left: 10px; bottom: 8px; font-size: var(--fs-xs, 13px); color: var(--muted); background: rgba(8, 11, 17, .8); padding: 2px 7px; border-radius: 4px; }
.map-pick .cross { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -8px 0 0 -8px; pointer-events: none; }
.map-pick .cross::before, .map-pick .cross::after { content: ''; position: absolute; background: var(--brand); }
.map-pick .cross::before { left: 7px; top: 0; width: 1px; height: 15px; }
.map-pick .cross::after { top: 7px; left: 0; height: 1px; width: 15px; }
.coord-line { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs, 13px); color: var(--muted); margin-top: 7px; font-family: var(--mono); }
.wb-gen { display: flex; gap: 8px; margin-top: 4px; }
.wb-gen .btn { flex: 1; }
/* 右侧报告区 */
.wb-right { min-height: 520px; }
.report-empty {
display: grid; place-items: center; text-align: center; padding: 76px 24px;
background: var(--panel); border: 1px dashed #22303f; border-radius: var(--radius);
}
.report-empty .ic { font-size: var(--fs-2xl, 34px); opacity: .5; margin-bottom: 14px; }
.report-empty h3 { font-size: var(--fs-base, 15px); font-weight: 600; margin-bottom: 8px; }
.report-empty p { font-size: var(--fs-sm, 14px); color: var(--muted); max-width: 380px; line-height: var(--lh-loose, 1.9); }
.report-body { animation: fadeUp .32s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rep-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.rep-title h2 { font-size: var(--fs-lg, 20px); font-weight: 700; }
.rep-title .meta { font-size: var(--fs-xs, 13px); color: var(--muted); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.score-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.score-cell { background: var(--panel); padding: 14px 16px; }
.score-cell span { display: block; font-size: var(--fs-xs, 13px); color: var(--muted); margin-bottom: 5px; }
.score-cell b { font-size: var(--fs-lg, 20px); font-weight: 800; font-family: var(--mono); letter-spacing: -.6px; line-height: 1.1; }
.score-cell small { font-size: var(--fs-xs, 13px); color: var(--muted); margin-left: 3px; }
.score-cell .mini-bar { height: 3px; border-radius: 2px; background: #16202e; margin-top: 8px; overflow: hidden; }
.score-cell .mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.ring-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ring-card { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px; }
.ring-card .r-top { display: flex; align-items: baseline; justify-content: space-between; }
.ring-card .r-r { font-size: var(--fs-xs, 13px); color: var(--muted); font-family: var(--mono); }
.ring-card .r-n { font-size: var(--fs-xl, 26px); font-weight: 800; font-family: var(--mono); }
.ring-card .r-n small { font-size: var(--fs-xs, 13px); color: var(--muted); font-weight: 400; margin-left: 3px; }
.ring-card .r-sub { font-size: var(--fs-xs, 13px); color: var(--muted); margin-top: 4px; }
.kv-list { display: grid; gap: 9px; }
.kv { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm, 14px); gap: 12px; }
.kv span { color: var(--muted); }
.kv b { font-family: var(--mono); font-weight: 600; }
.kv b.up { color: var(--up); }
.kv b.down { color: var(--down); }
.rec-list { display: grid; gap: 8px; }
.rec-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel-2); border-radius: var(--radius-sm); border: 1px solid var(--line-soft); }
.rec-item .rk { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: var(--fs-xs, 13px); font-family: var(--mono); background: #1c2837; color: var(--muted); }
.rec-item:first-child .rk { background: rgba(47, 129, 247, .18); color: #7db6ff; }
.rec-item .rc-n { flex: 1; font-size: var(--fs-sm, 14px); }
.rec-item .rc-n small { display: block; color: var(--muted); font-size: var(--fs-xs, 13px); }
.rec-item .rc-s { font-family: var(--mono); font-weight: 700; font-size: var(--fs-base, 15px); color: #7db6ff; }
.risk-list { display: grid; gap: 7px; }
.risk-item { display: flex; gap: 9px; font-size: var(--fs-xs, 13px); line-height: 1.75; color: var(--text-2); padding: 8px 11px; background: rgba(240, 169, 46, .055); border-left: 2px solid rgba(240, 169, 46, .5); border-radius: 0 5px 5px 0; }
.risk-item.sev-high { background: rgba(239, 77, 90, .06); border-left-color: rgba(239, 77, 90, .6); }
.risk-item .dot { color: var(--warn); }
.rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.locked-box {
position: relative; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--panel); padding: 26px 22px; text-align: center;
}
.locked-box h4 { font-size: var(--fs-base, 15px); margin-bottom: 8px; }
.locked-box p { font-size: var(--fs-sm, 14px); color: var(--muted); margin-bottom: 16px; line-height: 1.8; }
.loading-box { display: grid; place-items: center; padding: 70px 20px; }
.spinner {
width: 30px; height: 30px; border-radius: 50%;
border: 2.5px solid #1e2a3a; border-top-color: var(--brand);
animation: spin .7s linear infinite; margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------------- 登录注册 ---------------- */
.auth-wrap { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 396px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; padding: 30px 28px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: var(--fs-xl, 26px); font-weight: 700; margin-bottom: 6px; }
.auth-card .sub { font-size: var(--fs-sm, 14px); color: var(--muted); margin-bottom: 24px; }
.auth-alt { text-align: center; font-size: var(--fs-sm, 14px); color: var(--muted); margin-top: 18px; }
.auth-alt a { color: #58a6ff; }
/* 邀请来源条：告诉被邀请人「你为什么能看到这一页」。
刻意做成一条信息条而不是弹窗/横幅 —— 他从分享链接点进来时本来就知道是别人推荐的，
再弹一次只是打断注册。这里只确认「邀请关系已被记录」，让他放心注册后积分不会算错人。 */
.invite-inline { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 18px; border-radius: 9px; background: rgba(79,214,196,.07); border: 1px solid rgba(79,214,196,.22); }
.invite-inline .ii-badge { flex: 0 0 auto; padding: 1px 7px; border-radius: 5px; background: rgba(79,214,196,.16); color: var(--accent-teal-text); font-size: var(--fs-xs, 13px); line-height: 18px; letter-spacing: .5px; }
.invite-inline .ii-text { font-size: var(--fs-xs, 13px); line-height: 1.65; color: var(--muted); }
.invite-inline .ii-text strong { color: #d7dee8; font-weight: 600; }
.invite-inline .ii-text em { display: block; font-style: normal; font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs, 13px); color: var(--accent-teal-text); letter-spacing: .8px; margin-top: 2px; }
/* 通道切换（手机号 / 邮箱）
用两段等宽的胶囊按钮而不是原生 radio：原生 radio 在这种深色卡片里
很难做出「选中态一眼可辨」的效果，而选错通道会直接导致注册失败。 */
.auth-tabs {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
padding: 4px; margin-bottom: 20px;
background: #0b1119; border: 1px solid var(--line-soft); border-radius: 9px;
}
.auth-tab {
height: 34px; border: 0; border-radius: 6px; cursor: pointer;
background: transparent; color: var(--muted);
font-size: var(--fs-sm, 14px); font-family: var(--font); font-weight: 500;
transition: background .16s, color .16s;
}
.auth-tab:hover { color: var(--text-2); }
.auth-tab.is-active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.auth-single {
font-size: var(--fs-xs, 13px); color: var(--muted); margin-bottom: 18px;
padding: 8px 12px; border-radius: 7px;
background: #0b1119; border: 1px solid var(--line-soft);
}
.auth-pane[hidden] { display: none; }
/* 验证码行：输入框吃掉剩余宽度，按钮固定宽度，窄屏也不会挤成两行 */
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row .input { flex: 1 1 auto; min-width: 0; }
.btn-code {
flex: 0 0 auto; min-width: 104px; height: 38px; padding: 0 12px;
font-size: var(--fs-xs, 13px); white-space: nowrap;
color: var(--brand); border-color: rgba(47, 129, 247, .38);
background: var(--brand-soft);
}
.btn-code:hover:not(:disabled) { background: rgba(47, 129, 247, .2); }
.btn-code:disabled { cursor: not-allowed; opacity: .7; }
.btn-code.is-waiting {
/* 倒计时期间保留按钮的「形状」：底色仍比卡片深一档、边框仍在，
否则整块会缩成一行淡字，用户会以为按钮消失了、页面卡住了 */
color: var(--muted); border-color: var(--line);
background: var(--panel-2); font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.field .tip-ok { color: var(--brand-2); }
.field .tip-warn { color: var(--warn); }
@media (max-width: 420px) {
.auth-card { padding: 24px 18px; }
.btn-code { min-width: 92px; padding: 0 8px; font-size: var(--fs-xs, 13px); }
}
/* ---------------- 会员中心 ---------------- */
.member-body { display: grid; grid-template-columns: 208px 1fr; gap: 22px; padding: 26px 0 60px; align-items: start; }
.side-nav { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px; position: sticky; top: 78px; }
.side-nav a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm, 14px); color: var(--text-2); transition: .15s; }
.side-nav a:hover { background: var(--hover-veil); color: var(--text); }
.side-nav a.on { background: var(--brand-soft); color: #7db6ff; }
.side-nav .divider { height: 1px; background: var(--line-soft); margin: 8px 4px; }
.member-head { display: flex; align-items: center; gap: 16px; padding: 20px; background: linear-gradient(120deg, #12203a, #0f1927); border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 20px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-lg, 20px); font-weight: 700; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; flex-shrink: 0; }
.member-head .mh-n { font-size: var(--fs-base, 15px); font-weight: 600; }
.member-head .mh-m { font-size: var(--fs-xs, 13px); color: var(--muted); margin-top: 3px; }
.member-head .mh-r { margin-left: auto; text-align: right; }
.member-head .mh-r b { font-size: var(--fs-xl, 26px); font-family: var(--mono); font-weight: 800; color: var(--accent-teal-text); display: block; line-height: 1.1; }
.member-head .mh-r span { font-size: var(--fs-xs, 13px); color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-cell { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; }
.stat-cell span { font-size: var(--fs-xs, 13px); color: var(--muted); display: block; margin-bottom: 6px; }
.stat-cell b { font-size: var(--fs-lg, 20px); font-weight: 800; font-family: var(--mono); }
.stat-cell small { font-size: var(--fs-xs, 13px); color: var(--muted); margin-left: 4px; }
/* ---------------- 套餐 / 支付 ---------------- */
/* 套餐数量由后台决定：固定 3 列时，4 个套餐会在第二行留下一个孤零零的卡片 */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.plan-card {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 22px; position: relative; transition: .18s; text-align: center;
}
.plan-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.plan-card.hot { border-color: rgba(47, 129, 247, .55); box-shadow: 0 0 0 1px rgba(47, 129, 247, .2); }
.plan-card .pc-tag { position: absolute; top: -1px; right: 14px; font-size: var(--fs-xs, 13px); padding: 2px 9px; border-radius: 0 0 6px 6px; background: var(--brand); color: #fff; }
.plan-card h3 { font-size: var(--fs-base, 15px); font-weight: 600; color: var(--text-2); }
.plan-card .amount { font-size: var(--fs-2xl, 34px); font-weight: 800; font-family: var(--mono); margin: 12px 0 4px; letter-spacing: -1px; }
.plan-card .amount small { font-size: var(--fs-base, 15px); font-weight: 500; margin-right: 2px; }
.plan-card .pts { font-size: var(--fs-sm, 14px); color: var(--accent-teal-text); margin-bottom: 4px; }
.plan-card .bonus { font-size: var(--fs-xs, 13px); color: var(--warn); }
/* 点位数是用户真正在买的东西，积分只是计价单位 —— 所以点位数给到主视觉权重 */
.plan-card .plan-quota {
margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .08);
font-size: var(--fs-xs, 13px); color: var(--text-2);
}
.plan-card .plan-quota strong { font-size: var(--fs-lg, 20px); font-family: var(--mono); color: var(--accent-teal-text); margin: 0 2px; }
.plan-card .plan-unit { color: var(--muted); font-size: var(--fs-xs, 13px); }
.quota-hint { margin-top: 8px; font-size: var(--fs-xs, 13px); color: var(--accent-teal-text); min-height: 18px; }
.quota-hint b { font-family: var(--mono); font-size: var(--fs-base, 15px); }
.plan-card .btn { margin-top: 18px; }
.pay-body { display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding: 26px 0 60px; align-items: start; }
.pay-amount { text-align: center; padding: 26px 20px; }
.pay-amount .pa-n { font-size: var(--fs-num, 40px); font-weight: 800; font-family: var(--mono); letter-spacing: -1.5px; }
.pay-amount .pa-n small { font-size: var(--fs-md, 17px); }
.pay-amount .pa-p { font-size: var(--fs-sm, 14px); color: var(--accent-teal-text); margin-top: 6px; }
.method-list { display: grid; gap: 9px; }
.method { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0d141e; cursor: pointer; transition: .15s; }
.method:hover { border-color: var(--line-strong); }
.method.on { border-color: rgba(47, 129, 247, .55); background: var(--brand-soft); }
.method .mi { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: #16202e; font-size: var(--fs-base, 15px); }
.method .mt-n { flex: 1; font-size: var(--fs-sm, 14px); }
.method .mt-n small { display: block; color: var(--muted); font-size: var(--fs-xs, 13px); }
.method .radio { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #33455c; }
.method.on .radio { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 3.5px, transparent 4px); }
.bank-info { background: #0b1119; border: 1px dashed #2a3a4d; border-radius: var(--radius-sm); padding: 14px; font-size: var(--fs-sm, 14px); }
.bank-info .bi-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.bank-info .bi-row span { color: var(--muted); }
.bank-info .bi-row b { font-family: var(--mono); }
/* ---------------- 通用页面头 ---------------- */
.page-head { padding: 40px 0 10px; }
.page-head h1 { font-size: var(--fs-xl, 26px); font-weight: 700; letter-spacing: -.5px; }
.page-head p { color: var(--muted); margin-top: 10px; font-size: var(--fs-base, 15px); }
.prose { font-size: var(--fs-base, 15px); line-height: 2; color: var(--text-2); }
.prose h2 { font-size: var(--fs-lg, 20px); font-weight: 700; color: var(--text); margin: 32px 0 14px; }
.prose h3 { font-size: var(--fs-base, 15px); font-weight: 600; color: var(--text); margin: 24px 0 10px; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 16px 0; padding-left: 0; }
.prose ul li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #2f81f7; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: #58a6ff; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: var(--fs-sm, 14px); }
.prose table th, .prose table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose table th { background: #0d141e; color: var(--muted); font-weight: 500; }
/* 富文本编辑器产出的其余标签 */
.prose h4 { font-size: var(--fs-base, 15px); font-weight: 600; color: var(--text); margin: 20px 0 8px; }
.prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose ol li { margin-bottom: 8px; list-style: decimal; }
.prose blockquote {
margin: 20px 0; padding: 12px 16px; border-left: 3px solid var(--brand);
background: rgba(47, 129, 247, .06); border-radius: 0 8px 8px 0; color: var(--text-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 18px 0; display: block; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.prose em, .prose i { font-style: italic; }
.prose u { text-decoration: underline; text-underline-offset: 3px; }
.prose code {
font-family: var(--mono); font-size: var(--fs-xs, 13px); padding: 2px 6px; border-radius: 4px;
background: rgba(255, 255, 255, .06); color: #9fd3b8;
}
.prose pre {
padding: 14px 16px; border-radius: 8px; background: #0a0f16; overflow-x: auto;
border: 1px solid var(--line-soft); margin: 0 0 16px;
}
.prose pre code { background: none; padding: 0; }
/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
.hero-grid { grid-template-columns: 1fr; gap: 36px; }
.wb-body { grid-template-columns: 300px 1fr; }
.pay-body { grid-template-columns: 1fr; }
.member-body { grid-template-columns: 1fr; }
.side-nav { position: static; display: flex; gap: 6px; overflow-x: auto; }
.side-nav .divider { display: none; }
.score-strip { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
.wrap { padding: 0 16px; }
.site-header .wrap { height: 56px; gap: 10px; }
.logo { flex: none; }
.head-actions { flex: none; gap: 6px; }
.head-actions .btn { padding: 0 11px; }
/* 移动端不能把导航整块 display:none（手机上就没有导航了），
改成可展开的竖排菜单。这里用 absolute 而不是 fixed：
.site-header 上的 backdrop-filter 会给 fixed 后代造新的包含块，
fixed 面板会被裁进 56px 高的头部里。 */
.nav-toggle { display: flex; }
.nav {
display: none; position: absolute; left: 0; right: 0; top: 100%;
flex: none; flex-direction: column; align-items: stretch; gap: 2px;
padding: 8px 16px 16px; max-height: calc(100vh - 56px); overflow-y: auto;
background: #0b1017; border-bottom: 1px solid var(--line-soft);
box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.nav.open { display: flex; }
.nav > a, .nav-dd-t { padding: 11px 12px; font-size: var(--fs-base, 15px); }
/* 移动端下拉不做浮层：父项下面直接平铺子项，缩进 + 左边线表示层级，
免得手机上还要再点一次才看到二级菜单 */
.nav-dd { position: static; }
.nav-dd-p {
position: static; min-width: 0; margin: 0 0 2px; padding: 0 0 2px 14px;
opacity: 1; visibility: visible; transform: none;
background: transparent; border: none; border-left: 1px solid var(--line);
border-radius: 0; box-shadow: none; transition: none;
}
.nav-dd-p a { padding: 9px 12px; font-size: var(--fs-sm, 14px); }
.nav .nav-badge { margin-left: 6px; }
.nav-extra {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 6px; padding: 12px 12px 0; border-top: 1px solid var(--line-soft);
}
.hero { padding: 48px 0 36px; }
.hero h1 { font-size: var(--fs-2xl, 34px); letter-spacing: -.8px; }
.hero p.lead { font-size: var(--fs-base, 15px); }
.section { padding: 48px 0; }
.section-head h2 { font-size: var(--fs-lg, 20px); }
.grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
.plan-grid { grid-template-columns: 1fr; }
.wb-body { grid-template-columns: 1fr; }
.wb-left { position: static; }
/* 窄屏下条件面板整块铺开有 1700px 高，地图被顶到第二屏以下，
用户滚很久才看到「点位地图」，会以为这页没有地图。
把左栏限高并允许内部滚动，地图就能在第一屏露出来。 */
.wb-left .panel-body { max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wb-right { min-height: 0; }
.score-strip { grid-template-columns: repeat(2, 1fr); }
.ring-grid { grid-template-columns: 1fr; }
.rep-cols { grid-template-columns: 1fr; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.form-row, .form-row-3 { grid-template-columns: 1fr; }
/* 页脚：品牌块独占一行，下面三组链接排两列。
原来是 1fr 单列，三组各占一整行、全部左对齐，在手机上就是三长条字，很难看。 */
.site-footer { padding: 32px 0 24px; }
.footer-cols { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.footer-cols .footer-brand { grid-column: 1 / -1; }
.footer-cols .footer-brand p { max-width: none; }
.footer-cols h5 { font-size: var(--fs-xs, 13px); margin-bottom: 8px; line-height: var(--lh-loose, 1.9); }
.footer-cols a, .footer-cols p { font-size: var(--fs-xs, 13px); line-height: var(--lh-loose, 1.9); }
.footer-bottom {
flex-direction: column; align-items: flex-start; gap: 6px;
margin-top: 22px; padding-top: 16px;
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.hero-facts { gap: 22px; }
.member-head { flex-wrap: wrap; }
.member-head .mh-r { margin-left: 0; text-align: left; }
.card { padding: 16px; }
table.tb th, table.tb td { padding: 9px 10px; }
}
@media (max-width: 560px) {
/* 390px 宽下头部横向真的不够：logo + 汉堡 + 三个按钮会顶出 26px，
浏览器就出现横向滚动条。这里把「非主操作」收进移动菜单（.nav-extra），
头部只留一个主按钮，主 CTA 永远可见。 */
.head-actions .btn-ghost,
.head-actions .pill-points { display: none; }
/* 560 以下仍然保持两列：单列会让每组链接各占一行，滚动距离翻倍且更难扫读 */
.footer-cols { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.footer-cols h5 { font-size: var(--fs-xs, 13px); }
.footer-cols a, .footer-cols p { font-size: var(--fs-xs, 13px); line-height: var(--lh-loose, 1.9); }
.footer-bottom { font-size: var(--fs-xs, 13px); }
}
/* 法务页译文里的表格在 <=640px 被 legal.css 固定成 min-width:520px（为了不把中文挤成一字一行），
但它的容器没有滚动，结果整页被顶出横向滚动条（/privacy 实测 scrollWidth 536 / clientWidth 390）。
让正文自己横向滚动，页面宽度就能回到 390。 */
@media (max-width: 640px) {
.lg-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media print {
.site-header, .site-footer, .wb-left, .no-print { display: none !important; }
body { background: #fff; color: #111; }
.card, .panel, .ring-card { border-color: #ddd; background: #fff; }
}
/* ==========================================================================
首页轮播
========================================================================== */
.bcar { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel); aspect-ratio: 8 / 3; max-height: 400px; }
.bslide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; display: block; }
.bslide.on { opacity: 1; pointer-events: auto; }
.bslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bslide .bcap {
position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 26px 22px;
background: linear-gradient(to top, rgba(6, 9, 14, .92), rgba(6, 9, 14, .55) 55%, transparent);
display: flex; flex-direction: column; gap: 5px;
}
/* ⚠️ .bcap 的遮罩是写死的深色渐变（压在任何一张 banner 图上都成立，与主题无关），
所以这里三层文字必须写死浅色，不能再用 var(--text) / var(--text-2)。
v2.7.0 换日间主题时漏了这一步：标题拿到 --text(#172233)、副标题拿到 --text-2(#43566d)，
在 rgba(6,9,14,.92) 的遮罩上对比度只有 1.15:1 / 1.9:1 —— 整块标题等于没写。
实测截图：首页轮播标题「SEO测试用 1920x720」在浅色主题下完全看不见。 */
.bslide .bcap b { font-size: var(--fs-lg, 20px); font-weight: 700; letter-spacing: -.3px; line-height: 1.35; color: #f4f7fb; }
.bslide .bcap span { font-size: var(--fs-sm, 14px); color: #c9d5e3; max-width: 640px; }
.bslide .bcap i { font-style: normal; font-size: var(--fs-xs, 13px); color: #7db6ff; margin-top: 4px; }
.bdots { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 6px; z-index: 3; }
.bdots button { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .32); cursor: pointer; padding: 0; transition: .2s; }
.bdots button.on { background: #7db6ff; width: 18px; border-radius: 4px; }
@media (max-width: 820px) {
.bcar { aspect-ratio: 16 / 10; max-height: 260px; }
.bslide .bcap { padding: 26px 16px 14px; }
.bslide .bcap b { font-size: var(--fs-base, 15px); }
.bslide .bcap span { font-size: var(--fs-xs, 13px); }
.bdots { right: 10px; bottom: 10px; }
}
/* ==========================================================================
首页数据看板
========================================================================== */
.db-section { padding-top: 46px; }
.db-head { margin-bottom: 30px; }
.db-head h2 { font-size: var(--fs-xl, 26px); }
.db-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.db-kpi {
position: relative; overflow: hidden; padding: 18px 16px 15px;
background: linear-gradient(180deg, #121c2b 0%, #0e1622 100%);
border: 1px solid var(--line-soft); border-radius: 12px;
animation: dbFadeUp .55s ease both;
}
.db-kpi::before {
content: ''; position: absolute; left: 16px; top: 0; width: 26px; height: 2px;
background: linear-gradient(90deg, #4fd6c4, rgba(79, 214, 196, 0));
}
.db-kpi-label { display: block; font-size: var(--fs-xs, 13px); color: var(--muted); letter-spacing: .3px; }
.db-kpi-num {
font-family: var(--mono); font-size: var(--fs-num, 40px); font-weight: 800; letter-spacing: -1.1px;
line-height: 1.18; margin-top: 9px; color: #e9f1fa; font-variant-numeric: tabular-nums;
}
.db-kpi-num small {
margin-left: 4px; font-family: var(--font); font-size: var(--fs-xs, 13px); font-weight: 500;
letter-spacing: 0; color: var(--muted);
}
.db-kpi-note { margin-top: 7px; font-size: var(--fs-xs, 13px); line-height: 1.5; color: var(--muted); }
.db-kpi.is-accent .db-kpi-num { color: var(--accent-teal-text); }
.db-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 14px; }
.db-card {
min-width: 0; padding: 18px 20px 16px; background: var(--panel);
border: 1px solid var(--line-soft); border-radius: var(--radius);
animation: dbFadeUp .6s ease both;
/* 卡片改成纵向弹性容器：同一行两张卡高度由 grid 拉齐后，
内容不再顶在上面留出一大块空白，而是由 .db-fill / .db-tierfill 吃掉剩余高度。 */
display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
/* 每张卡一条 2px 顶色带 + 标题前的色点：六块看板各有主色，
不靠加大字号或换背景来区分，扫一眼就知道这块在讲什么维度。 */
.db-card::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
background: var(--db-accent, rgba(79, 214, 196, .0));
opacity: .9;
}
.db-card.is-rank { --db-accent: linear-gradient(90deg, #4fd6c4, rgba(79, 214, 196, 0)); }
.db-card.is-tier { --db-accent: linear-gradient(90deg, #2f81f7, rgba(47, 129, 247, 0)); }
.db-card.is-rent { --db-accent: linear-gradient(90deg, #7aa2ff, rgba(122, 162, 255, 0)); }
.db-card.is-heat { --db-accent: linear-gradient(90deg, #f0a92e, rgba(240, 169, 46, 0)); }
.db-card.is-city { --db-accent: linear-gradient(90deg, #4fd6c4, rgba(79, 214, 196, 0)); }
.db-card.is-cat { --db-accent: linear-gradient(90deg, #a78bfa, rgba(167, 139, 250, 0)); }
.db-span-5 { grid-column: span 5; }
.db-span-7 { grid-column: span 7; }
.db-span-12 { grid-column: span 12; }
.db-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex: 0 0 auto; }
.db-card-head h3 { font-size: var(--fs-base, 15px); font-weight: 600; letter-spacing: .1px; display: flex; align-items: center; gap: 8px; }
.db-card-head h3::before {
content: ''; width: 6px; height: 6px; border-radius: 2px; flex: 0 0 auto;
background: var(--db-dot, #4fd6c4);
}
.db-card.is-tier .db-card-head h3::before { background: #2f81f7; }
.db-card.is-rent .db-card-head h3::before { background: #7aa2ff; }
.db-card.is-heat .db-card-head h3::before { background: #f0a92e; }
.db-card.is-cat .db-card-head h3::before { background: #a78bfa; }
.db-card-head span { font-size: var(--fs-xs, 13px); color: var(--muted); }
.db-svg { display: block; width: 100%; height: auto; }
.db-chart { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
/* 卡片是 flex 列，图表吃掉剩余高度并垂直居中：否则同行另一张卡更高时，图表会贴着标题、下方留白 */
.db-card .db-chart { flex: 1; display: flex; align-items: center; }
.db-chart::-webkit-scrollbar { height: 4px; }
.db-chart::-webkit-scrollbar-thumb { background: #243448; border-radius: 2px; }
.db-mini-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: var(--fs-xs, 13px); color: var(--muted); }
.db-mini-legend span { display: inline-flex; align-items: center; gap: 6px; }
.db-mini-legend i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.db-mini-legend .db-mini-hint { margin-left: auto; color: #5f7089; }
.db-empty {
padding: 40px 12px; text-align: center; font-size: var(--fs-xs, 13px); color: var(--muted);
border: 1px dashed var(--line); border-radius: 8px;
}
.db-figure-note { margin-top: 8px; font-size: var(--fs-xs, 13px); line-height: 1.6; color: var(--muted); }
.db-source {
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
font-size: var(--fs-xs, 13px); line-height: 1.8; color: var(--muted);
}
/* 环形图 */
.db-donut-wrap { display: flex; align-items: center; gap: 20px; padding: 4px 0 2px; flex: 1; }
.db-donut { width: 176px; flex: 0 0 176px; height: auto; }
.db-donut-total { font-family: var(--mono); font-size: var(--fs-2xl, 34px); font-weight: 800; fill: #e9f1fa; }
.db-donut-unit { font-size: var(--fs-xs, 13px); fill: #74849a; }
.db-legend { flex: 1; min-width: 0; display: grid; gap: 12px; align-content: center; }
.db-legend-item {
display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center;
gap: 9px; font-size: var(--fs-xs, 13px); color: var(--text-2);
}
.db-legend-item i { display: block; width: 8px; height: 8px; border-radius: 2px; }
.db-legend-item b { font-family: var(--mono); font-size: var(--fs-base, 15px); color: var(--text); }
.db-legend-item em {
font-style: normal; font-family: var(--mono); font-size: var(--fs-xs, 13px);
color: var(--muted); min-width: 32px; text-align: right;
}
.db-legend-note {
font-size: var(--fs-xs, 13px); line-height: var(--lh-base, 1.7); color: var(--muted);
border-top: 1px solid var(--line-soft); padding-top: 10px;
}
/* 层级结构卡的下半部分：100% 占比条 + 三档均值表
目的是把「左卡 10 行 / 右卡 3 行」造成的高度差用真实读数填掉，而不是拉大环形图。 */
.db-tierfill { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.db-tierbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #141e2b; }
.db-tierbar i { display: block; height: 100%; }
.db-tierstat { display: grid; gap: 0; }
.db-tierstat-head,
.db-tierstat-row {
display: grid; grid-template-columns: minmax(0, 1fr) 52px 78px 62px;
align-items: center; gap: 10px;
}
.db-tierstat-head {
padding-bottom: 7px; font-size: var(--fs-xs, 13px); letter-spacing: .4px; color: #5f7089;
}
.db-tierstat-head span:nth-child(n+2) { text-align: right; }
.db-tierstat-row { padding: 6px 0; border-top: 1px dashed rgba(36, 52, 72, .6); }
.db-tierstat-name { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs, 13px); color: var(--text-2); min-width: 0; }
.db-tierstat-name i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.db-tierstat-row b {
font-family: var(--mono); font-size: var(--fs-xs, 13px); font-weight: 500;
color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums;
}
/* 城市商圈分布：HTML 条形。条高与字号固定，不随卡片宽度缩放 */
.db-city { display: grid; gap: 14px; flex: 1; align-content: center; padding: 2px 0 6px; }
.db-city-row { display: grid; grid-template-columns: 24px 62px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.db-city-rank { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: #5f7089; text-align: center; }
.db-city-rank.is-top { color: var(--accent-teal-text); }
.db-city-name { font-size: var(--fs-xs, 13px); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-city-track { position: relative; height: 12px; border-radius: 6px; background: #141e2b; overflow: hidden; }
.db-city-bar { display: flex; height: 100%; border-radius: 6px; overflow: hidden; min-width: 6px; }
.db-city-bar i { display: block; height: 100%; }
.db-city-bar .seg-core { background: #4fd6c4; }
.db-city-bar .seg-sec { background: #2f81f7; }
.db-city-bar .seg-com { background: #f0a92e; }
.db-city-n { font-family: var(--mono); font-size: var(--fs-xs, 13px); font-weight: 600; color: var(--text); text-align: right; }
/* 客群指数 */
.db-heat { display: grid; gap: 11px; padding-top: 2px; }
.db-heat-row { display: grid; grid-template-columns: 26px 118px 1fr 46px; align-items: center; gap: 10px; }
.db-heat-rank { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: #5f7089; text-align: center; }
.db-heat-rank.is-top { color: var(--accent-teal-text); }
.db-heat-name { font-size: var(--fs-xs, 13px); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-heat-name small { margin-left: 5px; font-size: var(--fs-xs, 13px); color: var(--muted); }
.db-heat-track { height: 7px; border-radius: 4px; background: #141e2b; overflow: hidden; }
.db-heat-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2f81f7 0%, #4fd6c4 100%); }
.db-heat-score { font-family: var(--mono); font-size: var(--fs-xs, 13px); font-weight: 600; text-align: right; color: var(--text); }
/* 商圈在营排序：左对齐名称、右对齐数字，数字列等宽才方便逐行对比 */
.db-rank { display: grid; gap: 0; }
.db-rank-head,
.db-rank-row {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) 76px 78px 44px 92px;
align-items: center; gap: 10px;
}
.db-rank-head {
padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
font-size: var(--fs-xs, 13px); letter-spacing: .5px; color: #5f7089; text-transform: uppercase;
}
.db-rank-head span:nth-child(n+4) { text-align: right; }
.db-rank-row { padding: 7px 0; border-bottom: 1px dashed rgba(36, 52, 72, .6); }
.db-rank-row:last-child { border-bottom: 0; }
.db-rank-no { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: #5f7089; text-align: center; }
.db-rank-no.is-top { color: var(--accent-teal-text); }
.db-rank-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.db-rank-name b {
font-size: var(--fs-sm, 14px); font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-rank-name small { flex: 0 0 auto; font-size: var(--fs-xs, 13px); color: var(--muted); }
.db-rank-tier {
justify-self: start; padding: 1px 6px; border-radius: 4px;
border: 1px solid var(--line-soft); font-size: var(--fs-xs, 13px); color: var(--muted);
}
.db-rank-tier.is-core { color: var(--accent-teal-text); border-color: rgba(79, 214, 196, .38); }
.db-rank-tier.is-community { color: #f0a92e; border-color: rgba(240, 169, 46, .38); }
.db-rank-rent,
.db-rank-crowd {
font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--text-2);
text-align: right; font-variant-numeric: tabular-nums;
}
.db-rank-heat { display: grid; gap: 3px; }
.db-rank-heat i {
display: block; height: 4px; border-radius: 3px;
background: linear-gradient(90deg, #2f81f7 0%, #4fd6c4 100%);
}
.db-rank-heat b {
font-family: var(--mono); font-size: var(--fs-xs, 13px); font-weight: 600;
color: var(--text-2); text-align: right;
}
/* 选择器要压过 .db-legend-item em（类+元素 = 0,1,1），否则说明文字会被当成百分比右对齐 */
.db-legend-item .db-legend-sub { display: block; margin-top: 2px; font-size: var(--fs-xs, 13px); font-style: normal; color: #5f7089; text-align: left; min-width: 0; white-space: normal; line-height: 1.5; }
/* 品类结构 */
.db-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
/* 单列版：放在半宽卡里（span-5）时两列会把名称挤成省略号，9 个业态单列排反而更整齐 */
.db-cats-1 { grid-template-columns: minmax(0, 1fr); gap: 0; flex: 1; align-content: center; }
.db-cats-1 .db-cat { grid-template-columns: 84px minmax(0, 1fr) 30px 48px; padding: 7px 0; border-top: 1px dashed rgba(36, 52, 72, .55); }
.db-cats-1 .db-cat:first-child { border-top: 0; }
.db-cat { display: grid; grid-template-columns: 76px 1fr 26px 42px; align-items: center; gap: 12px; }
.db-cat-name { font-size: var(--fs-xs, 13px); color: var(--text-2); }
.db-cat-track { height: 5px; border-radius: 3px; background: #141e2b; overflow: hidden; }
.db-cat-track i {
display: block; height: 100%; border-radius: 3px;
background: linear-gradient(90deg, rgba(47, 129, 247, .85), rgba(79, 214, 196, .85));
}
.db-cat b { font-family: var(--mono); font-size: var(--fs-xs, 13px); font-weight: 500; color: var(--muted); text-align: right; }
.db-cat em { font-family: var(--mono); font-size: var(--fs-xs, 13px); font-style: normal; color: #5f7089; text-align: right; }
@keyframes dbFadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
产品介绍页
========================================================================== */
.pdp-section { padding-top: 18px; }
.pdp-block { padding: 34px 0; border-top: 1px solid var(--line-soft); }
.pdp-block:first-child { padding-top: 6px; border-top: 0; }
.pdp-block-head { margin-bottom: 22px; max-width: 720px; }
.pdp-block-head .eyebrow { margin-bottom: 10px; }
.pdp-block-head h2 { font-size: var(--fs-xl, 26px); font-weight: 700; letter-spacing: -.4px; line-height: 1.35; }
.pdp-block-head p { margin-top: 9px; font-size: var(--fs-sm, 14px); line-height: 1.8; color: var(--muted); }
.pdp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp-cap {
padding: 18px 16px 16px; border: 1px solid var(--line-soft); border-radius: 11px;
background: linear-gradient(180deg, #131d2c 0%, #0f1724 100%);
transition: border-color .18s, transform .18s;
}
.pdp-cap:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pdp-cap-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pdp-cap-no { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--accent-teal-text); letter-spacing: .5px; }
.pdp-cap-kids { font-size: var(--fs-xs, 13px); color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 1px 7px; }
.pdp-cap h3 { font-size: var(--fs-base, 15px); font-weight: 600; letter-spacing: .2px; }
.pdp-cap-dim { margin-top: 8px; font-size: var(--fs-xs, 13px); line-height: 1.75; color: var(--text-2); }
.pdp-cap-meta {
margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .07);
font-family: var(--mono); font-size: var(--fs-xs, 13px); line-height: 1.6; color: var(--muted);
}
.pdp-steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding-top: 6px; }
.pdp-steps::before {
content: ''; position: absolute; left: 18px; right: 18px; top: 22px; height: 1px;
background: linear-gradient(90deg, rgba(79, 214, 196, .55), rgba(47, 129, 247, .3));
}
.pdp-step { position: relative; padding-top: 42px; }
.pdp-step-no {
position: absolute; left: 0; top: 0; z-index: 1; width: 32px; height: 32px;
display: grid; place-items: center; border-radius: 50%;
font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--accent-teal-text);
background: #0e1723; border: 1px solid rgba(79, 214, 196, .35);
}
.pdp-step h4 { font-size: var(--fs-sm, 14px); font-weight: 600; margin-bottom: 7px; }
.pdp-step p { font-size: var(--fs-xs, 13px); line-height: 1.75; color: var(--muted); }
.pdp-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pdp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); }
.pdp-table th, .pdp-table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.pdp-table thead th { font-size: var(--fs-xs, 13px); font-weight: 600; letter-spacing: .5px; color: var(--muted); background: #0d1521; }
.pdp-table tbody th { width: 26%; font-weight: 500; color: var(--text); }
.pdp-table td { color: var(--text-2); }
.pdp-table .is-paid { background: rgba(79, 214, 196, .045); color: var(--text); }
.pdp-table thead .is-paid { color: var(--accent-teal-text); }
.pdp-table tfoot th, .pdp-table tfoot td { border-bottom: 0; background: #0d1521; }
.pdp-table tfoot b { font-family: var(--mono); font-size: var(--fs-sm, 14px); color: var(--accent-teal-text); }
.pdp-free { color: var(--accent-teal-text); font-weight: 600; }
.pdp-note { margin-top: 12px; font-size: var(--fs-xs, 13px); color: var(--muted); }
.pdp-caliber { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pdp-cal-item {
padding: 16px 18px; background: var(--panel); border: 1px solid var(--line-soft);
border-left: 2px solid rgba(79, 214, 196, .45); border-radius: 0 10px 10px 0;
}
.pdp-cal-item h4 { font-size: var(--fs-sm, 14px); font-weight: 600; margin-bottom: 7px; }
.pdp-cal-item p { font-size: var(--fs-xs, 13px); line-height: 1.8; color: var(--muted); }
.pdp-prose-section { padding-top: 0; }
.prose-product { padding-top: 30px; border-top: 1px solid var(--line-soft); }
/* ==========================================================================
资讯列表 / 详情
========================================================================== */
.art-section { padding-top: 18px; }
.art-filter { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.art-count { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted); }
.art-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.art-card {
display: flex; flex-direction: column; padding: 20px 22px 16px;
background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
transition: border-color .18s, transform .18s, background .18s;
}
.art-card:hover { border-color: var(--line-strong); background: var(--panel-2); transform: translateY(-2px); }
.art-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.art-chip {
display: inline-block; padding: 5px 8px; border-radius: 4px; font-size: var(--fs-xs, 13px); line-height: 1;
letter-spacing: .3px; color: var(--accent-teal-text); background: rgba(79, 214, 196, .1); border: 1px solid rgba(79, 214, 196, .2);
}
.art-meta { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted); }
.art-title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: var(--fs-base, 15px); font-weight: 600; line-height: 1.5; letter-spacing: -.1px; color: var(--text);
}
.art-sum {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
margin-top: 9px; font-size: var(--fs-xs, 13px); line-height: 1.85; color: var(--muted);
}
.art-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft);
font-size: var(--fs-xs, 13px); color: var(--muted);
}
.art-arrow { color: var(--accent-teal-text); transition: transform .18s; }
.art-card:hover .art-arrow { transform: translateX(3px); }
.art-detail-head { padding-bottom: 4px; }
.art-crumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs, 13px); color: var(--muted); }
.art-crumb a { color: #58a6ff; }
.art-detail-head h1 { margin-top: 14px; font-size: var(--fs-xl, 26px); line-height: 1.4; letter-spacing: -.6px; }
.art-head-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
margin-top: 14px; font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted);
}
.art-detail { padding-top: 20px; }
.prose-article { font-size: var(--fs-base, 15px); line-height: 2.05; }
.art-zoom-hint { margin-top: 14px; font-size: var(--fs-xs, 13px); color: var(--muted); }
.art-rel { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.art-rel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.art-rel-head h3 { font-size: var(--fs-base, 15px); font-weight: 600; }
.art-rel-item {
display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
padding: 11px 2px; border-bottom: 1px dashed var(--line-soft);
font-size: var(--fs-sm, 14px); color: var(--text-2); transition: color .15s, padding .15s;
}
.art-rel-item:hover { color: var(--text); padding-left: 6px; }
.art-rel-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-rel-d { flex: none; font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted); }
/* ==========================================================================
富文本细节
========================================================================== */
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose img { cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease; }
.prose img:hover { transform: scale(1.012); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
/* 纯 CSS 灯箱：checkbox 控制，label 包住原图，点击展开 / 收起 */
.imgzoom { display: block; }
.imgzoom-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.imgzoom-hit { display: block; }
.imgzoom-cb:focus + .imgzoom-hit img { outline: 2px solid rgba(79, 214, 196, .7); outline-offset: 3px; }
.imgzoom-cb:checked + .imgzoom-hit img,
.imgzoom-cb:checked + .imgzoom-hit img:hover {
position: fixed; left: 4vw; top: 50%; transform: translateY(-50%);
width: 92vw; max-width: 92vw; max-height: 88vh; object-fit: contain;
margin: 0; z-index: 999; border-radius: 6px; cursor: zoom-out;
box-shadow: 0 0 0 100vmax rgba(3, 6, 10, .92);
}
.prose figure { margin: 20px 0; }
.prose figcaption { margin-top: 8px; font-size: var(--fs-xs, 13px); color: var(--muted); text-align: center; }
.prose-about h2 { font-size: var(--fs-lg, 20px); }
@media (max-width: 1080px) {
.db-kpis { grid-template-columns: repeat(3, 1fr); }
.pdp-grid { grid-template-columns: repeat(2, 1fr); }
.pdp-steps { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
.pdp-steps::before { display: none; }
.pdp-caliber { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.db-grid { grid-template-columns: 1fr; }
.db-span-5, .db-span-7, .db-span-12 { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
.db-kpi, .db-card { animation: none; }
.pdp-cap:hover, .art-card:hover { transform: none; }
}
@media (max-width: 760px) {
.db-section { padding-top: 34px; }
.db-head { margin-bottom: 20px; }
.db-head h2 { font-size: var(--fs-lg, 20px); }
.db-kpis { grid-template-columns: repeat(2, 1fr); gap: 9px; }
.db-kpi { padding: 14px 13px 12px; }
.db-kpi-num { font-size: var(--fs-xl, 26px); letter-spacing: -.6px; margin-top: 6px; }
.db-kpi-num small { font-size: var(--fs-xs, 13px); }
.db-kpi-note { font-size: var(--fs-xs, 13px); }
.db-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 11px; }
.db-span-5, .db-span-7, .db-span-12 { grid-column: auto; }
.db-card { padding: 15px 14px 13px; }
/* 移动端不横向滚动：SVG 按容器缩放，再把画布内字号放大，保证 9px 以上的可读性 */
.db-chart { overflow: visible; }
.db-svg { min-height: 0; }
.db-svg-rent text { font-size: var(--fs-base, 15px); }
.db-mini-legend .db-mini-hint { display: none; }
.db-donut-wrap { flex-direction: column; align-items: stretch; gap: 14px; flex: none; }
.db-donut { width: 150px; flex: none; align-self: center; }
.db-donut-total { font-size: var(--fs-xl, 26px); }
/* 城市分布：窄屏把城市名列收窄一档，条形本身高度不变（12px 在任何宽度下都一样粗） */
.db-city-row { grid-template-columns: 20px 52px minmax(0, 1fr) 30px; gap: 7px; }
.db-city-name { font-size: var(--fs-xs, 13px); }
.db-tierstat-head,
.db-tierstat-row { grid-template-columns: minmax(0, 1fr) 44px 70px 52px; gap: 8px; }
.db-heat-row { grid-template-columns: 22px 92px 1fr 40px; gap: 7px; }
.db-heat-name { font-size: var(--fs-xs, 13px); }
/* 排序表在窄屏只保留「排名 / 商圈 / 热度」，其余列进 title，避免挤成三行换行 */
.db-rank-head,
.db-rank-row { grid-template-columns: 22px minmax(0, 1fr) 64px 66px; gap: 7px; }
.db-rank-head span:nth-child(3),
.db-rank-head span:nth-child(5),
.db-rank-row .db-rank-tier,
.db-rank-row .db-rank-crowd { display: none; }
.db-rank-name b { font-size: var(--fs-xs, 13px); }
.db-cats { grid-template-columns: 1fr; }
.db-heat-name small { display: none; }
.db-cats { grid-template-columns: 1fr; gap: 9px; }
.db-cat { grid-template-columns: 64px 1fr 24px; gap: 9px; }
.db-cats-1 .db-cat { grid-template-columns: 68px minmax(0, 1fr) 26px 40px; gap: 9px; }
.pdp-block { padding: 26px 0; }
.pdp-block-head h2 { font-size: var(--fs-lg, 20px); }
.pdp-grid { grid-template-columns: 1fr; }
.pdp-steps { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
.pdp-steps::before {
display: block; left: 15px; right: auto; top: 8px; bottom: 24px;
width: 1px; height: auto;
background: linear-gradient(180deg, rgba(79, 214, 196, .5), rgba(47, 129, 247, .15));
}
.pdp-step { padding: 0 0 20px 44px; }
.pdp-step:last-child { padding-bottom: 0; }
.pdp-table { font-size: var(--fs-sm, 14px); }
.pdp-table th, .pdp-table td { padding: 10px 11px; }
.pdp-table tbody th { width: 30%; }
.pdp-note { line-height: 1.75; }
.art-grid { grid-template-columns: 1fr; gap: 11px; }
.art-card { padding: 16px 16px 13px; }
.art-title { font-size: var(--fs-base, 15px); }
.art-meta { font-size: var(--fs-xs, 13px); }
.art-filter { margin-bottom: 16px; }
.art-detail-head h1 { font-size: var(--fs-xl, 26px); }
.prose-article { font-size: var(--fs-base, 15px); }
.art-rel-item { gap: 10px; }
}
/* ===== 工作台动作区（三按钮） =====
左栏最窄时约 300px，三个等宽按钮会把「生成完整报告」压成两行；
让简版导出单独占一行，主次也更清楚（主行动仍是生成完整报告）。 */
.wb-gen { flex-wrap: wrap; }
.wb-gen #btn-brief-print { flex: 1 0 100%; }
/* ===== 移动端加固（全站兜底） =====
各区块自己的断点在上面已经写过，这里只补「跨页面共性」的三类问题：
1. 富文本里的表格在手机上必然超宽 → 必须能横向滑动，否则整页被撑破；
2. 富文本里的 pre / 长英文串没有断行点 → 允许在任意位置断；
3. 小屏下标题与超大数字仍然按桌面字号排 → 收一档，避免一屏只有一个标题。 */
.prose { overflow-wrap: break-word; }
.prose pre, .prose code { max-width: 100%; overflow-x: auto; }
.prose table { display: block; overflow-x: auto; white-space: nowrap; }
@media (max-width: 560px) {
.prose table { white-space: normal; }
.page-head h1, .auth-card h1 { font-size: var(--fs-xl, 26px); }
.page-head p { font-size: var(--fs-sm, 14px); }
.section { padding: 38px 0; }
.section-head h2 { font-size: var(--fs-lg, 20px); }
.card { padding: 14px; }
.stat-grid { grid-template-columns: 1fr; }
.score-strip { grid-template-columns: 1fr; }
.btn-lg { padding: 11px 16px; font-size: var(--fs-sm, 14px); }
.plan-card .amount { font-size: var(--fs-xl, 26px); }
/* 报告页操作区按钮不少，小屏一律铺满一行，别挤成两个小方块 */
.no-print > div, .wb-head > div:last-child { width: 100%; }
.no-print .btn, .wb-head .btn { flex: 1 1 calc(50% - 4px); }
}
/* 打印时必须还原成真正的表格：display:block 会让列宽失效，PDF 里的表格会挤成一列 */
@media print {
.prose table { display: table; width: 100%; white-space: normal; overflow: visible; }
}
/* ==========================================================================
工作台 v1.2 —— 悬浮条件面板（可停靠左右 / 可收起）+ 常驻点位地图
覆盖前面「左选右报告」的固定两栏写法；顺序在后，故可直接覆盖 grid 版本。
========================================================================== */
.wrap-wide { max-width: 1560px; }
/* ---------------- 页头 ---------------- */
.wb-head { align-items: flex-start; }
.wb-head-main { min-width: 0; flex: 1 1 420px; }
.wb-head-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wb-src { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; font-size: var(--fs-xs, 13px); color: var(--muted); line-height: var(--lh-base, 1.7); }
.wb-src-t { color: var(--text-2); font-weight: 500; }
.wb-src-d { max-width: 620px; }
.wb-side-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.wb-side-switch button {
height: 30px; padding: 0 11px; border: 0; cursor: pointer; font-size: var(--fs-xs, 13px);
background: #0d141e; color: var(--muted); transition: .15s;
}
.wb-side-switch button:hover { color: var(--text); }
.wb-side-switch button.on { background: var(--brand-soft); color: #7db6ff; }
/* ---------------- 两栏：flex + 悬浮侧栏 ---------------- */
.wb-body { display: flex; gap: 20px; align-items: flex-start; }
.wb-left {
order: 1;
flex: 0 0 344px;
width: 344px;
position: sticky;
top: 74px;
/* 面板自身滚动：条件多、屏幕矮时不跟着整页滚，报告区才有完整视野 */
max-height: calc(100vh - 96px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
z-index: 8;
transition: flex-basis .2s ease, width .2s ease, opacity .16s ease;
}
.wb-left::-webkit-scrollbar { width: 6px; }
.wb-left::-webkit-scrollbar-thumb { background: #22303f; border-radius: 3px; }
.wb-left::-webkit-scrollbar-track { background: transparent; }
/* 悬浮感：面板比背景高一档 + 外阴影，滚动时明显浮在内容上 */
.wb-left .panel { box-shadow: 0 10px 32px rgba(0, 0, 0, .38); }
.wb-left::before { content: ''; display: none; }
.wb-right { order: 2; flex: 1 1 auto; min-width: 0; }
/* 停靠到右侧：只改顺序，视觉与交互完全一致 */
.wb[data-side="right"] .wb-left { order: 3; }
.wb[data-side="right"] .wb-right { order: 2; }
/* 收起状态：面板让出全部宽度，左下角留一个展开浮标 */
.wb--collapsed .wb-body { gap: 0; }
.wb--collapsed .wb-left {
flex-basis: 0;
width: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
.wb-fab {
position: fixed; left: 20px; bottom: 22px; z-index: 60;
padding: 9px 15px; border-radius: 999px; cursor: pointer;
background: var(--brand); color: #fff; font-size: var(--fs-xs, 13px); font-weight: 500;
box-shadow: 0 10px 26px rgba(47, 129, 247, .38);
}
.wb[data-side="right"] ~ .wb-fab { left: auto; right: 20px; }
.wb-panel-close { display: none; font-size: var(--fs-base, 15px); line-height: 1; padding: 0 6px; }
/* ---------------- 点位地图卡 ---------------- */
.map-card {
background: var(--panel); border: 1px solid var(--line-soft);
border-radius: var(--radius); overflow: hidden; margin-bottom: 16px;
}
.map-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 16px; border-bottom: 1px solid var(--line-soft);
}
.map-card-head h3 { font-size: var(--fs-sm, 14px); font-weight: 600; white-space: nowrap; }
.mc-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mc-name { font-size: var(--fs-xs, 13px); color: #7db6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.mc-rg { font-size: var(--fs-xs, 13px); color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.map-stage { position: relative; height: 380px; background: #080d14; cursor: crosshair; }
.map-stage canvas { display: block; width: 100%; height: 100%; }
.map-stage .cross {
position: absolute; left: 50%; top: 50%; width: 17px; height: 17px;
margin: -9px 0 0 -9px; pointer-events: none;
}
.map-stage .cross::before, .map-stage .cross::after { content: ''; position: absolute; background: rgba(47, 129, 247, .55); }
.map-stage .cross::before { left: 8px; top: 0; width: 1px; height: 17px; }
.map-stage .cross::after { top: 8px; left: 0; height: 1px; width: 17px; }
.map-legend {
position: absolute; right: 12px; bottom: 11px;
display: flex; align-items: center; gap: 12px;
padding: 5px 10px; border-radius: 6px; pointer-events: none;
background: rgba(8, 13, 20, .78); border: 1px solid var(--line-soft);
font-size: var(--fs-xs, 13px); color: var(--muted);
}
.map-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.map-legend .lg-cur { background: #2f81f7; box-shadow: 0 0 0 3px rgba(47, 129, 247, .18); }
.map-legend .lg-poi { background: #6ea8d8; }
.map-legend .lg-area { background: transparent; border: 1.4px solid #17b8a6; }
.map-hint {
position: absolute; left: 12px; top: 10px;
padding: 4px 9px; border-radius: 5px;
background: rgba(8, 13, 20, .78); border: 1px solid var(--line-soft);
font-size: var(--fs-xs, 13px); color: var(--muted); pointer-events: none;
}
.map-empty {
position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
background: rgba(8, 13, 20, .82); gap: 6px; pointer-events: none;
}
.map-empty .me-t { font-size: var(--fs-sm, 14px); color: var(--text-2); font-weight: 500; }
.map-empty .me-d { font-size: var(--fs-xs, 13px); color: var(--muted); }
.map-foot {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 9px 16px; border-top: 1px solid var(--line-soft);
font-size: var(--fs-xs, 13px); color: var(--muted);
}
.mf-coord { font-family: var(--mono); color: var(--text-2); }
.mf-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-cov { color: var(--warn); }
/* ---------------- 分辨率适配 ---------------- */
@media (max-width: 1440px) {
.wrap-wide { max-width: 100%; }
.map-stage { height: 350px; }
}
@media (max-width: 1200px) {
.wb-left { flex-basis: 322px; width: 322px; }
.map-stage { height: 320px; }
}
@media (max-width: 1080px) {
.wb-body { gap: 16px; }
.wb-left { flex-basis: 300px; width: 300px; }
.map-stage { height: 300px; }
.mc-name { max-width: 34vw; }
}
/* 窄屏放弃悬浮：面板退回文档流排在前面，地图在它下面，报告最后 */
@media (max-width: 900px) {
.wb-body { flex-direction: column; gap: 14px; }
.wb-left {
position: static; order: 1; flex: 1 1 auto; width: 100%;
max-height: none; overflow: visible;
}
.wb[data-side="right"] .wb-left { order: 1; }
.wb-right { order: 2; width: 100%; }
.wb--collapsed .wb-left { display: none; }
.wb-fab { display: none; }
.wb-side-switch, #btn-collapse { display: none; }
.wb-panel-close { display: inline-block; }
.map-stage { height: 280px; }
.wb-head-act { width: 100%; }
.wb-src-d { display: none; }
}
@media (max-width: 560px) {
.map-stage { height: 240px; }
.map-legend { display: none; }
.map-hint { font-size: var(--fs-xs, 13px); }
.wb-src { font-size: var(--fs-xs, 13px); }
}
@media print {
.map-card, .wb-fab, .wb-side-switch { display: none !important; }
}
/* ================= v1.3 实时底图 =================
地图从「画在 canvas 上的示意图」换成了真实瓦片底图，于是：
1) 十字准星失去意义 —— 视野中心不再等于落点（可拖动），
落点改成画在 canvas 上的标记，准星留着只会让人误以为落点永远在正中；
2) 需要缩放按钮、地图内搜索框、图源署名三组控件。 */
.map-stage .cross { display: none; }
/* 抓取手势：可拖动的图就该用 grab，crosshair 是「点一下落个点」的旧心智 */
.map-stage canvas { cursor: grab; }
.map-stage canvas.dragging { cursor: grabbing; }
/* 左上：地图内搜索。position 盖在 canvas 上，所以 z-index 要高于底图，
否则滚轮缩放时手指落在输入框上也会被 canvas 抢走 */
.map-q {
position: absolute; left: 12px; top: 10px; z-index: 3;
display: flex; align-items: center; gap: 6px;
width: 300px; max-width: calc(100% - 96px);
}
.map-q input {
flex: 1 1 auto; min-width: 0; height: 30px; margin: 0; padding: 0 10px;
border: 1px solid var(--line-soft); border-radius: 7px;
background: rgba(8, 13, 20, .82); color: var(--text);
font-size: var(--fs-base, 15px); font-family: inherit;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.map-q input::placeholder { color: var(--muted); }
.map-q input:focus { outline: none; border-color: rgba(47, 129, 247, .55); }
.map-q button {
flex: none; height: 30px; padding: 0 11px; cursor: pointer;
border: 1px solid var(--line-soft); border-radius: 7px;
background: rgba(8, 13, 20, .82); color: var(--text-2);
font-size: var(--fs-xs, 13px); font-family: inherit;
}
.map-q button:hover { border-color: rgba(47, 129, 247, .55); color: var(--text); }
/* 联想下拉：叠在输入框正下方，不用 position:absolute 撑开父层高度 */
.map-q-list {
position: absolute; left: 0; right: 0; top: 36px; z-index: 5;
margin: 0; padding: 4px; list-style: none;
max-height: 260px; overflow: auto;
background: rgba(10, 16, 25, .97); border: 1px solid var(--line);
border-radius: 8px; box-shadow: var(--shadow);
}
.map-q-list li {
display: flex; align-items: center; gap: 6px;
padding: 7px 10px; border-radius: 6px;
font-size: var(--fs-xs, 13px); color: var(--text-2); cursor: pointer;
}
.map-q-list li:hover { background: var(--brand-soft); color: var(--text); }
.map-q-list .mq-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-q-list .mq-lv { flex: none; font-size: var(--fs-xs, 13px); color: var(--muted); }
.map-q-list .mq-est {
flex: none; font-size: var(--fs-xs, 13px); color: var(--warn);
border: 1px solid rgba(240, 169, 46, .38); border-radius: 3px; padding: 0 4px;
}
/* 右上：缩放。毛玻璃是为了压在亮色瓦片上也看得清数字 */
.map-zoom {
position: absolute; right: 12px; top: 10px; z-index: 3;
display: flex; flex-direction: column;
border: 1px solid var(--line-soft); border-radius: 7px; overflow: hidden;
background: rgba(8, 13, 20, .68);
-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.map-zoom button {
width: 30px; height: 30px; padding: 0; cursor: pointer;
border: 0; background: transparent; color: var(--text-2);
font-size: var(--fs-base, 15px); line-height: 1; font-family: inherit;
}
.map-zoom button + button { border-top: 1px solid var(--line-soft); }
.map-zoom button:hover { background: var(--brand-soft); color: var(--brand); }
.map-zoom button:active { background: rgba(47, 129, 247, .30); }
/* 右下：图源署名。瓦片协议要求保留，同时不能挡住底下的点击 */
.map-attr {
position: absolute; right: 12px; bottom: 9px; z-index: 2;
font-size: var(--fs-xs, 13px); color: rgba(168, 182, 200, .55);
pointer-events: none;
}
/* 图例原本也贴在右下，署名来了之后把它抬起来，避免两行字叠在一起 */
.map-stage .map-legend { bottom: 28px; }
/* 提示条原来在左上，现在那里是搜索框，挪到它下面 */
.map-stage .map-hint { top: 48px; }
@media (max-width: 900px) {
.map-q { width: 240px; max-width: calc(100% - 84px); }
.map-zoom button { width: 26px; height: 26px; font-size: var(--fs-sm, 14px); }
.map-stage .map-legend { bottom: 24px; }
}
@media (max-width: 560px) {
.map-q { left: 8px; top: 8px; width: auto; right: 62px; max-width: none; }
.map-q input, .map-q button { height: 28px; font-size: var(--fs-base, 15px); }
.map-q button { padding: 0 8px; }
.map-q-list { top: 33px; }
.map-zoom { right: 8px; top: 8px; }
.map-zoom button { width: 26px; height: 26px; }
.map-attr { font-size: var(--fs-xs, 13px); right: 8px; bottom: 7px; }
/* 窄屏图例已隐藏（见上面的 560 断点），提示条直接落到左下角，
底图失败时的提示在手机上同样要看得见 */
.map-stage .map-hint { top: auto; bottom: 8px; left: 8px; font-size: var(--fs-xs, 13px); }
}
/* ================= v1.4 底图来源一致性 / 缩放读数 / 降级 ================= */
/* 叠放次序是本卡最容易出错的一处：绝对定位的控件全在一个 position:relative 的
.map-stage 里，z-index 一旦排错，缩放按钮就会被搜索框或空态盖住 —— 表现为
「按钮看得见但点不动」。这里把整条次序固定下来，后面各断点只调位置不调层级。
canvas(0) < 图例/提示/署名(2) < 空态(4) < 搜索(5) < 缩放/降级(6) */
.map-stage { position: relative; z-index: 1; }
.map-stage canvas { position: relative; z-index: 0; }
.map-hint, .map-legend, .map-attr { z-index: 2; }
.map-empty { z-index: 4; }
.map-q { z-index: 5; }
.map-zoom, .map-fallback { z-index: 6; }
/* 键盘操作要先拿到焦点；canvas 一旦能聚焦，默认的焦点环会糊在整块瓦片上，
换成内侧 2px 细线，既能看出来又不挡地图 */
.map-stage canvas:focus { outline: none; }
.map-stage canvas:focus-visible { outline: 2px solid rgba(47, 129, 247, .55); outline-offset: -2px; }
/* 页头右侧：来源徽标 + 分析半径。徽标文案由后端拼（含坐标系与数据源名），
太长就省略，完整解释在 title 里，不靠换行把页头撑高 */
.map-card-head { flex-wrap: wrap; }
.mc-r { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.map-src-badge {
min-width: 0; max-width: 340px;
padding: 3px 9px; border-radius: 999px;
font-size: var(--fs-xs, 13px); line-height: 1.55;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
border: 1px solid transparent;
}
.map-src-badge.lv-ok { color: var(--accent-teal-text); background: rgba(23, 184, 166, .10); border-color: rgba(23, 184, 166, .38); }
.map-src-badge.lv-warn { color: var(--warn); background: rgba(240, 169, 46, .10); border-color: rgba(240, 169, 46, .38); }
.map-src-badge.lv-risk { color: var(--danger); background: rgba(239, 77, 90, .10); border-color: rgba(239, 77, 90, .42); }
/* 图下一行：只有 level != ok 才渲染，占满一行单独起段 */
.map-src-note {
flex: 1 0 100%;
display: flex; align-items: flex-start; gap: 6px;
font-size: var(--fs-xs, 13px); line-height: var(--lh-base, 1.7);
}
.map-src-note i { font-style: normal; flex: none; line-height: var(--lh-base, 1.7); }
.map-src-note.lv-warn { color: #e2b662; }
.map-src-note.lv-risk { color: #ff919a; }
/* 当前缩放级别读数：小数档，和 data-z 一起构成「缩放到底动没动」的可观测点 */
.map-z {
margin-left: auto; flex: none;
font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted);
letter-spacing: .3px;
}
/* 底图整批失败：浮在图上的提示条。点选落点、半径圈、周边点位都不依赖瓦片，
所以要明说「还能用」+「去哪儿修」，而不是只把图变黑 */
.map-fallback {
position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
max-width: calc(100% - 32px);
padding: 6px 12px; border-radius: 6px;
background: rgba(239, 77, 90, .16); border: 1px solid rgba(239, 77, 90, .45);
color: #ffb6bc; font-size: var(--fs-xs, 13px); line-height: 1.65; text-align: center;
pointer-events: none;
}
/* 窄屏（<=820px）不放悬浮面板，地图整块落到筛选面板下面。
这里只保证「按钮相对 .map-stage 定位且层级最高」，不改变文档流顺序。 */
@media (max-width: 820px) {
.map-card { scroll-margin-top: 8px; }
.map-zoom { right: 10px; top: 8px; z-index: 6; }
.map-q { z-index: 5; }
.map-src-badge { max-width: 100%; }
.map-fallback { bottom: 44px; }
/* 窄屏图例会折成两行，抬高一点给署名留出位置，别压住「底图：…」 */
.map-stage .map-legend { bottom: 34px; }
}
/* ==========================================================================
选址体检（报告侧）
前缀统一用 chk-：后台控制台已经占了 ck-card / ck-head / ck-badge 那一套，
沿用 ck- 会让两边的卡片样式互相串。
========================================================================== */
.chk-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.chk-score { flex: none; display: flex; align-items: baseline; gap: 3px; min-width: 86px; }
.chk-score b {
font-size: var(--fs-2xl, 34px); font-weight: 800; line-height: 1; letter-spacing: -1px;
color: var(--text); font-variant-numeric: tabular-nums;
}
.chk-score span { font-size: var(--fs-xs, 13px); color: var(--muted); }
.chk-side { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.chk-lv {
align-self: flex-start; font-size: var(--fs-xs, 13px); padding: 2px 9px; border-radius: 20px;
border: 1px solid var(--line); color: var(--text-2); line-height: 1.6;
}
.chk-lv[data-level="ok"] { color: #0ecb81; border-color: rgba(14, 203, 129, .40); background: rgba(14, 203, 129, .10); }
.chk-lv[data-level="warn"] { color: #f0a92e; border-color: rgba(240, 169, 46, .40); background: rgba(240, 169, 46, .10); }
.chk-lv[data-level="risk"] { color: #ef4d5a; border-color: rgba(239, 77, 90, .45); background: rgba(239, 77, 90, .10); }
.chk-sum { font-size: var(--fs-sm, 14px); color: var(--text-2); line-height: 1.6; }
/* 档位色条：一眼看出是「绿/橙/红」哪一档，比只看数字快 */
.chk-bar { height: 5px; border-radius: 3px; background: #131c29; overflow: hidden; margin-bottom: 16px; }
.chk-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.chk-bar[data-level="ok"] > i { background: #0ecb81; }
.chk-bar[data-level="warn"] > i { background: #f0a92e; }
.chk-bar[data-level="risk"] > i { background: #ef4d5a; }
.chk-group + .chk-group { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-soft); }
.chk-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.chk-gh > span { font-size: var(--fs-xs, 13px); font-weight: 600; color: var(--text); }
.chk-gh small { font-size: var(--fs-xs, 13px); color: var(--muted); }
.chk-items { display: flex; flex-direction: column; gap: 8px; }
.chk-item {
display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px;
background: #0f1724; border: 1px solid var(--line-soft);
}
.chk-item[data-level="warn"] { background: rgba(240, 169, 46, .05); border-color: rgba(240, 169, 46, .22); }
.chk-item[data-level="risk"] { background: rgba(239, 77, 90, .055); border-color: rgba(239, 77, 90, .25); }
.chk-item[data-level="todo"] { background: rgba(47, 129, 247, .035); border-style: dashed; }
/* 状态点：绿 / 橙 / 红 / 灰蓝，todo 用灰蓝是为了和「正常」区分开——
没核实 ≠ 没问题 */
.chk-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.chk-dot[data-level="ok"] { background: #0ecb81; box-shadow: 0 0 0 3px rgba(14, 203, 129, .14); }
.chk-dot[data-level="warn"] { background: #f0a92e; box-shadow: 0 0 0 3px rgba(240, 169, 46, .14); }
.chk-dot[data-level="risk"] { background: #ef4d5a; box-shadow: 0 0 0 3px rgba(239, 77, 90, .16); }
.chk-dot[data-level="todo"] { background: #5f7d99; box-shadow: 0 0 0 3px rgba(95, 125, 153, .14); }
.chk-main { min-width: 0; flex: 1; }
.chk-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chk-t { font-size: var(--fs-xs, 13px); color: var(--text); font-weight: 500; }
.chk-v { font-size: var(--fs-xs, 13px); font-family: var(--mono); color: var(--text-2); white-space: nowrap; }
.chk-v[data-level="ok"] { color: #0ecb81; }
.chk-v[data-level="warn"] { color: #f0a92e; }
.chk-v[data-level="risk"] { color: #ef4d5a; }
.chk-v[data-level="todo"] { color: #7f93a8; }
.chk-b { font-size: var(--fs-xs, 13px); color: var(--muted); line-height: 1.75; margin-top: 3px; word-break: break-word; }
.chk-a {
font-size: var(--fs-xs, 13px); color: #7db6ff; line-height: 1.75; margin-top: 4px;
padding-left: 9px; border-left: 2px solid rgba(47, 129, 247, .35);
}
/* 底部核实清单：用户要拿这张纸去看铺，所以单独成块、编号、可打印 */
.chk-todo {
margin-top: 16px; padding: 12px 14px; border-radius: 9px;
border: 1px dashed rgba(125, 182, 255, .35); background: rgba(47, 129, 247, .06);
}
.chk-todo-h {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
font-size: var(--fs-xs, 13px); font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.chk-todo-h small { font-size: var(--fs-xs, 13px); font-weight: 400; color: var(--muted); }
.chk-todo-list { display: flex; flex-direction: column; gap: 7px; counter-reset: chk-todo; }
.chk-todo-i { position: relative; padding-left: 20px; font-size: var(--fs-xs, 13px); color: var(--text-2); line-height: 1.75; }
.chk-todo-i::before {
counter-increment: chk-todo; content: counter(chk-todo);
position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%;
background: rgba(47, 129, 247, .18); color: #7db6ff; font-size: var(--fs-xs, 13px); line-height: 14px;
text-align: center; font-family: var(--mono);
}
.chk-todo-i b { color: var(--text); font-weight: 500; margin-right: 6px; }
.chk-todo-g {
display: inline-block; font-size: var(--fs-xs, 13px); color: var(--muted); border: 1px solid var(--line);
border-radius: 3px; padding: 0 4px; margin-right: 6px; vertical-align: 1px;
}
.chk-todo-a { display: block; color: var(--muted); }
/* 窄屏：状态点留在左列，标题与数值改上下排，避免数值被挤出卡片 */
@media (max-width: 560px) {
.chk-top { gap: 10px; }
.chk-score { min-width: 64px; }
.chk-score b { font-size: var(--fs-2xl, 34px); }
.chk-sum { font-size: var(--fs-xs, 13px); }
.chk-item { padding: 9px 10px; gap: 8px; }
.chk-line { flex-direction: column; align-items: flex-start; gap: 2px; }
.chk-v { white-space: normal; font-size: var(--fs-xs, 13px); }
.chk-todo { padding: 11px 12px; }
.chk-todo-h { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* ==========================================================================
成功案例 / 品牌合作（/cases）
前缀 cases-：px- 是单页内容页、chk- 是选址体检，各页各用一套前缀，
改其中一页的排版不会连带影响另一页。
========================================================================== */
.cases-hero {
padding: 54px 0 30px;
background: radial-gradient(120% 150% at 10% 0, rgba(47, 129, 247, .1), transparent 58%);
}
.cases-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.cases-eyebrow {
display: inline-block; font-family: var(--mono); font-size: var(--fs-xs, 13px); letter-spacing: 2px;
text-transform: uppercase; color: var(--brand); margin-bottom: 14px;
padding-left: 10px; border-left: 2px solid rgba(47, 129, 247, .6);
}
.cases-hero h1 { font-size: var(--fs-2xl, 34px); font-weight: 700; letter-spacing: -.7px; line-height: 1.28; color: var(--text); }
.cases-sub { margin-top: 14px; font-size: var(--fs-base, 15px); line-height: 1.85; color: var(--text-2); max-width: 620px; }
.cases-note { margin-top: 14px; font-size: var(--fs-xs, 13px); color: var(--muted); letter-spacing: .2px; }
.cases-kpis { display: flex; gap: 10px; }
.cases-kpi {
min-width: 118px; padding: 12px 14px; border: 1px solid var(--line-soft);
border-radius: var(--radius); background: rgba(17, 25, 39, .72);
}
.cases-kpi b {
display: block; font-family: var(--mono); font-size: var(--fs-lg, 20px); font-weight: 700;
letter-spacing: -.5px; color: var(--text); line-height: 1.2;
}
.cases-kpi b span { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--brand); margin-left: 3px; }
.cases-kpi em { display: block; margin-top: 5px; font-style: normal; font-size: var(--fs-xs, 13px); color: var(--muted); }
.cases-crumbbar { border-top: 1px solid var(--line-soft); background: rgba(8, 11, 17, .35); }
.cases-crumb { display: flex; align-items: center; gap: 8px; height: 40px; font-size: var(--fs-xs, 13px); color: var(--muted); }
.cases-crumb a { color: var(--muted); }
.cases-crumb a:hover { color: var(--text); }
.cases-crumb .cur { color: var(--text-2); }
.cases-crumb .sep { color: #3b4a5f; font-family: var(--mono); }
.cases-section { padding: 46px 0 0; }
.cases-head { margin-bottom: 22px; max-width: 780px; }
.cases-head h2 { font-size: var(--fs-lg, 20px); font-weight: 700; letter-spacing: -.3px; color: var(--text); }
.cases-head p { margin-top: 9px; font-size: var(--fs-sm, 14px); color: var(--muted); line-height: 1.8; }
/* 三个机制卡：数字放底部，保证三张卡的基线对齐 */
.cases-mech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cases-mech-card {
display: flex; flex-direction: column; padding: 18px;
border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.cases-mech-card:hover { transform: translateY(-2px); border-color: rgba(47, 129, 247, .38); background: var(--panel-2); }
.cases-mech-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cases-mech-no { font-family: var(--mono); font-size: var(--fs-xs, 13px); letter-spacing: 1px; color: #4d5c70; }
.cases-tag {
font-size: var(--fs-xs, 13px); line-height: var(--lh-base, 1.7); padding: 1px 9px; border-radius: 20px;
color: #9dc7ff; background: var(--brand-soft); border: 1px solid rgba(47, 129, 247, .25);
}
.cases-mech-card h3 { font-size: var(--fs-base, 15px); font-weight: 600; color: var(--text); line-height: 1.5; }
.cases-mech-card > p { margin-top: 8px; font-size: var(--fs-sm, 14px); line-height: var(--lh-loose, 1.9); color: var(--muted); }
.cases-metric {
margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cases-metric b {
font-family: var(--mono); font-size: var(--fs-lg, 20px); font-weight: 700;
letter-spacing: -.5px; color: var(--text); font-variant-numeric: tabular-nums;
}
.cases-metric span { font-size: var(--fs-xs, 13px); color: var(--muted); }
.cases-metric-note { margin-top: 7px; font-size: var(--fs-xs, 13px); color: var(--muted); line-height: 1.75; }
/* 城市筛选 chip：纯前端显隐 */
.cases-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cases-chip {
height: 30px; padding: 0 12px; border-radius: 20px; cursor: pointer;
border: 1px solid var(--line); background: transparent; color: var(--text-2);
font-size: var(--fs-xs, 13px); font-family: inherit; transition: .18s;
}
.cases-chip span { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted); margin-left: 4px; }
.cases-chip:hover { border-color: var(--line-strong); background: var(--hover-veil); color: var(--text); }
.cases-chip.is-on { border-color: rgba(47, 129, 247, .55); background: var(--brand-soft); color: #9dc7ff; }
.cases-chip.is-on span { color: #7db6ff; }
/* 案例库：两列卡片，宽度够放四组测算数字，不靠折行硬塞 */
.cases-lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cases-lib-card {
padding: 18px 18px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius);
background: var(--panel); display: grid; gap: 10px;
}
.cases-lib-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cases-lib-city { font-family: var(--mono); font-size: var(--fs-xs, 13px); letter-spacing: .4px; color: var(--brand); }
.cases-lib-tier {
font-size: var(--fs-xs, 13px); line-height: 17px; padding: 0 7px; border-radius: 4px;
border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.cases-lib-card h3 { font-size: var(--fs-base, 15px); font-weight: 600; line-height: 1.5; color: var(--text); }
.cases-lib-sub { font-size: var(--fs-xs, 13px); line-height: 1.75; color: var(--muted); }
.cases-lib-meta {
display: flex; flex-wrap: wrap; gap: 6px 16px;
padding: 9px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
font-size: var(--fs-xs, 13px); color: var(--muted);
}
.cases-lib-meta b { color: var(--text-2); font-weight: 500; }
.cases-lib-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cases-lib-nums div { min-width: 0; }
.cases-lib-nums b {
display: block; font-family: var(--mono); font-size: var(--fs-md, 17px); font-weight: 700;
letter-spacing: -.4px; color: var(--text); font-variant-numeric: tabular-nums;
}
.cases-lib-nums b i { margin-left: 2px; font-family: var(--font); font-size: var(--fs-xs, 13px); font-style: normal; font-weight: 500; color: var(--muted); }
.cases-lib-nums span { display: block; margin-top: 3px; font-size: var(--fs-xs, 13px); color: #5f7089; }
.cases-lib-memo { font-size: var(--fs-xs, 13px); line-height: 1.75; color: var(--muted); }
.cases-city + .cases-city { margin-top: 26px; }
.cases-city-head {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.cases-city-head h3 { font-size: var(--fs-base, 15px); font-weight: 600; color: var(--text); }
.cases-city-head span { font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted); }
.cases-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cases-area {
padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--radius);
background: var(--panel);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.cases-area:hover { transform: translateY(-2px); border-color: rgba(47, 129, 247, .45); background: var(--panel-2); }
.cases-area-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cases-area-top b { font-size: var(--fs-base, 15px); font-weight: 600; color: var(--text); }
.cases-tier {
flex: none; font-size: var(--fs-xs, 13px); line-height: 17px; padding: 0 6px; border-radius: 4px;
border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.cases-tier.is-core { color: #9dc7ff; border-color: rgba(47, 129, 247, .35); background: rgba(47, 129, 247, .08); }
.cases-area-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; }
.cases-area-city { font-size: var(--fs-xs, 13px); color: var(--muted); }
.cases-area-rent { font-family: var(--mono); font-size: var(--fs-sm, 14px); color: var(--text-2); white-space: nowrap; }
.cases-area-rent i { font-style: normal; font-size: var(--fs-xs, 13px); color: var(--muted); margin-left: 2px; }
.cases-area-crowd { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cases-area-bar { flex: 1; height: 4px; border-radius: 3px; background: #131c29; overflow: hidden; }
.cases-area-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.cases-area-crowd em { font-style: normal; font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--muted); white-space: nowrap; }
.cases-foot-note { margin-top: 14px; font-size: var(--fs-xs, 13px); color: var(--muted); line-height: 1.85; }
/* 品牌合作 */
.cases-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.cases-way { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(22, 32, 47, .5); }
.cases-way h3 { font-size: var(--fs-base, 15px); font-weight: 600; color: var(--text); }
.cases-way p { margin-top: 8px; font-size: var(--fs-xs, 13px); line-height: 1.85; color: var(--muted); }
.cases-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cases-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); }
.cases-table th, .cases-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.cases-table thead th { background: #0d141e; color: var(--muted); font-size: var(--fs-xs, 13px); font-weight: 500; letter-spacing: .3px; }
.cases-table tbody th { width: 92px; color: var(--text); font-weight: 500; white-space: nowrap; }
.cases-table td { color: var(--text-2); }
.cases-table tbody tr:last-child th, .cases-table tbody tr:last-child td { border-bottom: none; }
.cases-table .is-focus { background: rgba(47, 129, 247, .055); color: var(--text); }
.cases-table thead .is-focus { background: rgba(47, 129, 247, .12); color: #9dc7ff; }
.cases-table-list { display: flex; flex-direction: column; gap: 5px; }
.cases-table-list li { position: relative; padding-left: 12px; font-size: var(--fs-sm, 14px); line-height: 1.75; color: var(--muted); }
.cases-table-list li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 4px; height: 4px; border-radius: 50%; background: #3f5b7d;
}
.cases-price { font-family: var(--mono); font-size: var(--fs-sm, 14px); color: var(--text); white-space: nowrap; }
.cases-cta {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
margin-top: 24px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px;
background: linear-gradient(100deg, rgba(47, 129, 247, .1), rgba(23, 184, 166, .04) 70%, transparent);
}
.cases-cta h2 { font-size: var(--fs-md, 17px); font-weight: 700; letter-spacing: -.2px; color: var(--text); }
.cases-cta p { margin-top: 7px; font-size: var(--fs-xs, 13px); color: var(--muted); line-height: 1.8; }
.cases-cta-btns { display: flex; gap: 10px; flex-shrink: 0; }
.cases-legal { margin-top: 46px; padding: 22px 0 64px; border-top: 1px solid var(--line-soft); }
.cases-legal p { max-width: 940px; font-size: var(--fs-xs, 13px); color: var(--muted); line-height: 1.95; }
@media (max-width: 1200px) {
.cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.cases-hero { padding: 40px 0 24px; }
.cases-hero-in { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.cases-hero h1 { font-size: var(--fs-xl, 26px); }
.cases-kpis { flex-wrap: wrap; }
.cases-mech, .cases-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 三张卡排两列会剩下一张孤零零贴在左边，让最后一张占满整行，
否则右侧的空洞会被误读成「这里少了一块内容」 */
.cases-mech-card:last-child, .cases-way:last-child { grid-column: 1 / -1; }
.cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cases-lib { grid-template-columns: minmax(0, 1fr); }
.cases-cta { align-items: flex-start; }
/* 三列表格在窄屏保留结构，改成横向滚动比拆成卡片更好读 */
.cases-table-wrap { overflow-x: auto; }
.cases-table { min-width: 620px; }
}
/* 表格横向滚动在触屏上没有滚动条提示，给一句明说，避免用户以为内容被裁掉了 */
.cases-table-hint { display: none; margin-top: 8px; font-size: var(--fs-sm, 14px); color: var(--muted); }
@media (max-width: 680px) {
.cases-table-hint { display: block; }
}
@media (max-width: 560px) {
.cases-hero h1 { font-size: var(--fs-xl, 26px); }
.cases-sub { font-size: var(--fs-base, 15px); }
.cases-kpis { width: 100%; }
.cases-kpi { flex: 1 1 0; min-width: 0; padding: 10px 11px; }
.cases-kpi b { font-size: var(--fs-md, 17px); }
.cases-kpi em { font-size: var(--fs-xs, 13px); }
.cases-mech, .cases-ways, .cases-grid { grid-template-columns: minmax(0, 1fr); }
.cases-lib-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cases-cta { padding: 18px; }
.cases-cta-btns { width: 100%; }
.cases-cta-btns .btn { flex: 1; justify-content: center; }
.cases-legal { padding-bottom: 48px; }
}
/* ==========================================================================
工作台结果区图表（品类环形 / 品类条形 / 商户榜 / 圈层对比 / 密度网格 / 雷达）
统一 ch- 前缀，避免与报告页的 report-charts.css 互相覆盖。
全部用百分比宽度 + table-layout:fixed，390px 窄屏下靠隐藏次要列而不是横向滚动。
========================================================================== */
.ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ch-card { min-width: 0; }
/* 同一行的两张卡高度会被拉平：高度差全部堆在内容较矮那一张的底部，
看起来像图没画完。让内容在卡内垂直居中，两张卡就都视觉居中了。 */
.ch-grid > .ch-card { display: flex; flex-direction: column; }
.ch-grid > .ch-card > .ch-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.ch-body { min-width: 0; padding-top: 4px; }
.ch-empty {
margin: 6px 0 2px; padding: 30px 12px; text-align: center;
border: 1px dashed var(--line); border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .012); color: var(--muted); font-size: var(--fs-xs, 13px);
}
.ch-svg { display: block; width: 100%; height: auto; }
/* 圈层图桌面端会被卡片宽度拉到 700px+，柱子和字一起放大到跟其它卡不是一个量级，
所以给主图一个上限、居中显示；窄屏仍是 100% 自适应。 */
.ch-rings-svg { max-width: 460px; margin: 0 auto; }
.ch-donut-wrap { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: center; }
.ch-donut-fig { min-width: 0; }
.ch-donut-svg { max-width: 190px; margin: 0 auto; }
.ch-radar-svg { max-width: 300px; margin: 2px auto 0; }
.ch-grid-svg { max-width: 300px; margin: 4px auto 0; }
.ch-seg { cursor: default; transition: opacity .14s ease; }
.ch-seg.dim { opacity: .3; }
.ch-seg.on { filter: brightness(1.16); }
/* 图例用「等宽网格列」而不是 flex 换行：
flex 换行时每行装几项取决于名称宽度，第二行只剩 4 项就会各自撑宽到 180px，
于是同一个「家数 + 百分比」在行与行之间一个靠左一个靠右，中间空出一大片。
改成网格后每列同宽、数字贴在列右缘，垂直方向自然对齐成一条数字列。 */
.ch-legend {
display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 6px 18px; align-content: center;
}
.ch-lg { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs, 13px); color: var(--text-2); }
.ch-lg i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; }
.ch-lg .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-lg .n { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ch-lg .p {
min-width: 42px; text-align: right; font-family: var(--mono);
font-size: var(--fs-xs, 13px); color: var(--muted); font-variant-numeric: tabular-nums;
}
.ch-lg.on { color: var(--text); }
.ch-legend-sm { justify-content: center; }
.ch-legend-sm .ch-lg { flex: 0 0 auto; font-size: var(--fs-xs, 13px); color: var(--muted); }
/* 密度网格的色阶条与口径说明 */
.ch-dens-scale {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 3px; margin-top: 10px; font-size: var(--fs-xs, 13px); color: var(--muted);
}
.ch-dens-scale i { display: block; width: 18px; height: 8px; border-radius: 2px; }
.ch-dens-scale .lb { margin: 0 5px; font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--text-2); }
.ch-dens-scale em { margin-left: 3px; font-style: normal; font-size: var(--fs-xs, 13px); color: var(--muted); }
.ch-dens-note {
margin-top: 8px; font-size: var(--fs-xs, 13px); line-height: 1.6;
color: var(--muted); text-align: center;
}
.ch-dens-note b { font-weight: 600; color: var(--text-2); }
.ch-dens-stat {
margin-top: 2px; font-size: var(--fs-xs, 13px); line-height: 1.6;
color: var(--muted); text-align: center; font-variant-numeric: tabular-nums;
}
.ch-dens-stat b { font-weight: 600; color: var(--text); }
.ch-dens-stat i { margin: 0 5px; font-style: normal; opacity: .45; }
.ch-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm, 14px); }
.ch-table th {
padding: 0 7px 7px; text-align: left; font-size: var(--fs-xs, 13px); font-weight: 500;
color: var(--muted); border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.ch-table td {
padding: 7px; border-bottom: 1px solid rgba(30, 42, 58, .5);
vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-table tbody tr:last-child td { border-bottom: 0; }
.ch-table .num { text-align: right; font-family: var(--mono); }
.ch-table th.num { text-align: right; }
.ch-cat { color: var(--text); }
.ch-poi-name { color: var(--text); }
.ch-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.ch-bar-cell { display: flex; align-items: center; gap: 8px; }
.ch-track {
flex: 1 1 auto; min-width: 22px; height: 8px; border-radius: 4px;
background: rgba(255, 255, 255, .05); overflow: hidden;
}
.ch-track i { display: block; height: 100%; border-radius: 4px; }
.ch-bar-cell .n { min-width: 22px; text-align: right; font-family: var(--mono); font-size: var(--fs-xs, 13px); color: var(--text); }
.ch-note { margin-top: 9px; font-size: var(--fs-xs, 13px); line-height: var(--lh-base, 1.7); color: var(--muted); }
.ch-scale {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 3px; margin-top: 8px; font-size: var(--fs-xs, 13px); color: var(--muted);
}
.ch-scale i { display: block; width: 16px; height: 8px; border-radius: 2px; }
.ch-scale span { margin: 0 4px; }
.ch-scale em { margin-left: 8px; font-style: normal; color: var(--text-2); font-family: var(--mono); }
/* 列宽只写在这里：table-layout:fixed 下由第一行的 th 决定整列宽度，
窄屏要藏列时连 th 一起 display:none，剩下的列按新比例铺满，不会被空列占位挤扁。 */
.ch-cat-table .c-cat { width: 26%; }
.ch-cat-table .c-bar { width: 30%; }
.ch-cat-table .c-share { width: 14%; }
.ch-cat-table .c-rate { width: 10%; }
.ch-cat-table .c-cost { width: 10%; }
.ch-cat-table .c-chain { width: 10%; }
.ch-poi-table .p-idx { width: 6%; }
.ch-poi-table .p-nm { width: 26%; }
.ch-poi-table .p-dist { width: 14%; }
.ch-poi-table .p-rate { width: 12%; }
.ch-poi-table .p-cost { width: 12%; }
.ch-poi-table .p-cat { width: 14%; }
.ch-poi-table .p-heat { width: 16%; }
@media (max-width: 640px) {
.ch-grid { grid-template-columns: 1fr; }
.ch-donut-wrap { grid-template-columns: 1fr; }
.ch-table { font-size: var(--fs-sm, 14px); }
.ch-table th, .ch-table td { padding: 6px 5px; }
.ch-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.ch-lg { gap: 5px; font-size: var(--fs-xs, 13px); }
.ch-lg .p { min-width: 38px; }
.ch-dens-note, .ch-dens-stat { font-size: var(--fs-xs, 13px); }
.ch-donut-svg, .ch-radar-svg, .ch-grid-svg { max-width: 260px; }
/* 窄屏只留「能定位 + 能比较」的列：占比/人均/业态次之，序号和距离在榜内可以靠排序理解 */
.ch-cat-table .c-share, .ch-cat-table .c-cost { display: none; }
.ch-cat-table .c-cat { width: 34%; }
.ch-cat-table .c-bar { width: 30%; }
.ch-cat-table .c-rate { width: 16%; }
.ch-cat-table .c-chain { width: 20%; }
.ch-poi-table .p-idx, .ch-poi-table .p-dist,
.ch-poi-table .p-cost, .ch-poi-table .p-cat { display: none; }
.ch-poi-table .p-nm { width: 50%; }
.ch-poi-table .p-rate { width: 18%; }
.ch-poi-table .p-heat { width: 32%; }
}
/* ==========================================================================
报告页 · 品类细分（需求三）
--------------------------------------------------------------------------
为什么单独一套 .cd-* 而不是复用 .kv-list / .cat-tbl：
这一块是「同一品类内部的分布」，视觉上要能和上下的「大盘结构」分开，
共用类名会让以后改大盘表格时顺手把这六格指标也改掉。
只在本文件末尾追加，避免动到已有规则。
========================================================================== */
.cd-kpi {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px; margin-bottom: 16px;
}
.cd-kpi-cell {
min-width: 0; padding: 10px 11px; border-radius: var(--radius-sm);
background: var(--panel-2); border: 1px solid var(--line-soft);
}
.cd-kpi-cell > span {
display: block; font-size: var(--fs-xs, 13px); line-height: 1.5; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-kpi-cell > b {
display: block; font-family: var(--mono); font-size: var(--fs-lg, 20px); font-weight: 700;
line-height: 1.35; color: var(--text); letter-spacing: -.3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-kpi-cell > b small { font-size: var(--fs-xs, 13px); font-weight: 400; color: var(--muted); margin-left: 3px; }
.cd-kpi-cell > i {
display: block; font-style: normal; font-size: var(--fs-xs, 13px); line-height: 1.55; color: #64707f;
overflow: hidden; text-overflow: ellipsis;
}
/* 三张分布图并排：单张只有四五根条，各占一行会在卡片里留出大片空白 */
.cd-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cd-chart {
min-width: 0; padding: 12px 12px 10px; border-radius: var(--radius-sm);
background: rgba(22, 32, 47, .55); border: 1px solid var(--line-soft);
}
.cd-chart-h {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
font-size: var(--fs-xs, 13px); font-weight: 600; color: var(--text-2); margin-bottom: 6px;
}
.cd-chart-h small { font-size: var(--fs-xs, 13px); font-weight: 400; color: var(--muted); }
.cd-chart .cd-bars, .cd-chart .cd-split { width: 100%; height: auto; display: block; }
.cd-chart-n {
margin-top: 7px; padding-top: 6px; font-size: var(--fs-xs, 13px); line-height: var(--lh-base, 1.7); color: #64707f;
border-top: 1px dashed rgba(139, 152, 169, .14);
}
.cd-empty { font-size: var(--fs-xs, 13px); color: var(--muted); padding: 14px 0; }
/* 分区标题：TOP8 与「同商圈各品类」两段都靠它切分，比再套一个 card 省一层边框 */
.cd-sec { margin-top: 18px; }
.cd-sec-h {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
font-size: var(--fs-xs, 13px); font-weight: 600; color: var(--text-2);
padding-bottom: 7px; margin-bottom: 2px; border-bottom: 1px solid var(--line-soft);
}
.cd-sec-h small { font-size: var(--fs-xs, 13px); font-weight: 400; color: var(--muted); }
.cd-tbl-wrap { overflow-x: auto; min-width: 0; }
.cd-tbl {
width: 100%; min-width: 560px; table-layout: fixed;
border-collapse: collapse; font-size: var(--fs-xs, 13px); color: var(--text);
}
.cd-tbl th {
text-align: left; font-weight: 500; font-size: var(--fs-xs, 13px); color: var(--text-2);
background: #0d141e; padding: 8px 10px; border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.cd-tbl td { padding: 8px 10px; border-bottom: 1px dashed rgba(139, 152, 169, .12); vertical-align: middle; }
.cd-tbl tbody tr:last-child td { border-bottom: none; }
.cd-tbl tbody tr:hover { background: var(--hover-veil-soft); }
.cd-tbl .r { text-align: right; font-family: var(--mono); }
.cd-tbl .cd-idx { color: #5c6a7a; font-family: var(--mono); font-size: var(--fs-xs, 13px); }
.cd-tbl .cd-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-brand { margin-left: 6px; font-size: var(--fs-xs, 13px); color: var(--muted); }
.cd-tbl .cd-cat { color: var(--text-2); }
/* 档位不用文字色区分（色弱读不出），用色块底：连锁=青、个体=金，和全站语义一致 */
.cd-tier {
display: inline-block; padding: 1px 7px; border-radius: 20px;
font-size: var(--fs-xs, 13px); line-height: var(--lh-base, 1.7); white-space: nowrap;
}
.cd-tier-chain { background: rgba(23, 184, 166, .16); color: #4fd6c6; border: 1px solid rgba(23, 184, 166, .38); }
.cd-tier-indie { background: rgba(240, 169, 46, .14); color: #f0b45e; border: 1px solid rgba(240, 169, 46, .36); }
.cd-note {
margin-top: 14px; padding-top: 9px; font-size: var(--fs-xs, 13px); line-height: 1.85; color: #64707f;
border-top: 1px dashed rgba(139, 152, 169, .16);
}
.cd-note b { color: var(--text-2); font-weight: 600; }
.cd-empty-note {
margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
font-size: var(--fs-xs, 13px); line-height: 1.85; color: #c9a35a;
background: rgba(240, 169, 46, .07); border: 1px dashed rgba(240, 169, 46, .34);
}
@media (max-width: 1080px) {
.cd-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-charts > .cd-chart:last-child { grid-column: 1 / -1; }
/* 第三块独占一行后，双段条会被拉成一条 1000px 的长杠，跟上面两根短条不成比例；
限宽后它还是「一根条 + 两行图例」的比例，只是左边对齐 */
.cd-charts > .cd-chart:last-child .cd-split { max-width: 520px; }
}
@media (max-width: 720px) {
.cd-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cd-charts { grid-template-columns: minmax(0, 1fr); }
.cd-charts > .cd-chart:last-child { grid-column: auto; }
.cd-kpi-cell > b { font-size: var(--fs-md, 17px); }
}
/* 打印页（report_print.php 白底）：卡片内的深色格必须翻成浅色，
否则导出的 PDF 上这六格指标和三个小图框会是白字白底 */
.print-wrap .cd-kpi-cell,
.print-wrap .cd-chart { background: #f7f9fc; border-color: #dfe4ea; }
.print-wrap .cd-kpi-cell > span,
.print-wrap .cd-kpi-cell > i,
.print-wrap .cd-chart-h small,
.print-wrap .cd-chart-n,
.print-wrap .cd-sec-h small { color: #5c6a7a; }
.print-wrap .cd-kpi-cell > b,
.print-wrap .cd-chart-h,
.print-wrap .cd-sec-h { color: #16202e; }
.print-wrap .cd-tbl th { background: #f3f6fa; color: #5c6a7a; border-bottom-color: #dfe4ea; }
.print-wrap .cd-tbl td { color: #16202e; border-bottom-color: #eef1f5; }
.print-wrap .cd-tbl .cd-idx,
.print-wrap .cd-brand,
.print-wrap .cd-tbl .cd-cat { color: #5c6a7a; }
.print-wrap .cd-tier-chain { background: #e2f6f3; color: #0f7e72; border-color: #b3e2db; }
.print-wrap .cd-tier-indie { background: #fdf3e0; color: #96650f; border-color: #e8cf9f; }
.print-wrap .cd-note { color: #5c6a7a; border-top-color: #e2e7ee; }
.print-wrap .cd-note b { color: #34404e; }
.print-wrap .cd-empty-note { background: #fffaf0; border-color: #e6c47a; color: #8a5a00; }
/* 打印版（/report/{no}/print）是白底页面，图表文字的默认色 #8b98a9 压在白底上几乎看不见。
report-charts.css 只给饼图 / 雷达图的个别类补了浅色，新增的分档条用的是
.rk-label / .rk-tick 这两个通用类，所以在这里统一切成深色。
只作用于 .print-wrap 容器，屏幕上的深色报告不受影响。 */
.print-wrap .rk-chart text { fill: #5c6a7a; }
.print-wrap .rk-chart .rk-label { fill: #34404e; }
.print-wrap .rk-chart .rk-tick { fill: #5c6a7a; }
/* 分档条右侧的「家 · 占比」是这一块唯一的数值，白底上再淡就只剩条形可比；提到 #45525f */
.print-wrap .rk-chart .rk-tick { fill: #45525f; }
/* ==========================================================================
工作台 · 品类细分（需求三，选中二级品类后替代圆环）
--------------------------------------------------------------------------
三列并排：单张分档图只有四根条，各自占一行会把卡片拉得很长、留白很多。
断点放 860px 而不是 720px：工作台右侧结果区被左侧条件面板挤过之后，
实际可用宽度常常只有 800 出头，那时三列已经开始压字。
========================================================================== */
.ch-catdet-kpi {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px; margin-bottom: 14px;
}
.ch-catdet-kpi > div {
min-width: 0; padding: 9px 11px; border-radius: 8px;
background: #16202f; border: 1px solid #1e2a3a;
}
.ch-catdet-kpi i { display: block; font-style: normal; font-size: var(--fs-xs, 13px); color: #74849a; line-height: 1.5; }
.ch-catdet-kpi b {
display: block; font-family: var(--mono); font-size: var(--fs-md, 17px); font-weight: 700; color: #dbe4ef;
line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-catdet-kpi small { display: block; font-size: var(--fs-xs, 13px); color: #64707f; line-height: 1.5; }
.ch-catdet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* 三列高度对齐：分档图比双段条高，说明文字如果紧跟着各自图形走，
同一行里就会出现三个不同高度的段落。用 flex 把说明压到列底，视觉上是一条基线。 */
.ch-catdet-col { min-width: 0; display: flex; flex-direction: column; }
.ch-catdet-h {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
font-size: var(--fs-xs, 13px); font-weight: 600; color: #a8b6c8; margin-bottom: 4px;
}
.ch-catdet-h small { font-size: var(--fs-xs, 13px); font-weight: 400; color: #74849a; }
.ch-catdet-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-catdet-n { margin-top: auto; padding-top: 6px; font-size: var(--fs-xs, 13px); line-height: var(--lh-base, 1.7); color: #64707f; }
.ch-catdet-src {
margin-top: 10px; padding-top: 8px; font-size: var(--fs-xs, 13px); line-height: 1.8; color: #64707f;
border-top: 1px dashed rgba(139, 152, 169, .16);
}
@media (max-width: 860px) {
.ch-catdet { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ch-catdet-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============================================================
v1.8.0 · 导航星标（新功能标记）
与 .nav-badge（HOT）并存：HOT 是固定文案的旧徽标，星标要能由后台改
文案 / 形态 / 配色，所以单独一套类。两套都用 承载，避免影响
导航项本身的盒子尺寸计算 —— 用 会让基线对齐多出一像素的抖动。
============================================================ */
.nav-star {
display: inline-block;
font-style: normal;
font-size: var(--fs-xs, 13px);
line-height: 1.5;
font-weight: 700;
letter-spacing: .02em;
padding: 0 5px;
margin-left: 5px;
border-radius: 4px;
vertical-align: middle;
white-space: nowrap;
/* 兜底：后台把颜色清空时至少还能看见标记 */
background: var(--ns-bg, #ff7a18);
color: var(--ns-fg, #fff);
}
/* 下拉里的子项字号比一级导航小一档，星标跟着缩，否则会比父项还抢眼 */
.nav-star-in { font-size: 11px; padding: 0 4px; margin-left: 4px; }
/* 描边：浅色底上实心块太吵，只留一个圈住的字 */
.nav-star-outline {
background: transparent;
color: var(--ns-bg, #ff7a18);
box-shadow: inset 0 0 0 1px var(--ns-bg, #ff7a18);
}
/* 毛玻璃：底色只取 18% 透明度，文字用底色本身，整体压得住又不糊 */
.nav-star-glass {
background: color-mix(in srgb, var(--ns-bg, #ff7a18) 18%, transparent);
color: var(--ns-bg, #ff7a18);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-bg, #ff7a18) 38%, transparent);
}
/* 不支持 color-mix 的浏览器退回半透明白，至少不出现「透明底透明字」 */
@supports not (background: color-mix(in srgb, red 18%, transparent)) {
.nav-star-glass { background: rgba(255, 122, 24, .18); color: #ff7a18; box-shadow: none; }
}
/* 圆点：文案收起，只在右上角留一个色点，最不打扰的一种形态 */
.nav-star-corner {
width: 7px; height: 7px;
padding: 0; margin-left: 4px;
border-radius: 50%;
background: var(--ns-bg, #ff7a18);
color: transparent;
font-size: 0;
line-height: 0;
overflow: hidden;
vertical-align: super;
}
/* ==========================================================================
v1.9.0 控件样式：下拉滚动条 + 数字输入框加减按钮
--------------------------------------------------------------------------
本节只在文件末尾追加，不改上面任何既有规则；选择器全部写真实类名/ID，
没有 [class*="list"] 这类模糊匹配（会误伤 .method-list / .mk-buy-list）。
颜色一律走 var(--line) / var(--muted) / var(--brand)，亮色主题由 theme.css
换令牌，这里不需要第二套规则；滚动条轨道保持 transparent，绝不写死深色，
否则白底主题下会拉出一条黑边。
========================================================================== */
/* ---------- 1. 页内下拉 / 弹出列表：统一细滚动条 ---------- */
/* 命中的是「点开后才出现、限高滚动」的列表容器：
.area-suggest 工作台「选择商圈」的搜索联想（app.css:358）
.poi-list 工作台「商圈内点位」（workbench.php 内联样式限高 214px）
.map-q-list 工作台地图检索联想（app.css:1488）
#area-chips 工作台选中的商圈 chip 池（workbench.php 内联限高 132px）
#area-band-chips 工作台品类 chip 池（app.css:638 限高 208px）
scrollbar-gutter: stable 让滚动条出现/消失时内容不左右跳；不支持的浏览器
直接忽略这一行，不影响其它属性。 */
.area-suggest,
.poi-list,
.map-q-list,
#area-chips,
#area-band-chips {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--line) transparent; /* Firefox：滑块 / 轨道 */
scrollbar-gutter: stable;
}
.area-suggest::-webkit-scrollbar,
.poi-list::-webkit-scrollbar,
.map-q-list::-webkit-scrollbar,
#area-chips::-webkit-scrollbar,
#area-band-chips::-webkit-scrollbar { width: 8px; height: 8px; }
.area-suggest::-webkit-scrollbar-track,
.poi-list::-webkit-scrollbar-track,
.map-q-list::-webkit-scrollbar-track,
#area-chips::-webkit-scrollbar-track,
#area-band-chips::-webkit-scrollbar-track { background: transparent; }
.area-suggest::-webkit-scrollbar-thumb,
.poi-list::-webkit-scrollbar-thumb,
.map-q-list::-webkit-scrollbar-thumb,
#area-chips::-webkit-scrollbar-thumb,
#area-band-chips::-webkit-scrollbar-thumb {
background: var(--line); border-radius: 8px;
}
.area-suggest::-webkit-scrollbar-thumb:hover,
.poi-list::-webkit-scrollbar-thumb:hover,
.map-q-list::-webkit-scrollbar-thumb:hover,
#area-chips::-webkit-scrollbar-thumb:hover,
#area-band-chips::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* 第三个下拉（#city-select，选城市）是原生