:root {
  --sp-ink: #211a2d;
  --sp-muted: #746b80;
  --sp-line: #e5deed;
  --sp-line-strong: #d4c6e4;
  --sp-page: #f7f5fa;
  --sp-surface: #ffffff;
  --sp-surface-soft: #fbfaff;
  --sp-purple: #6d43cf;
  --sp-purple-dark: #5130a7;
  --sp-purple-soft: #eee8fb;
  --sp-green: #167354;
  --sp-green-soft: #e5f4ed;
  --sp-coral: #b94652;
  --sp-coral-soft: #fdebed;
  --sp-yellow: #8a6500;
  --sp-yellow-soft: #fff5c7;
  --sp-blue: #2c65a7;
  --sp-blue-soft: #e9f2fb;
  --sp-shadow: 0 14px 38px rgba(50, 34, 68, .07);
}

.wsc-sp-student-document,
.wsc-sp-camp-document {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--sp-page);
}

.wsc-sp-app,
.wsc-sp-admin {
  color: var(--sp-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.wsc-sp-app *,
.wsc-sp-admin * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.wsc-sp-app button,
.wsc-sp-app input,
.wsc-sp-app select,
.wsc-sp-app textarea,
.wsc-sp-admin button,
.wsc-sp-admin input,
.wsc-sp-admin select,
.wsc-sp-admin textarea {
  font: inherit;
}

.wsc-sp-app button,
.wsc-sp-admin button {
  cursor: pointer;
}

.wsc-sp-app button:focus-visible,
.wsc-sp-app a:focus-visible,
.wsc-sp-app input:focus-visible,
.wsc-sp-app select:focus-visible,
.wsc-sp-app textarea:focus-visible,
.wsc-sp-admin button:focus-visible,
.wsc-sp-admin a:focus-visible,
.wsc-sp-admin input:focus-visible,
.wsc-sp-admin select:focus-visible,
.wsc-sp-admin textarea:focus-visible {
  outline: 3px solid rgba(109, 67, 207, .2);
  outline-offset: 2px;
}

.wsc-sp-app [hidden],
.wsc-sp-admin [hidden] {
  display: none !important;
}

.wsc-sp-app {
  min-height: 100vh;
  background: var(--sp-page);
}

.wsc-sp-topbar {
  min-height: 72px;
  position: sticky;
  z-index: 40;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 30px;
  border-bottom: 1px solid var(--sp-line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
}

.wsc-sp-brand,
.wsc-sp-account {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.wsc-sp-brand {
  color: inherit;
  text-decoration: none;
}

.wsc-sp-brand > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 8px;
  color: #fff;
  background: var(--sp-purple);
  box-shadow: 0 8px 18px rgba(81, 48, 167, .2);
  font-size: 22px;
  font-weight: 900;
}

.wsc-sp-brand strong,
.wsc-sp-brand small,
.wsc-sp-account strong,
.wsc-sp-account small {
  display: block;
}

.wsc-sp-brand strong {
  font-size: 16px;
}

.wsc-sp-brand small,
.wsc-sp-account small {
  margin-top: 2px;
  color: var(--sp-muted);
  font-size: 11px;
}

.wsc-sp-account {
  justify-content: flex-end;
}

.wsc-sp-account > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 50%;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 11px;
  font-weight: 900;
}

.wsc-sp-account > span.dashicons {
  font-size: 19px;
  line-height: 36px;
}

.wsc-sp-account strong {
  max-width: 180px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-student-nav {
  min-height: 54px;
  position: sticky;
  z-index: 35;
  top: 72px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 7px max(22px, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid var(--sp-line);
  background: rgba(255, 255, 255, .96);
}

.wsc-sp-student-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 7px;
  color: #62586e;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.wsc-sp-student-nav a:hover {
  background: #f7f4fa;
}

.wsc-sp-student-nav a.is-active {
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
}

.wsc-sp-student-nav .dashicons {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.wsc-sp-student-nav .wsc-sp-back {
  margin-left: auto;
  color: var(--sp-muted);
}

.wsc-sp-main,
.wsc-sp-camp-main {
  width: min(100%, 1440px);
  min-width: 0;
  margin: 0 auto;
  padding: 30px 30px 48px;
}

.wsc-sp-camp-main {
  width: min(100%, 1180px);
}

.wsc-sp-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.wsc-sp-page-head h1 {
  margin: 2px 0 7px;
  font-size: 30px;
  line-height: 1.2;
}

.wsc-sp-page-head p:not(.wsc-sp-kicker) {
  max-width: 720px;
  margin: 0;
  color: var(--sp-muted);
  font-size: 13px;
  line-height: 1.7;
}

.wsc-sp-kicker {
  margin: 0;
  color: var(--sp-purple);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wsc-sp-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.wsc-sp-badge.is-green {
  color: var(--sp-green);
  background: var(--sp-green-soft);
}

.wsc-sp-badge.is-coral {
  color: var(--sp-coral);
  background: var(--sp-coral-soft);
}

.wsc-sp-primary,
.wsc-sp-secondary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.wsc-sp-primary {
  color: #fff;
  border-color: var(--sp-purple);
  background: var(--sp-purple);
}

.wsc-sp-primary:hover {
  border-color: var(--sp-purple-dark);
  background: var(--sp-purple-dark);
}

.wsc-sp-primary.is-green {
  border-color: var(--sp-green);
  background: var(--sp-green);
}

.wsc-sp-secondary {
  color: var(--sp-ink);
  background: #fff;
}

.wsc-sp-secondary:hover {
  color: var(--sp-purple-dark);
  border-color: var(--sp-line-strong);
}

.wsc-sp-primary:disabled,
.wsc-sp-secondary:disabled,
.wsc-sp-slot:disabled,
.wsc-sp-mini-recorder button:disabled {
  opacity: .46;
  cursor: not-allowed;
}

.wsc-sp-text-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--sp-purple-dark);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.wsc-sp-panel {
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow);
}

.wsc-sp-panel > header,
.wsc-sp-admin-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.wsc-sp-panel > header h2,
.wsc-sp-admin-card > header h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.wsc-sp-panel > header p,
.wsc-sp-panel > header small,
.wsc-sp-admin-card > header p {
  display: block;
  margin: 5px 0 0;
  color: var(--sp-muted);
  font-size: 11px;
  line-height: 1.55;
}

.wsc-sp-part-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 3px;
  margin-bottom: 16px;
  padding: 3px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: #f1edf5;
}

.wsc-sp-part-tabs a {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  border-radius: 5px;
  color: var(--sp-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
}

.wsc-sp-part-tabs a.is-active {
  color: var(--sp-purple-dark);
  background: #fff;
  box-shadow: 0 2px 8px rgba(46, 29, 61, .08);
}

.wsc-sp-bank-meta,
.wsc-sp-library-filters,
.wsc-sp-question-actions,
.wsc-sp-question-state-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wsc-sp-library-filters {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: #fff;
}

.wsc-sp-library-filters strong {
  margin-right: 4px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-library-filters button,
.wsc-sp-question-state-actions button {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 5px;
  color: var(--sp-muted);
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.wsc-sp-library-filters button.is-active {
  color: #fff;
  border-color: var(--sp-purple);
  background: var(--sp-purple);
}

.wsc-sp-badge.is-new,
.wsc-sp-question-novelty.is-new,
.wsc-sp-topic-list em,
.wsc-sp-question-editor > summary em {
  color: #fff;
  background: #7c3aed;
}

.wsc-sp-question-novelty,
.wsc-sp-topic-list em,
.wsc-sp-question-editor > summary em {
  display: inline-flex;
  width: max-content;
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.4;
}

.wsc-sp-question-novelty.is-old {
  color: #756c7d;
  background: #eeeaf1;
}

.wsc-sp-audio-mark {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid #d7c6f2;
  border-radius: 4px;
  color: var(--sp-purple-dark);
  background: #f6f1ff;
  font-size: 9px;
  font-weight: 850;
}

.wsc-sp-audio-mark .dashicons {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

.wsc-sp-filter-empty {
  padding: 36px 16px;
  color: var(--sp-muted);
  font-size: 11px;
  text-align: center;
}

.wsc-sp-resource-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: linear-gradient(110deg, #fbf8ff, #fff);
}

.wsc-sp-resource-bar > div {
  min-width: 170px;
  display: grid;
  align-content: center;
  padding: 2px 9px;
}

.wsc-sp-resource-bar strong,
.wsc-sp-resource-bar small {
  display: block;
}

.wsc-sp-resource-bar strong {
  color: var(--sp-purple-dark);
  font-size: 12px;
}

.wsc-sp-resource-bar small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-resource-bar a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--sp-ink);
  text-decoration: none;
  font-size: 11px;
  font-weight: 850;
}

.wsc-sp-resource-bar a:hover,
.wsc-sp-resource-bar a.is-active {
  border-color: #dfc9fa;
  color: var(--sp-purple-dark);
  background: #f4ebff;
}

.wsc-sp-resource-bar a .dashicons {
  color: var(--sp-purple);
  font-size: 17px;
}

.wsc-sp-resource-panel {
  overflow: hidden;
}

.wsc-sp-resource-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-resource-content {
  min-height: 260px;
  padding: 22px;
  color: #443a50;
  font-size: 13px;
  line-height: 1.9;
}

.wsc-sp-resource-content p:first-child {
  margin-top: 0;
}

.wsc-sp-resource-bar a {
  align-items: flex-start;
}

.wsc-sp-resource-bar a > span:last-child {
  display: grid;
  gap: 2px;
}

.wsc-sp-resource-bar a small {
  color: var(--sp-muted);
  font-size: 9px;
  font-weight: 700;
}

.wsc-sp-resource-item-list,
.wsc-sp-resource-admin-list {
  display: grid;
  gap: 8px;
}

.wsc-sp-resource-item-list {
  padding: 18px;
}

.wsc-sp-resource-item-list a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wsc-sp-resource-item-list a:hover {
  border-color: var(--sp-purple);
  box-shadow: 0 8px 18px rgba(73, 48, 112, .08);
  transform: translateY(-1px);
}

.wsc-sp-resource-item-list a > span {
  color: var(--sp-purple);
  font-size: 11px;
  font-weight: 900;
}

.wsc-sp-resource-item-list strong,
.wsc-sp-resource-item-list small {
  display: block;
}

.wsc-sp-resource-item-list strong {
  font-size: 13px;
}

.wsc-sp-resource-item-list small {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 10px;
  line-height: 1.5;
}

.wsc-sp-resource-item-list b {
  padding: 5px 7px;
  border-radius: 5px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 9px;
  white-space: nowrap;
}

.wsc-sp-resource-item-list i {
  color: var(--sp-muted);
}

.wsc-sp-resource-detail {
  padding: 22px;
}

.wsc-sp-resource-detail h3 {
  margin: 14px 0 10px;
  color: var(--sp-ink);
  font-size: 21px;
}

.wsc-sp-resource-attachment {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--sp-line);
}

.wsc-sp-resource-attachment audio {
  width: 100%;
}

.wsc-sp-resource-attachment img {
  display: block;
  max-width: 100%;
  max-height: 560px;
  border-radius: 7px;
  object-fit: contain;
  background: var(--sp-surface-soft);
}

.wsc-sp-resource-attachment iframe {
  width: 100%;
  min-height: 650px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
}

.wsc-sp-resource-empty {
  padding: 48px 20px;
  color: var(--sp-muted);
  text-align: center;
}

.wsc-sp-bulk-status-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 18px 10px;
  padding: 10px 12px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  color: var(--sp-muted);
  background: var(--sp-surface-soft);
  font-size: 10px;
}

.wsc-sp-bulk-status-form select {
  min-height: 30px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 5px;
  font-size: 10px;
}

.wsc-sp-bulk-status-form input[type="checkbox"] {
  accent-color: var(--sp-purple);
}

.wsc-sp-bulk-meta-form {
  display: grid;
  gap: 8px;
  margin: 0 18px 12px;
  padding: 12px;
  border: 1px solid #d8caef;
  border-radius: 7px;
  background: #f8f5fe;
}

.wsc-sp-bulk-meta-form strong {
  color: var(--sp-purple-dark);
  font-size: 11px;
}

.wsc-sp-bulk-meta-form input,
.wsc-sp-bulk-meta-form select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 5px;
  font-size: 10px;
}

.wsc-sp-resource-admin-editor {
  margin: 8px;
  border-top: 1px solid var(--sp-line);
}

.wsc-sp-resource-admin-editor > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 10px;
}

.wsc-sp-resource-admin-editor h3,
.wsc-sp-resource-admin-editor p {
  margin: 0;
}

.wsc-sp-resource-admin-editor h3 {
  font-size: 13px;
}

.wsc-sp-resource-admin-editor p {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 10px;
  line-height: 1.5;
}

.wsc-sp-resource-admin-list {
  padding: 4px 8px 10px;
}

.wsc-sp-resource-admin-list article {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-resource-admin-list article > form button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--sp-coral);
  background: var(--sp-coral-soft);
  cursor: pointer;
}

.wsc-sp-resource-admin-list article > input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--sp-purple);
}

.wsc-sp-resource-bulk-upload {
  margin-bottom: 10px;
}

.wsc-sp-resource-admin-list strong,
.wsc-sp-resource-admin-list small {
  display: block;
}

.wsc-sp-resource-admin-list strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-resource-admin-list small,
.wsc-sp-existing-file {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-existing-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.wsc-sp-existing-file label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sp-coral);
  font-size: 9px;
}

.wsc-sp-library-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.wsc-sp-topic-panel,
.wsc-sp-topic-content {
  overflow: hidden;
}

.wsc-sp-topic-panel > header,
.wsc-sp-topic-content > header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-topic-directory > summary {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  list-style: none;
  cursor: pointer;
}

.wsc-sp-topic-directory > summary::-webkit-details-marker {
  display: none;
}

.wsc-sp-topic-directory > summary strong,
.wsc-sp-topic-directory > summary small {
  display: block;
}

.wsc-sp-topic-directory > summary strong {
  font-size: 15px;
}

.wsc-sp-topic-directory > summary small {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-topic-directory > summary > .dashicons {
  color: var(--sp-muted);
  transition: transform 160ms ease;
}

.wsc-sp-topic-directory[open] > summary {
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-topic-directory[open] > summary > .dashicons {
  transform: rotate(180deg);
}

.wsc-sp-topic-list {
  display: grid;
  padding: 8px;
}

.wsc-sp-topic-list a {
  min-height: 66px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}

.wsc-sp-topic-list a:hover {
  background: #f8f6fa;
}

.wsc-sp-topic-list a.is-active {
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
}

.wsc-sp-topic-list b {
  color: var(--sp-purple);
  font-size: 11px;
}

.wsc-sp-topic-list strong,
.wsc-sp-topic-list small {
  display: block;
}

.wsc-sp-topic-list strong {
  font-size: 12px;
}

.wsc-sp-topic-list small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--sp-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-topic-list i {
  color: #a49bab;
  font-size: 16px;
}

.wsc-sp-accordion-list {
  padding: 10px;
}

.wsc-sp-accordion {
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-accordion:last-child {
  border-bottom: 0;
}

.wsc-sp-accordion summary {
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  list-style: none;
  cursor: pointer;
}

.wsc-sp-accordion summary > b {
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--sp-muted);
  background: #f1eef4;
  font-size: 9px;
}

.wsc-sp-accordion.is-practiced summary > b {
  color: #17734b;
  background: #e7f7ef;
}

.wsc-sp-accordion.is-skip {
  opacity: .72;
}

.wsc-sp-question-actions {
  justify-content: space-between;
  margin-top: 14px;
}

.wsc-sp-question-state-actions button .dashicons {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  font-size: 14px;
  vertical-align: middle;
}

.wsc-sp-question-state-actions button.is-active[data-question-mark="practiced"] {
  color: #17734b;
  border-color: #9ed8bd;
  background: #e7f7ef;
}

.wsc-sp-question-state-actions button.is-active[data-question-mark="skip"] {
  color: #8a5362;
  border-color: #e2bbc5;
  background: #fff1f4;
}

.wsc-sp-accordion summary::-webkit-details-marker {
  display: none;
}

.wsc-sp-accordion summary > span:not(.dashicons) {
  min-width: 34px;
  color: var(--sp-purple);
  font-size: 11px;
  font-weight: 900;
}

.wsc-sp-accordion summary strong {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.55;
}

.wsc-sp-accordion summary i {
  color: #9c92a6;
  font-size: 17px;
  transition: transform 160ms ease;
}

.wsc-sp-accordion[open] summary i {
  transform: rotate(180deg);
}

.wsc-sp-accordion-body {
  padding: 2px 10px 18px 56px;
}

.wsc-sp-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wsc-sp-keywords span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #dad0ea;
  border-radius: 6px;
  color: var(--sp-purple-dark);
  background: #f8f5fe;
  font-size: 11px;
  font-weight: 750;
}

.wsc-sp-translation,
.wsc-sp-sample,
.wsc-sp-rich-text p {
  margin: 12px 0 0;
  color: var(--sp-muted);
  font-size: 12px;
  line-height: 1.8;
}

.wsc-sp-sample {
  padding: 13px 14px;
  border-left: 3px solid var(--sp-green);
  color: #3e4e48;
  background: var(--sp-green-soft);
}

.wsc-sp-sample-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.wsc-sp-sample-head > strong {
  color: var(--sp-green);
  font-size: 11px;
}

.wsc-sp-sample-text {
  min-width: 0;
}

.wsc-sp-library-audio {
  display: inline-flex;
  vertical-align: middle;
}

.wsc-sp-accordion summary .wsc-sp-library-audio {
  margin-top: 1px;
}

.wsc-sp-sample-head .wsc-sp-library-audio {
  margin-top: 0;
}

.wsc-sp-practice-audio-trigger {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin-top: 13px;
}

.wsc-sp-audio-trigger {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid #d7c6f2;
  border-radius: 5px;
  color: var(--sp-purple-dark);
  background: #f6f1ff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.wsc-sp-audio-trigger:hover,
.wsc-sp-audio-trigger.is-playing {
  border-color: var(--sp-purple);
  background: var(--sp-purple-soft);
}

.wsc-sp-library-audio.is-answer .wsc-sp-audio-trigger {
  border-color: #b9ddc9;
  color: var(--sp-green);
  background: #f4fbf7;
}

.wsc-sp-library-audio.is-answer .wsc-sp-audio-trigger:hover,
.wsc-sp-library-audio.is-answer .wsc-sp-audio-trigger.is-playing {
  border-color: var(--sp-green);
  background: var(--sp-green-soft);
}

.wsc-sp-audio-trigger .dashicons {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.wsc-sp-inline-audio,
.wsc-sp-practice-audio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: var(--sp-surface-soft);
}

.wsc-sp-inline-audio > .dashicons,
.wsc-sp-practice-audio > .dashicons {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--sp-purple);
  font-size: 18px;
}

.wsc-sp-inline-audio > div,
.wsc-sp-practice-audio > div {
  min-width: 0;
  flex: 1;
}

.wsc-sp-inline-audio strong,
.wsc-sp-inline-audio small,
.wsc-sp-practice-audio strong,
.wsc-sp-practice-audio small {
  display: block;
}

.wsc-sp-inline-audio strong,
.wsc-sp-practice-audio strong {
  color: var(--sp-ink);
  font-size: 11px;
}

.wsc-sp-inline-audio small,
.wsc-sp-practice-audio small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-inline-audio.is-prompt,
.wsc-sp-practice-audio.is-prompt {
  border-color: #d7c6f2;
  background: #faf7ff;
}

.wsc-sp-inline-audio.is-answer,
.wsc-sp-practice-audio.is-answer {
  border-color: #c7e2d4;
  background: #f4fbf7;
}

.wsc-sp-inline-audio.is-answer > .dashicons,
.wsc-sp-practice-audio.is-answer > .dashicons {
  color: var(--sp-green);
}

.wsc-sp-inline-audio audio,
.wsc-sp-practice-audio audio {
  margin-top: 8px;
}

.wsc-sp-accordion audio,
.wsc-sp-feedback-body audio,
.wsc-sp-review-player audio,
.wsc-sp-admin-form audio,
.wsc-sp-attempt-recordings audio,
.wsc-sp-camp-question audio {
  width: 100%;
  min-width: 0;
  height: 38px;
  display: block;
  margin-top: 12px;
}

.wsc-sp-audio-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

.wsc-sp-accordion-body .wsc-sp-secondary {
  margin-top: 14px;
}

.wsc-sp-practice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.wsc-sp-segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: #f1edf5;
}

.wsc-sp-segmented button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  color: var(--sp-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.wsc-sp-segmented button.is-active {
  color: var(--sp-purple-dark);
  background: #fff;
  box-shadow: 0 2px 8px rgba(46, 29, 61, .08);
}

.wsc-sp-practice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .72fr);
  align-items: stretch;
  gap: 18px;
}

.wsc-sp-prompt-card,
.wsc-sp-recorder {
  min-height: 410px;
  padding: 22px;
}

.wsc-sp-prompt-card > header h2 {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.45;
}

.wsc-sp-prompt-card > header small {
  margin-top: 10px;
  font-size: 12px;
}

.wsc-sp-prompt-card > .wsc-sp-practice-audio {
  margin-top: 20px;
}

.wsc-sp-prompt-help .wsc-sp-practice-audio {
  margin-top: 16px;
}

.wsc-sp-prompt-help {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #ddd1ee;
  border-radius: 7px;
  background: #faf8ff;
}

.wsc-sp-prompt-help > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}

.wsc-sp-prompt-help p {
  margin: 14px 0 0;
  color: var(--sp-muted);
  font-size: 11px;
  line-height: 1.7;
}

.wsc-sp-prompt-help.is-free {
  border-color: #cbe4d9;
  background: var(--sp-green-soft);
}

.wsc-sp-record-stage {
  min-height: 235px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 0 16px;
}

.wsc-sp-record-button {
  width: 92px;
  height: 92px;
  position: relative;
  display: grid;
  place-items: center;
  border: 9px solid #eee8fb;
  border-radius: 50%;
  color: #fff;
  background: var(--sp-purple);
  box-shadow: 0 0 0 1px #d8cceb, 0 12px 30px rgba(81, 48, 167, .2);
}

.wsc-sp-record-button .dashicons {
  width: 28px;
  height: 28px;
  font-size: 28px;
}

.wsc-sp-recorder.is-recording .wsc-sp-record-button {
  background: var(--sp-coral);
  box-shadow: 0 0 0 1px #efc5ca, 0 0 0 12px rgba(185, 70, 82, .08);
  animation: wsc-sp-pulse 1.4s ease-in-out infinite;
}

@keyframes wsc-sp-pulse {
  50% { box-shadow: 0 0 0 1px #efc5ca, 0 0 0 20px rgba(185, 70, 82, 0); }
}

.wsc-sp-record-stage > strong {
  margin-top: 18px;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.wsc-sp-record-stage > p {
  margin: 7px 0 0;
  color: var(--sp-muted);
  font-size: 11px;
}

.wsc-sp-recorder > audio {
  width: 100%;
  height: 38px;
  margin: 0 0 15px;
}

.wsc-sp-record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wsc-sp-pro-note {
  width: 100%;
  color: var(--sp-muted);
  font-size: 10px;
  text-align: center;
}

.wsc-sp-feedback-list {
  display: grid;
  gap: 10px;
}

.wsc-sp-feedback-item {
  overflow: hidden;
}

.wsc-sp-feedback-item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  list-style: none;
  cursor: pointer;
}

.wsc-sp-feedback-item > summary::-webkit-details-marker {
  display: none;
}

.wsc-sp-feedback-item > summary h2 {
  margin: 8px 0 3px;
  font-size: 15px;
}

.wsc-sp-feedback-item > summary p,
.wsc-sp-feedback-item > summary small {
  display: block;
  margin: 3px 0 0;
  color: var(--sp-muted);
  font-size: 11px;
}

.wsc-sp-feedback-item > summary > .dashicons {
  transition: transform 160ms ease;
}

.wsc-sp-feedback-item[open] > summary > .dashicons {
  transform: rotate(180deg);
}

.wsc-sp-feedback-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--sp-line);
}

.wsc-sp-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.wsc-sp-score-grid > div {
  min-height: 74px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: var(--sp-surface-soft);
}

.wsc-sp-score-grid strong,
.wsc-sp-score-grid span {
  display: block;
  text-align: center;
}

.wsc-sp-score-grid strong {
  color: var(--sp-purple-dark);
  font-size: 20px;
}

.wsc-sp-score-grid span {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-teacher-note {
  margin-top: 16px;
  padding: 15px;
  border-left: 3px solid var(--sp-purple);
  background: var(--sp-purple-soft);
}

.wsc-sp-teacher-note strong {
  font-size: 12px;
}

.wsc-sp-teacher-note p {
  margin: 7px 0 0;
  color: #51475d;
  font-size: 12px;
  line-height: 1.75;
}

.wsc-sp-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.wsc-sp-attachments a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  color: var(--sp-purple-dark);
  text-decoration: none;
  font-size: 11px;
  font-weight: 750;
}

.wsc-sp-credit-strip,
.wsc-sp-camp-notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 17px;
  padding: 15px 17px;
  border: 1px solid #d6cae8;
  border-radius: 7px;
  background: var(--sp-purple-soft);
}

.wsc-sp-credit-strip > .dashicons,
.wsc-sp-camp-notice > .dashicons {
  width: 24px;
  height: 24px;
  color: var(--sp-purple);
  font-size: 24px;
}

.wsc-sp-credit-strip strong,
.wsc-sp-credit-strip p,
.wsc-sp-camp-notice strong,
.wsc-sp-camp-notice p {
  display: block;
}

.wsc-sp-credit-strip strong,
.wsc-sp-camp-notice strong {
  font-size: 12px;
}

.wsc-sp-credit-strip p,
.wsc-sp-camp-notice p {
  margin: 4px 0 0;
  color: var(--sp-muted);
  font-size: 11px;
  line-height: 1.6;
}

.wsc-sp-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wsc-sp-slot {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  color: var(--sp-ink);
  background: #fff;
  text-align: left;
}

.wsc-sp-slot:hover:not(:disabled) {
  border-color: var(--sp-purple);
  box-shadow: 0 8px 20px rgba(81, 48, 167, .08);
}

.wsc-sp-slot strong {
  font-size: 13px;
}

.wsc-sp-slot span {
  color: var(--sp-green);
  font-size: 10px;
  font-weight: 800;
}

.wsc-sp-slot.is-busy {
  background: #f1eef3;
}

.wsc-sp-slot.is-busy span {
  color: var(--sp-muted);
}

.wsc-sp-slot.is-mine {
  border-color: #a8d3c2;
  background: var(--sp-green-soft);
}

.wsc-sp-empty,
.wsc-sp-gate {
  min-height: 380px;
  display: grid;
  place-items: center;
  text-align: center;
}

.wsc-sp-empty {
  padding: 36px;
  border: 1px dashed var(--sp-line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.wsc-sp-empty > .dashicons {
  width: 42px;
  height: 42px;
  color: var(--sp-purple);
  font-size: 42px;
}

.wsc-sp-empty h2,
.wsc-sp-gate h1 {
  margin: 13px 0 7px;
}

.wsc-sp-empty p,
.wsc-sp-gate p {
  margin: 0;
  color: var(--sp-muted);
  font-size: 12px;
  line-height: 1.7;
}

.wsc-sp-gate {
  min-height: calc(100vh - 72px);
  padding: 28px;
}

.wsc-sp-gate section {
  width: min(100%, 560px);
  padding: 38px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--sp-shadow);
}

.wsc-sp-gate .wsc-sp-primary {
  margin-top: 20px;
}

.wsc-sp-gate .wsc-sp-text-link {
  display: flex;
  justify-content: center;
}

.wsc-sp-camp-parts {
  display: grid;
  gap: 14px;
}

.wsc-sp-camp-question {
  padding: 20px;
}

.wsc-sp-camp-question.is-complete {
  border-color: #aad4c4;
}

.wsc-sp-camp-question > header > strong {
  flex: 0 0 auto;
  color: var(--sp-coral);
  font-size: 11px;
  white-space: nowrap;
}

.wsc-sp-camp-question.is-complete > header > strong {
  color: var(--sp-green);
}

.wsc-sp-cue-card {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 12px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: #f5f2f7;
}

.wsc-sp-cue-card img {
  width: 100%;
  max-height: 560px;
  display: block;
  object-fit: contain;
}

.wsc-sp-question-audio {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: var(--sp-surface-soft);
}

.wsc-sp-question-audio > .dashicons {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 19px;
}

.wsc-sp-question-audio strong {
  font-size: 11px;
}

.wsc-sp-question-audio audio {
  margin-top: 7px;
}

.wsc-sp-camp-answer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-line);
}

.wsc-sp-mini-recorder {
  display: grid;
  grid-template-columns: auto auto 70px minmax(180px, 1fr);
  align-items: center;
  gap: 8px;
}

.wsc-sp-mini-recorder button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  color: var(--sp-ink);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.wsc-sp-mini-recorder [data-record-start] {
  color: #fff;
  border-color: var(--sp-purple);
  background: var(--sp-purple);
}

.wsc-sp-camp-answer.is-recording .wsc-sp-mini-recorder [data-record-start] {
  border-color: var(--sp-coral);
  background: var(--sp-coral);
}

.wsc-sp-mini-recorder > strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.wsc-sp-mini-recorder > span {
  color: var(--sp-muted);
  font-size: 11px;
}

.wsc-sp-camp-answer > audio {
  width: 100%;
  height: 38px;
  margin-top: 12px;
}

.wsc-sp-camp-answer > .wsc-sp-primary {
  margin-top: 10px;
}

.wsc-sp-locked-answer {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.5fr) auto;
  align-items: center;
  gap: 12px;
}

.wsc-sp-locked-answer > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sp-green);
  font-size: 11px;
}

.wsc-sp-locked-answer > audio {
  width: 100%;
  height: 38px;
  margin: 0;
}

.wsc-sp-camp-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--sp-shadow);
}

.wsc-sp-camp-submit strong {
  font-size: 13px;
}

.wsc-sp-camp-submit p {
  margin: 4px 0 0;
  color: var(--sp-muted);
  font-size: 11px;
}

.wsc-sp-toast {
  max-width: min(420px, calc(100vw - 32px));
  position: fixed;
  z-index: 10000;
  right: 20px;
  bottom: 20px;
  padding: 13px 16px;
  border-radius: 7px;
  color: #fff;
  background: #2c2535;
  box-shadow: 0 16px 40px rgba(27, 18, 35, .25);
  font-size: 12px;
  line-height: 1.55;
}

.wsc-sp-toast.is-error {
  background: #9b3542;
}

.wsc-sp-toast.is-success {
  background: var(--sp-green);
}

/* Teacher workspace */
.wsc-sp-admin.wrap {
  max-width: none;
  margin: 0 0 0 -20px;
}

.wsc-sp-admin-shell {
  min-height: calc(100vh - 32px);
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--sp-page);
}

.wsc-sp-admin-sidebar {
  height: calc(100vh - 32px);
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  padding: 22px 15px 18px;
  border-right: 1px solid var(--sp-line);
  background: #fff;
}

.wsc-sp-admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 20px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-admin-brand > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 8px;
  color: #fff;
  background: var(--sp-purple);
  font-size: 20px;
  font-weight: 900;
}

.wsc-sp-admin-brand strong,
.wsc-sp-admin-brand small {
  display: block;
}

.wsc-sp-admin-brand strong {
  font-size: 14px;
}

.wsc-sp-admin-brand small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-admin-sidebar nav {
  display: grid;
  gap: 5px;
  margin-top: 18px;
}

.wsc-sp-admin-sidebar nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border-radius: 7px;
  color: #62586e;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.wsc-sp-admin-sidebar nav a:hover {
  background: #f7f4fa;
}

.wsc-sp-admin-sidebar nav a.is-active {
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
}

.wsc-sp-admin-sidebar footer {
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.wsc-sp-admin-sidebar footer a {
  padding: 8px 10px;
  color: var(--sp-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 750;
}

.wsc-sp-admin-main {
  min-width: 0;
  padding: 30px;
}

.wsc-sp-admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.wsc-sp-admin-head p {
  margin: 0;
  color: var(--sp-purple);
  font-size: 10px;
  font-weight: 900;
}

.wsc-sp-admin-head h1 {
  margin: 4px 0 6px;
  color: var(--sp-ink);
  font-size: 29px;
  line-height: 1.2;
}

.wsc-sp-admin-head > div > span {
  color: var(--sp-muted);
  font-size: 12px;
}

.wsc-sp-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.wsc-sp-admin-stats > div {
  min-height: 96px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  padding: 15px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: #fff;
}

.wsc-sp-admin-stats .dashicons {
  width: 40px;
  height: 40px;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 20px;
}

.wsc-sp-admin-stats strong {
  font-size: 21px;
  line-height: 1.1;
}

.wsc-sp-admin-stats small {
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-admin-card {
  min-width: 0;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--sp-shadow);
}

.wsc-sp-bulk-import,
.wsc-sp-pending-queue {
  margin: 14px 0;
}

.wsc-sp-bulk-import > header,
.wsc-sp-pending-queue > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.wsc-sp-bulk-import .wsc-sp-admin-form {
  max-width: 860px;
  grid-template-columns: minmax(0, 1fr) 34px minmax(220px, .55fr) auto;
  align-items: end;
}

.wsc-sp-bulk-import .wsc-sp-admin-form > label:first-of-type {
  grid-row: span 2;
}

.wsc-sp-bulk-import .wsc-sp-admin-form > label:nth-of-type(2) {
  align-self: end;
}

.wsc-sp-bulk-import .wsc-sp-admin-form textarea {
  min-height: 124px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
}

.wsc-sp-bulk-or {
  align-self: center;
  color: var(--sp-muted);
  font-size: 10px;
  text-align: center;
}

.wsc-sp-form-hint {
  grid-column: 3 / -1;
  color: var(--sp-muted);
  font-size: 10px;
  line-height: 1.5;
}

.wsc-sp-bulk-import button .dashicons {
  vertical-align: middle;
  margin-right: 3px;
}

.wsc-sp-pending-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
}

.wsc-sp-pending-list a {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.wsc-sp-pending-list a:hover {
  border-color: #d9baf4;
  background: #fbf8ff;
}

.wsc-sp-pending-list strong,
.wsc-sp-pending-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-pending-list strong {
  font-size: 11px;
}

.wsc-sp-pending-list small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-pending-list > a > b {
  color: #9b6b18;
  font-size: 9px;
  white-space: nowrap;
}

.wsc-sp-pending-list > a > .dashicons {
  color: var(--sp-purple);
}

.wsc-sp-shared-section-form {
  margin: 8px;
}

.wsc-sp-shared-section-form .wsc-sp-admin-form {
  padding: 12px;
}

.wsc-sp-admin-card > header {
  padding: 17px 18px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-admin-card > header > span:not(.wsc-sp-badge) {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 10px;
  font-weight: 900;
}

.wsc-sp-content-admin-grid {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(440px, 1.45fr) minmax(240px, .8fr);
  align-items: start;
  gap: 14px;
}

.wsc-sp-admin-topic-list,
.wsc-sp-module-list,
.wsc-sp-review-list,
.wsc-sp-camp-question-list {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.wsc-sp-admin-topic-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 7px;
}

.wsc-sp-admin-topic-list a {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 4px;
  color: inherit;
  text-decoration: none;
}

.wsc-sp-admin-topic-row > input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--sp-purple);
}

.wsc-sp-admin-topic-row:hover,
.wsc-sp-admin-topic-row.is-active {
  background: #f5f1fa;
}

.wsc-sp-admin-topic-list a > span,
.wsc-sp-admin-topic-list a > b {
  color: var(--sp-purple-dark);
  font-size: 9px;
  font-weight: 850;
}

.wsc-sp-admin-topic-list strong,
.wsc-sp-admin-topic-list small {
  display: block;
}

.wsc-sp-admin-topic-list strong {
  font-size: 11px;
}

.wsc-sp-admin-topic-list small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--sp-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-admin-editor > .wsc-sp-admin-form {
  padding: 16px 18px;
}

.wsc-sp-admin-editor > hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--sp-line);
}

.wsc-sp-admin-section-title {
  padding: 18px 18px 8px;
}

.wsc-sp-admin-section-title h2,
.wsc-sp-admin-section-title p {
  margin: 0;
}

.wsc-sp-admin-section-title h2 {
  font-size: 15px;
}

.wsc-sp-admin-section-title p {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-admin-form {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.wsc-sp-admin-form label,
.wsc-sp-topic-form label {
  display: grid;
  gap: 6px;
  color: #51475d;
  font-size: 10px;
  font-weight: 800;
}

.wsc-sp-admin-form input:not([type="checkbox"]):not([type="file"]),
.wsc-sp-admin-form select,
.wsc-sp-admin-form textarea,
.wsc-sp-topic-form input,
.wsc-sp-topic-form select,
.wsc-sp-topic-form textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 6px;
  color: var(--sp-ink);
  background: #fff;
  font-size: 11px;
  font-weight: 500;
}

.wsc-sp-admin-form textarea,
.wsc-sp-topic-form textarea {
  min-height: 86px;
  resize: vertical;
  line-height: 1.6;
}

.wsc-sp-admin-form input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--sp-line-strong);
  border-radius: 6px;
  background: var(--sp-surface-soft);
  font-size: 10px;
}

.wsc-sp-audio-field {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: var(--sp-surface-soft);
}

.wsc-sp-audio-field.is-prompt {
  border-color: #d7c6f2;
  background: #faf7ff;
}

.wsc-sp-audio-field.is-answer {
  border-color: #c7e2d4;
  background: #f4fbf7;
}

.wsc-sp-current-audio {
  display: block;
  margin-top: 2px;
}

.wsc-sp-current-audio audio {
  margin-top: 2px;
}

.wsc-sp-current-audio small,
.wsc-sp-audio-field > small {
  display: block;
  margin-top: 5px;
  color: var(--sp-muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
}

.wsc-sp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wsc-sp-admin-create {
  margin: 8px;
  border: 1px dashed var(--sp-line-strong);
  border-radius: 7px;
  overflow: hidden;
}

.wsc-sp-admin-create > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--sp-purple-dark);
  background: #faf8fd;
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.wsc-sp-admin-create > summary::-webkit-details-marker,
.wsc-sp-question-editor > summary::-webkit-details-marker {
  display: none;
}

.wsc-sp-question-editor {
  margin: 8px 18px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  overflow: hidden;
}

.wsc-sp-question-editor > summary {
  min-height: 48px;
  display: grid;
  grid-template-columns: 16px 20px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: var(--sp-surface-soft);
  list-style: none;
  cursor: pointer;
}

.wsc-sp-question-editor > summary > input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--sp-purple);
}

.wsc-sp-question-editor > summary strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-question-editor > summary b {
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-module-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-module-list article:last-child {
  border-bottom: 0;
}

.wsc-sp-module-list article.is-active {
  background: var(--sp-purple-soft);
}

.wsc-sp-module-list article > .dashicons {
  color: var(--sp-purple);
}

.wsc-sp-module-list strong,
.wsc-sp-module-list small {
  display: block;
}

.wsc-sp-module-list strong {
  font-size: 11px;
}

.wsc-sp-module-list small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-module-list form button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--sp-coral);
  background: var(--sp-coral-soft);
}

.wsc-sp-camp-settings {
  margin-bottom: 14px;
  padding: 14px 16px;
  box-shadow: none;
}

.wsc-sp-camp-settings form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wsc-sp-camp-settings p {
  margin: 9px 0 0;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-camp-admin-grid,
.wsc-sp-schedule-admin-grid,
.wsc-sp-rights-admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 14px;
}

.wsc-sp-camp-question-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-camp-question-list strong,
.wsc-sp-camp-question-list small {
  display: block;
}

.wsc-sp-camp-question-list strong {
  font-size: 11px;
}

.wsc-sp-camp-question-list small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-camp-question-list img {
  width: 100%;
  max-height: 220px;
  margin-top: 9px;
  object-fit: contain;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  background: #f7f5fa;
}

.wsc-sp-camp-attempts {
  margin-top: 14px;
}

.wsc-sp-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.wsc-sp-table-wrap table {
  width: 100%;
  min-width: 760px;
  border: 0;
  border-collapse: collapse;
}

.wsc-sp-table-wrap th,
.wsc-sp-table-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--sp-line);
  color: #51475d;
  font-size: 10px;
  text-align: left;
  vertical-align: middle;
}

.wsc-sp-table-wrap th {
  color: var(--sp-muted);
  background: var(--sp-surface-soft);
  font-weight: 850;
}

.wsc-sp-table-wrap td strong,
.wsc-sp-table-wrap td small {
  display: block;
}

.wsc-sp-table-wrap td small {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-attempt-detail {
  margin: 16px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 7px;
  overflow: hidden;
}

.wsc-sp-attempt-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  background: #faf8fd;
}

.wsc-sp-attempt-detail h2,
.wsc-sp-attempt-detail p {
  margin: 0;
}

.wsc-sp-attempt-detail h2 {
  margin-top: 7px;
  font-size: 16px;
}

.wsc-sp-attempt-detail p {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-attempt-recordings {
  display: grid;
}

.wsc-sp-attempt-recordings article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--sp-line);
}

.wsc-sp-recording-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 10px;
  font-weight: 900;
}

.wsc-sp-attempt-recordings h3 {
  margin: 8px 0 0;
  font-size: 12px;
}

.wsc-sp-attempt-recordings label {
  display: block;
  margin-top: 10px;
  color: var(--sp-muted);
  font-size: 9px;
  font-weight: 800;
}

.wsc-sp-attempt-recordings img {
  width: min(100%, 420px);
  max-height: 360px;
  display: block;
  margin-top: 10px;
  object-fit: contain;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
}

.wsc-sp-review-admin-grid {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(360px, 1.15fr) minmax(300px, .9fr);
  align-items: start;
  gap: 14px;
}

.wsc-sp-review-list {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.wsc-sp-review-list a {
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}

.wsc-sp-review-list a:hover,
.wsc-sp-review-list a.is-active {
  background: #f5f1fa;
}

.wsc-sp-review-list a > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 9px;
  font-weight: 900;
}

.wsc-sp-review-list strong,
.wsc-sp-review-list small {
  display: block;
}

.wsc-sp-review-list strong {
  font-size: 11px;
}

.wsc-sp-review-list small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
  line-height: 1.5;
}

.wsc-sp-review-list b {
  color: var(--sp-yellow);
  font-size: 9px;
}

.wsc-sp-review-player,
.wsc-sp-review-form {
  padding-bottom: 16px;
}

.wsc-sp-review-player > h2,
.wsc-sp-review-player > audio,
.wsc-sp-review-player > a {
  margin-left: 18px;
  margin-right: 18px;
}

.wsc-sp-review-player > h2 {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.55;
}

.wsc-sp-score-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wsc-sp-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
}

.wsc-sp-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wsc-sp-admin-empty {
  padding: 34px 20px;
  color: var(--sp-muted);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 1280px) {
  .wsc-sp-content-admin-grid,
  .wsc-sp-review-admin-grid {
    grid-template-columns: minmax(220px, .66fr) minmax(0, 1.34fr);
  }

  .wsc-sp-content-admin-grid > :last-child,
  .wsc-sp-review-admin-grid > :last-child {
    grid-column: 1 / -1;
  }

  .wsc-sp-slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .wsc-sp-practice-grid,
  .wsc-sp-camp-admin-grid,
  .wsc-sp-schedule-admin-grid,
  .wsc-sp-rights-admin-grid {
    grid-template-columns: 1fr;
  }

  .wsc-sp-practice-grid .wsc-sp-recorder {
    min-height: 360px;
  }

  .wsc-sp-admin-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .wsc-sp-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsc-sp-bulk-import .wsc-sp-admin-form {
    grid-template-columns: 1fr 1fr;
  }

  .wsc-sp-bulk-import .wsc-sp-admin-form > label:first-of-type {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .wsc-sp-bulk-or {
    display: none;
  }

  .wsc-sp-form-hint {
    grid-column: 1 / -1;
  }
}

@media (max-width: 782px) {
  .wsc-sp-topbar {
    position: relative;
    min-height: 66px;
    padding: 10px 16px;
  }

  .wsc-sp-brand > span {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 19px;
  }

  .wsc-sp-brand small,
  .wsc-sp-account div {
    display: none;
  }

  .wsc-sp-student-nav {
    top: 0;
    overflow-x: auto;
    padding: 6px 10px;
    scrollbar-width: none;
  }

  .wsc-sp-student-nav::-webkit-scrollbar {
    display: none;
  }

  .wsc-sp-student-nav a {
    flex: 0 0 auto;
    padding: 0 11px;
  }

  .wsc-sp-student-nav .wsc-sp-back {
    margin-left: 0;
  }

  .wsc-sp-main,
  .wsc-sp-camp-main {
    padding: 22px 14px 38px;
  }

  .wsc-sp-page-head {
    align-items: flex-start;
  }

  .wsc-sp-page-head h1 {
    font-size: 25px;
  }

  .wsc-sp-library-grid,
  .wsc-sp-content-admin-grid,
  .wsc-sp-review-admin-grid {
    grid-template-columns: 1fr;
  }

  .wsc-sp-content-admin-grid > :last-child,
  .wsc-sp-review-admin-grid > :last-child {
    grid-column: auto;
  }

  .wsc-sp-topic-panel {
    max-height: 330px;
  }

  .wsc-sp-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsc-sp-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsc-sp-resource-bar > div {
    flex: 1 0 100%;
  }

  .wsc-sp-resource-bar a {
    flex: 1 1 150px;
    justify-content: center;
  }

  .wsc-sp-resource-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .wsc-sp-resource-attachment iframe {
    min-height: 520px;
  }

  .wsc-sp-pending-list {
    grid-template-columns: 1fr;
  }

  .wsc-sp-mini-recorder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsc-sp-locked-answer {
    grid-template-columns: 1fr;
  }

  .wsc-sp-mini-recorder > span {
    grid-column: 1 / -1;
  }

  .wsc-sp-camp-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .wsc-sp-admin.wrap {
    width: auto;
    margin: 0;
  }

  .wsc-sp-admin-shell {
    display: block;
  }

  .wsc-sp-admin-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--sp-line);
  }

  .wsc-sp-admin-brand {
    padding: 0 3px 11px;
  }

  .wsc-sp-admin-sidebar nav {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    margin-top: 10px;
    overflow-x: auto;
  }

  .wsc-sp-admin-sidebar nav a {
    justify-content: center;
  }

  .wsc-sp-admin-sidebar footer {
    display: none;
  }

  .wsc-sp-admin-main {
    padding: 20px 14px 36px;
  }

  .wsc-sp-admin-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .wsc-sp-admin-head h1 {
    font-size: 25px;
  }

  .wsc-sp-attempt-recordings article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .wsc-sp-attempt-recordings article > .button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Speaking workflow, grouped authoring, and private guided-practice notes */
.wsc-sp-part-tabs {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.wsc-sp-practice-note {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #ddd1ee;
}

.wsc-sp-practice-note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wsc-sp-practice-note-head strong,
.wsc-sp-practice-note-head small {
  display: block;
}

.wsc-sp-practice-note-head strong {
  color: var(--sp-ink);
  font-size: 14px;
}

.wsc-sp-practice-note-head small,
.wsc-sp-practice-note label > small,
.wsc-sp-practice-note-actions small {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
}

.wsc-sp-practice-note-head > .dashicons {
  color: var(--sp-purple);
}

.wsc-sp-practice-note label {
  display: grid;
  gap: 7px;
  color: #51475d;
  font-size: 12px;
  font-weight: 800;
}

.wsc-sp-practice-note textarea {
  width: 100%;
  min-height: 116px;
  padding: 11px 12px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 6px;
  color: var(--sp-ink);
  background: #fff;
  font: inherit;
  line-height: 1.65;
  resize: vertical;
}

.wsc-sp-practice-note input[type="file"] {
  width: 100%;
  padding: 9px;
  border: 1px dashed var(--sp-line-strong);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
}

.wsc-sp-practice-note figure {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: #fff;
}

.wsc-sp-practice-note figure img {
  width: 100%;
  max-height: 420px;
  display: block;
  border-radius: 5px;
  object-fit: contain;
}

.wsc-sp-practice-note figcaption {
  margin-top: 7px;
  overflow: hidden;
  color: var(--sp-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-note-remove {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
  color: #963b45 !important;
}

.wsc-sp-practice-note-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wsc-sp-practice-note-actions .wsc-sp-secondary {
  margin: 0;
}

.wsc-sp-workflow-section {
  margin: 0 0 14px;
  overflow: hidden;
}

.wsc-sp-workflow-summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  list-style: none;
  cursor: pointer;
}

.wsc-sp-workflow-summary::-webkit-details-marker,
.wsc-sp-admin-topic-group > summary::-webkit-details-marker,
.wsc-sp-pending-topic > summary::-webkit-details-marker {
  display: none;
}

.wsc-sp-workflow-summary > div > strong,
.wsc-sp-workflow-summary > div > small {
  display: block;
}

.wsc-sp-workflow-summary > div > strong {
  color: var(--sp-ink);
  font-size: 15px;
}

.wsc-sp-workflow-summary > div > small {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 500;
}

.wsc-sp-workflow-summary > b {
  color: var(--sp-purple-dark);
  font-size: 11px;
  white-space: nowrap;
}

.wsc-sp-workflow-summary > .dashicons,
.wsc-sp-admin-topic-group > summary > .dashicons,
.wsc-sp-pending-topic > summary > .dashicons {
  color: var(--sp-purple);
  transition: transform .16s ease;
}

.wsc-sp-workflow-section[open] > .wsc-sp-workflow-summary {
  border-bottom: 1px solid var(--sp-line);
  background: #fcfaff;
}

.wsc-sp-workflow-section[open] > .wsc-sp-workflow-summary > .dashicons,
.wsc-sp-admin-topic-group[open] > summary > .dashicons,
.wsc-sp-pending-topic[open] > summary > .dashicons {
  transform: rotate(180deg);
}

.wsc-sp-workflow-step {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 12px;
  font-weight: 900;
}

.wsc-sp-workflow-body {
  min-width: 0;
  padding: 14px;
}

.wsc-sp-workflow-range {
  position: relative;
  margin-bottom: 14px;
}

.wsc-sp-workflow-range > .wsc-sp-workflow-step {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 14px;
}

.wsc-sp-workflow-range .wsc-sp-admin-bank-buckets {
  margin: 0;
  padding-left: 58px;
}

.wsc-sp-bulk-import .wsc-sp-workflow-body {
  padding: 0;
}

.wsc-sp-pending-groups {
  display: grid;
  gap: 8px;
}

.wsc-sp-pending-topic {
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  overflow: hidden;
}

.wsc-sp-pending-topic > summary {
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sp-surface-soft);
  list-style: none;
  cursor: pointer;
}

.wsc-sp-pending-topic > summary strong,
.wsc-sp-pending-topic > summary small {
  display: block;
}

.wsc-sp-pending-topic > summary strong {
  font-size: 13px;
}

.wsc-sp-pending-topic > summary small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-pending-topic > summary > b {
  color: #9b6b18;
  font-size: 11px;
}

.wsc-sp-pending-topic .wsc-sp-pending-list {
  grid-template-columns: 1fr;
}

.wsc-sp-pending-topic .wsc-sp-pending-list a {
  grid-template-columns: auto minmax(0, 1fr) 20px;
}

.wsc-sp-content-admin-grid {
  grid-template-columns: minmax(270px, .72fr) minmax(520px, 1.5fr);
}

.wsc-sp-topic-directory-admin,
.wsc-sp-admin-editor {
  min-width: 0;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.wsc-sp-admin-editor {
  min-height: 420px;
  align-self: start;
  display: block;
}

.wsc-sp-admin-editor.is-empty {
  display: grid;
  place-items: center;
}

.wsc-sp-admin-editor.is-empty .wsc-sp-admin-empty {
  max-width: 440px;
}

.wsc-sp-admin-editor.is-empty .wsc-sp-admin-empty strong,
.wsc-sp-admin-editor.is-empty .wsc-sp-admin-empty p {
  display: block;
}

.wsc-sp-admin-editor.is-empty .wsc-sp-admin-empty strong {
  margin-bottom: 7px;
  color: var(--sp-ink);
  font-size: 14px;
}

.wsc-sp-admin-editor.is-empty .wsc-sp-admin-empty p {
  margin: 0;
}

.wsc-sp-compact-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-compact-head strong,
.wsc-sp-compact-head small {
  display: block;
}

.wsc-sp-compact-head strong {
  color: var(--sp-ink);
  font-size: 14px;
}

.wsc-sp-compact-head small {
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-compact-head > span:not(.wsc-sp-badge) {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 11px;
  font-weight: 900;
}

.wsc-sp-admin-topic-groups {
  padding: 8px;
}

.wsc-sp-admin-topic-group {
  margin-bottom: 7px;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  overflow: hidden;
}

.wsc-sp-admin-topic-group > summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  color: var(--sp-purple-dark);
  background: #faf8fd;
  list-style: none;
  cursor: pointer;
}

.wsc-sp-admin-topic-group > summary strong {
  font-size: 12px;
}

.wsc-sp-admin-topic-group > summary span {
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-topic-bulk-tools {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--sp-line);
  background: #fcfbfd;
}

.wsc-sp-topic-bulk-tools .wsc-sp-admin-create {
  margin: 0;
}

.wsc-sp-topic-meta-editor {
  margin: 10px 14px;
}

.wsc-sp-question-bulk-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 14px 12px;
}

.wsc-sp-question-bulk-tools > form {
  margin: 0;
}

.wsc-sp-question-bulk-tools .wsc-sp-bulk-delete-form {
  min-height: 60px;
}

.wsc-sp-admin-question-list {
  display: grid;
  gap: 7px;
  padding: 0 14px 8px;
}

.wsc-sp-question-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: start;
  gap: 7px;
}

.wsc-sp-question-row .wsc-sp-question-editor {
  width: auto;
  min-width: 0;
  margin: 0;
}

.wsc-sp-question-editor > summary {
  grid-template-columns: 16px 20px minmax(0, 1fr) auto auto auto;
}

.wsc-sp-admin-question-category {
  padding: 3px 6px;
  border-radius: 5px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.wsc-sp-question-category-field {
  padding: 10px;
  border: 1px solid #d7c6f2;
  border-radius: 7px;
  background: #faf7ff;
}

.wsc-sp-question-delete-form.is-quick {
  padding: 0;
}

.wsc-sp-question-quick-delete {
  width: 66px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px;
  border: 1px solid #efc7cb;
  border-radius: 7px;
  color: #963b45;
  background: #fff8f8;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.wsc-sp-question-quick-delete:hover {
  color: #fff;
  border-color: #b94652;
  background: #b94652;
}

.wsc-sp-add-question {
  margin: 8px 14px 14px;
}

.wsc-sp-add-question .wsc-sp-question-row {
  display: block;
}

.wsc-sp-p2-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 2px 14px;
}

.wsc-sp-p2-intro h2,
.wsc-sp-p2-intro p {
  margin: 0;
}

.wsc-sp-p2-intro h2 {
  margin-top: 3px;
  font-size: 15px;
}

.wsc-sp-p2-intro h2 + p {
  margin-top: 5px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-shared-resources .wsc-sp-module-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}

.wsc-sp-shared-resources .wsc-sp-module-list article {
  grid-template-columns: 30px minmax(0, 1fr) auto 30px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
}

@media (max-width: 1180px) {
  .wsc-sp-content-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 782px) {
  .wsc-sp-part-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsc-sp-workflow-summary {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
  }

  .wsc-sp-workflow-summary > b {
    display: none;
  }

  .wsc-sp-workflow-range > .wsc-sp-workflow-step {
    position: static;
    margin-bottom: 7px;
  }

  .wsc-sp-workflow-range .wsc-sp-admin-bank-buckets {
    padding-left: 14px;
  }

  .wsc-sp-question-bulk-tools,
  .wsc-sp-shared-resources .wsc-sp-module-list {
    grid-template-columns: 1fr;
  }

  .wsc-sp-question-row {
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .wsc-sp-question-quick-delete {
    width: 48px;
  }

  .wsc-sp-question-quick-delete > span:last-child,
  .wsc-sp-admin-question-category {
    display: none;
  }

  .wsc-sp-question-editor > summary {
    grid-template-columns: 16px 20px minmax(0, 1fr) auto auto;
  }
}

@media (max-width: 560px) {
  .wsc-sp-page-head,
  .wsc-sp-practice-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .wsc-sp-part-tabs,
  .wsc-sp-segmented {
    width: 100%;
  }

  .wsc-sp-part-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wsc-sp-library-filters {
    align-items: stretch;
  }

  .wsc-sp-bank-meta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsc-sp-bank-meta .wsc-sp-badge {
    min-width: 0;
    padding-inline: 6px;
    white-space: normal;
    text-align: center;
  }

  .wsc-sp-bank-meta .wsc-sp-badge.is-green:last-child {
    grid-column: 1 / -1;
  }

  .wsc-sp-library-filters strong {
    width: 100%;
  }

  .wsc-sp-library-filters button {
    flex: 1 1 calc(33.333% - 8px);
  }

  .wsc-sp-question-actions,
  .wsc-sp-question-state-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .wsc-sp-question-actions > *,
  .wsc-sp-question-state-actions button {
    width: 100%;
  }

  .wsc-sp-bulk-import .wsc-sp-admin-form {
    grid-template-columns: 1fr;
  }

  .wsc-sp-bulk-import .wsc-sp-admin-form > label:first-of-type,
  .wsc-sp-form-hint {
    grid-column: auto;
  }

  .wsc-sp-practice-toolbar .wsc-sp-secondary {
    width: 100%;
  }

  .wsc-sp-prompt-card,
  .wsc-sp-recorder,
  .wsc-sp-camp-question {
    min-height: 0;
    padding: 16px;
  }

  .wsc-sp-record-actions > button {
    flex: 1 1 130px;
  }

  .wsc-sp-slot-grid,
  .wsc-sp-admin-stats,
  .wsc-sp-form-grid,
  .wsc-sp-score-fields {
    grid-template-columns: 1fr;
  }

  .wsc-sp-accordion-body {
    padding-left: 10px;
  }

  .wsc-sp-sample-head {
    align-items: flex-start;
  }

  .wsc-sp-audio-trigger {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 9px;
  }

  .wsc-sp-audio-trigger .dashicons {
    width: 13px;
    height: 13px;
    font-size: 13px;
    line-height: 13px;
  }

  .wsc-sp-feedback-item > summary {
    padding: 15px;
  }

  .wsc-sp-resource-item-list {
    padding: 12px;
  }

  .wsc-sp-resource-item-list a {
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    gap: 8px;
    padding: 12px 10px;
  }

  .wsc-sp-resource-item-list b {
    display: none;
  }

  .wsc-sp-resource-detail {
    padding: 16px;
  }

  .wsc-sp-resource-attachment iframe {
    min-height: 420px;
  }

  .wsc-sp-bulk-status-form {
    align-items: stretch;
    flex-direction: column;
  }

  .wsc-sp-resource-admin-list article {
    grid-template-columns: 16px minmax(0, 1fr) auto;
  }

  .wsc-sp-resource-admin-list article > form {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .wsc-sp-gate section {
    padding: 28px 20px;
  }

  .wsc-sp-camp-settings form {
    align-items: stretch;
    flex-direction: column;
  }

  .wsc-sp-toast {
    right: 12px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wsc-sp-app *,
  .wsc-sp-admin * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Speaking bank status and P2 linked-topic tools */
.wsc-sp-bank-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.wsc-sp-bank-status-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 15px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  color: var(--sp-ink);
  background: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wsc-sp-bank-status-card:hover,
.wsc-sp-bank-status-card.is-active {
  border-color: var(--sp-purple);
  box-shadow: 0 8px 18px rgba(81, 48, 167, .12);
  transform: translateY(-1px);
}

.wsc-sp-bank-status-card span {
  overflow: hidden;
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-bank-status-card strong {
  grid-row: 1 / 3;
  color: var(--sp-purple-dark);
  font-size: 26px;
  line-height: 1;
}

.wsc-sp-bank-status-card small {
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-bank-status-card.is-new {
  border-color: #ccbaf0;
  background: #f8f5ff;
}

.wsc-sp-bank-status-card.is-new strong,
.wsc-sp-bank-status-card.is-new span {
  color: var(--sp-purple-dark);
}

.wsc-sp-bank-status-card.is-common {
  border-color: #e5d39b;
  background: #fffaf0;
}

.wsc-sp-bank-status-card.is-common strong,
.wsc-sp-bank-status-card.is-common span {
  color: var(--sp-yellow);
}

.wsc-sp-bank-status-card.is-old strong,
.wsc-sp-bank-status-card.is-old span {
  color: #655d70;
}

.wsc-sp-admin-bank-buckets {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: #fff;
}

.wsc-sp-admin-bank-buckets > div:first-child {
  display: grid;
  gap: 4px;
}

.wsc-sp-admin-bank-buckets strong {
  color: var(--sp-ink);
  font-size: 13px;
}

.wsc-sp-admin-bank-buckets small {
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-admin-bank-bucket-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.wsc-sp-admin-bank-bucket-links a {
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  color: var(--sp-ink);
  background: var(--sp-surface-soft);
  text-decoration: none;
}

.wsc-sp-admin-bank-bucket-links a:hover,
.wsc-sp-admin-bank-bucket-links a.is-active {
  border-color: var(--sp-purple);
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
}

.wsc-sp-admin-bank-bucket-links a.is-new.is-active {
  border-color: #7c3aed;
  background: #f5efff;
}

.wsc-sp-admin-bank-bucket-links a.is-common.is-active {
  border-color: #d8b85c;
  color: #775800;
  background: #fffaf0;
}

.wsc-sp-admin-bank-bucket-links a strong {
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-admin-bank-bucket-links a span {
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-bulk-delete-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 18px;
  padding: 12px 14px;
  border: 1px solid #efc7cb;
  border-radius: 7px;
  background: #fff8f8;
}

.wsc-sp-bulk-delete-form > div {
  display: grid;
  gap: 4px;
}

.wsc-sp-bulk-delete-form strong {
  color: #8e303b;
  font-size: 11px;
}

.wsc-sp-bulk-delete-form small {
  color: var(--sp-muted);
  font-size: 9px;
  line-height: 1.5;
}

.wsc-sp-danger-button {
  flex: 0 0 auto;
  color: #8e303b !important;
  border-color: #e7aeb4 !important;
  background: #fff !important;
}

.wsc-sp-danger-button:hover {
  color: #fff !important;
  border-color: #b94652 !important;
  background: #b94652 !important;
}

.wsc-sp-question-delete-form {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 14px;
}

.wsc-sp-question-delete-form .button {
  min-height: 30px;
  padding: 3px 9px;
  font-size: 10px;
}

.wsc-sp-question-novelty.is-common,
.wsc-sp-question-editor > summary em.is-common {
  color: #775800;
  background: #fff0bb;
}

.wsc-sp-question-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.wsc-sp-question-category {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 5px;
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
  font-size: 10px;
  font-weight: 800;
}

.wsc-sp-p2-set-library {
  margin: 0 0 16px;
  padding: 18px;
}

.wsc-sp-p2-set-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.wsc-sp-p2-set-list article {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: var(--sp-surface-soft);
}

.wsc-sp-p2-set-heading,
.wsc-sp-p2-admin-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wsc-sp-p2-set-heading strong,
.wsc-sp-p2-set-heading small {
  display: block;
}

.wsc-sp-p2-set-heading strong {
  font-size: 13px;
}

.wsc-sp-p2-set-heading small,
.wsc-sp-p2-set-heading span,
.wsc-sp-p2-set-season {
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-p2-set-heading small,
.wsc-sp-p2-set-season {
  margin-top: 3px;
}

.wsc-sp-p2-set-list details {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--sp-line);
}

.wsc-sp-p2-set-list details summary {
  color: var(--sp-purple-dark);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.wsc-sp-p2-set-list details p {
  margin: 7px 0 0;
  color: var(--sp-muted);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.wsc-sp-p2-set-list article > audio {
  width: 100%;
  height: 34px;
  margin-top: 10px;
}

.wsc-sp-p2-set-topics {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.wsc-sp-p2-set-topics a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--sp-line);
  border-radius: 5px;
  color: var(--sp-ink);
  background: #fff;
  font-size: 10px;
  text-decoration: none;
}

.wsc-sp-p2-set-topics a:hover {
  border-color: var(--sp-line-strong);
  color: var(--sp-purple-dark);
}

.wsc-sp-bank-settings {
  margin: 0 0 14px;
  overflow: hidden;
}

.wsc-sp-bank-settings > summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 18px;
  list-style: none;
  cursor: pointer;
}

.wsc-sp-bank-settings > summary::-webkit-details-marker {
  display: none;
}

.wsc-sp-bank-settings > summary strong,
.wsc-sp-bank-settings > summary small {
  display: block;
}

.wsc-sp-bank-settings > summary strong {
  font-size: 13px;
}

.wsc-sp-bank-settings > summary small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 10px;
}

.wsc-sp-bank-settings > summary .dashicons {
  color: var(--sp-purple);
}

.wsc-sp-bank-settings[open] > summary {
  border-bottom: 1px solid var(--sp-line);
}

.wsc-sp-p2-set-admin {
  margin: 0 0 14px;
  overflow: hidden;
}

.wsc-sp-p2-admin-layout {
  display: grid;
  grid-template-columns: minmax(190px, .62fr) minmax(0, 1.38fr);
  gap: 0;
}

.wsc-sp-p2-set-list,
.wsc-sp-p2-builder-pane {
  min-width: 0;
  padding: 14px;
}

.wsc-sp-p2-set-admin .wsc-sp-p2-set-list {
  grid-template-columns: 1fr;
}

.wsc-sp-p2-set-list {
  display: grid;
  align-content: start;
  gap: 5px;
  border-right: 1px solid var(--sp-line);
  background: #fcfbfd;
}

.wsc-sp-p2-set-list > a {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.wsc-sp-p2-set-list > a:hover,
.wsc-sp-p2-set-list > a.is-active {
  color: var(--sp-purple-dark);
  background: var(--sp-purple-soft);
}

.wsc-sp-p2-set-list > a strong,
.wsc-sp-p2-set-list > a small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-p2-set-list > a strong {
  font-size: 11px;
}

.wsc-sp-p2-set-list > a small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-p2-admin-subhead {
  margin-bottom: 9px;
}

.wsc-sp-p2-admin-subhead strong {
  font-size: 11px;
}

.wsc-sp-p2-admin-subhead small {
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-p2-builder-pane > form:first-child {
  padding: 0;
}

.wsc-sp-p2-save-actions {
  display: flex;
  align-items: end;
  justify-content: flex-start;
}

.wsc-sp-p2-builder-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 3px;
}

.wsc-sp-p2-topic-pool,
.wsc-sp-p2-dropzone {
  min-width: 0;
  min-height: 160px;
  padding: 11px;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: var(--sp-surface-soft);
}

.wsc-sp-p2-topic-pool > article,
.wsc-sp-p2-dropzone [data-p2-selected-topic] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--sp-line);
  border-radius: 5px;
  background: #fff;
}

.wsc-sp-p2-topic-pool > article {
  cursor: grab;
}

.wsc-sp-p2-topic-pool > article.is-dragging {
  opacity: .55;
}

.wsc-sp-p2-topic-pool strong,
.wsc-sp-p2-topic-pool small,
.wsc-sp-p2-dropzone [data-p2-selected-topic] strong,
.wsc-sp-p2-dropzone [data-p2-selected-topic] small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsc-sp-p2-topic-pool strong,
.wsc-sp-p2-dropzone [data-p2-selected-topic] strong {
  font-size: 10px;
}

.wsc-sp-p2-topic-pool small,
.wsc-sp-p2-dropzone [data-p2-selected-topic] small {
  margin-top: 3px;
  color: var(--sp-muted);
  font-size: 9px;
}

.wsc-sp-p2-topic-pool .button,
.wsc-sp-p2-set-admin .button {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 10px;
}

.wsc-sp-p2-dropzone {
  border-style: dashed;
}

.wsc-sp-p2-dropzone.is-drag-over {
  border-color: var(--sp-purple);
  background: #f4effe;
}

.wsc-sp-p2-dropzone [data-p2-selected-topic] {
  grid-template-columns: 18px minmax(0, 1fr) 28px;
  cursor: default;
}

.wsc-sp-p2-dropzone [data-p2-selected-topic] > .dashicons {
  color: var(--sp-muted);
}

.wsc-sp-p2-dropzone [data-p2-remove] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  color: var(--sp-muted);
  background: transparent;
}

.wsc-sp-p2-dropzone [data-p2-remove]:hover {
  color: var(--sp-coral);
}

.wsc-sp-p2-drop-hint {
  margin: 27px 0 20px;
  color: var(--sp-muted);
  font-size: 10px;
  text-align: center;
}

.wsc-sp-p2-builder-pane > form + form {
  margin-top: 8px;
  padding: 0 0 10px;
}

@media (max-width: 782px) {
  .wsc-sp-bank-status-strip,
  .wsc-sp-p2-set-list,
  .wsc-sp-p2-builder-columns {
    grid-template-columns: 1fr;
  }

  .wsc-sp-p2-admin-layout {
    display: block;
  }

  .wsc-sp-p2-set-admin .wsc-sp-p2-set-list {
    grid-template-columns: 1fr;
  }

  .wsc-sp-p2-set-list {
    border-right: 0;
    border-bottom: 1px solid var(--sp-line);
  }

  .wsc-sp-p2-set-library {
    padding: 14px;
  }

  .wsc-sp-admin-bank-bucket-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsc-sp-bulk-delete-form {
    align-items: stretch;
    flex-direction: column;
  }

  .wsc-sp-bulk-delete-form .button {
    width: 100%;
  }
}

/* V1.1 Learning Experience Polish: student feedback entitlement label only. */
.wsc-sp-app .wsc-sp-feedback-elite-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 7px;
  padding: 3px 7px;
  border: 1px solid #bfe4d1;
  border-radius: 5px;
  color: var(--sp-green);
  background: var(--sp-green-soft);
  font-family: inherit;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  vertical-align: middle;
}