.learning-helper { max-width: 960px; }
  .helper-context { padding: 14px 18px; border-left: 3px solid var(--club-good); background: var(--club-panel); margin-bottom: 24px; overflow-wrap: anywhere; }
  .helper-context p { margin: 0; }
  .helper-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--club-line); }
  .helper-header h2 { margin: 0; }
  .helper-empty { padding: 26px 0; max-width: 64ch; }
  .helper-empty h3 { margin: 0 0 10px; }
  .helper-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .helper-samples .button { text-align: left; white-space: normal; }
  .helper-history { padding: 0; margin: 0; overflow-wrap: anywhere; }
  .helper-turn { padding: 24px 0; border-bottom: 1px solid var(--club-line); }
  .helper-question { padding: 14px 18px; margin: 0 0 22px; border-radius: 5px; background: var(--club-bg); white-space: pre-wrap; }
  .helper-question strong, .helper-answer-label { display: block; color: var(--club-muted); font-size: 12px; margin-bottom: 6px; }
  .helper-answer { white-space: pre-wrap; margin: 8px 0 20px; }
  .helper-source { margin: 12px 0; padding: 18px; background: var(--club-bg); border: 1px solid var(--club-line); border-radius: 5px; }
  .helper-source h4 { margin: 0 0 10px; font-size: 15px; }
  .helper-source blockquote { margin: 0; padding-left: 14px; border-left: 2px solid var(--club-accent); white-space: pre-wrap; font-size: 14px; }
  .helper-source img { display: block; max-width: 100%; max-height: 280px; height: auto; margin: 16px auto 0; object-fit: contain; }
  .helper-composer { margin-top: 24px; }
  .helper-composer textarea { resize: vertical; min-height: 100px; width: 100%; }
  .helper-composer .form-footer { flex-wrap: wrap; gap: 12px; }
  .helper-error { margin-top: 18px; border-left: 3px solid var(--club-danger); padding: 14px 18px; background: var(--club-bg); }
  .helper-error p { margin-top: 0; }
  .helper-loading { padding: 20px 0; }
  .helper-loading p { margin-top: 0; color: var(--club-muted); }
  .helper-skeleton { height: 9px; margin: 12px 0; border-radius: 3px; background: var(--club-line); width: 87%; }
  .helper-skeleton:last-child { width: 59%; }
  .learning-helper [hidden] { display: none !important; }
  @media (max-width: 767px) {
    .helper-header { align-items: flex-start; }
    .helper-source { padding: 14px; }
    .helper-samples { flex-direction: column; align-items: flex-start; }
  }