iter(g53): 新增 tour 引导漫游组件

packages/skin/ui/ui.css

@@ -3143,3 +3143,82 @@ button.ua-step-dot:hover {
   .ua-colorpicker-trigger,
   .ua-colorpicker-cell { transition: none; }
 }
+.ua-tour {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: none;
+  pointer-events: none;
+}
+.ua-tour.ua-open {
+  display: block;
+}
+.ua-tour-spot {
+  position: absolute;
+  border-radius: var(--ua-radius-md);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
+  transition: all 0.2s ease;
+}
+.ua-tour-card {
+  position: absolute;
+  width: 268px;
+  padding: var(--ua-space-2);
+  pointer-events: auto;
+  border: 1px solid var(--ua-color-border);
+  border-radius: var(--ua-radius-md);
+  background: var(--ua-color-surface);
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
+  animation: ua-tour-in 0.18s ease both;
+}
+.ua-tour-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ua-space-1);
+}
+.ua-tour-title {
+  font-size: var(--ua-font-size-sm);
+  font-weight: 600;
+  color: var(--ua-color-text);
+}
+.ua-tour-close {
+  padding: 0 4px;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--ua-color-text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.ua-tour-close:hover {
+  color: var(--ua-color-text);
+}
+.ua-tour-desc {
+  margin-top: 4px;
+  font-size: var(--ua-font-size-sm);
+  line-height: 1.6;
+  color: var(--ua-color-text-muted);
+}
+.ua-tour-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ua-space-1);
+  margin-top: var(--ua-space-2);
+}
+.ua-tour-counter {
+  font-size: var(--ua-font-size-sm);
+  color: var(--ua-color-text-muted);
+}
+.ua-tour-actions {
+  display: flex;
+  gap: var(--ua-space-1);
+}
+@keyframes ua-tour-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ua-tour-card { animation: none; }
+  .ua-tour-spot { transition: none; }
+}