:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17342d;
  background: #f2f6f4;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 13px; line-height: 1.45; }
.app-shell { max-width: 760px; margin: 0 auto; padding: 20px 18px 28px; }
.topbar { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #dfe8e3; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: white; background: #08795c; font-size: 22px; font-weight: 700; }
.eyebrow { margin: 0 0 2px; color: #58766c; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: 18px; line-height: 1.2; }
h2 { margin: 0; font-size: 14px; }
.intro { margin: 14px 0; color: #4d675e; }
.intro p { margin: 0; }
.source-card { margin: 12px 0; padding: 14px; border: 1px solid #dce7e1; border-radius: 12px; background: #fff; }
.section-heading, .section-heading > div { display: flex; align-items: center; gap: 9px; }
.section-heading { justify-content: space-between; margin-bottom: 7px; }
.step-number { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e4f2eb; color: #08795c; font-weight: 700; }
.muted { margin: 4px 0 9px; color: #6a7f76; font-size: 11px; overflow-wrap: anywhere; }
.mapping { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field { display: grid; gap: 4px; color: #536c62; font-size: 11px; font-weight: 600; }
.field select { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid #cbd9d1; border-radius: 7px; color: #1c342d; background: white; font: inherit; }
.mode-row { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; color: #435d53; font-size: 11px; }
.mode-row label { display: flex; align-items: center; gap: 5px; }
.button { width: 100%; min-height: 38px; border: 0; border-radius: 8px; padding: 9px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button-primary { margin-top: 5px; color: white; background: #08795c; }
.button-primary:hover:not(:disabled) { background: #06664d; }
.button-secondary { width: auto; min-height: 31px; padding: 6px 9px; color: #08795c; background: #e7f3ed; font-size: 11px; white-space: nowrap; }
.limit-control { display: grid; grid-template-columns: 1fr 80px; align-items: center; gap: 10px; margin: 13px 1px 4px; color: #536c62; font-size: 11px; font-weight: 600; }
.limit-control input { width: 80px; padding: 7px; border: 1px solid #cbd9d1; border-radius: 7px; color: #1c342d; background: white; font: inherit; }
#write-results { margin-top: 8px; }
.status { margin-top: 12px; padding: 10px 11px; border-radius: 8px; color: #536d62; background: #e9f0ec; }
.status.error { color: #8a2d23; background: #fff0ed; }
.status.success { color: #075d45; background: #e2f4eb; }
.summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.metric { padding: 10px; border: 1px solid #dce7e1; border-radius: 9px; background: white; }
.metric strong { display: block; font-size: 18px; }
.metric span { color: #60786e; font-size: 10px; }
.results { margin-top: 16px; }
.table-scroll { max-height: 310px; overflow: auto; border: 1px solid #dce7e1; border-radius: 8px; background: white; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th, td { padding: 7px 8px; border-bottom: 1px solid #edf1ee; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; color: #48645a; background: #f5f8f6; }
td:nth-child(2) { white-space: nowrap; }
footer { margin-top: 18px; color: #71857c; font-size: 10px; }
@media (max-width: 430px) { .mapping { grid-template-columns: 1fr; } .section-heading { align-items: flex-start; } }

.invert-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #4b6359; margin-top: 8px; }
.invert-row input { margin-top: 2px; }

.decision { display: inline-flex; gap: 4px; }
.decision button { min-width: 26px; min-height: 26px; border: 0; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer; }
.decision .accept { color: #08795c; background: #e4f2eb; }
.decision .reject { color: #a23b2f; background: #f8e5e1; }
.decision button:focus-visible { outline: 2px solid #08795c; outline-offset: 1px; }

#mark-sources, #clear-marks { display: block; width: 100%; margin-top: 8px; }