/* ---- the step-by-step guide (tour.js) ---- */
.tour-root { position: fixed; inset: 0; z-index: 3000; opacity: 0; transition: opacity .3s ease; }
.tour-root.on { opacity: 1; }
.tour-block { position: absolute; inset: 0; }
.tour-spot { position: fixed; top: 50%; left: 50%; width: 0; height: 0; border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(10, 22, 16, .7); pointer-events: none;
    transition: top .45s cubic-bezier(.22, .8, .22, 1), left .45s cubic-bezier(.22, .8, .22, 1), width .45s cubic-bezier(.22, .8, .22, 1), height .45s cubic-bezier(.22, .8, .22, 1); }
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: 14px; border: 2px solid #4cd18a; animation: tourPulse 1.7s ease-out infinite; }
@keyframes tourPulse { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
.tour-card { position: fixed; left: 0; top: 0; background: #fff; border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 14px 44px rgba(0, 0, 0, .38); opacity: 0;
    transition: opacity .22s ease, transform .45s cubic-bezier(.22, .8, .22, 1); }
.tour-card.in { opacity: 1; }
.tour-head { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: #6c757d; margin-bottom: .2rem; }
.tour-skip { color: #6c757d; text-decoration: none; }
.tour-skip:hover { color: #212529; text-decoration: underline; }
.tour-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.tour-text { font-size: .92rem; line-height: 1.55; color: #343a40; }
.tour-where { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.tour-where li { margin-bottom: .3rem; }
.tour-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; gap: .6rem; }
.tour-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dee2e6; transition: background .25s, transform .25s; }
.tour-dots i.seen { background: #9fd6b6; }
.tour-dots i.on { background: #198754; transform: scale(1.3); }
.tour-btns { display: flex; gap: .4rem; flex-shrink: 0; }
.tour-toast { position: fixed; left: 50%; bottom: 76px; transform: translate(-50%, 12px); max-width: min(92vw, 420px); background: #212529; color: #fff; padding: .55rem .9rem; border-radius: .6rem; font-size: .88rem; z-index: 3100; opacity: 0; transition: opacity .3s, transform .3s; }
.tour-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card, .tour-root, .tour-dots i { transition: none !important; } .tour-spot::after { animation: none; } }