/* ==========================================================================
   明智购房计算器 Pro · Web（MORTGAGE PRO）
   品牌：MORTGAGE PRO 色彩体系（橙红 #EB5532 + 深灰蓝导航 + 多语义数据色）
   ========================================================================== */

:root {
  /* 品牌 */
  --brand: #EB5532;
  --brand-l: #F6653F;
  --brand-w: #FA8227;
  --red: #F70F03;

  /* 深色系统 */
  --ink-900: #22272F;
  --ink-800: #33383F;
  --ink-700: #3F444B;
  --ink-600: #52555B;

  /* 中性 */
  --bg: #EDF0F2;
  --bg-deep: #E6E9EC;
  --surface: #FFFFFF;
  --surface-2: #F7F8F9;
  --line: #E4E8EB;
  --line-2: #DDE2E6;

  /* 文字 */
  --t1: #1D2229;
  --t2: #5A626C;
  --t3: #8B949E;
  --t4: #A9B1BA;

  /* 语义 */
  --pos: #1BCAA0;
  --pos-deep: #0FA184;
  --neg: #EB5532;
  --purple: #5D7CFA;
  --sky: #58B4F4;
  --mint: #58B59C;
  --gold: #F8A01C;

  --r-card: 16px;
  --r-ctl: 10px;
  --sh-1: 0 1px 2px rgba(29, 34, 41, .04);
  --sh-2: 0 2px 8px -2px rgba(29, 34, 41, .06), 0 12px 32px -18px rgba(29, 34, 41, .18);
  --sh-brand: 0 8px 20px -8px rgba(235, 85, 50, .55);

  /* 间距阶梯（4px 基准，全站统一） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  --sidebar-w: 252px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--t1);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }
a { color: var(--brand); text-decoration: none; }

.num, .rh-value, .kpi-v, .kv-v, .tc-num, .hbar-v, .stat-v, .mini-v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================ 侧栏 ============================ */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #2C3138 0%, #22272F 62%, #1E232A 100%);
  color: #C9D0D7;
  display: flex;
  flex-direction: column;
  z-index: 60;
  padding: var(--sp-5) 0 var(--sp-4);
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 220px at 10% -6%, rgba(235, 85, 50, .18), transparent 70%),
    radial-gradient(420px 260px at 100% 100%, rgba(88, 180, 244, .07), transparent 70%);
  pointer-events: none;
  opacity: .9;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-5) var(--sp-6);
  position: relative;
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex: none;
  overflow: hidden;
  box-shadow: 0 4px 12px -3px rgba(235, 85, 50, .45), 0 0 22px -6px rgba(235, 85, 50, .22);
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand-txt { min-width: 0; }
.brand-name {
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .2px; line-height: 1.2;
  display: flex; align-items: center; gap: 6px;
}
.brand-name em {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  color: #FFB59E; background: rgba(235, 85, 50, .18);
  border: 1px solid rgba(235, 85, 50, .3);
  padding: 1px 5px; border-radius: 4px; transform: translateY(-1px);
}
.brand-sub { font-size: 11px; color: #7C858F; margin-top: 1px; letter-spacing: .3px; }

.nav-scroll { flex: 1; overflow-y: auto; padding: 0 var(--sp-3); position: relative; }
.nav-scroll::-webkit-scrollbar { width: 0; }

.nav-group { margin-bottom: var(--sp-4); }
.nav-label {
  font-size: 10.5px; letter-spacing: 1.3px; color: #666E78;
  padding: 0 var(--sp-3) var(--sp-2); text-transform: uppercase; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: 9px;
  color: #A8B1BA; font-size: 13.5px; text-decoration: none;
  margin-bottom: var(--sp-1); position: relative;
  transition: background .16s var(--ease), color .16s var(--ease);
  width: 100%; text-align: left;
}
.nav-item .ico { color: #7C858F; transition: color .16s; flex: none; }
.nav-item:hover { background: rgba(255, 255, 255, .05); color: #EDF1F4; }
.nav-item:hover .ico { color: #C3CBD3; }
.nav-item.on {
  background: rgba(235, 85, 50, .15);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(235, 85, 50, .22);
}
.nav-item.on .ico { color: #FF8A66; }
.nav-item.on::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.nav-badge {
  margin-left: auto; font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: rgba(255, 255, 255, .07); color: #8B949E; font-weight: 500;
}
.nav-item.on .nav-badge { background: rgba(235, 85, 50, .25); color: #FFB59E; }

.sidebar-foot { padding: var(--sp-3) var(--sp-5) 0; position: relative; }
.sb-card {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px; padding: var(--sp-3);
}
.sb-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #828B95; }
.sb-row b { color: #E9EEF2; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-row + .sb-row { margin-top: var(--sp-1); }
.sb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pos); display: inline-block; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(27, 202, 160, .15); }
.sb-ver { margin-top: var(--sp-3); font-size: 10.5px; color: #5E6670; letter-spacing: .3px; }

/* ============================ 主区 ============================ */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: 62px; padding: 0 var(--sp-7);
  display: flex; align-items: center; gap: var(--sp-4);
  background: rgba(237, 240, 242, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(29, 34, 41, .07);
}
.tb-crumb { font-size: 12.5px; color: var(--t3); display: flex; align-items: center; gap: var(--sp-2); }
.tb-crumb b { color: var(--t1); font-weight: 600; }
.tb-crumb .sep { color: #C2C9D0; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 var(--sp-3); border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; color: var(--t2); box-shadow: var(--sh-1);
  font-variant-numeric: tabular-nums;
}
.pill b { color: var(--t1); font-weight: 600; }
.pill .up { color: var(--pos-deep); font-weight: 600; }
.pill .down { color: var(--brand); font-weight: 600; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
.pill-ghost { background: rgba(255, 255, 255, .6); }

.menu-btn { display: none; }

/* 页面 */
.view { flex: 1; padding: var(--sp-6) var(--sp-7) var(--sp-8); max-width: 1400px; width: 100%; }

.page-head {
  display: flex; align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.page-head h1 {
  font-size: 25px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2;
  display: flex; align-items: center; gap: var(--sp-3);
}
.page-head .sub { font-size: 13px; color: var(--t3); margin-top: var(--sp-1); text-wrap: pretty; }
.page-head .head-act { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
/* 页头右槽与结果列同宽：列定义与 .layout 保持一致，广告位才能和深色主卡上下对齐 */
.page-head.phead-split {
  display: grid; grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  gap: var(--sp-4); align-items: end;
}
/* 宽布局页（关于 / 帮助中心）跟 .layout.wide 的 380px 左列对齐 */
.page-head.phead-split.phead-wide { grid-template-columns: minmax(330px, 380px) minmax(0, 1fr); }
/* 行情页：左列与 .rate-top 的侧栏列同为 300px，广告位左缘正好压在 LPR 卡上 */
.page-head.phead-split.phead-rate { grid-template-columns: 300px minmax(0, 1fr); }
/* 右槽改块级：让广告位撑满整列（flex 下它会缩成内容宽，宽度就对不上主卡了） */
.page-head.phead-split .head-act { margin-left: 0; display: block; }
.page-head.phead-split .ad-slot { width: 100%; margin: 0; }
@media (max-width: 1140px) {
  /* 结果区收成单列时，页头也收成一列，广告位自然与主卡等宽 */
  .page-head.phead-split, .page-head.phead-split.phead-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  /* 行情页跟随 .rate-top 的断点收单列（上面那条 1140 被 .phead-rate 的更高特异性挡住） */
  .page-head.phead-split.phead-rate { grid-template-columns: minmax(0, 1fr); }
}
/* 全站关广告（Ads.mount 打 ads-off 标）：右槽没有内容，页头退回普通流式布局，
   标题与副标题拿回整行宽度，不留一块空白列 */
.ads-off .page-head.phead-split { display: flex; }
.head-tag {
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: rgba(235, 85, 50, .09); border: 1px solid rgba(235, 85, 50, .16);
  padding: 2px 8px; border-radius: 999px; letter-spacing: .2px;
}

/* ============================ 卡片 ============================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.card + .card { margin-top: var(--sp-4); }
.card-h {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) 0;
}
.card-title {
  font-size: 14.5px; font-weight: 650; color: var(--t1);
  display: flex; align-items: baseline; gap: var(--sp-2); letter-spacing: .1px;
}
.card-sub { font-size: 11.5px; color: var(--t3); font-weight: 400; letter-spacing: 0; }
.card-h .spacer { margin-left: auto; }
.card-b { padding: var(--sp-4) var(--sp-5); }
.card-b.tight { padding: var(--sp-3) 0 var(--sp-1); }
.card-note { padding: 0 var(--sp-5) var(--sp-4); font-size: 12px; color: var(--t3); line-height: 1.65; }
.hint {
  font-size: 12px; color: var(--t3); line-height: 1.65;
  background: var(--surface-2); border-radius: 9px; padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-3);
}
.hint b { color: var(--t2); font-weight: 600; }

/* ============================ 布局 ============================ */
.layout {
  display: grid;
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.layout.wide { grid-template-columns: minmax(330px, 380px) minmax(0, 1fr); }
.col-form { position: sticky; top: 84px; }
.col-form > * + * { margin-top: var(--sp-4); }
.col-res > * + * { margin-top: var(--sp-4); }
.stack > * + * { margin-top: var(--sp-4); }

/* ============================ 表单 ============================ */
.field { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; }
.field + .field { margin-top: var(--sp-3); }
/* chips / 滑块行后面跟字段时，字段同样需要上边距（.field + .field 覆盖不到） */
.chips + .field, .range-row + .field { margin-top: var(--sp-3); }
/* 无标签的独立控件行（seg）夹在字段之间时，两侧都需要行距 */
.field + .seg, .seg + .field { margin-top: var(--sp-3); }
/* 裸标签（下方直接跟控件，如 seg）——紧凑配对，不用 40px 的 .field 行 */
.form-lb { font-size: 13px; color: var(--t2); margin: var(--sp-3) 0 var(--sp-2); }
.field-label { flex: 1; font-size: 13px; color: var(--t2); }
.field-ctl { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
/* 输入框：外框承载边框/底色，内部输入值左对齐，单位作为框内右对齐后缀（不可编辑） */
.input-box {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 38px; width: 150px; padding: 0 var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-box:hover { border-color: #CDD4DA; }
.input-box:focus-within {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 3px rgba(235, 85, 50, .12);
}
.input {
  flex: 1; min-width: 0; width: auto; height: 100%;
  padding: 0; border: 0; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--t1);
  text-align: left;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.input::placeholder { color: #B7BFC7; font-weight: 400; }
textarea.input { height: auto; padding: 8px 0; line-height: 1.55; resize: vertical; }
/* 多行输入：外框按内容自适应高度。.input-box 默认 height:38px 是为单行输入设计的，
   直接装 textarea 会把它居中挤出边框（占位文字看起来浮在框外） */
.input-box:has(> textarea) {
  height: auto; align-items: stretch;
  padding-top: 4px; padding-bottom: 4px;
}
/* 不支持 :has() 的旧浏览器兜底：所有输入框改为自适应高度 + 拉伸对齐，文本域不再被 38px 固定高挤出边框 */
@supports not (selector(:has(*))) {
  .input-box { min-height: 38px; height: auto; align-items: stretch; }
  .input { height: auto; }
}
.unit { flex: none; font-size: 12px; color: var(--t3); pointer-events: none; white-space: nowrap; }
/* 带单位的输入框：数值右对齐紧贴单位（数字尾部对齐更直观），单位与数值间距收紧 */
.input-box.has-unit { gap: var(--sp-1); }
.input-box.has-unit .input { text-align: right; }
/* 无数值单位的纯数字输入（如后台「倍数」列）：同样右对齐，保持同行数字列尾部对齐 */
.input-box.al-r .input { text-align: right; }
.select-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.select {
  flex: 1; min-width: 0; height: 100%; width: auto;
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; outline: none;
  font-size: 14px; font-weight: 600; color: var(--t1);
  text-align: right; padding-right: 16px; cursor: pointer;
}
.sel-arrow {
  position: absolute; right: 2px; font-size: 10px; color: var(--t3); pointer-events: none;
}
.field-seg { align-items: center; }

.range-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4px; border-radius: 999px;
  background: var(--bg-deep); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
  cursor: pointer;
}

/* 分段 */
.seg {
  display: flex; gap: var(--sp-1); padding: var(--sp-1);
  background: #F1F3F5; border-radius: 11px;
  border: 1px solid #E8ECEF;
}
.seg-item {
  flex: 1; min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 12.5px; color: var(--t2); font-weight: 500;
  transition: background .16s, color .16s, box-shadow .16s;
  line-height: 1.35;
}
.seg-item:hover { color: var(--t1); }
.seg-item.on {
  background: #fff; color: var(--brand); font-weight: 650;
  box-shadow: 0 1px 3px rgba(29, 34, 41, .1);
}
.seg-sub { font-size: 10px; color: var(--t4); font-weight: 400; }
.seg-item.on .seg-sub { color: rgba(235, 85, 50, .65); }

/* 快捷 chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip {
  height: 28px; padding: 0 var(--sp-3); border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff;
  font-size: 12px; color: var(--t2);
  font-variant-numeric: tabular-nums;
  transition: all .15s;
}
.chip:hover { border-color: #C9D0D7; color: var(--t1); }
/* 移动端触摸目标：chips 抬高到 32px（舒适线），顶栏按钮只留图标 */
@media (max-width: 560px) {
  .chip { height: 32px; font-size: 12.5px; }
  .tb-right .btn-tx { display: none; }
}
.chip.on {
  background: rgba(235, 85, 50, .08);
  border-color: rgba(235, 85, 50, .42);
  color: var(--brand); font-weight: 600;
}

/* 开关 */
.switch-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.sw-lb { flex: 1; font-size: 13px; color: var(--t1); display: flex; flex-direction: column; gap: 1px; }
.sw-ds { font-size: 11.5px; color: var(--t3); }
.switch {
  width: 42px; height: 24px; border-radius: 999px; background: #D8DEE3;
  position: relative; transition: background .2s; flex: none;
}
.switch i {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .2s var(--ease);
}
.switch.on { background: var(--brand); }
.switch.on i { transform: translateX(18px); }

/* 折叠行 */
.fold-row {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: var(--sp-3) 0; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--t2); margin-top: var(--sp-2); text-align: left;
}
.fold-row .fr-hl { margin-left: auto; color: var(--brand); font-weight: 600; }
.fold-row .fr-arrow { color: var(--t4); font-size: 11px; transition: transform .2s; }
.fold-body { font-size: 12px; color: var(--t3); line-height: 1.7; padding: var(--sp-1) 0 var(--sp-2); }
.fold-body p + p { margin-top: var(--sp-2); }

/* 利率提示 */
.rate-hint {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 10px;
  background: linear-gradient(180deg, #FFF8F5, #FFFDFC);
  border: 1px solid #F7DDD4;
}
.rh-head { display: flex; align-items: center; gap: var(--sp-2); font-size: 12.5px; }
.rh-rate { font-weight: 650; color: #C33F20; }
.rh-bp {
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: #fff; border: 1px solid #F6CFC1; padding: 0 6px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.rh-badge {
  font-size: 10px; font-weight: 600; color: #fff; background: var(--brand);
  padding: 1px 6px; border-radius: 4px;
}
.rh-body { font-size: 11.5px; color: #8A6A60; margin-top: var(--sp-1); line-height: 1.5; }

/* ============================ 结果主卡 ============================ */
.result-hero {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: var(--sp-5) var(--sp-6) var(--sp-5);
  background: linear-gradient(140deg, #2E343C 0%, #22272F 52%, #1C2128 100%);
  color: #fff;
  box-shadow: 0 16px 40px -22px rgba(34, 39, 47, .7);
}
.rh-glow {
  position: absolute; width: 340px; height: 220px; right: -80px; top: -110px;
  background: radial-gradient(closest-side, rgba(235, 85, 50, .42), transparent 72%);
  pointer-events: none;
}
.result-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 100% at 100% 0, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0, #000 20%, transparent 78%);
}
.rh-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: #FFC0AB; background: rgba(235, 85, 50, .18);
  border: 1px solid rgba(235, 85, 50, .3);
  padding: 2px 9px; border-radius: 999px; margin-bottom: var(--sp-4); position: relative;
}
.rh-label { font-size: 12.5px; color: #98A2AC; position: relative; letter-spacing: .2px; }
.rh-value {
  font-size: clamp(34px, 4vw, 46px); font-weight: 700; letter-spacing: -1.6px;
  line-height: 1.1; margin-top: 3px; position: relative; white-space: nowrap;
  color: var(--brand);
}
.rh-value small { font-size: 13px; font-weight: 500; color: #FFA98F; margin-left: 5px; letter-spacing: 0; }

/* 主数值留在左侧原位 · 三格统计组成一组落在卡片居中位（两者同一行） */
.rh-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(16px, 2.4vw, 40px); position: relative;
}
/* 结果列偏窄时改由内容决定左列下限，避免主数值与统计组相撞（统计组会右移十余 px） */
@media (max-width: 1023px) {
  .rh-band { grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); }
}
.rh-main {
  grid-column: 1; display: flex; flex-direction: column;
  justify-self: start; min-width: 0;
}
.rh-stats {
  grid-column: 2; display: grid;
  grid-template-columns: repeat(3, auto); grid-template-rows: auto auto;
  justify-content: center; align-items: center;
  column-gap: clamp(20px, 3vw, 52px); row-gap: 5px;
  position: relative; top: 10px; /* 相对主数值整体下移 10px */
}
.rh-cell {
  display: grid; grid-template-rows: subgrid; grid-row: 1 / span 2;
  align-items: center; min-width: 0;
}
.rh-cell span { font-size: 11.5px; color: #8B949E; white-space: nowrap; }
.rh-cell b { font-size: clamp(15px, 1.3vw, 17px); font-weight: 650; color: #F0F3F6; letter-spacing: -.2px; white-space: nowrap; }
.rh-cell b em { font-style: normal; font-size: 11.5px; color: #98A2AC; font-weight: 500; margin-left: 2px; }
.rh-cell b.pos { color: #4BE3BE; }
.rh-cell b.neg { color: #FF9C7C; }
/* 极旧浏览器（不支持 subgrid）下降级：KPI 单元改为纵向居中堆叠，标签基线对齐退化为各自居中 */
@supports not (grid-template-rows: subgrid) {
  .rh-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; grid-row: auto; }
}

/* KPI 三小卡：深色主卡下方一组 */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-1);
}
.kpi-k { font-size: 11.5px; color: var(--t3); display: flex; align-items: center; gap: 5px; }
.kpi-v { font-size: 20px; font-weight: 700; letter-spacing: -.6px; margin-top: 3px; line-height: 1.2; }
.kpi-v small { font-size: 11px; font-weight: 500; color: var(--t3); margin-left: 2px; letter-spacing: 0; }
.kpi-x { font-size: 11px; color: var(--t3); margin-top: 2px; }
.kpi.pos .kpi-v { color: var(--pos-deep); }
.kpi.brand { display: block; } /* 抵消侧栏品牌块 .brand 的 flex 布局，保持 KPI 卡上下堆叠 */
.kpi.brand .kpi-v { color: var(--brand); }

/* 关键值行 */
.kv { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: 13px; }
.kv + .kv { border-top: 1px dashed #EEF1F3; }
.kv-k { color: var(--t2); flex: none; }
.kv-v { margin-left: auto; font-weight: 600; color: var(--t1); text-align: right; }
.kv-v.hl { color: var(--brand); }
.kv-v.pos { color: var(--pos-deep); }
.kv-v.mute { color: var(--t3); font-weight: 500; }
.kv-sub { font-size: 11px; color: var(--t3); margin-left: 6px; font-weight: 400; }

/* 条形 */
.bar-row { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; margin: var(--sp-3) 0; }
.bar-row:first-child { margin-top: 0; }
.bar-l { width: 64px; color: var(--t2); flex: none; }
.bar-track { flex: 1; height: 8px; background: #F0F3F5; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .5s var(--ease); }
.bar-v { width: 92px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); font-size: 11.5px; color: var(--t3); }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.lg b { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 图表 */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.c-axis { font-size: 10px; fill: #9AA3AC; font-family: inherit; font-variant-numeric: tabular-nums; }
.c-tip { font-size: 11px; fill: #fff; font-weight: 600; font-family: inherit; }

.hbars { display: flex; flex-direction: column; gap: var(--sp-3); }
.hbar-top { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.hbar-l { color: var(--t2); }
.hbar-v { font-weight: 650; letter-spacing: -.2px; }
.hbar-track { height: 8px; border-radius: 999px; background: #F0F3F5; overflow: hidden; }
.hbar-track i { display: block; height: 100%; border-radius: 999px; transition: width .55s var(--ease); }

/* ============================ 按钮 ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 var(--sp-4); border-radius: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .1px;
  background: #fff; color: var(--t1); text-decoration: none;
  border: 1px solid var(--line-2);
  transition: all .16s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: #C6CDD4; background: #FCFCFD; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, #F6653F, #E04527);
  border-color: transparent; color: #fff;
  box-shadow: var(--sh-brand);
}
.btn-primary:hover { background: linear-gradient(135deg, #FA7550, #E64C2D); border-color: transparent; }
.btn-dark { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.btn-dark:hover { background: #2C323A; border-color: #2C323A; }
.btn-ghost { background: transparent; }
.btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: 12px; border-radius: 8px; }
.btn .ico { margin: 0 -2px; }
.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.btn-row .btn { flex: 1; min-width: 118px; }

/* ============================ 表格 ============================ */
.tbl-wrap { overflow-x: auto; border-radius: 10px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  font-size: 11.5px; font-weight: 600; color: var(--t3);
  text-align: right; padding: var(--sp-2) var(--sp-3); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.tbl thead th:first-child, .tbl tbody td:first-child { text-align: left; padding-left: var(--sp-5); }
.tbl thead th:last-child, .tbl tbody td:last-child { padding-right: var(--sp-5); }
.tbl tbody td {
  text-align: right; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid #F2F4F6;
  font-variant-numeric: tabular-nums; color: var(--t2); white-space: nowrap;
}
.tbl tbody tr:hover td { background: #FBFCFD; }
.tbl tbody td.strong { color: var(--t1); font-weight: 600; }
.tbl tbody td.brand { color: var(--brand); font-weight: 600; }
.tbl .year-row td {
  background: #F7F9FA; color: var(--t1); font-weight: 650; font-size: 12px;
  padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--line);
}
.tbl-scroll { max-height: 460px; overflow-y: auto; }

/* ============================ 首页 ============================ */
.hero {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: var(--sp-6) var(--sp-7);
  background: linear-gradient(135deg, #2E343C 0%, #22272F 55%, #1B2027 100%);
  color: #fff; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-6);
  align-items: stretch;
  box-shadow: 0 24px 60px -32px rgba(34, 39, 47, .8);
}
.hero::before {
  content: ""; position: absolute; width: 620px; height: 420px; right: -140px; top: -200px;
  background: radial-gradient(closest-side, rgba(235, 85, 50, .34), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
}
/* 文字块整体下移 20px（原 25px 再上提 5px）：顶部留呼吸，底部标签的 auto 同步吸收这段间距 */
.hero-l { position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: 20px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; width: fit-content;
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  color: #FFB59E; background: rgba(235, 85, 50, .16);
  border: 1px solid rgba(235, 85, 50, .28);
  padding: 3px 9px; border-radius: 999px;
}
.hero h1, .hero h2 {
  font-size: clamp(26px, 2.2vw, 32px); font-weight: 700; letter-spacing: -1px;
  line-height: 1.28; margin: var(--sp-4) 0 var(--sp-3);
  text-wrap: pretty;   /* 防孤字：标题换行时不让单个汉字落单 */
}
.hero h1 em, .hero h2 em { font-style: normal; color: #FF7B54; position: relative; }
.hero p { font-size: 13.5px; color: #9AA4AE; line-height: 1.7; max-width: 460px; }
.hero-act { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.hero-act .btn { height: 40px; }
.hero-act .btn-primary { box-shadow: 0 10px 24px -10px rgba(235, 85, 50, .9); }
.hero-act .btn-ghost { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .26); }
.hero-act .btn-ghost:hover { background: rgba(255, 255, 255, .13); color: #fff; border-color: rgba(255, 255, 255, .42); }
/* 首页 hero 右侧：实时利率速览面板（替代旧 .hero-stat） */
.hero-panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; padding: var(--sp-4) var(--sp-5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.hp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.hp-title { font-size: 13px; font-weight: 700; letter-spacing: .2px; color: #EDEFF2; }
.hp-upd { font-size: 11px; color: #8B949E; white-space: nowrap; }
.hp-lpr { display: flex; align-items: flex-end; gap: var(--sp-4); }
.hp-lpr-v {
  font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: .92;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFD2BE 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp-lpr-v small { font-size: 18px; font-weight: 600; -webkit-text-fill-color: #FF9C7C; margin-left: 2px; letter-spacing: 0; }
.hp-lpr-meta { display: flex; flex-direction: column; gap: 5px; padding-bottom: 5px; }
.hp-lpr-label { font-size: 12px; color: #C7CDD4; }
.hs-delta { font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; align-self: flex-start; }
.hs-delta.down { color: #4BE3BE; background: rgba(27, 202, 160, .14); }
.hs-delta.up { color: #FF9C7C; background: rgba(235, 85, 50, .16); }
.hp-spark { height: 50px; }
.hp-spark svg { width: 100%; height: 100%; display: block; }
.hp-cap { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: #8B949E; margin-top: -4px; }
.hp-cap span:last-child { color: #C7CDD4; font-variant-numeric: tabular-nums; }
.hp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: auto; }
.hp-grid .mini { min-width: 0; }
.mini {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 11px; padding: var(--sp-2) var(--sp-3);
}
.mini-k { font-size: 10.5px; color: #8B949E; }
.mini-v { font-size: 16px; font-weight: 650; margin-top: var(--sp-1); }
.mini-v small { font-size: 10px; color: #8B949E; font-weight: 400; }
/* 左栏特性标签：桌面端撑到列底，底部与右栏 4 张迷你卡的底边齐平（面板内边距 16px 同款留白）；
   ≤1320 单列时回落 40px 固定间距（见响应式） */
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; margin-bottom: var(--sp-4); }
.hero-tags span {
  font-size: 11px; color: #B9C0C8; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; padding: 3px 10px;
}

.sect-h { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.sect-h h3 { font-size: 15px; font-weight: 700; letter-spacing: -.1px; }
.sect-h span { font-size: 12px; color: var(--t3); }
.sect-h .more { margin-left: auto; font-size: 12px; color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }

.tool-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.tool-card {
  text-align: left; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; padding: var(--sp-4);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
  position: relative; overflow: hidden;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px rgba(29, 34, 41, .34);
  border-color: #D9DFE4;
}
.tool-card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; opacity: 0;
  background: var(--accent, var(--brand));
  transition: opacity .18s;
}
.tool-card:hover::after { opacity: 1; }
.tool-tile {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; margin-bottom: var(--sp-3);
  box-shadow: 0 6px 14px -8px rgba(34, 39, 47, .5);
}
.tool-name { font-size: 13.5px; font-weight: 650; color: var(--t1); display: flex; align-items: center; gap: 5px; }
.tool-desc { font-size: 11.5px; color: var(--t3); margin-top: var(--sp-1); line-height: 1.5; }

.quick-calc {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  box-shadow: var(--sh-1);
}
.qc-fields { display: flex; gap: var(--sp-4); flex-wrap: wrap; flex: 1; align-items: flex-start; }
/* 横向快算条：取消纵向表单 .field+.field 的 12px 行距泄漏（避免第 2/3/4 字段被下压错位） */
.qc-fields > .field { margin-top: 0; }
.qc-f { display: flex; flex-direction: column; gap: 4px; }
.qc-f label { font-size: 11px; color: var(--t3); }
.qc-f .input-box { width: 118px; height: 36px; }
.qc-f .input { font-size: 13px; }
.qc-out { display: flex; align-items: center; gap: var(--sp-4); padding-left: var(--sp-4); border-left: 1px solid var(--line); }
.qc-v { font-size: 24px; font-weight: 700; letter-spacing: -.9px; color: var(--brand); white-space: nowrap; }
.qc-k { font-size: 11px; color: var(--t3); }
.qc-sub { font-size: 11.5px; color: var(--t2); }
.qc-sub b { color: var(--t1); }
@media (max-width: 1280px) { .qc-out { border-left: none; padding-left: 0; } }

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.feat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 15px;
  padding: var(--sp-4);
}
.feat-ico {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(235, 85, 50, .08); color: var(--brand); margin-bottom: var(--sp-3);
}
.feat h5 { font-size: 13px; font-weight: 650; margin: 0 0 var(--sp-1); }
.feat p { font-size: 12px; color: var(--t3); line-height: 1.65; margin: 0; }

/* ============================ 解读 ============================ */
.interpret-head {
  font-size: 13.5px; font-weight: 650; color: var(--t1); line-height: 1.55;
  padding: var(--sp-1) 0 var(--sp-3); border-bottom: 1px dashed var(--line); margin-bottom: var(--sp-3);
}
.ip { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; font-size: 12.5px; line-height: 1.7; color: var(--t2); }
.ip + .ip { border-top: 1px solid #F4F6F7; }
.ip-ico {
  flex: none; width: 17px; height: 17px; border-radius: 50%; margin-top: 2px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: #EEF1F4; color: var(--t3);
}
.ip.tip .ip-ico { background: rgba(27, 202, 160, .14); color: var(--pos-deep); }
.ip.warn .ip-ico { background: rgba(235, 85, 50, .12); color: var(--brand); }
.ip-tx b { color: var(--t1); }
.interpret-tips { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); }
.interpret-tips div { font-size: 11.5px; color: var(--t3); line-height: 1.75; }

/* ============================ 空态 / 提示 ============================ */
.empty {
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: 16px;
  padding: var(--sp-8) var(--sp-6); text-align: center;
}
.empty-ico {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto var(--sp-3);
  display: grid; place-items: center; background: var(--surface-2); color: var(--t4);
  border: 1px solid var(--line);
}
.empty-t { font-size: 13.5px; font-weight: 600; color: var(--t2); }
.empty-s { font-size: 12px; color: var(--t3); margin-top: var(--sp-2); line-height: 1.7; }
.empty-a { margin-top: var(--sp-4); }

/* ============================ 帮助中心 ============================ */
.faq-list { display: flex; flex-direction: column; }
.faq { border-bottom: 1px solid #F2F4F6; }
.faq:last-child { border-bottom: none; }
.faq > summary {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  padding: var(--sp-3) var(--sp-1); list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--t1);
  transition: color .15s;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover { color: var(--brand); }
.faq-arrow {
  margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; font-size: 13px; color: var(--t3);
  background: var(--surface-2); transition: transform .18s var(--ease);
}
.faq[open] .faq-arrow { transform: rotate(90deg); color: var(--brand); }
.faq-body {
  padding: 0 var(--sp-1) var(--sp-4);
  font-size: 12.5px; color: var(--t2); line-height: 1.85;
}
/* 三步流程：横向步骤卡 + 箭头连接，≤760px 转纵向 */
.steps-flow { display: flex; align-items: stretch; gap: var(--sp-2); }
.sf-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: var(--sp-5) var(--sp-2) var(--sp-4);
  transition: border-color .15s, background .15s;
}
.sf-item:hover { border-color: #F3C4B4; background: #FFFCFA; }
.sf-badge {
  position: relative; flex: none; color: #fff;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: var(--sp-3);
  background: linear-gradient(135deg, var(--brand-l), var(--brand));
  box-shadow: var(--sh-brand);
}
.sf-n {
  position: absolute; top: -5px; right: -7px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center; line-height: 1;
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: 10.5px; font-weight: 700; color: var(--brand);
}
.sf-t { font-size: 13.5px; font-weight: 650; color: var(--t1); margin: 0 0 var(--sp-1); }
.sf-d { font-size: 12px; color: var(--t3); line-height: 1.7; margin: 0; }
.sf-arrow {
  flex: none; align-self: center; color: var(--brand); opacity: .7;
  display: grid; place-items: center;
}
.sf-arrow .ico { display: block; }
@media (max-width: 760px) {
  .steps-flow { flex-direction: column; gap: var(--sp-3); }
  .sf-item { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--sp-3); padding: var(--sp-3); }
  .sf-badge { margin-bottom: 0; }
  .sf-arrow { transform: rotate(90deg); padding: var(--sp-1) 0; }
}

.notice {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: #FFF8F5; border: 1px solid #F8DDD3; border-radius: 10px;
  padding: var(--sp-2) var(--sp-3); font-size: 12px; color: #9C523A; line-height: 1.6;
}
.notice b { color: #B4432A; }
.notice .ico { flex: none; margin-top: 1px; color: var(--brand); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  background: #F1F4F6; color: var(--t2);
}
.badge.pos { background: rgba(27, 202, 160, .12); color: var(--pos-deep); }
.badge.brand { background: rgba(235, 85, 50, .1); color: var(--brand); }
.badge.gold { background: rgba(248, 160, 28, .14); color: #B4720A; }
.badge.sky { background: rgba(88, 180, 244, .14); color: #2278B4; }
.badge.purple { background: rgba(93, 124, 250, .12); color: #4459C4; }

/* 记录 */
.rec-list { display: flex; flex-direction: column; }
.rec {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid #F2F4F6; transition: background .15s;
}
.rec:last-child { border-bottom: none; }
.rec:hover { background: #FBFCFD; }
.rec-tile {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: #fff; flex: none; font-size: 12px; font-weight: 700;
}
.rec-main { min-width: 0; flex: 1; }
.rec-t { font-size: 13px; font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 7px; }
.rec-s { font-size: 11.5px; color: var(--t3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-amt { font-size: 14px; font-weight: 700; letter-spacing: -.3px; margin-right: var(--sp-1); }
.rec-amt small { font-size: 10px; color: var(--t3); font-weight: 500; margin-left: 1px; }
.rec-act { display: flex; gap: var(--sp-2); opacity: .55; transition: opacity .15s; }
.rec:hover .rec-act { opacity: 1; }
/* 记录备份恢复面板 */
.rec-restore {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.rec-restore-t { font-size: 12.5px; color: var(--t2); line-height: 1.7; margin-bottom: var(--sp-3); }
.rec-restore .input-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(235, 85, 50, .12); }
.icon-btn {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
  color: var(--t3); border: 1px solid transparent;
}
.icon-btn:hover { background: var(--surface-2); color: var(--t1); border-color: var(--line); }
.icon-btn.danger:hover { color: var(--brand); background: rgba(235, 85, 50, .07); border-color: rgba(235, 85, 50, .18); }

/* 城市选择条 */
.city-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; font-size: 12.5px; color: var(--t2); box-shadow: var(--sh-1);
}
.city-bar .input-box { width: 132px; height: 32px; }
.city-bar .input { font-size: 13px; }

/* toast */
.toast-wrap {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(34, 39, 47, .95); color: #fff; font-size: 12.5px;
  padding: var(--sp-2) var(--sp-4); border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
  display: flex; align-items: center; gap: 7px;
  animation: toastIn .22s var(--ease);
}
.toast .ico { color: #4BE3BE; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 页脚 */
.foot {
  padding: var(--sp-5) var(--sp-7) var(--sp-6); font-size: 11.5px; color: var(--t4); line-height: 1.8;
  border-top: 1px solid rgba(29, 34, 41, .06); max-width: 1400px;
}
.foot b { color: var(--t3); font-weight: 600; }
.foot-tx { margin: 0; }

/* 页脚友情链接卡 */
.foot-links { margin-bottom: var(--sp-4); }
.foot-links-h { font-size: 12px; font-weight: 600; color: var(--t3); margin-bottom: var(--sp-2); }
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-2); }
.fl-item {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--sp-2) var(--sp-3); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.fl-item:hover { border-color: #F3C4B4; box-shadow: var(--sh-1); }
.fl-logo {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); display: grid; place-items: center; overflow: hidden;
}
.fl-logo i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--brand); }
.fl-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fl-tx { min-width: 0; }
.fl-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--t2); }
.fl-desc { display: block; font-size: 11.5px; color: var(--t4); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-meta {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid rgba(29, 34, 41, .06);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: 12px; color: var(--t3);
}
.foot-meta i { font-style: normal; color: var(--t4); }
.foot-meta a { color: var(--t3); text-decoration: none; transition: color .15s; }
.foot-meta a:hover { color: var(--brand); }

/* ============================ 工具专属布局 ============================ */
/* 方案对比 */
.scheme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (min-width: 1140px) { .scheme-grid { grid-template-columns: repeat(3, 1fr); } }
.scheme-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.scheme-name {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  font-size: 14.5px; font-weight: 650; color: var(--t1); padding: 4px 0; outline: none;
  font-family: inherit; transition: border-color .15s;
}
.scheme-name:focus { border-bottom-color: var(--brand); }
.scheme-name::placeholder { color: #B7BFC7; }
.mb-seg { margin-bottom: var(--sp-1); }
.mt-seg { margin-top: var(--sp-3); }

/* 利率行情：左列四张 KPI 与右列（LPR 主卡 + 内容流广告位）底部严格齐平。
   两列都是纵列容器，行高由内容较高的一侧决定，另一侧等分补足 ——
   广告位不管 56 / 96 / 250 高，整块都不会出现「左边短一截」的空档。 */
.rate-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; }
.rate-side { display: flex; flex-direction: column; gap: var(--sp-3); }
/* 四张卡等分剩余高度并竖向居中：卡变高时数字居中被均匀摊开，而不是全挤在顶上 */
.rate-side > .kpi { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* 右列：主卡可长不可缩（图表 190px 高度是硬指标），广告位贴底、不吃高度 */
.rate-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.rate-main > .rate-hero-card { flex: 1 0 auto; }
.rate-main > .ad-slot { margin: 0; flex: 0 0 auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
/* 方案对比：方案横评 + 总利息对比 两列并排 */
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
/* 卡片作为栅格子项时，禁止叠加 `.card + .card` 的 16px 上边距；栅格用 gap 控间距，
   否则第 2+ 张卡被下推 16px、首张被拉高，表现为「方案 A 长一点」 */
.scheme-grid > .card + .card,
.grid-2 > .card + .card,
.compare-cols > .card + .card { margin-top: 0; }
/* ≤960 收为单列：DOM 中左列在前，用 order 让主卡+广告位回到上方保持阅读顺序 */
@media (max-width: 960px) {
  .rate-top { grid-template-columns: 1fr; }
  .rate-main { order: -1; }
  /* 单列没有「两列齐平」这件事，卡片回到自然高度 */
  .rate-side > .kpi { flex: 0 0 auto; }
  .rate-main > .rate-hero-card { flex: 0 0 auto; }
}
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } .compare-cols { grid-template-columns: 1fr; } }

/* 个税 · 专项附加扣除 */
.ded-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid #F2F4F6; }
.ded-row:last-of-type { border-bottom: none; }
.ded-name { font-size: 13px; color: var(--t1); display: flex; flex-direction: column; gap: 1px; }
.ded-tip { font-size: 11px; color: var(--t3); }
.ded-select {
  height: 34px; min-width: 160px; border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  background: var(--surface-2); font-size: 12.5px; color: var(--t1); padding: 0 var(--sp-3); outline: none;
  font-family: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ded-select:hover { border-color: #CDD4DA; }
.ded-select:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(235, 85, 50, .12); }
.ded-amt { font-size: 12px; color: var(--t3); }
.ded-amt-btn {
  height: 30px; padding: 0 var(--sp-3); border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; font-size: 12px; color: var(--t2); font-weight: 500; white-space: nowrap;
  transition: all .15s var(--ease);
}
.ded-amt-btn:hover { border-color: #C6CDD4; color: var(--t1); }
.ded-amt-btn.on { background: rgba(235, 85, 50, .08); border-color: rgba(235, 85, 50, .4); color: var(--brand); font-weight: 600; }

/* 视图进入动画 */
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view.view-anim { animation: viewIn .26s var(--ease); }

/* 键盘可达性：焦点环 */
.btn:focus-visible, .nav-item:focus-visible, .icon-btn:focus-visible,
.chip:focus-visible, .seg-item:focus-visible, .switch:focus-visible,
.tool-card:focus-visible, .scheme-name:focus-visible, .ded-amt-btn:focus-visible {
  outline: 2px solid rgba(235, 85, 50, .55); outline-offset: 2px;
}

/* 遮罩（移动端） */
.scrim {
  position: fixed; inset: 0; background: rgba(20, 24, 29, .45); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.scrim.on { opacity: 1; pointer-events: auto; }

/* ============================ 响应式 ============================ */
@media (max-width: 1320px) {
  .tool-grid { grid-template-columns: repeat(4, 1fr); }
  .hero { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero-panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5);
    align-items: center;
  }
  .hero-panel .hp-head { grid-column: 1 / -1; }
  .hero-panel .hp-grid { grid-column: 1 / -1; margin-top: 0; }
  /* 单列堆叠时左栏不再被拉伸，auto 会归零 → 回落到 40px 固定间距 */
  .hero-tags { margin-top: var(--sp-8); margin-bottom: 0; }
  /* 25px 下移只用于桌面两栏，堆叠布局复位 */
  .hero-l { padding-top: 0; }
}
@media (max-width: 1140px) {
  /* minmax(0,1fr)：单列时允许轨道收缩到内容 min-content 以下，否则滑块/表格等宽内容会把整列顶宽导致横向溢出 */
  .layout, .layout.wide { grid-template-columns: minmax(0, 1fr); }
  .col-form { position: static; }
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 252px; }
  .sidebar { transform: translateX(-100%); transition: transform .24s var(--ease); box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .menu-btn {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--line); background: #fff; color: var(--t2);
  }
  .topbar { padding: 0 var(--sp-4); }
  .view { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  .foot { padding: var(--sp-4); }
  .hero { padding: var(--sp-6) var(--sp-5); border-radius: 18px; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .feats { grid-template-columns: 1fr; }
  .pill.hide-sm { display: none; }
}
@media (max-width: 720px) {
  /* 窄屏：主数值独占一行（原位左对齐），三格统计居中排布 */
  .rh-band { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
  .rh-main { grid-column: 1; }
  .rh-stats { grid-column: 1; justify-self: stretch; top: 0; }
}
@media (max-width: 560px) {
  .input-box { width: 128px; }
  .page-head h1 { font-size: 21px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .hero-panel { grid-template-columns: 1fr; }
  .hp-grid { grid-template-columns: repeat(2, 1fr); }   /* 手机窄屏：四列会挤爆标签，回落 2×2 */
  .field { flex-wrap: wrap; }
  .seg-item { padding: 7px 3px; font-size: 12px; }
  /* 顶栏加了「重置」后按钮占满整行：面包屑让位（页头 h1 已给同样信息），间隙收一档 */
  .tb-crumb { display: none; }
  .tb-right { gap: var(--sp-2); }
}

/* ============================ 打印 ============================ */
@media print {
  .sidebar, .topbar, .foot, .btn-row, .page-head .head-act, .toast-wrap { display: none !important; }
  .main { margin: 0; }
  .view { padding: 0; }
  body { background: #fff; }
  .card, .result-hero { break-inside: avoid; box-shadow: none; }
  .layout { grid-template-columns: 1fr 1fr; }
}

/* ============================ 公告横幅 ============================ */
.announce {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 var(--sp-7); padding: var(--sp-2) var(--sp-4); border-radius: 12px;
  font-size: 13px; line-height: 1.4;
}
.announce[hidden] { display: none; }
.announce-info { background: rgba(27, 202, 160, .1); color: #147a64; }
.announce-warn { background: rgba(248, 160, 28, .12); color: #a96506; }
.announce-ico { flex: none; }
.announce-tx { flex: 1; }

@media (max-width: 900px) { .announce { margin: 0 var(--sp-4); } }

/* ============================ 广告位 ============================ */
/* 容器本身零视觉样式：没填充时完全隐形，不占位、不留白。
   位次只有四种：工具页内容流、工具页矩形（桌面）、页头原生、移动底横幅。 */
.ad-slot { margin: var(--sp-4) 0; }
.ad-slot-rect { max-width: 320px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .ad-slot-rect { display: none; } }   /* 矩形位仅桌面：手机上没有它的位置 */

/* 真实广告：套一层与内容卡片同规格的壳 + 弱化「广告」标识，
   看起来像页面里的一个版块，而不是贴上去的 banner；min-height 抑制加载抖动（CLS）。 */
.ad-slot.ad-on {
  padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--sh-1); min-height: 96px;
}
.ad-slot-rect.ad-on { min-height: 250px; }
/* 矩形位占位按真实尺寸留白：300×250 就该是一个竖方块，而不是一条细线 */
.ad-slot-rect .ad-ph { min-height: 250px; flex-direction: column; gap: 6px; }
.ad-lb { display: block; font-size: 10px; color: var(--t4); letter-spacing: .14em; margin-bottom: 6px; }
.ad-slot-rect .ad-lb { text-align: center; }

/* 占位态：虚线细框 + 居中说明。明示是待接入的广告位，语气比实心灰条安静得多。 */
.ad-ph {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap;
  min-height: 56px; padding: var(--sp-3) var(--sp-4); text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-card);
  background: rgba(29, 34, 41, .012); color: var(--t3); font-size: 12px;
}
.ad-ph-tag {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--t4);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; line-height: 1.5;
}
.ad-ph-tx { color: var(--t2); }
.ad-ph-note { color: var(--t4); font-size: 11px; }
@media (max-width: 620px) { .ad-ph-note { display: none; } }

/* 移动端底部固定横幅 */
.mobile-ad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(28, 39, 52, .12);
  padding: var(--sp-2) 46px calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)) var(--sp-3);
}
.mobile-ad-body { min-height: 50px; display: flex; align-items: center; gap: var(--sp-2); }
/* 底横幅没有多余空间，用竖排「广告」小字做标识：合规可辨、不抢创意的宽度 */
.ad-lb-inline {
  flex: none; writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 9px; letter-spacing: .18em; line-height: 1; color: var(--t4);
}
.mobile-ad-body .ad-ph { flex: 1; min-height: 46px; border-radius: 10px; padding: var(--sp-1) var(--sp-3); }
.mobile-ad-x {
  position: absolute; top: 6px; right: 8px; width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; background: transparent; color: var(--t3); font-size: 19px; line-height: 1; cursor: pointer;
}
@media (min-width: 761px) { .mobile-ad { display: none; } }
/* 固定横幅展示时为页面留出底部空间，避免遮住页脚 */
@media (max-width: 760px) {
  body.has-mobile-ad .view { padding-bottom: 92px; }
  body.has-mobile-ad .foot { padding-bottom: 92px; }
}

/* ============================ 管理后台 ============================ */
.admin-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.admin-tab {
  border: 1px solid var(--line-2, #E2E6EA); background: var(--surface-2, #F7F9FB);
  color: var(--t2, #5A626C); padding: var(--sp-2) var(--sp-3); border-radius: 999px;
  font-size: 13px; cursor: pointer; transition: all .15s var(--ease);
}
.admin-tab.on { background: var(--brand, #EB5532); border-color: var(--brand, #EB5532); color: #fff; }
.admin-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.admin-who { font-size: 12px; color: var(--t3, #8B939E); align-self: center; margin-right: var(--sp-2); }
/* 管理员登录门：居中窄卡，与后台主体明确区隔 */
.au-wrap { max-width: 520px; margin: min(9vh, 72px) auto var(--sp-6); }
.au-lock { font-size: 13px; color: var(--t2, #5A626C); line-height: 1.9; margin: 0; }
.au-lock b { color: var(--t1, #22272F); }
/* SEO 每页覆盖表：「已设置覆盖」小标（无覆盖时不显示） */
.cfg-seopage-ov {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; font-weight: 700; line-height: 16px; color: var(--brand, #EB5532);
  background: #FDEDE7; vertical-align: middle;
}
.admin-body { display: flex; flex-direction: column; gap: var(--sp-4); }
/* 后台表单：文本类控件默认 150px 太窄，长标题/版权/联系方式/隐私文案会被裁切。
   文本类放宽到 480px（可缩），右侧仍与开关行对齐；数值类与城市利率网格保持紧凑 */
.admin-body .input-box.cfg-wide { flex: 1 1 480px; min-width: 0; }   /* 非 :has 浏览器兜底：输入框本身加宽 */
.admin-body .field-ctl:has(> .input-box.cfg-wide) { flex: 0 1 480px; min-width: 0; }
.admin-body .field-ctl:has(> .input-box.cfg-wide) > .input-box { flex: 1 1 auto; width: auto; min-width: 0; }
.cfg-sub { font-size: 12px; color: var(--t3, #8B939E); margin: var(--sp-3) 0 var(--sp-1); font-weight: 600; }
.cfg-cities { display: flex; flex-direction: column; gap: var(--sp-3); }
.cfg-cityrow {
  display: grid; grid-template-columns: 70px 1fr 1fr 1fr; gap: var(--sp-3); align-items: end;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line, #EEF1F3);
}
.cfg-cityrow .field { margin: 0; }
.cfg-cityrow .field-label { font-size: 11px; }
.cfg-cityname { font-size: 13px; font-weight: 600; color: var(--t1, #22272F); }
.cfg-toollist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.cfg-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.cfg-linkrow {
  padding: var(--sp-3); border: 1px solid var(--line, #EEF1F3);
  border-radius: 12px; background: var(--surface-2, #F7F9FB);
}
.cfg-linkrow-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cfg-link-idx {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--brand); background: #FDEDE7;
}
.cfg-linkrow-h .icon-btn { margin-left: auto; width: 26px; height: 26px; }
.cfg-linkrow .field { display: block; min-height: 0; }
.cfg-linkrow .field-label { display: block; font-size: 11px; margin-bottom: 2px; }
.cfg-linkrow .field-ctl { display: block; }
.cfg-linkrow .input-box { width: 100%; }
.cfg-linkrow .field + .field { margin-top: var(--sp-2); }
/* 友情链接 · LOGO：缩略图 + 地址输入 + 上传/移除（纯前端压缩后存 dataURL） */
.logo-field { display: flex; align-items: center; gap: var(--sp-2); }
.logo-thumb {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  border: 1px dashed var(--line-2, #E2E6EA); background: var(--surface-2, #F7F9FB);
  display: grid; place-items: center; color: var(--t3); overflow: hidden;
}
.logo-thumb.has { border-style: solid; border-color: var(--line, #EEF1F3); }
.logo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfg-linkrow .logo-field .input-box { flex: 1 1 auto; width: auto; min-width: 0; }
/* 上传/移除按钮给个可见边框，避免只有图标看不出可点 */
.logo-field .icon-btn { border-color: var(--line-2, #E2E6EA); background: var(--surface, #fff); }
.logo-field .icon-btn:hover { border-color: #CDD4DA; background: #fff; color: var(--brand); }
.file-hide { display: none; }
/* 后台 SEO：每页标题 / 描述覆盖表（页面名 + 标题 + 描述 三列） */
.cfg-seopage-h { display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1.9fr); gap: var(--sp-3); font-size: 12px; font-weight: 600; color: var(--t3); padding-bottom: var(--sp-2); }
.cfg-seopages { display: flex; flex-direction: column; }
.cfg-seopage { display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1.9fr); gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-top: 1px dashed var(--line); }
.cfg-seopage-k { font-size: 13px; font-weight: 600; color: var(--t2); line-height: 1.3; }
.cfg-seopage-k span { display: block; font-size: 11px; font-weight: 400; color: var(--t4); }
.cfg-seopage .input-box { width: 100%; }
@media (max-width: 760px) { .cfg-cityrow { grid-template-columns: 56px 1fr 1fr; } .cfg-cityrow .cfg-cityname + .field { display: none; } .cfg-toollist { grid-template-columns: 1fr; } .cfg-seopage-h { display: none; } .cfg-seopage { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* ============================ 留言板 ============================ */
.gb-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.gb-item { padding: var(--sp-3); border: 1px solid var(--line, #EEF1F3); border-radius: 12px; background: var(--surface-2, #F7F9FB); }
.gb-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.gb-top b { font-size: 13.5px; color: var(--t1, #22272F); }
.gb-time { font-size: 11px; color: var(--t3, #8B939E); }
.gb-top .icon-btn { margin-left: auto; width: 26px; height: 26px; }
.gb-text { font-size: 13px; color: var(--t2, #5A626C); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* 表单堆叠布局（帮助中心意见反馈、留言板写留言共用）：标签在上、控件满宽，长文本才好写 */
.form-stack { margin-bottom: var(--sp-4); }
.form-stack .field { display: block; }
.form-stack .field-label { display: block; margin-bottom: var(--sp-2); }
.form-stack .field-ctl { display: block; }
.form-stack .input-box { width: 100%; }
.form-stack .input-box .input { width: 100%; }
/* 堆叠布局里把「类型」下拉改回左对齐，去掉横向表单遗留的右对齐留白观感（保持 flex 撑满宽度） */
.form-stack .select { text-align: left; }
.form-stack .btn-row { margin-top: var(--sp-3); }
.fb-list-h { font-size: 12px; font-weight: 600; color: var(--t3, #8B939E); margin: var(--sp-2) 0; }
.fb-badge { font-size: 11px; font-weight: 600; color: var(--brand); background: rgba(235, 85, 50, .12); background: color-mix(in srgb, var(--brand) 12%, transparent); padding: 1px 7px; border-radius: 999px; }
.lnk { color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(235, 85, 50, .35); border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.lnk:hover { border-bottom-color: var(--brand); }
.fb-contact-tx { font-size: 13px; color: var(--t2, #5A626C); line-height: 1.8; word-break: break-word; }

/* 无 JS 时的 SEO 摘要块（noscript 内，仅不执行 JS 的爬虫 / 用户可见） */
.seo-noscript { max-width: 720px; margin: var(--sp-8) auto; padding: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); font-size: 14px; line-height: 1.9; color: var(--t2); }
.seo-noscript h1 { font-size: 22px; font-weight: 700; color: var(--t1); margin: 0 0 var(--sp-3); }
.seo-noscript p { margin: 0 0 var(--sp-2); }
.seo-noscript a { color: var(--brand); text-decoration: none; }
.seo-noscript a:hover { text-decoration: underline; }

/* 页脚补充信息 */
.foot-extra { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line, #EEF1F3); font-size: 12px; color: var(--t3, #8B939E); }