:root {
  --ink: #17233c;
  --muted: #6c7890;
  --line: #dfe5ee;
  --surface: #fff;
  --bg: #f4f7fb;
  --green: #2463d4;
  --green2: #e8f0ff;
  --gold: #f4b740;
  --success: #16a36a;
  --danger: #e24b4b;
}

body, button, input, select, textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.metric strong, .goal-value strong, .health-result, .monthly-summary strong,
.balance-card strong, .settings-stats strong, .spending-goal-story strong {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: -.025em;
}

body { background: var(--bg); }
.sidebar, .login-page { background: #17233c; }
.brand > span {
  background: #3b82f6;
  color: #fff;
  border-radius: 11px;
  box-shadow: 0 8px 20px rgba(8, 19, 44, .35);
}
.sidebar nav a, .client-option { color: #dce6f8; }
.sidebar nav a:hover, .client-option:hover, .client-option.active { background: #263755; color: #fff; }
.client-avatar { background: #dbe7fa; color: #17233c; }
.client-option.active .client-avatar { background: #3b82f6; color: #fff; }
.active-dot { background: #4ade80; }
.client-label, .add-client, .no-clients { color: #9fb0cc; }

.metric, .panel, .upload-panel, .period-shell, .health-card, .balance-card,
.monthly-summary article, .scope-switch a, .form-card, .compact-list,
.category-tree, .account-settings, .action-card, .danger-card {
  box-shadow: 0 6px 18px rgba(27, 45, 78, .045);
}

.primary, .confirm, .metric.accent, .month-strip a.active,
.scope-switch a.active span { background: var(--green); }
.positive { color: var(--success) !important; }
.negative { color: var(--danger) !important; }
.bank-dot { background: var(--gold); }
.investment-balance, .settings-hero, .chart-tooltip { background: #17233c; }
.rank-fill, .bar-fill, .goal-progress span { background: var(--green); }
.personal-key { background: var(--green); }
.business-key { background: var(--gold); }
.login-card { box-shadow: 0 24px 70px rgba(3, 12, 30, .3); }
.balance-card .balance-goal { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); }
.balance-card .balance-goal b { color: var(--ink); font-weight: 750; }
.balance-card .empty-goal { color: #98a2b5; }

select:focus, input:focus, textarea:focus {
  border-color: #3b82f6;
  outline: 3px solid rgba(59, 130, 246, .12);
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-toggle { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(255,255,255,.08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.nav-short { display: none; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.sidebar, main { transition: width .2s ease, margin-left .2s ease; }
body.sidebar-collapsed .sidebar { width: 72px; padding-left: 14px; padding-right: 14px; }
body.sidebar-collapsed main { margin-left: 72px; }
body.sidebar-collapsed .sidebar-head { justify-content: center; flex-wrap: wrap; }
body.sidebar-collapsed .brand strong, body.sidebar-collapsed .client-switcher, body.sidebar-collapsed .nav-label { display: none; }
body.sidebar-collapsed .sidebar nav { margin-top: 26px; }
body.sidebar-collapsed .sidebar nav a { display: grid; place-items: center; padding: 11px 4px; }
body.sidebar-collapsed .nav-short { display: inline; }
body.sidebar-collapsed .sidebar form { display: none; }

@media (max-width: 1000px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 236px; min-height: 100vh; padding: 20px 16px; box-shadow: 14px 0 35px rgba(9,21,45,.18); }
  .sidebar nav { display: grid; overflow: visible; margin-top: 22px; }
  .sidebar form { display: block; }
  main, body.sidebar-collapsed main { margin-left: 72px; padding: 22px 16px 50px; }
  .month-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; overflow: visible; }
  .month-strip a { min-width: 0; padding: 8px 1px; font-size: 10px; }
  .period-shell { padding: 12px 14px; }
  .pf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .pf-metrics article:last-child { grid-column: 1 / -1; }
  .metric { padding: 17px; min-height: 112px; }
  .metric strong { font-size: 23px; }
}

@media (max-width: 480px) {
  .pf-metrics { grid-template-columns: 1fr !important; }
  .pf-metrics article:last-child { grid-column: auto; }
  .month-strip a { font-size: 9px; }
}