:root{--Color-primary-500:#1e40af;--Color-primary-600:#1d4ed8;--Color-primary-700:#1e3a8a;--Color-primary-50:#eff6ff;--Color-primary-100:#dbeafe;--Color-gray-50:#f9fafb;--Color-gray-100:#f3f4f6;--Color-gray-200:#e5e7eb;--Color-gray-300:#d1d5db;--Color-gray-400:#9ca3af;--Color-gray-500:#6b7280;--Color-gray-600:#4b5563;--Color-gray-700:#374151;--Color-gray-800:#1f2937;--Color-gray-900:#111827;--Color-white:#fff;--Color-green-500:#10b981;--Color-red-500:#ef4444;--Color-amber-500:#f59e0b;--Typography-fs-xs:0.75rem;--Typography-fs-sm:0.875rem;--Typography-fs-base:1rem;--Typography-fs-lg:1.125rem;--Typography-fs-xl:1.25rem;--Typography-fs-2xl:1.5rem;--Typography-fs-3xl:1.875rem;--Typography-fs-4xl:2.25rem;--Typography-lh-tight:1.25;--Typography-lh-normal:1.5;--Typography-lh-relaxed:1.625;--Typography-fw-normal:400;--Typography-fw-medium:500;--Typography-fw-semibold:600;--Typography-fw-bold:700;--Spacing-sp-xxxs:0.25rem;--Spacing-sp-xxs:0.5rem;--Spacing-sp-xs:0.75rem;--Spacing-sp-sm:1rem;--Spacing-sp-md:1.5rem;--Spacing-sp-lg:2rem;--Spacing-sp-xl:2.5rem;--Spacing-sp-2xl:3rem;--Border-radius-sm:0.375rem;--Border-radius-md:0.5rem;--Border-radius-lg:0.75rem;--Border-radius-xl:1rem;--Shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--Shadow-base:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);--Shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--Shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.refinance-calculator *{box-sizing:border-box}.refinance-calculator{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0 auto;max-width:100%;padding:var(--Spacing-sp-md)}.charts-section{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-bottom:8px}.chart-card{background:transparent;border:none;border-radius:var(--Border-radius-xl);box-shadow:none;padding:var(--Spacing-sp-lg)}.chart-header{margin-bottom:4px;text-align:center}.chart-title{color:var(--Color-gray-900);font-size:var(--Typography-fs-lg);font-weight:var(--Typography-fw-semibold);line-height:var(--Typography-lh-tight)}.chart-container{height:200px;position:relative;width:100%}.chart-container canvas{max-height:200px}.input-sections{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);margin-bottom:8px}.input-card{background:var(--Color-white);border:1px solid var(--Color-gray-200);border-radius:var(--Border-radius-lg);box-shadow:var(--Shadow-sm);padding:var(--Spacing-sp-md)}.input-card-title{color:var(--Color-gray-900);font-size:var(--Typography-fs-lg);font-weight:var(--Typography-fw-semibold);line-height:var(--Typography-lh-tight);margin-bottom:var(--Spacing-sp-md)}.form-group{margin-bottom:8px}.form-group:last-child{margin-bottom:0}.form-label-container{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px;min-height:20px;width:100%}.form-label{color:var(--Color-gray-700);flex:1;font-size:var(--Typography-fs-sm);font-weight:var(--Typography-fw-medium);line-height:var(--Typography-lh-normal);margin:0;word-wrap:break-word;hyphens:auto;padding-right:8px}.info-icon{align-items:center;background:var(--Color-gray-400);border:none;border-radius:50%;color:var(--Color-white);cursor:help;display:inline-flex;flex-shrink:0;font-size:10px;font-weight:700;height:14px;justify-content:center;transition:background-color .2s ease;width:14px}.info-icon:hover{background:var(--Color-gray-500)}.info-icon:focus{outline:2px solid var(--Color-primary-500);outline-offset:2px}.input-group{align-items:center;display:flex;position:relative;width:100%}.input-group-text{background:var(--Color-gray-100);border:1px solid var(--Color-gray-300);border-radius:var(--Border-radius-sm) 0 0 var(--Border-radius-sm);color:var(--Color-gray-600);font-size:var(--Typography-fs-sm);font-weight:var(--Typography-fw-medium);line-height:var(--Typography-lh-normal);padding:var(--Spacing-sp-xs) var(--Spacing-sp-xs);white-space:nowrap}.input-group-text:last-child{border-left:none;border-radius:0 var(--Border-radius-sm) var(--Border-radius-sm) 0}.form-control{background:var(--Color-white);border:1px solid var(--Color-gray-300);border-radius:var(--Border-radius-sm);color:var(--Color-gray-900);flex:1;font-size:var(--Typography-fs-sm);font-weight:var(--Typography-fw-normal);line-height:var(--Typography-lh-normal);padding:var(--Spacing-sp-xs) var(--Spacing-sp-xs);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.input-group .form-control{border-left:0;border-radius:0;border-right:0}.input-group .form-control:first-child{border-left:1px solid var(--Color-gray-300);border-radius:var(--Border-radius-sm) 0 0 var(--Border-radius-sm)}.input-group .form-control:last-child{border-radius:0 var(--Border-radius-sm) var(--Border-radius-sm) 0;border-right:1px solid var(--Color-gray-300)}.form-control:focus{border-color:var(--Color-primary-500);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.form-select{background:var(--Color-white);border:1px solid var(--Color-gray-300);border-radius:var(--Border-radius-sm);color:var(--Color-gray-900);font-size:var(--Typography-fs-sm);font-weight:var(--Typography-fw-normal);line-height:var(--Typography-lh-normal);padding:var(--Spacing-sp-xs) var(--Spacing-sp-xs);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select:focus{border-color:var(--Color-primary-500);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}@media (max-width:1200px){.charts-section,.input-sections{gap:var(--Spacing-sp-xs)}.chart-card{padding:var(--Spacing-sp-md)}}@media (max-width:992px){.charts-section,.input-sections{gap:var(--Spacing-sp-md);grid-template-columns:1fr}.chart-card,.input-card{padding:var(--Spacing-sp-md)}}@media (max-width:768px){.refinance-calculator{padding:var(--Spacing-sp-sm)}.charts-section,.input-sections{gap:var(--Spacing-sp-sm)}.chart-card,.input-card{padding:var(--Spacing-sp-sm)}.chart-container{height:160px;overflow:hidden;width:100%}.chart-container canvas{max-height:160px;max-width:100%}.chart-title{font-size:var(--Typography-fs-sm);line-height:var(--Typography-lh-tight)}.form-group .row{margin-bottom:var(--Spacing-sp-xs)}.form-label-container{min-height:18px}.form-label{font-size:var(--Typography-fs-xs);line-height:var(--Typography-lh-tight);padding-right:6px}.info-icon{font-size:8px;height:12px;width:12px}}@media (max-width:576px){.form-group .col-6:first-child{margin-bottom:var(--Spacing-sp-xxs)}.chart-card{padding:var(--Spacing-sp-xs)}.chart-container{height:140px}.chart-container canvas{max-height:140px}.chart-title{font-size:var(--Typography-fs-xs);line-height:var(--Typography-lh-tight);margin-bottom:var(--Spacing-sp-xs)}.input-card-title{font-size:var(--Typography-fs-base)}.form-label-container{min-height:16px}.form-label{font-size:var(--Typography-fs-xs);line-height:1.2;padding-right:4px}.info-icon{font-size:7px;height:11px;width:11px}}.tooltip-container{display:inline-block;position:relative}.info-icon[data-tooltip]:hover:before{background:var(--Color-gray-800);border-radius:var(--Border-radius-md);bottom:125%;box-shadow:var(--Shadow-lg);color:var(--Color-white);content:attr(data-tooltip);font-size:var(--Typography-fs-sm);max-width:280px;min-width:200px;padding:var(--Spacing-sp-sm) var(--Spacing-sp-md);position:absolute;right:0;white-space:normal;z-index:1000;word-wrap:break-word;font-weight:400;line-height:var(--Typography-lh-normal)}.info-icon[data-tooltip]:hover:after{border:5px solid transparent;border-top:5px solid var(--Color-gray-800);content:"";position:absolute;right:10px;top:-5px;z-index:1001}@media (max-width:768px){.info-icon[data-tooltip]:hover:before{font-size:var(--Typography-fs-xs);max-width:220px;min-width:160px;padding:var(--Spacing-sp-xs) var(--Spacing-sp-sm)}.info-icon[data-tooltip]:hover:after{border-width:4px}}