:root {
    --ink: #1c2430;
    --muted: #5d6672;
    --paper: #f3efe6;
    --card: #fffdf8;
    --line: #e4dccb;
    --brand: #0d6a5b;
    --brand-dark: #102029;
    --accent: #b64a28;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.7;
}
a { color: var(--brand); }
.wrap { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
.site-header { background: var(--brand-dark); color: #f6f1e6; }
.header-bar { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 16px 0; flex-wrap: wrap; }
.logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; }
.logo span { color: #f0b429; }
.nav { display: flex; gap: 14px; flex-wrap: wrap; }
.nav a { color: #f6f1e6; text-decoration: none; }
.nav a:hover { color: #f0b429; }
main { padding: 28px 0 64px; }
h1 { font-size: 34px; line-height: 1.25; margin: 0 0 12px; }
h2 { margin: 28px 0 12px; font-size: 22px; }
.lede, .eyebrow { color: var(--muted); }
.eyebrow { letter-spacing: 0.08em; font-size: 13px; }
.hero { padding-bottom: 8px; }
.panel, .review { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin: 16px 0; }
.search label { display: block; font-weight: 700; margin-bottom: 8px; }
.search-row, .inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input, textarea, select, button {
    font: inherit;
    border-radius: 10px;
    border: 1px solid var(--line);
    padding: 10px 12px;
}
input, textarea, select { width: 100%; background: #fff; }
.inline input, .inline select, .search-row input { width: auto; flex: 1; min-width: 180px; }
button, .button {
    background: var(--brand);
    color: #fff;
    border: 0;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 999px;
}
button.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips a, .chips span { background: #efe7d6; color: var(--ink); text-decoration: none; border-radius: 999px; padding: 6px 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 14px; padding: 14px; text-decoration: none; color: inherit; min-height: 120px; }
.card strong { font-size: 18px; }
.card span { color: var(--muted); }
.steps { padding-left: 20px; }
.note { color: var(--muted); }
.note.warn { color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); padding: 24px 0 40px; font-size: 14px; }
.facts { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; }
.facts dt { color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { border-bottom: 1px solid var(--line); text-align: left; padding: 8px; vertical-align: top; }
.crumb { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats div { background: var(--card); border-radius: 14px; padding: 16px; }
.stats strong { display: block; font-size: 28px; }
.stack { display: grid; gap: 12px; }
.stack label { display: grid; gap: 6px; font-weight: 700; }
.narrow { max-width: 420px; }
.log { list-style: none; padding: 0; }
.log li { background: var(--card); border-radius: 12px; padding: 12px; margin: 8px 0; }
.prose p { margin: 0 0 12px; }
@media (max-width: 720px) {
    h1 { font-size: 28px; }
    .stats, .facts { grid-template-columns: 1fr; }
}