:root {
  --bg: #eef0f2;
  --surface: #ffffff;
  --surface-soft: #f6f6f6;
  --text: #2d2d2f;
  --muted: #6e6e73;
  --line: #cfcfcf;

  --header-top: #68777d;
  --header-bottom: #56646b;
  --header-line: #b9c0c4;

  --green-1: #0f4f2f;
  --green-2: #2f8a4a;
  --green-3: #9ac85f;
  --green-4: #0b3f2d;

  --maroon: #843232;
  --maroon-dark: #692828;
  --blue-text: #123b67;
  --positive: #247a35;
  --negative: #c51616;

  --shadow: 0 4px 14px rgba(0, 0, 0, 0.11);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.08);

  --content-max: 760px;
  --bottom-nav-height: 88px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.top-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, var(--header-top), var(--header-bottom));
  color: #ffffff;
  border-bottom: 1px solid var(--header-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.top-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  min-height: 70px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
}

.header-spacer {
  width: 40px;
  height: 40px;
}

.header-copy {
  text-align: center;
  min-width: 0;
}

.header-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.035em;
}

.header-subtitle {
  margin: 5px 0 0;
  font-size: 0.76rem;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.header-icon-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px calc(var(--bottom-nav-height) + 26px);
  background: var(--bg);
}

.page-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.balance-card {
  width: min(100%, 292px);
  margin: 0 auto 14px;
  padding: 13px 14px 12px;
  text-align: center;
  color: #ffffff;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.30), transparent 25%),
    radial-gradient(circle at 85% 10%, rgba(155, 230, 130, 0.42), transparent 28%),
    linear-gradient(135deg, var(--green-1), var(--green-2), var(--green-3), var(--green-4));
  background-size: 180% 180%;
  animation: gradientDrift 12s ease-in-out infinite alternate;
  box-shadow: 0 8px 24px rgba(15, 79, 47, 0.26);
}

.balance-card-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.balance-card-value {
  margin: 3px 0;
  font-size: 1.48rem;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.balance-card-date {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.section-card,
.table-card,
.feed-card,
.empty-card {
  background: var(--surface);
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.section-card,
.table-card,
.empty-card {
  padding: 10px;
  margin-bottom: 12px;
}

.section-switcher {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
}

.switcher-label {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: #555555;
  line-height: 1.1;
  letter-spacing: 0.015em;
}

.switcher-label.small {
  font-size: 1.22rem;
}

.round-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #bfc4c7;
  background: #ffffff;
  color: #5d6266;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.round-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metric-box {
  min-width: 0;
  min-height: 74px;
  background: #fdfdfd;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.metric-label {
  font-size: 0.74rem;
  color: #4e4e4e;
  line-height: 1.15;
  margin-bottom: 5px;
}

.metric-value {
  font-size: clamp(1.02rem, 5.3vw, 1.42rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.positive {
  color: var(--positive);
}

.negative {
  color: var(--negative);
}

.neutral {
  color: var(--positive);
}

/* HOME STICKY CAROUSEL */

.sticky-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 12px;
  margin-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sticky-carousel::-webkit-scrollbar {
  display: none;
}

.sticky-card {
  flex: 0 0 220px;
  min-height: 92px;
  border-radius: 18px;
  color: #ffffff;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: 360% 360%;
  animation: stickyGradientDrift 7s ease-in-out infinite alternate;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.13);
  overflow: hidden;
  position: relative;
}

.sticky-card::before {
  content: "";
  position: absolute;
  inset: -45%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.34), transparent 28%),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.16), transparent 34%);
  transform: translate3d(0, 0, 0);
  animation: stickyGlowMove 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.sticky-card::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.16) 42%,
    transparent 62%
  );
  transform: translateX(-35%) rotate(8deg);
  animation: stickySheen 9s ease-in-out infinite;
  pointer-events: none;
}

.sticky-title {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.86;
}

.sticky-body {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.gradient-a {
  background-image: linear-gradient(135deg, #8da2ff, #bba7f0, #f1a6cc, #f4c29b);
}

.gradient-b {
  background-image: linear-gradient(135deg, #8ccfc4, #9ddbd4, #a9d7f2, #8aaee8);
}

.gradient-c {
  background-image: linear-gradient(135deg, #b18acb, #c8a5e8, #edacd3, #f1bd8d);
}

.gradient-d {
  background-image: linear-gradient(135deg, #8bbd9b, #9ed9a8, #cfe7a0, #8ac8bd);
}

.gradient-e {
  background-image: linear-gradient(135deg, #8794a4, #9aa8b9, #b5c3d4, #99cfe4);
}

/* HOME FEED */

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

.feed-card {
  overflow: hidden;
}

.feed-head {
  background: var(--maroon);
  color: #ffffff;
  padding: 8px 12px;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.15;
}

.feed-date {
  padding: 4px 12px;
  background: #dedede;
  color: #4f4f4f;
  font-size: 0.82rem;
  font-weight: 800;
}

.feed-body {
  padding: 11px 12px 14px;
  background: #ffffff;
  color: #333333;
  line-height: 1.45;
  font-size: 0.93rem;
  font-weight: 600;
}

/* ACTIVITY */

.activity-toggle {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 4px 0 10px;
}

.activity-toggle-btn {
  border: none;
  background: transparent;
  color: #666666;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 6px 2px;
}

.activity-toggle-btn.active {
  color: #3f3f3f;
}

.activity-list {
  padding: 8px 6px;
}

.activity-row {
  display: grid;
  grid-template-columns: 58px 1fr 88px;
  gap: 10px;
  padding: 8px 4px;
  align-items: start;
  font-size: 0.90rem;
  border-bottom: 1px solid #ececec;
}

.activity-row.forecast-row {
  color: var(--blue-text);
}

.activity-row:last-child {
  border-bottom: none;
}

.activity-date {
  white-space: nowrap;
  color: inherit;
}

.activity-desc {
  line-height: 1.2;
  color: inherit;
}

.activity-desc-sub {
  display: block;
  margin-top: 2px;
  color: inherit;
  opacity: 0.82;
}

.activity-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* TABLES */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.grid-table {
  min-width: 100%;
}

.grid-row {
  display: grid;
  gap: 8px;
  align-items: start;
  padding: 6px 4px;
  font-size: 0.86rem;
  line-height: 1.15;
}

.grid-row + .grid-row {
  border-top: 1px solid #ebebeb;
}

.grid-row.head {
  font-weight: 850;
  color: #333333;
  border-top: none;
  padding-top: 2px;
}

.grid-row.budget {
  grid-template-columns: minmax(94px, 1.3fr) minmax(72px, 1fr) minmax(92px, 1.05fr) minmax(74px, 1fr);
}

/* Compact 5-column tables for Debt and Savings */
.grid-row.five-col {
  grid-template-columns:
    minmax(54px, 0.82fr)
    minmax(58px, 0.92fr)
    minmax(58px, 0.92fr)
    minmax(54px, 0.84fr)
    minmax(56px, 0.86fr);
  gap: 4px;
  font-size: 0.76rem;
  padding-left: 2px;
  padding-right: 2px;
}

.grid-row.five-col.head {
  font-size: 0.71rem;
  letter-spacing: -0.01em;
}

.grid-row.five-col .cell-num,
.grid-row.five-col .cell-center {
  white-space: nowrap;
}

.cell-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cell-center {
  text-align: center;
}

.grid-row.head .cell-num,
.grid-row.head .cell-center {
  text-align: center;
}

.category-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--maroon-dark);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.total-row {
  font-weight: 850;
  background: #fafafa;
}

.completed-row {
  background: rgba(53, 133, 65, 0.13);
}

/* BUDGET CHILD */

.child-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.child-summary-box {
  background: #fafafa;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}

.child-summary-label {
  font-size: 0.76rem;
  color: #555555;
  margin-bottom: 4px;
}

.child-summary-value {
  font-size: 1rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sub-list-row {
  display: grid;
  grid-template-columns: 58px 1fr 92px 48px;
  gap: 10px;
  padding: 7px 2px;
  align-items: start;
  border-bottom: 1px solid #ececec;
  font-size: 0.90rem;
}

.sub-list-row:last-child {
  border-bottom: none;
}

.sub-list-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sub-list-type {
  text-align: right;
  color: #666666;
  font-weight: 800;
}

/* PAGINATION */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 4px;
}

.page-btn {
  min-width: 34px;
  height: 32px;
  border: 1px solid #c7c7c7;
  background: #ffffff;
  color: #444444;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 9px;
}

.page-btn.active {
  color: #ffffff;
  background: #4d5960;
  border-color: #4d5960;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* PLACEHOLDER */

.empty-card {
  text-align: center;
  padding: 26px 18px;
}

.empty-card h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.empty-card p {
  margin: 0;
  color: #666666;
  line-height: 1.45;
}

/* BOTTOM NAV */

.bottom-nav-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(244, 244, 244, 0.96);
  border-top: 1px solid #bcbcbc;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bottom-nav {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 28px calc(10px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.bottom-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  min-width: 74px;
  text-decoration: none;
  color: #5c5c5c;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 4px;
  border-radius: 12px;
  flex: 0 0 auto;
}

.nav-item.active {
  background: #e8e8e8;
  color: #2e2e2e;
}

.nav-icon {
  width: 30px;
  height: 30px;
  display: block;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label {
  font-size: 0.80rem;
  font-weight: 850;
  line-height: 1;
}

.nav-swipe-hint {
  position: absolute;
  top: 8px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: 24px;
  display: grid;
  place-items: center;
  color: #777777;
  font-size: 1.35rem;
  pointer-events: none;
}

.nav-swipe-hint-left {
  left: 0;
  background: linear-gradient(90deg, rgba(244, 244, 244, 0.98), rgba(244, 244, 244, 0));
}

.nav-swipe-hint-right {
  right: 0;
  background: linear-gradient(270deg, rgba(244, 244, 244, 0.98), rgba(244, 244, 244, 0));
}

/* ANIMATIONS */

@keyframes gradientDrift {
  0% {
    background-position: 0% 45%;
  }

  100% {
    background-position: 100% 55%;
  }
}

@keyframes stickyGradientDrift {
  0% {
    background-position: 0% 42%;
  }

  50% {
    background-position: 80% 58%;
  }

  100% {
    background-position: 100% 40%;
  }
}

@keyframes stickyGlowMove {
  0% {
    transform: translate(-8%, -6%) scale(1);
  }

  100% {
    transform: translate(10%, 8%) scale(1.08);
  }
}

@keyframes stickySheen {
  0% {
    transform: translateX(-65%) rotate(8deg);
    opacity: 0;
  }

  35% {
    opacity: 0.65;
  }

  70% {
    transform: translateX(65%) rotate(8deg);
    opacity: 0;
  }

  100% {
    transform: translateX(65%) rotate(8deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balance-card,
  .sticky-card,
  .sticky-card::before,
  .sticky-card::after {
    animation: none;
  }
}

/* SMALL SCREENS */

@media (max-width: 420px) {
  .top-header-inner {
    min-height: 66px;
  }

  .header-title {
    font-size: 1.32rem;
  }

  .header-subtitle {
    font-size: 0.70rem;
  }

  .metric-grid {
    gap: 8px;
  }

  .metric-box {
    min-height: 70px;
    padding: 9px 6px;
  }

  .metric-label {
    font-size: 0.68rem;
  }

  .metric-value {
    font-size: clamp(0.94rem, 4.9vw, 1.20rem);
  }

  .sticky-card {
    flex-basis: 205px;
    min-height: 86px;
  }

  .activity-row {
    grid-template-columns: 52px 1fr 82px;
    gap: 8px;
    font-size: 0.84rem;
  }

  .grid-row {
    font-size: 0.78rem;
    gap: 6px;
  }

  .grid-row.five-col {
    grid-template-columns:
      minmax(48px, 0.78fr)
      minmax(54px, 0.9fr)
      minmax(54px, 0.9fr)
      minmax(50px, 0.82fr)
      minmax(52px, 0.84fr);
    gap: 3px;
    font-size: 0.70rem;
    padding-left: 1px;
    padding-right: 1px;
  }

  .grid-row.five-col.head {
    font-size: 0.66rem;
  }

  .sub-list-row {
    grid-template-columns: 52px 1fr 84px 42px;
    gap: 8px;
    font-size: 0.84rem;
  }

  .child-summary {
    grid-template-columns: 1fr;
  }
}