/* TerraMine Tap Counter — mobile-first, no build step. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #101812;
  color: #f2f5f1;
  line-height: 1.45;
}
.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
h1 {
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: #8fd6a0;
}
.sub { margin: 0 0 20px; color: #b9c4b8; }
.loading { color: #b9c4b8; }

.day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.day-label { font-size: 1.05rem; font-weight: 700; }
.pill {
  background: #2e9e5b;
  color: #06210f;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 10px;
  border-radius: 999px;
}
.count {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.05;
  margin: 6px 0 0;
}
.of-target { font-size: 1.8rem; color: #b9c4b8; font-weight: 600; }
.of-line { color: #d7ded6; margin: 2px 0 12px; }

.bar {
  height: 18px;
  background: #243428;
  border-radius: 999px;
  overflow: hidden;
}
.fill {
  height: 100%;
  background: #2e9e5b;
  border-radius: 999px;
  transition: width 0.2s ease;
}
.breakdown {
  margin-top: 8px;
  color: #ffd479;
  font-weight: 600;
}
.done {
  margin-top: 14px;
  background: #1d3a26;
  border: 1px solid #2e9e5b;
  border-radius: 10px;
  padding: 12px;
  font-weight: 600;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.btn {
  font: inherit;
  font-weight: 700;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid #3c5342;
  background: #1d2b20;
  color: #f2f5f1;
  cursor: pointer;
  min-height: 52px;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: #2e9e5b; border-color: #2e9e5b; color: #06210f; }
.btn.wide { grid-column: 1 / -1; }
.btn.small { min-height: 44px; padding: 10px 14px; }
.btn.ghost { background: transparent; }
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.total-line {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  text-align: center;
  font: inherit;
  color: #cfe3d2;
  background: transparent;
  border: 1px dashed #3c5342;
  border-radius: 10px;
  cursor: pointer;
}
.total-edit {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.total-edit label { font-weight: 700; }
.total-edit input {
  font: inherit;
  width: 110px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #3c5342;
  background: #0c130d;
  color: #f2f5f1;
}

.explain {
  margin-top: 18px;
  color: #b9c4b8;
  font-size: 0.95rem;
}
.fine {
  margin-top: 28px;
  color: #8a9789;
  font-size: 0.85rem;
}
.error { color: #ffb4a8; }