.cf-help-label-row {
    align-items: baseline;
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.cf-help-label-row label {
    display: inline-block;
    line-height: 1.2;
    margin-bottom: 0 !important;
}

.cf-help-popover-wrap {
    align-self: baseline;
    display: inline-flex;
    position: relative;
    top: 0;
}

.cf-help-popover-trigger {
    align-items: center;
    background: transparent;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 999px;
    color: var(--color-base-500, #6b7280);
    cursor: pointer;
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    height: 14px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 14px;
}

.cf-help-popover-trigger:hover {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-base-700, #374151);
}

.cf-help-popover-trigger:focus-visible {
    outline: 2px solid var(--color-primary-500, #6366f1);
    outline-offset: 2px;
}

.cf-help-popover {
    background: var(--color-base-0, #ffffff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    color: var(--color-font-default-light, #1f2937);
    font-size: 12px;
    line-height: 1.4;
    max-width: 320px;
    min-width: 220px;
    padding: 0.6rem 0.7rem;
    position: absolute;
    top: calc(100% + 8px);
    z-index: 80;
}

.cf-help-popover p {
    margin: 0;
}

.cf-help-popover p + p {
    margin-top: 0.5rem;
}

.dark .cf-help-popover-trigger {
    background: transparent;
    border-color: var(--color-base-600, #4b5563);
    color: var(--color-base-400, #9ca3af);
}

.dark .cf-help-popover-trigger:hover {
    background: var(--color-base-700, #374151);
}

.dark .cf-help-popover {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #e5e7eb);
}