@font-face {
    font-family:LocalSans;
    src:local("Segoe UI")
}

:root {
    --paper:#f5f6f2;
    --white:#fff;
    --ink:#233b32;
    --muted:#718078;
    --green:#214f41;
    --forest:#153d35;
    --lime:#d6edaa;
    --border:#e5e9df;
    --negative:#a84f43;
    --shadow:0 4px 18px #203b3104;
    color-scheme:light;
    font-family:LocalSans,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-synthesis:none
}

* {
    box-sizing:border-box
}

body {
    margin:0
}

button,input,select,textarea {
    font:inherit
}

button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

button:disabled {
    opacity:.55;
    cursor:wait
}

a {
    color:inherit
}

button {
    color:inherit
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid #8dba56;
    outline-offset:3px
}

h1,h2,h3,p {
    margin-top:0
}

h1 {
    font-size:clamp(27px,3vw,36px);
    line-height:1.17;
    letter-spacing:-1.25px;
    margin-bottom:10px;
    font-weight:650
}

h2 {
    font-size:17px;
    letter-spacing:-.4px;
    font-weight:650;
    margin-bottom:9px
}

h3 {
    font-size:17px
}

p {
    line-height:1.6;
    margin-bottom:16px
}

strong {
    font-weight:650
}

svg {
    flex-shrink:0
}

small,.small {
    font-size:12px;
    line-height:1.6
}

.muted {
    color:var(--muted)
}

.eyebrow {
    font-size:10px;
    letter-spacing:1.9px;
    font-weight:700;
    color:#7a8b78;
    margin-bottom:13px
}

.positive {
    color:#287352
}

.negative,.danger {
    color:var(--negative)!important
}

.primary,.secondary {
    border-radius:11px;
    min-height:45px;
    padding:11px 17px;
    display:inline-flex;
    gap:9px;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    transition:background .15s,transform .15s
}

.primary {
    background:var(--green);
    color:white
}

.primary:hover {
    background:#163d31
}

.secondary {
    background:white;
    border-color:#dce3d7
}

.secondary:hover {
    background:#f0f4e9
}

.full {
    width:100%
}

.text-button {
    border:0;
    background:none;
    display:inline-flex;
    gap:6px;
    align-items:center;
    font-size:12px;
    padding:10px 0;
    min-height:40px;
    color:var(--green);
    font-weight:600
}

.icon-button {
    width:40px;
    height:40px;
    border:0;
    background:transparent;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center
}

.icon-button:hover {
    background:#e9eee3
}

label {
    display:flex;
    flex-direction:column;
    font-size:12px;
    font-weight:600;
    gap:8px;
    margin-bottom:17px
}

input,select,textarea {
    width:100%;
    border:1px solid #dfe5dc;
    border-radius:9px;
    background:white;
    padding:12px;
    color:var(--ink);
    min-height:45px;
    outline:none
}

input::placeholder,textarea::placeholder {
    color:#939e95
}

input[type=month] {
    font-size:12px;
    width:auto;
    min-width:140px;
    padding:8px;
    min-height:38px
}

textarea {
    resize:vertical;
    line-height:1.5
}

.field-help {
    font-size:12px;
    color:var(--muted);
    line-height:1.65
}

.pill,.step-tag {
    display:inline-flex;
    gap:7px;
    align-items:center;
    border-radius:7px;
    background:#eef3e6;
    padding:6px 10px;
    font-size:11px;
    color:#526947;
    white-space:nowrap
}

.step-tag {
    margin-bottom:16px;
    font-weight:650;
    letter-spacing:1px
}

.segmented {
    display:flex;
    background:#f0f3ec;
    padding:4px;
    border-radius:10px;
    margin:21px 0;
    gap:4px
}

.segmented button {
    flex:1;
    background:transparent;
    border:0;
    min-height:38px;
    border-radius:7px;
    color:var(--muted);
    font-size:13px
}

.segmented .active {
    background:white;
    color:var(--green);
    box-shadow:0 1px 5px #18392310;
    font-weight:650
}

.brand {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:29px;
    letter-spacing:-1.5px;
    font-weight:750;
    text-decoration:none
}

.brand-dot {
    color:#abc681;
    margin-left:-9px
}

.brand-symbol {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:39px;
    height:41px;
    border-radius:12px;
    background:var(--green);
    color:var(--lime);
    font-size:35px;
    line-height:1;
    padding-bottom:7px;
    font-weight:700;
    letter-spacing:-2px
}

.welcome {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    min-height:100dvh
}

.welcome-story {
    background:#e8efdf;
    padding:45px max(40px,8vw) 34px;
    position:relative;
    overflow:hidden
}

.welcome-story .brand {
    margin-bottom:60px
}

.welcome-story h1 {
    font-size:clamp(45px,5.5vw,76px);
    line-height:1.08;
    letter-spacing:-3px;
    font-weight:550;
    margin-top:18px;
    margin-bottom:24px
}

.welcome-story em {
    font-family:Georgia,serif;
    font-weight:400;
    color:#587948
}

.welcome-story>p {
    color:#66735e;
    font-size:14px
}

.welcome-visual {
    height:210px;
    position:relative;
    margin:30px 0 25px
}

.mini-card {
    position:absolute;
    z-index:1;
    left:38px;
    top:7px;
    background:#214f41;
    border:1px solid #ffffff50;
    color:white;
    padding:23px 27px;
    width:255px;
    border-radius:18px;
    transform:rotate(-7deg);
    box-shadow:10px 18px 40px #29482b20
}

.mini-card>span {
    display:block;
    font-size:12px;
    color:#d3dfcd;
    margin-top:13px
}

.mini-card strong {
    display:block;
    font-size:21px;
    margin-top:5px
}

.mini-card svg {
    color:var(--lime)
}

.mini-bars {
    height:44px;
    display:flex;
    align-items:flex-end;
    gap:10px;
    margin-top:12px
}

.mini-bars i {
    background:#cce59d;
    width:28px;
    border-radius:4px 4px 0 0;
    height:40%
}

.mini-bars i:nth-child(2) {
    height:55%
}

.mini-bars i:nth-child(3) {
    height:70%
}

.mini-bars i:nth-child(4) {
    height:85%
}

.mini-bars i:nth-child(5) {
    height:100%
}

.floating-chip {
    position:absolute;
    z-index:2;
    left:175px;
    top:142px;
    background:#fff;
    padding:14px 19px;
    border-radius:10px;
    font-size:12px;
    box-shadow:0 10px 30px #27403012;
    display:flex;
    gap:8px;
    white-space:nowrap
}

.floating-chip svg {
    color:#597d3b
}

.orbit {
    position:absolute;
    left:5px;
    top:-6px;
    width:270px;
    height:210px;
    border:1px solid #9fb78855;
    border-radius:50%;
    transform:rotate(25deg)
}

.orbit-two {
    transform:rotate(-30deg);
    width:360px;
    left:-22px
}

.welcome-benefits {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    font-size:10px;
    color:#526448;
    margin-top:30px
}

.welcome-benefits span {
    display:flex;
    gap:6px;
    align-items:center
}

.welcome-benefits svg {
    width:17px
}

.welcome-form {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 32px;
    background:#fafbf7
}

.auth-box {
    width:100%;
    max-width:370px
}

.auth-box h2 {
    font-size:29px;
    letter-spacing:-1px;
    margin:0 0 14px
}

.auth-box>p.muted {
    font-size:13px
}

.auth-box label {
    margin-bottom:20px
}

.auth-divider {
    display:flex;
    align-items:center;
    gap:12px;
    margin:25px 0;
    color:#8a968a;
    font-size:11px
}

.auth-divider:before,.auth-divider:after {
    content:"";
    height:1px;
    background:var(--border);
    flex:1
}

.privacy-note {
    color:#7a8677;
    font-size:11px;
    text-align:center;
    margin:24px 0 0;
    line-height:1.7
}

.privacy-note svg {
    vertical-align:middle;
    margin-right:4px
}

.app-shell {
    display:flex;
    min-height:100dvh
}

.sidebar {
    width:235px;
    flex-shrink:0;
    background:#fcfdf9;
    border-right:1px solid var(--border);
    padding:30px 18px 20px;
    position:fixed;
    top:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    z-index:15
}

.sidebar>.brand {
    padding-left:14px;
    margin-bottom:36px
}

.household-badge {
    display:flex;
    gap:9px;
    align-items:center;
    margin:0 5px 31px;
    padding:12px 7px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border)
}

.household-avatar {
    width:31px;
    height:34px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ecf1e5
}

.household-badge strong {
    font-size:11px;
    display:block;
    max-width:145px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.household-badge small {
    font-size:9px;
    color:#8a9488;
    display:block;
    margin-top:5px
}

.nav-label {
    font-size:9px;
    letter-spacing:1.6px;
    color:#929b8f;
    padding-left:17px;
    margin-bottom:14px
}

.nav-item {
    display:flex;
    align-items:center;
    gap:12px;
    border:0;
    background:transparent;
    color:#788474;
    width:100%;
    text-align:left;
    min-height:48px;
    border-radius:10px;
    padding:12px 15px;
    margin-bottom:6px;
    font-size:12px
}

.nav-item.active {
    background:#eaf1df;
    color:var(--green);
    font-weight:650
}

.nav-item:hover {
    background:#f0f4e9
}

.nav-item svg {
    width:19px
}

.nav-item i {
    width:5px;
    height:5px;
    border-radius:100%;
    background:var(--green);
    margin-left:auto
}

.sidebar-note {
    background:#f0f4e9;
    border-radius:12px;
    margin:25px 6px 20px;
    padding:18px;
    color:#647954
}

.sidebar-note>svg {
    margin-bottom:11px
}

.sidebar-note strong {
    display:block;
    font-size:13px;
    line-height:1.5
}

.sidebar-note p {
    font-size:10px;
    margin:9px 0 0;
    color:#88957f
}

.profile {
    display:flex;
    align-items:center;
    gap:10px;
    border:0;
    border-top:1px solid var(--border);
    background:none;
    text-align:left;
    padding:19px 5px 0;
    margin-top:auto
}

.person-avatar {
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ecd9bd;
    color:#7a633e;
    font-size:13px;
    border-radius:50%;
    flex-shrink:0
}

.profile strong {
    font-size:12px;
    display:block
}

.profile small {
    font-size:10px;
    color:#869180
}

.profile>svg {
    margin-left:auto;
    color:#8b9784
}

.workspace {
    margin-left:235px;
    flex:1;
    min-width:0
}

.topbar {
    height:77px;
    padding:0 38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--border);
    background:#fcfdf988
}

.breadcrumb {
    font-size:11px;
    color:#6b7969
}

.breadcrumb span {
    margin:0 13px;
    color:#b5beb0
}

.topbar-actions {
    display:flex;
    gap:17px;
    align-items:center
}

.sync-status {
    border:0;
    background:none;
    display:flex;
    align-items:center;
    gap:7px;
    color:#7b8974;
    font-size:10px;
    min-height:40px
}

.status-dot {
    width:6px;
    height:6px;
    background:#91ad70;
    border-radius:50%
}

.mobile-brand {
    display:none
}

.main-content {
    padding:29px 38px 0;
    max-width:1500px;
    margin:auto
}

.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:9px 0 28px
}

.page-heading p.muted {
    font-size:12px;
    margin-bottom:0
}

.page-heading>.primary {
    flex-shrink:0
}

.overview-grid {
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:22px;
    margin-bottom:23px
}

.wealth-card {
    background:var(--forest);
    color:white;
    border-radius:17px;
    padding:27px 30px;
    position:relative;
    overflow:hidden;
    min-height:241px
}

.wealth-card>span {
    font-size:13px;
    color:#deeadb
}

.card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:20px
}

.card-top h2 {
    margin-bottom:0
}

.card-top p {
    margin-top:5px;
    margin-bottom:0
}

.wealth-card .card-top {
    font-size:12px;
    color:#d5e2d0;
    position:relative;
    z-index:1
}

.glass-tag {
    font-size:9px;
    background:#ffffff0d;
    border:1px solid #ffffff18;
    border-radius:20px;
    padding:6px 9px;
    display:flex;
    gap:5px;
    align-items:center
}

.wealth-amount {
    font-size:clamp(31px,3.4vw,45px);
    font-weight:550;
    letter-spacing:-1.8px;
    position:relative;
    z-index:1;
    font-variant-numeric:tabular-nums;
    margin:17px 0 7px
}

.wealth-caption {
    font-size:11px;
    color:#a8c4b4;
    position:relative;
    z-index:1;
    margin-bottom:22px
}

.wealth-breakdown {
    display:flex;
    gap:34px;
    border-top:1px solid #ffffff17;
    padding-top:17px;
    position:relative;
    z-index:1
}

.wealth-breakdown span {
    display:block;
    font-size:10px;
    color:#abc2b2;
    margin-bottom:6px
}

.wealth-breakdown strong {
    font-size:16px;
    font-weight:500
}

.wealth-art {
    position:absolute!important;
    right:-18px;
    top:-42px;
    line-height:1;
    color:#ffffff04!important;
    font-size:320px!important;
    font-family:Georgia,serif;
    font-weight:700;
    transform:rotate(-12deg);
    z-index:0!important
}

.card {
    background:white;
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    margin-bottom:22px
}

.overview-grid>.card,.charts-grid>.card,.lower-grid>.card,.item-grid>.card,.scanner-grid>.card {
    margin-bottom:0
}

.month-card {
    padding:23px 25px
}

.month-card .card-top {
    margin-bottom:12px
}

.flow-row {
    display:flex;
    align-items:center;
    gap:11px;
    margin:16px 0
}

.flow-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    width:37px;
    height:37px
}

.income {
    background:#edf5e6;
    color:#4c7949
}

.expense {
    background:#f8f0e8;
    color:#ab8154
}

.flow-row>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:1;
    gap:10px
}

.flow-row div>span {
    font-size:12px;
    color:#7d8877
}

.flow-row strong {
    font-size:17px;
    font-weight:600
}

.month-result {
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--border);
    padding-top:15px;
    font-size:12px;
    align-items:center;
    margin-top:19px
}

.month-result strong {
    font-size:16px
}

.charts-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:22px;
    margin-bottom:23px
}

.subtle-icon {
    color:#8e9b87
}

.distribution {
    display:flex;
    align-items:center;
    gap:25px;
    min-height:207px
}

.donut {
    width:170px;
    height:170px;
    flex-shrink:0;
    border-radius:50%;
    padding:24px;
    transform:rotate(-90deg)
}

.donut>div {
    border-radius:50%;
    background:white;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    transform:rotate(90deg)
}

.donut span {
    font-size:9px;
    color:#899481;
    margin-bottom:7px
}

.donut strong {
    font-size:18px;
    letter-spacing:-.6px
}

.donut small {
    font-size:9px;
    color:#a0aa96;
    margin-top:6px
}

.legend {
    flex:1;
    min-width:0
}

.legend>div {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    margin:15px 0
}

.legend strong {
    margin-left:auto;
    white-space:nowrap;
    font-size:10px;
    font-variant-numeric:tabular-nums
}

.color-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:2px;
    flex-shrink:0
}

.green {
    background:var(--green)
}

.lime {
    background:#bfda91
}

.bar-chart {
    height:170px;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:clamp(6px,2vw,14px);
    padding-top:6px;
    border-bottom:1px solid #edf0e9;
    background:repeating-linear-gradient(to top,transparent,transparent 43px,#f0f2ec 44px,#f0f2ec 45px);
    margin:9px 4px 0
}

.bar-column {
    min-width:0;
    flex:1;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100%
}

.bar-pair {
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:6px;
    height:141px;
    width:100%
}

.bar {
    width:21px;
    max-width:40%;
    border-radius:5px 5px 0 0;
    min-height:2px
}

.incoming {
    background:#315d48
}

.outgoing {
    background:#c4dc96
}

.bar-column>span {
    font-size:9px;
    color:#8a9681;
    margin-top:10px
}

.chart-key {
    display:flex;
    gap:20px;
    justify-content:center;
    font-size:10px;
    color:#86927c;
    margin-top:20px
}

.chart-key>span {
    display:flex;
    align-items:center;
    gap:6px
}

.chart-table {
    font-size:10px;
    color:#7d8976;
    margin-top:12px
}

.chart-table table {
    width:100%;
    border-collapse:collapse;
    margin-top:8px
}

.chart-table td,.chart-table th {
    text-align:right;
    padding:6px
}

.chart-table td:first-child,.chart-table th:first-child {
    text-align:left
}

.lower-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:22px;
    margin-bottom:22px
}

.transaction-row {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    text-align:left;
    border:0;
    border-bottom:1px solid #f0f2ec;
    background:none;
    padding:15px 0;
    min-height:73px
}

.transaction-row:last-child {
    border-bottom:0
}

.transaction-row:hover {
    background:#f8faf4
}

.category-icon {
    width:37px;
    height:39px;
    border-radius:10px;
    background:#f2f1e9;
    color:#8c9072;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0
}

.category-icon.income {
    background:#edf5e6;
    color:#4c7949
}

.transaction-label {
    flex:1;
    min-width:0
}

.transaction-label strong {
    display:block;
    font-size:12px;
    line-height:1.5
}

.transaction-label small {
    display:block;
    font-size:10px;
    color:#93a08a;
    line-height:1.6
}

.transaction-row>strong {
    font-size:12px;
    white-space:nowrap
}

.next-card {
    background:#fbfcf8
}

.upcoming {
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 0;
    border-bottom:1px solid var(--border)
}

.date-box {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:37px;
    height:44px;
    border:1px solid #e5eadb;
    border-radius:8px;
    font-size:9px;
    color:#8e9a80;
    background:white;
    flex-shrink:0
}

.date-box strong {
    font-size:15px;
    color:#5f714e
}

.upcoming>div {
    flex:1;
    min-width:0
}

.upcoming>div strong {
    font-size:11px;
    display:block
}

.upcoming>div small {
    font-size:9px;
    color:#8e9a80
}

.upcoming>strong {
    font-size:11px;
    white-space:nowrap
}

.next-card>.text-button {
    margin-top:10px
}

.app-footer {
    display:flex;
    justify-content:space-between;
    padding:20px 0 25px;
    color:#8b9783;
    font-size:9px;
    border-top:1px solid var(--border);
    margin-top:32px
}

.app-footer>span:first-child {
    font-weight:700;
    font-size:12px
}

.app-footer span span {
    font-weight:400;
    font-size:9px;
    margin-left:12px
}

.demo-banner {
    background:#edf1e5;
    border:1px solid #dce5d0;
    border-radius:9px;
    font-size:10px;
    color:#6c7f57;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 13px;
    gap:12px;
    margin-bottom:23px
}

.demo-banner button {
    border:0;
    background:none;
    font-size:10px;
    color:#426334;
    display:flex;
    gap:7px;
    align-items:center;
    min-height:27px;
    white-space:nowrap
}

.feedback {
    border-radius:10px;
    padding:13px 16px;
    font-size:13px;
    line-height:1.6;
    margin:15px 0;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap
}

.error {
    background:#fff0ec;
    color:#963f33;
    border:1px solid #f0cfc4
}

.success {
    background:#eaf4e1;
    color:#426536
}

.warning {
    background:#fff7e5;
    color:#846129
}

.feedback .icon-button {
    margin-left:auto
}

.empty-state {
    text-align:center;
    padding:50px 25px;
    color:#7c8c70
}

.empty-state>svg {
    color:#a4b58c;
    margin-bottom:17px
}

.empty-state h2,.empty-state h3 {
    color:#3e5635;
    margin-bottom:10px
}

.empty-state p {
    font-size:13px
}

.empty-state.compact {
    padding:27px 15px
}

.onboarding {
    max-width:600px;
    margin:60px auto;
    padding:40px
}

.setup-banner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    background:#ebf0df;
    border:1px solid #dce6ce;
    padding:23px;
    border-radius:15px;
    margin-bottom:24px
}

.setup-banner h2 {
    font-size:20px
}

.setup-banner p {
    font-size:12px;
    margin-bottom:0;
    color:#77886b
}

.setup-banner .step-tag {
    margin-bottom:9px
}

.filters {
    display:flex;
    align-items:flex-end;
    gap:15px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--border);
    padding-bottom:15px;
    margin-bottom:18px
}

.filters label {
    margin-bottom:0
}

.search-field {
    position:relative;
    flex:1;
    min-width:190px
}

.search-field svg {
    position:absolute;
    left:12px;
    top:12px;
    color:#95a18a;
    width:18px
}

.search-field input {
    padding-left:38px
}

.tip {
    display:flex;
    gap:12px;
    background:#ebf0e2;
    padding:16px 20px;
    border-radius:11px;
    font-size:12px;
    line-height:1.7;
    color:#5b734c;
    margin-bottom:24px
}

.item-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:24px
}

.item-amount {
    font-size:27px;
    letter-spacing:-1px;
    margin:17px 0 8px
}

.recurring-card>p {
    font-size:12px
}

.card-buttons {
    display:flex;
    gap:15px;
    align-items:center;
    margin-top:20px
}

.card-buttons>.secondary {
    font-size:12px;
    min-height:40px
}

.account-card {
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:14px;
    color:var(--ink)
}

.account-card>svg {
    color:#839d68
}

.account-card>span {
    font-size:13px
}

.account-card>strong {
    font-size:26px;
    letter-spacing:-1px
}

.account-card>small {
    color:#8d9982;
    font-size:10px
}

.section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:28px 0 17px
}

.section-title h2 {
    margin:0
}

.holding-value {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
    white-space:nowrap
}

.holding-value strong {
    font-size:16px
}

.holding-value small {
    color:#8e9983;
    font-size:10px
}

.scanner-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:24px
}

.scan-zone {
    border:1.5px dashed #cedbc0;
    background:#f8faf3;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:35px 23px;
    gap:10px
}

.scan-icon {
    width:78px;
    height:78px;
    border-radius:20px;
    background:#e8efdc;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#658746;
    margin-bottom:12px
}

.scan-zone h2 {
    font-size:21px
}

.scan-zone p {
    font-size:12px;
    color:#8a997b
}

.scan-zone>small {
    font-size:10px;
    color:#91a07f;
    margin-top:9px
}

.file-button {
    position:relative;
    overflow:hidden;
    cursor:pointer;
    margin-bottom:0
}

.file-button input {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer
}

.receipt-result dl {
    display:flex;
    gap:50px;
    flex-wrap:wrap;
    margin:24px 0
}

.receipt-result dt {
    font-size:11px;
    color:#8d9983;
    margin-bottom:7px
}

.receipt-result dd {
    margin:0;
    font-size:20px;
    font-weight:600
}

.member-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:13px;
    padding:17px 0;
    border-bottom:1px solid var(--border)
}

.member-row>div {
    flex:1;
    min-width:0;
    overflow-wrap:anywhere
}

.member-row>.member-actions {
    display:flex;
    flex:1 0 100%;
    flex-wrap:wrap;
    gap:8px 16px;
    padding-left:48px
}

.member-actions button {
    min-height:44px
}

.member-row strong {
    font-size:13px;
    display:block
}

.member-row small {
    font-size:10px;
    color:#86937d
}

.member-row .text-button {
    font-size:10px
}

.invite-result {
    margin-top:22px;
    background:#f2f6e9;
    padding:15px;
    border-radius:12px
}

.invite-result input {
    font-family:monospace;
    font-size:11px
}

.invite-result p {
    font-size:11px;
    margin:15px 0 0
}

.settings-card>label {
    max-width:450px
}

.form-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}

.form-columns label {
    min-width:0
}

.settings-card .form-columns {
    margin-top:25px
}

.settings-card .form-columns button {
    align-self:flex-start;
    margin-top:5px
}

.modal-backdrop {
    position:fixed;
    inset:0;
    background:#14261d80;
    backdrop-filter:blur(5px);
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px
}

.modal {
    width:100%;
    max-width:510px;
    max-height:90dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#fcfdf9;
    border:1px solid white;
    padding:27px;
    border-radius:20px;
    box-shadow:0 30px 90px #10251f40
}

.modal .card-top {
    align-items:flex-start
}

.modal h2 {
    font-size:23px
}

.modal .eyebrow {
    font-size:9px
}

.modal .amount-input {
    font-size:28px;
    font-weight:650;
    letter-spacing:-.7px;
    background:#f0f5e8;
    min-height:67px;
    color:var(--green)
}

.modal-actions {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-top:25px
}

.modal-actions>.danger {
    margin-right:auto
}

.modal .form-columns input,.modal .form-columns select {
    font-size:12px
}

.initial-loading {
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#edf2e5;
    color:var(--green)
}

.initial-loading h1 {
    margin-top:15px
}

.initial-loading p {
    font-size:13px
}

.mobile-nav {
    display:none
}

#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff0df;
    padding:16px;
    z-index:999
}

@media(min-width:1550px) {
    .main-content {
        padding-top:40px
    }
    .wealth-card {
        min-height:265px
    }
    .distribution {
        gap:40px
    }
    .donut {
        width:185px;
        height:185px
    }
}

@media(max-width:1200px) {
    .sidebar {
        width:205px;
        padding-left:12px;
        padding-right:12px
    }
    .workspace {
        margin-left:205px
    }
    .main-content {
        padding:23px 24px 0
    }
    .topbar {
        padding:0 24px
    }
    .overview-grid,.charts-grid,.lower-grid {
        gap:16px
    }
    .card {
        padding:20px
    }
    .wealth-card {
        padding:23px
    }
    .glass-tag {
        display:none
    }
    .distribution {
        gap:14px
    }
    .donut {
        width:140px;
        height:140px;
        padding:19px
    }
    .donut strong {
        font-size:15px
    }
    .legend>div {
        font-size:9px
    }
    .legend strong {
        font-size:9px
    }
    .item-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .page-heading .primary {
        font-size:11px;
        padding:10px 13px
    }
    .household-badge strong {
        max-width:125px
    }
}

@media(max-width:1000px) {
    .charts-grid,.lower-grid {
        grid-template-columns:1fr
    }
    .distribution {
        gap:35px;
        justify-content:center
    }
    .donut {
        width:180px;
        height:180px;
        padding:25px
    }
    .donut strong {
        font-size:19px
    }
    .legend {
        max-width:300px
    }
    .legend>div,.legend strong {
        font-size:12px
    }
    .overview-grid {
        grid-template-columns:1.1fr 1fr
    }
    .wealth-amount {
        font-size:32px
    }
    .wealth-breakdown {
        gap:20px
    }
    .wealth-breakdown strong {
        font-size:14px
    }
    .month-card .card-top {
        align-items:flex-start;
        flex-direction:column;
        gap:7px
    }
    .month-card input[type=month] {
        min-height:30px;
        padding:4px
    }
    .flow-row strong {
        font-size:15px
    }
    .flow-row>div {
        gap:6px
    }
    .flow-row div>span {
        font-size:11px
    }
    .flow-row {
        gap:7px;
        margin:11px 0
    }
    .flow-icon {
        width:30px;
        height:32px
    }
    .welcome-story {
        padding:35px 40px
    }
    .welcome-story .brand {
        margin-bottom:45px
    }
    .welcome-story h1 {
        font-size:58px
    }
    .welcome-benefits {
        gap:12px
    }
    .scanner-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:760px) {
    .sidebar {
        display:none
    }
    .workspace {
        margin-left:0
    }
    .topbar {
        height:61px;
        padding:0 20px;
        background:#f9fbf5;
        position:sticky;
        top:0;
        z-index:20
    }
    .breadcrumb {
        display:none
    }
    .mobile-brand {
        display:block;
        font-weight:750;
        font-size:24px;
        letter-spacing:-1.3px
    }
    .topbar-actions {
        gap:7px
    }
    .main-content {
        padding:19px 17px 86px
    }
    .page-heading {
        margin:4px 0 22px;
        align-items:flex-start;
        gap:10px;
        flex-direction:column
    }
    .page-heading h1 {
        font-size:29px
    }
    .page-heading>.primary {
        font-size:12px;
        min-height:43px
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:1.5px
    }
    .overview-grid {
        grid-template-columns:1fr;
        gap:16px;
        margin-bottom:16px
    }
    .wealth-card {
        min-height:230px;
        padding:24px
    }
    .wealth-amount {
        font-size:39px;
        margin-top:20px
    }
    .glass-tag {
        display:flex;
        font-size:8px;
        padding:5px 8px
    }
    .wealth-breakdown {
        gap:45px
    }
    .wealth-breakdown strong {
        font-size:17px
    }
    .wealth-caption {
        font-size:10px
    }
    .month-card .card-top {
        flex-direction:row;
        align-items:center
    }
    .month-card {
        padding:21px
    }
    .flow-row {
        margin:15px 0;
        gap:12px
    }
    .flow-row strong {
        font-size:19px
    }
    .flow-row div>span {
        font-size:13px
    }
    .flow-icon {
        width:37px;
        height:37px
    }
    .month-result {
        margin-top:16px
    }
    .month-result strong {
        font-size:18px
    }
    .charts-grid,.lower-grid {
        gap:16px;
        margin-bottom:16px
    }
    .card {
        border-radius:14px;
        padding:21px
    }
    .distribution {
        gap:20px;
        min-height:210px
    }
    .donut {
        width:148px;
        height:148px;
        padding:20px
    }
    .donut strong {
        font-size:16px
    }
    .legend>div,.legend strong {
        font-size:10px
    }
    .legend>div {
        gap:6px;
        margin:16px 0
    }
    .card-top h2 {
        font-size:15px
    }
    .transaction-row>strong {
        font-size:12px
    }
    .transaction-label strong {
        font-size:12px
    }
    .transaction-label small {
        font-size:10px
    }
    .demo-banner {
        font-size:10px;
        align-items:flex-start;
        flex-direction:column;
        gap:0;
        padding:10px 12px;
        margin-bottom:19px
    }
    .demo-banner button {
        padding-left:0;
        font-size:10px
    }
    .mobile-nav {
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        background:#fffffff5;
        border-top:1px solid #dfe6d8;
        display:flex;
        justify-content:space-around;
        z-index:40;
        padding:7px 5px calc(7px + env(safe-area-inset-bottom));
        backdrop-filter:blur(10px)
    }
    .mobile-nav button {
        border:0;
        background:transparent;
        border-radius:9px;
        padding:7px 8px;
        color:#89967d;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:5px;
        min-width:60px;
        min-height:49px;
        font-size:9px
    }
    .mobile-nav button.active {
        color:#315a3c;
        background:#eef4e5
    }
    .app-footer {
        font-size:8px;
        gap:10px;
        align-items:flex-end
    }
    .app-footer span span {
        display:block;
        margin:6px 0 0;
        font-size:8px
    }
    .welcome {
        display:block
    }
    .welcome-story {
        padding:26px 25px 29px
    }
    .welcome-story .brand {
        font-size:25px;
        margin-bottom:29px
    }
    .welcome-story h1 {
        font-size:46px;
        letter-spacing:-2px;
        margin-bottom:15px
    }
    .welcome-story h1 br:nth-child(2) {
        display:none
    }
    .welcome-story>p {
        font-size:12px;
        margin-bottom:0
    }
    .welcome-story>.eyebrow {
        font-size:8px
    }
    .welcome-visual {
        display:none
    }
    .welcome-benefits {
        margin-top:20px;
        font-size:9px;
        gap:12px
    }
    .welcome-form {
        padding:32px 25px 40px
    }
    .auth-box {
        max-width:460px
    }
    .auth-box h2 {
        font-size:26px
    }
    .onboarding {
        margin:15px auto;
        padding:24px
    }
    .onboarding h1 {
        font-size:29px
    }
    .setup-banner {
        flex-direction:column;
        align-items:flex-start;
        padding:22px
    }
    .item-grid {
        grid-template-columns:1fr;
        gap:15px
    }
    .recurring-card .card-top {
        margin-bottom:12px
    }
    .filters {
        gap:12px
    }
    .filters .search-field {
        flex-basis:100%
    }
    .filters>label:not(.search-field) {
        flex:1
    }
    .filters select {
        font-size:12px
    }
    .holding-row {
        flex-wrap:wrap
    }
    .holding-row .transaction-label {
        flex-basis:calc(100% - 50px)
    }
    .holding-value {
        margin-left:49px;
        align-items:flex-start;
        flex-direction:row;
        align-items:center;
        gap:15px
    }
    .form-columns {
        gap:12px
    }
    .receipt-result dl {
        gap:24px
    }
    .receipt-result dd {
        font-size:17px
    }
    .modal-backdrop {
        padding:15px 10px;
        align-items:center
    }
    .modal {
        padding:23px 20px;
        border-radius:17px;
        max-height:93dvh
    }
    .modal-actions {
        gap:8px
    }
    .modal-actions .primary,.modal-actions .secondary {
        font-size:12px;
        padding:10px 13px
    }
    .scan-zone {
        padding:30px 14px
    }
    .settings-card .form-columns {
        grid-template-columns:1fr
    }
    .sync-status {
        font-size:9px
    }
}

@media(max-width:370px) {
    .main-content {
        padding-left:12px;
        padding-right:12px
    }
    .card {
        padding:17px
    }
    .distribution {
        gap:13px
    }
    .donut {
        width:126px;
        height:126px;
        padding:17px
    }
    .donut strong {
        font-size:14px
    }
    .legend>div,.legend strong {
        font-size:9px
    }
    .glass-tag {
        display:none
    }
    .wealth-amount {
        font-size:35px
    }
    .form-columns {
        grid-template-columns:1fr
    }
    .mobile-nav button {
        min-width:52px;
        padding-left:5px;
        padding-right:5px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important
    }
}

/* Schmale Ansichten dürfen keine Mindestbreite aus Diagrammen übernehmen. */
.card {
    min-width:0
}

h1:focus {
    outline:none
}

.legend>div>span:not(.color-dot) {
    min-width:0;
    overflow-wrap:anywhere
}

@media(max-width:760px) {
    .charts-grid,.lower-grid {
        grid-template-columns:minmax(0,1fr)
    }
    .welcome-story h1 br:nth-child(2) {
        display:block
    }
}


.password-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -9px;
    margin-bottom: 17px;
}
.password-field input {
    min-width: 0;
    flex: 1;
}
.password-field button {
    border: 1px solid var(--border);
    background: white;
    border-radius: 9px;
    min-height: 45px;
    padding: 8px;
    font-size: 12px;
    color: var(--green);
}

.conflict-preview {
    display: block;
    border: 1px solid #ead7ae;
}

.conflict-preview p {
    margin: 10px 0;
}

.conflict-preview dl {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr);
    gap: 8px 12px;
    margin: 16px 0 0;
}

.conflict-preview dt {
    font-weight: 600;
}

.conflict-preview dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.receipt-source {
    margin: 20px 0;
    border-top: 1px solid var(--border, #dce4df);
    padding-top: 16px;
}
.receipt-source summary {
    cursor: pointer;
    font-weight: 600;
    padding: 10px 0;
}
.receipt-source pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 360px;
    overflow-y: auto;
    padding: 16px;
    border-radius: 12px;
    background: #f4f6f3;
    color: #243f36;
    font-size: 14px;
    line-height: 1.6;
}

.receipt-selection {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #dce4df);
}
.receipt-photo {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background: #eef1ec;
    border: 1px solid #dce4df;
    border-radius: 12px;
    margin: 14px 0;
}
.receipt-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.confirmation-check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
}
.confirmation-check input[type=checkbox] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    min-height: 22px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: #32685a;
}

.recovery-code {
    margin: 22px 0;
}
.recovery-code summary {
    min-height: 44px;
    cursor: pointer;
    padding: 12px 0;
    font-weight: 600;
}

.welcome.recovering { grid-template-columns: 1fr; }
.welcome.recovering .welcome-story { display: none; }
.welcome.recovering .welcome-form { align-items: flex-start; padding-top: 40px; }