:root {
  --bg: #f7fafc;
  --surface: #fff;
  --ink: #17324a;
  --muted: #687b8d;
  --line: #dbe7ed;
  --primary: #176b87;
  --primary-dark: #10546d;
  --accent: #e9788c;
  --accent-dark: #d65d75;
  --highlight: #f2c14e;
  --highlight-soft: #fff6d9;
  --primary-soft: #e8f4f7;
  --accent-soft: #fff0f3;
  --warning: #e0a71d;
  --limit: #e97842;
}

body {
  background: linear-gradient(180deg, #f5fbfd 0, #f9f8fb 40%, var(--bg) 100%);
}

.topbar {
  height: 76px;
  background: #fff;
  color: var(--ink);
  border-bottom: 3px solid var(--highlight);
  box-shadow: 0 4px 18px #176b8714;
}

.brand {
  display: flex;
  align-items: center;
  width: 250px;
  height: 72px;
  overflow: hidden;
}

.brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-link,
.link-button { color: var(--primary); }
.link-button { font-weight: 700; }

.quick-expense {
  background: linear-gradient(135deg, var(--primary), #2389a7);
  box-shadow: 0 14px 30px #176b8733;
}

.home-balance,
.secondary,
.subcategory-chip,
.schedule-form #id_months label {
  background: var(--primary-soft);
}

.home-balance { border-color: #b9dce7; }
.secondary,
.subcategory-chip { color: var(--primary-dark); }

.budget-hero {
  border-top: 4px solid var(--highlight);
  box-shadow: 0 10px 30px #176b870d;
}

.panel,
.home-recent,
.category-admin-card,
.report-button,
.budget-card { box-shadow: 0 8px 24px #176b8709; }

.budget-card:hover {
  border-color: #b9dce7;
  box-shadow: 0 8px 20px #176b8718;
}

.primary { background: var(--primary); }
.primary:hover { background: var(--primary-dark); }
.schedule-link { background: var(--primary); }
.message { background: var(--highlight-soft); color: #72540b; }

.mobile-nav .mobile-add {
  background: var(--accent);
  box-shadow: 0 7px 18px #e9788c55;
}

.mobile-nav .mobile-add:hover { background: var(--accent-dark); }

.category-actions { display: grid; gap: 3px; justify-items: end; }
.category-actions a { color: var(--primary); font-weight: 700; text-decoration: none; }
.category-actions .delete-link { color: var(--accent-dark); font-size: 12px; }

.reserve-total {
  margin-top: 22px;
  padding: 24px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #2389a7);
  box-shadow: 0 14px 30px #176b8728;
}
.reserve-total span { display: block; opacity: .85; }
.reserve-total strong { display: block; margin-top: 4px; font-size: clamp(30px, 6vw, 46px); }
.receivable-total { margin: 18px 0; padding: 22px; border-radius: 20px; color: #713f12; background: linear-gradient(135deg,var(--highlight-soft),#fff7cc); border: 1px solid var(--highlight); }
.receivable-total span { display: block; opacity: .85; }
.receivable-total strong { display: block; margin-top: 4px; font-size: clamp(30px, 6vw, 46px); }
.receivable-dot { background: var(--accent); }
.cost-type-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.cost-type-summary > a { padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.cost-type-summary > a:hover { transform: translateY(-2px); border-color: var(--primary); }
.cost-type-summary > a.selected { background: var(--primary-soft); outline: 2px solid var(--primary); }
.cost-type-summary > a > div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
.cost-type-summary strong { display: block; margin: 6px 0 2px; font-size: clamp(22px,4vw,30px); }
.cost-type-summary small { color: var(--muted); }
.cost-card-content { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 16px; margin-top: 12px; }
.cost-donut { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--over) 0 var(--spent),var(--ok) var(--spent) 100%); box-shadow: inset 0 0 0 1px #ffffff66; }
.cost-donut > div { display: grid; place-content: center; justify-items: center; width: 68px; height: 68px; border: 3px solid var(--accent); border-radius: 50%; background: #fff; text-align: center; }
.cost-donut > div strong { margin: 0; color: var(--primary-dark); font-size: 18px; }
.cost-donut > div small { font-size: 9px; }
.cost-card-values { display: grid; gap: 7px; }
.cost-card-values > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cost-card-values span { color: var(--muted); font-size: 11px; }
.cost-card-values strong { margin: 0; font-size: 14px; text-align: right; }
.cost-type-dot { width: 10px; height: 10px; border-radius: 50%; }
.fixed-cost-dot { background: var(--accent); }
.variable-cost-dot { background: var(--highlight); }
.cost-detail-totals { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 18px 0; }
.cost-detail-totals > div { padding: 14px; border-radius: 14px; background: var(--primary-soft); }
.cost-detail-totals span,.cost-category-head span { display: block; color: var(--muted); font-size: 12px; }
.cost-detail-totals strong { display: block; margin-top: 3px; font-size: 22px; }
.cost-category-list > article { padding: 15px 0; border-top: 1px solid var(--line); }
.cost-category-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cost-group-card { position: relative; padding: 13px; border: 1px solid var(--line); border-radius: 15px; color: inherit; }
.cost-group-open { display: grid; grid-template-columns: 66px minmax(0,1fr) auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.edit-group-plan { display: inline-block; margin: 7px 0 0 78px; color: var(--primary); font-size: 11px; font-weight: 800; text-decoration: none; }
.cost-group-card:hover,.cost-group-card.selected { border-color: var(--primary); box-shadow: 0 5px 16px #173c3412; }
.group-donut { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(var(--group-color) 0 var(--spent),#e8eef0 var(--spent) 100%); }
.group-donut > div { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #fff; }
.group-donut strong { margin: 0; font-size: 13px; }
.cost-group-copy > strong,.cost-group-copy > span { display: block; }
.cost-group-copy > span { color: var(--muted); font-size: 11px; }
.cost-group-card.pending,.cost-group-card.under { --group-color: var(--ok); }
.cost-group-card.exact { --group-color: var(--accent); }
.cost-group-card.over { --group-color: var(--over); }
.group-status { padding: 5px 8px; border-radius: 99px; color: #166534; background: #dcfce7; font-size: 11px; font-weight: 800; }
.exact .group-status { color: #1e40af; background: #dbeafe; }
.over .group-status { color: #991b1b; background: #fee2e2; }
.group-expense-detail { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line); }
.cost-category-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cost-category-head > strong { font-size: 16px; }
.cost-category-head span { text-align: right; }
.cost-subcategory-list { margin: 9px 0 0 14px; padding-left: 12px; border-left: 3px solid var(--highlight-soft); }
.cost-subcategory-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--muted); }
.cost-subcategory-list strong { color: var(--ink); }
.month-picker { display: flex; align-items: center; gap: 8px; }
.month-picker label { color: var(--muted); font-size: 12px; font-weight: 700; }
.month-picker select { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: #fff; color: var(--ink); font: inherit; font-weight: 750; }
.reserve-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
.reserve-grid article { padding: 18px; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 18px; background: #fff; }
.reserve-grid span,.reserve-grid small { display: block; color: var(--muted); }
.reserve-grid strong { display: block; margin: 5px 0; font-size: 22px; }
.reserve-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reserve-card-title a { color: var(--primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.reserve-dot { background: var(--highlight); }
.bar-chart { display: grid; grid-template-columns: repeat(12,minmax(38px,1fr)); align-items: end; gap: 8px; height: 280px; margin-top: 24px; padding-top: 30px; overflow-x: auto; }
.bar-column { display: grid; grid-template-rows: 22px 1fr 28px; align-items: end; justify-items: center; height: 100%; min-width: 38px; }
.bar-column i { display: block; width: min(34px,80%); min-height: 4px; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg,var(--accent),var(--primary)); }
.bar-column small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.bar-value { font-size: 9px; color: var(--muted); white-space: nowrap; }
.subcategory-spend-list { margin-top: 14px; }
.subcategory-spend-row { display: grid; grid-template-columns: minmax(0,1fr) auto 66px; align-items: center; gap: 14px; margin: 0 -10px; padding: 14px 10px; border-top: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; transition: background .15s, transform .15s; }
.subcategory-spend-row:first-child { border-top: 0; }
.subcategory-spend-row:hover { background: var(--primary-soft); transform: translateX(2px); }
.subcategory-spend-row.selected { background: var(--highlight-soft); outline: 2px solid var(--highlight); }
.subcategory-spend-copy strong,.subcategory-spend-copy small { display: block; }
.subcategory-spend-copy small { margin-top: 2px; color: var(--muted); }
.month-change { justify-self: end; min-width: 58px; padding: 5px 8px; border-radius: 99px; text-align: center; font-size: 12px; font-weight: 800; }
.change-up { color: #166534; background: #dcfce7; }
.change-down { color: #991b1b; background: #fee2e2; }
.change-empty { color: var(--muted); background: #f1f5f9; }
.clear-subcategory-filter { color: var(--primary); font-weight: 750; text-decoration: none; }
.daily-chart-wrap { margin-top: 20px; padding: 18px 14px 8px; border-radius: 16px; background: linear-gradient(180deg,var(--primary-soft),#fff); }
.daily-chart-wrap h3 { margin: 0 0 8px; font-size: 15px; color: var(--primary-dark); }
.daily-chart { display: grid; grid-template-columns: repeat(31,minmax(18px,1fr)); align-items: end; gap: 4px; height: 220px; overflow-x: auto; padding-top: 28px; }
.daily-column { display: grid; grid-template-rows: 22px 1fr 24px; align-items: end; justify-items: center; height: 100%; min-width: 18px; color: inherit; text-decoration: none; border-radius: 7px; transition: background .15s,transform .15s; }
.daily-column:hover { background: #fff; transform: translateY(-2px); }
.daily-column.selected { background: var(--highlight-soft); outline: 2px solid var(--highlight); }
.daily-column span { font-size: 8px; color: var(--muted); white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 42px; }
.daily-column i { width: min(16px,85%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg,var(--accent),var(--primary)); }
.daily-column i.empty-bar { background: #dbe7ed; }
.daily-column small { color: var(--muted); font-size: 9px; }
.day-filter-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--highlight-soft); }
.day-filter-status a { color: var(--primary); font-weight: 750; text-decoration: none; }

@media (max-width: 640px) {
  .topbar { height: 64px; padding: 0 14px; }
  .brand { width: 188px; height: 60px; }
  .mobile-nav { grid-template-columns: repeat(5,1fr); padding-inline: 6px; }
  .reserve-grid { grid-template-columns: 1fr; }
  .bar-chart { grid-template-columns: repeat(12,42px); }
  .bar-value { display: none; }
  .subcategory-summary .section-title { align-items: flex-end; }
  .subcategory-spend-row { grid-template-columns: minmax(0,1fr) auto 58px; gap: 8px; }
  .subcategory-spend-row > strong { font-size: 13px; }
  .daily-chart { grid-template-columns: repeat(31,24px); gap: 5px; }
  .daily-column { min-width: 24px; }
  .day-filter-status { align-items: flex-start; flex-direction: column; }
  .cost-type-summary { grid-template-columns: 1fr; gap: 10px; }
  .cost-card-content { grid-template-columns: 94px 1fr; gap: 12px; }
  .cost-donut { width: 90px; height: 90px; }
  .cost-donut > div { width: 58px; height: 58px; }
  .cost-category-head { align-items: flex-start; flex-direction: column; }
  .cost-category-head span { text-align: left; }
  .cost-category-list { grid-template-columns: 1fr; }
  .cost-group-card { padding: 11px 9px; }
  .cost-group-open { grid-template-columns: 58px minmax(0,1fr) auto; gap: 9px; }
  .edit-group-plan { margin-left: 67px; }
  .group-donut { width: 54px; height: 54px; }
  .group-donut > div { width: 38px; height: 38px; }
}