/* ============================================================
 * 主题变量
 * 浅色是默认值；深色由 <html data-theme="dark"> 覆盖。
 * 页面首次绘制前由 index.html 里的一段内联脚本落 data-theme（防白闪）。
 *
 * 变量的分工（别混用，混了深色下就会出现「深底压深底」看不见）：
 *   --bg      页面底色
 *   --card    卡片 / 顶栏 / 侧栏 / 弹窗 / 抽屉的表面色
 *   --field   嵌在卡片里的控件底色：输入框、按钮、选中的分段项（比 card 更"凸"）
 *   --soft    凹陷填充：分段控件的轨道、进度条槽、静默标签（比 card 更"凹"）
 *   --soft-2  极浅填充：表头、列表行 hover
 *   --hover   导航 / 图标按钮的悬停底
 * 主色也拆成两个：
 *   --primary       填充色（按钮底），配白字
 *   --primary-ink   文字/图标色（深色下需要更亮才够对比度）
 * ============================================================ */
:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --card: #ffffff;
  --field: #ffffff;
  --soft: #eef1f8;
  --soft-2: #fafbfe;
  --hover: #f3f5fb;
  --border: #e6e9f2;
  /* 分隔线 / 描边用的浅色。历史上多处写了 var(--line) 却没定义，
     导致那 10 条 border 声明整条失效（边框、分隔线全不渲染）。 */
  --line: #e6e9f2;
  --text: #1f2430;
  --muted: #6b7280;
  --primary: #4f6ef7;
  --primary-ink: #4f6ef7;
  --primary-hover: #3d5ae0;
  --primary-soft: #eef1fe;
  --primary-soft-hover: #e3e9ff;
  --income: #22c55e;
  --income-soft: #e9f9ef;
  --expense: #ef4444;
  --expense-soft: #fdecec;
  --expense-soft-hover: #fde2e2;
  --warn: #f59e0b;
  --warn-soft: #fef3e2;
  --purple: #8b5cf6;
  --purple-soft: #f3e8ff;
  --gray-strong: #cbd0dd;      /* 行内 ✎ / ✕ 的静息色 */
  --dot: #d6dbe8;
  --ok-bg: #e6f4ea;   --ok-fg: #1e8e3e;
  --bad-bg: #fce8e6;  --bad-fg: #d93025;  --bad-line: #f5c6c2;
  --amber-bg: #fff3e0; --amber-fg: #e07b00;
  --blue-bg: #e8f0fe;  --blue-fg: #1a73e8;
  --toast-bg: #1f2430; --toast-fg: #ffffff; --toast-line: rgba(255,255,255,.45);
  /* 实心按钮上的文字色：深色模式下绿/红底更亮，白字会糊，改用深墨色 */
  --on-income: #ffffff; --on-expense: #ffffff;
  /* 图表：ECharts 读不到 CSS 变量，charts.js 会用 getComputedStyle 取值后再传进去 */
  --chart-tip-bg: #ffffff;
  --chart-tip-border: #e6e9f2;
  --chart-grid: #eef1f8;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(30,40,80,.06), 0 6px 18px rgba(30,40,80,.05);
}

/* 深色：不是把浅色取反，而是重新选过一组。
   底色偏冷、层次靠「亮度阶梯」拉开（bg < card < field），
   主色文字用 --primary-ink（更亮的蓝），填充仍用 --primary（保证白字对比度）。 */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1119;
  --card: #161b27;
  --field: #232b3d;
  --soft: #101620;
  --soft-2: #1b2130;
  --hover: #1e2637;
  --border: #2a3244;
  --line: #2a3244;
  --text: #e7eaf3;
  --muted: #97a1b5;
  --primary: #4f6ef7;
  --primary-ink: #8ea4ff;
  --primary-hover: #6480ff;
  --primary-soft: #1b2340;
  --primary-soft-hover: #232d52;
  --income: #34d17a;
  --income-soft: #14301f;
  --expense: #ff6b6b;
  --expense-soft: #35191b;
  --expense-soft-hover: #45201f;
  --warn: #f5a623;
  --warn-soft: #33260f;
  --purple: #a78bfa;
  --purple-soft: #2a1f45;
  --gray-strong: #4d5768;
  --dot: #384256;
  --ok-bg: #14301f;   --ok-fg: #4ade80;
  --bad-bg: #35191b;  --bad-fg: #ff8080;  --bad-line: #5a2a2a;
  --amber-bg: #33260f; --amber-fg: #fbbf24;
  --blue-bg: #16233d;  --blue-fg: #7cabff;
  --toast-bg: #232b3d; --toast-fg: #e7eaf3; --toast-line: rgba(255,255,255,.28);
  --on-income: #06230f; --on-expense: #3a0d0d;
  --chart-tip-bg: #232b3d;
  --chart-tip-border: #333d52;
  --chart-grid: #232a3a;
  --shadow: 0 1px 3px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* 主题切换时不要给全站加过渡（会闪），但给 body 加一次性的短过渡更平滑。
   只过渡颜色属性，不动尺寸。 */
body { transition: background-color .2s ease, color .2s ease; }

/* ===== 线性图标 =====
   24×24 描边图标，stroke 走 currentColor，所以自动跟随文字颜色与主题。
   尺寸靠类名：默认 20px（导航），.sm 16px（按钮内联），.lg 28px，.xl 40px（空态）。 */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico-svg {
  width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: -0.18em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-svg.sm { width: 16px; height: 16px; vertical-align: -0.22em; }
.ico-svg.lg { width: 28px; height: 28px; }
.ico-svg.xl { width: 40px; height: 40px; stroke-width: 1.5; }
/* 主题按钮：两个图标都在，靠 data-theme 决定显示哪个 */
.theme-on-dark { display: none; }
html[data-theme="dark"] .theme-on-dark { display: inline-block; }
html[data-theme="dark"] .theme-on-light { display: none; }
.theme-btn { padding: 6px 9px; line-height: 1; }
/* 大图标场景：emoji 换成 SVG 后，原来靠 font-size 撑出来的尺寸要显式给回 */
.ban-veil .icon { color: var(--muted); }
.ban-veil .icon .ico-svg { width: 44px; height: 44px; stroke-width: 1.4; vertical-align: middle; }
.dropzone .big { color: var(--muted); }
.dropzone .big .ico-svg { width: 32px; height: 32px; stroke-width: 1.5; vertical-align: middle; }
/* 建议卡片的图标徽标：底色在有主题变量后仍偏淡，描边图标需要明确前景色 */
.advice .ico.warn { color: var(--warn); }
.advice .ico.good { color: var(--income); }
.advice .ico.info { color: var(--primary-ink); }

/* 搜索框：placeholder 里塞不进 SVG，改成真图标 + 定位在输入框左侧 */
.search-field { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 160px; }
.search-field > .ico-svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.filter-bar .search-field > input[type="text"] { flex: none; width: 100%; min-width: 0; padding-left: 32px; }

/* ===== 顶栏 ===== */
.topbar {
  height: 60px; background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px; gap: 20px; position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo-img {
  width: 36px; height: 36px; border-radius: 10px; object-fit: cover; display: block; flex-shrink: 0;
}
.brand-txt h1 { font-size: 16px; line-height: 1.1; }
.brand-txt p { font-size: 11px; color: var(--muted); }
.mode-switch {
  margin-left: auto; display: flex; background: var(--soft); border-radius: 10px; padding: 3px; gap: 2px;
}
.mode-btn {
  border: none; background: transparent; padding: 7px 18px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--muted); transition: all .15s;
}
.mode-btn.active { background: var(--field); color: var(--primary-ink); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.top-actions { display: flex; gap: 8px; }
.ghost-btn {
  border: 1px solid var(--border); background: var(--field); color: var(--muted); padding: 6px 12px;
  border-radius: 8px; cursor: pointer; font-size: 12px; transition: all .15s;
  /* 中文标签可以逐字换行，顶栏高度又是写死的 60px —— 一旦被挤窄，
   * 「加载示例数据」会断成两行撑出栏外。这里禁止换行，宁可让按钮本身被裁。 */
  white-space: nowrap;
}
.ghost-btn:hover { border-color: var(--primary); color: var(--primary-ink); }
.menu-btn { display: none; border: none; background: none; font-size: 22px; cursor: pointer; color: var(--text); padding: 4px 6px; line-height: 1; }
.book-switch { display: flex; align-items: center; min-width: 0; }
.book-btn {
  border: 1px solid var(--border); background: var(--field); color: var(--text); padding: 6px 12px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .15s;
  /* 账本名是用户输入的，长度不可控；不给上限的话一个长名字就能把顶栏顶爆 */
  display: inline-flex; align-items: center; gap: 4px; max-width: 220px;
}
.book-btn #bookName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.book-btn:hover { border-color: var(--primary); color: var(--primary-ink); }

/* ===== 账号 ===== */
.account-btn {
  border: 1px solid var(--border); background: var(--field); color: var(--muted); padding: 6px 12px;
  border-radius: 8px; cursor: pointer; font-size: 12px; transition: all .15s; white-space: nowrap;
  /* min-width:0 让按钮在极端窄的窗口里先收缩自己，而不是把顶栏顶爆。
   * max-width 要给得比「图标 + 名字 + 内边距」宽，否则名字永远拿不到 acct-name 的上限。 */
  max-width: 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.account-btn:hover { border-color: var(--primary); color: var(--primary-ink); }
.account-btn.signed { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); font-weight: 600; }
/* 账号名是登录后的身份标识，必须能看清。原来锁死 max-width:90px，而按钮本身又有
 * max-width —— 两者叠加后名字常被挤到只剩一个「…」（用户 986px 视口复现过）。
 * 现在宽屏给 150px，中屏按断点收紧；≤1000px 时导出/示例/清空已收进抽屉、空间反而
 * 宽裕，所以那一档比 1080px 档给得更宽。 */
.acct-name { max-width: 150px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.auth-tabs { margin-bottom: 16px; }
.auth-tabs button { flex: 1; }
.otp-row { display: flex; gap: 8px; }
.otp-row input { flex: 1; }
.otp-row .btn { white-space: nowrap; padding: 8px 12px; }
.auth-err {
  display: none; margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: var(--expense-soft); color: var(--expense); font-size: 13px;
}
.btn-block { display: block; width: 100%; }
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.acct-avatar {
  width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.acct-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;
}
.acct-stats > div {
  background: var(--bg); border-radius: 11px; padding: 12px 6px; display: flex; flex-direction: column; gap: 4px;
}
.acct-stats b { font-size: 18px; }
.acct-stats span { font-size: 11px; color: var(--muted); }
.link-btn { border: none; background: none; color: var(--primary-ink); cursor: pointer; font-size: 13px; padding: 0; text-align: left; }
.link-btn:hover { text-decoration: underline; }

/* 认证弹窗：返回入口的返回键 / 注册与登录两个独立入口 */
.auth-back { display: block; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.auth-back:hover { color: var(--primary-ink); }
.auth-entry-tip { text-align: center; margin-top: 16px; margin-bottom: 0; }

/* ===== 用户ID号码 ===== */
.acct-no {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary-soft); border-radius: 11px; padding: 11px 14px;
}
.acct-no span { font-size: 12px; color: var(--muted); }
.acct-no b { font-size: 20px; letter-spacing: 2px; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.user-no-big {
  text-align: center; font-size: 34px; font-weight: 700; letter-spacing: 6px;
  color: var(--primary-ink); background: var(--primary-soft); border-radius: 14px;
  padding: 18px 10px; font-variant-numeric: tabular-nums;
}
/* 登录页：忘记密码行 */
.auth-row { display: flex; justify-content: flex-end; margin-top: 6px; }
/* 登录页：最近登录过的账号（最多 3 个） */
.recent-accts { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.recent-acct {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--card); border-radius: 11px;
  padding: 9px 12px; margin-bottom: 8px; cursor: pointer; font-size: 13px;
}
.recent-acct:last-child { margin-bottom: 0; }
.recent-acct:hover { border-color: var(--primary); background: var(--primary-soft); }
.ra-dot {
  width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.ra-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-txt i { font-style: normal; color: var(--muted); font-size: 11px; }
/* 注册页：密码强度提示条（5 项各自点亮） */
.pw-meter { display: flex; gap: 5px; margin-top: 6px; }
.pw-meter span {
  flex: 1; text-align: center; font-size: 10px; padding: 3px 2px; border-radius: 5px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  transition: background .15s, color .15s, border-color .15s;
}
.pw-meter span.on { background: var(--income-soft); color: var(--income); border-color: var(--income); }

/* ===== 管理后台 ===== */
.adm-badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--amber-bg); color: var(--amber-fg); margin-left: 6px; vertical-align: middle;
}
.adm-tabs { display: flex; gap: 6px; background: var(--bg); border-radius: 11px; padding: 4px; margin-bottom: 16px; }
.adm-tabs button {
  flex: 1; border: none; background: transparent; padding: 9px 4px; border-radius: 8px;
  cursor: pointer; color: var(--muted); font-size: 13px;
}
.adm-tabs button.active { background: var(--field); color: var(--primary-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.adm-search { display: flex; gap: 8px; margin-bottom: 14px; }
.adm-search input { flex: 1; }
.adm-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.adm-card h4 { margin: 0 0 10px; font-size: 15px; }
.adm-kv { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.adm-kv b { color: var(--text); font-weight: 600; }
.adm-state { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 20px; font-weight: 600; }
.adm-state-ok { background: var(--ok-bg); color: var(--ok-fg); }
.adm-state-bad { background: var(--bad-bg); color: var(--bad-fg); }
.adm-ban-live {
  border: 1px solid var(--bad-line); background: var(--bad-bg); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.adm-ban-live-h { font-size: 13px; font-weight: 700; color: var(--bad-fg); margin-bottom: 7px; }
.adm-ban-live-b { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.adm-ban-live-b b { color: var(--text); font-weight: 600; }
.adm-ban-hist { margin-bottom: 12px; font-size: 13px; }
.adm-ban-hist summary {
  cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0;
  user-select: none; list-style: none;
}
.adm-ban-hist summary::-webkit-details-marker { display: none; }
.adm-ban-hist summary::before { content: "▸ "; }
.adm-ban-hist[open] summary::before { content: "▾ "; }
.adm-ban-hist ul { list-style: none; margin: 6px 0 0; padding: 0; }
.adm-ban-hist li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.adm-ban-hist li:last-child { border-bottom: none; }
.adm-hist-tag-off { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--bg); color: var(--muted); flex-shrink: 0; }
.adm-hist-tag-on { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--bad-bg); color: var(--bad-fg); flex-shrink: 0; font-weight: 600; }
.adm-hist-reason { color: var(--muted); flex: 1; min-width: 0; }
.adm-hist-time { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.adm-ban-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.adm-ban-row select, .adm-ban-row input { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; }
.adm-ban-row select { flex: 0 0 116px; }
.adm-ban-row input { flex: 1; min-width: 0; }
.adm-ban-list { font-size: 13px; }
.adm-ban-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.adm-ban-item:last-child { border-bottom: none; }
.adm-lv { font-size: 11px; padding: 2px 7px; border-radius: 6px; font-weight: 600; flex-shrink: 0; }
.adm-lv.lv1 { background: var(--blue-bg); color: var(--blue-fg); }
.adm-lv.lv2 { background: var(--amber-bg); color: var(--amber-fg); }
.adm-lv.lv3 { background: var(--expense-soft); color: var(--expense); }
.adm-ann-item { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; margin-bottom: 9px; }
.adm-ann-item .t { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.adm-ann-item .b { font-size: 13px; color: var(--muted); white-space: pre-wrap; }
.adm-ann-item .m { font-size: 11px; color: var(--muted); margin-top: 7px; display: flex; gap: 10px; flex-wrap: wrap; }
.adm-ann-act { display: flex; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
/* 封禁拦截遮罩 */
.ban-veil { text-align: center; padding: 20px 0; }
.ban-veil .icon { font-size: 40px; margin-bottom: 10px; }
/* 顶部/侧边栏里的公告条 */
.ann-bar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 13px; border-radius: 11px;
  background: var(--primary-soft); font-size: 13px; margin-bottom: 14px;
}
.ann-item { display: flex; align-items: flex-start; gap: 9px; }
.ann-item.warn { color: var(--expense); }
.ann-item.success { color: var(--income); }
.ann-item .ann-ico { flex-shrink: 0; }
.ann-item .ann-txt { flex: 1; min-width: 0; }
.ann-item .ann-txt b { display: block; margin-bottom: 2px; }
.ann-x {
  flex-shrink: 0; border: none; background: none; cursor: pointer; padding: 0 2px;
  color: inherit; opacity: .45; font-size: 12px; line-height: 1.4;
}
.ann-x:hover { opacity: .9; }
.ann-more { align-self: flex-start; font-size: 12px; }

/* 管理模式：隐藏顶栏里与应用相关的控件，让界面明显区别于普通视图 */
body.admin-on .mode-switch,
body.admin-on .book-switch,
body.admin-on .top-actions { display: none; }
body.admin-on .topbar { box-shadow: inset 0 -3px 0 var(--amber-fg); }
/* 顶栏「返回应用」按钮：默认隐藏，仅管理模式下显示（醒目、橙色描边） */
.admin-back-btn { display: none; }
body.admin-on .admin-back-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  border-color: var(--amber-fg); color: var(--amber-fg); font-weight: 600;
}
body.admin-on .admin-back-btn:hover { background: var(--amber-bg); border-color: var(--amber-fg); color: var(--amber-fg); }
.nav-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.nav-item.admin-back { color: var(--primary-ink); font-weight: 600; }

/* ===== 账本管理弹窗 ===== */
.book-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.book-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--card); transition: border .15s;
}
.book-item:hover { border-color: var(--primary); }
.book-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); flex-shrink: 0; }
.book-dot.active { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.book-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
/* 重命名：输入框 + 看得见的「保存 / 取消」。
 * 两个按钮必须有 —— 只靠 blur / Enter 提交的话界面上没有任何提示，
 * 用户改完名字不知道怎么办（报告 K 项）。
 * 宽度交给 flex 决定（flex-basis 会盖掉 width），所以这里不写 width。 */
.rename-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rename-input {
  flex: 1 1 140px; min-width: 0;
  border: 1px solid var(--primary); border-radius: 7px; padding: 4px 8px; font-size: 14px;
  font-family: inherit; outline: none; background: var(--field); color: var(--text);
}
.rename-row .rename-ok, .rename-row .rename-cancel { flex-shrink: 0; }
.book-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ===== 布局 ===== */
.layout { display: flex; min-height: calc(100vh - 60px); }
/* 侧栏必须一直看得见：长页面（日记等）滚到底时导航不能跟着滚出视野。
   顶栏本身是 sticky / top:0 / 高 60px，所以这里 top 同样从 60px 起算；
   高度锁定「一屏减顶栏」，导航项多于屏幕时让侧栏**自己**滚（不牵动主内容），
   overscroll-behavior 防止滚到底后把滚动传给页面（体感像「页面卡死」）。
   align-self 是显式免 stretch —— 被拉伸满高的话 sticky 就没有可移动空间了。 */
.sidebar {
  width: 200px; background: var(--card); border-right: 1px solid var(--border);
  padding: 16px 10px; flex-shrink: 0;
  position: sticky; top: 60px; align-self: flex-start;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);   /* 移动端地址栏收放时更稳；不支持的浏览器忽略此行 */
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
  cursor: pointer; color: var(--muted); margin-bottom: 4px; transition: all .15s; font-size: 14px;
}
.nav-item .ico { width: 20px; text-align: center; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }

.content { flex: 1; padding: 22px 26px; max-width: 1180px; }
.section { display: none; }
.section.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.page-head h2 { font-size: 20px; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.month-sel, .day-sel { border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-size: 14px; font-family: inherit; background: var(--field); color: var(--text); outline: none; cursor: pointer; }
.month-sel:focus, .day-sel:focus { border-color: var(--primary); }
.range-sel { display: flex; align-items: center; gap: 6px; }
.range-sel .month-sel { width: 132px; cursor: text; }
.range-sep { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ===== 卡片与统计 ===== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.cards-grid { display: grid; gap: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat-card .label { color: var(--muted); font-size: 12px; }
.stat-card .value { font-size: 24px; font-weight: 700; margin-top: 6px; }
.stat-card .value.income { color: var(--income); }
.stat-card .value.expense { color: var(--expense); }
.stat-card .value.primary { color: var(--primary-ink); }
.stat-card .delta { font-size: 12px; margin-top: 4px; color: var(--muted); }
.stat-card .delta.up { color: var(--income); }
.stat-card .delta.down { color: var(--expense); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* 图表容器：高度随视口收缩（手机上 300px 会顶掉半个屏，而桌面又偏矮）。
   先给固定值兜底，再用 clamp 覆盖；ECharts 初始化时读到的是解析后的像素值，不受影响。 */
.chart-box { width: 100%; height: 300px; height: clamp(220px, 34vh, 300px); }
.chart-box.tall { height: 340px; height: clamp(260px, 42vh, 360px); }

/* ===== 表单 ===== */
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea,
.form-grid input, .form-grid select, .form-grid textarea {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-size: 14px; font-family: inherit;
  background: var(--field); color: var(--text); outline: none; transition: border .15s; width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--primary); }
.span2 { grid-column: span 2; }
.seg { display: flex; background: var(--soft); border-radius: 9px; padding: 3px; }
.seg button { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 13px; }
.seg button.active { background: var(--field); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg button.active.inc { color: var(--income); }
.seg button.active.exp { color: var(--expense); }
/* 趋势图粒度切换（日/周/月/季/年） */
.trend-seg { padding: 2px; }
.trend-seg button { padding: 5px 11px; font-size: 12px; min-width: 34px; }

.btn { border: none; border-radius: 9px; padding: 10px 18px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all .15s; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: var(--income); color: var(--on-income); }
.btn-soft { background: var(--primary-soft); color: var(--primary-ink); }
.btn-soft:hover { background: var(--primary-soft-hover); }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 7px; }
.btn.danger { background: var(--expense-soft); color: var(--expense); }
.btn.danger:hover { background: var(--expense-soft-hover); }

/* ===== 表格 ===== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; background: var(--soft-2); }
tr:hover td { background: var(--soft-2); }
.amt.income { color: var(--income); font-weight: 600; }
.amt.expense { color: var(--expense); font-weight: 600; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; }
.tag.income { background: var(--income-soft); color: var(--income); }
.tag.expense { background: var(--expense-soft); color: var(--expense); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.primary { background: var(--primary-soft); color: var(--primary-ink); }
.tag.loan { background: var(--purple-soft); color: var(--purple); }
.del-btn { background: none; border: none; padding: 0; line-height: 1; color: var(--gray-strong); cursor: pointer; font-size: 16px; }
.del-btn:hover { color: var(--expense); }
/* 行内编辑按钮（✎）：与旁边的删除按钮（✕）保持同一套无边框图标风格。
   之前漏了这条定义，编辑按钮会落回浏览器默认渲染（灰底 + 边框 + 默认内边距），
   两个按钮并排时风格割裂。 */
.icon-btn { background: none; border: none; padding: 0; line-height: 1; color: var(--gray-strong); cursor: pointer; font-size: 16px; }
.icon-btn:hover { color: var(--primary-ink); }
/* 操作列：宽度收缩到内容宽度（width:1% + nowrap 的经典写法），
   避免长备注把这一列挤压或折行 */
.op-cell { width: 1%; white-space: nowrap; text-align: right; }
.op-cell .del-btn { margin-left: 6px; }
.op-cell .icon-btn, .op-cell .del-btn { vertical-align: middle; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-head h3 { font-size: 15px; }
.link-btn { border: none; background: none; color: var(--primary-ink); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* ===== 列表/建议 ===== */
.advice { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 10px; background: var(--card); }
.advice .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 17px; }
.advice .ico.warn { background: var(--warn-soft); }
.advice .ico.good { background: var(--income-soft); }
.advice .ico.info { background: var(--primary-soft); }
.advice h4 { font-size: 14px; margin-bottom: 3px; }
.advice p { color: var(--muted); font-size: 13px; line-height: 1.5; }

.progress { height: 8px; background: var(--soft); border-radius: 10px; overflow: hidden; margin-top: 6px; }
.progress .bar { height: 100%; border-radius: 10px; transition: width .4s; }
.progress .bar.safe { background: var(--income); }
.progress .bar.risk { background: var(--warn); }
.progress .bar.over { background: var(--expense); }

.alert-item { display: flex; gap: 12px; padding: 12px 14px; border-radius: 11px; margin-bottom: 8px; border-left: 4px solid; }
.alert-item.danger { background: var(--expense-soft); border-left-color: var(--expense); }
.alert-item.warning { background: var(--warn-soft); border-left-color: var(--warn); }
.alert-item.ok { background: var(--income-soft); border-left-color: var(--income); }
.alert-item .t { font-weight: 600; font-size: 13px; }
.alert-item .d { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ===== 上传区 ===== */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center;
  cursor: pointer; color: var(--muted); transition: all .15s; background: var(--soft-2);
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.dropzone .big { font-size: 28px; margin-bottom: 8px; }
.import-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.import-tabs button { border: 1px solid var(--border); background: var(--field); padding: 8px 16px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--muted); }
.import-tabs button.active { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); font-weight: 600; }

/* ===== 弹窗 ===== */
.modal-mask { position: fixed; inset: 0; background: rgba(20,25,40,.45); display: none; place-items: center; z-index: 100; }
.modal-mask.show { display: grid; }
.modal { position: relative; background: var(--card); border-radius: 16px; width: 680px; max-width: 94vw; max-height: 86vh; overflow: auto; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal h3 { margin-bottom: 16px; padding-right: 40px; }
.modal .close { position: sticky; top: 0; float: right; z-index: 30; border: none; background: var(--field); font-size: 18px; cursor: pointer; color: var(--muted); width: 32px; height: 32px; line-height: 30px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.modal .close:hover { color: var(--expense); }

/* ===== 移动端抽屉菜单 ===== */
.drawer-mask { position: fixed; inset: 0; background: rgba(20,25,40,.45); display: none; z-index: 150; }
.drawer-mask.show { display: block; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 290px; max-width: 85vw; background: var(--card); z-index: 151; transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; padding: 16px 14px 24px; box-shadow: 0 0 40px rgba(0,0,0,.22); }
.drawer.show { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.drawer-title h2 { font-size: 16px; line-height: 1.1; }
.drawer-title p { font-size: 12px; color: var(--muted); }
.drawer-close { margin-left: auto; border: none; background: var(--hover); color: var(--muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.drawer-close:hover { color: var(--expense); background: var(--expense-soft); }
.drawer-sec { margin-bottom: 18px; }
.drawer-sec-bottom { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.drawer-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.book-sel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghost-btn.danger { color: var(--expense); }
.ghost-btn.danger:hover { border-color: var(--expense); color: var(--expense); }
.ocr-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ocr-text { background: var(--soft-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 12px; line-height: 1.6; max-height: 300px; overflow: auto; white-space: pre-wrap; color: var(--muted); }
.ocr-entries { max-height: 300px; overflow: auto; }
.ocr-entry { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 8px; }
.ocr-entry input { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 13px; width: 90px; }
.ocr-entry select { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 13px; }
.ocr-entry .rm { border: none; background: none; color: var(--expense); cursor: pointer; }
/* 促销活动识别结果确认（字段多，用紧凑的分组网格） */
.promo-entries { max-height: 46vh; overflow: auto; padding-right: 2px; }
.promo-entry { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--card); }
.pe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.promo-entry label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.promo-entry input { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 13px; background: var(--bg); color: var(--text); width: 100%; }
.promo-entry .btn { font-size: 12px; padding: 5px 10px; }

/* ===== 提示 ===== */
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--toast-bg); color: var(--toast-fg); padding: 11px 20px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 200; display: flex; align-items: center; gap: 12px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-undo { border: 1px solid var(--toast-line); background: transparent; color: var(--toast-fg); border-radius: 7px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.toast-undo:hover { background: rgba(255,255,255,.16); }

/* 危险操作按钮（清空 / 覆盖 / 退出清数据） */
.btn-soft.danger { color: var(--expense); border-color: var(--expense); }
.btn-soft.danger:hover { background: var(--expense); color: var(--on-expense); }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; cursor: pointer; }
.check-row input { margin-top: 3px; flex: none; }

.hint { color: var(--muted); font-size: 12px; }
/* AI 产出落款（「以上建议由 AI 生成（调用模型：xxx），仅供参考」）。
   刻意不复用 .hint：12px 的弱化小字会被当成无关提示一眼略过，
   而这是一条必须让用户看到的标注。用一条上分隔线把它变成「出处署名」。
   只用变量，深色模式自动跟随，不写死颜色。 */
.ai-credit {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px; line-height: 1.6;
}
.ai-credit.off { border-top-style: dashed; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.empty { text-align: center; color: var(--muted); padding: 40px; }

/* ===== 全部账单筛选栏 ===== */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-bar input, .filter-bar select { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: 13px; background: var(--field); }
.filter-bar input[type="text"] { flex: 1; min-width: 160px; }

/* ===== 预算建议（分档） ===== */
.plan-tag { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 20px; font-size: 11px; font-weight: 400; background: var(--soft); color: var(--muted); }
.seg button.active .plan-tag { background: var(--primary-soft); color: var(--primary-ink); }
.plan-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.plan-row:last-child { border-bottom: none; }
.plan-cat { font-size: 13px; }
.plan-num { text-align: right; display: flex; flex-direction: column; line-height: 1.4; }
.plan-num b { font-size: 14px; }
.plan-num .hint { font-size: 11.5px; }
.plan-sums { background: var(--soft-2); border-radius: 9px; padding: 12px 14px; }
.plan-sum { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.plan-sum + .plan-sum { margin-top: 7px; }
.plan-sum b { color: var(--text); font-size: 14px; }

/* ===== 论坛 ===== */
.forum-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.forum-toolbar .seg { min-width: 220px; }
.forum-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.forum-item:last-child { border-bottom: none; }
.forum-item:hover { background: var(--soft-2); }
.forum-item-main { flex: 1; min-width: 0; }
.forum-item-title { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.forum-item-body { font-size: 12.5px; color: var(--muted); margin: 5px 0 7px; line-height: 1.55; }
.forum-item-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.forum-board-tag { background: var(--primary-soft); color: var(--primary-ink); padding: 1.5px 8px; border-radius: 20px; font-size: 11px; }
.forum-tag { padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 400; }
.forum-tag.pending { background: var(--warn-soft); color: var(--warn); }
.forum-tag.rejected { background: var(--expense-soft); color: var(--expense); }
.forum-pin { font-size: 12px; }
.forum-del { flex-shrink: 0; color: var(--expense); font-size: 12px; }
.forum-item-act { display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.forum-item-act .link-btn { font-size: 12px; }
/* 论坛管理（附加在论坛页底部，仅管理员可见） */
.forum-manage { border-left: 3px solid var(--primary); }
.forum-manage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.forum-manage .acct-stats { margin-bottom: 12px; }
.fm-toggle { display: flex; gap: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; flex-wrap: wrap; }
.fm-toggle .link-btn { font-size: 13px; color: var(--muted); }
.fm-toggle .link-btn.active { color: var(--primary-ink); font-weight: 600; }
.forum-post-head { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.forum-post-body { font-size: 13.5px; line-height: 1.7; white-space: normal; word-break: break-word; }
.forum-replies-head { font-weight: 600; font-size: 13.5px; margin: 16px 0 6px; }
.forum-replies { max-height: 320px; overflow-y: auto; }
.forum-reply { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.forum-reply:last-child { border-bottom: none; }
.forum-reply-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.forum-reply-head b { color: var(--text); font-size: 13px; }
.forum-reply-body { font-size: 13px; line-height: 1.6; word-break: break-word; }
.adm-forum-item { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; margin-bottom: 10px; }
.adm-forum-item .forum-item-title { margin-bottom: 6px; }
.adm-forum-item .forum-item-meta { margin-bottom: 8px; }

/* ===== 日记 / 经营日志 ===== */
.diary-date-pick { display: flex; align-items: center; gap: 8px; }
.diary-date-lbl { color: var(--primary-ink); }
.diary-form { display: flex; flex-direction: column; gap: 12px; }
.diary-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.diary-lbl { font-size: 12px; color: var(--muted); width: 30px; flex-shrink: 0; }
.mood-pick { display: flex; gap: 6px; }
.mood-btn {
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 11px; background: var(--field);
  font-size: 20px; line-height: 1; cursor: pointer; transition: all .15s;
}
.mood-btn:hover { border-color: var(--primary); }
.mood-btn.active { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.tag-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.diary-tag {
  border: 1px solid var(--border); background: var(--field); color: var(--muted); cursor: pointer;
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-family: inherit; transition: all .15s;
}
.diary-tag:hover { border-color: var(--primary); color: var(--primary-ink); }
.diary-tag.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
.diary-title, .diary-text {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px;
  font-family: inherit; background: var(--field); color: var(--text); outline: none; width: 100%;
}
.diary-title:focus, .diary-text:focus { border-color: var(--primary); }
.diary-text { resize: vertical; line-height: 1.6; }
/* 引导式日记：先点选项，再由 AI 写成正文（写出来是草稿，用户还能接着改）。
   只用变量，深色模式自动跟随；选项样式沿用 .diary-tag 的观感，保证同一页里两排「可选按钮」看起来是一家的。 */
.diary-guide-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.diary-guide {
  border: 1px solid var(--border); border-radius: 11px; padding: 14px;
  background: var(--soft-2); display: flex; flex-direction: column; gap: 13px;
}
.g-row { display: flex; flex-direction: column; gap: 8px; }
.g-q { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-multi {
  font-size: 11px; font-weight: 400; color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px;
}
.g-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.g-opt {
  border: 1px solid var(--border); background: var(--field); color: var(--muted); cursor: pointer;
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-family: inherit; transition: all .15s;
}
.g-opt:hover { border-color: var(--primary); color: var(--primary-ink); }
.g-opt.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
.g-extra { min-height: 52px; }
.diary-use {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--soft-2); border: 1px dashed var(--border); border-radius: 11px; padding: 11px 14px;
}
.diary-use .chk { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--text); }
.diary-use .chk input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.diary-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.diary-bulk { display: flex; gap: 8px; }
.diary-group { margin-bottom: 14px; }
.diary-group-h { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.diary-item {
  border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; margin-bottom: 8px;
  cursor: pointer; transition: all .15s; background: var(--card);
}
.diary-item:hover { border-color: var(--primary); background: var(--soft-2); }
.diary-item.active { border-color: var(--primary); background: var(--primary-soft); }
.di-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.di-date { font-weight: 600; font-size: 13px; }
.di-mood { font-size: 16px; line-height: 1; }
.di-body { font-size: 13px; color: var(--text); line-height: 1.55; }
.di-body b { margin-right: 6px; }
.di-body span { color: var(--muted); }
.di-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.tag.muted { background: var(--soft); color: var(--muted); }
.diary-echo { border-left: 3px solid var(--primary); background: var(--soft-2); border-radius: 0 10px 10px 0; padding: 9px 13px; margin-bottom: 9px; }
.de-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.de-date { font-weight: 600; font-size: 12px; color: var(--text); }
.de-mood { font-size: 15px; line-height: 1; }
.de-title { font-size: 13px; font-weight: 600; }
.de-text { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 2px; white-space: pre-wrap; }

/* ===== 顶栏的中间档（报告 H：中等宽度下被挤压）=====
 * 满配顶栏的**最小内容宽度**约 1060px，逐项估算：
 *   内边距 40 ｜ 5 个 20px 间距 100 ｜ 品牌 196（logo 36 + 副标题「双端记账 · 个人 / 商家」约 150）
 *   账本按钮 114 ｜ 账号按钮 ≤160 ｜ 模式切换 158 ｜ 主题 40 ｜ 导出/示例/清空 256
 * 也就是说窗口在 900~1060px 这一段，顶栏已经装不下全部内容：
 * flex 会把中文标签挤到折行，而栏高写死 60px —— 结果就是「挤成一团」。
 * 处理办法分两档收：先收紧间距与副标题，再把三个功能按钮收进抽屉（抽屉里已有同样入口）。*/
@media (max-width: 1080px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .brand-txt p { display: none; }          /* 副标题纯装饰，先让位 */
  .mode-btn { padding: 7px 12px; }
  .ghost-btn { padding: 6px 10px; }
  .book-btn { max-width: 150px; }          /* 收紧后：28 + 60 + 88 + 150 + 140 + 134 + 36 + 244 ≈ 880 */
  .account-btn { max-width: 170px; }
  .acct-name { max-width: 110px; }
}
@media (max-width: 1000px) {
  /* 再收就得牺牲功能按钮了。菜单按钮必须同时露出来，否则被收起来的
   * 导出 / 示例数据 / 清空 就没有入口（抽屉里有同样的三项）。 */
  .menu-btn { display: block; }
  .top-actions { display: none; }
  /* 收紧后：28 + 48 + 88 + 130 + 120 + 126 + 36 ≈ 576，641px 也放得下。
   * 正因为这里空出了 244px（三个功能按钮进了抽屉），账号名反而可以给得更宽。 */
  .book-btn { max-width: 130px; }
  .account-btn { max-width: 180px; }
  .acct-name { max-width: 130px; }
  .mode-btn { padding: 7px 10px; }
}

@media (max-width: 900px) {
  .stat-row, .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr 1fr; }
  .sidebar { width: 150px; }
  .span2 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .stat-row, .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .brand-txt p { display: none; }
  .menu-btn { display: block; }
  .book-switch, .mode-switch, .top-actions { display: none; }
  .content { padding: 16px 14px; }
  .span2 { grid-column: auto; }
  .range-sel { width: 100%; }
  .range-sel .month-sel { flex: 1; width: auto; }
  .diary-row { align-items: flex-start; }
  .diary-use { gap: 12px; }
  .diary-bulk { flex-wrap: wrap; }
  .pe-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .pe-grid { grid-template-columns: 1fr; }
}