@c2-markdown-ui/react 0.4.4 → 0.4.5

package/src/lib/widgets.css

@@ -1,1373 +1,2189 @@
-/* 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;
+/* C2 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 #f0f0f0;
+  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: #1677ff;
+  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: #1677ff;
+  color: #ffffff;
+}
+
+.widget-form-actions .widget-form-submit:hover {
+  background-color: #4096ff;
+}
+
+.widget-form-actions .widget-form-cancel,
+.widget-form-actions .widget-form-reset {
+  background-color: #ffffff;
+  color: rgba(0, 0, 0, 0.88);
+  border: 1px solid #d9d9d9;
+}
+
+.widget-form-actions .widget-form-cancel:hover,
+.widget-form-actions .widget-form-reset:hover {
+  background-color: #fafafa;
+  border-color: rgba(0, 0, 0, 0.45);
+}
+
+.widget-form-actions button[type="button"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #1677ff;
+}
+
+/* === 字段内容区与控件宽度（所有布局生效） ===
+   内容区占满字段宽（纵向模式下 select/input 才能跟随栅格 span 自适应） */
+.widget-text-input > .widget-field-content,
+.selector > .widget-field-content,
+.selector-multi > .widget-field-content,
+.widget-cascader > .widget-field-content,
+.widget-slider > .widget-field-content {
+  width: 100%;
+  max-width: 100%;
+}
+
+/* 控件填满内容区：text input / select 拉伸到栅格列宽 */
+.widget-text-input input[type="text"],
+.selector select {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* 多选勾选组 / slider 容器同样填满 */
+.widget-field-content > .checkbox-group,
+.widget-field-content > .radio-group,
+.widget-field-content > .slider-container {
+  width: 100%;
+  max-width: 100%;
+}
+
+/* === 表单项说明图标（hint）：label 后 ⓘ，悬浮显示 tooltip === */
+.widget-label-row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.widget-hint {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.65);
+  border: 1px solid #d9d9d9;
+  border-radius: 50%;
+  background-color: #fafafa;
+  cursor: help;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.widget-hint:hover {
+  color: #4096ff;
+  border-color: #4096ff;
+  background-color: #e6f4ff;
+}
+
+/* tooltip 气泡：纯 CSS，向上弹出 */
+.widget-hint::before {
+  content: attr(data-hint);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  padding: 0.5rem 0.75rem;
+  min-width: 8rem;
+  max-width: 18rem;
+  width: max-content;
+  white-space: normal;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #fafafa;
+  background-color: rgba(0, 0, 0, 0.88);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  z-index: 100;
+}
+
+/* tooltip 小三角 */
+.widget-hint::after {
+  content: "";
+  position: absolute;
+  bottom: calc(100% + 3px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  border: 5px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.88);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  z-index: 100;
+}
+
+.widget-hint:hover::before,
+.widget-hint:hover::after,
+.widget-hint:focus-visible::before,
+.widget-hint:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* === 表单项校验：必填红星 / 错误提示 / 红边框 === */
+
+/* 必填标记：label 前红色 * */
+.widget-required-mark {
+  color: #ff4d4f;
+  font-weight: 600;
+  line-height: 1;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+/* 校验错误提示文案 */
+.widget-error-text {
+  font-size: 0.75rem;
+  color: #ff4d4f;
+  line-height: 1.4;
+  margin-top: -0.25rem;
+}
+
+/* 输入框错误态：红边框 + 淡红聚焦光晕 */
+.widget-text-input input.widget-input-error {
+  border-color: #ff4d4f;
+}
+
+.widget-text-input input.widget-input-error:focus {
+  border-color: #ff4d4f;
+  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
+}
+
+/* 下拉触发器错误态：红边框 */
+.cas-input.widget-input-error,
+.dp-input.widget-input-error,
+.ts-trigger.widget-input-error {
+  border-color: #ff4d4f;
+}
+
+/* 多选组错误态：checkbox 容器红边框 */
+.widget-field-error .checkbox-group,
+.widget-field-error .radio-group {
+  border-color: #ff4d4f;
+}
+
+/* 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 #1677ff; }
+
+.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: rgba(0, 0, 0, 0.88);
+  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 #d9d9d9;
+  background-color: #ffffff;
+  color: rgba(0, 0, 0, 0.88);
+  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: #fafafa;
+  border-color: rgba(0, 0, 0, 0.45);
+}
+
+.widget-form .widget-button-group button[aria-pressed="true"],
+.widget-button-group button[aria-pressed="true"] {
+  background-color: #1677ff;
+  color: #ffffff;
+  border-color: #1677ff;
+}
+
+.widget-form .widget-button-group button:focus,
+.widget-button-group button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #1677ff;
+}
+
+/* Text Input */
+.widget-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.widget-text-input label {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.widget-text-input input[type="text"] {
+  padding: 0.75rem;
+  border: 1px solid #d9d9d9;
+  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: #1677ff;
+  box-shadow: 0 0 0 3px rgba(5, 145, 255, 0.1);
+}
+
+.widget-text-input input[type="text"]::placeholder {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+/* Select and Select Multi */
+.selector,
+.selector-multi {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.selector label,
+.selector-multi-label {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.selector select {
+  padding: 0.75rem;
+  border: 1px solid #d9d9d9;
+  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: #1677ff;
+  box-shadow: 0 0 0 3px rgba(5, 145, 255, 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 #d9d9d9;
+  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: rgba(0, 0, 0, 0.88);
+}
+
+/* --- 单选 RadioGroup：圆点单选（antd Radio 默认样式） --- */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #d9d9d9;
+  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: #1677ff;
+}
+
+.radio-item span {
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.radio-item:hover {
+  background-color: #fafafa;
+  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: #fafafa;
+  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: rgba(0, 0, 0, 0.88);
+}
+
+.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: rgba(0, 0, 0, 0.65);
+  margin-bottom: 0.25rem;
+}
+
+.current-value {
+  font-weight: 600;
+  color: #1677ff;
+  background: #e6f4ff;
+  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: #f0f0f0;
+  outline: none;
+  cursor: pointer;
+}
+
+.widget-slider input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #1677ff;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.widget-slider input[type="range"]::-webkit-slider-thumb:hover {
+  background: #4096ff;
+}
+
+.widget-slider input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #1677ff;
+  cursor: pointer;
+  border: none;
+  transition: background-color 0.2s ease;
+}
+
+.widget-slider input[type="range"]::-moz-range-thumb:hover {
+  background: #4096ff;
+}
+
+/* Switch（参考 antd Switch） */
+.widget-switch {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.widget-switch > label {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.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: #1677ff;
+}
+
+.switch-track:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.45);
+}
+
+.switch-track[data-checked="true"]:hover:not(:disabled) {
+  background-color: #4096ff;
+}
+
+.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 #1677ff;
+}
+
+/* Form submit button styling - hover and focus states */
+.widget-form > button[type="button"]:last-child:hover {
+  background-color: #4096ff;
+}
+
+.widget-form > button[type="button"]:last-child:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #1677ff;
+}
+
+/* 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;
+}
+
+/* === 表单左右布局（layout:horizontal）：label 与内容同一行 === */
+/* CSS 变量由 Form 根容器注入：
+   --form-label-width：label 固定宽度（默认 80px）
+   --form-content-width：内容宽度（未设置则 flex 填满剩余空间） */
+
+/* 字段组件整体横排：label-row 固定宽 + 控件区填满 */
+.widget-form-layout-horizontal .widget-form-field > .widget-text-input,
+.widget-form-layout-horizontal .widget-form-field > .selector,
+.widget-form-layout-horizontal .widget-form-field > .selector-multi,
+.widget-form-layout-horizontal .widget-form-field > .widget-cascader,
+.widget-form-layout-horizontal .widget-form-field > .widget-slider,
+.widget-form-layout-horizontal .widget-form-field > .widget-switch {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+/* label 行：固定宽度、右对齐、不收缩；超宽省略 */
+.widget-form-layout-horizontal .widget-label-row {
+  flex: 0 0 var(--form-label-width, 80px);
+  width: var(--form-label-width, 80px);
+  justify-content: flex-end;
+  text-align: right;
+}
+
+/* label 文本超宽省略，悬浮完整显示 */
+.widget-form-layout-horizontal .widget-label-row > label,
+.widget-form-layout-horizontal .widget-label-row > .selector-multi-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 必填红星随行内排布（label-row 已 flex-end 对齐） */
+.widget-form-layout-horizontal .widget-required-mark {
+  order: -1;
+}
+
+/* 内容区：跟随 label 之后填满剩余空间（或指定宽度）；内部纵向排控件+错误提示 */
+.widget-form-layout-horizontal .widget-text-input > .widget-field-content,
+.widget-form-layout-horizontal .selector > .widget-field-content,
+.widget-form-layout-horizontal .selector-multi > .widget-field-content,
+.widget-form-layout-horizontal .widget-cascader > .widget-field-content,
+.widget-form-layout-horizontal .widget-slider > .widget-field-content,
+.widget-form-layout-horizontal .widget-switch > .widget-field-content {
+  flex: 1 1 auto;
+  width: var(--form-content-width, auto);
+  max-width: 100%;
+  /* 允许收缩到 0：窄容器（如小 span 栅格）时不溢出 */
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* 内容区内部控件填满内容区 */
+.widget-form-layout-horizontal .widget-field-content > input,
+.widget-form-layout-horizontal .widget-field-content > select,
+.widget-form-layout-horizontal .widget-field-content > .slider-container,
+.widget-form-layout-horizontal .widget-field-content > .checkbox-group,
+.widget-form-layout-horizontal .widget-field-content > .radio-group {
+  width: 100%;
+  max-width: 100%;
+}
+
+/* 指定内容宽度时按该宽度排布，但允许收缩避免窄容器溢出 */
+.widget-form-layout-horizontal[style*="--form-content-width"] .widget-text-input > .widget-field-content,
+.widget-form-layout-horizontal[style*="--form-content-width"] .selector > .widget-field-content,
+.widget-form-layout-horizontal[style*="--form-content-width"] .selector-multi > .widget-field-content,
+.widget-form-layout-horizontal[style*="--form-content-width"] .widget-cascader > .widget-field-content,
+.widget-form-layout-horizontal[style*="--form-content-width"] .widget-slider > .widget-field-content,
+.widget-form-layout-horizontal[style*="--form-content-width"] .widget-switch > .widget-field-content {
+  flex: 0 1 var(--form-content-width);
+}
+
+/* 无 label 字段（纯 placeholder）：内容对齐留出 label 列空位，视觉整齐 */
+.widget-form-layout-horizontal .widget-form-field > .widget-text-input:not(:has(.widget-label-row)) > .widget-field-content,
+.widget-form-layout-horizontal .widget-form-field > .selector:not(:has(.widget-label-row)) > .widget-field-content,
+.widget-form-layout-horizontal .widget-form-field > .selector-multi:not(:has(.widget-label-row)) > .widget-field-content,
+.widget-form-layout-horizontal .widget-form-field > .widget-cascader:not(:has(.widget-label-row)) > .widget-field-content,
+.widget-form-layout-horizontal .widget-form-field > .widget-slider:not(:has(.widget-label-row)) > .widget-field-content,
+.widget-form-layout-horizontal .widget-form-field > .widget-switch:not(:has(.widget-label-row)) > .widget-field-content {
+  margin-left: calc(var(--form-label-width, 80px) + 0.75rem);
+}
+
+/* inline 模式 + 左右布局组合：字段内 label/内容横排，字段间照常 flex-wrap */
+.widget-form-layout-horizontal.widget-form-inline .widget-form-field {
+  display: flex;
+  align-items: flex-start;
+}
+
+/* 表单左右布局：数字输入框与其他字段组件一致的横排规则 */
+.widget-form-layout-horizontal .widget-form-field > .widget-number-input {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.widget-form-layout-horizontal .widget-number-input > .widget-field-content {
+  flex: 1 1 auto;
+  width: var(--form-content-width, auto);
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.widget-form-layout-horizontal[style*="--form-content-width"] .widget-number-input > .widget-field-content {
+  flex: 0 1 var(--form-content-width);
+}
+
+.widget-form-layout-horizontal .widget-form-field > .widget-number-input:not(:has(.widget-label-row)) > .widget-field-content {
+  margin-left: calc(var(--form-label-width, 80px) + 0.75rem);
+}
+
+/* Error styling for unknown widgets */
+.widget span[style*="color:red"] {
+  color: #ff4d4f !important;
+  font-weight: 500;
+  padding: 0.75rem;
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+/* Multiple Choice Question */
+.widget-mcq {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.mcq-question {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: rgba(0, 0, 0, 0.88);
+  margin-bottom: 0.5rem;
+}
+
+.mcq-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.mcq-choice {
+  padding: 1rem;
+  border: 2px solid #d9d9d9;
+  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: rgba(0, 0, 0, 0.45);
+  background-color: #fafafa;
+}
+
+.mcq-choice-selected {
+  border-color: #1677ff;
+  background-color: #e6f4ff;
+}
+
+.mcq-choice-correct {
+  border-color: #52c41a;
+  background-color: #f6ffed;
+  color: #389e0d;
+}
+
+.mcq-choice-incorrect {
+  border-color: #ff4d4f;
+  background-color: #fff2f0;
+  color: #cf1322;
+}
+
+.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: #f6ffed;
+  color: #389e0d;
+  border: 1px solid #b7eb8f;
+}
+
+.mcq-feedback.incorrect {
+  background-color: #fff2f0;
+  color: #cf1322;
+  border: 1px solid #ffccc7;
+}
+
+/* Short Answer Question */
+.widget-saq {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.saq-question {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: rgba(0, 0, 0, 0.88);
+  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 #d9d9d9;
+  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: #1677ff;
+  box-shadow: 0 0 0 3px rgba(5, 145, 255, 0.1);
+}
+
+.saq-input-correct {
+  border-color: #52c41a;
+  background-color: #f6ffed;
+}
+
+.saq-input-incorrect {
+  border-color: #ff4d4f;
+  background-color: #fff2f0;
+}
+
+.saq-submit {
+  padding: 0.75rem 1.25rem;
+  background-color: #1677ff;
+  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: #4096ff;
+}
+
+.saq-submit:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+
+.saq-feedback {
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.saq-feedback.correct {
+  background-color: #f6ffed;
+  color: #389e0d;
+  border: 1px solid #b7eb8f;
+}
+
+.saq-feedback.incorrect {
+  background-color: #fff2f0;
+  color: #cf1322;
+  border: 1px solid #ffccc7;
+}
+
+/* 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 #f0f0f0;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.quiz-header {
+  padding: 2rem 2rem 1rem;
+  border-bottom: 1px solid #f0f0f0;
+  background: linear-gradient(135deg, #1677ff 0%, #0958d9 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, #52c41a, #73d13d);
+  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 #f0f0f0;
+  border-radius: 8px;
+  background: #fafafa;
+  transition: all 0.2s ease;
+}
+
+.quiz-question:hover {
+  border-color: #f0f0f0;
+  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: rgba(0, 0, 0, 0.88);
+  margin: 0;
+  flex: 1;
+}
+
+.quiz-question-points {
+  background: #1677ff;
+  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 #d9d9d9;
+  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: #1677ff;
+  background: #e6f4ff;
+  transform: translateY(-1px);
+}
+
+.quiz-choice-selected {
+  border-color: #1677ff;
+  background: #e6f4ff;
+}
+
+.quiz-choice-correct {
+  border-color: #52c41a;
+  background: #f6ffed;
+  color: #389e0d;
+}
+
+.quiz-choice-incorrect {
+  border-color: #ff4d4f;
+  background: #fff2f0;
+  color: #cf1322;
+}
+
+.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 #d9d9d9;
+  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: #1677ff;
+  box-shadow: 0 0 0 3px rgba(5, 145, 255, 0.1);
+}
+
+.quiz-input-correct {
+  border-color: #52c41a;
+  background: #f6ffed;
+}
+
+.quiz-input-incorrect {
+  border-color: #ff4d4f;
+  background: #fff2f0;
+}
+
+.quiz-submit {
+  padding: 0.75rem 1.5rem;
+  background: #1677ff;
+  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: #4096ff;
+}
+
+.quiz-submit:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+
+.quiz-feedback {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.quiz-feedback.correct {
+  background: #f6ffed;
+  color: #389e0d;
+  border: 1px solid #b7eb8f;
+}
+
+.quiz-feedback.incorrect {
+  background: #fff2f0;
+  color: #cf1322;
+  border: 1px solid #ffccc7;
+}
+
+.quiz-summary {
+  margin-top: 2rem;
+  padding: 2rem;
+  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
+  border-radius: 8px;
+  text-align: center;
+  border: 2px solid #f0f0f0;
+}
+
+.quiz-summary h3 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.88);
+  margin: 0 0 1rem 0;
+}
+
+.quiz-final-score {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+  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: #f6ffed;
+  color: #389e0d;
+  border: 1px solid #b7eb8f;
+}
+
+.quiz-result.failed {
+  background: #fff2f0;
+  color: #cf1322;
+  border: 1px solid #ffccc7;
+}
+
+/* ============================================================ */
+/* === Disabled 状态统一置灰样式（所有交互组件 disabled 后视觉反馈） === */
+/* ============================================================ */
+
+/* --- 单按钮组件 Button：含内联 color 时仅置灰文字 --- */
+.widget-button:disabled {
+  background-color: #f5f5f5 !important;
+  color: rgba(0, 0, 0, 0.25) !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.25);
+  border-color: #d9d9d9;
+  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: #91caff;
+  border-color: #91caff;
+  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.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+/* --- 数字输入 NumberInput --- */
+.ni-wrap input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.ni-steps button:disabled {
+  color: #d9d9d9;
+  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: #d9d9d9;
+  cursor: not-allowed;
+}
+.widget-slider input[type="range"]:disabled::-moz-range-thumb {
+  background: #d9d9d9;
+  cursor: not-allowed;
+}
+.widget-slider input[type="range"]:disabled::-webkit-slider-thumb:hover {
+  background: #d9d9d9;
+}
+.widget-slider input[type="range"]:disabled::-moz-range-thumb:hover {
+  background: #d9d9d9;
+}
+/* 数字值徽标同步置灰 */
+.widget-slider:has(input:disabled) .current-value {
+  color: rgba(0, 0, 0, 0.25);
+  background: #f5f5f5;
+}
+
+/* --- 下拉选择 Select --- */
+.selector select:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+/* --- 多选 SelectMulti：checkbox 与文字置灰 --- */
+.checkbox-group:has(input:disabled) {
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.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.25);
+}
+
+/* --- 单选 RadioGroup：圆点与文字置灰 --- */
+.radio-group:has(input:disabled) {
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.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.25);
+}
+
+/* --- Form 提交/重置/取消按钮 --- */
+.widget-form-actions button[type="button"]:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+/* 主按钮禁用保持淡蓝底区分 */
+.widget-form-actions .widget-form-submit:disabled {
+  background-color: #91caff;
+  color: rgba(255, 255, 255, 0.8);
+}
+.widget-form-actions button[type="button"]:disabled:hover {
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.widget-form-actions .widget-form-submit:disabled:hover {
+  background-color: #91caff;
+}
+
+/* 传统模式（无 actions 容器）的提交按钮 */
+.widget-form > button[type="button"]:last-child:disabled {
+  background-color: #91caff;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: not-allowed;
+}
+.widget-form > button[type="button"]:last-child:disabled:hover {
+  background-color: #91caff;
+}
+
+/* --- 选择题 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.25);
+  border-color: #d9d9d9;
+}
+
+/* --- 简答题 SAQ 输入框 --- */
+.saq-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  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.25);
+  border-color: #d9d9d9;
+}
+.quiz-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+/* --- DatePicker 日期选择器 --- */
+.widget-date-picker {
+  position: relative;
+}
+
+.dp-input {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #d9d9d9;
+  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;
+}
+.dp-input:hover { border-color: #4096ff; }
+.dp-input:focus-within,
+.dp-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+.dp-input-icon { font-size: 0.875rem; }
+.dp-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dp-seg { flex: 1 1 0; min-width: 0; }
+.dp-sep { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; }
+.dp-placeholder { color: rgba(0, 0, 0, 0.45); }
+.dp-clear {
+  padding: 0 0.25rem;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 1rem;
+  line-height: 1;
+}
+.dp-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+.dp-panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 288px;
+  padding: 0.75rem;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  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);
+}
+/* range 模式：双月历并排，宽度自适应 */
+.dp-panel.dp-range { width: auto; }
+.dp-panels { display: flex; gap: 0.75rem; }
+.dp-calendar { width: 264px; }
+
+.dp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.dp-title { font-weight: 600; font-size: 0.875rem; color: rgba(0, 0, 0, 0.88); }
+/* antd 风格：年份弱化、月份强调 */
+.dp-title-year { font-weight: 400; color: rgba(0, 0, 0, 0.45); margin-right: 0.25rem; }
+.dp-header-nav { display: flex; align-items: center; gap: 0.125rem; min-width: 3.25rem; }
+.dp-header-nav:last-child { justify-content: flex-end; }
+.dp-nav {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 1.1rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.dp-nav:hover { background: #f5f5f5; color: rgba(0, 0, 0, 0.88); }
+
+.dp-week-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 0.25rem;
+}
+.dp-week {
+  text-align: center;
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.45);
+  padding: 0.25rem 0;
+}
+
+.dp-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.dp-cell {
+  position: relative;
+  height: 2rem;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  color: rgba(0, 0, 0, 0.88);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.dp-cell:hover:not(.dp-cell-disabled) { background: #f5f5f5; }
+.dp-cell-out { color: rgba(0, 0, 0, 0.25); }
+.dp-cell-disabled { color: rgba(0, 0, 0, 0.25); cursor: not-allowed; }
+.dp-cell-today { color: #1677ff; font-weight: 600; }
+.dp-cell-selected,
+.dp-cell-range-start,
+.dp-cell-range-end {
+  background: #1677ff;
+  color: #ffffff;
+  font-weight: 600;
+}
+/* antd 风格：区间首尾胶囊圆角 */
+.dp-cell-range-start { border-radius: 4px 0 0 4px; }
+.dp-cell-range-end { border-radius: 0 4px 4px 0; }
+.dp-cell-range-start.dp-cell-range-end { border-radius: 4px; }
+.dp-cell-in-range { background: #e6f4ff; color: #1677ff; }
+.dp-cell-in-range:hover { background: #bae0ff; }
+
+.dp-time {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f0f0f0;
+}
+.dp-time-groups {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.dp-time-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.dp-time-label { font-size: 0.75rem; color: rgba(0, 0, 0, 0.65); }
+.dp-time-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; }
+.dp-time-input {
+  width: 2.75rem;
+  padding: 0.25rem;
+  text-align: center;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+}
+.dp-time-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+.dp-time-sep { color: rgba(0, 0, 0, 0.65); }
+.dp-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+.dp-ok {
+  margin-left: auto;
+  padding: 0.3rem 0.75rem;
+  background: #1677ff;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.dp-ok:hover:not(:disabled) { background: #4096ff; }
+.dp-ok:disabled { background: #91caff; cursor: not-allowed; }
+
+/* --- DatePicker 输入按钮 --- */
+.dp-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.dp-input:disabled:hover {
+  border-color: #d9d9d9;
+}
+
+/* --- 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 #d9d9d9;
+  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: #4096ff; }
+.cas-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(5, 145, 255, 0.1);
+}
+/* 禁用态：置灰 + 禁止交互 */
+.cas-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.cas-input:disabled:hover { border-color: #d9d9d9; }
+
+.cas-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
+.cas-placeholder { color: rgba(0, 0, 0, 0.45); }
+.cas-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s ease; }
+.cas-arrow-open { transform: rotate(180deg); }
+.cas-clear {
+  padding: 0 0.25rem;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 1rem;
+  line-height: 1;
+}
+.cas-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+/* 级联面板：横向多级菜单并排 */
+.cas-panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  display: flex;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  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 #f5f5f5;
+}
+.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: rgba(0, 0, 0, 0.88);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+}
+.cas-option:hover { background: #f5f5f5; }
+.cas-option-active { background: #e6f4ff; color: #0958d9; font-weight: 500; }
+.cas-option-active:hover { background: #bae0ff; }
+.cas-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cas-option-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.875rem; flex: 0 0 auto; }
+.cas-empty {
+  padding: 0.75rem 0.5rem;
+  font-size: 0.8125rem;
+  color: rgba(0, 0, 0, 0.45);
+  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 #f5f5f5;
+}
+.cas-search-input {
+  width: 100%;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  box-sizing: border-box;
+}
+.cas-search-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+/* 选项列表：占满面板宽度并滚动 */
+.cas-menu-full {
+  width: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* === Number Input（参考 antd InputNumber）：右侧上下步进按钮 === */
+.widget-number-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.widget-number-input > .widget-field-content {
+  width: 100%;
+  max-width: 100%;
+}
+
+.ni-wrap {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.ni-wrap input {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0.6875rem 2rem 0.6875rem 0.75rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ni-wrap input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(5, 145, 255, 0.1);
+}
+
+.ni-wrap input::placeholder {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.ni-wrap input.widget-input-error {
+  border-color: #ff4d4f;
+}
+
+.ni-wrap input.widget-input-error:focus {
+  border-color: #ff4d4f;
+  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
+}
+
+.ni-wrap:focus-within .ni-steps {
+  border-color: #1677ff;
+}
+
+.ni-steps {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  display: flex;
+  flex-direction: column;
+  width: 1.375rem;
+  border-left: 1px solid #d9d9d9;
+  border-radius: 0 5px 5px 0;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+
+.ni-steps button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: rgba(0, 0, 0, 0.65);
+  cursor: pointer;
+  min-height: 0;
+}
+
+.ni-step-down {
+  border-top: 1px solid #d9d9d9;
+}
+
+.ni-steps button:hover:not(:disabled) {
+  color: #4096ff;
+  background-color: #e6f4ff;
+}
+
+/* === TreeSelect 下拉树选择器（参考 antd TreeSelect） === */
+.widget-tree-select {
+  position: relative;
+}
+
+.ts-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #d9d9d9;
+  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;
+}
+.ts-trigger:hover { border-color: #4096ff; }
+.ts-trigger:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+.ts-trigger:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.ts-trigger:disabled:hover { border-color: #d9d9d9; }
+
+.ts-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.88);
+}
+.ts-placeholder {
+  flex: 1 1 auto;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ts-placeholder-empty { color: rgba(0, 0, 0, 0.45); }
+.ts-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s ease; }
+.ts-arrow-open { transform: rotate(180deg); }
+.ts-clear {
+  padding: 0 0.25rem;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 1rem;
+  line-height: 1;
+}
+.ts-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+/* 触发器悬浮提示：展示全部已选项（maxTagCount 截断时补全） */
+.ts-trigger[data-full]:not([data-full=''])::after {
+  content: attr(data-full);
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  padding: 0.5rem 0.75rem;
+  max-width: 18rem;
+  width: max-content;
+  white-space: normal;
+  word-break: break-all;
+  font-size: 0.75rem;
+  font-weight: 400;
+  text-align: left;
+  color: #fafafa;
+  background-color: rgba(0, 0, 0, 0.88);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  z-index: 100;
+}
+.ts-trigger[data-full]:not([data-full='']):not([aria-expanded='true']):hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* 下拉面板：纵向排搜索框 + 工具栏 + 树节点列表 */
+.ts-panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  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);
+  max-height: 280px;
+  overflow: hidden;
+}
+
+.ts-search {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
+}
+.ts-search-input {
+  width: 100%;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  box-sizing: border-box;
+}
+.ts-search-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+
+.ts-toolbar {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
+}
+.ts-tool-btn {
+  padding: 0.125rem 0.5rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #ffffff;
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.65);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.ts-tool-btn:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.ts-tree {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 0.375rem 0;
+  min-height: 60px;
+}
+
+.ts-node {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s ease;
+}
+.ts-node:hover { background: #f5f5f5; }
+.ts-node-selected { background: #e6f4ff; }
+/* 树连接线（antd treeLine）：横向连线 + 纵向缩进引导线 */
+.ts-node.ts-tree-line { position: relative; }
+.ts-node.ts-tree-line::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 8px;
+  border-left: 1px solid #d9d9d9;
+}
+.ts-node.ts-tree-line:first-child::before { top: 50%; }
+.ts-node.ts-tree-line:last-child::before { bottom: 50%; }
+.ts-node.ts-tree-line::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  width: 12px;
+  border-top: 1px solid #d9d9d9;
+}
+
+.ts-expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.ts-expand-arrow {
+  font-size: 0.625rem;
+  color: rgba(0, 0, 0, 0.45);
+  transition: transform 0.2s ease;
+  display: inline-block;
+}
+.ts-expand-arrow.ts-expanded { transform: rotate(90deg); }
+
+.ts-loading-icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #d9d9d9;
+  border-top-color: #1677ff;
+  border-radius: 50%;
+  animation: ts-spin 0.8s linear infinite;
+}
+@keyframes ts-spin {
+  to { transform: rotate(360deg); }
+}
+
+.ts-leaf-spacer {
+  display: inline-block;
+  width: 18px;
+  flex-shrink: 0;
+}
+
+.ts-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #ffffff;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+  padding: 0;
+}
+.ts-checkbox:hover { border-color: #1677ff; }
+.ts-checkbox.ts-checked {
+  background: #1677ff;
+  border-color: #1677ff;
+  color: #ffffff;
+}
+.ts-checkbox.ts-indeterminate {
+  background: #1677ff;
+  border-color: #1677ff;
+  color: #ffffff;
+}
+
+.ts-check-icon {
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.ts-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.88);
+  cursor: pointer;
+  text-align: left;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ts-label.ts-label-selected { color: #1677ff; font-weight: 500; }
+
+.ts-empty {
+  padding: 0.75rem 0.5rem;
+  font-size: 0.8125rem;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: center;
 }