/* 小问号说明（help-tip.js）。只用 tokens.css 变量；外壳注入到内嵌页时，页面没引 tokens.css 也有退路。 */
.sq-q { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box;
  width: 15px; height: 15px; margin: 0 0 0 4px; padding: 0; vertical-align: 1px; border-radius: 50%;
  border: 1px solid var(--border-strong, currentColor); background: var(--surface, transparent);
  color: var(--text-muted, inherit); font: 600 10px/1 system-ui, sans-serif; cursor: help; opacity: .85; }
.sq-q:hover, .sq-q:focus-visible { opacity: 1; color: var(--accent, inherit); border-color: var(--accent, currentColor); outline: none; }
.sq-q.bad { color: var(--danger-fg, inherit); border-color: var(--danger-border, currentColor); background: var(--danger-bg, transparent); }
.sq-q.warn { color: var(--warning-fg, inherit); border-color: var(--warning-border, currentColor); background: var(--warning-bg, transparent); }
.sq-q.good { color: var(--success-fg, inherit); border-color: var(--success-border, currentColor); background: var(--success-bg, transparent); }
.sq-q.info { color: var(--info-fg, inherit); border-color: var(--info-border, currentColor); background: var(--info-bg, transparent); }
.sq-hint-pop { position: fixed; z-index: 2147483000; max-width: min(380px, calc(100vw - 16px)); box-sizing: border-box;
  padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border-strong, currentColor);
  background: var(--surface, Canvas); color: var(--text-primary, CanvasText); box-shadow: 0 6px 18px var(--overlay, rgba(0, 0, 0, .18));
  font: 400 12px/1.65 system-ui, sans-serif; white-space: normal; text-align: left; pointer-events: auto; }
.sq-hint-pop[hidden] { display: none !important; }
.sq-hint-pop b { font-weight: 600; }
/* 外壳顶栏页名旁「? 说明」：页面标题下那段灰字收进来（help-tip.js foldIntro） */
.topbar #page-title { display: inline-block; vertical-align: middle; }
.sq-q.sq-page-q { width: auto; height: 22px; margin: 0 0 0 10px; padding: 0 9px 0 3px; gap: 5px; vertical-align: middle;
  border-radius: var(--radius-full, 999px); border-color: var(--border, currentColor); background: var(--surface, transparent);
  font: 500 12px/1 system-ui, sans-serif; color: var(--text-secondary, inherit); opacity: 1; }
.sq-q.sq-page-q i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft-bg, transparent); color: var(--accent, inherit); font: 700 11px/1 system-ui, sans-serif; font-style: normal; }
.sq-q.sq-page-q:hover, .sq-q.sq-page-q:focus-visible { color: var(--text-primary, inherit); border-color: var(--accent, currentColor); }
.sq-q.sq-page-q[hidden] { display: none !important; }
.sq-hint-pop.sq-intro-pop { max-width: min(460px, calc(100vw - 16px)); padding: 10px 13px 11px; }
.sq-intro-pop .sq-intro-h { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 13px; }
.sq-intro-pop .sq-intro-ico { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--accent-soft-bg, transparent); color: var(--accent, inherit); }
.sq-intro-pop .sq-intro-ico svg { width: 14px; height: 14px; }
.sq-intro-pop .sq-intro-f { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border-subtle, transparent); color: var(--text-muted, inherit); font-size: 11px; }
/* 页内收起来的长说明：小问号挂在标题后面 */
.sq-q.sq-fold-q { vertical-align: 2px; margin-left: 6px; }
.sq-folded { display: none !important; }