@c2-markdown-ui/react 0.0.0-stage → 0.4.4

package/src/lib/widgets.css

@@ -0,0 +1,1373 @@
+/* Markdown UI React Widgets - Optional Styling */
+/* Users can import this CSS file to apply consistent styling to all widget components */
+
+/* Base widget container */
+.widget {
+  margin: 1rem 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+}
+
+/* Form container */
+.widget-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.widget-form > button[type="button"]:last-child {
+  align-self: flex-start;
+  margin-top: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background-color: #3b82f6;
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+/* Form actions（提交/取消/清空按钮组，data-align 控制对齐） */
+.widget-form-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.widget-form-actions[data-align="left"] { justify-content: flex-start; }
+.widget-form-actions[data-align="center"] { justify-content: center; }
+.widget-form-actions[data-align="right"] { justify-content: flex-end; }
+
+.widget-form-actions button[type="button"] {
+  padding: 0.75rem 1.5rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.widget-form-actions .widget-form-submit {
+  border: none;
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.widget-form-actions .widget-form-submit:hover {
+  background-color: #2563eb;
+}
+
+.widget-form-actions .widget-form-cancel,
+.widget-form-actions .widget-form-reset {
+  background-color: #ffffff;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.widget-form-actions .widget-form-cancel:hover,
+.widget-form-actions .widget-form-reset:hover {
+  background-color: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.widget-form-actions button[type="button"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #3b82f6;
+}
+
+/* Button Group */
+
+/* 单个按钮组件（大/中/小三档尺寸，背景色完全由 color 属性的内联 style 控制） */
+.widget-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: filter 0.2s ease;
+}
+
+.widget-button:hover { filter: brightness(0.9); }
+.widget-button:focus { outline: none; box-shadow: 0 0 0 2px #3b82f6; }
+
+.widget-button.size-small  { padding: 0.25rem 0.75rem; font-size: 0.75rem; }
+.widget-button.size-medium { padding: 0.5rem 1.25rem;  font-size: 0.875rem; }
+.widget-button.size-large  { padding: 0.75rem 1.75rem; font-size: 1rem; }
+.widget-button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.widget-button-group label {
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.25rem;
+}
+
+.widget-button-group div[role="group"] {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.widget-form .widget-button-group button,
+.widget-button-group button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  color: #374151;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.widget-form .widget-button-group button:hover,
+.widget-button-group button:hover {
+  background-color: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.widget-form .widget-button-group button[aria-pressed="true"],
+.widget-button-group button[aria-pressed="true"] {
+  background-color: #3b82f6;
+  color: #ffffff;
+  border-color: #3b82f6;
+}
+
+.widget-form .widget-button-group button:focus,
+.widget-button-group button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #3b82f6;
+}
+
+/* Text Input */
+.widget-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.widget-text-input label {
+  font-weight: 500;
+  color: #374151;
+}
+
+.widget-text-input input[type="text"] {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.widget-text-input input[type="text"]:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.widget-text-input input[type="text"]::placeholder {
+  color: #9ca3af;
+}
+
+/* Select and Select Multi */
+.selector,
+.selector-multi {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.selector label,
+.selector-multi-label {
+  font-weight: 500;
+  color: #374151;
+}
+
+.selector select {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.selector select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.selector option {
+  padding: 0.5rem;
+}
+
+/* Checkbox-based Multi Select */
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background-color: #ffffff;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* 选项布局：横向（flex-wrap 换行）；自定义列数（grid，列宽由 inline style 注入） */
+.checkbox-group[data-direction="horizontal"] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+}
+
+.checkbox-group[data-direction="grid"] {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.25rem 0;
+  font-weight: normal;
+}
+
+.checkbox-item input[type="checkbox"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+.checkbox-item span {
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+/* --- 单选 RadioGroup：圆点单选（antd Radio 默认样式） --- */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background-color: #ffffff;
+}
+
+/* 选项布局：横向（flex-wrap 换行）；自定义列数（grid，列宽由 inline style 注入） */
+.radio-group[data-direction="horizontal"] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+}
+
+.radio-group[data-direction="grid"] {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.radio-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.25rem 0;
+  font-weight: normal;
+}
+
+.radio-item input[type="radio"] {
+  margin: 0;
+  cursor: pointer;
+  accent-color: #3b82f6;
+}
+
+.radio-item span {
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+.radio-item:hover {
+  background-color: #f9fafb;
+  border-radius: 4px;
+  margin: -0.25rem 0;
+  padding: 0.5rem 0.25rem;
+}
+
+/* --- 单选 RadioGroup：按钮组样式（antd Radio optionType:button） --- */
+.radio-button-group {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.radio-button-group[data-direction="vertical"] {
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.radio-button-group[data-direction="grid"] {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.checkbox-item:hover {
+  background-color: #f9fafb;
+  border-radius: 4px;
+  margin: -0.25rem 0;
+  padding: 0.5rem 0.25rem;
+}
+
+/* Slider */
+.widget-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.widget-slider label {
+  font-weight: 500;
+  color: #374151;
+}
+
+.slider-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.slider-values {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-bottom: 0.25rem;
+}
+
+.current-value {
+  font-weight: 600;
+  color: #3b82f6;
+  background: #eff6ff;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  min-width: 2rem;
+  text-align: center;
+}
+
+.min-value, .max-value {
+  font-weight: 500;
+}
+
+.widget-slider input[type="range"] {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #e2e8f0;
+  outline: none;
+  cursor: pointer;
+}
+
+.widget-slider input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.widget-slider input[type="range"]::-webkit-slider-thumb:hover {
+  background: #2563eb;
+}
+
+.widget-slider input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: none;
+  transition: background-color 0.2s ease;
+}
+
+.widget-slider input[type="range"]::-moz-range-thumb:hover {
+  background: #2563eb;
+}
+
+/* Switch（参考 antd Switch） */
+.widget-switch {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.widget-switch > label {
+  font-weight: 500;
+  color: #374151;
+}
+
+.switch-track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: content-box;
+  width: 44px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 11px;
+  background-color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.switch-track[data-checked="true"] {
+  background-color: #3b82f6;
+}
+
+.switch-track:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.switch-track[data-checked="true"]:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.switch-track .switch-thumb {
+  display: block;
+  width: 18px;
+  height: 18px;
+  margin: 2px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease;
+}
+
+.switch-track[data-checked="true"] .switch-thumb {
+  transform: translateX(22px);
+}
+
+.switch-track .switch-text {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 1;
+  user-select: none;
+}
+
+/* 文案位置与 antd 一致：选中后滑块移至右侧，选中文案露在左侧；未选中时滑块在左，未选中文案露在右侧 */
+.switch-track .switch-text-unchecked {
+  right: 6px;
+}
+
+.switch-track .switch-text-checked {
+  left: 6px;
+}
+
+/* 仅显示当前状态对应的文案 */
+.switch-track[data-checked="true"] .switch-text-unchecked {
+  display: none;
+}
+
+.switch-track[data-checked="false"] .switch-text-checked {
+  display: none;
+}
+
+.switch-track:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.switch-track:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #3b82f6;
+}
+
+/* Form submit button styling - hover and focus states */
+.widget-form > button[type="button"]:last-child:hover {
+  background-color: #2563eb;
+}
+
+.widget-form > button[type="button"]:last-child:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #3b82f6;
+}
+
+/* Form row grid layout (24-column grid, similar to antd Row/Col) */
+.widget-form-row {
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  column-gap: var(--row-gutter, 1rem);
+}
+
+.widget-form-row .widget-form-field {
+  min-width: 0;
+}
+
+/* 传统 fields 模式 + 显式 span：切换为 24 栅格（无 span 字段占满整行） */
+.widget-form.widget-form-fields-grid {
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  column-gap: 1rem;
+  row-gap: 1rem;
+  align-items: start;
+}
+
+.widget-form-fields-grid .widget-form-field {
+  min-width: 0;
+}
+
+.widget-form-fields-grid .widget-form-field[data-field-type="button"] {
+  width: max-content;
+  max-width: 100%;
+  align-self: end;
+  padding-bottom: 0;
+}
+
+.widget-form-fields-grid .widget-form-actions {
+  grid-column: 1 / -1;
+}
+
+/* inline 模式 + 显式 span 覆盖 flex-basis 后，收回默认 flex-grow */
+.widget-form-inline .widget-form-field[style*="flex: 0 1"] {
+  flex-grow: 0;
+}
+
+/* Error styling for unknown widgets */
+.widget span[style*="color:red"] {
+  color: #ef4444 !important;
+  font-weight: 500;
+  padding: 0.75rem;
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+/* Multiple Choice Question */
+.widget-mcq {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.mcq-question {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+}
+
+.mcq-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.mcq-choice {
+  padding: 1rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  background-color: #ffffff;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+}
+
+.mcq-choice:hover:not(:disabled) {
+  border-color: #9ca3af;
+  background-color: #f9fafb;
+}
+
+.mcq-choice-selected {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.mcq-choice-correct {
+  border-color: #10b981;
+  background-color: #ecfdf5;
+  color: #065f46;
+}
+
+.mcq-choice-incorrect {
+  border-color: #ef4444;
+  background-color: #fef2f2;
+  color: #991b1b;
+}
+
+.mcq-choice:disabled {
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+.mcq-feedback {
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.mcq-feedback.correct {
+  background-color: #ecfdf5;
+  color: #065f46;
+  border: 1px solid #a7f3d0;
+}
+
+.mcq-feedback.incorrect {
+  background-color: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+/* Short Answer Question */
+.widget-saq {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.saq-question {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+}
+
+.saq-input-container {
+  display: flex;
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+.saq-input {
+  flex: 1;
+  padding: 0.75rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  background-color: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.saq-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.saq-input-correct {
+  border-color: #10b981;
+  background-color: #ecfdf5;
+}
+
+.saq-input-incorrect {
+  border-color: #ef4444;
+  background-color: #fef2f2;
+}
+
+.saq-submit {
+  padding: 0.75rem 1.25rem;
+  background-color: #3b82f6;
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.saq-submit:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.saq-submit:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  cursor: not-allowed;
+}
+
+.saq-feedback {
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.saq-feedback.correct {
+  background-color: #ecfdf5;
+  color: #065f46;
+  border: 1px solid #a7f3d0;
+}
+
+.saq-feedback.incorrect {
+  background-color: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .widget-button-group div[role="group"] {
+    flex-direction: column;
+  }
+  
+  .widget-button-group button {
+    width: 100%;
+  }
+  
+  .widget-form {
+    padding: 1rem;
+  }
+  
+  .saq-input-container {
+    flex-direction: column;
+  }
+  
+  .widget-mcq,
+  .widget-saq,
+  .widget-quiz {
+    padding: 1rem;
+  }
+}
+
+/* Quiz Component */
+.widget-quiz {
+  max-width: 800px;
+  margin: 0 auto;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.quiz-header {
+  padding: 2rem 2rem 1rem;
+  border-bottom: 1px solid #e2e8f0;
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  color: white;
+  border-radius: 12px 12px 0 0;
+}
+
+.quiz-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+  text-align: center;
+  color: white;
+}
+
+.quiz-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+  color: white;
+}
+
+.quiz-progress {
+  flex: 1;
+  min-width: 200px;
+}
+
+.quiz-progress-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  display: block;
+  color: white;
+}
+
+.quiz-progress-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.quiz-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #10b981, #34d399);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.quiz-score {
+  text-align: right;
+}
+
+.quiz-score-text {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: white;
+}
+
+.quiz-questions {
+  padding: 1.5rem;
+}
+
+.quiz-question {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border: 2px solid #f1f5f9;
+  border-radius: 8px;
+  background: #fafbfc;
+  transition: all 0.2s ease;
+}
+
+.quiz-question:hover {
+  border-color: #e2e8f0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.quiz-question-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.quiz-question-text {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+  flex: 1;
+}
+
+.quiz-question-points {
+  background: #3b82f6;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.quiz-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.quiz-choice {
+  padding: 1rem 1.25rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.quiz-choice:hover:not(:disabled) {
+  border-color: #3b82f6;
+  background: #eff6ff;
+  transform: translateY(-1px);
+}
+
+.quiz-choice-selected {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+.quiz-choice-correct {
+  border-color: #10b981;
+  background: #ecfdf5;
+  color: #065f46;
+}
+
+.quiz-choice-incorrect {
+  border-color: #ef4444;
+  background: #fef2f2;
+  color: #991b1b;
+}
+
+.quiz-choice:disabled {
+  cursor: not-allowed;
+  opacity: 0.9;
+}
+
+.quiz-input-container {
+  display: flex;
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+.quiz-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  background: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.quiz-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.quiz-input-correct {
+  border-color: #10b981;
+  background: #ecfdf5;
+}
+
+.quiz-input-incorrect {
+  border-color: #ef4444;
+  background: #fef2f2;
+}
+
+.quiz-submit {
+  padding: 0.75rem 1.5rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.quiz-submit:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.quiz-submit:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  cursor: not-allowed;
+}
+
+.quiz-feedback {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.quiz-feedback.correct {
+  background: #ecfdf5;
+  color: #065f46;
+  border: 1px solid #a7f3d0;
+}
+
+.quiz-feedback.incorrect {
+  background: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+.quiz-summary {
+  margin-top: 2rem;
+  padding: 2rem;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-radius: 8px;
+  text-align: center;
+  border: 2px solid #e2e8f0;
+}
+
+.quiz-summary h3 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 1rem 0;
+}
+
+.quiz-final-score {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 1rem;
+}
+
+.quiz-result {
+  font-size: 1.1rem;
+  font-weight: 700;
+  padding: 0.75rem 1.5rem;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.quiz-result.passed {
+  background: #ecfdf5;
+  color: #065f46;
+  border: 1px solid #a7f3d0;
+}
+
+.quiz-result.failed {
+  background: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+/* ============================================================ */
+/* === Disabled 状态统一置灰样式（所有交互组件 disabled 后视觉反馈） === */
+/* ============================================================ */
+
+/* --- 单按钮组件 Button：含内联 color 时仅置灰文字 --- */
+.widget-button:disabled {
+  background-color: #f5f5f5 !important;
+  color: rgba(0, 0, 0, 0.4) !important;
+  cursor: not-allowed;
+  filter: none;
+}
+.widget-button:disabled:hover { filter: none; }
+
+/* --- 按钮组 ButtonGroup --- */
+.widget-form .widget-button-group button:disabled,
+.widget-button-group button:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+  opacity: 1;
+}
+/* 选中态按钮禁用后保持浅蓝底可辨识 */
+.widget-form .widget-button-group button[aria-pressed="true"]:disabled,
+.widget-button-group button[aria-pressed="true"]:disabled {
+  background-color: #93c5fd;
+  border-color: #93c5fd;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: not-allowed;
+}
+
+/* --- 文本输入 TextInput --- */
+.widget-text-input input[type="text"]:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+}
+
+/* --- 数字输入 NumberInput --- */
+.ni-wrap input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+}
+.ni-steps button:disabled {
+  color: #d1d5db;
+  cursor: not-allowed;
+}
+
+/* --- 滑块 Slider：轨道变浅 + 拇指置灰 --- */
+.widget-slider input[type="range"]:disabled {
+  background: #f0f0f0;
+  cursor: not-allowed;
+}
+.widget-slider input[type="range"]:disabled::-webkit-slider-thumb {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+.widget-slider input[type="range"]:disabled::-moz-range-thumb {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+.widget-slider input[type="range"]:disabled::-webkit-slider-thumb:hover {
+  background: #d1d5db;
+}
+.widget-slider input[type="range"]:disabled::-moz-range-thumb:hover {
+  background: #d1d5db;
+}
+/* 数字值徽标同步置灰 */
+.widget-slider:has(input:disabled) .current-value {
+  color: rgba(0, 0, 0, 0.4);
+  background: #f5f5f5;
+}
+
+/* --- 下拉选择 Select --- */
+.selector select:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+}
+
+/* --- 多选 SelectMulti：checkbox 与文字置灰 --- */
+.checkbox-group:has(input:disabled) {
+  background-color: #f5f5f5;
+  border-color: #e5e7eb;
+}
+.checkbox-group:has(input:disabled) .checkbox-item {
+  cursor: not-allowed;
+}
+.checkbox-group:has(input:disabled) .checkbox-item:hover {
+  background-color: transparent;
+}
+.checkbox-group:has(input:disabled) .checkbox-item span {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+/* --- 单选 RadioGroup：圆点与文字置灰 --- */
+.radio-group:has(input:disabled) {
+  background-color: #f5f5f5;
+  border-color: #e5e7eb;
+}
+.radio-group:has(input:disabled) .radio-item {
+  cursor: not-allowed;
+}
+.radio-group:has(input:disabled) .radio-item:hover {
+  background-color: transparent;
+}
+.radio-group:has(input:disabled) .radio-item span {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+/* --- Form 提交/重置/取消按钮 --- */
+.widget-form-actions button[type="button"]:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+/* 主按钮禁用保持淡蓝底区分 */
+.widget-form-actions .widget-form-submit:disabled {
+  background-color: #93c5fd;
+  color: rgba(255, 255, 255, 0.8);
+}
+.widget-form-actions button[type="button"]:disabled:hover {
+  background-color: #f5f5f5;
+  border-color: #e5e7eb;
+}
+.widget-form-actions .widget-form-submit:disabled:hover {
+  background-color: #93c5fd;
+}
+
+/* 传统模式（无 actions 容器）的提交按钮 */
+.widget-form > button[type="button"]:last-child:disabled {
+  background-color: #93c5fd;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: not-allowed;
+}
+.widget-form > button[type="button"]:last-child:disabled:hover {
+  background-color: #93c5fd;
+}
+
+/* --- 选择题 MCQ 选项（反馈态对/错优先于置灰） --- */
+.mcq-choice:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+.mcq-choice:disabled:not(.mcq-choice-correct):not(.mcq-choice-incorrect):not(.mcq-choice-selected) {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+}
+
+/* --- 简答题 SAQ 输入框 --- */
+.saq-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+}
+
+/* --- Quiz 内题目选项与输入 --- */
+.quiz-choice:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+.quiz-choice:disabled:not(.quiz-choice-correct):not(.quiz-choice-incorrect):not(.quiz-choice-selected) {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+}
+.quiz-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+}
+
+/* --- DatePicker 输入按钮 --- */
+.dp-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+}
+.dp-input:disabled:hover {
+  border-color: #e5e7eb;
+}
+
+/* --- Cascader 级联选择器 --- */
+.widget-cascader {
+  position: relative;
+}
+
+.cas-input {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  text-align: left;
+}
+.cas-input:hover { border-color: #93c5fd; }
+.cas-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+/* 禁用态：置灰 + 禁止交互 */
+.cas-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.4);
+  border-color: #e5e7eb;
+  cursor: not-allowed;
+}
+.cas-input:disabled:hover { border-color: #e5e7eb; }
+
+.cas-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
+.cas-placeholder { color: #9ca3af; }
+.cas-arrow { color: #9ca3af; font-size: 0.75rem; transition: transform 0.2s ease; }
+.cas-arrow-open { transform: rotate(180deg); }
+.cas-clear {
+  padding: 0 0.25rem;
+  color: #9ca3af;
+  font-size: 1rem;
+  line-height: 1;
+}
+.cas-clear:hover { color: #374151; }
+
+/* 级联面板：横向多级菜单并排 */
+.cas-panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  display: flex;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+.cas-menu {
+  width: 160px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 0.375rem;
+}
+.cas-menu + .cas-menu {
+  border-left: 1px solid #f3f4f6;
+}
+.cas-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 0.875rem;
+  color: #111827;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+}
+.cas-option:hover { background: #f3f4f6; }
+.cas-option-active { background: #eff6ff; color: #1d4ed8; font-weight: 500; }
+.cas-option-active:hover { background: #dbeafe; }
+.cas-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cas-option-arrow { color: #9ca3af; font-size: 0.875rem; flex: 0 0 auto; }
+.cas-empty {
+  padding: 0.75rem 0.5rem;
+  font-size: 0.8125rem;
+  color: #9ca3af;
+  text-align: center;
+}
+
+/* --- Select 可搜索模式（searchable）：面板内置搜索框的单列下拉 --- */
+/* 内容区：relative 供面板 absolute 定位（复用 .widget-field-content） */
+.widget-select-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+/* 单列面板：纵向排搜索框 + 选项列表，宽度跟随触发按钮 */
+.cas-panel-single {
+  flex-direction: column;
+  min-width: 100%;
+  width: auto;
+}
+/* 搜索框区：面板顶部固定，不随选项滚动 */
+.cas-search {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+.cas-search-input {
+  width: 100%;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  box-sizing: border-box;
+}
+.cas-search-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+/* 选项列表：占满面板宽度并滚动 */
+.cas-menu-full {
+  width: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
+}