/* 设计 token —— 与效果图一致的 petrol 主色体系，浅/深双主题 */
:root {
  --page: #f4f6f5; --surface: #fcfdfd; --surface-2: #eef1f0;
  --ink: #131817; --ink-2: #4d5654; --ink-3: #7d8785;
  --line: #dde3e1; --line-soft: #e8edec;
  --accent: #0f6f68; --accent-ink: #0b5751;
  --accent-wash: rgba(15,111,104,0.08); --accent-wash-2: rgba(15,111,104,0.14);
  --good-text: #006300; --good-wash: rgba(12,163,12,0.10);
  --warn-text: #7a5200; --warn-wash: rgba(250,178,25,0.14);
  --serious-text: #9c3c12; --serious-wash: rgba(236,131,90,0.14);
  --crit-text: #a02020; --crit-wash: rgba(208,59,59,0.10);
  --neutral-wash: rgba(19,24,23,0.06);
  --crit: #d03b3b; --serious: #ec835a; --warn: #fab219;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #101413; --surface: #191e1d; --surface-2: #202726;
    --ink: #f2f4f3; --ink-2: #b4bdbb; --ink-3: #7f8987;
    --line: #2b3331; --line-soft: #242b2a;
    --accent: #52c4b8; --accent-ink: #7ad6cc;
    --accent-wash: rgba(82,196,184,0.10); --accent-wash-2: rgba(82,196,184,0.18);
    --good-text: #4fce4f; --good-wash: rgba(12,163,12,0.16);
    --warn-text: #f4c04d; --warn-wash: rgba(250,178,25,0.15);
    --serious-text: #f0a181; --serious-wash: rgba(236,131,90,0.16);
    --crit-text: #ea8080; --crit-wash: rgba(208,59,59,0.18);
    --neutral-wash: rgba(242,244,243,0.08);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--page); color: var(--ink); font-size: 14.5px; line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }

/* ---- sidebar ---- */
.side { border-right: 1px solid var(--line-soft); background: var(--surface); padding: 18px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 16px; }
.brand .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; flex: none; }
.brand b { font-size: 13.5px; }
.brand small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.side .grp { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); padding: 14px 10px 4px; text-transform: uppercase; }
.side .it { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 6px 10px; border-radius: 7px; }
.side .it:hover { background: var(--neutral-wash); }
.side .it.on { background: var(--accent-wash-2); color: var(--accent-ink); font-weight: 600; }
.side .it.disabled { opacity: 0.45; pointer-events: none; }
.side .n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); background: var(--neutral-wash); border-radius: 99px; padding: 0 7px; }
.side .n:empty { display: none; }

/* ---- main ---- */
.main { padding: 24px 30px 48px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.topbar h2 { margin: 0; font-size: 19px; flex: 1; min-width: 200px; }
.crumb { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.btn { font-size: 13px; font-weight: 600; border-radius: 8px; padding: 7px 15px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.subtle { border-color: transparent; background: var(--neutral-wash); }
.btn:disabled { opacity: 0.5; cursor: default; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.bare::before { display: none; }
.chip.good { color: var(--good-text); background: var(--good-wash); }
.chip.warn { color: var(--warn-text); background: var(--warn-wash); }
.chip.serious { color: var(--serious-text); background: var(--serious-wash); }
.chip.crit { color: var(--crit-text); background: var(--crit-wash); }
.chip.neutral { color: var(--ink-2); background: var(--neutral-wash); }
.chip.acc { color: var(--accent-ink); background: var(--accent-wash-2); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; padding: 13px 15px 12px; }
.tile .k { font-size: 11.5px; color: var(--ink-3); }
.tile .v { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 2px 0 3px; }
.tile .v small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tile .d { font-size: 11px; color: var(--ink-2); }
.tile .d.bad { color: var(--crit-text); }
.tile .d.up { color: var(--good-text); }

.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; padding: 16px 18px; margin-bottom: 12px; }
.card h3 { margin: 0 0 2px; font-size: 14px; }
.card .sub { font-size: 11.5px; color: var(--ink-3); margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 12px; align-items: start; }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } }

.tbl-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 0 10px 7px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2); }
table.t td:first-child, table.t th:first-child { padding-left: 2px; }
table.t td.strong { color: var(--ink); font-weight: 600; }
table.t tr:last-child td { border-bottom: 0; }
tr.rowlink { cursor: pointer; }
tr.rowlink:hover td { background: var(--neutral-wash); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 30px; gap: 10px; align-items: center; }
.bar-row .lbl { font-size: 12px; color: var(--ink-2); text-align: right; }
.bar-track { display: flex; gap: 2px; height: 14px; }
.bar-seg { border-radius: 3px; min-width: 3px; }
.bar-seg.critical { background: var(--crit); }
.bar-seg.serious { background: var(--serious); }
.bar-seg.minor { background: var(--warn); }
.bar-row .tot { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11.5px; color: var(--ink-2); flex-wrap: wrap; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2.5px; margin-right: 6px; }

/* stepper */
.stepper { display: flex; overflow-x: auto; padding: 4px 0 8px; }
.step { flex: 1; min-width: 112px; position: relative; padding: 0 8px; }
.step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.step:first-child::before { display: none; }
.step.done::before { background: var(--accent); }
.step .dot { position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--ink-3); border: 2px solid var(--line); }
.step.done .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.pending_review .dot, .step.in_progress .dot { background: var(--surface); border-color: var(--accent); color: var(--accent-ink); }
.step.skipped { opacity: 0.5; }
.step .st { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.step .ss { text-align: center; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

.kv { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; font-size: 12.5px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }

.review-gate { border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-wash); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.review-gate .rh { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.review-gate p { margin: 5px 0 10px; font-size: 12px; color: var(--ink-2); }

/* countdown + timeline */
.count-hero { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 980px) { .count-hero { grid-template-columns: 1fr; } }
.countdown { background: var(--surface); border: 1px solid color-mix(in srgb, var(--serious) 40%, var(--line)); border-radius: 11px; padding: 16px 18px; }
.countdown.expired { border-color: var(--crit); }
.countdown .ck { font-size: 12px; color: var(--ink-2); }
.countdown .cv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 700; line-height: 1.15; margin: 4px 0 8px; }
.countdown .cv small { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--serious); }
.countdown .cm { font-size: 11px; color: var(--ink-3); margin-top: 6px; }

.timeline { position: relative; padding-left: 22px; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.tl-item.done::before { border-color: var(--accent); background: var(--accent); }
.tl-item.pending_review::before { border-color: var(--serious); }
.tl-item .th { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tl-item .tt { font-family: var(--mono); font-size: 11px; color: var(--ink-3); min-width: 44px; }
.tl-item .tn { font-size: 13px; font-weight: 700; }
.tl-item .td { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

/* forms */
form.panel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; }
form.panel label { font-size: 12px; color: var(--ink-2); display: grid; gap: 4px; }
form.panel label.full { grid-column: 1 / -1; }
form.panel input[type=text] { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); color: var(--ink); }
form.panel .checks { display: flex; gap: 18px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
form.panel .actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.hint { font-size: 12px; color: var(--ink-3); }
.toast { position: fixed; bottom: 22px; right: 22px; background: var(--ink); color: var(--page); font-size: 13px; padding: 10px 16px; border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,0.25); opacity: 0; transform: translateY(6px); transition: 0.25s; pointer-events: none; z-index: 99; }
.toast.show { opacity: 1; transform: none; }
.empty { color: var(--ink-3); font-size: 13px; padding: 18px 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .side { position: static; height: auto; } }

/* AI 草案 */
.draft { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px; padding: 11px 13px; margin: 8px 0 12px; }
.draft summary { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.draft-text { font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.7; margin-top: 6px; max-height: 420px; overflow-y: auto; }

/* Markdown 渲染 */
.md { font-size: 13px; color: var(--ink-2); line-height: 1.75; }
.md h3, .md h4, .md h5, .md h6 { color: var(--ink); margin: 14px 0 6px; font-size: 13.5px; }
.md h3 { font-size: 14.5px; border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.md p { margin: 6px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md code { font-family: var(--mono); font-size: 12px; background: var(--neutral-wash); border-radius: 4px; padding: 1px 5px; }
.md pre { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 6px 6px 0; }
.md hr { border: 0; border-top: 1px solid var(--line-soft); margin: 12px 0; }
.md strong { color: var(--ink); }
.md a { color: var(--accent-ink); text-decoration: underline; }
.md table.t { margin: 8px 0; }
.md .tbl-wrap { margin: 8px 0; }