/* ============================================================================
 * MTSCOS 通用组件库 (Element Plus 对齐版)
 * ============================================================================
 * §14 IRON_RULE · STEP_7_EXECUTE · 模块3 静态CSS/JS P2
 * flow_id: flow_dev_pages_functions_complete_20260818_001
 * contract_version: 1.3.0
 *
 * 依赖: mtscos_design_tokens.css (必须先引入)
 *
 * 组件清单(对照设计规范.md):
 *   §1 Button     - 按钮四维组合(类型×尺寸×状态×形状)
 *   §2 Card       - 卡片(玻璃态变体)
 *   §3 Input/Select/Textarea - 表单输入
 *   §4 Table      - 表格(分页/排序/状态)
 *   §5 Modal/Dialog - 模态框
 *   §6 Alert      - 通知条(severity对照)
 *   §7 Badge/Tag  - 标签徽章
 *   §8 Toast      - 浮动通知(MTSCOSApi.showToast样式支撑)
 *   §9 Spinner    - 加载状态
 *   §10 Pagination- 分页器
 *   §11 Breadcrumb- 面包屑导航
 *   §12 Empty     - 空状态占位
 *   §13 Exception Page - 异常页(对照contract.yaml §3 异常码8类)
 *
 * 用法:
 *   <button class="mtscos-btn mtscos-btn--primary mtscos-btn--large mtscos-btn--round">按钮</button>
 *   <div class="mtscos-card mtscos-card--glass">...</div>
 *   <div class="mtscos-alert mtscos-alert--warning">...</div>
 * ============================================================================ */

/* ============================================================================
 * §1 Button 按钮四维组合模型
 * 维度1: 类型 --primary/--success/--warning/--danger/--info/--secondary
 * 维度2: 尺寸 --large/--default/--small
 * 维度3: 状态 :hover/:active/:disabled/.is-loading
 * 维度4: 形状 --round/--circle
 * ============================================================================ */
.mtscos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mtscos-spacing-xs);
  font-family: var(--el-font-family);
  font-size: var(--mtscos-btn-default-font-size);
  font-weight: var(--el-font-weight-primary);
  line-height: 1;
  height: var(--mtscos-btn-default-height);
  padding: 0 var(--mtscos-btn-default-padding-x);
  border: 1px solid transparent;
  border-radius: var(--mtscos-btn-default-radius);
  cursor: pointer;
  user-select: none;
  transition: var(--mtscos-btn-transition);
  white-space: nowrap;
  outline: none;
  text-decoration: none;
  vertical-align: middle;
}
.mtscos-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
}

/* 维度1: 类型 */
.mtscos-btn--primary {
  background: var(--mtscos-btn-primary-bg);
  color: var(--mtscos-btn-primary-text);
  border-color: var(--mtscos-btn-primary-border);
}
.mtscos-btn--primary:hover {
  background: var(--mtscos-btn-primary-hover-bg);
  border-color: var(--mtscos-btn-primary-hover-bg);
}
.mtscos-btn--primary:active {
  background: var(--mtscos-btn-primary-active-bg);
  border-color: var(--mtscos-btn-primary-active-bg);
}

.mtscos-btn--success {
  background: var(--mtscos-btn-success-bg);
  color: var(--mtscos-btn-success-text);
  border-color: var(--mtscos-btn-success-bg);
}
.mtscos-btn--success:hover {
  background: var(--mtscos-btn-success-hover-bg);
  border-color: var(--mtscos-btn-success-hover-bg);
}
.mtscos-btn--success:active {
  background: var(--mtscos-btn-success-active-bg);
  border-color: var(--mtscos-btn-success-active-bg);
}

.mtscos-btn--warning {
  background: var(--mtscos-btn-warning-bg);
  color: var(--mtscos-btn-warning-text);
  border-color: var(--mtscos-btn-warning-bg);
}
.mtscos-btn--warning:hover {
  background: var(--mtscos-btn-warning-hover-bg);
  border-color: var(--mtscos-btn-warning-hover-bg);
}
.mtscos-btn--warning:active {
  background: var(--mtscos-btn-warning-active-bg);
  border-color: var(--mtscos-btn-warning-active-bg);
}

.mtscos-btn--danger {
  background: var(--mtscos-btn-danger-bg);
  color: var(--mtscos-btn-danger-text);
  border-color: var(--mtscos-btn-danger-bg);
}
.mtscos-btn--danger:hover {
  background: var(--mtscos-btn-danger-hover-bg);
  border-color: var(--mtscos-btn-danger-hover-bg);
}
.mtscos-btn--danger:active {
  background: var(--mtscos-btn-danger-active-bg);
  border-color: var(--mtscos-btn-danger-active-bg);
}

.mtscos-btn--info {
  background: var(--mtscos-btn-info-bg);
  color: var(--mtscos-btn-info-text);
  border-color: var(--mtscos-btn-info-bg);
}
.mtscos-btn--info:hover {
  background: var(--mtscos-btn-info-hover-bg);
  border-color: var(--mtscos-btn-info-hover-bg);
}
.mtscos-btn--info:active {
  background: var(--mtscos-btn-info-active-bg);
  border-color: var(--mtscos-btn-info-active-bg);
}

.mtscos-btn--secondary {
  background: var(--mtscos-btn-secondary-bg);
  color: var(--mtscos-btn-secondary-text);
  border-color: var(--mtscos-btn-secondary-border);
}
.mtscos-btn--secondary:hover {
  background: var(--mtscos-btn-secondary-hover-bg);
  color: var(--mtscos-btn-secondary-hover-text);
  border-color: var(--mtscos-btn-secondary-hover-border);
}

/* 维度2: 尺寸 */
.mtscos-btn--large {
  height: var(--mtscos-btn-large-height);
  padding: 0 var(--mtscos-btn-large-padding-x);
  font-size: var(--mtscos-btn-large-font-size);
}
.mtscos-btn--small {
  height: var(--mtscos-btn-small-height);
  padding: 0 var(--mtscos-btn-small-padding-x);
  font-size: var(--mtscos-btn-small-font-size);
}

/* 维度3: 状态 */
.mtscos-btn:disabled,
.mtscos-btn.is-disabled {
  opacity: var(--mtscos-btn-disabled-opacity);
  cursor: var(--mtscos-btn-disabled-cursor);
  pointer-events: none;
}
.mtscos-btn.is-loading {
  cursor: default;
  opacity: 0.7;
}

/* 维度4: 形状 */
.mtscos-btn--round {
  border-radius: var(--mtscos-btn-round-radius);
}
.mtscos-btn--circle {
  width: var(--mtscos-btn-circle-size);
  height: var(--mtscos-btn-circle-size);
  padding: 0;
  border-radius: var(--el-border-radius-circle);
}

/* 图标按钮 */
.mtscos-btn [class*="icon-"],
.mtscos-btn svg {
  width: 1em;
  height: 1em;
  font-size: inherit;
  vertical-align: middle;
}

/* ============================================================================
 * §2 Card 卡片(支持玻璃态变体)
 * ============================================================================ */
.mtscos-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--mtscos-radius-md);
  box-shadow: var(--mtscos-shadow-card);
  padding: var(--mtscos-spacing-lg);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mtscos-card:hover {
  box-shadow: var(--mtscos-shadow-card-hover);
}
.mtscos-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--mtscos-spacing-md);
  margin-bottom: var(--mtscos-spacing-md);
  border-bottom: 1px solid var(--el-border-color-lighter);
  font-size: var(--el-font-size-large);
  font-weight: var(--el-font-weight-secondary);
}
.mtscos-card__title {
  font-size: inherit;
  font-weight: inherit;
  color: var(--el-text-color-primary);
}
.mtscos-card__body {
  color: var(--el-text-color-regular);
  font-size: var(--el-font-size-base);
  line-height: var(--el-line-height-primary);
}
.mtscos-card__footer {
  margin-top: var(--mtscos-spacing-md);
  padding-top: var(--mtscos-spacing-md);
  border-top: 1px solid var(--el-border-color-lighter);
  display: flex;
  gap: var(--mtscos-spacing-sm);
  justify-content: flex-end;
}

/* 玻璃态变体(项目特色) */
.mtscos-card--glass {
  background: var(--mtscos-glass-bg);
  backdrop-filter: blur(var(--mtscos-glass-blur));
  -webkit-backdrop-filter: blur(var(--mtscos-glass-blur));
  border: 1px solid var(--mtscos-glass-border);
  box-shadow: var(--mtscos-glass-shadow);
}

/* 阴影变体 */
.mtscos-card--hoverable:hover {
  transform: translateY(-2px);
}

/* ============================================================================
 * §3 表单输入(Input/Textarea/Select)
 * ============================================================================ */
.mtscos-input,
.mtscos-textarea,
.mtscos-select {
  display: inline-block;
  width: 100%;
  font-family: var(--el-font-family);
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-primary);
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: var(--mtscos-radius-sm);
  padding: 8px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.mtscos-input:hover,
.mtscos-textarea:hover,
.mtscos-select:hover {
  border-color: var(--el-border-color-dark);
}
.mtscos-input:focus,
.mtscos-textarea:focus,
.mtscos-select:focus {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
}
.mtscos-input::placeholder,
.mtscos-textarea::placeholder {
  color: var(--el-text-color-placeholder);
}
.mtscos-input:disabled,
.mtscos-textarea:disabled,
.mtscos-select:disabled {
  background: var(--el-fill-color-light);
  color: var(--el-text-color-disabled);
  cursor: not-allowed;
}
.mtscos-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
  line-height: var(--el-line-height-primary);
}

/* 表单项 */
.mtscos-form-item {
  margin-bottom: var(--mtscos-spacing-md);
}
.mtscos-form-item__label {
  display: block;
  margin-bottom: var(--mtscos-spacing-xs);
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-regular);
  font-weight: var(--el-font-weight-primary);
}
.mtscos-form-item__error {
  margin-top: var(--mtscos-spacing-xs);
  font-size: var(--el-font-size-extra-small);
  color: var(--el-color-danger);
}
.mtscos-form-item.is-error .mtscos-input,
.mtscos-form-item.is-error .mtscos-textarea,
.mtscos-form-item.is-error .mtscos-select {
  border-color: var(--el-color-danger);
}

/* ============================================================================
 * §4 Table 表格
 * ============================================================================ */
.mtscos-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--el-bg-color);
  font-size: var(--el-font-size-base);
}
.mtscos-table th {
  text-align: left;
  padding: var(--mtscos-spacing-sm) var(--mtscos-spacing-md);
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-weight: var(--el-font-weight-secondary);
  border-bottom: 1px solid var(--el-border-color-lighter);
  white-space: nowrap;
}
.mtscos-table td {
  padding: var(--mtscos-spacing-sm) var(--mtscos-spacing-md);
  color: var(--el-text-color-regular);
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.mtscos-table tbody tr:hover {
  background: var(--el-fill-color-light);
}
.mtscos-table tbody tr.is-striped {
  background: var(--el-fill-color-lighter);
}
.mtscos-table--bordered th,
.mtscos-table--bordered td {
  border: 1px solid var(--el-border-color-lighter);
}

/* ============================================================================
 * §5 Modal/Dialog 模态框
 * ============================================================================ */
.mtscos-modal-mask {
  position: fixed;
  inset: 0;
  background: var(--el-mask-color);
  z-index: var(--el-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mtscos-spacing-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mtscos-modal-mask.is-open {
  opacity: 1;
}
.mtscos-modal {
  background: var(--el-bg-color);
  border-radius: var(--mtscos-radius-md);
  box-shadow: var(--mtscos-shadow-modal);
  width: 50%;
  max-width: 600px;
  min-width: 320px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.mtscos-modal-mask.is-open .mtscos-modal {
  transform: scale(1);
}
.mtscos-modal__header {
  padding: var(--mtscos-spacing-md) var(--mtscos-spacing-lg);
  border-bottom: 1px solid var(--el-border-color-lighter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mtscos-modal__title {
  font-size: var(--el-font-size-large);
  font-weight: var(--el-font-weight-secondary);
  color: var(--el-text-color-primary);
}
.mtscos-modal__close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--el-text-color-secondary);
  padding: var(--mtscos-spacing-xs);
  border-radius: var(--mtscos-radius-sm);
  transition: var(--el-transition-all);
}
.mtscos-modal__close:hover {
  color: var(--el-text-color-primary);
  background: var(--el-fill-color);
}
.mtscos-modal__body {
  padding: var(--mtscos-spacing-lg);
  overflow-y: auto;
  flex: 1;
  color: var(--el-text-color-regular);
}
.mtscos-modal__footer {
  padding: var(--mtscos-spacing-md) var(--mtscos-spacing-lg);
  border-top: 1px solid var(--el-border-color-lighter);
  display: flex;
  justify-content: flex-end;
  gap: var(--mtscos-spacing-sm);
}

/* ============================================================================
 * §6 Alert 通知条(severity对照contract.yaml §3)
 * ============================================================================ */
.mtscos-alert {
  display: flex;
  align-items: center;
  gap: var(--mtscos-spacing-sm);
  padding: var(--mtscos-spacing-sm) var(--mtscos-spacing-md);
  border-radius: var(--mtscos-radius-sm);
  font-size: var(--el-font-size-base);
  border: 1px solid transparent;
  margin-bottom: var(--mtscos-spacing-sm);
}
.mtscos-alert__icon {
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}
.mtscos-alert__content {
  flex: 1;
}
.mtscos-alert__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: inherit;
  opacity: 0.6;
}
.mtscos-alert__close:hover { opacity: 1; }

.mtscos-alert--info {
  background: var(--mtscos-severity-info-bg);
  color: var(--mtscos-severity-info-color);
  border-color: var(--mtscos-severity-info-color);
}
.mtscos-alert--info .mtscos-alert__icon::before { content: var(--mtscos-severity-info-icon); }

.mtscos-alert--warning {
  background: var(--mtscos-severity-warning-bg);
  color: var(--mtscos-severity-warning-color);
  border-color: var(--mtscos-severity-warning-color);
}
.mtscos-alert--warning .mtscos-alert__icon::before { content: var(--mtscos-severity-warning-icon); }

.mtscos-alert--error {
  background: var(--mtscos-severity-error-bg);
  color: var(--mtscos-severity-error-color);
  border-color: var(--mtscos-severity-error-color);
}
.mtscos-alert--error .mtscos-alert__icon::before { content: var(--mtscos-severity-error-icon); }

.mtscos-alert--critical {
  background: var(--mtscos-severity-critical-bg);
  color: var(--mtscos-severity-critical-color);
  border-color: var(--mtscos-severity-critical-color);
  font-weight: var(--el-font-weight-secondary);
}
.mtscos-alert--critical .mtscos-alert__icon::before { content: var(--mtscos-severity-critical-icon); }

.mtscos-alert--success {
  background: var(--mtscos-severity-success-bg);
  color: var(--mtscos-severity-success-color);
  border-color: var(--mtscos-severity-success-color);
}
.mtscos-alert--success .mtscos-alert__icon::before { content: var(--mtscos-severity-success-icon); }

/* ============================================================================
 * §7 Badge/Tag 标签徽章
 * ============================================================================ */
.mtscos-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--el-font-size-extra-small);
  font-weight: var(--el-font-weight-secondary);
  border-radius: var(--mtscos-radius-pill);
  background: var(--el-color-info-light-9);
  color: var(--el-color-info);
  border: 1px solid var(--el-color-info-light-7);
}
.mtscos-badge--primary { background: var(--el-color-primary-light-9); color: var(--el-color-primary); border-color: var(--el-color-primary-light-7); }
.mtscos-badge--success { background: var(--el-color-success-light-9); color: var(--el-color-success); border-color: var(--el-color-success-light-7); }
.mtscos-badge--warning { background: var(--el-color-warning-light-9); color: var(--el-color-warning); border-color: var(--el-color-warning-light-7); }
.mtscos-badge--danger  { background: var(--el-color-danger-light-9); color: var(--el-color-danger);  border-color: var(--el-color-danger-light-7); }

.mtscos-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--el-font-size-small);
  border-radius: var(--mtscos-radius-sm);
  background: var(--el-fill-color);
  color: var(--el-text-color-regular);
  border: 1px solid var(--el-border-color-light);
}

/* ============================================================================
 * §8 Toast 浮动通知(MTSCOSApi.showToast样式支撑)
 * ============================================================================ */
#mtscos-api-toast-container,
.mtscos-toast-container {
  position: fixed;
  top: var(--mtscos-spacing-lg);
  right: var(--mtscos-spacing-lg);
  z-index: var(--el-index-toast);
  display: flex;
  flex-direction: column;
  gap: var(--mtscos-spacing-sm);
  pointer-events: none;
}

/* ============================================================================
 * §9 Spinner 加载状态
 * ============================================================================ */
.mtscos-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--el-border-color-lighter);
  border-top-color: var(--el-color-primary);
  border-radius: var(--el-border-radius-circle);
  animation: mtscos-spin 0.8s linear infinite;
}
.mtscos-spinner--small { width: 16px; height: 16px; border-width: 2px; }
.mtscos-spinner--large { width: 32px; height: 32px; border-width: 4px; }
@keyframes mtscos-spin {
  to { transform: rotate(360deg); }
}

.mtscos-loading-mask {
  position: absolute;
  inset: 0;
  background: var(--el-mask-color-extra-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--el-index-normal);
}

/* ============================================================================
 * §10 Pagination 分页器
 * ============================================================================ */
.mtscos-pagination {
  display: flex;
  align-items: center;
  gap: var(--mtscos-spacing-xs);
  list-style: none;
  font-size: var(--el-font-size-base);
}
.mtscos-pagination__item {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--mtscos-spacing-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--el-bg-color);
  color: var(--el-text-color-regular);
  border: 1px solid var(--el-border-color);
  border-radius: var(--mtscos-radius-sm);
  cursor: pointer;
  transition: var(--el-transition-all);
  user-select: none;
}
.mtscos-pagination__item:hover {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}
.mtscos-pagination__item.is-active {
  background: var(--el-color-primary);
  color: var(--mtscos-text-inverse);
  border-color: var(--el-color-primary);
}
.mtscos-pagination__item.is-disabled,
.mtscos-pagination__item:disabled {
  color: var(--el-text-color-disabled);
  background: var(--el-fill-color-light);
  cursor: not-allowed;
}

/* ============================================================================
 * §11 Breadcrumb 面包屑导航
 * ============================================================================ */
.mtscos-breadcrumb {
  display: flex;
  align-items: center;
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-secondary);
  list-style: none;
  gap: var(--mtscos-spacing-xs);
}
.mtscos-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.mtscos-breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin: 0 var(--mtscos-spacing-xs);
  color: var(--el-text-color-placeholder);
}
.mtscos-breadcrumb__item:last-child {
  color: var(--el-text-color-primary);
  font-weight: var(--el-font-weight-primary);
}
.mtscos-breadcrumb a {
  color: var(--el-text-color-secondary);
}
.mtscos-breadcrumb a:hover {
  color: var(--el-color-primary);
}

/* ============================================================================
 * §12 Empty 空状态占位
 * ============================================================================ */
.mtscos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mtscos-spacing-3xl) var(--mtscos-spacing-lg);
  color: var(--el-text-color-secondary);
  text-align: center;
}
.mtscos-empty__icon {
  font-size: 64px;
  margin-bottom: var(--mtscos-spacing-md);
  color: var(--el-text-color-placeholder);
}
.mtscos-empty__title {
  font-size: var(--el-font-size-large);
  margin-bottom: var(--mtscos-spacing-xs);
  color: var(--el-text-color-regular);
}
.mtscos-empty__description {
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-secondary);
}

/* ============================================================================
 * §13 Exception Page 异常页(对照contract.yaml §3 8类异常码)
 * ============================================================================ */
.mtscos-exception {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--mtscos-spacing-3xl) var(--mtscos-spacing-lg);
  text-align: center;
}
.mtscos-exception__code {
  font-size: 120px;
  font-weight: var(--el-font-weight-bold);
  line-height: 1;
  margin-bottom: var(--mtscos-spacing-md);
  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mtscos-exception--401 .mtscos-exception__code,
.mtscos-exception--403 .mtscos-exception__code {
  background: linear-gradient(135deg, var(--el-color-danger), var(--el-color-danger-light-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mtscos-exception--404 .mtscos-exception__code {
  background: linear-gradient(135deg, var(--el-color-warning), var(--el-color-warning-light-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mtscos-exception--500 .mtscos-exception__code,
.mtscos-exception--503 .mtscos-exception__code {
  background: linear-gradient(135deg, var(--el-color-critical), var(--el-color-critical-light-9));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mtscos-exception__title {
  font-size: var(--el-font-size-extra-large);
  font-weight: var(--el-font-weight-secondary);
  color: var(--el-text-color-primary);
  margin-bottom: var(--mtscos-spacing-sm);
}
.mtscos-exception__description {
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-secondary);
  margin-bottom: var(--mtscos-spacing-lg);
  max-width: 500px;
}
.mtscos-exception__repair {
  display: inline-block;
  padding: var(--mtscos-spacing-sm) var(--mtscos-spacing-md);
  background: var(--el-fill-color-light);
  border-radius: var(--mtscos-radius-sm);
  font-size: var(--el-font-size-small);
  color: var(--el-text-color-regular);
  margin-bottom: var(--mtscos-spacing-lg);
}
.mtscos-exception__actions {
  display: flex;
  gap: var(--mtscos-spacing-sm);
}
.mtscos-exception__trace_id {
  margin-top: var(--mtscos-spacing-xl);
  font-size: var(--el-font-size-extra-small);
  color: var(--el-text-color-placeholder);
  font-family: var(--el-font-family-mono);
}

/* ============================================================================
 * §14 Grid 栅格系统(响应式)
 * ============================================================================ */
.mtscos-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mtscos-spacing-md);
}
.mtscos-col {
  flex: 1;
  min-width: 0;
}
.mtscos-col--1 { flex: 0 0 calc(8.3333% - var(--mtscos-spacing-md) * 8 / 12); }
.mtscos-col--2 { flex: 0 0 calc(16.6667% - var(--mtscos-spacing-md) * 7 / 12); }
.mtscos-col--3 { flex: 0 0 calc(25% - var(--mtscos-spacing-md) * 6 / 12); }
.mtscos-col--4 { flex: 0 0 calc(33.3333% - var(--mtscos-spacing-md) * 5 / 12); }
.mtscos-col--6 { flex: 0 0 calc(50% - var(--mtscos-spacing-md) * 3 / 12); }
.mtscos-col--8 { flex: 0 0 calc(66.6667% - var(--mtscos-spacing-md) * 2 / 12); }
.mtscos-col--12 { flex: 0 0 100%; }

@media (max-width: 768px) {
  .mtscos-col--1, .mtscos-col--2, .mtscos-col--3, .mtscos-col--4,
  .mtscos-col--6, .mtscos-col--8, .mtscos-col--12 {
    flex: 0 0 100%;
  }
}

/* ============================================================================
 * §15 Utility 工具类
 * ============================================================================ */
.mtscos-text-primary { color: var(--el-text-color-primary); }
.mtscos-text-regular { color: var(--el-text-color-regular); }
.mtscos-text-secondary { color: var(--el-text-color-secondary); }
.mtscos-text-placeholder { color: var(--el-text-color-placeholder); }
.mtscos-text-success { color: var(--el-color-success); }
.mtscos-text-warning { color: var(--el-color-warning); }
.mtscos-text-danger  { color: var(--el-color-danger); }
.mtscos-text-info    { color: var(--el-color-info); }

.mtscos-bg-primary { background: var(--el-bg-color); }
.mtscos-bg-page    { background: var(--el-bg-color-page); }
.mtscos-bg-fill    { background: var(--el-fill-color); }

.mtscos-mt-xs { margin-top: var(--mtscos-spacing-xs); }
.mtscos-mt-sm { margin-top: var(--mtscos-spacing-sm); }
.mtscos-mt-md { margin-top: var(--mtscos-spacing-md); }
.mtscos-mt-lg { margin-top: var(--mtscos-spacing-lg); }
.mtscos-mt-xl { margin-top: var(--mtscos-spacing-xl); }

.mtscos-mb-xs { margin-bottom: var(--mtscos-spacing-xs); }
.mtscos-mb-sm { margin-bottom: var(--mtscos-spacing-sm); }
.mtscos-mb-md { margin-bottom: var(--mtscos-spacing-md); }
.mtscos-mb-lg { margin-bottom: var(--mtscos-spacing-lg); }
.mtscos-mb-xl { margin-bottom: var(--mtscos-spacing-xl); }

.mtscos-p-md { padding: var(--mtscos-spacing-md); }
.mtscos-p-lg { padding: var(--mtscos-spacing-lg); }

.mtscos-text-center { text-align: center; }
.mtscos-text-left   { text-align: left; }
.mtscos-text-right  { text-align: right; }

.mtscos-flex { display: flex; }
.mtscos-flex-center { display: flex; align-items: center; justify-content: center; }
.mtscos-flex-between { display: flex; align-items: center; justify-content: space-between; }
.mtscos-flex-col { flex-direction: column; }
.mtscos-gap-sm { gap: var(--mtscos-spacing-sm); }
.mtscos-gap-md { gap: var(--mtscos-spacing-md); }

.mtscos-hidden { display: none !important; }
.mtscos-block { display: block; }
.mtscos-inline-block { display: inline-block; }

@media (max-width: 768px) {
  .mtscos-hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .mtscos-hidden-desktop { display: none !important; }
}

/* ============================================================================
 * §16 Mobile Touch Optimization (flow_frontend_rebuild_20261027)
 *    触摸目标 ≥44px, 表格横滚, 表单单列, 卡片紧凑, 字号缩放
 * ============================================================================ */
@media (max-width: 768px) {
  .mtscos-btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }
  .mtscos-btn--large { min-height: 48px; font-size: 16px; }
  .mtscos-btn--small { min-height: 38px; font-size: 13px; }

  .mtscos-card {
    padding: var(--mtscos-spacing-md);
    border-radius: var(--mtscos-radius-md);
    box-shadow: var(--mtscos-shadow-card-hover);
  }
  .mtscos-card__header, .mtscos-card__footer { padding: var(--mtscos-spacing-sm) 0; }

  .mtscos-input, .mtscos-textarea, .mtscos-select {
    min-height: 44px;
    font-size: 16px; /* iOS 自动放大兜底 */
  }

  .mtscos-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mtscos-table th, .mtscos-table td { white-space: nowrap; padding: 10px 14px; }

  .mtscos-form-item { margin-bottom: var(--mtscos-spacing-lg); }

  .mtscos-modal {
    width: 94%;
    max-width: none;
    margin: var(--mtscos-spacing-md) auto;
    border-radius: var(--mtscos-radius-md);
  }
  .mtscos-modal__header, .mtscos-modal__footer { padding: var(--mtscos-spacing-md); }
  .mtscos-modal__body { padding: var(--mtscos-spacing-md); max-height: 70vh; }

  .mtscos-pagination { flex-wrap: wrap; gap: 6px; }
  .mtscos-pagination__item { min-width: 38px; height: 38px; font-size: 14px; }

  .mtscos-col--1, .mtscos-col--2, .mtscos-col--3, .mtscos-col--4,
  .mtscos-col--6, .mtscos-col--8, .mtscos-col--12 { flex: 0 0 100%; }
}

@media (max-width: 480px) {
  .mtscos-page-title { font-size: var(--el-font-size-large, 18px); }
  .mtscos-exception__code { font-size: 80px; }
  .mtscos-toast-container { top: 12px; right: 12px; left: 12px; }
  .mtscos-alert { padding: 12px 14px; }
  .mtscos-badge, .mtscos-tag { font-size: 12px; padding: 2px 8px; }
}