.jhzzz-coachmark-anchor { position: relative !important; }
.jhzzz-coachmark { box-sizing: border-box; position: absolute; z-index: 2147482000; width: 330px; padding: 18px; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 10px; background: var(--semi-color-bg-0, #fff); color: var(--semi-color-text-0, #1f2329); box-shadow: 0 16px 42px rgb(15 23 42 / 22%); text-align: left; animation: jhzzz-coachmark-in .16s ease-out; }
.jhzzz-coachmark-bottom { top: calc(100% + 14px); left: 50%; transform: translateX(-50%); }
.jhzzz-coachmark-bottom-center { top: calc(100% + 14px); left: 50%; transform: translateX(-50%); }
.jhzzz-coachmark-bottom-left { top: calc(100% + 14px); left: 0; }
.jhzzz-coachmark-bottom-right { top: calc(100% + 14px); right: 0; }
.jhzzz-coachmark-close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--semi-color-text-2, #8f959e); cursor: pointer; font-size: 20px; line-height: 20px; }
.jhzzz-coachmark-title { padding-right: 20px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.jhzzz-coachmark-description { margin-top: 8px; color: var(--semi-color-text-2, #646a73); font-size: 13px; line-height: 1.7; }
.jhzzz-coachmark-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }
.jhzzz-coachmark-actions button { min-height: 28px; padding: 4px 12px; border-radius: 7px; cursor: pointer; font: inherit; }
.jhzzz-coachmark-actions [data-jhzzz-tip-permanent] { border: 0; background: transparent; color: var(--semi-color-text-0, #1f2329); }
@keyframes jhzzz-coachmark-in { from { opacity: 0; transform: translateY(-4px) translateX(-50%); } to { opacity: 1; transform: translateY(0) translateX(-50%); } }
.jhzzz-coachmark-bottom-left { animation-name: jhzzz-coachmark-in-left; }
.jhzzz-coachmark-bottom-right { animation-name: jhzzz-coachmark-in-right; }
@keyframes jhzzz-coachmark-in-left { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jhzzz-coachmark-in-right { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.jhzzz-token-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; padding: 6px 0; }
.jhzzz-token-summary-item { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 9px; border: 1px solid var(--semi-color-border, #e5e6eb); background: var(--semi-color-bg-0, #fff); color: var(--semi-color-text-2, #646a73); font-size: 12px; white-space: nowrap; }
.jhzzz-token-summary-value { color: var(--semi-color-text-0, #1f2329); font-weight: 650; }
.jhzzz-token-summary-extra { color: var(--semi-color-text-2, #8f959e); }
.jhzzz-token-endpoint-copy { padding: 0 4px; border: 0; background: transparent; color: var(--semi-color-primary, #2563eb); cursor: pointer; font: inherit; }
.jhzzz-token-group-overlay { position: fixed; z-index: 2147482500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(15 23 42 / 35%); }
.jhzzz-token-group-modal { box-sizing: border-box; width: min(440px, calc(100vw - 40px)); padding: 20px; 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 24px 64px rgb(15 23 42 / 24%); }
.jhzzz-token-group-modal header, .jhzzz-token-group-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jhzzz-token-group-modal header strong { font-size: 17px; }
.jhzzz-token-group-modal header button { border: 0; background: transparent; color: var(--semi-color-text-2, #8f959e); cursor: pointer; font-size: 22px; }
.jhzzz-token-group-modal p { margin: 12px 0 16px; color: var(--semi-color-text-2, #646a73); font-size: 13px; line-height: 1.6; }
.jhzzz-token-group-modal label { display: grid; gap: 7px; color: var(--semi-color-text-1, #4b535d); font-size: 13px; }
.jhzzz-token-group-modal select { height: 36px; padding: 0 10px; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 7px; background: var(--semi-color-bg-0, #fff); color: inherit; font: inherit; }
.jhzzz-token-group-modal footer { justify-content: flex-end; margin-top: 20px; }
.jhzzz-token-group-modal footer button { min-height: 32px; padding: 5px 14px; border: 1px solid var(--semi-color-border, #e5e6eb); border-radius: 7px; background: var(--semi-color-bg-0, #fff); color: inherit; cursor: pointer; font: inherit; }
.jhzzz-token-group-modal footer .primary { border-color: var(--semi-color-primary, #2563eb); background: var(--semi-color-primary, #2563eb); color: #fff; }
@media (max-width: 700px) { .jhzzz-coachmark { width: min(320px, calc(100vw - 32px)); } .jhzzz-coachmark-bottom-right, .jhzzz-coachmark-bottom-left { left: 0; right: auto; } .jhzzz-token-summary { width: 100%; margin-right: 0; } .jhzzz-token-summary-item { flex: 1 1 calc(50% - 8px); justify-content: space-between; overflow: hidden; } }