:root {
  --nav: #263a4a;
  --nav-dark: #213342;
  --teal: #19b99a;
  --cyan: #21bec3;
  --orange: #f8ad58;
  --red: #ef5368;
  --blue: #1c84c6;
  --green: #1ab394;
  --bg: #f3f3f4;
  --line: #e7eaec;
  --text: #52606b;
  --muted: #8a98a5;
  --shadow: 0 1px 3px rgba(20, 35, 50, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 220px; z-index: 20; overflow-y: auto;
  background: linear-gradient(155deg, #2f4659, #213342 55%, #1d2e3b);
  color: #c6d0d8; transition: width .2s ease;
}
.brand {
  padding: 22px 24px 18px; min-height: 138px; background: rgba(0,0,0,.07);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: white; font-size: 25px; background: linear-gradient(140deg,#d7dde1,#758895);
  border: 3px solid rgba(255,255,255,.85);
}
.brand strong { color: white; font-size: 13px; letter-spacing: .2px; }
.quick { padding: 14px 22px; color: #fff; background: rgba(255,255,255,.04); font-size: 14px; }
.quick span { color: #f3da35; margin-right: 10px; }
.nav-section { padding: 8px 0; }
.nav-item, .nav-group-title {
  display: flex; align-items: center; gap: 11px; min-height: 45px; padding: 10px 21px;
  font-size: 14px; cursor: pointer; border-left: 4px solid transparent;
}
.nav-item:hover, .nav-group-title:hover { color: white; background: rgba(255,255,255,.035); }
.nav-item.active { color: white; background: #1f3040; border-left-color: var(--teal); }
.nav-icon { width: 18px; text-align: center; opacity: .95; }
.nav-arrow { margin-left: auto; font-size: 11px; }
.submenu { background: rgba(0,0,0,.09); }
.submenu .nav-item { padding-left: 51px; min-height: 38px; font-size: 13px; }

.main { margin-left: 220px; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 10; min-height: 61px; background: white; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 28px; gap: 24px;
}
.hamburger { border: 0; color: white; background: var(--teal); border-radius: 3px; width: 36px; height: 34px; cursor: pointer; font-size: 18px; }
.top-meta { margin-left: auto; display: flex; align-items: center; gap: 32px; color: #777; font-size: 13px; }
.top-meta a:hover { color: var(--teal); }
.content { padding: 24px 16px 50px; max-width: 1700px; margin: auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 500; color: #4a5964; }
.breadcrumb { margin-top: 7px; color: #999; font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }

.btn { border: 1px solid transparent; border-radius: 3px; padding: 8px 13px; cursor: pointer; font-size: 13px; color: white; background: var(--green); }
.btn:hover { filter: brightness(.96); }
.btn-blue { background: var(--blue); }
.btn-red { background: #ed5565; }
.btn-orange { background: #f8ac59; }
.btn-gray { background: #fff; color: #67737d; border-color: #d8dde2; }
.btn-sm { padding: 5px 8px; font-size: 12px; }
.btn-icon { width: 31px; padding: 6px 0; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpi {
  color: white; min-height: 128px; padding: 19px 20px; display: flex; align-items: center;
  border-radius: 5px; box-shadow: var(--shadow);
}
.kpi.cyan { background: var(--cyan); } .kpi.green { background: var(--green); }
.kpi.orange { background: var(--orange); } .kpi.red { background: var(--red); }
.kpi.blue { background: var(--blue); }
.kpi-icon { font-size: 40px; width: 64px; opacity: .93; }
.kpi small { display: block; font-size: 14px; line-height: 1.45; min-height: 38px; color: rgba(255,255,255,.95); }
.kpi strong { display: block; font-size: 27px; margin-top: 4px; font-weight: 600; }

.card { background: white; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2, .card-head h3 { margin: 0; font-size: 16px; color: #4e5964; }
.card-body { padding: 18px; }
.mt { margin-top: 16px; }
.text-center { text-align: center; }
.muted { color: var(--muted); }

.filters {
  display: grid; grid-template-columns: repeat(6, minmax(120px,1fr)); gap: 12px;
  padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 16px;
}
.filters.cols-4 { grid-template-columns: repeat(4, minmax(140px,1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span-2 { grid-column: span 2; }
.field label { font-size: 12px; font-weight: 600; color: #697781; }
.input, .select, .textarea {
  width: 100%; border: 1px solid #d9dee3; background: white; border-radius: 3px; min-height: 35px;
  padding: 7px 10px; color: #56636e; outline: none;
}
.textarea { min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(26,179,148,.1); }
.filter-actions { display: flex; gap: 8px; align-items: end; }
.segmented { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.segmented button { background: white; color: #61707c; border: 1px solid #dce1e5; padding: 8px 12px; cursor: pointer; border-radius: 3px; }
.segmented button.active { background: var(--green); border-color: var(--green); color: white; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #f7f8f9; color: #55626c; text-align: left; font-weight: 600; padding: 11px 10px; border-bottom: 2px solid #e4e8eb; white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid #edf0f2; vertical-align: middle; }
tbody tr:hover { background: #fafbfc; }
.status { display: inline-block; padding: 4px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.status.open { color: #be7c15; background: #fff2dc; }
.status.paid { color: #128269; background: #dcf7ef; }
.status.late { color: #bf3a49; background: #fde3e7; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; }
.table-toolbar input { max-width: 260px; }
.pagination { padding: 14px 0 2px; display: flex; justify-content: space-between; color: #89939d; font-size: 12px; }

.progress-row { margin: 10px 0 22px; }
.progress-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 7px; }
.progress { height: 29px; background: #e7ebee; overflow: hidden; border-radius: 3px; }
.progress > div { height: 100%; }
.chart { height: 230px; position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 15px 12px 28px; border-left: 1px solid #dfe4e7; border-bottom: 1px solid #dfe4e7; }
.bar { flex: 1; min-width: 12px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#24a4e0,#1c84c6); position: relative; }
.bar.expense { background: linear-gradient(180deg,#f27a89,#ed5565); }
.bar span { position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #7e8992; }
.line-chart { height: 230px; position: relative; padding: 12px; }
.line-chart svg { width: 100%; height: 100%; overflow: visible; }

.summary-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 16px; }
.summary-item { background: white; padding: 16px; text-align: center; }
.summary-item small { display: block; color: #8a959e; margin-bottom: 7px; }
.summary-item strong { font-size: 21px; color: #53616c; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(25,40,55,.52); z-index: 99; display: grid; place-items: center; padding: 20px; }
.modal { width: min(820px, 96vw); max-height: 92vh; overflow-y: auto; background: white; border-radius: 5px; box-shadow: 0 20px 70px rgba(0,0,0,.25); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 24px; }
.close { border: 0; background: transparent; font-size: 24px; color: #8c969f; cursor: pointer; }
.modal-body { padding: 20px 30px 30px; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.empty { text-align: center; padding: 45px 15px; color: #9aa4ac; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 120; color: white; background: #263a4a; padding: 12px 17px; border-radius: 4px; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.tag-dot { display:inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; }

.collapsed .sidebar { width: 72px; overflow-x: hidden; }
.collapsed .main { margin-left: 72px; }
.collapsed .brand { padding: 22px 10px; align-items:center; }
.collapsed .brand strong, .collapsed .quick, .collapsed .nav-label, .collapsed .nav-arrow, .collapsed .submenu { display:none; }
.collapsed .nav-item, .collapsed .nav-group-title { justify-content:center; padding:10px; }

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .filters { grid-template-columns: repeat(3,1fr); }
  .top-meta span:nth-child(3), .top-meta a:nth-last-child(2) { display:none; }
}
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); width: 240px; }
  .main { margin-left: 0; }
  .mobile-open .sidebar { transform: translateX(0); }
  .topbar { padding: 0 14px; }
  .top-meta { gap: 12px; }
  .top-meta span, .top-meta a { display:none !important; }
  .top-meta a:last-child { display:block !important; }
  .content { padding: 18px 10px 40px; }
  .grid-4, .grid-3, .grid-2, .filters, .filters.cols-4, .form-grid { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: auto; }
  .page-head { flex-direction: column; }
  .actions { justify-content: flex-start; }
  .summary-strip { grid-template-columns: 1fr; }
  .form-person, .form-account, .form-budget, .record-form-card form { grid-template-columns: 1fr; }
  .span-all { grid-column: auto; }
}

/* Visual fidelity layer */
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  background: #f3f3f4;
  color: #676a6c;
}

.sidebar {
  background: #2f4050;
  box-shadow: 3px 0 18px rgba(20, 31, 42, .12);
}

.brand {
  min-height: 138px;
  padding: 31px 25px 22px;
  background: #243747 url("./assets/images/header-profile.png") center/cover no-repeat;
  gap: 8px;
}

.avatar {
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .2);
}

.avatar img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.brand strong {
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.quick {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 14px 24px;
  background: rgba(255,255,255,.025);
  color: #a7b1c2;
}

.quick span {
  color: #f8e71c;
  filter: drop-shadow(0 1px 3px rgba(248,231,28,.25));
}

.nav-section { padding: 0; }

.nav-item,
.nav-group-title {
  min-height: 46px;
  padding: 13px 20px 13px 21px;
  color: #a7b1c2;
  font-size: 13px;
  font-weight: 600;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-item:hover,
.nav-group-title:hover {
  color: #fff;
  background: #293846;
}

.nav-item.active {
  color: #fff;
  background: #293846;
  border-left-color: #19aa8d;
  box-shadow: inset 0 1px rgba(255,255,255,.015), inset 0 -1px rgba(0,0,0,.06);
}

.nav-icon {
  width: 19px;
  font-size: 13px;
}

.nav-item.active .nav-icon,
.nav-group-title.active .nav-icon { color: #fff; }

.nav-arrow { opacity: .9; }

.submenu {
  background: #293846;
  animation: menuReveal .2s ease both;
}

.submenu .nav-item {
  padding: 8px 10px 8px 51px;
  min-height: 34px;
  font-weight: 400;
  border-left-color: transparent;
}

.submenu .nav-item.active {
  color: #fff;
  background: rgba(0,0,0,.08);
}

.nav-footer-item {
  color: #fff;
  background: #1ab394;
  border-left-color: transparent;
}

.nav-footer-item:hover { background: #18a689; }

.main { background: #f3f3f4; }

.topbar {
  height: 61px;
  padding: 0 28px 0 20px;
  border-bottom: 1px solid #e7eaec;
  box-shadow: 0 1px 2px rgba(32, 47, 61, .025);
}

.hamburger {
  width: 38px;
  height: 34px;
  background: #1ab394;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hamburger:hover {
  background: #18a689;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26,179,148,.24);
}

.top-meta {
  color: #888;
  font-size: 12px;
}

.top-meta b { font-weight: 600; color: #777; }

.content {
  padding: 24px 16px 52px;
  max-width: none;
  margin: 0;
  animation: pageEnter .32s ease both;
}

.route-home .main,
.route-home .content { background: #fff; }

.page-head {
  margin-bottom: 20px;
  padding: 0 2px;
}

.page-head h1 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: -.25px;
  color: #676a6c;
}

.breadcrumb { color: #999; }
.breadcrumb strong { color: #676a6c; font-weight: 600; }

.btn {
  min-height: 31px;
  padding: 6px 12px;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(0,0,0,.045);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(28, 48, 65, .13);
}

.btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.12);
}

.btn-icon {
  width: 29px;
  min-height: 28px;
  padding: 4px 0;
}

.kpi {
  min-height: 111px;
  padding: 15px 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 7px 18px rgba(37, 56, 72, .09);
  transition: transform .22s ease, box-shadow .22s ease;
  animation: cardRise .38s ease both;
}

.kpi:nth-child(2) { animation-delay: .04s; }
.kpi:nth-child(3) { animation-delay: .08s; }
.kpi:nth-child(4) { animation-delay: .12s; }

.kpi::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -62px;
  bottom: -92px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 48%, rgba(0,0,0,.045));
}

.kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 25px rgba(37, 56, 72, .16);
}

.kpi.cyan { background-color: #23c6c8; }
.kpi.green { background-color: #1ab394; }
.kpi.orange { background-color: #f8ac59; }
.kpi.red { background-color: #ed5565; }
.kpi.blue { background-color: #1c84c6; }

.kpi-icon {
  width: 70px;
  font-size: 39px;
  line-height: 1;
  text-align: left;
  opacity: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
}

.kpi-copy {
  width: 100%;
  text-align: right;
}

.kpi small {
  min-height: 33px;
  font-size: 13px;
  font-weight: 400;
}

.kpi strong {
  margin-top: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,.06);
}

.card {
  border-color: #e7eaec;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(48, 65, 80, .055);
  transition: box-shadow .2s ease, transform .2s ease;
  animation: cardRise .35s ease both;
}

.card:hover { box-shadow: 0 8px 22px rgba(48, 65, 80, .085); }

.card-head {
  min-height: 49px;
  padding: 13px 18px;
  border-bottom-color: #e7eaec;
}

.card-head h2,
.card-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: #676a6c;
}

.card-body { padding: 18px; }

.filters {
  padding: 17px 18px;
  border-top: 3px solid #e7eaec;
  box-shadow: 0 4px 14px rgba(48,65,80,.055);
  animation: cardRise .32s ease both;
}

.field label {
  color: #676a6c;
  font-weight: 600;
}

.input,
.select,
.textarea {
  min-height: 34px;
  border-color: #e5e6e7;
  color: #676a6c;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.input:hover,
.select:hover,
.textarea:hover { border-color: #cfd6dc; }

.input:focus,
.select:focus,
.textarea:focus {
  border-color: #1ab394;
  box-shadow: 0 0 0 3px rgba(26,179,148,.1);
}

.segmented button {
  padding: 7px 12px;
  font-size: 12px;
  transition: all .16s ease;
}

.segmented button:hover { color: #1ab394; border-color: #1ab394; }
.segmented button.active { background: #1ab394; }

.table-toolbar {
  padding: 0 0 15px;
}

.table-toolbar::before {
  content: "\f0ce";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #1ab394;
  margin-right: -4px;
}

table { font-size: 12px; }

th {
  padding: 11px 10px;
  color: #4f5d67;
  background: #f7f8f9;
  border-bottom-color: #dfe3e6;
}

td { padding: 10px; }
tbody tr:nth-child(even) { background: #fafafa; }
tbody tr { transition: background-color .12s ease, box-shadow .12s ease; }
tbody tr:hover {
  background: #f1fbf8;
  box-shadow: inset 3px 0 #1ab394;
}

.status {
  padding: 4px 9px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.025);
}

.progress {
  height: 30px;
  box-shadow: inset 0 1px 3px rgba(25,40,55,.14);
}

.progress > div {
  position: relative;
  background-image: linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.14) 75%,transparent 75%,transparent) !important;
  background-size: 36px 36px !important;
  animation: progressStripe 1.8s linear infinite;
}

.chart {
  background: repeating-linear-gradient(to top, transparent 0 45px, #eef1f3 46px);
}

.bar {
  box-shadow: 0 3px 8px rgba(28,132,198,.2);
  transition: filter .18s ease, transform .18s ease;
}

.bar:hover { filter: brightness(1.08); transform: scaleX(1.04); }

.line-chart svg {
  filter: drop-shadow(0 7px 5px rgba(28,159,224,.12));
}

.summary-strip {
  box-shadow: 0 4px 14px rgba(48,65,80,.055);
}

.summary-item strong { font-weight: 600; }

.modal-backdrop {
  backdrop-filter: blur(3px);
  animation: fadeIn .18s ease both;
}

.modal {
  box-shadow: 0 26px 80px rgba(15,30,45,.32);
  animation: modalPop .25s ease both;
}

.modal-head { background: #fafbfc; }
.modal-head h2 { font-weight: 300; color: #5c666f; }

.modal.modal-wide { width: min(2050px, 94vw); }
.modal-body { background: #fff; }
.modal-actions,
.record-form-actions { display:flex; align-items:center; gap:10px; margin-top:20px; }
.span-all { grid-column:1 / -1; }
.form-person { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-account { grid-template-columns:repeat(12,minmax(0,1fr)); }
.account-span-2 { grid-column:span 2; }
.account-span-3 { grid-column:span 3; }
.account-span-4 { grid-column:span 4; }
.account-span-6 { grid-column:span 6; }
.account-span-12 { grid-column:1 / -1; }
.label-inline { display:flex; justify-content:space-between; gap:10px; }
.label-inline a { color:#1c84c6; font-weight:400; text-decoration:none; }
.form-budget { grid-template-columns:repeat(4,minmax(0,1fr)); }
.form-section-title {
  grid-column:1 / -1;
  margin:8px 0 2px;
  padding-bottom:8px;
  border-bottom:1px solid #dfe3e8;
  color:#313b47;
  font-size:15px;
  font-weight:600;
}
.record-form-card {
  padding:20px;
  border-top:3px solid #40566d;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.13);
}
.record-form-card form {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 18px;
}
.record-form-card .record-form-actions { grid-column:1 / -1; }
.checkbox-field {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding-top:20px;
}
.checkbox-field input { width:auto; }
.file-input { padding:6px; background:#fff; }

.toast {
  border-left: 4px solid #1ab394;
  box-shadow: 0 12px 30px rgba(22,37,51,.28);
  animation: toastIn .25s ease both;
}

/* Analytical screens */
.dashboard-filters {
  grid-template-columns: 1.2fr 1fr 1.2fr .55fr .55fr;
  margin-bottom: 12px;
}

.analytics-title {
  margin: 24px 0 12px;
  text-align: center;
  color: #2f353b;
  font-size: 25px;
  font-weight: 400;
}

.analytics-title:first-of-type { margin-top: 18px; }
.economic-title { margin-top: 30px; }

.chart-card .card-head.centered,
.card-head.centered {
  position: relative;
  justify-content: center;
}

.chart-card .card-head.centered > i {
  position: absolute;
  right: 17px;
}

.chart-card { box-shadow: 0 2px 9px rgba(38,54,69,.06); }
.chart-card .card-body { padding: 10px 18px 15px; }

.grouped-chart {
  position: relative;
  min-height: 310px;
  padding: 20px 20px 36px 42px;
}

.chart-y-label {
  position: absolute;
  left: -20px;
  top: 48%;
  color: #46535d;
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-90deg);
}

.grouped-plot {
  height: 250px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 16px;
  padding: 16px 10px 0;
  border-bottom: 1px solid #d9dee2;
  background: repeating-linear-gradient(to top, transparent 0 47px, #e9edef 48px);
}

.bar-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  position: relative;
}

.paired-bars {
  height: calc(100% - 21px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.vbar {
  width: 38%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
  transition: filter .18s ease, transform .18s ease;
}

.vbar:hover { filter: brightness(1.08); transform: scaleX(1.06); }
.vbar.income, .legend-dot.income { background: #1ab394; }
.vbar.outcome, .legend-dot.outcome { background: #ed5565; }

.bar-group > span {
  height: 21px;
  padding-top: 6px;
  color: #676a6c;
  font-size: 11px;
  text-align: center;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 11px;
}

.legend-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  vertical-align: -1px;
}

.analytics-columns { align-items: start; }
.analytics-panel { padding-bottom: 14px; }

.analytics-panel-head {
  padding: 18px 20px 8px;
  text-align: center;
}

.analytics-panel-head h2 {
  margin: 0 0 8px;
  color: #222;
  font-size: 17px;
}

.analytics-panel-head p {
  margin: 0;
  color: #858c92;
  font-size: 11px;
  line-height: 1.5;
}

.metric-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px 20px;
}

.metric-tile-grid.five { grid-template-columns: repeat(5, 1fr); }

.metric-tile {
  min-height: 88px;
  padding: 14px 16px;
  border-radius: 4px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 13px rgba(35,50,65,.09);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.metric-tile::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -42px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}

.metric-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(35,50,65,.14);
}

.metric-tile span { font-size: 12px; }
.metric-tile span i { opacity: .58; }
.metric-tile strong { align-self: flex-end; font-size: 27px; font-weight: 500; }
.metric-tile.emerald { background: #1ab394; }
.metric-tile.coral { background: #ed5565; }
.metric-tile.amber { background: #f8ac59; }
.metric-tile.cyan { background: #23c6c8; }
.metric-tile.blue { background: #2488c5; }
.metric-tile.azure { background: #1495e5; }
.metric-tile.purple { background: #5f4b7d; }
.metric-tile.brick { background: #c34f4f; }
.metric-tile.bronze { background: #a8732b; }
.metric-tile.forest { background: #318470; }

.bank-balance-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  padding: 0;
  background: #e7eaec;
}

.bank-balance {
  min-height: 88px;
  padding: 15px;
  background: #fff;
  text-align: center;
}

.bank-balance span { display: block; color: #8a949b; font-size: 11px; }
.bank-balance strong { display: block; margin-top: 9px; color: #1ab394; font-size: 19px; }
.bank-balance.negative strong { color: #ed5565; }
.compact { max-width: 220px; min-height: 30px; }

.economic-kpis { margin: 0 auto; max-width: 1240px; }
.economic-kpis .metric-tile { min-height: 102px; }

.switch-field { justify-content: flex-start; }
.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  cursor: pointer;
}

.switch input { display: none; }
.switch span {
  width: 40px;
  height: 20px;
  border: 2px solid #1ab394;
  position: relative;
  background: #fff;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #1ab394;
  transition: left .16s ease;
}

.switch input:checked + span::after { left: 22px; }
.switch b { color: #1ab394; font-size: 11px; }

.cash-filters {
  grid-template-columns: 1fr 1fr 1fr .65fr .55fr;
}

.cash-columns { align-items: start; }

.cash-ledger {
  padding: 18px 20px 0;
  overflow: hidden;
}

.cash-ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.cash-ledger-head h2 {
  margin: 0;
  color: #777;
  font-size: 24px;
  font-weight: 500;
}

.cash-ledger-head > div { text-align: right; }
.cash-ledger-head small { display: block; color: #999; }
.cash-ledger-head strong { display: block; color: #777; font-size: 22px; font-weight: 400; margin-top: 4px; }

.cash-table {
  max-height: 860px;
  overflow-y: auto;
  margin: 5px -20px 0;
}

.cash-table td.positive { color: #5ab78f; }
.cash-table td.negative { color: #dc7581; }
.cash-table th:first-child, .cash-table td:first-child { padding-left: 20px; }
.cash-table th:last-child, .cash-table td:last-child { padding-right: 20px; text-align: right; }

.chart-subtitle {
  margin: 20px 0 0;
  color: #888;
  font-size: 14px;
  font-weight: 500;
}

.dre-detail { min-width: 1700px; }
.dre-detail td:not(:first-child), .dre-detail th:not(:first-child) { text-align: right; }
.dre-detail .total { background: #eaf7f4; font-weight: 700; }
.dre-detail .subtotal { background: #f5f6f7; font-weight: 600; }
.dre-detail .child td:first-child { padding-left: 28px; color: #7b858c; }
.dre-detail .result { background: #1ab394; color: #fff; font-weight: 700; }

.budget-filters {
  grid-template-columns: 2fr 1fr .8fr;
}

.gauge-grid {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 42px 100px;
  padding: 18px 80px 70px;
}

.gauge-card {
  width: 300px;
  text-align: center;
  color: #676a6c;
}

.gauge-card h3 { margin: 0; font-size: 14px; font-weight: 500; }
.gauge-card small { display: block; color: #aaa; margin: 3px 0 12px; }
.gauge-card > span { display: block; margin-top: 2px; }

.gauge {
  --p: calc(var(--percent) * 1%);
  width: 180px;
  height: 90px;
  margin: 0 auto;
  border-radius: 180px 180px 0 0;
  overflow: hidden;
  position: relative;
  background: conic-gradient(from 270deg at 50% 100%, var(--gauge-color) 0 var(--p), #f3f3f4 var(--p) 50%, transparent 50%);
}

.gauge-mask {
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 132px;
  height: 66px;
  border-radius: 132px 132px 0 0;
  background: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 9px;
}

.gauge-mask strong {
  color: var(--gauge-color);
  font-size: 20px;
  font-weight: 400;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes menuReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes progressStripe {
  from { background-position: 0 0; }
  to { background-position: 36px 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(13px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  .brand { align-items: flex-start; padding-left: 25px; }
  .kpi { min-height: 104px; }
  .kpi-copy { text-align: right; }
  .dashboard-filters, .cash-filters, .budget-filters { grid-template-columns: 1fr; }
  .metric-tile-grid, .metric-tile-grid.five { grid-template-columns: 1fr; }
  .bank-balance-grid { grid-template-columns: 1fr 1fr; }
  .grouped-chart { overflow-x: auto; }
  .grouped-plot { min-width: 760px; }
  .gauge-grid { grid-template-columns: 1fr; padding: 18px 0 50px; justify-items: center; }
}

/* Home fiel ao painel original */
.home-upper{margin-top:35px;gap:27px}
.route-home .kpi::before,.route-home .kpi::after{display:none}.route-home .kpi{background-image:none;box-shadow:none}
.home-box{position:relative;min-width:0;height:302px;padding:18px 25px;background:#fff;border:1px solid #e1e5e8;border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.015)}
.home-box h2{margin:0 0 18px;text-align:center;color:#343b40;font-size:16px;font-weight:700}
.home-situation .progress-row{margin:0 0 14px}.home-situation .progress-label{justify-content:flex-start;gap:5px;margin-bottom:6px;color:#525b62;font-size:11px}
.home-situation .progress-label i{color:#30363a;font-size:10px}.home-situation .progress{height:29px;border-radius:3px}
.home-situation .progress-row.receipt .progress{background:#61c49e}.home-situation .progress-row.receipt .progress>div{background:#00aa60!important;background-image:none!important}
.home-situation .progress-row.payment .progress{background:#df8a83}.home-situation .progress-row.payment .progress>div{background:#df4b38!important;background-image:none!important}
.home-net{display:flex;flex-direction:column;align-items:center;margin-top:31px;color:#32383d}.home-net strong{font-size:12px;font-weight:700}.home-net span{margin-top:8px;font-size:25px;font-weight:300}
.horizon-buttons{position:absolute;right:0;top:-25px;display:flex}.horizon-buttons button{height:24px;padding:0 9px;border:1px solid #e1e4e6;border-right:0;background:#fff;color:#606970;font-size:10px;cursor:pointer}.horizon-buttons button:last-child{border-right:1px solid #e1e4e6}.horizon-buttons button.active{background:#f5f6f7;color:#27323a}
.home-projection{padding:17px 22px 7px}.home-projection h2{margin-bottom:3px}.chart-tools{height:18px;display:flex;justify-content:flex-end;gap:7px;color:#6c8593;font-size:13px}
.projection-chart{height:242px}.projection-chart svg{display:block;width:100%;height:211px;overflow:visible;filter:drop-shadow(0 6px 5px rgba(28,159,224,.08))}
.projection-chart text{fill:#68727a;font-size:9px}.projection-chart .value-label{fill:#242a2e;font-size:8px;font-weight:700}.projection-chart .axis-label{fill:#30363a;font-size:10px;font-weight:700}
.home-chart-legend{text-align:center;color:#636d74;font-size:10px}.home-chart-legend span{margin-left:8px;font-size:15px}.home-chart-legend .saldo{color:#1d9fe6}.home-chart-legend .receber{color:#d7efeb}.home-chart-legend .pagar{color:#f5dce0}
.home-debts{margin-top:48px;gap:27px}.debt-panel{height:308px;background:#fff;border:1px solid #e7e9eb;border-top:3px solid #09a966;overflow:hidden}.debt-panel.vendor{border-top-color:#df4b38}
.debt-tabs{height:40px;display:grid;grid-template-columns:180px 165px 110px;background:#f1f1f2}.debt-tabs button{border:0;background:transparent;color:#aeb8c6;font-size:12px;font-weight:600;cursor:pointer}.debt-tabs button.active{background:#fff;color:#4f585f}
.debt-body{padding:14px 18px 0}.debt-body p{margin:0 0 13px;color:#4e575d;font-size:12px}.debt-scroll{height:218px;overflow-y:auto;padding-right:1px}
.debt-panel table{font-size:11px}.debt-panel th{padding:9px 8px;background:#fff;border:0;color:#30373c}.debt-panel th:last-child,.debt-panel td:last-child{width:190px}.debt-panel td{padding:8px;border:0}.debt-panel tbody tr:nth-child(odd){background:#ededed}.debt-panel tbody tr:hover{background:#e6e6e6}.debt-panel .empty{height:90px;background:#fff;text-align:center;color:#9aa3aa}
@media(max-width:1000px){.home-upper,.home-debts{grid-template-columns:1fr}.home-box{height:auto;min-height:302px}.home-debts{margin-top:24px}.debt-panel{height:308px}}
@media(max-width:760px){.home-upper{margin-top:24px}.home-box{padding:16px}.horizon-buttons{top:-25px}.debt-tabs{grid-template-columns:1.5fr 1fr .75fr}.debt-tabs button{font-size:10px}.home-projection{overflow:hidden}}

/* Autenticação e primeira configuração */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:
radial-gradient(circle at 15% 20%,rgba(26,179,148,.22),transparent 34%),
radial-gradient(circle at 85% 80%,rgba(52,152,219,.18),transparent 38%),
linear-gradient(135deg,#172a3a,#263f52 55%,#1f3547)}
.auth-card{width:min(100%,460px);padding:40px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 28px 70px rgba(4,17,29,.38);animation:auth-in .35s ease-out}
.auth-logo{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 18px;border-radius:17px;background:linear-gradient(135deg,#1ab394,#0e8d75);box-shadow:0 12px 24px rgba(26,179,148,.3);color:#fff;font-size:26px}
.auth-card h1{margin:0;text-align:center;color:#243747;font-size:25px}.auth-card>p{margin:9px 0 26px;text-align:center;color:#71808d}
.auth-form{display:grid;gap:14px}.auth-form .field{margin:0}.auth-submit{width:100%;min-height:46px;margin-top:8px;border:0;background:linear-gradient(135deg,#1ab394,#15977e);box-shadow:0 8px 18px rgba(26,179,148,.23);font-weight:700}
.auth-submit:disabled{opacity:.65;cursor:wait}.auth-error{padding:11px 13px;margin-bottom:15px;border:1px solid #f3c2c6;border-radius:8px;background:#fff1f2;color:#b93542;font-size:13px}
@keyframes auth-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}