:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #22251f;
  --muted: #6b6e64;
  --border: #ddd9cf;
  --accent: #3d4a32;
  --accent-text: #ffffff;
  --accent-hover: #2f3a26;
  --create-bg: #e3efdc; --create-fg: #2d5a1b;
  --update-bg: #e2ebf5; --update-fg: #24497a;
  --remove-bg: #f6e0dd; --remove-fg: #8a2a1e;
  --warn-bg: #f6edd6;   --warn-fg: #6e5310;
  --same-bg: #ecebe6;   --same-fg: #5c5e57;
  --error-bg: #fbe9e7;  --error-fg: #8a2a1e;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171915;
    --surface: #212420;
    --text: #e9e8e2;
    --muted: #a3a59b;
    --border: #3a3d36;
    --accent: #a9bf8e;
    --accent-text: #171915;
    --accent-hover: #bfd2a6;
    --create-bg: #23331c; --create-fg: #b7dca4;
    --update-bg: #1e2b3b; --update-fg: #a9c6ea;
    --remove-bg: #3a201c; --remove-fg: #f0b3a9;
    --warn-bg: #352c15;   --warn-fg: #e8cf8e;
    --same-bg: #2b2d28;   --same-fg: #b0b2a8;
    --error-bg: #3a201c;  --error-fg: #f0b3a9;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.top, main { max-width: 860px; margin: 0 auto; padding: 0 16px; }

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
}

h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }

.account { color: var(--muted); font-size: 0.95rem; }
.lead { color: var(--muted); margin: 12px 0 24px; max-width: 60ch; }
.muted { color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 20px;
}
.card p:first-child { margin-top: 0; }

.options { display: grid; gap: 10px; }
.options legend { font-weight: 600; padding: 0 4px; }
.options label, .toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.options input, .toggle input { margin-top: 4px; accent-color: var(--accent); }

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

button {
  font: inherit;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid transparent;
}
button:disabled { opacity: 0.5; cursor: default; }
.primary { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.primary:not(:disabled):hover { background: var(--accent-hover); }
.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.secondary:not(:disabled):hover { border-color: var(--muted); }
.link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; }

.progress { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.progress progress { flex: 0 0 200px; max-width: 40%; accent-color: var(--accent); }
.progress span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.result { font-weight: 600; margin: 0 0 16px; }

.summary { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 4px 12px; border-radius: 999px; font-size: 0.95rem; }

.tag { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 0.85rem; }
.chip-create, .tag-create { background: var(--create-bg); color: var(--create-fg); }
.chip-update, .tag-update, .chip-adopt, .tag-adopt { background: var(--update-bg); color: var(--update-fg); }
.chip-remove, .tag-remove { background: var(--remove-bg); color: var(--remove-fg); }
.chip-skip, .tag-skip, .chip-stale, .tag-stale { background: var(--warn-bg); color: var(--warn-fg); }
.chip-same, .tag-same, .chip-nophone, .tag-nophone { background: var(--same-bg); color: var(--same-fg); }

.toggle { margin-bottom: 12px; color: var(--muted); }

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 40px;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
td:nth-child(2) { color: var(--muted); word-break: break-all; }

.error {
  background: var(--error-bg);
  color: var(--error-fg);
  border-radius: 10px;
  padding: 14px 18px;
  white-space: pre-line;
}

.help summary { font-weight: 600; cursor: pointer; }
.help[open] summary { margin-bottom: 12px; }
.help ol { margin: 0 0 12px; padding-left: 1.3em; }
.help li { margin-bottom: 6px; }
.help .steps { margin-bottom: 0; }
main > .help:last-of-type { margin-bottom: 40px; }

.hint { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 2px; }

.legend { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; align-items: baseline; }
.legend dt, .legend dd { margin: 0; }
@media (max-width: 560px) {
  .legend { grid-template-columns: 1fr; gap: 4px; }
  .legend dd { margin-bottom: 8px; }
}

code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; }

@media (max-width: 560px) {
  th:nth-child(2), td:nth-child(2) { display: none; }
}