:root{
  --bg:#0e1320; --panel:#161d2e; --line:#27334e; --text:#e8ecf6; --dim:#93a0b8;
  --acc:#4f8cff; --ok:#3ecf8e; --warn:#f0a35e; --bad:#f06a6a; --input:#0c1120;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
header{padding:22px 26px 6px;max-width:1200px;margin:0 auto}
header h1{margin:0;font-size:22px}
header p{margin:4px 0 0;color:var(--dim)}
main{max-width:1200px;margin:0 auto;padding:14px 26px 70px}
section{margin-top:18px}
h2{font-size:15px;margin:0 0 10px}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.panel.dragover{outline:2px dashed var(--acc);outline-offset:-4px}
.drop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hint{color:var(--dim);font-size:12px}
textarea.paste{width:100%;margin-top:10px;background:var(--input);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;resize:vertical;font:inherit}
.row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}
.meta{font-size:12px;color:var(--dim)}
select,input[type=number],input[type=search]{background:var(--input);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:inherit}
button{background:#233150;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 13px;cursor:pointer;font:inherit}
button:hover{border-color:var(--acc)}
button.primary{background:var(--acc);border-color:var(--acc);color:#fff}
button.primary:hover{filter:brightness(1.1)}
.preview,#resultTable{overflow:auto;border:1px solid var(--line);border-radius:8px}
.preview{max-height:260px}
#resultTable{max-height:440px}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{border-bottom:1px solid var(--line);padding:5px 9px;text-align:left;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
th{position:sticky;top:0;background:#1c2540;z-index:1}
.pair{display:flex;gap:8px;align-items:center;margin:6px 0}
.pair .ptype{width:140px}
.pair .arrow{color:var(--dim)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.card b{display:block;font-size:20px}
.card span{color:var(--dim);font-size:12px}
.card.ok b{color:var(--ok)}
.card.bad b{color:var(--bad)}
.card.warn b{color:var(--warn)}
.tabs{display:flex;gap:6px;margin:16px 0 8px}
.tab.active{background:var(--acc);border-color:var(--acc);color:#fff}
#filter{width:320px;margin-bottom:10px}
.delta-neg{color:var(--bad)}
.delta-pos{color:var(--warn)}
.note{color:var(--dim);font-size:12px;margin:8px}
#mapping{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
details#help{color:var(--dim);margin-top:26px}
details#help summary{cursor:pointer;color:var(--text)}
details#help li{margin:6px 0}
@media(max-width:820px){.panels{grid-template-columns:1fr}}