/* 新手引导（tour.js，2026-10-16）：第一次打开 KC中台，调暗屏幕、一个一个圈出几个亮点。只用 tokens.css 变量。 */
.sqt-layer { position: fixed; inset: 0; z-index: 1290; }
.sqt-layer[hidden], .sqt-tip[hidden] { display: none !important; }
/* 调暗：圈出来那块的上下左右四块半透明板（比「一圈几千像素的阴影」省事，老电脑也画得动）；换一步直接跳过去，不做滑动过渡 */
.sqt-dim { position: fixed; z-index: 1291; background: var(--overlay); pointer-events: none; }
/* 圈出来的那块：一圈品牌色描边 + 往外扩散的光圈 */
.sqt-hole { position: fixed; z-index: 1291; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 3px var(--accent); }
.sqt-hole::after { content: ''; position: absolute; inset: -3px; border-radius: 12px; border: 3px solid var(--accent);
                   animation: sqt-ring 1.6s ease-out infinite; }
@keyframes sqt-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }

.sqt-tip { position: fixed; z-index: 1292; box-sizing: border-box; width: 340px; max-width: calc(100vw - 24px); padding: 14px 16px 12px;
           border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); border: 1px solid var(--accent-soft-border);
           box-shadow: var(--shadow-3); font-size: 13px; line-height: 1.6; }
.sqt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sqt-chip { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); background: var(--danger-solid); color: var(--text-on-accent);
            font-size: 11px; font-weight: var(--fw-semibold); line-height: 18px; white-space: nowrap; }
.sqt-chip.is-end { background: var(--accent); }
.sqt-n { margin-left: auto; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.sqt-lead { margin: 0 0 6px; color: var(--text-secondary); font-size: 12px; }
.sqt-tip h3 { margin: 0 0 4px; font-size: 15px; font-weight: var(--fw-semibold); line-height: 1.4; }
.sqt-tip p.sqt-text { margin: 0 0 12px; color: var(--text-secondary); }
.sqt-tip kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--border-control); border-bottom-width: 2px;
               border-radius: 4px; background: var(--surface-sunken); color: var(--ink); font: 600 11px/17px var(--font-sans); text-align: center; }
.sqt-btns { display: flex; align-items: center; gap: 8px; }
.sqt-btns .sqt-sp { flex: 1 1 auto; }
.sqt-btns button { padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-control); background: var(--surface);
                   color: var(--text-secondary); font: inherit; font-size: 13px; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.sqt-btns button:hover { border-color: var(--accent); color: var(--accent); }
.sqt-btns button.sqt-skip { padding: 5px 4px; border-color: transparent; color: var(--text-muted); }
.sqt-btns button.sqt-skip:hover { color: var(--ink); text-decoration: underline; }
.sqt-btns button.is-main { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); font-weight: var(--fw-semibold); }
.sqt-btns button.is-main:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.sqt-btns button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* 指着亮点的箭头：画一个朝上的，按气泡在哪边转方向；里面那层朝箭头方向一下一下地跳 */
.sqt-arrow { position: absolute; width: 26px; height: 26px; color: var(--accent); pointer-events: none; }
.sqt-arrow svg { display: block; width: 26px; height: 26px; animation: sqt-bob 1s ease-in-out infinite; }
.sqt-arrow.up    { top: -30px; transform: rotate(0deg); }
.sqt-arrow.down  { bottom: -30px; transform: rotate(180deg); }
.sqt-arrow.left  { left: -30px; transform: rotate(-90deg); }
.sqt-arrow.right { right: -30px; transform: rotate(90deg); }
@keyframes sqt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 收起的侧栏组里那一条：引导指到它的那一步临时露出来（不改折叠状态，走完就收回） */
@media (min-width: 901px) {
  .primary-nav .nav[data-tour-on]:not([hidden]):not([data-denied]) { display: flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sqt-hole::after, .sqt-arrow svg { animation: none; }
}