.loan-calculator {max-width: 480px;margin: 30px auto;padding: 20px 25px;background: #f9faff;border-radius: 12px;box-shadow: 0 6px 18px rgba(0,0,0,.1);font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color: #333;}
h1 {text-align: center;color: #2c3e50;margin-bottom: 25px;font-weight: 700;}
.input-group {margin-bottom: 18px;}
.input-group label {display: block;font-weight: 600;margin-bottom: 8px;}
.input-group input[type="number"], .input-group select {width: 100%;padding: 10px 12px;border: 1.8px solid #cbd6e2;border-radius: 8px;font-size: 1rem;transition: border-color .3s ease;}
.input-group input[type="number"]:focus, .input-group select:focus {border-color: #2980b9;outline: none;}
.term-fields {display: flex;align-items: center;gap: 8px;}
.term-fields input[type="number"] {width: 70px;}
.term-label {font-weight: 600;color: #555;min-width: 50px;text-align: left;}
.button-group {display: flex;justify-content: space-between;gap: 12px;margin-top: 20px;}
.button-group button {flex: 1;padding: 12px 0;font-weight: 700;border: none;border-radius: 8px;cursor: pointer;background: #2980b9;color: white;font-size: 1.1rem;transition: background-color .3s ease;}
.button-group button.clear {background: #e74c3c;}
.button-group button:hover {background-color: #1f5e88;}
.button-group button.clear:hover {background-color: #c0392b;}
.results {margin-top: 30px;padding-top: 15px;border-top: 2px solid #ddd;text-align: center;}
.results p {font-size: 1.1rem;margin: 8px 0;font-weight: 600;}
.hidden {display: none !important;}
#loanChart {margin: 20px auto;max-width: 300px;height: 300px;border-radius: 12px;box-shadow: 0 4px 14px rgba(0,0,0,.1);display: block;}
.amortization-table-container {margin-top: 30px;overflow-x: auto;max-height: 400px;border-radius: 12px;box-shadow: 0 6px 20px rgba(0,0,0,.1);background: white;padding: 15px;}
.amortization-table-container table {width: 100%;border-collapse: collapse;font-size: .9rem;}
.amortization-table-container th, .amortization-table-container td {padding: 10px 12px;border: 1px solid #ddd;text-align: right;font-weight: 500;}
.amortization-table-container th {background-color: #2980b9;color: white;text-align: center;}
.amortization-table-container td:first-child, .amortization-table-container th:first-child {text-align: center;}
.toggle-table {margin-top: 15px;padding: 10px 16px;background-color: #27ae60;border: none;border-radius: 8px;color: white;font-weight: 700;font-size: 1rem;cursor: pointer;transition: background-color .3s ease;}
.toggle-table:hover {background-color: #1e8449;}