.dd{
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  height: auto;
  opacity: 0;
  padding: 8px 0;
  position: fixed;
  transform: translateY(-4px);
  transition: 
    opacity .12s ease, 
    transform .12s ease, 
    visibility 0s linear .12s;
  visibility: hidden;       
  width: 260px;
  z-index: 30}
.dd[data-open]{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s}
/* Arrow  */
.dd::after{
  background: var(--white);
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: var(--arrow-x, 20px);   /* changed to use --arrow-x */
  
  top: -6px;                   /* default: arrow at top edge */
  bottom: auto;                /* reset bottom */
  
  transform: rotate(45deg);    /* keep consistent */
  
  /* borders for top edge */
  border-left: 1px solid var(--gray-300);
  border-top: 1px solid var(--gray-300);
  border-right: 0;
  border-bottom: 0}
.dd[data-place="top"]::after{
  /* don't repeat background/size/left/etc — inherit from base */
  top: auto;            /* ⟵ stop pinning to the top edge */
  bottom: -6px;         /* ⟵ pin to the bottom edge of the menu */

  /* same rotation is fine */
  transform: rotate(45deg);

  /* swap borders so the visible edges align with the bottom border */
  border-left: 0;
  border-top: 0;
  border-right: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300)}
/* --- Menu layout inside a dropdown --- */
.dd .menu{
  list-style:none;
  margin:0;
  padding:0}
.dd .menu .group{
  border-top:1px solid var(--gray-300)}
.dd .menu .group:first-child{border-top:0}

.dd-item{
  align-items:center;
  color: var(--gray-900);
  cursor: pointer;
  display:grid;
  font-size: var(--fs-md);
  gap: var(--space-3);
  grid-auto-columns: min-content;
  padding: 10px 14px}
.dd-item:hover{background: var(--gray-100)}
.dd-item[disabled]{opacity:.6; pointer-events:none}
.dd-item.a{
  grid-template-columns: auto 1fr auto}
.dd-item.b{
  grid-template-columns: 1fr auto}
.dd-item.a .icon{
  height:18px;
  width:18px}
.dd-footer{
  border-top: 1px solid var(--gray-300);
  font-size: var(--fs-xs);
  padding: 10px 14px; 
  text-align: center}