:root{--navy-dark:#0a1929;--navy-medium:#1a2f45;--navy-light:#2d4563;--emerald:#10b981;--emerald-light:#34d399;--emerald-dark:#059669;--white:#ffffff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)}*{box-sizing:border-box}.mortgage-calculator-wrapper{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--gray-800);line-height:1.6}.mortgage-calculator-container{max-width:1400px;margin:0 auto;padding:2rem 1rem}.calculator-header{text-align:center;margin-bottom:3rem}.calculator-title{font-size:2.5rem;font-weight:700;color:var(--navy-dark);margin:0 0 .5rem 0}.calculator-subtitle{font-size:1.125rem;color:var(--gray-600);margin:0}.calculator-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-bottom:3rem}.input-card,.summary-card,.summary-table-card,.amortization-card,.payment-breakdown-card,.info-card{background:var(--white);border-radius:12px;padding:2.5rem;box-shadow:var(--shadow-lg);border:1px solid var(--gray-200);margin-bottom:2.5rem}.highlight-card{background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy-medium) 100%);color:var(--white);border:none}.section-title{font-size:1.25rem;font-weight:600;color:var(--navy-dark);margin:0 0 1.5rem 0}.section-subtitle{color:var(--gray-600);font-size:.95rem;margin:-.75rem 0 1.5rem 0}.highlight-card .section-title{color:var(--white)}.input-group{margin-bottom:2rem}.input-group label{display:block;font-weight:500;color:var(--gray-700);margin-bottom:.5rem;font-size:.95rem}.input-wrapper{position:relative;display:flex;align-items:center}.input-prefix,.input-suffix{position:absolute;color:var(--gray-600);font-weight:500}.input-prefix{left:1rem}.input-suffix{right:1rem}.input-field{width:100%;padding:.75rem 1rem;border:2px solid var(--gray-300);border-radius:8px;font-size:1rem;transition:all 0.2s;background:var(--white)}.input-wrapper .input-field{padding-left:2.5rem}.input-wrapper:has(.input-suffix) .input-field{padding-right:2.5rem}.input-field:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgb(16 185 129 / .1)}.select-field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234b5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem;padding-right:2.5rem}.input-with-slider{margin-top:.5rem}.slider{width:100%;height:6px;border-radius:3px;background:var(--gray-200);outline:none;margin:1rem 0 .5rem 0;appearance:none}.slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--emerald);cursor:pointer;transition:all 0.2s}.slider::-webkit-slider-thumb:hover{background:var(--emerald-dark);transform:scale(1.1)}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--emerald);cursor:pointer;border:none;transition:all 0.2s}.slider::-moz-range-thumb:hover{background:var(--emerald-dark);transform:scale(1.1)}.slider-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--gray-600)}.input-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.payment-amount{text-align:center;padding:1.5rem 0}.payment-label{font-size:.95rem;font-weight:500;opacity:.9;margin-bottom:.5rem}.payment-value{font-size:3rem;font-weight:700;margin:.5rem 0;color:var(--emerald-light)}.payment-frequency-label{font-size:.95rem;opacity:.8}.breakdown-item{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--gray-200)}.breakdown-item:last-child{border-bottom:none}.breakdown-label{font-weight:500;color:var(--gray-700)}.breakdown-value{font-weight:600;color:var(--navy-dark)}.breakdown-value.emerald{color:var(--emerald-dark)}.total-row{background:var(--gray-50);margin:0 -2rem;padding:1rem 2rem;border-bottom:none;font-size:1.1rem}.total-row .breakdown-label,.total-row .breakdown-value{font-weight:700}.chart-container{position:relative;height:250px;margin-top:1rem}.breakdown-chart-container{position:relative;height:400px;margin-top:1.5rem;background:var(--gray-50);border-radius:8px;padding:1.5rem}.summary-table-card,.amortization-card{margin-bottom:2rem}.summary-table-wrapper{overflow-x:auto}.summary-table{width:100%;border-collapse:collapse;font-size:.9rem}.summary-table th,.summary-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--gray-200)}.summary-table th{background:var(--navy-dark);color:var(--white);font-weight:600;white-space:nowrap}.summary-table tbody tr:hover{background:var(--gray-50)}.amortization-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.amortization-header .section-title{margin:0}.amortization-toggle{display:flex;gap:0;background:var(--gray-200);border-radius:8px;padding:4px}.toggle-btn{padding:.5rem 1.25rem;border:none;background:#fff0;color:var(--gray-700);font-weight:500;font-size:.9rem;cursor:pointer;border-radius:6px;transition:all 0.2s}.toggle-btn:hover{background:var(--gray-100)}.toggle-btn.active{background:var(--navy-dark);color:var(--white);box-shadow:var(--shadow-sm)}.amortization-table-wrapper{overflow-x:auto;opacity:1;transition:opacity 0.3s ease-in-out}.amortization-table-wrapper.fade-out{opacity:0}#payments-view{display:none}.amortization-table{width:100%;border-collapse:collapse;font-size:.9rem}.amortization-table th,.amortization-table td{padding:.75rem 1rem;text-align:right;border-bottom:1px solid var(--gray-200)}.amortization-table th:first-child,.amortization-table td:first-child{text-align:left}.amortization-table thead th{background:var(--navy-dark);color:var(--white);font-weight:600;position:sticky;top:0;z-index:10;white-space:nowrap}.amortization-scroll-wrapper{max-height:500px;overflow-y:auto;overflow-x:auto}.amortization-table tbody tr:nth-child(even){background:var(--gray-50)}.amortization-table tbody tr:hover{background:var(--gray-100)}.info-section{margin-top:3rem;padding-top:3rem;border-top:2px solid var(--gray-200)}.info-title{font-size:2rem;font-weight:700;color:var(--navy-dark);text-align:center;margin:0 0 2rem 0}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}.info-card{background:var(--gray-50);border-left:4px solid var(--emerald)}.info-card-title{font-size:1.125rem;font-weight:600;color:var(--navy-dark);margin:0 0 1rem 0}.info-card p{margin:0 0 .75rem 0;color:var(--gray-700)}.info-card ul{margin:.5rem 0;padding-left:1.5rem;color:var(--gray-700)}.info-card li{margin-bottom:.5rem}@media (max-width:1024px){.calculator-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.amortization-header{flex-direction:column;align-items:flex-start}}@media (max-width:768px){.calculator-title{font-size:2rem}.calculator-subtitle{font-size:1rem}.input-card,.summary-card,.summary-table-card,.amortization-card{padding:1.5rem}.payment-value{font-size:2.5rem}.input-row{grid-template-columns:1fr}.summary-table,.amortization-table{font-size:.8rem}.summary-table th,.summary-table td,.amortization-table th,.amortization-table td{padding:.5rem}.toggle-btn{padding:.5rem 1rem;font-size:.85rem}}@media (max-width:480px){.calculator-container{padding:1rem .5rem}.calculator-title{font-size:1.5rem}.payment-value{font-size:2rem}.amortization-toggle{width:100%}.toggle-btn{flex:1;padding:.5rem .75rem;font-size:.8rem}}