/* ══════════════ 新手引导（onboarding tour）══════════════
   2026-11-04 用户要求：第一次打开工作台的人，靠「下一步」一步一步看懂基本操作；
   看完（或跳过）之后，顶栏留一个「?」可以随时重看，不想看就点跳过直接进界面。

   层级 99990 —— 刻意低于门禁 .isup-gate(99998)、高于顶栏 300 / 地图工具条 1170 / 客服气泡 9999：
   这样登录态一旦失效，门禁会自然盖在引导上面，不会被引导挡住。
   深色暗场由「高亮框的超大外阴影」制造（box-shadow 0 0 0 9999px），
   不用四个 div 拼，也不会因为目标尺寸变化出现接缝。 */

.gtour {
  position: fixed; inset: 0; z-index: 99990;
  pointer-events: none;                    /* 只有 mask / 卡片自己接收点击 */
}
/* 没有高亮框的屏（欢迎 / 收尾 / 认领卡没出现）：暗场由容器自己给。
   有高亮框时会把 --dim 去掉 —— 否则阴影 + 背景两层叠起来黑成一片。 */
.gtour--dim { background: rgba(24, 20, 16, .56); }
.gtour[hidden] { display: none !important; }

/* 全屏拦截层：引导期间不让用户误点界面（下一步由卡片控制） */
.gtour__mask {
  position: fixed; inset: 0; pointer-events: auto;
  background: transparent; cursor: default;
}

/* 高亮框：本身透明，靠 9999px 外阴影压暗四周 —— 目标区域自然"挖空" */
.gtour__hole {
  position: fixed; pointer-events: none;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(24, 20, 16, .56),
    0 0 0 2px rgba(255, 255, 255, .9),
    0 0 0 5px rgba(226, 113, 29, .5);
  transition:
    left .3s cubic-bezier(.22,.61,.36,1), top .3s cubic-bezier(.22,.61,.36,1),
    width .3s cubic-bezier(.22,.61,.36,1), height .3s cubic-bezier(.22,.61,.36,1);
  /* 🔴 opacity 刻意不做过渡：做了以后第一帧是透明的，用户会看到"引导弹出来了但页面没变暗" */
  opacity: 1;
}

/* 说明卡片 */
.gtour__card {
  position: fixed; pointer-events: auto;
  width: 340px; max-width: calc(100vw - 32px);
  padding: 15px 18px 13px;
  background: #fff; border-radius: 13px;
  border: 1px solid rgba(122, 110, 98, .2);
  border-top: 3px solid #e2711d;           /* 与收起按钮同一个橙，暗示"这是同一套引导" */
  box-shadow: 0 16px 44px rgba(40, 32, 24, .24), 0 2px 8px rgba(40, 32, 24, .1);
  transition: left .3s cubic-bezier(.22,.61,.36,1), top .3s cubic-bezier(.22,.61,.36,1);
}
.gtour__step {
  font: 600 11px/1 var(--font-mono); color: var(--muted);
  letter-spacing: .06em; margin-bottom: 7px;
}
.gtour__title {
  font-size: 15.5px; font-weight: 600; color: var(--charcoal);
  margin: 0 0 7px; line-height: 1.45;
}
.gtour__text {
  font-size: 13px; line-height: 1.78; color: var(--stone);
  margin: 0 0 14px;
}
.gtour__text b { color: var(--charcoal); font-weight: 600; }
.gtour__acts { display: flex; align-items: center; gap: 8px; }
.gtour__acts .spacer { flex: 1; }

.gtour__btn {
  flex: none; padding: 6px 13px; border-radius: 8px; cursor: pointer;
  font: 600 13px/1.2 var(--font-sans);
  border: 1px solid var(--border); background: #fff; color: var(--stone);
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.gtour__btn:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.gtour__btn:active { transform: translateY(1px); }
.gtour__btn--go {
  background: #e2711d; border-color: #c55f13; color: #fff;
  box-shadow: 0 1px 4px rgba(196, 95, 19, .32);
}
.gtour__btn--go:hover {
  background: #c55f13; border-color: #b8560f; color: #fff;
  box-shadow: 0 3px 10px rgba(196, 95, 19, .4);
}
.gtour__btn--skip {
  border-color: transparent; background: transparent; color: var(--muted); padding-left: 0;
}
.gtour__btn--skip:hover { background: transparent; color: var(--charcoal); text-decoration: underline; }
.gtour__btn[disabled] { opacity: .38; cursor: default; transform: none; }
.gtour__btn[disabled]:hover { background: #fff; border-color: var(--border); color: var(--stone); }

/* 末屏：卡片居中、去掉左上角计数感 */
.gtour__card--center { text-align: left; }
.gtour__card--center .gtour__title { font-size: 17px; }

/* 顶栏的「?」入口：和周边小按钮同高，但一眼看得出是"帮助" */
.btn-guide {
  flex: none; width: 26px; height: 26px; padding: 0; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--stone); cursor: pointer;
  font: 700 14px/1 var(--font-sans);
  transition: background .15s, color .15s, border-color .15s;
}
.btn-guide:hover { background: #fdf0e4; border-color: #e2711d; color: #c55f13; }

/* 背景隔离的 CSS 兜底（加固）：JS 那边给 body 子元素加了 inert，
   但 inert 在 Chrome < 102 / 老 Safari 上不生效 —— 那时靠这条把指针关掉，
   配合 keydown 里的 Tab 循环，鼠标和键盘都出不去。 */
body.gtour-open .topbar,
body.gtour-open .workspace { pointer-events: none; }

/* 系统开了「减少动态效果」就把位移动画关掉：闪烁/滑动对前庭敏感的人不友好 */
@media (prefers-reduced-motion: reduce) {
  .gtour__hole, .gtour__card, .gtour__btn { transition: none !important; }
}

/* 窄屏（内嵌在主站侧边栏时更常见）：卡片收窄、字号略降 */
@media (max-width: 780px) {
  .gtour__card { width: 300px; padding: 13px 15px 12px; }
  .gtour__title { font-size: 15px; }
  .gtour__text { font-size: 12.6px; }
}