:root{--primary-color: #5d6d7e;--primary-light: #7d8d9e;--primary-dark: #3d4d5e;--accent-color: #c9b896;--accent-hover: #b5a582;--accent-muted: rgba(201, 184, 150, .15);--bg-primary: #f5f3f0;--bg-secondary: #faf8f5;--bg-card: #fdfcfa;--bg-dark: #4a5568;--text-primary: #4a5568;--text-secondary: #718096;--text-muted: #a0aec0;--text-inverse: #faf8f5;--border-primary: #c4ccd6;--border-light: #e2e6ea;--border-focus: #c9b896;--success-color: #68b88e;--error-color: #c97c7c;--warning-color: #d4a574;--chart-principal: #7eb89e;--chart-interest: #b89ea3;--chart-principal-alt: #68b88e;--chart-interest-alt: #c4a5a8;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 10px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .15);--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Courier New", Courier, monospace;--font-size-xs: .75rem;--font-size-sm: .8rem;--font-size-base: .9rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-xxl: 1.8rem;--font-size-3xl: 3.5rem;--transition-fast: .2s;--transition-normal: .3s;--transition-slow: .5s;--container-width: 1008px;--input-shadow-color: #c5cdd4}[data-theme=dark]{--primary-color: #8fa6b5;--primary-light: #a5b8c7;--primary-dark: #6d8696;--accent-color: #b8a07a;--accent-hover: #a68d66;--accent-muted: rgba(184, 160, 122, .2);--bg-primary: #1a1d23;--bg-secondary: #22262e;--bg-card: #2a2f38;--bg-dark: #0d1015;--text-primary: #e2e4e8;--text-secondary: #9aa3b0;--text-muted: #6b7280;--text-inverse: #1a1d23;--border-primary: #3d4450;--border-light: #353b44;--border-focus: #b8a07a;--success-color: #5a9a72;--error-color: #b56b6b;--warning-color: #c49365;--chart-principal: #5a9a72;--chart-interest: #9a8489;--chart-principal-alt: #5a9a72;--chart-interest-alt: #9a8588;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 10px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .4);--input-shadow-color: #1d2025}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-primary);background-image:radial-gradient(at 40% 20%,hsla(210,20%,80%,.3) 0px,transparent 50%),radial-gradient(at 80% 0%,hsla(25,30%,75%,.25) 0px,transparent 50%),radial-gradient(at 0% 50%,hsla(200,25%,78%,.2) 0px,transparent 50%),radial-gradient(at 80% 50%,hsla(30,20%,85%,.2) 0px,transparent 50%),radial-gradient(at 0% 100%,hsla(220,20%,75%,.25) 0px,transparent 50%),radial-gradient(at 80% 100%,hsla(35,25%,80%,.2) 0px,transparent 50%),radial-gradient(at 50% 50%,hsla(210,15%,90%,.15) 0px,transparent 70%);background-size:200% 200%;animation:meshGradient 20s ease infinite;font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .5s ease,color .3s ease}[data-theme=dark] body{background-color:#1a1d23;background-image:radial-gradient(at 40% 20%,hsla(220,15%,15%,.4) 0px,transparent 50%),radial-gradient(at 80% 0%,hsla(240,10%,12%,.35) 0px,transparent 50%),radial-gradient(at 0% 50%,hsla(210,12%,18%,.3) 0px,transparent 50%),radial-gradient(at 80% 50%,hsla(230,12%,15%,.3) 0px,transparent 50%),radial-gradient(at 0% 100%,hsla(220,15%,12%,.35) 0px,transparent 50%),radial-gradient(at 80% 100%,hsla(240,12%,18%,.3) 0px,transparent 50%),radial-gradient(at 50% 50%,hsla(210,10%,20%,.25) 0px,transparent 70%)}@keyframes meshGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.hidden{display:none!important}[data-i18n]{transition:all var(--transition-fast) ease}.error-msg{color:var(--error-color);font-size:var(--font-size-sm)}.input-container.error-div{border-color:var(--error-color)}.input-container.error-div>p{background-color:var(--error-color);color:var(--text-inverse)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.main-container{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.main-content{display:flex;flex-wrap:wrap;background-color:var(--bg-card);border-radius:var(--radius-xl);width:var(--container-width);overflow:hidden}.main-content .header-container{flex:1;flex-basis:100%;display:flex;justify-content:center;margin:var(--spacing-lg) auto;width:100%;align-items:center;justify-content:space-between;flex-wrap:nowrap}.main-content .header-container>h1{font-size:var(--font-size-xl);color:var(--text-primary);font-weight:700;text-align:center;width:100%;margin-bottom:var(--spacing-md);white-space:nowrap}.header-controls,.main-content .header-container>div.header-controls{display:flex;align-items:center;gap:var(--spacing-xs)}.theme-toggle{width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border-light);background:var(--bg-card);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal) ease;box-shadow:0 2px 4px #00000014}.theme-toggle:hover{transform:scale(1.05);box-shadow:0 4px 8px #00000026}.theme-toggle:active{transform:scale(.95)}#lang-select,.main-content .header-container>div.header-controls>select#lang-select{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid var(--border-primary);color:var(--text-secondary);background:var(--bg-card);cursor:pointer;font-size:var(--font-size-sm);font-family:inherit;outline:none;transition:border-color var(--transition-normal)}#lang-select:hover,.main-content .header-container>div.header-controls>select#lang-select:hover{border-color:#76c7f0}#lang-select:focus,.main-content .header-container>div.header-controls>select#lang-select:focus{border-color:var(--accent-color)}.main-content .header-container>button{border:none;background:none;color:var(--text-secondary);border-bottom:1px solid var(--text-secondary);cursor:pointer}.site-footer{width:100%;background-color:var(--bg-dark);padding:var(--spacing-lg);text-align:center;color:var(--text-inverse);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--spacing-sm)}.footer-links a{color:var(--text-muted);margin:0 var(--spacing-sm);text-decoration:none;font-size:var(--font-size-sm);text-wrap:nowrap}.footer-links a:hover{color:var(--text-inverse)}.disclaimer-container{margin-top:1rem;padding-top:var(--spacing-sm);border-top:1px dashed rgba(255,255,255,.2)}.disclaimer-text{font-size:var(--font-size-sm);line-height:1.5;color:var(--text-muted);text-align:left}.left-content .disclaimer-text{color:#7e734e}.calculation-methods-section,.user-guide-section,.faq-section,.expert-guide-section{width:var(--container-width);overflow:hidden;margin:var(--spacing-xxl) auto}.user-guide-section,.expert-guide-section{padding:var(--spacing-xxl) var(--spacing-md);background-color:var(--bg-card)}.faq-section{padding:var(--spacing-xxl) var(--spacing-md);background-color:var(--bg-secondary)}.expert-guide-section{padding:80px var(--spacing-md);border-top:1px solid var(--bg-primary)}.guide-container{max-width:var(--container-width);margin:0 auto}.guide-container h2{color:var(--text-primary);font-size:var(--font-size-xxl);margin-bottom:40px;text-align:center}.guide-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}.faq-container{max-width:var(--container-width);margin:0 auto}.faq-container h2{color:var(--text-primary);text-align:center;margin-bottom:40px;font-size:var(--font-size-xxl)}.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px}.methods-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(560px,1fr));gap:20px}.left-content form>button,.calculate-btn{border:none;background:linear-gradient(135deg,var(--accent-color) 0%,#c4c72b 100%);padding:0 48px;height:60px;width:100%;border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-lg);font-weight:700;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);cursor:pointer;position:relative;overflow:hidden;margin-top:var(--spacing-lg);transition:all var(--transition-normal) ease;box-shadow:0 4px 14px #d8db2f4d}.calculate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d8db2f66}.calculate-btn:active{transform:translateY(0);box-shadow:0 2px 8px #d8db2f4d}.calculate-btn span{white-space:nowrap;font-size:18px}.calculate-btn img{width:24px;height:24px}.clear-all-btn,.view-btn{border:none;background:transparent;color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:all var(--transition-normal) ease;white-space:nowrap}.clear-all-btn:hover,.view-btn:hover{color:var(--text-primary);background-color:#f0f4f7;text-decoration:none}.method-card{background:#fafae0;padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid #d2d421}.method-card h3{color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.method-card p{font-size:var(--font-size-base);color:#6b7280;line-height:1.5;margin-bottom:var(--spacing-md)}.formula{background:var(--bg-card);padding:var(--spacing-sm);border-radius:var(--radius-md);text-align:center;overflow-x:auto;color:var(--text-primary);font-weight:700}.guide-card{padding:30px;background:var(--bg-secondary);border-radius:20px;border:1px solid var(--bg-primary);transition:all var(--transition-normal) ease}.guide-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);background:var(--bg-card)}.card-icon{font-size:2rem;margin-bottom:20px}.guide-card h3{color:var(--text-primary);margin-bottom:var(--spacing-md);font-size:var(--font-size-lg)}.guide-card p{color:var(--text-secondary);font-size:var(--font-size-base);line-height:1.8}.step-item{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--bg-primary);transition:transform var(--transition-normal) ease}.step-item:hover{transform:translateY(-5px)}.step-number{width:36px;height:36px;background-color:var(--accent-color);color:var(--text-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:var(--spacing-md)}.step-content h3{color:var(--text-primary);font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm)}.step-content p{color:var(--text-secondary);font-size:var(--font-size-sm);line-height:1.6}.faq-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.faq-item{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-light);overflow:hidden;transition:all var(--transition-normal) ease}.faq-item summary{padding:var(--spacing-lg);cursor:pointer;font-weight:600;color:var(--text-primary);list-style:none;display:flex;justify-content:space-between;align-items:center}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:1.5rem;color:var(--accent-color);transition:transform var(--transition-normal)}.faq-item[open] summary:after{transform:rotate(45deg)}.faq-item[open]{border-color:var(--accent-color);box-shadow:var(--shadow-sm)}.faq-answer{padding:0 var(--spacing-lg) var(--spacing-lg);color:var(--text-secondary);line-height:1.8;font-size:var(--font-size-base)}.mortgage-amount-container,.mortgage-term-container,.interest-rate-container,.mortgage-type-container,.specific-month-container{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);border:1px solid var(--border-light);transition:all var(--transition-normal) ease}.mortgage-amount-container:hover,.mortgage-term-container:hover,.interest-rate-container:hover,.specific-month-container:hover{border-color:var(--text-muted);box-shadow:var(--shadow-sm)}.input-container{display:flex;border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);transition:all .08s ease;box-shadow:inset 0 1px 2px #0000000a,0 6px 0 var(--input-shadow-color),0 8px 12px #0003,0 16px 24px #00000026;position:relative;top:0}.input-container:active,.input-container.active{box-shadow:inset 0 1px 2px #0000000a,0 1px 0 var(--input-shadow-color),0 1px 6px #0003;top:5px;transform:translateY(5px)}.input-container:focus-within{border-color:var(--primary-color);box-shadow:inset 0 1px 2px #0000000a,0 6px #b8c9d4,0 8px 12px #0003,0 16px 24px #00000026,0 0 0 3px #4a55681a}.input-container:focus-within{border-color:var(--primary-color);box-shadow:inset 0 1px 2px #0000000a,0 0 0 3px #4a55681a}.field .input-container{height:48px}.input-container input{border:none;width:100%;padding:0 var(--spacing-md);min-width:0;font-size:18px!important;font-weight:600;color:var(--text-primary);background:transparent}.input-container input::placeholder{color:var(--text-muted);font-weight:400}.input-container input:focus{outline:none}.input-container p{padding:12px var(--spacing-md);background:linear-gradient(135deg,#f0f7fc,#e8f1f6);color:var(--text-secondary);min-width:50px;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:var(--font-size-sm);border-left:1px solid var(--border-light)}.input-container:focus-within{border-color:var(--primary-color)}.input-container:focus-within p{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);color:var(--text-inverse)}.input-group:focus-within{transform:scale(1.02);transition:transform var(--transition-fast) ease}.input-group input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px #4a55681a;outline:none}.field label,.mortgage-amount-container>label,.mortgage-term-container>label,.interest-rate-container>label,.mortgage-type-container>label,.specific-month-container>label{font-size:var(--font-size-sm);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm);text-wrap:nowrap;display:flex;align-items:center;gap:var(--spacing-xs)}.field label:before,.mortgage-amount-container>label:before,.mortgage-term-container>label:before,.interest-rate-container>label:before,.specific-month-container>label:before{content:"";display:inline-block;width:4px;height:16px;background:var(--accent-color);border-radius:2px}.strategy-select{width:100%;padding:14px 40px 14px 16px;border:1px solid var(--border-light);border-radius:var(--radius-md);background-color:var(--bg-card);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal) ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234E6E7E' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 14px) center;font-weight:500;box-shadow:inset 0 1px 2px #0000000a}.strategy-select:hover{border-color:var(--text-muted)}.strategy-select:focus{outline:none;border-color:var(--primary-color);box-shadow:inset 0 1px 2px #0000000a,0 0 0 3px #4a55681a}.radio-input-container{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);margin:var(--spacing-xs) 0;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal) ease;background:var(--bg-card);border:1px solid var(--border-light)}.radio-input-container:hover{border-color:var(--primary-color);background:#f8fcfe}.radio-input-container:has(input:checked){border-color:var(--primary-color);background:linear-gradient(135deg,#4a55680d,#4a556805)}.radio-input-container input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border-primary);border-radius:50%;cursor:pointer;transition:all var(--transition-fast) ease;position:relative;flex-shrink:0}.radio-input-container input[type=radio]:checked{border-color:var(--primary-color);background:var(--primary-color)}.radio-input-container input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--accent-color);border-radius:50%}.radio-input-container label{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);cursor:pointer;margin:0;text-transform:none;letter-spacing:0}.radio-input-container:has(input:checked) label{color:var(--primary-color)}.early-repay-switch-container{grid-column:1/3;display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.switch-wrapper{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}.switch-wrapper input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1;transition:var(--transition-normal);border-radius:28px;box-shadow:inset 0 2px 4px #0000001a}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background-color:var(--bg-card);transition:var(--transition-normal);border-radius:50%;box-shadow:0 2px 4px #00000026}input:checked+.slider{background:linear-gradient(135deg,#22c55e,#16a34a)}input:checked+.slider:before{transform:translate(24px)}.switch-label{font-weight:700;color:var(--text-primary);font-size:var(--font-size-sm)}.tab-header{display:flex;background:var(--bg-card);margin:var(--spacing-sm);padding:4px;border-radius:var(--radius-lg);gap:4px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}.tab-item{flex:1;padding:var(--spacing-sm) var(--spacing-md);text-align:center;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast) cubic-bezier(.4,0,.2,1);white-space:nowrap}.tab-item:hover{color:var(--text-primary);background:var(--bg-secondary)}.tab-item.active{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);color:var(--text-inverse);box-shadow:var(--shadow-sm)}.advanced-panel{grid-column:1/3;background:linear-gradient(180deg,#f8fcff,#f0f7fa);border:1px solid var(--border-light);border-radius:var(--radius-lg);margin-top:var(--spacing-md);box-shadow:var(--shadow-md);overflow:hidden;max-height:500px;opacity:1;transition:max-height .3s ease,opacity .3s ease,margin .3s ease,padding .3s ease}.advanced-panel.collapsed{max-height:0;opacity:0;border:none;margin:0;padding:0}.tab-content{padding:var(--spacing-md)}.left-content>form>div>div.tab-content,.left-content>form>div>div.tab-header,.left-content>form>div>div.balance-hint-container{border:0px}.repay-group{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.field{display:flex;flex-direction:column;gap:var(--spacing-sm)}.field label{font-size:var(--font-size-xs);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.field label:before{display:none}.field.full-width{width:100%;display:flex;flex-direction:column;gap:var(--spacing-sm)}.balance-hint-container{margin:var(--spacing-md) 0 0;padding:var(--spacing-sm) 0;border-top:1px dashed var(--border-light)}#remaining-balance-hint{color:var(--primary-color);font-style:normal;opacity:.9;width:100%;font-size:var(--font-size-sm);font-weight:600;background:#4a55680d;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md)}.error-div{border-color:var(--error-color)!important}.error-div .input-container{border-color:var(--error-color);box-shadow:0 0 0 3px #d733281a}.error-msg{color:var(--error-color);font-size:var(--font-size-xs);font-weight:600;display:block;margin-top:var(--spacing-xs)}.input-container input{transition:background-color var(--transition-fast) ease}.mortgage-amount-container>label,.mortgage-term-container>label,.interest-rate-container>label,.mortgage-type-container>label,.specific-month-container>label{transition:color var(--transition-fast) ease}.mortgage-amount-container:hover>label,.mortgage-term-container:hover>label,.interest-rate-container:hover>label,.specific-month-container:hover>label{color:var(--primary-color)}.guide-sidebar{position:absolute;top:5px;right:5px;width:240px;background-color:#f0f7ff;border:1px solid #e0eaf5;border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);z-index:100}.sidebar-header h3{color:var(--success-color);font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);border-bottom:2px solid var(--success-color);padding-bottom:var(--spacing-sm)}.guide-list{list-style:none;padding:0}.guide-list li a{display:block;color:var(--success-color);text-decoration:none;font-size:var(--font-size-base);line-height:1.5;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all var(--transition-normal) ease}.guide-list li a:hover{background-color:#e2f0fd;transform:translate(5px)}.mobile-guide-btn,.close-sidebar{display:none}.main-content .header-container>button.mobile-guide-btn{color:#f1e9d9;background-color:#27ae60}.loan-type-container{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);border:1px solid var(--border-light);transition:all var(--transition-normal) ease}#loan-type-toggle{width:100%;padding:14px 40px 14px 16px;border:1px solid var(--border-light);border-radius:var(--radius-md);background-color:var(--bg-card);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal) ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234E6E7E' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 14px) center;font-weight:500;box-shadow:inset 0 1px 2px #0000000a}#combined-loan-form{margin-bottom:var(--spacing-md)}.combined-loan-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.combined-section-title{font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--accent-color);display:flex;align-items:center;gap:var(--spacing-xs)}.combined-section-title:before{content:"";display:inline-block;width:4px;height:16px;border-radius:2px}.commercial-section .combined-section-title:before{background:#2563eb}.housing-fund-section .combined-section-title:before{background:#059669}.combined-section .form-group label{font-size:var(--font-size-sm);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs);display:flex;align-items:center;gap:var(--spacing-xs)}.combined-section .form-group label:before{content:"";display:inline-block;width:3px;height:12px;background:var(--accent-color);border-radius:1px}.combined-section .input-container{display:flex;border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);transition:all var(--transition-normal) ease;box-shadow:inset 0 1px 2px #0000000a}.combined-section .input-container input{border:none;width:100%;padding:12px var(--spacing-sm);min-width:0;font-size:16px;font-weight:600;color:var(--text-primary);background:transparent}.combined-section .input-container p{padding:12px var(--spacing-sm);background:linear-gradient(135deg,#f0f7fc,#e8f1f6);color:var(--text-secondary);min-width:45px;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:var(--font-size-sm);border-left:1px solid var(--border-light)}.combined-section .input-container:focus-within p{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);color:var(--text-inverse)}#combined-results{width:100%}.combined-results-header{margin-bottom:var(--spacing-md)}.combined-results-header h2{font-size:var(--font-size-xl);color:var(--text-inverse);font-weight:700;margin-bottom:var(--spacing-xs)}.combined-results-header p{font-size:var(--font-size-sm);color:var(--text-muted)}.combined-results-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.combined-result-card{background-color:#00000040;border-radius:var(--radius-md);padding:var(--spacing-xl);border-top:4px solid var(--accent-color);box-shadow:var(--shadow-md);transition:all var(--transition-normal) ease}.combined-result-card:hover{box-shadow:var(--shadow-lg)}.combined-result-card.total-result{grid-column:1 / -1;background-color:#00000040;border-top:4px solid var(--success-color)}.combined-result-card h4{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid rgba(154,190,213,.25);display:flex;align-items:center;gap:var(--spacing-xs)}.commercial-result h4{color:#fff}.commercial-result h4:before{content:"";width:8px;height:8px;background:#2563eb;border-radius:50%}.housing-fund-result h4{color:#fff}.housing-fund-result h4:before{content:"";width:8px;height:8px;background:#059669;border-radius:50%}.total-result h4{color:#fff}.total-result h4:before{content:"";width:10px;height:10px;background:var(--accent-color);border-radius:50%}.combined-result-item span{font-size:var(--font-size-sm);color:var(--text-muted);font-weight:600}.combined-result-item p{font-size:var(--font-size-lg);font-weight:700;color:var(--text-inverse)}.total-result .combined-result-item p{font-size:var(--font-size-xl);color:var(--accent-color);font-weight:700}.total-result .combined-result-item:first-child p{font-size:2rem;color:var(--accent-color);font-weight:700;letter-spacing:-1px}.loan-type-container>label{font-size:var(--font-size-sm);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm);text-wrap:nowrap;display:flex;align-items:center;gap:var(--spacing-xs)}.loan-type-container>label:before{content:"";display:inline-block;width:4px;height:16px;background:var(--accent-color);border-radius:2px}#loan-type-toggle{width:100%;padding:14px 40px 14px 16px;border:1px solid var(--border-light);border-radius:var(--radius-md);background-color:var(--bg-card);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal) ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234E6E7E' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 14px) center;font-weight:500;box-shadow:inset 0 1px 2px #0000000a}#loan-type-toggle:hover{border-color:var(--text-muted)}#loan-type-toggle:focus{outline:none;border-color:var(--primary-color);box-shadow:inset 0 1px 2px #0000000a,0 0 0 3px #4a55681a}.combined-loan-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.combined-section{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-md);border:1px solid var(--border-light);transition:all var(--transition-normal) ease}.combined-section:hover{border-color:var(--text-muted);box-shadow:var(--shadow-sm)}.combined-section-title{font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--accent-color)}.commercial-section .combined-section-title{color:#2563eb}.housing-fund-section .combined-section-title{color:#059669}.housing-fund-result h4{color:#059669}.combined-section .form-group{margin-bottom:var(--spacing-sm)}.combined-section .form-group label{font-size:var(--font-size-xs);font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-xs);display:block}.combined-section .input-container{display:flex;border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);transition:all var(--transition-normal) ease}.combined-section .input-container:focus-within{border-color:var(--primary-color);box-shadow:inset 0 1px 2px #0000000a,0 0 0 3px #4a55681a}.combined-section .input-container input{border:none;width:100%;padding:10px var(--spacing-sm);min-width:0;font-size:16px;font-weight:600;color:var(--text-primary);background:transparent}.combined-section .input-container input:focus{outline:none}.combined-section .input-container p{padding:10px var(--spacing-sm);background:linear-gradient(135deg,#f0f7fc,#e8f1f6);color:var(--text-secondary);min-width:40px;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:var(--font-size-sm);border-left:1px solid var(--border-light)}.combined-results-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.combined-result-card{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-md);border:1px solid var(--border-light)}.combined-result-card.total-result{grid-column:1 / -1;background:linear-gradient(135deg,#4a55681a,#4a55680d);border-color:var(--primary-color)}.combined-result-card h4{font-size:var(--font-size-base);font-weight:700;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--accent-color)}.commercial-result h4{color:#2563eb}.公积金-result h4{color:#059669}.combined-result-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.combined-result-item span{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:600}.combined-result-item p{font-size:var(--font-size-base);font-weight:700;color:var(--text-primary)}.total-result .combined-result-item p{font-size:var(--font-size-lg)}.combined-repay-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.combined-repay-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.combined-lump-month{grid-column:1 / -1}.combined-repay-section{background:#00000026;border-radius:var(--radius-sm);padding:var(--spacing-sm)}.combined-repay-section h5{font-size:var(--font-size-sm);font-weight:700;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid rgba(154,190,213,.25)}.commercial-repay h5{color:#2563eb}.housing-fund-repay h5{color:#059669}.combined-repay-section .field{margin-bottom:var(--spacing-xs)}.combined-repay-section .field:last-child{margin-bottom:0}.combined-savings-box{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px dashed rgba(154,190,213,.25)}.combined-result-item.original-total span{color:var(--warning-color)}.combined-result-item.original-total p{text-decoration:line-through;color:var(--warning-color)}.combined-result-item.interest-saved span{color:var(--success-color)}.combined-result-item.interest-saved p{color:var(--success-color);font-size:var(--font-size-xl)}.left-content{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-lg);padding-top:0;width:35%}.left-content form{width:100%}.left-content>form>div{display:flex;flex-direction:column;gap:var(--spacing-sm)}.left-content>form>div>label{color:var(--text-secondary);text-wrap:nowrap;font-size:20px}.left-content>form>div>div{display:flex;border:1px solid var(--border-primary);border-radius:var(--radius-sm);overflow:hidden;min-width:0}.left-content>form .mortgage-amount-container{grid-column:1/3;grid-row:1/2}.left-content>form .mortgage-type-container{grid-column:1/3;grid-row:3/4}.left-content>form .mortgage-type-container>.radio-input-container{display:flex;gap:var(--spacing-md);padding:0px var(--spacing-md);height:48px;align-items:center;font-size:var(--font-size-md);cursor:pointer;transition:background-color var(--transition-fast) ease;border-radius:var(--radius-sm)}.left-content>form .mortgage-type-container>.radio-input-container:hover{background-color:#00000008}.left-content>form .mortgage-type-container>.radio-input-container label{font-size:var(--font-size-sm)}.left-content>form .mortgage-type-container>div>input[type=radio]{width:20px;height:20px}.left-content>form .mortgage-type-container>div>label{font-size:var(--font-size-lg);font-weight:700;color:var(--text-primary);text-wrap:nowrap}.right-content{background-color:var(--bg-dark);width:65%;padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:48px 48px 0}@keyframes paperDrop{0%{opacity:0;transform:scale(.85) translateY(-30px) rotate(-3deg);filter:blur(4px)}60%{opacity:1;transform:scale(1.02) translateY(5px) rotate(1deg)}to{opacity:1;transform:scale(1) translateY(0) rotate(0);filter:blur(0)}}.right-content.after-reset{text-align:start;justify-content:flex-start;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#4a5568d9;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a}.after-results-container.results-animate{animation:paperDrop .6s cubic-bezier(.34,1.56,.64,1) forwards}.right-content .before-results-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.right-content .before-results-container>h2{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary)}.right-content .before-results-container>p{color:var(--text-secondary)}.right-content .after-results-container{display:flex;flex-direction:column;gap:1rem;padding:.5rem}.right-content .after-results-container .results-header>h2{font-size:var(--font-size-xl);font-weight:700;color:var(--text-inverse);margin-bottom:var(--spacing-md)}.right-content .after-results-container .results-header>p{color:var(--text-muted)}.right-content .after-results-container .results-description{display:flex;flex-direction:column;gap:var(--spacing-xl);background-color:#00000040;padding:var(--spacing-xl);border-radius:var(--radius-md);border-top:4px solid var(--accent-color);box-shadow:var(--shadow-md)}.right-content .after-results-container .results-description>div{display:flex;flex-direction:column;gap:var(--spacing-sm)}.right-content .after-results-container .results-description span{color:var(--text-muted)}.right-content .after-results-container .results-description :first-child>p{color:var(--accent-color);font-size:var(--font-size-3xl);font-weight:700}.right-content .after-results-container .results-description :last-child>p{color:var(--text-inverse);font-size:var(--font-size-lg);font-weight:700}.line{background-color:#9abed540;height:1px}.results-total-over-term{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--spacing-md)}#original-total-container{display:flex;justify-content:space-between;width:100%;color:var(--warning-color);font-size:var(--font-size-base);margin-bottom:var(--spacing-sm);border-bottom:1px dashed rgba(239,68,68,.2);padding-bottom:var(--spacing-xs)}#original-total-amount{text-decoration:line-through;font-weight:500;color:var(--warning-color)}#total-over-the-term{color:var(--success-color);font-size:2rem;font-weight:700;margin:0;line-height:1.2;letter-spacing:-1px}#savings-box{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg)}.highlight-save{background:var(--accent-muted);padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--accent-color);margin-bottom:var(--spacing-sm)}.save-value{color:var(--success-color);font-size:1.4rem;font-weight:800}.save-label{display:block;font-size:var(--font-size-sm);text-transform:uppercase;margin-bottom:var(--spacing-xs)}.save-badge{background:linear-gradient(135deg,var(--accent-color) 0%,#b5a582 100%);color:var(--text-primary);padding:var(--spacing-lg);border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-lg);margin:var(--spacing-lg) 0;animation:slideUp var(--transition-slow) ease-out}.save-info .label{font-size:var(--font-size-sm);font-weight:700;opacity:.8}.save-info .value{font-size:var(--font-size-lg);font-weight:800;display:block}.save-badge-premium{background:linear-gradient(135deg,var(--bg-dark) 0%,#5d6d7e 100%);border:1px solid var(--accent-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-lg);margin:var(--spacing-lg) 0;position:relative;overflow:hidden}.save-icon{font-size:2.5rem}.save-badge-premium .save-label{color:var(--text-muted)}.save-badge-premium .save-value{color:var(--accent-color)}.save-tag{position:absolute;top:var(--spacing-sm);right:-30px;background:var(--accent-color);color:var(--text-primary);font-size:.6rem;font-weight:900;padding:2px 30px;transform:rotate(45deg)}.chart-wrapper{background:#ffffff0d;border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);border:1px solid rgba(154,190,213,.2)}.chart-wrapper h4{color:var(--text-muted);font-size:var(--font-size-base);margin-bottom:1.5rem;text-align:center}.bar-chart{display:flex;align-items:flex-end;justify-content:space-between;height:150px;gap:var(--spacing-sm);padding-top:var(--spacing-md)}.chart-column{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}.bar-stack{display:flex;flex-direction:column-reverse;width:40px;background:#f3f4f6;border-radius:var(--radius-sm);overflow:hidden;position:relative;height:100px;background:#ffffff1a}.bar-part{display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all var(--transition-normal) ease}.bar-part.principal{background-color:var(--chart-principal)}.bar-part.interest{background-color:var(--chart-interest)}.inner-label{font-size:10px;color:var(--text-inverse);transform:scale(.9)}.top-label{font-size:10px;color:var(--text-inverse);margin-bottom:4px;font-weight:600}.month-label{font-size:10px;color:var(--text-muted);margin-top:var(--spacing-xs)}.chart-legend{display:flex;justify-content:center;gap:var(--spacing-lg);margin-top:var(--spacing-md);font-size:var(--font-size-sm);color:var(--text-inverse)}.legend-item{display:flex;align-items:center;gap:var(--spacing-xs)}.dot{width:8px;height:8px;border-radius:2px}.dot.principal{background:var(--chart-principal)}.dot.interest{background:var(--chart-interest)}.bar-stack:hover .bar-part{filter:brightness(1.1);cursor:help}.animate-number{display:inline-block;min-width:120px;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.insight-box{background:#ffffff0d;border-radius:var(--radius-md);padding:var(--spacing-md);font-size:var(--font-size-base);line-height:1.5;color:var(--bg-primary);border-left:3px solid var(--accent-color)}.insight-box h4{margin-bottom:var(--spacing-sm);color:var(--accent-color);font-size:var(--font-size-md)}.comparison-box{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:var(--font-size-base);color:var(--text-muted)}.compare-row{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm)}.old-value{text-decoration:line-through;opacity:.7}.compare-row.highlight{color:var(--accent-color);font-weight:700;font-size:var(--font-size-md)}.save-value{font-size:1.1rem}.monthly-repay-card{background:#ffffff0d;border-left:4px solid var(--accent-color);padding:var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:30px;transition:all var(--transition-normal) ease}.monthly-repay-card:hover{background:#ffffff1a}.monthly-repay-card h2{font-size:var(--font-size-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.monthly-repay-card .amount{font-size:var(--font-size-3xl);font-weight:800;color:var(--accent-color);margin:var(--spacing-sm) 0;display:block}@media (max-width: 768px){.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:9998;opacity:0;transition:opacity var(--transition-normal)}.sidebar-overlay.active{display:block;opacity:1}.guide-sidebar{position:fixed;top:0;right:-100%;bottom:0;width:85%;max-width:320px;height:100vh;margin:0;border-radius:0;transition:right var(--transition-slow) cubic-bezier(.4,0,.2,1);display:block;z-index:9999;box-shadow:-4px 0 20px #00000026}.guide-sidebar.active{right:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-light)}.sidebar-tabs{display:flex;gap:var(--spacing-xs);flex:1;margin-right:var(--spacing-sm)}.sidebar-tab{flex:1;background:transparent;border:1px solid var(--border-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:var(--font-size-xs);font-weight:500;transition:all var(--transition-fast);text-align:center}.sidebar-tab.active{background:var(--accent-color);border-color:var(--accent-color);color:var(--text-primary);font-weight:600}.sidebar-content .tab-content{display:none}.sidebar-content .tab-content.active{display:block}.close-sidebar{display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:none;font-size:1.5rem;color:var(--text-secondary);cursor:pointer;width:36px;height:36px;border-radius:50%;transition:all var(--transition-fast)}.close-sidebar:hover{background:var(--error-color);color:#fff}.mobile-guide-btn{display:flex;position:fixed;bottom:30px;right:20px;background-color:var(--success-color);color:var(--text-inverse);padding:12px 20px;border-radius:30px;border:none;box-shadow:0 4px 15px #22c55e66;font-weight:700;cursor:pointer;z-index:999}.strategy-select{font-size:1rem;padding:14px}#total-over-the-term{font-size:1.6rem}.mortgage-amount-container,.mortgage-term-container,.interest-rate-container,.mortgage-type-container,.specific-month-container{padding:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.input-container{height:48px}.input-container input{font-size:16px!important;padding:0 var(--spacing-sm)}.input-container p{padding:10px var(--spacing-sm);min-width:40px}.calculate-btn{height:54px;padding:0 24px}.repay-group{grid-template-columns:1fr}.tab-header{flex-direction:column}}@media (max-width: 1600px){.guide-sidebar{right:-100%;position:fixed;z-index:9999}.guide-sidebar.active{right:0;box-shadow:-4px 0 20px #00000026}}@media screen and (max-width: 800px){.left-content input{font-size:16px}}@media (max-width: 600px){#total-over-the-term{font-size:1.6rem}}@media (min-width: 769px){.mobile-guide-btn,.close-sidebar,.mobile-tab-switcher{display:none}}@media (min-width: 769px){.sidebar-tabs{display:flex;gap:var(--spacing-xs)}.sidebar-tab{background:transparent;border:none;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast)}.sidebar-tab:hover{color:var(--text-primary);background:var(--bg-secondary)}.sidebar-tab.active{color:var(--accent-color);background:#007aff1a;font-weight:600}.sidebar-content .tab-content{display:none}.sidebar-content .tab-content.active{display:block}}.mobile-tab-switcher{display:none}@media (min-width: 769px){.mobile-tab-switcher{display:none!important}}@media (max-width: 800px){body{padding:0}.main-container{padding:40px;height:100%;display:flex;flex-direction:column}.main-content{flex-direction:column;width:100%;align-items:stretch}.calculation-methods-section,.user-guide-section,.faq-section,.expert-guide-section{display:block;width:100%;flex-basis:auto}.main-content .header-container{flex-direction:column;align-items:stretch;gap:8px;padding:0}.main-content .header-container>h1{text-align:center;margin-bottom:var(--spacing-sm);padding:0 var(--spacing-lg)}.header-controls{padding:0 var(--spacing-lg);justify-content:flex-start!important}.left-content{width:100%}.right-content{width:100%;border-radius:0;min-width:100%;padding:8px}.right-content .after-results-container{width:100%;padding:0}.right-content .after-results-container .results-description :first-child>p{font-size:2.5rem}.methods-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100%,1fr));gap:20px}.bar-chart{gap:2px}.combined-loan-wrapper{grid-template-columns:1fr;gap:var(--spacing-sm)}.combined-section{padding:var(--spacing-sm)}.combined-results-wrapper{grid-template-columns:1fr;gap:var(--spacing-sm)}.combined-result-card.total-result{grid-column:1}.combined-result-card{padding:var(--spacing-sm)}.combined-result-item p{font-size:var(--font-size-sm)}.total-result .combined-result-item:first-child p{font-size:1.25rem}.mobile-tab-switcher{display:flex;margin:0 var(--spacing-lg);margin-bottom:var(--spacing-sm)}}@media (max-width: 400px){body{padding:0}.main-container{padding:6px;height:100%;display:flex;flex-direction:column}.main-content{border-radius:0}.right-content{border-radius:0;min-width:100%;padding:8px}.right-content .after-results-container{width:100%;padding:0}.right-content .after-results-container .results-description :first-child>p{font-size:2.5rem}.left-content form{display:flex;flex-direction:column}.calculation-methods-section,.user-guide-section,.faq-section,.expert-guide-section{display:block;width:100%;flex-basis:auto}.methods-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100%,1fr));gap:20px}.footer-links{display:flex;flex-direction:column;gap:10px}.footer-links a{width:100%;text-align:left}.bar-chart{gap:2px}}