/* ==========================================================================
   标本 04 — 数据表格 / 会计分类账
   体裁:账簿排版。预印表格用账簿绿,分录用墨色,更正的批注用朱红。
   字面:Consolas(金额与数字,等宽对位)、Constantia + Noto Serif CJK SC
   (条目与摘要)、Bahnschrift + Noto Sans CJK SC(表头与页脚签条)。
   外形:金额右对齐并按小数点对位;表线只在分组处出现;小计单线、合计双线。
   外壳不注入;本文件只负责本标本内部。
   ========================================================================== */

html, /* 落地色随版本走:固定成修正版的地面色,会在病原版下方露出不属于它的色带 */
html[data-mode="slop"] { background: #f5f4fb; }
body { margin: 0; }

html { background: #3a3d37; }   /* 落地色画在最外层,否则 iframe 露白底 */

.spn {
  margin: 0;
  --paper: #e8e3d3;
  --ink: #1c1a16;
  --form: #2b6349;          /* 账簿绿:预印表格线、表头、未结值 */
  --red: #9d2a1c;           /* 朱红:只用于更正批注 */
  --desk: #3a3d37;
  font-family: 'Constantia', 'Noto Serif CJK SC', 'Noto Serif SC', 'SimSun', serif;
  color: var(--ink);
  background: #f5f4fb;
  -webkit-font-smoothing: antialiased;
}

/* 模式切换:两版都在 DOM 里,靠属性显隐 */
[data-mode="slop"]  .v-fixed { display: none; }
[data-mode="fixed"] .v-slop  { display: none; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--ink, #1c1a16); outline-offset: 2px; }

.spn button { font: inherit; }

/* ==========================================================================
   病原 —— AI 味版本
   表格被做成一叠「卡片行」:每行自带圆角、白底、软阴影,行间留缝,纵向列
   关系被切断。数字一律左对齐(proportional-nums),小数点乱跳;浅灰斑马纹
   把表格变成条纹布;合计行与数据行同色同重。
   ========================================================================== */

.v-slop {
  padding: 3rem 2rem;
  background: #f5f4fb;
  font-family: 'Segoe UI', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  color: #241f38;
}

.s-wrap { max-width: 52rem; }

.s-eyebrow {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: linear-gradient(92deg, #7c5cf0 0%, #2f74c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-h {
  margin: 0 0 .45rem;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.s-sub {
  margin: 0 0 1.2rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: #6f6a85;
}

.s-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.s-pill {
  padding: .32rem .8rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: #5b5480;
  background: #f0eef8;
  box-shadow: inset 0 0 0 1px #e4e0f4;
}
.s-pill--on {
  color: #fff;
  background: linear-gradient(96deg, #7c5cf0 0%, #2f74c8 100%);
  box-shadow: 0 8px 18px -12px rgba(90, 80, 220, .8);
}

/* 卡片行:每行一块白底圆角,行间留缝 —— 列关系被切断 */
.s-t {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .42rem;
  font-size: .8125rem;
}
.s-t th {
  padding: 0 .8rem .3rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  color: #6b6588;
}
.s-t td {
  padding: .6rem .8rem;
  background: #fff;
  border-top: 1px solid #eeecfa;
  border-bottom: 1px solid #eeecfa;
  box-shadow: 0 14px 20px -22px rgba(84, 64, 180, .6);
}
.s-t tbody tr:nth-child(even) td { background: #faf9ff; }   /* 斑马纹 */
.s-t tbody tr td:first-child {
  border-left: 1px solid #eeecfa;
  border-radius: .85rem 0 0 .85rem;
}
.s-t tbody tr td:last-child {
  border-right: 1px solid #eeecfa;
  border-radius: 0 .85rem .85rem 0;
}
.s-t tbody tr:hover td { background: #f4f2ff; }

/* 数字左对齐 + 比例数字:小数点在行间乱跳 */
.s-amt {
  text-align: left;
  font-variant-numeric: proportional-nums;
  letter-spacing: .01em;
}

/* 合计行与数据行同色同重:看不出哪一行是结论 */
.s-total td {
  background: #fff;
  font-weight: 400;
  color: #241f38;
}

.s-tag {
  display: inline-block;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  color: #5b5480;
  background: #f0eef8;
}
.s-tag--ok   { color: #1c6b4a; background: #e6f6ef; }
.s-tag--warn { color: #8a5a12; background: #fdf3e2; }

.s-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 0; }

.s-btn {
  border: 0;
  border-radius: 999px;
  padding: .66rem 1.3rem;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.s-btn--primary {
  color: #fff;
  background: linear-gradient(96deg, #7c5cf0 0%, #2f74c8 100%);
  box-shadow: 0 10px 22px -12px rgba(90, 80, 220, .75);
}
.s-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(90, 80, 220, .8); }
.s-btn--ghost {
  color: #4b4266;
  background: #f0eef8;
  box-shadow: inset 0 0 0 1px #e2def2;
}
.s-btn:disabled { opacity: .5; cursor: default; }

.s-btn.is-loading { position: relative; color: rgba(75, 66, 102, .8); }
.s-btn.is-loading::after {
  content: "";
  display: inline-block;
  width: .7rem; height: .7rem;
  margin-left: .45rem;
  vertical-align: -1px;
  border: 2px solid rgba(90, 80, 220, .3);
  border-top-color: #7c5cf0;
  border-radius: 50%;
  animation: s-spin .8s linear infinite;
}
@keyframes s-spin { to { transform: rotate(360deg); } }

.s-states { margin-top: 1.1rem; }
.s-loading {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  font-size: .875rem;
  color: #6f6a85;
}
.s-spin { width: 1.1rem; height: 1.1rem; animation: s-spin .9s linear infinite; }
.s-spin circle {
  fill: none;
  stroke: #7c5cf0;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 30 44;
}
.s-empty {
  margin: 0;
  padding: 2.2rem 1rem;
  border: 1px dashed #d8d3ec;
  border-radius: 1.2rem;
  text-align: center;
  font-size: .9375rem;
  color: #6b6588;
  background: #fbfaff;
}

/* ==========================================================================
   修正 —— 会计分类账
   ========================================================================== */

.v-fixed {
  padding: 2.2rem 2rem 3rem;
  background: var(--desk);
}

.p-desk { max-width: 60rem; }

/* 书脊签条:账簿的抬头 */
.p-desk__slip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: .55rem .85rem;
  background: var(--ink);
  color: var(--paper);
}
.p-desk__id {
  font-family: 'Bahnschrift', 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
  font-size: .6875rem;
  letter-spacing: .12em;
  color: #b9b3a0;
}
.p-desk__name {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.p-desk__unit { font-size: .8125rem; color: #ded8c4; }
.p-desk__cur {
  margin-left: auto;
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: #b9b3a0;
}

/* 账页:一张纸。页与页之间是纸的厚度线,不是卡片阴影 */
.p-page {
  padding: .5rem .85rem .45rem;
  background: var(--paper);
  border-bottom: 2px solid #c9c2aa;
}

.p-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .7rem;
  padding: .1rem 0 .3rem;
}
.p-page__no {
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--form);
}
.p-page__t {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.p-page__meta {
  margin-left: auto;
  font-size: .6875rem;
  letter-spacing: .03em;
  color: var(--form);
}

/* 过账中:本档唯一的动效,分段推进,不动缩放 */
.lg-run {
  display: inline-block;
  width: 2rem; height: .3rem;
  margin: 0 .35rem;
  vertical-align: 1px;
  background-image: repeating-linear-gradient(90deg, var(--form) 0 .12rem, transparent .12rem .3rem);
  background-size: 1rem 100%;
  animation: lg-post 1.2s steps(4, end) infinite;
}
@keyframes lg-post { from { background-position: 0 0; } to { background-position: -1rem 0; } }

/* ---- 表格:三线起手,内部表线只出现在分组处 ---- */
.lg {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.lg-c-mark  { width: 4%; }
.lg-c-date  { width: 8%; }
.lg-c-acct  { width: 12%; }
.lg-c-memo  { width: 32%; }
.lg-c-debit { width: 14.5%; }
.lg-c-credit{ width: 14.5%; }
.lg-c-bal   { width: 15%; }

.lg-head th {
  padding: .3rem .4rem .26rem;
  font-family: 'Bahnschrift', 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--form);
  text-align: left;
  border-top: 1px solid var(--form);
  border-bottom: 1px solid var(--form);
}
.lg-head th.num { text-align: right; font-size: .6875rem; letter-spacing: .1em; }

.lg-sort {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.lg-sort:hover { color: var(--ink); }
.lg-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.lg-caret {
  width: 0; height: 0;
  border-left: .2rem solid transparent;
  border-right: .2rem solid transparent;
  border-bottom: .22rem solid currentColor;
  opacity: .28;
}
th[aria-sort="ascending"]  .lg-caret { opacity: 1; }
th[aria-sort="descending"] .lg-caret { opacity: 1; transform: rotate(180deg); }

.lg td, .lg th { padding: .3rem .4rem; vertical-align: baseline; }

.lg-row td {
  font-family: 'Constantia', 'Noto Serif CJK SC', 'Noto Serif SC', 'SimSun', serif;
  font-size: .78rem;
  color: var(--ink);
}
.lg td.lg-date {
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: .75rem;
  letter-spacing: .02em;
  color: #3b382f;
  white-space: nowrap;
}
.lg td.lg-acct {
  font-family: 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', 'Bahnschrift', sans-serif;
  font-size: .72rem;
  letter-spacing: .02em;
  color: #3b382f;
  white-space: nowrap;
}
.lg-memo { line-height: 1.35; }

/* 金额:等宽 + 表格数字 + 右对齐 —— 小数点在一条直线上 */
.lg .num {
  font-family: Consolas, 'Cascadia Mono', 'Lucida Console', monospace;
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}
.lg td.lg-nil { color: var(--form); }   /* 预印表格的空位破折号:与表格线同色同墨 */

/* 过账标记:已过账为墨色勾,未过账为绿色圈,更正为朱红签 */
.lg-mark { text-align: center; }
.lg-tick, .lg-ring, .lg-flag {
  width: .8rem; height: .8rem;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-tick { stroke: var(--ink); }
.lg-ring { stroke: var(--form); stroke-dasharray: 3 2.4; }
.lg-flag { width: .72rem; height: .72rem; stroke: var(--red); vertical-align: -.06rem; margin-right: .18rem; }

.lg-carry td { color: #3b382f; }
.lg-carry .lg-memo { font-style: normal; letter-spacing: .02em; }

/* 分组标题:不加上下框线,只靠间距起头 */
.lg-band th {
  padding: .5rem .4rem .16rem;
  font-family: 'Bahnschrift', 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-align: left;
  color: var(--form);
}

/* 小计:一条单线切断(分组边界只有这一条线) */
.lg-sub th, .lg-sub td {
  padding: .3rem .4rem;
  border-top: 1px solid var(--form);
  background: rgba(43, 99, 73, .05);
}
.lg-sub th {
  font-family: 'Bahnschrift', 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-align: right;
  color: var(--form);
}
.lg-sub .num { font-weight: 700; }

/* 合计:上方一条细线,下方双线(rule off);换字重、收间距、不改字号 —— 小数位保持同一列 */
.lg-total th, .lg-total td {
  padding: .28rem .4rem .2rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: rgba(43, 99, 73, .07);
}
.lg-total th {
  font-family: 'Bahnschrift', 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: right;
  color: var(--ink);
}
.lg-total .num {
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: .78rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.lg-close td {
  height: 4px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  border-bottom: 2px solid var(--ink);
}

/* 排序中:余额按期序累计,不随顺序移动(文本由脚本换为空位破折号) */
.lg.is-sorted .lg-row .lg-bal { color: var(--form); opacity: .5; }

/* 选中行:账簿绿淡染 + 版口上的墨色行标 */
.lg-row { cursor: pointer; }
.lg-row > td { transition: background .12s linear; }
.lg-row:hover > td { background: rgba(43, 99, 73, .07); }
.lg-row.is-current > td { background: rgba(43, 99, 73, .13); }
.lg-row.is-current > .lg-mark { box-shadow: inset 2px 0 0 var(--ink); }
.lg-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* 数值异常:朱红批注,与借方金额通过 aria-describedby 关联 */
.lg-row.is-flag > td { background: rgba(157, 42, 28, .06); }
.lg-row.is-flag:hover > td { background: rgba(157, 42, 28, .1); }
.lg-note {
  display: block;
  margin-top: .12rem;
  font-family: 'Noto Serif CJK SC', 'Noto Serif SC', 'SimSun', serif;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--red);
}

/* 未过账的待写值:绿色,尚未落账 */
.is-pending .num { color: var(--form); }
.lg td.lg-pending {
  font-family: 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--form);
}
.lg-sub--open th { color: var(--form); }

/* 空白账页:横线是账纸预印格线,不是数据分组线 */
.lg--blank .lg-blank td {
  height: 1.5rem;
  padding: 0;
  border-bottom: 1px solid rgba(43, 99, 73, .26);
}
.lg--blank .lg-blank:last-of-type td { border-bottom-color: rgba(43, 99, 73, .16); }

/* 账页脚注:承前 / 转次 / 记账复核签署位 */
.p-page__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  padding: .45rem .1rem .15rem;
  font-size: .68rem;
  letter-spacing: .02em;
  color: #4a463b;
}
.p-page__sig {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font-family: 'Bahnschrift', 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
  letter-spacing: .08em;
  color: var(--form);
}
.lg-line {
  display: inline-block;
  width: 3.4rem;
  height: .85rem;
  border-bottom: 1px solid var(--form);
}
.p-page__hint { margin-left: auto; color: var(--form); }

.p-desk__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  padding: .8rem .85rem 0;
  font-size: .7rem;
  line-height: 1.5;
  color: #cdc6ae;
}
.p-desk__rule { margin-left: auto; color: #a9a291; }

@media (max-width: 700px) {
  .v-slop, .v-fixed { padding-left: 1.1rem; padding-right: 1.1rem; }
  .p-page { padding: .45rem .55rem .4rem; }
  .lg-row td, .lg .num, .lg-total .num { font-size: .74rem; }
  .lg td.lg-date { font-size: .71rem; }
  .lg td.lg-acct { font-size: .69rem; }
  .lg td, .lg th { padding-left: .3rem; padding-right: .3rem; }
  .lg-head th { letter-spacing: .06em; }
  .lg-head th.num { letter-spacing: .06em; }
  .p-page__hint { margin-left: 0; }
  .p-desk__rule { margin-left: 0; }
  .s-t { border-spacing: 0 .35rem; }
  .s-t td, .s-t th { padding-left: .5rem; padding-right: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-run { animation: none; }
  .s-spin, .s-btn.is-loading::after { animation: none; }
}
[data-static] .lg-run { animation: none; }
[data-static] .s-spin,
[data-static] .s-btn.is-loading::after { animation: none; }