:root {
     --primary: #6366f1;
     --primary-dark: #4f46e5;
     --secondary: #f43f5e;
     --light: #f9fafb;
     --dark: #1e293b;
     --success: #10b981;
     --warning: #f59e0b;
 }

 body {
     background-color: #f8fafc;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .app-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem 1rem;
 }

 .app-header {
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: white;
     border-radius: 12px;
     padding: 2rem;
     margin-bottom: 2rem;
     box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
 }

 .card {
     border: none;
     border-radius: 12px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }

 .summary-card {
     height: 100%;
     border-left: 5px solid var(--primary);
 }

 .summary-card.income {
     border-left-color: var(--success);
 }

 .summary-card.expense {
     border-left-color: var(--secondary);
 }

 .summary-card.balance {
     border-left-color: var(--warning);
 }

 .btn-primary {
     background-color: var(--primary);
     border-color: var(--primary);
 }

 .btn-primary:hover {
     background-color: var(--primary-dark);
     border-color: var(--primary-dark);
 }

 .btn-danger {
     background-color: var(--secondary);
     border-color: var(--secondary);
 }

 .table-container {
     background-color: white;
     border-radius: 12px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 .table {
     margin-bottom: 0;
 }

 .table th {
     background-color: #f1f5f9;
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.8rem;
     letter-spacing: 0.05em;
 }

 .expense-amount {
     color: var(--secondary);
     font-weight: 600;
 }

 .income-amount {
     color: var(--success);
     font-weight: 600;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
 }

 .empty-state {
     text-align: center;
     padding: 3rem;
     color: #94a3b8;
 }

 .empty-state svg {
     width: 120px;
     height: 120px;
     margin-bottom: 1.5rem;
 }

 @media (max-width: 768px) {
     .app-header {
         padding: 1.5rem;
     }

     .summary-cards .col-md-4 {
         margin-bottom: 1rem;
     }
 }

 /* Animation for new entries */
 @keyframes highlightRow {
     0% {
         background-color: rgba(99, 102, 241, 0.2);
     }

     100% {
         background-color: transparent;
     }
 }

 .highlight {
     animation: highlightRow 2s ease-out;
 }

 /* Custom scrollbar */
 .table-responsive::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }

 .table-responsive::-webkit-scrollbar-track {
     background: #f1f5f9;
     border-radius: 4px;
 }

 .table-responsive::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 4px;
 }

 .table-responsive::-webkit-scrollbar-thumb:hover {
     background: #94a3b8;
 }