/* ============================================================
   财务域 · PC 样式（亮色系，主色 金 #B8860B）
   ============================================================ */

/* ---------- 布局：侧边栏 + 内容 ---------- */
.fin-layout { display: flex; gap: 24px; align-items: flex-start; }
.fin-side {
  width: 188px; flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid rgba(31, 41, 55, 0.08);
  border-radius: 16px;
  padding: 18px 12px;
  position: sticky; top: 88px;
  box-shadow: 0 4px 18px rgba(31, 41, 55, 0.06);
}
.fin-side-title { font-size: 13px; letter-spacing: 3px; color: #6B7280; padding: 0 10px 12px; border-bottom: 1px solid rgba(31, 41, 55, 0.08); margin-bottom: 10px; }
.fin-nav { display: flex; flex-direction: column; gap: 2px; }
.fin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  color: #4B5563; font-size: 14px;
  transition: all 0.2s;
}
.fin-nav-item:hover { background: rgba(31, 41, 55, 0.05); color: #1F2937; }
.fin-nav-item.active {
  background: linear-gradient(135deg, #C9A227, #B8860B);
  color: #FFFFFF; font-weight: 600;
  box-shadow: 0 3px 12px rgba(184, 134, 11, 0.3);
}
.fin-nav-ico { width: 20px; text-align: center; font-style: normal; }
.fin-side-foot { margin-top: 16px; padding: 0 10px; font-size: 11px; color: rgba(31, 41, 55, 0.4); letter-spacing: 1px; }
.fin-content { flex: 1; min-width: 0; }

/* ---------- 通用 ---------- */
.fin-card { background: #FFFFFF; border: 1px solid rgba(31, 41, 55, 0.08); border-radius: 16px; padding: 20px 24px; box-shadow: 0 2px 12px rgba(31, 41, 55, 0.05); }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.card-sub { font-size: 12px; color: rgba(31, 41, 55, 0.5); font-weight: 400; }
.c-in { color: #16A34A; }
.c-out { color: #DC2626; }
.c-warn { color: #B45309; }
.c-danger { color: #DC2626; }
.c-dim { color: rgba(31, 41, 55, 0.5); }
.sub-title { font-size: 14px; font-weight: 600; margin: 18px 0 10px; color: #374151; }

/* 按钮 */
.btn-primary {
  background: linear-gradient(135deg, #C9A227, #B8860B); color: #FFFFFF;
  border: none; border-radius: 10px; padding: 10px 22px; font-size: 14px; font-weight: 600;
  transition: all 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(184, 134, 11, 0.35); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-secondary {
  background: #F3F4F6; color: #374151;
  border: 1px solid rgba(31, 41, 55, 0.15); border-radius: 8px;
  padding: 7px 14px; font-size: 13px; transition: all 0.2s;
}
.btn-secondary:hover { border-color: rgba(184, 134, 11, 0.6); color: #8B6D00; }
.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-submit { width: 100%; margin-top: 20px; padding: 13px; font-size: 15px; }
.link-btn { background: none; border: none; color: #3B6FD4; font-size: 13px; padding: 2px 6px; }
.link-btn:hover { text-decoration: underline; }
.link-inline { color: #8B6D00; }

/* 统计概览 */
.ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card {
  border-radius: 16px; padding: 18px 20px;
  border: 1px solid rgba(31, 41, 55, 0.08);
  background: #FFFFFF;
  box-shadow: 0 4px 18px rgba(31, 41, 55, 0.06);
}
.stat-label { font-size: 13px; color: rgba(31, 41, 55, 0.6); }
.stat-num { font-size: 26px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sc-income .stat-num { color: #16A34A; }
.sc-expense .stat-num { color: #DC2626; }
.sc-balance .stat-num { color: #8B6D00; }
.sc-assets .stat-num { color: #3B6FD4; }

/* 仪表盘 */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.span2 { grid-column: span 2; }
.quick-row { display: flex; gap: 12px; margin-top: 18px; }
.quick-btn {
  flex: 1; text-align: center; padding: 12px;
  border-radius: 12px; border: 1px solid rgba(31, 41, 55, 0.1);
  background: #F8F9FB; color: #374151; font-size: 14px;
  transition: all 0.2s;
}
.quick-btn:hover { border-color: rgba(184, 134, 11, 0.5); background: rgba(201, 162, 39, 0.08); }
.qb-add { background: linear-gradient(135deg, #C9A227, #B8860B); color: #FFFFFF; font-weight: 600; }
.qb-add:hover { box-shadow: 0 4px 14px rgba(184, 134, 11, 0.35); background: linear-gradient(135deg, #C9A227, #B8860B); }

/* 近期流水 */
.rec-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(31, 41, 55, 0.06); }
.rec-row:last-child { border-bottom: none; }
.rec-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.rec-ico.in { background: rgba(22, 163, 74, 0.12); color: #16A34A; }
.rec-ico.out { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.rec-mid { flex: 1; min-width: 0; }
.rec-name { font-size: 14px; }
.rec-meta { font-size: 12px; color: rgba(31, 41, 55, 0.45); }
.rec-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-amt.in { color: #16A34A; }
.rec-amt.out { color: #DC2626; }

/* 预算 mini */
.budget-mini { margin-bottom: 12px; }
.bm-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.bar-track { height: 8px; border-radius: 6px; background: rgba(31, 41, 55, 0.1); overflow: hidden; }
.bar-track.big { height: 12px; }
.bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #C9A227, #B8860B); transition: width 0.4s; }
.bar-fill.over { background: linear-gradient(90deg, #DC2626, #EF4444); }

/* ---------- 记一笔 ---------- */
.book-wrap { max-width: 560px; margin: 0 auto; }

/* ==================== AI 智能记账 ==================== */
.ai-book {
  margin-bottom: 18px; padding: 14px 14px 12px;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.08), rgba(91, 141, 239, 0.06));
  border: 1px solid rgba(201, 162, 39, 0.35); border-radius: 14px;
}
.ai-book-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ai-book-title { font-weight: 700; font-size: 14.5px; color: #1F2937; }
.ai-badge {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: rgba(31, 41, 55, 0.08); color: #6B7280; white-space: nowrap;
}
.ai-badge.on { background: rgba(201, 162, 39, 0.15); color: #A8841C; }
.ai-book-input { display: flex; gap: 8px; align-items: center; }
.ai-text {
  flex: 1; min-width: 0; height: 38px; border: 1px solid rgba(31, 41, 55, 0.14);
  border-radius: 10px; padding: 0 12px; font-size: 13.5px; background: #FFF;
  outline: none; transition: border-color 0.2s;
}
.ai-text:focus { border-color: #C9A227; }
.ai-btn {
  height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(31, 41, 55, 0.12);
  background: #FFF; color: #4B5563; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: all 0.18s;
}
.ai-btn:hover { border-color: #C9A227; color: #A8841C; }
.ai-btn-main { background: #1F2937; color: #FFF; border-color: #1F2937; font-weight: 600; }
.ai-btn-main:hover { background: #374151; color: #FFF; }
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-btn.disabled { opacity: 0.45; cursor: not-allowed; }
.ai-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ai-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(31, 41, 55, 0.1); }
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-thumb-del {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px;
  border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #FFF;
  font-size: 12px; cursor: pointer;
}
.ai-result { margin-top: 12px; }
.ai-result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ai-count { font-size: 12.5px; color: #6B7280; font-weight: 600; }
.ai-cards { display: flex; flex-direction: column; gap: 10px; }
.ai-result-card { position: relative; }
.ai-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ai-idx {
  font-size: 12px; font-weight: 700; color: #A8841C;
  background: rgba(201, 162, 39, 0.14); border-radius: 999px; padding: 2px 9px;
}
.ai-card-del {
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(31, 41, 55, 0.08); color: #6B7280; font-size: 13px; line-height: 1;
  cursor: pointer; transition: all 0.15s;
}
.ai-card-del:hover { background: rgba(240, 90, 90, 0.14); color: #F05A5A; }
.ai-result-card {
  background: #FFF; border: 1px solid rgba(31, 41, 55, 0.1); border-radius: 12px; padding: 12px;
  box-shadow: 0 4px 14px rgba(31, 41, 55, 0.07);
}
.ai-result-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ai-src-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(201, 162, 39, 0.15); color: #A8841C; font-weight: 600;
}
.ai-src-tag.rule { background: rgba(107, 114, 128, 0.12); color: #6B7280; }
.ai-result-amt { display: flex; align-items: center; gap: 8px; flex: 1; }
.ai-result-amt select {
  height: 36px; border: 1px solid rgba(31, 41, 55, 0.14); border-radius: 9px;
  padding: 0 8px; font-size: 13.5px; background: #FFF; color: #1F2937; font-weight: 600;
}
.ai-result-amt input {
  flex: 1; min-width: 0; height: 36px; border: 1px solid rgba(31, 41, 55, 0.14);
  border-radius: 9px; padding: 0 10px; font-size: 17px; font-weight: 700; color: #1F2937;
  font-variant-numeric: tabular-nums; outline: none;
}
.ai-result-amt input:focus { border-color: #C9A227; }
.ai-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 10px; }
.ai-result-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6B7280; }
.ai-result-grid select, .ai-result-grid input[type="date"] {
  height: 34px; border: 1px solid rgba(31, 41, 55, 0.14); border-radius: 8px;
  padding: 0 8px; font-size: 13px; background: #FFF; color: #1F2937; outline: none;
}
.ai-remark {
  width: 100%; height: 34px; border: 1px solid rgba(31, 41, 55, 0.14); border-radius: 8px;
  padding: 0 10px; font-size: 13px; outline: none; box-sizing: border-box; margin-bottom: 10px;
}
.ai-actions { display: flex; gap: 8px; }
.ai-actions .ai-btn { flex: 1; }

.type-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.type-tab {
  flex: 1; padding: 10px; border-radius: 10px;
  background: #F3F4F6; color: #4B5563;
  border: 1px solid rgba(31, 41, 55, 0.1); font-size: 14px; transition: all 0.2s;
}
.type-tab.active { background: color-mix(in srgb, var(--tc) 12%, transparent); border-color: var(--tc); color: var(--tc); font-weight: 600; }
.amt-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.amt-sign { font-size: 28px; font-weight: 700; color: #DC2626; width: 30px; }
.amt-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 40px; font-weight: 700; color: #1F2937;
  font-variant-numeric: tabular-nums;
}
.amt-input::placeholder { color: rgba(31, 41, 55, 0.25); }
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border-radius: 12px;
  background: #F8F9FB; border: 1px solid rgba(31, 41, 55, 0.08);
  color: #4B5563; font-size: 12px; transition: all 0.15s;
}
.cat-item:hover { border-color: rgba(184, 134, 11, 0.4); }
.cat-item.active { border-color: #B8860B; background: rgba(201, 162, 39, 0.1); color: #8B6D00; }
.cat-ico { font-size: 20px; font-style: normal; }
.cat-empty { grid-column: span 5; text-align: center; color: rgba(31, 41, 55, 0.4); padding: 16px; }
.book-fields { display: grid; gap: 12px; }
.bf-row { display: flex; align-items: center; gap: 12px; }
.bf-row label { width: 80px; color: rgba(31, 41, 55, 0.65); font-size: 13px; }
.bf-row select, .bf-row input {
  flex: 1; background: #FFFFFF; color: #1F2937;
  border: 1px solid rgba(31, 41, 55, 0.15); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; outline: none;
}
.bf-row select:focus, .bf-row input:focus { border-color: rgba(184, 134, 11, 0.6); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fin-table th {
  text-align: left; padding: 10px 12px; font-size: 12.5px; font-weight: 500;
  color: #6B7280; border-bottom: 1px solid rgba(31, 41, 55, 0.12);
  white-space: nowrap;
}
.fin-table td { padding: 10px 12px; border-bottom: 1px solid rgba(31, 41, 55, 0.06); }
.fin-table tr:hover td { background: rgba(31, 41, 55, 0.02); }
.ta-r { text-align: right; }
.ta-c { text-align: center; }
.sum-row { display: flex; gap: 24px; padding: 12px 2px; font-size: 13px; color: #4B5563; }
.sum-row b { font-size: 15px; }
.type-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.tb-income { background: rgba(22, 163, 74, 0.12); color: #16A34A; }
.tb-expense { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.tb-transfer { background: rgba(59, 111, 212, 0.12); color: #3B6FD4; }
.tb-adjust { background: rgba(184, 134, 11, 0.12); color: #8B6D00; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; background: rgba(31, 41, 55, 0.07); color: #4B5563; }
.b-ok { background: rgba(22, 163, 74, 0.12); color: #16A34A; }
.b-warn { background: rgba(249, 168, 37, 0.14); color: #B45309; }

/* 筛选栏 */
.filter-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.fb-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-btn {
  padding: 5px 14px; border-radius: 999px; font-size: 12.5px;
  background: #F3F4F6; border: 1px solid rgba(31, 41, 55, 0.12);
  color: #4B5563; transition: all 0.15s;
}
.fb-btn.active { background: linear-gradient(135deg, #C9A227, #B8860B); color: #FFFFFF; border-color: #B8860B; font-weight: 600; }
.fb-input {
  background: #FFFFFF; color: #1F2937;
  border: 1px solid rgba(31, 41, 55, 0.15); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; outline: none;
}
.fb-input:focus { border-color: rgba(184, 134, 11, 0.6); }
.fb-input::-webkit-calendar-picker-indicator { filter: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pg-btn {
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px;
  background: #F3F4F6; border: 1px solid rgba(31, 41, 55, 0.12);
  color: #374151; font-size: 13px; transition: all 0.15s;
}
.pg-btn:hover { border-color: rgba(184, 134, 11, 0.5); }
.pg-btn.active { background: linear-gradient(135deg, #C9A227, #B8860B); color: #FFFFFF; border-color: #B8860B; font-weight: 600; }
.pg-ell { color: rgba(31, 41, 55, 0.4); padding: 0 2px; }
.pg-total { font-size: 12.5px; color: rgba(31, 41, 55, 0.5); margin-left: 8px; }

/* ---------- 账户 ---------- */
.acc-total { font-size: 15px; color: #4B5563; margin-bottom: 16px; }
.acc-total b { font-size: 30px; color: #8B6D00; margin-left: 10px; font-variant-numeric: tabular-nums; }
.acc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.acc-card {
  border-radius: 14px; padding: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(31, 41, 55, 0.08); box-shadow: 0 4px 16px rgba(31, 41, 55, 0.05);
  transition: all 0.2s;
}
.acc-card:hover { border-color: rgba(184, 134, 11, 0.4); transform: translateY(-2px); }
.acc-card.disabled { opacity: 0.55; }
.acc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.acc-ico {
  width: 42px; height: 42px; border-radius: 12px; font-size: 20px;
  background: rgba(201, 162, 39, 0.12); border: 1px solid rgba(184, 134, 11, 0.3);
  display: flex; align-items: center; justify-content: center;
}
.acc-name { font-size: 15px; font-weight: 600; }
.acc-type { font-size: 11px; color: rgba(31, 41, 55, 0.5); margin-left: 6px; }
.acc-balance { font-size: 20px; font-weight: 700; color: #8B6D00; margin-top: 2px; font-variant-numeric: tabular-nums; }
.acc-actions { display: flex; gap: 6px; }

/* ---------- 预算 ---------- */
.fb-top { display: flex; align-items: center; gap: 28px; margin-bottom: 18px; }
.fb-total span { font-size: 13px; color: rgba(31, 41, 55, 0.55); margin-right: 8px; }
.fb-total b { font-size: 20px; color: #8B6D00; font-variant-numeric: tabular-nums; }
.budge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.budge-card {
  border-radius: 14px; padding: 16px;
  background: #FFFFFF; border: 1px solid rgba(31, 41, 55, 0.08); box-shadow: 0 4px 16px rgba(31, 41, 55, 0.05);
}
.budge-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.budge-name { font-size: 14px; font-weight: 600; }
.budge-month { font-size: 11px; color: rgba(31, 41, 55, 0.45); }
.budge-nums { margin-bottom: 8px; }
.budge-nums b { font-size: 18px; color: #1F2937; }
.budge-nums span { color: rgba(31, 41, 55, 0.5); font-size: 13px; }
.budge-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; }
.budge-ops .link-btn { font-size: 12.5px; }

/* ---------- 储蓄 ---------- */
.save-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.save-card {
  border-radius: 14px; padding: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(31, 41, 55, 0.08); box-shadow: 0 4px 16px rgba(31, 41, 55, 0.05);
}
.save-card.disabled { opacity: 0.55; }
.save-top { display: flex; gap: 14px; align-items: center; }
.save-ring {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.save-ring-hole {
  width: 46px; height: 46px; border-radius: 50%;
  background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #8B6D00;
}
.save-mid { flex: 1; min-width: 0; }
.save-name { font-size: 15px; font-weight: 600; }
.save-meta { font-size: 12px; color: rgba(31, 41, 55, 0.45); }
.save-nums { font-size: 13px; margin-top: 3px; }
.save-nums b { color: #16A34A; font-size: 15px; }
.save-actions { display: flex; gap: 6px; margin-top: 14px; }

/* ---------- 报表 ---------- */
.tab-bar { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid rgba(31, 41, 55, 0.1); }
.tab-btn {
  padding: 9px 18px; border: none; background: none; font-size: 14px;
  color: rgba(31, 41, 55, 0.55); border-bottom: 2px solid transparent; transition: all 0.2s;
}
.tab-btn:hover { color: #1F2937; }
.tab-btn.active { color: #8B6D00; border-bottom-color: #B8860B; font-weight: 600; }
.tool-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tool-tip { font-size: 12.5px; color: rgba(31, 41, 55, 0.45); }
.seg { display: flex; gap: 4px; background: #EEF1F6; border-radius: 8px; padding: 3px; }
.seg-btn { border: none; background: none; padding: 5px 14px; border-radius: 6px; font-size: 12.5px; color: rgba(31, 41, 55, 0.6); }
.seg-btn.active { background: linear-gradient(135deg, #C9A227, #B8860B); color: #FFFFFF; font-weight: 600; }
.chart-box { min-height: 220px; }
.chart-box.tall { min-height: 280px; }
.chart-empty { text-align: center; color: rgba(31, 41, 55, 0.4); padding: 60px 0; }
.chart-svg { width: 100%; height: auto; }
.chart-txt { fill: rgba(31, 41, 55, 0.5); font-size: 11px; }
.chart-v { fill: rgba(31, 41, 55, 0.7); }
.chart-legend-row { display: flex; gap: 18px; margin-bottom: 8px; font-size: 12.5px; color: rgba(31, 41, 55, 0.7); }
.chart-legend { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pie-wrap { display: flex; gap: 20px; align-items: center; }
.pie-ring {
  width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pie-hole {
  width: 96px; height: 96px; border-radius: 50%;
  background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(31, 41, 55, 0.06);
}
.pie-hole b { font-size: 15px; color: #1F2937; }
.pie-hole span { font-size: 11px; color: rgba(31, 41, 55, 0.5); }
.pie-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pie-legend-item i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pie-legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-legend-val { color: #1F2937; font-variant-numeric: tabular-nums; }
.pie-legend-pct { width: 52px; text-align: right; color: rgba(31, 41, 55, 0.55); }

/* ---------- 商户 ---------- */
.biz-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi-card {
  border-radius: 12px; padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(31, 41, 55, 0.08); box-shadow: 0 4px 16px rgba(31, 41, 55, 0.05);
}
.kpi-card span { display: block; font-size: 12px; color: rgba(31, 41, 55, 0.55); margin-bottom: 4px; }
.kpi-card b { font-size: 18px; font-variant-numeric: tabular-nums; }
.arap-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.arap-box { border-radius: 12px; padding: 16px 18px; border: 1px solid rgba(31, 41, 55, 0.08); background: #FFFFFF; box-shadow: 0 4px 16px rgba(31, 41, 55, 0.05); }
.arap-t { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.arap-nums { display: flex; gap: 28px; font-size: 13px; color: rgba(31, 41, 55, 0.6); }
.arap-nums b { font-size: 16px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(31, 41, 55, 0.7); }

/* ---------- 礼簿 ---------- */
.cer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cer-card {
  border-radius: 14px; padding: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(31, 41, 55, 0.08); box-shadow: 0 4px 16px rgba(31, 41, 55, 0.05);
}
.cer-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cer-type { font-size: 11px; padding: 2px 10px; border-radius: 999px; background: rgba(59, 111, 212, 0.12); color: #3B6FD4; }
.cer-name { font-size: 16px; font-weight: 600; }
.cer-meta { font-size: 12.5px; color: rgba(31, 41, 55, 0.5); margin: 2px 0 10px; }
.cer-nums { display: flex; gap: 18px; font-size: 13px; color: rgba(31, 41, 55, 0.65); margin-bottom: 12px; }
.cer-nums b { font-size: 16px; }
.cer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* 礼簿方向 / 锁定标记 */
.b-recv { background: rgba(22, 163, 74, 0.12); color: #16A34A; }
.b-give { background: rgba(184, 134, 11, 0.16); color: #8B6D00; }
.b-lock { background: rgba(220, 38, 38, 0.10); color: #DC2626; }
.cer-lock-tip {
  font-size: 12px; color: #DC2626; background: rgba(220, 38, 38, 0.06);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 12px;
}
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary:disabled:hover { border-color: transparent; color: #374151; }
.rem-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(31, 41, 55, 0.06); }
.rem-row:last-child { border-bottom: none; }
.rem-ico {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
  background: rgba(22, 163, 74, 0.12); color: #16A34A;
}
.rem-ico.warn { background: rgba(249, 168, 37, 0.14); color: #B45309; }
.rem-mid { flex: 1; min-width: 0; }
.rem-title { font-size: 14px; }
.rem-meta { font-size: 12px; color: rgba(31, 41, 55, 0.45); }
.sum-block { text-align: center; padding: 10px 0 4px; }
.sum-main { font-size: 14px; color: rgba(31, 41, 55, 0.6); }
.sum-main b { font-size: 26px; color: #16A34A; margin-left: 8px; }
.sum-sub { font-size: 12.5px; color: rgba(31, 41, 55, 0.45); margin-top: 4px; }
.by-type { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.by-chip { padding: 4px 12px; border-radius: 999px; background: #F3F4F6; font-size: 12.5px; }
.by-chip b { color: #8B6D00; }

/* ---------- 弹窗 / 表单 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15, 23, 41, 0.35); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadeIn 0.18s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid rgba(184, 134, 11, 0.3);
  border-radius: 18px; padding: 24px;
  box-shadow: 0 20px 60px rgba(31, 41, 55, 0.18);
  animation: popIn 0.22s ease both;
}
@keyframes popIn { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
.modal-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.modal-tip { font-size: 13px; color: rgba(31, 41, 55, 0.6); margin-bottom: 14px; }
.form-stack { display: grid; gap: 12px; }
.form-stack label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: rgba(31, 41, 55, 0.7); }
.form-stack input, .form-stack select {
  background: #FFFFFF; color: #1F2937;
  border: 1px solid rgba(31, 41, 55, 0.15); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; outline: none;
}
.form-stack input:focus, .form-stack select:focus { border-color: rgba(184, 134, 11, 0.6); }
.f-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.flow-list { max-height: 300px; overflow-y: auto; }
.flow-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(31, 41, 55, 0.06); font-size: 13.5px; }
.flow-row:last-child { border-bottom: none; }

/* toast */
.toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-12px);
  background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(184, 134, 11, 0.35);
  color: #1F2937; padding: 10px 22px; border-radius: 999px; font-size: 14px;
  z-index: 900; opacity: 0; transition: all 0.25s; box-shadow: 0 8px 30px rgba(31, 41, 55, 0.12);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-err { border-color: rgba(220, 38, 38, 0.5); }

/* 空态 / 加载 */
.empty-block { text-align: center; padding: 40px 12px; color: rgba(31, 41, 55, 0.4); font-size: 13.5px; }
.loading-row { text-align: center; padding: 60px; color: rgba(31, 41, 55, 0.4); }
.span-all { grid-column: 1 / -1; }

/* ---------- 项目共享 / 报账 ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pj-head-left { display: flex; align-items: center; gap: 14px; }
.pj-back { color: #8B6D00; font-size: 14px; text-decoration: none; margin-right: 4px; }
.pj-back:hover { text-decoration: underline; }
.pj-head-ops { display: flex; gap: 8px; flex-shrink: 0; }

.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proj-card {
  display: block; text-decoration: none; color: inherit;
  background: #FFFFFF; border: 1px solid rgba(31, 41, 55, 0.08); border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 2px 12px rgba(31, 41, 55, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}
.proj-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31, 41, 55, 0.1); }
.proj-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.proj-icon {
  width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-style: normal; color: #FFFFFF;
  background: linear-gradient(135deg, #C9A227, #B8860B);
}
.proj-icon-lg { width: 52px; height: 52px; font-size: 26px; border-radius: 15px; flex-shrink: 0; }
.proj-name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.proj-desc { font-size: 12.5px; color: rgba(31, 41, 55, 0.5); margin-bottom: 12px; min-height: 17px; }
.proj-bar-line { height: 8px; border-radius: 999px; background: rgba(31, 41, 55, 0.08); overflow: hidden; }
.proj-bar-line i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C9A227, #B8860B); }
.proj-bar-txt { font-size: 12px; color: rgba(31, 41, 55, 0.55); margin-top: 6px; }
.proj-bar-txt b { color: #8B6D00; }
.proj-bar-lg .proj-bar-line { height: 12px; }
.proj-card-foot { display: flex; justify-content: space-between; font-size: 12px; color: rgba(31, 41, 55, 0.55); margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(31, 41, 55, 0.06); }

.pj-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.pj-tab {
  padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(31, 41, 55, 0.12);
  background: #FFFFFF; color: #4B5563; font-size: 13.5px; cursor: pointer; transition: all 0.2s;
}
.pj-tab:hover { border-color: rgba(184, 134, 11, 0.5); }
.pj-tab.active { background: linear-gradient(135deg, #C9A227, #B8860B); color: #FFFFFF; border-color: #B8860B; font-weight: 600; }

.ov-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.ov-card { background: #FFFFFF; border: 1px solid rgba(31, 41, 55, 0.08); border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(31, 41, 55, 0.04); }
.ov-card span { display: block; font-size: 12.5px; color: rgba(31, 41, 55, 0.55); margin-bottom: 6px; }
.ov-card b { font-size: 20px; font-variant-numeric: tabular-nums; }

.todo-list { display: flex; flex-direction: column; gap: 10px; }
.todo-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(31, 41, 55, 0.04); font-size: 13.5px; }

.role-sel { width: auto; padding: 4px 8px; font-size: 12.5px; }

/* 项目内独立记账 */
.pj-rec-type { display: flex; gap: 8px; }
.pj-rec-tab {
  flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid rgba(31, 41, 55, 0.12);
  background: #FFFFFF; color: #4B5563; font-size: 13.5px; cursor: pointer; transition: all 0.2s;
}
.pj-rec-tab[data-k="expense"]:hover { border-color: rgba(240, 90, 90, 0.5); color: #F05A5A; }
.pj-rec-tab[data-k="income"]:hover { border-color: rgba(52, 199, 123, 0.5); color: #34C77B; }
.pj-rec-tab[data-k="expense"].active { background: #F05A5A; color: #FFF; border-color: #F05A5A; font-weight: 600; }
.pj-rec-tab[data-k="income"].active { background: #34C77B; color: #FFF; border-color: #34C77B; font-weight: 600; }

/* 组合收付：多账户拆份额 */
.bf-acc-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bf-acc-row { display: flex; gap: 8px; align-items: center; width: 100%; }
.bf-acc-row .acc-sel { flex: 1.4; min-width: 0; }
.bf-acc-row .acc-amt { flex: 1; min-width: 0; }
.bf-acc-row .acc-del {
  flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(240, 90, 90, 0.4);
  background: rgba(240, 90, 90, 0.08); color: #F05A5A; font-size: 15px; line-height: 1;
  cursor: pointer; transition: all 0.2s;
}
.bf-acc-row .acc-del:hover { background: #F05A5A; color: #FFF; }
.bf-hint { font-size: 12.5px; color: rgba(31, 41, 55, 0.55); line-height: 1.6; }
.bf-hint.warn { color: #F05A5A; }
.acc-chip {
  display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px; border-radius: 999px;
  background: rgba(31, 41, 55, 0.06); font-size: 12px; color: #4B5563; white-space: nowrap;
}

/* ==================== 收银台 ==================== */
.cashier { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.cashier-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cashier-right { min-width: 0; }
.cashier-panel {
  position: sticky; top: 78px;
  background: #FFF; border: 1px solid #EEF0F4; border-radius: 14px;
  padding: 16px; box-shadow: 0 2px 10px rgba(31, 41, 55, 0.05);
}
.cashier-panel-title { font-weight: 600; margin-bottom: 10px; }
.cashier-tool { display: flex; gap: 10px; align-items: center; }
.cashier-tool .fb-input { flex: 1; }
.cashier-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.c-cat {
  padding: 5px 14px; border-radius: 999px; border: 1px solid #E5E7EB;
  background: #FFF; color: #4B5563; font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.c-cat.active { background: #1F2937; color: #FFF; border-color: #1F2937; }
.cashier-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px;
}
.cashier-prod {
  background: #FFF; border: 1px solid #EEF0F4; border-radius: 12px; padding: 10px;
  cursor: pointer; transition: all 0.18s; user-select: none;
}
.cashier-prod:hover { border-color: #C9A227; box-shadow: 0 3px 12px rgba(201, 162, 39, 0.15); transform: translateY(-1px); }
.cashier-prod.sold-out { opacity: 0.45; cursor: not-allowed; }
.cp-name {
  font-size: 13px; font-weight: 600; line-height: 1.35; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-price { color: #C9A227; font-weight: 700; margin-top: 6px; font-size: 15px; }
.cp-price .c-dim { font-size: 11px; font-weight: 400; }
.cp-stock { font-size: 11.5px; color: rgba(31, 41, 55, 0.5); margin-top: 4px; }
.cashier-cart {
  min-height: 120px; max-height: 300px; overflow: auto;
  border: 1px dashed #E5E7EB; border-radius: 10px; padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.cart-line {
  display: flex; align-items: center; gap: 8px; background: #F9FAFB;
  border-radius: 10px; padding: 8px 10px;
}
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line-unit { display: flex; align-items: center; gap: 2px; font-size: 12px; color: #4B5563; }
.cart-price { width: 70px; }
.cart-line-ops { display: flex; align-items: center; gap: 4px; }
.cart-line-ops button {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid #E5E7EB; background: #FFF;
  font-size: 14px; line-height: 1; cursor: pointer; color: #4B5563;
}
.cart-line-ops button:hover { background: #1F2937; color: #FFF; border-color: #1F2937; }
.cart-line-amt { font-size: 13px; font-weight: 700; white-space: nowrap; }
.cart-del { color: #F05A5A; background: none; border: none; font-size: 16px; cursor: pointer; line-height: 1; }
.cashier-sum {
  display: flex; flex-direction: column; gap: 6px; margin: 12px 0;
  padding: 10px 12px; background: #F9FAFB; border-radius: 10px;
}
.sum-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #4B5563; }
.sum-row input { width: 110px; }
.sum-row.total { font-size: 15px; color: #1F2937; }
.sum-row.total b { font-size: 20px; color: #C9A227; }
.cashier-pay { display: flex; flex-direction: column; gap: 10px; }
.cashier-pay .c-pay-line { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #4B5563; }
.cashier-pay select { width: 180px; }
.cashier-pay .fb-input { width: 100%; }
.cashier-pay .btn-block { margin-top: 4px; }
.c-pay-line select { height: 34px; border: 1px solid #E5E7EB; border-radius: 8px; padding: 0 8px; background: #FFF; }
.biz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 980px) {
  .cashier { grid-template-columns: 1fr; }
  .cashier-panel { position: static; }
  .biz-grid-2 { grid-template-columns: 1fr; }
}

.badge-gold { background: rgba(184, 134, 11, 0.14); color: #8B6D00; font-weight: 600; }
.badge-blue { background: rgba(59, 111, 212, 0.12); color: #3B6FD4; }
.st-gray { background: rgba(31, 41, 55, 0.08); color: #4B5563; }
.st-blue { background: rgba(59, 111, 212, 0.12); color: #3B6FD4; }
.st-gold { background: rgba(184, 134, 11, 0.14); color: #8B6D00; }
.st-red { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.st-green { background: rgba(22, 163, 74, 0.12); color: #16A34A; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.f-item { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: rgba(31, 41, 55, 0.7); }
.f-item.f-full { grid-column: 1 / -1; }
.f-item input, .f-item select, .f-item textarea {
  padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(31, 41, 55, 0.15);
  font-size: 14px; color: #1F2937; background: #FFFFFF; outline: none; transition: border 0.2s;
}
.f-item input:focus, .f-item select:focus, .f-item textarea:focus { border-color: rgba(184, 134, 11, 0.65); }
.f-item textarea { resize: vertical; font-family: inherit; }
.ck-row { flex-direction: row; align-items: center; gap: 8px; color: rgba(31, 41, 55, 0.7); cursor: pointer; }
.ck-row input { width: 16px; height: 16px; accent-color: #B8860B; }

.invite-body { display: flex; gap: 22px; align-items: center; margin: 10px 0 6px; }
.qr-box { width: 168px; height: 168px; border: 1px solid rgba(31, 41, 55, 0.1); border-radius: 12px; padding: 4px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.invite-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.invite-code-label { font-size: 12px; color: rgba(31, 41, 55, 0.55); }
.invite-code { font-size: 22px; font-weight: 700; letter-spacing: 3px; color: #8B6D00; font-family: ui-monospace, Consolas, monospace; }

.clm-scope { display: flex; gap: 6px; margin-bottom: 14px; }
.clm-title { font-weight: 600; }
.det-list { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; margin-bottom: 12px; }
.det-list > div { display: flex; gap: 12px; }
.det-list span { flex-shrink: 0; width: 64px; color: rgba(31, 41, 55, 0.55); }
.det-list b { font-weight: 600; word-break: break-all; }

/* ---------- 项目扫码加入页（公开） ---------- */
.join-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.join-card { width: 100%; max-width: 420px; text-align: center; padding: 36px 32px; }
.join-loading, .join-fail { color: rgba(31, 41, 55, 0.45); font-size: 14px; padding: 30px 0; }
.join-fail { font-size: 40px; }
.join-proj-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-style: normal; color: #FFFFFF;
  background: linear-gradient(135deg, #C9A227, #B8860B);
}
.join-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.join-tags { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.join-tag { padding: 3px 12px; border-radius: 999px; background: rgba(31, 41, 55, 0.06); color: #4B5563; font-size: 12.5px; }
.join-desc { color: rgba(31, 41, 55, 0.6); font-size: 13.5px; margin-bottom: 12px; }
.join-owner { color: rgba(31, 41, 55, 0.45); font-size: 12.5px; margin-bottom: 22px; }
.join-btn { display: block; width: 100%; margin-top: 10px; }
.join-login-tip { color: rgba(31, 41, 55, 0.5); font-size: 13px; margin-bottom: 4px; }

/* 响应式 */
@media (max-width: 1100px) {
  .fin-layout { flex-direction: column; }
  .fin-side { width: 100%; position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; }
  .fin-side-title, .fin-side-foot { display: none; }
  .fin-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .fin-nav-item { padding: 6px 10px; font-size: 13px; }
  .ov-grid, .acc-grid, .budge-grid, .save-grid, .cer-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-grid, .ov-cards { grid-template-columns: repeat(2, 1fr); }
  .biz-kpi { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .span2 { grid-column: span 1; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}