/* 媒体尺寸推荐助手 · 悬浮提示 */
.mg-tip{
  position:fixed;
  z-index:80;
  max-width:248px;
  background:#0b1220;
  color:#e8eefb;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 32px rgba(0,0,0,.34);
  font-size:12.5px;
  line-height:1.5;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  display:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}
.mg-tip.show{opacity:1;transform:none}
.mg-tip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:12px;height:12px;
  background:#0b1220;
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  transform:translateX(-50%) rotate(45deg);
}
.mg-tip-size{font-size:16px;font-weight:800;letter-spacing:.3px;color:#fff}
.mg-tip-meta{font-size:12px;color:#9fb3d1;margin:2px 0 4px}
.mg-ratio{
  display:inline-block;
  background:#1b2a44;color:#7fd1ff;
  padding:1px 8px;border-radius:999px;font-weight:700;font-size:11.5px;
}
.mg-tip-role{font-weight:700;color:#fff;margin-bottom:2px}
.mg-tip-note{font-size:11.5px;color:#9fb3d1}

/* 当提示框显示在元素上方时，箭头朝下 */
.mg-tip.mg-below::after{
  bottom:auto;top:-6px;
  border:none;
  border-left:1px solid rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14);
}