/* ============================================================
   MTYP 统一组件层 — 2026-07-17
   加载顺序要求：在 mtyp-design-tokens.css 之后、mtyp-bridge.css 之前。
   本文件只新增 .m-* 语义类，不选中任何既有类名，对现有页面零影响。
   新页面/新组件一律使用这里的类，禁止再造 *-btn 家族。
   ============================================================ */

/* —— 页头：<div class="m-page-head"><div><h1>…</h1><p>…</p></div><div class="m-page-actions">…</div></div> —— */
/* Shared application page shell. This file loads after page-local styles, so
   title width, spacing and typography stay consistent across workbenches. */
body[data-ui-refresh] .std-page{
  width:100%;max-width:1280px!important;margin-inline:auto;min-width:0;
}
body[data-ui-refresh] .std-page:has(> .std-gradient-hero),
body[data-ui-refresh] .std-page-narrow:has(> .std-gradient-hero){
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
}
body[data-ui-refresh] .std-page-narrow{
  width:100%;max-width:1040px!important;margin-inline:auto;min-width:0;
}
body[data-ui-refresh] .std-gradient-hero{
  display:grid!important;place-items:center;width:min(1280px,100%)!important;max-width:1280px!important;
  box-sizing:border-box!important;
  min-height:94px;margin:0 auto 16px!important;padding:20px 24px!important;
  justify-self:center;left:auto;transform:none;
  overflow:hidden;border:1px solid rgba(79,70,229,.22)!important;border-radius:8px!important;
  background:linear-gradient(112deg,#6d3df5 0%,#7151ee 52%,#4f6ee8 100%)!important;
  box-shadow:0 10px 28px rgba(79,70,229,.16)!important;text-align:center!important;
}
body[data-ui-refresh] .std-gradient-hero::before{content:none!important}
body[data-ui-refresh] .std-gradient-hero h1{
  width:100%;margin:0!important;color:#fff!important;font-size:30px!important;
  font-weight:900!important;line-height:1.25!important;letter-spacing:0!important;
  text-align:center!important;text-shadow:none!important;overflow-wrap:anywhere;
}
.std-title-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  width:100%;margin:0 0 1rem;padding:.7rem .8rem;border:1px solid var(--m-line,#e5e7eb);
  border-radius:8px;background:var(--m-card,#fff);color:var(--m-ink,#111827);
}
.std-title-toolbar-end{justify-content:flex-end}
.std-title-toolbar p{margin:0;color:var(--m-muted,#64748b);font-size:.82rem;line-height:1.5}
@media(max-width:700px){
  body[data-ui-refresh] .std-gradient-hero{width:100%!important;max-width:100%!important;min-height:72px;margin:0 auto 16px!important;padding:16px!important}
  body[data-ui-refresh] .std-gradient-hero h1{font-size:23px!important}
  .std-title-toolbar{align-items:stretch;flex-direction:column}
}

.m-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.m-page-head h1{margin:0;font-size:1.55rem;font-weight:800;color:var(--m-ink);line-height:1.25;white-space:normal}
.m-page-head p{margin:.3rem 0 0;font-size:.95rem;color:var(--m-muted);line-height:1.55;white-space:normal}
.m-page-actions{display:flex;align-items:center;gap:.5rem;flex:none}

/* —— 按钮：四级 × 两尺寸。默认即 secondary —— */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.65rem;padding:.55rem 1rem;border-radius:var(--m-radius-ctl);
  border:1px solid var(--m-line);background:var(--m-card);color:var(--m-ink);
  font-family:var(--m-font);font-size:.9rem;font-weight:800;line-height:1.2;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.m-btn:hover{background:var(--m-soft);border-color:var(--m-line-strong);text-decoration:none}
.m-btn--primary{background:var(--m-primary);border-color:var(--m-primary);color:#fff}
.m-btn--primary:hover{background:var(--m-primary-hover);border-color:var(--m-primary-hover)}
.m-btn--ghost{background:transparent;border-color:transparent;color:var(--m-muted)}
.m-btn--ghost:hover{background:var(--m-soft);border-color:transparent;color:var(--m-ink)}
.m-btn--danger{background:var(--m-card);border-color:var(--m-danger);color:var(--m-danger)}
.m-btn--danger:hover{background:var(--m-danger-soft);border-color:var(--m-danger)}
.m-btn--sm{min-height:2.1rem;padding:.35rem .7rem;font-size:.8rem}
.m-btn:disabled{opacity:.5;cursor:not-allowed}

/* —— 状态徽章：语义 4 色，内容撑宽、永不截断 —— */
.m-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;
  border-radius:999px;font-size:.8rem;font-weight:800;line-height:1.4;white-space:nowrap;max-width:none}
.m-chip--ok{background:var(--m-success-soft);color:var(--m-success-ink);border:1px solid var(--m-success-line)}
.m-chip--warn{background:var(--m-warning-soft);color:var(--m-warning-ink);border:1px solid var(--m-warning-line)}
.m-chip--err{background:var(--m-danger-soft);color:var(--m-danger-ink);border:1px solid var(--m-danger-line)}
.m-chip--info{background:var(--m-info-soft);color:var(--m-info-ink);border:1px solid var(--m-info-line)}
.m-chip--brand{background:var(--m-primary-soft);color:var(--m-primary);border:1px solid var(--m-line-strong)}

/* —— 卡片 —— */
.m-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:var(--m-radius-card);
  box-shadow:var(--m-shadow);padding:1.2rem}
.m-card h2{margin:0 0 .6rem;font-size:1.1rem;font-weight:700;color:var(--m-ink)}

/* —— 步骤条：<div class="m-steps"><span class="active"><b>1</b>确定主题</span>…</div> —— */
.m-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.55rem;margin:.8rem 0 1rem}
.m-steps span{display:flex;align-items:center;gap:.5rem;min-height:2.8rem;padding:.55rem .7rem;
  border:1px solid var(--m-line);border-radius:11px;background:var(--m-card);
  color:var(--m-muted);font-size:.85rem;font-weight:800}
.m-steps b{display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;
  border-radius:50%;background:var(--m-primary-soft);color:var(--m-primary);flex:none;font-weight:800}
.m-steps .active{border-color:var(--m-line-strong);background:var(--m-soft);color:var(--m-primary)}
.m-steps .active b{background:var(--m-primary);color:#fff}

/* —— 工具条（页头下的操作行）—— */
.m-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}

/* —— 文本溢出工具（替代散落的 nowrap/ellipsis）—— */
.m-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-scroll-x{overflow-x:auto;white-space:nowrap}