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

:root {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --bg: #f8fafc;
  --sidebar-bg: #1e293b;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #4f46e5;
  --card-bg: #fff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --green: #16a34a;
  --red: #dc2626;
  --radius: 8px;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }

/* ─── 登录页 ──── */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card  { background:var(--card-bg); border-radius:12px; padding:2.5rem; width:100%; max-width:400px; box-shadow:0 4px 24px rgba(0,0,0,.1); }
.login-card h1 { font-size:1.4rem; font-weight:700; margin-bottom:.25rem; }
.login-sub    { color:var(--text-muted); margin-bottom:1.5rem; }

/* ─── 布局 ──── */
.layout { display:flex; min-height:100vh; }

.sidebar { width:220px; min-height:100vh; background:var(--sidebar-bg); display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:100; transition:transform .25s; }
.sidebar-header { padding:1.25rem 1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1); }
.logo { color:#fff; font-weight:700; font-size:1rem; }
.sidebar-close { display:none; background:none; border:none; color:#fff; font-size:1.25rem; cursor:pointer; }
.nav-links { list-style:none; padding:.5rem 0; flex:1; }
.nav-links a { display:block; padding:.65rem 1.25rem; color:var(--sidebar-text); text-decoration:none; font-size:.9rem; border-left:3px solid transparent; transition:all .2s; }
.nav-links a:hover, .nav-links a.active { background:rgba(79,70,229,.15); color:#fff; border-left-color:var(--sidebar-active); }
.sidebar-footer { padding:1rem; border-top:1px solid rgba(255,255,255,.1); }
.btn-logout { width:100%; background:rgba(255,255,255,.1); border:none; color:var(--sidebar-text); padding:.5rem; border-radius:var(--radius); cursor:pointer; font-size:.875rem; }
.btn-logout:hover { background:rgba(255,255,255,.2); }

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99; }

.main-content { margin-left:220px; flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar { height:56px; background:var(--card-bg); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 1.5rem; gap:1rem; position:sticky; top:0; z-index:50; }
.menu-btn { display:none; background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--text); padding:.25rem .5rem; }
.topbar-title { font-weight:600; }
.content-body { padding:1.5rem; }

/* ─── 卡片 ──── */
.card { background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--border); padding:1.25rem; margin-bottom:1.25rem; }
.form-card { max-width:800px; }

/* ─── 统计卡片 ──── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:1rem; margin-bottom:1.25rem; }
.stat-card  { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1rem; }
.stat-card.loading { color:var(--text-muted); font-size:.875rem; }
.stat-label { font-size:.8rem; color:var(--text-muted); margin-bottom:.35rem; }
.stat-value { font-size:1.5rem; font-weight:700; color:var(--primary); }

/* ─── 表单 ──── */
.form-group, .form-row { margin-bottom:1rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
label { display:block; font-size:.85rem; font-weight:500; margin-bottom:.35rem; color:var(--text-muted); }
input[type="text"], input[type="password"], input[type="number"], input[type="month"],
select, textarea {
  width:100%; padding:.5rem .75rem; border:1px solid var(--border); border-radius:var(--radius);
  font-size:.9rem; color:var(--text); background:#fff; transition:border-color .2s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); }
.hint { font-size:.78rem; color:var(--text-muted); margin-top:.25rem; }
.form-actions { display:flex; gap:.75rem; margin-top:1.25rem; }

/* ─── 按钮 ──── */
.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem 1rem; border-radius:var(--radius); font-size:.875rem; font-weight:500; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--text); transition:all .15s; }
.btn:hover { background:var(--bg); }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-danger  { background:var(--red); color:#fff; border-color:var(--red); }
.btn-sm { padding:.3rem .65rem; font-size:.8rem; }
.btn-full { width:100%; justify-content:center; padding:.65rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ─── 表格 ──── */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; background:var(--card-bg); }
.data-table th { background:var(--bg); font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; padding:.65rem 1rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:.65rem 1rem; font-size:.875rem; border-bottom:1px solid var(--border); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:#f8faff; }

/* ─── 页头 ──── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.page-header h2 { font-size:1.25rem; font-weight:700; }

/* ─── 筛选栏 ──── */
.filter-bar { display:flex; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.filter-bar input, .filter-bar select { width:auto; min-width:160px; }

/* ─── 徽章 ──── */
.badge { display:inline-block; padding:.2rem .5rem; border-radius:4px; font-size:.75rem; font-weight:600; background:var(--bg); border:1px solid var(--border); }
.badge-income  { background:#dcfce7; color:#16a34a; border-color:#bbf7d0; }
.badge-expense { background:#fee2e2; color:#dc2626; border-color:#fecaca; }
.badge-tax     { background:#e0f2fe; color:#0284c7; border-color:#bae6fd; }
.badge-adjust  { background:#fef9c3; color:#ca8a04; border-color:#fde68a; }

/* ─── 颜色 ──── */
.text-green, .green { color:var(--green); }
.text-red, .red     { color:var(--red); }
.text-muted         { color:var(--text-muted); }

/* ─── 结算页 ──── */
.settle-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; gap:1rem; flex-wrap:wrap; }
.settle-actions { display:flex; gap:.75rem; }
.compare-bar    { font-size:.875rem; color:var(--text-muted); margin-top:.35rem; }
.transfers-list { display:flex; flex-direction:column; gap:.5rem; }
.transfer-item  { background:var(--bg); border:1px solid var(--border); padding:.6rem 1rem; border-radius:var(--radius); font-size:.9rem; }

/* ─── 错误 ──── */
.error-msg { color:var(--red); font-size:.875rem; padding:.5rem; background:#fee2e2; border-radius:var(--radius); margin-top:.5rem; }

/* ─── 响应式 ──── */
@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-close { display:block; }
  .sidebar-overlay.show { display:block; }
  .main-content { margin-left:0; }
  .menu-btn { display:block; }
  .form-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .settle-header { flex-direction:column; }
  .content-body { padding:1rem; }
}