:root {
  color-scheme: light;
  --ink: #172827;
  --ink-soft: #3f5652;
  --muted: #82918c;
  --line: #e6ece8;
  --paper: #f4f6f4;
  --white: #fff;
  --green: #188a69;
  --green-dark: #0f6f55;
  --green-pale: #e2f2eb;
  --mint: #8ad9b7;
  --navy: #173a36;
  --shadow: 0 18px 54px rgba(30, 64, 54, .07);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #75cbaa; outline-offset: 3px; }

.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; }
.brand-mark { width: 28px; height: 28px; position: relative; display: inline-flex; align-items: end; gap: 3px; padding: 5px 5px 4px; border-radius: 9px; background: var(--green); transform: rotate(-4deg); }
.brand-mark span { display: block; width: 4px; border-radius: 3px 3px 1px 1px; background: white; }
.brand-mark span:nth-child(1) { height: 9px; opacity: .68; }
.brand-mark span:nth-child(2) { height: 14px; opacity: .86; }
.brand-mark span:nth-child(3) { height: 11px; }
.brand-name { color: var(--ink); font-family: Manrope, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.7px; }
.brand-name span { color: var(--green); }
.public-frame { min-height: 100vh; padding: 0 6.2vw; display: flex; flex-direction: column; }
.public-header { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(31, 67, 56, .09); }
.public-header-note, .public-footer { color: #83918b; font-size: 12px; letter-spacing: .02em; }
.public-header-note { font-weight: 500; }
.public-footer { display: flex; justify-content: space-between; padding: 20px 0 24px; margin-top: auto; }
.flash { width: min(100% - 48px, 1280px); margin: 18px auto 0; padding: 13px 16px; border: 1px solid #c7e8d9; border-radius: 10px; color: #155e48; background: #eaf7f0; font-size: 13px; }
.flash-error { color: #8c3d37; border-color: #f0d4d1; background: #fff2f0; }
.public-flash { width: min(100%, 1280px); }

.auth-layout { width: min(100%, 1280px); min-height: 640px; flex: 1; align-self: center; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); align-items: center; gap: clamp(44px, 9vw, 130px); padding: 58px 0 65px; }
.auth-story { position: relative; min-height: 455px; padding: 28px 0 0 5.2%; overflow: hidden; }
.eyebrow, .section-kicker, .card-label, .workspace-label { color: #728780; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--green); }
.eyebrow-line { width: 19px; height: 1px; display: inline-block; background: var(--green); }
.auth-story h1 { position: relative; z-index: 1; margin: 25px 0 13px; font-family: Manrope, sans-serif; font-size: clamp(42px, 5vw, 65px); font-weight: 600; line-height: 1.05; letter-spacing: -3.4px; }
.auth-story h1 em { color: var(--green); font-style: normal; font-weight: 500; }
.auth-story > p { position: relative; z-index: 1; max-width: 400px; margin: 0; color: #6f817b; font-size: 15px; line-height: 1.8; }
.story-art { position: relative; height: 252px; margin-top: 22px; overflow: hidden; }
.art-orbit { position: absolute; border: 1px solid rgba(55, 152, 115, .12); border-radius: 50%; transform: rotate(-14deg); }
.orbit-one { width: 470px; height: 170px; left: 4%; top: 38px; }
.orbit-two { width: 390px; height: 135px; left: 15%; top: 59px; }
.art-glow { position: absolute; left: 50%; top: 70px; width: 215px; height: 130px; border-radius: 50%; background: rgba(122, 213, 174, .24); filter: blur(36px); transform: rotate(-22deg); }
.art-card { position: absolute; z-index: 1; width: 216px; height: 130px; padding: 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 13px; background: rgba(255,255,255,.88); box-shadow: 0 13px 38px rgba(32, 82, 60, .11); }
.art-card-back { left: 22%; top: 48px; transform: rotate(8deg); opacity: .78; }
.art-card-front { left: 42%; top: 87px; transform: rotate(-7deg); }
.art-label { display: block; color: #91a39a; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.art-line { display: block; height: 5px; width: 74%; margin-top: 10px; border-radius: 4px; background: #e4ece7; }
.art-line.short { width: 39%; margin-top: 7px; }
.art-spark { display: block; height: 29px; width: 100%; margin-top: 15px; border-bottom: 1px solid #e9efeb; background: linear-gradient(158deg, transparent 51%, #8acdb0 52%, #8acdb0 54%, transparent 55%) 0 0 / 100% 100%; }
.art-sparkline { height: 35px; display: flex; align-items: end; justify-content: space-around; gap: 4px; margin-top: 9px; border-bottom: 1px solid #ebf0ed; }
.art-sparkline i { display: block; width: 12px; border-radius: 4px 4px 0 0; background: #a6dcc2; }
.art-sparkline i:nth-child(1) { height: 10px; }.art-sparkline i:nth-child(2) { height: 15px; }.art-sparkline i:nth-child(3) { height: 13px; }.art-sparkline i:nth-child(4) { height: 21px; }.art-sparkline i:nth-child(5) { height: 17px; }.art-sparkline i:nth-child(6) { height: 26px; }.art-sparkline i:nth-child(7) { height: 22px; }.art-sparkline i:nth-child(8) { height: 30px; background: #36a67c; }
.story-caption { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; color: #61756d; font-size: 12px; }
.caption-check { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: var(--green-dark); background: #dff3e9; font-size: 11px; font-weight: 700; }
.auth-panel { width: 100%; max-width: 410px; padding: 35px 37px 30px; border: 1px solid rgba(27, 61, 48, .08); border-radius: 17px; background: rgba(255,255,255,.89); box-shadow: var(--shadow); }
.auth-heading { margin-bottom: 25px; }
.auth-heading h2 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 27px; font-weight: 700; letter-spacing: -.9px; }
.auth-heading p { margin: 0; color: #81918a; font-size: 13px; }
.mobile-eyebrow { display: none; color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.form-stack { display: flex; flex-direction: column; gap: 9px; }
.form-stack label, .family-create-form label { margin-top: 5px; color: #415650; font-size: 12px; font-weight: 600; }
.form-stack input, .family-create-form input { width: 100%; height: 47px; padding: 0 14px; border: 1px solid #e1e9e4; border-radius: 8px; color: var(--ink); background: #fbfcfb; font-size: 13px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.form-stack input::placeholder, .family-create-form input::placeholder { color: #aab6b0; }
.form-stack input:focus, .family-create-form input:focus { border-color: #6fbf9b; outline: 0; background: white; box-shadow: 0 0 0 3px rgba(91, 182, 139, .13); }
.label-row { display: flex; align-items: center; justify-content: space-between; }
.label-row a, .auth-switch a { color: var(--green-dark); font-size: 11px; font-weight: 700; }
.label-help { margin-left: 4px; color: #9aa9a2; font-size: 10px; font-weight: 400; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 17px; border: 0; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--green); box-shadow: 0 6px 14px rgba(24, 138, 105, .16); }
.button-primary:hover { background: var(--green-dark); box-shadow: 0 8px 18px rgba(24, 138, 105, .23); }
.button-primary span { font-size: 16px; font-weight: 400; }
.button-full { width: 100%; margin-top: 10px; }
.button-secondary { color: #176d53; background: #e5f3eb; }
.button-secondary:hover { background: #d8eee2; }
.button-link { text-decoration: none; }
.auth-switch { margin-top: 21px; color: #81918a; text-align: center; font-size: 11px; }
.secure-hint { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 29px; padding-top: 19px; border-top: 1px solid #edf1ee; color: #91a098; font-size: 10px; }
.secure-hint span, .secure-icon { color: var(--green); font-size: 15px; }
.auth-layout-compact { min-height: 620px; }
.auth-layout-compact .auth-story { min-height: 400px; }
.benefit-list { display: grid; gap: 15px; margin-top: 39px; }
.benefit-list > div { display: flex; align-items: center; gap: 13px; }
.benefit-list > div > span { color: #48a782; font-family: Manrope, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.benefit-list p { margin: 0; color: #5e746b; font-size: 13px; }
.story-simple { padding-top: 72px; }
.secure-callout { display: flex; align-items: center; gap: 12px; max-width: 335px; margin-top: 36px; padding: 14px 16px; border: 1px solid #dcece3; border-radius: 10px; color: #61756d; background: rgba(255,255,255,.58); font-size: 11px; line-height: 1.55; }
.error-page { width: min(100%, 650px); min-height: 62vh; margin: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.error-code { color: #95cdb0; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.error-page h1 { margin: 10px 0; font-family: Manrope, sans-serif; font-size: clamp(29px, 5vw, 44px); letter-spacing: -1.5px; }
.error-page p { margin: 0 0 25px; color: #788a82; font-size: 14px; }

/* Fas 4: reports, recurring schedules and notification inbox. */
.reports-page, .notifications-page { max-width: 1430px; margin: 0 auto; }
.report-filter-card, .report-panel, .notification-panel, .recurring-panel { padding: 21px; }
.report-filter-card { margin-bottom: 16px; }
.report-export-group { display: grid; justify-items: end; gap: 5px; }
.report-export-group > span { color: #98a69f; font-size: 9px; }
.report-filters { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 1fr auto; align-items: end; gap: 12px; }
.report-filters > div { min-width: 0; }
.report-filters label, .recurring-form label { display: block; margin-bottom: 6px; color: #71847b; font-size: 10px; font-weight: 650; }
.report-filters input, .report-filters select, .recurring-form input, .recurring-form select { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid #e1e9e4; border-radius: 7px; color: #30463c; background: #fff; font: inherit; font-size: 11px; }
.report-filters [hidden] { display: none; }
.report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }
.report-metric { display: flex; min-height: 125px; flex-direction: column; justify-content: space-between; padding: 17px 19px; border: 1px solid #e7eee9; border-radius: 10px; background: #fff; }
.report-metric > span:first-child { color: #83948b; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.report-metric > strong { color: #344b40; font-family: Manrope, sans-serif; font-size: clamp(21px, 2vw, 29px); font-weight: 650; letter-spacing: -.9px; }
.report-metric > strong small { margin-left: 5px; color: #91a098; font-family: inherit; font-size: 9px; letter-spacing: .03em; }
.report-metric > span:last-child { color: #98a69f; font-size: 10px; }
.report-metric-income > strong { color: #267957; }
.report-metric-expense > strong { color: #b26968; }
.report-content-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: 15px; }
.report-panel { min-width: 0; }
.report-month-chart { height: 220px; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 14px 2px 0; border-bottom: 1px solid #e9eeeb; }
.report-month { display: flex; min-width: 40px; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; color: #8b9a93; font-size: 9px; text-transform: capitalize; }
.report-month > span { height: 22px; white-space: nowrap; }
.report-month > span small { color: #a9b3ae; font-size: 8px; }
.report-bars { width: min(42px, 80%); height: calc(100% - 30px); display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-radius: 5px 5px 0 0; background: linear-gradient(to top, #f8faf8 1px, transparent 1px); background-size: 100% 25%; }
.report-bar { width: 11px; min-height: 3px; border-radius: 4px 4px 0 0; }
.report-bar-income, .report-chart-legend .report-bar-income { background: #66b58e; }
.report-bar-expense, .report-chart-legend .report-bar-expense { background: #d98a87; }
.report-chart-legend { display: flex; gap: 18px; margin: 13px 0 0; padding: 0; color: #81928a; font-size: 10px; list-style: none; }
.report-chart-legend li { display: flex; align-items: center; gap: 6px; }
.report-chart-legend i { width: 8px; height: 8px; border-radius: 3px; }
.report-category-list { display: grid; }
.report-category-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #edf1ee; }
.report-category-row:last-child { border-bottom: 0; }
.report-category-dot { width: 8px; height: 8px; border-radius: 50%; background: #d98a87; }
.report-category-dot.is-income { background: #66b58e; }
.report-category-row > div { min-width: 0; display: grid; gap: 3px; }
.report-category-row > div strong, .report-category-row > strong { overflow-wrap: anywhere; color: #42584d; font-size: 11px; }
.report-category-row > div small { color: #9aa79f; font-size: 9px; }
.report-category-row > strong small { color: #93a198; font-size: 8px; }
.recurring-panel { margin: 18px 0; }
.recurring-panel .finance-section-heading p { margin: 5px 0 0; color: #899991; font-size: 10px; }
.recurring-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; }
.recurring-form > button { min-height: 39px; }
.family-form.recurring-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recurring-list { display: grid; margin-top: 16px; border-top: 1px solid #edf1ee; }
.recurring-row { display: grid; grid-template-columns: 30px minmax(140px, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf1ee; }
.recurring-row > div { min-width: 0; display: grid; gap: 4px; }
.recurring-row > div strong { overflow-wrap: anywhere; color: #42584d; font-size: 11px; }
.recurring-row > div span { color: #8a9a91; font-size: 9px; line-height: 1.5; }
.recurring-row > strong { color: #42584d; white-space: nowrap; font-size: 11px; }
.recurring-row > strong small { color: #94a199; font-size: 8px; }
.recurring-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #b56f6c; background: #fbefed; }
.recurring-mark.is-income { color: #2b8a62; background: #e9f6ef; }
.notification-panel { max-width: 1020px; }
.notification-list { display: grid; }
.notification-row { display: flex; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid #edf1ee; }
.notification-row:last-child { border-bottom: 0; }
.notification-row.is-unread { margin: 0 -10px; padding-right: 10px; padding-left: 10px; border-radius: 8px; background: #f4faf6; }
.notification-mark { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 10px; color: #ad6d49; background: #fbf3e9; }
.notification-copy { min-width: 0; flex: 1; }
.notification-copy > strong { color: #3f554b; font-size: 12px; }
.notification-copy p { margin: 4px 0; color: #74877d; font-size: 11px; line-height: 1.5; }
.notification-copy time, .notification-copy a { display: inline-block; margin: 3px 10px 0 0; color: #95a39b; font-size: 9px; }
.notification-copy a { color: #267957; font-weight: 650; }
.notification-read-label { padding: 5px 8px; border-radius: 20px; color: #8d9a93; background: #f1f4f1; font-size: 9px; }
.family-progress-0 > span { width: 0; }
.report-height-0 { height: 0 !important; min-height: 0; }
.report-height-5 { height: 5% !important; }
.family-progress-5 > span { width: 5%; }
.report-height-10 { height: 10% !important; }
.family-progress-10 > span { width: 10%; }
.report-height-15 { height: 15% !important; }
.family-progress-15 > span { width: 15%; }
.report-height-20 { height: 20% !important; }
.family-progress-20 > span { width: 20%; }
.report-height-25 { height: 25% !important; }
.family-progress-25 > span { width: 25%; }
.report-height-30 { height: 30% !important; }
.family-progress-30 > span { width: 30%; }
.report-height-35 { height: 35% !important; }
.family-progress-35 > span { width: 35%; }
.report-height-40 { height: 40% !important; }
.family-progress-40 > span { width: 40%; }
.report-height-45 { height: 45% !important; }
.family-progress-45 > span { width: 45%; }
.report-height-50 { height: 50% !important; }
.family-progress-50 > span { width: 50%; }
.report-height-55 { height: 55% !important; }
.family-progress-55 > span { width: 55%; }
.report-height-60 { height: 60% !important; }
.family-progress-60 > span { width: 60%; }
.report-height-65 { height: 65% !important; }
.family-progress-65 > span { width: 65%; }
.report-height-70 { height: 70% !important; }
.family-progress-70 > span { width: 70%; }
.report-height-75 { height: 75% !important; }
.family-progress-75 > span { width: 75%; }
.report-height-80 { height: 80% !important; }
.family-progress-80 > span { width: 80%; }
.report-height-85 { height: 85% !important; }
.family-progress-85 > span { width: 85%; }
.report-height-90 { height: 90% !important; }
.family-progress-90 > span { width: 90%; }
.report-height-95 { height: 95% !important; }
.family-progress-95 > span { width: 95%; }
.report-height-100 { height: 100% !important; }
.family-progress-100 > span { width: 100%; }
@media (max-width: 1100px) {
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-content-grid { grid-template-columns: minmax(0, 1fr); }
  .recurring-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .report-filter-card, .report-panel, .notification-panel, .recurring-panel { padding: 15px; }
  .report-filters, .report-metrics, .recurring-form, .family-form.recurring-form { grid-template-columns: minmax(0, 1fr); }
  .report-metric { min-height: 105px; }
  .report-month-chart { height: 190px; gap: 3px; }
  .report-month { font-size: 8px; }
  .report-month > span small { display: none; }
  .recurring-row { grid-template-columns: 29px minmax(0, 1fr) auto; gap: 8px; }
  .recurring-row > strong { grid-column: 2; }
  .recurring-row > form { grid-column: 3; grid-row: 1 / span 2; }
  .notification-row { align-items: flex-start; flex-wrap: wrap; }
  .notification-row > form { margin-left: 49px; }
}

.app-frame { min-height: 100vh; display: flex; }
.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: 252px; display: flex; flex-direction: column; padding: 28px 18px 18px; border-right: 1px solid #e8ede9; background: #fff; }
.brand-sidebar { margin: 0 0 57px 10px; }
.workspace-label { margin: 0 10px 15px; font-size: 9px; letter-spacing: .16em; }
.side-nav { display: grid; gap: 6px; }
.nav-link { min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border-radius: 7px; color: #64766f; font-size: 12px; font-weight: 600; }
.nav-icon { width: 17px; display: inline-grid; place-items: center; color: #7f968c; font-size: 16px; }
.nav-link.is-active { color: #176d53; background: #eaf6ef; }
.nav-link.is-active .nav-icon { color: #188a69; }
.nav-link.is-muted { color: #9aa7a1; cursor: default; }
.nav-soon { margin-left: auto; padding: 3px 6px; border-radius: 4px; color: #9ca9a2; background: #f3f5f3; font-size: 8px; font-weight: 700; letter-spacing: .03em; }
.sidebar-bottom { margin-top: auto; }
.privacy-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 8px 19px; padding: 13px 11px; border: 1px solid #e8f0eb; border-radius: 8px; color: #7c8e85; font-size: 10px; line-height: 1.6; }
.privacy-dot, .date-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 4px; border-radius: 50%; background: #45b783; box-shadow: 0 0 0 3px #e3f4eb; }
.profile-row { display: flex; align-items: center; gap: 9px; padding: 14px 5px 2px; border-top: 1px solid #edf1ee; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #226c54; background: #dff1e7; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 700; }
.profile-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
.profile-copy strong { overflow: hidden; color: #41564f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy span { color: #9aa7a1; font-size: 9px; }
.logout-form { margin: 0; }
.icon-button { width: 31px; height: 31px; border: 0; border-radius: 6px; color: #7c9187; background: transparent; cursor: pointer; font-size: 17px; }
.icon-button:hover { color: #176d53; background: #eef7f1; }
.app-main { width: calc(100% - 252px); min-height: 100vh; margin-left: 252px; padding: 42px clamp(26px, 4.1vw, 64px) 19px; }
.dashboard-page { max-width: 1430px; margin: 0 auto; }
.dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 30px; }
.dashboard-eyebrow { margin-bottom: 12px; color: #658078; font-size: 9px; }
.dashboard-header h1 { margin: 0; font-family: Manrope, sans-serif; font-size: clamp(27px, 3vw, 37px); font-weight: 600; letter-spacing: -1.7px; }
.dashboard-header p { margin: 7px 0 0; color: #81918b; font-size: 12px; }
.wave { color: #37a779; font-family: 'DM Sans', sans-serif; font-size: .63em; vertical-align: 12%; }
.header-date { display: flex; align-items: center; gap: 9px; padding-bottom: 3px; color: #788b82; font-size: 10px; white-space: nowrap; }
.date-dot { margin-top: 0; }
.overview-grid { display: grid; grid-template-columns: 1.22fr 1fr 1fr; gap: 14px; }
.overview-card { position: relative; min-height: 148px; overflow: hidden; padding: 19px 20px 15px; border: 1px solid #e8eeea; border-radius: 11px; background: #fff; box-shadow: 0 5px 15px rgba(36, 72, 56, .025); }
.balance-card { color: #effbf3; border-color: #176b52; background: linear-gradient(127deg, #1a6952 0%, #176149 100%); box-shadow: 0 9px 23px rgba(24, 102, 76, .12); }
.card-top, .card-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.card-label { color: #889b92; font-size: 9px; letter-spacing: .13em; }
.balance-card .card-label { color: #b2d8c5; }
.card-symbol { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 600; }
.symbol-sun { color: #b5eacb; background: rgba(255,255,255,.12); }
.symbol-green { color: #188a69; background: #e4f4eb; }
.symbol-rose { color: #c47c6e; background: #fbefed; }
.card-value { position: relative; z-index: 1; margin: 10px 0 8px; font-family: Manrope, sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -1.2px; }
.card-value small { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.muted-value { color: #536a61; }
.card-foot { color: #94a29b; font-size: 9px; }
.card-period { white-space: nowrap; }
.card-link { color: #c7ead4; font-weight: 600; }
.card-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.card-note { color: #9aa9a2; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(217, 249, 226, .19); border-radius: 20px; color: #d3f0dc; background: rgba(240, 255, 244, .08); font-size: 9px; }
.status-pill > span { width: 5px; height: 5px; border-radius: 50%; background: #96e2ae; }
.balance-decoration { position: absolute; right: -10px; bottom: 0; height: 50px; width: 57%; display: flex; align-items: end; justify-content: space-around; opacity: .11; transform: skewY(-9deg); }
.balance-decoration i { width: 8%; height: 35%; border-radius: 4px 4px 0 0; background: #bff2d4; }
.balance-decoration i:nth-child(2n) { height: 57%; }.balance-decoration i:nth-child(3n) { height: 78%; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.56fr) minmax(290px, .84fr); gap: 14px; margin-top: 15px; }
.surface-card { border: 1px solid #e8eeea; border-radius: 11px; background: #fff; box-shadow: 0 5px 15px rgba(36, 72, 56, .025); }
.activity-card, .family-card { min-height: 318px; padding: 21px 21px 17px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-kicker { display: block; margin-bottom: 6px; color: #91a098; font-size: 8px; letter-spacing: .15em; }
.section-heading h2, .welcome-card h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.45px; }
.period-select { display: inline-flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid #edf0ee; border-radius: 6px; color: #87968f; font-size: 9px; white-space: nowrap; }
.period-select span { color: #638075; font-size: 13px; }
.chart-empty { position: relative; height: 225px; margin-top: 13px; }
.chart-gridline { position: absolute; right: 0; left: 0; border-top: 1px dashed #edf1ee; }
.line-top { top: 17px; }.line-mid { top: 88px; }.line-bottom { top: 159px; }
.chart-empty-content { position: absolute; inset: 20px 0 41px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #9aaba2; text-align: center; }
.chart-icon { width: 33px; height: 33px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 10px; color: #48a77e; background: #e9f6ee; font-size: 21px; }
.chart-empty-content strong { color: #677d73; font-size: 11px; font-weight: 600; }
.chart-empty-content > span:last-child { max-width: 260px; font-size: 9px; line-height: 1.6; }
.chart-axis { position: absolute; right: 0; bottom: 5px; left: 0; display: flex; justify-content: space-between; color: #a2ada7; font-size: 8px; }
.chart-legend { display: flex; justify-content: flex-end; gap: 13px; margin-top: 11px; color: #87978e; font-size: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 2px; }
.legend-income { background: #4db88b; }.legend-expenses { background: #e1a28f; }
.chart-plot { position: relative; height: 174px; margin-top: 7px; }
.chart-no-data { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 174px; margin-top: 7px; border: 1px dashed #e3ece6; border-radius: 8px; background: #fbfdfb; text-align: center; }
.chart-no-data strong { color: #62796e; font-size: 10px; font-weight: 650; }
.chart-no-data > span:not(.chart-icon) { color: #95a59c; font-size: 8px; }
.chart-no-data a { color: #187455; font-size: 9px; font-weight: 700; }
.chart-plot .line-top { top: 12px; }.chart-plot .line-mid { top: 74px; }.chart-plot .line-bottom { top: 136px; }
.trend-columns { position: absolute; inset: 7px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.trend-month { z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.trend-bars { width: 100%; height: 144px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.trend-bar { width: min(27%, 15px); min-height: 0; display: block; border-radius: 4px 4px 0 0; }
.trend-income { background: #4db88b; }.trend-expenses { background: #e1a28f; }
.trend-height-0 { height: 0; }.trend-height-1 { height: 10%; }.trend-height-2 { height: 20%; }.trend-height-3 { height: 30%; }.trend-height-4 { height: 40%; }.trend-height-5 { height: 50%; }.trend-height-6 { height: 60%; }.trend-height-7 { height: 70%; }.trend-height-8 { height: 80%; }.trend-height-9 { height: 90%; }.trend-height-10 { height: 100%; }
.trend-month-label { color: #98a69e; font-size: 8px; }
.family-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #248566; background: #e5f3eb; font-size: 16px; }
.family-empty { min-height: 115px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 13px; padding: 12px; border: 1px dashed #e2ebe5; border-radius: 8px; background: #fbfdfb; text-align: center; }
.family-empty-first { min-height: 112px; }
.family-lock { color: #63b18c; font-size: 21px; }
.family-empty p { max-width: 210px; margin: 6px 0 0; color: #8a9a92; font-size: 10px; line-height: 1.55; }
.family-create-form { display: grid; gap: 7px; margin-top: 9px; }
.family-create-form input { height: 39px; font-size: 11px; }
.family-create-form .button { min-height: 38px; margin: 0; font-size: 10px; }
.family-secure { display: flex; align-items: center; gap: 6px; margin-top: 13px; color: #93a199; font-size: 8px; }
.family-secure .secure-icon { font-size: 12px; }
.family-summary { display: flex; align-items: center; gap: 10px; margin: 23px 0 10px; }
.family-avatar-stack { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: #236d54; background: #dff1e7; box-shadow: 0 0 0 1px #d5e9dd; font-size: 10px; font-weight: 700; }
.family-summary > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.family-summary strong { color: #40584f; font-size: 11px; }
.family-summary > div:last-child span { color: #92a097; font-size: 9px; }
.family-summary + .family-empty { min-height: 110px; }
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.56fr) minmax(290px, .84fr); gap: 14px; margin-top: 15px; }
.welcome-card { min-height: 118px; display: flex; align-items: center; gap: 17px; padding: 19px 20px; }
.welcome-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: #1a8a67; background: #e2f3e9; font-size: 17px; }
.welcome-card h2 { font-size: 13px; }
.welcome-card p { max-width: 460px; margin: 5px 0 0; color: #899991; font-size: 9px; line-height: 1.65; }
.welcome-arrow { align-self: flex-start; margin-left: auto; color: #85b99e; font-size: 15px; }
.security-card { min-height: 118px; padding: 20px; }
.security-items { display: grid; gap: 9px; margin-top: 13px; }
.security-items > div { display: flex; align-items: center; gap: 8px; }
.security-items > div > span { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #16825f; background: #e6f5ec; font-size: 9px; font-weight: 700; }
.security-items p { margin: 0; color: #76887f; font-size: 9px; }
.mobile-topbar { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.finance-page { max-width: 1430px; margin: 0 auto; }
.finance-header { align-items: center; margin-bottom: 24px; }
.finance-header .button { min-height: 39px; font-size: 10px; }
.finance-section { min-width: 0; }
.finance-section-primary { margin-bottom: 15px; }
.finance-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.finance-section-heading h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.45px; }
.finance-count { color: #94a39b; font-size: 9px; white-space: nowrap; }
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-card, .form-card { min-width: 0; padding: 17px; border: 1px solid #e8eeea; border-radius: 11px; background: #fff; box-shadow: 0 5px 15px rgba(36, 72, 56, .025); }
.account-card { min-height: 155px; display: flex; flex-direction: column; }
.account-card-top { display: flex; align-items: center; gap: 8px; color: #84968d; font-size: 9px; }
.account-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #16825f; background: #e5f3eb; font-size: 13px; }
.account-card h3 { margin: 14px 0 4px; overflow: hidden; color: #445b51; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-balance { color: #1c5141; font-family: Manrope, sans-serif; font-size: 24px; font-weight: 650; letter-spacing: -.8px; }
.account-balance small { margin-left: 6px; color: #9ba9a1; font-family: 'DM Sans', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.account-card-foot { margin-top: auto; padding-top: 8px; color: #9aa8a0; font-size: 8px; }
.form-card-heading { display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; }
.form-card-heading strong { color: #41564f; font-size: 12px; }
.compact-form { display: grid; align-content: start; gap: 5px; }
.compact-form label, .finance-form label, .budget-form label, .category-form label { margin-top: 4px; color: #52685e; font-size: 9px; font-weight: 650; }
.compact-form input, .compact-form select, .finance-form input, .finance-form select, .budget-form input, .budget-form select, .category-form input, .category-form select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #e1e9e4; border-radius: 7px; color: #41584f; background: #fbfcfb; font-size: 10px; }
.compact-form input:focus, .compact-form select:focus, .finance-form input:focus, .finance-form select:focus, .budget-form input:focus, .budget-form select:focus, .category-form input:focus, .category-form select:focus { border-color: #6fbf9b; outline: 0; box-shadow: 0 0 0 3px rgba(91, 182, 139, .13); }
.compact-form .button { min-height: 36px; margin-top: 7px; font-size: 9px; }
.finance-work-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; margin-top: 14px; }
.finance-form-section, .finance-list-section { padding: 20px; }
.finance-icon { width: 28px; height: 28px; display: grid; flex: 0 0 28px; place-items: center; border-radius: 8px; color: #248566; background: #e5f3eb; font-size: 15px; }
.finance-form, .budget-form, .category-form { display: grid; gap: 7px; }
.finance-form .button, .budget-form .button, .category-form .button { min-height: 39px; margin-top: 6px; font-size: 9px; }
.form-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-two-columns > div { min-width: 0; display: grid; gap: 7px; }
.inline-note, .budget-empty { padding: 13px; border: 1px dashed #e1ebe4; border-radius: 8px; color: #899a91; background: #fbfdfb; font-size: 10px; line-height: 1.6; }
.budget-list { display: grid; gap: 13px; margin-top: 19px; padding-top: 15px; border-top: 1px solid #edf1ee; }
.budget-empty { padding: 10px 12px; border: 0; background: #fbfcfb; text-align: center; }
.month-filter { display: flex; align-items: center; gap: 5px; }
.month-filter input { width: 118px; height: 30px; padding: 0 6px; border: 1px solid #e7ede9; border-radius: 6px; color: #6b8075; background: #fff; font: inherit; font-size: 8px; }
.month-filter .button { min-height: 30px; padding: 0 8px; font-size: 8px; }
.budget-row { display: grid; gap: 7px; }
.budget-row-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.budget-row-label strong { overflow: hidden; color: #4c6258; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.budget-row-label span { color: #91a097; font-size: 8px; white-space: nowrap; }
.budget-track { height: 5px; overflow: hidden; border-radius: 5px; background: #edf2ee; }
.budget-track span { height: 100%; display: block; border-radius: inherit; background: #43ae7f; }
.budget-track span[class="progress-level-10"] { background: #d89175; }
.progress-level-0 { width: 0; }.progress-level-1 { width: 10%; }.progress-level-2 { width: 20%; }.progress-level-3 { width: 30%; }.progress-level-4 { width: 40%; }.progress-level-5 { width: 50%; }.progress-level-6 { width: 60%; }.progress-level-7 { width: 70%; }.progress-level-8 { width: 80%; }.progress-level-9 { width: 90%; }.progress-level-10 { width: 100%; }
.finance-lower-grid { margin-top: 14px; }
.transaction-list { display: grid; }
.transaction-row { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #eff2f0; }
.transaction-row:first-child { border-top: 0; }
.transaction-mark { width: 29px; height: 29px; display: grid; flex: 0 0 29px; place-items: center; border-radius: 9px; font-size: 14px; }
.transaction-income { color: #188a69; background: #e6f5ec; }
.transaction-expense { color: #b9796c; background: #fbefed; }
.transaction-copy { min-width: 0; display: grid; flex: 1; gap: 4px; }
.transaction-copy strong { overflow: hidden; color: #44594f; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.transaction-copy span { overflow: hidden; color: #95a39b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-amount { color: #556b61; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-income { color: #188a69; }
.planned-transaction-label { color: #a27637; font-weight: 650; }
.transaction-actions { position: relative; flex: 0 0 auto; color: #667b70; }
.transaction-actions summary { padding: 5px 7px; border: 1px solid #e8efea; border-radius: 6px; cursor: pointer; font-size: 8px; font-weight: 650; list-style: none; white-space: nowrap; }
.transaction-actions summary::-webkit-details-marker { display: none; }
.transaction-actions summary::after { content: '⌄'; margin-left: 4px; color: #8d9c94; }
.transaction-actions[open] { z-index: 10; }
.transaction-void-form { position: absolute; top: calc(100% + 5px); right: 0; z-index: 11; width: min(230px, 72vw); display: grid; gap: 7px; padding: 11px; border: 1px solid #e7eee9; border-radius: 9px; background: #fff; box-shadow: 0 10px 28px rgba(35, 62, 49, .14); }
.transaction-void-form label { color: #667b70; font-size: 9px; font-weight: 650; }
.transaction-void-form input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #e1e9e4; border-radius: 6px; color: #40584e; font-size: 10px; }
.transaction-void-form .family-remove-button { justify-self: start; }
.void-history { margin-top: 13px; padding-top: 11px; border-top: 1px solid #edf1ee; }
.void-history > summary { color: #73877c; cursor: pointer; font-size: 9px; font-weight: 650; list-style-position: inside; }
.void-history-list { display: grid; margin-top: 7px; }
.void-history-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 0; border-top: 1px solid #f0f3f1; }
.void-history-row > span { width: 25px; height: 25px; display: grid; flex: 0 0 25px; place-items: center; border-radius: 8px; color: #9a756e; background: #f8efed; font-size: 13px; }
.void-history-row > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.void-history-row > div > strong { overflow: hidden; color: #63756c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.void-history-row > div > span, .void-history-row > div > small { color: #96a39c; font-size: 8px; line-height: 1.45; }
.void-history-row > strong { color: #87948d; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-empty { min-height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; border: 1px dashed #e0eae3; border-radius: 10px; color: #8d9e94; background: #fbfdfb; text-align: center; }
.finance-empty strong { color: #526a5f; font-size: 11px; font-weight: 650; }
.finance-empty > span:last-child { max-width: 230px; margin-top: 5px; font-size: 9px; line-height: 1.55; }
.finance-empty-mark { width: 29px; height: 29px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 9px; color: #248566; background: #e5f3eb; font-size: 18px; }
.finance-empty-wide { min-height: 130px; }
.category-groups { display: grid; gap: 11px; margin-bottom: 15px; }
.category-group > strong { color: #66796f; font-size: 9px; }
.category-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.category-chips span { padding: 5px 7px; border: 1px solid #e8efea; border-radius: 6px; color: #73867c; background: #fbfdfb; font-size: 8px; }
.category-form { padding-top: 14px; border-top: 1px solid #edf1ee; }
.category-submit-wrap { align-self: end; }
.family-page { max-width: 1430px; margin: 0 auto; }
.family-header { align-items: center; margin-bottom: 24px; }
.family-switcher { display: flex; align-items: end; gap: 8px; padding: 8px; border: 1px solid #e7eee9; border-radius: 10px; background: #fff; }
.family-switcher-field { display: grid; gap: 5px; }
.family-switcher-field label { color: #7c8d84; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.family-switcher select, .family-switcher input, .family-month-filter input, .family-form input, .family-form select, .family-role-form select { min-width: 0; height: 39px; padding: 0 11px; border: 1px solid #e1e9e4; border-radius: 7px; color: #40584e; background: #fbfcfb; font-size: 11px; }
.family-switcher select { min-width: 150px; }
.family-switcher .button, .family-month-filter .button { min-height: 35px; padding: 0 12px; font-size: 10px; }
.family-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.family-metric { min-width: 0; min-height: 131px; padding: 17px 18px; border: 1px solid #e7eee9; border-radius: 11px; background: #fff; box-shadow: 0 5px 15px rgba(36, 72, 56, .025); }
.family-metric-main { color: #fff; border-color: #1b765d; background: linear-gradient(140deg, #1d8064, #155d4e); }
.family-metric-top { display: flex; align-items: center; justify-content: space-between; color: #7b8d84; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.family-metric-main .family-metric-top { color: rgba(255,255,255,.76); }
.metric-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #168160; background: #e5f3eb; font-size: 14px; }
.metric-icon-rose { color: #b66f68; background: #faecea; }
.metric-icon-blue { color: #6683a5; background: #eaf1f8; }
.metric-icon-gold { color: #af8a45; background: #f7f1e4; }
.family-metric-main .metric-icon { color: #fff; background: rgba(255,255,255,.15); }
.family-metric > strong { display: block; overflow: hidden; margin-top: 18px; font-family: Manrope, sans-serif; font-size: clamp(22px, 2.3vw, 29px); font-weight: 700; letter-spacing: -1px; text-overflow: ellipsis; white-space: nowrap; }
.family-metric > strong small { font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.family-metric > span { display: block; overflow: hidden; margin-top: 6px; color: #8a9a92; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.family-metric-main > span { color: rgba(255,255,255,.73); }
.family-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); align-items: start; gap: 14px; }
.family-main-column, .family-side-column { display: grid; align-content: start; gap: 14px; min-width: 0; }
.family-panel { min-width: 0; padding: 20px; }
.family-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.family-panel-heading h2 { margin: 5px 0 0; font-family: Manrope, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.5px; }
.family-panel-heading p { margin: 5px 0 0; color: #82928b; font-size: 10px; line-height: 1.55; }
.family-form { display: grid; gap: 7px; }
.family-form label { margin-top: 3px; color: #52685e; font-size: 10px; font-weight: 650; }
.family-form input, .family-form select { width: 100%; }
.family-form input:focus, .family-form select:focus, .family-switcher select:focus, .family-month-filter input:focus, .family-role-form select:focus { border-color: #6fbf9b; outline: 0; box-shadow: 0 0 0 3px rgba(91, 182, 139, .13); }
.family-form .button { min-height: 40px; margin-top: 6px; font-size: 10px; }
.family-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.family-form-pair > div { display: grid; gap: 6px; min-width: 0; }
.family-transaction-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; column-gap: 10px; }
.family-transaction-form > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.family-transaction-form > select[name="kind"] { grid-column: 1; grid-row: 2; }
.family-transaction-form > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.family-transaction-form > select[name="category_id"] { grid-column: 2; grid-row: 2; }
.family-transaction-form > label:nth-of-type(3) { grid-column: 1; grid-row: 3; }
.family-transaction-form > select[name="account_id"] { grid-column: 2; grid-row: 3; }
.family-transaction-form > label:nth-of-type(4) { grid-column: 1 / -1; grid-row: 4; }
.family-transaction-form > input[name="description"] { grid-column: 1 / -1; grid-row: 5; }
.family-transaction-form > .family-form-pair { grid-column: 1 / -1; grid-row: 6; }
.family-transaction-form > button { grid-column: 1 / -1; grid-row: 7; }
.family-transfer-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 9px 10px; }
.family-transfer-form > div { display: grid; gap: 6px; min-width: 0; }
.family-transfer-form > .family-form-pair, .family-transfer-form > button, .family-transfer-form > .family-form-hint { grid-column: 1 / -1; }
.family-form-hint { color: #8a9a92; font-size: 9px; line-height: 1.5; }
.family-account-list { display: grid; }
.family-account-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 0; border-top: 1px solid #edf1ee; }
.family-account-mark { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; border-radius: 9px; color: #4d9076; background: #eaf5ee; font-size: 13px; }
.family-account-row > div { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.family-account-row > div strong { overflow: hidden; color: #40574e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.family-account-row > div > span { color: #91a098; font-size: 8px; }
.family-default-chip { margin-left: 4px; padding: 2px 5px; border-radius: 5px; color: #418165; background: #edf7f0; font-size: 7px; font-weight: 600; }
.family-account-balance { color: #40574e; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.family-account-balance small { color: #8a9a92; font-size: 8px; font-weight: 500; }
.family-account-form { margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf1ee; }
.family-account-form-heading { display: block; margin-bottom: 7px; color: #52685e; font-size: 10px; font-weight: 650; }
.family-account-entry { min-width: 0; }
.family-opening-balance-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(76px, .8fr) auto; align-items: center; gap: 6px; margin: -2px 0 9px 39px; }
.family-opening-balance-form label { color: #8a9a92; font-size: 8px; }
.family-opening-balance-form input { width: 100%; min-width: 0; height: 31px; padding: 0 7px; border: 1px solid #e1e9e4; border-radius: 6px; color: #40584e; font-size: 9px; }
.family-opening-balance-form .button { min-height: 31px; margin: 0; padding: 0 8px; font-size: 8px; }
.family-account-create-fields { grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr) auto; align-items: end; }
.family-account-create-fields > div { display: grid; gap: 5px; min-width: 0; }
.family-account-create-fields label { margin-top: 0; color: #7d8e85; font-size: 8px; }
.family-list-heading { align-items: center; }
.family-period-chip { padding: 7px 10px; border: 1px solid #e8efea; border-radius: 7px; color: #75877e; background: #fbfdfb; font-size: 9px; white-space: nowrap; }
.family-month-filter { display: flex; align-items: end; gap: 6px; }
.family-month-filter input { width: 133px; height: 35px; }
.family-transaction-list { display: grid; }
.family-transaction-row { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px 0; border-top: 1px solid #edf1ee; }
.family-transaction-mark { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; border-radius: 10px; color: #a56e69; background: #fbefed; font-size: 15px; }
.family-transaction-mark.is-income { color: #268466; background: #e7f4ec; }
.family-transaction-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.family-transaction-copy strong { overflow: hidden; color: #40574e; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.family-transaction-copy span { overflow: hidden; color: #91a098; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.family-transaction-amount { color: #6d504e; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.family-transaction-amount.is-income { color: #188a69; }
.family-transaction-amount small { font-size: 8px; font-weight: 500; }
.family-budget-list, .family-goal-list { display: grid; gap: 14px; }
.family-budget-row { display: grid; gap: 7px; }
.family-budget-label, .family-goal-heading, .family-goal-totals { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.family-budget-label strong, .family-goal-heading strong { color: #4c6259; font-size: 10px; font-weight: 650; }
.family-budget-label span, .family-goal-totals { color: #8a9a92; font-size: 9px; font-variant-numeric: tabular-nums; }
.family-budget-track { height: 7px; overflow: hidden; border-radius: 8px; background: #edf2ee; }
.family-budget-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7cc9a2, #258667); }
.family-goal-track { height: 6px; margin-top: 9px; }
.family-goal-card { padding: 13px; border: 1px solid #edf1ee; border-radius: 9px; background: #fcfdfc; }
.family-goal-heading span { color: #198163; font-size: 10px; font-weight: 750; }
.family-goal-totals { margin-top: 7px; }
.family-goal-date { margin-top: 6px; color: #9aa79f; font-size: 9px; }
.family-contribution-form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: 11px; }
.family-contribution-form .button { min-height: 34px; margin: 0; padding: 0 12px; font-size: 9px; }
.family-create-goal, .family-compact-form, .family-invite-form, .family-category-form { margin-top: 16px; padding-top: 15px; border-top: 1px solid #edf1ee; }
.family-inline-form { display: grid; grid-template-columns: minmax(95px, .75fr) minmax(0, 1fr) auto; gap: 6px; }
.family-inline-form .button { min-height: 39px; margin: 0; padding: 0 12px; font-size: 9px; }
.family-inline-empty { padding: 15px 12px; border: 1px dashed #e2eae4; border-radius: 8px; color: #82938a; background: #fbfdfb; font-size: 10px; text-align: center; }
.family-member-list { display: grid; }
.family-member-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 0; border-top: 1px solid #edf1ee; }
.family-member-avatar { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; border-radius: 50%; color: #267257; background: #e5f3eb; font-size: 10px; font-weight: 700; }
.family-member-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.family-member-copy strong { overflow: hidden; color: #465b52; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.family-member-copy span { color: #8d9d95; font-size: 9px; }
.family-role-form { display: flex; align-items: center; gap: 5px; }
.family-role-form select { width: 92px; height: 32px; padding: 0 6px; font-size: 9px; }
.family-role-form .button { min-height: 32px; padding: 0 8px; font-size: 8px; }
.family-remove-button { padding: 6px 8px; border: 0; border-radius: 6px; color: #9a5d58; background: #fbefed; cursor: pointer; font-size: 9px; font-weight: 650; }
.family-remove-button:hover { color: #7e3833; background: #f7e2df; }
.family-form-hint { color: #8c9a93; font-size: 9px; line-height: 1.5; }
.family-invites-heading { margin: 17px 0 5px; color: #71847a; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.family-invitation-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid #edf1ee; }
.family-invitation-row > div { display: grid; gap: 4px; min-width: 0; }
.family-invitation-row strong { overflow: hidden; color: #4b6258; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.family-invitation-row span { color: #94a29b; font-size: 8px; }
.family-category-group { margin-bottom: 11px; }
.family-category-group > strong { color: #72847b; font-size: 9px; }
.invitation-page { min-height: calc(100vh - 145px); display: grid; place-items: center; padding: 50px 0; }
.invitation-card { width: min(100%, 510px); padding: 36px; border: 1px solid #e5ece7; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.invitation-mark { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 13px; color: #198263; background: #e4f3eb; font-size: 22px; }
.invitation-card h1 { margin: 12px 0; font-family: Manrope, sans-serif; font-size: clamp(27px, 4vw, 35px); letter-spacing: -1.2px; }
.invitation-card p { color: #72847b; font-size: 13px; line-height: 1.75; }
.invitation-card p strong { color: #425a50; }
.invitation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.invitation-actions .button { min-height: 40px; }
@media (max-width: 1080px) {
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .finance-header { align-items: flex-start; }
  .finance-work-grid { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .finance-header { flex-direction: column; gap: 14px; }
  .finance-header .button { min-height: 36px; }
  .account-grid { grid-template-columns: 1fr; gap: 9px; }
  .account-card { min-height: 137px; }
  .form-card, .finance-form-section, .finance-list-section { padding: 16px; }
  .finance-section-heading { margin-bottom: 12px; }
  .finance-section-heading h2 { font-size: 15px; }
  .form-two-columns { gap: 8px; }
  .budget-row-label { align-items: flex-start; flex-direction: column; gap: 4px; }
  .transaction-row { gap: 8px; }
  .transaction-copy span { max-width: 180px; }
  .transaction-amount { font-size: 9px; }
  .category-submit-wrap { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .public-frame { padding: 0 4vw; }
  .auth-layout { gap: 5vw; }
  .auth-story { padding-left: 1%; }
  .app-main { padding-right: 27px; padding-left: 27px; }
  .content-grid, .bottom-grid { grid-template-columns: minmax(0, 1.35fr) minmax(270px, .85fr); }
}
@media (max-width: 820px) {
  .public-frame { padding: 0 23px; }
  .public-header { height: 72px; }
  .auth-layout { min-height: initial; grid-template-columns: minmax(0, 1fr) minmax(330px, .92fr); gap: 25px; padding: 47px 0 55px; }
  .auth-story h1 { font-size: 47px; }
  .auth-story > p { font-size: 13px; }
  .auth-panel { padding: 28px 25px; }
  .story-art { transform: scale(.9); transform-origin: left center; }
  .sidebar { width: 220px; }
  .app-main { width: calc(100% - 220px); margin-left: 220px; padding: 31px 21px 17px; }
  .overview-grid { gap: 9px; }
  .overview-card { min-height: 139px; padding: 16px 13px 13px; }
  .card-value { font-size: 23px; }
  .card-foot { font-size: 8px; }
  .status-pill { font-size: 8px; }
  .content-grid, .bottom-grid { grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: 9px; }
  .activity-card, .family-card { padding: 17px 15px; }
}
@media (max-width: 640px) {
  .public-frame { padding: 0 18px; }
  .public-header { height: 68px; }
  .public-header-note { font-size: 10px; }
  .brand-name { font-size: 15px; }
  .brand-mark { width: 25px; height: 25px; }
  .auth-layout, .auth-layout-compact { display: block; padding: 34px 0 42px; }
  .auth-story { min-height: auto; padding: 0; overflow: visible; }
  .auth-story h1 { margin: 13px 0 8px; font-size: 35px; letter-spacing: -1.8px; }
  .auth-story > p { max-width: 420px; font-size: 12px; line-height: 1.65; }
  .story-art, .story-caption, .benefit-list, .secure-callout { display: none; }
  .auth-panel { max-width: none; margin-top: 25px; padding: 24px 20px 22px; border-radius: 13px; }
  .auth-heading { margin-bottom: 20px; }
  .auth-heading h2 { font-size: 24px; }
  .auth-heading p { font-size: 12px; }
  .mobile-eyebrow { display: block; margin-bottom: 8px; }
  .form-stack { gap: 8px; }
  .form-stack input { height: 45px; }
  .secure-hint { margin-top: 21px; padding-top: 16px; }
  .public-footer { font-size: 10px; }
  .flash { width: 100%; }
  .sidebar { width: min(290px, 84vw); visibility: hidden; box-shadow: 15px 0 40px rgba(24, 58, 46, .1); transform: translateX(-105%); transition: transform .22s ease, visibility .22s ease; }
  .sidebar.is-open { visibility: visible; transform: translateX(0); }
  .auth-switch-tight { margin-top: 9px; }
  .brand-sidebar { margin-bottom: 42px; }
  .app-main { width: 100%; margin-left: 0; padding: 0 16px 18px; }
  .mobile-topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px 25px; padding: 0 17px; border-bottom: 1px solid #e8ede9; background: rgba(255,255,255,.78); }
  .menu-button { width: 36px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e5ece7; border-radius: 8px; background: white; }
  .menu-button span { width: 15px; height: 1.5px; border-radius: 2px; background: #527165; }
  .dashboard-header { align-items: flex-start; margin-bottom: 19px; }
  .dashboard-eyebrow { font-size: 8px; }
  .dashboard-header h1 { font-size: 26px; letter-spacing: -1.1px; }
  .dashboard-header p { max-width: 280px; font-size: 10px; line-height: 1.55; }
  .header-date { display: none; }
  .overview-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .balance-card { grid-column: 1 / -1; min-height: 135px; }
  .overview-card:not(.balance-card) { min-height: 125px; }
  .card-label { font-size: 8px; }
  .card-value { font-size: 24px; }
  .card-foot { gap: 4px; font-size: 8px; }
  .card-period { text-align: right; }
  .status-pill { font-size: 8px; }
  .content-grid, .bottom-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .activity-card, .family-card { min-height: auto; padding: 18px 16px 15px; }
  .activity-card { min-height: 290px; }
  .section-heading h2 { font-size: 15px; }
  .period-select { gap: 5px; padding: 6px 7px; font-size: 8px; }
  .chart-empty { height: 210px; }
  .family-card { padding-bottom: 16px; }
  .family-empty { min-height: 94px; }
  .welcome-card { min-height: 105px; padding: 16px; }
  .welcome-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .welcome-card h2 { font-size: 12px; }
  .welcome-card p { font-size: 8px; }
  .security-card { min-height: 105px; padding: 17px; }
  .chart-plot { height: 158px; }
  .trend-bars { height: 128px; }
  .month-filter input { width: 105px; }
}
@media (max-width: 1080px) {
  .family-summary-grid { gap: 9px; }
  .family-metric { padding: 15px; }
  .family-columns { grid-template-columns: minmax(0, 1fr) minmax(300px, .88fr); gap: 10px; }
}
@media (max-width: 820px) {
  .family-columns { grid-template-columns: 1fr; }
  .family-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .family-side-column > .family-panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .family-header { flex-direction: column; align-items: stretch; gap: 13px; }
  .family-header h1 { overflow-wrap: anywhere; }
  .family-switcher { align-items: end; }
  .family-switcher-field { flex: 1; min-width: 0; }
  .family-switcher select, .family-switcher input { width: 100%; min-width: 0; }
  .family-summary-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .family-metric { min-height: 116px; padding: 13px; }
  .family-metric > strong { margin-top: 15px; font-size: 21px; }
  .family-metric-top { font-size: 8px; }
  .family-columns, .family-main-column, .family-side-column { gap: 9px; }
  .family-side-column { grid-template-columns: 1fr; }
  .family-side-column > .family-panel:last-child { grid-column: auto; }
  .family-panel { padding: 16px; }
  .family-panel-heading { margin-bottom: 13px; }
  .family-panel-heading h2 { font-size: 15px; }
  .family-list-heading { align-items: flex-start; flex-direction: column; }
  .family-month-filter { width: 100%; }
  .family-month-filter input { flex: 1; width: auto; }
  .family-transaction-form { column-gap: 7px; }
  .family-transfer-form { grid-template-columns: 1fr; gap: 8px 7px; }
  .family-form-pair { gap: 7px; }
  .family-transaction-row { gap: 8px; }
  .family-transaction-copy span { max-width: 190px; }
  .family-transaction-amount { font-size: 9px; }
  .family-role-form { gap: 4px; }
  .family-role-form select { width: 76px; }
  .family-role-form .button { padding: 0 6px; }
  .family-inline-form { grid-template-columns: minmax(85px, .7fr) minmax(0, 1fr); }
  .family-inline-form .button { grid-column: 1 / -1; }
  .family-account-create-fields { grid-template-columns: minmax(0, 1fr) minmax(85px, .8fr); }
  .family-account-create-fields .button { grid-column: 1 / -1; }
  .family-opening-balance-form { grid-template-columns: minmax(0, 1fr) minmax(68px, .8fr); margin-left: 39px; }
  .family-opening-balance-form .button { grid-column: 1 / -1; }
  .invitation-page { min-height: calc(100vh - 125px); padding: 28px 0; }
  .invitation-card { padding: 25px 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}