.settings-shell {
  width: min(700px, calc(100% - 44px));
  margin: 0 auto;
  padding: 26px 0 28px;
}
.settings-header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.settings-logo { width: clamp(180px, 24vw, 260px); }
.settings-header h1 { flex: 1; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; }
.back-link {
  color: var(--muted);
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.back-link:hover,
.back-link:focus-visible { color: var(--text); outline: none; }

.settings-form { display: block; }

/* Each group is a labelled row band, separated by a rule - no cards. */
.setting-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.setting-card h2 {
  margin: 0;
  padding-top: 8px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .02em;
}
.field-stack {
  display: grid;
  gap: 10px;
  min-width: min(380px, 56vw);
}
.setting-card label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--faint);
  font-size: .88rem;
}
.input-with-unit { display: inline-flex; align-items: center; gap: 8px; }
.input-with-unit small { min-width: 50px; color: var(--faint); }

/* Inputs are underlines on the page ground, not filled boxes. */
.setting-card input {
  width: 190px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  background: transparent;
  font: 400 1rem "Bahnschrift", "Segoe UI", sans-serif;
}
.setting-card input:hover { border-bottom-color: var(--faint); }
.setting-card input:focus {
  border-bottom-color: var(--text);
  outline: none;
}

.setting-card input:disabled { opacity: .4; cursor: not-allowed; }
.setting-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 8px 170px 8px 0;
  accent-color: var(--green);
  cursor: pointer;
}

/* Recent counts: a plain ruled table, same page ground as the form. */
.recent-counts { padding: 26px 0 8px; }
.recent-counts h2 {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .02em;
}
.recent-note { margin: 4px 0 14px; color: var(--faint); font-size: .82rem; }
.table-wrap { overflow-x: auto; }
#recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
#recent-table th,
#recent-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  white-space: nowrap;
}
#recent-table th { color: var(--faint); font-weight: 400; }
#recent-table td { color: var(--text); }
#recent-table td.num,
#recent-table th:not(:first-child) { text-align: right; }
#recent-table td.empty { color: var(--faint); }
#recent-table tbody tr:first-child td:not(.empty) { font-weight: 600; }

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-top: 18px;
}
#form-message { margin: 0; color: var(--faint); font-size: .85rem; }
#form-message.success { color: var(--green); }
#form-message.error { color: var(--red); }
button {
  padding: 10px 22px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font: 400 .9rem "Bahnschrift", "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background .2s, color .2s;
}
button:hover { color: var(--bg); background: var(--text); border-color: var(--text); }
button:focus-visible { outline: 2px solid var(--muted); outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .5; }

@media (max-width: 560px) {
  .settings-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .setting-card { align-items: flex-start; flex-direction: column; gap: 12px; }
  .setting-card h2 { padding-top: 0; }
  .setting-card label { width: 100%; }
  .field-stack { width: 100%; min-width: 0; }
  .setting-card input { width: min(190px, 50vw); }
  .setting-card input[type="checkbox"] { width: 20px; margin-right: 0; }
  .form-actions { align-items: stretch; flex-direction: column; gap: 14px; }
}