:root{--primary: #3B82F6;--success: #10B981;--danger: #EF4444;--neutral: #F3F4F6;--text-dark: #1F2937;--text-light: #6B7280;--border: #E5E7EB;--spacing-unit: 1rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.app{max-width:800px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;overflow:hidden}.app-header{background:linear-gradient(135deg,var(--primary) 0%,#667eea 100%);color:#fff;padding:40px 20px;text-align:center}.app-header h1{font-size:2rem;margin-bottom:10px}.app-main{padding:30px 20px}section{margin-bottom:40px}section h2{color:var(--text-dark);margin-bottom:20px;font-size:1.3rem;border-bottom:2px solid var(--neutral);padding-bottom:10px}.expense-form{display:grid;gap:20px;background:var(--neutral);padding:20px;border-radius:8px}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:600;color:var(--text-dark);margin-bottom:8px;font-size:.9rem}.form-group input,.form-group select{padding:12px;border:2px solid var(--border);border-radius:6px;font-size:1rem;transition:all .3s ease;font-family:inherit}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.form-group input.input-error{border-color:var(--danger)}.error{color:var(--danger);font-size:.85rem;margin-top:4px}.btn-primary{background:var(--primary);color:#fff;padding:12px 24px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.btn-primary:active{transform:translateY(0)}.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}.summary-card{background:linear-gradient(135deg,var(--success) 0%,#059669 100%);color:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 12px #0000001a}.summary-card h3{font-size:.9rem;font-weight:600;opacity:.9;margin-bottom:8px}.summary-card .amount-summary,.summary-card .count{font-size:2rem;font-weight:700}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.filter-btn{padding:8px 16px;border:2px solid var(--border);background:#fff;border-radius:20px;cursor:pointer;font-weight:500;transition:all .3s ease;color:var(--text-dark)}.filter-btn:hover{border-color:var(--primary);color:var(--primary)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.empty-state{text-align:center;padding:40px 20px;color:var(--text-light);font-size:1.1rem}.expense-list{display:flex;flex-direction:column;gap:12px}.expense-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#fff;border:1px solid var(--border);border-radius:8px;transition:all .3s ease}.expense-item:hover{box-shadow:0 4px 12px #00000014;transform:translate(4px)}.expense-content{flex:1;display:flex;justify-content:space-between;align-items:center;gap:20px;min-width:0}.expense-header{display:flex;align-items:center;gap:12px;flex:1;min-width:0;max-width:60%}.category-icon{font-size:1.5rem;min-width:40px;text-align:center}.expense-info{min-width:0;flex:1}.expense-info h4{color:var(--text-dark);margin-bottom:4px;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.category{color:var(--text-light);font-size:.85rem;text-transform:capitalize}.expense-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;width:140px;min-width:140px}.date{color:var(--text-light);font-size:.85rem;white-space:nowrap}.amount{font-weight:700;color:var(--success);font-size:1.1rem;white-space:nowrap}.amount-summary{font-weight:700;color:var(--neutral);font-size:1.1rem;white-space:nowrap}.btn-delete{background:var(--border);color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease;margin-left:12px;padding:0;flex-shrink:0}.btn-delete img{width:16px;height:16px;object-fit:contain}.btn-delete:hover{background:#b5b5b5;transform:scale(1.1)}@media(max-width:640px){.app-header h1{font-size:1.5rem}section h2{font-size:1.1rem}.expense-content{flex-direction:column;align-items:flex-start}.expense-meta{align-items:flex-start}.filter-bar{gap:8px}.filter-btn{padding:6px 12px;font-size:.9rem}}