body { font-family: sans-serif; max-width: 960px; margin: 2em auto; background: #000; color: #fff; }
    input, button, textarea { width: 100%; margin-top: 0.5em; }
    input, textarea { background: #111; color: #fff; border: 1px solid #333; padding: 0.6em; border-radius: 4px; }
    button { background: #222; color: #fff; border: 1px solid #444; padding: 0.6em; border-radius: 4px; cursor: pointer; }
    button:hover { background: #2f2f2f; }
    ul { list-style: none; padding: 0; }
    li { margin: 0.3em 0; background: #1c1c1c; padding: 0.5em; border-radius: 4px; }
    .pair { display: flex; justify-content: space-between; }
    .board { font-weight: bold; }
    .layout { display: flex; gap: 2em; align-items: flex-start; }
    .column { padding: 0 10px; }
    .column--results { flex: 0 0 60%; max-width: 60%; }
    .column--form { flex: 0 0 40%; max-width: 40%; }
    .column h2, .column h3 { margin-top: 1.5em; }
    .column h2:first-child,
    .column h3:first-child { margin-top: 0; }
    .participants-section,
    .history-section { margin-top: 1.5em; }
    .toggle-button { margin-top: 0; }
    #participantsContainer,
    #historyContainer { margin-top: 0.75em; }
    #participantsList { font-size: 0.6em; }
    .history-list { list-style: none; padding: 0; margin: 0; font-size: 0.6em; }
    .history-list li { background: #1f1f1f; padding: 0.6em; border-radius: 4px; margin-bottom: 0.6em; }
    .history-list li strong { display: block; margin-bottom: 0.3em; font-size: 1.05em; }
    .meta-info { margin-top: 0.5em; color: #bbb; font-size: 0.95em; }
    .danger-button { margin-top: 0.75em; background: #c0392b; color: #fff; border: none; padding: 0.6em; border-radius: 4px; cursor: pointer; }
    .danger-button:hover { background: #a93226; }
    .hidden { display: none !important; }
    @media (max-width: 720px) {
      .layout { flex-direction: column; }
      .column--results,
      .column--form { max-width: 100%; flex: 1 1 100%; }
    }