/* ============================================================
 * style.css · Trust Client Report
 * 纯本地样式：无外链字体/图标/CDN；无 CSS 框架
 * 区块：1 变量  2 基础  3 顶栏  4 Hero  5 面板与控件  6 台账表
 *       7 报告与对账单  8 FAQ/页脚  9 响应式  10 深色模式  11 打印
 * ============================================================ */

/* 1 变量 ---------------------------------------------------- */
:root {
  --ink: #14181f;
  --ink-soft: #4a5567;
  --line: #dfe3ec;
  --bg: #f6f7fb;
  --card: #ffffff;
  --brand: #14532d;
  --brand-soft: #e7f0e9;
  --accent: #1c3f8f;
  --ok: #14653a;
  --warn: #9a3412;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .05);
  color-scheme: light dark;
}

/* 2 基础 ---------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;                 /* 兜底：任何子元素溢出都不产生页面级横向滚动 */
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: clamp(24px, 4.4vw, 38px); }
h2 { font-size: clamp(20px, 3vw, 26px); }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }
a { color: var(--accent); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.hint { color: var(--ink-soft); font-size: 15px; }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-word; }
.mono.ex { background: var(--brand-soft); border-radius: 8px; padding: 8px 10px; }
.subHead { margin-top: 22px; }
.footNote { color: var(--ink-soft); font-size: 13px; margin-top: 14px; }
.visuallyHidden, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff;
  padding: 10px 14px; z-index: 20; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
.noscript { max-width: 720px; margin: 40px auto; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

/* 3 顶栏 ---------------------------------------------------- */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark { display: inline-flex; flex: 0 0 auto; }
.brandText { display: flex; flex-direction: column; min-width: 0; }
.brandName { font-weight: 700; }
.brandTag { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.barRight { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pill {
  background: var(--brand-soft); color: var(--brand); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
}
.langSwitch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.langBtn {
  min-height: 44px; min-width: 52px; border: 0; background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; padding: 8px 12px;
}
.langBtn + .langBtn { border-left: 1px solid var(--line); }
.langBtn.on { background: var(--brand); color: #fff; }

/* 4 Hero ---------------------------------------------------- */
.hero { padding: 28px 0 8px; }
.heroH1 { max-width: 22ch; }
.heroLead { max-width: 66ch; color: var(--ink-soft); }
.heroActions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }
.heroHint { color: var(--ink-soft); font-size: 14px; }

/* 5 面板与控件 ---------------------------------------------- */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin: 18px auto;
}
.panel.wrap { max-width: 1100px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.row.tight { gap: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.fileBtn { cursor: pointer; }
.fileHint { color: var(--ink-soft); font-size: 13px; }
:focus-visible { outline: 3px solid #0b63d6; outline-offset: 2px; }
.fieldLabel { display: block; font-weight: 600; margin-bottom: 6px; }
.field label, .dateWrap label, .field .lbl { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
.field { margin-bottom: 14px; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 18px; }
.field.wide { grid-column: 1 / -1; }
input[type=text], input[type=date], select, textarea {
  width: 100%; max-width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: var(--card); color: var(--ink);
}
.editor { min-height: 132px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; }
input[type=date] { min-height: 44px; }
select { min-height: 44px; }
.presetRow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.dateWrap { flex: 1 1 150px; min-width: 0; }
.msg { min-height: 24px; margin: 8px 0; font-size: 15px; }
.msg-ok { color: var(--ok); font-weight: 600; }
.msg-err { color: var(--warn); font-weight: 600; }
.errBox { border: 1px solid #f0c9a8; background: #fff6ef; border-radius: 10px; padding: 12px; margin: 10px 0; }
.errList { margin: 6px 0 0; padding-left: 18px; }
.countLine { font-weight: 600; margin: 14px 0 8px; }
.previewBox { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; }
.previewHead { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.previewList { list-style: none; margin: 0; padding: 0; }
.previewList li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.previewList li:last-child { border-bottom: 0; }
.pvName { min-width: 0; overflow-wrap: anywhere; }
.pvAmt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 6 台账表 -------------------------------------------------- */
.tableScroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.ledgerTable { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; }
.ledgerTable th, .ledgerTable td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.ledgerTable th { background: var(--brand-soft); color: var(--brand); font-size: 13px; }
.ledgerTable td.num, .ledgerTable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledgerTable td.act, .ledgerTable th.act { text-align: center; width: 64px; }
.linkBtn {
  min-height: 44px; min-width: 44px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer; line-height: 1;
}
.maxRows { max-height: 60vh; overflow-y: auto; }

/* 7 报告与对账单 -------------------------------------------- */
.summary, .checks, .stmt { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 14px 0; background: var(--card); }
.sumGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sumCell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sumCell.strong .sumValue { color: var(--brand); font-size: 19px; }
.sumLabel { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.sumValue { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.checkList { list-style: none; margin: 8px 0 0; padding: 0; }
.chk { display: flex; gap: 8px; padding: 4px 0; overflow-wrap: anywhere; }
.chkDot { flex: 0 0 auto; }
.chk-ok .chkDot { color: var(--ok); }
.chk-warn .chkDot { color: var(--warn); }
.chk-info .chkDot { color: var(--ink-soft); }

.stmt { overflow: hidden; }
.stmtHead { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--brand); padding-bottom: 8px; }
.kicker { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--brand); margin: 0; font-weight: 700; }
.stmtClient { margin: 2px 0 0; font-size: 20px; overflow-wrap: anywhere; }
.stmtFor { text-align: right; }
.stmtForValue { display: block; font-weight: 600; overflow-wrap: anywhere; }
.stmtMeta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 12px 0; font-size: 14px; }
.stmtMeta dt { color: var(--ink-soft); }
.stmtMeta dd { margin: 0; overflow-wrap: anywhere; }
.stmtTotals { border-collapse: collapse; width: 100%; max-width: 420px; margin: 0 0 12px; font-size: 14px; }
.stmtTotals th, .stmtTotals td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.stmtTotals td.num, .stmtTotals th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stmtTotals tr.grand th, .stmtTotals tr.grand td { font-weight: 700; border-bottom: 2px solid var(--brand); color: var(--brand); }
.stmtTable { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 14px; }
.stmtTable th, .stmtTable td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.stmtTable thead th { background: var(--brand-soft); color: var(--brand); font-size: 13px; }
.stmtTable td.num, .stmtTable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stmtTable .nowrap { white-space: nowrap; }
.stmtTable tr.carry td { background: #f4f6f4; font-style: italic; }
.txDesc { display: block; overflow-wrap: anywhere; }
.txMatter { display: block; color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }
.txFlag { display: block; color: var(--warn); font-size: 12px; }
.stmtFlags { border-left: 3px solid var(--warn); background: #fff6ef; padding: 8px 12px; margin: 0 0 12px; border-radius: 0 8px 8px 0; }
.stmtFlag { margin: 0; font-size: 14px; }
.stmtFoot { color: var(--ink-soft); font-size: 12px; margin: 10px 0 4px; overflow-wrap: anywhere; }
.stmtDisclaimer { color: var(--ink-soft); font-size: 12px; margin: 0; }
.printMeta { display: none; }

/* 8 FAQ / 页脚 --------------------------------------------- */
.faq h3 { margin-top: 18px; }
.foot { padding: 18px 16px 34px; color: var(--ink-soft); font-size: 14px; }

/* 9 响应式 -------------------------------------------------- */
@media (max-width: 640px) {
  .panel { padding: 16px; margin: 14px auto; border-radius: 10px; }
  .hero { padding: 20px 0 4px; }
  .stmtFor { text-align: left; }
  .stmtMeta { grid-template-columns: 1fr; gap: 0 0; }
  .stmtMeta dt { margin-top: 6px; }
  .btn, .chip, .langBtn { width: auto; }
  .heroActions .btn { flex: 1 1 100%; }
}

/* 10 深色模式 ---------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2f8; --ink-soft: #b9c3d4; --line: #2c3543; --bg: #10141b; --card: #171d27;
    --brand: #7fd6a1; --brand-soft: #1d2a22; --accent: #8fb4ff; --ok: #7fd6a1; --warn: #ffb08a;
  }
  .errBox, .stmtFlags { background: #2a1d16; border-color: #6b3d24; }
  .langBtn.on { color: #0c1220; }
  .btn-primary, .chip.on { color: #0c1220; }
  .stmtTable tr.carry td { background: #1b2430; }
  .mono.ex { background: #1b2430; }
}

/* 11 打印（真 A4 版式：只打印对账单，控件与表单全部隐藏） --- */
@page { size: A4; margin: 14mm 12mm; }

@media print {
  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; }
  a[href]:after { content: ""; }
  .topbar, .hero, #workspace, #settings, .faq, .foot, .noPrint, .noscript,
  #intent-slot, #bac-intent, #bac-intent-style, .msg, .errBox { display: none !important; }
  .panel { border: 0; box-shadow: none; margin: 0; padding: 0; max-width: none; }
  #report { border: 0; }
  #report > h2, #report > .hint { display: none; }
  .printMeta { display: block; font-size: 9pt; color: #000; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 8px; }
  .summary, .checks { border: 1px solid #999; break-inside: avoid; page-break-inside: avoid; }
  .stmt {
    border: 0; border-top: 1px solid #000; border-radius: 0; padding: 0 0 6mm;
    break-inside: auto; page-break-inside: auto;
  }
  .stmt.stmtPage { break-before: page; page-break-before: always; }
  .stmtHead { border-bottom: 1.5pt solid #000; break-after: avoid; page-break-after: avoid; }
  .kicker { color: #000; }
  .stmtTotals { max-width: 100%; break-inside: avoid; page-break-inside: avoid; }
  .stmtTotals tr.grand th, .stmtTotals tr.grand td { color: #000; border-bottom: 1.5pt solid #000; }
  .stmtTable { min-width: 0; font-size: 9.5pt; }
  .stmtTable thead { display: table-header-group; }        /* 跨页时表头重复 */
  .stmtTable thead th { background: #eee !important; color: #000; border-bottom: 1pt solid #000; }
  .stmtTable tr { break-inside: avoid; page-break-inside: avoid; }
  .stmtTable th, .stmtTable td { border-bottom: .5pt solid #999; padding: 3pt 5pt; }
  .stmtTable tr.carry td { background: #f2f2f2 !important; }
  .tableScroll { overflow: visible !important; }
  .txFlag, .stmtFlag { color: #000; }
  .stmtFlags { border-left: 2pt solid #000; background: none; }
  .stmtFlags, .stmtMeta, .stmtFoot, .stmtDisclaimer { break-inside: avoid; page-break-inside: avoid; }
  .stmtDisclaimer { border-top: .5pt solid #999; padding-top: 4pt; }
  .sumValue, .pvAmt { font-variant-numeric: tabular-nums; }
}