.account-card {
            background: linear-gradient(135deg, #3a3a52 0%, #2a2a3e 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 16px !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
            transition: all 0.3s ease !important;
            overflow: hidden;
            position: relative;
        }
        
        /* Plaid-linked accounts styling */
        .account-card.plaid-linked {
            background: linear-gradient(135deg, #00695c 0%, #26a69a 60%, #43cea2 100%) !important;
            border-color: #26a69a !important;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        
        .account-card.plaid-linked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #00695c, #26a69a, #43cea2);
            opacity: 1;
        }
        
        .account-card.plaid-linked::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
            pointer-events: none;
        }
        
        .account-card.plaid-linked:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 60px rgba(38, 166, 154, 0.5);
            border-color: #43cea2;
        }
        
        /* Manual accounts styling */
        .account-card.manual-account {
            background: linear-gradient(135deg, #003087 0%, #0070ba 60%, #009cde 100%) !important;
            border-color: #0070ba !important;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        
        .account-card.manual-account::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #003087, #0070ba, #009cde);
            opacity: 1;
        }
        
        .account-card.manual-account::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
            pointer-events: none;
        }
        
        .account-card.manual-account:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 60px rgba(0, 112, 186, 0.5);
            border-color: #009cde;
        }
        
        .account-card .card-body {
            padding: 1.5rem !important;
        }
        
        .account-card .institution-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: #a8b2d1 !important;
            margin-bottom: 0.3rem !important;
        }
        
        .account-card .account-name {
            font-size: 1.1rem;
            font-weight: 700;
            color: #ffffff !important;
            margin-bottom: 0.5rem !important;
            line-height: 1.3;
        }
        
        .account-card .balance-label {
            font-size: 0.8rem;
            color: #8a92b2 !important;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.3rem !important;
        }
        
        .account-card .balance-amount {
            font-size: 1.6rem;
            font-weight: 800;
            color: #ffffff !important;
            margin-bottom: 0 !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        /* Plaid-linked account icon container */
        .plaid-account-icon-container {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #3b82f6 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            box-shadow: 0 8px 25px rgba(30, 58, 138, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .plaid-account-icon-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
            border-radius: 50%;
        }
        
        .plaid-account-icon-container::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, #10b981, #059669);
            border-radius: 50%;
            border: 2px solid #ffffff;
            box-shadow: 0 3px 8px rgba(16, 185, 129, 0.5);
        }
        
        .plaid-account-icon-container .fa-link {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
            z-index: 1;
            position: relative;
        }
        
        /* Manual account icon container */
        .manual-account-icon-container {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #991b1b 0%, #b91c1c 50%, #ef4444 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            box-shadow: 0 8px 25px rgba(153, 27, 27, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .manual-account-icon-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
            border-radius: 50%;
        }
        
        .manual-account-icon-container::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            border-radius: 50%;
            border: 2px solid #ffffff;
            box-shadow: 0 3px 8px rgba(245, 158, 11, 0.5);
        }
        
        .manual-account-icon-container .fa-plus,
        .manual-account-icon-container .fa-link {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        /* Enhanced badges */
        .badge-plaid {
            background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important; /* dark green gradient */
            color: #fff !important;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(6, 94, 70, 0.5);
            text-transform: uppercase;
            border: 2px solid rgba(255, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .badge-plaid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
            border-radius: 20px;
        }
        
        .badge-plaid span {
            position: relative;
            z-index: 1;
        }
        
        .badge-manual {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; /* dark blue gradient */
            color: #fff !important;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(30, 41, 59, 0.5);
            text-transform: uppercase;
            border: 2px solid rgba(255, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .badge-manual::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
            border-radius: 20px;
        }
        
        .badge-manual span {
            position: relative;
            z-index: 1;
        }
        
        /* Account type indicator */
        .account-type-indicator {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .account-type-indicator .indicator-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .account-type-indicator.plaid .indicator-dot {
            background: #10b981;
        }
        
        .account-type-indicator.manual .indicator-dot {
            background: #f59e0b;
        }
        
        /* Balance label differentiation */
        .account-card.plaid-linked .balance-label {
            color: #bfdbfe !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            font-weight: 600;
        }
        
        .account-card.manual-account .balance-label {
            color: #fecaca !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            font-weight: 600;
        }
        
        /* Institution name differentiation */
        .account-card.plaid-linked .institution-name {
            color: #a5b4fc !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            font-weight: 600;
        }
        
        .account-card.manual-account .institution-name {
            color: #fca5a5 !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            font-weight: 600;
        }
        
        /* Editable balance styling */
        .editable-balance {
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            padding: 0.25rem 0.5rem;
            border-radius: 8px;
            border: 2px solid transparent;
        }
        
        .editable-balance:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-1px);
        }
        
        .editable-balance:hover::after {
            content: 'Click to edit';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            white-space: nowrap;
            z-index: 10;
        }
        
        .editable-balance.editing {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
        }
        
        .balance-input {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 1.6rem;
            font-weight: 800;
            width: 100%;
            text-align: left;
            outline: none;
            font-family: inherit;
        }
        
        .balance-input:focus {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            padding: 0.25rem 0.5rem;
        }
        
        .balance-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        /* Account link styling */
        .account-card .institution-name a {
            transition: all 0.3s ease;
        }
        
        .account-card.plaid-linked .institution-name a:hover {
            color: #93c5fd !important;
            text-shadow: 0 0 15px rgba(147, 197, 253, 0.6);
            transform: translateY(-1px);
        }
        
        .account-card.manual-account .institution-name a:hover {
            color: #f87171 !important;
            text-shadow: 0 0 15px rgba(248, 113, 113, 0.6);
            transform: translateY(-1px);
        }
        
        .account-card .institution-name a:hover .fa-external-link-alt {
            transform: translateY(-1px) scale(1.1);
        }
        
        /* Dropdown styling */
        .account-card .dropdown-toggle {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 0.5rem;
            transition: all 0.3s ease;
        }
        
        .account-card .dropdown-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }
        
        /* Account link text styling */
        .account-card .text-muted {
            color: #8a92b2 !important;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .account-card.plaid-linked .text-muted .fa-link {
            color: #93c5fd;
        }
        
        .account-card.manual-account .text-muted .fa-link {
            color: #f87171;
        }
        
        /* Make account link more interactive */
        .account-card small a.text-muted {
            transition: all 0.3s ease;
        }
        
        .account-card.plaid-linked small a.text-muted:hover {
            color: #bfdbfe !important;
            text-decoration: underline !important;
            text-shadow: 0 0 10px rgba(191, 219, 254, 0.5);
        }
        
        .account-card.manual-account small a.text-muted:hover {
            color: #fca5a5 !important;
            text-decoration: underline !important;
            text-shadow: 0 0 10px rgba(252, 165, 165, 0.5);
        }
        
        .account-card small a.text-muted:hover .fa-link {
            color: #ffffff !important;
        }
        
        /* Bank Autocomplete Styling */
        .bank-autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 4px 4px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: none;
        }
        
        .autocomplete-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.2s;
        }
        
        .autocomplete-item:hover {
            background-color: #f8f9fa;
        }
        
        .autocomplete-item:last-child {
            border-bottom: none;
        }
        
        /* Success Animation */
        .success-animation {
            animation: successPulse 0.6s ease-in-out;
        }
        
        @keyframes successPulse {
            0% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* Responsive design improvements */
        @media (max-width: 768px) {
            .account-card .card-body {
                padding: 1rem !important;
            }
            
            .account-card .balance-amount {
                font-size: 1.3rem !important;
            }
            
            .account-card .account-name {
                font-size: 1rem !important;
            }
            
            .plaid-account-icon-container,
            .manual-account-icon-container {
                width: 40px;
                height: 40px;
            }
            
            .account-type-indicator {
                top: 0.5rem;
                right: 0.5rem;
                font-size: 0.7rem;
            }
            
            .account-type-indicator .indicator-dot {
                width: 6px;
                height: 6px;
            }
        }
        
        /* Modern Modal Styling */
        .modal-content {
            background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 16px !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
        }
        
        /* Duplicate Resolution Modal Styling */
        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        
        .icon-circle.bg-warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        }
        
        .modal-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 2rem 2rem 1.5rem !important;
            background: linear-gradient(135deg, #3a3a52 0%, #4a4a62 100%);
            border-radius: 16px 16px 0 0 !important;
        }
        
        .modal-title {
            font-size: 1.5rem !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            margin: 0 !important;
        }
        
        .modal-body {
            padding: 2rem !important;
            background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%);
        }
        
        .modal-footer {
            border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 1.5rem 2rem 2rem !important;
            background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%);
            border-radius: 0 0 16px 16px !important;
        }
        
        /* Modern Form Controls */
        .form-label {
            font-weight: 600 !important;
            color: #a8b2d1 !important;
            font-size: 0.9rem !important;
            margin-bottom: 0.5rem !important;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .form-control, .form-select {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 2px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 12px !important;
            color: #ffffff !important;
            font-size: 1rem !important;
            padding: 0.875rem 1rem !important;
            transition: all 0.3s ease !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        }
        
        .form-control:focus, .form-select:focus {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: #f39c12 !important;
            box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            color: #ffffff !important;
        }
        
        .form-control::placeholder, .form-select::placeholder {
            color: #8a92b2 !important;
            opacity: 0.7;
        }
        
        .input-group-text {
            background: rgba(243, 156, 18, 0.1) !important;
            border: 2px solid rgba(255, 255, 255, 0.1) !important;
            border-right: none !important;
            color: #f39c12 !important;
            font-weight: 600 !important;
            border-radius: 12px 0 0 12px !important;
        }
        
        .input-group .form-control {
            border-left: none !important;
            border-radius: 0 12px 12px 0 !important;
        }
        
        .form-text {
            color: #8a92b2 !important;
            font-size: 0.8rem !important;
            margin-top: 0.5rem !important;
            font-weight: 500;
        }
        
        /* Modern Button Styling */
        .btn-primary {
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
            border: none !important;
            border-radius: 12px !important;
            padding: 0.875rem 2rem !important;
            font-weight: 700 !important;
            font-size: 0.95rem !important;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4) !important;
            transition: all 0.3s ease !important;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(243, 156, 18, 0.5) !important;
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 2px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 12px !important;
            padding: 0.875rem 2rem !important;
            font-weight: 600 !important;
            font-size: 0.95rem !important;
            color: #a8b2d1 !important;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease !important;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
            color: #ffffff !important;
            transform: translateY(-1px);
        }
        
        /* Enhanced Close Button */
        .btn-close {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 2px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 50% !important;
            width: 40px !important;
            height: 40px !important;
            opacity: 1 !important;
            transition: all 0.3s ease !important;
            position: relative !important;
            z-index: 1 !important;
        }
        
        .btn-close:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
            transform: scale(1.1);
        }
        
        .btn-close:focus {
            box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.3) !important;
        }
        
        .btn-close::before {
            content: "×" !important;
            font-size: 1.5rem !important;
            font-weight: bold !important;
            color: #ffffff !important;
            line-height: 1 !important;
        }
        
        /* Modern Row and Column Spacing */
        .modal-body .row {
            margin-bottom: 1rem;
        }
        
        .modal-body .mb-3 {
            margin-bottom: 1.5rem !important;
        }
        
        /* Category Examples Styling */
        .category-examples, .edit-category-examples {
            margin-top: 0.75rem !important;
        }
        
        .category-help, .edit-category-help {
            background: rgba(243, 156, 18, 0.1) !important;
            border: 1px solid rgba(243, 156, 18, 0.2) !important;
            border-radius: 8px !important;
            padding: 0.75rem !important;
            margin-top: 0.5rem !important;
        }
        
        .category-help small, .edit-category-help small {
            color: #f39c12 !important;
            font-weight: 500 !important;
        }
        
                 /* Currency Display Enhancement */
        .currency-display {
            background: rgba(34, 197, 94, 0.1) !important;
            border: 1px solid rgba(34, 197, 94, 0.2) !important;
            border-radius: 8px !important;
            padding: 0.5rem 0.75rem !important;
            margin-top: 0.5rem !important;
            color: #22c55e !important;
            font-weight: 600 !important;
            font-size: 0.9rem !important;
        }
        
        /* Modern Modal Backdrop */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.7) !important;
            backdrop-filter: blur(8px) !important;
        }
        
        /* Smooth Modal Animation */
        .modal.fade .modal-dialog {
            transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
        }
        
        /* Focus states for accessibility */
        .form-control:focus, .form-select:focus, .btn:focus {
            outline: none !important;
        }
        
        /* Improved Select Dropdown Arrow */
        .form-select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f39c12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 0.75rem center !important;
            background-size: 16px 12px !important;
        }
        
        /* Enhanced number input styling */
        input[type="number"] {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        /* Remove number input spinners */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        
        /* Detected accounts styling */
        .detected-account-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
        }
        
        .detected-account-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .detected-account-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #007bff, #0056b3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        /* Import context styling */
        .stat-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin: 0 auto 0.5rem;
        }
        
        .feature-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            border-color: #007bff;
            box-shadow: 0 2px 8px rgba(0,123,255,0.1);
        }
        
        /* Import detection animation */
        @keyframes slideInFromTop {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        #imported-accounts-detection {
            animation: slideInFromTop 0.5s ease-out;
        }
        
        input[type="number"] {
            -moz-appearance: textfield;
        }
        
        /* Enhanced section headers */
        .account-section-header {
            background: linear-gradient(135deg, #4a4a62, #3a3a52);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 1rem 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }
        
        .account-section-header h3 {
            color: #ffffff !important;
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .account-section-header .section-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f39c12, #e67e22);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1.1rem;
            box-shadow: 0 3px 8px rgba(243, 156, 18, 0.3);
        }
        
        /* Improved spacing for account lists */
        .account-list-container {
            margin-bottom: 2rem;
        }
        
        .account-list-container .row {
            gap: 1rem;
        }
        
        .account-list-container .col-xl-6 {
            margin-bottom: 1.5rem;
        }
        
        /* Better no accounts message */
        .no-accounts-message {
            background: linear-gradient(135deg, #4a4a62, #3a3a52);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            color: #a8b2d1;
            font-size: 0.9rem;
            margin: 1rem 0;
        }

        #no-accounts-message .icon-circle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #2a3042;
            color: #7b8b9c;
            margin-bottom: 1.5rem;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        #no-accounts-message .icon-circle:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.25);
        }
        #no-accounts-message .card-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        #no-accounts-message .btn-primary {
            border-radius: 50px;
            padding: 12px 30px;
            font-size: 1rem;
        }
        #no-accounts-message .add-manual-link {
            color: #a6b0cf;
            text-decoration: none;
            border-bottom: 1px dotted #a6b0cf;
            transition: color 0.3s ease;
        }
        #no-accounts-message .add-manual-link:hover {
            color: #fff;
            border-bottom-color: #fff;
        }

        /* PayPal-inspired Balance Cards */
        .balance-header {
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .balance-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .balance-card {
            background: linear-gradient(135deg, #1a2332 0%, #2a3441 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .balance-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            border-color: rgba(255, 255, 255, 0.12);
        }

        .balance-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #003087 0%, #009cde 100%);
        }

        .balance-card.liability-card::before {
            background: linear-gradient(90deg, #dc3545 0%, #fd7e14 100%);
        }

        .balance-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, #003087 0%, #009cde 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0, 48, 135, 0.3);
        }

        .balance-card.liability-card .balance-icon {
            background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
        }

        .balance-icon i {
            color: white;
            font-size: 1.2rem;
        }

        .balance-content {
            flex-grow: 1;
            min-width: 0;
        }

        .balance-label {
            font-size: 0.875rem;
            color: #8e8da4;
            margin-bottom: 0.25rem;
            font-weight: 500;
        }

        .balance-amount {
            font-size: 1.5rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .balance-card.liability-card .balance-amount {
            color: #ff6b6b;
        }

        /* Total Balance Display Styles */
        #total-balance-display {
            font-weight: 700;
            transition: all 0.3s ease;
        }

        #total-balance-display.updated {
            transform: scale(1.05);
            animation: pulse 0.6s ease-in-out;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .balance-info {
            min-width: 120px;
        }

        /* Delete Confirmation Modal Styles */
        #deleteAccountModal .modal-content {
            border: none;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }

        #deleteAccountModal .text-danger {
            color: #dc3545 !important;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .balance-grid {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }
            
            .balance-card {
                padding: 1.25rem;
            }
            
            .balance-icon {
                width: 42px;
                height: 42px;
            }
            
            .balance-icon i {
                font-size: 1.1rem;
            }
            
            .balance-amount {
                font-size: 1.25rem;
            }
        }

        /* Add a subtle animation for amount changes */
        .balance-amount {
            transition: all 0.3s ease;
        }

        .balance-amount.updated {
            animation: balanceUpdate 0.6s ease-out;
        }

        @keyframes balanceUpdate {
            0% {
                transform: scale(1);
                color: #fff;
            }
            50% {
                transform: scale(1.05);
                color: #009cde;
            }
            100% {
                transform: scale(1);
                color: #fff;
            }
        }
        
        /* Real Estate Link Styling */
        .balance-label a {
            transition: all 0.2s ease;
            opacity: 0.7;
        }
        
        .balance-label a:hover {
            opacity: 1;
            color: #f39c12 !important;
            text-decoration: none;
        }
        
        .balance-label a:hover .fa-info-circle {
            transform: scale(1.1);
        }
        
        .balance-label .fa-info-circle {
            transition: transform 0.2s ease;
        }
        
        /* Mortgage Warning Alert Styling */
        .alert-warning .alert-link {
            color: #f39c12 !important;
            text-decoration: none;
            font-weight: 600;
        }
        
        .alert-warning .alert-link:hover {
            color: #e67e22 !important;
            text-decoration: underline;
        }
        
        /* Quick Balance Update Styling */
        .quick-update-balance {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(243, 156, 18, 0.1);
            border: 1px solid rgba(243, 156, 18, 0.3);
            border-radius: 8px;
            padding: 4px 8px;
            font-size: 0.75rem;
            color: #f39c12;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0;
        }
        
        .account-card:hover .quick-update-balance {
            opacity: 1;
        }
        
        .quick-update-balance:hover {
            background: rgba(243, 156, 18, 0.2);
            border-color: rgba(243, 156, 18, 0.5);
            transform: scale(1.05);
        }
        
        .quick-update-input {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid #f39c12;
            border-radius: 6px;
            color: #ffffff;
            font-size: 0.9rem;
            padding: 4px 8px;
            width: 80px;
            text-align: center;
        }
        
        .quick-update-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3);
        }
        
        /* Bulk Update Panel */
        .bulk-update-panel {
            background: linear-gradient(135deg, #2a2a3e 0%, #3a3a52 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .bulk-update-header {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .bulk-update-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #ffffff;
            margin: 0;
        }
        
        .bulk-update-toggle {
            background: rgba(243, 156, 18, 0.1);
            border: 1px solid rgba(243, 156, 18, 0.3);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            color: #f39c12;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .bulk-update-toggle:hover {
            background: rgba(243, 156, 18, 0.2);
            border-color: rgba(243, 156, 18, 0.5);
        }
        
        .bulk-update-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }
        
        .bulk-update-item {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .bulk-update-item-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(243, 156, 18, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f39c12;
            font-size: 0.9rem;
        }
        
        .bulk-update-item-content {
            flex: 1;
        }
        
        .bulk-update-item-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 0.25rem;
        }
        
        .bulk-update-item-balance {
            font-size: 0.8rem;
            color: #8a92b2;
        }
        
        .bulk-update-item-input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: #ffffff;
            font-size: 0.9rem;
            padding: 0.5rem;
            width: 100px;
            text-align: center;
        }
        
        .bulk-update-item-input:focus {
            outline: none;
            border-color: #f39c12;
            box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
        }
        
        .bulk-update-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
            justify-content: flex-end;
        }
        
        .bulk-update-actions .btn {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }
        
        .bulk-update-actions .btn-success {
            background: linear-gradient(135deg, #059669 0%, #10b981 100%);
            border: 1px solid #10b981;
            color: white;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }
        
        .bulk-update-actions .btn-success:hover {
            background: linear-gradient(135deg, #047857 0%, #059669 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
        }
        
        .bulk-update-actions .btn-success:active {
            transform: translateY(0);
        }
        
        .preview-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .preview-item:last-child {
            border-bottom: none;
        }
        
        .preview-item .float-end {
            font-weight: 600;
        }
        
        /* Modal button hover effects */
        #monthlyEntryPreviewModal .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-1px);
        }
        
        #monthlyEntryPreviewModal .btn-success:hover {
            background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
        }
        
        #monthlyEntryPreviewModal .btn:active {
            transform: translateY(0) !important;
        }
        
        /* Account Breakdown Styling */
        #accountBreakdown .card {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        
        #accountBreakdown .account-list {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            padding: 8px;
        }
        
        #accountBreakdown .account-list::-webkit-scrollbar {
            width: 6px;
        }
        
        #accountBreakdown .account-list::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        
        #accountBreakdown .account-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
        
        #accountBreakdown .account-list::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        
        #accountBreakdown .btn-outline-info {
            border-color: rgba(59, 130, 246, 0.5);
            color: #3b82f6;
        }
        
        #accountBreakdown .btn-outline-info:hover {
            background-color: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.7);
        }