/* ════════════════════════════════════════════════════════════════════
   ONBOARDING TUTORIAL — Vitalité · 双语入门导览
   Fixed high-z overlay: dim veil + spotlight ring around the element being
   explained + a bilingual step card with Prev/Back/Next/Done controls.
   Colors follow the page theme (falls back to neutral when vars absent).
   ════════════════════════════════════════════════════════════════════ */
.tut-root{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483000;}
.tut-veil{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(8,14,24,.55);}
.tut-root.has-spot .tut-veil{display:none;} /* the ring's giant shadow dims, no veil over the highlighted element */
.tut-spot{position:fixed;border:2px solid #7c3aed;border-radius:12px;
  box-shadow:0 0 0 4px rgba(124,58,237,.28),0 0 28px rgba(124,58,237,.35),
             0 0 0 9999px rgba(8,14,24,.55);
  transition:all .28s ease;display:none;pointer-events:none;z-index:2147483100;}
.tut-card{position:fixed;width:min(92vw,460px);z-index:2147483200;
  background:var(--surface,#ffffff);color:var(--text,#1a2332);
  border:1px solid var(--border,rgba(20,40,65,.16));
  border-radius:18px;box-shadow:0 24px 80px rgba(4,10,20,.45);
  padding:1.35rem 1.5rem 1.15rem;box-sizing:border-box;
  font-family:var(--font,Georgia,"Times New Roman","Songti SC","SimSun",'PingFang SC',serif);
  line-height:1.55;}
.tut-badge{font-size:1.9rem;line-height:1;margin-bottom:.55rem;}
.tut-title{font-size:1.18rem;font-weight:800;margin-bottom:.4rem;letter-spacing:.01em;}
.tut-title .tut-l-en{display:block;}
.tut-title .tut-l-zh{display:block;font-size:.92rem;font-weight:600;color:var(--accent,#7c3aed);
  margin-top:.18rem;opacity:.9;}
.tut-body{font-size:.95rem;opacity:.92;margin-bottom:.85rem;}
.tut-body .tut-l-en{display:block;}
.tut-body .tut-l-zh{display:block;margin-top:.35rem;padding-top:.3rem;color:var(--text2,#35435c);
  border-top:1px dashed var(--border2,rgba(20,40,65,.15));opacity:1;}
.tut-dots{display:flex;gap:.32rem;align-items:center;margin-bottom:.85rem;}
.tut-dot{width:7px;height:7px;border-radius:50%;
  background:var(--border3,rgba(20,40,65,.25));
  transition:all .2s;}
.tut-dot.on{width:20px;border-radius:4px;background:var(--accent,#7c3aed);}
.tut-btns{display:flex;gap:.55rem;align-items:center;justify-content:flex-end;}
.tut-btn{border:1px solid var(--border,rgba(20,40,65,.2));
  background:var(--surface2,#f4f6fa);color:var(--text,#1a2332);
  border-radius:999px;padding:.5rem 1.05rem;font-size:.86rem;cursor:pointer;
  font-family:inherit;transition:all .18s;}
.tut-btn:hover{filter:brightness(.96);transform:translateY(-1px);}
.tut-btn.ghost{opacity:.75;}
.tut-btn.primary{background:var(--accent,#7c3aed);border-color:var(--accent,#7c3aed);
  color:#fff;font-weight:700;}
.tut-btn.primary:hover{filter:brightness(1.08);}
@media (max-width:520px){
  .tut-card{width:min(94vw,460px);padding:1.05rem 1.1rem .95rem;}
  .tut-badge{font-size:1.55rem;}
}
/* Respect dark theme even when the page's own vars are absent */
body.dark .tut-card{background:#151e2e;color:#eef2f8;
  border-color:rgba(160,180,215,.22);}
body.dark .tut-dot{background:rgba(160,180,215,.28);}
body.dark .tut-btn{background:#243248;color:#eef2f8;border-color:rgba(160,180,215,.25);}

/* ═══ Replay affordance — small ↻ pill, top-left, after the tour is done ═══ */
.tut-replay{
  display:inline-flex;align-items:center;gap:.34rem;
  border:1px solid var(--border,rgba(20,40,65,.2));
  background:var(--surface2,#f4f6fa);color:var(--text,#1a2332);
  border-radius:999px;padding:.28rem .62rem;font-size:.78rem;
  font-weight:600;line-height:1;cursor:pointer;font-family:inherit;
  white-space:nowrap;opacity:.92;transition:all .18s;
}
.tut-replay:hover{opacity:1;filter:brightness(.97);transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.10);}
.tut-replay:focus-visible{outline:2px solid var(--accent,#7c3aed);outline-offset:2px;}
body.dark .tut-replay{background:#243248;color:#eef2f8;
  border-color:rgba(160,180,215,.25);}
/* Compact flanks on narrow screens: shrink the label away, keep the icon. */
@media (max-width:600px){
  .lin-topleft .tut-replay, .header-inner .tut-replay{padding:.3rem .42rem;}
  .lin-topleft .tut-replay .tut-replay-text, .header-inner .tut-replay .tut-replay-text{display:none;}
}