.dashboard{animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dashboard-header h1{font-size:28px;font-weight:700;color:#1f2937}.header-actions{display:flex;gap:12px}.totals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:32px}.total-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;border-left:4px solid}.total-card.overdue{border-left-color:#dc2626}.total-card.due-soon{border-left-color:#f59e0b}.total-card.upcoming{border-left-color:#10b981}.total-label{font-size:14px;color:#6b7280;font-weight:500;margin-bottom:8px}.total-amount{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:4px}.total-count{font-size:13px;color:#9ca3af}.bills-section{margin-bottom:32px}.bills-section h2{font-size:20px;font-weight:600;margin-bottom:16px;color:#1f2937}.bills-list{display:grid;gap:16px}.bill-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px #0000001a;border-left:4px solid;transition:all .2s}.bill-card:hover{box-shadow:0 4px 6px #0000001a;transform:translateY(-2px)}.bill-card.overdue{border-left-color:#dc2626;background:#fef2f2}.bill-card.due-soon{border-left-color:#f59e0b;background:#fffbeb}.bill-card.upcoming{border-left-color:#10b981}.bill-card.autopay{border-left-color:#3b82f6}.bill-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.bill-name-section{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bill-name-section h3{font-size:18px;font-weight:600;color:#1f2937}.bill-type-badge{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;color:#fff;text-transform:uppercase}.bill-amount{font-size:22px;font-weight:700;color:#1f2937}.variable-indicator{font-size:14px;color:#6b7280;margin-left:4px}.bill-details{font-size:14px;color:#6b7280;line-height:1.6;margin-bottom:16px}.bill-details>div{margin-bottom:4px}.autopay-info{color:#3b82f6}.bill-notes{margin-top:8px;padding-top:8px;border-top:1px solid #E5E7EB;font-style:italic}.bill-actions{display:flex;gap:8px}.btn-mark-paid{background:#10b981;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s;flex:1}.btn-mark-paid:hover{background:#059669}.recent-payments{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.recent-payments h2{font-size:18px;font-weight:600;margin-bottom:16px;color:#1f2937}.payments-list{display:flex;flex-direction:column;gap:12px}.payment-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f9fafb;border-radius:8px}.payment-name{font-weight:500;color:#1f2937}.payment-date{font-size:13px;color:#6b7280}.payment-amount{font-weight:600;color:#1f2937}@media (max-width: 768px){.dashboard-header{flex-direction:column;align-items:flex-start;gap:16px}.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}.totals-grid{grid-template-columns:1fr}}.bills-page{animation:fadeIn .3s}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-header h1{font-size:28px;font-weight:700;color:#1f2937}.filters{display:flex;gap:8px;margin-bottom:24px;background:#fff;padding:12px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.filters button{background:none;border:1px solid #E5E7EB;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s}.filters button:hover{background:#f3f4f6;border-color:#d1d5db}.filters button.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.bills-table{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.bills-table table{width:100%;border-collapse:collapse}.bills-table th{background:#f9fafb;padding:16px;text-align:left;font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #E5E7EB}.bills-table td{padding:16px;border-bottom:1px solid #F3F4F6;font-size:14px;color:#1f2937}.bills-table tbody tr:hover{background:#f9fafb}.bills-table tbody tr:last-child td{border-bottom:none}.variable{color:#f59e0b;font-weight:600}.status-paid{color:#10b981;font-weight:500}.status-unpaid{color:#6b7280}.actions{display:flex;gap:8px}.btn-edit{background:#3b82f6;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s}.btn-edit:hover{background:#2563eb}.btn-delete{background:#fef2f2;color:#dc2626;border:1px solid #FEE2E2;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.btn-delete:hover{background:#fee2e2;border-color:#fecaca}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px;animation:fadeIn .2s}.modal-content{background:#fff;border-radius:12px;padding:32px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a;animation:slideUp .3s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{font-size:24px;font-weight:600;color:#1f2937;margin-bottom:24px}.form-actions{display:flex;gap:12px;margin-top:24px;justify-content:flex-end}@media (max-width: 768px){.bills-table{overflow-x:auto}.bills-table table{min-width:800px}.page-header{flex-direction:column;align-items:flex-start;gap:16px}.filters{flex-wrap:wrap}.modal-content{padding:24px}}.payments-page{animation:fadeIn .3s}.filters-section{background:#fff;border-radius:12px;padding:20px;margin-bottom:24px;box-shadow:0 1px 3px #0000001a}.date-filters{display:flex;gap:16px;margin-bottom:16px}.date-filters .form-group{margin-bottom:0}.type-filters{display:flex;gap:8px}.type-filters button{background:none;border:1px solid #E5E7EB;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s}.type-filters button:hover{background:#f3f4f6;border-color:#d1d5db}.type-filters button.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.totals-summary{background:#fff;border-radius:12px;padding:20px;margin-bottom:24px;box-shadow:0 1px 3px #0000001a;display:flex;gap:32px;align-items:center}.total-item{display:flex;align-items:baseline;gap:8px}.total-label{font-size:14px;color:#6b7280;font-weight:500}.total-value{font-size:24px;font-weight:700;color:#1f2937}.total-item.business .total-value{color:#10b981}.total-item.personal .total-value{color:#3b82f6}.payments-table{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.payments-table table{width:100%;border-collapse:collapse}.payments-table th{background:#f9fafb;padding:16px;text-align:left;font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #E5E7EB}.payments-table td{padding:16px;border-bottom:1px solid #F3F4F6;font-size:14px;color:#1f2937}.payments-table td.amount{font-weight:600}.payments-table tbody tr:hover{background:#f9fafb}.payments-table tbody tr:last-child td{border-bottom:none}.no-data{text-align:center;color:#9ca3af;padding:40px!important;font-style:italic}.status-late{color:#dc2626;font-weight:500}.status-on-time{color:#10b981;font-weight:500}@media (max-width: 768px){.date-filters{flex-direction:column}.totals-summary{flex-direction:column;align-items:flex-start;gap:16px}.payments-table{overflow-x:auto}.payments-table table{min-width:900px}}.color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.category-name-cell{display:flex;align-items:center;gap:8px;font-weight:500}.category-icon-label{font-size:13px;color:#6b7280}.bills-count{display:inline-block;background:#f3f4f6;color:#374151;font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px}.color-input-row{display:flex;align-items:center;gap:10px}.color-picker{width:44px;height:36px;border:1px solid #D1D5DB;border-radius:6px;padding:2px;cursor:pointer;background:none}.color-hex{font-size:13px;color:#6b7280;font-family:monospace}.label-hint{font-size:12px;font-weight:400;color:#9ca3af;margin-left:4px}.btn-delete:disabled{opacity:.4;cursor:not-allowed}.btn-danger{background:#dc2626;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-danger:hover{background:#b91c1c}.confirm-modal{max-width:420px}.confirm-modal p{color:#4b5563;font-size:15px;margin-bottom:8px;line-height:1.5}.empty-row{text-align:center;color:#9ca3af;padding:40px 16px!important;font-size:14px}.auth-page{min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.auth-container{width:100%;max-width:450px}.auth-header{text-align:center;margin-bottom:32px;color:#fff}.auth-header h1{font-size:32px;font-weight:700;margin-bottom:8px}.auth-header p{font-size:16px;opacity:.9}.auth-form{background:#fff;padding:40px;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a}.auth-form h2{font-size:24px;font-weight:600;color:#1f2937;margin-bottom:24px;text-align:center}.error-message{background:#fef2f2;color:#dc2626;padding:12px;border-radius:8px;font-size:14px;margin-bottom:20px;border:1px solid #FEE2E2}.auth-footer{text-align:center;margin-top:24px;font-size:14px;color:#6b7280}.auth-footer a{color:#3b82f6;text-decoration:none;font-weight:500}.auth-footer a:hover{text-decoration:underline}@media (max-width: 480px){.auth-form{padding:32px 24px}.auth-header h1{font-size:28px}}.app-layout{min-height:100vh;display:flex;flex-direction:column}.navbar{background:#fff;border-bottom:1px solid #E5E7EB;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px #0000001a}.nav-brand h1{font-size:20px;font-weight:600;color:#1f2937}.nav-links{display:flex;gap:8px;flex:1;justify-content:center}.nav-links button{background:none;border:none;padding:8px 16px;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;border-radius:6px;transition:all .2s}.nav-links button:hover{background:#f3f4f6;color:#1f2937}.nav-links button.active{background:#eff6ff;color:#3b82f6}.nav-user{display:flex;align-items:center;gap:16px}.user-name{font-size:14px;color:#6b7280;font-weight:500}.btn-logout{background:#fef2f2;color:#dc2626;border:1px solid #FEE2E2;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.btn-logout:hover{background:#fee2e2;border-color:#fecaca}.main-content{flex:1;padding:24px;max-width:1400px;width:100%;margin:0 auto}@media (max-width: 768px){.navbar{padding:0 16px}.nav-brand h1{font-size:16px}.nav-links{gap:4px}.nav-links button{padding:6px 12px;font-size:13px}.user-name{display:none}.main-content{padding:16px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f7fa;color:#333}.loading{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:18px;color:#666}.error{padding:20px;color:#dc2626;text-align:center}.btn-primary{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#2563eb}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#fff;color:#4b5563;border:1px solid #D1D5DB;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#f9fafb;border-color:#9ca3af}.btn-full{width:100%}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-weight:500;font-size:14px;color:#374151}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:6px;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.category-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500;color:#fff}.type-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize}.type-badge.business{background:#10b981;color:#fff}.type-badge.personal{background:#3b82f6;color:#fff}