h1{margin:18px 0 34px}
.step{padding:28px 0;border-top:1px solid var(--line)}
.step .kicker{display:flex;margin-bottom:18px}
.proj{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* drop zone */
.zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;
  border:1px dashed var(--line-2);border-radius:14px;background:var(--panel);cursor:pointer;transition:border-color .15s,background .15s}
.zone:hover,.zone.over{border-color:var(--acc);background:var(--acc-dim)}
.zone input{display:none}
.z-big{font:700 24px Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.z-small{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.busy{margin-top:12px;font:500 13px var(--mono);color:var(--acc)}

.src{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.src b{color:var(--ink);font-weight:600}
.src .k{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.src .n{font:500 12px var(--mono);color:var(--muted);margin-left:auto}
.src .x{background:none;border:0;color:var(--faint);font-size:18px;cursor:pointer;width:32px;height:32px}
.src .x:hover{color:var(--ink)}
.src-note{font:500 12.5px var(--mono);color:#e0a050;padding:6px 0 0}
#srcList{margin-top:14px}

/* column mapping */
.map-src{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.map-src:first-child{margin-top:0}
.map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 200px;gap:14px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.map .lbl{color:var(--ink);font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map .smp{font:12px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map.off .lbl,.map.off .smp{color:var(--faint)}
select{font:500 13px Inter,sans-serif;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;width:100%}
select:focus{outline:none;border-color:var(--acc)}
.map.off select{color:var(--faint)}
.check{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;color:var(--body);cursor:pointer}
.check input{accent-color:var(--blue-lt);width:16px;height:16px}

/* summary */
.sum{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}
.pill{font:500 12px var(--mono);letter-spacing:.04em;border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;color:var(--body);background:none;cursor:pointer}
.pill b{color:var(--ink)}
.pill.warn{border-color:rgba(224,118,109,.45);color:#e0766d}
.pill.on{border-color:var(--acc);color:var(--acc)}
.pill.ok{color:var(--acc);border-color:transparent;cursor:default}

/* table */
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:13px}
th{position:sticky;top:0;background:#0d1116;z-index:1;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:10px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--body);white-space:nowrap;vertical-align:top}
td[contenteditable]{outline:none;cursor:text}
td[contenteditable]:focus{background:var(--acc-dim);color:var(--ink)}
td.num{font-family:var(--mono);font-size:12.5px}
td.bad{box-shadow:inset 2px 0 0 #e0766d}
td.edited{color:var(--ink)}
td.w{color:#e0766d;font:500 11.5px var(--mono);white-space:normal;min-width:180px}
td.del button{background:none;border:0;color:var(--faint);cursor:pointer;font-size:16px}
td.del button:hover{color:var(--ink)}
tr:hover td{background:rgba(255,255,255,.015)}

/* export */
.out{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.go{font:600 15px Inter,sans-serif;color:#0a0c0f;background:var(--acc);border:0;border-radius:10px;padding:14px 26px;cursor:pointer}
.go:hover{filter:brightness(1.08)}
.out-note{font:500 12.5px var(--mono);color:var(--muted)}

@media (max-width:700px){
  .map{grid-template-columns:minmax(0,1fr) 150px}
  .map .smp{grid-column:1/-1;grid-row:2}
  .proj .b7{font-size:11px}
}
.map-note{font:500 12.5px var(--mono);color:#e0766d;margin-top:12px}
.map-note:empty{display:none}