@charset "UTF-8";
/* ==========================================================================
   按揭計算機专属样式 —— mortgage-calculator.html
   依赖 tools.css（须先引入）
   ========================================================================== */

:root{--maxw:860px}

.card{padding:20px}

/* ===== 输入区 ===== */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
input[type=number]{padding:10px 12px;border-radius:9px;font-size:16px}
input[type=range]{width:100%;accent-color:var(--spot-deep);padding:0;border:none}
.rangeval{font-weight:800;color:var(--pine)}

/* ===== 结果区 ===== */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.res{background:var(--mist);border-radius:11px;padding:14px}
.res .k{font-size:12px;color:var(--muted)}
.res .v{font-family:var(--serif);font-size:clamp(20px,3vw,26px);font-weight:900;color:var(--pine)}
.res.hero{background:var(--pine);color:#fff}
.res.hero .k{color:#CFE0DA}
.res.hero .v{color:#fff}
.res.warn .v{color:var(--spot-deep)}

/* ===== 本金/利息占比条 ===== */
.bar{height:14px;border-radius:8px;overflow:hidden;display:flex;margin:8px 0 4px;border:1px solid var(--line)}
.bar i{display:block;height:100%}
.legend{font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ===== 逐年还款表 ===== */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--mist);font-size:12px}

.btn{padding:11px 22px;font-size:15px}