:root {
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --text: #1c1c1e;
  --muted: #6b6b72;
  --faint: #9a9aa1;
  --border: #e5e4df;
  --accent: #0f766e;
  --accent-soft: #e6f4f1;
  --ins-bg: #d9f5e3;
  --ins-fg: #135c32;
  --del-bg: #fde2e1;
  --del-fg: #8a1c1c;
  --tighten: #b42318;
  --tighten-bg: #fef0ee;
  --loosen: #137a3a;
  --loosen-bg: #ecfaf1;
  --neutral: #55555c;
  --neutral-bg: #f0f0ee;
  --mixed: #a15c07;
  --mixed-bg: #fff6e5;
  --warn-bg: #fff6e5;
  --warn-fg: #8a4b00;
  --shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 1px 1px rgba(20, 20, 20, .03);
  --radius: 10px;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --surface: #19191c;
    --surface-2: #1e1e22;
    --text: #ececee;
    --muted: #a0a0a8;
    --faint: #75757d;
    --border: #2c2c31;
    --accent: #4fd1bf;
    --accent-soft: rgba(79, 209, 191, .12);
    --ins-bg: rgba(46, 160, 90, .22);
    --ins-fg: #9be9b5;
    --del-bg: rgba(220, 70, 70, .22);
    --del-fg: #ffb4b0;
    --tighten: #ff8a80;
    --tighten-bg: rgba(255, 99, 88, .13);
    --loosen: #7ee2a0;
    --loosen-bg: rgba(70, 200, 120, .13);
    --neutral: #b8b8c0;
    --neutral-bg: rgba(255, 255, 255, .07);
    --mixed: #f5c26b;
    --mixed-bg: rgba(245, 180, 70, .13);
    --warn-bg: rgba(245, 180, 70, .12);
    --warn-fg: #f5c26b;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.3; margin: 0; }
h2 { font-size: 17px; }
code, .mono { font-family: var(--mono); font-size: .9em; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- 顶栏 ---------- */
.topbar { border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.topbar-inner { display: flex; align-items: center; gap: 16px; height: 54px; }
.brand { font-weight: 700; color: var(--text); letter-spacing: .01em; display: flex; align-items: center; gap: 8px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.brand-sub { color: var(--faint); font-weight: 400; font-size: 13px; }
.topbar nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 14px; }
.topbar nav a { color: var(--muted); }

.job-pill { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--accent); background: var(--accent-soft); padding: 4px 12px; border-radius: 999px; }
.job-pill.on { display: inline-flex; }
.job-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

main.wrap { padding-top: 28px; padding-bottom: 40px; }
.foot { color: var(--faint); font-size: 12.5px; padding-bottom: 32px; }

/* ---------- 通用组件 ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.section-head .hint { color: var(--muted); font-size: 13px; }
.section-head .right { margin-left: auto; font-size: 13px; }

.btn { font: inherit; font-size: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--faint); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { color: #0b1f1c; } }
.btn.small { font-size: 13px; padding: 3px 10px; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 1; padding: 5px 9px; border-radius: 6px; background: var(--neutral-bg); color: var(--neutral); white-space: nowrap; font-weight: 500; }
.badge.tighten { background: var(--tighten-bg); color: var(--tighten); }
.badge.loosen { background: var(--loosen-bg); color: var(--loosen); }
.badge.neutral { background: var(--neutral-bg); color: var(--neutral); }
.badge.mixed { background: var(--mixed-bg); color: var(--mixed); }
.badge.outline { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.sev { display: inline-flex; gap: 2px; margin-left: 2px; }
.sev i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .22; }
.sev i.on { opacity: 1; }
.stat-ins { color: var(--loosen); }
.stat-del { color: var(--tighten); }
.stat-mod { color: var(--mixed); }

.warn { background: var(--warn-bg); color: var(--warn-fg); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; margin: 10px 0 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ---------- 首页头部 ---------- */
.hero { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.hero h1 { font-size: 28px; letter-spacing: -.01em; }
.lede { margin: 8px 0 0; color: var(--muted); max-width: 640px; }
.hero-actions { display: flex; gap: 8px; align-items: center; }

.more { position: relative; }
.more summary { list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px; min-width: 220px; z-index: 5; }
.more-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.more-menu button:hover { background: var(--surface-2); }
.more-menu small { display: block; color: var(--muted); font-size: 12px; }

/* ---------- 状态卡片 ---------- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; }
.status-card { padding: 16px 18px; }
.status-card .head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.status-card .head a { margin-left: auto; font-weight: 400; font-size: 13px; }
.lang { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--loosen); }
.dot.bad { background: var(--tighten); }
.dot.idle { background: var(--faint); }

/* ---------- 一致性 ---------- */
.consistency .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.consistency .summary { margin: 8px 0 0; }
.issues { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
.issues th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.issues td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.issues tr:last-child td { border-bottom: 0; }

/* ---------- 标签页 ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-top: 32px; }
.tabs a { padding: 10px 16px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .count { font-size: 12px; color: var(--faint); margin-left: 4px; }

/* ---------- 时间线 ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 112px 1fr; gap: 18px; position: relative; padding-bottom: 22px; }
.tl-item::before { content: ""; position: absolute; left: 123px; top: 14px; bottom: -6px; width: 1px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-date { text-align: right; padding-top: 2px; }
.tl-date time { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-date span { font-size: 12px; color: var(--faint); }
.tl-body { position: relative; padding-left: 20px; }
.tl-body::before { content: ""; position: absolute; left: -11px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--faint); }
.tl-item.d-tighten .tl-body::before { border-color: var(--tighten); background: var(--tighten); }
.tl-item.d-loosen .tl-body::before { border-color: var(--loosen); background: var(--loosen); }
.tl-item.d-mixed .tl-body::before { border-color: var(--mixed); background: var(--mixed); }
.tl-item.d-neutral .tl-body::before { border-color: var(--neutral); }
.tl-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; font-size: 12.5px; }
.tl-title { display: block; color: var(--text); font-weight: 600; font-size: 15.5px; }
.tl-title:hover { color: var(--accent); }
.tl-title .snippet { font-weight: 400; font-size: 14.5px; }
.tl-note { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.tl-impact { margin: 8px 0 0; padding: 10px 14px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); font-size: 14px; }

/* ---------- 要素演变表 ---------- */
.evo-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.evo { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.evo th, .evo td { padding: 9px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; text-align: left; }
.evo tr:last-child td, .evo tr:last-child th { border-bottom: 0; }
.evo th:last-child, .evo td:last-child { border-right: 0; }
.evo thead th { background: var(--surface-2); font-weight: 600; white-space: nowrap; position: sticky; top: 0; }
.evo thead th a { color: var(--text); }
.evo tbody th { position: sticky; left: 0; background: var(--surface); font-weight: 500; white-space: nowrap; z-index: 1; color: var(--muted); }
.evo tbody th.chg { color: var(--text); }
.evo tbody th.chg::after { content: " •"; color: var(--mixed); }
.evo td { min-width: 190px; max-width: 260px; }
.evo td.chg { background: var(--mixed-bg); box-shadow: inset 3px 0 0 var(--mixed); }
.evo td.na { color: var(--faint); }

/* ---------- 版本页 ---------- */
.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.v-head h1 { font-size: 24px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.meta b { color: var(--text); font-weight: 500; }
.v-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 14px; }

.ai-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-head .right { margin-left: auto; }
.ai-summary { font-size: 18px; font-weight: 600; margin: 14px 0 4px; line-height: 1.5; }
.changes { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.changes th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.changes td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.changes tr:last-child td { border-bottom: 0; }
.changes .aspect { font-weight: 600; white-space: nowrap; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.ai-grid > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.ai-grid h3 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.ai-grid p { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-foot { margin-top: 14px; color: var(--faint); font-size: 12.5px; }

/* ---------- 差异视图 ---------- */
.diff-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13.5px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg label { padding: 4px 12px; cursor: pointer; color: var(--muted); }
.seg input { display: none; }
.seg input:checked + span { color: var(--text); font-weight: 600; }
.seg label:has(input:checked) { background: var(--surface-2); }
.check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--muted); }

.diff { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.diff-cols { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); font-weight: 600; }
.diff-cols div { padding: 7px 14px; }
.diff-cols div + div { border-left: 1px solid var(--border); }
.row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.cell { padding: 9px 14px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.cell.new { border-left: 1px solid var(--border); }
.cell.inline { display: none; }
.cell:empty { background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--surface-2) 6px 12px); }
.op-insert .cell.new, .op-insert .cell.inline { background: var(--ins-bg); color: var(--ins-fg); }
.op-delete .cell.old, .op-delete .cell.inline { background: var(--del-bg); color: var(--del-fg); }
.op-replace .cell { background: var(--surface-2); }
.op-equal .cell { color: var(--muted); }
del { background: var(--del-bg); color: var(--del-fg); text-decoration: line-through; text-decoration-thickness: 1px; border-radius: 3px; padding: 0 1px; }
ins { background: var(--ins-bg); color: var(--ins-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 3px; padding: 0 1px; }
.op-insert ins, .op-delete del { background: none; padding: 0; }
.op-delete .cell.inline del { text-decoration: line-through; }
.k-h1 .cell, .k-h2 .cell { font-weight: 700; font-size: 15.5px; }
.k-h3 .cell, .k-h4 .cell { font-weight: 600; }
.k-li .cell { padding-left: calc(30px + var(--d, 0) * 18px); position: relative; }
.k-li .cell:not(:empty)::before { content: "•"; position: absolute; left: calc(16px + var(--d, 0) * 18px); color: var(--faint); }
.fold { display: none; padding: 6px 14px; font-size: 12.5px; color: var(--faint); background: var(--surface-2); border-bottom: 1px solid var(--border); text-align: center; }
.only-changes .row.far { display: none; }
.only-changes .fold { display: block; }

.view-inline .diff-cols { display: none; }
.view-inline .row { grid-template-columns: 1fr; }
.view-inline .cell.old, .view-inline .cell.new { display: none; }
.view-inline .cell.inline { display: block; }

.no-diff { color: var(--muted); padding: 14px; text-align: center; }

/* ---------- 中文译文 ---------- */
.tr { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--accent); font-size: 14px; font-weight: 400; line-height: 1.7; }
.tr-label { display: inline-block; font-size: 11.5px; color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-right: 6px; line-height: 1.5; }
.tr-title { margin: 6px 0 0; font-size: 18px; font-weight: 600; color: var(--muted); }
.tr-inline { color: var(--muted); }
.tr-toggle[hidden] { display: none; }
.hide-tr .tr, .hide-tr .tr-title, .hide-tr .tr-inline { display: none; }

/* ---------- 要素对照、全文 ---------- */
.cardcmp { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cardcmp th, .cardcmp td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cardcmp thead th { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.cardcmp tbody th { white-space: nowrap; font-weight: 500; color: var(--muted); width: 1%; }
.cardcmp tr.chg td.cur { background: var(--mixed-bg); box-shadow: inset 3px 0 0 var(--mixed); }
.cardcmp tr.chg th { color: var(--text); }
.cardcmp tr:last-child th, .cardcmp tr:last-child td { border-bottom: 0; }

details.fulltext summary { cursor: pointer; font-weight: 600; }
.doc { margin-top: 14px; max-width: 760px; }
.doc .h1, .doc .h2 { font-weight: 700; font-size: 16px; margin: 18px 0 6px; }
.doc .h3, .doc .h4 { font-weight: 600; margin: 14px 0 4px; }
.doc .p { margin: 0 0 10px; }
.doc .li { margin: 0 0 6px calc(18px + var(--d, 0) * 18px); display: list-item; }

/* ---------- 设置页 ---------- */
.settings { max-width: 720px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field input { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.field input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field-check { margin-bottom: 18px; font-size: 14px; color: var(--text); flex-wrap: wrap; }
.help { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.chip { font: inherit; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.ghost { background: none; color: var(--muted); }
.btn:disabled { opacity: .6; cursor: wait; }
.test-result { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; overflow-wrap: anywhere; }
.test-result.ok { background: var(--loosen-bg); color: var(--loosen); }
.test-result.bad { background: var(--tighten-bg); color: var(--tighten); }

.compare-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
select { font: inherit; font-size: 13.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); max-width: 100%; }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 10px; font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; z-index: 50; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.err { background: var(--tighten); color: #fff; }

@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .brand-sub { display: none; }
  .hero h1 { font-size: 23px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; padding-left: 20px; }
  .tl-item::before { left: 5px; top: 12px; }
  .tl-date { text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .tl-body { padding-left: 0; }
  .tl-body::before { display: none; }
  .tl-date::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--faint); }
  .tl-item.d-tighten .tl-date::before { border-color: var(--tighten); background: var(--tighten); }
  .tl-item.d-loosen .tl-date::before { border-color: var(--loosen); background: var(--loosen); }
  .tl-item.d-mixed .tl-date::before { border-color: var(--mixed); background: var(--mixed); }
  .view-split .row, .diff-cols { grid-template-columns: 1fr; }
  .diff-cols div + div { display: none; }
  .cell.new { border-left: 0; border-top: 1px dashed var(--border); }
  .cell:empty { display: none; }
  .op-equal .cell.old { display: none; }
  .op-equal .cell.new { border-top: 0; }
  .changes thead { display: none; }
  .changes tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .changes td { display: block; border: 0; padding: 3px 0; }
  .issues thead { display: none; }
  .issues tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .issues td { display: block; border: 0; padding: 3px 0; }
}