[data-ui-tooltip]:not(button):not(a) { 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 #c7cbd1; border-radius: 6px;
    background: #fff; color: #15171a; 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,.18);
}
.ui-tooltip::after {
    content: ''; position: absolute; top: 100%; left: var(--tooltip-arrow, 50%);
    transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff;
}
.ui-tooltip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
.ui-tooltip.is-left::after { top: 50%; right: -10px; left: auto; transform: translateY(-50%); border-top-color: transparent; border-left-color: #fff; }
.ui-tooltip.is-right::after { top: 50%; right: auto; bottom: auto; left: -10px; transform: translateY(-50%); border-top-color: transparent; border-right-color: #fff; }

.ui-tooltip__table { border-collapse: collapse; color: inherit; font: inherit; }
.ui-tooltip__table th { text-align: left; font-weight: 400; padding: 3px 18px 3px 0; }
.ui-tooltip__table td { text-align: right; padding: 3px 0; white-space: nowrap; }