:root{
  --bg:#0b1220; --panel:#0f1a33; --text:#eaf1ff; --muted:#9bb0d0;
  --line:#203253; --btn:#17305c; --btn2:#122446; --accent:#5aa6ff;
  --shadow:0 12px 40px rgba(0,0,0,.35); --r:18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:linear-gradient(180deg,#070b14,#0b1220); color:var(--text); }
.wrap{ max-width:1150px; margin:0 auto; padding:16px; }
.top{ position:sticky; top:0; z-index:10; background:rgba(11,18,32,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.title{ font-weight:900; letter-spacing:.2px; font-size:18px; }
.sub{ color:var(--muted); font-size:13px; margin-top:4px; }

.card{
  background:rgba(15,26,51,.8); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:18px;
}

.h{ font-weight:850; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

.btn{
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--btn),var(--btn2));
  color:var(--text); padding:10px 12px; border-radius:12px;
  cursor:pointer; font-weight:700; display:inline-flex; align-items:center; gap:8px;
}
.btn.secondary{ background:transparent; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.drop{
  margin-top:14px; border:2px dashed #2b4371; border-radius:16px;
  padding:18px; background:rgba(9,14,27,.45);
}
.drop.drag{ border-color:var(--accent); }
.dropTitle{ font-weight:850; margin-bottom:6px; }

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:rgba(15,26,51,.55);
}

.grid{
  margin-top:14px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:14px;
}
@media (max-width: 980px){ .grid{ grid-template-columns:1fr; } }

.sel, .inp{
  padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:rgba(9,14,27,.45); color:var(--text);
}
.inp{ flex:1; min-width:220px; }

.tableWrap{ overflow:auto; margin-top:12px; border:1px solid var(--line); border-radius:14px; }
table{ width:100%; border-collapse:collapse; min-width:780px; }
th, td{ padding:10px 12px; border-bottom:1px solid rgba(32,50,83,.65); font-size:13px; }
th{ text-align:left; color:#cfe0ff; cursor:pointer; user-select:none; position:sticky; top:0; background:rgba(15,26,51,.95); }
tr:hover td{ background:rgba(9,14,27,.35); }

.hist{ margin-top:12px; display:grid; gap:8px; }
.barRow{ display:grid; grid-template-columns: 100px 1fr 80px; gap:10px; align-items:center; }
.bar{ height:10px; border-radius:999px; background:rgba(9,14,27,.45); border:1px solid var(--line); overflow:hidden; }
.fill{ height:100%; width:0%; background:linear-gradient(90deg,#2c7bff,#9ad7ff); }

.errors{
  margin-top:12px; padding:12px; border-radius:14px;
  border:1px solid rgba(255,176,32,.35); background:rgba(255,176,32,.08);
  color:#ffd9a3; font-size:12px; white-space:pre-wrap;
}
code{ color:#b7d3ff; }