:root {
  --bg: #05070c;
  --panel: #0b1020;
  --cyan: #00f6ff;
  --violet: #7f5cff;
  --text: #dce6ff;
  --muted: #7c89b6;
}

* {
  box-sizing: border-box;
  font-family: 'Manrope', system-ui, sans-serif;
}

body {
  margin: 0;
  background: radial-gradient(circle at 50% 20%, #0a1030, var(--bg));
  color: var(--text);
  overflow-x: hidden;
}

#app {
  padding: 32px;
}

header {
  text-align: center;
  margin-bottom: 40px;
}

header h1 {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.25em;
  font-size: 28px;
  color: var(--cyan);
}

header span {
  color: var(--muted);
  font-size: 12px;
}

.upload {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.panel {
  background: linear-gradient(180deg, #0d1430, var(--panel));
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 0 40px rgba(0, 246, 255, 0.05);
  position: relative;
}

.panel h2 {
  margin-top: 0;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--violet);
}

.panel input[type="file"] {
  width: 100%;
  margin-bottom: 12px;
}

#colsA, #colsB {
  max-height: 240px;
  overflow-y: auto;
}

#colsA label,
#colsB label {
  display: block;
  font-size: 13px;
  opacity: 0.9;
}

.keys,
.preview,
.actions {
  margin-top: 32px;
}

.keys select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #060b18;
  border: 1px solid #1b2550;
  color: var(--text);
}

.preview table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12px;
}

.preview th {
  text-align: left;
  padding: 8px;
  background: #0a1025;
  color: var(--cyan);
}

.preview td {
  padding: 8px;
  border-bottom: 1px solid #151c3f;
}

.actions {
  text-align: center;
}

.actions button {
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  border: none;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 14px;
  letter-spacing: 0.2em;
  cursor: pointer;
  color: #000;
  box-shadow: 0 0 30px rgba(0, 246, 255, 0.4);
}
.processing::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,246,255,0.08), transparent 60%);
  animation: pulse 1.2s infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.4; }
  to { opacity: 0.8; }
}
:root{--bg:#05070c;--panel:#0b1020;--cyan:#00f6ff;--violet:#7f5cff;--text:#dce6ff;--muted:#7c89b6}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Manrope,sans-serif}
body{margin:0;background:radial-gradient(circle at 50% 20%,#0a1030,var(--bg));color:var(--text)}
#app{padding:32px;max-width:1200px;margin:0 auto}
header{text-align:center;margin-bottom:32px}
header h1{letter-spacing:.25em;font-weight:700;color:var(--cyan);margin:0}
header span{color:var(--muted);font-size:12px}

.upload{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:linear-gradient(180deg,#0d1430,var(--panel));border-radius:16px;padding:18px;box-shadow:0 0 40px rgba(0,246,255,.06)}
.panel h2{margin:0 0 10px;color:var(--violet);letter-spacing:.15em;font-size:13px}
.panel input{width:100%;margin-bottom:10px}

.toolbar{display:flex;gap:10px;margin:8px 0 12px}
.toolbar button{background:#0a1025;border:1px solid #1b2550;color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer;font-size:12px}
.toolbar button:hover{border-color:rgba(0,246,255,.35)}

.cols{max-height:240px;overflow:auto;padding-right:6px}
.cols label{display:flex;gap:8px;align-items:center;font-size:13px;padding:4px 0;opacity:.95}

.keys,.preview,.actions{margin-top:24px}
.keys select{width:100%;padding:12px;border-radius:12px;background:#060b18;border:1px solid #1b2550;color:var(--text)}
.hint{margin-top:10px;color:var(--muted);font-size:12px}

.tablewrap{overflow:auto;border:1px solid #151c3f;border-radius:14px}
.preview table{width:100%;border-collapse:collapse;font-size:12px}
.preview th{position:sticky;top:0;background:#0a1025;color:var(--cyan);text-align:left;padding:10px;border-bottom:1px solid #151c3f}
.preview td{padding:10px;border-bottom:1px solid #151c3f;white-space:nowrap}

.actions{display:flex;gap:12px;justify-content:center}
.actions button{border:none;border-radius:999px;padding:14px 28px;font-size:13px;letter-spacing:.18em;cursor:pointer}
#exportBtn{background:linear-gradient(90deg,var(--cyan),var(--violet));color:#000;box-shadow:0 0 30px rgba(0,246,255,.35)}
#exportBtn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.ghost{background:transparent;color:var(--text);border:1px solid rgba(220,230,255,.18)}
.ghost:disabled{opacity:.45;cursor:not-allowed}

.processing::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(0,246,255,0.08), transparent 60%);
  animation:pulse 1.1s infinite alternate;
}
@keyframes pulse{from{opacity:.35}to{opacity:.85}}