:root{--primary-orange: #ff9f40;--primary-orange-light: #ffb366;--primary-orange-dark: #e6851a;--primary-orange-bg: rgba(255, 159, 64, .1);--primary-orange-border: rgba(255, 159, 64, .3);--grey-dark: #2c2c2c;--grey-medium: #4a4a4a;--grey-light: #808080;--grey-lighter: #b0b0b0;--grey-lightest: #e0e0e0;--grey-bg: #f5f5f5;--grey-border: rgba(128, 128, 128, .3);--success-color: #28a745;--warning-color: #ffc107;--error-color: #dc3545;--info-color: #17a2b8;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--border-radius: 8px;--border-radius-sm: 4px;--border-radius-lg: 12px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .1);--box-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--transition: all .2s ease-in-out;--input-height: 2.5rem;--button-height: 2.5rem;--card-padding: var(--spacing-lg)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;line-height:1.5}body{font-family:var(--font-family);color:var(--grey-dark);background-color:var(--primary-orange-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column}.calculator{flex:1;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;padding:var(--spacing-md);gap:var(--spacing-lg)}.calculator-header{text-align:center;padding:var(--spacing-lg) 0}.calculator-header h1{font-size:var(--font-size-3xl);color:var(--grey-dark);margin-bottom:var(--spacing-sm);font-weight:700}.calculator-header .subtitle{font-size:var(--font-size-lg);color:var(--grey-medium);font-weight:400}.calculator-layout{display:grid;grid-template-columns:400px 1fr;gap:var(--spacing-xl);align-items:start}@media (max-width: 1024px){.calculator-layout{grid-template-columns:1fr;gap:var(--spacing-lg)}}.input-section{display:flex;flex-direction:column;gap:var(--spacing-lg)}.input-form{background:#fff;border-radius:var(--border-radius-lg);padding:var(--card-padding);box-shadow:var(--box-shadow);border:1px solid var(--grey-border)}.input-form h2{font-size:var(--font-size-2xl);color:var(--grey-dark);margin-bottom:var(--spacing-lg);text-align:center}.calculation-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label{font-weight:600;color:var(--grey-dark);font-size:var(--font-size-base);display:flex;align-items:center;gap:var(--spacing-xs)}.required{color:var(--error-color);font-weight:700}.input-wrapper{position:relative;display:flex;align-items:center}.input-wrapper input{flex:1;height:var(--input-height);padding:0 var(--spacing-md);border:2px solid var(--grey-lightest);border-radius:var(--border-radius);font-size:var(--font-size-base);transition:var(--transition);background:#fff}.input-wrapper input:focus{outline:none;border-color:var(--primary-orange);box-shadow:0 0 0 3px var(--primary-orange-bg)}.input-wrapper input.error{border-color:var(--error-color)}.input-wrapper input:disabled{background-color:var(--grey-bg);cursor:not-allowed;opacity:.7}.currency-symbol,.percent-symbol{position:absolute;font-weight:600;color:var(--grey-medium);pointer-events:none}.currency-symbol{left:var(--spacing-md)}.percent-symbol{right:var(--spacing-md)}.input-wrapper input[type=number]{padding-left:2rem}.input-wrapper:has(.percent-symbol) input{padding-right:2rem}.field-hint{font-size:var(--font-size-xs);color:var(--grey-light);font-style:italic}.error-message{font-size:var(--font-size-sm);color:var(--error-color);font-weight:500;padding:var(--spacing-xs) 0}.radio-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.radio-option{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md);border:2px solid var(--grey-lightest);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition)}.radio-option:hover{border-color:var(--primary-orange-border);background-color:var(--primary-orange-bg)}.radio-option:has(input:checked){border-color:var(--primary-orange);background-color:var(--primary-orange-bg)}.radio-option input[type=radio]{margin:0;accent-color:var(--primary-orange)}.radio-label{display:flex;flex-direction:column;gap:var(--spacing-xs)}.radio-label strong{color:var(--grey-dark);font-weight:600}.radio-label small{color:var(--grey-medium);font-size:var(--font-size-sm)}.form-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-md)}.form-actions button{flex:1}.form-tips{background:var(--grey-bg);border-radius:var(--border-radius);padding:var(--spacing-lg);border-left:4px solid var(--primary-orange)}.form-tips h4{color:var(--grey-dark);margin-bottom:var(--spacing-md);font-size:var(--font-size-lg)}.form-tips ul{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-tips li{font-size:var(--font-size-sm);color:var(--grey-medium);line-height:1.4}.form-tips strong{color:var(--grey-dark)}.calculation-mode-toggle{display:flex;background:var(--grey-bg);border-radius:var(--border-radius);padding:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.toggle-option{flex:1;padding:var(--spacing-sm) var(--spacing-md);text-align:center;border:none;background:transparent;color:var(--grey-medium);font-weight:500;border-radius:calc(var(--border-radius) - 2px);cursor:pointer;transition:var(--transition);font-size:var(--font-size-sm);height:auto}.toggle-option:hover{color:var(--grey-dark);background:#ffffff80}.toggle-option.active{background:var(--primary-orange);color:#fff;font-weight:600}.toggle-option.active:hover{background:var(--primary-orange-dark)}.timeframe-group{display:flex;gap:var(--spacing-sm);align-items:flex-end}.timeframe-input{flex:2}.timeframe-unit{flex:1}.timeframe-unit select{height:var(--input-height);padding:0 var(--spacing-md);border:2px solid var(--grey-lightest);border-radius:var(--border-radius);font-size:var(--font-size-base);background:#fff;cursor:pointer;transition:var(--transition);width:100%}.timeframe-unit select:focus{outline:none;border-color:var(--primary-orange);box-shadow:0 0 0 3px var(--primary-orange-bg)}.timeframe-unit select:disabled{background-color:var(--grey-bg);cursor:not-allowed;opacity:.7}.years-months-inputs{display:flex;gap:var(--spacing-md);align-items:center}.time-input-group{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.time-input-group .input-wrapper{position:relative;display:flex;align-items:center}.time-input-group input{flex:1;height:var(--input-height);padding:0 var(--spacing-md) 0 var(--spacing-md);border:2px solid var(--grey-lightest);border-radius:var(--border-radius);font-size:var(--font-size-base);transition:var(--transition);background:#fff;text-align:center}.time-input-group input:focus{outline:none;border-color:var(--primary-orange);box-shadow:0 0 0 3px var(--primary-orange-bg)}.time-input-group input:disabled{background-color:var(--grey-bg);cursor:not-allowed;opacity:.7}.time-unit-label{position:absolute;right:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--grey-medium);pointer-events:none;font-weight:500}.conditional-field{transition:all .3s ease-in-out}.conditional-field.hidden{display:none}.calculation-form[data-mode=payoffTime] .payoff-time-fields{display:block}.calculation-form[data-mode=payoffTime] .monthly-payment-fields,.calculation-form[data-mode=monthlyPayment] .payoff-time-fields{display:none}.calculation-form[data-mode=monthlyPayment] .monthly-payment-fields{display:block}button{height:var(--button-height);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);text-decoration:none;font-family:inherit}.primary{background-color:var(--primary-orange);color:#fff;border:2px solid var(--primary-orange)}.primary:hover:not(:disabled){background-color:var(--primary-orange-dark);border-color:var(--primary-orange-dark);transform:translateY(-1px);box-shadow:var(--box-shadow)}.secondary{background-color:#fff;color:var(--grey-medium);border:2px solid var(--grey-lightest)}.secondary:hover:not(:disabled){background-color:var(--grey-bg);border-color:var(--grey-lighter);color:var(--grey-dark)}button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.page-button{height:2rem;padding:0 var(--spacing-sm);font-size:var(--font-size-sm)}.calculator-actions{display:flex;flex-direction:column;gap:var(--spacing-md)}.error-display{margin-bottom:var(--spacing-lg)}.error-message{background-color:#fee;border:1px solid var(--error-color);border-radius:var(--border-radius);padding:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm)}.error-icon{color:var(--error-color);font-size:var(--font-size-lg)}.error-text{flex:1;color:var(--error-color);font-weight:500}.error-dismiss{background:none;border:none;color:var(--error-color);cursor:pointer;padding:var(--spacing-xs);height:auto;font-size:var(--font-size-lg)}.results-section{background:#fff;border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow);overflow:hidden;border:1px solid var(--grey-border)}.tab-navigation{display:flex;border-bottom:1px solid var(--grey-lightest);background-color:var(--grey-bg)}.tab-button{flex:1;height:3rem;background:none;border:none;border-bottom:3px solid transparent;color:var(--grey-medium);font-weight:600;cursor:pointer;transition:var(--transition);padding:0 var(--spacing-lg)}.tab-button:hover{background-color:#fff;color:var(--grey-dark)}.tab-button.active{background-color:#fff;color:var(--primary-orange);border-bottom-color:var(--primary-orange)}.tab-content{padding:var(--spacing-xl)}.results-display{display:flex;flex-direction:column;gap:var(--spacing-xl)}.payment-too-small-message{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-2xl);background:linear-gradient(135deg,#dc35451a,#ffc1071a);border:2px solid var(--warning-color);border-radius:var(--border-radius);text-align:center;max-width:600px;margin:0 auto}.too-small-icon{font-size:4rem;margin-bottom:var(--spacing-md)}.payment-too-small-message h3{color:var(--error-color);font-size:var(--font-size-2xl);margin-bottom:var(--spacing-md);font-weight:700}.too-small-description{color:var(--grey-dark);font-size:var(--font-size-lg);margin-bottom:var(--spacing-xl);line-height:1.5}.payment-analysis{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;margin-bottom:var(--spacing-xl)}.analysis-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:#fff;border-radius:var(--border-radius);border:1px solid var(--grey-lightest)}.analysis-item.highlight{background:var(--primary-orange-bg);border-color:var(--primary-orange);font-weight:600}.analysis-label{color:var(--grey-dark);font-weight:500}.analysis-value{font-weight:700;font-size:var(--font-size-lg)}.analysis-value.warning{color:var(--error-color)}.analysis-value.recommended{color:var(--primary-orange-dark)}.recommendation{background:var(--grey-bg);padding:var(--spacing-lg);border-radius:var(--border-radius);text-align:left;width:100%}.recommendation h4{color:var(--grey-dark);margin-bottom:var(--spacing-sm);font-size:var(--font-size-lg)}.recommendation p{color:var(--grey-medium);line-height:1.6}.results-summary h3{font-size:var(--font-size-2xl);color:var(--grey-dark);margin-bottom:var(--spacing-lg);text-align:center}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.summary-card{background:linear-gradient(135deg,var(--primary-orange-bg),white);border:1px solid var(--primary-orange-border);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);transition:var(--transition)}.summary-card:hover{transform:translateY(-2px);box-shadow:var(--box-shadow-lg)}.card-icon{font-size:var(--font-size-3xl);width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--primary-orange);border-radius:50%;color:#fff}.card-content{flex:1}.card-label{font-size:var(--font-size-sm);color:var(--grey-medium);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-xs)}.card-value{font-size:var(--font-size-xl);color:var(--grey-dark);font-weight:700;margin-bottom:var(--spacing-xs)}.card-detail{font-size:var(--font-size-sm);color:var(--grey-light)}.calculation-details{background:var(--grey-bg);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-top:var(--spacing-lg)}.calculation-details h4{font-size:var(--font-size-lg);color:var(--grey-dark);margin-bottom:var(--spacing-md)}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);background:#fff;border-radius:var(--border-radius-sm)}.detail-label{color:var(--grey-medium);font-weight:500}.detail-value{color:var(--grey-dark);font-weight:600}.charts-section{display:flex;flex-direction:column;gap:var(--spacing-xl)}.chart-container{background:#fff;border:1px solid var(--grey-lightest);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--box-shadow)}.chart-wrapper{position:relative;height:400px;width:100%}@media (max-width: 768px){.chart-wrapper{height:300px}}.payment-table-container{display:flex;flex-direction:column;gap:var(--spacing-lg)}.table-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.table-header h3{font-size:var(--font-size-2xl);color:var(--grey-dark)}.table-summary{display:flex;gap:var(--spacing-lg);flex-wrap:wrap}.summary-item{font-size:var(--font-size-sm);color:var(--grey-medium);white-space:nowrap}.table-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--grey-bg);border-radius:var(--border-radius)}.pagination-controls{display:flex;align-items:center;gap:var(--spacing-lg)}.pagination-controls label{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--grey-medium)}.pagination-controls select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--grey-lightest);border-radius:var(--border-radius-sm);background:#fff}.show-all-toggle{font-size:var(--font-size-sm)}.pagination{display:flex;align-items:center;gap:var(--spacing-sm)}.page-info{font-size:var(--font-size-sm);color:var(--grey-medium);margin:0 var(--spacing-sm)}.table-wrapper{overflow-x:auto;border-radius:var(--border-radius);border:1px solid var(--grey-lightest)}.payment-table{width:100%;border-collapse:collapse;background:#fff}.payment-table th,.payment-table td{padding:var(--spacing-md);text-align:left;border-bottom:1px solid var(--grey-lightest)}.payment-table th{background-color:var(--grey-bg);font-weight:600;color:var(--grey-dark);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;z-index:1}.payment-table td{font-size:var(--font-size-sm);color:var(--grey-medium)}.payment-table tr:hover{background-color:var(--primary-orange-bg)}.payment-table tr.year-end{background-color:#ffc1071a;border-left:4px solid var(--warning-color)}.payment-table tr.final-payment{background-color:#28a7451a;border-left:4px solid var(--success-color)}.currency{text-align:right;font-family:Courier New,monospace;font-weight:500}.month-cell{font-weight:600;color:var(--grey-dark);position:relative}.year-marker,.final-marker{font-size:var(--font-size-xs);margin-left:var(--spacing-xs)}.paid-off{font-size:var(--font-size-xs);color:var(--success-color);font-weight:700;margin-left:var(--spacing-xs)}.payment-amount{color:var(--primary-orange);font-weight:600}.interest-charge{color:var(--grey-light)}.principal-payment{color:var(--primary-orange);font-weight:600}.ending-balance{font-weight:600;color:var(--grey-dark)}.table-footer{background:var(--grey-bg);padding:var(--spacing-lg);border-radius:var(--border-radius);border:1px solid var(--grey-lightest)}.footer-summary{display:flex;flex-direction:column;gap:var(--spacing-md)}.summary-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.summary-label{font-weight:600;color:var(--grey-dark)}.summary-value{font-weight:600;color:var(--primary-orange);font-size:var(--font-size-sm)}.payoff-date{text-align:center;font-size:var(--font-size-lg);color:var(--success-color);font-weight:600}.table-legend{background:#fff;padding:var(--spacing-lg);border-radius:var(--border-radius);border:1px solid var(--grey-lightest)}.table-legend h4{font-size:var(--font-size-base);color:var(--grey-dark);margin-bottom:var(--spacing-md)}.legend-items{display:flex;flex-wrap:wrap;gap:var(--spacing-lg)}.legend-item{font-size:var(--font-size-sm);color:var(--grey-medium)}.interest-legend{color:var(--grey-light)}.principal-legend{color:var(--primary-orange)}.no-data,.no-results,.welcome-content{text-align:center;padding:var(--spacing-2xl);color:var(--grey-medium)}.no-data h3,.no-results h3{font-size:var(--font-size-xl);color:var(--grey-dark);margin-bottom:var(--spacing-md)}.welcome-state{display:flex;align-items:center;justify-content:center;min-height:500px}.welcome-content h2{font-size:var(--font-size-2xl);color:var(--grey-dark);margin-bottom:var(--spacing-xl)}.welcome-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl)}.feature{display:flex;align-items:flex-start;gap:var(--spacing-md);text-align:left}.feature-icon{font-size:var(--font-size-2xl);color:var(--primary-orange);margin-top:var(--spacing-xs)}.feature-content h3{font-size:var(--font-size-lg);color:var(--grey-dark);margin-bottom:var(--spacing-sm)}.feature-content p{color:var(--grey-medium);line-height:1.5}.get-started{background:var(--primary-orange-bg);border:1px solid var(--primary-orange-border);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-top:var(--spacing-xl)}.get-started p{color:var(--grey-dark);font-size:var(--font-size-lg);margin:0}.insights-section{background:var(--grey-bg);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);border:1px solid var(--grey-lightest)}.insights-section h4{font-size:var(--font-size-lg);color:var(--grey-dark);margin-bottom:var(--spacing-lg);text-align:center}.insights-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.insight{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);background:#fff;border-radius:var(--border-radius);border-left:4px solid var(--primary-orange)}.insight.warning{border-left-color:var(--warning-color);background:#fffbf0}.insight-icon{font-size:var(--font-size-lg);color:var(--primary-orange);margin-top:2px}.insight.warning .insight-icon{color:var(--warning-color)}.insight-text{color:var(--grey-dark);line-height:1.5}.calculator-footer{margin-top:auto;padding:var(--spacing-xl) 0;border-top:1px solid var(--grey-lightest)}.footer-content{text-align:center;display:flex;flex-direction:column;gap:var(--spacing-md)}.footer-content p{color:var(--grey-medium);font-size:var(--font-size-base)}.footer-links{display:flex;justify-content:center;gap:var(--spacing-lg)}.footer-note{font-size:var(--font-size-sm);color:var(--grey-light)}@media (max-width: 768px){.calculator{padding:var(--spacing-sm);gap:var(--spacing-md)}.calculator-header h1{font-size:var(--font-size-2xl)}.calculator-header .subtitle{font-size:var(--font-size-base)}.summary-cards,.details-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.table-controls{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.pagination-controls{justify-content:center}.tab-content{padding:var(--spacing-md)}.legend-items{flex-direction:column;gap:var(--spacing-sm)}.summary-row{flex-direction:column;align-items:stretch;text-align:center}.calculation-mode-toggle{flex-direction:column;gap:var(--spacing-xs)}.toggle-option{padding:var(--spacing-md);font-size:var(--font-size-base)}.timeframe-group{flex-direction:column;gap:var(--spacing-sm);align-items:stretch}.timeframe-input,.timeframe-unit{flex:none}.years-months-inputs{flex-direction:column;gap:var(--spacing-sm)}.time-input-group{flex:none}.payment-too-small-message{padding:var(--spacing-lg)}.analysis-item{flex-direction:column;gap:var(--spacing-xs);text-align:center}}@media (max-width: 480px){.calculator-layout{gap:var(--spacing-md)}.card-icon{width:50px;height:50px;font-size:var(--font-size-2xl)}.card-value{font-size:var(--font-size-lg)}.tab-navigation{flex-direction:column}.tab-button{flex:none;height:2.5rem}.payment-too-small-message{padding:var(--spacing-md);margin:var(--spacing-sm)}.too-small-icon{font-size:3rem}.payment-too-small-message h3{font-size:var(--font-size-xl)}.recommendation{padding:var(--spacing-md)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.text-orange{color:var(--primary-orange)}.text-grey{color:var(--grey-medium)}.text-success{color:var(--success-color)}.text-error{color:var(--error-color)}.text-warning{color:var(--warning-color)}.bg-orange{background-color:var(--primary-orange-bg)}.bg-grey{background-color:var(--grey-bg)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mt-0{margin-top:0}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}@media print{.calculator{max-width:none;padding:0}.input-section,.tab-navigation,.calculator-footer,.table-controls,.pagination{display:none}.calculator-layout{grid-template-columns:1fr}.chart-wrapper{height:300px}.summary-cards{grid-template-columns:repeat(2,1fr)}.payment-table{font-size:10px}.payment-table th,.payment-table td{padding:4px}}