/* Design System V1: visual tokens and reusable, accessible components. */
:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem;
  --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(15 35 31 / 8%); --shadow-md: 0 8px 24px rgb(15 35 31 / 10%); --shadow-lg: 0 20px 50px rgb(15 35 31 / 15%);
  --background: #f5f8f7; --surface: #fff; --surface-alt: #edf5f2; --text: #17332e; --text-muted: #536863; --border: #c9d8d3;
  --primary: #087f72; --primary-hover: #05665b; --primary-soft: #d9f3ed; --focus: #0b8f7e;
  --danger: #b42318; --danger-soft: #fde9e7; --warning: #9a6700; --warning-soft: #fff2d2; --success: #087443; --success-soft: #dcf7e9; --info: #175cd3; --info-soft: #e8f1ff;
}
body[data-theme="dark"] { color-scheme: dark; --background: #10201d; --surface: #162c27; --surface-alt: #1c3832; --text: #f0f8f5; --text-muted: #b6ccc5; --border: #3b5951; --primary: #4bd3be; --primary-hover: #7aead8; --primary-soft: #173f37; --focus: #8bf1df; --danger: #ffb4ab; --danger-soft: #4c2625; --warning: #ffd48a; --warning-soft: #493813; --success: #8be5b2; --success-soft: #173f2a; --info: #b5ccff; --info-soft: #203961; --shadow-sm: 0 1px 2px rgb(0 0 0 / 25%); --shadow-md: 0 8px 24px rgb(0 0 0 / 28%); --shadow-lg: 0 20px 50px rgb(0 0 0 / 42%); }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
body { min-height: 100vh; margin: 0; background: var(--background); color: var(--text); font-family: var(--font-sans); line-height: 1.55; }
button, input, select, textarea { font: inherit; } button, select { cursor: pointer; }
a { color: var(--primary-hover); text-underline-offset: .16em; } body[data-theme="dark"] a { color: var(--primary); } a:hover { color: var(--primary); }
h1, h2, h3 { color: var(--text); line-height: 1.15; letter-spacing: -.025em; } h1 { max-width: 17ch; margin: 0 0 var(--space-4); font-size: clamp(2rem, 5vw, 3.5rem); } h2 { margin: 0 0 var(--space-3); font-size: clamp(1.25rem, 2vw, 1.5rem); } p { margin: 0 0 var(--space-4); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 50; top: var(--space-3); left: var(--space-3); transform: translateY(-200%); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--text); color: var(--surface); font-weight: 700; }.skip-link:focus { transform: translateY(0); }
.container { width: min(1200px, calc(100% - 2rem)); margin-inline: auto; }.page { min-height: calc(100vh - 10rem); padding-block: clamp(var(--space-5), 5vw, var(--space-8)); }
.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }.nav { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); }.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 800; text-decoration: none; white-space: nowrap; }.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-size: .9rem; }.nav-actions, .actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }.nav-actions form { margin: 0; }.nav-actions > a:not(.button) { font-weight: 650; text-decoration: none; }
.button, .icon-button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); font-weight: 700; line-height: 1; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }.button { padding: .72rem 1rem; background: var(--primary); color: #fff; }.button:hover { transform: translateY(-1px); background: var(--primary-hover); color: #fff; }.button-secondary { border-color: var(--border); background: var(--surface); color: var(--text); }.button-secondary:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }.button-small { min-height: 2.3rem; padding: .5rem .75rem; font-size: .9rem; }.icon-button { width: 2.5rem; min-height: 2.5rem; padding: 0; border-color: var(--border); background: var(--surface); color: var(--text); font-size: 1.2rem; }.icon-button:hover { border-color: var(--primary); background: var(--primary-soft); }.link-button { padding: 0; border: 0; background: transparent; color: var(--primary-hover); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr); gap: clamp(var(--space-6), 7vw, 5rem); align-items: center; }.lead { max-width: 43rem; color: var(--text-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }.eyebrow { margin-bottom: var(--space-2); color: var(--primary-hover); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.privacy-card, .panel, .auth-card, .metric { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }.privacy-card, .panel, .auth-card { padding: clamp(var(--space-5), 4vw, var(--space-6)); }.privacy-card { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: linear-gradient(145deg, var(--surface), var(--primary-soft)); }.auth-card { width: min(32rem, 100%); margin-inline: auto; }.panel > :last-child, .auth-card > :last-child { margin-bottom: 0; }.text-muted, .help, .footer, .empty { color: var(--text-muted); }.help { font-size: .875rem; }
.toast-region { position: fixed; z-index: 40; top: 5.25rem; right: max(var(--space-4), calc((100vw - 1200px) / 2)); display: grid; width: min(26rem, calc(100vw - 2rem)); gap: var(--space-2); }.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }.toast-success { border-left-color: var(--success); }.toast-error { border-left-color: var(--danger); }.toast-warning { border-left-color: var(--warning); }.toast-icon { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: var(--radius-pill); background: var(--info-soft); color: var(--info); font-weight: 800; }.toast-success .toast-icon { background: var(--success-soft); color: var(--success); }.toast-error .toast-icon { background: var(--danger-soft); color: var(--danger); }.toast-close { width: 2rem; min-height: 2rem; border: 0; background: transparent; }
.app-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }.app-sidebar { position: sticky; top: 5.75rem; display: grid; gap: var(--space-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }.sidebar-heading { display: flex; align-items: center; justify-content: space-between; }.sidebar-close, .sidebar-toggle { display: none; }.app-nav { display: grid; gap: var(--space-1); }.app-nav a { display: flex; min-height: 2.6rem; align-items: center; padding-inline: var(--space-3); border-radius: var(--radius-sm); color: var(--text); font-weight: 700; text-decoration: none; }.app-nav a:hover, .app-nav a:focus-visible { background: var(--primary-soft); color: var(--primary-hover); }.organization-picker { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }.organization-picker label { font-size: .85rem; font-weight: 750; }.app-content { min-width: 0; display: grid; gap: var(--space-5); }.page-heading { display: grid; gap: var(--space-1); }.page-heading h1 { max-width: none; margin: 0; }.page-heading p { margin: 0; color: var(--text-muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }.metric { display: grid; gap: var(--space-2); min-height: 8rem; padding: var(--space-4); }.metric span { color: var(--text-muted); font-size: .9rem; font-weight: 650; }.metric strong { font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.15; }.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.stack-form, .auth-card form { display: grid; gap: var(--space-4); margin-block: var(--space-5); }.stack-form > div, .auth-card form > div { display: grid; gap: var(--space-2); } label, legend { color: var(--text); font-weight: 700; } fieldset { min-width: 0; padding: 0; border: 0; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: inset 0 1px 1px rgb(15 35 31 / 3%); } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); } input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 3px solid color-mix(in srgb, var(--focus) 25%, transparent); } textarea { min-height: 7rem; resize: vertical; }.errorlist { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: .9rem; list-style: none; }.row-error { display: block; margin-top: var(--space-1); color: var(--danger); font-size: .85rem; }.choice-group { display: grid; gap: var(--space-2); margin-block: var(--space-5); }.choice, .checkbox { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; }.choice:hover, .checkbox:hover { background: var(--surface-alt); }.choice input, .checkbox input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--info); border-radius: var(--radius-md); background: var(--info-soft); color: var(--text); }.alert-success { border-color: var(--success); background: var(--success-soft); }.alert-warning { border-color: var(--warning); background: var(--warning-soft); }.alert-danger { border-color: var(--danger); background: var(--danger-soft); }.badge { display: inline-flex; align-items: center; min-height: 1.65rem; padding: .15rem .55rem; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-hover); font-size: .75rem; font-weight: 800; letter-spacing: .02em; }.badge-success { background: var(--success-soft); color: var(--success); }.badge-warning { background: var(--warning-soft); color: var(--warning); }.badge-danger { background: var(--danger-soft); color: var(--danger); }
.record-list { display: grid; margin: 0; padding: 0; list-style: none; }.record-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--border); }.record-list li:last-child { border-bottom: 0; }.record-list li > span { min-width: 0; overflow-wrap: anywhere; }.record-list strong { white-space: nowrap; }.table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } th { background: var(--surface-alt); color: var(--text-muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }.empty { display: grid; min-height: 8rem; place-items: center; margin: 0; padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-md); text-align: center; }.skeleton { min-height: 1rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-alt), var(--border), var(--surface-alt)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }.skeleton-card { min-height: 8rem; }.confirm-form { margin-top: var(--space-4); }
.modal { width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }.modal::backdrop { background: rgb(0 0 0 / 48%); }.modal-card { padding: var(--space-5); }.modal-header, .modal-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }.modal-header h2 { margin: 0; }.modal-actions { justify-content: flex-end; margin-top: var(--space-5); }.site-footer { margin-top: var(--space-6); border-top: 1px solid var(--border); background: var(--surface); }.footer-content { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); color: var(--text-muted); font-size: .9rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } [data-reduce-motion] *, [data-reduce-motion] *::before, [data-reduce-motion] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
@media (max-width: 960px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.app-shell { grid-template-columns: 1fr; }.sidebar-toggle { display: inline-flex; justify-self: start; }.app-sidebar { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(19rem, 86vw); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }.app-sidebar.is-open { transform: translateX(0); }.sidebar-close { display: inline-flex; }.app-content { width: 100%; } }
@media (max-width: 700px) { .container { width: min(100% - 1.25rem, 1200px); }.nav { min-height: 4rem; }.nav-actions { justify-content: flex-end; gap: var(--space-2); }.nav-actions > a:not(.button), .nav-actions form { font-size: .9rem; }.hero, .content-grid { grid-template-columns: 1fr; gap: var(--space-5); }.page { padding-block: var(--space-5); }.privacy-card, .panel, .auth-card { padding: var(--space-4); }.record-list li { align-items: flex-start; flex-direction: column; gap: var(--space-1); }.footer-content { flex-direction: column; }.toast-region { top: 4.75rem; right: var(--space-3); width: calc(100vw - 1.5rem); } }
@media (max-width: 430px) { .metric-grid { grid-template-columns: 1fr; }.nav-actions .button-small { display: none; } h1 { font-size: clamp(2rem, 10vw, 2.75rem); } }

/* Landing Page V1 */
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: clamp(var(--space-6), 8vw, 6rem); align-items: center; padding-block: clamp(var(--space-5), 6vw, var(--space-8)); }.landing-copy h1 { max-width: 15ch; font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -.045em; }.landing-note { margin-top: var(--space-4); color: var(--text-muted); font-size: .9rem; }.product-preview { display: grid; gap: var(--space-5); min-height: 23rem; padding: clamp(var(--space-5), 4vw, var(--space-6)); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: var(--radius-xl); background: linear-gradient(145deg, var(--surface), var(--primary-soft)); box-shadow: var(--shadow-lg); }.product-preview strong { max-width: 13ch; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }.preview-top { display: flex; justify-content: space-between; align-items: center; }.preview-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 .35rem var(--success-soft); }.preview-bars { display: grid; align-items: end; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); min-height: 7rem; }.preview-bars span { border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--primary); }.preview-bars span:nth-child(1) { height: 46%; opacity: .55; }.preview-bars span:nth-child(2) { height: 75%; opacity: .75; }.preview-bars span:nth-child(3) { height: 100%; }.preview-list { display: grid; gap: var(--space-2); color: var(--text-muted); font-size: .9rem; }.preview-list span::before { content: "✓"; margin-right: var(--space-2); color: var(--success); font-weight: 800; }
.landing-section { display: grid; gap: var(--space-6); padding-block: clamp(var(--space-6), 8vw, 6rem); }.section-heading { display: grid; gap: var(--space-2); max-width: 44rem; }.section-heading h2, .landing-cta h2 { max-width: 21ch; margin: 0; font-size: clamp(1.75rem, 4vw, 3rem); }.section-heading p { color: var(--text-muted); }.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }.feature-card { min-height: 100%; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }.feature-card h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.1rem; }.feature-card p { margin: 0; color: var(--text-muted); }.feature-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-hover); font-size: .78rem; font-weight: 800; }
.landing-solution { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(var(--space-6), 9vw, 8rem); padding-inline: clamp(var(--space-5), 5vw, var(--space-8)); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-alt); }.step-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }.step-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-4); align-items: start; }.step-list li > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-weight: 800; }.step-list h3 { margin: 0 0 var(--space-1); font-size: 1.1rem; }.step-list p { margin: 0; color: var(--text-muted); }
.privacy-section { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; padding: clamp(var(--space-5), 6vw, var(--space-8)); border-radius: var(--radius-xl); background: var(--text); color: var(--surface); }.privacy-section h2 { margin: 0; color: var(--surface); font-size: clamp(1.75rem, 4vw, 3rem); }.privacy-section .eyebrow { color: var(--primary); }.privacy-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }.privacy-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-3); }.privacy-list li::before { content: "✓"; display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--primary) 25%, transparent); color: var(--primary); font-weight: 800; }
.faq-list { display: grid; max-width: 48rem; gap: var(--space-3); }.faq-list details { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }.faq-list summary { cursor: pointer; color: var(--text); font-weight: 750; }.faq-list p { margin: var(--space-3) 0 0; color: var(--text-muted); }.landing-cta { display: grid; justify-items: start; gap: var(--space-4); padding: clamp(var(--space-6), 8vw, 6rem); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; }.landing-cta .eyebrow, .landing-cta h2 { color: #fff; }.landing-cta .button { background: #fff; color: var(--primary-hover); }.landing-cta .button:hover { background: var(--surface-alt); }
@media (max-width: 800px) { .landing-hero, .landing-solution, .privacy-section { grid-template-columns: 1fr; }.feature-grid { grid-template-columns: 1fr; }.product-preview { min-height: 19rem; }.landing-solution { padding: var(--space-5); } }

/* Dashboard V1 */
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }.dashboard-heading h1 { max-width: none; margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); }.dashboard-heading p { margin: var(--space-2) 0 0; color: var(--text-muted); }.dashboard-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }.dashboard-metrics .metric { position: relative; overflow: hidden; }.dashboard-metrics .metric::after { position: absolute; right: -1.3rem; bottom: -1.8rem; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--primary-soft); content: ""; }.metric-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: .9rem; font-weight: 750; }.metric-icon { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-hover); font-weight: 900; }.metric-income .metric-icon { background: var(--success-soft); color: var(--success); }.metric-expense .metric-icon { background: var(--danger-soft); color: var(--danger); }.metric-count .metric-icon { background: var(--info-soft); color: var(--info); }.dashboard-metrics small { z-index: 1; color: var(--text-muted); }.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-4); align-items: stretch; }.dashboard-panel { display: grid; align-content: start; }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }.panel-heading .eyebrow { margin: 0 0 var(--space-1); }.panel-heading h2 { margin: 0; }.text-link { align-self: center; color: var(--primary-hover); font-size: .9rem; font-weight: 750; white-space: nowrap; }.dashboard-empty { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; min-height: 14rem; padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-alt); }.dashboard-empty h3 { margin: 0 0 var(--space-2); font-size: 1.1rem; }.dashboard-empty p { margin: 0 0 var(--space-4); color: var(--text-muted); }.empty-icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-hover); font-size: 1.3rem; }.transaction-list { display: grid; margin: 0; padding: 0; list-style: none; }.transaction-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }.transaction-list li:last-child { border-bottom: 0; }.transaction-main { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }.transaction-main div { display: grid; min-width: 0; }.transaction-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transaction-main span:not(.transaction-type) { color: var(--text-muted); font-size: .85rem; }.transaction-type { display: grid; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-hover); font-weight: 900; }.transaction-income { background: var(--success-soft); color: var(--success); }.transaction-expense { background: var(--danger-soft); color: var(--danger); }.transaction-amount { white-space: nowrap; }.dashboard-onboarding { max-width: 45rem; }.dashboard-onboarding p { color: var(--text-muted); }.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; }.dashboard-heading { align-items: start; flex-direction: column; }.dashboard-actions { width: 100%; } }
.expense-chart { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }.expense-chart li { display: grid; gap: var(--space-2); }.expense-chart li > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: .88rem; }.expense-chart li > div span { color: var(--text-muted); }.expense-chart meter { width: 100%; height: .75rem; border: 0; border-radius: var(--radius-pill); background: var(--surface-alt); }.expense-chart meter::-webkit-meter-bar { border: 0; border-radius: var(--radius-pill); background: var(--surface-alt); }.expense-chart meter::-webkit-meter-optimum-value { border-radius: var(--radius-pill); background: var(--danger); }.expense-chart meter::-moz-meter-bar { border-radius: var(--radius-pill); background: var(--danger); }
@media (max-width: 560px) { .dashboard-actions .button { flex: 1 1 auto; }.dashboard-empty { grid-template-columns: 1fr; padding: var(--space-4); }.transaction-list li { align-items: flex-start; flex-direction: column; gap: var(--space-2); }.transaction-amount { padding-left: 3rem; } }

/* CRUD V1 */
.crud-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }.crud-heading h1 { max-width: none; margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); }.crud-heading p { margin: var(--space-2) 0 0; color: var(--text-muted); }.crud-heading .eyebrow { margin: 0; }.crud-layout { display: grid; grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.18fr); gap: var(--space-4); align-items: start; }.crud-form-panel { position: sticky; top: 5.75rem; }.crud-list-panel { min-height: 100%; }.form-intro { color: var(--text-muted); font-size: .92rem; }.crud-list { display: grid; margin: 0; padding: 0; list-style: none; }.crud-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }.crud-list li:last-child { border-bottom: 0; }.entity-icon { display: grid; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-hover); font-size: .9rem; font-weight: 850; }.entity-details { display: grid; min-width: 0; gap: var(--space-1); }.entity-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.entity-details span { color: var(--text-muted); font-size: .86rem; overflow-wrap: anywhere; }.crud-list > li > .badge, .crud-list > li > .transaction-amount { margin-left: auto; }.crud-empty { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-4); min-height: 13rem; padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-alt); }.crud-empty h3 { margin: 0 0 var(--space-2); font-size: 1.1rem; }.crud-empty p { margin: 0 0 var(--space-4); color: var(--text-muted); }.transaction-crud-list .transaction-type { width: 2.4rem; height: 2.4rem; }.transaction-crud-list .transaction-amount { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 980px) { .crud-layout { grid-template-columns: 1fr; }.crud-form-panel { position: static; }.crud-list-panel { min-height: 0; } }
@media (max-width: 560px) { .crud-heading { align-items: start; flex-direction: column; }.crud-heading > .button { width: 100%; }.crud-empty { grid-template-columns: 1fr; padding: var(--space-4); }.crud-list li { align-items: flex-start; }.crud-list > li > .badge, .crud-list > li > .transaction-amount { margin-left: 0; }.transaction-crud-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); }.transaction-crud-list .transaction-amount { grid-column: 2; } }

/* Import V1 */
.import-heading, .import-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }.import-heading h1, .import-detail-heading h1 { max-width: none; margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); overflow-wrap: anywhere; }.import-heading p, .import-detail-heading p { margin: var(--space-2) 0 0; color: var(--text-muted); }.import-heading .eyebrow, .import-detail-heading .eyebrow { margin: 0; }.import-flow { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); list-style: none; box-shadow: var(--shadow-sm); }.import-flow li { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: var(--space-3); padding-inline: var(--space-3); }.import-flow li + li::before { position: absolute; left: -.5rem; width: 1rem; height: 1px; background: var(--border); content: ""; }.import-flow li > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-alt); color: var(--text-muted); font-weight: 850; }.import-flow li > div { display: grid; }.import-flow small { color: var(--text-muted); }.import-flow .is-current > span { border-color: var(--primary); background: var(--primary); color: #fff; }.import-flow .is-complete > span { border-color: var(--success); background: var(--success-soft); color: var(--success); }.import-upload-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr); gap: var(--space-4); align-items: start; }.import-upload-panel .stack-form { margin-bottom: 0; }.import-upload-panel input[type="file"] { min-height: auto; padding: var(--space-2); border-style: dashed; background: var(--surface-alt); }.import-upload-panel input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: .65rem .8rem; border: 0; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-weight: 750; cursor: pointer; }.import-limits { background: linear-gradient(145deg, var(--surface), var(--primary-soft)); }.limit-list { display: grid; margin: 0; padding: 0; list-style: none; }.limit-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }.limit-list span { color: var(--text-muted); text-align: right; }.privacy-note { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); }.privacy-note > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); font-weight: 900; }.privacy-note p { display: grid; margin: 0; color: var(--text-muted); font-size: .88rem; }.privacy-note strong { color: var(--text); }.import-list { display: grid; margin: 0; padding: 0; list-style: none; }.import-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }.import-list li:last-child { border-bottom: 0; }.file-type { display: grid; min-height: 2.5rem; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-hover); font-size: .7rem; font-weight: 900; }.import-file { display: grid; min-width: 0; }.import-file a { overflow: hidden; color: var(--text); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.import-file span { color: var(--text-muted); font-size: .84rem; overflow-wrap: anywhere; }.import-empty { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-4); min-height: 10rem; padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-alt); }.import-empty h3 { margin: 0 0 var(--space-2); font-size: 1.1rem; }.import-empty p { margin: 0; color: var(--text-muted); }.back-link { width: fit-content; font-weight: 750; text-decoration: none; }.import-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }.import-summary .metric { min-height: 7rem; }.import-summary small { color: var(--text-muted); }.import-review-panel { padding: 0; overflow: hidden; }.import-review-panel > .panel-heading { padding: var(--space-5) var(--space-5) 0; }.import-review-panel .table-scroll { padding-bottom: var(--space-2); }.import-table caption { padding: 0 var(--space-5) var(--space-3); color: var(--text-muted); text-align: left; }.import-table th:first-child, .import-table td:first-child { padding-left: var(--space-5); }.import-table th:last-child, .import-table td:last-child { padding-right: var(--space-5); }.import-table td { min-width: 7rem; }.import-table td:nth-child(1) { min-width: 4rem; }.import-table td:nth-child(3) { min-width: 13rem; }.import-confirm { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: linear-gradient(145deg, var(--surface), var(--primary-soft)); }.import-confirm h2 { margin-bottom: var(--space-2); }.import-confirm p { margin: 0; color: var(--text-muted); }.import-confirm .confirm-form { flex: 0 0 auto; margin: 0; }.import-privacy-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-alt); color: var(--text-muted); font-size: .86rem; }.import-privacy-footer strong { color: var(--text); white-space: nowrap; }
@media (max-width: 900px) { .import-upload-grid { grid-template-columns: 1fr; }.import-list li { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }.import-list .button { grid-column: 2 / -1; justify-self: start; }.import-confirm { align-items: flex-start; flex-direction: column; } }
@media (max-width: 700px) { .import-heading, .import-detail-heading { align-items: flex-start; flex-direction: column; }.import-flow { grid-template-columns: 1fr; gap: var(--space-3); }.import-flow li { padding: 0; }.import-flow li + li::before { display: none; }.import-summary { grid-template-columns: 1fr; }.import-list li { grid-template-columns: 3rem minmax(0, 1fr); align-items: start; }.import-list li > .badge, .import-list .button { grid-column: 2; justify-self: start; }.import-review-panel > .panel-heading { align-items: flex-start; flex-direction: column; }.import-privacy-footer { align-items: flex-start; flex-direction: column; } }
@media (max-width: 430px) { .limit-list li { align-items: flex-start; flex-direction: column; gap: var(--space-1); }.limit-list span { text-align: left; }.import-empty { grid-template-columns: 1fr; padding: var(--space-4); }.import-confirm .button { width: 100%; } }

/* Public legal pages V1 */
.footer-content > div { display: grid; }.footer-content > div span { color: var(--text-muted); font-size: .82rem; }.footer-links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }.footer-links a { color: var(--text-muted); font-weight: 650; text-decoration: none; }.footer-links a:hover { color: var(--primary-hover); text-decoration: underline; }.legal-page, .contact-page { display: grid; gap: var(--space-6); }.legal-hero { display: grid; max-width: 50rem; gap: var(--space-2); padding-block: clamp(var(--space-4), 4vw, var(--space-6)); }.legal-hero h1 { max-width: 18ch; margin: 0; font-size: clamp(2.3rem, 6vw, 4rem); }.legal-hero p { max-width: 42rem; margin: 0; color: var(--text-muted); font-size: clamp(1rem, 2vw, 1.15rem); }.legal-hero > span { margin-top: var(--space-2); color: var(--text-muted); font-size: .85rem; }.legal-notice { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid var(--warning); border-radius: var(--radius-lg); background: var(--warning-soft); }.legal-notice p { margin: 0; }.legal-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(var(--space-6), 7vw, 5rem); align-items: start; }.legal-index { position: sticky; top: 6rem; display: grid; gap: var(--space-2); padding: var(--space-4); border-left: 3px solid var(--primary); background: var(--surface-alt); }.legal-index strong { margin-bottom: var(--space-1); }.legal-index a { color: var(--text-muted); font-size: .9rem; text-decoration: none; }.legal-index a:hover { color: var(--primary-hover); text-decoration: underline; }.legal-content { display: grid; max-width: 48rem; gap: var(--space-6); }.legal-content-centered { margin-inline: auto; }.legal-content section { scroll-margin-top: 6rem; }.legal-content h2 { margin-bottom: var(--space-3); font-size: clamp(1.25rem, 3vw, 1.65rem); }.legal-content p, .legal-content li { color: var(--text-muted); }.legal-content p { margin: 0; }.legal-content ul { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.25rem; }.legal-content a { font-weight: 700; }.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); gap: var(--space-4); }.contact-card { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); align-items: start; }.contact-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-hover); font-size: 1.2rem; font-weight: 900; }.contact-card h2 { margin-bottom: var(--space-2); }.contact-card p { margin-bottom: var(--space-2); font-size: 1.1rem; }.contact-card small { display: block; color: var(--text-muted); }.safe-contact { background: var(--surface-alt); }.safe-contact ul { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.25rem; color: var(--text-muted); }.contact-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 760px) { .legal-layout, .contact-grid { grid-template-columns: 1fr; }.legal-index { position: static; }.footer-content { align-items: flex-start; }.footer-links { gap: var(--space-3); } }
@media (max-width: 480px) { .contact-card { grid-template-columns: 1fr; }.contact-links .button { width: 100%; } }