:root{--primary: #6366f1;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--text: #1f2937;--text-light: #6b7280;--bg: #ffffff;--card-bg: #f9fafb;--border: #e5e7eb;--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);} [data-theme="dark"]{--primary: #818cf8;--text: #f9fafb;--text-light: #d1d5db;--bg: #111827;--card-bg: #1f2937;--border: #374151;} *{margin: 0;padding: 0;box-sizing: border-box;} body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;background: var(--bg);color: var(--text);line-height: 1.6;transition: all 0.3s ease;} .container{max-width: 1200px;margin: 0 auto;padding: 20px;} .header{display: flex;justify-content: space-between;align-items: center;background: var(--card-bg);padding: 24px;border-radius: 16px;box-shadow: var(--shadow);margin-bottom: 24px;} .header h1{color: var(--primary);font-size: 2rem;font-weight: 700;} .header-controls{display: flex;gap: 12px;} .btn{padding: 10px 16px;border: none;border-radius: 8px;cursor: pointer;font-weight: 600;transition: all 0.3s ease;text-decoration: none;display: inline-flex;align-items: center;gap: 8px;} .btn-primary{background: var(--primary);color: white;} .btn-secondary{background: var(--card-bg);color: var(--text);border: 1px solid var(--border);} .btn-danger{background: var(--danger);color: white;} .btn:hover{transform: translateY(-2px);box-shadow: var(--shadow);} .theme-toggle{background: var(--card-bg);border: 2px solid var(--border);border-radius: 50%;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 18px;} .quick-actions{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 16px;margin-bottom: 24px;} .quick-btn{padding: 16px 24px;border: none;border-radius: 12px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: 8px;} .quick-btn.income{background: linear-gradient(135deg, var(--success), #34d399);color: white;} .quick-btn.expense{background: linear-gradient(135deg, var(--danger), #f87171);color: white;} .quick-btn.stats{background: linear-gradient(135deg, var(--warning), #fbbf24);color: white;} .quick-btn.export{background: linear-gradient(135deg, var(--primary), #818cf8);color: white;} .summary{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-bottom: 32px;} .summary-card{background: var(--card-bg);padding: 24px;border-radius: 16px;box-shadow: var(--shadow);text-align: center;transition: transform 0.3s ease;} .summary-card:hover{transform: translateY(-4px);} .summary-card h3{color: var(--text-light);font-size: 0.9rem;margin-bottom: 8px;text-transform: uppercase;letter-spacing: 0.5px;} .summary-card p{font-size: 1.8rem;font-weight: 700;margin-bottom: 8px;} .summary-card.balance{background: linear-gradient(135deg, var(--primary), #818cf8);color: white;} .summary-card.income p{color: var(--success);} .summary-card.expense p{color: var(--danger);} .form-section{background: var(--card-bg);padding: 32px;border-radius: 16px;box-shadow: var(--shadow);margin-bottom: 32px;} .form-section h2{margin-bottom: 24px;color: var(--text);font-size: 1.5rem;} .form-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 20px;} .form-group{display: flex;flex-direction: column;gap: 8px;} .form-group label{font-weight: 600;color: var(--text);} .form-group input, .form-group select{padding: 12px 16px;border: 2px solid var(--border);border-radius: 8px;font-size: 16px;background: var(--bg);color: var(--text);transition: border-color 0.3s ease;} .form-group input:focus, .form-group select:focus{outline: none;border-color: var(--primary);} .type-selector{grid-column: 1 / -1;} .radio-group{display: grid;grid-template-columns: 1fr 1fr;gap: 16px;margin-top: 8px;} .radio-card{display: block;padding: 20px;border: 2px solid var(--border);border-radius: 12px;cursor: pointer;transition: all 0.3s ease;text-align: center;} .radio-card input{display: none;} .radio-card:hover{border-color: var(--primary);} .radio-card.income:has(input:checked){background: var(--success);color: white;border-color: var(--success);} .radio-card.expense:has(input:checked){background: var(--danger);color: white;border-color: var(--danger);} .radio-content{display: flex;flex-direction: column;align-items: center;gap: 8px;} .radio-icon{font-size: 2rem;} .form-actions{grid-column: 1 / -1;display: flex;gap: 16px;justify-content: flex-end;margin-top: 24px;} .filters-section{background: var(--card-bg);padding: 32px;border-radius: 16px;box-shadow: var(--shadow);margin-bottom: 32px;} .filters-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 24px;} .filter-presets{display: flex;gap: 8px;} .preset-btn{padding: 8px 16px;background: var(--bg);border: 1px solid var(--border);border-radius: 6px;cursor: pointer;font-size: 0.9rem;transition: all 0.3s ease;} .preset-btn:hover, .preset-btn.active{background: var(--primary);color: white;} .filters-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 16px;} .chart-section{background: var(--card-bg);padding: 32px;border-radius: 16px;box-shadow: var(--shadow);margin-bottom: 32px;} .charts-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: 24px;} .chart-container{background: var(--bg);padding: 20px;border-radius: 12px;border: 1px solid var(--border);} .chart-container h3{text-align: center;margin-bottom: 16px;color: var(--text);} .transactions-section{background: var(--card-bg);padding: 32px;border-radius: 16px;box-shadow: var(--shadow);} .transactions-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 24px;} .transaction-item{display: grid;grid-template-columns: auto 1fr auto auto;gap: 16px;align-items: center;padding: 20px;background: var(--bg);border-radius: 12px;border-left: 4px solid var(--primary);margin-bottom: 12px;transition: transform 0.3s ease;} .transaction-item:hover{transform: translateX(4px);} .transaction-item.income{border-left-color: var(--success);} .transaction-item.expense{border-left-color: var(--danger);} .transaction-type{font-size: 1.5rem;} .transaction-details h4{margin-bottom: 4px;color: var(--text);} .transaction-details p{color: var(--text-light);font-size: 0.9rem;} .transaction-amount{font-size: 1.2rem;font-weight: 700;} .transaction-amount.income{color: var(--success);} .transaction-amount.expense{color: var(--danger);} .modal{display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);} .modal-content{background: var(--card-bg);margin: 10% auto;padding: 32px;border-radius: 16px;width: 90%;max-width: 500px;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);} .modal-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 24px;} .modal-close{background: none;border: none;font-size: 24px;cursor: pointer;color: var(--text-light);} .modal-footer{display: flex;gap: 16px;justify-content: flex-end;margin-top: 24px;} .toast-container{position: fixed;top: 20px;right: 20px;z-index: 1100;} .toast{background: var(--card-bg);color: var(--text);padding: 16px 20px;border-radius: 8px;box-shadow: var(--shadow);border-left: 4px solid var(--primary);margin-bottom: 12px;animation: slideIn 0.3s ease;} .toast.success{border-left-color: var(--success);} .toast.error{border-left-color: var(--danger);} @keyframes slideIn{from{transform: translateX(100%);opacity: 0;} to{transform: translateX(0);opacity: 1;}} .empty-state{text-align: center;padding: 40px;color: var(--text-light);} .empty-state h3{margin-bottom: 16px;color: var(--text);} .fab{position: fixed;bottom: 24px;right: 24px;width: 56px;height: 56px;border-radius: 50%;background: var(--primary);color: white;border: none;font-size: 24px;cursor: pointer;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);transition: all 0.3s ease;z-index: 100;} .fab:hover{transform: scale(1.1);} @media (max-width: 768px){.container{padding: 16px;} .header{flex-direction: column;gap: 16px;text-align: center;} .form-grid{grid-template-columns: 1fr;} .charts-grid{grid-template-columns: 1fr;} .transaction-item{grid-template-columns: 1fr;text-align: center;gap: 12px;} .summary{grid-template-columns: 1fr;} .filters-grid{grid-template-columns: 1fr;}} .loading{opacity: 0.6;pointer-events: none;} .progress-bar{height: 4px;background: var(--border);border-radius: 2px;overflow: hidden;margin-top: 8px;} .progress-fill{height: 100%;background: var(--primary);transition: width 0.8s ease;} .progress-fill.income{background: var(--success);} .progress-fill.expense{background: var(--danger);}