.x-shell.theme-contrast {
  --bg: #f7f6f1;
  --surface: #ffffff;
  --surface-soft: #efede6;
  --ink: #111827;
  --muted: #4b5563;
  --line: #cec9bd;
  --line-strong: #9f9788;
  --primary: #1f5f55;
  --primary-soft: #dfece7;
  color: var(--ink);
}

.x-shell.theme-contrast .x-card,
.x-shell.theme-contrast .x-panel,
.x-shell.theme-contrast .x-list-panel,
.x-shell.theme-contrast .x-profile-card,
.x-shell.theme-contrast .x-question-card,
.x-shell.theme-contrast .x-attempt-rail > .x-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line);
}

.x-shell.theme-contrast .x-input,
.x-shell.theme-contrast .x-select,
.x-shell.theme-contrast .x-textarea,
.x-shell.theme-contrast .x-table-wrap,
.x-shell.theme-contrast .x-answer-option {
  background: #ffffff;
  border-color: var(--line);
}

.x-shell.theme-contrast .x-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
}

.x-shell.theme-contrast .x-answer-option.active,
.x-shell.theme-contrast .x-rail button.active,
.x-shell.theme-contrast .x-list-row.active {
  background: var(--primary-soft);
  border-color: #99bdb4;
}

.x-join-main { gap: 18px; }
.x-join-summary { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.x-join-summary strong { font-family: Georgia, serif; font-size: 21px; letter-spacing: -0.02em; }
.x-join-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.x-join-facts span { padding: 7px 10px; border-radius: 999px; background: rgba(16, 88, 78, 0.08); color: var(--muted); font-size: 12px; font-weight: 800; }
.x-training-ready { max-width: 860px; margin: 18px auto 0; }
.x-training-ready .x-mini-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.x-training-ready .x-mini-list > div.unavailable { opacity: 0.58; filter: grayscale(0.85); background: var(--surface-soft); border-style: dashed; }
.x-training-ready .x-mini-list span { grid-column: 1; }
.x-training-ready .x-mini-list .x-btn { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 760px) {
  .x-training-ready .x-mini-list > div { grid-template-columns: 1fr; }
  .x-training-ready .x-mini-list span,
  .x-training-ready .x-mini-list .x-btn { grid-column: auto; grid-row: auto; }
}