@charset "utf-8";
/* ============================================================
   米优 客户使用界面 · 三档皮肤【半自动版 semi】
   基调：暖灰纸感 · 高级说明书（安静、字大、留白足）
   —— 跟主文件同一套设计语言：一个强调色、细阴影卡片、8点网格、
      无彩色胶囊、动效 150~200ms ease-out。
   铁律：每条规则都锁在 body[data-tier="semi"] 之下，零裸选择器；
        绝不隐藏 / 破坏 .frame-wrap、.assets-dock、.topbar；
        类名不改、DOM 不动，纯样式。
   ============================================================ */

/* ---- 1. 变量覆写：暖灰纸底 + 墨色单强调色（新旧两套变量都覆写，兼容主文件改版前后） ---- */
body[data-tier="semi"] {
  --bg: #f7f6f3;              /* 暖灰纸底 */
  --panel: #ffffff;
  --ink: #262e36;
  --soft-ink: #4e565f;
  --muted: #878d94;
  --line: #e8e5df;
  --line-strong: #d8d4cc;
  --accent: #3a4550;          /* 唯一强调色：墨色 */
  --accent-soft: #eeeff1;
  --ok: #4a7a63;
  --warn: #a16207;
  --danger: #b42318;
  /* 旧变量名映射：全部收成低饱和，避免彩色胶囊感 */
  --green: #5a6e63;
  --green-soft: #edf1ee;
  --purple: #49515d;
  --purple-soft: #eef0f2;
  --amber: #a16207;
  --amber-soft: #f7f2e4;
  --amber-line: #e2d3a8;
  --gray: #70767e;
  --gray-soft: #f0efeb;
  --shadow: 0 1px 2px rgba(38, 46, 54, .04), 0 6px 18px rgba(38, 46, 54, .05);
}

/* ---- 2. 步骤条当前站：墨色实底 ----
   坑已修（保留）：hover 只作用于非 active 站；
   active（含 hover 时）锁死深底白字，避免浅底压深底白字看不见。 */
body[data-tier="semi"] .step {
  background: #fbfaf7;
  border-color: var(--line);
}
body[data-tier="semi"] .step:hover:not(.active) { background: #f2f1ec; }
body[data-tier="semi"] .step.active,
body[data-tier="semi"] .step.active:hover {
  background: var(--accent);          /* = #3a4550 墨色 */
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(38, 46, 54, .18);
}
/* 深底上的字与角标必须可读 */
body[data-tier="semi"] .step.active .step-name,
body[data-tier="semi"] .step.active .step-no { color: #fff; }
body[data-tier="semi"] .step.active .step-no {
  background: rgba(255, 255, 255, .16);
  border-color: transparent;
}
body[data-tier="semi"] .step.active .step-tag {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
body[data-tier="semi"] .step-arrow { color: var(--line-strong); }

/* 顶部货号高亮块、输入框焦点也跟着墨色 */
body[data-tier="semi"] .sku-current { border-color: #d9d7d1; }
body[data-tier="semi"] .sku-block input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58, 69, 80, .10);
}

/* ============================================================
   3. 行动条（#tierZone 已并进工作区头部的槽位，限高约140px；
      semi 皮肤自建 DOM：.semi-guide > .semi-bar）
   单行 flex：左引导语 · 中主按钮（红线站=警示点+细字）· 右上一步/下一步；
   窄屏允许折成两行，总高度始终压在槽位限高之内。
   ============================================================ */
body[data-tier="semi"] .semi-guide { margin: 0; }

body[data-tier="semi"] .semi-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                    /* 窄屏折两行 */
  gap: 10px 16px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* 左：一句大白话引导 */
body[data-tier="semi"] .semi-bar-line {
  flex: 1 1 260px;
  min-width: 200px;
  font-size: 14px;
  color: var(--soft-ink);
  line-height: 1.5;
}

/* 中：主行动按钮（墨色实底白字、高44、圆角10） */
body[data-tier="semi"] .semi-bar-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(38, 46, 54, .16);
  transition: background .18s ease-out, box-shadow .18s ease-out, transform .12s ease-out;
}
body[data-tier="semi"] .semi-bar-btn:hover { background: #313b45; }
body[data-tier="semi"] .semi-bar-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(38, 46, 54, .12);
}

/* 红线两站：警示色小圆点 + 细字，占主按钮的位置，无按钮 */
body[data-tier="semi"] .semi-bar-lock {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--soft-ink);
  line-height: 1.4;
}
body[data-tier="semi"] .semi-bar-lock::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}

/* 右：上一步 / 下一步 两颗小文字钮 */
body[data-tier="semi"] .semi-bar-nav {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin-left: auto;
}
body[data-tier="semi"] .semi-bar-navbtn {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--soft-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease-out, transform .12s ease-out;
}
body[data-tier="semi"] .semi-bar-navbtn:hover { background: var(--gray-soft); }
body[data-tier="semi"] .semi-bar-navbtn:active { transform: translateY(1px); }
body[data-tier="semi"] .semi-bar-navbtn:disabled,
body[data-tier="semi"] .semi-bar-navbtn:disabled:hover,
body[data-tier="semi"] .semi-bar-navbtn:disabled:active {
  opacity: .4;
  cursor: not-allowed;
  background: transparent;
  transform: none;
}

/* 窄屏：引导语独占一行，按钮和翻页钮挤第二行 */
@media (max-width: 720px) {
  body[data-tier="semi"] .semi-bar { padding: 10px 12px; gap: 8px 12px; }
  body[data-tier="semi"] .semi-bar-line { flex: 1 1 100%; min-width: 0; }
}

/* ============================================================
   4. 「这一步」引导行（挪进工作台内容区顶部）
   —— 纯说明站不再占一条近乎空白的行动条：#tierZone 收掉，
      这一句安静的大白话改放在工作台内容最上面（站标题下面），
      不加卡片/边框/背景，只留一行留白足的引导，工作台照旧铺满。
   ============================================================ */
body[data-tier="semi"] .semi-step-note {
  flex: none;
  margin: 0;
  padding: 14px 24px 2px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.6;
}