:root{--teal:#0d9488;--teal-dark:#0b897f;--teal-light:#effdfa;--text:#252729;--muted:#7a7d80;--line:#e5e6e7;--panel:#fff}.app-shell{display:flex;min-height:100vh}.sidebar{width:242px;flex:0 0 242px;background:#fff;border-right:1px solid #e5e5e5;padding:30px 13px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 10px 30px}.brand-mark{height:31px;width:31px;background:var(--teal);border-radius:8px;display:grid;place-items:center}.brand-mark svg{width:22px;height:22px;fill:none;stroke:white;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.brand-name{font-size:17px;font-weight:800;letter-spacing:-.4px}.brand-subtitle{font-size:9px;color:#737779;letter-spacing:.2px;margin-top:1px}.navigation{display:grid;gap:5px}.nav-item{height:40px;display:flex;align-items:center;gap:12px;padding:0 12px;text-decoration:none;color:#303234;font-size:13px;font-weight:500;border-radius:3px}.nav-item.active{color:var(--teal);background:#effdfa;font-weight:700}.nav-icon{font-size:20px;line-height:1;width:16px;text-align:center;color:#737779}.active .nav-icon{color:var(--teal)}.sidebar-bottom{margin-top:auto;border-top:1px solid #ececec;padding:16px 8px 0;display:flex;align-items:center;gap:10px;font-size:12px}.sidebar-bottom strong,.sidebar-bottom small{display:block}.sidebar-bottom small{color:var(--muted);margin-top:3px}.avatar{width:30px;height:30px;border-radius:50%;background:#e8e0d2;color:#7e5d39;display:grid;place-items:center;font-weight:700}.main-content{flex:1;min-width:0;padding:36px 37px 28px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:43px}.page-header h1{font-size:27px;letter-spacing:-.7px;margin:0 0 4px;font-weight:800}.page-header p{font-size:13px;color:#777b7e;margin:0}.export-button,.primary-button{border:0;border-radius:8px;background:var(--teal);color:#fff;padding:10px 15px;font-weight:700;font-size:12px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:9px}.export-button:hover,.primary-button:hover{background:var(--teal-dark)}.export-icon{font-size:18px}.filter-panel{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:21px;display:flex;gap:14px;align-items:center;margin-bottom:22px;box-shadow:0 2px 8px #00000005}.search-box{height:36px;border:1px solid #dedfe0;border-radius:8px;display:flex;align-items:center;gap:10px;padding:0 13px;flex:1;min-width:160px}.search-icon{font-size:23px;line-height:1;color:#5e6365;transform:rotate(-20deg)}.search-box input{border:0;outline:0;min-width:0;width:100%;font-size:12px;color:#343638}.search-box input::placeholder{color:#a1a3a4}.filter-select{height:36px;border:1px solid #e1e2e3;border-radius:8px;padding:0 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:600}.filter-select span{color:#343638}.filter-select select{border:0;outline:0;background:transparent;max-width:145px;color:var(--teal);font-size:12px;font-weight:700;cursor:pointer}.filter-select:nth-child(3) select{color:#343638}.month-select select{color:#343638;max-width:135px}.calendar-icon{color:#727779!important;font-size:16px}.table-panel{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:10px 21px 0;box-shadow:0 2px 8px #00000005}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}thead th{font-size:11px;color:#6d7072;font-weight:700;height:36px;border-bottom:1px solid #dedfe0}thead th:nth-child(1){width:16%}thead th:nth-child(2){width:24%}thead th:nth-child(3){width:19%}thead th:nth-child(4){width:17%}thead th:nth-child(5){width:11%;text-align:right}thead th:nth-child(6){width:13%;text-align:center}tbody td{height:55px;border-bottom:1px solid #e7e7e7;font-size:12px;color:#3b3d3f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}tbody tr:last-child td{border-bottom:0}.item-cell{display:flex;align-items:center;gap:11px;min-width:0}.item-cell strong{overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#2d2f30}.drag-icon{font-size:17px;color:#a1a5a6;flex:0 0 auto}.category-tag{display:inline-block;background:#effdfa;color:#29978d;padding:5px 8px;border-radius:3px;font-size:10px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.date-cell{color:#777b7e}.value-cell{text-align:right;font-weight:700;color:#252729}.row-actions{display:flex;justify-content:center;gap:10px}.icon-button{width:26px;height:26px;border:0;border-radius:5px;font-weight:700;font-size:15px;display:grid;place-items:center}.edit-button{background:#f5f5f4;color:#646a6b}.delete-button{background:#ffe5e7;color:#d33b43}.icon-button:hover{filter:brightness(.96)}.empty-state{text-align:center!important;padding:32px!important;color:#777!important;white-space:normal!important}.table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;border-top:1px solid #e8e8e8;color:#777b7d;font-size:12px}.pagination{display:flex;gap:6px;align-items:center}.pagination button{background:#fff;border:1px solid #e0e1e2;border-radius:6px;height:28px;min-width:30px;padding:0 10px;color:#4d5051;font-size:11px}.pagination button.current{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}.pagination button:disabled{color:#999}.demo-panel{margin-top:24px;padding:22px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 2px 8px #00000005}.demo-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}.demo-heading h2{margin:0 0 5px;font-size:16px}.demo-heading p{margin:0;font-size:12px;color:#777b7e}.demo-badge{font-size:10px;color:#17887f;background:#effdfa;padding:6px 9px;border-radius:20px;white-space:nowrap}.expense-form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}.form-field label{font-size:11px;font-weight:700;color:#55595b}.form-field input,.form-field select{width:100%;height:36px;min-width:0;border:1px solid #dedfe0;border-radius:7px;padding:0 9px;background:white;font-size:12px;outline-color:var(--teal)}.item-field{grid-column:span 2}.form-actions{grid-column:1/-1;display:flex;gap:8px}.primary-button{height:36px}.secondary-button{border:1px solid #ddd;border-radius:7px;background:#fff;padding:0 14px;font-size:12px}.form-message{margin:12px 0 0;color:#16857c;font-size:12px}.footnote{font-size:11px;color:#8a8d8e;margin:12px 2px}.sidebar-bottom{min-height:60px}@media(max-width:1150px){.main-content{padding:28px 22px}.filter-panel{flex-wrap:wrap}.search-box{flex-basis:100%}.filter-select{flex:1;justify-content:center}.expense-form{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.sidebar{width:64px;flex-basis:64px;padding:20px 8px}.brand{padding:0 8px 28px}.brand>div:last-child,.nav-item:not(.active){font-size:0}.brand-mark{flex:0 0 31px}.nav-item{padding:0;justify-content:center;font-size:0}.nav-icon{font-size:20px}.sidebar-bottom{justify-content:center;padding:14px 0 0}.sidebar-bottom>div{display:none}.main-content{padding:24px 14px}.page-header{align-items:flex-start;flex-direction:column;margin-bottom:24px}.page-header h1{font-size:24px}.filter-panel{padding:13px;gap:8px}.filter-select{flex-basis:100%;justify-content:flex-start}.filter-select select{max-width:none}.table-panel{padding:8px 12px 0}.table-scroll table{min-width:790px}.table-footer{align-items:flex-start;flex-direction:column;padding:13px 0}.pagination{flex-wrap:wrap}.expense-form{grid-template-columns:repeat(2,minmax(0,1fr))}.item-field{grid-column:span 2}.demo-panel{padding:16px}.demo-heading{flex-direction:column}}
.filter-panel .filter-form{display:flex;gap:14px;align-items:center;flex-wrap:wrap;width:100%}
.filter-panel .filter-form .search-box{flex:1;min-width:220px}