/* r98: reference-compatible native tutorial popovers.
   Loaded after the legacy stylesheet so one deterministic rule set owns the
   token-page card, arrow and anchor relationship. */
.jhzzz-native-tip-layer-token > .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, .92)) !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-layer-token > .jhzzz-native-tip .jhzzz-native-tip-title {
  padding-right: 28px !important;
  color: var(--semi-color-text-0, rgba(28, 31, 35, .92)) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 21.6px !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip .jhzzz-native-tip-description {
  margin-top: 8px !important;
  color: var(--semi-color-text-2, rgba(28, 31, 35, .62)) !important;
  font-size: 13px !important;
  line-height: 20.8px !important;
}

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

.jhzzz-native-tip-layer-token > .jhzzz-native-tip .jhzzz-native-tip-actions button {
  min-height: 28px !important;
  padding: 2px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

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

.jhzzz-native-tip-layer-token > .jhzzz-native-tip .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;
}

/* Same 24x8 two-path arrow geometry as the reference Semi Popover. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip::before,
.jhzzz-native-tip-layer-token > .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;
}

/* Add-token card is below the button, so its arrow points upward to the
   button. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::before {
  position: fixed !important;
  top: calc(anchor(bottom) + 2px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  z-index: 1601 !important;
  position-anchor: --jhzzz-token-create !important;
  background: var(--semi-color-border, rgba(28, 31, 35, .08)) !important;
  transform: rotate(180deg) !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"]::after {
  position: fixed !important;
  top: calc(anchor(bottom) + 2px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  z-index: 1602 !important;
  position-anchor: --jhzzz-token-create !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;
}

/* Import/group cards are above their buttons, and each arrow points down. */
.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 {
  position: fixed !important;
  top: calc(anchor(top) - 11px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  z-index: 1601 !important;
  background: var(--semi-color-border, rgba(28, 31, 35, .08)) !important;
  transform: none !important;
}

.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 {
  position: fixed !important;
  top: calc(anchor(top) - 11px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  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;
  transform: scale(.84) !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 {
  position-anchor: --jhzzz-token-import !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 {
  position-anchor: --jhzzz-token-group !important;
}

/* Table-row anchors cannot be resolved reliably from a generated child of a
   separately positioned card in every Chromium layout mode. The reference
   arrow is therefore drawn by the actual first-row action button: it remains
   the same 24x8 Semi arrow and follows the button at every breakpoint. */
.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;
  content: none !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],
.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: 1604 !important;
  overflow: visible !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,
.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;
  top: -11px !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !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;
  transform: translateX(-50%) !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;
}

.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 {
  z-index: 1605 !important;
  background: var(--semi-color-border, rgba(28, 31, 35, .08)) !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 {
  z-index: 1606 !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: translateX(-50%) 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;
  }

  .tk-page button[data-guide="create-token-btn"] {
    z-index: auto !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-create"] {
    top: calc(anchor(bottom) + 10px) !important;
    right: auto !important;
    bottom: auto !important;
    left: anchor(center) !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"] {
    top: calc(anchor(bottom) + 10px) !important;
    right: auto !important;
    bottom: auto !important;
    left: anchor(center) !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"] {
    top: calc(anchor(top) - 10px) !important;
    right: auto !important;
    bottom: auto !important;
    left: anchor(center) !important;
    transform: translate(-50%, -100%) !important;
  }

  .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-group"] {
    position-anchor: --jhzzz-token-group !important;
  }
}

@media (max-width: 767px) {
  .jhzzz-native-tip-layer-token > .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-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;
    }

    .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"] {
      transform: none !important;
    }

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

  }
}

/* r96: use the reference site's real two-path SVG arrow. The SVG is rendered
   with each native card and positioned against the same real button anchor as
   the card, so it remains visible outside table/card clipping contexts. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip::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-arrow {
  position: fixed !important;
  z-index: 1604 !important;
  display: block !important;
  width: 24px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip-arrow[data-jhzzz-tip-id="token-create"] {
  top: calc(anchor(bottom) + 2px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  transform: rotate(180deg) !important;
  position-anchor: --jhzzz-token-create !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip-arrow[data-jhzzz-tip-id="token-import"] {
  top: calc(anchor(bottom) + 2px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  transform: rotate(180deg) !important;
  position-anchor: --jhzzz-token-import !important;
}

.jhzzz-native-tip-layer-token > .jhzzz-native-tip-arrow[data-jhzzz-tip-id="token-group"] {
  top: calc(anchor(top) - 11px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  transform: none !important;
  position-anchor: --jhzzz-token-group !important;
}

/* r105: dashboard lessons use the same crisp two-path SVG pointer as the
   token lessons. Remove the old pseudo-element pointer so it cannot leave a
   blurred duplicate after a theme or viewport change. */
.dashv2 > .jhzzz-native-tip::before,
.dashv2 > .jhzzz-native-tip::after {
  display: none !important;
  content: none !important;
}

.dashv2 > .jhzzz-native-tip-arrow {
  position: fixed !important;
  z-index: 1604 !important;
  display: block !important;
  width: 24px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.dashv2 > .jhzzz-native-tip-arrow[data-jhzzz-tip-id="dashboard-balance"] {
  top: calc(anchor(bottom) + 2px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  transform: rotate(180deg) !important;
  position-anchor: --jhzzz-dashboard-balance !important;
}

.dashv2 > .jhzzz-native-tip-arrow[data-jhzzz-tip-id="dashboard-usage"] {
  top: calc(anchor(top) - 11px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(anchor(center) - 12px) !important;
  transform: none !important;
  position-anchor: --jhzzz-dashboard-usage !important;
}

/* r106: keep dashboard cards inside the phone viewport while the standalone
   arrow remains anchored to the real dashboard control.  The balance button
   can sit close to the left edge on narrow layouts; clamping the card only
   prevents the card body from escaping the viewport and does not move the
   arrow or change its target. */
@media (max-width: 767px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .dashv2 > .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-balance"],
    .dashv2 > .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"] {
      left: max(12px, min(calc(anchor(center) - var(--jhzzz-tip-half, 165px)), calc(100vw - var(--jhzzz-tip-half, 165px) - 12px))) !important;
      transform: none !important;
    }

    .dashv2:has(> .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"]) .dashv2-card:nth-child(n + 2) {
      transform: translateY(290px) !important;
    }

    .dashv2:has(> .jhzzz-native-tip[data-jhzzz-tip-id="dashboard-usage"]) .mb-4:has(> .grid > .dashv2-card:nth-child(1)) {
      padding-bottom: 290px !important;
    }
  }
}

/* r103: keep the proven reference card UI and layer paint behavior, while
   allowing only the card-owned SVG arrow to render. Legacy card/button
   pseudo-elements are disabled so no arrow can sit in the button text. */
.jhzzz-native-tip-layer-token > .jhzzz-native-tip::before,
.jhzzz-native-tip-layer-token > .jhzzz-native-tip::after,
.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;
}

/* r107: the legacy stylesheet re-enables button-owned arrows through a more
   specific :has() selector. The native cards already render one standalone
   SVG pointer each, so keep every target button pseudo-element disabled. */
#root .tk-page button[data-guide="create-token-btn"]::before,
#root .tk-page button[data-guide="create-token-btn"]::after,
#root .tk-page button[data-jhzzz-token-import]::before,
#root .tk-page button[data-jhzzz-token-import]::after,
#root .tk-page button[data-jhzzz-token-group]::before,
#root .tk-page button[data-jhzzz-token-group]::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* r110: keep the desktop import lesson and its SVG pointer clear of the
   first-row button's painted area and shadow. This changes only the anchored
   card gap; token table row heights remain untouched. */
@media (min-width: 768px) {
  @supports (anchor-name: --jhzzz-anchor) and (top: anchor(bottom)) {
    .jhzzz-native-tip-layer-token > .jhzzz-native-tip[data-jhzzz-tip-id="token-import"] {
      top: calc(anchor(bottom) + 18px) !important;
    }

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