/* ============================================================
   智胜SaaS 组件库样式 · ui-kit（ms- 前缀，依赖 theme.css tokens）
   组件清单与用法见 UI设计规范_项目强制标准.md
   ============================================================ */

/* ---------- 按钮（V0.3：主按钮=电光青药丸渐变，白字加青影保证可读） ---------- */
.ms-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 18px;border-radius:999px;
  font-size:var(--fs-md);font-weight:500;font-family:inherit;cursor:pointer;
  border:none;transition:all var(--ms-fast) var(--ms-ease);user-select:none;
  white-space:nowrap;
}
.ms-btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.ms-btn-primary{background:var(--ms-brand-gradient);color:#fff;text-shadow:0 1px 2px rgba(8,153,184,.35);box-shadow:var(--ms-shadow-primary)}
.ms-btn-primary:hover{background:var(--ms-primary);transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,211,238,.36)}
.ms-btn-secondary{background:var(--ms-surface);color:var(--ms-text);border:.5px solid rgba(43,58,65,.14);box-shadow:0 1px 2px rgba(43,58,65,.04)}
.ms-btn-secondary:hover{background:#FAFCFD;border-color:rgba(43,58,65,.22)}
.ms-btn-danger{background:var(--ms-danger);color:#fff}
.ms-btn-danger:hover{background:#B91C1C;transform:translateY(-1px);box-shadow:0 6px 16px rgba(220,38,38,.26)}
.ms-btn-ghost{background:var(--ms-surface);color:var(--ms-primary);border:1px solid var(--ms-primary-bright)}
.ms-btn-ghost:hover{background:var(--ms-primary-weak)}
.ms-btn-sm{height:30px;padding:0 13px;font-size:var(--fs-sm)}

/* ---------- 表单字段 ---------- */
.ms-field{margin-bottom:16px}
.ms-field>label{display:block;font-size:var(--fs-sm);color:var(--ms-text-2);margin-bottom:6px;font-weight:500}
.ms-inp{
  width:100%;height:36px;border:.5px solid rgba(0,0,0,.16);border-radius:var(--ms-r-ctrl);
  padding:0 12px;font-size:var(--fs-md);font-family:inherit;color:var(--ms-text);
  background:rgba(255,255,255,.85);transition:border-color var(--ms-fast),box-shadow var(--ms-fast);outline:none;
}
.ms-inp:focus{border-color:var(--ms-primary);box-shadow:0 0 0 3px var(--ms-primary-weak)}
.ms-inp::placeholder{color:var(--ms-text-3)}

/* ---------- Dialog ---------- */
.ms-dlg-mask{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:24px;
  opacity:0;transition:opacity var(--ms-fast) ease;
}
.ms-dlg-mask.show{opacity:1}
.ms-dlg{
  width:420px;max-width:100%;max-height:calc(100vh - 80px);display:flex;flex-direction:column;
  background:var(--ms-glass-strong);
  -webkit-backdrop-filter:var(--ms-blur-strong);backdrop-filter:var(--ms-blur-strong);
  border-radius:var(--ms-r-dlg);box-shadow:var(--ms-shadow-dlg);
  border:.5px solid rgba(255,255,255,.6);
  transform:scale(.96) translateY(8px);transition:transform var(--ms-normal) var(--ms-ease);
}
.ms-dlg-mask.show .ms-dlg{transform:none}
.ms-dlg-head{padding:20px 24px 0;display:flex;align-items:flex-start;gap:12px}
.ms-dlg-head h3{font-size:16px;font-weight:600;margin:0;flex:1;padding-top:2px}
.ms-dlg-close{
  width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.05);color:var(--ms-text-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;
  flex-shrink:0;transition:all var(--ms-fast);
}
.ms-dlg-close:hover{background:rgba(0,0,0,.10);color:var(--ms-text)}
.ms-dlg-body{padding:12px 24px 4px;font-size:13.5px;color:var(--ms-text-2);overflow-y:auto}
.ms-dlg-body p{margin-bottom:4px}
.ms-dlg-error{display:none;background:rgba(255,59,48,.08);border:.5px solid rgba(255,59,48,.22);color:var(--ms-danger);border-radius:var(--ms-r-ctrl);padding:8px 12px;font-size:var(--fs-sm);margin-bottom:12px}
.ms-dlg-foot{padding:18px 24px 22px;display:flex;gap:10px;justify-content:flex-end}
.ms-dlg-foot .ms-btn{min-width:96px}

/* ---------- Toast ---------- */
.ms-toast-wrap{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:9500;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.ms-toast{
  background:var(--ms-glass-strong);-webkit-backdrop-filter:var(--ms-blur);backdrop-filter:var(--ms-blur);
  border-radius:12px;box-shadow:var(--ms-shadow-dlg);border:.5px solid rgba(255,255,255,.6);
  padding:9px 18px;font-size:13.5px;color:var(--ms-text);display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(-10px);transition:all .3s var(--ms-ease);
}
.ms-toast.show{opacity:1;transform:none}
.ms-toast-ico{width:17px;height:17px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;background:var(--ms-success)}
.ms-toast-error .ms-toast-ico{background:var(--ms-danger)}
.ms-toast-info .ms-toast-ico{background:var(--ms-info)}
.ms-toast-warn .ms-toast-ico{background:var(--ms-warning)}

/* ---------- 触发式选择器（点开弹 Dialog） ---------- */
.ms-trigger{
  min-height:36px;background:var(--ms-surface);border:.5px solid rgba(0,0,0,.16);
  border-radius:var(--ms-r-ctrl);padding:4px 30px 4px 10px;cursor:pointer;position:relative;
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:200px;
  transition:border-color var(--ms-fast),box-shadow var(--ms-fast);
  font-size:var(--fs-sm);color:var(--ms-text);
}
.ms-trigger:hover{border-color:var(--ms-primary)}
.ms-trigger.open{border-color:var(--ms-primary);box-shadow:0 0 0 3px var(--ms-primary-weak)}
.ms-trigger .ms-ph{color:var(--ms-text-3)}
.ms-trigger::after{
  content:'';position:absolute;right:11px;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--ms-text-3);border-bottom:1.5px solid var(--ms-text-3);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--ms-fast);pointer-events:none;
}
.ms-trigger.open::after{transform:translateY(-30%) rotate(-135deg)}
.ms-chip{display:inline-flex;align-items:center;gap:5px;background:var(--ms-primary-weak);color:var(--ms-primary);font-size:var(--fs-xs);font-weight:500;border-radius:6px;padding:2.5px 8px;line-height:1.4}
.ms-chip .ms-chip-x{cursor:pointer;opacity:.6;font-size:13px;line-height:1}
.ms-chip .ms-chip-x:hover{opacity:1}
.ms-chip.ms-chip-more{background:rgba(0,0,0,.05);color:var(--ms-text-2)}

/* ---------- 选择 Dialog 列表 ---------- */
.ms-select-search{position:relative;margin-bottom:10px}
.ms-select-search .ms-inp{padding-left:32px}
.ms-select-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.4;pointer-events:none}
.ms-select-all{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:var(--fs-sm);color:var(--ms-text);padding:0 2px 9px}
.ms-select-list{border:.5px solid var(--ms-line);border-radius:12px;overflow-y:auto;max-height:264px;background:rgba(255,255,255,.6)}
.ms-opt{
  display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;user-select:none;
  transition:background var(--ms-fast);border-bottom:.5px solid rgba(0,0,0,.04);font-size:13.5px;
}
.ms-opt:last-child{border-bottom:none}
.ms-opt:hover{background:rgba(34,211,238,.08)}
.ms-opt.sel{font-weight:500}
.ms-opt .ms-opt-sub{font-size:var(--fs-xs);color:var(--ms-text-3);margin-left:auto}
.ms-cb{width:17px;height:17px;border-radius:5px;border:1.5px solid rgba(0,0,0,.22);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--ms-fast);background:var(--ms-surface)}
.ms-cb svg{opacity:0;transform:scale(.5);transition:all var(--ms-fast)}
.ms-opt.sel .ms-cb,.ms-cb.ms-cb-on{background:var(--ms-primary);border-color:var(--ms-primary)}
.ms-opt.sel .ms-cb svg,.ms-cb.ms-cb-on svg{opacity:1;transform:scale(1)}
.ms-rd{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(0,0,0,.22);flex-shrink:0;transition:all var(--ms-fast);background:var(--ms-surface)}
.ms-opt.sel .ms-rd{border-color:var(--ms-primary);border-width:5.5px}
.ms-select-count{display:flex;align-items:center;padding:11px 2px 0;font-size:var(--fs-sm);color:var(--ms-text-2)}
.ms-select-count b{color:var(--ms-primary);font-weight:600}
.ms-select-empty{display:none;text-align:center;padding:30px 0;color:var(--ms-text-3);font-size:var(--fs-sm)}

/* ---------- 表格 ---------- */
.ms-table-box{background:var(--ms-surface);border-radius:var(--ms-r-card);box-shadow:var(--ms-shadow-card);overflow:auto}
table.ms-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.ms-table th{
  position:sticky;top:0;z-index:2;background:#FAFAFC;font-size:var(--fs-xs);font-weight:500;
  color:var(--ms-text-2);text-align:left;padding:9px 14px;border-bottom:.5px solid var(--ms-line);white-space:nowrap;
}
.ms-table td{padding:10px 14px;border-bottom:.5px solid rgba(0,0,0,.05);white-space:nowrap}
.ms-table tbody tr{transition:background var(--ms-fast)}
.ms-table tbody tr:hover{background:rgba(34,211,238,.06)}
.ms-table tbody tr:last-child td{border-bottom:none}
.ms-table .ms-r{text-align:right;font-variant-numeric:tabular-nums}
.ms-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;border-radius:20px;padding:1.5px 9px}
.ms-tag-up{color:#15803D;background:rgba(22,163,74,.12)}
.ms-tag-down{color:#B91C1C;background:rgba(220,38,38,.10)}
.ms-tag-warn{color:#92400E;background:rgba(217,119,6,.12)}
.ms-tag-muted{color:var(--ms-text-2);background:rgba(0,0,0,.05)}

/* ---------- 筛选栏 ---------- */
.ms-filterbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ms-filterbar .ms-field{margin-bottom:0}
.ms-filterbar .ms-filterbar-actions{margin-left:auto;display:flex;gap:10px}

/* ---------- 分页 ---------- */
.ms-pager{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-top:.5px solid var(--ms-line);font-size:var(--fs-xs);color:var(--ms-text-2);flex-wrap:wrap;gap:8px}
.ms-pager .ms-pages{display:flex;gap:5px}
.ms-pg{min-width:27px;height:27px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--ms-fast);font-variant-numeric:tabular-nums}
.ms-pg:hover{background:rgba(0,0,0,.05)}
.ms-pg.ms-pg-on{background:var(--ms-primary);color:#fff;font-weight:500}

/* ---------- 卡片 / 空态 / 骨架 ---------- */
.ms-card{background:var(--ms-surface);border-radius:var(--ms-r-card);box-shadow:var(--ms-shadow-card);padding:24px}
.ms-empty{text-align:center;padding:48px 0;color:var(--ms-text-3);font-size:var(--fs-sm)}
.ms-empty .ms-empty-ico{font-size:34px;opacity:.35;margin-bottom:10px}
.ms-skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:msShimmer 1.5s infinite;border-radius:8px}
@keyframes msShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- 分页选择器 Picker（单选/多选 Dialog，对齐捆绑促销样板） ---------- */
.ms-pk{display:flex;flex-direction:column}
.ms-pk-tools{display:flex;align-items:center;gap:8px;margin-bottom:10px;position:relative}
.ms-pk-tools svg{position:absolute;left:12px;pointer-events:none;opacity:.45}
.ms-pk-tools .ms-inp{padding-left:34px;height:34px;font-size:var(--fs-sm)}
.ms-pk-wrap{display:flex;gap:12px;min-height:0}
.ms-pk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ms-pk-list{border:.5px solid var(--ms-line);border-radius:12px;overflow-y:auto;height:322px;background:rgba(255,255,255,.6)}
.ms-pk-empty{display:none;text-align:center;padding:34px 0;color:var(--ms-text-3);font-size:var(--fs-sm)}
.ms-pk-loading{text-align:center;padding:40px 0;color:var(--ms-text-3);font-size:var(--fs-sm)}
.ms-pk-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:9px 2px 0;font-size:var(--fs-xs);color:var(--ms-text-2)}
.ms-pk-pager-info{margin-right:auto;font-variant-numeric:tabular-nums}
.ms-pk-pager-btn{height:26px;padding:0 12px;border-radius:7px;border:.5px solid rgba(0,0,0,.14);background:var(--ms-surface);font-size:var(--fs-xs);color:var(--ms-text);cursor:pointer;transition:all var(--ms-fast) var(--ms-ease)}
.ms-pk-pager-btn:hover:not(:disabled){border-color:var(--ms-primary);color:var(--ms-primary)}
.ms-pk-pager-btn:disabled{opacity:.4;cursor:not-allowed}
.ms-pk-pager-num{font-variant-numeric:tabular-nums;color:var(--ms-text-2)}
.ms-pk-wrap.has-side .ms-pk-list{height:322px}
.ms-pk-side{width:216px;flex-shrink:0;border:.5px solid var(--ms-line);border-radius:12px;background:rgba(255,255,255,.5);display:flex;flex-direction:column;overflow:hidden}
.ms-pk-side-head{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:.5px solid var(--ms-line);font-size:var(--fs-sm);font-weight:500}
.ms-pk-side-cnt{color:var(--ms-primary);font-weight:600}
.ms-pk-clear{margin-left:auto;font-size:var(--fs-xs);color:var(--ms-text-3);text-decoration:none;font-weight:400}
.ms-pk-clear:hover{color:var(--ms-danger)}
.ms-pk-side-list{flex:1;overflow-y:auto;padding:5px}
.ms-pk-side-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-size:var(--fs-sm);transition:background var(--ms-fast)}
.ms-pk-side-row:hover{background:rgba(0,0,0,.045)}
.ms-pk-side-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-pk-side-x{color:var(--ms-text-3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.ms-pk-side-x:hover{color:var(--ms-danger)}
.ms-pk-side-empty{display:none;text-align:center;padding:28px 0;color:var(--ms-text-3);font-size:var(--fs-xs)}
.ms-opt-disabled{opacity:.42;cursor:not-allowed}
.ms-opt-disabled:hover{background:transparent}