:root{--bg-color:#ffffff;--card-color:#f9fafb;--border-color:#e5e7eb;--text-color:#111827;--primary-btn:#22c55e;--primary-btn-hover:#16a34a;--secondary-btn:#2563eb;--title-bg:#2CEC00;--error-color:#ef4444;--success-color:#10b981}*{margin:0;padding:0;box-sizing:border-box}.mortgage-calculator-container{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;color:var(--text-color);overflow-x:hidden}.mortgage-title-container{background-color:var(--title-bg);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem;text-align:center;box-shadow:0 4px 6px rgb(0 0 0 / .1)}.mortgage-title-container h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700}.mortgage-title-container p{font-size:1.1rem;opacity:.9}.mortgage-calculator-card{background-color:var(--card-color);border:1px solid var(--border-color);border-radius:12px;padding:2rem;box-shadow:0 4px 6px rgb(0 0 0 / .05)}.input-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-weight:600;font-size:.95rem;color:var(--text-color)}.input-group input,.input-group select{padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;transition:border-color 0.2s;background-color:#fff}.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--primary-btn);box-shadow:0 0 0 3px rgb(34 197 94 / .1)}.input-group.full-width{grid-column:1 / -1}.error-message{color:var(--error-color);font-size:.875rem;margin-top:.25rem;min-height:1.25rem}.advanced-toggle-btn{width:100%;padding:1rem;background-color:#fff;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;font-weight:600;color:var(--text-color);cursor:pointer;margin-bottom:1.5rem;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.advanced-toggle-btn:hover{border-color:var(--primary-btn);background-color:#f0fdf4}.toggle-icon{transition:transform 0.3s ease}.advanced-toggle-btn[aria-expanded="true"] .toggle-icon{transform:rotate(180deg)}.advanced-options{overflow:hidden;transition:max-height 0.3s ease-out,opacity 0.3s ease;opacity:1}.advanced-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;padding:1.5rem;background-color:#fff;border:1px solid var(--border-color);border-radius:8px;margin-bottom:1rem}.close-advanced-btn{width:100%;padding:.875rem;background-color:var(--border-color);border:none;border-radius:8px;font-size:.95rem;font-weight:600;color:var(--text-color);cursor:pointer;transition:background-color 0.2s}.close-advanced-btn:hover{background-color:#e0e0e0}.button-group{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}.calculate-btn,.reset-btn,.export-btn{flex:1;min-width:150px;padding:1rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s}.calculate-btn{background-color:var(--primary-btn);color:#fff}.calculate-btn:hover{background-color:var(--primary-btn-hover);transform:translateY(-2px);box-shadow:0 4px 12px rgb(34 197 94 / .3)}.reset-btn{background-color:var(--secondary-btn);color:#fff}.reset-btn:hover{background-color:#1d4ed8;transform:translateY(-2px);box-shadow:0 4px 12px rgb(37 99 235 / .3)}.loading-spinner{text-align:center;padding:3rem;margin:2rem 0}.spinner{width:50px;height:50px;border:4px solid var(--border-color);border-top-color:var(--primary-btn);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.results-section{margin-top:3rem;animation:fadeIn 0.5s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:3rem}.summary-card{background-color:#fff;border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;text-align:center;transition:transform 0.2s,box-shadow 0.2s}.summary-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgb(0 0 0 / .1)}.summary-card h3{font-size:1rem;color:#6b7280;margin-bottom:.5rem}.summary-value{font-size:2rem;font-weight:700;color:var(--text-color)}.progress-container{background-color:#fff;border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;margin-bottom:3rem}.progress-bar{height:40px;background-color:var(--border-color);border-radius:8px;overflow:hidden;margin:1rem 0;display:flex}.progress-fill{height:100%;transition:width 0.5s ease}.principal-fill{background-color:var(--primary-btn)}.interest-fill{background-color:#f59e0b}.progress-labels{display:flex;justify-content:space-between;font-weight:600}.charts-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}.chart-wrapper{background-color:#fff;border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;height:300px}.breakdown-table{background-color:#fff;border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;margin-bottom:3rem;overflow-x:auto}.breakdown-table h3{margin-bottom:1rem}.breakdown-table table{width:100%;border-collapse:collapse}.breakdown-table th,.breakdown-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--border-color)}.breakdown-table th{font-weight:600;background-color:#f9fafb}.breakdown-table tr:hover{background-color:#f9fafb}.export-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.export-btn{background-color:#fff;border:2px solid var(--border-color);color:var(--text-color);padding:.875rem 1.5rem}.export-btn:hover{background-color:#f9fafb;border-color:var(--primary-btn);color:var(--primary-btn)}input[type="range"]{width:100%;height:8px;background:var(--border-color);border-radius:4px;outline:none;-webkit-appearance:none}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--primary-btn);border-radius:50%;cursor:pointer}@media (max-width:768px){.mortgage-title-container h1{font-size:2rem}.input-section{grid-template-columns:1fr}.advanced-grid{grid-template-columns:1fr}.summary-cards{grid-template-columns:repeat(2,1fr)}.charts-container{grid-template-columns:1fr}.button-group{flex-direction:column}.calculate-btn,.reset-btn{width:100%}}@media (max-width:480px){.mortgage-calculator-container{padding:10px}.mortgage-title-container{padding:1.5rem}.mortgage-title-container h1{font-size:1.75rem}.mortgage-calculator-card{padding:1rem}.summary-cards{grid-template-columns:1fr}.export-buttons{flex-direction:column}.export-btn{width:100%}}@media (max-width:360px){.mortgage-title-container h1{font-size:1.5rem}.summary-value{font-size:1.5rem}.charts-container{gap:1rem}}@media print{.advanced-toggle-btn,.close-advanced-btn,.button-group,.export-buttons{display:none}.mortgage-calculator-container{padding:0}.mortgage-calculator-card{border:none;box-shadow:none;padding:0}.chart-wrapper{page-break-inside:avoid}}.advanced-toggle-btn:focus,.calculate-btn:focus,.reset-btn:focus,.export-btn:focus,input:focus,select:focus{outline:2px solid var(--primary-btn);outline-offset:2px}@media (prefers-contrast:high){:root{--border-color:#000000;--text-color:#000000}.mortgage-calculator-card{border:2px solid var(--border-color)}}