:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{max-width:1400px;margin:0 auto;padding:1rem 2rem}.app-header{text-align:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #444}.app-header h1{margin:0 0 .5rem;font-size:2rem}.app-header p{margin:0;color:#888}.header-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.btn-header{background:#333;border:1px solid #444;color:#ccc;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s}.btn-header:hover:not(:disabled){background:#444;border-color:#555;color:#fff}.btn-header:disabled{opacity:.5;cursor:not-allowed}.vehicle-purchase-form{background:#2a2a2a;padding:1.5rem;border-radius:12px;margin-bottom:1rem}.vehicle-purchase-form h3{margin:0 0 1rem;font-size:1.2rem}.purchase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1rem}.purchase-summary{background:#1a1a1a;border-radius:8px;padding:.75rem 1rem;margin-top:1rem}.summary-row{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.95rem}.summary-row span{color:#888}.summary-row.loan-amount{border-top:1px solid #333;margin-top:.5rem;padding-top:.75rem}.summary-row.loan-amount span{color:#fff;font-weight:500}.summary-row.loan-amount strong{color:#3b82f6;font-size:1.1rem}.loan-mismatch-alert{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#f59e0b26;border:1px solid #f59e0b;border-radius:8px;padding:.75rem 1rem;margin-top:1rem}.mismatch-info{display:flex;align-items:center;gap:.75rem}.mismatch-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#f59e0b;color:#000;border-radius:50%;font-weight:700;font-size:.9rem;flex-shrink:0}.mismatch-info strong{display:block;color:#f59e0b;font-size:.9rem}.mismatch-info p{margin:.25rem 0 0;color:#aaa;font-size:.85rem}.btn-update-loans{background:#f59e0b;color:#000;border:none;padding:.5rem 1rem;border-radius:6px;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:background .2s}.btn-update-loans:hover{background:#d97706}.down-payment-slider-section{background:#1a1a1a;border-radius:8px;padding:1rem;margin-top:1rem}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.slider-header label{font-size:.9rem;color:#aaa}.slider-value{font-size:1.1rem;font-weight:600;color:#3b82f6}.down-payment-slider{width:100%;height:8px;border-radius:4px;background:#333;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.down-payment-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px #0000004d}.down-payment-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px #0000004d}.slider-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#666;margin-top:.25rem}.preset-buttons{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}.preset-btn{background:#333;border:1px solid #444;color:#888;padding:.35rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer;transition:all .2s}.preset-btn:hover{border-color:#3b82f6;color:#fff}.preset-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.interest-impact{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #333}.impact-row{display:flex;justify-content:space-between;font-size:.85rem;padding:.25rem 0}.impact-row span{color:#888}.impact-row strong{color:#fff}.impact-row.savings strong{color:#22c55e}.loan-form{background:#2a2a2a;padding:1.5rem;border-radius:12px;margin-bottom:2rem}.loan-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.loan-form-header h3{margin:0;font-size:1.2rem}.loan-amount-badge{background:#3b82f6;color:#fff;padding:.35rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500}.loan-form h3{margin:0 0 1rem;font-size:1.2rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem;text-align:left}.form-group label{font-size:.85rem;color:#aaa}.form-group input,.form-group select{padding:.6rem;border:1px solid #444;border-radius:6px;background:#1a1a1a;color:#fff;font-size:1rem}.form-group input:focus,.form-group select:focus{outline:none;border-color:#3b82f6}.btn-primary{background:#3b82f6;color:#fff;border:none;padding:.75rem 2rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#2563eb}.btn-secondary{background:transparent;color:#888;border:1px solid #444;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer}.btn-secondary:hover{border-color:#666;color:#fff}.cards-section{margin-bottom:2rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-header h2{margin:0;font-size:1.3rem}.loan-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.loan-card{background:#2a2a2a;border-radius:12px;padding:1rem;border-left:4px solid;position:relative;cursor:grab;transition:transform .2s,opacity .2s,box-shadow .2s}.loan-card:active{cursor:grabbing}.loan-card.dragging{opacity:.5;transform:scale(.98)}.loan-card.drag-over{box-shadow:0 0 0 2px #3b82f6;transform:scale(1.02)}.loan-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.5rem}.drag-handle{color:#666;font-size:1rem;cursor:grab;padding:.25rem;-webkit-user-select:none;user-select:none}.drag-handle:hover{color:#888}.loan-card:active .drag-handle{cursor:grabbing}.loan-bank-badge{flex:1;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:600;color:#fff}.btn-delete{background:transparent;border:none;color:#666;font-size:1.5rem;cursor:pointer;padding:0;line-height:1}.btn-delete:hover{color:#ef4444}.loan-details{margin-bottom:1rem}.detail-row{display:flex;justify-content:space-between;font-size:.9rem;padding:.25rem 0}.detail-row span{color:#888}.loan-summary{background:#1a1a1a;border-radius:8px;padding:.75rem;margin-bottom:1rem}.summary-item{display:flex;justify-content:space-between;padding:.25rem 0;font-size:.9rem}.summary-label{color:#888}.summary-value.highlight{color:#3b82f6;font-weight:600}.summary-item.savings .summary-value{color:#22c55e}.summary-item.difference .summary-value{color:#f59e0b}.extra-payment-controls{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem}.extra-payment-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.extra-payment-row label{color:#888}.input-with-suffix{display:flex;align-items:center;gap:.25rem}.input-prefix{color:#666;font-size:.85rem}.input-suffix{color:#666;font-size:.8rem}.extra-payment-row input{width:70px;padding:.4rem;border:1px solid #444;border-radius:4px;background:#1a1a1a;color:#fff;font-size:.85rem;text-align:right}.extra-payment-row input:focus{outline:none;border-color:#3b82f6}.comparison-table-container{background:#2a2a2a;border-radius:12px;padding:1.5rem;margin-bottom:2rem;overflow-x:auto}.comparison-table-container h3{margin:0 0 1rem}.comparison-table{width:100%;border-collapse:collapse;font-size:.9rem}.comparison-table th,.comparison-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #444}.comparison-table th{color:#888;font-weight:500}.comparison-table tr.best-option{background:#22c55e1a}.bank-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem}.diff-best{color:#22c55e;font-weight:600}.diff-negative{color:#f59e0b}.total-cost-cell{font-weight:600;color:#3b82f6}.summary-item.total-cost{border-top:1px solid #333;margin-top:.25rem;padding-top:.5rem}.chart-section{background:#2a2a2a;border-radius:12px;padding:1.5rem;margin-bottom:2rem}.chart-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.chart-controls h2{margin:0;font-size:1.3rem}.chart-type-selector{display:flex;gap:.5rem}.chart-type-selector button{background:#1a1a1a;border:1px solid #444;color:#888;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s}.chart-type-selector button:hover{border-color:#666;color:#fff}.chart-type-selector button.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.chart-container h3{margin:0 0 1rem;font-size:1rem;color:#888;text-align:center}.chart-wrapper{height:70vh;min-height:400px;max-height:800px}.chart-placeholder{height:300px;display:flex;align-items:center;justify-content:center;color:#666;font-size:1.1rem}.custom-tooltip{background:#1a1a1a;border:1px solid #444;border-radius:8px;padding:.75rem;min-width:200px}.tooltip-label{margin:0 0 .5rem;font-weight:600;color:#fff;border-bottom:1px solid #333;padding-bottom:.5rem}.tooltip-entries{display:flex;flex-direction:column;gap:.5rem}.tooltip-entry{display:flex;flex-direction:column;gap:.25rem}.tooltip-row{display:flex;align-items:center;gap:.5rem}.tooltip-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.tooltip-name{flex:1;color:#ccc}.tooltip-value{font-weight:500;color:#fff;display:flex;align-items:center;gap:.5rem}.paid-off-badge{font-size:.7rem;background:#22c55e;color:#fff;padding:.1rem .4rem;border-radius:4px;font-weight:600}.tooltip-diff{padding-left:1.25rem;font-size:.8rem}.diff-best{color:#22c55e;font-weight:500}.diff-worse{color:#f59e0b}.diff-better{color:#22c55e}.down-payment-section{margin-bottom:2rem}.down-payment-comparison{background:#2a2a2a;border-radius:12px;padding:1.5rem}.down-payment-comparison h3{margin:0 0 .5rem;font-size:1.3rem}.comparison-subtitle{color:#888;font-size:.9rem;margin:0 0 1.5rem}.comparison-chart{margin-bottom:1.5rem}.comparison-table-wrapper{overflow-x:auto}.comparison-detail-table{width:100%;border-collapse:collapse;font-size:.85rem}.comparison-detail-table th,.comparison-detail-table td{padding:.6rem .75rem;text-align:right;border-bottom:1px solid #444}.comparison-detail-table th{color:#888;font-weight:500;text-align:right}.comparison-detail-table th:first-child,.comparison-detail-table td:first-child{text-align:left}.comparison-detail-table tbody tr:hover{background:#ffffff0d}.comparison-detail-table .current-row{background:#3b82f626}.comparison-detail-table .current-row:hover{background:#3b82f633}.percent-cell{display:flex;align-items:center;gap:.5rem}.current-badge{font-size:.7rem;background:#3b82f6;color:#fff;padding:.15rem .4rem;border-radius:4px;font-weight:600}.savings-positive{color:#22c55e;font-weight:500}.comparison-note{color:#888;font-size:.8rem;margin-top:1rem;text-align:center;font-style:italic}.comparison-detail-table.multi-loan th.loan-header{text-align:center;font-weight:600;color:#fff;padding-bottom:.75rem}.comparison-detail-table.multi-loan thead tr:last-child th{font-size:.75rem;padding-top:.5rem;color:#888}.comparison-detail-table.multi-loan td:nth-child(3n+1){border-left:1px solid #444}.comparison-detail-table.multi-loan td:first-child,.comparison-detail-table.multi-loan td:nth-child(2),.comparison-detail-table.multi-loan td:nth-child(3){border-left:none}.app-footer{text-align:center;padding:1rem;color:#666;font-size:.85rem}@media(max-width:768px){.app{padding:1rem}.chart-controls{flex-direction:column;align-items:flex-start}.chart-type-selector{width:100%;overflow-x:auto}.form-grid{grid-template-columns:1fr}}
