/* Mortgage Payoff Calculator */
.mpoff-wrap{max-width:680px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1a1a1a}
.mpoff-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.mpoff-icon{font-size:34px;line-height:1}
.mpoff-title{font-size:22px!important;font-weight:600!important;margin:0 0 3px!important;padding:0!important;border:none!important;color:#1a1a1a!important}
.mpoff-sub{font-size:13px;color:#666;margin:0}
/* Tabs */
.mpoff-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.mpoff-tab{flex:1 1 auto;min-width:140px;padding:10px 8px;font-size:12.5px;font-weight:500;border:1px solid #d8d8d8;border-radius:10px;background:#fff;color:#555;cursor:pointer;transition:background .13s,color .13s,border-color .13s;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.mpoff-tab span:first-child{font-size:18px}
.mpoff-tab-sub{font-size:11px;font-weight:400;opacity:.7}
.mpoff-tab:hover:not(.act){background:#f0fdf4}
.mpoff-tab.act{background:#dcfce7;color:#166534;border-color:#22C55E}
/* Inputs */
.mpoff-section-lbl{font-size:11px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;margin-top:16px}
.mpoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
.mpoff-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.mpoff-grid,.mpoff-grid2{grid-template-columns:1fr}}
.mpoff-lbl{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:5px}
.mpoff-iw{position:relative}
.mpoff-iw input{width:100%;box-sizing:border-box;padding:9px 38px 9px 28px;border:1px solid #d0d0d0;border-radius:8px;font-size:14px;color:#1a1a1a;background:#fff;outline:none;transition:border-color .15s;-moz-appearance:textfield}
.mpoff-iw input::-webkit-inner-spin-button,.mpoff-iw input::-webkit-outer-spin-button{-webkit-appearance:none}
.mpoff-iw input:focus{border-color:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.mpoff-pre{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;color:#999;pointer-events:none}
.mpoff-suf{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;color:#999;pointer-events:none}
.mpoff-extra-section{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:14px 16px;margin-bottom:4px}
.mpoff-extra-section .mpoff-section-lbl{margin-top:0}
.mpoff-biweekly-info{background:#fff;border:1px solid #bbf7d0;border-radius:8px;padding:12px 14px;font-size:13px;color:#166534;line-height:1.6}
/* Summary cards */
.mpoff-summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;animation:mpoff-in .22s ease}
@media(max-width:500px){.mpoff-summary-cards{grid-template-columns:repeat(2,1fr)}}
@keyframes mpoff-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.mpoff-scard{border-radius:11px;padding:13px 10px;text-align:center;border:1px solid}
.mpoff-sc-save{background:#dcfce7;border-color:#86efac}
.mpoff-sc-early{background:#dbeafe;border-color:#93c5fd}
.mpoff-sc-payoff{background:#f0fdf4;border-color:#bbf7d0}
.mpoff-sc-new{background:#fef3c7;border-color:#fde047}
.mpoff-scard-val{font-size:19px;font-weight:700;font-family:monospace;margin-bottom:3px}
.mpoff-scard-lbl{font-size:11px;color:#555}
.mpoff-sc-save .mpoff-scard-val{color:#166534}
.mpoff-sc-early .mpoff-scard-val{color:#1e40af}
.mpoff-sc-payoff .mpoff-scard-val{color:#166534}
.mpoff-sc-new .mpoff-scard-val{color:#92400E}
/* Comparison table */
.mpoff-comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:480px){.mpoff-comparison-grid{grid-template-columns:1fr}}
.mpoff-comp-card{border-radius:11px;padding:14px 16px;border:1px solid}
.mpoff-comp-before{background:#fff5f5;border-color:#fecaca}
.mpoff-comp-after{background:#f0fdf4;border-color:#86efac}
.mpoff-comp-title{font-size:13px;font-weight:700;margin-bottom:10px}
.mpoff-comp-before .mpoff-comp-title{color:#dc2626}
.mpoff-comp-after  .mpoff-comp-title{color:#166534}
.mpoff-comp-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid rgba(0,0,0,.06)}
.mpoff-comp-row:last-child{border-bottom:none;font-weight:700;font-size:14px}
.mpoff-comp-lbl{color:#555}
.mpoff-comp-val{font-family:monospace;font-weight:600;color:#1a1a1a}
/* Amortization */
.mpoff-toggle-btn{padding:9px 18px;font-size:13px;font-weight:600;color:#166534;background:#dcfce7;border:1px solid #86efac;border-radius:8px;cursor:pointer;transition:background .13s}
.mpoff-toggle-btn:hover{background:#bbf7d0}
table.mpoff-table{width:100%;border-collapse:collapse;font-size:12px}
table.mpoff-table th{padding:8px 10px;text-align:right;color:#888;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #e8e8e8;background:#fafafa;font-weight:600;position:sticky;top:0}
table.mpoff-table th:first-child{text-align:center}
table.mpoff-table td{padding:6px 10px;border-bottom:1px solid #f5f5f5;text-align:right;font-family:monospace;font-size:12px}
table.mpoff-table td:first-child{text-align:center;color:#888;font-family:inherit}
table.mpoff-table tr.mpoff-lump-row td{background:#fffbeb;font-weight:600}
table.mpoff-table tr.mpoff-last-row td{background:#dcfce7;font-weight:700}
table.mpoff-table tr:hover td{background:#f8faff}
.mpoff-reset-btn{display:block;width:100%;margin-top:12px;padding:9px;font-size:13px;color:#999;background:none;border:1px solid #e8e8e8;border-radius:8px;cursor:pointer;transition:background .13s}
.mpoff-reset-btn:hover{background:#f5f5f5;color:#333}
.mpoff-disclaimer{font-size:11px;color:#bbb;text-align:center;margin-top:6px}
