.app { max-width: 1000px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.topbar .wordmark { font-size: var(--t-xl); }
.topbar .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.board-title-input {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-5);
}

.round {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.round-head { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.round-head input.round-name { font-size: var(--t-md); font-family: var(--font-display); flex: 1; min-width: 160px; }

.question {
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.question textarea.prompt { width: 100%; resize: vertical; min-height: 48px; font-size: var(--t-base); }
.question .note { width: 100%; margin-top: var(--sp-2); font-size: var(--t-xs); }

.answers { margin-top: var(--sp-4); }
.answer-row { display: grid; grid-template-columns: 1fr 70px 1.4fr auto; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.answer-row input { width: 100%; }
.answer-row .score-in { text-align: center; }
.answer-row.pointless input.text-in { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.answer-row .pip { width: 34px; text-align: center; }

.hdr-row { display: grid; grid-template-columns: 1fr 70px 1.4fr auto; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-1); }

.validation { margin-top: var(--sp-5); }
.validation .err { color: var(--wrong); }
.validation .warn { color: var(--gold); }
.validation ul { margin: var(--sp-2) 0; padding-left: var(--sp-5); font-size: var(--t-sm); }

.qmeta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.qmeta .count { font-size: var(--t-xs); color: var(--ink-faint); }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--t-xs); }
.tag { font-size: var(--t-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-dim); }