:root{--color-000: #000;--color-213547: #213547;--color-2a9d8f: #2a9d8f;--color-2e7d32: #2e7d32;--color-333: #333;--color-357ab8: #357ab8;--color-4a90e2: #4a90e2;--color-4ecdc4: #4ecdc4;--color-666: #666;--color-6b9bd1: #6b9bd1;--color-777: #777;--color-7bb662: #7bb662;--color-888: #888;--color-8a6f6f: #8a6f6f;--color-8e6c88: #8e6c88;--color-95b8d1: #95b8d1;--color-999: #999;--color-a08080: #a08080;--color-ad3a2b: #ad3a2b;--color-b00020: #b00020;--color-b8a87e: #b8a87e;--color-bfbfbf: #bfbfbf;--color-c3e6cb: #c3e6cb;--color-c76b5e: #c76b5e;--color-c82333: #c82333;--color-ccc: #ccc;--color-d0d0d0: #d0d0d0;--color-d4a5a5: #d4a5a5;--color-d4edda: #d4edda;--color-d7d7d7: #d7d7d7;--color-dc3545: #dc3545;--color-ddd: #ddd;--color-e0e0e0: #e0e0e0;--color-e76f51: #e76f51;--color-e8f5e9: #e8f5e9;--color-e9c46a: #e9c46a;--color-e9e9e9: #e9e9e9;--color-eee: #eee;--color-ef6351: #ef6351;--color-f0f0f0: #f0f0f0;--color-f0f2ef: #f0f2ef;--color-f38375: #f38375;--color-f3f3f3: #f3f3f3;--color-f4a261: #f4a261;--color-f4f4f4: #f4f4f4;--color-f5f5f5: #f5f5f5;--color-f5f7fb: #f5f7fb;--color-f8f9fa: #f8f9fa;--color-f9f9f9: #f9f9f9;--color-fafafa: #fafafa;--color-ff6b9d: #ff6b9d;--color-ffe0e0: #ffe0e0;--color-fff: #fff;--color-ffffff: #ffffff;--color-fff0f0: #fff0f0;--color-rgba-black-005: rgba(0, 0, 0, .05);--color-rgba-black-006: rgba(0, 0, 0, .06);--color-rgba-black-007: rgba(0, 0, 0, .07);--color-rgba-black-008: rgba(0, 0, 0, .08);--color-rgba-black-010: rgba(0, 0, 0, .1);--color-rgba-black-012: rgba(0, 0, 0, .12);--color-rgba-black-015: rgba(0, 0, 0, .15);--color-rgba-black-020: rgba(0, 0, 0, .2);--color-rgba-black-050: rgba(0, 0, 0, .5);--color-rgba-black-085: rgba(0, 0, 0, .85);--color-rgba-danger-006: rgba(176, 0, 32, .06);--color-rgba-success-010: rgba(46, 125, 50, .1);--color-rgba-focus-008: rgba(74, 144, 226, .08);--color-rgba-focus-010: rgba(74, 144, 226, .1);--category-color-1: var(--color-6b9bd1);--category-color-2: var(--color-f4a261);--category-color-3: var(--color-e76f51);--category-color-4: var(--color-2a9d8f);--category-color-5: var(--color-e9c46a);--category-color-6: var(--color-8e6c88);--category-color-7: var(--color-4ecdc4);--category-color-8: var(--color-ff6b9d);--category-color-9: var(--color-95b8d1);--category-color-10: var(--color-b8a87e);--category-color-11: var(--color-7bb662);--category-color-12: var(--color-d4a5a5)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-213547);background-color:var(--color-ffffff);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.page{margin:auto;padding:10px;display:flex;flex-direction:column;gap:20px;background-color:var(--color-f0f2ef);overflow-x:hidden}.header{text-align:center;padding:20px 10px;border-bottom:2px solid var(--color-e0e0e0);margin-bottom:10px;position:relative}.header-content{display:flex;justify-content:center;align-items:center;position:relative}.header h1{margin:0 0 8px;font-size:32px;color:var(--color-213547)}.header p{margin:0;font-size:16px;color:var(--color-f38375)}.user-badge-container{position:absolute;right:10px;top:10px}.user-badge{width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.user-icon{font-size:20px;-webkit-user-select:none;user-select:none;filter:grayscale(100%)}.user-dropdown{position:absolute;right:0;top:48px;min-width:180px;background:var(--color-fff);border:1px solid var(--color-e0e0e0);border-radius:10px;box-shadow:0 6px 18px var(--color-rgba-black-012);z-index:100;overflow:hidden}.user-dropdown-item{display:block;width:100%;padding:12px 16px;text-align:left;border:none;background:none;cursor:pointer;font-size:14px;color:var(--color-213547);transition:background .2s;border-bottom:1px solid var(--color-f0f0f0);text-decoration:none}.user-dropdown-item:last-child{border-bottom:none}.user-dropdown-item:hover{background:var(--color-f5f7fb)}.user-dropdown-item.user-info{font-weight:600;color:var(--color-f38375);cursor:default;background:var(--color-fafafa)}.user-dropdown-item.user-info:hover{background:var(--color-fafafa)}.user-dropdown-item.logout-item{color:var(--color-dc3545)}.user-dropdown-item.logout-item:hover{background:var(--color-fff0f0)}.logout-button{display:none}.main-content{display:flex;flex-direction:column;gap:20px}.card{background:var(--color-f38375);padding:20px;border-radius:15px;box-shadow:0 2px 6px var(--color-rgba-black-007);transition:background-color .3s ease}.add-transaction-card{width:300px}.add-transaction-card.income-mode{background:var(--color-e8f5e9)}.card-header-with-toggle{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.card-header-with-toggle h2{margin:0;flex:1}.flip-card-button{background:none;border:none;font-size:24px;font-weight:300;cursor:pointer;color:var(--color-333);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:0;transition:background-color .2s,transform .3s ease;transform:rotate(0);outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent}.flip-card-button:focus{outline:none}.flip-card-button:active{outline:none}.flip-card-button.rotated{transform:rotate(45deg)}.flip-card-button:hover{background:var(--color-rgba-black-005)}.form{display:flex;flex-direction:column;gap:10px}.input{padding:10px;border-radius:10px;border:1px solid var(--color-d0d0d0);font-size:15px}.button{padding:12px;margin-top:15px;background:var(--color-ef6351);color:var(--color-fff);font-size:16px;border-radius:10px;cursor:pointer;border:none}.button:hover{background:var(--color-ad3a2b)}.form-error{color:var(--color-b00020);background:var(--color-rgba-danger-006);padding:8px 10px;border-radius:8px;margin-top:8px;font-size:13px}.button-add-category{margin-top:0;padding:10px 20px}.categories-input-group{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.category-row{display:flex;gap:8px;align-items:center}.category-row .input{flex:1;margin:0}.button-add-category-plus{margin-top:0;padding:10px 15px;min-width:44px;background:var(--color-999);font-size:18px;font-weight:300;flex-shrink:0}.button-add-category-plus:hover{background:var(--color-777)}.button-remove-category{margin-top:0;padding:10px 15px;min-width:44px;background:var(--color-a08080);font-size:18px;font-weight:300;flex-shrink:0}.button-remove-category:hover{background:var(--color-8a6f6f)}.add-category-inputs{display:flex;gap:10px}.add-category-inputs .input{flex:1}.filter-section{margin-bottom:15px}.filter-section .input{margin-top:5px}.category-badges{display:flex;flex-wrap:wrap;gap:6px}.category-badge{display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap}.category-badge:hover{opacity:.85}.table{width:100%;border-collapse:collapse;table-layout:auto}.table thead{position:sticky;top:0;z-index:10;background:var(--color-fff);box-shadow:0 2px 4px var(--color-rgba-black-005)}.table th,.table td{padding:5px;border-bottom:1px solid var(--color-d0d0d0);text-align:left;white-space:nowrap}.table tr:last-child td{border-bottom:none}.table tbody tr{transition:all .3s ease;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.table tbody tr:hover{filter:brightness(.95)}.table td.description{max-width:200px;min-width:100px;white-space:normal;overflow-wrap:break-word;word-break:break-word;line-height:1.4;vertical-align:top}.table-wrapper{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;max-height:600px;overflow-y:auto}.amount-cell{font-weight:700;font-size:16px}.amount-cell.income{color:var(--color-2e7d32)}.amount-cell.expense{color:var(--color-213547)}.empty-state{text-align:center;padding:0 20px 60px;color:var(--color-999)}.empty-state-image{width:100%;height:333px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}.empty-state-image img{max-width:100%;max-height:100%;object-fit:contain}.empty-state-placeholder{font-size:120px;opacity:.3}.empty-state h3{margin:0 0 10px;color:var(--color-666);font-size:20px}.empty-state p{margin:0;color:var(--color-999);font-size:14px}.month-header{margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid var(--color-e0e0e0)}.month-header h3{margin:0;font-size:20px;color:var(--color-213547);text-align:center}.filters-row{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap}.filter-section{flex:1;min-width:150px}.filter-section label{display:block;margin-bottom:6px;font-weight:600;color:var(--color-333);font-size:14px}.filter-section .input{display:inline-block;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--color-d7d7d7);border-radius:8px;background:var(--color-fff);font-size:14px;color:var(--color-213547);transition:border-color .12s ease,box-shadow .12s ease,transform .06s ease}.filter-section .input:hover{border-color:var(--color-bfbfbf)}.filter-section .input:focus{outline:none;border-color:var(--color-4a90e2);box-shadow:0 0 0 4px var(--color-rgba-focus-008)}.filter-section select.input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-666) 50%),linear-gradient(135deg,var(--color-666) 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}@media(max-width:520px){.filters-row{gap:10px}.filter-section{min-width:140px}}.month-navigation{display:flex;gap:10px;justify-content:center;margin-top:20px;padding-top:15px;border-top:1px solid var(--color-e0e0e0)}.nav-button{padding:10px 20px;background:var(--color-f38375);color:var(--color-fff);border:1px solid var(--color-d0d0d0);border-radius:8px;cursor:pointer;font-size:14px;transition:background .2s}.nav-button:hover,.nav-button:active{background:var(--color-c76b5e)}.delete-button{background:none;border:none;cursor:pointer;font-size:18px;padding:0}.delete-button:hover{opacity:.7}.table tbody tr .row-actions{position:relative;display:inline-block;opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s ease}.table tbody tr:hover .row-actions{opacity:1;visibility:visible}.actions-toggle{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--color-f4f4f4);color:var(--color-333);font-size:16px;cursor:default;border:1px solid transparent}.row-actions:hover .actions-toggle{background:var(--color-eee)}.actions-dropdown{position:absolute;right:0;top:0;min-width:100px;background:var(--color-fff);border:1px solid var(--color-e0e0e0);border-radius:8px;box-shadow:0 6px 18px var(--color-rgba-black-008);z-index:50;display:none;flex-direction:column;padding:6px}.row-actions:hover .actions-dropdown,.actions-dropdown:hover{display:flex}.action-item{background:none;border:none;padding:6px 8px;text-align:left;cursor:pointer;font-size:14px;border-radius:6px}.action-item:hover{background:var(--color-f5f7fb)}.action-item.delete-action{color:var(--color-b00020)}@media(max-width:600px){.actions-dropdown{top:25px;margin-top:4px}.add-transaction-card{align-self:center;min-width:200px;max-width:90%}.month-navigation{flex-direction:row}.nav-button{width:100%}.card{padding:12px}.table-wrapper{margin:0 -12px;padding:0 12px}.table{font-size:14px;min-width:100%}.table th,.table td{padding:6px 4px}.table td.description{max-width:120px;min-width:80px;font-size:13px}.table tbody tr .row-actions{opacity:1;visibility:visible}}.modal-overlay{position:fixed;inset:0;background:var(--color-rgba-black-050);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--color-fff);padding:30px;border-radius:15px;box-shadow:0 4px 12px var(--color-rgba-black-015);max-width:400px;text-align:center}.modal p{margin:0 0 20px;font-size:16px;color:var(--color-333)}.password-modal{max-width:450px;text-align:left}.password-modal h3{margin:0 0 20px;font-size:22px;color:var(--color-213547);text-align:center}.password-modal form{display:flex;flex-direction:column;gap:10px}.password-modal label{font-weight:600;color:var(--color-333);font-size:14px;margin-top:8px}.form-success{color:var(--color-2e7d32);background:var(--color-rgba-success-010);padding:8px 10px;border-radius:8px;margin-top:8px;font-size:13px;text-align:center}.modal-buttons{display:flex;gap:10px;justify-content:center}.button-confirm,.button-cancel{flex:1;padding:10px 20px;margin-top:0;font-size:14px}.button-cancel{background:var(--color-999)}.button-cancel:hover{background:var(--color-777)}.bottom-actions{display:flex;justify-content:center;gap:12px;text-align:center;margin-top:20px;padding-top:10px}.footer-link,.logout-footer{display:inline-block;padding:8px 12px;background:var(--color-f3f3f3);color:var(--color-213547);border-radius:8px;text-decoration:none;border:1px solid var(--color-e0e0e0);font-size:15px;font-weight:500;cursor:pointer;transition:background .2s}.footer-link:hover,.logout-footer:hover{background:var(--color-e9e9e9)}.logout-footer{border:1px solid var(--color-dc3545);color:var(--color-dc3545);background:var(--color-fff0f0)}.logout-footer:hover{background:var(--color-ffe0e0)}@media(max-width:600px){.bottom-actions{flex-direction:row;gap:8px;justify-content:center;width:100%;max-width:420px;margin:0 auto;padding:10px 12px}}.page{margin:auto;padding:10px;display:flex;flex-direction:column;gap:20px}.header{text-align:center;padding:20px 10px;position:relative}.logout-button{position:absolute;top:20px;right:20px;padding:8px 16px;background:var(--color-dc3545);color:var(--color-fff);border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:background .2s}.logout-button:hover{background:var(--color-c82333)}.card{background:var(--color-fff);padding:20px;border-radius:12px;box-shadow:0 2px 6px var(--color-rgba-black-006)}.card h2{margin-top:0}.stats-total{font-size:28px;font-weight:700;color:var(--color-213547)}.stats-back{display:inline-block;margin-top:12px;text-decoration:none;color:var(--color-fff);background:var(--color-333);padding:8px 12px;border-radius:8px}.stats-back:hover{background:var(--color-000)}.year-selector{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.year-selector label{font-weight:600;color:var(--color-213547)}.year-selector select{padding:8px 12px;border:1px solid var(--color-ddd);border-radius:6px;font-size:14px;font-family:inherit;cursor:pointer;background-color:var(--color-fff);transition:border-color .15s,box-shadow .15s}.year-selector select:hover{border-color:var(--color-999)}.year-selector select:focus{outline:none;border-color:var(--color-4a90e2);box-shadow:0 0 0 2px var(--color-rgba-focus-010)}.stats-subtitle{font-size:14px;color:var(--color-666);margin-top:-8px}.stats-chart{margin-top:16px;display:flex;flex-direction:column;align-items:center}.chart-container{width:100%;max-width:680px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-top:60px;padding-bottom:10px;padding-right:100px}.chart-container::-webkit-scrollbar{display:none}.chart-svg{width:100%;max-width:680px;height:auto;min-width:600px}.bar{fill:var(--color-4a90e2);transition:fill .15s}.bar:hover{fill:var(--color-357ab8)}.bar-label{font-size:12px;fill:var(--color-333)}.bar-total-label{font-size:11px;fill:var(--color-333);font-weight:600}.chart-tooltip{position:absolute;pointer-events:none;background:var(--color-rgba-black-085);color:var(--color-fff);padding:8px 10px;border-radius:6px;font-size:13px;min-width:90px;box-shadow:0 4px 12px var(--color-rgba-black-015);z-index:20}.chart-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px;width:100%;max-width:680px;justify-content:center}.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-333)}.legend-swatch{width:14px;height:14px;border-radius:3px;display:inline-block}.legend-label{font-size:13px}.month-detail-modal{position:fixed;inset:0;background:var(--color-rgba-black-050);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.month-detail-content{background:var(--color-fff);border-radius:12px;max-width:700px;width:100%;max-height:85vh;overflow:auto;box-shadow:0 10px 40px var(--color-rgba-black-020);animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.month-detail-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--color-e0e0e0);position:sticky;top:0;background:var(--color-fff);border-radius:12px 12px 0 0;z-index:10}.month-detail-header h3{margin:0;font-size:20px;color:var(--color-213547)}.close-button{background:none;border:none;font-size:32px;line-height:1;color:var(--color-666);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s,color .2s}.close-button:hover{background:var(--color-f0f0f0);color:var(--color-333)}.month-detail-body{padding:24px}.month-total-summary{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--color-f8f9fa);border-radius:8px;margin-bottom:24px}.month-total-label{font-size:16px;font-weight:600;color:var(--color-213547)}.month-total-amount{font-size:24px;font-weight:700;color:var(--color-4a90e2)}.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}.insight-card{background:linear-gradient(135deg,var(--color-f8f9fa) 0%,var(--color-ffffff) 100%);border:1px solid var(--color-e0e0e0);border-radius:10px;padding:16px;display:flex;gap:12px;transition:transform .2s,box-shadow .2s}.insight-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--color-rgba-black-008)}.insight-icon{font-size:32px;line-height:1;flex-shrink:0}.insight-content{flex:1;min-width:0}.insight-label{font-size:12px;color:var(--color-666);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-weight:600}.insight-value{font-size:20px;font-weight:700;color:var(--color-213547);margin-bottom:2px;word-wrap:break-word}.insight-detail{font-size:12px;color:var(--color-888)}.category-list h4{margin-top:0;margin-bottom:16px;font-size:16px;color:var(--color-213547)}.category-table{width:100%;border-collapse:collapse;font-size:14px}.category-table thead{background:var(--color-f8f9fa)}.category-table th{padding:12px;text-align:left;font-weight:600;color:var(--color-213547);border-bottom:2px solid var(--color-e0e0e0)}.category-table th:nth-child(2),.category-table th:nth-child(3){text-align:right}.category-table td{padding:12px;border-bottom:1px solid var(--color-f0f0f0)}.category-table tbody tr:hover{background:var(--color-f8f9fa)}.category-table tbody tr:last-child td{border-bottom:none}.category-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}.amount-cell{text-align:right;font-weight:600;color:var(--color-213547)}.percentage-cell{text-align:right;color:var(--color-666);font-size:13px}