.expenses-page { min-height: 100vh; color: #4b5576; background: linear-gradient(180deg, #f3effb 0, #faf9fd 46%, #f3f7fb 100%); }
.expenses-page *, .expenses-page *::before, .expenses-page *::after { box-sizing: border-box; -webkit-user-select: none; user-select: none; }
.expenses-page input, .expenses-page textarea { -webkit-user-select: text; user-select: text; }
.expenses-shell { width: min(560px, calc(100% - 28px)); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 0 calc(104px + env(safe-area-inset-bottom)); }
.expenses-header { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; }
.expenses-header h1 { margin: 0; color: #495273; font-size: 27px; letter-spacing: .05em; text-align: center; }
.back-link,.fixed-entry { display: grid; min-height: 38px; place-items: center; border: 0; border-radius: 50%; color: #746e99; background: rgba(255,255,255,.72); text-decoration: none; font: 24px/1 sans-serif; box-shadow: 0 5px 15px rgba(98,88,132,.08); }
.fixed-entry { min-width: 54px; padding: 0 11px; border-radius: 999px; color: #756c98; font: 12px "Yomogi Local", sans-serif; }
.month-nav { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; width: min(278px, 100%); margin: 20px auto 15px; }
.month-nav button { min-height: 38px; border: 0; color: #706891; background: transparent; font: 30px/1 sans-serif; cursor: pointer; }
.month-nav .month-label { display: flex; align-items: center; justify-content: center; gap: 8px; color: #555d7e; font: 18px "Yomogi Local", sans-serif; }
.finance-hero { padding: 15px 18px 16px; border: 1px solid rgba(215,207,238,.9); border-radius: 27px; background: rgba(255,255,255,.76); box-shadow: 0 12px 30px rgba(94,82,132,.1); text-align: center; }
.finance-hero-icon { display:block; width:56px; height:56px; margin:0 auto 1px; object-fit:contain; }
.finance-hero p { margin: 0; color: #8a81a8; font: 13px "Yomogi Local", sans-serif; }.finance-hero strong { display: block; margin: 4px 0; color: #4b5576; font-size: clamp(32px, 10vw, 43px); letter-spacing: .03em; }.finance-hero small { color: #8a81a8; font: 12px "Yomogi Local", sans-serif; }
.finance-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 11px 0; }.finance-totals div { padding: 13px 16px; border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 6px 18px rgba(94,82,132,.06); }.finance-totals span { display: block; color: #8a81a8; font: 12px "Yomogi Local", sans-serif; }.finance-totals strong { display: block; margin-top: 3px; color: #5c6184; font-size: 20px; }
.finance-filter { display: flex; justify-content: center; gap: 6px; margin: 16px 0 20px; }.finance-filter button { min-width: 72px; padding: 8px 13px; border: 1px solid #d9d2ed; border-radius: 999px; color: #847ba2; background: rgba(255,255,255,.72); font: 13px "Yomogi Local", sans-serif; cursor: pointer; }.finance-filter .is-active { border-color: #a69acb; color: #fff; background: #9385bb; box-shadow: 0 5px 14px rgba(117,101,162,.21); }
.chart-section,.recent-section { margin-top: 18px; padding: 16px 14px; border: 1px solid rgba(218,215,237,.9); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 8px 25px rgba(94,82,132,.07); }.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }.section-heading h2 { margin: 0; color: #5a6181; font-size: 18px; }.section-heading span { color: #968da9; font: 11px "Yomogi Local", sans-serif; }
.finance-category-icon { display: inline-block; width: 28px; height: 28px; flex: 0 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; }.finance-category-icon.category-food { background-image: url("./assets/finance/categories-v4/food.png"); }.finance-category-icon.category-dining-out { background-image: url("./assets/finance/categories-v4/dining-out.png"); }.finance-category-icon.category-daily { background-image: url("./assets/finance/categories-v4/daily.png"); }.finance-category-icon.category-utilities { background-image: url("./assets/finance/categories-v4/utilities.png"); }.finance-category-icon.category-communications { background-image: url("./assets/finance/categories-v4/communications.png"); }.finance-category-icon.category-housing { background-image: url("./assets/finance/categories-v4/housing.png"); }.finance-category-icon.category-transport { background-image: url("./assets/finance/categories-v4/transport.png"); }.finance-category-icon.category-medical { background-image: url("./assets/finance/categories-v4/medical.png"); }.finance-category-icon.category-social { background-image: url("./assets/finance/categories-v4/social.png"); }.finance-category-icon.category-entertainment { background-image: url("./assets/finance/categories-v4/entertainment.png"); }.finance-category-icon.category-other { background-image: url("./assets/finance/categories-v4/other.png"); }.finance-charts { display: grid; gap: 10px; }.chart-row { display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: center; gap: 8px; }.chart-row > span { color: #756d91; font: 12px "Yomogi Local", sans-serif; white-space: nowrap; }.stacked-bar { display: flex; min-width: 0; height: 18px; overflow: hidden; border-radius: 999px; background: #ebe9f2; }.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 9px; margin: 1px 0 0 0; }.chart-legend span { display: inline-flex; align-items: center; gap: 3px; color: #847c98; font-size: 10px; white-space: nowrap; }.chart-legend .finance-category-icon { width: 17px; height: 17px; }
.expense-list { display: grid; gap: 12px; }.expense-day h3 { margin: 0 0 6px; color: #847b9d; font: 13px "Yomogi Local", sans-serif; }.expense-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 10px 6px; border: 0; border-radius: 15px; color: inherit; background: transparent; text-align: left; cursor: pointer; }.expense-row:hover { background: rgba(238,234,248,.72); }.expense-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: #ece6f8; font-size: 18px; }.expense-icon .finance-category-icon { width: 34px; height: 34px; }.finance-action-mark .finance-category-icon { width: 42px; height: 42px; }.expense-copy { min-width: 0; }.expense-copy strong,.expense-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.expense-copy strong { color: #5b6382; font-size: 14px; }.expense-copy small { margin-top: 2px; color: #9a91ab; font: 11px "Yomogi Local",sans-serif; }.expense-amount { color: #59617f; font-size: 15px; }.expense-row.is-income .expense-icon { background: #e2f1e4; }.expense-row.is-income .expense-amount { color: #5c946b; }.finance-empty { margin: 10px 0 2px; color: #968da9; font: 13px/1.7 "Yomogi Local", sans-serif; text-align: center; }
.expenses-login { display: grid; min-height: 100vh; place-items: center; color: #81789d; font: 15px "Yomogi Local", sans-serif; }.expenses-login[hidden] { display: none; }.expenses-status { position: fixed; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); left: 14px; z-index: 5; margin: 0; color: #786f90; font: 12px/1.4 "Yomogi Local", sans-serif; text-align: center; pointer-events: none; }.expenses-status:empty { display: none; }.finance-plus { position: fixed; right: max(18px, calc((100vw - 530px) / 2)); bottom: calc(21px + env(safe-area-inset-bottom)); z-index: 10; display: grid; width: 60px; height: 60px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #8274ae; box-shadow: 0 10px 24px rgba(84,68,128,.33); font: 40px/1 sans-serif; cursor: pointer; }
.finance-plus[hidden] { display: none; }
.finance-dialog { width: min(520px, calc(100% - 22px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 0; border-radius: 26px; color: #57607f; background: #fcfbfe; box-shadow: 0 20px 55px rgba(61,48,93,.27); }.finance-dialog::backdrop { background: rgba(50,44,73,.31); }.dialog-header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; min-height: 61px; padding: 8px 13px; border-bottom: 1px solid #ebe7f2; }.dialog-header h2 { margin: 0; font-size: 19px; text-align: center; }.dialog-close { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #766e94; background: #f0edf6; font-size: 22px; cursor: pointer; }.dialog-body { max-height: calc(min(760px, 100dvh - 32px) - 61px); overflow-y: auto; padding: 17px; overscroll-behavior: contain; }
.finance-action-list { display: grid; gap: 10px; }.finance-action { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; padding: 14px; border: 1px solid #e1dcef; border-radius: 18px; color: #5d6483; background: #fff; text-align: left; cursor: pointer; }.finance-action b { display: block; font-size: 15px; }.finance-action small { display: block; margin-top: 3px; color: #968da9; font: 11px/1.45 "Yomogi Local", sans-serif; }.fixed-rule-meta { line-height:1.6; }.finance-action-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: #eee9f8; font-size: 20px; }.fixed-rule-row { display: grid; grid-template-columns: minmax(0,1fr) auto 28px; gap: 7px; align-items: stretch; }.fixed-rule-row .finance-action { min-width: 0; }.fixed-add { min-width: 76px; padding: 8px; border: 0; border-radius: 16px; color: #fff; background: #8b7ab4; font: 12px/1.35 "Yomogi Local", sans-serif; cursor: pointer; }.fixed-add.is-added,.fixed-add:disabled { color: #958da8; background: #e7e3ed; box-shadow: inset 0 0 0 1px #d8d2e2; cursor: default; }.fixed-order { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }.fixed-order button { width: 28px; min-height: 0; border: 0; border-radius: 8px; color: #81779d; background: #eeeaf5; font-size: 14px; cursor: pointer; }.fixed-order button:disabled { color: #c1bacb; background: #f5f2f8; cursor: default; }
.finance-form { display: grid; gap: 13px; }.finance-form label { display: grid; gap: 5px; color: #756d90; font: 12px "Yomogi Local", sans-serif; }.finance-form input,.finance-form select,.finance-form textarea { width: 100%; min-width: 0; min-height: 44px; padding: 10px 11px; border: 1px solid #d9d3e9; border-radius: 13px; color: #536080; background: #fff; font: 15px "Yomogi Local", sans-serif; }.finance-form textarea { min-height: 70px; resize: vertical; }.finance-form .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.finance-form .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }.finance-form .form-note { margin: -4px 0 0; color: #998fa8; font: 11px/1.5 "Yomogi Local", sans-serif; }.finance-form .divider { height: 1px; margin: 2px 0; background: #eeeaf4; }.finance-form .total-check { padding: 10px 12px; border-radius: 13px; color: #756d90; background: #f2eff8; font: 12px "Yomogi Local", sans-serif; }.finance-form .total-check.is-error { color: #c07178; background: #fff0f1; }.finance-button-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9px; margin-top: 3px; }.finance-button-row button,.item-add-button { min-height: 44px; border: 0; border-radius: 14px; color: #fff; background: #8375ae; font: 600 14px "Yomogi Local", sans-serif; cursor: pointer; }.finance-button-row .secondary,.item-add-button { color: #756c96; background: #efecf6; }.finance-button-row .danger { color: #ba666f; background: #fff0f1; }.finance-button-row .save { background: #8375ae; }
.item-editor-list { display: grid; gap: 8px; }.item-editor { display: grid; grid-template-columns: minmax(0,1fr) 90px 32px; gap: 6px; align-items: end; padding: 9px; border: 1px solid #ebe7f2; border-radius: 14px; background: #fbfaff; }.item-editor label { gap: 4px; }.item-editor input,.item-editor select { min-height: 39px; padding: 8px; font-size: 13px; }.item-editor .item-category { grid-column: 1 / 3; }.item-remove { width: 31px; height: 39px; border: 0; border-radius: 11px; color: #af8390; background: #f9edf0; font-size: 17px; cursor: pointer; }.receipt-preview { display: block; width: 100%; max-height: 225px; margin-bottom: 12px; border-radius: 16px; object-fit: contain; background: #f0edf5; }.receipt-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }.receipt-gallery .receipt-preview { width: 100%; height: 112px; min-height: 0; margin: 0; }.receipt-gallery[data-count="1"] { grid-template-columns: 1fr; }.receipt-gallery[data-count="1"] .receipt-preview { height: 225px; }.receipt-loader { margin: 4px 0; padding: 11px; border-radius: 13px; color: #71698b; background: #f0edf7; font: 13px "Yomogi Local", sans-serif; }.receipt-loader .dots { display: inline-block; min-width: 26px; text-align: left; }.receipt-help { margin: 0; color: #958ba5; font: 11px/1.55 "Yomogi Local", sans-serif; }
.finance-date-field { position: relative; display: grid; width: 100%; min-width: 0; min-height: 44px; overflow: hidden; border: 1px solid #d9d3e9; border-radius: 13px; background: #fff; }.finance-date-display { display: grid; min-width: 0; min-height: 42px; place-items: center; padding: 10px 11px; color: #536080; font: 15px "Yomogi Local",sans-serif; text-align: center; pointer-events: none; }.finance-date-field input[type="date"] { position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }.tax-note { margin: -7px 0 0; padding: 8px 10px; border-radius: 11px; color: #8b7e98; background: #f5f1f8; font: 11px "Yomogi Local",sans-serif; }.item-editor .item-canonical,.item-editor .item-payer,.item-editor .fridge-candidate-toggle { display: none; }.item-editor[data-receipt="true"] { grid-template-columns: minmax(0,1fr) 78px 58px; }.item-editor[data-receipt="true"] .item-remove { justify-self: end; }.item-editor[data-receipt="true"] .item-canonical { display: grid; grid-column: 1 / -1; }.item-editor[data-receipt="true"] .item-category { grid-column: 1 / 3; }.finance-form.is-item-allocation .item-payer { display: grid; grid-column: 1 / -1; }.finance-form.is-receipt .item-editor[data-receipt="true"] .fridge-candidate-toggle { display: none; grid-column: 3; align-self: end; min-height: 39px; padding: 3px 4px; border: 1px solid #ddd6ea; border-radius: 11px; color: #7d7295; background: #fff; font: 11px/1.15 "Yomogi Local",sans-serif; cursor: pointer; }.fridge-candidate-toggle.is-selected { border-color: #8bb7a0 !important; color: #37785d !important; background: #eaf6ee !important; }.finance-form.is-item-allocation .allocation-fields input[readonly] { color: #827a95; background: #f2eff6; }.receipt-preview { display: block; width: 100%; max-height: 225px; margin-bottom: 12px; border-radius: 16px; object-fit: contain; background: #f0edf5; }.receipt-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }.receipt-gallery .receipt-preview { width: 100%; height: 112px; min-height: 0; margin: 0; }.receipt-gallery[data-count="1"] { grid-template-columns: 1fr; }.receipt-gallery[data-count="1"] .receipt-preview { height: 225px; }.receipt-loader { margin: 4px 0; padding: 11px; border-radius: 13px; color: #71698b; background: #f0edf7; font: 13px "Yomogi Local", sans-serif; }.receipt-loader .dots { display: inline-block; min-width: 26px; text-align: left; }.receipt-help { margin: 0; color: #958ba5; font: 11px/1.55 "Yomogi Local", sans-serif; }
@media (max-width: 390px) { .expenses-shell { width: min(100% - 20px, 560px); }.finance-totals div { padding: 12px; }.finance-form .three-col { grid-template-columns: 1fr 1fr; }.finance-form .three-col label:last-child { grid-column: 1 / -1; }.chart-row > span { font-size: 11px; } }