:root{--primary:#005fcd;--primary-light:#e0effe;--primary-50:#f0f7ff;--secondary:#ff9e37;--secondary-light:#fff3e0;--dark:#06266f;--bg:#f4f7fc;--card-bg:#fff;--text:#1a1a2e;--text-muted:#6b7280;--border:#e2e8f0;--success:#16a34a;--success-bg:#dcfce7;--warning:#ea580c;--warning-bg:#fed7aa;--pending:#ff9e37;--pending-bg:#ffe8cc;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001a;--shadow-lg:0 8px 30px #0000001f;--radius:12px;--radius-lg:16px;--transition:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}::selection{background-color:var(--primary);color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}.header{background:linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);z-index:100;padding:0;position:sticky;top:0;box-shadow:0 4px 20px #005fcd4d}.header-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex}.header-brand{align-items:center;gap:14px;display:flex}.header-logo{object-fit:cover;border:2px solid #ffffff4d;border-radius:12px;width:48px;height:48px;box-shadow:0 2px 8px #0003}.header-title{color:#fff;letter-spacing:-.5px;font-size:24px;font-weight:800}.header-subtitle{color:#ffffffb3;letter-spacing:1px;text-transform:uppercase;font-size:12px;font-weight:500}.header-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.bill-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius);color:#fff;background:#ffffff26;border:1px solid #fff3;align-items:center;gap:8px;padding:10px 18px;font-size:15px;font-weight:700;display:flex}.bill-badge .amount{color:var(--secondary);font-size:18px}.btn{border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;align-items:center;gap:6px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn-secondary{background:var(--secondary);color:#fff;box-shadow:0 2px 8px #ff9e374d}.btn-secondary:hover{background:#e88a20;transform:translateY(-1px);box-shadow:0 4px 14px #ff9e3766}.btn-outline{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #ffffff4d}.btn-outline:hover{background:#fff3;transform:translateY(-1px)}.btn-glass{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #ffffff40}.btn-glass:hover{background:#ffffff40}.controls-bar{background:#00000026;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;display:flex}.controls-left{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.controls-right{align-items:center;gap:8px;display:flex}.date-nav{border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;align-items:center;gap:6px;padding:4px;display:flex}.date-nav button{cursor:pointer;width:32px;height:32px;color:var(--primary);transition:var(--transition);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;font-size:16px;display:flex}.date-nav button:hover{background:var(--primary-light)}.date-nav input[type=date]{color:var(--text);cursor:pointer;background:0 0;border:none;outline:none;padding:4px 8px;font-family:inherit;font-size:13px;font-weight:600}.date-label{color:#fff;opacity:.9;font-size:13px;font-weight:600}.date-range-toggle{color:#fff;align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex}.toggle-switch{cursor:pointer;width:44px;height:24px;transition:var(--transition);background:#fff3;border:1px solid #ffffff4d;border-radius:12px;position:relative}.toggle-switch.active{background:var(--secondary)}.toggle-switch:after{content:"";width:18px;height:18px;transition:var(--transition);background:#fff;border-radius:50%;position:absolute;top:2px;left:3px;box-shadow:0 1px 3px #0003}.toggle-switch.active:after{left:22px}.view-toggle{background:#ffffff1f;border:1px solid #fff3;border-radius:10px;padding:3px;display:flex}.view-toggle-btn{color:#ffffffb3;cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:8px;align-items:center;gap:5px;padding:6px 14px;font-family:inherit;font-size:13px;font-weight:600;display:flex}.view-toggle-btn.active{color:var(--primary);box-shadow:var(--shadow-sm);background:#fff}.view-toggle-btn:hover:not(.active){color:#fff;background:#ffffff1a}.filter-bar{border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 24px;display:flex}.filter-group{align-items:center;gap:6px;display:flex}.filter-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.filter-select{border:1.5px solid var(--border);color:var(--text);cursor:pointer;transition:var(--transition);appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 8px center no-repeat;border-radius:8px;padding:6px 28px 6px 10px;font-family:inherit;font-size:13px;font-weight:500}.filter-select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #005fcd1a}.items-count{color:var(--text-muted);margin-left:auto;font-size:13px;font-weight:500}.items-count strong{color:var(--primary)}.main-content{max-width:1400px;margin:0 auto;padding:20px 24px}.table-wrapper{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border);background:#fff;overflow:hidden}.grocery-table{border-collapse:collapse;width:100%}.grocery-table thead{background:linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%)}.grocery-table thead th{text-align:center;color:#fff;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;padding:14px 16px;font-size:13px;font-weight:700}.grocery-table tbody tr{border-bottom:1px solid var(--border);transition:var(--transition)}.grocery-table tbody tr:hover{background:var(--primary-50)}.grocery-table tbody tr:last-child{border-bottom:none}.grocery-table tbody td{text-align:center;padding:12px 16px;font-size:14px;font-weight:500}.grocery-table .item-name{text-align:left;color:var(--text);font-weight:600}.grocery-table .price{color:var(--text);font-weight:700}.status-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;align-items:center;padding:4px 12px;font-size:12px;font-weight:700;display:inline-flex}.status-pending{background:var(--pending-bg);color:var(--pending)}.status-gpay{color:#0284c7;background:#e0f2fe}.status-cashbox{background:var(--success-bg);color:var(--success)}.status-cash{color:#7c3aed;background:#f3e8ff}.type-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:6px;align-items:center;padding:3px 10px;font-size:11px;font-weight:700;display:inline-flex}.type-institute{background:var(--primary-light);color:var(--primary)}.type-home{color:#d97706;background:#fef3c7}.summary-row{font-weight:700}.summary-row.total{background:linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);color:#fff}.summary-row.total td{color:#fff;font-size:15px}.summary-row.pending-summary{background:#fffbeb}.summary-row.pending-summary td{color:var(--pending)}.summary-row.gpay-summary{background:#f0f9ff}.summary-row.gpay-summary td{color:#0284c7}.summary-row.cashbox-summary{background:#f0fdf4}.summary-row.cashbox-summary td{color:var(--success)}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;display:grid}.grocery-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:var(--transition);background:#fff;padding:20px;position:relative;overflow:hidden}.grocery-card:before{content:"";background:linear-gradient(90deg, var(--primary), var(--secondary));height:4px;position:absolute;top:0;left:0;right:0}.grocery-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary);transform:translateY(-3px)}.card-header{justify-content:space-between;align-items:flex-start;margin-bottom:14px;display:flex}.card-title{color:var(--text);font-size:16px;font-weight:700;line-height:1.3}.card-sr{background:var(--primary);color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:700;display:flex}.card-body{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;display:grid}.card-field{flex-direction:column;gap:2px;display:flex}.card-field-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.card-field-value{color:var(--text);font-size:15px;font-weight:700}.card-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding-top:12px;display:flex}.card-total{color:var(--primary);font-size:20px;font-weight:800}.summary-section{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px;display:grid}.summary-card{border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:var(--transition);background:#fff;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.summary-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.summary-card-label{color:var(--text-muted);font-size:13px;font-weight:600}.summary-card-value{font-size:20px;font-weight:800}.summary-card.total-card{border-left:4px solid var(--primary)}.summary-card.total-card .summary-card-value{color:var(--primary)}.summary-card.pending-card{border-left:4px solid var(--pending)}.summary-card.pending-card .summary-card-value{color:var(--pending)}.summary-card.gpay-card{border-left:4px solid #0284c7}.summary-card.gpay-card .summary-card-value{color:#0284c7}.summary-card.cashbox-card{border-left:4px solid var(--success)}.summary-card.cashbox-card .summary-card-value{color:var(--success)}.pagination{justify-content:center;align-items:center;gap:6px;margin-top:24px;padding:16px;display:flex}.pagination button{border:1.5px solid var(--border);width:36px;height:36px;color:var(--text);cursor:pointer;transition:var(--transition);background:#fff;border-radius:8px;justify-content:center;align-items:center;font-family:inherit;font-size:13px;font-weight:600;display:flex}.pagination button:hover:not(.active):not(:disabled){background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.pagination button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 8px #005fcd4d}.pagination button:disabled{opacity:.4;cursor:not-allowed}.pagination-info{color:var(--text-muted);margin:0 12px;font-size:13px;font-weight:500}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);background:#fff;flex-direction:column;width:90vw;max-width:600px;max-height:80vh;animation:.3s slideUp;display:flex;overflow:hidden;box-shadow:0 20px 60px #0000004d}.modal-header{background:linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);color:#fff;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-title{font-size:20px;font-weight:700}.modal-close{color:#fff;cursor:pointer;width:36px;height:36px;transition:var(--transition);background:#ffffff26;border:none;border-radius:10px;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex}.modal-close:hover{background:#ffffff4d}.modal-body{flex:1;padding:0;overflow-y:auto}.history-table{border-collapse:collapse;width:100%}.history-table thead{background:var(--primary-50);z-index:1;position:sticky;top:0}.history-table thead th{color:var(--primary);text-transform:uppercase;letter-spacing:.5px;text-align:center;padding:12px 16px;font-size:12px;font-weight:700}.history-table tbody tr{border-bottom:1px solid var(--border);transition:var(--transition)}.history-table tbody tr:hover{background:var(--primary-50)}.history-table tbody td{text-align:center;padding:12px 16px;font-size:14px;font-weight:500}.history-empty{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:15px}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:60px 20px;display:flex}.spinner{border:4px solid var(--primary-light);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.loading-text{color:var(--text-muted);font-size:14px;font-weight:500}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px}.empty-state-icon{margin-bottom:12px;font-size:48px}.empty-state-text{font-size:18px;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:.4s forwards fadeInUp}@media (width<=768px){.header-top{padding:12px 16px}.header-title{font-size:18px}.header-logo{width:40px;height:40px}.controls-bar,.filter-bar{padding:10px 16px}.main-content{padding:12px}.cards-grid{grid-template-columns:1fr;gap:12px}.summary-section{grid-template-columns:1fr 1fr}.bill-badge{padding:8px 12px;font-size:13px}.bill-badge .amount{font-size:15px}.btn{padding:8px 14px;font-size:13px}.grocery-table thead th{padding:10px 6px;font-size:10px}.grocery-table tbody td{padding:8px 6px;font-size:12px}.date-nav input[type=date]{width:110px;font-size:12px}}@media (width<=480px){.header-actions{justify-content:center;width:100%}.summary-section{grid-template-columns:1fr}.filter-bar{gap:6px}.filter-select{padding:5px 24px 5px 8px;font-size:12px}.cards-grid{grid-template-columns:1fr}}