/* ============================================================
   tour.css — 新手引导层样式（2026-07-10 战役）
   UI 定稿源：src/tour-demo.html（主理人拍板"UI 就按这个来"）
   移植修正（plan v3 §1.1）：
     ① 日历图例圆点 = 真实日历同值（app.js:36954-36955）
     ② 进度未激活点/阴影 token 化（浅色主题先例 style.css:48-55）
     ③ .tn-tour-help align-self:center（#topnav 是 stretch 容器）
     ④ body.tj-touring 隐 dev FAB/panel（z 高于引导层）
   z-index 块（plan §1.7）：veil 99995 / block 99996 / spot 99997 / bubble+卡 99998
   ============================================================ */

/* ---- 顶栏 "?" 帮助按钮（W2） ---- */
.tn-tour-help{
  align-self:center; margin-left:10px; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:transparent;
  color:var(--text2); font-size:14px; line-height:1; cursor:pointer;
  font-family:var(--font-base);
}
.tn-tour-help:hover{ background:var(--bg3); color:var(--text); }

/* ---- "?" popover 菜单（当前页无引导时列全部） ---- */
.tj-tour-menu{
  position:fixed; z-index:99998; min-width:190px;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,.45); padding:6px;
  font-family:var(--font-base); font-size:12.5px;
}
.tj-tour-menu-title{ padding:6px 10px 4px; font-size:10.5px; letter-spacing:1px; color:var(--text3); }
.tj-tour-menu-item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 10px; border:none; border-radius:7px; background:transparent;
  color:var(--text2); cursor:pointer; text-align:left; font-size:12.5px; font-family:var(--font-base);
}
.tj-tour-menu-item:hover{ background:var(--bg3); color:var(--text); }
.tj-tour-menu-item .tj-tour-menu-seen{ margin-left:auto; color:var(--green); font-size:11px; }

/* ---- 调试期 dev 浮层让位（plan §1.1④） ---- */
body.tj-touring #tj-ec-fab, body.tj-touring #tj-ec-panel{ display:none !important; }

/* ---- 全屏暗幕（欢迎/完成卡底） ---- */
.tj-tour-veil{
  position:fixed; inset:0; z-index:99995;
  background:rgba(4,7,12,.62); /* 与 .tj-upg-overlay 同值先例，light 不覆盖 */
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.tj-tour-veil.tj-tour-show{ opacity:1; pointer-events:auto; }

/* ---- 点击/滚动阻断层 ---- */
.tj-tour-block{ position:fixed; inset:0; z-index:99996; display:none; }

/* ---- 聚光灯（box-shadow 巨幅外投影挖洞） ---- */
.tj-tour-spot{
  position:fixed; z-index:99997; border-radius:10px; pointer-events:none; display:none;
  box-shadow:0 0 0 100vmax rgba(4,7,12,.62), 0 0 0 1px rgba(230,126,34,.85), 0 0 22px rgba(230,126,34,.28);
  transition:top .42s cubic-bezier(.22,.9,.26,1), left .42s cubic-bezier(.22,.9,.26,1),
             width .42s cubic-bezier(.22,.9,.26,1), height .42s cubic-bezier(.22,.9,.26,1),
             border-radius .3s ease;
}
.tj-tour-spot::after{
  content:''; position:absolute; inset:-5px; border-radius:14px;
  border:1px solid rgba(230,126,34,.55);
  animation:tjTourPulse 2.1s ease-out infinite;
}
@keyframes tjTourPulse{
  0%{opacity:.9; transform:scale(1)}
  70%{opacity:0; transform:scale(1.045)}
  100%{opacity:0; transform:scale(1.045)}
}
@media (prefers-reduced-motion: reduce){
  .tj-tour-spot{ transition:none; }
  .tj-tour-spot::after{ animation:none; }
}

/* ---- 气泡卡 ---- */
.tj-tour-bubble{
  position:fixed; z-index:99998; width:336px; display:none;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 20px 50px rgba(15,23,42,.6);
  font-family:var(--font-base);
  transition:top .42s cubic-bezier(.22,.9,.26,1), left .42s cubic-bezier(.22,.9,.26,1);
}
.tj-tour-bubble .tj-tour-inner{ padding:16px 18px 14px; opacity:1; transition:opacity .18s ease; }
.tj-tour-bubble.tj-tour-fading .tj-tour-inner{ opacity:0; }
.tj-tour-eyebrow{ font-size:10.5px; letter-spacing:1.5px; color:var(--accent); font-weight:600; margin-bottom:7px; }
.tj-tour-title{ font-size:15.5px; font-weight:700; color:var(--text); margin-bottom:7px; line-height:1.35; }
.tj-tour-body{ font-size:12.5px; line-height:1.75; color:var(--text2); margin-bottom:14px; }
.tj-tour-body b{ color:var(--text); font-weight:600; }
/* 日历图例圆点 = 真实日历同值（青=有K线数据 #4ecdc4 / 杏=有逐根分析 #f7c59f，app.js:36954-36955） */
.tj-tour-dk{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#4ecdc4; margin:0 3px; vertical-align:1px; }
.tj-tour-dr{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#f7c59f; margin:0 3px; vertical-align:1px; }
.tj-tour-foot{ display:flex; align-items:center; gap:10px; }
.tj-tour-dots{ display:flex; gap:5px; flex:1; }
.tj-tour-dots i{ width:5px; height:5px; border-radius:50%; background:var(--bg3); border:1px solid var(--border); transition:all .25s; }
.tj-tour-dots i.tj-tour-on{ background:var(--accent); border-color:var(--accent); width:14px; border-radius:3px; }
.tj-tour-skip{ background:none; border:none; color:var(--text3); font-size:11.5px; padding:6px 2px; cursor:pointer; font-family:var(--font-base); }
.tj-tour-skip:hover{ color:var(--text2); }
.tj-tour-prev, .tj-tour-next{
  padding:7px 14px; border-radius:8px; font-size:12.5px; cursor:pointer;
  border:1px solid var(--border); background:transparent; color:var(--text2); font-family:var(--font-base);
}
.tj-tour-prev:hover{ background:var(--bg3); color:var(--text); }
.tj-tour-prev:disabled{ opacity:.35; cursor:default; }
.tj-tour-prev:disabled:hover{ background:transparent; color:var(--text2); }
.tj-tour-next{ border-color:var(--accent); color:var(--accent); font-weight:600; }
.tj-tour-next:hover{ background:var(--accent); color:#fff; }
.tj-tour-next:disabled{ opacity:.5; cursor:default; }
/* 金色收尾 CTA（UI 铁律：金色仅付费引导线——只在 gold 步出现） */
.tj-tour-next.tj-tour-gold{ background:var(--tjgold-grad); border:none; color:var(--tjgold-ink-strong); font-weight:700; padding:8px 16px; }
.tj-tour-next.tj-tour-gold:hover{ filter:brightness(1.06); }
/* 气泡指向箭头 */
.tj-tour-arrow{ position:absolute; width:12px; height:12px; background:var(--bg2); border:1px solid var(--border); transform:rotate(45deg); border-radius:2px; }
.tj-tour-bubble[data-place="below"] .tj-tour-arrow{ top:-7px; border-right:none; border-bottom:none; }
.tj-tour-bubble[data-place="above"] .tj-tour-arrow{ bottom:-7px; border-left:none; border-top:none; }
.tj-tour-bubble[data-place="left"]  .tj-tour-arrow{ right:-7px; border-left:none; border-bottom:none; }
.tj-tour-bubble[data-place="right"] .tj-tour-arrow{ left:-7px; border-right:none; border-top:none; }

/* ---- 欢迎 / 完成 居中卡 ---- */
.tj-tour-center{
  position:fixed; z-index:99998; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
  width:400px; max-width:calc(100vw - 32px);
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,.65); padding:30px 30px 24px; text-align:center;
  opacity:0; pointer-events:none; font-family:var(--font-base);
  transition:opacity .24s ease, transform .24s cubic-bezier(.22,.9,.26,1);
}
.tj-tour-center.tj-tour-show{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.tj-tour-c-emoji{ font-size:34px; margin-bottom:12px; }
.tj-tour-c-title{ font-size:18px; font-weight:700; color:var(--text); margin-bottom:10px; }
.tj-tour-c-body{ font-size:13px; color:var(--text2); line-height:1.8; margin-bottom:22px; }
.tj-tour-c-body b{ color:var(--text); }
.tj-tour-c-btns{ display:flex; gap:10px; justify-content:center; }
.tj-tour-c-main{
  padding:9px 26px; border-radius:9px; border:none; background:var(--accent); color:#fff;
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:var(--font-base);
}
.tj-tour-c-main:hover{ background:var(--accent2); }
.tj-tour-c-sub{
  padding:9px 18px; border-radius:9px; border:1px solid var(--border); background:transparent;
  color:var(--text3); font-size:13px; cursor:pointer; font-family:var(--font-base);
}
.tj-tour-c-sub:hover{ color:var(--text2); background:var(--bg3); }

/* ---- 小屏降级（<768px：无聚光灯，气泡转居中卡形态，plan D9） ---- */
@media (max-width: 767px){
  .tj-tour-spot{ display:none !important; }
  .tj-tour-bubble{
    top:50% !important; left:50% !important; transform:translate(-50%,-50%);
    width:calc(100vw - 32px); max-width:360px; transition:none;
  }
  .tj-tour-arrow{ display:none; }
}