:root {
  --bg: rgba(255,255,255,0.06);
  --bd: rgba(255,255,255,0.08);
  --muted: #94a3b8;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #0f172a, #111827, #1e293b);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

.bg { position:fixed; inset:0; overflow:hidden; z-index:-1; }
.circle {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.32;
  animation: float 10s infinite ease-in-out;
}
.circle:nth-child(1) { width:300px; height:300px; background:#7c3aed; top:-50px; left:-50px; }
.circle:nth-child(2) { width:250px; height:250px; background:#06b6d4; right:-80px; top:100px; animation-delay:2s; }
.circle:nth-child(3) { width:350px; height:350px; background:#ec4899; bottom:-120px; left:30%; animation-delay:4s; }

@keyframes float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-20px); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulseDot { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.4); opacity:0.6; } }

.container { width:94%; max-width:1400px; margin:auto; padding:26px 0 40px; }

header, .card {
  background: var(--bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--bd);
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-radius: 24px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: fadeInUp 0.8s ease;
}
.card {
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.logo {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(to right, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.breadcrumbs { display:flex; gap:8px; font-size:0.9rem; color:var(--muted); flex-wrap:wrap; justify-content:flex-end; }
.breadcrumbs a { color:#60a5fa; text-decoration:none; transition:0.2s; }
.breadcrumbs a:hover { color:#c084fc; }
.breadcrumbs .sep { color:#475569; }

.page-title { display:flex; align-items:center; gap:14px; margin-bottom:22px; animation: fadeInUp 0.9s ease; }
.page-title h1 {
  font-size: 2rem;
  background: linear-gradient(135deg, #f3f4f6, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-title .icon { font-size:2rem; }
.page-title .sub { color:var(--muted); font-size:0.92rem; margin-left:auto; }

/* ---------- 统计卡片 ---------- */
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:22px; animation: fadeInUp 1s ease; }
.stat-card {
  position: relative;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bd);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.35); }
.stat-card::after {
  content: "";
  position: absolute;
  width: 140px; height: 140px;
  right: -50px; top: -50px;
  border-radius: 50%;
  opacity: 0.25;
  filter: blur(20px);
}
.stat-card.income::after { background:#22c55e; }
.stat-card.expense::after { background:#ef4444; }
.stat-card.balance::after { background:#06b6d4; }
.stat-card.total::after { background:#c084fc; }

.stat-label { color:var(--muted); font-size:0.85rem; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.stat-value { font-size:1.85rem; font-weight:800; letter-spacing:0.5px; }
.stat-value.pos { color:#4ade80; }
.stat-value.neg { color:#f87171; }
.stat-value.muted { color:#cbd5e1; }
.stat-foot { margin-top:6px; font-size:0.78rem; color:#64748b; }

/* ---------- 筛选条 ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
  animation: fadeInUp 1.05s ease;
}
.filter-bar .group { display:flex; align-items:center; gap:6px; }
.filter-bar label { color:var(--muted); font-size:0.85rem; white-space:nowrap; }
.filter-bar .count-pill {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.3);
  color: #c4b5fd;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ---------- 表单元素 ---------- */
input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="file"], select, textarea {
  font-family: inherit;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  color: #f3f4f6;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 0.92rem;
  outline: none;
  transition: 0.2s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(124,58,237,0.55);
  background: rgba(0,0,0,0.35);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
textarea { resize:vertical; min-height:60px; }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2394a3b8' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ---------- 按钮 ---------- */
.btn {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--bg);
  color: #f3f4f6;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
}
.btn:hover { background:rgba(255,255,255,0.12); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; }

.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  border-color: rgba(255,255,255,0.15);
  font-weight: 600;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8b5cf6, #22d3ee);
  box-shadow: 0 6px 18px rgba(124,58,237,0.4);
}
.btn-success { background:linear-gradient(135deg, #16a34a, #22c55e); border-color:rgba(255,255,255,0.15); font-weight:600; }
.btn-success:hover { box-shadow:0 6px 18px rgba(34,197,94,0.4); }

.btn-danger { background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.35); color:#fca5a5; }
.btn-danger:hover { background:rgba(239,68,68,0.28); }

.btn-ghost { background:transparent; border-color:rgba(255,255,255,0.12); color:#cbd5e1; }
.btn-ghost:hover { background:var(--bg); }

.btn-sm { padding:6px 10px; font-size:0.82rem; border-radius:10px; }

.btn-icon {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.btn-icon:hover { background:rgba(255,255,255,0.1); }
.btn-icon.danger:hover { background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.35); color:#fca5a5; }

/* ---------- 主体两栏布局 ---------- */
.main-grid { display:grid; grid-template-columns:360px 1fr; gap:22px; margin-bottom:22px; align-items:start; animation: fadeInUp 1.1s ease; }

.form-card { padding:22px; }
.form-card h2 { font-size:1.1rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; color:#f3f4f6; }
.form-card h2 .badge-edit {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(124,58,237,0.25);
  color: #c4b5fd;
  display: none;
}
.form-card.editing h2 .badge-edit { display:inline-block; }

.form-row { margin-bottom:14px; }
.form-row label { display:block; color:#cbd5e1; font-size:0.85rem; margin-bottom:6px; }
.with-action { display:flex; gap:6px; }
.with-action select { flex:1; }

.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.type-toggle button {
  font-family: inherit;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  border-radius: 9px;
  cursor: pointer;
  transition: 0.2s;
  font-weight: 600;
}
.type-toggle button.active.expense { background:linear-gradient(135deg, rgba(239,68,68,0.85), rgba(248,113,113,0.85)); color:#fff; box-shadow:0 4px 12px rgba(239,68,68,0.3); }
.type-toggle button.active.income { background:linear-gradient(135deg, rgba(34,197,94,0.85), rgba(74,222,128,0.85)); color:#fff; box-shadow:0 4px 12px rgba(34,197,94,0.3); }

.form-actions { display:flex; gap:8px; margin-top:10px; }
.form-actions .btn { flex:1; }

.form-error { color:#fca5a5; font-size:0.78rem; margin-top:4px; min-height:1em; }

/* ---------- 记录列表 ---------- */
.records-card { padding:0; overflow:hidden; }
.records-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
  gap: 8px;
}
.records-head h2 { font-size:1.1rem; color:#f3f4f6; display:flex; align-items:center; gap:8px; }
.records-head .head-actions { display:flex; gap:8px; }

.records-list { list-style:none; padding:12px; max-height:640px; overflow-y:auto; }
.records-list::-webkit-scrollbar { width:8px; }
.records-list::-webkit-scrollbar-track { background:transparent; }
.records-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }
.records-list::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }

.record-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  border-left-width: 3px;
  transition: 0.2s;
  animation: slideIn 0.35s ease;
}
.record-item:hover { background:rgba(255,255,255,0.07); }
.record-item.expense { border-left-color:#ef4444; }
.record-item.income { border-left-color:#22c55e; }
.record-item.removing { animation: fadeOut 0.3s ease forwards; }
@keyframes fadeOut { to { opacity:0; transform:translateX(-30px); max-height:0; padding-top:0; padding-bottom:0; margin-bottom:0; } }

.r-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.record-item.expense .r-icon { background:linear-gradient(135deg, #ef4444, #f87171); }
.record-item.income .r-icon { background:linear-gradient(135deg, #16a34a, #4ade80); }

.r-info { min-width:0; }
.r-info .r-line1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.r-info .r-category { font-weight:600; font-size:0.96rem; color:#f3f4f6; }
.r-info .r-date { font-size:0.78rem; color:var(--muted); }
.r-info .r-note { font-size:0.83rem; color:#64748b; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.r-amount { font-weight:700; font-size:1.05rem; white-space:nowrap; text-align:right; }
.record-item.expense .r-amount { color:#f87171; }
.record-item.income .r-amount { color:#4ade80; }

.r-actions { display:flex; gap:6px; opacity:0.65; transition:opacity 0.2s; }
.record-item:hover .r-actions { opacity:1; }

/* ---------- 空状态 ---------- */
.empty-state { padding:60px 30px; text-align:center; color:#475569; }
.empty-state .big { font-size:4rem; opacity:0.6; margin-bottom:14px; }
.empty-state h3 { font-size:1.05rem; color:var(--muted); margin-bottom:6px; }
.empty-state p { font-size:0.88rem; color:#64748b; max-width:320px; margin:auto; line-height:1.6; }

/* ---------- 分页 ---------- */
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; padding:14px; border-top:1px solid rgba(255,255,255,0.06); }
.pagination button {
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bd);
  color: #cbd5e1;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: 0.2s;
}
.pagination button:hover:not(:disabled) { background:rgba(124,58,237,0.2); border-color:rgba(124,58,237,0.4); }
.pagination button.active { background:linear-gradient(135deg, #7c3aed, #06b6d4); color:#fff; border-color:transparent; }
.pagination button:disabled { opacity:0.4; cursor:not-allowed; }
.pagination .info { color:var(--muted); font-size:0.82rem; margin:0 8px; }

/* ---------- 操作工具栏 ---------- */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; padding:18px; margin-bottom:22px; animation: fadeInUp 1.15s ease; }
.toolbar .spacer { flex:1; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-mask.show { display:flex; animation: fadeIn 0.2s ease; }
.modal {
  background: rgba(30,41,59,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: fadeInUp 0.3s ease;
}
.modal.large { max-width:720px; }

.modal h3 { font-size:1.15rem; margin-bottom:14px; color:#f3f4f6; display:flex; align-items:center; gap:8px; }
.modal-body { color:#cbd5e1; line-height:1.7; font-size:0.93rem; margin-bottom:18px; }
.modal-body strong { color:#f3f4f6; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* ---------- 分类管理 ---------- */
.cat-add-row { display:flex; gap:8px; margin-bottom:16px; }
.cat-add-row input { flex:1; }

.cat-list { list-style:none; display:flex; flex-wrap:wrap; gap:8px; max-height:280px; overflow-y:auto; padding:4px; }
.cat-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  border-radius: 999px;
  background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.3);
  color: #ddd6fe;
  font-size: 0.85rem;
  animation: slideIn 0.25s ease;
}
.cat-list li button {
  border: none;
  background: transparent;
  color: #c4b5fd;
  cursor: pointer;
  font-size: 0.95rem;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.cat-list li button:hover { background:rgba(239,68,68,0.3); color:#fca5a5; }

/* ---------- 导入预览 ---------- */
.preview-table-wrap { max-height:320px; overflow:auto; border:1px solid var(--bd); border-radius:12px; margin-bottom:14px; }
.preview-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.preview-table th, .preview-table td { padding:8px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); white-space:nowrap; }
.preview-table th { background:rgba(0,0,0,0.25); color:var(--muted); position:sticky; top:0; font-weight:600; }
.preview-table td { color:#cbd5e1; }
.preview-table tr:hover td { background:rgba(255,255,255,0.04); }

.preview-summary { display:flex; flex-wrap:wrap; gap:16px; padding:12px 14px; background:rgba(0,0,0,0.2); border-radius:12px; margin-bottom:14px; font-size:0.85rem; color:#cbd5e1; }
.preview-summary b { color:#c084fc; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(17,24,39,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 2000;
  max-width: 90%;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { border-color:rgba(34,197,94,0.4); }
.toast.error { border-color:rgba(239,68,68,0.4); }
.toast.info { border-color:rgba(6,182,212,0.4); }

footer { margin-top:30px; text-align:center; color:#9ca3af; font-size:0.85rem; padding-bottom:10px; }

/* ---------- 小项明细 ---------- */
#amountRow label { display:flex; align-items:center; gap:8px; }
.amount-auto-badge { font-size:0.72rem; padding:2px 8px; border-radius:999px; background:rgba(6,182,212,0.2); color:#67e8f9; font-weight:400; display:none; }
#formAmount[readonly] { opacity:0.7; cursor:not-allowed; background:rgba(0,0,0,0.35); }
.items-list { display:flex; flex-direction:column; gap:6px; }
.item-row { display:flex; gap:6px; align-items:center; animation:slideIn 0.25s ease; }
.item-row .item-name { flex:1; min-width:0; }
.item-row .item-amount { width:100px; flex-shrink:0; }
.btn-remove-item {
  width:30px; height:30px; padding:0; border-radius:8px;
  background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.25);
  color:#fca5a5; font-size:1rem; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:0.2s;
}
.btn-remove-item:hover { background:rgba(239,68,68,0.25); color:#fecaca; }

/* 明细在记录列表中的展示 */
.r-items-toggle {
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  padding:3px 8px; border-radius:8px;
  background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.2);
  font-size:0.78rem; color:#c4b5fd; cursor:pointer; transition:0.2s; user-select:none;
}
.r-items-toggle:hover { background:rgba(124,58,237,0.22); }
.r-items-count { font-weight:600; }
.r-items-total { color:#a5b4fc; }
.r-items-detail {
  display:none; margin-top:4px; padding:6px 10px; border-radius:8px;
  background:rgba(0,0,0,0.15); font-size:0.8rem; color:#94a3b8; line-height:1.6;
  max-height:160px; overflow-y:auto;
}
.r-items-detail.expanded { display:block; animation:fadeIn 0.2s ease; }
.r-item-detail-row { display:flex; justify-content:space-between; padding:2px 0; }
.r-item-detail-row + .r-item-detail-row { border-top:1px solid rgba(255,255,255,0.04); }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  .main-grid { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  header { flex-direction:column; gap:14px; text-align:center; }
  .breadcrumbs { justify-content:center; }
  .page-title .sub { display:none; }
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-bar .group { width:100%; }
  .filter-bar .group select, .filter-bar .group input { flex:1; }
  .filter-bar .count-pill { margin:0; text-align:center; }
  .toolbar { flex-direction:column; }
  .toolbar .btn { width:100%; }
  .toolbar .spacer { display:none; }
  .stat-value { font-size:1.4rem; }
  .record-item {
    grid-template-columns: 38px 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .r-icon { grid-row:1 / span 2; }
  .r-amount { grid-column:3; }
  .r-actions { grid-row:2; grid-column:2 / span 2; justify-content:flex-end; opacity:1; }
  .modal { padding:20px; }
  .item-row .item-amount { width:80px; }
  .r-items-detail { max-height:120px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-card { padding:16px; }
  .stat-value { font-size:1.25rem; }
  .page-title h1 { font-size:1.5rem; }
  .item-row { flex-wrap:wrap; }
  .item-row .item-amount { width:70px; }
}