/* 简易记账 · 在线协作版 — 复刻单机版界面风格 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --primary:#3B82F6; --primary-dark:#2563EB; --primary2:#6366F1;
  --bg:#F3F5F9; --card:#FFFFFF; --text:#1F2937; --text2:#6B7280;
  --red:#EF4444; --green:#10B981; --border:#E5E7EB;
  --blue-light:#EFF6FF; --amber-light:#FEF3C7; --green-light:#D1FAE5;
  --pink-light:#FCE7F3; --red-light:#FEE2E2; --gray-light:#F3F4F6;
  --dash-blue:#C7D2FE; --hint:#9CA3AF;
}
html,body{ height:100%; }
body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:15px; }
.page{ display:none; min-height:100vh; }
.page.active{ display:block; }

/* ===== 渐变头部（复刻 bg_header） ===== */
.header{ background:linear-gradient(135deg,#3B82F6 0%,#6366F1 100%); border-radius:0 0 20px 20px; padding:11px 16px 13px; color:#fff; }
/* 头部弹性规则（2026-09-18 老牟反馈「头像被压扁 + 帮助两字折行」后定）
   根因：.h-row 是 flex，子项默认 flex-shrink:1 → 一挤就压缩按钮。
   规则：按钮/头像一律「不让步」（flex-shrink:0 + 文字不换行），
         只有中间问候语可以让步（收缩 + 省略号）。 */
.header .h-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.header .h-row > .h-back, .header .h-row > .h-btn{ flex-shrink:0; }
.header .h-back{ background:rgba(255,255,255,.2); border:none; color:#fff; width:30px; height:30px; border-radius:8px; font-size:15px; line-height:1; cursor:pointer; flex-shrink:0; }
/* 首页左上的用户头像：固定 30x30 方形圆角，图片铺满、绝不拉伸变形 */
.header .h-avatar{ padding:0; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; }
.header .h-avatar img{ display:block; width:100%; height:100%; object-fit:cover; }
.header .h-back-label{ color:#E6FFFFFF; font-size:14px; }
.header .h-spacer{ flex:1; }
.header .h-btn{ background:rgba(255,255,255,.18); border:none; color:#fff; min-width:34px; height:30px; padding:0 10px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.header .h-title{ color:#fff; font-size:22px; font-weight:bold; margin-top:8px; }
.header .h-sub{ color:#BFFFFFFF; font-size:12px; margin-top:2px; }
.header .h-greet{ color:#E4FFFFFF; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; min-width:0; }
/* 2026-09-27 老牟拍板：首页顶栏 6 键图标化压缩（新增 ⇄ 互跳键后窄屏第 6 键换行）—— 统一 30×30、间距 6px、强制单行；作用域限首页，其余页面不动 */
#view-home .header .h-row{ gap:6px; flex-wrap:nowrap; }
#view-home .header .h-row > .h-btn{ min-width:30px; height:30px; padding:0 6px; font-size:15px; }

/* 首页标题行（2026-09-17 老牟：压缩顶部高度，给账本列表让位）*/
.header .h-logo-row{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.header .h-logo{ color:#fff; font-size:24px; font-weight:bold; flex-shrink:0; letter-spacing:.3px; }
.header .h-tagline{ color:#CFFFFFFF; font-size:11px; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ===== 首页数据看板（2026-09-17 老牟：顶部青色区做成看板）=====
   2026-09-17 晚改版：原「亮青半透底 + 白字」对比度太低、发飘刺眼 →
   改为白底深字（与下方账本卡片同一套配色），标签用浅彩底 + 深色字 */
.header .h-dash{ background:rgba(255,255,255,.97); border-radius:14px; margin-top:9px; padding:11px 14px; box-shadow:0 2px 10px rgba(15,23,42,.10); }
.header .h-dash .dash-main{ display:flex; align-items:baseline; gap:8px; }
.header .h-dash .dash-label{ color:var(--text2); font-size:12px; flex-shrink:0; }
.header .h-dash .dash-cmp{ font-size:11px; border-radius:20px; padding:2px 8px; background:var(--gray-light); color:var(--text2); white-space:nowrap; margin-left:auto; flex-shrink:0; }
.header .h-dash .dash-cmp.up{ background:var(--red-light); color:#B91C1C; }
.header .h-dash .dash-cmp.down{ background:var(--green-light); color:#047857; }
.header .h-dash .dash-amount{ display:inline-flex; align-items:baseline; gap:3px; min-width:0; }
.header .h-dash .dash-amount .cur{ color:var(--text2); font-size:14px; font-weight:bold; }
.header .h-dash .dash-amount #home-summary-total{ color:var(--text); font-size:24px; font-weight:bold; line-height:1.15; letter-spacing:-.2px; }
.header .h-dash .dash-sub{ color:var(--text2); font-size:11px; margin-top:2px; }
/* 2026-09-19 老牟要求：胶囊必须挤在一行里显示完（不再横向滑动/被裁掉）—— 等宽平分整行 + 压缩内边距字号 */
.header .h-dash .dash-chips{ display:flex; gap:5px; flex-wrap:nowrap; overflow:hidden; margin-top:8px; padding-top:8px; padding-bottom:2px; border-top:1px solid var(--border); }
.header .h-dash .dash-chip{ display:inline-flex; align-items:center; justify-content:center; gap:3px; background:var(--gray-light); border:none; color:var(--text); font-size:11px; padding:4px 6px; border-radius:20px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 0; min-width:0; }
.header .h-dash .dash-chip b{ font-size:12px; flex:0 0 auto; }
/* 图标不压缩，文字可压缩并逐级省略 —— 保证整排永远只占一行、不被裁掉 */
.header .h-dash .dash-chip .ico{ flex:0 0 auto; }
.header .h-dash .dash-chip .lbl{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* 胶囊 ≥5 颗（窄屏）时：藏图标、收字号，只留文字+数字 */
.header .h-dash .dash-chips.dense{ gap:3px; }
.header .h-dash .dash-chips.dense .dash-chip{ font-size:10px; padding:4px 3px; gap:2px; }
.header .h-dash .dash-chips.dense .dash-chip b{ font-size:11px; }
.header .h-dash .dash-chips.dense .dash-chip .ico{ display:none; }
/* 窄屏（≤400px）：不管几颗都藏图标，只留文字+数字，保证一行不被挤断 */
@media (max-width:400px){
  .header .h-dash .dash-chips{ gap:3px; }
  .header .h-dash .dash-chip{ font-size:10px; padding:4px 3px; gap:2px; }
  .header .h-dash .dash-chip b{ font-size:11px; }
  .header .h-dash .dash-chip .ico{ display:none; }
  /* 2026-09-20 修：头部新增站内信 ✉️ 后共 5 钮，窄屏收紧，防 ⚙️ 被挤到第二行 */
  .header .h-row{ gap:5px; }
  .header .h-row > .h-btn{ min-width:30px; height:28px; padding:0 7px; font-size:12px; }
  .header .h-greet{ max-width:64px; }
}
/* 超窄屏（≤340px）：再收一点，六颗也能排一行 */
@media (max-width:340px){
  .header .h-dash .dash-chip{ font-size:9.5px; padding:4px 2px; }
  /* 2026-09-20 修：超窄屏 5 钮也要一行到底（320px 不换行） */
  .header .h-row{ gap:4px; }
  .header .h-row > .h-btn{ min-width:28px; padding:0 6px; font-size:11px; }
  .header .h-greet{ max-width:44px; }
}
.header .h-dash .dash-chip.warn{ background:var(--amber-light); color:#B45309; }
.header .h-dash .dash-chip.ok{ background:var(--green-light); color:#047857; }
.header .h-dash .dash-chip.dis{ background:var(--gray-light); color:var(--hint); cursor:default; }
/* ⏳ 待处理（2026-09-19 老牟要求）：首页第一眼就要看到「我该处理的」—— 用主色实底、排最前 */
.header .h-dash .dash-chip.todo{ background:var(--primary); color:#fff; font-weight:600; box-shadow:0 1px 4px rgba(59,130,246,.35); }
.header .h-dash .dash-chip.todo b{ color:#fff; }

/* ===== 通用卡片（复刻 bg_card 16dp） ===== */
.card{ background:var(--card); border-radius:16px; margin:10px 16px; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.card.no-margin{ margin:0; }

/* ===== 节标题 ===== */
.section-title{ padding:11px 20px 2px; font-size:15px; font-weight:bold; color:var(--text); }

/* ===== 账本排序（2026-09-17 老牟要求）===== */
/* 分组头右侧「排序 / 完成」胶囊按钮 */
.acc-group-head .agt-sort{ margin-left:auto; font-size:12px; font-weight:normal; color:var(--primary); background:var(--blue-light); padding:2px 10px; border-radius:20px; cursor:pointer; }
.acc-group-head .agt-sort.done{ color:#047857; background:var(--green-light); }
/* 分组头右侧「＋ 新建」小胶囊（2026-09-27 老牟定：新建入口统一收进组头，替代设置页入口）
   ⚠️ 收起态用的是 .acc-group-fold，不是 .acc-group-head，两处都要覆盖，否则又变回黑体裸「＋」 */
.acc-group-head .agt-add, .acc-group-fold .agt-add{ margin-left:auto; font-size:12px; font-weight:500; color:#2563EB;
  background:#EEF4FF; border:1px solid #C7DBFF; padding:2px 10px; border-radius:999px; cursor:pointer; line-height:1.6;
  transition:background .15s, border-color .15s; }
.acc-group-head .agt-add:hover, .acc-group-fold .agt-add:hover{ background:#E0EBFF; border-color:#A8C8FF; }
/* 同组里已经有「排序」（它吃掉了 margin-left:auto）时，新建胶囊跟在它后面、别去抢右对齐 */
.acc-group-head .agt-sort + .agt-add{ margin-left:6px; }
/* 排序中的卡片：右侧金额换成 ↑↓ */
.acc-item.acc-sorting{ background:#F8FAFC; }
.acc-sort-btns{ display:flex; gap:8px; flex-shrink:0; }
.acc-sort-btn{ width:36px; height:34px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--primary); font-size:15px; line-height:1; cursor:pointer; padding:0; }
.acc-sort-btn:disabled{ color:var(--hint); opacity:.45; cursor:default; }
.acc-sort-btn:active:not(:disabled){ background:var(--blue-light); }

/* ===== 账本列表项（复刻 item_account） ===== */
/* 2026-09-17 修复：负数余额（如 -8,000.00）比正数宽一点，原来是 flex-wrap:wrap，右侧金额块被挤到第二行，卡片忽高忽低、金额跑到账本名下面。改为 nowrap：始终一行，账本名过长自动省略号。 */
.acc-item{ background:var(--card); border-radius:12px; margin:3px 12px; padding:9px 11px; display:flex; align-items:center; gap:9px; flex-wrap:nowrap; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.acc-item .acc-icon{ width:34px; height:34px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; box-shadow:0 0 0 1px var(--border); }
/* 2026-09-18 老牟：「所有账本列表前面那个图标还是用白底，不要带颜色，看起来好乱」
   → 删除卡片图标的组色浅底，统一回到 .acc-item .acc-icon 的白底 + 灰边框；彩色只留给分组底带 */
.acc-item .acc-body{ flex:1 1 0; min-width:0; }
.acc-item .acc-name{ font-size:14.5px; font-weight:bold; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-item .acc-desc{ font-size:11px; color:var(--text2); margin-top:1px; }
.acc-item .acc-right{ text-align:right; flex-shrink:0; margin-left:auto; }
.acc-item .acc-balance{ font-size:15px; font-weight:bold; color:var(--text); white-space:nowrap; }
.acc-item .acc-tag{ font-size:10px; color:var(--text2); margin-top:1px; }

/* ===== 交易项（复刻 item_tx） ===== */
/* 2026-09-17 老牟：「账单列表每笔之间要有区分，简洁明了」
   病根① 卡片垂直间距只有 3px、阴影 alpha 仅 .04 → 白卡片糊成一整片，看不出每笔边界
   病根② 标签行塞太多（分类+状态+「我」+记账人名+附件数+评论数），且「我」和记账人名是同一个人却重复显示，挤不下就乱换行 */
.tx-item{ background:var(--card); border-radius:11px; margin:5px 12px; padding:9px 11px; display:flex; align-items:center; gap:9px; row-gap:5px; flex-wrap:wrap; cursor:pointer; box-shadow:0 1px 3px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.045); }
.tx-item:active{ background:#F8FAFC; }
/* 弹窗内的账单行去掉左右外边距（2026-09-17 看板清单） */
.modal .tx-item{ margin:5px 0; }
.tx-item .tx-icon{ width:32px; height:32px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; box-shadow:0 0 0 1px var(--border); }
.tx-item .tx-body{ flex:1 1 120px; min-width:0; }
.tx-item .tx-note{ font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-item .tx-meta{ display:flex; align-items:center; gap:5px; margin-top:3px; flex-wrap:wrap; }
.tx-item .tx-amount{ font-size:14.5px; font-weight:bold; color:var(--text); flex-shrink:0; margin-left:auto; }
.tx-item .tx-amount.out{ color:var(--red); }
/* 金额列：金额 + 下方计数（附件/评论）。计数从标签行挪到这里，标签行只留关键标签（2026-09-17） */
.tx-item .tx-right{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex-shrink:0; margin-left:auto; }
.tx-item .tx-right .tx-amount{ margin-left:0; }
.tx-item .tx-extra{ font-size:11px; color:var(--hint); white-space:nowrap; }

/* 按天分组头（复刻 item_tx_day） */
.tx-day{ display:flex; justify-content:space-between; padding:8px 14px 1px; font-size:12.5px; font-weight:bold; color:var(--text); }
.tx-day .day-total{ color:var(--text); }

/* ===== chips / 标签 ===== */
.chip{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; }
.chip.cat{ background:var(--blue-light); color:var(--primary); }
.chip.no-inv{ background:#F1F5F9; color:#64748B; }  /* 无需开：清淡灰，不标红（2026-09-15 改） */
.chip.has-inv{ background:var(--green-light); color:#047857; }
.chip.hidden{ background:var(--pink-light); color:#BE185D; }
.chip.mine{ background:var(--gray-light); color:var(--text2); }
.chip.user{ background:var(--blue-light); color:var(--primary); }
.chip.book{ background:#F3E8FF; color:#7E22CE; }  /* 所属账本（2026-09-17 详情页基本信息区新增）*/
.avatar-mini{ width:18px; height:18px; border-radius:50%; object-fit:cover; background:var(--blue-light); }

/* 筛选条（复刻 bg_filter_on/off） */
.filter-bar{ display:flex; gap:8px; padding:14px 16px 0; overflow-x:auto; }
.filter-bar .chip-btn{ flex-shrink:0; padding:7px 14px; border-radius:17px; border:none; font-size:12px; font-weight:bold; cursor:pointer; background:var(--gray-light); color:var(--text2); }
.filter-bar .chip-btn.on{ background:var(--primary); color:#fff; }
.filter-bar .chip-btn.warn.on{ background:var(--red); color:#fff; }
.filter-bar .chip-btn.ok.on{ background:var(--green); color:#fff; }
/* 本账搜索（2026-09-26 老牟定 v2）：入口挪到筛选条右侧圆形图标；✕ 两段式（有字清空/没字收起）；命中数 */
.filter-search-btn{ flex-shrink:0; width:34px; height:34px; margin-left:auto; border:none; border-radius:50%; background:var(--gray-light); color:var(--text2); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s,transform .15s; }
.filter-search-btn:active{ transform:scale(.94); }
.filter-search-btn.on{ background:var(--primary); color:#fff; }
.sbar-wrap{ padding:10px 16px 0; animation:sbarIn .15s ease-out; }
@keyframes sbarIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.sbar{ display:flex; align-items:center; gap:8px; padding:0 6px 0 12px; height:44px; background:var(--gray-light); border:1.5px solid transparent; border-radius:17px; transition:border-color .15s,box-shadow .15s,background .15s; }
.sbar:focus-within{ background:var(--card); border-color:var(--primary); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.sbar-ico{ font-size:15px; opacity:.75; }
.sbar-input{ flex:1; min-width:0; height:100%; border:none; outline:none; background:transparent; font-size:14px; color:var(--text); }
.sbar-input::placeholder{ color:var(--text2); }
.sbar-count{ flex-shrink:0; font-size:12px; color:var(--text2); white-space:nowrap; }
.sbar-x{ flex-shrink:0; width:26px; height:26px; margin-right:2px; border:none; border-radius:50%; background:rgba(0,0,0,.06); color:var(--text2); font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s; }
.sbar-x:active{ background:rgba(0,0,0,.14); }
/* 发票状态筛选：grid 等宽均分，图标+文字居中排列（2026-08-16 修复排列不齐） */
#acc-status-filter{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; overflow-x:visible; }
#acc-status-filter .chip-btn{ padding:7px 2px; text-align:center; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:3px; }

/* ===== 按钮 ===== */
.btn{ display:block; width:100%; padding:14px; border:none; border-radius:12px; font-size:16px; font-weight:bold; cursor:pointer; }
.btn.primary{ background:var(--primary); color:#fff; letter-spacing:.08em; }
.btn.primary:active{ background:var(--primary-dark); }
.btn.secondary{ background:var(--blue-light); color:var(--primary); }
.btn.outline{ background:#fff; color:var(--primary); border:1px solid var(--primary); }
.btn.danger{ background:var(--red); color:#fff; }
.btn.danger-outline{ background:#fff; color:var(--red); border:1px solid var(--red); }
.btn.small{ display:inline-block; width:auto; padding:6px 14px; font-size:13px; border-radius:8px; }
.btn.dashed{ background:#fff; border:1.5px dashed var(--dash-blue); color:var(--primary); border-radius:12px; }
.btn.disabled{ opacity:.5; pointer-events:none; }
/* 大按钮 */
.btn-lg{ height:56px; font-size:17px; }

/* ===== 表单（复刻单机版行式） ===== */
.form-card{ background:var(--card); border-radius:16px; margin:10px 16px; overflow:hidden; }
.form-card .row{ display:flex; align-items:center; padding:14px; gap:12px; }
.form-card .row + .row{ border-top:0.5px solid var(--border); }
.form-card .row .lbl{ font-size:15px; color:var(--text); white-space:nowrap; }
.form-card .row .val{ flex:1; text-align:right; font-size:15px; font-weight:bold; color:var(--text); background:none; border:none; }
.form-card .row .val.ph{ color:var(--hint); font-weight:normal; }
.form-card .row .arrow{ color:#C4C9D0; font-size:14px; }
.form-card .row input.val{ outline:none; }
.form-card .row textarea.val{ resize:none; min-height:40px; text-align:right; outline:none; }
/* 金额大输入 */
.amount-card{ background:var(--card); border-radius:16px; margin:10px 16px; padding:14px; }
.amount-card .lbl{ font-size:12px; color:var(--text2); }
.amount-card input{ width:100%; border:none; outline:none; font-size:34px; font-weight:bold; color:var(--text); margin-top:6px; }
.amount-card input::placeholder{ color:var(--hint); }
.amount-card .hint{ font-size:11px; color:var(--hint); margin-top:4px; }

/* 分类网格 */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.cat-item{ padding:10px 4px; text-align:center; border-radius:12px; background:var(--gray-light); cursor:pointer; font-size:13px; border:1.5px solid transparent; }
.cat-item .ci{ font-size:20px; display:block; }
.cat-item.selected{ background:var(--blue-light); border-color:var(--primary); color:var(--primary); font-weight:bold; }
.cat-group-h{ grid-column:1/-1; font-size:12px; font-weight:700; color:var(--text2); margin:8px 2px -2px; padding-left:2px; }

/* 图标/颜色选择网格 */
.icon-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.icon-tile{ width:44px; height:44px; margin:0 auto; border-radius:12px; background:var(--gray-light); display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; border:1.5px solid transparent; }
.icon-tile.selected{ border-color:var(--primary); background:var(--blue-light); }
/* 图标分组标签（2026-09-17 老牟要求图标要多）：grid 里独占一整行 */
.icon-group-label{ grid-column:1/-1; font-size:12px; font-weight:bold; color:var(--text2); margin:12px 2px 0; }
.icon-group-label:first-child{ margin-top:0; }
/* 账本图标用上传图片时（2026-09-17）：铺满 44×44 的图标位，跟 emoji 一样大 */
/* 2026-09-18 老牟：上传的封面图不要铺满图框 —— 缩到跟 emoji 图标差不多大（26px），
   四周留出白底（44-26=18px，每边 9px），看得出这是"白框图框里放了张图"
   ⚠️ 原为 width/height:100% → 图片把 44×44 白底整个盖住，跟别的账本图标不是一套视觉 */
.acc-icon-img{ width:20px; height:20px; border-radius:6px; object-fit:cover; display:block; }
/* 新建/编辑账本里的图片预览框 */
.acc-img-preview{ width:52px; height:52px; border-radius:14px; background:var(--gray-light); display:flex; align-items:center; justify-content:center; font-size:24px; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 1px var(--border); }
.color-grid{ display:flex; gap:12px; flex-wrap:wrap; }
.color-tile{ width:36px; height:36px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; }
.color-tile.selected{ border-color:var(--primary); box-shadow:0 0 0 2px #fff inset; }

/* 发票九宫格 */
.invoice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.invoice-grid .inv-item{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--gray-light); }
.invoice-grid img{ width:100%; height:100%; object-fit:cover; }
.invoice-grid .del{ position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; width:22px; height:22px; font-size:12px; line-height:22px; }
.inv-add{ aspect-ratio:1/1; border:1.5px dashed var(--dash-blue); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--primary); font-size:12px; cursor:pointer; background:var(--blue-light); -webkit-tap-highlight-color:transparent; }
.inv-add .plus{ font-size:26px; line-height:1; }
.inv-add span:last-child{ line-height:1; white-space:nowrap; }
/* 照片水印：上传人 + 时间（2026-09-15 老牟要求：像水印一样浮在照片上） */
.inv-wm{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column;
  padding:6px 5px 3px; background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color:#fff; font-size:9px; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.85); pointer-events:none; }
.inv-wm span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.95; }
/* 照片右下角拍摄者署名（2026-09-15 抽成 class，发票/记账照片共用） */
.inv-owner{ position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); color:#fff; font-size:10px; text-align:center; padding:1px; }
/* 留言头像（2026-09-15 老牟要求：名字前补头像） */
.c-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.c-avatar-ph{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--blue-light); color:var(--primary); font-size:12px; font-weight:bold; flex-shrink:0; }

/* 发票状态快捷按钮（2026-09-15 老牟要求：详情页发票区下方加「已开 / 无需开」） */
.inv-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.inv-quick .inv-btn{ display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:5px;
  padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:#fff; color:var(--text2);
  cursor:pointer; transition:all .15s ease; -webkit-tap-highlight-color:transparent; font-family:inherit; }
.inv-quick .inv-btn:active{ transform:scale(.97); }
.inv-quick .inv-btn .ico{ font-size:13px; line-height:1; }
.inv-quick .inv-btn .txt{ font-size:12px; font-weight:bold; line-height:1; white-space:nowrap; }
.inv-quick .inv-btn.on.has{ background:var(--green-light); color:#047857; border-color:#A7F3D0; box-shadow:0 1px 3px rgba(4,120,87,.12); }
.inv-quick .inv-btn.on.pending{ background:var(--red-light); color:var(--red); border-color:#FCA5A5; box-shadow:0 1px 3px rgba(239,68,68,.12); }
.inv-quick .inv-btn.on.no{ background:#F1F5F9; color:#475569; border-color:#CBD5E1; box-shadow:0 1px 3px rgba(71,85,105,.12); }
/* 待刘悦确认（2026-09-15 审批流）：橙色 */
.inv-quick .inv-btn.on.wait{ background:#FEF3C7; color:#B45309; border-color:#FCD34D; box-shadow:0 1px 3px rgba(180,83,9,.12); }
.inv-apply{ margin-top:10px; padding:10px 12px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; }
.inv-apply-txt{ font-size:12px; color:#92400E; line-height:1.5; }
.inv-acts{ display:flex; gap:8px; margin-top:10px; }
.inv-acts .btn{ margin:0; flex:1; }
/* 驳回留痕（2026-09-17 老牟要求：被驳回后账单上留个前情提示，不让申请人一头雾水） */
.inv-rej-tip{ margin-top:10px; padding:10px 12px; background:#FEF2F2; border:1px solid #FECACA; border-radius:10px; font-size:12px; color:#B91C1C; line-height:1.5; }
.inv-quick .inv-hint{ grid-column:1 / -1; font-size:10px; color:var(--text2); text-align:center; opacity:.85; margin-top:-1px; }
.inv-tip{ font-size:11px; color:var(--text2); margin-top:8px; line-height:1.55; }
.inv-help-btn{ background:none; border:none; font-size:14px; cursor:pointer; padding:2px 4px; border-radius:50%; opacity:.5; transition:opacity .2s; }
.inv-help-btn:hover{ opacity:1; background:rgba(0,0,0,.05); }
.inv-help-pop{ margin-top:10px; padding:0; overflow:hidden; }
.inv-help-inner{ padding:12px 14px; background:#fff; border:1px solid #E5E7EB; border-radius:10px; font-size:12.5px; color:var(--text); line-height:1.8; box-shadow:0 2px 8px rgba(0,0,0,.06); }

/* 留言 */
.comment-item{ padding:10px 0; border-bottom:0.5px solid var(--border); }
.comment-item:last-child{ border-bottom:none; }
.comment-item .c-head{ display:flex; align-items:flex-start; gap:8px; font-size:13px; }
.comment-item .c-head .c-meta{ flex:1; min-width:0; }
.comment-item .c-head .c-top{ display:flex; align-items:baseline; gap:8px; overflow:hidden; }
.comment-item .c-head .who{ font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comment-item .c-head .time{ color:var(--hint); font-size:11px; white-space:nowrap; flex-shrink:0; }
.comment-item .c-acts{ display:flex; gap:14px; row-gap:4px; margin-top:3px; flex-wrap:wrap; }
/* 留言编辑/删除按钮：原来 link-btn 无样式，显示为浏览器默认粗框按钮，排版难看（2026-09-15 补） */
.link-btn{ background:none; border:none; padding:0; margin:0; color:var(--primary);
  font-size:12px; font-family:inherit; line-height:1.4; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.link-btn:active{ opacity:.55; }
.comment-item .c-text{ margin-top:4px; font-size:14px; }
.comment-input{ display:flex; gap:8px; margin-top:12px; }
.comment-input input, .comment-input textarea{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; outline:none; resize:none; font-family:inherit; line-height:1.4; }
/* 2026-09-25：发送键由 <button> 换成 div（原生 button 会断安卓 WebView 输入法组合事件），补齐原生按钮自带的内容居中 */
.comment-input .btn{ display:flex; align-items:center; justify-content:center; text-align:center; }

/* ===== 弹窗 ===== */
.modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:none; align-items:flex-end; }
.modal-mask.show{ display:flex; }
/* 2026-09-20 新增：二级弹窗层级（叠加在别的弹窗之上再打开的弹窗）—— 修复「分享到站内信」选人弹窗被账单详情挡住 */
.modal-mask--top{ z-index:300; }
.modal{ background:#fff; width:100%; border-radius:16px 16px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); max-height:88vh; overflow-y:auto; }
/* 账单详情：内容区滚动 + 底部操作按钮固定（适配各种屏宽高比） */
.modal-detail-box{ display:flex; flex-direction:column; max-height:90vh; padding-bottom:0; overflow:hidden; }
.modal-detail-box .modal-title{ flex:0 0 auto; padding-right:30px; }
.modal-detail-box #detail-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px; }
.modal-detail-box #detail-actions{ flex:0 0 auto; border-top:0.5px solid var(--border); padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:#fff; }
/* 发票按钮：金额右侧（2026-08-16 只挪按钮，其他不动） */
/* 账单详情：左=详情，右=发票整体区域（2026-08-16 老牟要求：发票区域整体放金额右手边） */
.detail-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:10px; align-items:start; }
.detail-col{ min-width:0; }
.detail-col .invoice-grid{ grid-template-columns:repeat(2,1fr); gap:6px; }
.detail-col .inv-add{ aspect-ratio:1/1; font-size:10.5px; gap:2px; }
.detail-col .inv-add .plus{ font-size:20px; }
.modal .modal-title{ font-size:17px; font-weight:bold; margin-bottom:14px; text-align:center; position:relative; }
.modal .modal-close{ position:absolute; right:0; top:-4px; font-size:18px; color:var(--muted,#9CA3AF); background:none; border:none; cursor:pointer; }

/* ===== 账单详情：三大分区（2026-09-17 老牟要求：照任务详情逻辑，分「基本信息/发票情况/留言」三区）===== */
.modal-close-fixed{ position:fixed !important; top:80px !important; right:16px !important; width:36px; height:36px; font-size:16px; color:#6B7280; background:#fff; border:1.5px solid #D1D5DB; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10000; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.modal-close-fixed:hover{ background:#F3F4F6; color:#374151; border-color:#9CA3AF; }
.modal-close-fixed:active{ background:#E5E7EB; }
.detail-section{ padding:16px; margin-bottom:12px; border-radius:16px; }
.detail-section-info{ background:linear-gradient(135deg,#F0F9FF 0%,#E0F2FE 100%); border:1px solid #BAE6FD; }
.detail-section-invoice{ background:linear-gradient(135deg,#F0FDF4 0%,#DCFCE7 100%); border:1px solid #BBF7D0; }
.detail-section-comment{ background:linear-gradient(135deg,#FFF7ED 0%,#FFEDD5 100%); border:1px solid #FED7AA; }
/* 补充内容区（2026-09-17 老牟要求：补充的照片/附件/定位/选点 单开一区，淡紫配色）*/
.detail-section-extra{ background:linear-gradient(135deg,#FAF5FF 0%,#F3E8FF 100%); border:1px solid #E9D5FF; }
.extra-actions{ display:flex; gap:8px; margin-bottom:10px; }
.extra-act{ flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:8px 4px; border-radius:10px;
  border:1px solid #E9D5FF; background:#fff; color:#7E22CE; font-size:12px; font-weight:bold; font-family:inherit;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all .15s ease; }
.extra-act:active{ transform:scale(.97); background:#FAF5FF; }
.extra-act .ea-ico{ font-size:14px; line-height:1; }
.extra-list{ display:flex; flex-direction:column; gap:8px; }
.extra-row{ display:flex; align-items:flex-start; gap:8px; background:#fff; border:1px solid #F3E8FF; border-radius:10px; padding:8px 10px; }
.extra-ico{ font-size:16px; line-height:1.3; flex-shrink:0; }
.extra-body{ flex:1; min-width:0; }
.extra-thumb{ display:block; width:72px; height:72px; object-fit:cover; border-radius:8px; margin-bottom:4px; }
.extra-file{ display:inline-block; font-size:13.5px; color:#7E22CE; text-decoration:none; word-break:break-all; font-weight:600; }
.extra-size{ font-size:11px; color:var(--hint); margin-left:6px; }
.extra-loc{ font-size:13.5px; color:var(--text); line-height:1.45; word-break:break-all; }
.extra-loc-acts{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.extra-mini{ display:inline-flex; align-items:center; gap:3px; font-size:12px; padding:5px 10px; border-radius:8px; border:1px solid #E9D5FF; background:#FAF5FF; color:#7E22CE; font-weight:600; cursor:pointer; line-height:1.3; }
.extra-mini:active{ background:#F3E8FF; }
.extra-meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--hint); margin-top:4px; }
.extra-del{ flex-shrink:0; width:24px; height:24px; border-radius:50%; border:none; background:#F3F4F6; color:#9CA3AF; font-size:12px; cursor:pointer; line-height:1; }
.extra-del:active{ background:#E5E7EB; }
.extra-empty{ font-size:13px; color:var(--text2); padding:8px 2px; }
.detail-section .sec-title{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:10px; }
/* 概况网格（照任务详情）*/
.sum-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:10px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.sum-cell{ background:#fff; padding:9px 8px; min-width:0; }
.sum-label{ font-size:11px; color:var(--hint); margin-bottom:3px; }
.sum-val{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.35; word-break:break-all; }
.sum-val.sum-small{ font-size:11.5px; font-weight:500; color:var(--text2); }
.sum-val.sum-red{ color:#EF4444; }
.sum-note{ margin-top:10px; background:rgba(255,255,255,.7); border-radius:10px; padding:10px; font-size:14px; line-height:1.6; }
.sum-loc{ margin-top:8px; font-size:13px; color:var(--text2); background:rgba(255,255,255,.7); border-radius:10px; padding:8px 10px; }
/* 分区内白卡片（照片区/发票区内部小组件）*/
.detail-section .card{ margin:0; box-shadow:none; }
.modal-center{ align-items:center; justify-content:center; }
.modal-center .modal{ border-radius:14px; max-width:320px; margin:0 30px; }

/* ===== 统计卡 ===== */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 16px; }
.stat-card{ background:var(--card); border-radius:16px; padding:14px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.stat-card .s-label{ font-size:12px; color:var(--text2); }
.stat-card .s-val{ font-size:20px; font-weight:bold; margin-top:4px; }
.stat-card .s-sub{ font-size:11px; color:var(--text2); margin-top:2px; }
.stat-card.red .s-val{ color:var(--red); }
.stat-card.green .s-val{ color:#047857; }
.stat-card.blue .s-val{ color:var(--primary); }

/* ===== 用户项 ===== */
/* 2026-09-16 修复：按钮多时把名字挤成一列一个字 —— 允许换行 + 给信息区最小宽度 */
.user-item{ background:var(--card); border-radius:16px; margin:5px 16px; padding:12px 14px; display:flex; align-items:center; gap:12px; row-gap:8px; flex-wrap:wrap; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.user-item .u-avatar{ width:40px; height:40px; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden; flex-shrink:0; }
.user-item .u-avatar img{ width:100%; height:100%; object-fit:cover; }
.user-item .u-info{ flex:1 1 140px; min-width:0; }
.user-item .u-name{ font-weight:bold; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-item .u-sub{ font-size:12px; color:var(--text2); margin-top:2px; }
.user-item .u-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
.tag-role{ font-size:11px; padding:2px 8px; border-radius:6px; }
.tag-role.super_admin{ background:var(--amber-light); color:#92400E; }
.tag-role.admin{ background:var(--blue-light); color:#1E40AF; }
.tag-role.user{ background:var(--gray-light); color:#4B5563; }
.tag-status{ font-size:11px; padding:2px 8px; border-radius:6px; }
.tag-status.pending{ background:var(--amber-light); color:#92400E; }
.tag-status.active{ background:var(--green-light); color:#047857; }
.tag-status.rejected{ background:var(--red-light); color:var(--red); }

/* 日志 */
.log-item{ background:var(--card); border-radius:10px; margin:5px 16px; padding:10px 12px; font-size:13px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.log-item .l-time{ color:var(--hint); font-size:11px; margin-left:6px; }

/* 空状态 */
.empty{ text-align:center; color:var(--text2); padding:40px 20px; font-size:13px; }
.empty .e-ico{ font-size:40px; margin-bottom:8px; }

/* Toast */
.toast{ position:fixed; top:15%; left:50%; transform:translateX(-50%); background:rgba(17,24,39,.9); color:#fff; padding:10px 20px; border-radius:10px; font-size:14px; z-index:999; max-width:80%; text-align:center; opacity:0; transition:opacity .3s; pointer-events:none; }
.toast.show{ opacity:1; }

/* 加载 */
.loading{ text-align:center; padding:30px; color:var(--text2); }
.spinner{ display:inline-block; width:22px; height:22px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-right:8px; }

/* 下拉刷新指示器（2026-09-15 老牟要求） */
.ptr-ind{ position:fixed; left:50%; top:10px; transform:translate(-50%,-60px); opacity:0;
  display:flex; align-items:center; gap:6px; background:#fff; color:var(--text2);
  font-size:12px; font-weight:bold; padding:7px 14px; border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.14); z-index:300; pointer-events:none;
  transition:opacity .15s ease, transform .18s ease; }
.ptr-ind.show{ opacity:1; }
.ptr-ind .spinner{ width:14px; height:14px; border-width:2px; margin-right:0; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 内容区底部留白 */
.content{ padding-bottom:80px; }
.content-tight{ padding-bottom:20px; }

/* 底部固定按钮（只留记一笔，新建账本已挪到顶部） */
.bottom-btn{ position:fixed; bottom:0; left:0; right:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--bg) 30%); z-index:50; box-sizing:border-box; }
.bottom-btn .btn{ box-shadow:0 2px 8px rgba(59,130,246,.35); }
#home-list{ padding-bottom:100px; }
/* ===== 分组配色（2026-09-18 老牟要求：共享账本 / 私有账本 / 往来账 三个区域用颜色区分）=====
   克制做法：标题 = 浅色底带 + 左侧色条 + 图标色块；卡片图标同色浅底呼应。
   不整块刷背景（老牟曾反馈配色"怪怪的"，只用浅底 + 细条，靠蓝/紫/琥珀三色区分） */
.gc-share{ --gc:#3B82F6; --gc-soft:#EFF6FF; --gc-line:rgba(59,130,246,.30); --gc-tx:#2563EB; }
.gc-priv { --gc:#8B5CF6; --gc-soft:#F5F3FF; --gc-line:rgba(139,92,246,.30); --gc-tx:#6D28D9; }
.gc-party{ --gc:#F59E0B; --gc-soft:#FFFBEB; --gc-line:rgba(245,158,11,.36); --gc-tx:#B45309; }
.gc-corp { --gc:#10B981; --gc-soft:#ECFDF5; --gc-line:rgba(16,185,129,.30); --gc-tx:#047857; }
/* 「别人的往来账」（超管旁观）—— 中性灰：跟「我的」区分开，视觉上退后一层 */
.gc-view { --gc:#94A3B8; --gc-soft:#F8FAFC; --gc-line:rgba(148,163,184,.34); --gc-tx:#64748B; }

.acc-group-head{ display:flex; align-items:center; gap:7px; margin:6px 12px 3px; padding:3px 9px;
  font-size:13px; font-weight:bold; color:var(--gc-tx,var(--text2));
  background:var(--gc-soft,transparent); border-radius:9px; }   /* 2026-09-18 老牟：去掉左侧 3px 色条 */
.acc-group-head:first-child{ margin-top:8px; }
/* 分组图标：白底小色块，让 emoji 在浅色带上更清楚 */
.acc-group-head .agt-icon{ display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:6px; background:#fff; box-shadow:0 0 0 1px var(--border); font-size:11px; }
.acc-group-sub{ font-size:11px; font-weight:normal; color:var(--hint); }

/* 设置列表项 */
.set-item{ background:var(--card); border-radius:16px; margin:5px 16px; padding:14px; display:flex; align-items:center; gap:12px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.set-item .set-icon{ width:40px; height:40px; border-radius:12px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.set-item .set-body{ flex:1; }
.set-item .set-name{ font-size:15px; font-weight:bold; }
.set-item .set-sub{ font-size:12px; color:var(--text2); margin-top:2px; }
.set-item .set-arrow{ color:var(--hint); }

/* 登录/注册页 */
.auth-wrap{ min-height:100vh; background:linear-gradient(135deg,#3B82F6 0%,#6366F1 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; }
.auth-logo{ font-size:54px; margin-bottom:8px; }
.auth-title{ color:#fff; font-size:26px; font-weight:bold; }
.auth-sub{ color:rgba(255,255,255,.85); font-size:13px; margin-top:4px; margin-bottom:28px; }
.auth-card{ width:100%; max-width:380px; background:#fff; border-radius:20px; padding:24px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.auth-card .field{ margin-bottom:14px; }
.auth-card .field input{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; font-size:16px; outline:none; }
.auth-card .field input:focus{ border-color:var(--primary); }
.auth-links{ display:flex; justify-content:space-between; margin-top:14px; font-size:13px; color:var(--primary); }
.auth-links span{ cursor:pointer; }

/* 隐藏账单横幅 */
.hidden-banner{ background:var(--pink-light); color:#BE185D; font-size:12px; padding:8px 16px; text-align:center; }

/* 我的信息卡 */
.me-card{ background:var(--card); border-radius:16px; margin:16px; padding:18px; display:flex; align-items:center; gap:14px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.me-card .me-avatar{ width:56px; height:56px; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden; flex-shrink:0; }
.me-card .me-avatar img{ width:100%; height:100%; object-fit:cover; }

/* ========== 记一笔 · 工具行（复刻单机版：拍照/相册/识别/语音） ========== */
.tool-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tool-btn{ flex:1; min-width:70px; padding:10px 6px; border:1px solid var(--border); border-radius:12px;
  background:var(--card); color:var(--text1); font-size:13px; display:flex; flex-direction:column; align-items:center;
  gap:3px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tool-btn:active{ background:var(--bg); }
.tool-btn:disabled{ opacity:.5; }
.tool-btn .tb-ico{ font-size:20px; line-height:1; }
/* 照片九宫格 */
.photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ph-item{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bg); }
.ph-item img{ width:100%; height:100%; object-fit:cover; }
.ph-del{ position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px; border:none; line-height:1; cursor:pointer; }
/* 位置行 */
.loc-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* 2026-09-17 加固：长地址不缩成竖排（同简易任务同款 bug 预防） */
.loc-row #location-view,
.loc-row .loc-txt{ flex:1 1 auto; min-width:0; word-break:break-word; overflow-wrap:anywhere; }
.loc-row .loc-del{ margin-left:auto; color:var(--text2); cursor:pointer; font-size:14px; padding:4px; }

/* 发票三态标签 */
.chip.pending-inv{ background:var(--red-light); color:var(--red); }
/* 报销状态标签（2026-09-18 老牟要求：列表和详情都要看得到） */
.chip.reimb-paid{ background:var(--green-light); color:#047857; }
.chip.reimb-ing{ background:var(--amber-light); color:#B45309; }
.chip.reimb-no{ background:#F1F5F9; color:#94A3B8; }
.reimb-line{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:8px 10px; border-radius:10px; font-size:12.5px; line-height:1.5; }
.reimb-line.ok{ background:var(--green-light); color:#047857; }
.reimb-line.ing{ background:var(--amber-light); color:#B45309; }
.reimb-line.no{ background:#F1F5F9; color:#64748B; }
.reimb-line-k{ flex:none; font-weight:600; }
.reimb-line-v{ min-width:0; word-break:break-all; }  /* 待开：红色标红提醒（2026-09-15 改） */
.stat-card.warn-card{ background:var(--amber-light); }

/* 地图选点弹窗（iframe） */
.map-picker-mask{ background:rgba(0,0,0,.5); }
.map-picker-frame{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; background:#f5f6f8; }

/* ===== 记一笔页紧凑布局（v20260813p） =====
   整体压缩高度：一屏放下，避免浏览器上下滑动/底部导航栏遮挡 */
#view-add .header{ padding:10px 18px 12px; }
#view-add .header .h-title{ font-size:18px; margin-top:4px; }
#view-add .header .h-sub{ font-size:11px; }
#view-add .form-card{ margin:8px 16px; }
#view-add .form-card .row{ padding:9px 14px; }
#view-add .amount-card{ margin:8px 16px; padding:10px 14px; }
#view-add .amount-card input{ font-size:28px; margin-top:2px; }
#view-add .amount-card .hint{ display:none; }
#view-add .tool-btn{ padding:7px 6px; }
#view-add .tool-btn .tb-ico{ font-size:17px; }
#view-add .photo-grid{ margin-top:8px; }
#view-add .ph-item{ border-radius:8px; }
#view-add .btn-lg{ height:46px; font-size:16px; }
#view-add .loc-row{ margin-top:6px !important; padding:6px 10px !important; }

/* ===== 全屏图片预览（2026-08-16 支持缩放/拖动） ===== */
.img-preview-mask{ position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:999; display:none; overflow:hidden; }
.img-preview-mask.show{ display:block; }
.img-preview-track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.img-preview-track::-webkit-scrollbar{ display:none; }
.img-preview-slide{ flex:0 0 100%; width:100%; height:100%; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; touch-action:pan-x pan-y; }
.img-preview-slide img{ max-width:96%; max-height:88vh; object-fit:contain; border-radius:6px; transform-origin:center center; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.img-preview-close{ position:fixed; top:calc(16px + env(safe-area-inset-top)); right:16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; font-size:20px; border:none; cursor:pointer; z-index:1000; }
.img-preview-counter{ position:fixed; top:calc(20px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); color:#fff; font-size:14px; background:rgba(0,0,0,.5); padding:4px 14px; border-radius:20px; z-index:1000; pointer-events:none; }
.img-preview-nav{ position:fixed; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:28px; line-height:44px; text-align:center; border:none; cursor:pointer; z-index:1000; }
.img-preview-prev{ left:12px; }
.img-preview-next{ right:12px; }
.img-preview-hint{ position:fixed; bottom:calc(30px + env(safe-area-inset-bottom)); left:0; right:0; text-align:center; color:#fff; font-size:13px; pointer-events:none; z-index:1000; }

/* ===== 留言提醒：已读/未读 + 删除（2026-09-15 老牟要求） ===== */
.noti-bar{ display:flex; gap:16px; padding:0 2px 10px; border-bottom:0.5px solid var(--border); margin-bottom:10px; }
.noti-item{ border-radius:12px; padding:10px 12px; margin-bottom:8px; border:1px solid var(--border); background:#fff; }
.noti-item.unread{ background:var(--blue-light); border-color:#BFDBFE; }
.noti-item.read{ background:var(--bg); }
.noti-item.read .noti-title{ color:var(--text2); font-weight:normal; }
.noti-item.read .noti-text, .noti-item.read .noti-meta{ opacity:.75; }
.noti-main{ cursor:pointer; }
.noti-title{ font-size:13px; font-weight:bold; display:flex; align-items:center; gap:5px; }
.noti-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0; }
.noti-text{ font-size:12px; color:var(--text2); margin-top:3px; word-break:break-all; }
.noti-meta{ font-size:11px; color:var(--hint); margin-top:3px; }
.noti-acts{ display:flex; gap:14px; margin-top:8px; padding-top:7px; border-top:0.5px dashed var(--border); }
.link-btn.danger{ color:var(--red); }

/* 提醒标题里的日期（2026-09-15 老牟要求：同名账目靠日期区分） */
.noti-date{ font-size:11px; font-weight:normal; color:var(--text2); background:var(--gray-light); padding:1px 6px; border-radius:8px; }
.noti-item.unread .noti-date{ background:#DBEAFE; color:#2563EB; }

/* 留言回复：楼中楼（2026-09-15 老牟要求：像抖音一样可回复某条留言） */
.c-reply{ margin-left:34px; padding-left:10px; border-left:2px solid var(--border); }
.c-at{ color:var(--primary); font-weight:bold; margin-right:3px; }
.reply-box{ display:none; gap:8px; margin-top:7px; align-items:center; }
.reply-box.show{ display:flex; }
.reply-box input{ flex:1; min-width:0; font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:9px; background:#fff; }

/* ===== 地图选点（2026-09-17 搬自简易任务详情：搜地点 / 拖地图选点 / 回到当前位置） ===== */
.loc-picker-mask{ position:fixed; inset:0; background:var(--bg); z-index:1200; display:none; flex-direction:column; }
.loc-picker-mask.show{ display:flex; }
.lp-head{ display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:#fff; border-bottom:1px solid var(--border); }
.lp-input{ flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-size:14px; color:var(--text); outline:none; }
.lp-btn{ flex:0 0 auto; background:var(--primary); color:#fff; border:none; border-radius:10px; padding:9px 14px; font-size:14px; font-weight:bold; cursor:pointer; }
.lp-close{ flex:0 0 auto; background:var(--bg); color:var(--text2); border:1px solid var(--border); border-radius:10px; width:36px; height:36px; font-size:16px; cursor:pointer; }
.lp-mapwrap{ position:relative; flex:1; min-height:0; }
.lp-map{ width:100%; height:100%; background:#E8EDF3; }
.lp-pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); width:26px; height:34px; pointer-events:none; z-index:5; }
.lp-pin::before{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:26px; height:26px; background:var(--red); border:3px solid #fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.lp-pin::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:13px solid var(--red); }
.lp-results{ position:absolute; left:0; right:0; top:0; max-height:62%; overflow-y:auto; background:#fff; z-index:6; display:none; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.lp-myloc{ position:absolute; right:14px; bottom:16px; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:7; padding:0; }
.lp-myloc:active{ background:var(--blue-light); }
.lp-myloc.loading svg{ animation:lpSpin 1s linear infinite; }
@keyframes lpSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.lp-myloc.loading svg circle:nth-of-type(2){ stroke-dasharray:12 33; }
.lp-nudge{ position:absolute; left:14px; bottom:16px; z-index:7; display:grid; grid-template-columns:34px 34px 34px; grid-template-rows:34px 34px 34px; gap:3px; }
.nb-up{ grid-area:1/2; } .nb-left{ grid-area:2/1; } .nb-right{ grid-area:2/3; } .nb-down{ grid-area:3/2; }
.lp-nb{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:rgba(255,255,255,.94); color:#3B82F6; font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow:0 1px 4px rgba(0,0,0,.14); }
.lp-nb:active{ background:var(--blue-light); }
.lp-item{ padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; }
.lp-item:active{ background:var(--bg); }
.lp-item-name{ font-size:15px; color:var(--text); font-weight:600; }
.lp-item-addr{ font-size:12px; color:var(--hint); margin-top:2px; }
.lp-foot{ background:#fff; border-top:1px solid var(--border); padding:10px 14px calc(12px + env(safe-area-inset-bottom)); }
.lp-addr{ font-size:13px; color:var(--text2); line-height:1.4; margin-bottom:8px; min-height:18px; }

/* ---------- 报销（2026-09-17 老牟需求）---------- */
.st-chip{ display:inline-block; font-size:11px; padding:2px 7px; border-radius:10px; background:var(--gray-light); color:var(--text2); white-space:nowrap; }
.st-chip.warn{ background:var(--amber-light); color:#B45309; }
.st-chip.ok{ background:var(--green-light); color:#047857; }
.st-chip.dis{ background:var(--red-light); color:#B91C1C; }
.reimb-sec{ font-size:12px; color:var(--text2); margin:14px 0 6px; }
.reimb-empty{ font-size:12px; color:var(--hint); padding:8px 2px; }
/* 报销记录：搜索 + 筛选（2026-09-18 老牟定） */
.reimb-qbar{ display:flex; gap:8px; align-items:center; padding:0 16px; }
.reimb-qbar .reimb-q{ flex:1; width:auto; min-width:0; }
.reimb-qclr{ flex-shrink:0; border:1px solid var(--border); background:var(--card); color:var(--text2); font-size:13px; line-height:1; padding:9px 11px; border-radius:10px; cursor:pointer; }
.reimb-qclr:active{ opacity:.7; }
.reimb-qbtn{ flex-shrink:0; border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:9px 14px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.reimb-qbtn:active{ opacity:.8; }
.reimb-cnt{ padding:8px 16px 0; font-size:12px; color:var(--text2); }
.reimb-q{ width:100%; box-sizing:border-box; border:1px solid var(--border); background:var(--gray-light); border-radius:10px; padding:8px 11px; font-size:13px; color:var(--text); outline:none; }
.reimb-q:focus{ border-color:var(--accent); background:var(--card); }
.reimb-tabs{ display:flex; gap:6px; overflow-x:auto; padding:10px 16px 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.reimb-tabs::-webkit-scrollbar{ display:none; }
.reimb-tab{ flex-shrink:0; font-size:12px; padding:4px 10px; border-radius:20px; background:var(--gray-light); color:var(--text2); cursor:pointer; white-space:nowrap; }
.reimb-tab.on{ background:var(--accent); color:#fff; font-weight:600; }
/* 报销路径时间线 */
.reimb-path{ border-left:2px solid var(--border); padding-left:12px; }
.reimb-path-row{ position:relative; padding:5px 0 7px; }
.reimb-path-row::before{ content:''; position:absolute; left:-17px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--border); }
.reimb-path-row.done::before{ background:var(--green); }
.reimb-path-t{ font-size:12px; color:var(--text); font-weight:600; }
.reimb-path-b{ font-size:11px; color:var(--text2); margin-top:2px; }
.reimb-path-note{ font-size:11px; color:var(--text2); margin-top:3px; background:var(--gray-light); border-radius:8px; padding:4px 8px; overflow-wrap:anywhere; }
.reimb-item{ display:flex; align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid var(--border); }
.reimb-item:last-child{ border-bottom:none; }
.reimb-main{ flex:1 1 0; min-width:0; cursor:pointer; }
.reimb-no{ font-size:13px; font-weight:bold; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.reimb-meta{ font-size:11px; color:var(--text2); margin-top:2px; }
.reimb-note{ font-size:11px; color:#B45309; margin-top:3px; }
.reimb-right{ text-align:right; flex-shrink:0; }
.reimb-amt{ font-size:14px; font-weight:bold; color:#DC2626; }
.reimb-btns{ display:flex; gap:8px; margin-top:3px; justify-content:flex-end; }
.reimb-tools{ display:flex; gap:12px; margin-bottom:6px; }
.reimb-total{ margin-top:8px; padding:8px 10px; background:var(--gray-light); border-radius:10px; font-size:13px; color:var(--text); }
.pick-item{ display:flex; align-items:center; gap:8px; padding:8px 2px; border-bottom:1px solid var(--border); cursor:pointer; }
.pick-item:last-child{ border-bottom:none; }
.pick-item input[type=checkbox]{ width:18px; height:18px; flex-shrink:0; }
/* ===== 报销（2026-09-17 老牟要求：独立页面 + 逐笔/批量确认 + 驳回 + 帮助）===== */
.reimb-hero{ margin:0 16px 12px; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,#3B82F6,#6366F1); color:#fff; }
.reimb-hero-amt{ font-size:28px; font-weight:bold; line-height:1.15; }
.reimb-hero-sub{ font-size:12px; opacity:.9; margin-top:3px; }
.reimb-prog{ margin:10px 0 2px; }
.reimb-prog-bar{ height:6px; border-radius:6px; background:var(--border); overflow:hidden; }
.reimb-prog-bar i{ display:block; height:100%; background:#10B981; border-radius:6px; transition:width .25s; }
.reimb-prog-t{ font-size:12px; color:var(--text2); margin-top:5px; }
.reimb-drow{ border:1px solid var(--border); border-radius:12px; padding:9px 10px; margin-bottom:8px; }
.reimb-drow-main{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.reimb-drow-act{ display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.reimb-pick{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text2); margin-right:auto; }
.reimb-pick input{ width:16px; height:16px; }
.reimb-act{ border:none; border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:bold; cursor:pointer; }
.reimb-act.ok{ background:var(--green-light); color:#047857; }
.reimb-act.no{ background:var(--red-light); color:#B91C1C; }
.reimb-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:5px; }
.reimb-btns .link-btn{ font-size:12px; }
.reimb-rej-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:#FEF2F2; margin-bottom:7px; }
.reimb-rej-why{ font-size:11.5px; color:#B91C1C; margin-top:3px; }
.pick-item.pick-off{ opacity:.55; }
.pick-item.pick-off .tx-amount{ color:var(--text2); }
.pick-block{ font-size:11px; color:#B45309; margin-top:3px; }
.help-wrap{ font-size:13px; color:var(--text); line-height:1.65; }
.help-lead{ background:var(--blue-light); color:var(--primary); padding:9px 11px; border-radius:10px; margin-bottom:12px; font-size:12.5px; }
.help-h{ font-size:14px; font-weight:bold; margin:14px 0 6px; color:var(--text); }
.help-ol div{ padding:2px 0; }
.help-tbl div{ display:flex; align-items:center; gap:7px; padding:4px 0; flex-wrap:wrap; }
.help-tbl b{ color:var(--text); }
.help-tip{ font-size:11.5px; color:var(--text2); background:var(--gray-light); padding:7px 10px; border-radius:9px; margin-top:6px; }
.reimb-dl{ background:var(--gray-light); border-radius:12px; padding:10px 12px; }
.reimb-dl-row{ display:flex; justify-content:space-between; font-size:12px; padding:3px 0; gap:10px; }
.reimb-dl-row span{ color:var(--text2); flex-shrink:0; }
.reimb-dl-row b{ color:var(--text); text-align:right; font-weight:600; word-break:break-all; }


/* ==================== 🏦 对公账户专属页（2026-09-17）==================== */
.corp-bal { text-align:center; margin-top:10px; }
.corp-bal-lbl { font-size:12px; color:#CCFFFFFF; letter-spacing:.5px; }
.corp-bal-num { font-size:34px; font-weight:bold; color:#fff; letter-spacing:-0.5px; margin-top:2px; }
.corp-mon { display:flex; gap:6px; margin-top:14px; background:rgba(255,255,255,.15); border-radius:12px; padding:10px 2px; }
.corp-mon-c { flex:1; text-align:center; min-width:0; }
.cm-lbl { font-size:11px; color:#CCFFFFFF; margin-bottom:3px; }
.cm-num { font-size:14px; font-weight:bold; color:#fff; white-space:nowrap; }
.cm-num.in { color:#6EE7B7; }
.cm-num.out { color:#FCA5A5; }
.corp-txn { display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:12px 14px; margin:8px 12px; box-shadow:0 1px 3px rgba(0,0,0,.06); cursor:pointer; }
.corp-txn:active { background:#F9FAFB; }
.ct-ico { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:bold; flex-shrink:0; }
.ct-ico.in { background:#D1FAE5; color:#047857; }
.ct-ico.out { background:#FEE2E2; color:#B91C1C; }
.ct-body { flex:1; min-width:0; }
.ct-note { font-size:15px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-meta { font-size:11px; color:var(--hint); margin-top:3px; }
.ct-amt { font-size:16px; font-weight:bold; white-space:nowrap; flex-shrink:0; }
.ct-amt.in { color:#047857; }
.ct-amt.out { color:#B91C1C; }
/* 往来账专用（2026-09-17）：occ=占用/垫付增加（橙），rep=归还/收回（绿） */
.ct-ico.occ { background:#D1FAE5; color:#047857; }
.ct-ico.rep { background:#FEE2E2; color:#B91C1C; }
.ct-amt.occ { color:#047857; }
.ct-amt.rep { color:#B91C1C; }
.corp-opening-tip { font-size:12px; color:rgba(255,255,255,.75); margin-top:3px; }
/* 期初余额双方确认横幅（2026-09-18 老牟定） */
.corp-opening-pending { margin:10px 14px 0; padding:12px 14px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:12px; }
.obp-txt { font-size:13px; color:#92400E; line-height:1.65; }
.obp-acts { display:flex; gap:8px; margin-top:10px; }
.obp-acts .btn { flex:1; margin:0; }
.corp-bottom { display:flex; gap:10px; }
.corp-bottom .btn { flex:1; }
.corp-in { background:linear-gradient(135deg,#10B981,#059669); color:#fff; }
.corp-out { background:linear-gradient(135deg,#EF4444,#DC2626); color:#fff; }
.dir-seg { display:flex; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.dir-btn { padding:7px 20px; border:none; background:var(--bg); color:var(--text2); font-size:14px; font-weight:bold; cursor:pointer; }
.dir-btn.on { background:linear-gradient(135deg,#3B82F6,#6366F1); color:#fff; }

/* 确认框支持多行文案（2026-09-17） */
#confirm-text{ white-space:pre-line; }

/* 往来账确认制（2026-09-17 老牟定）：待确认标黄 / 已驳回标红 / 行内确认按钮 */
.corp-txn.pend { background:#FFFBEB; box-shadow:inset 3px 0 0 #F59E0B, 0 1px 3px rgba(0,0,0,.06); }
.corp-txn.rej  { background:#FEF2F2; box-shadow:inset 3px 0 0 #EF4444, 0 1px 3px rgba(0,0,0,.06); }
.pt-chip { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px; font-size:10px; font-weight:600; vertical-align:1px; }
.pt-chip.pend { background:#FEF3C7; color:#92400E; }
.pt-chip.rej  { background:#FEE2E2; color:#B91C1C; }
.pt-rej-note { font-size:11px; color:#B91C1C; margin-top:4px; line-height:1.5; }
.pt-acts { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.pt-btn { border:0; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.pt-btn.ok { background:#059669; color:#fff; }
.pt-btn.no { background:#F3F4F6; color:#B91C1C; }

/* 首页分组折叠（2026-09-17 老牟定：往来账平时用得少，折叠省空间）*/
.acc-group-toggle { cursor:pointer; user-select:none; align-items:center; }
.acc-group-toggle:active { opacity:.65; }
.agt-arrow { display:inline-block; width:13px; font-size:11px; color:var(--hint); }
.agt-more { margin-left:auto; font-size:11px; font-weight:normal; color:var(--gc-tx,var(--accent,#3B82F6)); }
/* ===== 分组 vs 账本 的层次（2026-09-18 老牟：分组（账本夹）和单个账本视觉要能区分）=====
   病根：收起态原来复用 .acc-item 白卡片 → 「私有账本」「往来账」收起来跟真账本长得一样，父子不分。
   规则：分组 = 浅色底带 + 左色条（展开/收起同一族）；账本 = 白卡片 + 缩进。 */
/* 收起态 = 「一摞账本」的夹子：浅底带 + 左色条 + 底下叠一层，暗示里面还有多本 */
.acc-group-fold{ display:flex; align-items:center; gap:8px; position:relative; z-index:1;
  margin:7px 12px 9px; padding:7px 11px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  border-radius:10px; background:var(--gc-soft,var(--blue-light)); }   /* 2026-09-18 老牟：去掉左侧 3px 色条 */
.acc-group-fold:active{ opacity:.72; }
.acc-group-fold::after{ content:''; position:absolute; left:7px; right:7px; top:100%; height:8px;
  border-radius:0 0 10px 10px; background:var(--gc-soft,var(--blue-light)); opacity:.8; z-index:-1;
  box-shadow:0 2px 4px rgba(15,23,42,.05); }
.acc-group-fold .agf-icon{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:22px; border-radius:7px; background:#fff; box-shadow:0 0 0 1px var(--border); font-size:12px; }
.acc-group-fold .agf-body{ flex:1; min-width:0; }
.acc-group-fold .agf-name{ font-size:12.5px; font-weight:bold; color:var(--gc-tx,var(--text2)); }
.acc-group-fold .agf-sub{ font-size:11px; color:var(--hint); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 2026-09-18 老牟：「看起来好乱」→ 展开按钮也去掉彩色描边，统一灰边框 */
.acc-toggle-pill { font-size:11.5px; font-weight:600; color:var(--gc-tx,var(--primary)); background:#fff;
  padding:3px 10px; border-radius:12px; white-space:nowrap; flex:none; box-shadow:0 0 0 1px var(--border); }
/* 夹子里的账本：左缩进 + 左侧引导线 → 一眼看出「它在这个夹子里」 */
/* 2026-09-18 老牟：不要带颜色的竖条 → 去掉引导线，层次只靠缩进表达 */
.acc-group-body{ margin-left:16px; }   /* 竖线去掉后，缩进是唯一的层次信号 → 加大到 16px */
.acc-group-body > .acc-item{ margin-left:0; margin-right:16px; }

/* ===== 提醒独立页（2026-09-18 老牟定：从弹窗改成页面，分两组）===== */
.noti-sec{ font-size:12px; color:var(--text2); margin:14px 16px 7px; }
.noti-empty{ font-size:12.5px; color:var(--hint); padding:14px 16px; }
.noti-todo{ display:flex; align-items:center; gap:10px; margin:0 16px 8px; padding:11px 12px;
  border-radius:13px; background:var(--blue-light); border:1px solid rgba(59,130,246,.18); }
.noti-todo-ic{ font-size:20px; flex:none; }
.noti-todo-body{ flex:1; min-width:0; }
.noti-todo-ttl{ font-size:13.5px; font-weight:bold; color:var(--text); display:flex; align-items:center; }
.noti-todo-sub{ font-size:12px; color:var(--text2); margin-top:3px; line-height:1.45; word-break:break-all; }
.noti-todo-t{ font-size:11px; color:var(--hint); margin-top:3px; }
.noti-go{ flex:none; border:none; border-radius:9px; padding:7px 11px; font-size:12.5px; font-weight:bold;
  background:var(--primary); color:#fff; cursor:pointer; }
.noti-go:active{ opacity:.75; }
.noti-row{ display:flex; align-items:flex-start; gap:9px; margin:0 16px 7px; padding:10px 11px;
  border-radius:12px; background:#fff; border:1px solid var(--border); }
.noti-row.unread{ background:#F8FAFF; border-color:rgba(59,130,246,.2); }
.noti-row .noti-ck{ width:17px; height:17px; flex:none; margin-top:2px; }
.noti-row-main{ flex:1; min-width:0; cursor:pointer; }
.noti-row .noti-title{ font-size:13px; font-weight:600; color:var(--text); }
.noti-row.read .noti-title{ color:var(--text2); font-weight:normal; }
.noti-row .noti-text{ font-size:12.5px; color:var(--text2); margin-top:3px; line-height:1.45; word-break:break-all; }
.noti-row .noti-meta{ font-size:11px; color:var(--hint); margin-top:4px; }
.noti-row .noti-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#EF4444; margin-right:5px; vertical-align:middle; }
.noti-date{ color:var(--hint); font-size:11px; }

/* ===== 提醒页美化（2026-09-18 老牟：没消息也不能一片白）===== */
.noti-sec{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text2);
  margin:16px 16px 8px; padding-left:9px; border-left:3px solid #3B82F6; line-height:1.25; }
.noti-sec:first-child{ margin-top:4px; }
.noti-sec .ns-cnt{ font-weight:normal; color:var(--hint); }
/* 空状态卡片：有图标 + 主文案 + 提示，不再是一行灰字 */
.noti-empty{ text-align:center; padding:24px 18px; margin:0 16px 8px; border-radius:14px;
  background:linear-gradient(180deg,#FAFBFF 0%,#F6F8FE 100%); border:1px dashed rgba(59,130,246,.24); }
.noti-empty .ne-ic{ font-size:32px; line-height:1; margin-bottom:10px; }
.noti-empty .ne-ttl{ font-size:13.5px; font-weight:600; color:var(--text2); }
.noti-empty .ne-sub{ font-size:11.5px; color:var(--hint); margin-top:6px; line-height:1.55; }
/* 底部小结 */
.noti-foot{ text-align:center; font-size:11px; color:var(--hint); padding:16px 16px 26px; }

/* ===== 📝 账单修改记录（2026-09-18 老牟要求：每次编辑留痕，详情页可见） ===== */
.edit-item{padding:10px 12px;margin-top:8px;background:var(--gray-light);border-radius:8px;border-left:3px solid var(--primary);}
/* 修改记录：2026-09-18 12:06 并入「账单基本信息」区最下方，不再单独成区 */
.detail-edits{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(0,0,0,.12);}
.edit-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;}
.edit-who{font-size:13px;font-weight:600;color:var(--text);}
.edit-time{font-size:11px;color:var(--hint);}
.edit-changes{font-size:13px;color:var(--text2);line-height:1.75;}
.edit-ch{word-break:break-all;}
.chip.edited{background:var(--amber-light);color:#B45309;}
/* 账单详情右上角「? 帮助」按钮（2026-09-18 老牟要求，与关闭按钮同款、摆在它左边） */
.modal-close-fixed.modal-help-fixed{ right:60px !important; font-size:16px; font-weight:700; }
/* 2026-09-25 老牟要求：账单详情的「分享到站内信」从基本属性区挪到右上角图标列（✉️ 在最左）*/
.modal-close-fixed.modal-share-fixed{ right:104px !important; }

/* ── 报销结算区（2026-09-18 老牟定）─────────────────────────────
   财务确认完 ≠ 结束：还要 ① 线下支付 ② 记账（往来账 / 对公账）③ 关联三者 */
.reimb-settle{ border:1px solid #FCD34D; border-radius:12px; padding:10px; margin-bottom:8px; background:#FFFBEB; }
.reimb-settle .rs-row{ display:flex; align-items:center; gap:9px; padding:4px 0; }
.reimb-settle .rs-row + .rs-row{ border-top:1px dashed #FCD34D; margin-top:4px; padding-top:8px; }
.reimb-settle .rs-dot{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; }
.reimb-settle .rs-dot.off{ background:#FDE68A; color:#92400E; }
.reimb-settle .rs-dot.ok{ background:var(--green-light); color:#047857; }
.reimb-settle .rs-txt{ flex:1 1 0; min-width:0; font-size:13px; color:var(--text); line-height:1.5; }
.reimb-settle .rs-sub{ font-size:12px; color:var(--text2); }
.reimb-settle .btn.small{ flex:0 0 auto; margin:0; }
.reimb-settle > .btn.small{ width:100%; margin-top:6px; }

/* 🔒 内置账本锁提示条（2026-09-18 老牟定：内置往来账不允许改名/删除） */
#corp-lock-tip {
  margin: 8px 14px 0; padding: 7px 11px;
  font-size: 11.5px; line-height: 1.5;
  color: #92400E; background: #FEF3C7;
  border: 1px solid #FDE68A; border-radius: 9px;
}

/* ===== 宽屏自适应：电脑/平板浏览器打开时居中，模拟手机界面 =====
   2026-09-19 老牟要求：
   ① 折叠屏（OPPO Find N6）外屏 / 内屏展开 / 分屏都要能用
   ② 电脑浏览器打开不要拉满整屏，像手机一样用（触摸→键鼠）
   做法：≥640px 时整页居中限宽 480px；手机外屏(≤480)与分屏窄窗口(<640)完全不变 */
:root{ --app-max:480px; }
@media (min-width:640px){
  html{ background:#e6e8ec; }
  body{ max-width:var(--app-max); margin:0 auto; min-height:100vh;
        box-shadow:0 0 0 1px rgba(0,0,0,.06),0 10px 40px rgba(0,0,0,.10); }
  /* 底部固定操作条：收进同一列，不再横贯整屏 */
  .bottom-btn{ left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:var(--app-max); }
  /* 弹窗遮罩：限制在手机列内（transform 同时让弹窗内 fixed 的关闭/帮助按钮跟着对齐） */
  .modal-mask,.loc-picker-mask{ left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:var(--app-max); }
  .toast{ max-width:calc(var(--app-max) - 32px); }
}

/* ===== 站内信 / 全员群（2026-09-20）===== */
.dm-list-item{ display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--card); border-bottom:1px solid var(--border); cursor:pointer; }
.dm-list-item:active{ background:var(--gray-light); }
.dm-list-item.dm-group-item{ background:var(--blue-light); }
.dm-avatar{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:var(--gray-light); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text2); overflow:hidden; }
.dm-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }   /* 2026-09-20 修：真实头像填满圆形 */
.dm-sender-avatar{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--gray-light); font-size:10px; overflow:hidden; flex:0 0 auto; margin-right:4px; }
.dm-sender-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.dm-main{ flex:1; min-width:0; }
.dm-top{ display:flex; align-items:center; gap:6px; }
.dm-name{ font-size:15px; font-weight:600; color:var(--text); flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-atme{ flex:0 0 auto; font-size:10px; color:#fff; background:var(--red); padding:1px 5px; border-radius:8px; }
.dm-sub{ flex:0 0 auto; font-size:11px; color:var(--hint); }
.dm-time{ margin-left:auto; flex:0 0 auto; font-size:11px; color:var(--hint); }
.dm-bottom{ display:flex; align-items:center; gap:6px; margin-top:3px; }
.dm-last{ flex:1; min-width:0; font-size:13px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-badge{ flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:11px; line-height:18px; text-align:center; box-sizing:border-box; }
#dm-pick-body .dm-list-item:last-child{ border-bottom:none; }

/* 聊天页：整页 flex 布局，输入框始终贴底 */
#page-chat.active{ display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
.dm-chat-body{ flex:1; overflow-y:auto; padding:12px 14px 8px; }
.dm-load-more{ display:block; margin:2px auto 10px; padding:6px 14px; border:1px solid var(--border); border-radius:14px; background:var(--card); color:var(--text2); font-size:12px; cursor:pointer; }
.dm-day-sep{ text-align:center; font-size:11px; color:var(--hint); margin:10px 0; }
.dm-bubble-row{ display:flex; margin:6px 0; }
.dm-bubble-row.mine{ justify-content:flex-end; }
.dm-bubble-row.other{ justify-content:flex-start; }
.dm-bubble-wrap{ display:flex; flex-direction:column; max-width:78%; min-width:0; }
.dm-bubble-row.mine .dm-bubble-wrap{ align-items:flex-end; }
.dm-bubble-row.other .dm-bubble-wrap{ align-items:flex-start; }
.dm-sender{ font-size:11px; color:var(--text2); margin:0 4px 3px; }
.dm-bubble{ max-width:100%; padding:9px 12px; border-radius:14px; font-size:14px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.dm-bubble.mine{ background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.dm-bubble.other{ background:var(--card); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; }
.dm-bubble.recallable{ cursor:pointer; }
.dm-bubble.deleted{ opacity:.65; font-style:italic; }
.dm-bubble.mentioned{ border:2px solid #F59E0B; }
.dm-bubble.dm-card{ background:var(--blue-light); color:var(--primary-dark); border:1px solid #BFDBFE; cursor:pointer; }
.dm-time{ font-size:10px; color:var(--hint); margin:2px 4px 0; }
.dm-chat-input{ position:relative; display:flex; gap:8px; align-items:center; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--border); }
.dm-chat-input input, .dm-chat-input textarea{ flex:1; min-width:0; height:38px; padding:0 12px; border:1px solid var(--border); border-radius:19px; font-size:14px; outline:none; background:var(--bg); resize:none; font-family:inherit; line-height:36px; }
/* 2026-09-25：同上，补齐 div 发送键的居中 */
.dm-chat-input .btn{ display:flex; align-items:center; justify-content:center; text-align:center; }
.dm-chat-input .btn{ margin:0; padding:0 18px; height:38px; width:auto; flex:0 0 auto; }  /* 2026-09-20 修：全局 .btn{width:100%} 把发送钮撑满，输入框被挤成小块 */
.dm-mention-pop{ position:absolute; left:12px; right:12px; bottom:calc(100% + 4px); max-height:220px; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.12); z-index:5; }
.dm-mention-item{ padding:10px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--gray-light); }
.dm-mention-item:last-child{ border-bottom:none; }
.dm-mention-item:active{ background:var(--gray-light); }
/* 2026-09-27 老牟：候选列表第一条「@所有人」轻底色，跟普通成员区分 */
.dm-mention-all{ background:var(--blue-light); color:var(--primary); font-weight:600; }
.dm-mention-all:active{ background:#DBEAFE; }
/* ＋ 附件面板（2026-09-20）：绝对定位浮在输入栏上方，不挤 flex 布局，窄屏不换行 */
.dm-plus-btn{ flex:0 0 auto; width:38px; height:38px; padding:0; border:1px solid var(--border); border-radius:19px; background:var(--bg); color:var(--text2); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dm-plus-btn:active{ background:var(--gray-light); }
.dm-plus-panel{ position:absolute; left:12px; right:12px; bottom:calc(100% + 6px); display:flex; gap:8px; padding:10px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.12); z-index:6; }
.dm-plus-item{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 4px; border:1px solid var(--gray-light); border-radius:10px; background:var(--bg); color:var(--text); font-size:13px; cursor:pointer; white-space:nowrap; }
.dm-plus-item:active{ background:var(--gray-light); }
.dm-plus-ico{ font-size:22px; line-height:1; }
/* 图片 / 文件 / 位置消息渲染 */
.dm-bubble.dm-img{ padding:3px; background:transparent; border:none; }
.dm-bubble.dm-img img{ display:block; max-width:200px; max-height:260px; border-radius:10px; cursor:zoom-in; }
.dm-bubble .dm-attach-card{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.22); cursor:pointer; }
.dm-bubble.other .dm-attach-card{ background:var(--gray-light); }
.dm-attach-ico{ flex:0 0 auto; font-size:22px; line-height:1; }
.dm-attach-main{ min-width:0; display:flex; flex-direction:column; }
.dm-attach-name{ font-size:14px; font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-attach-meta{ font-size:12px; opacity:.8; }
.dm-img-viewer{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.85); cursor:zoom-out; }
.dm-img-viewer img{ max-width:94vw; max-height:94vh; border-radius:8px; }

/* 2026-09-24 老牟要求：悬挂 ICP 备案号（管局硬要求：网站底部悬挂 + 链接工信部） */
.site-footer{ text-align:center; font-size:12px; line-height:1.6; color:var(--text2,#9CA3AF); padding:16px 16px calc(86px + env(safe-area-inset-bottom)); }
.site-footer a{ color:var(--text2,#9CA3AF); text-decoration:none; }