/* Tabs */
.tabs {
  display: grid;
  /* minmax(0, ...) so a long tab label cannot push the track wider than the card
     (a bare 1fr floors at min-content, which overflowed .main-col in ru/de) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 2px solid #e0e0e0;
  gap: 0;
}
.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: normal;   /* long labels wrap instead of overflowing the track */
  overflow-wrap: break-word;
  text-align: center;
}
.tab-btn:hover { color: #0078d4; }
.tab-btn.active { color: #0078d4; border-bottom-color: #0078d4; }

.section { display: none; }
.section.active { display: block; }

/* Form fields */

.form-row input[type=date],
.form-row input[type=number] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.form-row select {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #fff;
  cursor: pointer;
}

/* Result */

.result-main {
  font-size: 42px;
  font-weight: 700;
  color: #0078d4;
  font-family: 'Consolas', monospace;
  line-height: 1.2;
  word-break: break-all;
}
.result-unit {
  font-size: 16px;
  color: #5a9fd4;
  margin-left: 4px;
}
.result-sub {
  margin-top: 10px;
  font-size: 13px;
  color: #666;
  line-height: 1.8;
}
.result-sub span {
  display: inline-block;
  background: #fff;
  border: 1px solid #d0e1fb;
  border-radius: 4px;
  padding: 2px 10px;
  margin: 2px 4px;
  font-weight: 600;
  color: #0078d4;
}
@media (max-width: 480px) {
  /* four tabs in two columns on a 375px screen: trade side padding for label room */
  .tab-btn { padding: 10px 8px; font-size: 13px; }
}