.panel { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.panel h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.panel p { margin: 0; color: var(--muted); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row {
  display: grid; grid-template-columns: 22px 130px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.row .moves { display: flex; gap: 2px; }
input, select {
  font: inherit; font-size: 0.9rem; color: var(--fg);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 9px; min-width: 0; width: 100%;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions select { width: auto; flex: 0 1 200px; }
.msg { min-height: 1.4em; font-size: 0.9rem; }
.msg.err { color: var(--accent); }
.msg.ok { color: var(--fg); }

@media (max-width: 520px) {
  .row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .row input { grid-column: 1 / -1; grid-row: 2; }
}