*{margin:0;padding:0;box-sizing:border-box}:root{--deep-navy-blue: #1a1f4d;--bright-blue: #4169e7;--white: #ffffff;--light-blue-cream: #e8f0f8;--gray: #6b7280;--dark-gray: #374151;--yellow-gold: #fbbf24;--success-green: #10b981}body{font-family:Inter,Poppins,-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:#ebebeb;min-height:100vh;font-size:16px;line-height:1.6;color:var(--gray)}.app{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;color:var(--dark-gray);padding:40px 20px}.header-logo{max-width:500px;width:100%;height:auto;margin-bottom:20px}.app-header h1{font-size:48px;font-weight:700;margin-bottom:10px;color:var(--dark-gray)}.app-header p{font-size:18px;font-weight:400;opacity:.9}.app-main{flex:1;display:flex;flex-direction:column;gap:30px}.connect-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:25px}.customer-name-input{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}.customer-name-input label{font-size:16px;font-weight:600;color:var(--dark-gray)}.name-input{padding:12px 16px;font-size:16px;border:2px solid var(--light-blue-cream);border-radius:8px;transition:all .3s ease;color:var(--dark-gray)}.name-input:focus{outline:none;border-color:var(--bright-blue);box-shadow:0 0 0 3px #4169e71a}.name-input::placeholder{color:var(--gray);opacity:.6}.plaid-link-container{display:flex;flex-direction:column;align-items:center;gap:15px}.info-message{background:var(--light-blue-cream);color:var(--gray);padding:10px 16px;border-radius:6px;border:1px solid var(--bright-blue);font-size:14px;text-align:center}.plaid-link-button{background:var(--bright-blue);color:var(--white);border:none;padding:15px 40px;font-size:18px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.plaid-link-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.plaid-link-button:disabled{opacity:.6;cursor:not-allowed}.accounts-container,.transactions-container{background:var(--white);border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.accounts-container h2,.transactions-container h2{color:var(--dark-gray);margin-bottom:20px;font-size:32px;font-weight:700}.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.account-card{background:var(--light-blue-cream);color:var(--dark-gray);padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;border-left:4px solid var(--bright-blue)}.account-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.account-header h3{font-size:24px;font-weight:700;color:var(--dark-gray)}.account-mask{font-size:14px;color:var(--gray)}.account-type{font-size:14px;color:var(--gray);margin-bottom:15px;text-transform:capitalize}.account-balances{display:flex;flex-direction:column;gap:8px}.balance-item{display:flex;justify-content:space-between;font-size:16px}.balance-label{color:var(--gray)}.balance-value{font-weight:600;font-size:18px;color:var(--dark-gray)}.transactions-list{display:flex;flex-direction:column;gap:10px}.transaction-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:var(--light-blue-cream);border-radius:8px;border-left:4px solid var(--bright-blue)}.transaction-info{flex:1}.transaction-name{font-weight:600;font-size:16px;color:var(--dark-gray);margin-bottom:5px}.transaction-date{font-size:14px;color:var(--gray);margin-bottom:5px}.transaction-category{font-size:14px;color:var(--gray)}.transaction-amount{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-weight:600;font-size:18px}.transaction-amount .negative{color:#dc3545}.transaction-amount .positive{color:var(--success-green)}.pending-badge{background:var(--yellow-gold);color:var(--dark-gray);padding:2px 8px;border-radius:4px;font-size:14px;font-weight:600}.loading{text-align:center;padding:40px;color:var(--gray);font-size:18px;display:flex;flex-direction:column;align-items:center;gap:20px}.spinner{border:4px solid var(--light-blue-cream);border-top:4px solid var(--bright-blue);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading p{margin:0;color:var(--dark-gray);font-weight:500}.error-message{background:#fee;color:#c33;padding:12px 20px;border-radius:6px;border:1px solid #fcc;font-size:16px}.app-footer{text-align:center;color:var(--gray);padding:30px 20px;font-size:14px;opacity:.8}.sync-progress-container{background:var(--white);border-radius:12px;padding:40px;box-shadow:0 4px 6px #0000001a;animation:fadeIn .5s ease}.sync-progress-container h2{color:var(--dark-gray);margin-bottom:30px;font-size:32px;font-weight:700;text-align:center}.sync-accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:30px}.sync-account-card{background:var(--light-blue-cream);padding:24px;border-radius:12px;box-shadow:0 2px 8px #00000014;border-left:4px solid var(--bright-blue);animation:slideInUp .4s ease;transition:all .3s ease}.sync-account-card.complete{border-left-color:var(--success-green);background:linear-gradient(135deg,#e8f5e9 0%,var(--light-blue-cream) 100%)}.sync-account-card.processing{animation:pulse 2s ease-in-out infinite}.sync-account-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sync-account-info h3{font-size:20px;font-weight:700;color:var(--dark-gray);margin-bottom:4px}.sync-status-indicator{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%}.sync-status-indicator.processing{background:var(--bright-blue)}.sync-status-indicator.complete{background:var(--success-green);animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55)}.sync-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.3);border-top:3px solid var(--white);border-radius:50%;animation:spin .8s linear infinite}.sync-checkmark{color:var(--white);font-size:28px;font-weight:700;animation:checkmarkPop .5s ease}.sync-transaction-count{font-size:16px;color:var(--dark-gray);font-weight:600;margin-top:8px}.sync-processing-text{font-size:14px;color:var(--gray);font-style:italic;margin-top:8px}.sync-complete-message{background:linear-gradient(135deg,var(--success-green) 0%,#059669 100%);color:var(--white);padding:40px;border-radius:16px;text-align:center;box-shadow:0 8px 16px #10b9814d;animation:scaleIn .6s cubic-bezier(.68,-.55,.265,1.55)}.sync-complete-icon{font-size:64px;margin-bottom:16px;animation:bounce 1s ease}.sync-complete-message h3{font-size:28px;font-weight:700;margin-bottom:12px;color:var(--white)}.sync-complete-message p{font-size:18px;opacity:.95;color:var(--white)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 2px 8px #00000014}50%{transform:scale(1.02);box-shadow:0 4px 12px #4169e733}}@keyframes popIn{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes checkmarkPop{0%{transform:scale(0) rotate(-45deg);opacity:0}50%{transform:scale(1.3) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}@media (max-width: 768px){.header-logo{max-width:300px}.app-header h1{font-size:32px}.accounts-container h2,.transactions-container h2{font-size:28px}.accounts-grid{grid-template-columns:1fr}.transaction-item{flex-direction:column;align-items:flex-start;gap:10px}.transaction-amount{align-items:flex-start}.sync-accounts-grid{grid-template-columns:1fr}.sync-complete-message{padding:30px 20px}.sync-complete-icon{font-size:48px}.sync-complete-message h3{font-size:24px}.sync-complete-message p{font-size:16px}}body{margin:0;padding:0;font-family:Inter,Poppins,-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;font-size:16px;line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}