/* ============================================================
   陪玩收支管理 —— 样式
   浅色（白灰 + 蓝色强调）为默认主题；深色主题在 html[data-theme="dark"] 覆盖。
   主题切换由 app.js 负责（写 localStorage，下次打开沿用）。

   约定：
   - 所有「语义色」都提供 --x-rgb 三元组，浅色底一律用 rgba(var(--x-rgb), .12)
     这种写法，避免为每个透明度各定义一个变量。
   - 需要随主题反转的「叠加层」（深色下提亮、浅色下压暗）用 --lift-* / --row-hover。
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- 表面：白灰 ---- */
  --bg: #f3f5f8;
  --bg-2: #eaedf2;
  --panel: #ffffff;
  --panel-2: #f2f4f7;
  --panel-3: #e9ecf1;
  --line: #e3e7ee;
  --line-2: #d0d6e0;
  --line-3: #b9c2d0;
  --input-bg: #ffffff;
  --seg-bg: #eceff4;
  --box-bg: #f4f6f9;
  --thead-bg: #ffffff;
  --thead-actions-bg: #f7f9fc;
  --row-actions-hover: #eef1f6;
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --toast-bg: rgba(255, 255, 255, 0.97);
  --modal-bg: #ffffff;
  --auth-card-1: rgba(255, 255, 255, 0.97);
  --auth-card-2: rgba(247, 249, 252, 0.99);
  --backdrop: rgba(17, 24, 39, 0.42);
  --grid-line: rgba(31, 41, 55, 0.05);

  /* ---- 文字 ---- */
  --text: #1f2328;
  --muted: #5c6875;
  --muted-2: #6b7684;
  --muted-3: #7d8794;
  --placeholder: #a8b1be;

  /* ---- 强调色：蓝 ----
     注意 --accent-2 是「浅底上的强调色文字」（页签选中、chip、金额等），
     在浅色主题里必须比 --accent **更深**才有足够对比度；深色主题里反过来（更浅）。
     直接把深色的那套浅值搬过来会得到 2.58:1，低于可读下限（实测踩过）。 */
  --accent-rgb: 37, 99, 235;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-deep: #1e40af;
  --ink-on-accent: #ffffff;

  /* ---- 语义色：收入 / 支出 / 时长 / 均价 ---- */
  --green-rgb: 22, 163, 74;
  --green: #16a34a;
  --green-light-rgb: 74, 222, 128;
  --green-light: #4ade80;
  --green-deep: #15803d;
  --green-text: #15803d;
  --green-text-strong: #166534;
  --green-text-dim: #4d7c5f;

  --red-rgb: 220, 38, 38;
  --red: #dc2626;
  --red-light: #f87171;
  --red-dim: #b91c1c;
  --red-deep: #991b1b;
  --red-text: #c81e1e;
  --red-text-2: #b42318;

  --blue-rgb: 37, 99, 235;
  --blue: #2563eb;
  --blue-light: #60a5fa;
  --blue-deep: #1e40af;
  --blue-text: #1d4ed8;

  --purple-rgb: 124, 58, 237;
  --purple: #7c3aed;
  --purple-deep: #5b21b6;
  --purple-text: #6d28d9;

  --amber-rgb: 217, 119, 6;
  --amber: #d97706;
  --amber-text: #b45309;

  --cal-amt-text: #1f2328;
  --cal-on-strong: #052e16;

  /* ---- 叠加层：浅色下压暗，深色下提亮 ---- */
  --lift-02: rgba(16, 24, 40, 0.02);
  --lift-026: rgba(16, 24, 40, 0.026);
  --lift-03: rgba(16, 24, 40, 0.03);
  --lift-032: rgba(16, 24, 40, 0.032);
  --lift-035: rgba(16, 24, 40, 0.035);
  --lift-06: rgba(16, 24, 40, 0.06);
  --lift-07: rgba(16, 24, 40, 0.07);
  --row-hover: rgba(16, 24, 40, 0.028);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.1);
  --shadow-sm: 0 3px 12px rgba(16, 24, 40, 0.07);
  --actions-shadow: -8px 0 10px -6px rgba(16, 24, 40, 0.14);
}

/* ---- 深色主题（原来的战术风） ---- */
html[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0a0e13;
  --bg-2: #0f151d;
  --panel: #131b25;
  --panel-2: #172130;
  --panel-3: #1d2939;
  --line: #22303f;
  --line-2: #2c3d4f;
  --line-3: #3a5068;
  --input-bg: #0d131b;
  --seg-bg: #0d131b;
  --box-bg: rgba(0, 0, 0, 0.22);
  --thead-bg: #131b25;
  --thead-actions-bg: #161f2b;
  --row-actions-hover: #18222e;
  --topbar-bg: rgba(10, 14, 19, 0.86);
  --toast-bg: rgba(23, 33, 48, 0.97);
  --modal-bg: #131b25;
  --auth-card-1: rgba(23, 33, 48, 0.96);
  --auth-card-2: rgba(15, 21, 29, 0.98);
  --backdrop: rgba(3, 6, 10, 0.72);
  --grid-line: rgba(255, 255, 255, 0.032);

  --text: #e8eef6;
  --muted: #8b9cb0;
  --muted-2: #6b7d92;
  --muted-3: #55677c;
  --placeholder: #4e5f72;

  --accent-rgb: 255, 138, 43;
  --accent: #ff8a2b;
  --accent-2: #ffb347;
  --accent-deep: #ff6a00;
  --ink-on-accent: #1a0e02;

  --green-rgb: 47, 208, 122;
  --green: #2fd07a;
  --green-light-rgb: 126, 240, 176;
  --green-light: #7ef0b0;
  --green-deep: #1d7f4c;
  --green-text: #a8ecc6;
  --green-text-strong: #d8ffe9;
  --green-text-dim: #7fc9a0;

  --red-rgb: 255, 95, 95;
  --red: #ff5f5f;
  --red-light: #ff8f8f;
  --red-dim: #b04545;
  --red-deep: #8c2b2b;
  --red-text: #ff9d9d;
  --red-text-2: #ffb3b3;

  --blue-rgb: 74, 168, 255;
  --blue: #4aa8ff;
  --blue-light: #9ed0ff;
  --blue-deep: #1f5f96;
  --blue-text: #9ed0ff;

  --purple-rgb: 169, 139, 255;
  --purple: #a98bff;
  --purple-deep: #5b45a8;
  --purple-text: #cbb8ff;

  --amber-rgb: 255, 176, 90;
  --amber: #ffb347;
  --amber-text: #ffcd94;

  --cal-amt-text: #eaf3ff;
  --cal-on-strong: #06210f;

  --lift-02: rgba(255, 255, 255, 0.02);
  --lift-026: rgba(255, 255, 255, 0.026);
  --lift-03: rgba(255, 255, 255, 0.03);
  --lift-032: rgba(255, 255, 255, 0.032);
  --lift-035: rgba(255, 255, 255, 0.035);
  --lift-06: rgba(255, 255, 255, 0.06);
  --lift-07: rgba(255, 255, 255, 0.07);
  --row-hover: rgba(255, 255, 255, 0.026);

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);
  --actions-shadow: -8px 0 10px -6px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

/* 关键：本页大量用 hidden 属性切换元素，而下面的类选择器会把浏览器默认的
   [hidden]{display:none} 覆盖掉（.modal 设了 display:grid 就是典型），
   导致「隐藏」元素照样显示（例如登录页冒出空的编辑弹层）。用这条兜底。 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(var(--accent-rgb), 0.06), transparent 62%),
    radial-gradient(900px 520px at 108% 4%, rgba(var(--blue-rgb), 0.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: 0.2px; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
h3 { font-size: 16px; }
p { margin: 0; }
ul { margin: 6px 0 0; padding-left: 20px; }
li { margin: 3px 0; }
em { font-style: normal; color: var(--muted-2); font-size: 12px; }
b { color: var(--text); }

input, select, button, textarea { font: inherit; color: inherit; }
/* color-scheme 由 :root / html[data-theme] 决定（浅色 light、深色 dark），
   这里必须 inherit：写死 dark 会让浅色主题下的日期/时间选择器仍是黑底。 */
input, select, textarea { color-scheme: inherit; }

/* ------------------------------- 按钮 ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .08s, color .16s;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--panel-3); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent; color: var(--ink-on-accent); font-weight: 700;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.3);
}
.btn-primary:hover { filter: brightness(1.07); background: linear-gradient(135deg, var(--accent-2), var(--accent)); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel-2); }

.btn-danger { background: rgba(var(--red-rgb), 0.12); border-color: rgba(var(--red-rgb), 0.4); color: var(--red-text-2); }
.btn-danger:hover { background: rgba(var(--red-rgb), 0.2); border-color: var(--red); }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-chip {
  padding: 5px 10px; font-size: 12.5px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.09); border-color: rgba(var(--accent-rgb), 0.28); color: var(--accent-2);
}
.btn-chip:hover { background: rgba(var(--accent-rgb), 0.18); }

/* ---------------------------- 美化下拉框 ----------------------------
   原生 <select> 的弹出层由操作系统绘制，CSS 完全改不动
   （Windows 上永远是系统蓝高亮、直角、系统字体），和本应用的风格对不上。
   所以这里保留原生 select 负责「存值 + 触发 change」，另外画一个按钮 + 弹出层；
   没跑 JS 时原生 select 照旧可用（渐进增强，不会白屏）。
   注意：隐藏的是原生控件本身，它的 value / options / change 行为一律不变。 */
.sel { position: relative; display: block; min-width: 0; width: 100%; }
/* 这几条加上 !important 不是偷懒：被隐藏的原生控件是 position:absolute，
   会被算进页面的滚动溢出区域。而「筛选栏」那几条规则的**特异性更高**
   （.filters input / .filters select { width:auto; min-width:120px }），
   会把下面的 1px 盖掉 —— 实测那个 opacity:0 的 #repayFilterDeposit
   在窄屏下宽达 386px，足以给整页顶出一条横向滚动条，而用户完全看不出是谁撑的。
   所以这里显式钉死成 1px，别让别处的表单宽度规则命中被隐藏的控件。 */
.sel > .sel-native,
.filters .sel-native,
.modal-body .sel-native,
.import-row .sel-native {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.sel-native {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0; padding: 0; border: 0;
}
.sel-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; min-height: 40px; text-align: left;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.sel-btn:hover { border-color: var(--line-2); }
.sel-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }
.sel.is-open > .sel-btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }
.sel.is-disabled > .sel-btn { opacity: .55; cursor: not-allowed; }
.sel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-arrow { flex: 0 0 auto; color: var(--muted-2); transition: transform .16s; }
.sel.is-open .sel-arrow { transform: rotate(180deg); }
.sel-pop {
  /* fixed 定位：绝对定位会被弹窗的 .modal-body（overflow:auto）裁掉，
     而且会把弹窗的滚动高度撑大 —— 表现为「面板显示不全，还得往下滑」。
     fixed 不受祖先 overflow 裁剪（祖先没有 transform 时），能跳出来。
     具体坐标和宽度由 JS 的 placePopup() 算（会做上下翻转和边界收拢）。 */
  position: fixed; z-index: 80;
  max-height: 264px; overflow-y: auto; padding: 5px; margin: 0;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.sel-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font-size: 13px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
/* 名字占满剩余空间、超长才省略；右侧的补充信息（到手比例）永远不压缩 */
.sel-opt-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sel-opt-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.sel-opt:hover, .sel-opt.is-cursor { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-2); }
.sel-opt:hover .sel-opt-meta, .sel-opt.is-cursor .sel-opt-meta { color: var(--accent-2); opacity: .8; }
.sel-opt.is-sel { font-weight: 700; color: var(--accent-2); }
.sel-opt.is-sel .sel-opt-meta { color: var(--accent-2); opacity: .8; }
.sel-opt.is-sel .sel-opt-name::after {
  /* 用 CSS 画对勾，不再塞 ✓ 字符（字体不同渲染差异大） */
  content: ''; display: inline-block; width: 9px; height: 5px; margin-left: 7px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
}

/* ---------------------- 自定义日期 / 月份选择器 ----------------------
   为什么不用原生：<input type="date"> 的日历弹层是浏览器画的（蓝色表头、
   系统字体、系统布局），CSS 只能改到右边的日历小图标，弹层一点碰不到，
   和本应用风格对不上。这里保留原生 input 存值 + required 校验，
   另外画按钮和面板。 */
.dp-pop {
  width: 262px; padding: 7px;
  /* 日历要整块看得见：默认给足高度，只有视口特别矮时才内部滚动 */
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 1px 1px 6px;
}
.dp-title { font-size: 13.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.dp-nav {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.dp-nav:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-2); }
.dp-nav:focus-visible { outline: none; border-color: var(--accent); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week { margin-bottom: 4px; }
.dp-week span { text-align: center; font-size: 11px; color: var(--muted-2); padding: 2px 0; }
.dp-day {
  height: 29px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.dp-day:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-2); }
.dp-day.is-out { color: var(--muted-2); opacity: .55; }
.dp-day.is-today { border-color: rgba(var(--accent-rgb), 0.5); font-weight: 700; }
.dp-day.is-sel { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); font-weight: 700; }
.dp-day.is-sel:hover { background: var(--accent-2); color: var(--ink-on-accent); }
.dp-day:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25); }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 2px 0 5px; }
.dp-month {
  height: 36px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 13px; cursor: pointer;
}
.dp-month:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-2); }
.dp-month.is-today { border-color: rgba(var(--accent-rgb), 0.5); font-weight: 700; }
.dp-month.is-sel { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); font-weight: 700; }
.dp-month.is-sel:hover { background: var(--accent-2); color: var(--ink-on-accent); }
.dp-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line);
}
.dp-act {
  padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 7px;
  background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.dp-act:hover { color: var(--text); border-color: var(--accent); }
.dp-act.is-primary { color: var(--accent-2); border-color: rgba(var(--accent-rgb), 0.45); }
.dp-act.is-primary:hover { background: rgba(var(--accent-rgb), 0.1); }
/* 空值时按钮文字淡一点，一眼看出「还没选」 */
.sel-label.is-empty { color: var(--muted-2); }
/* 键盘 Tab 到被隐藏的原生控件时，把焦点画在按钮上（否则看不到焦点在哪） */
.sel:focus-within > .sel-btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }

/* ------------------------------- 表单 ------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: 12.5px; color: var(--muted); }
/* 表单控件统一样式：textarea 曾经漏在外面，导致设置页的「接单平台」是白底白字（看不清） */
.field input, .field select, .field textarea,
.filters input, .filters select,
.import-row input[type=file], .import-row select, .import-row textarea,
.modal-body input, .modal-body select, .modal-body textarea {
  padding: 9px 11px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  min-width: 0;
}
/* 美化过的下拉：按钮要跟上面的输入框长得一样（原生 select 被藏起来了） */
.field .sel-btn, .filters .sel-btn, .modal-body .sel-btn, .import-row .sel-btn {
  padding: 9px 11px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
}
.filters .sel { width: auto; min-width: 130px; }
.field textarea, .modal-body textarea, .import-row textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  min-height: 84px;
}
/* 搜索框：输入框里不放提示文字，用一个放大镜符号表明它是搜索。
   注意不要给 wrapper 加 flex:1 —— 它会把 .filters 的弹性布局撑破（390px 下溢出 69px）。 */
.search-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.search-wrap .search-icon {
  position: absolute; left: 10px; font-size: 15px; color: var(--muted-2);
  pointer-events: none; line-height: 1;
}
.search-wrap input[type=search] { padding-left: 28px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus,
.filters input:focus, .filters select:focus,
.import-row select:focus, .import-row textarea:focus,
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
.field input::placeholder, .field textarea::placeholder, .modal-body textarea::placeholder { color: var(--placeholder); }
/* 只读/禁用也要保持深色，不然会出现"看起来能改其实不能"的错觉 */
.field input:disabled, .field textarea:disabled, .field input[readonly],
.modal-body input:disabled, .modal-body textarea:disabled {
  background: var(--lift-03);
  color: var(--muted);
  cursor: not-allowed;
}
.field-strong input {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
  font-weight: 700; color: var(--accent-2);
}
.field-strong input:focus { border-color: var(--accent); }

.form-grid { display: flex; flex-direction: column; gap: 12px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.calc-hint { font-size: 12px; color: var(--muted-2); background: rgba(var(--blue-rgb), 0.07); border-left: 2px solid rgba(var(--blue-rgb), 0.5); padding: 6px 10px; border-radius: 0 6px 6px 0; }
.calc-hint.is-warn { color: var(--amber-text); background: rgba(var(--accent-rgb), 0.1); border-left-color: var(--accent); }
.form-error { font-size: 12.5px; color: var(--red-text); background: rgba(var(--red-rgb), 0.1); border: 1px solid rgba(var(--red-rgb), 0.3); padding: 7px 10px; border-radius: var(--radius-sm); }
/* 三个时间快捷按钮竖排整行：窗口多窄都不会挤爆或截断文字，也不会右边空一片 */
.quick-row { display: flex; flex-direction: column; gap: 7px; }
.quick-row .btn-chip {
  width: 100%; padding: 8px 12px; font-size: 13px; border-radius: 9px;
  justify-content: flex-start;
  background: rgba(var(--accent-rgb), 0.07);
  border-color: rgba(var(--accent-rgb), 0.26);
}
.quick-row .btn-chip:hover { background: rgba(var(--accent-rgb), 0.16); }

/* 计时进行中（.is-on）的样式**必须放在 .quick-row .btn-chip 之后**。
 *
 * 踩过的坑：原来 .btn-chip.is-on 写在前面，它和 .quick-row .btn-chip 特异性相同
 * （都是 0,2,0），同特异性靠源码顺序决胜 —— 背景被后面的 .quick-row 规则覆盖成
 * 浅色（rgba(accent,.07)），而 color 只有 .is-on 设过、仍是 --ink-on-accent（近白）。
 * 于是「白字 + 浅底」，计时秒数完全看不见（深色主题下同理，是深字配深底）。
 * 加上 :hover 变体是为了盖过 .quick-row .btn-chip:hover（特异性 0,3,0）。 */
.btn-chip.is-on,
.quick-row .btn-chip.is-on,
.btn-chip.is-on:hover,
.quick-row .btn-chip.is-on:hover {
  background: var(--accent);
  color: var(--ink-on-accent);
  border-color: transparent;
  font-weight: 700;
}

/* 常用模板 chips */
.tpl-row { display: flex; align-items: flex-start; gap: 8px; }
.tpl-label { font-size: 12px; color: var(--muted-2); padding-top: 6px; flex: 0 0 auto; }
.tpl-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
/* 常用模板 chip 里拼了「2h × ¥60 · 陪玩单 · 私单 · 客户名」一长串，而且是 nowrap。
   客户名最长 30 个字符，chip 能到 368px，而窄屏那一列只有 319px ——
   整个页面被撑出横向滚动条（390px 手机上实测文档宽 428px）。
   项目规则是任何宽度都不许有横向滚动条，所以这里必须能截断。 */
.tpl-chip {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(var(--green-rgb), 0.32);
  background: rgba(var(--green-rgb), 0.08);
  color: var(--green-text);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s;
}
.tpl-chip:hover { background: rgba(var(--green-rgb), 0.18); border-color: rgba(var(--green-rgb), 0.55); }
.tpl-chip b { color: var(--green-text-strong); font-weight: 700; }
.tpl-chip i { font-style: normal; color: var(--green-text-dim); font-size: 11.5px; }
/* 租号的两个字段不需要虚线框圈起来：它和上面的「日期/金额」是同级字段，
   圈起来反而像调试残留或者「这一块没做完」。用普通间距分组就够了。 */
.rent-block { display: flex; flex-direction: column; gap: 12px; }

/* 平台抽成 / 真实到手 汇总条 */
.net-box {
  display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 10px; align-items: baseline;
  background: rgba(var(--blue-rgb), 0.07);
  border: 1px solid rgba(var(--blue-rgb), 0.22);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 12.5px;
}
.net-box > span { color: var(--muted); }
.net-box > b { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
/* 用 --green-text 而不是 --green：浅色主题下 #16a34a 对白底只有 3.30:1（低于 AA 的 4.5:1），
   #15803d 是 5.02:1。--green 继续用于柱子/圆点/边框。 */
.net-box > b.is-net { color: var(--green-text); }
.net-box > b.is-fee { color: var(--red-text); }
.net-box.is-zero > b.is-fee { color: var(--muted-2); }

/* ------------------------------- 分段控件 ------------------------------- */
.seg { display: inline-flex; background: var(--seg-bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 3px; }
.seg-btn {
  border: 0; background: transparent; color: var(--muted);
  padding: 7px 15px; border-radius: 999px; cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { background: rgba(var(--accent-rgb), 0.16); color: var(--accent-2); font-weight: 700; }
.seg-scope { margin-bottom: 14px; }
.seg-source { width: 100%; justify-content: space-between; }
.seg-source .seg-btn { flex: 1; }
.seg-hint { margin-top: 9px; }

/* ------------------------------- 登录页 ------------------------------- */
.auth-screen {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 28px 18px;
}
.auth-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-grid {
  position: absolute; inset: -2px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 34%, #000 12%, transparent 74%);
}
.bg-glow {
  position: absolute; left: 50%; top: -220px; width: 760px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2), transparent 66%);
  filter: blur(6px);
}
.auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  background: linear-gradient(180deg, var(--auth-card-1), var(--auth-card-2));
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  backdrop-filter: blur(6px);
}
.auth-brand { display: flex; align-items: center; gap: 12px; }
/* 登录页只留主标题，不再有副标题和底部小字 */
.auth-brand h1 { font-size: 22px; letter-spacing: 1px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
/* 图标自带圆角底板，所以容器不再画背景/边框，避免"框套框"；只保留一圈橙色光晕 */
.brand-logo {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.06);
  border-radius: 13px;
}
.brand-logo svg { display: block; }
.auth-tip { font-size: 12px; color: var(--muted-2); line-height: 1.55; }

/* ------------------------------- 顶栏 & 页签 ------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mini {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}
.brand-mini svg { display: block; }
.brand-name { font-weight: 700; letter-spacing: .3px; }
.pill { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.pill-live { border-color: rgba(var(--green-rgb), 0.4); color: var(--green-text); background: rgba(var(--green-rgb), 0.08); }
.pill-live.is-busy { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent-2); background: rgba(var(--accent-rgb), 0.1); }
.pill-live.is-error { border-color: rgba(var(--red-rgb), 0.45); color: var(--red-text-2); background: rgba(var(--red-rgb), 0.1); }
.who { font-size: 12.5px; color: var(--muted); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs {
  display: flex; gap: 6px; padding: 10px 16px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
  /* 页签居中。注意必须用 `safe center`：普通 center 在内容溢出时会把
     开头那截顶到滚动区外面去，窄屏上就点不到第一个页签了。
     旧浏览器不认 safe 关键字，保留上面的 center 兜底。 */
  justify-content: center;
}
@supports (justify-content: safe center) {
  .tabs { justify-content: safe center; }
}
@media (max-width: 430px) {
  /* 6 个页签在 360~400px 的屏上会顶到 405px 宽，最后那个「记事本」被裁掉一截。
     这里把内边距和字距收紧，让 6 个刚好放得下（项目规则：任何宽度都不能有横向滚动条）。
     实测 360px：收紧前 405px，收紧后 ≈330px。 */
  .tabs { gap: 1px; padding: 8px 2px 0; }
  .tab { padding: 8px 1px; font-size: 11px; letter-spacing: -0.7px; }
}

.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 1px solid transparent; border-bottom: 0;
  background: transparent; color: var(--muted);
  padding: 9px 16px; border-radius: 10px 10px 0 0; cursor: pointer;
  white-space: nowrap; font-size: 13.5px;
  flex: 0 0 auto;
}
.tab:hover { color: var(--text); background: var(--lift-03); }
.tab.is-active { color: var(--accent-2); background: var(--panel); border-color: var(--line); font-weight: 700; }

.content { display: block; padding: 16px; max-width: 1240px; margin: 0 auto; width: 100%; }
.view { display: none; flex-direction: column; gap: 14px; }
.view.is-active { display: flex; }

/* ------------------------------- 面板 ------------------------------- */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--muted-2); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1180px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .grid-3 { grid-template-columns: 1fr; }
}
/* 并排的两块内容高度对齐，避免「一块高一块矮」的锯齿感 */
.grid-even { align-items: stretch; }
.grid-even > .panel { display: flex; flex-direction: column; }
.grid-even > .panel > .list-block, .grid-even > .panel > .table-wrap { flex: 1; }
.split { display: grid; grid-template-columns: minmax(300px, 340px) 1fr; gap: 14px; align-items: start; }
.panel-form { position: sticky; top: 62px; }

/* ------------------------------- 总览：顶部与提醒 ------------------------------- */
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-date { font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.alert-card {
  border-radius: var(--radius);
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
  padding: 13px 15px;
  display: flex; flex-direction: column; gap: 10px;
}
.alert-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.alert-head b { font-size: 14px; }
.alert-icon { font-size: 15px; }
.alert-title { font-size: 12.5px; color: var(--accent-2); }
.alert-head .btn { margin-left: auto; }
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.alert-list li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--box-bg); border-radius: 9px; padding: 8px 11px; font-size: 13px;
}
.alert-account { font-weight: 700; min-width: 84px; }
.alert-days {
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.5); color: var(--accent-2); background: rgba(var(--accent-rgb), 0.14);
}
.alert-days.is-expired { border-color: rgba(var(--red-rgb), 0.55); color: var(--red-text-2); background: rgba(var(--red-rgb), 0.14); }
.alert-meta { color: var(--muted); font-size: 12.5px; margin-left: auto; font-variant-numeric: tabular-nums; }

/* 支出构成下方的小指标 */
.mini-split { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.mini-split > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mini-split i { font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.mini-split b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* ------------------------------- 统计卡片 -------------------------------
   设计说明（参考 Mobbin / Refero 上成熟 SaaS 的做法）：
   一屏 6~7 张卡时，**每张一条彩色边**是最吵的做法 —— 颜色互相打架，
   眼睛没有落点，而且颜色并没有稳定语义（抽成和支出都是红的、时长和存单都是蓝的）。
   改成：卡片一律中性白底 + 极浅边框，**只有金额数字带语义色**，
   靠字号/字重/留白分层；唯一的主指标（真实到手）用极淡的蓝底轻微强调。 */
/* 列数写死，不靠 auto-fit。
   auto-fit + minmax 会按容器宽度"能塞几张塞几张"，7 张卡就会排成 5+2 或 6+1，
   第二行孤零零一两张、右边一大块空白，比原来还难看。
   固定 4 列时 7 张卡正好排成 4+3，两行都填得比较满。 */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px 12px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 2px;
  min-height: 104px;
  transition: border-color .16s, box-shadow .16s;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
/* 顶部一道 2px 细线代替原来的 3px 粗色条：够区分，又不抢注意力 */
.card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--line-2); opacity: .8;
}
.card.is-income::before { background: var(--green); }
.card.is-expense::before { background: var(--red); }
.card.is-profit::before { background: var(--accent); }
.card.is-hours::before { background: var(--blue); }
.card.is-avg::before { background: var(--purple); }
.card.is-fee::before { background: var(--red); }
.card.is-deposit::before { background: var(--accent); }
.card.is-fee .card-value { color: var(--red-text-2); }
/* 真实到手是主指标：用极淡的底 + 稍重的边框强调，而不是亮色块 */
.card.is-profit {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), var(--panel));
  border-color: rgba(var(--accent-rgb), 0.28);
}
.card-label { font-size: 12px; color: var(--muted); letter-spacing: .2px; }
/* 钱是主角：数字比标签大一号，字重拉满，等宽数字保证竖排对齐 */
.card-value {
  font-size: 27px; font-weight: 800; letter-spacing: -.2px; line-height: 1.22;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.card-value small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.card-sub { font-size: 11px; color: var(--muted-2); margin-top: auto; line-height: 1.5; padding-top: 4px; }
.is-income .card-value { color: var(--green); }
.is-expense .card-value { color: var(--red-text); }
.is-profit .card-value { color: var(--accent-2); }
.is-hours .card-value { color: var(--blue-text); }
.is-avg .card-value { color: var(--purple-text); }
.is-deposit .card-value { color: var(--accent-2); }
.card-value.is-negative { color: var(--red-text) !important; }

/* 首次使用引导：一条完整的操作路径，而不是一堆 0 */
.welcome {
  border-radius: var(--radius);
  border: 1px dashed var(--line-2);
  background: linear-gradient(180deg, rgba(var(--blue-rgb), 0.06), transparent);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.welcome h3 { font-size: 16px; }
.welcome p { font-size: 13px; color: var(--muted); }
.welcome-steps { display: flex; gap: 10px; flex-wrap: wrap; }
.welcome-step {
  flex: 1 1 240px; min-width: 220px;
  background: var(--lift-03);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.welcome-step b { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.welcome-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.16); color: var(--accent-2); font-size: 12.5px; font-weight: 800;
}
.welcome-step span { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.welcome-step .btn { align-self: flex-start; margin-top: 2px; }

/* 空状态：一行字 + 一个明确的下一步 */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px 10px; text-align: center; }
.empty-state .empty { padding: 0; }
.empty-state .btn { flex: 0 0 auto; }

/* ------------------------------- 预算/目标进度 ------------------------------- */
.budget-panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
  box-shadow: var(--shadow-sm);
  padding: 14px 15px;
  display: flex; flex-direction: column; gap: 14px;
}
.budget-row { display: flex; flex-direction: column; gap: 6px; }
.budget-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.budget-top > span:first-child { color: var(--muted); }
.budget-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.budget-num i { font-style: normal; font-weight: 400; color: var(--muted-2); }
.budget-bar { height: 8px; border-radius: 999px; background: var(--lift-06); overflow: hidden; }
.budget-bar > i { display: block; height: 100%; border-radius: 999px; transition: width .35s; }
.budget-bar.is-income > i { background: linear-gradient(90deg, var(--green-deep), var(--green)); }
.budget-bar.is-expense > i { background: linear-gradient(90deg, var(--red-dim), var(--red)); }
.budget-bar.is-over > i { background: linear-gradient(90deg, var(--red), var(--red-light)); }
.budget-extra { font-size: 12px; color: var(--muted-2); }
.budget-extra b { color: var(--accent-2); }
.budget-row:has(.budget-bar.is-over) .budget-extra b { color: var(--red-text); }

/* ------------------------------- 收入日历 ------------------------------- */
.cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-w { text-align: center; font-size: 11.5px; color: var(--muted-2); padding-bottom: 3px; }
.cal-d {
  position: relative; min-height: 46px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--lift-02);
  padding: 4px 6px; display: flex; flex-direction: column; align-items: flex-start;
  cursor: pointer; transition: border-color .15s, transform .08s;
}
.cal-d:hover { border-color: var(--accent); }
.cal-d:active { transform: scale(0.98); }
.cal-d.is-blank { border: 0; background: transparent; cursor: default; min-height: 46px; }
.cal-day { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-amt { font-size: 12px; font-weight: 700; color: var(--cal-amt-text); margin-top: auto; font-variant-numeric: tabular-nums; }
/* 收入热力 5 档 */
.cal-d.lv-0 { background: var(--lift-02); }
.cal-d.lv-1 { background: rgba(var(--green-rgb), 0.16); border-color: rgba(var(--green-rgb), 0.28); }
.cal-d.lv-2 { background: rgba(var(--green-rgb), 0.30); border-color: rgba(var(--green-rgb), 0.40); }
.cal-d.lv-3 { background: rgba(var(--green-rgb), 0.50); border-color: rgba(var(--green-rgb), 0.55); }
.cal-d.lv-4 { background: rgba(var(--green-rgb), 0.72); border-color: rgba(var(--green-light-rgb), 0.7); }
.cal-d.lv-3 .cal-amt, .cal-d.lv-4 .cal-amt { color: var(--cal-on-strong); }
.cal-d.lv-3 .cal-day, .cal-d.lv-4 .cal-day { color: var(--cal-on-strong); }
.cal-d.is-today { outline: 2px solid var(--accent); outline-offset: -1px; }
.cal-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; flex-wrap: wrap; }
.cal-scale { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted-2); }
.cal-scale i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-scale i[data-lv="0"] { background: var(--lift-06); }
.cal-scale i[data-lv="1"] { background: rgba(var(--green-rgb), 0.25); }
.cal-scale i[data-lv="2"] { background: rgba(var(--green-rgb), 0.45); }
.cal-scale i[data-lv="3"] { background: rgba(var(--green-rgb), 0.65); }
.cal-scale i[data-lv="4"] { background: rgba(var(--green-rgb), 0.85); }

/* ------------------------------- 图表 ------------------------------- */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 158px; padding: 6px 4px 0; overflow-x: auto; }
.chart-mini { height: 112px; gap: 4px; }
.chart-col { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.chart-bars { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.chart-bar { width: 44%; max-width: 22px; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s; }
.chart-bar.income { background: linear-gradient(180deg, var(--green), rgba(var(--green-rgb), 0.25)); }
.chart-bar.expense { background: linear-gradient(180deg, var(--red-light), rgba(var(--red-rgb), 0.22)); }
.chart-bar.is-empty { background: var(--lift-07); }
.chart-x { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.chart-x.is-today { color: var(--accent-2); font-weight: 700; }
/* 只有 7 根柱，空间够，可以再显示一行日期 */
.chart-x2 { font-size: 10px; color: var(--muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-profit { font-size: 10.5px; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.chart-profit.is-negative { color: var(--red-text); }
.chart-col:hover .chart-bar { filter: brightness(1.15); }

/* ------------------------------- 分布列表 ------------------------------- */
.list-block { display: flex; flex-direction: column; gap: 11px; }
.dist-row { display: flex; flex-direction: column; gap: 5px; }
.dist-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.dist-name { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.dist-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: 0 0 8px; }
.dist-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.dist-val b { color: var(--text); }
.dist-bar { height: 6px; border-radius: 999px; background: var(--lift-06); overflow: hidden; }
.dist-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.dist-bar.rent > i { background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)); }
.dist-bar.aw > i { background: linear-gradient(90deg, var(--red), var(--red-text)); }
.dist-bar.game > i { background: linear-gradient(90deg, var(--green), var(--green-light)); }
.dist-bar.plat > i { background: linear-gradient(90deg, var(--blue), var(--blue-text)); }
/* 支出构成：同一维度（支出类型）的不同取值，用同一色系的深浅区分即可，
   三个分类各给一个撞色（蓝/红/蓝）反而让人以为颜色另有含义。 */
.dist-bar.cat1 > i { background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)); }
.dist-bar.cat2 > i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); opacity: .72; }
.dist-bar.cat3 > i { background: linear-gradient(90deg, var(--accent), var(--blue)); opacity: .46; }
.dist-sub { font-size: 11.5px; color: var(--muted-2); }
.empty { color: var(--muted-2); font-size: 13px; text-align: center; padding: 18px 8px; }

/* ------------------------------- 表格 ------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
/* 表格必须能跟着容器收缩：早先写死 min-width:560px，容器一窄就顶出横向滚动条 */
table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }
th, td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--thead-bg); position: sticky; top: 0; }
th.col-actions, td.col-actions {
  position: sticky; right: 0; z-index: 2;
  background: var(--panel);
  box-shadow: var(--actions-shadow);
  border-left: 1px solid var(--line);
}
th.col-actions { z-index: 3; background: var(--thead-actions-bg); }
tbody tr:hover td.col-actions { background: var(--row-actions-hover); }
/* 允许换行的列：备注、客户等长文本列，让表格能被压缩 */
td.wrap, th.wrap { white-space: normal; min-width: 0; word-break: break-word; }
/* 客户名可能很长（如「抖音来的老板特别长的昵称」）：文案已在 JS 里截断成省略号，
   这里不再允许换行，否则长串数字/字母会被逐字断成好几行；上限收紧到 110px 保证整表不溢出 */
td.col-customer, th.col-customer { max-width: 110px; white-space: nowrap; }
@media (max-width: 1180px) {
  /* 备注列限宽：不限的话它会把表格撑到溢出（实测 950px 宽度下溢出 116px） */
  td.wrap, th.wrap { max-width: 150px; }
}

/* 次要信息列：按优先级逐级隐藏，避免把表格挤到横向滚动。
 *
 * 这里必须用**容器查询**，不能按视口宽度写 —— 踩过这个坑：
 * `.content` 有 max-width:1240px，屏幕超过 1600px 之后列表容器并不会跟着变宽
 * （双列布局下恒为 ~830px），但按视口写的 `@media (max-width: 1599px)` 一到
 * 1600px 就失效，于是「时段 / 备注」被重新显示出来，表格需要 1004px、
 * 容器只有 830px —— 超宽屏反而溢出 174px 出现横向滚动条（1600/1920/2560 全中）。
 * 容器查询让列数跟着**容器真实可用宽度**走，这才是约束的真正来源。
 * 阈值都是实测出来的：全列 ≈1004px、去掉时段+备注 ≈830px、再去掉单价 ≈775px。 */
/* #recentOrders 也要声明成容器：
   总览是双列布局，那一格在 1024~1440 视口下只有 440~570px，
   而这张表有 7 列、内容要 524~599px —— 于是**宽屏**下它的 .table-wrap 里
   反而出现了横向滚动条（窄屏早就切成卡片了，不会有事）。
   声明成容器后，下面按容器宽度写的 hide-* 才能在它身上生效。 */
#ordersTable, #expensesTable, #recentOrders, #depositBalanceTable, #repayTable { container-type: inline-size; }

@container (max-width: 1003px) {
  .hide-lg { display: none; }
}
@container (max-width: 833px) {
  .hide-xl { display: none; }
}
@container (max-width: 790px) {
  .hide-sm { display: none; }
}
/* 支出表列更少，账号/到期日/备注到这一步才让位 */
@container (max-width: 900px) {
  .hide-md { display: none; }
}
@container (max-width: 760px) {
  .hide-narrow { display: none; }
}
/* 总览那类很窄的容器（<=640px）：最近订单的时段/单价先让位 */
@container (max-width: 640px) {
  .hide-tight { display: none; }
}
/* 旧浏览器（Chrome <105 / Safari <16 / Firefox <110）不认容器查询。
   兜底：退回按视口隐藏。代价是超宽屏仍会多出列（就是上面那个 bug），
   但窄屏是好的 —— 总比完全不隐藏、手机上一堆滚动条强。 */
@supports not (container-type: inline-size) {
  @media (max-width: 1599px) {
    .hide-lg { display: none; }
  }
  @media (max-width: 1320px) {
    .hide-xl { display: none; }
  }
  @media (max-width: 1180px) {
    .hide-md { display: none; }
  }
  @media (max-width: 900px) {
    .hide-sm { display: none; }
  }
  @media (max-width: 1180px) {
    .hide-tight { display: none; }
  }
  @media (max-width: 760px) {
    .hide-narrow { display: none; }
  }
}
/* 手机/窄屏：整张表格换成卡片列表（见下方 .data-cards）。
   这一条是「整体布局」的切换，仍然按视口宽度判断。 */
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
}
tbody tr:hover { background: var(--row-hover); }
tbody tr.is-editing { background: rgba(var(--accent-rgb), 0.08); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 单元格里的第二行小字（例如老板名下面的日期、状态） */
.cell-sub { font-size: 10.5px; color: var(--muted-2); font-weight: 400; }
/* 单元格小字里的迷你标签（比如老板名下面的接单平台） */
.tag-mini { font-size: 10px; padding: 1px 6px; margin-left: 5px; vertical-align: 1px; }
/* 已还完的存单整行淡化，一眼区分「还欠着的」和「结清的」 */
tr.is-done td { opacity: 0.62; }
td.money { color: var(--accent-2); font-weight: 700; }
td.income { color: var(--green-text); font-weight: 700; }
td.expense { color: var(--red-text); font-weight: 700; }
tr.total-row td { border-top: 1px solid var(--line-2); border-bottom: 0; background: rgba(var(--accent-rgb), 0.06); font-weight: 700; }
td.wrap { white-space: normal; min-width: 130px; max-width: 260px; color: var(--muted); }
.tag { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.tag-rent { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent-2); background: rgba(var(--accent-rgb), 0.1); }
.tag-aw { border-color: rgba(var(--red-rgb), 0.42); color: var(--red-text-2); background: rgba(var(--red-rgb), 0.1); }
.tag-other { border-color: var(--line-2); color: var(--muted); }
.tag-plat { border-color: rgba(var(--blue-rgb), 0.45); color: var(--blue-text); background: rgba(var(--blue-rgb), 0.1); }
/* 租号还没到期 → 这笔钱不计入总览 */
.tag-pending { border-color: rgba(var(--amber-rgb), 0.5); color: var(--amber-text); background: rgba(var(--amber-rgb), 0.12); margin-left: 5px; }
/* 用户手动点了「完成」 */
.tag-done { border-color: rgba(var(--green-rgb), 0.45); color: var(--green-text); background: rgba(var(--green-rgb), 0.1); margin-left: 5px; }
/* 未入账的金额淡一点，一眼看出「这笔还没算进合计」 */
td.expense.is-pending { color: var(--muted-2); }
.pending-note { display: inline-block; font-size: 11.5px; color: var(--amber-text); }
.data-card.is-pending { border-style: dashed; }
/* 弹层里的勾选项 */
.field-check-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.check-row input[type='checkbox'] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; margin: 0; }
.field-check-wrap .hint { margin: 0; }
td.net { color: var(--green-text); font-weight: 700; }
.ico { display: inline-block; vertical-align: -1.5px; flex: 0 0 auto; }
.note-warn { color: var(--amber-text); font-size: 12px; white-space: normal; }
.row-actions { display: flex; gap: 6px; }

/* ------------------------------- 窄屏卡片列表 -------------------------------
   表格在窄屏必然要横向滚动（滚动条丑且难用），所以 ≤720px 直接换成卡片。
   卡片由 app.js 的 renderOrderCards / renderExpenseCards 生成。 */
.data-cards { display: none; flex-direction: column; gap: 10px; }
.data-card {
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.data-card.is-editing { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); }
.dc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-amount { font-size: 17px; font-weight: 800; color: var(--green-text); font-variant-numeric: tabular-nums; }
.dc-amount.is-expense { color: var(--red-text); }
.dc-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.dc-main .dc-sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }
/* 租号剩余天数徽标；7 天内到期转橙色提醒 */
.dc-remain {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted); background: var(--lift-03);
}
.dc-remain.is-soon { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent-2); background: rgba(var(--accent-rgb), 0.12); }
.dc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.dc-meta i { font-style: normal; color: var(--muted-2); }
.dc-memo { font-size: 12.5px; color: var(--muted); background: var(--lift-03); border-radius: 7px; padding: 6px 9px; word-break: break-all; }
.dc-actions { display: flex; gap: 7px; }
.dc-actions .btn { flex: 1; padding: 8px 6px; font-size: 12.5px; }
.dc-total {
  display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 13.5px;
  background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.dc-total .dc-amount { font-size: 15px; }

/* ------------------------------- 筛选 ------------------------------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters input, .filters select { width: auto; min-width: 120px; padding: 7px 10px; font-size: 13px; }
.filters input[type=search] { flex: 1; min-width: 150px; }

/* ============================ 记事本（一篇大文档） ============================
   左边大纲 + 中间正文，默认只读，点「编辑」才进编辑态。
   风格跟着全站走：卡片、细边线、tab 数字等宽。 */

.book {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}

/* 顶栏：左边面包屑，右边「编辑」 */
.book-bar { border-bottom: 1px solid var(--line); background: var(--panel-2); }
.book-bar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; min-height: 54px;
}
.book-crumb {
  font-size: 13.5px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book-crumb b { color: var(--text); font-weight: 650; }
.book-sep { margin: 0 7px; color: var(--muted-3); }
.book-editing { color: var(--accent-2); font-weight: 650; }
.book-meta {
  margin-left: auto; color: var(--muted-3); font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.book-body { display: flex; align-items: flex-start; min-height: 0; flex: 1; }

/* ------------------------------ 大纲 ------------------------------ */
.book-outline {
  flex: 0 0 240px; width: 240px;
  border-right: 1px solid var(--line);
  padding: 14px 10px 24px;
  position: sticky; top: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  align-self: flex-start;
}
.outline-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted-3); text-transform: uppercase; padding: 0 8px 8px;
}
.outline-item {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1.5;
  padding: 5px 8px; border-radius: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.outline-item:hover { background: var(--lift-06); color: var(--text); }
.outline-item.is-toggle::before { content: '▸'; color: var(--muted-3); margin-right: 5px; }
.outline-item.lv-0 { color: var(--text); font-weight: 650; }
.outline-item.lv-1 { padding-left: 20px; }
.outline-item.lv-2 { padding-left: 32px; }
.outline-item.lv-3 { padding-left: 44px; font-size: 12.5px; }
.outline-empty { color: var(--muted-3); font-size: 12.5px; padding: 0 8px; }

/* ------------------------------ 正文 ------------------------------ */
.book-main { flex: 1; min-width: 0; padding: 0 0 48px; }
.book-error { margin: 12px 20px 0; }

.book-doc { max-width: 780px; margin: 0 auto; padding: 40px 26px 0; }
.book-title {
  font-size: 30px; font-weight: 750; line-height: 1.3;
  text-align: center; margin: 8px 0 10px; letter-spacing: -0.01em;
}
.book-sub {
  text-align: center; color: var(--muted-3); font-size: 12.5px;
  margin: 0 0 34px; font-variant-numeric: tabular-nums;
}
.book-empty { text-align: center; color: var(--muted-3); padding: 30px 0; }

/* 各种块 */
.bk { margin: 0 0 14px; line-height: 1.85; }
.bk-p { font-size: 14.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.bk-h1 { font-size: 24px; font-weight: 720; margin: 34px 0 14px; line-height: 1.4; }
.bk-h2 { font-size: 19px; font-weight: 700; margin: 26px 0 10px; line-height: 1.45; }
.bk-h3 { font-size: 16px; font-weight: 650; margin: 20px 0 8px; color: var(--text); }
.bk-li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; padding-left: 4px; }
.bk-li > span { flex: 1; min-width: 0; word-break: break-word; }
.li-dot {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-top: 10px;
}
.li-num { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-3); margin-top: 10px; }
.bk-hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.bk-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; color: var(--text);
}

/* 提示框 */
.bk-callout {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: 10px; padding: 13px 15px; font-size: 14px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.bk-callout .co-icon { flex: 0 0 auto; font-size: 16px; line-height: 1.6; }
.bk-callout .co-body { flex: 1; min-width: 0; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.bk-callout.tone-info { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.22); }
.bk-callout.tone-warn { background: rgba(var(--amber-rgb), 0.1); border-color: rgba(var(--amber-rgb), 0.3); }
.bk-callout.tone-ok { background: rgba(var(--green-rgb), 0.09); border-color: rgba(var(--green-rgb), 0.28); }

/* 折叠 */
.bk-toggle { border-left: 2px solid var(--line); padding-left: 12px; }
.tg-head {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 2px 0;
  font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.75;
}
.tg-head:hover { color: var(--accent-2); }
.tg-head > span { flex: 1; min-width: 0; word-break: break-word; }
.tg-tri {
  flex: 0 0 auto; width: 0; height: 0; margin-top: 9px;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.bk-toggle.is-collapsed .tg-tri { transform: rotate(0deg); }
.bk-toggle:not(.is-collapsed) .tg-tri { transform: rotate(90deg); }
.tg-body { padding: 6px 0 2px 13px; }

/* 行内格式 */
.ink-red { color: var(--red-text-2); }
.ink-blue { color: var(--accent-2); }
.ink-purple { color: #7c3aed; }
.ink-green { color: var(--green-text); }
.ink-grey { color: var(--muted); }
.bk mark { background: rgba(var(--amber-rgb), 0.28); color: inherit; padding: 0 2px; border-radius: 3px; }
.bk a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.bk.is-flash { animation: bk-flash 0.9s ease; }
@keyframes bk-flash {
  0% { background: rgba(var(--accent-rgb), 0.16); }
  100% { background: transparent; }
}

/* ------------------------------ 编辑态 ------------------------------ */
.book-editor { max-width: 860px; margin: 0 auto; padding: 26px 22px 0; }
.book-title-input {
  width: 100%; border: 0; border-bottom: 1px dashed var(--line);
  background: transparent; color: var(--text);
  font-size: 24px; font-weight: 720; padding: 6px 2px 10px; margin-bottom: 18px;
}
.book-title-input:focus { outline: none; border-bottom-color: var(--accent); }

.bk-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 5px 6px; border-radius: 8px; margin-bottom: 3px;
}
.bk-row:hover { background: var(--lift-03); }
.bk-row.is-child { margin-left: 22px; border-left: 2px solid var(--line); padding-left: 10px; }
/* 工具条平时也留着（淡淡的），指上去 / 光标进去才变清楚。
   以前是 opacity:0 —— 完全看不见，用户根本不知道这块能改类型、能上下移、能删。 */
.bk-tools {
  flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  opacity: 0.42; transition: opacity 0.12s ease; padding-top: 3px;
}
.bk-row:hover .bk-tools, .bk-row:focus-within .bk-tools { opacity: 1; }
.bk-content { flex: 1; min-width: 0; }

.bk-type {
  border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-size: 11.5px; border-radius: 6px;
  padding: 2px 3px; max-width: 84px; cursor: pointer;
}
.bk-mini, .bk-del {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font-size: 11px; line-height: 1; border-radius: 6px; padding: 4px 5px; cursor: pointer;
}
.bk-del:hover { border-color: rgba(var(--red-rgb), 0.5); color: var(--red-text-2); }
.bk-mini:hover { border-color: var(--accent); color: var(--accent-2); }
.bk-move { display: inline-flex; gap: 2px; }

.bk-input {
  width: 100%; display: block; resize: none; overflow: hidden;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--text); font-family: inherit; font-size: 14.5px; line-height: 1.8;
  padding: 5px 8px;
}
.bk-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); background: var(--panel); }
.bk-t-h1 { font-size: 22px; font-weight: 720; }
.bk-t-h2 { font-size: 18px; font-weight: 700; }
.bk-t-h3 { font-size: 15.5px; font-weight: 650; }
.bk-toggle-title { font-weight: 600; }
.bk-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.bk-children { padding: 2px 0 2px 8px; }
.bk-child-add { margin: 2px 0 4px 22px; }
/* 到最深一层时替掉「+ 往里加一块」的那句提示 */
.bk-depth-hint { margin: 2px 0 4px 22px; font-size: 12px; color: var(--muted-3); }
.bk-line { height: 1px; background: var(--line); margin: 12px 0; }
.bk-row.type-divider .bk-content { padding: 4px 8px; }
.bk-callout-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.bk-icon {
  width: 44px; text-align: center; font-size: 15px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--text); padding: 3px 4px;
}
.bk-tone {
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--muted); font-size: 12px; padding: 3px 5px; cursor: pointer;
}
.bk-add { margin: 14px 0 0 6px; }

/* 块类型菜单（敲 / 弹出） */
.modal-card-sm { max-width: 400px; }
.block-menu { max-height: 52vh; overflow-y: auto; padding: 6px 10px 14px; }
.block-menu-item {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 10px; border-radius: 8px; color: var(--text); font-size: 13.5px;
}
.block-menu-item:hover { background: var(--lift-06); }
.block-menu-item b { flex: 0 0 auto; font-weight: 650; }
.block-menu-item span { color: var(--muted-3); font-size: 12px; }

/* 窄屏：大纲收起来，正文占满 */
@media (max-width: 900px) {
  .book-outline { display: none; }
  .book-doc { padding: 26px 16px 0; }
  .book-title { font-size: 23px; }
  .book-editor { padding: 18px 12px 0; }
  .bk-tools { opacity: 1; }
  .bk-row { flex-direction: column; gap: 4px; }
  .bk-row .bk-content { width: 100%; }
  .bk-row .bk-tools { align-self: flex-end; padding-top: 0; }
  .book-bar-row { flex-wrap: wrap; row-gap: 6px; }
  .book-meta { margin-left: 0; }
}
@media (max-width: 560px) {
  .book-crumb { font-size: 12.5px; }
  .bk-h1 { font-size: 20px; }
  .bk-h2 { font-size: 17px; }
  .bk-type { max-width: 68px; }
}
/* ------------------------------- 设置页 ------------------------------- */
.kv { display: flex; flex-direction: column; gap: 9px; }
.kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px dashed var(--line); padding-bottom: 7px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row span:first-child { color: var(--muted); }
.kv-row span:last-child { color: var(--text); font-weight: 600; text-align: right; word-break: break-all; }
.action-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.import-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.import-row input[type=file] { flex: 1; min-width: 200px; padding: 7px; font-size: 12.5px; }
.import-row select { padding: 8px 10px; background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.help { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 9px; }
.help b { color: var(--accent-2); }

/* ------------------------------- 弹层 ------------------------------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
/* 确认弹层必须盖在编辑弹层之上：两者 z-index 相同的话，
   DOM 里靠后的编辑弹层会盖住确认弹层（在编辑弹层里点删除就会「看不见弹窗」） */
#confirmModal { z-index: 70; }
.modal-backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(3px); }
.modal-box {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--modal-bg);
  border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow);
}
.modal-head, .modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; }
.modal-head { border-bottom: 1px solid var(--line); }
.modal-foot { border-top: 1px solid var(--line); }
.modal-body { padding: 15px; overflow-y: auto; }

/* 确认弹层：比编辑弹层更小更聚焦 */
.modal-sm { max-width: 420px; }
.confirm-msg { font-size: 14px; line-height: 1.6; }
.confirm-detail {
  margin-top: 12px; padding: 11px 13px;
  background: var(--lift-035);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.confirm-detail b { color: var(--text); }
.confirm-detail .cd-amount { color: var(--accent-2); font-weight: 700; }
.confirm-detail .cd-warn { color: var(--red-text); }
.confirm-detail:empty { display: none; }

/* ------------------------------- Toast ------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  z-index: 90; padding: 10px 18px; border-radius: 999px;
  background: var(--toast-bg); border: 1px solid var(--line-2);
  color: var(--text); font-size: 13px; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s, transform .2s; max-width: 88vw; text-align: center;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-ok { border-color: rgba(var(--green-rgb), 0.5); }
.toast.is-err { border-color: rgba(var(--red-rgb), 0.55); color: var(--red-text-2); }

/* ------------------------------- 页脚 ------------------------------- */
.footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px 22px; max-width: 1240px; margin: 0 auto;
  font-size: 12px; color: var(--muted-2);
}

/* ------------------------------- 响应式 ------------------------------- */
/* 左右双列（表单 + 列表）需要足够宽度：列表最宽约 800px，全列宽约 919px，
   所以窗口不足 1180px 时直接改成上下堆叠，把整个宽度让给列表。
   阈值早先是 900 → 1080，实测 1080~1180px 这一段列表只有 647px、必出横向滚动。 */
@media (max-width: 1180px) {
  .split { grid-template-columns: 1fr; }
  .panel-form { position: static; }
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .chart { height: 165px; gap: 6px; }
}
@media (max-width: 800px) {
  /* 窄屏：表格整体让位给卡片列表，从此没有横向滚动条。
     阈值原本是 720px，但最宽的那张（存单余额）需要 716px，
     而面板在 721~780px 之间只给 650~709px —— 于是 768px 的竖屏平板
     正好掉进「卡片没开、表格又放不下」的空档，存单页里出现内部横向滚动条。
     挪到 800px 覆盖掉这个区间。
     这里的每一张表都必须有对应的 .data-cards 卡片版，否则那块内容在手机上会**直接消失**：
       #ordersTable / #expensesTable / #depositBalanceTable / #repayTable / #recentOrders
     分别对应 #orderCards / #expenseCards / #depositBalanceCards / #repayCards / #recentOrdersCards。
     少给一个卡片版，用户就少一整个功能块（最初漏了 #recentOrdersCards，
     手机上「最近订单」连同「记第一单 →」的入口一起不见了）。 */
  #ordersTable, #expensesTable,
  #depositBalanceTable, #repayTable, #recentOrders { display: none; }
  .data-cards { display: flex; }
}
@media (max-width: 720px) {
  /* 更窄的一档：只调字号和间距，不涉及布局切换 */
  .chart { height: 150px; }
}
@media (max-width: 340px) {
  /* 极小屏（老 iPhone / 小屏安卓）：6 个页签挤在一排真的放不下。
     与其裁掉最后一个（滚动条是隐藏的，看起来就像页签被切了一半），
     不如让它换行 —— 换行不裁任何东西，也不会产生横向滚动条。 */
  .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; padding-bottom: 2px; }
}

@media (max-width: 560px) {
  body { font-size: 13.5px; }
  .content { padding: 12px; }
  .form-row-2 { grid-template-columns: 1fr; }
  .cards { gap: 10px; }
  .card-value { font-size: 20px; }
  .topbar { padding: 9px 12px; }
  .tabs { padding: 8px 12px 0; }
  .tab { padding: 10px 12px; font-size: 13px; }
  .chart { height: 150px; }
  .chart-x { font-size: 10px; }
  .who { max-width: 30vw; }
  .footer { padding: 12px; }

  /* 触控目标 ≥ 44px（Apple/Google 的可点区域建议），否则手机上难戳中 */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 8px 12px; }
  .tab { min-height: 44px; }
  .seg-btn { min-height: 44px; }
  .tpl-chip { min-height: 36px; }

  /* 输入框在手机上高度也大一点，方便聚焦 */
  .field input, .field select, .field textarea, .field .sel-btn { min-height: 44px; }
}

/* 刘海 / 挖孔 / 底部手势条安全区（viewport-fit=cover 时必需，
   否则顶栏文字会贴进刘海、底部按钮会被 iPhone 手势条盖住） */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); padding-top: calc(9px + env(safe-area-inset-top)); }
  .content, .footer { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
  .footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .modal { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* iOS Safari 的 100vh 会包含地址栏，导致登录页底部被顶出去；用 dvh 动态视口高度 */
@supports (min-height: 100dvh) {
  .auth-screen { min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}