body{font-family:Arial,sans-serif;max-width:980px;margin:0 auto;padding:20px;background:#f5f5f7;color:#111}
.card{background:#fff;padding:20px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.08);margin-bottom:20px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.field{flex:1 1 220px;display:flex;flex-direction:column}
label{font-size:14px;margin-bottom:6px}
input{padding:12px;font-size:16px;border:1px solid #ddd;border-radius:10px}
button{padding:12px 18px;font-size:16px;border:none;border-radius:12px;background:#e5e7eb;color:#111;cursor:pointer}
button:hover{background:#d1d5db}
button.primary{background:#3b82f6;color:#fff}
button.primary:hover{background:#2563eb}
button.active{background:#3b82f6;color:#fff}

.actions{margin-top:16px}

/* Duration inline segmented control */
.duration-wrap{display:flex;align-items:stretch}
.duration-wrap input{border-top-right-radius:0;border-bottom-right-radius:0}
.segmented{display:flex}
.segmented button{border-radius:0}
.segmented button:first-child{border-top-left-radius:0;border-bottom-left-radius:0}
.segmented button:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}

/* Results */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.result-item{padding:16px;border-radius:14px;font-size:15px}
.result-item strong{font-size:22px}
.result-total{background:#eef2ff;border:1px solid #2563eb}
.result-contrib{background:#f0f9ff;border:1px solid #38bdf8}
.result-interest{background:#ecfdf5;border:1px solid #16a34a}

.chart-card{margin-top:10px}
.calc-note{font-size:12px;color:#666;margin-top:10px}
canvas{width:100%;height:320px}