/* ============================================================
   米优·客户工作台 新手任务引导（一档）
   本文件只负责引导的遮罩 / 高亮描边 / 气泡 / 右上角入口的样式。
   不修改页面既有样式，不新增任何业务规则。
   文案一律由 onboarding.js 运行时从页面 STATIONS 数组读取，
   本文件与 onboarding.json 都不含页面话术。
   ============================================================ */

/* —— 右上角可重开入口（由 onboarding.js 动态挂到 .ob-topbar-tools） —— */
.miyou-onboard-entry {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #e4e4ec;
  border-radius: 999px;
  background: #fff;
  color: #23231f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.miyou-onboard-entry:hover {
  background: #f6f7f9;
  border-color: #cfd3da;
}
.miyou-onboard-entry .obx-entry-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex: none;
}
.miyou-onboard-entry.is-done {
  color: #0e9f6e;
  border-color: #bce8d5;
  background: #f1fbf6;
}
.miyou-onboard-entry.is-done .obx-entry-dot {
  background: #0e9f6e;
}

/* —— 引导总容器：遮罩 + 高亮框 + 气泡，全部由 onboarding.js 动态创建 —— */
#miyouOnboardRoot {
  position: fixed;
  inset: 0;
  z-index: 8600;          /* 高于页面普通内容，低于页面真弹窗(99999)与游客闸，绝不遮挡真弹窗 */
  pointer-events: none;  /* 整层默认不拦截点击，让真元素可点 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 高亮框：透明内芯 + 巨大外扩阴影压暗其余区域 + 四周描边 */
#miyouOnboardSpot {
  position: fixed;
  z-index: 8601;
  border-radius: 10px;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(15, 23, 42, .55),   /* 整页压暗，只留本框亮着 */
    0 0 0 3px #f59e0b,                     /* 四周描边 */
    0 0 0 7px rgba(245, 158, 11, .22);     /* 描边外一圈柔光 */
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
  pointer-events: none;
}
#miyouOnboardSpot.obx-nudge {
  animation: obxNudge .28s ease;
}
@keyframes obxNudge {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55), 0 0 0 3px #f59e0b, 0 0 0 7px rgba(245, 158, 11, .22); }
  50%      { box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55), 0 0 0 5px #fbbf24, 0 0 0 10px rgba(245, 158, 11, .45); }
}

/* —— 气泡 —— */
#miyouOnboardBubble {
  position: fixed;
  z-index: 8602;
  width: 356px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .24);
  overflow: hidden;
  pointer-events: auto;   /* 气泡内部按钮可点 */
  transition: left .22s ease, top .22s ease;
}

.obx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #f0f1f5;
}
.obx-progress {
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
  letter-spacing: .02em;
}
.obx-close {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #f1f2f5;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.obx-close:hover { background: #e6e8ee; color: #23231f; }

.obx-body { padding: 14px 14px 4px; }

.obx-seg { margin-bottom: 12px; }
.obx-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #9aa1ad;
  margin-bottom: 3px;
}
.obx-seg .obx-title {
  font-size: 15px;
  font-weight: 700;
  color: #23231f;
  line-height: 1.45;
}
.obx-seg .obx-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #3a3f47;
}
.obx-seg .obx-text b { color: #23231f; }

/* 第3段「会发生什么」用浅色块收尾，强调“结果落到哪” */
.obx-seg.obx-seg3 { background: #faf8f2; border: 1px solid #f2ecdc; border-radius: 10px; padding: 8px 10px; }
.obx-seg.obx-seg3 .obx-label { color: #b7791f; }

/* 单句模式（frame 站）：整块就是一句话 */
.obx-oneliner { padding: 2px 0 0; }
.obx-oneliner .obx-title { font-size: 15px; }
.obx-oneliner .obx-text { margin-top: 6px; }

/* —— 底部按钮 —— */
.obx-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 14px;
}
.obx-btn {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.obx-btn.obx-skip {
  background: #fff;
  border-color: #d9dce3;
  color: #6b7280;
}
.obx-btn.obx-skip:hover { background: #f4f5f7; color: #23231f; }
.obx-btn.obx-next {
  background: #f59e0b;
  color: #fff;
}
.obx-btn.obx-next:hover { background: #d97706; }

/* 点错别处时的“点这里”提示片（动态显示在气泡内） */
.obx-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 2px 14px 12px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #fff7e6;
  border: 1px solid #fcdba0;
  color: #b45309;
  font-size: 12.5px;
  font-weight: 600;
}
.obx-hint.show { display: flex; }

@media (max-width: 560px) {
  #miyouOnboardBubble { width: calc(100vw - 24px); }
}