.explanation-card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 20px; padding: 28px; max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.explanation-card h2 { font-size: 25px; line-height: 1.25; margin: 0 0 24px; }
.explanation-card h3 { font-size: 18px; line-height: 1.4; margin: 0 0 8px; }
.explanation-card p { margin: 0 0 12px; }
.explanation-card-condition { background: var(--bg); border-radius: 12px; padding: 16px; margin-bottom: 24px; }
.explanation-card-condition p { margin-bottom: 0; }
.explanation-card-steps { margin: 16px 0 24px; padding-left: 26px; }
.explanation-card-steps li { padding-left: 4px; margin-bottom: 22px; }
.explanation-card-formula { margin: 10px 0; max-width: 100%; }
.explanation-card-formula .katex-display { text-align: left; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.explanation-card-formula .math-expression, .explanation-card-formula .math-block { max-width: 100%; }
.explanation-card-answer { background: var(--bg); padding: 16px; border-radius: 12px; margin: 20px 0; }
.explanation-card-answer .explanation-card-formula { margin-bottom: 0; }
.explanation-card-check, .explanation-card-applications, .explanation-card-takeaway { margin-top: 24px; }
.explanation-card-applications { border-top: 1px solid var(--border); padding-top: 22px; }
.explanation-card dt { font-weight: 650; margin-top: 12px; }
.explanation-card dd { margin: 2px 0 0; }
@media (max-width: 440px) {
  .explanation-card { padding: 18px 14px; border-radius: 14px; }
  .explanation-card h2 { font-size: 22px; }
  .explanation-card-steps { padding-left: 22px; }
}
/* Full lessons retain readable body text inside compact legacy modal styles. */
.ai-explanation .explanation-card { text-align: left; }
.ai-explanation .explanation-card p,
.ai-explanation .explanation-card li,
.ai-explanation .explanation-card dd { font-size: 16px; line-height: 1.65; color: var(--text); text-align: left; }
.ai-explanation .explanation-card h2,
.ai-explanation .explanation-card h3 { text-align: left; }
/* Display formulas use the available line width. Shrink-wrapped inline boxes
   can create spurious nested scrollbars around KaTeX aligned equations. */
.explanation-card-formula > .math-expression,
.explanation-card-formula .math-expression-content { display: block; }
/* A long equation must not impose a min-content width on the modal's grid. */
.ai-explanation > .explanation-card { min-width: 0; width: 100%; }