.ribo-calc-wrap {
  max-width: 720px !important;
  margin: 32px auto !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(80,100,120,0.07) !important;
  padding: 2.2em 2.5em 2em 2.5em !important;
}
label {
  display: block !important;
  margin-bottom: 1em !important;
}
input[type="number"], input[type="month"] {
  padding: 0.4em 0.7em !important;
  border: 1px solid #bbb !important;
  border-radius: 6px !important;
  font-size: 1em !important;
  width: 120px !important;
  margin-left: 0.3em !important;
}
input[type="number"].repay {
  width: 90px !important;
}
.row-flex {
  display: flex !important;
  align-items: center !important;
  gap: 0.7em !important;
  margin-bottom: 0.5em !important;
}
.row-flex input, .row-flex select {
  margin: 0 4px !important;
}
.row-flex button {
  margin-left: 8px !important;
  background: #fff3 !important;
  border: none !important;
  color: #b71c1c !important;
  font-size: 1.2em !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: background 0.1s !important;
}
.row-flex button:hover { background: #fdd !important; }
.toggle-section {
  margin-bottom: 1em !important;
}
.section-head {
  font-size: 1.07em !important;
  margin-bottom: .4em !important;
  font-weight: 600 !important;
  color: #1976d2 !important;
}
#addRepayRowBtn,
#addEventBtn {
  background: #e0f7fa !important;
  border: none !important;
  color: #00838f !important;
  border-radius: 6px !important;
  padding: 0.2em 1em !important;
  margin-bottom: 1em !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
  font-size: 0.95em !important;
}
#addRepayRowBtn:hover, #addEventBtn:hover { background: #b2ebf2 !important; }
.btns {
  display: flex !important;
  gap: 0.9em !important;
  justify-content: center !important;
  margin: 2em 0 1.5em 0 !important;
}
.btns button {
  background: #1976d2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 0.7em 2.2em !important;
  font-size: 1em !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px #0002 !important;
  transition: background 0.14s !important;
}
.btns button:hover { background: #1565c0 !important; }
#printBtn {
  background: #fff !important;
  color: #1976d2 !important;
  border: 1px solid #1976d2 !important;
}
#printBtn:hover { background: #e3f2fd !important; }
#result {
  margin-top: 1.2em !important;
  overflow-x: auto !important;
}
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.98em !important;
  background: #fafbfc !important;
  margin-bottom: 1em !important;
}
th, td {
  border: 1px solid #e0e0e0 !important;
  padding: 0.42em 0.5em !important;
  text-align: right !important;
}
th {
  background: #e3f2fd !important;
  color: #1976d2 !important;
  font-weight: 700 !important;
}
td:first-child, th:first-child {
  text-align: center !important;
}
.summary-box {
  background: #e3f2fd !important;
  border-radius: 8px !important;
  padding: 1em 1.2em !important;
  margin-bottom: 1.4em !important;
  color: #1976d2 !important;
  font-weight: 600 !important;
  font-size: 1.1em !important;
}
.ribo-toggle-btn {
  padding: 0.3em 1.2em !important;
  border-radius: 8px !important;
  background: #e3f2fd !important;
  color: #1976d2 !important;
  border: none !important;
  font-weight: 600 !important;
  margin-bottom: 1em !important;
  cursor: pointer !important;
  transition: background .14s, color .14s !important;
  font-size: 1em !important;
}
.ribo-toggle-btn.active {
  background: #1976d2 !important;
  color: #fff !important;
}
@media (max-width: 600px) {
  .ribo-calc-wrap { padding: 1.2em 0.6em 1.5em 0.6em !important; }
  h2 { font-size: 1.12em !important;}
  input[type="number"], input[type="month"] { width: 95px !important; font-size: 0.98em !important;}
  .btns button { padding: 0.6em 0.9em !important; font-size: 0.95em !important;}
  th, td { font-size: 0.93em !important; }
}