.jhzzz-native-tip-layer {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: block;
  width: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* r93 final positioning marker */

/* r79-final: stable lesson-id selectors must be the last token-page rules;
   older nth-child rules cannot override them when a card is dismissed. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    position: fixed !important;
    left: anchor(center) !important;
    transform: translateX(-50%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"] {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    position-anchor: --jhzzz-token-create !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    position-anchor: --jhzzz-token-import !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    transform: translate(-50%, -100%) !important;
    position-anchor: --jhzzz-token-group !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    display: none !important;
  }
}

@media (max-width: 767px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: none !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
      top: calc(anchor(bottom) + 10px) !important;
      bottom: auto !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      top: calc(anchor(top) - 10px) !important;
      bottom: auto !important;
      transform: translateY(-100%) !important;
    }
  }
}

/* r93 final: above-button tips use the physical button top as their anchor. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(top)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-100%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    top: auto !important;
    bottom: -7px !important;
    transform: none !important;
  }
}

/* r93 final: above-button tips must use one physical top anchor. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(top)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-100%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    top: auto !important;
    bottom: -7px !important;
    transform: none !important;
  }
}

/* r82-final: the pointer belongs to the lesson card, not the button. This
   keeps the connecting triangle visible above the table paint layer and makes
   the relation clear when several tips are visible at once. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    overflow: visible !important;
  }

  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    position: absolute !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    content: "" !important;
    pointer-events: none !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before {
    top: -11px !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 1 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-right: 12px solid transparent !important;
    border-bottom: 11px solid var(--semi-color-border, #e5e6eb) !important;
    border-left: 12px solid transparent !important;
    clip-path: none !important;
    background: transparent !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after {
    top: -9px !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 2 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-right: 10px solid transparent !important;
    border-bottom: 9px solid var(--semi-color-bg-0, #fff) !important;
    border-left: 10px solid transparent !important;
    clip-path: none !important;
    background: transparent !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before {
    top: auto !important;
    right: auto !important;
    bottom: -11px !important;
    left: 50% !important;
    z-index: 1 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-top: 11px solid var(--semi-color-border, #e5e6eb) !important;
    border-right: 12px solid transparent !important;
    border-left: 12px solid transparent !important;
    clip-path: none !important;
    background: transparent !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    top: auto !important;
    right: auto !important;
    bottom: -9px !important;
    left: 50% !important;
    z-index: 2 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-top: 9px solid var(--semi-color-bg-0, #fff) !important;
    border-right: 10px solid transparent !important;
    border-left: 10px solid transparent !important;
    clip-path: none !important;
    background: transparent !important;
  }
}

@media (max-width: 767px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before {
      left: clamp(24px, calc(anchor(center) - anchor(left)), calc(100% - 24px)) !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
      left: clamp(24px, calc(anchor(center) - anchor(left)), calc(100% - 24px)) !important;
    }
  }
}

.dashv2 > .jhzzz-native-tip {
  position: fixed;
  z-index: 1600;
  inset: auto;
  display: block;
  width: 330px;
  margin: 0;
  pointer-events: auto;
}

.jhzzz-native-tip-layer > .jhzzz-native-tip {
  position: fixed;
  inset: auto;
  pointer-events: auto;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip {
  width: 330px;
}

/* The reference uses Semi Popover anchors. Keep the same relationship in the
   independent frontend so the cards follow the actual action buttons. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1) {
  top: 214px;
  left: clamp(352px, 14.2vw, 420px);
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
  top: 281px;
  left: calc(50% + 95px);
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
  top: 69px;
  left: calc(50% + 185px);
}

.dashv2 > .jhzzz-native-tip:nth-child(2) {
  top: 152px;
  left: clamp(360px, 27vw, 650px);
}

.dashv2 > .jhzzz-native-tip:nth-child(3) {
  top: 488px;
  left: clamp(420px, 46.25vw, 592px);
}

@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .tk-page button[data-guide="create-token-btn"] {
    anchor-name: --jhzzz-token-create;
  }

  /* Only the first visible token row owns the tutorial anchors. Applying the
     same anchor name to every row makes CSS anchor positioning resolve to an
     arbitrary row and sends the card away from the clicked action. */
  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import] {
    anchor-name: --jhzzz-token-import;
  }

  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group] {
    anchor-name: --jhzzz-token-group;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1) {
    top: calc(anchor(bottom) + 10px);
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-create;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px);
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-import;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: auto;
    bottom: calc(anchor(top) + 18px);
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-group;
  }

  .tk-page:not(:has(button[data-jhzzz-token-import])) .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(n + 2) {
    display: none;
  }

  /* The balance lesson points to the visible header recharge action, not the
     secondary link inside the first metric card. */
  .dashv2 .dashv2-btn-dark {
    anchor-name: --jhzzz-dashboard-balance;
  }

  /* The usage lesson belongs to the second metric card (使用统计). The chart
     card below it is a different section and was the source of the old drift. */
  .dashv2 .dashv2-card:nth-child(2) {
    anchor-name: --jhzzz-dashboard-usage;
  }

  .dashv2 > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px);
    bottom: auto;
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-dashboard-balance;
  }

  .dashv2 > .jhzzz-native-tip:nth-child(3) {
    top: auto;
    bottom: calc(anchor(top) + 10px);
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-dashboard-usage;
  }
}

@media (max-width: 767px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: none !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
      top: calc(anchor(bottom) + 10px) !important;
      bottom: auto !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      top: calc(anchor(top) - 10px) !important;
      bottom: auto !important;
      transform: translateY(-100%) !important;
    }
  }
}

.jhzzz-native-tip {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: 14px 15px 12px;
  border: 1px solid var(--semi-color-border, #e5e6eb);
  border-radius: 12px;
  background: var(--semi-color-bg-0, #fff);
  color: var(--semi-color-text-0, #1f2329);
  box-shadow: 0 8px 26px rgb(15 23 42 / 14%);
}

/* Semi's tutorial popover uses a small 24x8 arrow that sits just outside the
   card. Keep the same two-layer border treatment for the native cards. The
   default direction is upward because the first/create/import tips sit below
   their target buttons. */
.jhzzz-native-tip::before,
.jhzzz-native-tip::after {
  position: absolute;
  left: calc(50% - 12px);
  width: 0;
  height: 0;
  content: "";
  pointer-events: none;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.jhzzz-native-tip::before {
  top: -9px;
  border-bottom: 9px solid var(--semi-color-border, #e5e6eb);
}

.jhzzz-native-tip::after {
  top: -8px;
  left: calc(50% - 11px);
  border-left-width: 11px;
  border-right-width: 11px;
  border-bottom: 8px solid var(--semi-color-bg-0, #fff);
}

/* These cards sit above their targets, so their arrow exits from the bottom. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after,
.dashv2 > .jhzzz-native-tip:nth-child(3)::before,
.dashv2 > .jhzzz-native-tip:nth-child(3)::after {
  top: auto;
  border-top-style: solid;
  border-bottom: 0;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
.dashv2 > .jhzzz-native-tip:nth-child(3)::before {
  bottom: -9px;
  border-top: 9px solid var(--semi-color-border, #e5e6eb);
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after,
.dashv2 > .jhzzz-native-tip:nth-child(3)::after {
  bottom: -8px;
  left: calc(50% - 11px);
  border-left-width: 11px;
  border-right-width: 11px;
  border-top: 8px solid var(--semi-color-bg-0, #fff);
}

.jhzzz-native-tip-close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--semi-color-text-2, #8f959e);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 24px;
}

.jhzzz-native-tip-title {
  padding-right: 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.jhzzz-native-tip-description {
  margin-top: 7px;
  color: var(--semi-color-text-2, #646a73);
  font-size: 13px;
  line-height: 1.65;
}

.jhzzz-native-tip-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
}

.jhzzz-native-tip-actions button {
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid var(--semi-color-border, #e5e6eb);
  border-radius: 7px;
  background: var(--semi-color-bg-0, #fff);
  color: var(--semi-color-text-0, #1f2329);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.jhzzz-native-tip-actions [data-jhzzz-native-tip-seen] {
  border-color: var(--semi-color-primary, #2563eb);
  background: var(--semi-color-primary, #2563eb);
  color: #fff;
}

.jhzzz-native-tip-actions [data-jhzzz-native-tip-permanent] {
  border-color: transparent;
  background: transparent;
}

.jhzzz-token-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
}

.jhzzz-token-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid var(--semi-color-border, #e5e6eb);
  border-radius: 10px;
  background: var(--semi-color-bg-0, #fff);
  color: var(--semi-color-text-2, #646a73);
  font-size: 13px;
  white-space: nowrap;
}

.jhzzz-token-summary-value {
  color: var(--semi-color-text-0, #1f2329);
  font-weight: 650;
}

.jhzzz-token-endpoint-copy {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--semi-color-primary, #2563eb);
  cursor: pointer;
  font: inherit;
}

@media (max-width: 700px) {
  .jhzzz-native-tip-layer,
  .dashv2 > .jhzzz-native-tip {
    inset: 0;
    width: auto;
    max-height: none;
  }

  .jhzzz-native-tip-layer > .jhzzz-native-tip,
  .dashv2 > .jhzzz-native-tip {
    inset: auto;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip,
  .dashv2 > .jhzzz-native-tip {
    width: min(330px, calc(100vw - 24px));
  }

  .jhzzz-token-summary-item {
    flex: 1 1 calc(50% - 10px);
    justify-content: space-between;
    overflow: hidden;
  }
}

/* r52: keep mobile dashboard coachmarks separated while preserving their
   anchor relationship, and let API addresses use the available width. */
.dashv2-api-url,
.dashv2-api-url2 {
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
  line-height: 1.45;
}

.jhzzz-token-summary-item {
  min-width: 0;
}

.jhzzz-token-summary-value {
  min-width: 0;
}

.jhzzz-token-endpoint-item {
  flex: 1 1 min(100%, 480px);
  min-width: 0;
  white-space: normal;
}

.jhzzz-token-endpoint-item .jhzzz-token-summary-value {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.jhzzz-token-endpoint-copy {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip,
  .dashv2 > .jhzzz-native-tip {
    --jhzzz-tip-half: min(165px, calc((100vw - 24px) / 2));
    max-width: calc(100vw - 24px);
  }

  @supports (anchor-name: --jhzzz-anchor) and (left: anchor(center)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2),
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3),
    .dashv2 > .jhzzz-native-tip:nth-child(2),
    .dashv2 > .jhzzz-native-tip:nth-child(3) {
      left: clamp(var(--jhzzz-tip-half), anchor(center), calc(100vw - var(--jhzzz-tip-half)));
    }
  }

  /* At phone widths the two anchored cards are taller than the space between
     their targets. Reserve that space in the existing metric grid so neither
     card covers the other, while the CSS anchor still follows the real card. */
  .dashv2:has(> .jhzzz-native-tip:nth-child(3)) .dashv2-card:nth-child(n + 2) {
    transform: translateY(110px);
  }

  .dashv2:has(> .jhzzz-native-tip:nth-child(3)) .mb-4:has(> .grid > .dashv2-card:nth-child(1)) {
    padding-bottom: 110px;
  }

  .dashv2-api-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dashv2-api-meta {
    flex: 1 1 calc(100% - 52px);
    min-width: 0;
  }

  .dashv2-api-acts {
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 52px;
  }

  .jhzzz-token-summary-item {
    flex: 1 1 calc(50% - 10px);
    justify-content: space-between;
    overflow: visible;
    white-space: normal;
  }

  .jhzzz-token-endpoint-item {
    flex-basis: 100%;
    align-items: flex-start;
  }
}

/* r71b: use explicit clipped triangles for the group lesson pointer. Border
   triangles were rendered inconsistently by the fixed/anchor cascade and
   could look inverted between desktop and mobile. The pointer belongs to the
   native target button, so it remains aligned when the card is clamped. */
@supports (anchor-name: --jhzzz-anchor) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    display: none !important;
  }

  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    position: absolute !important;
    left: 50% !important;
    width: 24px !important;
    height: 10px !important;
    top: -10px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  }

  .tk-page button[data-jhzzz-token-group]::before {
    z-index: 1601 !important;
    background: var(--semi-color-border, #e5e6eb) !important;
  }

  .tk-page button[data-jhzzz-token-group]::after {
    z-index: 1602 !important;
    left: calc(50% + 0px) !important;
    top: -9px !important;
    width: 22px !important;
    height: 8px !important;
    background: var(--semi-color-bg-0, #fff) !important;
  }
}

/* r80-final: bind each token lesson to its own stable id after every legacy
   nth-child rule. Dismissing a lesson removes that article from the React
   children, so positional selectors must never control the final geometry. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .tk-page button[data-guide="create-token-btn"],
  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import],
  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
    anchor-name: --jhzzz-token-create, --jhzzz-token-import, --jhzzz-token-group;
  }

  .tk-page button[data-guide="create-token-btn"] {
    anchor-name: --jhzzz-token-create !important;
  }

  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import] {
    anchor-name: --jhzzz-token-import !important;
  }

  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
    anchor-name: --jhzzz-token-group !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    position: fixed !important;
    inset: auto !important;
    left: anchor(center) !important;
    z-index: 1600 !important;
    transform: translateX(-50%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"] {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    position-anchor: --jhzzz-token-create !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    position-anchor: --jhzzz-token-import !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    position-anchor: --jhzzz-token-group !important;
    transform: translate(-50%, -100%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    display: none !important;
  }

  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
  }

  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]) button[data-guide="create-token-btn"]::before,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]) button[data-guide="create-token-btn"]::after,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]) button[data-jhzzz-token-import]::before,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]) button[data-jhzzz-token-import]::after,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]) button[data-jhzzz-token-group]::before,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]) button[data-jhzzz-token-group]::after {
    display: block !important;
  }
}

@media (max-width: 767px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: none !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
      top: calc(anchor(bottom) + 10px) !important;
      bottom: auto !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      top: calc(anchor(top) - 10px) !important;
      bottom: auto !important;
      transform: translateY(-100%) !important;
    }
  }
}


/* r79: a dismissed lesson is removed from the React children, so nth-child
   changes whenever one of the three cards is hidden. Bind the final layout to
   the stable lesson id instead; each card then keeps its own real button
   anchor whether one, two, or all three lessons are visible. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import] {
    anchor-name: --jhzzz-token-import;
  }

  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
    anchor-name: --jhzzz-token-group;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    position: fixed !important;
    left: anchor(center) !important;
    transform: translateX(-50%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"] {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    position-anchor: --jhzzz-token-create;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    position-anchor: --jhzzz-token-import;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    transform: translate(-50%, -100%) !important;
    position-anchor: --jhzzz-token-group;
  }

  /* The pointer is drawn on the target button, so clamping the card to the
     viewport cannot move the pointer away from the action. */
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::after {
    display: none !important;
  }

  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
  }

  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]) button[data-guide="create-token-btn"]::before,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]) button[data-guide="create-token-btn"]::after,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]) button[data-jhzzz-token-import]::before,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]) button[data-jhzzz-token-import]::after,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]) button[data-jhzzz-token-group]::before,
  .tk-page:has(.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]) button[data-jhzzz-token-group]::after {
    display: block !important;
  }
}

/* r58 final: fixed positioning is required here because the lesson layer is
   rendered before the token-card subtree. CSS anchors still resolve against
   the real buttons, while the fixed layer follows their viewport coordinates
   during scroll without changing the page DOM at runtime. */
.jhzzz-native-tip-layer-token {
  position: fixed !important;
  z-index: 1600;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events: none;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip {
  position: fixed !important;
  pointer-events: auto;
}

@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1) {
    top: calc(anchor(bottom) + 10px);
    bottom: auto;
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-create;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px);
    bottom: auto;
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-import;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: auto;
    bottom: calc(100% - anchor(top) + 10px);
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-group;
  }
}

@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px)));
    transform: none;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px)));
    transform: none;
  }
}

/* r58: the responsive token page renders each token as a Semi card, not a
   table row. Bind the import/group lessons to the first real card actions so
   CSS anchor positioning follows the same buttons on desktop and mobile. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import] {
    anchor-name: --jhzzz-token-import;
  }

  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
    anchor-name: --jhzzz-token-group;
  }
}

@media (max-width: 767px) {
  /* The group lesson is above its action, with the arrow pointing down. */
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: auto;
    bottom: calc(anchor(top) + 10px);
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    left: clamp(12px, calc(anchor(center) - anchor(left)), calc(100% - 36px));
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    left: clamp(13px, calc(anchor(center) - anchor(left) - 1px), calc(100% - 35px));
  }
}

/* r57: keep the desktop copy control beside the API endpoint instead of
   stretching the endpoint item across the whole summary row. */
.tk-page {
  position: relative;
}

.jhzzz-native-tip-layer-token {
  position: absolute;
  z-index: 1600;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip {
  position: absolute;
}

@media (min-width: 768px) {
  .jhzzz-token-endpoint-item {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .jhzzz-token-endpoint-item .jhzzz-token-summary-value {
    flex: 0 1 auto !important;
  }
}

/* r57: on phones the action row can sit near either edge. Keep the card
   inside the viewport, but let its arrow follow the real button center. All
   three token tips open below their target on phones so none can escape above
   the page or cover the action row. */
@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2),
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: calc(anchor(bottom) + 10px);
    bottom: auto;
    left: max(12px, min(anchor(left), calc(100vw - 342px)));
    transform: none;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    top: -9px;
    bottom: auto;
    border-top: 0;
    border-bottom: 9px solid var(--semi-color-border, #e5e6eb);
    position-anchor: inherit;
    left: clamp(12px, anchor(center), calc(100% - 36px));
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    top: -8px;
    left: clamp(13px, anchor(center), calc(100% - 35px));
    border-bottom: 8px solid var(--semi-color-bg-0, #fff);
  }
}

/* r58 final cascade: fixed cards follow the actual first token actions on
   every viewport, including when those actions are below the fold. */
.jhzzz-native-tip-layer-token {
  position: fixed !important;
  z-index: 1600;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  pointer-events: none;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip {
  position: fixed !important;
  pointer-events: auto;
}

@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import] {
    anchor-name: --jhzzz-token-import;
  }

  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
    anchor-name: --jhzzz-token-group;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1) {
    top: calc(anchor(bottom) + 10px);
    bottom: auto;
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-create;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px);
    bottom: auto;
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-import;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: auto;
    bottom: calc(100% - anchor(top) + 10px);
    left: anchor(center);
    transform: translateX(-50%);
    position-anchor: --jhzzz-token-group;
  }
}

@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2),
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px)));
    transform: none;
  }
}

/* r60: the reference popovers keep their card inside the viewport, while
   the small arrow remains locked to the real action button.  The previous
   mobile rule calculated the arrow inside the button anchor's own box, which
   reduced the result to the button half-width and placed the arrow near the
   card edge.  Fixed pseudo-elements use the same viewport anchor as the card
   and therefore stay correct when the card is clamped on phones. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::after {
    position: fixed !important;
    position-anchor: inherit !important;
    left: calc(anchor(center) - 12px) !important;
    z-index: 1;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::before {
    top: calc(anchor(bottom) + 1px) !important;
    bottom: auto !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::after {
    top: calc(anchor(bottom) + 2px) !important;
    bottom: auto !important;
    left: calc(anchor(center) - 11px) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    left: calc(anchor(center) - 12px) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    top: calc(anchor(top) - 9px) !important;
    bottom: auto !important;
    left: calc(anchor(center) - 11px) !important;
  }
}

/* r61: draw the pointer on the actual target button.  This keeps the pointer
   attached to the button even when a phone clamps the popover card to the
   viewport edge; the old card pseudo-element could only stay centered inside
   that clamped card. */
@supports (anchor-name: --jhzzz-anchor) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2)::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    display: none !important;
  }

  .tk-page button[data-guide="create-token-btn"],
  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
    position: relative !important;
    z-index: 1601 !important;
    overflow: visible !important;
  }

  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-jhzzz-token-import]::before {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    z-index: 1601;
    width: 0;
    height: 0;
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 9px solid var(--semi-color-border, #e5e6eb);
  }

  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::after {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    z-index: 1602;
    width: 0;
    height: 0;
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 8px solid var(--semi-color-bg-0, #fff);
  }

  .tk-page button[data-jhzzz-token-group]::before {
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 1601;
    width: 0;
    height: 0;
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 9px solid var(--semi-color-border, #e5e6eb);
  }

  .tk-page button[data-jhzzz-token-group]::after {
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: 1602;
    width: 0;
    height: 0;
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 8px solid var(--semi-color-bg-0, #fff);
  }
}

/* r63: place the group card above its anchor by positioning its bottom edge
   first, then translating the card upward by its own height. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(top)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    transform: translate(-50%, -100%) !important;
  }
}

@media (max-width: 767px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(top)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
      transform: translateY(-100%) !important;
    }
  }
}
/* r64: token create/edit uses the native Semi SideSheet portal. Tutorial
   cards belong to the page underneath and must never pierce the SideSheet
   mask or cover its fields. CSS :has keeps this state native and reversible:
   closing the drawer restores the lessons without runtime DOM observers. */
body:has(.semi-sidesheet.tk-edit-sheet) .jhzzz-native-tip-layer-token {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* r72: use the same compact icon button geometry as the language/account
   controls. The label itself is the native state source: colored means the
   workflow tips are enabled, while the closed state inherits header color. */
.app-headerbar .hb-seg .jhzzz-tutorial-toggle {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 14px !important;
  color: inherit !important;
  background: transparent !important;
}

.app-headerbar .hb-seg .jhzzz-tutorial-toggle[aria-label="关闭流程提示"] {
  color: var(--hb-accent, #2563eb) !important;
}

.app-headerbar .hb-seg .jhzzz-tutorial-toggle:hover,
.app-headerbar .hb-seg .jhzzz-tutorial-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.4) !important;
  outline: none;
}

.app-headerbar .hb-seg .jhzzz-tutorial-toggle .semi-button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-headerbar .hb-seg .jhzzz-tutorial-toggle svg {
  width: 16px !important;
  height: 16px !important;
  flex: none;
}

html.dark .app-headerbar .hb-seg .jhzzz-tutorial-toggle:hover,
html.dark .app-headerbar .hb-seg .jhzzz-tutorial-toggle:focus-visible {
  background: rgba(60, 60, 60, 0.4) !important;
}

@media (max-width: 767px) {
  .app-headerbar .hb-seg .jhzzz-tutorial-toggle {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px !important;
  }

  .app-headerbar .hb-seg .jhzzz-tutorial-toggle svg {
    width: 12px !important;
    height: 12px !important;
  }
}

body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-guide="create-token-btn"],
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-jhzzz-token-import],
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-jhzzz-token-group] {
  position: static !important;
  z-index: auto !important;
}

body:has(.semi-sidesheet.tk-edit-sheet) .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import],
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
  position: static !important;
  z-index: auto !important;
}

body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-guide="create-token-btn"]::before,
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-guide="create-token-btn"]::after,
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-jhzzz-token-import]::before,
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-jhzzz-token-import]::after,
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-jhzzz-token-group]::before,
body:has(.semi-sidesheet.tk-edit-sheet) .tk-page button[data-jhzzz-token-group]::after {
  display: none !important;
}

/* r83-final: the card owns the pointer and every pointer uses the same stable
   anchor as its card. This is intentionally last: older nth-child and button
   pseudo-element rules remain in this legacy stylesheet for other pages, but
   cannot override the token-page geometry below. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .jhzzz-native-tip-layer-token,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip {
    overflow: visible !important;
  }

  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
    content: none !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    position: absolute !important;
    z-index: 1602 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    content: "" !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    border-radius: 0 !important;
    border-left-style: solid !important;
    border-right-style: solid !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before {
    left: anchor(center) !important;
    top: anchor(bottom) !important;
    position-anchor: inherit !important;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-bottom: 10px solid var(--semi-color-border, #e5e6eb) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after {
    left: anchor(center) !important;
    top: calc(anchor(bottom) + 1px) !important;
    position-anchor: inherit !important;
    border-left: 11px solid transparent !important;
    border-right: 11px solid transparent !important;
    border-bottom: 9px solid var(--semi-color-bg-0, #fff) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before {
    left: anchor(center) !important;
    top: calc(anchor(top) - 10px) !important;
    position-anchor: inherit !important;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-top: 10px solid var(--semi-color-border, #e5e6eb) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    left: anchor(center) !important;
    top: calc(anchor(top) - 8px) !important;
    position-anchor: inherit !important;
    border-left: 11px solid transparent !important;
    border-right: 11px solid transparent !important;
    border-top: 8px solid var(--semi-color-bg-0, #fff) !important;
  }
}

/* r71b-final: the group lesson pointer is a downward triangle between the
   card and its target. Keep this final override after the older anchor rules. */
@supports (anchor-name: --jhzzz-anchor) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after {
    display: none !important;
  }

  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    position: absolute !important;
    left: 50% !important;
    top: -10px !important;
    bottom: auto !important;
    width: 24px !important;
    height: 10px !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  }

  .tk-page button[data-jhzzz-token-group]::before {
    z-index: 1601 !important;
    background: var(--semi-color-border, #e5e6eb) !important;
  }

  .tk-page button[data-jhzzz-token-group]::after {
    z-index: 1602 !important;
    top: -9px !important;
    width: 22px !important;
    height: 8px !important;
    background: var(--semi-color-bg-0, #fff) !important;
  }
}

/* r83-end: final token-card pointer override. Keep this block after every
   historical rule so all three stable lesson IDs render their own arrow. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
    content: none !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    overflow: visible !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    position: absolute !important;
    left: anchor(center) !important;
    z-index: 1602 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    content: "" !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    border-left-style: solid !important;
    border-right-style: solid !important;
    border-radius: 0 !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before {
    top: anchor(bottom) !important;
    position-anchor: inherit !important;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-bottom: 10px solid var(--semi-color-border, #e5e6eb) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after {
    top: calc(anchor(bottom) + 1px) !important;
    position-anchor: inherit !important;
    border-left: 11px solid transparent !important;
    border-right: 11px solid transparent !important;
    border-bottom: 9px solid var(--semi-color-bg-0, #fff) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before {
    top: calc(anchor(top) - 10px) !important;
    position-anchor: inherit !important;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-top: 10px solid var(--semi-color-border, #e5e6eb) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    top: calc(anchor(top) - 8px) !important;
    position-anchor: inherit !important;
    border-left: 11px solid transparent !important;
    border-right: 11px solid transparent !important;
    border-top: 8px solid var(--semi-color-bg-0, #fff) !important;
  }
}

/* r84-final: draw the reference-style pointer on the card itself. The card
   already follows its real button through the stable anchor rules above; a
   local pseudo-element keeps the pointer visible in Chromium and follows the
   card at every responsive width without covering the button label. */
.jhzzz-native-tip-layer-token {
  z-index: 1603 !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
  z-index: 1603 !important;
  overflow: visible !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
  position: absolute !important;
  left: 50% !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before {
  top: -12px !important;
  z-index: 1601 !important;
  border-right-width: 13px !important;
  border-bottom: 12px solid var(--semi-color-border, #e5e6eb) !important;
  border-left-width: 13px !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after {
  top: -10px !important;
  z-index: 1602 !important;
  border-right-width: 11px !important;
  border-bottom: 10px solid var(--semi-color-bg-0, #fff) !important;
  border-left-width: 11px !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before {
  right: auto !important;
  bottom: -12px !important;
  z-index: 1601 !important;
  border-top: 12px solid var(--semi-color-border, #e5e6eb) !important;
  border-right-width: 13px !important;
  border-left-width: 13px !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
  right: auto !important;
  bottom: -10px !important;
  z-index: 1602 !important;
  border-top: 10px solid var(--semi-color-bg-0, #fff) !important;
  border-right-width: 11px !important;
  border-left-width: 11px !important;
}

/* The pointer is owned by the lesson card; old button-owned pointers must not
   create a second arrow or alter the button's line box. */
.tk-page button[data-guide="create-token-btn"]::before,
.tk-page button[data-guide="create-token-btn"]::after,
.tk-page button[data-jhzzz-token-import]::before,
.tk-page button[data-jhzzz-token-import]::after,
.tk-page button[data-jhzzz-token-group]::before,
.tk-page button[data-jhzzz-token-group]::after {
  display: none !important;
  content: none !important;
}

/* r86-final: use a solid two-layer triangle so the pointer remains visible
   against the white table and card shadow at normal browser zoom. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before {
  top: -12px !important;
  width: 26px !important;
  height: 12px !important;
  background: #d9dee7 !important;
  clip-path: polygon(0 100%, 100% 100%, 50% 0) !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after {
  top: -10px !important;
  width: 22px !important;
  height: 10px !important;
  background: #fff !important;
  clip-path: polygon(0 100%, 100% 100%, 50% 0) !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before {
  bottom: -12px !important;
  width: 26px !important;
  height: 12px !important;
  background: #d9dee7 !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
  bottom: -10px !important;
  width: 22px !important;
  height: 10px !important;
  background: #fff !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

/* r87-final: on narrow user layouts the action buttons can be below the
   initial viewport. Do not leave a partial fixed card floating over another
   field; the native anchor card becomes visible again when its real button
   enters the viewport. Desktop positioning and the button-following arrows
   remain unchanged. */
@supports (position-visibility: anchors-visible) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    position-visibility: anchors-visible !important;
  }
}

/* r88-final: the regular user token layout also uses the responsive table/card
   shell. On narrow viewports the old anchor clamp could resolve to the raw
   anchor coordinate, pushing a 330px card outside the viewport. Keep each
   card inside the viewport and let the real first-row action button own the
   pointer, so the pointer remains exact after the card is clamped. */
@media (max-width: 1024px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    box-sizing: border-box !important;
    width: min(330px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: auto !important;
    transform: none !important;
  }
}

/* r90-final: dashboard and token lessons use one card-owned, double-layer
   triangle. It is deliberately the final cascade: the older experiments
   alternated between button-owned and card-owned pointers, which could hide
   the pointer or leave it white after a theme switch. The outer triangle uses
   the current card border; the inner triangle uses the card background. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"],
.dashv2 > .jhzzz-native-tip {
  overflow: visible !important;
}

.tk-page button[data-guide="create-token-btn"]::before,
.tk-page button[data-guide="create-token-btn"]::after,
.tk-page button[data-jhzzz-token-import]::before,
.tk-page button[data-jhzzz-token-import]::after,
.tk-page button[data-jhzzz-token-group]::before,
.tk-page button[data-jhzzz-token-group]::after {
  display: none !important;
  content: none !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
.dashv2 > .jhzzz-native-tip::before,
.dashv2 > .jhzzz-native-tip::after {
  position: absolute !important;
  z-index: 1606 !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  clip-path: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 solid transparent !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
.dashv2 > .jhzzz-native-tip:nth-child(2)::before {
  top: -10px !important;
  bottom: auto !important;
  border-right: 12px solid transparent !important;
  border-bottom: 10px solid var(--semi-color-border, #e5e6eb) !important;
  border-left: 12px solid transparent !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
.dashv2 > .jhzzz-native-tip:nth-child(2)::after {
  top: -8px !important;
  bottom: auto !important;
  z-index: 1607 !important;
  border-right: 10px solid transparent !important;
  border-bottom: 8px solid var(--semi-color-bg-0, #fff) !important;
  border-left: 10px solid transparent !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.dashv2 > .jhzzz-native-tip:nth-child(3)::before {
  top: auto !important;
  bottom: -10px !important;
  border-top: 10px solid var(--semi-color-border, #e5e6eb) !important;
  border-right: 12px solid transparent !important;
  border-left: 12px solid transparent !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
.dashv2 > .jhzzz-native-tip:nth-child(3)::after {
  top: auto !important;
  bottom: -8px !important;
  z-index: 1607 !important;
  border-top: 8px solid var(--semi-color-bg-0, #fff) !important;
  border-right: 10px solid transparent !important;
  border-left: 10px solid transparent !important;
}

/* At compact widths all three tutorial cards cannot occupy the same action
   row. Keep the target relationship without overlap: creation and grouping
   sit above their targets, while importing opens below the action row. */
@media (max-width: 1024px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"] {
      top: calc(anchor(top) - 10px) !important;
      bottom: auto !important;
      transform: translateY(-100%) !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
      top: calc(anchor(bottom) + 10px) !important;
      bottom: auto !important;
      transform: none !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      top: calc(anchor(top) - 10px) !important;
      bottom: auto !important;
      transform: translateY(-100%) !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after {
      top: auto !important;
      bottom: -10px !important;
      border-top-style: solid !important;
      border-bottom: 0 solid transparent !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before {
      border-top-width: 10px !important;
      border-top-color: var(--semi-color-border, #e5e6eb) !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after {
      bottom: -8px !important;
      border-top-width: 8px !important;
      border-top-color: var(--semi-color-bg-0, #fff) !important;
    }
  }
}

/* r91-final: use the same Semi 24x8 double-layer arrow as aixoras. The
   previous border triangles were visually different and the old button-owned
   fallback could cover the action labels on compact user layouts. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip,
.dashv2 > .jhzzz-native-tip {
  overflow: visible !important;
}

.jhzzz-native-tip::before,
.jhzzz-native-tip::after {
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  left: calc(50% - 12px) !important;
  top: -7px !important;
  bottom: auto !important;
  transform: rotate(180deg) !important;
}

.jhzzz-native-tip::before {
  z-index: 1601 !important;
  background: var(--semi-color-border, #e5e6eb) !important;
}

.jhzzz-native-tip::after {
  z-index: 1602 !important;
  background: var(--semi-color-bg-0, #fff) !important;
  transform: rotate(180deg) scale(.84) !important;
}

/* The group lesson and dashboard usage lesson sit above their real targets,
   so their identical arrow points down from the card to the target. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after,
.dashv2 > .jhzzz-native-tip:nth-child(3)::before,
.dashv2 > .jhzzz-native-tip:nth-child(3)::after {
  top: auto !important;
  bottom: -7px !important;
  transform: none !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after,
.dashv2 > .jhzzz-native-tip:nth-child(3)::after {
  transform: scale(.84) !important;
}

/* The card-owned pointer follows the same CSS anchor as its target button,
   including after a narrow viewport clamps the card into the viewport. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    left: anchor(center) !important;
    transform: translateX(-50%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1) {
    position-anchor: --jhzzz-token-create !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    position-anchor: --jhzzz-token-import !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: auto !important;
    bottom: calc(anchor(top) + 10px) !important;
    left: anchor(center) !important;
    transform: translate(-50%, -100%) !important;
    position-anchor: --jhzzz-token-group !important;
  }

  .dashv2 > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    left: anchor(center) !important;
    transform: translateX(-50%) !important;
    position-anchor: --jhzzz-dashboard-balance !important;
  }

  .dashv2 > .jhzzz-native-tip:nth-child(3) {
    top: auto !important;
    bottom: calc(anchor(top) + 10px) !important;
    left: anchor(center) !important;
    transform: translate(-50%, -100%) !important;
    position-anchor: --jhzzz-dashboard-usage !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::after,
  .dashv2 > .jhzzz-native-tip::before,
  .dashv2 > .jhzzz-native-tip::after {
    left: clamp(24px, calc(anchor(center) - anchor(left)), calc(100% - 24px)) !important;
  }

  /* Do not allow the old target-owned fallback arrow to create a second
     pointer or cover the button text. */
  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
    content: none !important;
  }
}

/* Use the exact rounded Semi arrow path when the browser supports CSS paths;
   the polygon above remains the compatible fallback. */
@supports (clip-path: path("M0 0")) {
  .jhzzz-native-tip::before {
    clip-path: path("M0 0.5L0 1.5C4 1.5 5.5 3 7.5 5S10 8 12 8S14.5 7 16.5 5S20 1.5 24 1.5L24 0.5L0 0.5z") !important;
  }

  .jhzzz-native-tip::after {
    clip-path: path("M0 0L0 1C4 1 5.5 2 7.5 4S10 7 12 7S14.5 6 16.5 4S20 1 24 1L24 0L0 0z") !important;
  }
}

@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip,
  .dashv2 > .jhzzz-native-tip {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: min(330px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: none !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: translateY(-100%) !important;
    }
  }
}

@media (max-width: 1024px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"] {
      top: calc(anchor(bottom) + 10px) !important;
      bottom: auto !important;
      transform: none !important;
    }

    /* The action row is close to the bottom on user phone/card layouts. Put
       both row lessons above the row so the complete card is visible. */
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      top: calc(anchor(top) - 10px) !important;
      bottom: auto !important;
      transform: translateY(-100%) !important;
    }
  }
}

@media (max-width: 1024px) {
  @supports (anchor-name: --jhzzz-anchor) {
    .tk-page button[data-guide="create-token-btn"],
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import],
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import],
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group],
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
      position: relative !important;
      z-index: 1605 !important;
      overflow: visible !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
      display: none !important;
    }

    /* Create sits below its button, so its pointer faces upward. */
    .tk-page button[data-guide="create-token-btn"]::before,
    .tk-page button[data-guide="create-token-btn"]::after {
      position: absolute !important;
      left: 50% !important;
      width: 0 !important;
      height: 0 !important;
      content: "" !important;
      transform: translateX(-50%) !important;
      pointer-events: none !important;
      border-left: 12px solid transparent !important;
      border-right: 12px solid transparent !important;
      border-bottom: 10px solid var(--semi-color-border, #e5e6eb) !important;
      border-top: 0 !important;
    }

    .tk-page button[data-guide="create-token-btn"]::before {
      top: calc(100% + 1px) !important;
      z-index: 1601 !important;
    }

    .tk-page button[data-guide="create-token-btn"]::after {
      top: calc(100% + 2px) !important;
      z-index: 1602 !important;
      border-left-width: 11px !important;
      border-right-width: 11px !important;
      border-bottom: 9px solid var(--semi-color-bg-0, #fff) !important;
    }

    /* The row lessons sit above their buttons, so their pointers face down. */
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import]::before,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import]::before,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import]::before,
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group]::before,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group]::before,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group]::before,
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import]::after,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import]::after,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import]::after,
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group]::after,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group]::after,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group]::after {
      position: absolute !important;
      left: 50% !important;
      width: 0 !important;
      height: 0 !important;
      content: "" !important;
      transform: translateX(-50%) !important;
      pointer-events: none !important;
      border-left: 12px solid transparent !important;
      border-right: 12px solid transparent !important;
      border-top: 10px solid var(--semi-color-border, #e5e6eb) !important;
      border-bottom: 0 !important;
    }

    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import]::before,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import]::before,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import]::before,
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group]::before,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group]::before,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group]::before {
      top: -10px !important;
      z-index: 1601 !important;
    }

    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import]::after,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import]::after,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import]::after,
    .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group]::after,
    .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group]::after,
    .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group]::after {
      top: -9px !important;
      z-index: 1602 !important;
      border-left-width: 11px !important;
      border-right-width: 11px !important;
      border-top: 9px solid var(--semi-color-bg-0, #fff) !important;
    }
  }
}

/* r89-final: keep the pointer colors owned by the current Semi theme. The
   previous mobile fallback used fixed white/gray fills, which was visible as
   a white triangle in dark mode. Re-enable the card pointer on compact user
   layouts so its horizontal position follows the real button anchor after the
   viewport clamps the card into view. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.dashv2 > .jhzzz-native-tip::before {
  background: var(--semi-color-border, #e5e6eb) !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
.dashv2 > .jhzzz-native-tip::after {
  background: var(--semi-color-bg-0, #fff) !important;
}

@media (max-width: 1024px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: none !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
      display: block !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
      left: clamp(24px, calc(anchor(center) - anchor(left)), calc(100% - 24px)) !important;
    }

    .tk-page button[data-guide="create-token-btn"]::before,
    .tk-page button[data-guide="create-token-btn"]::after,
    .tk-page button[data-jhzzz-token-import]::before,
    .tk-page button[data-jhzzz-token-import]::after,
    .tk-page button[data-jhzzz-token-group]::before,
    .tk-page button[data-jhzzz-token-group]::after {
      display: none !important;
    }
  }
}

/* r92-final-cascade: mirror the reference Semi tutorial popover while keeping
   every card attached to this site's native button anchors. */
.jhzzz-native-tip {
  box-sizing: border-box !important;
  width: 330px !important;
  min-width: 330px !important;
  padding: 18px 18px 14px !important;
  border: 1px solid var(--semi-color-border, rgba(28, 31, 35, .08)) !important;
  border-radius: 10px !important;
  background: var(--semi-color-bg-3, var(--semi-color-bg-0, #fff)) !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, 1)) !important;
  box-shadow: 0 14px 30px rgb(15 23 42 / 22%) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

.jhzzz-native-tip-close {
  top: 10px !important;
  right: 10px !important;
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 6px !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, .92)) !important;
  font-family: "Source Han Sans SC", "Source Han Sans CN", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 18px !important;
  line-height: 20px !important;
}

.jhzzz-native-tip-title {
  padding-right: 28px !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, 1)) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 21.6px !important;
}

.jhzzz-native-tip-description {
  margin-top: 8px !important;
  color: var(--semi-color-text-2, rgba(28, 31, 35, .62)) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 20.8px !important;
}

.jhzzz-native-tip-actions {
  gap: 8px !important;
  margin-top: 14px !important;
  line-height: 20px !important;
}

.jhzzz-native-tip-actions button {
  min-height: 28px !important;
  padding: 2px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, .92)) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

.jhzzz-native-tip-actions [data-jhzzz-native-tip-seen] {
  background: var(--semi-color-primary, #2563eb) !important;
  color: #fff !important;
}

.jhzzz-native-tip-actions [data-jhzzz-native-tip-permanent] {
  background: color-mix(in srgb, var(--semi-color-primary, #2563eb) 13%, transparent) !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, .92)) !important;
}

.jhzzz-native-tip::before,
.jhzzz-native-tip::after {
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 8px !important;
  left: calc(50% - 12px) !important;
  top: -7px !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  clip-path: path("M0 0.5L0 1.5C4 1.5 5.5 3 7.5 5S10 8 12 8S14.5 7 16.5 5S20 1.5 24 1.5L24 0.5L0 0.5z") !important;
  transform: rotate(180deg) !important;
}

.jhzzz-native-tip::before {
  z-index: 1601 !important;
  background: var(--semi-color-border, #e5e6eb) !important;
}

.jhzzz-native-tip::after {
  z-index: 1602 !important;
  background: var(--semi-color-bg-3, var(--semi-color-bg-0, #fff)) !important;
  clip-path: path("M0 0L0 1C4 1 5.5 2 7.5 4S10 7 12 7S14.5 6 16.5 4S20 1 24 1L24 0L0 0z") !important;
}

/* Keep the final arrow cascade stronger than the older per-tip experiments. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:is(
  [data-jhzzz-tip-id="token-create"],
  [data-jhzzz-tip-id="token-import"],
  [data-jhzzz-tip-id="token-group"]
)::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:is(
  [data-jhzzz-tip-id="token-create"],
  [data-jhzzz-tip-id="token-import"],
  [data-jhzzz-tip-id="token-group"]
)::after,
.dashv2 > .jhzzz-native-tip::before,
.dashv2 > .jhzzz-native-tip::after {
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 8px !important;
  left: calc(50% - 12px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  clip-path: path("M0 0.5L0 1.5C4 1.5 5.5 3 7.5 5S10 8 12 8S14.5 7 16.5 5S20 1.5 24 1.5L24 0.5L0 0.5z") !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip:is(
  [data-jhzzz-tip-id="token-create"],
  [data-jhzzz-tip-id="token-import"],
  [data-jhzzz-tip-id="token-group"]
)::before,
.dashv2 > .jhzzz-native-tip::before {
  background: var(--semi-color-border, rgba(28, 31, 35, .08)) !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip:is(
  [data-jhzzz-tip-id="token-create"],
  [data-jhzzz-tip-id="token-import"],
  [data-jhzzz-tip-id="token-group"]
)::after,
.dashv2 > .jhzzz-native-tip::after {
  background: var(--semi-color-bg-3, var(--semi-color-bg-0, #fff)) !important;
  clip-path: path("M0 0L0 1C4 1 5.5 2 7.5 4S10 7 12 7S14.5 6 16.5 4S20 1 24 1L24 0L0 0z") !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3)::after,
.dashv2 > .jhzzz-native-tip:nth-child(3)::before,
.dashv2 > .jhzzz-native-tip:nth-child(3)::after {
  top: auto !important;
  bottom: -7px !important;
  transform: none !important;
}

@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    left: anchor(center) !important;
    transform: translateX(-50%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1) {
    position-anchor: --jhzzz-token-create !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
    position-anchor: --jhzzz-token-import !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
    top: auto !important;
    bottom: calc(anchor(top) + 10px) !important;
    left: anchor(center) !important;
    transform: translate(-50%, -100%) !important;
    position-anchor: --jhzzz-token-group !important;
  }

  .dashv2 > .jhzzz-native-tip:nth-child(2) {
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    left: anchor(center) !important;
    transform: translateX(-50%) !important;
    position-anchor: --jhzzz-dashboard-balance !important;
  }

  .dashv2 > .jhzzz-native-tip:nth-child(3) {
    top: auto !important;
    bottom: calc(anchor(top) + 10px) !important;
    left: anchor(center) !important;
    transform: translate(-50%, -100%) !important;
    position-anchor: --jhzzz-dashboard-usage !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip::after,
  .dashv2 > .jhzzz-native-tip::before,
  .dashv2 > .jhzzz-native-tip::after {
    left: clamp(24px, calc(anchor(center) - anchor(left)), calc(100% - 24px)) !important;
  }

  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip,
  .dashv2 > .jhzzz-native-tip {
    box-sizing: border-box !important;
    width: min(330px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(1),
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(2) {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: none !important;
    }

    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"],
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip:nth-child(3) {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
      transform: translateY(-100%) !important;
    }
  }
}
/* r93-reference-final: one native reference-style popover cascade. Keep the
   card attached to stable lesson ids and let CSS anchors follow real actions
   at every viewport instead of relying on child order or fixed coordinates. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip,
.dashv2 > .jhzzz-native-tip {
  position: fixed !important;
  z-index: 1600 !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 330px !important;
  min-width: 330px !important;
  padding: 18px 18px 14px !important;
  overflow: visible !important;
  border: 1px solid var(--semi-color-border, rgba(28, 31, 35, .08)) !important;
  border-radius: 10px !important;
  background: var(--semi-color-bg-3, var(--semi-color-bg-0, #fff)) !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, 1)) !important;
  box-shadow: 0 14px 30px rgb(15 23 42 / 22%) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  pointer-events: auto !important;
}

.jhzzz-native-tip-title {
  padding-right: 28px !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, 1)) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 21.6px !important;
}

.jhzzz-native-tip-description {
  margin-top: 8px !important;
  color: var(--semi-color-text-2, rgba(28, 31, 35, .62)) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 20.8px !important;
}

.jhzzz-native-tip-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  line-height: 20px !important;
}

.jhzzz-native-tip-actions button {
  min-height: 28px !important;
  padding: 2px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, .92)) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

.jhzzz-native-tip-actions [data-jhzzz-native-tip-seen] {
  background: var(--semi-color-primary, #2563eb) !important;
  color: #fff !important;
}

.jhzzz-native-tip-actions [data-jhzzz-native-tip-permanent] {
  background: color-mix(in srgb, var(--semi-color-primary, #2563eb) 13%, transparent) !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, .92)) !important;
}

.jhzzz-native-tip::before,
.jhzzz-native-tip::after {
  position: absolute !important;
  display: block !important;
  width: 24px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  clip-path: path("M0 0.5L0 1.5C4 1.5 5.5 3 7.5 5S10 8 12 8S14.5 7 16.5 5S20 1.5 24 1.5L24 0.5L0 0.5z") !important;
}

.jhzzz-native-tip::before {
  z-index: 1601 !important;
  left: calc(50% - 12px) !important;
  top: -8px !important;
  background: var(--semi-color-border, rgba(28, 31, 35, .08)) !important;
  transform: rotate(180deg) !important;
}

.jhzzz-native-tip::after {
  z-index: 1602 !important;
  left: calc(50% - 12px) !important;
  top: -8px !important;
  background: var(--semi-color-bg-3, var(--semi-color-bg-0, #fff)) !important;
  clip-path: path("M0 0L0 1C4 1 5.5 2 7.5 4S10 7 12 7S14.5 6 16.5 4S20 1 24 1L24 0L0 0z") !important;
  transform: rotate(180deg) scale(.84) !important;
}

.jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
.jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
.jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"]::before,
.jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"]::after {
  top: auto !important;
  bottom: -8px !important;
  transform: none !important;
}

.jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"]::after,
.jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
  transform: scale(.84) !important;
}

@supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
  .tk-page button[data-guide="create-token-btn"] {
    anchor-name: --jhzzz-token-create !important;
  }

  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-import],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-import] {
    anchor-name: --jhzzz-token-import !important;
  }

  .tk-page .semi-table-tbody > .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .semi-table-tbody .semi-table-row:first-child button[data-jhzzz-token-group],
  .tk-page .logsv2-tablecard .semi-card-body > .flex.flex-col.gap-2 > .semi-card:first-child button[data-jhzzz-token-group] {
    anchor-name: --jhzzz-token-group !important;
  }

  .jhzzz-native-tip[data-jhzzz-tip-id="token-create"] {
    left: anchor(center) !important;
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    position-anchor: --jhzzz-token-create !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
    left: anchor(center) !important;
    top: auto !important;
    bottom: calc(anchor(top) + 10px) !important;
    transform: translateX(-50%) !important;
    position-anchor: --jhzzz-token-import !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    left: anchor(center) !important;
    top: auto !important;
    bottom: calc(anchor(top) + 10px) !important;
    transform: translateX(-50%) !important;
    position-anchor: --jhzzz-token-group !important;
  }

  .dashv2 .dashv2-btn-dark {
    anchor-name: --jhzzz-dashboard-balance !important;
  }

  .dashv2 .dashv2-card:nth-child(2) {
    anchor-name: --jhzzz-dashboard-usage !important;
  }

  .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-balance"] {
    left: anchor(center) !important;
    top: calc(anchor(bottom) + 10px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    position-anchor: --jhzzz-dashboard-balance !important;
  }

  .dashv2 > .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"] {
    left: anchor(center) !important;
    top: auto !important;
    bottom: calc(anchor(top) + 10px) !important;
    transform: translateX(-50%) !important;
    position-anchor: --jhzzz-dashboard-usage !important;
  }

  .jhzzz-native-tip::before,
  .jhzzz-native-tip::after {
    left: clamp(24px, calc(anchor(center) - anchor(left)), calc(100% - 24px)) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after,
  .dashv2 > .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"]::before,
  .dashv2 > .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"]::after {
    top: auto !important;
    bottom: -7px !important;
    transform: none !important;
  }

  .tk-page button[data-guide="create-token-btn"]::before,
  .tk-page button[data-guide="create-token-btn"]::after,
  .tk-page button[data-jhzzz-token-import]::before,
  .tk-page button[data-jhzzz-token-import]::after,
  .tk-page button[data-jhzzz-token-group]::before,
  .tk-page button[data-jhzzz-token-group]::after {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip,
  .dashv2 > .jhzzz-native-tip {
    width: min(330px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }

  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip[data-jhzzz-tip-id="token-create"],
    .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
    .jhzzz-native-tip[data-jhzzz-tip-id="token-group"],
    .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-balance"],
    .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"] {
      left: max(12px, min(calc(anchor(center) - 165px), calc(100vw - 342px))) !important;
    }

    .jhzzz-native-tip::before,
    .jhzzz-native-tip::after {
      left: clamp(24px, calc(anchor(center) - anchor(left)), calc(100% - 24px)) !important;
    }
  }
}

/* r93 final: above-button tips use the physical button top as their anchor. */
@supports (anchor-name: --jhzzz-anchor) and (top: anchor(top)) {
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"],
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    top: calc(anchor(top) - 10px) !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-100%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"]::after,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::before,
  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"]::after {
    top: auto !important;
    bottom: -7px !important;
    transform: none !important;
  }
}