.answer-input-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 14px 0 12px; }
.answer-input-modes button { min-height: 38px; padding: 7px 16px; border: 1px solid #c9d9de; background: #f4f8fa; color: #51656e; border-radius: 4px; }
.answer-input-modes button[aria-pressed="true"] { background: #e6f2fd; color: #175c9a; border-color: #3985c8; }
.answer-input-modes span { font-size: 12px; color: var(--muted); margin-left: 8px; }
.handwriting-pad { border: 1px solid #bcd6e7; border-radius: 8px; padding: 12px 14px; background: #f8fcff; margin-bottom: 14px; }
.ink-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-bottom: 6px; color: #47718c; font-size: 13px; }
.ink-tools { display: flex; gap: 6px; }
.ink-word-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.ink-word-tabs button { padding: 3px 7px; min-height: 30px; font-size: 12px; color: #396d95; background: white; border: 1px solid #c6dce9; border-radius: 4px; }
.ink-word-tabs button[aria-pressed="true"] { background: #e0effc; border-color: #3985c8; }
.ink-tools .icon-only { width: 36px; height: 36px; min-height: 36px; border-color: #c6dce9; color: #396d95; }
.ink-paper { height: 218px; width: 100%; background-color: #fff; border-top: 1px solid #8ab8d6; border-bottom: 1px solid #8ab8d6;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(33.333% - 1px), #cee1ed calc(33.333% - 1px), #cee1ed 33.333%); }
#inkCanvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
#inkCanvas[aria-disabled="true"] { cursor: default; }
#inkSpaceBtn { margin-top: 12px; border-color: #c6dce9; color: #396d95; font-size: 13px; }
#recognizeInkBtn { display: inline-flex; margin: 12px 0 0 8px; min-width: 140px; justify-content: center; background: #1b68b1; border-color: #1b68b1; color: white; border-radius: 6px; }
.ink-review-label { display: block; font-size: 13px; color: #175c9a; margin-bottom: 6px; }
.answer-form.ink-writing { display: none; }
.question-panel:is([data-phase="idle"], [data-phase="ready"], [data-phase="review"]) :is(.handwriting-pad, .ink-review-label) { display: none; }
.question-panel:is([data-phase="idle"], [data-phase="review"]) .answer-input-modes { display: none; }
.handwriting-active .question-panel h2 { font-size: 26px; line-height: 1.35; }
.handwriting-active #scoreHint { font-size: 12px; margin: 4px 0; }
.handwriting-active #exampleText { margin: 8px 0; }
.handwriting-active .speech-controls { margin: 8px 0; }
.handwriting-active .timer-wrap { margin: 12px 0; grid-template-columns: minmax(0, 1fr) 72px; }
.handwriting-active .timer-wrap::before { right: 84px; }
.handwriting-active #timerText { white-space: nowrap; }
.handwriting-review :is(.speech-controls, .spelling-guidance, .answer-input-modes) { display: none; }
.handwriting-review .ink-paper { height: 126px; }
.handwriting-review .ink-tools { display: none; }
.handwriting-active .spelling-guidance { margin: 8px 0; font-size: 12px; }
.handwriting-active .question-actions { margin-top: 12px; }
@media (max-width: 600px) {
  .handwriting-active .quiz-dialog-body { padding: 14px; }
  .handwriting-active .question-panel h2 { font-size: 22px; }
  .handwriting-pad { padding: 8px 10px; }
  .ink-paper { height: 198px; }
  #inkSpaceBtn, #recognizeInkBtn { padding: 8px 10px; min-width: 0; }
  .handwriting-active .answer-form { grid-template-columns: minmax(0, 1fr); }
  .handwriting-active .answer-form button { width: 100%; }
  .handwriting-active .batch-banner { padding: 12px 14px; }
}
@media (max-height: 600px) and (min-width: 600px) {
  .handwriting-active .ink-paper { height: 165px; }
}