.calc-scope * { box-sizing: border-box; }
  .calc-scope {
    width:100%; background:#fff; padding:10px;
    border:1px solid rgba(18,92,136,0.55); border-radius:10px;
    font-size:14px; color:#333;
  }
  .calc-scope label.field-label { display:block; margin:0 0 10px 0; font-size:14px; }
  .calc-scope .field { width:100%; margin-bottom:14px; }
  .calc-scope input[type="number"], .calc-scope input[type="date"] {
    width:100%; background:#f7f7f7; border:1px solid #ddd;
    padding:10px; border-radius:6px; font-size:14px;
  }
  .calc-scope .input-with-addon { display:flex; align-items:center; gap:8px; width:100%; }
  .calc-scope .addon {
    padding:8px 10px; background:#f0f0f0; border:1px solid #ddd;
    border-radius:6px; white-space:nowrap;
  }
  .calc-scope .btn-calc {
    background:#1b6997; color:#fff; border:0; padding:12px;
    width:100%; border-radius:6px; font-size:16px; cursor:pointer;
  }
  .calc-scope .btn-calc:hover { background:#125c88; }

  /* === RESULTS STYLING === */
  .calc-scope .results { margin-top:30px; border:0px; padding:0; }
  .calc-scope .results.hidden { display:none; }
  .calc-scope .results-heading {
    background:#d95a00; color:#fff; text-align:center;
    padding:10px 12px;font-size: 16px !important; border-radius:6px; width:100%; margin:0; font-weight: 600;
  }

.calc-scope .results-heading {
    background: #d95a00;
    color: #fff;
    text-align: center;
    padding: 10px 12px;
    border-radius: 6px;
    width: 100%;
    font-size: 18px !important;
    margin: 0;
    font-weight: 600 !important;
}

  .calc-scope .results-body { margin-top:10px; border:0px; }
  .calc-scope .stripe {
    display:flex; gap:20px; padding:10px;
    align-items:flex-start; font-size:14px;
  }
  .calc-scope .stripe:nth-child(odd) { background:#eaf3f7; }
  .calc-scope .stripe:nth-child(even) { background:#fff; }
  .calc-scope .stripe .label {
    flex:1; text-align:right; padding-right:10px;
    font-size:14px; align-self:flex-start;
  }
  .calc-scope .stripe .value {
    flex:1; text-align:left; font-size:14px;
    font-weight:700; align-self:flex-start;
  }

 /* === TAB DESIGN (Refined like screenshot, left-aligned + 40px margin) === */
.calc-scope .amort-tabs {
  margin-top:50px;
margin-bottom: 20px !important;
  width:100%;
  text-align:left;
}

.calc-scope .tab-buttons {
  display:inline-flex;
  justify-content:flex-start;
  border-radius:6px;
  overflow:hidden;
  margin-bottom:20px;
gap: 20px;
}

.calc-scope .tab-btn {
  padding:8px 18px;
  cursor:pointer;
  font-weight:600;
border-radius: 6px;
  color:#1b6997;
  background:#fff;
border: 1px solid #1b6997 !important;
  border:none;
  outline:none;
  font-size:14px;
  transition:background 0.2s ease,color 0.2s ease;
}

.calc-scope .tab-btn + .tab-btn {
  border-left:1px solid #ccc;
}

.calc-scope .tab-btn:hover {
  background:#eaf3f7;
}

.calc-scope .tab-btn.tab-active {
  background:#1b6997;
  color:#fff;
border-radius: 6px;
}
  /* === TABLES === */
  .calc-scope .tab-pane { width:100%; }
  .calc-scope table {
    width:100%; border-collapse:collapse;
    margin-top:0; font-size:13px;
  }
  .calc-scope th, .calc-scope td {
    padding:8px 6px; text-align:left;
  }
  .calc-scope tbody tr:nth-child(odd) { background:#eaf3f7; }
  .calc-scope tbody tr:nth-child(even) { background:#fff; }
  .calc-scope .small-muted {
    font-size:12px; color:#666; margin-top:6px; text-align:right;
  }
  .calc-scope .hidden { display:none; }







#yearly-pane,
#monthly-pane {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

#yearly-table,
#monthly-table {
  width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

#yearly-table th,
#yearly-table td,
#monthly-table th,
#monthly-table td {
  white-space: nowrap !important;
}