/* =====================================================================
   tour.css — 通用产品引导(快速教学)引擎样式
   视觉风格复用项目 CSS 变量(--accent / --surface / --text2 / --border2 …)
   自动适配深浅色主题(由 [data-theme] 控制变量取值)。
   ===================================================================== */

/* ---- 右下角浮动"快速教学"按钮 ---- */
.tour-fab{
  position:fixed;
  right:22px;
  bottom:140px;
  z-index:99990;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border:1px solid var(--border2, rgba(0,0,0,.12));
  border-radius:24px;
  background:var(--surface, #fff);
  color:var(--text2, #6b7280);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:transform .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-user-select:none;
  user-select:none;
}
.tour-fab:hover{
  color:var(--accent, #3b6fd4);
  border-color:var(--accent, #3b6fd4);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.tour-fab .tour-fab-ico{font-size:15px;line-height:1}

/* 引导进行时隐藏浮动按钮 */
.tour-active .tour-fab{display:none}

/* ---- 点击遮罩层(拦截页面交互) ---- */
.tour-mask{
  position:fixed;
  inset:0;
  z-index:99991;
  background:transparent;
  cursor:default;
}

/* ---- 高亮挖空框(用超大 box-shadow 形成镂空 + 全屏变暗) ---- */
.tour-highlight{
  position:fixed;
  z-index:99992;
  border-radius:8px;
  pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.62), 0 0 0 2px var(--accent, #3b6fd4);
  outline:2px solid var(--accent, #3b6fd4);
  outline-offset:0;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
/* 浅色主题下遮罩略浅一点 */
[data-theme="light"] .tour-highlight{
  box-shadow:0 0 0 9999px rgba(0,0,0,.45), 0 0 0 2px var(--accent, #3b6fd4);
}

/* 没有目标元素(居中讲解)时,只显示全屏暗幕,不显示边框 */
.tour-highlight.tour-no-target{
  outline:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.62);
  width:0;height:0;
}
[data-theme="light"] .tour-highlight.tour-no-target{
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);
}

/* ---- 讲解气泡 ---- */
.tour-bubble{
  position:fixed;
  z-index:99993;
  width:300px;
  max-width:calc(100vw - 32px);
  background:var(--surface, #fff);
  color:var(--text, #1f2937);
  border:1px solid var(--border2, rgba(0,0,0,.12));
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  padding:16px 16px 14px;
  font-family:inherit;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease, top .2s ease, left .2s ease;
}
.tour-bubble.tour-show{opacity:1;transform:translateY(0)}

.tour-bubble-title{
  font-size:15px;
  font-weight:600;
  color:var(--text, #1f2937);
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.3;
}
.tour-bubble-title::before{
  content:"";
  width:4px;
  height:15px;
  border-radius:2px;
  background:var(--accent, #3b6fd4);
  flex-shrink:0;
}
.tour-bubble-text{
  font-size:13px;
  line-height:1.65;
  color:var(--text2, #6b7280);
  margin:0 0 14px;
}

.tour-bubble-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.tour-progress{
  font-size:12px;
  color:var(--text2, #6b7280);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tour-btns{display:flex;align-items:center;gap:6px}

.tour-btn{
  font-family:inherit;
  font-size:12px;
  line-height:1;
  padding:7px 12px;
  border-radius:6px;
  cursor:pointer;
  border:1px solid var(--border2, rgba(0,0,0,.12));
  background:transparent;
  color:var(--text2, #6b7280);
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.tour-btn:hover{
  color:var(--text, #1f2937);
  border-color:var(--accent, #3b6fd4);
}
.tour-btn-primary{
  background:var(--accent, #3b6fd4);
  border-color:var(--accent, #3b6fd4);
  color:#fff;
}
.tour-btn-primary:hover{
  background:var(--accent2, #2d5ab8);
  border-color:var(--accent2, #2d5ab8);
  color:#fff;
}
.tour-btn-skip{
  border-color:transparent;
  padding:7px 8px;
}
.tour-btn-skip:hover{
  color:var(--red, #dc2626);
  border-color:transparent;
}

/* ---- 气泡小箭头 ---- */
.tour-arrow{
  position:absolute;
  width:12px;
  height:12px;
  background:var(--surface, #fff);
  border:1px solid var(--border2, rgba(0,0,0,.12));
  transform:rotate(45deg);
  z-index:-1;
}
.tour-arrow.tour-arrow-top{bottom:-7px;border-top:none;border-left:none}
.tour-arrow.tour-arrow-bottom{top:-7px;border-bottom:none;border-right:none}
.tour-arrow.tour-arrow-left{right:-7px;border-bottom:none;border-left:none}
.tour-arrow.tour-arrow-right{left:-7px;border-top:none;border-right:none}
.tour-arrow.tour-arrow-hidden{display:none}

@media (max-width:768px){
  .tour-fab{right:14px;bottom:80px;padding:8px 14px}
  .tour-bubble{width:280px}
}