:root {
  --brand: #15803d;
  --brand-dark: #14532d;
  --ink: #1f2937;
  --ink-soft: #475569;
  --line: #e5e7eb;
  --bg: #f8fafc;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 64px; }
.topbar {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  padding: 22px 20px;
}
.topbar .inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar .logo { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 16px; }
h1 { font-size: 24px; margin: 8px 0 6px; }
.meta { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
h2 { font-size: 17px; margin: 26px 0 8px; color: var(--brand-dark); }
p, li { font-size: 15px; color: var(--ink-soft); }
ul { padding-left: 22px; }
strong { color: var(--ink); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.note { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 14px 16px; font-size: 14px; color: #166534; margin: 18px 0; }
footer { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: #64748b; }
footer a { color: #64748b; }
@media (max-width: 480px) {
  .wrap { padding: 20px 16px 48px; }
  h1 { font-size: 21px; }
  p, li { font-size: 14.5px; }
}