/* 算清账 · 全站样式
   改配色只需动下面 :root 里的前六个变量 */

:root{
  /* —— 主色：改这里 —— */
  --brand:#1d4ed8;        /* 主色（蓝）· 房贷 / 主按钮 / 链接 */
  --brand-d:#1e40af;
  --brand-soft:#eef3ff;
  --amber:#c2740a;        /* 辅色（琥珀）· 年终奖 / 强调 */
  --amber-soft:#fdf6e8;
  --green:#0f8a5f;        /* 「更省 / 划算」 */
  --red:#c0392b;          /* 「倒挂 / 风险」 */

  /* 中性色 */
  --bg:#fbfaf8;
  --surface:#ffffff;
  --fg:#1c2024; --fg2:#4b5563; --fg3:#7b838f;
  --line:#e8e6e1; --soft:#f6f5f2;

  --radius:14px;
  --shadow:0 1px 2px rgba(20,25,35,.05), 0 6px 20px rgba(20,25,35,.055);
  --shadow-h:0 2px 4px rgba(20,25,35,.06), 0 12px 28px rgba(20,25,35,.09);
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#7aa2ff; --brand-d:#93b4ff; --brand-soft:#1a2540;
    --amber:#e5a54b; --amber-soft:#2a2113;
    --green:#4ade80; --red:#f87171;
    --bg:#141619; --surface:#1b1e23;
    --fg:#e7e9ec; --fg2:#b4bbc5; --fg3:#8b929d;
    --line:#2a2e35; --soft:#21252b;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --shadow-h:0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.78;
}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.top{
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(8px);
  position:sticky;top:0;z-index:10;
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;flex-wrap:wrap}
.logo{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:18px;color:var(--fg);text-decoration:none;letter-spacing:.02em;
}
.logo::before{
  content:"¥";display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff;font-size:15px;font-weight:700;
}
@media (prefers-color-scheme: dark){ .logo::before{color:#141619} }
.top nav{display:flex;gap:20px;flex-wrap:wrap}
.top nav a{color:var(--fg2);text-decoration:none;font-size:14px;padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--brand);border-bottom-color:var(--brand)}

main{padding:28px 20px 56px}
@media(max-width:640px){
  .top .wrap{height:auto;padding:10px 20px}
  .top nav{gap:14px;font-size:13px}
  main{padding:20px 20px 40px}
}

/* ---------- typography ---------- */
h1{font-size:27px;line-height:1.4;margin:0 0 18px;letter-spacing:-.01em}
h2{
  font-size:20px;line-height:1.5;margin:40px 0 14px;
  padding:0 0 8px 12px;border-bottom:1px solid var(--line);
  position:relative;
}
h2::before{
  content:"";position:absolute;left:0;top:.42em;bottom:.5em;
  width:3px;border-radius:2px;background:var(--brand);
}
h3{font-size:17px;margin:26px 0 10px}
p{margin:14px 0}
ul,ol{padding-left:24px;margin:14px 0}
li{margin:6px 0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--soft);padding:2px 6px;border-radius:5px;font-size:.9em;color:var(--fg)}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
blockquote{
  margin:20px 0;padding:14px 18px;background:var(--brand-soft);
  border-left:3px solid var(--brand);color:var(--fg);border-radius:0 10px 10px 0;
}
blockquote p{margin:0}

/* ---------- table ---------- */
.tw{
  overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:480px}
th,td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
th{
  background:var(--brand-soft);font-weight:600;white-space:nowrap;color:var(--fg);
  border-bottom:1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
td{color:var(--fg2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:color-mix(in srgb, var(--soft) 60%, transparent)}

/* ---------- figure ---------- */
figure{margin:26px 0;text-align:center}
figure img{
  max-width:100%;height:auto;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);padding:6px;
}
figcaption{font-size:13px;color:var(--fg3);margin-top:9px}
article img{max-width:100%;height:auto}

/* ---------- home · hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--brand-soft) 0%, var(--amber-soft) 100%);
  border:1px solid var(--line);border-radius:18px;
  padding:30px 28px;margin:6px 0 4px;
}
.hero h1{font-size:30px;margin-bottom:10px}
.hero p{color:var(--fg2);font-size:16px;margin:0}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;padding:5px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--fg2);
}
.badge::before{content:"✓";color:var(--green);font-weight:700}

/* ---------- home · tools ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:26px 0 6px}
.tool{
  position:relative;overflow:hidden;display:block;
  padding:22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);color:var(--fg);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.tool::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.tool.b::before{background:var(--amber)}
.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-h);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));text-decoration:none}
.tool.b:hover{border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}
.ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff;font-size:19px;font-weight:700;line-height:1;
}
.tool.b .ic{background:linear-gradient(135deg,var(--amber),#e0952a)}
@media (prefers-color-scheme: dark){ .ic{color:#141619} }
.tool h2{font-size:18px;margin:0 0 8px;border:0;padding:0}
.tool h2::before{display:none}
.tool p{font-size:14px;color:var(--fg2);margin:0 0 14px;line-height:1.7}
.go{font-size:14px;color:var(--brand);font-weight:600}
.tool.b .go{color:var(--amber)}

/* ---------- home · article list ---------- */
.sec{font-size:17px;margin-top:44px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:15px}
.card{
  display:block;padding:17px 18px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:12px;color:var(--fg);box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.card.loan{border-left-color:var(--brand)}
.card.bonus{border-left-color:var(--amber)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);text-decoration:none}
.card.loan:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));border-left-color:var(--brand)}
.card.bonus:hover{border-color:color-mix(in srgb,var(--amber) 45%,var(--line));border-left-color:var(--amber)}
.card h3{font-size:15px;margin:0 0 7px;line-height:1.55}
.card p{font-size:13px;color:var(--fg3);margin:0;line-height:1.65}

/* ---------- footer ---------- */
.bot{border-top:1px solid var(--line);background:var(--surface);padding:26px 0 44px;color:var(--fg3);font-size:13px}
.bot p{margin:6px 0}
.bot a{color:var(--fg2)}
.bot a:hover{color:var(--brand)}
.fine{font-size:12px;color:var(--fg3);line-height:1.75}