@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --paper: #f4f1ea;
  --surface: #fffdf8;
  --ink: #242722;
  --muted: #6f7169;
  --line: #deddd5;
  --green: #315f4a;
  --green-soft: #dce9df;
  --coral: #dc694d;
  --coral-soft: #f8ded6;
  --yellow: #e4b846;
  --yellow-soft: #f6ebc7;
  --blue: #4e7184;
  --blue-soft: #dfeaf0;
  --red: #a94438;
  --red-soft: #f4dcd8;
  --shadow: 0 16px 40px rgba(47, 50, 43, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; letter-spacing: 0; overflow-x: hidden; }
button, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 24px; background: #25392f; color: white; display: flex; flex-direction: column; z-index: 20; }
.brand { color: white; text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 0 8px 27px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); font: 800 12px Manrope, sans-serif; }
.brand strong, .brand small { display: block; }
.brand strong { font: 700 15px Manrope, sans-serif; }
.brand small { color: rgba(255,255,255,.62); font-size: 11px; margin-top: 2px; }
.primary-nav { display: grid; gap: 5px; margin-top: 24px; }
.nav-item { border: 0; background: transparent; color: rgba(255,255,255,.68); height: 44px; padding: 0 12px; display: flex; gap: 11px; align-items: center; border-radius: 6px; cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; }
.nav-item:hover { background: rgba(255,255,255,.06); color: white; }
.nav-item.active { background: #fff; color: var(--green); }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; }
.nav-count { margin-left: auto; min-width: 23px; padding: 2px 6px; border-radius: 10px; text-align: center; background: rgba(255,255,255,.13); font-size: 10px; }
.nav-item.active .nav-count { background: var(--green-soft); }
.sidebar-note { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding: 22px 8px 0; }
.note-label, .eyebrow { color: var(--coral); font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: 1.2px; }
.sidebar-note p { margin: 8px 0 0; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.55; }
.main-wrap { min-width: 0; }
.topbar { height: 76px; padding: 0 clamp(24px, 4vw, 56px); display: flex; align-items: center; justify-content: flex-end; gap: 14px; border-bottom: 1px solid var(--line); background: rgba(244,241,234,.94); position: sticky; top: 0; z-index: 15; backdrop-filter: blur(12px); }
.search-box { width: min(380px, 45vw); height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; color: var(--muted); }
.search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(49,95,74,.1); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.search-box kbd { font-size: 10px; border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; background: #f4f2ec; }
.avatar-button { border: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--coral); color: white; cursor: pointer; font-size: 11px; font-weight: 800; }
.icon-button, .menu-button, .mobile-brand { display: none; }
main { padding: 34px clamp(24px, 4vw, 56px) 72px; max-width: 1500px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.page-head h1 { margin: 5px 0 0; font: 800 clamp(28px, 4vw, 45px)/1.08 Manrope, sans-serif; max-width: 720px; }
.page-head p { margin: 0; color: var(--muted); max-width: 440px; font-size: 14px; line-height: 1.6; }
.hero { min-height: 330px; border-radius: 8px; overflow: hidden; position: relative; background: #19251f url('assets/family-meal.png') center/cover no-repeat; color: white; display: flex; align-items: end; box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,28,23,.96) 0%, rgba(17,28,23,.76) 34%, rgba(17,28,23,.1) 72%); }
.hero-content { position: relative; z-index: 1; width: min(570px, 62%); padding: clamp(28px, 5vw, 56px); }
.hero h1 { font: 800 clamp(32px, 5vw, 58px)/1.02 Manrope, sans-serif; margin: 10px 0 14px; }
.hero p { color: rgba(255,255,255,.74); line-height: 1.65; margin: 0 0 22px; max-width: 500px; }
.primary-button, .secondary-button { min-height: 42px; border-radius: 5px; padding: 0 16px; font-weight: 700; font-size: 12px; cursor: pointer; border: 1px solid transparent; }
.primary-button { background: var(--coral); color: white; }
.primary-button:hover { background: #c85d44; }
.secondary-button { background: transparent; border-color: var(--line); }
.secondary-button:hover { background: #ebe7df; }
.hero .secondary-button { color: white; border-color: rgba(255,255,255,.38); margin-left: 8px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); margin: 24px 0 38px; }
.summary-stat { min-width: 0; padding: 20px 22px; border-right: 1px solid var(--line); }
.summary-stat:last-child { border-right: 0; }
.summary-stat strong { font: 800 26px Manrope, sans-serif; display: block; }
.summary-stat span { color: var(--muted); font-size: 11px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 14px; }
.section-heading h2 { font: 800 20px Manrope, sans-serif; margin: 0; }
.section-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.today-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 22px; }
.focus-list { display: grid; gap: 2px; }
.focus-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.focus-row:last-child { border-bottom: 0; }
.focus-index { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; }
.focus-row strong { font-size: 13px; display: block; }
.focus-row small { color: var(--muted); font-size: 11px; }
.mini-check { width: 20px; height: 20px; accent-color: var(--green); }
.track-panel { background: var(--green); color: white; border: 0; position: relative; overflow: hidden; }
.track-panel::after { content: "B"; position: absolute; right: -12px; bottom: -48px; font: 800 170px Manrope, sans-serif; color: rgba(255,255,255,.05); }
.track-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.1); padding: 4px; border-radius: 6px; position: relative; z-index: 1; }
.track-tab { flex: 1; height: 35px; border: 0; border-radius: 4px; background: transparent; color: rgba(255,255,255,.65); cursor: pointer; font-size: 11px; font-weight: 700; }
.track-tab.active { background: white; color: var(--green); }
.track-copy { min-height: 154px; padding: 25px 3px 4px; position: relative; z-index: 1; }
.track-copy h3 { margin: 0 0 8px; font: 700 19px Manrope, sans-serif; }
.track-copy p { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.6; }
.track-copy ul { margin: 12px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; font-size: 11px; }
.track-copy li::before { content: "✓"; color: #f3c85e; margin-right: 7px; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.category-card { min-height: 156px; border: 1px solid var(--line); background: var(--surface); padding: 20px; border-radius: 7px; cursor: pointer; text-align: left; transition: transform .18s, box-shadow .18s; }
.category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.category-card .card-number { font: 800 10px Manrope, sans-serif; color: var(--coral); }
.category-card h3 { margin: 22px 0 7px; font: 700 15px Manrope, sans-serif; }
.category-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.category-card .arrow { float: right; font-size: 19px; color: var(--green); }
.filter-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-chip { border: 1px solid var(--line); background: var(--surface); padding: 8px 12px; border-radius: 18px; font-size: 11px; font-weight: 700; cursor: pointer; }
.filter-chip.active { background: var(--ink); color: white; border-color: var(--ink); }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guide-card { border: 1px solid var(--line); background: var(--surface); padding: 20px; border-radius: 7px; min-height: 205px; display: flex; flex-direction: column; }
.guide-card:hover { border-color: #b8b9b0; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.priority { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; }
.priority::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.continue { background: var(--green-soft); color: var(--green); }
.improve { background: var(--blue-soft); color: var(--blue); }
.gradual { background: var(--yellow-soft); color: #8a6712; }
.avoid { background: var(--red-soft); color: var(--red); }
.guide-card h3 { margin: 21px 0 8px; font: 700 17px Manrope, sans-serif; }
.guide-card p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0 0 20px; }
.text-button { margin-top: auto; align-self: start; border: 0; background: transparent; padding: 0; color: var(--green); font-size: 11px; font-weight: 800; cursor: pointer; }
.text-button:hover { text-decoration: underline; }
.progress-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; }
.progress-table { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; overflow: hidden; }
.progress-row { display: grid; grid-template-columns: 42px 1fr 1fr 120px; gap: 10px; align-items: center; min-height: 70px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.progress-row:last-child { border-bottom: 0; }
.progress-row.header { min-height: 43px; background: #eae7df; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.progress-row strong { font-size: 12px; }
.progress-row span { font-size: 11px; color: var(--muted); }
.progress-check { width: 20px; height: 20px; accent-color: var(--green); cursor: pointer; }
.progress-side { align-self: start; position: sticky; top: 98px; }
.ring { width: 148px; height: 148px; margin: 10px auto 22px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--green) var(--angle), #e8e6de 0); }
.ring::before { content: ""; position: absolute; width: 112px; height: 112px; background: var(--surface); border-radius: 50%; }
.ring-copy { z-index: 1; text-align: center; }
.ring-copy strong { display: block; font: 800 28px Manrope, sans-serif; }
.ring-copy small { color: var(--muted); font-size: 10px; }
.legend { display: grid; gap: 9px; margin-top: 18px; }
.legend-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.legend-row span:last-child { color: var(--muted); }
.empty-state { grid-column: 1 / -1; padding: 55px 20px; text-align: center; border: 1px dashed #c7c5bc; border-radius: 7px; color: var(--muted); }
.mobile-nav { display: none; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(21,25,22,.45); z-index: 40; }
.detail-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(480px, 100%); z-index: 45; background: var(--surface); box-shadow: -20px 0 60px rgba(24,27,24,.2); padding: 60px 38px 38px; transform: translateX(102%); transition: transform .25s ease; overflow-y: auto; }
.detail-drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; right: 22px; top: 18px; border: 0; background: transparent; font-size: 30px; cursor: pointer; }
.drawer-kicker { color: var(--coral); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.detail-drawer h2 { font: 800 32px/1.12 Manrope, sans-serif; margin: 9px 0 22px; }
.drawer-section { border-top: 1px solid var(--line); padding: 18px 0; }
.drawer-section h3 { font: 700 11px Manrope, sans-serif; text-transform: uppercase; margin: 0 0 8px; color: var(--muted); }
.drawer-section p { margin: 0; font-size: 14px; line-height: 1.65; }
.drawer-action { background: var(--green-soft); border-left: 3px solid var(--green); padding: 16px; margin-top: 10px; font-weight: 600; font-size: 13px; line-height: 1.5; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: var(--ink); color: white; padding: 11px 16px; border-radius: 5px; font-size: 12px; z-index: 60; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Wealth module */
.wealth-nav { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0 0 6px 6px; padding-top: 5px; height: 50px; }
.wealth-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.wealth-head h1 { margin: 5px 0 4px; font: 800 clamp(30px,4vw,46px)/1.06 Manrope,sans-serif; }
.wealth-head p { margin: 0; color: var(--muted); font-size: 13px; }
.wealth-eyebrow { color: var(--green); }
.wealth-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cloud-status { min-height:42px; border:1px solid var(--line); background:var(--surface); border-radius:5px; padding:0 12px; display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; }
.cloud-status i { width:7px; height:7px; border-radius:50%; background:#9b9b94; }
.cloud-status.synced i { background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.cloud-status.syncing i { background:var(--yellow); animation:pulse 1s infinite alternate; }
.cloud-status.offline i, .cloud-status.error i { background:var(--red); }
.cloud-status.signed-out i, .cloud-status.needs-household i { background:var(--blue); }
@keyframes pulse { to { opacity:.35; } }
.demo-banner { min-height: 46px; padding: 8px 12px 8px 16px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--yellow-soft); border-left: 3px solid var(--yellow); font-size: 11px; }
.demo-banner button { border: 1px solid rgba(138,103,18,.35); background: transparent; height: 30px; padding: 0 10px; border-radius: 4px; color: #745711; font-weight: 700; cursor: pointer; }
.wealth-tabs { display: flex; gap: 22px; min-height: 46px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.wealth-tab { position: relative; border: 0; background: transparent; padding: 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.wealth-tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; }
.wealth-tab.active { color: var(--ink); }
.wealth-tab.active::after { background: var(--coral); }
.wealth-toolbar { min-height: 44px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.month-picker, .year-picker { display: grid; grid-template-columns: 34px minmax(145px,auto) 34px; align-items: center; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; }
.month-picker button, .year-picker button { height: 100%; border: 0; background: transparent; cursor: pointer; color: var(--green); }
.month-picker button:disabled, .year-picker button:disabled { color: #c6c5be; cursor: default; }
.month-picker strong, .year-picker strong { text-align: center; font: 700 11px Manrope,sans-serif; }
.data-note { color: var(--muted); font-size: 10px; }
.money-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 12px; }
.money-card { min-width: 0; min-height: 120px; padding: 18px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.money-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#999; }
.money-card.income::before { background:var(--blue); }
.money-card.expense::before { background:var(--coral); }
.money-card.saving::before { background:var(--green); }
.money-card.neutral::before { background:var(--yellow); }
.money-card > span { display:block; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; }
.money-card > strong { display:block; margin:13px 0 7px; font:800 clamp(20px,2.4vw,29px) Manrope,sans-serif; white-space:nowrap; }
.money-card > small { color:var(--muted); font-size:10px; }
.wealth-two-col { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:12px; margin-bottom:12px; }
.wealth-two-col.lower { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wealth-panel { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:20px; min-width:0; }
.wealth-panel-head { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.wealth-panel-head h2 { margin:3px 0 0; font:700 16px Manrope,sans-serif; }
.wealth-panel-head > strong { color:var(--green); font-size:11px; background:var(--green-soft); padding:6px 8px; border-radius:3px; }
.panel-kicker { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:1px; font-weight:800; }
.flow-track { height:16px; border-radius:2px; overflow:hidden; display:flex; background:var(--green); margin:31px 0 22px; }
.flow-track span { height:100%; flex:0 0 auto; border-right:2px solid var(--surface); }
.flow-fixed { background:var(--coral); }
.flow-house { background:var(--yellow); }
.flow-flex { background:var(--blue); }
.flow-legend { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.flow-legend div { min-width:0; }
.flow-legend i { width:7px; height:7px; display:inline-block; border-radius:50%; margin-right:5px; }
.flow-legend span { color:var(--muted); font-size:9px; display:block; margin-top:5px; }
.flow-legend strong { display:block; margin-top:5px; font-size:11px; white-space:nowrap; }
.insight-list { display:grid; }
.insight-row { display:grid; grid-template-columns:25px 1fr; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.insight-row:first-child { border-top:0; padding-top:0; }
.insight-row > span { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:var(--coral-soft); color:var(--coral); font-size:8px; font-weight:800; }
.insight-row p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.insight-row p strong { color:var(--ink); }
.category-bars { display:grid; gap:13px; }
.bar-label { display:flex; justify-content:space-between; gap:12px; font-size:10px; }
.bar-label span { display:flex; align-items:center; gap:7px; }
.bar-label i { width:7px; height:7px; border-radius:50%; }
.bar-label strong { font-size:10px; }
.bar-label small { color:var(--muted); font-weight:500; margin-left:3px; }
.bar-track { height:5px; margin-top:6px; background:#e9e7df; }
.bar-track span { display:block; height:100%; min-width:2px; }
.icon-add { border:1px solid var(--line); background:transparent; width:30px; height:30px; border-radius:50%; cursor:pointer; color:var(--green); font-size:18px; }
.recent-list { display:grid; }
.transaction-row { display:grid; grid-template-columns:31px 1fr auto 22px; gap:10px; align-items:center; min-height:54px; border-top:1px solid var(--line); }
.transaction-row:first-child { border-top:0; }
.tx-icon { width:27px; height:27px; display:grid; place-items:center; color:var(--tx); background:color-mix(in srgb,var(--tx) 14%,white); border-radius:50%; font-weight:800; }
.transaction-row > span:nth-child(2) strong { display:block; font-size:10px; }
.transaction-row > span:nth-child(2) small { color:var(--muted); font-size:9px; }
.tx-amount { font-size:10px; white-space:nowrap; }
.tx-amount.income { color:var(--green); }
.tx-amount.expense { color:var(--ink); }
.tx-delete { border:0; background:transparent; color:#a4a49d; cursor:pointer; font-size:18px; line-height:1; }
.tx-delete:hover { color:var(--red); }
.finance-empty { color:var(--muted); font-size:11px; padding:24px 0; text-align:center; }
.finance-empty.large { padding:60px 20px; }
.transaction-filters { display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; }
.transaction-filters .filter-chip { flex:0 0 auto; }
.transaction-table { padding:0; overflow:hidden; }
.transaction-table-head, .transaction-table-row { display:grid; grid-template-columns:minmax(220px,1.6fr) minmax(90px,.7fr) minmax(100px,.7fr) minmax(100px,.6fr) 28px; gap:12px; align-items:center; padding:0 18px; }
.transaction-table-head { min-height:40px; background:#eae7df; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.transaction-table-row { min-height:62px; border-top:1px solid var(--line); font-size:10px; }
.transaction-table-row > span:first-child { display:grid; grid-template-columns:8px 1fr; column-gap:9px; align-items:center; }
.transaction-table-row > span:first-child i { grid-row:1 / 3; width:7px; height:28px; border-radius:2px; }
.transaction-table-row > span:first-child strong { font-size:11px; }
.transaction-table-row > span:first-child small { color:var(--muted); }
.year-picker { grid-template-columns:34px 80px 34px; }
.chart-legend { display:flex; gap:12px; color:var(--muted); font-size:9px; }
.chart-legend span { display:flex; align-items:center; gap:5px; }
.chart-legend i { width:7px; height:7px; border-radius:50%; }
.chart-legend i.income { background:var(--blue); }
.chart-legend i.expense { background:var(--coral); }
.chart-legend i.saving { background:var(--green); }
.annual-chart { height:270px; display:grid; grid-template-columns:repeat(12,1fr); gap:8px; padding-top:12px; border-bottom:1px solid var(--line); }
.chart-month { min-width:0; height:100%; display:grid; grid-template-rows:1fr 25px; text-align:center; color:var(--muted); font-size:9px; }
.chart-bars { display:flex; align-items:end; justify-content:center; gap:2px; border-bottom:1px solid #ebe9e2; }
.chart-bars i { width:min(9px,28%); min-height:1px; border-radius:2px 2px 0 0; }
.chart-income { background:var(--blue); }
.chart-expense { background:var(--coral); }
.chart-saving { background:var(--green); }
.chart-month.future { opacity:.22; }
.heatmap { min-width:530px; overflow:hidden; }
.heatmap-panel { overflow-x:auto; }
.heat-row { display:grid; grid-template-columns:100px repeat(12,1fr); gap:4px; align-items:center; margin-bottom:4px; }
.heat-row strong { font-size:8px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.heat-row small { text-align:center; font-size:8px; color:var(--muted); }
.heat-row i { aspect-ratio:1.2; max-height:20px; background:rgba(220,105,77,var(--heat)); border-radius:2px; }
.year-highlights { display:grid; align-content:start; }
.highlight-block { padding:16px; margin-bottom:8px; border-left:3px solid; background:#f2f0e9; }
.highlight-block.coral { border-color:var(--coral); }
.highlight-block.green { border-color:var(--green); }
.highlight-block.ink { border-color:var(--ink); }
.highlight-block span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; font-weight:700; }
.highlight-block strong { display:block; margin-top:6px; font:700 15px Manrope,sans-serif; }
.goal-summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px; margin-bottom:12px; background:var(--green); color:white; border-radius:6px; }
.goal-summary .panel-kicker { color:#f1c263; }
.goal-summary h2 { margin:7px 0; font:700 21px Manrope,sans-serif; }
.goal-summary p { margin:0; color:rgba(255,255,255,.65); font-size:11px; }
.goal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.goal-card { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:20px; }
.goal-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.goal-icon { width:34px; height:34px; display:grid; place-items:center; color:white; border-radius:50%; font-weight:800; }
.goal-card h3 { margin:6px 0 12px; font:700 16px Manrope,sans-serif; }
.goal-card > strong { font:700 18px Manrope,sans-serif; }
.goal-card > strong small { color:var(--muted); font:500 10px "DM Sans",sans-serif; }
.goal-track { height:7px; background:#e8e6df; margin:18px 0 7px; }
.goal-track span { display:block; height:100%; }
.goal-foot { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; margin-bottom:18px; }
.goal-card .secondary-button { width:100%; }
.planning-note { border-left:4px solid var(--yellow); padding:28px; }
.planning-note > span { color:#8a6712; text-transform:uppercase; font-size:9px; font-weight:800; }
.planning-note h2 { margin:7px 0; font:700 18px Manrope,sans-serif; }
.planning-note p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; max-width:700px; }
.drawer-intro { color:var(--muted); font-size:12px; line-height:1.6; margin:-12px 0 22px; }
.wealth-form { display:grid; gap:16px; }
.wealth-form label { display:grid; gap:6px; }
.wealth-form label > span, .member-row label > span { color:var(--muted); font-size:9px; text-transform:uppercase; font-weight:800; }
.wealth-form input, .wealth-form select, .member-row input { width:100%; height:42px; border:1px solid var(--line); border-radius:4px; background:white; padding:0 11px; outline:0; font-size:12px; }
.wealth-form input:focus, .wealth-form select:focus, .member-row input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(49,95,74,.1); }
.type-toggle { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:#eae7df; border-radius:5px; }
.type-toggle label { display:block; }
.type-toggle input { position:absolute; opacity:0; pointer-events:none; }
.type-toggle span { height:36px; display:grid; place-items:center; border-radius:3px; color:var(--muted); font-size:10px; cursor:pointer; }
.type-toggle input:checked + span { background:white; color:var(--green); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.currency-input { display:grid; grid-template-columns:42px 1fr; height:56px; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.currency-input b { display:grid; place-items:center; background:#eeece5; font-size:18px; }
.currency-input input { height:100%; border:0; font:700 20px Manrope,sans-serif; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-submit { height:46px; margin-top:6px; }
.member-list { display:grid; gap:8px; }
.member-row { display:grid; grid-template-columns:34px 1fr 1.1fr 48px 22px; gap:8px; align-items:end; padding:12px 0; border-bottom:1px solid var(--line); }
.member-avatar { width:32px; height:32px; align-self:center; display:grid; place-items:center; border-radius:50%; color:white; font-size:10px; font-weight:800; }
.member-row label { display:grid; gap:5px; }
.member-row input { height:36px; }
.member-save { height:36px; border:0; border-radius:4px; background:var(--green-soft); color:var(--green); font-size:9px; font-weight:800; cursor:pointer; }
.add-member-form { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.add-member-form h3 { margin:0; font:700 14px Manrope,sans-serif; }
.cloud-setup-note { padding:18px; margin:0 0 18px; background:var(--yellow-soft); border-left:3px solid var(--yellow); }
.cloud-setup-note strong { display:block; font-size:12px; }
.cloud-setup-note p { margin:8px 0 0; color:#6d5b2e; font-size:11px; line-height:1.6; }
.cloud-setup-note code { background:rgba(255,255,255,.65); padding:1px 4px; border-radius:2px; }
.sync-account-card { padding:16px; margin-bottom:10px; background:#efede6; }
.sync-account-card span, .invite-code > span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; font-weight:800; }
.sync-account-card strong { display:block; margin-top:6px; font-size:13px; overflow-wrap:anywhere; }
.invite-code { display:grid; grid-template-columns:1fr auto; gap:5px 12px; align-items:center; padding:18px; margin-bottom:18px; background:var(--green); color:white; }
.invite-code > span { grid-column:1 / -1; color:rgba(255,255,255,.62); }
.invite-code strong { font:800 24px Manrope,sans-serif; letter-spacing:2px; }
.invite-code button { border:1px solid rgba(255,255,255,.35); background:transparent; color:white; height:32px; padding:0 10px; border-radius:3px; cursor:pointer; }
.text-danger { display:block; margin:22px auto 0; border:0; background:transparent; color:var(--red); font-size:10px; font-weight:700; cursor:pointer; }
.form-message { min-height:18px; margin:0; color:var(--green); font-size:10px; line-height:1.5; }
.form-message.error { color:var(--red); }
.form-divider { height:40px; display:grid; place-items:center; position:relative; color:var(--muted); font-size:9px; }
.form-divider::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--line); }
.form-divider span { position:relative; background:var(--surface); padding:0 9px; }
.cloud-household-form { padding-bottom:2px; }
.backup-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px; margin-bottom:12px; border-radius:6px; background:var(--green); color:white; }
.backup-hero h2 { margin:6px 0; font:700 22px Manrope,sans-serif; }
.backup-hero p { margin:0; color:rgba(255,255,255,.65); font-size:11px; }
.backup-hero .panel-kicker { color:#f1c263; }
.backup-health { min-width:210px; padding:14px 17px; border-left:1px solid rgba(255,255,255,.2); }
.backup-health span { display:block; color:rgba(255,255,255,.58); font-size:9px; text-transform:uppercase; font-weight:700; }
.backup-health strong { display:block; margin-top:7px; font-size:13px; }
.protection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.protection-card { min-height:205px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:6px; display:flex; flex-direction:column; }
.protection-index { color:var(--coral); font:800 10px Manrope,sans-serif; }
.protection-card h3 { margin:22px 0 7px; font:700 15px Manrope,sans-serif; }
.protection-card p { margin:0 0 18px; color:var(--muted); font-size:10px; line-height:1.6; }
.protection-card button, .protection-ok { margin-top:auto; align-self:flex-start; }
.protection-ok { color:var(--green); font-size:9px; font-weight:800; text-transform:uppercase; }
.protection-ok::before { content:"✓"; display:inline-grid; place-items:center; width:17px; height:17px; margin-right:6px; border-radius:50%; background:var(--green-soft); }
.protection-ok.warning { color:#8a6712; }
.protection-ok.warning::before { content:"!"; background:var(--yellow-soft); }
.backup-heading { margin-top:32px; }
.export-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.export-card { min-height:185px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:6px; display:flex; flex-direction:column; }
.export-card > span { color:var(--coral); font-size:8px; font-weight:800; }
.export-card h3 { margin:22px 0 7px; font:700 14px Manrope,sans-serif; }
.export-card p { margin:0 0 18px; color:var(--muted); font-size:10px; line-height:1.55; }
.restore-panel { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:6px; }
.restore-panel strong { font:700 14px Manrope,sans-serif; }
.restore-panel p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.import-button { display:grid; place-items:center; cursor:pointer; }
.backup-footnote { color:var(--muted); font-size:9px; line-height:1.5; }

@media (max-width: 1050px) {
  .guide-grid, .category-grid { grid-template-columns: repeat(2, 1fr); }
  .progress-layout { grid-template-columns: 1fr; }
  .progress-side { position: static; }
  .money-cards { grid-template-columns:repeat(2,1fr); }
  .wealth-two-col, .wealth-two-col.lower { grid-template-columns:1fr; }
  .goal-grid { grid-template-columns:repeat(2,1fr); }
  .wealth-head-actions { flex-wrap:wrap; justify-content:flex-end; }
  .export-grid { grid-template-columns:repeat(2,1fr); }
  .restore-panel { grid-template-columns:1fr 1fr; }
  .restore-panel > div { grid-column:1 / -1; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); transition: transform .25s; width: 270px; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .topbar { height: 62px; padding: 0 16px; justify-content: space-between; }
  .icon-button, .menu-button { display: grid; place-items: center; border: 0; background: transparent; width: 35px; height: 35px; cursor: pointer; }
  .mobile-brand { display: block; font: 800 13px Manrope, sans-serif; }
  .search-box { display: none; }
  .avatar-button { width: 34px; height: 34px; }
  main { padding: 22px 16px 94px; }
  .hero { min-height: 430px; align-items: end; background-position: 64% center; }
  .hero::after { background: linear-gradient(0deg, rgba(17,28,23,.98) 0%, rgba(17,28,23,.7) 55%, rgba(17,28,23,.08) 100%); }
  .hero-content { width: 100%; padding: 28px 22px; }
  .hero h1 { font-size: 37px; }
  .hero p { font-size: 13px; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .summary-stat:nth-child(2) { border-right: 0; }
  .summary-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .today-grid, .guide-grid, .category-grid { grid-template-columns: 1fr; }
  .page-head { display: block; }
  .page-head p { margin-top: 12px; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 7px; }
  .progress-row { grid-template-columns: 34px 1fr 94px; }
  .progress-row > span:nth-child(3), .progress-row.header > span:nth-child(3) { display: none; }
  .mobile-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 30; left: 8px; right: 8px; bottom: 8px; height: 65px; padding: 5px; background: #25392f; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
  .mobile-nav-item { border: 0; background: transparent; color: rgba(255,255,255,.55); border-radius: 5px; display: grid; place-content: center; gap: 2px; font-size: 9px; cursor: pointer; }
  .mobile-nav-item span { font-size: 16px; }
  .mobile-nav-item.active { background: white; color: var(--green); }
  .detail-drawer { padding: 56px 24px 28px; }
  .wealth-head { display:block; }
  .wealth-head h1 { font-size:31px; }
  .wealth-head-actions { margin-top:18px; }
  .wealth-head-actions button { flex:1; }
  .demo-banner { align-items:flex-start; }
  .wealth-tabs { gap:0; display:grid; grid-template-columns:repeat(5,1fr); }
  .wealth-tab { min-width:0; }
  .wealth-toolbar { align-items:flex-start; }
  .data-note { display:none; }
  .money-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .money-card { min-height:104px; padding:14px; }
  .money-card > strong { font-size:19px; white-space:normal; overflow-wrap:anywhere; }
  .flow-legend { grid-template-columns:repeat(2,1fr); }
  .flow-legend div:last-child { grid-column:1 / -1; }
  .wealth-panel { padding:16px; }
  .transaction-table { overflow-x:auto; padding:0; }
  .transaction-table-head, .transaction-table-row { min-width:650px; }
  .annual-chart-panel { overflow-x:auto; }
  .annual-chart { min-width:680px; }
  .yearly-cards .money-card:last-child { display:none; }
  .goal-grid { grid-template-columns:1fr; }
  .goal-summary { align-items:flex-start; padding:20px; }
  .goal-summary h2 { font-size:17px; }
  .goal-summary .primary-button { flex:0 0 auto; font-size:0; width:40px; padding:0; }
  .goal-summary .primary-button::after { content:"+"; font-size:20px; }
  .member-row { grid-template-columns:32px 1fr 22px; align-items:center; }
  .member-row label { grid-column:2; }
  .member-row .member-save { grid-column:2; }
  .member-row > .tx-delete { grid-column:3; grid-row:1; }
  .cloud-status { width:100%; justify-content:center; order:-1; }
  .protection-grid { grid-template-columns:1fr; }
  .protection-card { min-height:175px; }
  .export-grid { grid-template-columns:1fr 1fr; }
  .backup-hero { align-items:flex-start; }
  .backup-health { min-width:0; }
  .restore-panel { grid-template-columns:1fr; }
  .restore-panel > div { grid-column:auto; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 32px; }
  .hero .secondary-button { margin: 8px 0 0; display: block; }
  .focus-row { grid-template-columns: 30px 1fr auto; }
  .progress-row { padding: 10px; grid-template-columns: 28px 1fr 82px; }
  .wealth-head-actions { display:grid; grid-template-columns:1fr; }
  .money-cards { gap:7px; }
  .money-card > strong { font-size:17px; }
  .form-grid { grid-template-columns:1fr; }
  .wealth-toolbar > .primary-button { font-size:0; width:40px; padding:0; }
  .wealth-toolbar > .primary-button::after { content:"+"; font-size:20px; }
  .wealth-tab { font-size:9px; }
  .backup-hero { display:block; padding:20px; }
  .backup-health { margin-top:18px; padding:14px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.2); }
  .export-grid { grid-template-columns:1fr; }
}