/* ============================================================
   新手引导 (交互点击教学) — 蒙版聚光灯 + 气泡卡片
   跨页(home 1.html / pro pro.html)独立模块, 自带完整配色, 不依赖任一页 CSS 变量。
   亮色为默认 (home 永远亮 + pro 亮色); 仅 pro 暗色模式 body.pro:not(.light) 切深色。
   类名 .ob-* 自有前缀, 不与宿主页冲突。
   ============================================================ */
.ob-root {
  --ob-pane: #ffffff;
  --ob-text: #1a1815;
  --ob-text2: #6b665e;
  --ob-dim: #a8a39a;
  --ob-border: #ece9e2;
  --ob-accent: #B8893E;          /* 暖纸编辑风: 黄铜金(替代旧靛蓝 #2f53e6); 聚光环用它在暗蒙版上醒目又不杂 */
  --ob-accent2: #9a6f2c;
  --ob-glow: rgba(184,137,62,.30);
  --ob-mask: rgba(20,18,14,.44);  /* 暖调暗蒙版(替代旧冷蓝黑) */
  --ob-shadow: 0 16px 40px -12px rgba(20,18,14,.18), 0 2px 8px rgba(20,18,14,.08);
  --ob-radius: 14px;
  --ob-radius-sm: 9px;
  --ob-ease: cubic-bezier(.16,1,.3,1);
  --ob-font: "Plus Jakarta Sans","PingFang SC","Noto Sans SC","Microsoft YaHei",-apple-system,system-ui,sans-serif;
  --ob-display: "Newsreader","Songti SC","Noto Serif SC",Georgia,serif;
}
/* (暗色模式先不做 — 用户要求先只做亮色; 以后加 body.pro:not(.light) .ob-root 覆盖即可) */

.ob-root, .ob-root * { box-sizing: border-box; }

/* 透明点击拦截层 — 引导期间锁住页面交互(模态) */
.ob-overlay { position: fixed; inset: 0; z-index: 2147483640; background: transparent; }

/* 聚光灯 — 超大 box-shadow 把目标外压暗, 目标处高亮 + 靛蓝辉光环 */
.ob-spot {
  position: fixed; z-index: 2147483641;
  border-radius: 11px; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--ob-mask), 0 0 0 2px var(--ob-accent), 0 0 0 8px var(--ob-glow);
  transition: left .40s var(--ob-ease), top .40s var(--ob-ease),
              width .40s var(--ob-ease), height .40s var(--ob-ease), opacity .25s ease;
}
.ob-spot.ob-spot-hide { opacity: 0; left: 50%; top: 50%; width: 0; height: 0; }

/* 气泡卡片 */
.ob-tip {
  position: fixed; z-index: 2147483645;
  width: 332px; max-width: calc(100vw - 24px);
  background: var(--ob-pane); color: var(--ob-text);
  border: 1px solid var(--ob-border); border-radius: var(--ob-radius);
  box-shadow: var(--ob-shadow);
  padding: 17px 18px 14px;
  font-family: var(--ob-font);
  text-align: left;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .26s var(--ob-ease), transform .26s var(--ob-ease),
              left .30s var(--ob-ease), top .30s var(--ob-ease);
}
.ob-tip.ob-in { opacity: 1; transform: none; }

.ob-kicker {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ob-display);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--ob-accent); margin-bottom: 8px;
}
.ob-kicker svg { width: 14px; height: 14px; flex: none; }
.ob-title {
  font-family: var(--ob-display); font-weight: 700;
  font-size: 16.5px; line-height: 1.32; color: var(--ob-text); margin-bottom: 7px;
}
.ob-body { font-size: 13px; line-height: 1.64; color: var(--ob-text2); }
.ob-body b { color: var(--ob-text); font-weight: 600; }
/* 报告步骤: 每条模板 = 标签 + 示例 prompt(代码块样式) */
.ob-tpl { margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--ob-text); }
.ob-eg {
  display: block; margin: 3px 0 1px;
  font-size: 12px; font-weight: 400; color: var(--ob-accent);
  background: rgba(47,83,230,.07);
  border: 1px solid var(--ob-border); border-radius: 7px;
  padding: 4px 9px; line-height: 1.5; word-break: break-all;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; }
.ob-skip {
  appearance: none; -webkit-appearance: none; background: none; border: none; margin: 0;
  cursor: pointer; color: var(--ob-dim); font-size: 12px; font-family: var(--ob-font);
  padding: 5px 2px; transition: color .18s ease;
}
.ob-skip:hover { color: var(--ob-text2); }
.ob-nav { display: flex; align-items: center; gap: 9px; }
.ob-dots { display: flex; align-items: center; gap: 5px; margin-right: 3px; }
.ob-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ob-border); transition: all .3s var(--ob-ease); }
.ob-dot.on { width: 17px; border-radius: 3px; background: var(--ob-accent); }

.ob-btn {
  appearance: none; -webkit-appearance: none; margin: 0;
  font-family: var(--ob-font); font-size: 13px; font-weight: 600;
  padding: 7px 15px; border-radius: var(--ob-radius-sm);
  cursor: pointer; border: 1px solid transparent; line-height: 1.2;
  transition: background .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap;
}
.ob-btn:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.ob-prev { background: transparent; color: var(--ob-text2); border-color: var(--ob-border); }
.ob-prev:hover { background: var(--ob-glow); color: var(--ob-text); }
.ob-next { background: var(--ob-accent); color: #fff; }
.ob-next:hover { background: var(--ob-accent2); }
.ob-hide { display: none !important; }

/* pro 头像菜单里注入的"新手引导"入口图标用 accent 色 (复用 .um-item 外观) */
.um-item.um-tour svg { color: var(--ob-accent, #5b78ff); }