.vocabulary-screen .panel {
  width: min(100%, 620px);
}
.back-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
#today,
#remaining {
  margin-top: 14px;
}
.deck-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.deck-row {
  border: 2px solid var(--steel);
  border-radius: 12px;
  overflow: hidden;
}
.deck-study {
  display: grid;
  gap: 12px;
  width: 100%;
  min-height: 98px;
  padding: 20px;
  text-align: left;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.deck-study strong {
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.deck-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 12px 12px;
}
.deck-actions button {
  min-height: 34px;
  border: 1px solid var(--steel);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.76rem;
}
#empty {
  margin-top: 28px;
}
.reverse-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}
.reverse-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
}
.account-screen .example-input {
  margin: 0;
  padding: 0;
  border: 0;
}
.example-input textarea.text-input {
  margin-top: 12px;
  height: auto;
  padding: 12px;
  resize: vertical;
}
.notes {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  max-height: 350px;
  overflow: auto;
}
.notes li {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--steel);
  padding-top: 14px;
  overflow-wrap: anywhere;
}
.notes span {
  font-size: 0.88rem;
}
#flashcard {
  margin-top: 32px;
}
.card-front {
  padding: 30px 0;
  font-size: clamp(2rem, 7vw, 3.3rem);
  font-weight: 850;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: text;
}
.card-back {
  border-top: 2px solid var(--steel);
  padding: 26px 0;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 750;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: text;
}
#example {
  margin: 0 0 24px;
  font-size: 0.94rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: text;
}
#example:empty {
  display: none;
}
.ratings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.ratings button {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 74px;
  padding: 10px 3px;
  font-size: 0.85rem;
}
.ratings small {
  font-size: 0.72rem;
  font-weight: 500;
}
.ratings button[data-rating="1"] {
  border-color: var(--danger);
  color: var(--danger);
}
.ratings button[data-rating="3"] {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
#error-box {
  margin-bottom: 20px;
}
#error {
  font-size: 0.85rem;
  color: var(--danger);
  line-height: 1.5;
}
#finished {
  padding-top: 32px;
}
#finished-message {
  font-weight: 800;
}
#refresh-study {
  margin-top: 24px;
}
@media (max-width: 420px) {
  .ratings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#bulk-input {
  height: auto;
  padding: 12px;
  resize: vertical;
  font-size: 0.9rem;
}
.bulk-table {
  overflow: auto;
  max-height: 300px;
  margin: 16px 0;
}
.bulk-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}
.bulk-table td,
.bulk-table th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--steel);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-width: 80px;
}
#bulk-result {
  margin-top: 12px;
}
#bulk-count {
  margin-top: 16px;
}

.note-search {
  display: block;
  margin-top: 28px;
}
#note-count {
  margin-top: 10px;
}
.notes li {
  grid-template-columns: minmax(0, 1fr) auto;
}
.notes li span {
  grid-column: 1;
}
.notes .note-edit {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: auto;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.8rem;
}
#edit-note-form h2 {
  font-size: 1.1rem;
  margin: 0;
}
#edit-note-form textarea {
  height: auto;
  padding: 12px;
  resize: vertical;
}

#suspend { margin-top: 20px; width: auto; min-height: 36px; padding: 6px 12px; font-size: .8rem; }

#undo-answer { margin-top: 14px; width: auto; min-height: 36px; padding: 6px 12px; font-size: .8rem; }