/* ============================================================================
   平摊 · evenkeel.css —— 全作只用这一套尺度（改这里就是改全局，别处不许再写死）
   ----------------------------------------------------------------------------
   字号阶梯：12 / 14 / 17 / 21 / 28
   间距档：  4 / 9 / 15 / 24
   圆角：    4 / 8 / 胶囊（999px）—— 全作只有这三个值
   分隔方式：1px 细线 + 偶数行极浅斑马底（不画卡片阴影）
   颜色角色（自命名）：宣 / 烟 / 淡 / 格 / 印 / 收 / 付
   组件形态：容器=斑马表格行 按钮=胶囊（实心=主，描边=次） 输入=盒子式
             图标=线性 字体=系统衬线标题 + 无衬线正文 + 等宽数字 动效=仅淡入 120ms
   ========================================================================== */
:root {
  --xuan: #fbfaf7;   /* 宣：底 */
  --yan:  #1d232a;   /* 烟：正文与标题（松烟墨） */
  --dan:  #6f7883;   /* 淡：次要文字 */
  --ge:   #e3e0d9;   /* 格：1px 细线、描边 */
  --ban:  #f6f4ef;   /* 斑：偶数行斑马底（格线浅一档） */
  --yin:  #c2492f;   /* 印：主操作、当前标签、强调（像印泥） */
  --shou: #2c7a6b;   /* 收：应收 */
  --fu:   #a8683a;   /* 付：应付 */

  --f12: 12px; --f14: 14px; --f17: 17px; --f21: 21px; --f28: 28px;
  --s4: 4px; --s9: 9px; --s15: 15px; --s24: 24px;
  --r4: 4px; --r8: 8px; --pill: 999px;

  --serif: Georgia, 'Songti SC', 'Noto Serif CJK SC', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  --sab: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--xuan); color: var(--yan);
  font: var(--f14)/1.55 var(--sans);
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
b, strong { font-weight: 600; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
[hidden] { display: none !important; }

/* ---------- 启动 ---------- */
#boot { position: fixed; inset: 0; background: var(--xuan); z-index: 50;
        display: flex; align-items: center; justify-content: center; }
#boot .bwrap { text-align: center; padding: var(--s24); }
#boot h1 { font-size: var(--f28); margin: var(--s15) 0 var(--s4); }
#boot .btag { color: var(--dan); font-size: var(--f12); margin: 0 0 var(--s24); }
#boot .bbar { width: 168px; height: 2px; background: var(--ge); margin: 0 auto var(--s9); }
#boot .bbar i { display: block; height: 100%; width: 0; background: var(--yin); transition: width .18s linear; }
#boot #bootMsg { color: var(--dan); font-size: var(--f12); margin: 0; }
#boot #bootErr { color: var(--yin); font-size: var(--f12); margin: var(--s9) 0 0; max-width: 260px; }

/* ---------- 主块 ---------- */
#app { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto; }
#top { padding: var(--s9) var(--s15) 0; border-bottom: 1px solid var(--ge); background: var(--xuan); }
.brand { display: flex; align-items: center; gap: var(--s9); }
.brand h1 { font-size: var(--f21); }
.brand .ver { color: var(--dan); font-size: var(--f12); font-family: var(--mono); }
.brand .ibtn { margin-left: auto; }

.chips { display: flex; gap: var(--s4); overflow-x: auto; padding: var(--s9) 0 var(--s4);
         scrollbar-width: none; -ms-overflow-style: none; }
.chips::-webkit-scrollbar { display: none; }

.consent { display: flex; align-items: center; gap: var(--s4); padding: 0 0 var(--s4); flex-wrap: wrap; }
.consent.slim { opacity: .72; }
.consent label { display: flex; align-items: center; gap: var(--s4); font-size: var(--f12); color: var(--yan); }
.consent input { width: 14px; height: 14px; accent-color: var(--yin); margin: 0; }
.consent .tiny { color: var(--dan); font-size: var(--f12); font-style: normal; }

.tabs { display: flex; gap: var(--s4); margin-top: var(--s4); }
.tab { flex: 1; padding: var(--s4) 0 var(--s9); border: 0; background: none;
       font-size: var(--f17); color: var(--dan); border-bottom: 2px solid transparent; }
.tab.on { color: var(--yin); border-bottom-color: var(--yin); }

#main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--s15) var(--s15); min-height: 0; }
#foot { border-top: 1px solid var(--ge); padding: var(--s4) var(--s15) calc(var(--s4) + var(--sab));
        color: var(--dan); font-size: var(--f12); display: flex; gap: var(--s4); max-width: 640px; margin: 0 auto; width: 100%; }
#foot #footWarn { color: var(--yin); }

/* ---------- 那一行广告 ---------- */
#adWrap { position: sticky; top: 0; z-index: 3; background: var(--xuan); padding: var(--s9) 0 var(--s4); }
.adrow { display: flex; align-items: center; gap: var(--s4); border: 1px solid var(--ge);
         border-radius: var(--r8); background: #fff; padding: var(--s9); }
.adbtn { flex: 1; text-align: left; border: 0; background: none; padding: 0; color: var(--yan);
         font-size: var(--f14); text-decoration: underline; text-underline-offset: 3px; }
.adtag { background: var(--yin); color: #fff; border-radius: var(--pill); font-size: var(--f12);
         font-style: normal; padding: 1px var(--s4); flex: 0 0 auto; }
.adhint { color: var(--dan); font-size: var(--f12); margin: var(--s4) 0 0; }

/* ---------- 读数 / 行 / 表 ---------- */
.readout { display: flex; gap: var(--s15); padding: var(--s15) 0 var(--s9); border-bottom: 1px solid var(--ge); }
.readout .ro { display: flex; flex-direction: column; gap: 2px; }
.readout .ro b { font-family: var(--mono); font-size: var(--f17); font-variant-numeric: tabular-nums; }
.readout .ro b.big { font-size: var(--f21); }
.readout .ro span { color: var(--dan); font-size: var(--f12); }

.row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s9);
       padding: var(--s9) 0; border-bottom: 1px solid var(--ge); }
.row:nth-of-type(even) { background: var(--ban); }
.row .l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row .r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.row .amt { font-family: var(--mono); font-size: var(--f17); font-variant-numeric: tabular-nums; }
.row .nm { font-size: var(--f14); }
.row .meta { color: var(--dan); font-size: var(--f12); }
.row .nt { color: var(--dan); font-size: var(--f12); }
.row .who, .row .pm { color: var(--dan); font-size: var(--f12); }
.row.ent { cursor: pointer; }
.row.ent:active { background: var(--ban); }
.net { font-family: var(--mono); font-size: var(--f17); font-variant-numeric: tabular-nums; }
.net.in { color: var(--shou); }
.net.out { color: var(--fu); }
.net.zero { color: var(--dan); }
.sum { font-family: var(--mono); font-style: normal; color: var(--dan); font-size: var(--f12); }

.kvs { border-top: 1px solid var(--ge); }
.kvs.head { display: flex; justify-content: space-between; padding: var(--s4) 0; color: var(--dan); font-size: var(--f12); border-bottom: 1px solid var(--ge); }
.kvs.head b { font-weight: 400; }
.kv { display: flex; justify-content: space-between; gap: var(--s9); padding: var(--s4) 0; font-size: var(--f14); }
.kv:nth-of-type(even) { background: var(--ban); }
.kv span { color: var(--dan); font-size: var(--f12); }
.kv b { font-family: var(--mono); font-size: var(--f12); text-align: right; word-break: break-all; }
.kv.bad b { color: var(--yin); }

.mhead { display: flex; justify-content: space-between; padding: var(--s9) 0 var(--s4);
         color: var(--dan); font-size: var(--f12); border-bottom: 1px solid var(--ge); }
.mhead b { font-family: var(--mono); font-weight: 400; }
.mhead2 { padding: var(--s15) 0 var(--s4); color: var(--dan); font-size: var(--f12); border-bottom: 1px solid var(--ge); }

/* ---------- 空 / 加载 / 错误 ---------- */
.empty { padding: var(--s24) var(--s9); text-align: center; }
.empty .et { font-family: var(--serif); font-size: var(--f17); margin: 0 0 var(--s4); }
.empty .eh { color: var(--dan); font-size: var(--f12); margin: 0; }
.empty .ea, .errbox .ea { margin-top: var(--s15); }
.skeleton { padding: var(--s15) 0; }
.skeleton .skt { color: var(--dan); font-size: var(--f12); margin: 0 0 var(--s9); }
.skeleton .sk { height: 14px; background: var(--ban); margin-bottom: var(--s4); border-radius: var(--r4); }
.skeleton .sk i { display: block; height: 100%; background: var(--ge); border-radius: var(--r4); }
.errbox { border: 1px solid var(--yin); border-radius: var(--r8); padding: var(--s9); margin: var(--s9) 0; }
.errbox p { margin: 0; color: var(--yin); font-size: var(--f14); }
.errbox.warn { border-style: dashed; }
.note { color: var(--dan); font-size: var(--f12); margin: var(--s9) 0 0; }
.xhint { color: var(--dan); font-size: var(--f12); margin: var(--s9) 0 0; }
.tips { color: var(--dan); font-size: var(--f12); }
.tips.bad { color: var(--yin); }
.exact { border-top: 1px solid var(--ge); margin-top: var(--s15); padding-top: var(--s9); }
.exact .xt { font-size: var(--f14); margin: 0 0 var(--s4); }
.exact .xe { font-family: var(--mono); font-size: var(--f12); margin: 0 0 2px; }
.exact .xh { color: var(--dan); font-size: var(--f12); margin: var(--s4) 0 0; }
.samplebar { background: var(--ban); border-radius: var(--r8); padding: var(--s9);
             font-size: var(--f12); color: var(--dan); margin-top: var(--s9); }
.finds { display: flex; align-items: center; gap: var(--s4); border: 1px solid var(--ge);
         border-radius: var(--r4); background: #fff; padding: var(--s4) var(--s9); margin-top: var(--s15); }
.finds .fi { display: flex; color: var(--dan); }
.finds input { flex: 1; border: 0; outline: none; background: none; font-size: var(--f14); color: var(--yan); }
.catrow { display: flex; gap: var(--s4); overflow-x: auto; padding: var(--s9) 0 var(--s4); scrollbar-width: none; }
.catrow::-webkit-scrollbar { display: none; }
.footrow { display: flex; gap: var(--s9); padding: var(--s15) 0 var(--s4); }

/* ---------- 组件：胶囊 / 盒子 / 图标按钮 / 链接 ---------- */
.btn { border-radius: var(--pill); padding: var(--s4) var(--s15); font-size: var(--f14);
       display: inline-flex; align-items: center; gap: var(--s4); border: 1px solid var(--ge);
       background: transparent; color: var(--yan); }
.btn.solid { background: var(--yin); border-color: var(--yin); color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--yin); color: var(--yin); }
.btn:active { opacity: .78; }
.btn .bi { display: flex; }
.chip { border-radius: var(--pill); border: 1px solid var(--ge); background: #fff; color: var(--yan);
        padding: 3px var(--s9); font-size: var(--f12); white-space: nowrap; flex: 0 0 auto; }
.chip.on { border-color: var(--yin); color: var(--yin); background: #fdf1ee; }
.ibtn { border: 0; background: none; color: var(--dan); padding: var(--s4); display: flex; align-items: center; }
.ibtn:active { color: var(--yin); }
.lnk { border: 0; background: none; color: var(--yin); font-size: var(--f12);
       text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.lnk.danger { color: var(--yin); }
input.box { width: 100%; border: 1px solid var(--ge); border-radius: var(--r4); background: #fff;
            padding: var(--s9); font-size: var(--f14); color: var(--yan); outline: none; }
input.box:focus { border-color: var(--yin); }
input.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 设置那一整页 ---------- */
#page { position: fixed; inset: 0; z-index: 10; background: var(--xuan); overflow-y: auto; }
#pageTop { display: flex; align-items: center; gap: var(--s9); padding: var(--s9) var(--s15);
           border-bottom: 1px solid var(--ge); position: sticky; top: 0; background: var(--xuan); }
#pageTop h2 { font-size: var(--f21); }
#pageBody { padding: 0 var(--s15) calc(var(--s24) + var(--sab)); max-width: 640px; margin: 0 auto; }
.blk { border-bottom: 1px solid var(--ge); padding: var(--s15) 0; }
.blk h3 { font-size: var(--f17); margin-bottom: var(--s9); }
.steps { margin: 0; padding-left: var(--s15); }
.steps li { margin-bottom: var(--s9); font-size: var(--f14); }
.steps .pm2 { font-family: var(--mono); font-size: var(--f12); }
.state { background: var(--ban); border-radius: var(--r8); padding: var(--s9);
         font-size: var(--f12); margin: var(--s15) 0 0; }
.whereto { margin: var(--s9) 0 0; padding-left: var(--s15); }
.whereto li { font-size: var(--f12); color: var(--dan); margin-bottom: var(--s9); }
.whereto b { color: var(--yan); font-family: var(--mono); font-size: var(--f12); }
.switch { display: flex; align-items: center; gap: var(--s9); font-size: var(--f14); }
.switch input { width: 16px; height: 16px; accent-color: var(--yin); }
.row.prow, .row.op, .row.led, .row.mrow { align-items: center; }
.row.prow .r, .row.mrow .r { flex-direction: row; gap: var(--s9); align-items: center; }
#pageBody .footrow .btn { font-size: var(--f12); }

/* ---------- 覆盖层（居中的一张卡片，不是从底下升起的抽屉） ---------- */
#ov { position: fixed; inset: 0; z-index: 20; background: rgba(29, 35, 42, .42);
      display: flex; align-items: center; justify-content: center; padding: var(--s15); }
#ov .card { background: var(--xuan); border-radius: var(--r8); width: 100%; max-width: 460px;
            max-height: 86vh; display: flex; flex-direction: column; }
#ov .card header { display: flex; align-items: center; gap: var(--s9); padding: var(--s9) var(--s15);
                   border-bottom: 1px solid var(--ge); }
#ov .card header b { font-family: var(--serif); font-size: var(--f17); }
#ov .card header .ibtn { margin-left: auto; }
#ov .body { overflow-y: auto; padding: 0 var(--s15) calc(var(--s15) + var(--sab)); }
.fld { padding: var(--s15) 0 0; }
.fld label, .fld .lb { display: block; color: var(--dan); font-size: var(--f12); margin-bottom: var(--s4); }
.chipline { display: flex; flex-wrap: wrap; gap: var(--s4); }
.prev .pt { margin: 0 0 var(--s4); font-size: var(--f14); }
.prev .pv { display: flex; flex-wrap: wrap; gap: var(--s9); }
.sh { font-size: var(--f12); color: var(--dan); }
.sh b { font-family: var(--mono); color: var(--yan); }
.x1 { font-style: normal; color: var(--yin); font-size: var(--f12); margin-left: 3px; }
.ovfoot { display: flex; gap: var(--s9); justify-content: flex-end; padding: var(--s15) 0 0; }
.yes { font-size: var(--f17); font-family: var(--serif); margin: var(--s15) 0 var(--s4); }
.pre { font-family: var(--mono); font-size: var(--f12); white-space: pre-wrap; word-break: break-all;
       background: var(--ban); border-radius: var(--r4); padding: var(--s9); margin: var(--s15) 0 0; }
.sheetlead { font-size: var(--f14); margin: var(--s15) 0 var(--s4); }
.attr { border-bottom: 1px solid var(--ge); padding: var(--s9) 0; }
.attr .ah { display: flex; justify-content: space-between; gap: var(--s9); }
.attr .ah b { font-family: var(--mono); font-size: var(--f14); }
.attr .ah span { color: var(--dan); font-size: var(--f12); }
.attr .al { display: flex; flex-wrap: wrap; gap: var(--s9); padding-top: var(--s4); }
.attr .an { color: var(--dan); font-size: var(--f12); margin: var(--s4) 0 0; }

/* ---------- 提示条 ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--s24) + var(--sab)); transform: translateX(-50%);
         background: var(--yan); color: var(--xuan); border-radius: var(--pill); padding: var(--s4) var(--s15);
         font-size: var(--f12); z-index: 40; max-width: 84vw; text-align: center;
         animation: fade .12s ease; }

/* 动效：全作只有这一处（淡入 120ms） */
.fade { animation: fade .12s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#panel > * { animation: fade .12s ease; }
#pageBody > * { animation: fade .12s ease; }