.tabs,header,nav{display:flex}
.menu-toggle,.tabs,button{cursor:pointer}
.footer a,.footer p,.menu a{text-decoration:none;font-size:16px;color:#fff}
.table h2,body{margin:0}
.result,label{font-weight:700}
body{padding:0;font-family:Arial,sans-serif;background-color:#f4f4f4}
.footer a,.menu a{display:inline-block;padding:15px}
.footer p{padding-bottom:15px}
.menu a:hover{background-color:#a64403}
.footer,.menu{list-style:none;text-align:center;background-color:#044384}
.footer li,.menu li{display:inline}
button{padding:5px 20px;border:2px solid #3498db;border-radius:5px;background-color:#3498db;color:#fff}
button,input[type=text],select{font-size:16px;outline:0}
button:hover{background-color:#2980b9}
input[type=text],input[type=number],select{padding:8px;border:2px solid #ccc;border-radius:5px;width:150px;box-sizing:border-box}
input[type=text]:focus,input[type=number]:focus{border-color:#3498db}
p{width:80%;margin:20px auto;}
.table,h1,h2{line-height:35px;width:80%;margin:20px auto;border-collapse:collapse}
@media (max-width:600px){
.table,h1,h2,p{line-height:35px;width:100%;margin:20px auto;border-collapse:collapse}
}
.table td,.table th{padding:12px;text-align:left;border:1px solid #ddd}
.table th{background-color:#4caf50;color:#fff}
.table tr:nth-child(2n){background-color:#f2f2f2}
.table tr:hover{background-color:#ddd}
.table td{background-color:#fff}
.result{font-size:25px;color:#2b9003}
.tab,a.tab:hover,a.tab:visited{color:#fff;text-decoration:none}
.tabs{border-bottom:2px solid #ddd}
.tab{padding:10px 20px;margin-right:10px;border:1px solid #ccc;border-radius:5px 5px 0 0;transition:background-color .3s;background-color:#ff7f00}
header{background:var(--nav-bg);padding:1rem;position:relative;align-items:center;justify-content:space-between;flex-wrap:wrap}
nav{gap:1rem;flex-grow:1;justify-content:center;order:2}
nav a{text-decoration:none;color:var(--text);padding:.5rem 1rem}
nav a:hover{background:var(--accent);border-radius:5px}
.menu-toggle{font-size:1.8rem;background:0 0;border:none;color:var(--accent);position:absolute;top:1rem;right:1rem;z-index:10;order:3}
p{line-height:1.6}
@media (max-width:768px){
nav{flex-direction:column;display:none;width:100%;margin-top:3rem;padding:1rem;order:3}
nav.show{display:flex;background:var(--nav-bg);border-top:1px solid #ccc}
.menu-toggle{position:absolute;top:1rem;right:1rem}
.logo{order:1}
}
.button-link{width:100px;display:inline-block;padding:2px 16px;background-color:#054993;color:#fff;text-decoration:none;border-radius:5px;text-align:center;}
.button-link:hover{background-color:#0056b3}
.button-link:active{transform:scale(.97)}

.form-container,.results-container,.amortization-container{
width:80%;margin:20px auto;background:#fff;border:1px solid #ddd;border-radius:6px;padding:20px;box-sizing:border-box}

.header2,.header{text-align:center;padding:10px 0}
.header2 h2,.header h3{margin:0}

.form-row,.result-row,.amortization-container .row{
display:flex;justify-content:space-between;align-items:center;
padding:10px 0;border-bottom:1px solid #eee
}
.form-row:last-child,.result-row:last-child{border-bottom:none}

.full-width{width:100%}
.form-label{width:35%;font-weight:bold;margin-right:5px}
.form-field{width:65%}

.form-field input,.form-field select{
width:100%;padding:6px 8px;font-size:14px;box-sizing:border-box
}

#calculate-submit{width:100%;padding:12px;font-size:16px}

.result-row>div:first-child{font-weight:bold}

.amortization-container{
width:80%;margin:20px auto;background:#fff;border:1px solid #ddd;
border-radius:6px;padding:15px;box-sizing:border-box;overflow-x:auto
}

.amortization-container .row{display:flex;padding:6px 4px;border-bottom:1px solid #eee;min-width:600px}
.amortization-container .header-row{display:flex;background:#f7f7f7;font-weight:bold;min-width:600px}
.amortization-container .col{flex:1;padding:2px 6px;font-size:14px;white-space:nowrap}

input.data,select{border:1px solid #ccc;border-radius:4px}

@media(max-width:600px){
.form-container,.results-container,.amortization-container{
width:100%;margin:10px 0;padding:10px}
.form-row,.result-row{flex-direction:column;align-items:flex-start}
.form-label,.form-field{width:100%}
.form-label{margin-bottom:4px}
.amortization-container{overflow-x:auto}
.amortization-container .row,.amortization-container .header-row{
flex-direction:row;min-width:600px}
.amortization-container .col{width:auto;flex:1 0 100px;padding:2px 4px}
}

.button{
padding:10px 22px;background:#4a6cf7;color:#fff;border:0;border-radius:6px;
cursor:pointer;font-size:16px;transition:.25s
}
.button:hover{background:#3958d6}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field select {
  width: 200px !important;
}

#calculate-submit {
  width: 200px !important;
}
.form-field {
    display: flex;
    gap: 20px; 
    align-items: center;
    margin-top: 5px;
}
.form-field input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #4a6cf7;
    border-radius: 50%;
    position: relative;
    margin-right: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: border 0.2s, background 0.2s;
}
.form-field input[type="radio"]:checked {
    background-color: #4a6cf7;
    border-color: #4a6cf7;
}
.form-field input[type="radio"]:hover {
    border-color: #3958d6;

.form-field input[type="radio"] + * {
    vertical-align: middle;
}
.short{width:120px;}