/* Base styles */
:root {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Ubuntu, 'Helvetica Neue', Arial;
  font-size: 20px;
}

body {
  max-width: 900px;
  margin: 32px auto;
  padding: 28px;
  background: #fbfbff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(20,20,50,0.08);
}

h1 {
  font-size: 2rem;
  margin-bottom: 12px;
}

p.lead {
  color: #334;
  opacity: 0.9;
  font-size: 1.1rem;
}

.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.tabs button {
  flex: 1;
  padding: 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  transition: background 0.2s;
}

.tabs button.active {
  background: #2b6cb0;
  color: #fff;
}

.section {
  display: none;
}

.section.active {
  display: block;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

label {
  font-size: 1rem;
  color: #123;
  padding-bottom: 8px;
  display: block;
}

input,
select {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1.5px solid #d6d6e0;
  font-size: 1.1rem;
  margin-top: 2px;
}

.full {
  grid-column: 1/-1;
}

button.calc,
button[type="button"] {
  padding: 14px 20px;
  border-radius: 12px;
  border: 0;
  background: #2b6cb0;
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.1rem;
}

.result {
  margin-top: 22px;
  padding: 18px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #e6eefb;
  font-size: 1.1rem;
}

.muted {
  color: #556;
  opacity: 0.85;
  font-size: 1rem;
}

.small {
  font-size: 1rem;
  color: #444;
}

.footer {
  margin-top: 22px;
  color: #334;
  font-size: 1rem;
}

.note {
  background: #fffbe6;
  border-left: 4px solid #ffd24d;
  padding: 16px;
  border-radius: 10px;
  margin-top: 18px;
  font-size: 1rem;
}

/* Responsive styles */
@media (max-width: 700px) {
  body {
    padding: 10px;
    max-width: 100vw;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tabs button {
    padding: 12px;
    font-size: 1rem;
  }
  input, select, button.calc, button[type="button"] {
    font-size: 1rem;
    padding: 12px;
  }
  .result, .note {
    font-size: 0.98rem;
    padding: 12px;
  }
  h1 {
    font-size: 1.3rem;
  }
}