/* ===== 重置 & 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --color-primary: #4b7ef0;
  --color-primary-dark: #3b64c8;
  --color-primary-light: #eef3fd;
  --color-success: #34c759;
  --color-success-light: #eafaf0;
  --color-warning: #ff9f0a;
  --color-warning-light: #fff7eb;
  --color-danger: #ff3b30;
  --color-danger-light: #fff0ef;
  --color-info: #6366f1;
  --color-info-light: #f0eeff;
  --color-bg: #ebeef2;
  --color-card: #ffffff;
  --color-text: #1d1d1f;
  --color-text-secondary: #787880;
  --color-text-tertiary: #a1a1a6;
  --color-border: #dbdde3;
  --color-border-light: #ececf0;
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.03);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.07);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --transition: 0.18s ease;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ===== 顶部栏 ===== */
.header {
  background: var(--color-card);
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-xs);
}
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.header-subtitle {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border-light);
  flex-shrink: 0;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.header-text > * {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.header-date {
  font-size: 15px;
  font-weight: 600;
}

.header-time {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

/* ===== 导航栏 ===== */
.nav {
  background: var(--color-card);
  padding: 4px 0;
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-border-light);
}

.nav-btn {
  padding: 10px 22px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
}

.nav-btn:hover {
  background: #f2f4f7;
  color: var(--color-text);
}

.nav-btn.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.nav-icon { font-size: 16px; }

/* ===== 主内容区 ===== */
.main {
  padding: 24px 32px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.page { display: none; }
.page.active { display: block; }

/* ===== 卡片 ===== */
.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 22px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--color-border-light);
}

.card-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--color-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== 统计卡片 ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  align-items: stretch;
}

/* 月总览 / 资金总览：固定 3 列等宽，避免高度参差 */
.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  align-items: stretch;
}

.stats-grid-3 .stat-card {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
}

.stats-grid-3 .stat-value {
  flex: 1;
  display: flex;
  align-items: center;
}

.stats-grid-3 .backend-row {
  margin-top: 4px;
}

.stat-card {
  background: #eff6ff;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-sm);
}

.stat-card.default { background: #fefce8; border-color: #fde047; }
.stat-card.success { background: #f0fdf4; border-color: #86efac; }
.stat-card.warning { background: #fff7ed; border-color: #fdba74; }
.stat-card.info    { background: #f5f3ff; border-color: #c4b5fd; }
.stat-card.danger  { background: #fef2f2; border-color: #fca5a5; }

.stat-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 1px;
  font-weight: 500;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.stat-value.currency::before {
  content: "¥";
  font-size: 12px;
  margin-right: 2px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.stat-sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 6px;
}

.stat-detail-list {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.stat-detail-name {
  font-weight: 500;
}

.stat-detail-value {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.stat-card-split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  padding: 10px 14px;
}

.stat-card-split-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 12px;
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
}

.stat-card-split-left .stat-value {
  font-size: 22px;
}

.stat-card-split-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.stat-card-split-right .stat-detail-list {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stat-card-split-right .stat-detail-row {
  font-size: 12px;
  gap: 8px;
}

.stat-detail-divider {
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
  margin: 4px 0;
}

.stat-detail-remaining {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  gap: 8px;
}

.stat-detail-remaining .stat-detail-value {
  color: #dc2626;
  font-weight: 700;
}

.stat-detail-hint {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

/* ===== 账户卡片网格 ===== */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.account-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: all var(--transition);
}

.account-card.card-bank    { background: #eff6ff; border-color: #bfdbfe; }
.account-card.card-merchant { background: #f5f3ff; border-color: #c4b5fd; }
.account-card.card-misc     { background: #fffbeb; border-color: #fde68a; }

.account-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.account-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.account-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.account-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
}

.account-balance-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.account-balance-input:hover {
  border-color: rgba(0, 0, 0, 0.12);
}

.account-balance-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(75, 126, 240, 0.10);
  outline: none;
}

.account-balance {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.account-balance.currency::before {
  content: "¥";
  font-size: 15px;
  margin-right: 2px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.account-changes {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 13px;
}

.account-change-item {
  color: var(--color-text-secondary);
}

.account-change-item .val { font-weight: 650; }
.account-change-item .val.plus  { color: var(--color-success); }
.account-change-item .val.minus { color: var(--color-danger); }

/* ===== 表单 ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 5px;
}

.form-label .required {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-input,
.form-select {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-card);
  transition: all var(--transition);
  outline: none;
  font-family: var(--font);
}

.form-input:hover,
.form-select:hover {
  border-color: #bcc0c8;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(75, 126, 240, 0.12);
}

.form-input.error { border-color: var(--color-danger); }

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}

/* ===== 按钮 ===== */
.btn {
  padding: 9px 20px;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-success {
  background: var(--color-success);
  color: white;
}
.btn-success:hover {
  background: #2db84d;
}

.btn-secondary {
  background: #f2f3f5;
  color: var(--color-text-secondary);
}
.btn-secondary:hover {
  background: #e2e3e8;
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-danger);
  color: white;
}
.btn-danger:hover {
  background: #e0352b;
}

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* ===== 表格 ===== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border-light);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* 月度报表每日明细表格：5列等宽且全部居中 */
.report-detail-table {
  table-layout: fixed;
}
.report-detail-table th,
.report-detail-table td {
  text-align: center;
}

thead {
  background: #f5f6f8;
}

th {
  padding: 9px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

tbody tr { transition: background var(--transition); }
tbody tr:nth-child(even) { background: #f8f9fb; }
tbody tr:hover { background: var(--color-primary-light); }
tbody tr:last-child td { border-bottom: none; }


.table-empty {
  text-align: center;
  padding: 48px;
  color: var(--color-text-tertiary);
}

/* ===== 仪表盘账户表 ===== */
.dash-table th {
  text-align: left;
  padding: 10px 12px;
}
.dash-table td {
  padding: 8px 12px;
  vertical-align: middle;
}
.dash-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.dash-input:hover {
  border-color: rgba(0, 0, 0, 0.12);
}
.dash-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(75, 126, 240, 0.10);
}

/* ===== 年度统计金额输入框 =====
   固定宽度 + 居中显示 + 大字号：避免撑满列宽导致的空旷感 */
.income-input {
  display: inline-block;
  width: 120px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: #fff;
  text-align: right;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.income-input:hover {
  border-color: rgba(0, 0, 0, 0.28);
}
.income-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(75, 126, 240, 0.12);
}

/* ===== 年度统计汇总区（三卡片式） ===== */
.income-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px;
  margin-top: 16px;
  background: linear-gradient(135deg, #f5f8ff 0%, #fff7ed 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.income-summary-card {
  text-align: center;
  padding: 10px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.income-summary-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.income-summary-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.income-summary-card.api .income-summary-value { color: var(--color-primary); }
.income-summary-card.jufeng .income-summary-value { color: #f59e0b; }
.income-summary-card.total {
  background: linear-gradient(135deg, #fff0f0 0%, #ffe0e0 100%);
  border-color: rgba(220, 38, 38, 0.15);
}
.income-summary-card.total .income-summary-value {
  color: var(--color-danger);
  font-size: 22px;
}

/* ===== 标签/徽章 ===== */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-blue   { background: var(--color-primary-light); color: var(--color-primary); }
.badge-green  { background: var(--color-success-light); color: var(--color-success); }
.badge-orange { background: var(--color-warning-light); color: var(--color-warning); }
.badge-red    { background: var(--color-danger-light); color: var(--color-danger); }
.badge-gray   { background: #f2f3f5; color: var(--color-text-secondary); }

/* ===== 通知 ===== */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  font-weight: 500;
  animation: slideIn 0.3s ease;
  min-width: 260px;
}

.toast.success { background: var(--color-success); color: white; }
.toast.error   { background: var(--color-danger); color: white; }
.toast.info    { background: var(--color-primary); color: white; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ===== 弹窗 ===== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 400px;
  max-width: 90%;
  overflow: hidden;
}

.modal-header {
  padding: 18px 22px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 650;
}

.modal-body {
  padding: 0 22px 18px;
  font-size: 14px;
  color: var(--color-text);
}

.modal-footer {
  padding: 12px 22px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ===== 工具样式 ===== */
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }
.text-warning  { color: var(--color-warning); }
.text-muted    { color: var(--color-text-secondary); }
.font-bold     { font-weight: 700; }
.font-mono     { font-family: "SF Mono", "Fira Code", "Consolas", monospace; font-variant-numeric: tabular-nums; }
.mt-16 { margin-top: 16px; }
.mt-8  { margin-top: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center  { display: flex; align-items: center; }

/* ===== 后台可用双输入 ===== */
.backend-row {
  display: flex;
  gap: 14px;
}

.backend-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.backend-item-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.backend-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  background: transparent;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-variant-numeric: tabular-nums;
  font-family: var(--font);
}

.backend-input:hover {
  border-color: var(--color-text-secondary);
}

.backend-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(75, 126, 240, 0.10);
}

.backend-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.backend-footer .stat-sub {
  margin-bottom: 0;
}

/* ===== 金额快捷选择 ===== */
.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.quick-amount-btn {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 600;
  transition: all var(--transition);
  font-family: var(--font);
}

.quick-amount-btn:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ===== 批量添加行 ===== */
.batch-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.batch-row .form-input {
  padding: 9px 12px;
  font-size: 14px;
}

.batch-row .batch-cloud  { min-width: 170px; }
.batch-row .batch-amount { min-width: 110px; text-align: right; }

.batch-row:only-child .btn-danger { display: none !important; }

/* ===== 分隔线 ===== */
.divider {
  height: 1px;
  background: var(--color-border-light);
  margin: 22px 0;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--color-primary);
}

/* ===== 操作按钮(表格内) ===== */
.action-btn {
  padding: 4px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
  font-family: var(--font);
}

.action-btn:hover { background: #f2f3f5; }
.action-btn.delete { color: var(--color-danger); }
.action-btn.edit   { color: var(--color-primary); }

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-tertiary);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.45;
}

.empty-state-text {
  font-size: 15px;
}

/* ===== 日期选择器 ===== */
.date-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border-light);
  flex-wrap: wrap;
}

.date-selector-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.date-selector input[type="date"],
.date-selector input[type="month"] {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: all var(--transition);
}

.date-selector input[type="date"]:focus,
.date-selector input[type="month"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(75,126,240,0.1);
}

.date-btn {
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: all var(--transition);
  font-family: var(--font);
  font-weight: 500;
}

.date-btn:hover {
  background: #f2f4f7;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.date-hint {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-warning);
  font-weight: 600;
}

/* 回到今天：历史日期下高亮（橙色实心 + 脉冲呼吸），避免和普通日期按钮混淆 */
.btn-today-return {
  padding: 7px 16px;
  border: none;
  background: linear-gradient(135deg, #ff8a3d 0%, #ff6b1a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(255, 107, 26, 0.35);
  transition: all var(--transition);
  font-family: var(--font);
  animation: btn-today-pulse 2s ease-in-out infinite;
}
.btn-today-return:hover {
  background: linear-gradient(135deg, #ff7a2a 0%, #f25a0a 100%);
  box-shadow: 0 4px 14px rgba(255, 107, 26, 0.55);
  transform: translateY(-1px);
  animation: none;
}
.btn-today-return:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 107, 26, 0.4);
}
@keyframes btn-today-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(255, 107, 26, 0.35); }
  50%      { box-shadow: 0 4px 18px rgba(255, 107, 26, 0.6); }
}

/* ===== 卡片折叠 ===== */
.card-title-clickable {
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.card-title-clickable:hover {
  background: rgba(75, 126, 240, 0.06);
}
.card-toggle-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-family: var(--font);
  transition: all var(--transition);
}
.card-title-clickable:hover .card-toggle-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.card-collapsed .card-toggle-btn {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.card-toggle-icon {
  display: inline-block;
  transition: transform var(--transition);
  font-size: 10px;
  line-height: 1;
}
.card-collapsed .card-toggle-icon {
  transform: rotate(-90deg);
}
.card-toggle-text::after {
  content: "收起";
}
.card-collapsed .card-toggle-text::after {
  content: "展开";
}
.card-collapsed .card-body {
  display: none;
}

/* ===== 搜索框清除按钮（CSS 驱动显隐，与搜索框内容同步，不依赖 JS 状态） ===== */
.search-clear-btn {
  display: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-danger);
  background: #fff;
  color: var(--color-danger);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  font-family: var(--font);
}
.search-clear-btn:hover {
  background: var(--color-danger);
  color: #fff;
}
#rechargeUserSearchInput:not(:placeholder-shown) ~ .search-clear-btn {
  display: inline-flex;
}

/* ===== 手续费计算显示 ===== */
.fee-display {
  padding: 10px 14px;
  background: var(--color-danger-light);
  border: 1px solid #ffd8d6;
  border-radius: var(--radius-xs);
  font-size: 15px;
  color: var(--color-danger);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.input-with-suffix { position: relative; }

.input-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  font-size: 14px;
  pointer-events: none;
}

.input-with-suffix .form-input { padding-right: 30px; }

/* ===== 按收款银行查询（对账） ===== */
.bank-query-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
}
.bank-query-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-left: 4px;
}
.bank-query-select { width: 150px; }
.bank-query-date { width: 155px; }
.bank-query-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 12px 14px;
  margin: 4px 0 12px;
  background: var(--color-bg);
  border-radius: var(--radius-xs);
}
.bank-query-sum-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bank-query-sum-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.bank-query-sum-val {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .header { padding: 14px 20px; flex-direction: column; gap: 6px; align-items: flex-start; }
  .nav { padding: 4px 16px; overflow-x: auto; }
  .nav-btn { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .main { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 24px; }
  .card { padding: 18px; }
}

/* ===== 反馈台补充样式（沿用上方充值台设计变量） ===== */
.blk{background:#fff;border:1px solid var(--color-border-light);border-radius:var(--radius);padding:12px;margin-top:10px;box-shadow:var(--shadow-xs)}
.blk .bhead{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.blk .tag{font-size:12px;color:var(--color-text-secondary);font-weight:600}
.blk .sp{flex:1}
.blk textarea{width:100%}
.blk-img{display:block;max-width:220px;max-height:150px;border:1px solid var(--color-border);border-radius:var(--radius-xs);margin-bottom:6px;cursor:pointer}
.blk .imgs{display:flex;gap:14px;align-items:flex-start}
.blk .imgs>div{flex:1;min-width:0}
td .acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* 技术查看页 */
.fb-list{display:flex;flex-direction:column;gap:12px}
.fb-card{background:var(--color-card);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden}
.fb-card.open{box-shadow:var(--shadow-sm)}
.fb-head{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;transition:background var(--transition)}
.fb-head:hover{background:var(--color-primary-light)}
.fb-num{font-size:15px;font-weight:700;color:var(--color-primary);min-width:34px}
.fb-rep{font-size:13px;color:var(--color-text-secondary);min-width:60px}
.fb-ttl{font-size:15px;font-weight:600;color:var(--color-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-arr{color:var(--color-text-tertiary);font-size:13px;min-width:14px;text-align:center}
.fb-sub{display:flex;align-items:center;gap:10px;padding:0 18px 12px;flex-wrap:wrap}
.fb-sub .sp{flex:1}
.fb-body{display:none;padding:4px 18px 18px;border-top:1px solid var(--color-border-light)}
.fb-card.open .fb-body{display:block}
.fb-body h3{font-size:15px;margin:14px 0 8px;font-weight:700;color:var(--color-primary)}
.fb-body p.body{margin:0 0 12px;white-space:pre-wrap;color:var(--color-text)}
.fb-thumbs{display:flex;flex-wrap:wrap;gap:12px}
.fb-thumb{width:220px;height:150px;object-fit:cover;border:1px solid var(--color-border);border-radius:var(--radius-xs);cursor:pointer;transition:box-shadow var(--transition)}
.fb-thumb:hover{box-shadow:var(--shadow-sm)}
.fb-cap{margin-top:6px;white-space:pre-wrap;color:var(--color-text)}
.fb-meta{font-size:12px;color:var(--color-text-tertiary);margin-top:8px}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}
.lb.show{display:flex}
.lb img{max-width:92vw;max-height:92vh;border-radius:8px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--color-text-secondary);font-size:13px;margin-top:14px}
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}

.badge-purple{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;background:#f3edff;color:#7c3aed;border:1px solid #e3d5ff}

.tag-pick{display:flex;flex-direction:column;gap:8px}
.tag-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.tag-chip{display:inline-flex;align-items:center;gap:4px;background:#f3edff;color:#7c3aed;border:1px solid #e3d5ff;border-radius:20px;padding:3px 10px;font-size:13px}
.tag-x{border:none;background:transparent;color:#7c3aed;cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.tag-x:hover{color:#5b21b6}
.tag-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--color-border-light)}
.tag-row:last-child{border-bottom:none}
.tag-name{font-size:14px;color:var(--color-text);flex:1}
.modal-x{border:none;background:transparent;font-size:18px;cursor:pointer;color:var(--color-text-tertiary);line-height:1;padding:0 4px}
.modal-x:hover{color:var(--color-text)}

/* 标签可勾选下拉（录入表单） */
.tag-pick{position:relative}
.tag-dd{position:absolute;z-index:80;top:100%;left:0;margin-top:6px;min-width:230px;max-height:220px;overflow:auto;background:var(--color-card);border:1px solid #e2e6ec;border-radius:10px;box-shadow:0 10px 30px rgba(29,29,31,.14);padding:6px}
.tag-dd-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--color-text)}
.tag-dd-item:hover{background:#f2f4f8}
.tag-dd-item input{width:15px;height:15px;accent-color:var(--color-primary);cursor:pointer;flex:none}
.tag-dd-empty{padding:8px 10px;font-size:13px;color:var(--color-text-secondary)}