/* ============================================================
 * 全站统一页面骨架（page-shell）—— 抬头 hero + 流式根 + 弹窗兜底
 * 老板全局硬规则（2026-10-18）：公共部件全站一个规则——
 *   抬头 → .ecx-hero（icon + 标题 + 副标题 + 右侧动作区），字号/结构全站一致；
 *   页面根 → .ecx-root 流式自适应（大屏吃满到 1680 上限，窄屏留边距）；
 *   手机适配 → 760/480 两档断点（hero 收窄堆叠、根容器缩边距）；
 *   弹窗兜底 → .ecx-modal（max-width:95vw + max-height:80vh，配合 check_responsive 守卫）。
 * 页面差异只允许通过 CSS 变量换肤（--ecx-a/--ecx-b 渐变、--ecx-border/--ecx-title/--ecx-sub），
 * 不允许各页再抄一套 hero 结构（历史上 os/sp/lo 三套同构复制就是反面教材）。
 * 用法见 modules/page-shell.js（ecPageShellHtml / ecPageRoot）。
 * 标杆参照：assets/order-system-styles.css 的 .os-hero（老板 2026-10-18 验收口径）。
 * ============================================================ */
.ecx-root {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── 抬头 hero ── */
.ecx-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--ecx-a, #fffbeb) 0%, var(--ecx-b, #fef3c7) 100%);
  border: 1px solid var(--ecx-border, #fcd9a4);
  border-radius: 16px;
  box-shadow: 0 6px 20px var(--ecx-shadow, rgba(180, 83, 9, .08));
}
.ecx-hero-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 28px;
  line-height: 1;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px var(--ecx-shadow, rgba(180, 83, 9, .16));
  flex-shrink: 0;
}
.ecx-hero-main { min-width: 0; }
.ecx-hero h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--ecx-title, #7c2d12);
}
.ecx-hero-sub {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ecx-sub, #92600d);
}
/* 右侧动作区：按钮/链接统一收在这里，宽屏靠右、窄屏自动换行 */
.ecx-hero-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── 弹窗统一兜底（配合 .ecx-hero 同口径：禁止裸固定 px，AGENTS.md「页面全屏自适应」）── */
.ecx-modal-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  z-index: 10001; display: flex; align-items: center; justify-content: center;
}
.ecx-modal {
  background: var(--surface, #fff); border-radius: 14px; padding: 20px;
  width: 640px;            /* 基准宽，可被覆盖 */
  max-width: 95vw;         /* 兜底三件套：窄屏不溢出 */
  max-height: 80vh;
  overflow-y: auto;
}

/* ── 手机/窄屏适配（全站统一两档断点，与既有 760/480 口径一致）── */
@media (max-width: 760px) {
  .ecx-hero { padding: 14px 14px; gap: 10px; }
  .ecx-hero-icon { width: 40px; height: 40px; font-size: 22px; }
  .ecx-hero h2 { font-size: 18px; }
  .ecx-hero-actions { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .ecx-root { padding: 10px; }
  .ecx-hero { flex-direction: column; align-items: flex-start; }
}