:root {
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#172c40;
  background:#eef2f6;
  font-size:16px;
  font-synthesis:none;
  --ink:#172c40;
  --muted:#526777;
  --line:#d9e2e9;
  --accent:#14735b;
  --mint:#99f3ce}
* {
  box-sizing:border-box}
body {
  margin:0}
button,input,select {
  font:inherit}
button,select {
  cursor:pointer}
button {
  border:0}
button:disabled {
  cursor:not-allowed;
  opacity:.45}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,.file-picker:focus-within {
  outline:3px solid #2381c6;
  outline-offset:3px}
button:hover:not(:disabled) {
  filter:brightness(.94)}
[hidden] {
  display:none!important}
.topbar {
  height:76px;
  background:#12283b;
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(32px,calc((100vw - 1440px)/2));
  gap:20px}
.brand {
  font-size:20px;
  letter-spacing:-.5px;
  display:flex;
  align-items:center;
  gap:12px}
.brand strong {
  font-weight:400;
  color:var(--mint)}
.mark {
  font-size:32px;
  color:var(--mint);
  border:1px solid #466072;
  width:42px;
  height:42px;
  line-height:34px;
  text-align:center;
  border-radius:10px}
.local-label {
  font-size:14px;
  color:#c3d8e5}
main {
  max-width:1440px;
  margin:auto;
  padding:36px 32px 24px}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:28px}
.eyebrow {
  color:var(--accent);
  font-size:12px;
  letter-spacing:2px;
  font-weight:750}
h1 {
  font-size:36px;
  letter-spacing:-1.4px;
  font-weight:650;
  margin:9px 0 8px;
  line-height:1.18}
.intro p {
  margin:0;
  color:var(--muted);
  line-height:1.5}
button {
  transition:background .15s}
.secondary {
  background:white;
  color:var(--ink);
  border:1px solid #bbcbd7;
  border-radius:7px;
  padding:11px 15px;
  font-size:14px;
  font-weight:600}
.primary {
  background:var(--ink);
  color:white;
  border-radius:7px;
  padding:14px 20px;
  font-weight:600}
.primary:disabled {
  background:#81919e;
  color:white}
.text-button {
  color:#496278;
  background:none;
  font-size:14px;
  padding:10px}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 3px 10px #152c4203;
  padding:24px}
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px}
h2 {
  font-size:18px;
  letter-spacing:-.35px;
  margin:0;
  display:flex;
  align-items:center;
  gap:11px}
.step {
  font:12px ui-monospace,monospace;
  background:#eaf0f5;
  color:#587081;
  border-radius:5px;
  padding:6px}
.file-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  min-width:0}
.file-card {
  min-width:0}
.file-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:10px;
  font-size:14px}
.tag {
  font:600 12px ui-monospace,monospace;
  letter-spacing:1.5px;
  color:#405b72}
.muted {
  color:var(--muted);
  font-size:14px}
.file-picker {
  background:#f8fafc;
  border:1px dashed #a6bdcd;
  border-radius:8px;
  min-height:108px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:14px;
  gap:5px;
  text-align:center;
  overflow-wrap:anywhere}
.file-picker strong {
  font-size:15px;
  font-weight:600}
.file-icon {
  color:#56829f;
  font-size:23px;
  line-height:20px}
.file-card:focus-within .file-picker {
  border-color:#14735b}
.file-card input[type=file] {
  width:100%;
  font-size:14px;
  margin-top:8px;
  color:#536c7d}
.file-card input::file-selector-button {
  font:inherit;
  color:#24455e;
  background:#edf3f7;
  border:0;
  border-radius:4px;
  padding:6px 10px;
  margin-right:10px}
.file-meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:13px;
  font-size:14px}
.file-meta select {
  padding:6px 9px;
  max-width:170px}
.file-meta span {
  color:var(--muted);
  margin-left:auto;
  font-size:13px}
select {
  border:1px solid #bbcbd7;
  background:white;
  border-radius:5px;
  color:#203a50;
  min-height:36px;
  padding:7px;
  max-width:100%}
.preview-wrap {
  overflow:auto;
  max-height:150px;
  margin-top:12px;
  border-radius:6px}
.preview-wrap:empty {
  display:none}
table {
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  text-align:left}
th,td {
  padding:8px 10px;
  border:1px solid #dfe7ed;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  min-width:85px;
  max-width:300px}
th {
  background:#f1f5f8;
  color:#425d73;
  font-weight:600;
  position:sticky;
  top:0}
.micro {
  font-size:12px;
  line-height:1.6;
  color:#576b7c;
  margin:14px 0 0}
.work-grid {
  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0,1.5fr);
  gap:24px;
  margin-top:24px;
  align-items:start}
.section-note {
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin:-4px 0 20px}
.mapping-panel>.primary {
  width:100%;
  margin-top:22px}
.empty {
  padding:58px 10px;
  text-align:center;
  color:var(--muted)}
.empty p {
  font-size:14px;
  line-height:1.7;
  margin:12px 0}
.empty h3 {
  font-size:20px;
  color:#29465d;
  letter-spacing:-.4px;
  font-weight:600}
.empty.small {
  padding:28px 10px;
  background:#f7f9fb;
  border-radius:8px}
.empty-symbol {
  font-size:34px;
  color:#7893a5}
.comparison-glyph {
  font:28px ui-monospace,monospace;
  letter-spacing:-2px;
  color:#8196a7}
.comparison-glyph span {
  color:#13775b;
  padding:0 12px}
.empty-legend {
  display:flex;
  gap:20px;
  justify-content:center;
  margin-top:28px;
  font:12px ui-monospace,monospace;
  color:#536c7d}
.strict-badge {
  font:10px ui-monospace,monospace;
  letter-spacing:1px;
  background:#eaf6f1;
  color:#28765c;
  padding:7px 9px;
  border-radius:4px}
.mapping-head,.mapping-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 40px 51px;
  align-items:center;
  gap:8px}
.mapping-head {
  font-size:11px;
  color:#567083;
  line-height:1.4;
  padding-bottom:8px}
.mapping-row {
  padding:12px 0;
  border-top:1px solid #e3eaf0;
  font-size:14px}
.column-name {
  font-family:ui-monospace,monospace;
  overflow-wrap:anywhere;
  font-size:13px}
.mapping-row select {
  font-size:13px;
  width:100%;
  min-width:0}
.check-label {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px}
.mapping-row input {
  width:18px;
  height:18px;
  accent-color:#14735b;
  cursor:pointer}
.scope {
  padding:14px;
  background:#f5f8fa;
  border-left:3px solid #b6c9d7;
  margin-top:15px;
  font-size:13px;
  line-height:1.6;
  overflow-wrap:anywhere}
.scope strong {
  display:block}
.scope p {
  margin:5px 0}
.scope .unverified {
  color:#80590f}
.result-summary {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:-4px 0 16px}
.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px}
.stat {
  border:1px solid #dce5ec;
  background:#fafcfd;
  text-align:left;
  padding:12px;
  border-radius:7px;
  color:var(--ink)}
.stat b {
  font:600 26px ui-monospace,monospace;
  display:block;
  line-height:1.2;
  margin-bottom:5px}
.stat span {
  font-size:12px}
.stat.Added {
  border-top:3px solid #39a782}
.stat.Removed {
  border-top:3px solid #db8594}
.stat.Changed {
  border-top:3px solid #4b8cc6}
.stat.Unchanged {
  border-top:3px solid #8c9aa7}
.stat.Ambiguous {
  border-top:3px solid #c99634}
.stat.Invalid {
  border-top:3px solid #b48ac1}
.review-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0 12px;
  font-size:14px;
  flex-wrap:wrap}
.review-toolbar .muted {
  margin-left:auto;
  font-size:12px}
.record {
  border:1px solid var(--line);
  border-radius:7px;
  margin:10px 0;
  overflow:hidden}
.record summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px;
  font-size:13px;
  background:#f9fbfc}
.record summary::after {
  content:'+';
  margin-left:auto;
  font-size:19px;
  color:#6d8495}
.record[open]>summary::after {
  content:'−'}
.record-key {
  font:13px ui-monospace,monospace;
  overflow-wrap:anywhere;
  min-width:0}
.pill {
  font-size:11px;
  border-radius:4px;
  padding:4px 6px;
  background:#e9eff4;
  color:#3d5e75}
.pill.Changed {
  background:#e5f1fc;
  color:#276590}
.pill.Added {
  background:#e0f5eb;
  color:#14714b}
.pill.Removed {
  background:#fbe9ed;
  color:#9e3e51}
.pill.Ambiguous {
  background:#fff0d2;
  color:#8a5e12}
.pill.Invalid {
  background:#f4e6f7;
  color:#81508b}
.record-detail {
  padding:12px}
.record-detail p {
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 12px}
.field-diff {
  margin-bottom:14px;
  min-width:0}
.field-diff strong {
  display:block;
  font-size:12px;
  font-family:ui-monospace,monospace;
  margin-bottom:7px;
  overflow-wrap:anywhere}
.values {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px}
.value-box {
  min-width:0;
  background:#f3f6f9;
  border-radius:5px;
  padding:10px}
.value-box.old {
  background:#fff1f3}
.value-box.new {
  background:#ecfaf4}
.value-box span {
  font:10px ui-monospace,monospace;
  color:#5b7182;
  display:block;
  letter-spacing:1px;
  margin-bottom:6px}
.value-box pre {
  font:13px/1.5 ui-monospace,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0;
  max-height:220px;
  overflow:auto}
.raw-row {
  margin:8px 0}
.raw-row div {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:10px;
  font-size:13px;
  padding:7px 0;
  border-bottom:1px solid #e6edf2}
.raw-row dt,.raw-row dd {
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  margin:0}
.raw-row dt {
  color:var(--muted)}
.pagination {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:15px 0}
.pagination .secondary {
  padding:8px 12px;
  font-size:12px}
.exports {
  border-top:1px solid var(--line);
  margin-top:22px;
  padding-top:18px}
.exports h3 {
  font-size:15px;
  margin:0 0 9px}
.exports p {
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin:8px 0 14px}
.export-buttons {
  display:flex;
  gap:7px;
  flex-wrap:wrap}
.export-buttons button {
  font:12px ui-monospace,monospace;
  padding:10px}
.privacy {
  margin-top:26px;
  border-top:1px solid #cbd7e1;
  padding:22px 0}
.privacy summary {
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:#405c73}
.privacy-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
  padding-top:15px}
.privacy h3 {
  font-size:14px}
.privacy p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted)}
footer {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #d4dfe7;
  padding-top:22px;
  gap:20px;
  color:#6b8192;
  font-size:12px}
footer span:first-child {
  letter-spacing:1.5px;
  font:11px ui-monospace,monospace}
#notice,.busy {
  padding:14px 18px;
  background:#e2f5ed;
  border:1px solid #a8d6c5;
  border-radius:8px;
  margin-bottom:20px;
  font-size:14px;
  line-height:1.6}
#notice.error {
  background:#fff0f1;
  border-color:#edb9c0;
  color:#8d3344}
.busy {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  background:#e9f2fb;
  border-color:#accce7}
.nothing {
  padding:24px 0;
  text-align:center;
  color:var(--muted);
  font-size:14px}
@media(min-width:1450px) {
  .topbar {
  padding-left:calc((100vw - 1376px)/2);
  padding-right:calc((100vw - 1376px)/2)}
}
@media(max-width:1000px) {
  .work-grid {
  grid-template-columns:1fr}
.mapping-head,.mapping-row {
  grid-template-columns:1fr 1.2fr 50px 60px}
.stats {
  grid-template-columns:repeat(6,1fr)}
.empty {
  padding:34px 10px}
.intro h1 {
  font-size:30px}
}
@media(max-width:620px) {
  .topbar {
  padding:16px;
  height:auto;
  align-items:flex-start}
.brand {
  font-size:16px;
  gap:8px}
.mark {
  width:33px;
  height:33px;
  line-height:27px;
  font-size:27px}
.local-label {
  font-size:10px;
  max-width:87px;
  line-height:1.6}
main {
  padding:24px 14px}
.intro {
  display:block;
  margin-bottom:22px}
h1,.intro h1 {
  font-size:29px;
  letter-spacing:-1px}
.intro p {
  font-size:14px;
  line-height:1.6}
.intro button {
  margin-top:18px}
.panel {
  padding:17px;
  border-radius:9px}
.file-grid {
  grid-template-columns:1fr;
  gap:24px}
.file-meta span {
  margin-left:0;
  font-size:12px}
.section-title {
  gap:8px}
h2 {
  font-size:16px;
  gap:8px}
.step {
  font-size:10px}
.text-button {
  font-size:12px;
  padding:7px 0}
.work-grid {
  gap:18px;
  margin-top:18px}
.mapping-head,.mapping-row {
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 32px 43px;
  gap:5px}
.mapping-row select {
  font-size:12px;
  padding:5px}
.mapping-head {
  font-size:10px}
.strict-badge {
  font-size:8px;
  letter-spacing:.3px;
  padding:5px}
.stats {
  grid-template-columns:repeat(3,1fr)}
.stat b {
  font-size:25px}
.privacy-grid {
  grid-template-columns:1fr;
  gap:10px}
.values {
  grid-template-columns:1fr}
.export-buttons {
  display:grid;
  grid-template-columns:1fr}
.empty-legend {
  gap:15px;
  font-size:11px}
.comparison-glyph {
  font-size:24px}
.review-toolbar .muted {
  width:100%;
  margin-left:0}
footer {
  flex-direction:column;
  font-size:11px;
  gap:10px}
.busy {
  align-items:flex-start}
.record summary {
  gap:7px}
}
@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important}
}


.file-card input[type=file] {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  padding:0;
  margin:0;
  clip-path:inset(50%)}
.record-detail details[open]>summary::after {
  content:"−"}
.pagination {
  align-items:center}
.pagination .muted {
  font-size:12px}