/* ============ 设计系统 ============ */
:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #16181d;
  --ink-2: #5b6273;
  --ink-3: #98a0b0;
  --line: #e9ecf1;
  --line-2: #f2f4f7;

  --brand: #2f6bff;
  --brand-soft: #eaf0ff;
  --red: #f0483e;
  --red-soft: #fdeceb;
  --green: #17a673;
  --green-soft: #e8f7f1;
  --amber: #f59e0b;
  --amber-soft: #fef4e4;
  --violet: #7c5cff;
  --violet-soft: #f0ecff;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-xl: 24px;

  --sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --sh-2: 0 4px 16px rgba(16,24,40,.07);
  --sh-3: 0 -6px 28px rgba(16,24,40,.13);

  --appbar-h: 58px;
  --tab-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden 属性必须能覆盖 display，否则隐藏的定位层仍会拦截点击 */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--line-2);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
               "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body { display: flex; justify-content: center; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ============ 外壳 ============ */
.app-shell {
  position: relative;
  width: 100%; max-width: 480px; height: 100%;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
@media (min-width: 500px) {
  body { background: #e8eaef; }
  .app-shell { height: 100%; box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 18px 60px rgba(16,24,40,.12); }
}

/* ============ 顶栏 ============ */
.appbar {
  flex: none; height: var(--appbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 18px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 20;
}
.appbar-title { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.appbar-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.appbar-right { display: flex; gap: 2px; align-items: center; }
/* 设置入口：与月份切换分隔开，避免误触 */
.btn-settings { margin-right: 6px; position: relative; }
.btn-settings::after {
  content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--line);
}
.btn-settings.is-alert::before {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  border: 1.5px solid var(--card);
}
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: var(--ink-2);
  transition: background .15s;
}
.icon-btn:active { background: var(--line-2); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; line-height: 1; }
.icon-btn.danger { color: var(--red); }
.btn.primary { background: var(--brand); color: #fff; }
.btn.block { width: 100%; }

/* ============ 成员视角切换器 ============ */
.member-switch {
  display: flex; gap: 6px;
  padding: 8px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.ms-btn {
  flex: 1; padding: 8px 4px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  border-radius: 10px;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.ms-btn:active { transform: scale(.97); }
.ms-btn.is-on {
  background: var(--brand); color: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(47,107,255,.28);
}

/* 周期记账规则行 */
.recur-row { display: flex; align-items: center; gap: 10px; padding: 12px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.recur-main { flex: 1; min-width: 0; }
.recur-t { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.recur-s { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.recur-next { font-size: 11.5px; color: var(--brand); margin-top: 3px; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line-2); border-radius: 20px; transition: .2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::before { transform: translateX(18px); }

/* ============ 内容区 ============ */
.viewport { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.view { padding: 12px 14px calc(96px + var(--safe-b)); }
.view[hidden] { display: none; }

/* ============ 卡片 ============ */
.card {
  background: var(--card); border-radius: var(--r-l);
  padding: 14px; margin-bottom: 12px; box-shadow: var(--sh-1);
}
.card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.card-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--brand); }
.card-title.no-bar::before { display: none; }
.card-more { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 2px; }
.card-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ============ 净额主卡 ============ */
.hero {
  background: linear-gradient(148deg, #2f6bff 0%, #5b4bff 52%, #7c5cff 100%);
  border-radius: var(--r-xl); padding: 18px 18px 16px; color: #fff;
  box-shadow: 0 8px 26px rgba(47,107,255,.26); margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -34px; top: -46px;
  width: 168px; height: 168px; border-radius: 50%;
  background: rgba(255,255,255,.11);
}
.hero-label { font-size: 12.5px; opacity: .85; display: flex; align-items: center; gap: 6px; }
.hero-amount { font-size: 34px; font-weight: 750; letter-spacing: -1.1px; margin: 5px 0 2px; font-variant-numeric: tabular-nums; }
.hero-amount small { font-size: 18px; font-weight: 600; margin-right: 3px; opacity: .9; }
.hero-meta { font-size: 12px; opacity: .82; display: flex; align-items: center; gap: 5px; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2);
  position: relative;
}
.hero-cell { text-align: center; }
.hero-cell b { display: block; font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-cell span { font-size: 11px; opacity: .78; }

/* ============ 指标格 ============ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 12px; }
.stat {
  background: var(--card); border-radius: var(--r-m); padding: 12px;
  box-shadow: var(--sh-1); text-align: left;
}
.stat-label { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.stat-value { font-size: 20px; font-weight: 700; margin-top: 4px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-right: 1px; }
.stat-foot { font-size: 11px; margin-top: 3px; color: var(--ink-3); }
.up { color: var(--red); } .down { color: var(--green); }
.c-red { color: var(--red); } .c-green { color: var(--green); }
.c-amber { color: var(--amber); } .c-brand { color: var(--brand); } .c-violet { color: var(--violet); }
.c-ink3 { color: var(--ink-3); }

/* ============ 收支条 ============ */
.io-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--line-2); margin: 4px 0 10px; }
.io-bar i { display: block; height: 100%; }
.io-bar .seg-in { background: var(--green); }
.io-bar .seg-out { background: var(--red); }
.io-legend { display: flex; justify-content: space-between; font-size: 12px; }
.io-legend div { display: flex; align-items: center; gap: 5px; }
.io-legend i { width: 7px; height: 7px; border-radius: 50%; }
.io-legend .l-in i { background: var(--green); }
.io-legend .l-out i { background: var(--red); }
.io-legend b { font-weight: 650; font-variant-numeric: tabular-nums; }
.io-legend span { color: var(--ink-3); }

/* ============ 列表 ============ */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 11px; padding: 10px 0;
  border-bottom: 1px solid var(--line-2); width: 100%; text-align: left;
}
.row:last-child { border-bottom: 0; }
.row-ico {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; font-size: 17px;
}
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-amt { flex: none; font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.row-amt.in { color: var(--green); }
.tag {
  display: inline-block; padding: 1px 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 600; line-height: 1.5;
}
.tag-brand { background: var(--brand-soft); color: var(--brand); }
.tag-red { background: var(--red-soft); color: var(--red); }
.tag-green { background: var(--green-soft); color: var(--green); }
.tag-amber { background: var(--amber-soft); color: #b7770a; }
.tag-violet { background: var(--violet-soft); color: var(--violet); }
.tag-gray { background: var(--line-2); color: var(--ink-3); }

.empty { padding: 34px 20px; text-align: center; color: var(--ink-3); }
.empty-ico { font-size: 34px; opacity: .38; margin-bottom: 8px; }
.empty p { font-size: 13px; }

/* ============ 图表 ============ */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-size: 10px; fill: var(--ink-3); font-family: inherit; }
.chart .axis-line { stroke: var(--line); stroke-width: 1; }
.chart .grid-line { stroke: var(--line-2); stroke-width: 1; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.chart-legend span { font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 2px; }

/* 分类占比条 */
.cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cat-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; }
.cat-main { flex: 1; min-width: 0; }
.cat-line { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.cat-line b { font-weight: 600; }
.cat-line span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cat-track { height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.cat-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }

/* ============ 筛选条 ============ */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  background: var(--card); color: var(--ink-2); border: 1px solid var(--line);
  white-space: nowrap; transition: all .15s;
}
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.chip.primary { background: var(--brand); color: #fff; border-color: transparent; font-weight: 650; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-person { background: #eef4ff; color: #2f6bff; }
.tag-recur { background: #fff3e0; color: #e8820c; }

/* 月份分组标题 */
.month-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 2px 6px; font-size: 12px; color: var(--ink-3); font-weight: 600;
}
.month-head b { color: var(--ink-2); font-weight: 700; font-size: 13px; }
.month-head .mh-sum { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ============ 弹层 ============ */
.sheet-mask {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(16,24,40,.42);
  z-index: 90; animation: fade .2s ease;
  backdrop-filter: blur(2px);
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 100;
  background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3); max-height: 88vh; display: flex; flex-direction: column;
  animation: slideUp .28s cubic-bezier(.32,.72,0,1);
  padding-bottom: var(--safe-b);
}
@keyframes slideUp { from { transform: translate(-50%, 100%); } }
.sheet-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px; border-bottom: 1px solid var(--line-2); position: relative;
}
.sheet-head::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 2px; background: var(--line);
}
.sheet-head h3 { font-size: 15.5px; font-weight: 680; }
.sheet-cancel { font-size: 14px; color: var(--ink-3); padding: 4px 6px; }
.sheet-save { font-size: 14.5px; color: var(--brand); font-weight: 680; padding: 4px 6px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px; }

/* ============ 表单 ============ */
.seg { display: flex; background: var(--line-2); border-radius: 11px; padding: 3px; margin-bottom: 14px; }
.seg button {
  flex: 1; padding: 8px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); transition: all .18s;
}
.seg button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.seg button.is-on[data-v="expense"] { color: var(--red); }
.seg button.is-on[data-v="income"] { color: var(--green); }

.field { margin-bottom: 14px; }
.field-label { font-size: 12px; color: var(--ink-3); margin-bottom: 7px; font-weight: 600; display: block; }
.input {
  width: 100%; padding: 11px 12px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--bg); font-size: 14.5px;
  outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--brand); background: var(--card); }
textarea.input { resize: vertical; min-height: 58px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 分类选择网格 */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cat-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 2px; border-radius: var(--r-s); transition: background .15s;
}
.cat-pick i { font-size: 21px; font-style: normal; line-height: 1; }
.cat-pick span { font-size: 10.5px; color: var(--ink-2); }
.cat-pick.is-on { background: var(--brand-soft); }
.cat-pick.is-on span { color: var(--brand); font-weight: 650; }

/* 账号选择 */
.acct-pick { display: flex; gap: 7px; flex-wrap: wrap; }
.acct-pick button {
  padding: 7px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
}
.acct-pick button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }

/* 按钮 */
.btn {
  width: 100%; padding: 13px; border-radius: var(--r-m); font-size: 15px; font-weight: 650;
  background: var(--brand); color: #fff; transition: opacity .15s, transform .1s;
}
.btn:active { opacity: .85; transform: scale(.99); }
.btn.ghost { background: var(--line-2); color: var(--ink-2); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.sm { padding: 9px; font-size: 13.5px; width: auto; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ============ 数字键盘 ============ */
.keypad {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 110;
  background: var(--line-2); padding: 8px 6px calc(8px + var(--safe-b));
  box-shadow: 0 -8px 26px rgba(16,24,40,.14);
  animation: slideUp .22s cubic-bezier(.32,.72,0,1);
}
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.key {
  height: 50px; border-radius: 12px; background: var(--card); font-size: 21px; font-weight: 500;
  display: grid; place-items: center; box-shadow: 0 1px 2px rgba(16,24,40,.07);
  font-variant-numeric: tabular-nums; transition: background .1s;
}
.key:active { background: var(--line); }
.key.fn { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.key.fn.save { background: var(--brand); color: #fff; font-size: 16px; font-weight: 680; }
.key.fn.del { color: var(--red); }

/* 金额显示 */
.amt-display {
  text-align: right; padding: 4px 0 12px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.amt-display .cur { font-size: 19px; color: var(--ink-3); margin-right: 3px; }
.amt-display .val { font-size: 38px; font-weight: 720; letter-spacing: -1.4px; }
.amt-display .val.is-zero { color: var(--ink-3); }
.amt-display .placeholder { color: var(--ink-3); font-weight: 600; }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%);
  background: rgba(22,24,29,.92); color: #fff; padding: 10px 18px; border-radius: 12px;
  font-size: 13.5px; z-index: 200; animation: toastIn .24s ease; box-shadow: var(--sh-2);
  max-width: 84vw; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
/* Toast 里的内联操作（撤销 / 再记一笔） */
.toast-act {
  flex: none; border: 0; background: rgba(255,255,255,.16); color: #fff;
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.toast-act:active { background: rgba(255,255,255,.3); }

/* ============ FAB & Tabbar ============ */
.fab {
  position: absolute; right: 16px; bottom: calc(var(--tab-h) + 14px + var(--safe-b));
  width: 52px; height: 52px; border-radius: 17px; z-index: 30;
  background: linear-gradient(140deg, #2f6bff, #5b4bff); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(47,107,255,.36);
  transition: transform .16s, opacity .2s;
}
.fab:active { transform: scale(.92); }
.fab[hidden] { display: none; }   /* 只在录入型页面出现；CSS 的 display 会盖掉 hidden 默认值 */
.fab svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* 滚动时淡出，避免遮挡图表内容 */
.fab.is-dim { opacity: .32; }

.tabbar {
  flex: none; height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); z-index: 30;
}
/* 7 个标签（多了「账面」）时收窄图标与字号，避免挤压 */
.tabbar[data-tabs="7"] { grid-template-columns: repeat(7, 1fr); }
.tabbar[data-tabs="7"] .tab svg { width: 20px; height: 20px; }
.tabbar[data-tabs="7"] .tab span { font-size: 9.5px; letter-spacing: -.2px; }
/* 8 个标签（再加「房贷」）时进一步收窄，图标与文字都压一档 */
.tabbar[data-tabs="8"] { grid-template-columns: repeat(8, 1fr); }
.tabbar[data-tabs="8"] .tab svg { width: 18px; height: 18px; }
.tabbar[data-tabs="8"] .tab span { font-size: 9px; letter-spacing: -.35px; }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); transition: color .15s; padding: 0 1px; min-width: 0;
}
.tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tab span { font-size: 10px; font-weight: 550; white-space: nowrap; }
.tab.is-active { color: var(--brand); }
.tab.is-active svg { stroke-width: 2.1; }

/* ============ 房贷 / 负债 专用 ============ */
.mtg-hero {
  background: linear-gradient(145deg, #1f2a44, #35486f); color: #fff;
  border-radius: var(--r-xl); padding: 18px; margin-bottom: 12px; box-shadow: var(--sh-2);
}
.mtg-hero .label { font-size: 12px; opacity: .8; }
.mtg-hero .big { font-size: 32px; font-weight: 750; letter-spacing: -1px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.mtg-hero .big small { font-size: 17px; font-weight: 600; opacity: .85; }
.mtg-hero .sub { font-size: 12px; opacity: .8; }
.mtg-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.18); }
.mtg-metrics div { text-align: center; }
.mtg-metrics b { display: block; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mtg-metrics span { font-size: 10.5px; opacity: .75; }

.pay-plan { display: flex; flex-direction: column; gap: 1px; }
.pay-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px;
}
.pay-row:last-child { border-bottom: 0; }
.pay-row .k { color: var(--ink-3); font-size: 12.5px; }
.pay-row .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* 进度条 */
.prog { height: 8px; border-radius: 5px; background: var(--line-2); overflow: hidden; margin: 8px 0 6px; }
.prog i { display: block; height: 100%; border-radius: 5px; }
.prog-lb { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); }

/* 人情往来 */
.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; font-weight: 680; color: #fff;
}
.balance-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 650;
}
.balance-pill.owed { background: var(--green-soft); color: var(--green); }
.balance-pill.owe { background: var(--red-soft); color: var(--red); }
.balance-pill.settled { background: var(--line-2); color: var(--ink-3); }

/* 人情事件标签 */
.evt-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.evt-pick {
  padding: 9px 4px; border-radius: var(--r-s); background: var(--bg); border: 1px solid var(--line);
  text-align: center; font-size: 12px; transition: all .15s;
}
.evt-pick i { display: block; font-size: 18px; font-style: normal; margin-bottom: 2px; }
.evt-pick.is-on { background: var(--violet-soft); border-color: var(--violet); color: var(--violet); font-weight: 650; }

.rec-pick { display: flex; gap: 7px; }
.rec-pick button {
  flex: 1; padding: 10px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--bg); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
/* 选中态兜底：任何 rec-pick 组里的 is-on 都要看得出来。
   之前只给 give / recv 两个值写了配色，外债方向（out/in）、还款方式等点了都不回显。 */
.rec-pick button.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 650; }
/* 外债方向：借出=收回（绿），借入=要还（红） */
.rec-pick button.is-on[data-v="out"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.rec-pick button.is-on[data-v="in"] { background: var(--red-soft); border-color: var(--red); color: var(--red); }
/* 人情方向：随礼=支出（红），收礼=收入（绿） */
.rec-pick button.is-on[data-v="give"] { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.rec-pick button.is-on[data-v="recv"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* 详情条目 */
.detail-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-2); }
.detail-line:last-child { border-bottom: 0; }
.detail-line > span { color: var(--ink-3); white-space: nowrap; }
.detail-line > b { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* 月份选择器 */
.month-picker { display: flex; gap: 8px; }
.month-picker input { flex: 1; }

.insight {
  display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--r-m);
  background: var(--brand-soft); font-size: 12.5px; line-height: 1.5; color: #1c3f8f;
  margin-bottom: 12px;
}
.insight.amber { background: var(--amber-soft); color: #8a5a00; }

/* 贷款残留清理卡（账面页） */
.orphan-card { border-color: var(--amber-soft); }
.orphan-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line-2);
}
.orphan-row:first-child { border-top: 0; }
.orphan-info { flex: 1; min-width: 0; }
.orphan-info b { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 3px; }
.orphan-info span {
  display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
  word-break: break-all;
}
.orphan-row .btn.danger.sm { flex: none; padding: 7px 14px; font-size: 13px; }

.insight.green { background: var(--green-soft); color: #0b6b4a; }
.insight.blue { background: var(--brand-soft); color: var(--brand); }
.insight-ico { flex: none; font-size: 15px; }

/* 资产负债表双栏 */
.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bs-grid > div { min-width: 0; }
.bs-grid .detail-line { font-size: 12.5px; padding: 7px 0; gap: 8px; }
.bs-grid .detail-line > span { font-size: 12px; }
.bs-grid .detail-line > b { font-size: 12.5px; }

@media (max-width: 359px) {
  .bs-grid { grid-template-columns: 1fr; }
  .bs-grid > div + div { margin-top: 8px; }
}

/* ================= 工资单 ================= */
.pr-sum {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border-radius: var(--r-m); padding: 11px 10px; margin-bottom: 10px;
}
.pr-sum > div { flex: 1; text-align: center; min-width: 0; }
.pr-sum span { display: block; font-size: 10.5px; color: var(--ink-3); margin-bottom: 2px; }
.pr-sum b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.3px; white-space: nowrap; }
.pr-op { flex: none !important; font-size: 14px; color: var(--ink-3); width: 12px; }
.pr-sum .pr-net b { color: var(--green); font-size: 16px; }

.pr-detail { display: flex; flex-wrap: wrap; gap: 5px; }
.pr-detail span {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; padding: 3px 7px; border-radius: 6px;
  background: var(--green-soft); color: #0b6b4a; font-variant-numeric: tabular-nums;
}
.pr-detail span.is-deduct { background: var(--red-soft); color: #b5342c; }
.pr-detail i { font-style: normal; font-size: 10px; }

.pr-attend { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pr-attend span { font-size: 10.5px; padding: 2px 7px; border-radius: 5px; background: var(--line-2); color: var(--ink-2); }

/* 工资录入表单 */
.pr-group { margin-bottom: 6px; }
.pr-group-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--line-2); border-radius: var(--r-s) var(--r-s) 0 0;
  font-size: 12.5px; font-weight: 650;
}
.pr-group-hd .pt { color: var(--green); font-variant-numeric: tabular-nums; }
.pr-group-hd .pt.is-deduct { color: var(--red); }
.pr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border-radius: 0 0 var(--r-s) var(--r-s); overflow: hidden; }

/* 加班费自动计算提示条 */
.ot-tip {
  padding: 9px 11px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
  background: var(--bg-2); border-top: 1px solid var(--line-2);
}
.ot-tip b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.ot-tip.is-manual { background: #fff7ed; color: var(--amber, #b45309); }
.ot-tip.is-manual b { color: var(--amber, #b45309); }
.pr-field { background: var(--card); padding: 8px 10px; }
.pr-field label { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
.pr-field label i { font-style: normal; font-size: 10px; }
.pr-field input {
  width: 100%; border: 0; background: transparent; padding: 0;
  font-size: 14.5px; font-weight: 620; outline: none;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.pr-field input:focus { color: var(--brand); }
.pr-field.has-val input { color: var(--ink); }

.pr-total {
  position: sticky; bottom: 0; margin: 14px -14px -14px; padding: 13px 16px calc(13px + var(--safe-b));
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
}
.pr-total-l { display: flex; gap: 14px; }
.pr-total-l div { text-align: left; }
.pr-total-l span { display: block; font-size: 10.5px; color: var(--ink-3); }
.pr-total-l b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-total-r { text-align: right; }
.pr-total-r span { display: block; font-size: 10.5px; color: var(--ink-3); }
.pr-total-r b { font-size: 24px; font-weight: 750; color: var(--green); letter-spacing: -.7px; font-variant-numeric: tabular-nums; }

.person-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.person-pick button {
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
}
.person-pick button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.person-pick .add { border-style: dashed; color: var(--ink-3); }

/* 工资卡片底部：存模板 + 入账账户 */
.pr-tpl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.pr-acc { font-size: 11px; color: var(--ink-3); }

/* 模板条 */
.tpl-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--brand-soft); border-radius: var(--r-m); padding: 10px 12px; margin-bottom: 12px;
}
.tpl-bar-lb { font-size: 12px; font-weight: 650; color: var(--brand); display: flex; align-items: center; gap: 4px; }
.tpl-bar .tpl-sel { flex: 1; min-width: 110px; }
.tpl-hint { font-size: 11px; color: var(--ink-3); line-height: 1.55; margin-top: -4px; margin-bottom: 10px; }
.tpl-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.tpl-item:last-child { border-bottom: 0; }
.tpl-item-l { flex: 1; min-width: 0; }
.tpl-item-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tpl-item-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* 工资卡快捷选择 */
.card-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.card-pick button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 13px; border-radius: var(--r-s); font-size: 13px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
}
.card-pick button.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 650; }

/* ================= 奖金 ================= */
.bs-hero { padding: 15px 16px; color: #fff; }
.bs-hero-label { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 5px; }
.bs-hero-num { font-size: 27px; font-weight: 750; letter-spacing: -.9px; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.bs-hero-num small { font-size: 15px; font-weight: 650; margin-right: 1px; }
.bs-hero-sub { font-size: 11.5px; opacity: .9; }
.bs-list .row-title { white-space: normal; }
.bs-list .row-title .tag { margin-left: 4px; }

.bn-group { margin-bottom: 6px; }
.bn-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border-radius: 0 0 var(--r-s) var(--r-s); overflow: hidden; }
.bn-field { background: var(--card); padding: 8px 10px; }
.bn-field label { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
.bn-field input {
  width: 100%; border: 0; background: transparent; padding: 0;
  font-size: 15px; font-weight: 650; outline: none;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.bn-field.is-cut input { color: var(--red); }
.bn-field.is-net input { color: var(--amber); }

.chip.sm { padding: 5px 10px; font-size: 11.5px; border-radius: 8px; }
.chip.amber { background: var(--amber-soft); color: #b7770a; border-color: transparent; font-weight: 600; }

.stat.mini { padding: 10px; }
.stat.mini .stat-value { font-size: 17px; }
.stat.mini .stat-foot { font-size: 10.5px; }

.fc-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.fc-item:last-child { border-bottom: 0; }
.fc-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; background: var(--amber-soft); }
.fc-main { flex: 1; min-width: 0; }
.fc-title { font-size: 14px; font-weight: 600; }
.fc-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* ================= 银行库选择器 ================= */
.bank-mask { z-index: 120; background: rgba(16,24,40,.5); }
.bank-sheet { z-index: 130; max-height: 92vh; }
.bank-bar { flex: none; padding: 12px 14px 8px; border-bottom: 1px solid var(--line-2); background: var(--card); }
.bank-bar .input { margin-bottom: 9px; }
.bank-tabs { display: flex; gap: 6px; }
.bank-tabs button {
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
}
.bank-tabs button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }

.bank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bank-item {
  position: relative; padding: 11px 5px 9px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--bg);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bank-item:active { transform: scale(.97); }
.bank-item-ic { font-size: 21px; line-height: 1; }
.bank-item-n { font-size: 12px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
.bank-item-s { font-size: 10px; color: var(--ink-3); }
.bank-item.is-added { border-color: var(--line-2); background: var(--line-2); }
.bank-item.is-added .bank-item-n { color: var(--ink-3); font-weight: 500; }
/* 已添加的账户不再画 ::after ✓ —— 右上角只保留一个状态标识：
   添加模式 = bank-x（× 可移除 / · 锁定），改名模式 = is-sel 的 ✓ 选中标记。 */
.bank-item.is-sel { border-color: var(--brand); background: var(--brand-soft); }
.bank-item.is-sel .bank-item-n { color: var(--brand); }
.bank-item.is-sel::after {
  content: '✓'; position: absolute; top: 3px; right: 5px;
  font-size: 10px; color: var(--brand); font-weight: 700;
}

/* 右上角「×」：移除已添加的银行 */
.bank-x {
  position: absolute; top: 2px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; line-height: 1; color: var(--ink-3);
  background: var(--line-2);
}
.bank-x:active { transform: scale(.9); }
.bank-x.is-locked { opacity: .35; cursor: default; }

/* 手动添加：不走银行库 */
.bank-manual {
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line);
}
.bank-manual .row-2 { margin-bottom: 9px; }
.bank-empty { text-align: center; padding: 30px 0; color: var(--ink-3); font-size: 13px; }

/* 添加账户表单（点选银行后就地展开，不叠加第三层弹窗） */
.bk-form { padding: 2px 0 6px; }
.bk-form-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bk-form-hd .bank-item-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; }
.bk-form-hd b { font-size: 15.5px; font-weight: 650; }
.bk-form .btn-row { margin-top: 4px; }
.bk-form .btn-row .btn { flex: 1; }

/* 旧账户名迁移提示条 */
.migrate-tip {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px;
  border-radius: var(--r-s); background: var(--amber-soft); margin-bottom: 14px;
}
.migrate-tip-ico { font-size: 15px; flex: none; }
.migrate-tip-main { flex: 1; min-width: 0; }
.migrate-tip-t { font-size: 12.5px; font-weight: 650; color: #b7770a; }
.migrate-tip-d { font-size: 11.5px; color: var(--ink-2); margin: 2px 0 7px; line-height: 1.5; }
.migrate-tip-d b { color: var(--brand); }
/* 数据诊断 */
.diag { background: var(--line-2); border-radius: var(--r-m); padding: 4px 12px; }
.diag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--card); font-size: 11.5px; color: var(--ink-3); }
.diag-row:last-child { border-bottom: 0; }
.diag-row b { color: var(--ink-2); font-weight: 600; text-align: right; }
.diag-row b.ok { color: var(--green); }
.diag-row b.warn { color: var(--amber); }

/* 账户余额来源明细 */
.diag-list { background: var(--line-2); border-radius: var(--r-m); padding: 2px 12px; }
.diag-acc { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--card); }
.diag-acc:last-child { border-bottom: 0; }
.diag-acc .row-ico { width: 28px; height: 28px; font-size: 15px; flex: none; }
.diag-acc-main { flex: 1; min-width: 0; }
.diag-acc-t { font-size: 12.5px; font-weight: 600; }
.diag-acc-s { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.diag-acc-b { font-size: 13px; font-weight: 700; flex: none; }
.diag-acc-b.neg { color: var(--red); }
.diag-zero {
  flex: none; font-size: 10.5px; padding: 4px 8px; border-radius: 8px;
  background: var(--amber-soft); color: #8a5a00; font-weight: 600;
}

/* 提示条里的复选项（如「彻底清空」） */
.chk-row { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 9px; cursor: pointer; }
.chk-row input { width: 16px; height: 16px; flex: none; margin-top: 1px; accent-color: var(--brand); }
.chk-row span { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }

/* 账户行内操作 */
.acc-ops { display: flex; gap: 6px; flex: none; }
.acc-ops button {
  padding: 5px 10px; border-radius: 8px; font-size: 11.5px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-3);
}
.acc-ops button:active { background: var(--line-2); }

.fade-in { animation: fadeUp .3s ease; }

/* ============ 设置（两级） ============ */
.set-entry {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 2px; border-bottom: 1px solid var(--line-2);
  background: none; text-align: left;
}
.set-entry:last-child { border-bottom: 0; }
.set-entry:active { opacity: .6; }
.set-entry-arrow { flex: none; font-size: 19px; color: var(--ink-3); line-height: 1; }
.set-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 17px; background: var(--line-2);
}
.set-main { flex: 1; min-width: 0; display: block; }
.set-t { display: block; font-size: 14px; font-weight: 600; }
.set-d {
  display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-badge {
  flex: none; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
  background: var(--red-soft); color: var(--red);
}
.set-arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-back {
  display: inline-flex; align-items: center; gap: 2px; background: none;
  font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 12px; padding: 0;
}
.set-foot { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.set-empty {
  background: var(--green-soft); color: var(--green); border-radius: var(--r-m);
  padding: 12px 14px; font-size: 12.5px; margin-bottom: 14px;
}
.set-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.75; margin-bottom: 16px; }
.set-about { text-align: center; padding: 6px 0 18px; }
.set-about-ico { font-size: 40px; margin-bottom: 8px; }
.set-about-t { font-size: 16px; font-weight: 700; }
.set-about-v { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* ================= 渠道账面 ================= */
.ch-group { margin-bottom: 13px; }
.ch-group:last-child { margin-bottom: 0; }
.ch-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; color: var(--ink-3); font-weight: 600;
  padding: 0 0 5px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px;
}
.ch-head b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ch-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--line-2); width: 100%; text-align: left; }
.ch-group .ch-row:last-child { border-bottom: 0; }
.ch-row .row-main { flex: 1; min-width: 0; }
.ch-row .row-amt.out { color: var(--red); }
.ch-row:active { opacity: .7; }

/* 行尾「×」就地删除（仅账面页），有记录时锁为「·」 */
.ch-del {
  flex: none; width: 22px; height: 22px; margin-left: 2px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: var(--ink-3);
  background: var(--line-2); border: 0;
}
.ch-del:active { transform: scale(.88); }
.ch-del.is-locked { opacity: .3; }
.ch-del.ch-del-fix { background: var(--amber-soft); color: #854F0B; opacity: 1; font-size: 13px; }

/* 账面页顶部 hero */
/* 余额对账（手输余额 vs 流水推算） */
.recon-ok { font-size: 12.5px; color: var(--green); font-weight: 600; padding: 2px 0 4px; }
.recon-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.recon-row:first-of-type { border-top: 0; }
.recon-l { flex: 1; min-width: 0; }
.recon-n { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.recon-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.recon-d { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ch-hero {
  background: linear-gradient(145deg, #1b3a72, #2f6bff); color: #fff;
  border-radius: var(--r-xl); padding: 18px; margin-bottom: 12px; box-shadow: var(--sh-2);
}
.ch-hero-label { font-size: 12px; opacity: .82; }
.ch-hero-num { font-size: 32px; font-weight: 750; letter-spacing: -1px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ch-hero-num small { font-size: 17px; font-weight: 600; opacity: .85; margin-right: 1px; }
.ch-hero-sub { font-size: 12px; opacity: .82; }
.ch-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.18); }
.ch-metrics div { text-align: center; min-width: 0; }
.ch-metrics b { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-metrics b.c-green { color: #7ff0c4; }
.ch-metrics b.c-red { color: #ffb0aa; }
.ch-metrics span { font-size: 10.5px; opacity: .78; }

/* ================= 预算 ================= */
.bud-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.bud-num { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bud-num > span { font-size: 11.5px; color: var(--ink-3); }
.bud-num > b { font-size: 21px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.bud-pct { flex: none; font-size: 15px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.bud-pct.warn { color: var(--amber); }
.bud-pct.over { color: var(--red); }
.bud-cats { margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 9px; }
.bud-cat-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.bud-cat-hd b { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* 预算设置里的分类行 */
.bg-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.bg-row:last-child { border-bottom: 0; }
.bg-row-l { flex: 1; min-width: 0; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.bg-row-l i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.bg-row-in { flex: none; width: 96px; text-align: right; font-variant-numeric: tabular-nums; }

/* ================= 流水搜索 ================= */
.srch-row { display: flex; align-items: center; gap: 8px; }
.srch-row .input { flex: 1; min-width: 0; }
.srch-acc { flex: none !important; width: 108px; }
.srch-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.srch-all input { width: 15px; height: 15px; accent-color: var(--brand); }
.srch-cnt { font-size: 12px; color: var(--ink-3); }
.row[data-tx]:active { opacity: .6; }

/* ================= 加班打卡 ================= */
.ot-dash { padding: 14px; }
.ot-dash-big { font-size: 34px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05; margin: 4px 0 8px; }
.ot-dash-big small { font-size: 14px; color: var(--ink-3); font-weight: 600; margin-left: 3px; }
.ot-dash-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ot-dash-chips span { font-size: 12px; color: var(--ink-2); background: var(--line-2); border-radius: 8px; padding: 4px 9px; }
.ot-dash-foot { font-size: 12.5px; color: var(--ink-3); padding-top: 10px; border-top: 1px solid var(--line-2); }
.ot-dash-per { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ot-per-item { font-size: 12px; color: var(--ink-2); background: var(--brand-soft); border-radius: 8px; padding: 4px 9px; }
.ot-per-item b { font-weight: 700; }
.ot-per-item small { color: var(--ink-3); margin-left: 2px; }
.ot-per-item.is-diff { background: rgba(217,119,6,.12); }
.ot-dash-foot.ok { color: var(--green); font-weight: 600; }
.ot-dash-foot.warn { color: #c2760a; font-weight: 600; }

.otlog { padding: 2px 0; }
.otlog-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ot-nav { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.ot-nav:active { transform: scale(.94); }
.ot-month { flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.ot-person { flex: none; width: 92px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 13px; }

.ot-add { padding: 14px; margin-bottom: 12px; }
.ot-add-hd { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.ot-add .field { margin-bottom: 12px; }
.ot-add .field:last-of-type { margin-bottom: 14px; }
.ot-add .input { width: 100%; }

.ot-summary { padding: 14px; margin-bottom: 12px; text-align: center; background: linear-gradient(150deg, #f6f8ff, #eef3ff); }
.ot-summary-hd { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.ot-big { font-size: 38px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.05; }
.ot-big small { font-size: 15px; color: var(--ink-3); font-weight: 600; margin-left: 3px; }
.ot-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.ot-chip { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2); border-radius: 9px; padding: 5px 11px; }
.ot-foot { font-size: 12px; color: var(--ink-3); }

.ot-check-card { padding: 14px; margin-bottom: 12px; }
.ot-check { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.ot-check.warn { color: #c2760a; }
.ot-check.note { color: var(--ink-3); font-size: 12px; margin-top: 8px; }
.ot-check-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ot-check-tbl th { font-size: 11px; color: var(--ink-3); font-weight: 600; text-align: center; padding: 4px 2px; }
.ot-check-tbl td { text-align: center; padding: 7px 2px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.ot-check-tbl tr.ot-total td { border-top: 2px solid var(--line); font-weight: 700; color: var(--ink); }
.ot-check-tbl small { display: block; font-size: 10.5px; font-weight: 600; }
.c-ok { color: var(--green) !important; }
.c-over { color: #c2760a !important; }
.c-under { color: var(--red) !important; }
.link { background: none; border: none; color: var(--brand); font-size: 13px; padding: 0; cursor: pointer; font-weight: 600; }

.ot-list-hd { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 4px 2px 8px; }
.ot-list { display: flex; flex-direction: column; gap: 8px; }
.ot-row { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line-2); border-radius: 11px; padding: 9px 11px; }
.ot-tag { flex: none; font-size: 11.5px; font-weight: 700; border-radius: 8px; padding: 3px 8px; color: #fff; }
.ot-normal { background: #7c5cff; }
.ot-weekend { background: #0ea5e9; }
.ot-holiday { background: #ef4444; }
.ot-date { flex: none; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ot-h { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); }
.ot-note { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-op { flex: none; display: flex; gap: 5px; }
.ot-empty { text-align: center; font-size: 13px; color: var(--ink-3); padding: 22px 10px; background: var(--line-2); border-radius: 11px; }
.mini { flex: none; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.mini.danger { color: var(--red); border-color: #f3c9c9; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } }
/* ============ 登录门（页面内登录，替代 Basic 弹窗） ============ */
/* 登录门遮住整个应用（含所有弹层：sheet 100 / bank 130 / toast 200） */
body.is-gated .app-shell { display: none; }
.gate {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 300;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
}
.gate-card {
  width: 100%; max-width: 360px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--sh-2);
  padding: 30px 26px 22px;
}
.gate-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 18px;
}
.gate-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.gate-title { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.gate-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 18px; }
.gate-err {
  background: var(--red-soft); border: 1px solid #f5c6c6; color: var(--red);
  border-radius: var(--r-s); padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  margin-bottom: 14px;
}
.gate-err[hidden] { display: none; }
.gate-fg { margin-bottom: 14px; }
.gate-fg label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.gate-fg input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-s);
  font-size: 15px; background: #fff; color: var(--ink); outline: none;
  transition: border-color .12s ease;
}
.gate-fg input:focus { border-color: var(--brand); }
.gate-fg input::placeholder { color: var(--ink-3); }
.gate-btn {
  width: 100%; padding: 13px; margin-top: 4px;
  border: none; border-radius: var(--r-m);
  background: var(--brand); color: #fff; font-size: 15.5px; font-weight: 700;
  cursor: pointer; transition: filter .12s ease;
}
.gate-btn:hover { filter: brightness(1.06); }
.gate-btn:active { transform: translateY(1px); }
.gate-btn:disabled { opacity: .55; cursor: not-allowed; }
.gate-tip { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.6; }
@media (max-width: 420px) {
  .gate { padding: 16px; align-items: flex-start; padding-top: 12vh; }
}