:root {
  --accent: #0066cc;
  --accent2: #28a745;
  --bg: #f7fbff;
  --card-bg: #ffffff;
}

body {
  background-color: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: #111;
}

.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.navbar-nav .nav-link:hover {
  color: #ffd700 !important;
}

.info-box {
  background: linear-gradient(90deg,#0066cc,#28a745);
  color: white;
  border-radius: 10px;
}

.sidebar {
  background: linear-gradient(180deg,#ffffff,#e6f2ff);
}

.ad-box {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
}

.sidebar {
  background: linear-gradient(180deg,#ffffff,#e6f2ff);
  position: sticky;
  top: 20px;
}


footer h6 {
  font-weight: bold;
}

footer p {
  margin: 0;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

@media (max-width:992px){
  .sidebar { margin-top:20px; }
  #amortTable thead { display: none; }
  #amortTable tr { display: block; margin-bottom: 0.625rem; }
  #amortTable td { display: block; text-align: right; font-size: 0.8rem; border-bottom: 1px solid #ddd; position: relative; padding-left: 50%; }
  #amortTable td::before { content: attr(data-label); position: absolute; left: 0; width: 50%; padding-left: 1rem; font-weight: bold; text-align: left; }
}