/* 聚光灯式分步新手引导：遮罩 + 镂空高亮 + 跟随卡片。该层挂在，独立于 #app，不随整屏重绘销毁（与 AI 助手同思路）。 */ #guide-overlay { position: fixed; inset: 0; z-index: var(--z-guide, 1200); pointer-events: none; } #guide-overlay[hidden] { display: none; } /* 透明拦截层：吞掉聚光区之外的点击，强制用户跟随卡片操作 */ .guide-mask { position: fixed; inset: 14px; pointer-events: auto; background: transparent; cursor: default; } /* 聚光灯镂空：本体无背景，用超大 box-shadow 压暗四周，露出目标元素 */ .guide-spotlight { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(13, 14, 38, 0.66); outline: 2px solid rgba(138, 123, 255, 0.95); outline-offset: 3px; pointer-events: none; opacity: 0; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } #guide-overlay.is-shown .guide-spotlight { opacity: 1; } /* 呼吸光环：柔和提示当前焦点 */ .guide-spotlight::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(138, 123, 255, 0.55); animation: guide-pulse 1.8s ease-out infinite; } @keyframes guide-pulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.06); opacity: 0; } 100% { transform: scale(1.06); opacity: 0; } } /* 居中模式（无目标元素的欢迎 / 收尾卡）：压暗整屏、无镂空 */ #guide-overlay.is-centered .guide-spotlight { box-shadow: 0 0 0 9999px rgba(13, 14, 38, 0.72); outline: none; } #guide-overlay.is-centered .guide-spotlight::after { display: none; } /* 跟随卡片 */ .guide-card { position: fixed; z-index: 1; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 24px 60px rgba(20, 20, 60, 0.32), 0 4px 14px rgba(0, 0, 0, 0.12); border: 1px solid rgba(120, 110, 220, 0.16); pointer-events: auto; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.24s ease, transform 0.24s ease, left 0.28s ease, top 0.28s ease; } #guide-overlay.is-shown .guide-card { opacity: 1; transform: translateY(0) scale(1); } /* 卡片指向目标的小箭头（按朝向切换） */ .guide-card-arrow { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(20, 20, 60, 0.05); } .guide-card[data-arrow="top"] .guide-card-arrow { top: -7px; box-shadow: -2px -2px 4px rgba(20, 20, 60, 0.05); } .guide-card[data-arrow="bottom"] .guide-card-arrow { bottom: -7px; box-shadow: 2px 2px 4px rgba(20, 20, 60, 0.06); } .guide-card[data-arrow="left"] .guide-card-arrow { left: -7px; box-shadow: -2px 2px 4px rgba(20, 20, 60, 0.05); } .guide-card[data-arrow="right"] .guide-card-arrow { right: -7px; box-shadow: 2px -2px 4px rgba(20, 20, 60, 0.05); } .guide-card[data-arrow="none"] .guide-card-arrow { display: none; } .guide-card-top { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; margin-bottom: 10px; } .guide-step-badge { font-size: 12px; font-weight: 700; color: #6a5cff; background: rgba(106, 92, 255, 0.1); padding: 3px 10px; border-radius: 999px; letter-spacing: 0.3px; } .guide-skip { border: 0; background: none; color: #9a9ab0; font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; } .guide-skip:hover { color: #6a6a82; background: rgba(0, 0, 0, 0.04); } .guide-card-title { flex: 0 0 auto; margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #1c1c33; line-height: 1.35; } .guide-card-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #5a5a73; } /* 卡片正文里的关键词高亮标注（荧光笔底纹 + 加重） */ .guide-card-text .guide-kw { background: linear-gradient(transparent 58%, rgba(106, 92, 255, 0.24) 0); color: #4a39c8; font-weight: 700; padding: 0 2px; border-radius: 3px; } .guide-progress { flex: 0 0 auto; height: 4px; border-radius: 999px; background: rgba(106, 92, 255, 0.14); overflow: hidden; margin-bottom: 14px; } .guide-progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6a5cff, #8a7bff); transition: width 0.3s ease; } .guide-card-actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 8px; } .guide-btn { border: 0; border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .guide-btn.ghost { background: rgba(0, 0, 0, 0.05); color: #5a5a73; } .guide-btn.ghost:hover { background: rgba(0, 0, 0, 0.09); } .guide-btn.primary { background: linear-gradient(135deg, #6a5cff, #5a47e6); color: #fff; box-shadow: 0 8px 20px rgba(90, 71, 230, 0.32); } .guide-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(90, 71, 230, 0.42); } .guide-btn.primary:active { transform: translateY(0); } .guide-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* 醒目的「教程引导」按钮：与青蓝「视频教程」区分，用紫色品牌渐变 + 轻脉冲吸睛 */ .guide-cta-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #6a5cff 0%, #9a5cff 100%); border-color: transparent; color: #fff; box-shadow: 0 2px 12px rgba(106, 92, 255, 0.42); animation: guide-cta-pulse 2.6s ease-in-out infinite; } .guide-cta-btn:hover:not(:disabled) { background: linear-gradient(135deg, #6a5cff 0%, #9a5cff 100%); border-color: transparent; color: #fff; filter: brightness(1.07); box-shadow: 0 6px 20px rgba(106, 92, 255, 0.55); } .guide-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; } @keyframes guide-cta-pulse { 0%, 100% { box-shadow: 0 2px 12px rgba(106, 92, 255, 0.42); } 50% { box-shadow: 0 4px 20px rgba(106, 92, 255, 0.68); } } @media (prefers-reduced-motion: reduce) { .guide-cta-btn { animation: none; } } @media (max-width: 520px) { .guide-card { left: 12px !important; right: 12px; width: auto; } .guide-card-arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .guide-spotlight, .guide-card { transition: opacity 0.2s ease; } .guide-spotlight::after { animation: none; } }