/* Comfortable typography and motion, layered over the original layout. */
:root { --muted: #667080; --shadow: 0 5px 26px #25284405; }
html { background: var(--bg); }
body { font-size: 16px; }
small { font-size: 13px; line-height: 1.65; }
h1 { font-size: clamp(32px, 2.6vw, 42px); letter-spacing: -1.2px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
.sidebar { width: 272px; padding: 34px 24px; }
.brand-caption { font-size: 10px; }
.family-switch { font-size: 14px; padding: 16px 12px; }
.family-switch small { font-size: 11px; }
nav { gap: 9px; }
nav a { font-size: 16px; padding: 14px 17px; min-height: 50px; }
nav a > span { font-size: 22px; }
nav a.selected { box-shadow: inset 3px 0 var(--purple); }
.private-note { font-size: 14px; }
.user { font-size: 14px; }
.user small { font-size: 12px; }
.avatar { width: 42px; height: 42px; flex-shrink: 0; }
.theme-toggle { font-size: 15px; min-height: 44px; align-items: center; }
main { margin-left: 272px; padding: clamp(28px, 3vw, 48px); max-width: 2080px; }
.eyebrow { font-size: 11px; letter-spacing: 1.8px; }
.page-header { margin-bottom: 32px; }
.page-header p { font-size: 15px; margin-top: 9px; }
.date-pill { font-size: 14px; padding: 13px 17px; }
.button { font-size: 15px; min-height: 46px; padding: 12px 20px; border-radius: 11px; }
.button:active { transform: translateY(1px) scale(.98); }
.card { padding: 28px; border-radius: 18px; }
.stat { padding: 24px; }
.stat-label { font-size: 14px; margin-bottom: 18px; min-height: 34px; }
.stat-icon { width: 36px; height: 36px; font-size: 20px; }
.stat strong { font-size: clamp(28px, 2.25vw, 40px); }
.stat small { font-size: 12px; margin-top: 12px; }
.daily strong span { font-size: 13px; }
.summary-grid { gap: 22px; margin-bottom: 28px; }
.dashboard-grid { gap: 26px; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
.card-heading { gap: 18px; margin-bottom: 27px; }
.card-heading p { font-size: 13px; line-height: 1.7; }
.text-link { font-size: 14px; }
.budget-visual { gap: 32px; min-height: 250px; }
.donut { width: 198px; height: 198px; }
.donut > div { width: 163px; height: 163px; }
.donut strong { font-size: 44px; }
.donut small { font-size: 12px; }
.budget-legend > div:not(.forecast) { font-size: 13px; gap: 10px; margin: 19px 0; }
.budget-legend b { font-size: 14px; }
.forecast { padding: 16px 19px; }
.forecast > span { font-size: 13px; }
.forecast strong { font-size: 25px; }
.forecast small { font-size: 12px; }
.capital-card .eyebrow { font-size: 11px; }
.capital-total { font-size: 39px; }
.capital-row { font-size: 15px; padding: 15px 0; }
.transaction-row { padding: 17px 0; gap: 15px; }
.transaction-icon { width: 45px; height: 45px; font-size: 22px; }
.transaction-info b, .transaction-value b { font-size: 15px; }
.transaction-info small, .transaction-value small { font-size: 12px; margin-top: 5px; }
.transaction-value { flex-shrink: 0; }
.goal { padding: 16px 0 24px; }
.row-between { font-size: 14px; }
.progress { height: 9px; margin-top: 17px; }
.muted { font-size: 14px; }
.allocation { font-size: 14px; padding: 19px; }
.allocation b { font-size: 26px; }
.allocation small { font-size: 12px; }
.empty { padding: 42px 12px; }
.empty > span { font-size: 42px; }
.empty h3 { font-size: 18px; }
.empty p { font-size: 14px; }
.notice { font-size: 14px; line-height: 1.8; }
footer { font-size: 12px; }
.entity-row { padding: 24px 0; }
.entity-main p { font-size: 15px; }
.entity-main strong { font-size: 28px; }
.entity-actions { font-size: 14px; min-height: 44px; }
.entity-actions a, .row-delete a { padding: 8px 0; }
.row-delete { font-size: 13px; }
.form-card { max-width: 950px; }
.field label { font-size: 15px; }
input, select, textarea { font-size: 16px; min-height: 48px; padding: 13px 15px; }
input[type=checkbox] { min-height: 24px; }
.field small { font-size: 12px; }
.errorlist { font-size: 14px; }
.back-link { font-size: 15px; }
.check-button { width: 42px; height: 42px; }
.shopping-row { padding: 18px 0; }
.badge { font-size: 11px; }
.pagination { font-size: 15px; }
dialog { width: min(730px, calc(100% - 32px)); padding: 32px; }
dialog h2 { font-size: 27px; }
.icon-button { min-width: 44px; min-height: 44px; }
.auth-main { margin: 0; max-width: none; padding: 80px 40px; gap: clamp(50px, 7vw, 130px); }
.login-intro { width: 400px; flex-shrink: 0; }
.login-intro h1 { font-size: clamp(48px, 4vw, 64px); }
.login-intro p { font-size: 17px; }
.login-card { width: 470px; padding: 36px; flex-shrink: 0; }
.login-card h2, .registration-card h2 { font-size: 28px; margin: 27px 0 10px; }
.login-card p, .auth-description { font-size: 15px; line-height: 1.8; }
.login-card .field { margin-bottom: 22px; }
.login-card .wide { justify-content: space-between; margin-bottom: 0; }
.auth-theme-toggle { position: absolute; right: 30px; top: 20px; padding: 10px 16px; border-radius: 12px; z-index: 2; }
.auth-tabs { display: flex; padding: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; gap: 5px; }
.auth-tabs > * { text-align: center; padding: 11px 15px; flex: 1; border-radius: 8px; font-size: 15px; font-weight: 700; color: var(--muted); }
.auth-tabs [aria-current] { background: var(--surface); color: var(--purple); box-shadow: 0 2px 8px #00000008; }
.auth-tabs a:hover { color: var(--purple); }
.register-callout { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.register-callout b { font-size: 16px; }
.register-callout p { font-size: 14px; margin: 7px 0 17px; }
.register-callout .button { font-size: 15px; }
.registration-card { width: min(640px, 100%); padding: 34px; }
.registration-intro h1 { font-size: clamp(40px, 3.4vw, 52px); }
.registration-form { margin-top: 25px; }
.registration-form .form-grid { gap: 20px; }
.field-wide { grid-column: 1 / -1; }
.optional { color: var(--muted) !important; font-size: 11px; font-weight: 400; }
.approval-note { display: flex; gap: 12px; background: var(--soft); padding: 16px 18px; border-radius: 12px; margin: 24px 0; }
.approval-note > span { font-size: 26px; color: var(--purple); }
.approval-note p { font-size: 13px; line-height: 1.75; color: var(--text); }
.auth-footer { text-align: center; font-size: 14px; margin-top: 25px; }
.auth-footer a { color: var(--purple); font-weight: 700; }
.registration-steps { list-style: none; padding: 0; margin: 34px 0 0; }
.registration-steps li { display: flex; gap: 15px; margin: 24px 0; align-items: center; }
.registration-steps li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--soft); color: var(--purple); font-size: 15px; font-weight: 800; flex-shrink: 0; }
.registration-steps b { font-size: 15px; }
.registration-steps small { margin-top: 3px; }
.pending-card { max-width: 580px; padding: 40px; text-align: center; }
.pending-card .brand { justify-content: center; }
.pending-card h1 { font-size: 33px; margin: 22px 0 15px; }
.pending-card > p { font-size: 16px; line-height: 1.85; }
.success-orbit { width: 104px; height: 104px; margin: 35px auto 28px; padding: 15px; border: 1px dashed #b7a5ed; border-radius: 50%; }
.success-orbit span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--soft); color: var(--purple); font-size: 32px; }
[data-theme=dark] { --muted: #b0b4c5; --shadow: 0 5px 26px #0000000a; }
[data-theme=dark] .donut { background: conic-gradient(var(--purple) calc(var(--progress)*1%), #393249 0); }
[data-theme=dark] .pale { background: #675c7f; }
[data-theme=dark] .green { background: #253f38; color: #96dbb9; }
[data-theme=dark] .peach { background: #43332d; color: #efb69a; }
[data-theme=dark] .violet { background: #3a3152; color: #c8b8fa; }
[data-theme=dark] .sidebar nav a { color: #b0b4c5; }
[data-theme=dark] .sidebar nav a.selected { color: var(--purple); }
.theme-changing, .theme-changing body, .theme-changing .card, .theme-changing .sidebar { transition: background-color .24s, color .24s, border-color .24s; }

/* Short motion with a clear endpoint; all actions remain native links/forms. */
@media (prefers-reduced-motion: no-preference) {
  .card { animation: surface-enter .48s cubic-bezier(.2,.75,.25,1) both; animation-delay: var(--reveal-delay, 0ms); }
  .page-header { animation: surface-enter .35s ease-out both; }
  .button, .check-button, nav a, .transaction-icon { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
  .primary:hover { box-shadow: 0 7px 23px #7260d63b; transform: translateY(-2px); }
  nav a:hover > span { transform: translateX(2px); }
  nav a > span { transition: transform .18s; }
  .transaction-row:hover .transaction-icon { transform: scale(1.08) rotate(-4deg); }
  .shopping-row.htmx-added { animation: row-enter .3s ease both; }
  .shopping-row.completed .check-button { animation: check-pop .35s ease both; }
  .progress span.progress-enter { animation: progress-grow .75s cubic-bezier(.2,.7,.3,1) both; transform-origin: left; }
  .donut { animation: ring-enter .65s ease-out both; }
  .goal-achieved { position: relative; }
  .goal-achieved::after { content: '✦'; position: absolute; right: 0; top: 0; color: var(--purple); animation: goal-spark .9s ease both; pointer-events: none; }
  .login-art > div { animation: progress-rise .75s cubic-bezier(.2,.7,.3,1) both; transform-origin: bottom; }
  .login-art > div:nth-of-type(2) { animation-delay: .06s; }
  .login-art > div:nth-of-type(3) { animation-delay: .12s; }
  .login-art > div:nth-of-type(4) { animation-delay: .18s; }
  .registration-steps li { animation: surface-enter .45s both; }
  .registration-steps li:nth-child(2) { animation-delay: .1s; }
  .registration-steps li:nth-child(3) { animation-delay: .2s; }
  .success-orbit { animation: orbit-enter .65s ease both; }
  dialog[open] { animation: dialog-enter .22s cubic-bezier(.2,.75,.25,1) both; }
  dialog[open]::backdrop { animation: backdrop-enter .22s ease both; }
  dialog[open].closing { animation: dialog-leave .16s ease both; }
  dialog[open].closing::backdrop { animation: backdrop-enter .16s ease reverse both; }
  .transaction-row:first-of-type { animation: row-enter .35s ease both; }
}
@keyframes surface-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes row-enter { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes progress-rise { from { opacity: 0; transform: scaleY(.25); } to { opacity: 1; transform: scaleY(1); } }
@keyframes ring-enter { from { opacity: 0; transform: rotate(-65deg) scale(.95); } to { opacity: 1; transform: rotate(-40deg) scale(1); } }
@keyframes check-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.18); } }
@keyframes goal-spark { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 45% { opacity: 1; transform: scale(1.7) rotate(15deg); } 100% { opacity: 0; transform: translateY(-20px) scale(.7); } }
@keyframes orbit-enter { from { opacity: 0; transform: scale(.7) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dialog-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1550px) {
  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat strong { font-size: 36px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .budget-visual { flex-wrap: wrap; gap: 20px; }
  .budget-legend { min-width: 220px; max-width: none; }
  .donut { width: 174px; height: 174px; }
  .donut > div { width: 143px; height: 143px; }
  .budget-legend b { margin-left: auto; }
}
@media (max-width: 1150px) {
  .sidebar { width: 230px; padding: 28px 17px; }
  main { margin-left: 230px; padding: 28px; }
  nav a { font-size: 15px; padding: 13px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .budget-visual { flex-wrap: nowrap; }
  .card { padding: 24px; }
  .header-actions { flex-direction: column; align-items: flex-end; gap: 10px; }
  .auth-main { margin: 0; padding: 80px 28px 40px; gap: 40px; }
  .login-intro { width: 310px; }
  .login-intro h1 { font-size: 46px; }
  .login-card { width: 420px; padding: 30px; }
  .registration-card { padding: 28px; }
}
@media (max-width: 900px) {
  .auth-main { flex-direction: column; gap: 32px; }
  .login-intro { width: min(640px,100%); }
  .login-intro .eyebrow { margin-top: 27px; }
  .login-intro h1 { font-size: 40px; margin: 18px 0; }
  .login-intro h1 br { display: none; }
  .login-intro p, .login-art, .registration-steps { display: none; }
  .login-card { width: min(470px,100%); }
  .auth-main:has(.login-card) .login-intro { max-width: 470px; }
  .stat strong { font-size: 30px; }
  .stat-label { font-size: 13px; }
  .stat-label .stat-icon { display: none; }
  .budget-visual { flex-wrap: wrap; }
  .card-heading { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .sidebar { position: relative; width: 100%; padding: 19px 18px 13px; }
  .sidebar nav { margin-top: 18px; padding-bottom: 5px; gap: 7px; }
  .sidebar nav a { font-size: 14px; padding: 11px 13px; min-height: 44px; gap: 8px; }
  .sidebar nav a > span { font-size: 18px; width: 18px; }
  .sidebar nav a.selected { box-shadow: inset 0 -2px var(--purple); }
  .sidebar-bottom { top: 14px; right: 17px; }
  .theme-toggle { font-size: 24px; }
  .auth-theme-toggle { position: absolute; top: 14px; right: 14px; padding: 8px; }
  .auth-theme-toggle span { display: none; }
  main { margin: 0; padding: 28px 18px; }
  h1 { font-size: 31px; }
  h2 { font-size: 20px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.1px; }
  .page-header { gap: 14px; margin-bottom: 26px; }
  .page-header p { font-size: 13px; line-height: 1.7; max-width: 230px; }
  .date-pill { font-size: 12px; padding: 8px 10px; }
  .header-actions .button { font-size: 14px; min-height: 44px; padding: 10px 14px; }
  .summary-grid { gap: 12px; margin-bottom: 20px; }
  .stat { padding: 18px 15px; }
  .stat strong { font-size: 27px; letter-spacing: -.9px; }
  .stat-label { font-size: 12px; min-height: 38px; align-items: flex-start; margin-bottom: 12px; }
  .stat small { font-size: 12px; line-height: 1.6; }
  .daily strong span { display: block; font-size: 12px; margin-top: 3px; }
  .dashboard-grid { gap: 20px; }
  .card { padding: 23px 20px; border-radius: 16px; }
  .card.stat { padding: 18px 15px; }
  .card-heading { margin-bottom: 23px; gap: 12px; }
  .card-heading p { font-size: 13px; }
  .text-link { font-size: 13px; }
  .budget-visual { gap: 24px; }
  .donut { width: 166px; height: 166px; margin: 0 auto; }
  .donut > div { width: 136px; height: 136px; }
  .donut strong { font-size: 39px; }
  .donut small { font-size: 12px; }
  .budget-legend { min-width: 100%; }
  .budget-legend > div:not(.forecast) { font-size: 13px; }
  .budget-legend b { font-size: 14px; }
  .forecast > span, .forecast small { font-size: 12px; }
  .forecast strong { font-size: 24px; }
  .capital-total { font-size: 34px; }
  .capital-row { font-size: 14px; }
  .transaction-row { gap: 10px; }
  .transaction-icon { width: 37px; height: 37px; font-size: 20px; }
  .transaction-info b, .transaction-value b { font-size: 13px; }
  .transaction-info small, .transaction-value small { font-size: 11px; }
  .row-between, .muted { font-size: 13px; }
  .entity-row { flex-direction: column; gap: 10px; }
  .entity-actions { flex-direction: row; justify-content: flex-end; gap: 24px; }
  .shopping-row { flex-wrap: wrap; gap: 12px; }
  .shopping-row > div { min-width: calc(100% - 65px); }
  .shopping-row > a { font-size: 13px; padding: 7px 0; }
  .shopping-row > a:first-of-type { margin-left: 54px; }
  .notice { font-size: 13px; }
  .form-grid { gap: 20px; }
  dialog { padding: 23px; max-height: 90dvh; }
  dialog .form-grid { margin-top: 24px; }
  dialog h2 { font-size: 24px; }
  .auth-main { padding: 75px 18px 35px; gap: 25px; }
  .auth-main .login-intro { max-width: 470px; }
  .login-intro h1 { font-size: 36px; }
  .login-card, .registration-card { padding: 25px 22px; }
  .login-card h2, .registration-card h2 { font-size: 25px; }
  .registration-card .form-grid { grid-template-columns: 1fr; }
  .login-card p, .auth-description { font-size: 14px; }
  .auth-tabs > * { font-size: 15px; padding: 10px; }
  .auth-footer { font-size: 13px; }
  .pending-card { padding: 30px 22px; }
  .pending-card h1 { font-size: 28px; }
  .pending-card > p { font-size: 15px; }
  .approval-note { padding: 15px; }
}
@media (max-width: 370px) {
  .summary-grid { grid-template-columns: 1fr; }
  .stat strong { font-size: 34px; }
  .stat-label { min-height: 0; font-size: 14px; }
  .daily strong span { display: inline; }
  .page-header { flex-wrap: wrap; }
  .header-actions { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .transaction-row { flex-wrap: wrap; }
  .transaction-value { margin-left: 47px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Thumb-friendly navigation, with room for the phone's home indicator. */
.mobile-navigation { display: none; }
#mobile-menu { width: min(100%, 480px); max-width: 100%; margin: auto auto 0; border: 1px solid var(--line); border-radius: 24px 24px 0 0; padding: 24px 22px calc(24px + env(safe-area-inset-bottom)); background: var(--surface); color: var(--text); max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-menu-heading h2 { font-size: 21px; }
.mobile-menu-heading button { min-width: 44px; min-height: 44px; }
.mobile-family { margin: 0 0 20px; overflow-wrap: anywhere; }
.mobile-menu-links { display: grid; gap: 8px; }
.mobile-menu-links a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; margin: 0; font-size: 16px; background: var(--bg); border-radius: 12px; }
.mobile-menu-links a > span:first-child { color: var(--purple); font-size: 24px; }
.mobile-menu-links a > span:last-child { margin-left: auto; }
.mobile-menu-links a[aria-current] { background: var(--soft); color: var(--purple); }
#mobile-menu .mobile-theme { display: flex; align-items: center; gap: 14px; min-height: 52px; margin-top: 16px; font-size: 22px; }
#mobile-menu .mobile-theme span { display: inline; font-size: 16px; }
.mobile-account { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; margin-top: 12px; border-top: 1px solid var(--line); }
.mobile-account > span { min-width: 0; overflow-wrap: anywhere; }
.mobile-account small { margin-top: 4px; }
html.mobile-menu-open { overflow: hidden; }
@media (max-width: 700px) {
  .sidebar { display: none; }
  main:not(.auth-main) { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mobile-navigation { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; margin: 0; padding: 8px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -5px 24px #0000000a; }
  .mobile-navigation > a, .mobile-navigation > button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; min-width: 0; min-height: 54px; padding: 4px 2px; margin: 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.3; text-decoration: none; }
  .mobile-navigation > a > span, .mobile-navigation > button > span { font-size: 24px; line-height: 26px; width: auto; }
  .mobile-navigation > [aria-current], .mobile-navigation > .selected, .mobile-navigation > [aria-expanded=true] { background: var(--soft); color: var(--purple); }
  .mobile-navigation > :active { transform: scale(.96); }
  .toasts, #network-status { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* Prevent long money values, native date controls and flex rows from widening Android's viewport. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; width: 100%; }
main, .card, .form-grid > *, .header-actions, .page-header > *, .card-heading > * { min-width: 0; }
input, select, textarea { max-width: 100%; }
.user-text { white-space: normal; overflow-wrap: anywhere; margin: 10px 0; }
.section-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.goal-comments { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.goal-comments summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--purple); }
.goal-comment { padding: 14px 0; border-bottom: 1px solid var(--line); }
.goal-comments > .button { margin-top: 14px; }
@media (max-width: 700px) {
  main { width: 100%; max-width: 100%; }
  input, select, textarea { font-size: 16px; min-width: 0; }
  .stat strong, .capital-total, .entity-main strong { white-space: normal; overflow-wrap: anywhere; }
  .stat strong { font-size: clamp(22px, 6vw, 30px); }
  .card-heading, .form-actions, .filters, .row-between, .capital-row { flex-wrap: wrap; }
  .card-heading .button, .form-actions .button { white-space: normal; }
  h1, h2, h3, p, .notice, .entity-main, .capital-row, .row-between { overflow-wrap: anywhere; }
  .filters input, .filters select { width: 100%; flex-basis: 100%; }
  .transaction-row { flex-wrap: wrap; }
  .transaction-info { flex: 1; }
  .transaction-value { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .budget-legend b { white-space: normal; overflow-wrap: anywhere; }
  .mobile-navigation { width: 100%; max-width: 100%; }
  #mobile-menu { max-height: calc(100dvh - 16px); }
  .auth-main { min-height: 100dvh; }
}