/* 算得清 · 公共样式 */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color:#1f2937; background:#f5f7fa; line-height:1.6; }
a { color:#2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1140px; margin:0 auto; padding:0 20px; }

/* ===== 顶栏 + 搜索 ===== */
.topbar { background:#0f2a5e; color:#fff; position:sticky; top:0; z-index:50; }
.topbar .container { display:flex; align-items:center; gap:20px; height:56px; }
.logo { font-size:20px; font-weight:700; color:#fff; letter-spacing:1px; white-space:nowrap; }
.logo em { font-style:normal; color:#fbbf24; }
.nav { display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar { display:none; }
.nav a { color:#dbeafe; padding:6px 12px; border-radius:6px; font-size:14px; white-space:nowrap; }
.nav a:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.nav a.active { background:rgba(255,255,255,.18); color:#fff; font-weight:600; }
.searchbox { position:relative; width:220px; flex-shrink:0; }
.searchbox input { width:100%; padding:7px 12px 7px 30px; border-radius:8px; border:none; outline:none; font-size:13px; background:rgba(255,255,255,.14); color:#fff; }
.searchbox input::placeholder { color:#93b4f5; }
.searchbox input:focus { background:#fff; color:#1f2937; }
.searchbox .icon { position:absolute; left:9px; top:7px; font-size:14px; opacity:.7; pointer-events:none; }
.search-drop { position:absolute; top:42px; left:0; right:0; background:#fff; border-radius:10px; box-shadow:0 8px 28px rgba(15,42,94,.25); overflow:hidden; display:none; }
.search-drop.open { display:block; }
.search-drop a { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:9px 14px; color:#1f2937; border-bottom:1px solid #f3f4f6; }
.search-drop a:last-child { border:none; }
.search-drop a:hover { background:#eff6ff; text-decoration:none; }
.search-drop a b { font-size:13.5px; font-weight:600; }
.search-drop a span { font-size:11.5px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-drop .none { padding:12px 14px; font-size:13px; color:#9ca3af; }

/* ===== 面包屑 / 标题 ===== */
.breadcrumb { font-size:13px; color:#6b7280; padding:16px 0 0; }
h1 { font-size:26px; margin:8px 0 4px; }
.subtitle { font-size:14px; color:#6b7280; margin-bottom:18px; }

/* ===== 双栏：主内容 + 局部侧栏 ===== */
.with-side { display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:18px; align-items:start; }
.side-col { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; position:sticky; top:72px; }
.side-col h3 { font-size:14px; margin-bottom:10px; color:#0f2a5e; }
.side-col a.side-link { display:block; padding:8px 10px; border-radius:8px; color:#374151; font-size:13.5px; margin-bottom:2px; }
.side-col a.side-link:hover { background:#eff6ff; text-decoration:none; }
.side-col a.side-link b { font-weight:600; display:block; }
.side-col a.side-link span { font-size:11.5px; color:#9ca3af; }
.side-col .side-hot { background:linear-gradient(135deg,#7c2d12,#ea580c); color:#fff; border-radius:10px; padding:12px 14px; margin-top:12px; display:block; }
.side-col .side-hot b { display:block; font-size:13.5px; }
.side-col .side-hot span { font-size:11.5px; opacity:.9; }
.side-col .side-hot:hover { text-decoration:none; filter:brightness(1.05); }

/* ===== 表单 ===== */
.panel { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; color:#374151; margin-bottom:5px; font-weight:600; }
.field .hint { font-size:12px; color:#9ca3af; font-weight:400; }
.input-row { display:flex; align-items:center; border:1px solid #d1d5db; border-radius:8px; overflow:hidden; }
.input-row:focus-within { border-color:#2563eb; }
.input-row input, .input-row select { flex:1; border:none; outline:none; padding:9px 12px; font-size:15px; min-width:0; background:#fff; }
.input-row .unit { padding:0 12px; color:#6b7280; font-size:13px; border-left:1px solid #e5e7eb; background:#f9fafb; align-self:stretch; display:flex; align-items:center; white-space:nowrap; }
.seg { display:flex; background:#f3f4f6; border-radius:8px; padding:3px; }
.seg button { flex:1; border:none; background:transparent; padding:7px 4px; font-size:13px; border-radius:6px; cursor:pointer; color:#374151; white-space:nowrap; }
.seg button.on { background:#fff; color:#0f2a5e; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.rate-live { font-size:12px; color:#16a34a; margin-top:5px; }

/* ===== 结果卡 ===== */
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.result-grid.single { grid-template-columns:1fr; }
.result-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; }
.result-card.win { border-color:#86efac; background:#f0fdf4; }
.result-card h3 { font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.result-card .pill { font-size:11px; background:#eff6ff; color:#1e40af; padding:1px 8px; border-radius:99px; }
.result-card .pill.warn { background:#fef3c7; color:#b45309; }
.kpi { margin-top:12px; }
.kpi .label { font-size:12px; color:#6b7280; }
.kpi .val { font-size:24px; font-weight:700; color:#0f2a5e; }
.kpi .val small { font-size:13px; font-weight:400; color:#6b7280; }
.rows { margin-top:12px; border-top:1px dashed #e5e7eb; padding-top:10px; }
.rows .r { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; gap:10px; }
.rows .r span:first-child { color:#6b7280; }
.rows .r b { font-weight:600; color:#111827; text-align:right; }
.save-line { margin-top:14px; font-size:13px; background:#eff6ff; color:#1e40af; border-radius:8px; padding:8px 12px; }
.save-line.green { background:#dcfce7; color:#14532d; }
.btn-row { display:flex; gap:10px; margin-top:6px; }
.btn { flex:1; border:none; border-radius:8px; padding:12px; font-size:15px; font-weight:700; cursor:pointer; }
.btn-primary { background:#1e40af; color:#fff; }
.btn-primary:hover { background:#1c3d9e; }
.btn-ghost { background:#f3f4f6; color:#374151; }
.btn-sm { padding:7px 12px; font-size:12.5px; flex:none; }
.policy-tip { margin-top:12px; font-size:12px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:8px; padding:8px 12px; }
.policy-tip a { color:#c2410c; font-weight:600; }

/* ===== 明细表 ===== */
.detail { margin-top:16px; }
.detail h3 { font-size:15px; margin-bottom:8px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
th, td { border:1px solid #e5e7eb; padding:7px 10px; text-align:right; white-space:nowrap; }
th { background:#f9fafb; font-weight:600; }
th:first-child, td:first-child { text-align:left; }
tr.hi td { background:#f0fdf4; }
.detail .toggle { margin-top:8px; text-align:center; }

/* ===== 内容区（四段式） ===== */
.doc { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:28px 32px; margin-top:22px; }
.doc h2 { font-size:19px; margin:18px 0 8px; padding-top:14px; border-top:1px solid #f3f4f6; }
.doc h2:first-child { margin-top:0; padding-top:0; border:none; }
.doc h3 { font-size:15px; margin:14px 0 6px; }
.doc p, .doc li { font-size:14px; color:#374151; }
.doc p { margin-bottom:8px; }
.doc ol, .doc ul { padding-left:22px; margin:6px 0 10px; }
.doc li { margin-bottom:4px; }
.formula { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:10px 16px; font-family:"Cascadia Mono",Consolas,monospace; font-size:13.5px; margin:8px 0; overflow-x:auto; }
.notice { font-size:12px; color:#9ca3af; margin-top:14px; }
.faq details { border:1px solid #e5e7eb; border-radius:8px; padding:10px 14px; margin-bottom:8px; background:#fafbfc; }
.faq summary { font-size:14px; font-weight:600; cursor:pointer; color:#111827; }
.faq details p { font-size:13.5px; margin-top:6px; }

/* ===== 首页/分类页组件 ===== */
.section { padding:36px 0 8px; }
.section-head { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.section-head h2 { font-size:20px; }
.section-head .more { font-size:13px; margin-left:auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px 18px 14px; display:block; color:inherit; transition:box-shadow .15s, transform .15s; min-width:0; }
.card:hover { box-shadow:0 6px 20px rgba(15,42,94,.09); transform:translateY(-2px); text-decoration:none; }
.card .icon { font-size:26px; }
.card h3 { font-size:16px; margin:8px 0 4px; }
.card p { font-size:13px; color:#6b7280; }
.card .tag { display:inline-block; font-size:11px; background:#eff6ff; color:#2563eb; border-radius:4px; padding:1px 7px; margin:8px 4px 0 0; }
.card .tag.hot { background:#fff7ed; color:#c2410c; }
.card.primary { grid-column:span 2; background:linear-gradient(135deg,#0f2a5e,#1e40af); color:#fff; border:none; }
.card.primary p { color:#bfdbfe; }
.card.primary .tag { background:rgba(255,255,255,.16); color:#fff; }
.card.soon { opacity:.55; }
.card.soon:hover { transform:none; box-shadow:none; }
.group-head { font-size:15px; font-weight:700; color:#0f2a5e; margin:26px 0 10px; display:flex; align-items:center; gap:8px; }
.group-head::before { content:''; width:4px; height:16px; background:#1e40af; border-radius:2px; }
.rate-strip { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px 22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.rate-item .label { font-size:12px; color:#6b7280; }
.rate-item .val { font-size:22px; font-weight:700; color:#0f2a5e; }
.rate-item .date { font-size:11px; color:#9ca3af; }
.rate-strip-note { font-size:12px; color:#9ca3af; margin-top:10px; }
.content-block { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:26px 30px; margin:14px 0 30px; }
.content-block h2 { font-size:18px; margin-bottom:10px; }
.content-block h3 { font-size:15px; margin:16px 0 6px; }
.content-block p { font-size:14px; color:#374151; margin-bottom:10px; }

/* ===== 专题页 ===== */
.policy-card { background:linear-gradient(135deg,#7c2d12,#ea580c); color:#fff; border-radius:12px; padding:22px 26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:18px; }
.policy-card .item { border-left:2px solid rgba(255,255,255,.4); padding-left:14px; min-width:0; }
.policy-card .k { font-size:12px; opacity:.85; }
.policy-card .v { font-size:17px; font-weight:700; }
.policy-card .v small { font-size:12px; font-weight:400; }
.policy-note { font-size:12px; opacity:.85; margin-top:12px; grid-column:1/-1; }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.compare .col { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; }
.compare .col.after { border-color:#fdba74; background:#fff7ed; }
.compare h3 { font-size:14px; color:#6b7280; font-weight:600; }
.compare .rate { font-size:13px; margin:2px 0 10px; }
.compare .rate b { color:#c2410c; font-size:18px; }
.save-banner { background:#dcfce7; border:1px solid #86efac; color:#14532d; border-radius:12px; padding:16px 20px; font-size:14px; }
.save-banner b.big { font-size:26px; }
.disclaimer { font-size:12px; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px 14px; margin-top:16px; }

/* ===== 页脚 ===== */
footer.site-footer { background:#0f2a5e; color:#93b4f5; padding:26px 0 34px; font-size:13px; margin-top:36px; }
footer.site-footer .container { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
footer.site-footer a { color:#c6dbff; margin-right:14px; }
footer.site-footer .links b { color:#fff; display:block; margin-bottom:8px; font-size:13px; }
footer.site-footer .copy { width:100%; border-top:1px solid rgba(255,255,255,.15); margin-top:18px; padding-top:14px; color:#6b8cd9; }

/* ===== 响应式 ===== */
@media (max-width:1100px) {
  .with-side { grid-template-columns:minmax(0,1fr); }
  .side-col { position:static; }
  .searchbox { width:150px; }
}
@media (max-width:900px) {
  .calc-wrap { grid-template-columns:minmax(0,1fr) !important; }
  .result-grid, .compare { grid-template-columns:minmax(0,1fr); }
  .calc-wrap > *, .result-grid > *, .compare > * { min-width:0; }
}
@media (max-width:640px) {
  .card.primary { grid-column:span 1; }
  .searchbox { display:none; }
  .logo { font-size:18px; }
  .topbar .container { gap:12px; }
  .doc { padding:20px 18px; }
}
