/* ============================================================================
   新手引导（onboarding）
   仅新增样式：画布上的分步气泡 / 遮罩高亮，以及「帮助 → 新手教程」的列表。
   不覆盖任何已有选择器。
   ========================================================================== */

.mg-tour-layer {
    position: fixed;
    inset: 0;
    z-index: 190;
    pointer-events: none;
}

/* —— 高亮圈：用超大 box-shadow 把整屏压暗，只在目标位置上留一个洞 —— */

.mg-tour-spot {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 100vmax rgba(12, 20, 26, .42);
    pointer-events: none;
    transition: left .24s cubic-bezier(.22, .61, .36, 1),
                top .24s cubic-bezier(.22, .61, .36, 1),
                width .24s cubic-bezier(.22, .61, .36, 1),
                height .24s cubic-bezier(.22, .61, .36, 1);
}

.mg-tour-spot.has-target::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 14px;
    border: 2px solid var(--accent, #276e5d);
    opacity: 0;
    pointer-events: none;
    animation: mg-tour-pulse 1.9s ease-out infinite;
}

@keyframes mg-tour-pulse {
    0%   { opacity: .55; transform: scale(.995); }
    70%  { opacity: 0;   transform: scale(1.035); }
    100% { opacity: 0;   transform: scale(1.035); }
}

/* —— 气泡 —— */

.mg-tour-bubble {
    position: fixed;
    z-index: 191;
    box-sizing: border-box;
    width: 336px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    /* 内容过长时仍可滚动，但不显示浏览器滚动条，避免破坏气泡的视觉边界。 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 14px 16px 12px;
    border: 1px solid var(--border, #d5dce4);
    border-radius: 12px;
    background: var(--panel, #f9fbf8);
    color: var(--text, #2b3542);
    box-shadow: 0 18px 46px rgba(15, 30, 25, .28);
    pointer-events: auto;
    outline: none;
    transition: left .24s cubic-bezier(.22, .61, .36, 1),
                top .24s cubic-bezier(.22, .61, .36, 1);
}

.mg-tour-bubble::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.mg-tour-bubble:focus-visible {
    outline: 2px solid var(--accent, #276e5d);
    outline-offset: 3px;
}

/* 第一步不做位移过渡，避免气泡从视口左上角滑进来 */
.mg-tour-bubble.mg-tour-placing,
.mg-tour-spot.mg-tour-placing {
    transition: none;
}

.mg-tour-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--mg-bubble-bg, var(--panel, #f9fbf8));
    border: 0 solid var(--mg-bubble-border, var(--border, #d5dce4));
    pointer-events: none;
}

.mg-tour-bubble[data-placement="right"] .mg-tour-arrow {
    left: -7px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    transform: rotate(45deg);
}

.mg-tour-bubble[data-placement="left"] .mg-tour-arrow {
    right: -7px;
    border-right-width: 1px;
    border-top-width: 1px;
    transform: rotate(45deg);
}

.mg-tour-bubble[data-placement="bottom"] .mg-tour-arrow {
    top: -7px;
    border-left-width: 1px;
    border-top-width: 1px;
    transform: rotate(45deg);
}

.mg-tour-bubble[data-placement="top"] .mg-tour-arrow {
    bottom: -7px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    transform: rotate(45deg);
}

.mg-tour-bubble[data-placement="center"] .mg-tour-arrow {
    display: none;
}

.mg-tour-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mg-tour-head strong {
    font-size: 14.5px;
    line-height: 1.35;
}

.mg-tour-badge {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid rgba(39, 110, 93, .25);
    border-radius: 20px;
    background: var(--accent-weak, #276e5d12);
    color: var(--accent-dark, #276e5d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
}

body.theme-dark .mg-tour-badge {
    border-color: rgba(91, 147, 255, .35);
}

.mg-tour-body {
    color: var(--text, #2b3542);
    font-size: 13px;
    line-height: 1.68;
}

.mg-tour-body p {
    margin: 0 0 7px;
}

.mg-tour-body p:last-child {
    margin-bottom: 0;
}

.mg-tour-body b,
.mg-tour-body strong {
    color: var(--accent-dark, #276e5d);
    font-weight: 600;
}

.mg-tour-body code {
    padding: .5px 5px;
    border: 1px solid var(--border, #d5dce4);
    border-radius: 4px;
    background: var(--panel-3, #f9fbf8);
    color: var(--text, #2b3542);
    font: 12px var(--mono, ui-monospace, Consolas, monospace);
}

.mg-tour-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
}

/* 跳过教程：灰色、无底色，刻意不抢「下一步」的注意力 */
.mg-tour-skip {
    border: 0;
    background: transparent;
    color: var(--muted, #687687);
    opacity: .72;
    cursor: pointer;
    padding: 5px 3px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 400;
}

.mg-tour-skip:hover {
    opacity: 1;
    background: rgba(120, 130, 140, .1);
}

.mg-tour-progress {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    margin-right: 2px;
}

.mg-tour-progress button {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong, #c9d2dc);
    transition: width .2s ease, background .2s ease;
}

.mg-tour-progress button.on {
    width: 16px;
    border-radius: 3px;
    background: var(--accent, #276e5d);
}

.mg-tour-progress button:hover {
    transform: scale(1.35);
}

.mg-tour-progress button:focus-visible {
    outline: 2px solid var(--accent, #276e5d);
    outline-offset: 3px;
}

.mg-tour-next {
    border: 1px solid var(--accent-dark, #276e5d);
    border-radius: 7px;
    background: var(--accent, #276e5d);
    color: #fff;
    cursor: pointer;
    padding: 6px 15px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.mg-tour-next:hover {
    filter: brightness(1.06);
}

.mg-tour-next:disabled {
    opacity: .55;
    cursor: default;
    filter: none;
}

.mg-tour-skip:focus-visible,
.mg-tour-next:focus-visible {
    outline: 2px solid var(--accent, #276e5d);
    outline-offset: 2px;
}

/* —— 「帮助 → 新手教程」里的步骤清单 —— */

.mg-tour-help-lead {
    margin: 0 0 12px;
    line-height: 1.7;
}

ol.mg-tour-help {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

ol.mg-tour-help > li {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, #d5dce4);
    border-radius: 9px;
    background: var(--panel-2, #ebf0ed);
}

.mg-tour-help-num {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #276e5d);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.mg-tour-help-text {
    min-width: 0;
    font-size: 13px;
    line-height: 1.65;
}

.mg-tour-help-text > strong {
    display: block;
    margin-bottom: 3px;
    color: var(--accent-dark, #276e5d);
    font-size: 13.5px;
}

.mg-tour-help-text p {
    margin: 0 0 5px;
    color: var(--muted, #687687);
    font-size: 12.5px;
}

.mg-tour-help-text p:last-child {
    margin-bottom: 0;
}

.mg-tour-help-text code {
    padding: .5px 5px;
    border: 1px solid var(--border, #d5dce4);
    border-radius: 4px;
    background: var(--panel, #f9fbf8);
    color: var(--text, #2b3542);
    font: 12px var(--mono, ui-monospace, Consolas, monospace);
}

.mg-tour-help-text b {
    color: var(--text, #2b3542);
}

.mg-tour-help-note {
    margin: 14px 0 0;
    line-height: 1.7;
}

.mg-tour-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   入口欢迎页：两步短提示（点示例按钮 → 点右下角开始）
   直接浮在 #entry-screen（z-index:1000）之上，不压暗星空背景。
   ══════════════════════════════════════════════════════════════════════════ */

.mg-welcome-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
}

.mg-welcome-ring {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: 12px;
    border: 1px solid rgba(131, 168, 255, .95);
    box-shadow: 0 0 0 5px rgba(131, 168, 255, .12), 0 0 26px rgba(131, 168, 255, .4);
    pointer-events: none;
    transition: left .24s cubic-bezier(.22, .61, .36, 1),
                top .24s cubic-bezier(.22, .61, .36, 1),
                width .24s cubic-bezier(.22, .61, .36, 1),
                height .24s cubic-bezier(.22, .61, .36, 1);
}

.mg-welcome-ring.round {
    border-radius: 50%;
}

.mg-welcome-ring::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1px solid rgba(131, 168, 255, .6);
    opacity: 0;
    pointer-events: none;
    animation: mg-tour-pulse 2s ease-out infinite;
}

.mg-welcome-bubble.mg-tour-bubble {
    --mg-bubble-bg: rgba(24, 26, 32, .96);
    --mg-bubble-border: #39404d;
    width: 300px;
    padding: 13px 15px 11px;
    background: var(--mg-bubble-bg);
    border-color: var(--mg-bubble-border);
    color: #e8ecf4;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.mg-welcome-bubble .mg-tour-head strong {
    color: #f3f6fb;
    font-size: 14px;
}

.mg-welcome-bubble .mg-tour-badge {
    color: #b9ceff;
    background: rgba(131, 168, 255, .14);
    border-color: rgba(131, 168, 255, .32);
}

.mg-welcome-bubble .mg-tour-body {
    color: #c7cedb;
    font-size: 12.5px;
    line-height: 1.7;
}

.mg-welcome-bubble .mg-tour-body b {
    color: #eaf0ff;
}

.mg-welcome-bubble .mg-tour-skip {
    color: #8b93a1;
    opacity: .8;
}

.mg-welcome-bubble .mg-tour-skip:hover {
    color: #ccd3df;
    background: rgba(255, 255, 255, .08);
}

.mg-welcome-bubble .mg-tour-next {
    background: #eef1f7;
    border-color: #eef1f7;
    color: #1c2028;
}

.mg-welcome-bubble .mg-tour-next:hover {
    filter: none;
    background: #ffffff;
    border-color: #ffffff;
}

.mg-welcome-bubble .mg-tour-progress button {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #3c424e;
}

.mg-welcome-bubble .mg-tour-progress button.on {
    background: #9db9ff;
}

/* —— 小屏 —— */

@media (max-width: 640px) {
    .mg-tour-bubble {
        width: min(336px, calc(100vw - 20px));
        padding: 12px 13px 10px;
    }

    .mg-welcome-bubble.mg-tour-bubble {
        width: min(300px, calc(100vw - 20px));
    }

    .mg-tour-body {
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mg-tour-spot,
    .mg-tour-bubble,
    .mg-tour-progress button,
    .mg-welcome-ring {
        transition: none;
    }

    .mg-tour-spot.has-target::after,
    .mg-welcome-ring::after {
        animation: none;
    }
}