:root { --mymex-tour-accent: var(--tenant-secondary, #2fd9c1); }
.mymex-tour-shade { position: fixed; z-index: 4000; border: 0; background: rgba(1, 10, 24, .72); backdrop-filter: blur(1.5px); }
.mymex-tour-ring { position: fixed; z-index: 4001; border: 2px solid color-mix(in srgb, var(--mymex-tour-accent) 82%, #fff); border-radius: 16px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mymex-tour-accent) 20%, transparent), 0 16px 44px rgba(0,0,0,.28); pointer-events: none; transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.mymex-tour-panel { position: fixed; z-index: 4010; width: 330px; max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid color-mix(in srgb, var(--mymex-tour-accent) 44%, rgba(255,255,255,.16)); border-radius: 20px; color: #eff8ff; background: linear-gradient(155deg, #0b2948, #06182d 72%); box-shadow: 0 28px 80px rgba(0,0,0,.45); }
.mymex-tour-panel > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px 8px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mymex-tour-panel > header span { color: #80ddff; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.mymex-tour-panel > header button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 10px; color: #b8cce0; background: rgba(255,255,255,.07); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.mymex-tour-copy { padding: 20px 20px 17px; }
.mymex-tour-copy > small { color: #67d9ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mymex-tour-copy h2 { margin: 7px 0 9px; color: #fff; font-size: 24px; line-height: 1.08; letter-spacing: -.025em; }
.mymex-tour-copy p { margin: 0; color: #b8cce0; font-size: 13px; line-height: 1.6; }
.mymex-tour-copy [data-tour-open] { width: fit-content; min-height: 36px; margin-top: 15px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid rgba(103,217,255,.38); border-radius: 11px; color: #8be8ff; background: rgba(103,217,255,.08); font-size: 11px; font-weight: 900; text-decoration: none; }
.mymex-tour-copy [data-tour-open][hidden] { display: none; }
.mymex-tour-copy [data-tour-open]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mymex-tour-copy [data-tour-error]:not(:empty) { margin-top: 12px; padding: 9px 10px; border-radius: 10px; color: #ffd8d5; background: rgba(209, 65, 56, .2); font-size: 11px; line-height: 1.45; }
.mymex-tour-panel > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 16px 16px; }
.mymex-tour-panel > footer button { min-width: 86px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(123,207,255,.32); border-radius: 12px; color: #eaf8ff; background: rgba(255,255,255,.06); font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.mymex-tour-panel > footer button:last-child { border-color: transparent; color: #03152a; background: linear-gradient(135deg, #58e2ff, #44e0bd); }
.mymex-tour-panel button:disabled { opacity: .38; cursor: not-allowed; }
.mymex-tour-panel button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.is-mymex-tour-target { scroll-margin: 100px; }
body.mymex-tour-active { overscroll-behavior: contain; }
@media (max-width: 700px) { .mymex-tour-shade { backdrop-filter: none; } .mymex-tour-panel { border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .mymex-tour-ring { transition: none; } }