.gap-input {
  display: inline-block; min-width: 7rem; max-width: 20rem; padding: 0.28rem 0.55rem; margin: 0 0.12rem;
  border: 1.5px solid #d6d3d1; border-radius: 8px; font-size: 0.9rem; background: #fafaf9; font-family: inherit;
}
.gap-input.wide { min-width: 12rem; max-width: 24rem; }
.gap-input:focus { outline: none; border-color: #78716c; background: #fff; box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.08); }
.gap-input.ok { border-color: #86efac; background: #f0fdf4; }
.gap-input.bad { border-color: #fca5a5; background: #fef2f2; }
.gap-input.hint-show { border-color: #fcd34d; background: #fffbeb; }
.gap-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; vertical-align: baseline; }
.hint-btn {
  flex-shrink: 0; width: 1.45rem; height: 1.45rem; padding: 0; border: 1px solid #e7e5e4;
  border-radius: 999px; background: #fff; color: #78716c; font-size: 0.78rem; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.hint-btn:hover { border-color: #d6d3d1; color: #44403c; background: #fafaf9; }
.answer-hint {
  display: none; flex-basis: 100%; font-size: 0.82rem; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 0.28rem 0.55rem; margin: 0.15rem 0 0;
}
.gap-wrap.revealed .answer-hint { display: block; }
.ex-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; align-items: center; }
.ex-toolbar button {
  border: 1px solid #e7e5e4; background: #fff; border-radius: 999px;
  padding: 0.4rem 0.9rem; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.ex-toolbar button:hover { border-color: #d6d3d1; }
.ex-score { font-size: 0.85rem; color: #57534e; margin-left: auto; }
.chip-bank { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.chip-bank button {
  font-size: 0.8rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px;
  padding: 0.2rem 0.55rem; cursor: pointer; font-family: inherit; color: inherit;
}
.chip-bank button:hover { background: #fef3c7; border-color: #fbbf24; }
.chip-bank button.copied { background: #f0fdf4; border-color: #86efac; }
.match-mini { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.5rem 0; }
.match-mini th, .match-mini td { border: 1px solid #e7e5e4; padding: 0.35rem 0.5rem; }
.match-mini th { background: #f5f5f4; text-align: left; }
.match-mini select {
  width: 100%; padding: 0.3rem 0.45rem; border: 1.5px solid #d6d3d1; border-radius: 8px;
  font-size: 0.88rem; background: #fff; font-family: inherit;
}
.match-mini select.ok { border-color: #86efac; background: #f0fdf4; }
.match-mini select.bad { border-color: #fca5a5; background: #fef2f2; }
.lesson-progress {
  position: sticky; top: 0; z-index: 5; background: #fafaf9; border-bottom: 1px solid #e7e5e4;
  padding: 0.45rem 0; margin: 0 0 1rem; font-size: 0.82rem; color: #57534e;
}