@c2-markdown-ui/svelte 0.0.0-stage → 0.4.2

package/src/lib/widgets.css

@@ -0,0 +1,1754 @@
+/* C2 Markdown UI Svelte 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);
+}
+
+/* === Inline form: 所有字段横排 (flex-wrap) === */
+.widget-form.widget-form-inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.widget-form-inline .widget-form-field {
+  flex: 1 1 calc(33.333% - 1rem);
+  min-width: 180px;
+}
+
+/* 用户指定 columns 数时 */
+.widget-form-inline[style*="--form-columns"] .widget-form-field {
+  flex-basis: calc((100% - (var(--form-columns) - 1) * 1rem) / var(--form-columns));
+  min-width: 120px;
+}
+
+/* inline 模式下 submit 按钮也保持一致 */
+.widget-form-inline > button:last-child {
+  flex: 0 0 auto;
+}
+
+/* === Row 分组模式（24 栅格，类似 antd Row/Col） === */
+.widget-form-row {
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  column-gap: var(--row-gutter, 1rem);
+  /* 行间距：与表单整体 gap 一致，避免行与行（含按钮行）紧贴 */
+  row-gap: 1rem;
+}
+
+/* === 传统 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;
+}
+
+/* 按钮字段与 row 模式一致：文字横排自适应，不随窄 span 压缩成竖排 */
+.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;
+}
+
+.widget-form-row .widget-form-field {
+  min-width: 0;
+}
+
+/* 按钮字段：栅格内宽度由文字横排自适应决定，不随窄 span 压缩成竖排 */
+.widget-form-row .widget-form-field[data-field-type="button"] {
+  width: max-content;
+  max-width: 100%;
+  /* 与其他字段（label + 控件）基线对齐，保证上下间距视觉一致 */
+  align-self: end;
+  padding-bottom: 0;
+}
+
+/* 按钮文字不折行，横排自适应 */
+.widget-button {
+  white-space: nowrap;
+}
+
+/* === 独立栅格组件 row/col（24 栅格，类似 antd Row/Col） === */
+.widget-grid-row {
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  column-gap: var(--row-gutter, 1rem);
+  row-gap: 1rem;
+  margin: 1rem 0;
+}
+
+.widget-grid-col {
+  min-width: 0;
+}
+
+/* 按钮列：宽度由文字横排自适应，与其他列底部对齐 */
+.widget-grid-col[data-field-type="button"] {
+  width: max-content;
+  max-width: 100%;
+  align-self: end;
+}
+
+/* === 纯文字组件 text（栅格/表单内静态文字） === */
+.widget-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: inherit;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+/* === 文字 Alert 风格（参考 antd Alert） === */
+.widget-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-size: 14px;
+  line-height: 1.5714;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+/* 图标：固定宽度对齐，圆形背景（antdOutlined 图标风格） */
+.widget-alert .widget-alert-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1;
+  border-radius: 50%;
+  margin-top: 2px;
+  user-select: none;
+}
+
+.widget-alert .widget-alert-message {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* info：antd 蓝 */
+.widget-alert-info {
+  background-color: #e6f4ff;
+  border-color: #91caff;
+}
+.widget-alert-info .widget-alert-icon {
+  color: #ffffff;
+  background-color: #1677ff;
+}
+.widget-alert-info .widget-alert-message {
+  color: #1677ff;
+}
+
+/* warning：antd 黄 */
+.widget-alert-warning {
+  background-color: #fffbe6;
+  border-color: #ffe58f;
+}
+.widget-alert-warning .widget-alert-icon {
+  color: #ffffff;
+  background-color: #faad14;
+}
+.widget-alert-warning .widget-alert-message {
+  color: #d48806;
+}
+
+/* error：antd 红 */
+.widget-alert-error {
+  background-color: #fff2f0;
+  border-color: #ffccc7;
+}
+.widget-alert-error .widget-alert-icon {
+  color: #ffffff;
+  background-color: #ff4d4f;
+}
+.widget-alert-error .widget-alert-message {
+  color: #ff4d4f;
+}
+
+.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;
+}
+
+/* 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 rgba(5, 145, 255, 0.1);
+}
+
+/* Text Input */
+.widget-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* === 字段内容区与控件宽度（所有布局生效） ===
+   内容区占满字段宽（纵向模式下 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;
+}
+
+/* === 表单左右布局（layout:horizontal）：label 与内容同一行 === */
+/* CSS 变量由 Form.svelte 根容器注入：
+   --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-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);
+}
+
+/* 多选组错误态：checkbox 容器红边框 */
+.widget-field-error .checkbox-group,
+.widget-field-error .radio-group {
+  border-color: #ff4d4f;
+}
+
+.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);
+}
+
+/* === 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;
+}
+
+.ni-steps button:disabled {
+  color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+/* 表单左右布局：与其他字段组件一致的横排规则 */
+.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);
+}
+
+/* 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;
+}
+
+/* --- 单选 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;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* 选项布局：横向（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 {
+  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);
+}
+
+.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）：与其他字段同构——label-row 在前、内容在后，
+   表单 layout:horizontal 时自动变为 label 在左、开关在右 */
+.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;
+}
+
+.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 rgba(5, 145, 255, 0.1);
+}
+
+/* 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;
+}
+
+/* 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: 0.75rem 1rem;
+  border: 2px solid #d9d9d9;
+  border-radius: 6px;
+  background: #ffffff;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.95rem;
+}
+
+.quiz-choice:hover:not(:disabled) {
+  border-color: rgba(0, 0, 0, 0.45);
+  background: #fafafa;
+}
+
+.quiz-choice-selected { /* kept for parity if needed */
+  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;
+}
+
+/* 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;
+  }
+}
+
+/* ============================================================ */
+/* === 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;
+}
+
+/* --- 滑块 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;
+}
+/* 已作答反馈态（对/错）优先于 disabled 置灰 */
+.mcq-choice:disabled.mcq-choice-correct,
+.mcq-choice:disabled.mcq-choice-incorrect {
+  opacity: 1;
+}
+
+/* --- 简答题 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 输入按钮（dp-input 样式在组件内嵌 <style> 中，此处补充禁用态） --- */
+.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;
+}
+
+/* --- 兼容旧版 opacity 置灰（部分组件原有 opacity: 0.8/0.9） --- */
+.mcq-choice:disabled { opacity: 1; }
+.quiz-choice:disabled { opacity: 1; }
+.ni-steps button:disabled {
+  color: #d9d9d9;
+  cursor: not-allowed;
+}