/* ═══ ONBOARDING TOUR ═══ */
#tour-overlay { position:fixed; inset:0; z-index:99999; opacity:0; pointer-events:none; transition:opacity .3s; }
#tour-overlay.on { opacity:1; pointer-events:auto; }

#tour-backdrop { position:fixed; inset:0; z-index:1; }

#tour-spot {
  position:fixed; z-index:2; border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.6);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

#tour-tip {
  position:fixed; z-index:3; width:340px;
  background:#fff; border-radius:16px; padding:22px;
  box-shadow:0 24px 64px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.05);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  animation:tpop .3s ease;
}
@keyframes tpop { 0%{transform:scale(.92);opacity:0} 100%{transform:scale(1);opacity:1} }

.tour-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tour-step-num { font-size:.68rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; }
.tour-x { width:28px; height:28px; border-radius:8px; border:none; background:#f1f5f9; color:#64748b; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.tour-x:hover { background:#e2e8f0; color:#1e293b; }

#tour-t { margin:0 0 8px; font-size:1.05rem; font-weight:800; color:#0f172a; }
#tour-d { margin:0 0 16px; font-size:.84rem; line-height:1.6; color:#475569; }

.tour-dots { display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
.tour-dot { width:8px; height:8px; border-radius:50%; background:#e2e8f0; transition:all .3s; }
.tour-dot.on { background:#2563eb; transform:scale(1.3); }
.tour-dot.past { background:#93c5fd; }

.tour-foot { display:flex; flex-direction:column; gap:10px; }
.tour-nav { display:flex; justify-content:flex-end; gap:8px; }

.tour-btn-done {
  width:100%; padding:10px; border:2px dashed #e2e8f0; border-radius:10px;
  background:#fafbfc; color:#64748b; font-size:.8rem; font-weight:600;
  cursor:pointer; transition:all .2s; text-align:center;
}
.tour-btn-done:hover { border-color:#22c55e; color:#16a34a; background:#f0fdf4; }

.tour-btn-sec {
  padding:8px 16px; border:1px solid #e2e8f0; border-radius:8px;
  background:#fff; color:#475569; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.tour-btn-sec:hover { background:#f1f5f9; }

.tour-btn-pri {
  padding:8px 20px; border:none; border-radius:8px;
  background:linear-gradient(135deg,#2563eb,#3b82f6); color:#fff;
  font-size:.82rem; font-weight:700; cursor:pointer;
  box-shadow:0 2px 10px rgba(37,99,235,.3); transition:all .2s;
}
.tour-btn-pri:hover { box-shadow:0 4px 16px rgba(37,99,235,.45); transform:translateY(-1px); }

/* Dark mode */
:root.dark-mode #tour-tip { background:#1e293b; box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05); }
:root.dark-mode #tour-t { color:#f1f5f9; }
:root.dark-mode #tour-d { color:#94a3b8; }
:root.dark-mode .tour-x { background:#334155; color:#94a3b8; }
:root.dark-mode .tour-x:hover { background:#475569; color:#f1f5f9; }
:root.dark-mode .tour-dot { background:#334155; }
:root.dark-mode .tour-dot.past { background:#1d4ed8; }
:root.dark-mode .tour-btn-done { background:#0f172a; border-color:#334155; color:#64748b; }
:root.dark-mode .tour-btn-done:hover { border-color:#22c55e; color:#22c55e; background:#0f2618; }
:root.dark-mode .tour-btn-sec { background:#334155; border-color:#475569; color:#94a3b8; }

@media(max-width:600px) { #tour-tip { width:calc(100vw - 24px); left:12px!important; } }