:root{--color-background:#f5f7fa;--color-surface:#fff;--color-surface-variant:#f1f5f9;--color-on-surface:#2c3e50;--color-on-surface-variant:#44505b;--color-outline:#d6dde6;--color-outline-variant:#e6e9ef;--color-outline-hover:#b6c3d3;--color-primary:#3498db;--color-on-primary:#fff;--color-primary-container:#e8f4fd;--color-on-primary-container:#1f6fd0;--color-primary-darken-1:#217dbb;--color-primary-container-strong:#d1e9fb;--color-error:#e74c3c;--color-on-error:#fff;--color-error-container:#fff0f0;--color-on-error-container:#ff7675;--color-error-darken-1:#d62c1a;--color-scrim:#0f172a66;--color-scrim-rgb:15, 23, 42}.input-card,.results-card{background:var(--color-surface);box-shadow:0 6px 16px rgba(var(--color-scrim-rgb), .06);border-radius:12px;padding:20px}@media (height<=700px){.input-card,.results-card{padding:15px}}.input-card{flex-shrink:0}.results-card{flex-direction:column;display:flex;overflow:hidden}.total-row{border-bottom:1px solid var(--color-outline-variant);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;display:flex}.total-row .total-label{color:var(--color-on-surface);font-weight:500}.total-row .total-amount{color:var(--color-on-surface);font-size:1.2rem;font-weight:700}.form-group{margin-bottom:12px}.form-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}label{color:var(--color-on-surface-variant);margin-bottom:6px;font-size:.875rem;font-weight:500;display:block}input{border:1px solid var(--color-outline);border-radius:8px;width:100%;padding:10px}input:focus{outline:2px solid var(--color-primary-container);border-color:var(--color-primary)}.form-actions{gap:8px;display:flex}.table-wrapper{border:1px solid var(--color-outline-variant);border-radius:8px;flex:1;min-height:0;position:relative;overflow:auto}.table-wrapper::-webkit-scrollbar{width:6px;height:6px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--color-outline-variant);border-radius:10px}table{border-collapse:separate;border-spacing:0;width:100%;min-width:400px}th,td{text-align:left;border-bottom:1px solid var(--color-outline-variant);padding:10px 12px}th:first-child,td:first-child{word-break:break-word}th{color:var(--color-on-surface-variant);text-transform:uppercase;background:var(--color-surface-variant);z-index:10;font-size:.8rem;font-weight:700;position:sticky;top:0}td:last-child{text-align:right;white-space:nowrap;vertical-align:middle;width:72px}.clickable-header{cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}.clickable-header:hover{background:var(--color-surface-variant);color:var(--color-on-surface)}.empty-state{text-align:center;color:var(--color-on-surface-variant);padding:40px;font-style:italic}.description-wrapper{align-items:center;gap:0;display:flex}.description-text{flex:1;min-width:0}.drag-handle{cursor:grab;color:var(--color-on-surface-variant);-webkit-user-select:none;user-select:none;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M9 20q-.825 0-1.412-.587T7 18t.588-1.412T9 16t1.413.588T11 18t-.587 1.413T9 20m6 0q-.825 0-1.412-.587T13 18t.588-1.412T15 16t1.413.588T17 18t-.587 1.413T15 20m-6-6q-.825 0-1.412-.587T7 12t.588-1.412T9 10t1.413.588T11 12t-.587 1.413T9 14m6 0q-.825 0-1.412-.587T13 12t.588-1.412T15 10t1.413.588T17 12t-.587 1.413T15 14M9 8q-.825 0-1.412-.587T7 6t.588-1.412T9 4t1.413.588T11 6t-.587 1.413T9 8m6 0q-.825 0-1.412-.587T13 6t.588-1.412T15 4t1.413.588T17 6t-.587 1.413T15 8'/%3E%3C/svg%3E") 50%/contain no-repeat;flex-shrink:0;width:0;height:1rem;transition:all .2s ease-in-out;overflow:hidden}.drag-handle:active{cursor:grabbing}@media (pointer:coarse){.drag-handle{display:none}}@media (pointer:fine){.draggable-table:not(.dragging) tr:hover .drag-handle{opacity:1;width:1rem;margin-right:4px}}.sortable-ghost{opacity:.4;background-color:var(--color-primary-container)!important}.sortable-drag{background-color:var(--color-surface);box-shadow:0 5px 15px rgba(var(--color-scrim-rgb), .15);opacity:.95}.sortable-ghost .edit-btn,.sortable-ghost .delete-btn,.sortable-drag .edit-btn,.sortable-drag .delete-btn{visibility:hidden}.edit-btn,.delete-btn{cursor:pointer;vertical-align:middle;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;line-height:1;transition:background-color .2s;display:inline-flex}.delete-btn{color:var(--color-on-error-container);font-size:1.5rem}.delete-btn:hover{background-color:var(--color-error-container)}.edit-btn{color:var(--color-primary)}.edit-btn:hover{background-color:var(--color-primary-container)}.add-btn,.cancel-btn{color:var(--color-on-primary);cursor:pointer;border:none;border-radius:8px;flex:1;padding:12px}.add-btn{background-color:var(--color-primary)}.add-btn:hover{background-color:var(--color-primary-darken-1)}.cancel-btn{background:var(--color-error)}.cancel-btn:hover{background:var(--color-error-darken-1)}.icon-btn,.text-btn{border:1px solid var(--color-outline);color:var(--color-on-surface);cursor:pointer;background:0 0;border-radius:8px}.icon-btn{justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;line-height:1;transition:background-color .15s,border-color .15s;display:inline-flex}.icon-btn:hover{background:var(--color-surface-variant);border-color:var(--color-outline-hover)}.text-btn{padding:8px 12px;font-size:.875rem;transition:background-color .15s,border-color .15s,color .15s}.text-btn:hover:not(:disabled){background:var(--color-surface-variant);border-color:var(--color-outline-hover)}.text-btn:disabled{opacity:.45;cursor:not-allowed}.text-btn.danger{color:var(--color-error);border-color:currentColor}.text-btn.danger:hover:not(:disabled){background:var(--color-error-container);border-color:var(--color-error-darken-1)}.pwa-toast{border:1px solid var(--color-outline-variant);background:var(--color-surface);box-shadow:0 4px 6px -1px rgba(var(--color-scrim-rgb), .1), 0 2px 4px -1px rgba(var(--color-scrim-rgb), .06);z-index:1000;text-align:left;border-radius:12px;flex-direction:column;align-items:center;gap:12px;max-width:200px;padding:16px;transition:transform .3s ease-in-out;display:flex;position:fixed;bottom:16px;right:16px;transform:translateY(200%)}.pwa-toast.show{transform:translateY(0)}.pwa-toast .message{color:var(--color-on-surface-variant);font-size:.875rem}@media (width<=480px){.pwa-toast{width:100%;left:50%;right:auto;transform:translate(-50%)translateY(200%)}.pwa-toast.show{transform:translate(-50%)translateY(0)}}html,body,*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{color:var(--color-on-surface);background-color:var(--color-background);font-family:Roboto,system-ui,sans-serif;font-size:1rem;line-height:1.5}input,button,select,textarea{font-family:inherit}button{font-weight:500}.app-shell{flex-direction:column;height:100%;display:flex;overflow:hidden}.topbar{background:var(--color-surface);height:56px;color:var(--color-on-surface);border-bottom:1px solid var(--color-outline-variant);z-index:50;flex-shrink:0;align-items:center;gap:12px;padding:0 16px;display:flex}.brand{color:var(--color-on-surface);white-space:nowrap;text-overflow:ellipsis;font-size:1.1rem;font-weight:700;overflow:hidden}.topbar-spacer{flex:1}.nav-toggle{border:1px solid var(--color-outline);cursor:pointer;width:36px;height:36px;color:var(--color-on-surface);background:0 0;border-radius:8px;flex-direction:column;justify-content:center;gap:4px;padding:0 8px;transition:background-color .15s,border-color .15s;display:inline-flex}.nav-toggle:hover{background:var(--color-surface-variant);border-color:var(--color-outline-hover)}.nav-toggle .bar{background:currentColor;border-radius:1px;width:18px;height:2px;display:block}.app-body{flex:1;min-height:0;display:flex;overflow:hidden}.sidebar{background:var(--color-surface);border-right:1px solid var(--color-outline-variant);flex-direction:column;flex-shrink:0;width:256px;transition:margin-left .25s ease-in-out;display:flex}@media (width>=721px){.sidebar.collapsed{margin-left:-256px}}@media (width<=720px){.sidebar{z-index:40;width:80vw;max-width:320px;box-shadow:none;flex-shrink:0;transition:transform .25s ease-in-out,box-shadow .25s ease-in-out;position:fixed;top:56px;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{box-shadow:8px 0 30px rgba(var(--color-scrim-rgb), .18);transform:translate(0)}}.sidebar-header{border-bottom:1px solid var(--color-outline-variant);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.sidebar-header h2{color:var(--color-on-surface-variant);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:700}.add-list-btn{font-size:1.2rem}.lists-menu{flex:1;min-height:0;margin:0;padding:8px;list-style:none;overflow-y:auto}.lists-menu li{cursor:pointer;color:var(--color-on-surface);border-radius:8px;align-items:center;gap:8px;min-width:0;padding:9px 12px;font-weight:500;transition:background-color .15s,color .15s;display:flex}.lists-menu li:hover{background:var(--color-surface-variant)}.lists-menu li.active{background:var(--color-primary-container);color:var(--color-on-primary-container)}.lists-menu li .list-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.lists-menu li .count-badge{color:var(--color-on-surface-variant);background:var(--color-surface-variant);border-radius:999px;flex-shrink:0;padding:1px 8px;font-size:.72rem;font-weight:500}.lists-menu li.active .count-badge{background:var(--color-primary-container-strong);color:var(--color-on-primary-container)}.sidebar-footer{border-top:1px solid var(--color-outline-variant);flex-shrink:0;gap:8px;padding:12px 16px;display:flex}.sidebar-footer .text-btn{flex:1}.sidebar-scrim{background:var(--color-scrim);z-index:35;position:fixed;inset:52px 0 0}@media (width>=721px){.sidebar-scrim{display:none!important}}.app-container{flex-direction:column;flex:1;width:100%;min-width:0;max-width:820px;margin:0 auto;padding:20px 16px;display:flex;overflow-y:auto}@media (height<=700px){.app-container{padding:12px}}.app-content{flex-direction:column;flex:1;gap:14px;min-height:0;display:flex}#pwa-refresh{cursor:pointer;background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:6px;padding:8px 16px;font-size:.875rem;transition:all .2s}#pwa-refresh:hover{background:var(--color-primary-darken-1)}