[data-ui-tooltip] { cursor: help; }
.ui-tooltip {
    position: fixed; z-index: 10000; width: max-content; max-width: min(420px, calc(100vw - 24px));
    padding: 6px 10px; border: 1px solid #2d3748; border-radius: 6px;
    background: #0b0d10; color: #fff; font: 12px/1.5 Inter, sans-serif;
    white-space: normal; overflow-wrap: anywhere; pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.ui-tooltip::after {
    content: ''; position: absolute; top: 100%; left: var(--tooltip-arrow, 50%);
    transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0b0d10;
}
.ui-tooltip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0b0d10; }
.ui-tooltip.is-left::after { top: 50%; right: -10px; left: auto; transform: translateY(-50%); border-top-color: transparent; border-left-color: #0b0d10; }
.ui-tooltip.is-right::after { top: 50%; right: auto; bottom: auto; left: -10px; transform: translateY(-50%); border-top-color: transparent; border-right-color: #0b0d10; }