/* 页面内就地练习（public/practice-anywhere.js）。所有选择器都带 .pa- 前缀，不碰页面其它样式。 */
.pa-mount { margin: 14px 0; min-height: 132px; }
.pa-mount[data-practice-input="free_steps"] { min-height: 108px; }
.pa-mount[data-practice-collapsed] { min-height: 44px; margin: 10px 0; }
.pa-mount[hidden] { display: none; }
.pa-open { min-height: 44px; padding: 8px 16px; border: 1.5px dashed var(--accent, #5e5ce6); border-radius: 8px; background: #fafaff; color: var(--accent, #5e5ce6); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pa-open:hover { background: #eef1ff; }
.pa-card { padding: 14px 16px; border: 1px solid var(--border, #e5e5ea); border-left: 4px solid var(--accent, #5e5ce6); border-radius: 10px; background: #fafaff; }
.pa-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.pa-head b { font-size: 15px; color: var(--text, #1d1d1f); }
.pa-head span, .pa-hint, .pa-foot, .pa-label { font-size: 12.5px; color: var(--text2, #6e6e73); }
.pa-hint, .pa-foot { margin: 8px 0 0; line-height: 1.6; }
.pa-label { display: block; margin-bottom: 6px; }
.pa-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-choice { min-width: 52px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--border, #e5e5ea); border-radius: 8px; background: #fff; color: var(--text, #1d1d1f); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.pa-choice:hover:not(:disabled) { border-color: var(--accent, #5e5ce6); }
.pa-choice.is-selected { border-color: var(--accent, #5e5ce6); background: #eef1ff; color: var(--accent, #5e5ce6); }
.pa-choice.is-correct { border-color: #137333; background: #e6f4ea; color: #137333; }
.pa-choice.is-wrong { border-color: #c5221f; background: #fce8e6; color: #c5221f; }
.pa-choice:disabled { cursor: default; }
.pa-input, .pa-textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border, #e5e5ea); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--text, #1d1d1f); }
.pa-input:focus, .pa-textarea:focus { outline: none; border-color: var(--accent, #5e5ce6); }
.pa-preview { min-height: 22px; margin-top: 6px; overflow-x: auto; font-size: 15px; }
.pa-preview-label { margin-right: 6px; font-size: 11.5px; color: var(--text3, #aeaeb2); }
.pa-symbols { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pa-symbol { min-width: 44px; min-height: 40px; padding: 4px 10px; border: 1px solid var(--border, #e5e5ea); border-radius: 7px; background: #fff; color: var(--text2, #6e6e73); font: inherit; font-size: 14px; cursor: pointer; }
.pa-scratch summary { cursor: pointer; font-size: 13px; color: var(--text2, #6e6e73); }
.pa-scratch .pa-textarea { margin-top: 8px; }
.pa-submit { margin-top: 12px; min-height: 44px; padding: 9px 20px; border: 0; border-radius: 8px; background: var(--accent, #5e5ce6); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pa-submit:disabled { opacity: .5; cursor: default; }
.pa-result { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #f5f5f7; font-size: 14px; line-height: 1.6; }
.pa-result.is-correct { background: #e6f4ea; color: #137333; }
.pa-result.is-wrong { background: #fce8e6; color: #a1201c; }
.pa-result.is-error { background: #fef7e0; color: #b06000; }
.pa-assess-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pa-assess-btn { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--border, #e5e5ea); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pa-assess-btn:hover { border-color: var(--accent, #5e5ce6); color: var(--accent, #5e5ce6); }
@media (max-width: 680px) {
  .pa-card { padding: 12px; }
  .pa-choice { flex: 1 1 calc(25% - 8px); }
  .pa-open { width: 100%; }
  .pa-submit, .pa-assess-btn { flex: 1 1 auto; }
  .pa-submit { width: 100%; }
}