:root {
  --bg: #1e1f22;
  --panel: #25262a;
  --muted: #a8b0bd;
  --text: #e6e6e6;
  --accent: #0e639c;
  --ok: #2ea043;
  --warn: #c69026;
  --bad: #d43c3c;
  --mono: ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --radius: 12px;
}
* { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Arial Unicode MS", "Segoe UI Symbol", "Noto Sans Symbols", monospace;
}
header { padding: 16px; border-bottom: 1px solid #2b2c30; }
h1 { margin: 0 0 10px 0; font-size: 20px; }
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
label.file {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border-radius: var(--radius); padding: 8px 12px; cursor: pointer;
}
label.file input { display: none; }
.drop {
  padding: 8px 12px; border: 1px dashed #3a3b41; border-radius: var(--radius);
  color: var(--muted);
}
.drop.drag { border-color: var(--accent); color: var(--text); }
.controls select, .controls input {
  background: var(--panel); color: var(--text); border: 1px solid #2f3035; border-radius: 8px; padding: 6px 8px;
}
.controls button {
  background: var(--accent); color: white; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.controls button[disabled] { opacity: .5; cursor: not-allowed; }

.meta { margin-top: 8px; color: var(--muted); display: flex; gap: 16px; }
main { display: grid; grid-template-columns: 1fr 360px; gap: 12px; padding: 12px; }
section { background: var(--panel); border: 1px solid #2b2c30; border-radius: var(--radius); padding: 12px; min-height: 120px; }
section h2 { margin: 0 0 8px 0; font-size: 16px; }

table { width: 100%; border-collapse: collapse; }
thead tr { background: #2a2b30; }
th, td { padding: 8px; border-bottom: 1px solid #2b2c30; vertical-align: top; }
tbody tr:hover { background: #2a2c31; }
td input[type="text"], td input[type="number"], td select {
  width: 100%; background: #1f2023; color: var(--text); border: 1px solid #323338; border-radius: 6px; padding: 4px 6px; font: inherit;
}
td .bool { display: flex; align-items: center; gap: 6px; }

#summary { background: #1f2023; border: 1px solid #323338; border-radius: 8px; padding: 8px; font-family: var(--mono); overflow: auto; max-height: 320px; }
#playersList { list-style: none; padding: 0; margin: 0; }
#playersList li { padding: 6px 4px; border-bottom: 1px solid #2b2c30; font-family: var(--mono); word-break: break-all; }

.players-head button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.1s ease;
}

.players-head button:hover:not([disabled]) {
  background: #1177c0; /* lighter hover */
  transform: translateY(-1px);
}

.players-head button:active:not([disabled]) {
  background: #0b4f7a; /* darker press */
  transform: translateY(0);
}

.players-head button[disabled] {
  background: #2c2e33;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}


dialog { border: 1px solid #2b2c30; border-radius: 12px; padding: 0; background: var(--panel); color: var(--text); width: min(920px, 95vw); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog form { padding: 12px; }
dialog h3 { margin: 0 0 10px 0; }
dialog .row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
dialog .spacer { flex: 1; }
dialog button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
dialog #cancelPlayers { background: #3a3f45; }
dialog #addPlayer { background: #3a3f45; }

footer { padding: 10px 12px; color: var(--muted); }