:root {
  --ink: #19342d;
  --muted: #77827c;
  --green: #2c7154;
  --green-deep: #194b3a;
  --green-pale: #e9f3ed;
  --cream: #f6f7f3;
  --line: #e8ece7;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--cream);
  --bs-primary: var(--green);
  --bs-primary-rgb: 44, 113, 84;
  --bs-border-color: var(--line);
  --bs-border-radius: 1rem;
  --bs-font-sans-serif: "DM Sans", "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% -30%, rgba(199, 226, 207, .45), transparent 55%),
    var(--cream);
  font-family: var(--bs-font-sans-serif);
  font-size: .94rem;
  -webkit-font-smoothing: antialiased;
}

.app-shell { max-width: 1180px; }

.topbar {
  min-height: 82px;
  border-bottom: 1px solid rgba(25, 52, 45, .08);
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: var(--green-deep);
}

.brand-name { color: var(--ink); font-size: 1.02rem; font-weight: 750; letter-spacing: -.035em; }
.brand-caption { color: var(--muted); font-size: .72rem; }

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .52rem .78rem;
  border: 1px solid #dce9df;
  border-radius: 999px;
  color: var(--green-deep);
  background: rgba(255, 255, 255, .65);
  font-size: .76rem;
  font-weight: 650;
}

.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: #4d9a67; }

.welcome-block { padding: 2.4rem 0 1.65rem; }
.eyebrow { color: var(--green); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.welcome-title { margin: .55rem 0 .45rem; font-size: clamp(1.8rem, 4vw, 2.55rem); font-weight: 720; letter-spacing: -.065em; line-height: 1.12; }
.welcome-copy { max-width: 550px; margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.65; }

.surface-card {
  height: 100%;
  border: 1px solid rgba(25, 52, 45, .075);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 30px rgba(39, 66, 52, .045);
}

.summary-card {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  padding: 1.45rem 1.5rem;
  color: #fff;
  border: 0;
  background: linear-gradient(125deg, #194b3a 0%, #286a4e 70%, #367b5b 100%);
}

.summary-card::after {
  position: absolute;
  right: -50px;
  bottom: -125px;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 27px rgba(255, 255, 255, .035), 0 0 0 56px rgba(255, 255, 255, .025);
  content: "";
}

.summary-overline { position: relative; z-index: 1; color: rgba(255, 255, 255, .75); font-size: .8rem; font-weight: 600; }
.summary-value { position: relative; z-index: 1; margin: .55rem 0 .8rem; font-size: clamp(2.1rem, 5vw, 2.8rem); font-weight: 700; letter-spacing: -.065em; line-height: 1; }
.summary-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: .55rem; color: rgba(255, 255, 255, .78); font-size: .8rem; }
.summary-meta .summary-period { padding: .33rem .58rem; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(255,255,255,.1); color: #fff; }

.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.35rem .55rem; }
.card-title { margin: 0; font-size: 1rem; font-weight: 720; letter-spacing: -.025em; }
.card-subtitle { margin: .25rem 0 0; color: var(--muted); font-size: .77rem; }
.card-body-content { padding: .75rem 1.35rem 1.35rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.1rem 0 .95rem; }
.section-heading h2 { margin: 0; font-size: 1.22rem; font-weight: 730; letter-spacing: -.04em; }
.section-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .8rem; }

.filter-row { display: flex; align-items: center; gap: .55rem; }
.form-select, .form-control { min-height: 43px; border-color: #e3e9e3; border-radius: 11px; color: var(--ink); font-size: .84rem; box-shadow: none !important; }
.form-select:focus, .form-control:focus { border-color: #83b597; }
.period-select { width: 180px; min-height: 40px; background-color: rgba(255,255,255,.75); font-size: .8rem; }

.category-list { display: grid; gap: 1rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.category-row { display: grid; gap: .45rem; }
.category-symbol { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-pale); font-size: .75rem; font-weight: 750; }
.category-name { color: #516159; font-size: .79rem; }
.category-amount { color: var(--ink); font-size: .8rem; font-weight: 680; }
.category-progress { height: 5px; margin-left: 36px; border-radius: 9px; background: #edf1ed; }
.category-progress .progress-bar { border-radius: 9px; background: #58a176; }
.empty-inline { padding: 1.35rem .5rem; color: var(--muted); font-size: .82rem; line-height: 1.55; text-align: center; }

.entry-card { padding-bottom: 1.25rem; }
.entry-card .card-heading { padding-bottom: .85rem; }
.entry-form { padding: 0 1.35rem; }
.form-label { margin-bottom: .35rem; color: #52625a; font-size: .76rem; font-weight: 650; }
.form-hint { color: var(--muted); font-size: .72rem; }
.btn-primary { --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-bg: var(--green-deep); --bs-btn-hover-border-color: var(--green-deep); --bs-btn-active-bg: var(--green-deep); --bs-btn-active-border-color: var(--green-deep); border-radius: 11px; font-size: .85rem; font-weight: 650; }
.btn-link-muted { padding: .5rem .75rem; color: var(--muted); font-size: .8rem; text-decoration: none; }
.btn-link-muted:hover { color: var(--green-deep); }
.entry-note { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 1.35rem 0; padding: .75rem; border-radius: 11px; color: #607267; background: #f4f8f4; font-size: .73rem; line-height: 1.45; }

.movement-card { overflow: hidden; }
.movement-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--line); }
.movement-count { color: var(--muted); font-size: .77rem; white-space: nowrap; }
.movement-filters { display: flex; align-items: center; gap: .55rem; }
.movement-filters .search-control { width: min(230px, 34vw); padding-left: 2.3rem; background: #fbfcfa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none' stroke='%23818e85' stroke-width='1.7' viewBox='0 0 24 24'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='m16 16 4.2 4.2'/%3E%3C/svg%3E") no-repeat .75rem center; }
.movement-filters .category-control { width: 165px; }
.clear-filters { padding: .4rem .35rem; color: var(--muted); background: transparent; border: 0; font-size: .76rem; white-space: nowrap; }
.clear-filters:hover { color: var(--green); }

.table { --bs-table-bg: transparent; margin: 0; }
.table thead th { padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: #8a958e; font-size: .67rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { padding: .9rem 1rem; border-color: #edf0ec; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.date-cell { color: var(--muted); font-size: .79rem; white-space: nowrap; }
.expense-description { color: var(--ink); font-size: .84rem; font-weight: 620; }
.category-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .55rem; border-radius: 8px; color: #53705f; background: #f1f6f1; font-size: .73rem; white-space: nowrap; }
.amount-cell { color: var(--ink); font-size: .84rem; font-weight: 700; text-align: right; white-space: nowrap; }
.actions-cell { width: 145px; text-align: right; white-space: nowrap; }
.action-button { padding: .28rem .45rem; border: 0; color: #62716a; background: transparent; font-size: .72rem; }
.action-button:hover { color: var(--green-deep); background: #f1f5f1; }
.delete-button:hover { color: #b64040; background: #fff1f0; }
.empty-state { padding: 2.2rem 1rem 2.4rem; text-align: center; }
.empty-icon { display: grid; width: 46px; height: 46px; margin: 0 auto .8rem; place-items: center; border-radius: 15px; color: var(--green); background: var(--green-pale); }
.empty-state strong { display: block; font-size: .9rem; font-weight: 700; }
.empty-state p { max-width: 360px; margin: .38rem auto 0; color: var(--muted); font-size: .79rem; line-height: 1.5; }

.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 2rem; color: #89958e; font-size: .73rem; }
.footer-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }

@media (max-width: 767.98px) {
  .topbar { min-height: 70px; }
  .welcome-block { padding: 1.8rem 0 1.25rem; }
  .summary-card { min-height: 180px; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-top: 1.55rem; }
  .section-heading .period-select { width: 100%; }
  .movement-toolbar { align-items: stretch; flex-direction: column; padding: 1rem; }
  .movement-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .movement-filters .search-control, .movement-filters .category-control { width: 100%; }
  .movement-filters .search-control { grid-column: 1 / -1; }
  .clear-filters { grid-column: 1 / -1; justify-self: start; padding-left: 0; }
  .table thead th, .table tbody td { padding-right: .7rem; padding-left: .7rem; }
  .table thead th { font-size: .62rem; }
  .actions-cell { width: auto; }
  .action-button { padding: .25rem .3rem; }
  .app-footer { align-items: flex-start; flex-direction: column; padding-bottom: 1.5rem; }
}

@media (max-width: 480px) {
  .privacy-badge { padding: .45rem .55rem; font-size: .68rem; }
  .table { min-width: 615px; }
  .movement-count { font-size: .72rem; }
}