/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #f8fafc; /* slate-50 */
  color: #0f172a;      /* slate-900 */
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.topbar h1 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
}

.controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

fieldset {
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 8px;
  padding: 10px 12px 12px;
  background: #ffffff;
}

legend {
  font-size: 12px;
  color: #475569; /* slate-600 */
  padding: 0 6px;
}

label {
  margin-right: 12px;
}

input[type="number"] {
  width: 100px;
  margin-left: 6px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
}

.hidden { display: none; }

main {
  margin-top: 24px;
}

.display {
  text-align: center;
  margin: 40px 0 20px;
}

.value {
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 10vw, 96px);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0f172a;
}

.reading {
  margin-top: 12px;
  font-size: clamp(18px, 3vw, 28px);
  color: #1d4ed8; /* blue-700 */
}

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}

button {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

button.primary {
  background: #2563eb; /* blue-600 */
  border-color: #2563eb;
  color: #ffffff;
}

button:hover { filter: brightness(1.05); }
button:active { transform: translateY(1px); }

.hints { text-align: center; color: #475569; font-size: 13px; }
.note { margin-top: 4px; font-size: 12px; color: #64748b; }

@media (max-width: 720px) {
  .controls-row { grid-template-columns: 1fr; }
  input[type="number"] { width: 120px; }
}