/* Analytics page — inherits design tokens from main.css */
.an-main { max-width: 1280px; }
.an-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap; }
.an-page-title { font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--text); letter-spacing:-0.5px; }
.an-page-sub { font-size:13px; color:var(--text-3); margin-top:2px; }

.an-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; transition:var(--t-fast); }
.an-card:hover { border-color:var(--border-2); }
.an-card-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:8px; }
.an-card-header h3 { font-family:var(--font-head); font-size:12px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:0.8px; }
.an-card-sub { font-size:11px; color:var(--text-3); font-family:var(--font-mono); }

.an-stat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.an-stat { padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.an-stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-3); }
.an-stat-value { font-family:var(--font-mono); font-size:22px; font-weight:500; color:var(--text); transition:color 0.3s; line-height:1.1; }
.an-stat-sub { font-size:11px; color:var(--text-3); }
.an-mini-track { height:3px; background:var(--bg-3); border-radius:3px; overflow:hidden; margin-top:6px; }
.an-mini-fill { height:100%; border-radius:3px; transition:width 0.6s cubic-bezier(0.4,0,0.2,1); }
.an-stat.net-worth { border-bottom:2px solid var(--sky); }
.an-stat.savings-rate { border-bottom:2px solid var(--emerald); }

.income-color  { color:var(--emerald) !important; }
.expense-color { color:var(--rose) !important; }

.an-insights-card { margin-bottom:18px; }
.insights-list { display:flex; flex-direction:column; gap:8px; }
.insight-item { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:var(--r-md); animation:pageFadeIn 0.3s ease; }
.insight-positive { background:var(--emerald-bg); border:1px solid rgba(0,212,160,0.2); }
.insight-warning  { background:var(--amber-bg); border:1px solid rgba(245,166,35,0.2); }
.insight-danger   { background:var(--rose-bg); border:1px solid rgba(255,92,122,0.2); }
.insight-info     { background:var(--sky-bg); border:1px solid rgba(56,178,240,0.2); }
.insight-icon { font-size:16px; flex-shrink:0; line-height:1.4; }
.insight-text { font-size:13px; line-height:1.6; color:var(--text); }

.an-chart-wrap { position:relative; }
.an-two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.an-card.wide { margin-bottom:14px; }

.an-yoy-card { margin-bottom:14px; }
.yoy-grid { display:grid; grid-template-columns:110px 1fr 1fr 1fr; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.yoy-col { display:flex; flex-direction:column; }
.yoy-cell { padding:11px 14px; font-family:var(--font-mono); font-size:13px; border-bottom:1px solid var(--bg-3); display:flex; align-items:center; color:var(--text); }
.yoy-cell:last-child { border-bottom:none; }
.yoy-cell.header { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-3); background:var(--bg-3); font-family:var(--font-body); }
.yoy-cell.label { font-size:12px; font-weight:600; color:var(--text-2); font-family:var(--font-body); }

.top-table { width:100%; border-collapse:collapse; font-size:13px; }
.top-table th { text-align:left; padding:7px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-3); border-bottom:1px solid var(--border); font-family:var(--font-mono); }
.top-table td { padding:10px; border-bottom:1px solid var(--bg-3); color:var(--text); }
.top-table tr:last-child td { border-bottom:none; }
.top-table tr:hover td { background:var(--bg-3); }
.top-rank { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--bg-3); color:var(--text-2); font-size:10px; font-weight:700; font-family:var(--font-mono); }
.top-amount { font-family:var(--font-mono); font-weight:500; color:var(--rose); text-align:right; }

.heatmap-wrap { overflow-x:auto; }
.heatmap-table { min-width:360px; }
.heatmap-header,.heatmap-row { display:grid; grid-template-columns:100px repeat(6,1fr); gap:3px; margin-bottom:3px; align-items:center; }
.heatmap-month { font-size:9px; color:var(--text-3); text-align:center; font-weight:700; text-transform:uppercase; font-family:var(--font-mono); }
.heatmap-cat-label { font-size:11px; color:var(--text-2); font-weight:600; padding-right:6px; }
.heatmap-cell { height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; transition:transform 0.15s; cursor:default; border:1px solid rgba(255,255,255,0.04); font-family:var(--font-mono); }
.heatmap-cell:hover { transform:scale(1.1); z-index:1; box-shadow:var(--shadow-sm); }

@media (max-width:1100px) { .an-stat-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px) {
  .an-stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .an-two-col { grid-template-columns:1fr; }
  .an-topbar { flex-direction:column; align-items:flex-start; }
  .an-stat-value { font-size:18px; }
  .an-card { padding:14px; }
  .yoy-grid { grid-template-columns:80px repeat(3,1fr); }
  .yoy-cell { padding:8px; font-size:11px; }
  .heatmap-header,.heatmap-row { grid-template-columns:70px repeat(6,1fr); }
  .heatmap-cell { height:26px; font-size:8px; }
}