/* BODHI Dashboard · css/welcome-guide.css · 首次登录欢迎 / 帮助弹窗（镜面 PPT 轮播）
   结构：.wg-card = 头（标题+两个 tab+×）/ .wg-stage（截图+文案，左右切换）/ 脚（关闭策略按钮+翻页） */

.wg-card {
  width: min(860px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wg-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgb(var(--ink-200));
}
.dark .wg-head { border-color: rgb(var(--ink-700)); }
.wg-title { font-size: 16px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.wg-tabs { display: flex; gap: 4px; margin-left: 8px; }
.wg-tab {
  padding: 5px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
  color: rgb(var(--ink-500)); background: transparent; border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.wg-tab:hover { background: rgb(var(--ink-100)); }
.dark .wg-tab:hover { background: rgb(var(--ink-800)); }
.wg-tab.active {
  color: rgb(180 83 9); background: rgb(254 243 199 / .5); border-color: rgb(253 230 138);
  font-weight: 600;
}
.dark .wg-tab.active { color: rgb(252 211 77); background: rgb(120 53 15 / .3); border-color: rgb(146 64 14); }
.wg-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  color: rgb(var(--ink-400)); font-size: 16px; line-height: 1;
}
.wg-close:hover { background: rgb(var(--ink-100)); color: rgb(var(--ink-700)); }
.dark .wg-close:hover { background: rgb(var(--ink-800)); color: rgb(var(--ink-300)); }

/* 舞台：截图区固定 16:9，文案区在下；切页用 translateX 镜像滑动 */
.wg-stage { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.wg-track {
  display: flex; height: 100%;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.wg-slide {
  min-width: 100%; height: 100%; overflow-y: auto;
  padding: 18px 26px 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.wg-shot {
  border-radius: 10px; overflow: hidden; flex-shrink: 0;
  border: 1px solid rgb(var(--ink-200));
  box-shadow: 0 4px 18px rgb(0 0 0 / .08);
  background: rgb(var(--ink-50));
}
.dark .wg-shot { border-color: rgb(var(--ink-700)); background: rgb(var(--ink-900)); }
.wg-shot img { display: block; width: 100%; height: auto; }
.wg-slide-title { font-size: 15px; font-weight: 600; }
.wg-slide-title .wg-tag {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; vertical-align: 2px;
  color: rgb(180 83 9); background: rgb(254 243 199 / .6);
}
.dark .wg-slide-title .wg-tag { color: rgb(252 211 77); background: rgb(120 53 15 / .35); }
.wg-slide-points { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.9; color: rgb(var(--ink-700)); }
.dark .wg-slide-points { color: rgb(var(--ink-300)); }
.wg-slide-points li::marker { color: rgb(217 119 6); }

/* 脚：左 = 关闭策略；右 = 翻页 */
.wg-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 14px;
  border-top: 1px solid rgb(var(--ink-200));
}
.dark .wg-foot { border-color: rgb(var(--ink-700)); }
.wg-dismiss { display: flex; gap: 8px; }
.wg-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid rgb(var(--ink-200)); color: rgb(var(--ink-600)); background: transparent;
  transition: background .15s, border-color .15s;
}
.wg-btn:hover { background: rgb(var(--ink-100)); border-color: rgb(var(--ink-300)); }
.dark .wg-btn { border-color: rgb(var(--ink-700)); color: rgb(var(--ink-400)); }
.dark .wg-btn:hover { background: rgb(var(--ink-800)); }
.wg-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wg-arrow {
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px;
  border: 1px solid rgb(var(--ink-200)); color: rgb(var(--ink-600)); background: transparent;
}
.wg-arrow:hover:not(:disabled) { background: rgb(var(--ink-100)); }
.dark .wg-arrow { border-color: rgb(var(--ink-700)); color: rgb(var(--ink-300)); }
.dark .wg-arrow:hover:not(:disabled) { background: rgb(var(--ink-800)); }
.wg-arrow:disabled { opacity: .3; cursor: default; }
.wg-dots { display: flex; gap: 6px; }
.wg-dot {
  width: 7px; height: 7px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgb(var(--ink-300)); border: none; transition: transform .15s, background .15s;
}
.dark .wg-dot { background: rgb(var(--ink-600)); }
.wg-dot.active { background: rgb(217 119 6); transform: scale(1.3); }
.wg-pager { font-size: 12px; color: rgb(var(--ink-400)); min-width: 42px; text-align: center; }

@media (max-width: 640px) {
  .wg-slide { padding: 12px 14px 8px; }
  .wg-head { flex-wrap: wrap; }
  .wg-pager { display: none; }
}